✨ Make typography an overridableComponent (#2432)

* ✨ Make typography an overridableComponent * add 'as' to storybook argstable * Typography: added a story for 'as'
equinor · Aug 23, 2022 · 6aa0d28 · 6aa0d28
1 parent 237f459
commit 6aa0d28
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 8 deletions.
diff --git a/packages/eds-core-react/src/components/Typography/Typography.docs.mdx b/packages/eds-core-react/src/components/Typography/Typography.docs.mdx
@@ -111,4 +111,19 @@ const myToken = {
 ### Link
 Link used in body of text.
 
-<Story id="typography-typography--link" />
+<Story id="typography-typography--link" />
+
+### Using the 'as' prop to render as another component
+
+The `as` prop allows you to render `Typography` as another html element or even react component. 
+
+<Story id="typography-typography--as" />
+
+This is useful if you want to use `Typography` with a third party routing library such as react-router.
+
+```tsx
+import { Link } from "react-router-dom"
+import { Typography } from '@equinor/eds-core-react'
+
+<Typography as={Link} to="/about" link>About</Typography>
+```
diff --git a/packages/eds-core-react/src/components/Typography/Typography.stories.tsx b/packages/eds-core-react/src/components/Typography/Typography.stories.tsx
@@ -15,6 +15,19 @@ const SBCard = styled(Card)`
 export default {
   title: 'Typography/Typography',
   component: Typography,
+  argTypes: {
+    as: {
+      description: 'Change the HTML element',
+      table: {
+        type: {
+          summary: 'ElementType<any>',
+        },
+      },
+      control: {
+        type: null,
+      },
+    },
+  },
   parameters: {
     docs: {
       page,
@@ -209,3 +222,18 @@ Link.decorators = [
     )
   },
 ]
+
+export const As: Story<TypographyProps> = () => (
+  <Typography variant="h2" as="h4">
+    I am a &lt;h4&gt; styled as a &lt;h2&gt;
+  </Typography>
+)
+As.decorators = [
+  (Story) => {
+    return (
+      <Stack style={{ justifyContent: 'start' }}>
+        <Story />
+      </Stack>
+    )
+  },
+]
diff --git a/packages/eds-core-react/src/components/Typography/Typography.tsx b/packages/eds-core-react/src/components/Typography/Typography.tsx
@@ -5,7 +5,11 @@ import {
   AnchorHTMLAttributes,
 } from 'react'
 import styled, { css } from 'styled-components'
-import { typographyTemplate, outlineTemplate } from '@equinor/eds-utils'
+import {
+  typographyTemplate,
+  outlineTemplate,
+  OverridableComponent,
+} from '@equinor/eds-utils'
 import {
   quickVariants,
   colors,
@@ -122,12 +126,10 @@ export type TypographyProps = {
   token?: Partial<TypographyType>
   /** Number of lines. */
   lines?: number
-  /** Change html element. */
-  as?: ElementType
 } & (HTMLAttributes<HTMLElement> | AnchorHTMLAttributes<HTMLAnchorElement>)
 
-export const Typography = forwardRef<HTMLElement, TypographyProps>(
-  function Typography(
+export const Typography: OverridableComponent<TypographyProps, HTMLElement> =
+  forwardRef(function Typography(
     {
       variant = 'body_short',
       children,
@@ -173,7 +175,6 @@ export const Typography = forwardRef<HTMLElement, TypographyProps>(
         {children}
       </StyledTypography>
     )
-  },
-)
+  })
 
 // Typography.displayName = 'EdsTypography'