From 6aa0d280206230c781a592bb164a9af52e1df3e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oddbj=C3=B8rn=20=C3=98vernes?= <oove@equinor.com>
Date: Tue, 23 Aug 2022 13:59:32 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Make=20typography=20an=20overridabl?=
 =?UTF-8?q?eComponent=20(#2432)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Make typography an overridableComponent

* add 'as' to storybook argstable

* Typography: added a story for 'as'
---
 .../components/Typography/Typography.docs.mdx | 17 ++++++++++-
 .../Typography/Typography.stories.tsx         | 28 +++++++++++++++++++
 .../src/components/Typography/Typography.tsx  | 15 +++++-----
 3 files changed, 52 insertions(+), 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
index 49ec97e714..c0a06d998e 100644
--- 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" />
\ No newline at end of file
+<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
index 455399158e..847b46b61e 100644
--- 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
index fed6a4b5e5..e824b8db4d 100644
--- 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'