Feature/thalse 3342 typography component

packages/eds-core-react/.storybook/manager-head.html

@@ -5,6 +5,6 @@
 
 <style>
   body {
-    font-family: Equinor, sans-serif !important;
+    font-family: Equinor, sans-serif;
   }
 </style>

packages/eds-core-react/.storybook/preview-head.html

@@ -2,11 +2,14 @@
   rel="stylesheet"
   href="https://cdn.eds.equinor.com/font/equinor-font.css"
 />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+  rel="stylesheet"
+/>
 
 <style>
-  .sbdocs.sbdocs *:not(code):not(.token) {
-    font-family: Equinor, sans-serif !important;
-  }
   .sbdocs.sbdocs-a {
     font-size: inherit;
   }

packages/eds-core-react/src/components/Typography/BodyText/BodyText.stories.tsx

@@ -0,0 +1,106 @@
+import { BodyText } from './BodyText'
+import { StoryFn, Meta } from '@storybook/react'
+import { BaselineGrid } from '../_components/BaselineGrid'
+import { PropertyDocumentation } from '../_components/PropertyDocumentation'
+import {
+  bodyTextTokens,
+  headingTokens,
+  uiTextTokens,
+} from '../_typography.tokens'
+import { BodyTextProps } from '../typography.types'
+import { Heading } from '../Heading/Heading'
+
+const TEXT = 'This is some text, hi ho! This is line two'
+
+const meta: Meta<typeof BodyText> = {
+  title: 'Typography/BodyText',
+  component: BodyText,
+  args: {
+    children: TEXT,
+    size: 'BASE',
+  },
+  argTypes: {
+    as: {
+      options: ['p', 'span', 'div'],
+      control: {
+        type: 'select',
+      },
+    },
+    size: {
+      description: 'Size of the UIText',
+      table: {
+        type: {
+          summary: 'TypographySize',
+        },
+      },
+      options: ['3XS', '2XS', 'XS', 'SM', 'BASE', 'LG'],
+
+      control: {
+        type: 'select',
+      },
+    },
+  },
+}
+
+export default meta
+
+export const Introduction: StoryFn<BodyTextProps> = (args) => {
+  return <BodyText {...args} />
+}
+
+export const Demo: StoryFn<BodyTextProps> = () => {
+  return (
+    <>
+      <BaselineGrid>
+        <Heading size="LG">Lorem Ipsum</Heading>
+        <BodyText size="BASE">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </BodyText>
+        <BodyText size="BASE">
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+          proident, sunt in culpa qui officia deserunt mollit anim id est
+          laborum.
+        </BodyText>
+        <Heading as="h2" size="BASE">
+          Lorem Ipsum
+        </Heading>
+        <BodyText size="BASE">
+          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+          dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+          proident, sunt in culpa qui officia deserunt mollit anim id est
+          laborum.
+        </BodyText>
+      </BaselineGrid>
+      <section>
+        <PropertyDocumentation tokens={headingTokens} size="LG" />
+      </section>
+    </>
+  )
+}
+
+export const Sizes: StoryFn<BodyTextProps> = () => {
+  return (
+    <>
+      <BodyText size="3XS">{TEXT}</BodyText>
+      <PropertyDocumentation size="3XS" tokens={bodyTextTokens} />
+      <BodyText size="2XS">{TEXT}</BodyText>
+      <PropertyDocumentation size="2XS" tokens={bodyTextTokens} />
+      <BodyText size="XS">{TEXT}</BodyText>
+      <PropertyDocumentation size="XS" tokens={bodyTextTokens} />
+      <BodyText size="SM">{TEXT}</BodyText>
+      <PropertyDocumentation size="SM" tokens={bodyTextTokens} />
+      <BodyText size="BASE" as="h2">
+        {TEXT}
+      </BodyText>
+      <PropertyDocumentation size="BASE" tokens={bodyTextTokens} />
+      <BodyText size="LG" as="h1">
+        {TEXT}
+      </BodyText>
+      <PropertyDocumentation size="LG" tokens={uiTextTokens} />
+    </>
+  )
+}

