Add TopNavigation component (#1012)

.changeset/spotty-adults-melt.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Added a new TopNavigation component. It is part of the [application shell](https://developers.google.com/web/fundamentals/architecture/app-shell) and contains the branding, page links, and the user profile menu.

.changeset/tough-bulldogs-sing.md

@@ -0,0 +1,5 @@
+---
+'@sumup/icons': minor
+---
+
+Added classnames to parts of the SumUp logo so they can be targeted for individual styling.

.storybook/preview.js

@@ -36,6 +36,14 @@ const SORT_ORDER = {
   Typography: { Headline: {}, SubHeadline: {}, Body: {} },
   Layout: {},
   Forms: {},
+  Navigation: {
+    TopNavigation: {},
+    SideNavigation: {},
+    Pagination: {},
+    Tabs: {},
+    Sidebar: {},
+    Hamburger: {},
+  },
   Components: {},
   Hooks: {},
   Packages: {

.storybook/util/theme.js

@@ -9,6 +9,7 @@ import {
   SubHeadline,
   Body,
   List,
+  spacing,
 } from '@sumup/circuit-ui';
 
 import { Link } from '../components';
@@ -36,16 +37,14 @@ const withThemeProvider = (Component, baseProps = {}) => (props = {}) => (
 const TEXT_SIZE = 'one';
 
 const headlineStyles = (theme) => css`
+  margin-bottom: ${theme.spacings.mega};
+
   *:not(h1):not(h2):not(h3) + & {
     margin-top: ${theme.spacings.peta};
-    margin-bottom: ${theme.spacings.giga};
+    margin-bottom: ${theme.spacings.mega};
   }
 `;
 
-const subHeadlineStyles = (theme) => css`
-  margin-top: ${theme.spacings.giga};
-`;
-
 const italicStyles = css`
   font-style: italic;
 `;
@@ -69,13 +68,17 @@ export const components = {
   h4: withThemeProvider(Headline, {
     as: 'h4',
     size: 'four',
-    css: subHeadlineStyles,
+    css: spacing({ top: 'giga' }),
   }),
-  subheadline: withThemeProvider(SubHeadline, {
-    as: 'subheadline',
-    css: subHeadlineStyles,
+  h5: withThemeProvider(SubHeadline, {
+    as: 'h5',
+    css: spacing({ top: 'giga' }),
+  }),
+  p: withThemeProvider(Body, {
+    as: 'p',
+    size: TEXT_SIZE,
+    css: spacing({ bottom: 'kilo' }),
   }),
-  p: withThemeProvider(Body, { as: 'p', size: TEXT_SIZE }),
   li: withThemeProvider(Body, { as: 'li', size: TEXT_SIZE }),
   strong: withThemeProvider(Body, {
     as: 'strong',

babel.config.json

@@ -6,6 +6,7 @@
       "@emotion/babel-preset-css-prop",
       {
         "autoLabel": false,
+        "sourceMap": false,
         "labelFormat": "[filename]--[local]"
       }
     ]

packages/circuit-ui/components/Anchor/Anchor.tsx

@@ -92,10 +92,9 @@ export const Anchor = forwardRef(
   ({ tracking, ...props }: AnchorProps, ref?: BaseProps['ref']): ReturnType => {
     const components = useComponents();
 
-    // Need to typecast here because the StyledAnchor expects a button-like
-    // component for its `as` prop. It's safe to ignore that constraint here.
-    /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-    const Link = components.Link as any;
+    // Need to typecast here because the styled component types restrict the
+    // `as` prop to a string. It's safe to ignore that constraint here.
+    const Link = (components.Link as unknown) as string;
 
     const handleClick = useClickEvent(props.onClick, tracking, 'anchor');
 

packages/circuit-ui/components/BaseStyles/__snapshots__/BaseStylesService.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BaseStylesService should return the global base styles 1`] = `"@font-face{font-family:'aktiv-grotesk';font-weight:400;font-display:swap;src:url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2') format('woff2'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff') format('woff'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot') format('embedded-opentype');}@font-face{font-family:'aktiv-grotesk';font-weight:700;font-display:swap;src:url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2') format('woff2'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff') format('woff'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot') format('embedded-opentype');}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}blockquote,q{quotes:none;}blockquote::before,blockquote::after,q::before,q::after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}*,*::before,*::after{box-sizing:inherit;}html{box-sizing:border-box;overflow-x:hidden;[type='button']{appearance:none;}}body{background-color:#FFF;color:#1A1A1A;font-size:16px;line-height:24px;;;}html,body,input,select,optgroup,textarea,button{font-weight:400;font-family:aktiv-grotesk, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\";font-feature-settings:'kern';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}pre,code{font-family:Consolas, monaco, monospace;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkJhc2VTdHlsZXNTZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNCOEQiLCJmaWxlIjoiQmFzZVN0eWxlc1NlcnZpY2UudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAyMDE5LCBTdW1VcCBMdGQuXG4gKiBMaWNlbnNlZCB1bmRlciB0aGUgQXBhY2hlIExpY2Vuc2UsIFZlcnNpb24gMi4wICh0aGUgXCJMaWNlbnNlXCIpO1xuICogeW91IG1heSBub3QgdXNlIHRoaXMgZmlsZSBleGNlcHQgaW4gY29tcGxpYW5jZSB3aXRoIHRoZSBMaWNlbnNlLlxuICogWW91IG1heSBvYnRhaW4gYSBjb3B5IG9mIHRoZSBMaWNlbnNlIGF0XG4gKlxuICogaHR0cDovL3d3dy5hcGFjaGUub3JnL2xpY2Vuc2VzL0xJQ0VOU0UtMi4wXG4gKlxuICogVW5sZXNzIHJlcXVpcmVkIGJ5IGFwcGxpY2FibGUgbGF3IG9yIGFncmVlZCB0byBpbiB3cml0aW5nLCBzb2Z0d2FyZVxuICogZGlzdHJpYnV0ZWQgdW5kZXIgdGhlIExpY2Vuc2UgaXMgZGlzdHJpYnV0ZWQgb24gYW4gXCJBUyBJU1wiIEJBU0lTLFxuICogV0lUSE9VVCBXQVJSQU5USUVTIE9SIENPTkRJVElPTlMgT0YgQU5ZIEtJTkQsIGVpdGhlciBleHByZXNzIG9yIGltcGxpZWQuXG4gKiBTZWUgdGhlIExpY2Vuc2UgZm9yIHRoZSBzcGVjaWZpYyBsYW5ndWFnZSBnb3Zlcm5pbmcgcGVybWlzc2lvbnMgYW5kXG4gKiBsaW1pdGF0aW9ucyB1bmRlciB0aGUgTGljZW5zZS5cbiAqL1xuXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuaW1wb3J0IHsgU3R5bGVQcm9wcyB9IGZyb20gJy4uLy4uL3N0eWxlcy9zdHlsZWQnO1xuaW1wb3J0IHsgdHlwb2dyYXBoeSB9IGZyb20gJy4uLy4uL3N0eWxlcy9zdHlsZS1taXhpbnMnO1xuXG5jb25zdCBGT05UU19CQVNFX1VSTCA9ICdodHRwczovL3N0YXRpYy5zdW11cC5jb20vZm9udHMvbGF0aW4tZ3JlZWstY3lyaWxsaWMnO1xuXG5leHBvcnQgY29uc3QgY3JlYXRlQmFzZVN0eWxlcyA9ICh7IHRoZW1lIH06IFN0eWxlUHJvcHMpID0+IGNzc2BcbiAgLyoqXG4gICAqIFN0YXJ0IGRvd25sb2FkaW5nIGN1c3RvbSBmb250cyBhcyBzb29uIGFzIHBvc3NpYmxlLlxuICAgKi9cbiAgQGZvbnQtZmFjZSB7XG4gICAgZm9udC1mYW1pbHk6ICdha3Rpdi1ncm90ZXNrJztcbiAgICBmb250LXdlaWdodDogNDAwO1xuICAgIGZvbnQtZGlzcGxheTogc3dhcDtcbiAgICBzcmM6IHVybCgnJHtGT05UU19CQVNFX1VSTH0vYWt0aXYtZ3JvdGVzdC00MDAud29mZjInKSBmb3JtYXQoJ3dvZmYyJyksXG4gICAgICB1cmwoJyR7Rk9OVFNfQkFTRV9VUkx9L2FrdGl2LWdyb3Rlc3QtNDAwLndvZmYnKSBmb3JtYXQoJ3dvZmYnKSxcbiAgICAgIHVybCgnJHtGT05UU19CQVNFX1VSTH0vYWt0aXYtZ3JvdGVzdC00MDAuZW90JykgZm9ybWF0KCdlbWJlZGRlZC1vcGVudHlwZScpO1xuICB9XG4gIEBmb250LWZhY2Uge1xuICAgIGZvbnQtZmFtaWx5OiAnYWt0aXYtZ3JvdGVzayc7XG4gICAgZm9udC13ZWlnaHQ6IDcwMDtcbiAgICBmb250LWRpc3BsYXk6IHN3YXA7XG4gICAgc3JjOiB1cmwoJyR7Rk9OVFNfQkFTRV9VUkx9L2FrdGl2LWdyb3Rlc3QtNzAwLndvZmYyJykgZm9ybWF0KCd3b2ZmMicpLFxuICAgICAgdXJsKCcke0ZPTlRTX0JBU0VfVVJMfS9ha3Rpdi1ncm90ZXN0LTcwMC53b2ZmJykgZm9ybWF0KCd3b2ZmJyksXG4gICAgICB1cmwoJyR7Rk9OVFNfQkFTRV9VUkx9L2FrdGl2LWdyb3Rlc3QtNzAwLmVvdCcpIGZvcm1hdCgnZW1iZWRkZWQtb3BlbnR5cGUnKTtcbiAgfVxuXG4gIC8qKlxuICAgKiByZXNldC5jc3NcbiAgICogaHR0cDovL21leWVyd2ViLmNvbS9lcmljL3Rvb2xzL2Nzcy9yZXNldC9cbiAgICogdjIuMCB8IDIwMTEwMTI2XG4gICAqIExpY2Vuc2U6IG5vbmUgKHB1YmxpYyBkb21haW4pXG4gICAqL1xuICBodG1sLFxuICBib2R5LFxuICBkaXYsXG4gIHNwYW4sXG4gIGFwcGxldCxcbiAgb2JqZWN0LFxuICBpZnJhbWUsXG4gIGgxLFxuICBoMixcbiAgaDMsXG4gIGg0LFxuICBoNSxcbiAgaDYsXG4gIHAsXG4gIGJsb2NrcXVvdGUsXG4gIHByZSxcbiAgYSxcbiAgYWJicixcbiAgYWNyb255bSxcbiAgYWRkcmVzcyxcbiAgYmlnLFxuICBjaXRlLFxuICBjb2RlLFxuICBkZWwsXG4gIGRmbixcbiAgZW0sXG4gIGltZyxcbiAgaW5zLFxuICBrYmQsXG4gIHEsXG4gIHMsXG4gIHNhbXAsXG4gIHNtYWxsLFxuICBzdHJpa2UsXG4gIHN0cm9uZyxcbiAgc3ViLFxuICBzdXAsXG4gIHR0LFxuICB2YXIsXG4gIGIsXG4gIHUsXG4gIGksXG4gIGNlbnRlcixcbiAgZGwsXG4gIGR0LFxuICBkZCxcbiAgb2wsXG4gIHVsLFxuICBsaSxcbiAgZmllbGRzZXQsXG4gIGZvcm0sXG4gIGxhYmVsLFxuICBsZWdlbmQsXG4gIHRhYmxlLFxuICBjYXB0aW9uLFxuICB0Ym9keSxcbiAgdGZvb3QsXG4gIHRoZWFkLFxuICB0cixcbiAgdGgsXG4gIHRkLFxuICBhcnRpY2xlLFxuICBhc2lkZSxcbiAgY2FudmFzLFxuICBkZXRhaWxzLFxuICBlbWJlZCxcbiAgZmlndXJlLFxuICBmaWdjYXB0aW9uLFxuICBmb290ZXIsXG4gIGhlYWRlcixcbiAgaGdyb3VwLFxuICBtZW51LFxuICBuYXYsXG4gIG91dHB1dCxcbiAgcnVieSxcbiAgc2VjdGlvbixcbiAgc3VtbWFyeSxcbiAgdGltZSxcbiAgbWFyayxcbiAgYXVkaW8sXG4gIHZpZGVvIHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBib3JkZXI6IDA7XG4gICAgZm9udC1zaXplOiAxMDAlO1xuICAgIGZvbnQ6IGluaGVyaXQ7XG4gICAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lO1xuICB9XG4gIC8qIEhUTUw1IGRpc3BsYXktcm9sZSByZXNldCBmb3Igb2xkZXIgYnJvd3NlcnMgKi9cbiAgYXJ0aWNsZSxcbiAgYXNpZGUsXG4gIGRldGFpbHMsXG4gIGZpZ2NhcHRpb24sXG4gIGZpZ3VyZSxcbiAgZm9vdGVyLFxuICBoZWFkZXIsXG4gIGhncm91cCxcbiAgbWVudSxcbiAgbmF2LFxuICBzZWN0aW9uIHtcbiAgICBkaXNwbGF5OiBibG9jaztcbiAgfVxuICBib2R5IHtcbiAgICBsaW5lLWhlaWdodDogMTtcbiAgfVxuICBibG9ja3F1b3RlLFxuICBxIHtcbiAgICBxdW90ZXM6IG5vbmU7XG4gIH1cbiAgYmxvY2txdW90ZTo6YmVmb3JlLFxuICBibG9ja3F1b3RlOjphZnRlcixcbiAgcTo6YmVmb3JlLFxuICBxOjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgY29udGVudDogbm9uZTtcbiAgfVxuICB0YWJsZSB7XG4gICAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcbiAgICBib3JkZXItc3BhY2luZzogMDtcbiAgfVxuXG4gIC8qKlxuICAgKiBPdXIgZ2xvYmFsIHJlc2V0c1xuICAgKi9cblxuICAvKipcbiAgICogQmVzdCBwcmFjdGljZSBmcm9tIGh0dHA6Ly9jYWxsbWVuaWNrLmNvbS9wb3N0L3RoZS1uZXctYm94LXNpemluZy1yZXNldFxuICAgKiBUTERSOiBJdOKAmXMgZWFzaWVyIHRvIG92ZXJyaWRlIGFuZCBhIHNsaWdodCBwZXJmb3JtYW5jZSBib29zdC5cbiAgICovXG4gICosXG4gICo6OmJlZm9yZSxcbiAgKjo6YWZ0ZXIge1xuICAgIGJveC1zaXppbmc6IGluaGVyaXQ7XG4gIH1cblxuICBodG1sIHtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIG92ZXJmbG93LXg6IGhpZGRlbjtcblxuICAgIFt0eXBlPSdidXR0b24nXSB7XG4gICAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIH1cbiAgfVxuXG4gIGJvZHkge1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7dGhlbWUuY29sb3JzLmJvZHlCZ307XG4gICAgY29sb3I6ICR7dGhlbWUuY29sb3JzLmJvZHlDb2xvcn07XG4gICAgJHt0eXBvZ3JhcGh5KCdvbmUnKSh0aGVtZSl9O1xuICB9XG5cbiAgLyoqXG4gICAqIEZvcm0gZWxlbWVudHMgZG9uJ3QgaW5oZXJpdCBmb250IHNldHRpbmdzLlxuICAgKiBodHRwczovL3N0YWNrb3ZlcmZsb3cuY29tL3F1ZXN0aW9ucy8yNjE0MDA1MC93aHktaXMtZm9udC1mYW1pbHktbm90LWluaGVyaXRlZC1pbi1idXR0b24tdGFncy1hdXRvbWF0aWNhbGx5XG4gICAqL1xuICBodG1sLFxuICBib2R5LFxuICBpbnB1dCxcbiAgc2VsZWN0LFxuICBvcHRncm91cCxcbiAgdGV4dGFyZWEsXG4gIGJ1dHRvbiB7XG4gICAgZm9udC13ZWlnaHQ6ICR7dGhlbWUuZm9udFdlaWdodC5yZWd1bGFyfTtcbiAgICBmb250LWZhbWlseTogJHt0aGVtZS5mb250U3RhY2suZGVmYXVsdH07XG4gICAgZm9udC1mZWF0dXJlLXNldHRpbmdzOiAna2Vybic7XG4gICAgLXdlYmtpdC1mb250LXNtb290aGluZzogYW50aWFsaWFzZWQ7XG4gICAgLW1vei1vc3gtZm9udC1zbW9vdGhpbmc6IGdyYXlzY2FsZTtcbiAgICB0ZXh0LXJlbmRlcmluZzogb3B0aW1pemVMZWdpYmlsaXR5O1xuICB9XG5cbiAgcHJlLFxuICBjb2RlIHtcbiAgICBmb250LWZhbWlseTogJHt0aGVtZS5mb250U3RhY2subW9ub307XG4gIH1cbmA7XG4iXX0= */"`;
+exports[`BaseStylesService should return the global base styles 1`] = `"@font-face{font-family:'aktiv-grotesk';font-weight:400;font-display:swap;src:url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff2') format('woff2'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.woff') format('woff'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-400.eot') format('embedded-opentype');}@font-face{font-family:'aktiv-grotesk';font-weight:700;font-display:swap;src:url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff2') format('woff2'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.woff') format('woff'),url('https://static.sumup.com/fonts/latin-greek-cyrillic/aktiv-grotest-700.eot') format('embedded-opentype');}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}blockquote,q{quotes:none;}blockquote::before,blockquote::after,q::before,q::after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}*,*::before,*::after{box-sizing:inherit;}html{box-sizing:border-box;overflow-x:hidden;[type='button']{appearance:none;}}body{background-color:#FFF;color:#1A1A1A;font-size:16px;line-height:24px;;;}html,body,input,select,optgroup,textarea,button{font-weight:400;font-family:aktiv-grotesk, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\";font-feature-settings:'kern';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;}pre,code{font-family:Consolas, monaco, monospace;}"`;

packages/circuit-ui/components/Body/Body.tsx

@@ -26,7 +26,7 @@ type Variant = 'highlight' | 'quote' | 'success' | 'error' | 'subtle';
 export interface BodyProps
   extends Omit<HTMLProps<HTMLParagraphElement>, 'size'> {
   /**
-   * Choose from 2 font sizes.
+   * Choose from 2 font sizes. Default `one`.
    */
   size?: Size;
   /**

packages/circuit-ui/components/Button/Button.tsx

@@ -278,10 +278,9 @@ export const Button = forwardRef(
   ): ReturnType => {
     const components = useComponents();
 
-    // Need to typecast here because the StyledButton expects a button-like
-    // component for its `as` prop. It's safe to ignore that constraint here.
-    /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-    const Link = components.Link as any;
+    // Need to typecast here because the styled component types restrict the
+    // `as` prop to a string. It's safe to ignore that constraint here.
+    const Link = (components.Link as unknown) as string;
 
     const handleClick = useClickEvent(props.onClick, tracking, 'button');
 

packages/circuit-ui/components/Carousel/components/Slide/Slide.stories.js

@@ -55,6 +55,6 @@ export const TextAndImage = (args) => (
       src="https://source.unsplash.com/TpHmEoVSmfQ/1600x900"
       alt="Aerial photo of turbulent turquoise ocean waves"
     />
-    <StyledHeadline size="one">Get The SumUp Card Reader Today!</StyledHeadline>
+    <StyledHeadline>Get The SumUp Card Reader Today!</StyledHeadline>
   </Slide>
 );

packages/circuit-ui/components/ComponentsContext/ComponentsContext.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright 2019, SumUp Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createContext, ReactNode } from 'react';
+
+import { Link, LinkProps } from './components/Link';
+
+export const defaultComponents = { Link };
+
+export type ComponentsContextType = {
+  Link: (props: LinkProps) => ReactNode;
+};
+
+export const ComponentsContext = createContext<ComponentsContextType>(
+  defaultComponents,
+);

packages/circuit-ui/components/ComponentsContext/components/Link/Link.spec.js → packages/circuit-ui/components/ComponentsContext/components/Link/Link.spec.tsx

@@ -15,7 +15,9 @@
 
 import { createRef } from 'react';
 
-import Link from './Link';
+import { render, renderToHtml, axe } from '../../../../util/test-utils';
+
+import { Link } from './Link';
 
 describe('Link', () => {
   const defaultProps = {
@@ -31,7 +33,7 @@ describe('Link', () => {
      * Should accept a working ref for button
      */
     it('should accept a working ref', () => {
-      const tref = createRef();
+      const tref = createRef<HTMLAnchorElement>();
       const { container } = render(
         <Link {...defaultProps} ref={tref}>
           This is a link

packages/circuit-ui/components/ComponentsContext/components/Link/Link.js → packages/circuit-ui/components/ComponentsContext/components/Link/Link.tsx

@@ -13,31 +13,21 @@
  * limitations under the License.
  */
 
-import { forwardRef } from 'react';
-import PropTypes from 'prop-types';
+import { forwardRef, HTMLProps, Ref } from 'react';
 
-import { childrenPropType } from '../../../../util/shared-prop-types';
+export interface LinkProps extends HTMLProps<HTMLAnchorElement> {
+  ref?: Ref<HTMLAnchorElement>;
+}
 
 /**
  * A barebones Link component that's basically just an `<a>` tag
  */
-const Link = forwardRef(({ children, ...props }, ref) => (
-  <a {...props} ref={ref}>
-    {children}
-  </a>
-));
+export const Link = forwardRef(
+  ({ children, ...props }: LinkProps, ref: LinkProps['ref']) => (
+    <a {...props} ref={ref}>
+      {children}
+    </a>
+  ),
+);
 
 Link.displayName = 'Link';
-
-Link.propTypes = {
-  children: childrenPropType,
-  ref: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
-};
-
-/**
- * @component
- */
-export default Link;

packages/circuit-ui/components/ComponentsContext/components/index.js → packages/circuit-ui/components/ComponentsContext/components/Link/index.ts

@@ -13,6 +13,5 @@
  * limitations under the License.
  */
 
-import Link from './Link';
-
-export { Link };
+export { Link } from './Link';
+export type { LinkProps } from './Link';

packages/circuit-ui/components/ComponentsContext/ComponentsContext.js → packages/circuit-ui/components/ComponentsContext/index.ts

@@ -13,10 +13,7 @@
  * limitations under the License.
  */
 
-import { createContext } from 'react';
+export { ComponentsContext } from './ComponentsContext';
+export { useComponents } from './useComponents';
 
-import * as defaultComponents from './components';
-
-const ComponentsContext = createContext(defaultComponents);
-
-export default ComponentsContext;
+export type { ComponentsContextType } from './ComponentsContext';

packages/circuit-ui/components/ComponentsContext/useComponents.js → packages/circuit-ui/components/ComponentsContext/useComponents.ts

@@ -15,18 +15,16 @@
 
 import { useContext } from 'react';
 
-import ComponentsContext from './ComponentsContext';
-import * as defaultComponents from './components';
+import {
+  ComponentsContext,
+  ComponentsContextType,
+  defaultComponents,
+} from './ComponentsContext';
 
 /**
  * Subscribe to the components context with a hook.
  */
-const useComponents = () => {
+export const useComponents = (): ComponentsContextType => {
   const components = useContext(ComponentsContext) || {};
   return { ...defaultComponents, ...components };
 };
-
-/**
- * @component
- */
-export default useComponents;

packages/circuit-ui/components/Hamburger/Hamburger.stories.tsx

@@ -18,7 +18,7 @@ import { useState } from 'react';
 import { Hamburger, HamburgerProps } from './Hamburger';
 
 export default {
-  title: 'Components/Hamburger',
+  title: 'Navigation/Hamburger',
   component: Hamburger,
 };
 

packages/circuit-ui/components/Header/Header.stories.tsx

@@ -18,7 +18,7 @@ import Hamburger from '../Hamburger';
 import Header from '.';
 
 export default {
-  title: 'Components/Header',
+  title: 'Navigation/Header',
   component: Header,
 };
 

packages/circuit-ui/components/Headline/Headline.tsx

@@ -25,7 +25,7 @@ type Size = 'one' | 'two' | 'three' | 'four';
 export interface HeadlineProps
   extends Omit<HTMLProps<HTMLHeadingElement>, 'size'> {
   /**
-   * A Circuit UI headline size.
+   * A Circuit UI headline size. Default `one`.
    */
   size?: Size;
   /**

packages/circuit-ui/components/Pagination/Pagination.docs.mdx

@@ -6,7 +6,7 @@ import { Status, Props, Story } from '../../../../.storybook/components';
 
 Pagination provides a way for users to visualize bulks of information distributed over multiple pages, while always providing an anchor to move from where they currently are in the list.
 
-<Story id="components-pagination--base" />
+<Story id="navigation-pagination--base" />
 <Props />
 
 ## When to use it
@@ -22,4 +22,4 @@ Use it when you have a list of more than 25 items related to the same category.
 
 When there are more than 5 pages in total, the pagination is displayed as a dropdown.
 
-<Story id="components-pagination--many-pages" />
+<Story id="navigation-pagination--many-pages" />

packages/circuit-ui/components/Pagination/Pagination.stories.tsx

@@ -19,7 +19,7 @@ import docs from './Pagination.docs.mdx';
 import { Pagination, PaginationProps } from './Pagination';
 
 export default {
-  title: 'Components/Pagination',
+  title: 'Navigation/Pagination',
   component: Pagination,
   parameters: {
     docs: { page: docs },