diff --git a/.changeset/famous-emus-appear.md b/.changeset/famous-emus-appear.md new file mode 100644 index 0000000000..b6908b5b94 --- /dev/null +++ b/.changeset/famous-emus-appear.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': patch +--- + +Deprecated accent colors. diff --git a/.changeset/gorgeous-frogs-build.md b/.changeset/gorgeous-frogs-build.md new file mode 100644 index 0000000000..3ce1ba1eb8 --- /dev/null +++ b/.changeset/gorgeous-frogs-build.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': patch +--- + +Updated tabs to improve visual continuity and readability. diff --git a/.changeset/quick-birds-own.md b/.changeset/quick-birds-own.md new file mode 100644 index 0000000000..765bb8eb5a --- /dev/null +++ b/.changeset/quick-birds-own.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': patch +--- + +Fix headers for the `versions.json` file. So it can be loaded and used from the version-switcher of older documentation pages. diff --git a/.github/workflows/build-tokens.yaml b/.github/workflows/build-tokens.yaml new file mode 100644 index 0000000000..d463475e55 --- /dev/null +++ b/.github/workflows/build-tokens.yaml @@ -0,0 +1,71 @@ +name: Build Tokens +on: + pull_request: + types: [opened, synchronize, edited, reopened] + paths: + - 'packages/tokens/**' + +jobs: + build: + name: Build Tokens + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup + uses: ./.github/actions/setup-pnpm + + - name: Install dependencies + run: pnpm --filter design-system-tokens... install + + - name: Build tokens & dependencies + run: pnpm --filter design-system-tokens... build + + - name: Create Summary + id: summary + uses: actions/github-script@v7 + with: + script: | + const fs = require('fs') + const path = require('path') + + const inputFileNames = fs.readdirSync('packages/tokens/tokensstudio-generated') + const inputFiles = inputFileNames.map(fileName => ({ + type: path.extname(fileName), + name: fileName, + content: fs.readFileSync(`packages/tokens/tokensstudio-generated/${fileName}`, 'utf8') + })) + + const outputOrder = [ + 'index.scss', + 'core.scss', + 'mode.scss', + 'device.scss', + 'channel.scss', + 'theme.scss', + 'components.scss', + ] + const outputFileNames = fs.readdirSync('packages/tokens/dist') + const outputFiles = outputFileNames.map(fileName => ({ + type: path.extname(fileName), + name: fileName, + content: fs.readFileSync(`packages/tokens/dist/${fileName}`, 'utf8') + })).sort((a, b) => (outputOrder.includes(a.name) ? outputOrder.indexOf(a.name) : 1000) - (outputOrder.includes(b.name) ? outputOrder.indexOf(b.name) : 1000)) + + return `# Token Build + ## Input + ${inputFiles.map(({ type, name, content }) => `
+ ${name} +
${content}
+
`).join('\n')} + + ## Output + ${outputFiles.map(({ type, name, content }) => `
+ ${name} +
${content}
+
`).join('\n')} + ` + + - name: Output Summary + run: echo -e ${{ steps.summary.outputs.result }} >> $GITHUB_STEP_SUMMARY diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index dba82aa30b..0e3a698200 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -307,6 +307,9 @@ jobs: - name: Remove Documentation versions.json run: rm -f ./packages/documentation/public/assets/versions.json + - name: Remove Documentation _headers + run: rm -f ./packages/documentation/public/_headers + - name: Remove Documentation _redirects run: rm -f ./packages/documentation/public/_redirects diff --git a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss index c2bd39a987..366e947df5 100644 --- a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss +++ b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss @@ -60,5 +60,6 @@ } .dep__version { + white-space: nowrap; } } diff --git a/packages/documentation/.storybook/styles/components/blocks.scss b/packages/documentation/.storybook/styles/components/blocks.scss index 6c17a5bfa1..c4c26501c0 100644 --- a/packages/documentation/.storybook/styles/components/blocks.scss +++ b/packages/documentation/.storybook/styles/components/blocks.scss @@ -38,6 +38,43 @@ border-top: post.$border-width solid post.$border-color; } } + + // category headers + &[title] { + > td { + background-clip: padding-box !important; + + &:first-child { + border-inline-start: post.$size-line solid transparent; + } + + &:last-child { + border-inline-end: post.$size-line solid transparent; + } + } + + &:first-child > td { + border-block-start: post.$size-hair solid transparent; + + &:first-child { + border-start-start-radius: post.$size-mini; + } + + &:last-child { + border-start-end-radius: post.$size-mini; + } + } + + &:last-child > td { + &:first-child { + border-end-start-radius: post.$size-mini; + } + + &:last-child { + border-end-end-radius: post.$size-mini; + } + } + } } } } diff --git a/packages/documentation/.storybook/styles/components/tabs.scss b/packages/documentation/.storybook/styles/components/tabs.scss index bd1b618255..fdc194c485 100644 --- a/packages/documentation/.storybook/styles/components/tabs.scss +++ b/packages/documentation/.storybook/styles/components/tabs.scss @@ -4,7 +4,13 @@ @include mixins.style-docs-only-guard('post-tabs') { &::part(tabs) { background: none; + } + + &::part(content) { + position: relative; + } + &:has(post-tab-panel > .sbdocs)::part(tabs) { &::before { display: block; content: ''; @@ -18,19 +24,7 @@ } } - &::part(content) { - position: relative; - - &::before { - display: block; - content: ''; - position: absolute; - top: 0; - bottom: post.$size-regular * -1; - left: calc(100% + #{post.$size-mini}); - border-left: post.$size-hair dotted post.$border-color; - } - + &:not(:has(post-tab-panel > .sbdocs))::part(content) { &::after { display: block; content: ''; @@ -38,7 +32,7 @@ top: calc(100% + #{post.$size-regular}); left: 0; right: post.$size-mini * -1; - border-top: post.$size-hair dotted post.$border-color; + border-top: post.$border-width dashed post.$border-color; } } } @@ -47,10 +41,6 @@ border-top-left-radius: post.$border-radius; border-top-right-radius: post.$border-radius; - &:first-child { - margin-left: post.$size-big; - } - &.active { border-top-left-radius: post.$border-radius; border-top-right-radius: post.$border-radius; @@ -65,3 +55,7 @@ margin-left: 1px; } } + +@include mixins.style-docs-only-guard('post-tab-header:not(post-tabs:has(post-tab-panel > .sbdocs) post-tab-header).tab-title[role="tab"]') { + font-size: post.$font-size-sm; +} diff --git a/packages/documentation/public/_headers b/packages/documentation/public/_headers new file mode 100644 index 0000000000..af4809add8 --- /dev/null +++ b/packages/documentation/public/_headers @@ -0,0 +1,5 @@ +# Adds custom headers for specific resources +# This file is used by Netlify to handle headers + +/assets/versions.json + Access-Control-Allow-Origin: * diff --git a/packages/documentation/public/netlify.toml b/packages/documentation/public/netlify.toml deleted file mode 100644 index 3e8cd3ecfe..0000000000 --- a/packages/documentation/public/netlify.toml +++ /dev/null @@ -1,4 +0,0 @@ -[[headers]] - for="/assets/versions.json" - [headers.values] - Access-Control-Allow-Origin = "*" diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx index 71f21d6f3a..be5b9cdbcd 100644 --- a/packages/documentation/src/stories/components/button/button.docs.mdx +++ b/packages/documentation/src/stories/components/button/button.docs.mdx @@ -36,6 +36,11 @@ Inverted buttons don't need special classes anymore, just use any of the [backgr ### Accent colors +
+

The accent colors are deprecated

+

The CSS classes to apply to the buttons will be removed in the future.

+
+ There are a number of accent colors that you can apply to buttons instead of the usual colors. diff --git a/packages/documentation/src/stories/foundation/color/color.docs.mdx b/packages/documentation/src/stories/foundation/color/color.docs.mdx index 703efbecb1..b0da9534b4 100644 --- a/packages/documentation/src/stories/foundation/color/color.docs.mdx +++ b/packages/documentation/src/stories/foundation/color/color.docs.mdx @@ -60,6 +60,12 @@ These colors are also available via the **Sass map** `$signal-background-colors` ## Accent colors + +
+

The accent colors are deprecated

+

Its CSS and SASS variables will be removed in the future.

+
+ These colors are also available via the **Sass map** `$accent-colors`.