packages/eds-core-react/src/components/Typography/BodyText/BodyText.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, memo } from 'react'
+import { bodyTextTokens as tokens } from '../_typography.tokens'
+import { Typography } from '../_components/Typography'
+import { BodyTextProps } from '../typography.types'
+import { DEFAULT_TEXT_ELEMENT, DEFAULT_TEXT_SIZE } from '../_defaults'
+import { getTypographyProperties } from '../typography.utils'
+
+export const BodyText = memo(
+  forwardRef<HTMLElement, BodyTextProps>(function BodyText(
+    { size = DEFAULT_TEXT_SIZE, as = DEFAULT_TEXT_ELEMENT, children, ...rest },
+    ref,
+  ) {
+    const {
+      baselineTrimGridInEm: baselineTrim,
+      capHeightTrimInEm: capHeightTrim,
+      fontFamily,
+      fontSizeInRem: fontSize,
+      lineHeightInRem: lineHeight,
+    } = getTypographyProperties({ size, tokens })
+
+    return (
+      <Typography
+        ref={ref}
+        as={as}
+        $fontSize={fontSize}
+        $lineHeight={lineHeight}
+        $fontFamily={fontFamily}
+        $capHeightTrim={capHeightTrim}
+        $baselineTrim={baselineTrim}
+        {...rest}
+      >
+        {children}
+      </Typography>
+    )
+  }),
+)

packages/eds-core-react/src/components/Typography/Heading/Heading.stories.tsx

