fix(TextLink): Add TextLink and TextLinkRenderer components (#102)

seek-oss · Feb 22, 2019 · 29ae7ae · 29ae7ae
1 parent 9b21dc7
commit 29ae7ae
Show file tree

Hide file tree

Showing 20 changed files with 173 additions and 13 deletions.
diff --git a/docs/src/App/App.tsx b/docs/src/App/App.tsx
@@ -3,10 +3,10 @@ import * as themes from '../../../lib/themes';
 import * as components from '../../../lib/components';
 import React, { Component } from 'react';
 import { withRouter, Route, RouteComponentProps } from 'react-router';
-import { Link } from 'react-router-dom';
 import classnames from 'classnames';
 import Logo from './Logo/Logo';
 import ComponentRoute from './ComponentRoute/ComponentRoute';
+import { Link, ExternalLink } from './Link';
 import styles from './App.css.js';
 
 const { ThemeProvider, Text, Box, BulletList, Bullet } = components;
@@ -55,7 +55,7 @@ export default withRouter(
               paddingRight="gutter"
             >
               <div style={{ position: 'relative' }}>
-                <Link to="/" style={{ display: 'inline-block' }}>
+                <Link to="/">
                   <Logo />
                 </Link>
 
@@ -111,19 +111,17 @@ export default withRouter(
                 <Box paddingBottom="small">
                   <BulletList>
                     <Bullet>
-                      <a
-                        style={{ color: 'inherit' }}
+                      <ExternalLink
                         href="https://github.com/seek-oss/braid-design-system"
                         target="_blank"
                         rel="noopener noreferrer"
                         onClick={this.closeMenu}
                       >
                         Source
-                      </a>
+                      </ExternalLink>
                     </Bullet>
                     <Bullet>
                       <Link
-                        style={{ color: 'inherit' }}
                         to="/playroom"
                         target="_blank"
                         onClick={this.closeMenu}
@@ -146,7 +144,6 @@ export default withRouter(
                       .map(componentName => (
                         <Bullet key={componentName}>
                           <Link
-                            style={{ color: 'inherit' }}
                             to={`/components/${componentName}`}
                             onClick={this.closeMenu}
                           >
@@ -168,7 +165,6 @@ export default withRouter(
                     .map(iconName => (
                       <Bullet key={iconName}>
                         <Link
-                          style={{ color: 'inherit' }}
                           to={`/icons/${iconName}`}
                           onClick={this.closeMenu}
                         >

diff --git a/docs/src/App/ComponentRoute/ComponentRoute.tsx b/docs/src/App/ComponentRoute/ComponentRoute.tsx
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 import dedent from 'dedent';
 import ComponentProps from '../ComponentProps/ComponentProps';
+import { ExternalLink } from '../Link';
 import { ThemeProvider, Box, Text } from '../../../../lib/components';
 import {
   wireframe,
@@ -81,7 +82,7 @@ export default class ComponentRoute extends Component<ComponentRouteProps> {
               }}
             >
               <Text component="pre" color="white">
-                {render
+                {render && !code
                   ? reactElementToJSXString(render({ id: 'id' }), {
                       useBooleanShorthandSyntax: false,
                       showDefaultProps: false,
@@ -103,9 +104,13 @@ export default class ComponentRoute extends Component<ComponentRouteProps> {
         </Box>
         <Box paddingBottom="large">
           <Text>
-            <a href={sourceUrl} target="_blank" rel="noopener noreferrer">
+            <ExternalLink
+              href={sourceUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
               View on GitHub
-            </a>
+            </ExternalLink>
           </Text>
         </Box>
       </Box>

diff --git a/docs/src/App/Link.tsx b/docs/src/App/Link.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Link as ReactRouterLink, LinkProps } from 'react-router-dom';
+import { TextLinkRenderer, TextLink } from '../../../lib/components';
+
+export const Link = (props: LinkProps) => (
+  <TextLinkRenderer>
+    {textLinkProps => <ReactRouterLink {...props} {...textLinkProps} />}
+  </TextLinkRenderer>
+);
+
+export const ExternalLink = TextLink;
diff --git a/lib/components/TextLink/TextLink.docs.tsx b/lib/components/TextLink/TextLink.docs.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import TextLink from './TextLink';
+import Text from '../Text/Text';
+import { ComponentDocs } from '../../../docs/src/types';
+
+const docs: ComponentDocs = {
+  examples: [
+    {
+      label: 'Standard Text Link',
+      render: () => (
+        <Text>
+          <TextLink href="">Link</TextLink>
+        </Text>
+      )
+    }
+  ]
+};
+
+export default docs;
diff --git a/lib/components/TextLink/TextLink.tsx b/lib/components/TextLink/TextLink.tsx
@@ -0,0 +1,19 @@
+import React, { Component, AllHTMLAttributes } from 'react';
+import { Omit } from 'utility-types';
+import TextLinkRenderer from '../TextLinkRenderer/TextLinkRenderer';
+
+type AnchorProps = AllHTMLAttributes<HTMLAnchorElement>;
+export interface TextLinkProps
+  extends Omit<AnchorProps, 'className' | 'style'> {}
+
+export default class TextLink extends Component<TextLinkProps> {
+  static displayName = 'TextLink';
+
+  render() {
+    return (
+      <TextLinkRenderer>
+        {props => <a {...this.props} {...props} />}
+      </TextLinkRenderer>
+    );
+  }
+}
diff --git a/lib/components/TextLinkRenderer/TextLinkRenderer.css.js b/lib/components/TextLinkRenderer/TextLinkRenderer.css.js
@@ -0,0 +1,8 @@
+export default {
+  '.textDecoration': {
+    textDecoration: 'none',
+    '&:hover': {
+      textDecoration: 'underline'
+    }
+  }
+};
diff --git a/lib/components/TextLinkRenderer/TextLinkRenderer.css.js.d.ts b/lib/components/TextLinkRenderer/TextLinkRenderer.css.js.d.ts
@@ -0,0 +1,3 @@
+// This file is automatically generated.
+// Please do not change this file!
+export const textDecoration: string;
diff --git a/lib/components/TextLinkRenderer/TextLinkRenderer.docs.tsx b/lib/components/TextLinkRenderer/TextLinkRenderer.docs.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import TextLinkRenderer from './TextLinkRenderer';
+import Text from '../Text/Text';
+import { ComponentDocs } from '../../../docs/src/types';
+
+const docs: ComponentDocs = {
+  examples: [
+    {
+      label: 'TextLink with Custom Renderer',
+      render: () => (
+        <Text>
+          <TextLinkRenderer>
+            {textLinkProps => (
+              <Link to="" {...textLinkProps}>
+                Link
+              </Link>
+            )}
+          </TextLinkRenderer>
+        </Text>
+      ),
+      code: `
+        import React from 'react';
+        import { Link } from 'react-router-dom';
+        import { TextLinkRenderer } from 'braid-design-system';
+
+        export default () => (
+          <Text>
+            <TextLinkRenderer>
+              {textLinkProps => (
+                <Link to="/" {...textLinkProps}>
+                  Link
+                </Link>
+              )}
+            </TextLinkRenderer>
+          </Text>
+        );
+      `
+    }
+  ]
+};
+
+export default docs;
diff --git a/lib/components/TextLinkRenderer/TextLinkRenderer.tsx b/lib/components/TextLinkRenderer/TextLinkRenderer.tsx
@@ -0,0 +1,35 @@
+import React, { Component, ReactNode, CSSProperties } from 'react';
+import classnames from 'classnames';
+import ThemeConsumer from '../ThemeConsumer/ThemeConsumer';
+import styles from './TextLinkRenderer.css.js';
+
+interface StyleProps {
+  style: CSSProperties;
+  className: string;
+}
+export interface TextLinkRendererProps {
+  children: (styleProps: StyleProps) => ReactNode;
+}
+
+export default class TextLinkRenderer extends Component<TextLinkRendererProps> {
+  static displayName = 'TextLinkRenderer';
+
+  render() {
+    const { children } = this.props;
+
+    return (
+      <ThemeConsumer>
+        {theme =>
+          children({
+            style: {},
+            className: classnames([
+              theme.atoms.reset.a,
+              theme.atoms.color.link,
+              styles.textDecoration
+            ])
+          })
+        }
+      </ThemeConsumer>
+    );
+  }
+}
diff --git a/lib/components/index.ts b/lib/components/index.ts
@@ -19,6 +19,10 @@ export { default as Radio } from './Radio/Radio';
 export { default as Reset } from './Reset/Reset';
 export { default as Strong } from './Strong/Strong';
 export { default as Text } from './Text/Text';
+export { default as TextLink } from './TextLink/TextLink';
+export {
+  default as TextLinkRenderer
+} from './TextLinkRenderer/TextLinkRenderer';
 export { default as ChevronIcon } from './icons/ChevronIcon/ChevronIcon';
 export { default as ErrorIcon } from './icons/ErrorIcon/ErrorIcon';
 export { default as InfoIcon } from './icons/InfoIcon/InfoIcon';

diff --git a/lib/stories/all.stories.tsx b/lib/stories/all.stories.tsx
@@ -1,5 +1,6 @@
 import { storiesOf } from 'sku/@storybook/react';
 import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 import values from 'lodash/values';
 import * as themes from '../themes';
 import { ThemeProvider } from '../components';
@@ -27,7 +28,9 @@ req.keys().forEach(filename => {
 
     values(themes).forEach(theme => {
       stories.add(`${label} (${theme.name})`, () => (
-        <ThemeProvider theme={theme}>{render({ id: 'id' })}</ThemeProvider>
+        <BrowserRouter>
+          <ThemeProvider theme={theme}>{render({ id: 'id' })}</ThemeProvider>
+        </BrowserRouter>
       ));
     });
   });

diff --git a/lib/themes/jobStreet/atoms/color.css.js b/lib/themes/jobStreet/atoms/color.css.js
@@ -1,4 +1,10 @@
 export default {
+  '.link': {
+    color: '#1c3f94',
+    '&:hover,&:focus': {
+      color: '#142d69'
+    }
+  },
   '.black': { color: '#333' },
   '.white': { color: '#fff' },
   '.critical': { color: 'red' },

diff --git a/lib/themes/jobStreet/atoms/color.css.js.d.ts b/lib/themes/jobStreet/atoms/color.css.js.d.ts
@@ -3,6 +3,7 @@
 export const black: string;
 export const critical: string;
 export const formAccent: string;
+export const link: string;
 export const neutral: string;
 export const positive: string;
 export const secondary: string;

diff --git a/lib/themes/seekAnz/atoms/color.css.js b/lib/themes/seekAnz/atoms/color.css.js
@@ -1,4 +1,5 @@
 export default {
+  '.link': { color: '#2765cf' },
   '.black': { color: '#1c1c1c' },
   '.white': { color: '#fff' },
   '.critical': { color: '#e60278' },

diff --git a/lib/themes/seekAnz/atoms/color.css.js.d.ts b/lib/themes/seekAnz/atoms/color.css.js.d.ts
@@ -3,6 +3,7 @@
 export const black: string;
 export const critical: string;
 export const formAccent: string;
+export const link: string;
 export const neutral: string;
 export const positive: string;
 export const secondary: string;

diff --git a/lib/themes/seekAsia/atoms/color.css.js b/lib/themes/seekAsia/atoms/color.css.js
@@ -8,6 +8,7 @@ import {
 } from './private/palette';
 
 export default {
+  '.link': { color: blue2 },
   '.black': { color: black },
   '.white': { color: white },
   '.critical': { color: alert },

diff --git a/lib/themes/seekAsia/atoms/color.css.js.d.ts b/lib/themes/seekAsia/atoms/color.css.js.d.ts
@@ -3,6 +3,7 @@
 export const black: string;
 export const critical: string;
 export const formAccent: string;
+export const link: string;
 export const neutral: string;
 export const positive: string;
 export const secondary: string;

diff --git a/lib/themes/theme.d.ts b/lib/themes/theme.d.ts
@@ -56,7 +56,8 @@ export type ColorVariants =
   | 'positive'
   | 'secondary'
   | 'formAccent'
-  | 'neutral';
+  | 'neutral'
+  | 'link';
 type FillVariants =
   | 'currentColor'
   | 'formAccent'

diff --git a/lib/themes/wireframe/atoms/color.css.js b/lib/themes/wireframe/atoms/color.css.js
@@ -1,4 +1,5 @@
 export default {
+  '.link': { color: '#4c77bb' },
   '.black': { color: '#2b2b2b' },
   '.white': { color: 'white' },
   '.critical': { color: 'red' },

diff --git a/lib/themes/wireframe/atoms/color.css.js.d.ts b/lib/themes/wireframe/atoms/color.css.js.d.ts
@@ -3,6 +3,7 @@
 export const black: string;
 export const critical: string;
 export const formAccent: string;
+export const link: string;
 export const neutral: string;
 export const positive: string;
 export const secondary: string;