diff --git a/.changeset/sixty-items-promise.md b/.changeset/sixty-items-promise.md new file mode 100644 index 0000000000..d6de1b72b9 --- /dev/null +++ b/.changeset/sixty-items-promise.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': minor +--- + +Added paragraph style. diff --git a/.changeset/strange-bottles-impress.md b/.changeset/strange-bottles-impress.md new file mode 100644 index 0000000000..79f561cfb8 --- /dev/null +++ b/.changeset/strange-bottles-impress.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': minor +--- + +Added paragraph element. diff --git a/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx b/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx new file mode 100644 index 0000000000..d9be9afb9c --- /dev/null +++ b/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx @@ -0,0 +1,17 @@ +import { Canvas, Controls, Meta } from '@storybook/blocks'; +import * as ParagraphStories from './paragraph.stories'; +import StylesPackageImport from '@/shared/styles-package-import.mdx'; + + + +
+ # Paragraph + + +
+ +Default paragraph without size variants. + + diff --git a/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts new file mode 100644 index 0000000000..2a9d17b4a5 --- /dev/null +++ b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts @@ -0,0 +1,37 @@ +import type { StoryObj, StoryFn, StoryContext } from '@storybook/web-components'; +import { html } from 'lit'; +import { MetaExtended } from '@root/types'; + +const meta: MetaExtended = { + id: '7ecd87f1-de96-4e39-a057-ba1798eb69593', + title: 'Foundations/Typography/Paragraph', + parameters: { + badges: [], + design: { + type: 'figma', + url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=178-6713&node-type=frame&t=Zs4iDGVBTA88pChW-0', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + decorators: [ + (story: StoryFn, context: StoryContext) => html`
${story(context.args, context)}
`, + ], + render: () => html` +

+ This is a paragraph. It is a block of text that is separated from other blocks of text by a + blank line. It is usually indented at the beginning of the first line. The first word of a + paragraph is often indented more than the rest of the paragraph. +

+

+ This is a paragraph. It is a block of text that is separated from other blocks of text by a + blank line. It is usually indented at the beginning of the first line. The first word of a + paragraph is often indented more than the rest of the paragraph. +

+ `, +}; diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss index d2c8cd0147..e4233fb679 100644 --- a/packages/styles/src/elements/_index.scss +++ b/packages/styles/src/elements/_index.scss @@ -1,4 +1,5 @@ @use 'reset'; @use 'body'; +@use 'paragraph'; @use 'heading'; @use 'fieldset-legend'; diff --git a/packages/styles/src/elements/paragraph.scss b/packages/styles/src/elements/paragraph.scss new file mode 100644 index 0000000000..12e638dd65 --- /dev/null +++ b/packages/styles/src/elements/paragraph.scss @@ -0,0 +1,17 @@ +@use 'sass:map'; +@use '../functions/tokens'; +@use '../tokens/elements'; + +tokens.$default-map: elements.$post-paragraph; + +p { + margin-block: tokens.get('paragraph-margin-block-start'); + + &:first-child { + margin-block-start: 0; + } + + &:last-child { + margin-block-end: 0; + } +}