@@ -0,0 +1,101 @@
+import { Heading } from './Heading'
+import { StoryFn, Meta } from '@storybook/react'
+import { BaselineGrid } from '../_components/BaselineGrid'
+import { HeadingProps } from '../typography.types'
+import { PropertyDocumentation } from '../_components/PropertyDocumentation'
+import { headingTokens } from '../_typography.tokens'
+
+const TEXT = 'This is some text, hi ho! This is line two'
+
+const meta: Meta<typeof Heading> = {
+  title: 'Typography/Heading',
+  component: Heading,
+  args: {
+    children: TEXT,
+    size: 'BASE',
+  },
+  argTypes: {
+    as: {
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      control: {
+        type: 'select',
+      },
+    },
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+    size: {
+      description: 'Size of the heading',
+      table: {
+        type: {
+          summary: 'TypographySize',
+        },
+      },
+      options: ['3XS', '2XS', 'XS', 'SM', 'BASE', 'LG'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+}
+
+export default meta
+
+export const Introduction: StoryFn<HeadingProps> = (args) => {
+  return <Heading {...args} />
+}
+
+export const Demo: StoryFn<HeadingProps> = () => {
+  return (
+    <BaselineGrid>
+      <Heading size="LG" as="h1">
+        Heading
+      </Heading>
+      <Heading size="2XS" as="h2">
+        Subheading
+      </Heading>
+
+      <Heading size="BASE" as="h2">
+        {TEXT}
+      </Heading>
+    </BaselineGrid>
+  )
+}
+
+export const Sizes: StoryFn<HeadingProps> = () => {
+  return (
+    <>
+      <Heading size="3XS">{TEXT}</Heading>
+      <PropertyDocumentation size="3XS" tokens={headingTokens} />
+      <Heading size="2XS">{TEXT}</Heading>
+      <PropertyDocumentation size="2XS" tokens={headingTokens} />
+      <Heading size="XS">{TEXT}</Heading>
+      <PropertyDocumentation size="XS" tokens={headingTokens} />
+      <Heading size="SM">{TEXT}</Heading>
+      <PropertyDocumentation size="SM" tokens={headingTokens} />
+      <Heading size="BASE" as="h2">
+        {TEXT}
+      </Heading>
+      <PropertyDocumentation size="BASE" tokens={headingTokens} />
+      <Heading size="LG" as="h1">
+        {TEXT}
+      </Heading>
+      <PropertyDocumentation size="LG" tokens={headingTokens} />
+    </>
+  )
+}
+
+export const Levels: StoryFn<HeadingProps> = () => {
+  return (
+    <>
+      <Heading as="h6">{TEXT}</Heading>
+      <Heading as="h5">{TEXT}</Heading>
+      <Heading as="h4">{TEXT}</Heading>
+      <Heading as="h3">{TEXT}</Heading>
+      <Heading as="h2">{TEXT}</Heading>
+      <Heading as="h1">{TEXT}</Heading>
+    </>
+  )
+}

packages/eds-core-react/src/components/Typography/Heading/Heading.tsx

@@ -0,0 +1,41 @@
+import { forwardRef, memo } from 'react'
+import { HeadingProps } from '../typography.types'
+import { Typography } from '../_components/Typography'
+import { headingTokens as tokens } from '../_typography.tokens'
+import { DEFAULT_HEADING_ELEMENT, DEFAULT_TEXT_SIZE } from '../_defaults'
+import { getTypographyProperties } from '../typography.utils'
+
+export const Heading = memo(
+  forwardRef<HTMLHeadingElement, HeadingProps>(function Heading(
+    {
+      size = DEFAULT_TEXT_SIZE,
+      as = DEFAULT_HEADING_ELEMENT,
+      children,
+      ...rest
+    },
+    ref,
+  ) {
+    const {
+      baselineTrimGridInEm: baselineTrim,
+      capHeightTrimInEm: capHeightTrim,
+      fontFamily,
+      fontSizeInRem: fontSize,
+      lineHeightInRem: lineHeight,
+    } = getTypographyProperties({ size, tokens })
+
+    return (
+      <Typography
+        ref={ref}
+        as={as}
+        $fontSize={fontSize}
+        $lineHeight={lineHeight}
+        $fontFamily={fontFamily}
+        $capHeightTrim={capHeightTrim}
+        $baselineTrim={baselineTrim}
+        {...rest}
+      >
+        {children}
+      </Typography>
+    )
+  }),
+)

packages/eds-core-react/src/components/Typography/UIText/UIText.stories.tsx

@@ -0,0 +1,84 @@
+import { UIText } from './UIText'
+import { StoryFn, Meta } from '@storybook/react'
+import { BaselineGrid } from '../_components/BaselineGrid'
+import { UITextProps } from '../typography.types'
+import { PropertyDocumentation } from '../_components/PropertyDocumentation'
+import { uiTextTokens } from '../_typography.tokens'
+
+const TEXT = 'This is some text, hi ho! This is line two'
+
+const meta: Meta<typeof UIText> = {
+  title: 'Typography/UIText',
+  component: UIText,
+  args: {
+    children: TEXT,
+    size: 'BASE',
+  },
+  argTypes: {
+    as: {
+      options: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      control: {
+        type: 'select',
+      },
+    },
+    size: {
+      description: 'Size of the UIText',
+      table: {
+        type: {
+          summary: 'TypographySize',
+        },
+      },
+      options: ['3XS', '2XS', 'XS', 'SM', 'BASE', 'LG'],
+
+      control: {
+        type: 'select',
+      },
+    },
+  },
+}
+
+export default meta
+
+export const Introduction: StoryFn<UITextProps> = (args) => {
+  return <UIText {...args} />
+}
+
+export const Demo: StoryFn<UITextProps> = () => {
+  return (
+    <BaselineGrid>
+      <UIText size="LG" as="h1">
+        LG
+      </UIText>
+      <UIText size="2XS" as="h2">
+        2XS
+      </UIText>
+
+      <UIText size="BASE" as="h2">
+        {TEXT}
+      </UIText>
+    </BaselineGrid>
+  )
+}
+
+export const Sizes: StoryFn<UITextProps> = () => {
+  return (
+    <>
+      <UIText size="3XS">{TEXT}</UIText>
+      <PropertyDocumentation size="3XS" tokens={uiTextTokens} />
+      <UIText size="2XS">{TEXT}</UIText>
+      <PropertyDocumentation size="2XS" tokens={uiTextTokens} />
+      <UIText size="XS">{TEXT}</UIText>
+      <PropertyDocumentation size="XS" tokens={uiTextTokens} />
+      <UIText size="SM">{TEXT}</UIText>
+      <PropertyDocumentation size="SM" tokens={uiTextTokens} />
+      <UIText size="BASE" as="h2">
+        {TEXT}
+      </UIText>
+      <PropertyDocumentation size="BASE" tokens={uiTextTokens} />
+      <UIText size="LG" as="h1">
+        {TEXT}
+      </UIText>
+      <PropertyDocumentation size="LG" tokens={uiTextTokens} />
+    </>
+  )
+}