📝 Typography documentation

packages/eds-core-react/src/components/Progress/Linear/Linear.stories.tsx

@@ -36,20 +36,16 @@ export const Introduction: Story<LinearProgressProps> = (args) => {
   const progress = useMockProgress(variant === 'indeterminate' ? null : value)
 
   return (
-    <>
-      <Progress.Linear
-        value={progress}
-        {...args}
-        aria-label="Progress bar label"
-      />
-    </>
+    <Progress.Linear
+      value={progress}
+      {...args}
+      aria-label="Progress bar label"
+    />
   )
 }
 
 export const Indeterminate: Story<LinearProgressProps> = () => (
-  <>
-    <Progress.Linear aria-label="Progress bar label" />
-  </>
+  <Progress.Linear aria-label="Progress bar label" />
 )
 
 export const Determinate: Story<LinearProgressProps> = () => {

packages/eds-core-react/src/components/Slider/Slider.stories.tsx

@@ -141,22 +141,18 @@ export const RangeSliderWithDates: Story<SliderProps> = () => {
     return new Date(iso).getTime()
   }
   return (
-    <>
-      <Slider
-        min={getUnixTime('2020-01-01')}
-        max={getUnixTime('2020-01-31')}
-        step={60 * 60 * 24 * 1000}
-        value={[getUnixTime('2020-01-01'), getUnixTime('2020-01-31')]}
-        outputFunction={outputFunction}
-        aria-label="Range slider with dates"
-      />
-    </>
+    <Slider
+      min={getUnixTime('2020-01-01')}
+      max={getUnixTime('2020-01-31')}
+      step={60 * 60 * 24 * 1000}
+      value={[getUnixTime('2020-01-01'), getUnixTime('2020-01-31')]}
+      outputFunction={outputFunction}
+      aria-label="Range slider with dates"
+    />
   )
 }
 RangeSliderWithDates.storyName = 'Range slider with dates'
 
 export const Disabled: Story<SliderProps> = () => (
-  <>
-    <Slider value={50} disabled aria-label="Disabled Slider" />
-  </>
+  <Slider value={50} disabled aria-label="Disabled Slider" />
 )

packages/eds-core-react/src/components/Typography/Typography.docs.mdx

@@ -0,0 +1,113 @@
+import { Links, PropsTable, Story, Stack, TypographyGroups } from './../../../.storybook/components'
+import { Typography } from '.'
+
+# Typography
+
+Presents hierarchy and organises information as clearly and efficiently as possible, <br />
+therefore text sizes and styles were developed to balance content density and reading comfort.
+
+<Links 
+    figmaUrl="https://www.figma.com/file/0TbIXrrObWj80Cf7KucKYFL0/Design-Tokens?node-id=2%3A4"
+    documentationUrl="https://eds.equinor.com/0b0c666ab/p/721544-typography/b/32c137"
+    sourceUrl="https://github.com/equinor/design-system/blob/develop/packages/eds-core-react/src/components/Typography/Typography.tsx"
+    npmUrl="https://www.npmjs.com/package/@equinor/eds-core-react"
+></Links>
+
+<Story id="typography-typography--introduction" />
+<PropsTable />
+
+## Usage
+
+**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>
+  <li><code>light</code>,</li>
+  <li><code>regular</code>,</li>
+  <li><code>medium</code>,</li>
+  <li><code>bold</code>,</li>
+  <li>with accompanying <code>italics</code>.</li>
+</ul>
+
+Please do not use <code>light</code> in digital interfaces except in special cases where the font size is over <code>48px</code>.
+
+**Paragraph**
+
+<ul>
+  <li>Paragraph length is the number of characters in a line of text, this includes spaces.</li>
+  <li>To ensure readability, line length should be 55-80 characters.</li>
+</ul>
+
+**Component**
+
+```tsx
+import { Typography } from '@equinor/eds-core-react'
+
+<Typography>Sample text</Typography>
+```
+
+## Overview
+
+Typography groups with included varints:  
+
+Example: `<Typography group="input" variant="label"></Typography>`. <br />
+Variants under `heading` and `paragraph` don’t require the group parameter.
+
+<Story id="typography-typography--groups-overview" />
+
+## Examples
+
+### Colors
+
+<Story id="typography-typography--colors" />
+
+### Token property
+
+The `token` property allows manipulate the appearance of the typography. <br />
+Properties: 
+
+```tsx
+const myToken = {
+    textAlign,
+    textDecoration,
+    textTransform,
+    fontFamily,
+    fontSize,
+    fontStyle,
+    fontWeight,
+    fontFeature,
+    color,
+    lineHeight,
+    letterSpacing,
+}
+```
+
+<Story id="typography-typography--token-property" />
+
+### Lines
+
+<Story id="typography-typography--lines" />
+
+### Link
+Link used in body of text.
+
+<Story id="typography-typography--link" />