horizontal rule conversion to ts

src-docs/src/views/horizontal_rule/horizontal_rule.js → src-docs/src/views/horizontal_rule/horizontal_rule.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {
   EuiHorizontalRule,
-} from '../../../../src/components';
+} from '../../../../src/components/horizontal_rule';
 
 export default () => (
   <div>

src-docs/src/views/horizontal_rule/horizontal_rule_margin.js → src-docs/src/views/horizontal_rule/horizontal_rule_margin.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {
   EuiHorizontalRule,
-} from '../../../../src/components';
+} from '../../../../src/components/horizontal_rule';
 
 export default () => (
   <div>

src/components/horizontal_rule/horizontal_rule.js → src/components/horizontal_rule/horizontal_rule.tsx

@@ -1,7 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { SFC, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
+import { CommonProps } from '../common';
+
+export type EuiHorizontalRuleSize = keyof typeof sizeToClassNameMap;
+export type EuiHorizontalRuleMargin = keyof typeof marginToClassNameMap;
+
+export interface EuiHorizontalRuleProps {
+  /**
+   * Defines the width of the HR.
+   */
+  size?: EuiHorizontalRuleSize;
+  margin?: EuiHorizontalRuleMargin;
+}
+
 const sizeToClassNameMap = {
   full: 'euiHorizontalRule--full',
   half: 'euiHorizontalRule--half',
@@ -22,16 +34,18 @@ const marginToClassNameMap = {
 
 export const MARGINS = Object.keys(marginToClassNameMap);
 
-export const EuiHorizontalRule = ({
+export const EuiHorizontalRule: SFC<
+CommonProps & HTMLAttributes<HTMLHRElement> & EuiHorizontalRuleProps
+> = ({
   className,
   size,
   margin,
   ...rest
 }) => {
   const classes = classNames(
     'euiHorizontalRule',
-    sizeToClassNameMap[size],
-    marginToClassNameMap[margin],
+    size ? sizeToClassNameMap[size] : undefined,
+    margin ? marginToClassNameMap[margin] : undefined,
     className
   );
 
@@ -43,13 +57,6 @@ export const EuiHorizontalRule = ({
   );
 };
 
-EuiHorizontalRule.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  size: PropTypes.oneOf(SIZES),
-  margin: PropTypes.oneOf(MARGINS),
-};
-
 EuiHorizontalRule.defaultProps = {
   size: 'full',
   margin: 'l',

src/components/index.d.ts

@@ -14,7 +14,6 @@
 /// <reference path="./flyout/index.d.ts" />
 /// <reference path="./form/index.d.ts" />
 /// <reference path="./health/index.d.ts" />
-/// <reference path="./horizontal_rule/index.d.ts" />
 /// <reference path="./icon/index.d.ts" />
 /// <reference path="./key_pad_menu/index.d.ts" />
 /// <reference path="./link/index.d.ts" />