✏️ fix docs

equinor · Aug 16, 2022 · cad0fab · cad0fab
1 parent 3bc09b8
commit cad0fab
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 33 deletions.
diff --git a/packages/eds-core-react/src/components/Dialog/DialogHeader.tsx b/packages/eds-core-react/src/components/Dialog/DialogHeader.tsx
@@ -7,7 +7,7 @@ export type DialogHeaderProps = HTMLAttributes<HTMLDivElement>
 const StyledDialogHeader = styled.div(({ theme }) => {
   return css`
     display: flex;
-    justify-content: space-betweene;
+    justify-content: space-between;
     align-items: center;
     padding: ${theme.entities.children.spacings.top}
       ${theme.entities.children.spacings.right} 0

diff --git a/packages/eds-core-react/src/components/Typography/Typography.docs.mdx b/packages/eds-core-react/src/components/Typography/Typography.docs.mdx
@@ -20,6 +20,24 @@ therefore text sizes and styles were developed to balance content density and re
 
 **Typeface**
 
+The `Equinor` typeface is not included in `EDS` by default. It is available from the EDS CDN.
+
+<ul>
+  <li>All the fonts:</li>
+</ul>
+
+```tsx
+<link rel="stylesheet" href="https://eds-static.equinor.com/font/equinor-font.css" />
+```
+
+<ul>
+  <li>Individual font:</li>
+</ul>
+
+```tsx
+<link rel="stylesheet" href="https://eds-static.equinor.com/font/equinor-regular.css" />
+```
+
 The `Equinor` typeface is the primary typeface and is available in four weights:
 
 <ul>
@@ -39,6 +57,7 @@ Please do not use <code>light</code> in digital interfaces except in special cas
   <li>To ensure readability, line length should be 55-80 characters.</li>
 </ul>
 
+**Component**
 
 ```tsx
 import { Typography } from '@equinor/eds-core-react'
@@ -61,9 +80,26 @@ Variants under `heading` and `paragraph` don’t require the group parameter.
 
 <Story id="typography-typography--colors" />
 
-### Custom
+### Token property
+
+The `token` property allows manipulate the appearance of the typography. <br />
+Properties: 
+
+<ul>
+  <li><code>color</code>,</li>
+  <li><code>fontFamily</code>,</li>
+  <li><code>fontSize</code>,</li>
+  <li><code>fontWeight</code>,</li>
+  <li><code>fontStyle</code>,</li>
+  <li><code>fontFeature</code>,</li>
+  <li><code>lineHeight</code>,</li>
+  <li><code>textAlign</code>,</li>
+  <li><code>textTransform</code>,</li>
+  <li><code>textDecoration</code>,</li>
+  <li><code>letterSpacing</code>.</li>
+</ul>
 
-<Story id="typography-typography--custom" />
+<Story id="typography-typography--token-property" />
 
 ### Lines
 

diff --git a/packages/eds-core-react/src/components/Typography/Typography.stories.tsx b/packages/eds-core-react/src/components/Typography/Typography.stories.tsx
@@ -5,19 +5,11 @@ import { Stack } from './../../../.storybook/components'
 import page from './Typography.docs.mdx'
 import { tokens, Typography as TypographyType } from '@equinor/eds-tokens'
 
-const {
-  colors: {
-    infographic: {
-      primary__moss_green_100: { rgba: mossgreen100 },
-    },
-  },
-  typography,
-} = tokens
+const { typography } = tokens
 
 const SBCard = styled(Card)`
-  border: 1px solid ${mossgreen100};
   max-width: 290px;
-  display: table-cell;
+  display: block;
 `
 
 export default {
@@ -42,23 +34,30 @@ export default {
   ],
 } as ComponentMeta<typeof Typography>
 
+export const Introduction: Story<TypographyProps> = (args) => {
+  return <Typography {...args}>Sample text</Typography>
+}
+
 export const GroupsOverview = () => {
-  return Object.entries(typography).map(([key, group]) => (
-    <SBCard key={key}>
-      <Card.Header>
-        <Card.HeaderTitle>
-          <Typography variant="h5">{key}</Typography>
-        </Card.HeaderTitle>
-      </Card.Header>
-      <Divider />
-      {Object.entries(group).map(([key, token]) => (
-        <Card.Content key={key}>
-          <Typography token={token as TypographyType}>{key}</Typography>
-        </Card.Content>
-      ))}
-    </SBCard>
-  ))
+  return Object.entries(typography)
+    .filter(([key]) => key !== '_modes')
+    .map(([key, group]) => (
+      <SBCard key={key} elevation="raised">
+        <Card.Header>
+          <Card.HeaderTitle>
+            <Typography variant="h5">{key}</Typography>
+          </Card.HeaderTitle>
+        </Card.Header>
+        <Divider />
+        {Object.entries(group).map(([key, token]) => (
+          <Card.Content key={key}>
+            <Typography token={token as TypographyType}>{key}</Typography>
+          </Card.Content>
+        ))}
+      </SBCard>
+    ))
 }
+GroupsOverview.storyName = 'Groups overview'
 GroupsOverview.decorators = [
   (Story) => {
     return (
@@ -69,10 +68,6 @@ GroupsOverview.decorators = [
   },
 ]
 
-export const Introduction: Story<TypographyProps> = (args) => {
-  return <Typography {...args}>Sample text</Typography>
-}
-
 export const Colors: Story<TypographyProps> = () => (
   <>
     <Typography color="primary"> Primary</Typography>
@@ -86,7 +81,7 @@ export const Colors: Story<TypographyProps> = () => (
   </>
 )
 
-export const Custom: Story<TypographyProps> = () => (
+export const TokenProperty: Story<TypographyProps> = () => (
   <>
     <div>
       <Typography group="navigation" variant="label">
@@ -136,6 +131,7 @@ export const Custom: Story<TypographyProps> = () => (
     </div>
   </>
 )
+TokenProperty.storyName = 'Token property'
 
 export const Lines: Story<TypographyProps> = () => (
   <>

diff --git a/packages/eds-core-react/src/components/Typography/Typography.tsx b/packages/eds-core-react/src/components/Typography/Typography.tsx
@@ -118,6 +118,7 @@ export type TypographyProps = {
   link?: boolean
   /** Typography colors. */
   color?: ColorVariants | string
+  /** Token. */
   token?: Partial<TypographyType>
   /** Number of lines. */
   lines?: number