Text props

Author: siddharthkp

packages/components/src/components/Label/index.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import css from '@styled-system/css';
-import { Text, ITextProps } from '../Text';
+import { Text, TextProps } from '../Text';
 
-type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & ITextProps & {};
+type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & TextProps & {};
 
 export const Label = styled(Text).attrs({ as: 'label' })<LabelProps>(css({}));

packages/components/src/components/Link/index.tsx

@@ -1,27 +1,24 @@
 import React from 'react';
-import styled from 'styled-components';
 import css from '@styled-system/css';
-import { Text, ITextProps } from '../Text';
+import { Text, TextProps } from '../Text';
 
 type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
   React.AnchorHTMLAttributes<HTMLSpanElement> &
-  ITextProps;
-
-const LinkElement = styled(Text).attrs({ as: 'a' })<LinkProps>(
-  css({
-    cursor: 'pointer',
-    textDecoration: 'none',
-    transition: 'color ease',
-    transitionDuration: theme => theme.speeds[2],
-    ':hover, :focus': {
-      color: 'foreground',
-    },
-  })
-);
+  TextProps;
 
 export const Link: React.FC<LinkProps> = props => (
-  <LinkElement
+  <Text
+    as="a"
     rel={props.target === '_blank' ? 'noopener noreferrer' : null}
+    css={css({
+      cursor: 'pointer',
+      textDecoration: 'none',
+      transition: 'color ease',
+      transitionDuration: theme => theme.speeds[2],
+      ':hover, :focus': {
+        color: 'foreground',
+      },
+    })}
     {...props}
   />
 );

packages/components/src/components/SkeletonText/index.tsx

@@ -2,8 +2,6 @@ import styled, { css as styledcss, keyframes } from 'styled-components';
 import Color from 'color';
 import { Element } from '../Element';
 
-// export interface ITextProps extends React.HTMLAttributes<HTMLSpanElement> {}
-
 const pulse = keyframes`
   0% { background-position: 100% 50%; }
   100% { background-position: -100% 50%; }

packages/components/src/components/Text/index.tsx

@@ -14,17 +14,17 @@ const overflowStyles = {
   whiteSpace: 'nowrap',
 };
 
-export interface ITextProps extends React.HTMLAttributes<HTMLSpanElement> {
+export type TextProps = React.AnchorHTMLAttributes<HTMLSpanElement> & {
   size?: number;
   align?: string;
   weight?: string;
   block?: boolean;
   maxWidth?: number | string;
   variant?: 'body' | 'muted' | 'danger';
   dateTime?: string;
-}
+};
 
-export const Text = styled(Element).attrs({ as: 'span' })<ITextProps>(
+export const Text = styled(Element).attrs({ as: 'span' })<TextProps>(
   ({ size, align, weight, block, variant = 'body', maxWidth, ...props }) =>
     css({
       fontSize: size || 'inherit', // from theme.fontSizes