diff --git a/packages/eds-core-react/src/components/Dialog/DialogHeader.tsx b/packages/eds-core-react/src/components/Dialog/DialogHeader.tsx index 1dcbade27d..97c025bfde 100644 --- 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 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 index 4dd21a74e9..1c626c543e 100644 --- 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. + + + +```tsx + +``` + + + +```tsx + +``` + The `Equinor` typeface is the primary typeface and is available in four weights: +**Component** ```tsx import { Typography } from '@equinor/eds-core-react' @@ -61,9 +80,26 @@ Variants under `heading` and `paragraph` don’t require the group parameter. -### Custom +### Token property + +The `token` property allows manipulate the appearance of the typography.
+Properties: + + - + ### 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 index f0dfa5f485..67625b748e 100644 --- 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 +export const Introduction: Story = (args) => { + return Sample text +} + export const GroupsOverview = () => { - return Object.entries(typography).map(([key, group]) => ( - - - - {key} - - - - {Object.entries(group).map(([key, token]) => ( - - {key} - - ))} - - )) + return Object.entries(typography) + .filter(([key]) => key !== '_modes') + .map(([key, group]) => ( + + + + {key} + + + + {Object.entries(group).map(([key, token]) => ( + + {key} + + ))} + + )) } +GroupsOverview.storyName = 'Groups overview' GroupsOverview.decorators = [ (Story) => { return ( @@ -69,10 +68,6 @@ GroupsOverview.decorators = [ }, ] -export const Introduction: Story = (args) => { - return Sample text -} - export const Colors: Story = () => ( <> Primary @@ -86,7 +81,7 @@ export const Colors: Story = () => ( ) -export const Custom: Story = () => ( +export const TokenProperty: Story = () => ( <>
@@ -136,6 +131,7 @@ export const Custom: Story = () => (
) +TokenProperty.storyName = 'Token property' export const Lines: Story = () => ( <> diff --git a/packages/eds-core-react/src/components/Typography/Typography.tsx b/packages/eds-core-react/src/components/Typography/Typography.tsx index 1c5fa46903..fed6a4b5e5 100644 --- 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 /** Number of lines. */ lines?: number