Typography story (#741)

* Changed story fil ext

* removed duplicate file

* ♻️  Updates on naming

* Figuring out props table

apps/storybook-react/stories/Typography.stories.jsx → apps/storybook-react/stories/Typography.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Typography } from '@equinor/eds-core-react'
+import { Typography, TypographyProps } from '@equinor/eds-core-react'
 import styled from 'styled-components'
-import './../style.css'
+import { Story, Meta } from '@storybook/react'
 
 const Wrapper = styled.div`
   margin: 32px;
@@ -15,9 +15,9 @@ const Grid = styled(Wrapper)`
 export default {
   title: 'Components/Typography',
   component: Typography,
-}
+} as Meta
 
-export const headings = () => (
+export const headings: Story<TypographyProps> = () => (
   <Grid>
     <Typography variant="h1" bold>
       Heading 1 bold
@@ -31,7 +31,7 @@ export const headings = () => (
   </Grid>
 )
 
-export const paragraphs = () => (
+export const paragraphs = (): JSX.Element => (
   <Grid>
     <Typography variant="body_short" link>
       Body short link
@@ -67,7 +67,7 @@ export const paragraphs = () => (
   </Grid>
 )
 
-export const colors = () => (
+export const colors = (): JSX.Element => (
   <Grid>
     <Typography color="primary"> Primary</Typography>
     <Typography color="secondary">Secondary</Typography>
@@ -80,7 +80,7 @@ export const colors = () => (
   </Grid>
 )
 
-export const custom = () => (
+export const custom = (): JSX.Element => (
   <Grid>
     <Typography group="navigation" variant="label">
       Navigation / Label
@@ -126,7 +126,7 @@ export const custom = () => (
   </Grid>
 )
 
-export const Lines = () => (
+export const Lines = (): JSX.Element => (
   <Wrapper>
     <Typography variant="body_long" lines={2}>
       Cupcake ipsum dolor sit amet caramels powder. Chocolate powder donut

libraries/core-react/src/Banner/BannerMessage.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import styled from 'styled-components'
 import { Typography } from '../Typography'
-import { Props as TypographyProps } from '../Typography/Typography'
+import { TypographyProps } from '../Typography/Typography'
 
 const StyledBannerMessage = styled(Typography)``
 

libraries/core-react/src/Typography/Typography.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ElementType } from 'react'
+import React, { forwardRef, ElementType, HTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import { typographyTemplate } from '../_common/templates'
 import {
@@ -45,7 +45,9 @@ const findTypography = (
   return (typography[group] as unknown)[variantName] as TypographyType
 }
 
-const findColor = (inputColor: ColorVariants): string =>
+const findColor: (a: ColorVariants | string) => string = (
+  inputColor = null,
+): string =>
   typeof colors[inputColor] === 'undefined' ? inputColor : colors[inputColor]
 
 const toVariantName = (
@@ -82,64 +84,66 @@ const StyledTypography = styled.p<StyledProps>`
     `}
 `
 
-export type Props = {
+export type TypographyProps = {
   variant?: TypographyVariants
   group?: TypographyGroups
   bold?: boolean
   italic?: boolean
   link?: boolean
-  color?: ColorVariants
+  color?: ColorVariants | string
   token?: Partial<TypographyType>
   lines?: number
   as?: ElementType
-} & React.HTMLAttributes<HTMLElement>
+} & HTMLAttributes<HTMLElement>
 
-export const Typography = forwardRef<HTMLElement, Props>(function EdsTypography(
-  {
-    variant = 'body_short',
-    children,
-    bold,
-    italic,
-    link,
-    group,
-    token,
-    as: providedAs,
-    ...other
-  },
-  ref,
-) {
-  const as: ElementType = providedAs
-    ? providedAs
-    : getElementType(variant, link)
+export const Typography = forwardRef<HTMLElement, TypographyProps>(
+  function Typography(
+    {
+      variant = 'body_short',
+      children,
+      bold,
+      italic,
+      link,
+      group,
+      token,
+      as: providedAs,
+      ...other
+    },
+    ref,
+  ) {
+    const as: ElementType = providedAs
+      ? providedAs
+      : getElementType(variant, link)
 
-  const variantName = toVariantName(
-    variant,
-    bold,
-    italic,
-    link,
-  ) as TypographyVariants
+    const variantName = toVariantName(
+      variant,
+      bold,
+      italic,
+      link,
+    ) as TypographyVariants
 
-  const typography = findTypography(variantName, group)
+    const typography = findTypography(variantName, group)
 
-  if (typeof typography === 'undefined') {
-    throw new Error(
-      `Typography variant not found for variant "${variantName}" ("${variant}") & group "${
-        group || ''
-      }"`,
-    )
-  }
+    if (typeof typography === 'undefined') {
+      throw new Error(
+        `Typography variant not found for variant "${variantName}" ("${variant}") & group "${
+          group || ''
+        }"`,
+      )
+    }
 
-  return (
-    <StyledTypography
-      as={as}
-      typography={{ ...typography, ...token }}
-      link={link}
-      ref={ref}
-      {...other}
-    >
-      {children}
-    </StyledTypography>
-  )
-})
+    return (
+      <StyledTypography
+        as={as}
+        typography={{ ...typography, ...token }}
+        link={link}
+        ref={ref}
+        {...other}
+      >
+        {children}
+      </StyledTypography>
+    )
+  },
+)
 
 // Typography.displayName = 'EdsTypography'

libraries/core-react/src/Typography/index.ts

@@ -1 +1 @@
-export { Typography } from './Typography'
+export * from './Typography'

libraries/core-react/src/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 export { Button } from './Button'
-export { Typography } from './Typography'
+export * from './Typography'
 export { Table } from './Table'
 export { Divider, DividerProps } from './Divider'
 export { TextField } from './TextField'