From 570d62e2726fd6c40f0c1ae193e271466adfc320 Mon Sep 17 00:00:00 2001 From: jmfrancois Date: Wed, 27 Sep 2023 18:06:51 +0200 Subject: [PATCH] chore: remove styles --- .../design-docs/src/StatusTable.module.scss | 2 +- packages/storybook-docs/package.json | 1 - .../components/Statuses/Status.module.scss | 12 +- .../src/components/Statuses/Statuses.tsx | 2 +- packages/storybook-docs/src/globalStyles.scss | 343 +----------------- .../.storybook-templates/preview.js | 6 +- 6 files changed, 16 insertions(+), 350 deletions(-) diff --git a/packages/design-docs/src/StatusTable.module.scss b/packages/design-docs/src/StatusTable.module.scss index c6afc5d4ef5..05f886381a5 100644 --- a/packages/design-docs/src/StatusTable.module.scss +++ b/packages/design-docs/src/StatusTable.module.scss @@ -19,7 +19,7 @@ } } -.table.table { +.table { overflow: auto; th { diff --git a/packages/storybook-docs/package.json b/packages/storybook-docs/package.json index ceaceb17c3c..42d21eb7782 100644 --- a/packages/storybook-docs/package.json +++ b/packages/storybook-docs/package.json @@ -7,7 +7,6 @@ "scripts": { "build:styles": "webpack --config webpack.custom.js --mode=production", "build:lib": "talend-scripts build && npm run build:styles", - "pre-release": "npm run build:lib", "start": "npm run storybook", "lint": "talend-scripts lint", "test": "echo no test", diff --git a/packages/storybook-docs/src/components/Statuses/Status.module.scss b/packages/storybook-docs/src/components/Statuses/Status.module.scss index e705e6cd7cd..4fe317062f2 100644 --- a/packages/storybook-docs/src/components/Statuses/Status.module.scss +++ b/packages/storybook-docs/src/components/Statuses/Status.module.scss @@ -3,9 +3,9 @@ .badge { display: inline-flex; align-items: center; - justify-content: space-between; font: tokens.$coral-paragraph-s-bold; - color: tokens.$coral-color-neutral-text !important; + // color: tokens.$coral-color-neutral-text !important; + width: 100px; &, &:hover, @@ -16,7 +16,7 @@ &:not([href]) { span:first-child { - background-color: tokens.$coral-color-neutral-background-disabled; + // background-color: tokens.$coral-color-neutral-background-disabled; } } @@ -33,7 +33,7 @@ align-items: center; justify-content: center; gap: 1ch; - background: tokens.$coral-color-neutral-background; + // background: tokens.$coral-color-neutral-background; border-right: none; border-radius: tokens.$coral-radius-s 0 0 tokens.$coral-radius-s; } @@ -55,18 +55,22 @@ color: tokens.$coral-color-success-text-weak; background: tokens.$coral-color-success-background-strong; } + &-wip { color: tokens.$coral-color-beta-text-weak; background: tokens.$coral-color-beta-background-strong; } + &-deprecated { color: tokens.$coral-color-warning-text-weak; background: tokens.$coral-color-warning-background-strong; } + &-ko { color: tokens.$coral-color-danger-text-weak; background: tokens.$coral-color-danger-background-strong; } + &-na { color: tokens.$coral-color-neutral-text-weak; background: tokens.$coral-color-neutral-background-strong; diff --git a/packages/storybook-docs/src/components/Statuses/Statuses.tsx b/packages/storybook-docs/src/components/Statuses/Statuses.tsx index cc9510d8d01..353c49b42f0 100644 --- a/packages/storybook-docs/src/components/Statuses/Statuses.tsx +++ b/packages/storybook-docs/src/components/Statuses/Statuses.tsx @@ -17,7 +17,7 @@ function getIcon(statusType: StatusType) { export function ComponentStatuses(statuses: Statuses) { return ( - + {Object.entries(statuses).map(([statusType, { status, link }]) => ( .docs-story { - background: tokens.$coral-color-neutral-background; - border-radius: tokens.$coral-radius-s; - box-shadow: none; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - } - } - - // Embedded components - .docs-story { - &::before { - content: 'Embedded component'; - font: tokens.$coral-paragraph-m-bold; - color: tokens.$coral-color-neutral-text-weak; - padding: 0 tokens.$coral-spacing-xxs; - border-radius: tokens.$coral-radius-s; - background: tokens.$coral-color-neutral-background-medium; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - margin-left: tokens.$coral-spacing-m; - position: relative; - top: tokens.$coral-spacing-m; - } - - .docblock-code-toggle { - border: 0; - font: tokens.$coral-paragraph-m-bold; - color: tokens.$coral-color-accent-text; - background-color: tokens.$coral-color-accent-background-weak; - transition: tokens.$coral-transition-fast; - - &:focus { - box-shadow: none; - } - - &:focus-visible { - outline: tokens.$coral-border-s-solid tokens.$coral-color-assistive-border-focus; - outline-offset: 0.1rem; - } - - &:hover { - color: tokens.$coral-color-accent-text-hover; - background-color: tokens.$coral-color-accent-background-weak-hover; - } - - &--expanded { - color: tokens.$coral-color-accent-text-weak; - background-color: tokens.$coral-color-accent-background-strong; - - &:hover { - color: tokens.$coral-color-accent-text-weak-hover; - background-color: tokens.$coral-color-accent-background-strong-hover; - } - } - } - } - - // Args tables - .docblock-argstable { - color: tokens.$coral-color-neutral-text; - - .docblock-argstable-head th { - font: tokens.$coral-heading-s; - color: tokens.$coral-color-neutral-text; - } - - .docblock-argstable-body { - box-shadow: tokens.$coral-elevation-shadow-neutral-m; - border-radius: tokens.$coral-radius-m; - - tr:not(:first-child) { - border-top-color: tokens.$coral-color-neutral-border-weak; - } - - td { - background: tokens.$coral-color-neutral-background-medium; - - span, - div { - color: tokens.$coral-color-neutral-text; - } - } - } - } - - // Code blocks in doc - .docblock-source { - background: hsl(0deg, 0%, 97%); // Should not be theme-sensitive - color: hsl(0deg, 0%, 13%); // Should not be theme-sensitive - border-radius: tokens.$coral-radius-s; - box-shadow: none; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - margin: 0 0 tokens.$coral-spacing-m 0; - - .prismjs { - background: transparent; - border: 0; - box-shadow: none; - font: tokens.$coral-data-m; - - .token { - font: tokens.$coral-data-m; - - &.plain-text { - color: hsl(204deg, 96%, 18%); // Should not be theme-sensitive - } - } - } - } - - // Formatting - abbr { - color: tokens.$coral-color-beta-text; - font: tokens.$coral-data-m; - } - - blockquote { - border-left: 4px solid tokens.$coral-color-accent-icon; - - p { - font: tokens.$coral-paragraph-m; - color: tokens.$coral-color-neutral-text-weak; - font-size: 1.6rem; - } - } - - #diveinto { - margin-bottom: 2rem; - } - - img { - display: block; - max-width: 100%; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - border: none; - color: tokens.$coral-color-neutral-text; - } - - h1 { - font: tokens.$coral-heading-l; - font-size: 3.2rem; - - + p { - font: tokens.$coral-heading-m; - color: tokens.$coral-color-neutral-text-weak; - - > a { - font-size: inherit; - } - } - } - - h2 { - font: tokens.$coral-heading-l; - font-size: 2rem; - } - - h3 { - font: tokens.$coral-heading-m; - } - - h4 { - font: tokens.$coral-heading-s; - } - - h5 { - font: tokens.$coral-heading-s; - } - - h6 { - font: tokens.$coral-heading-s; - } - - p { - code { - font: tokens.$coral-data-m; - color: tokens.$coral-color-neutral-text; - background: tokens.$coral-color-neutral-background-medium; - border: none; - } - } - - code { - font: tokens.$coral-data-m; - color: tokens.$coral-color-neutral-text; - border: none; - background: tokens.$coral-color-neutral-background-medium; - } - - .sbdocs-a { - color: tokens.$coral-color-accent-text; - transition: tokens.$coral-transition-fast; - font-weight: bold; - - &:hover { - color: tokens.$coral-color-accent-text-hover; - text-decoration: underline; - } - } - - table { - width: 100%; - border-collapse: collapse; - overflow: hidden; - - th, - td { - padding: tokens.$coral-spacing-xs tokens.$coral-spacing-s; - border: none; - } - - th { - width: 50%; - color: tokens.$coral-color-neutral-text-weak; - text-align: start; - font-size: 1.2rem; - font: tokens.$coral-heading-s; - background: tokens.$coral-color-neutral-background-medium; - border-left: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - - &:last-child { - border-right: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - } - } - - td { - font: tokens.$coral-paragraph-m; - color: tokens.$coral-color-neutral-text; - border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; - } - - tr:nth-of-type(2n) { - background-color: tokens.$coral-color-neutral-background-medium; - } - } - - // stylelint-disable-next-line selector-no-qualifying-type - &.sbdocs-preview pre.prismjs { - background: #022e4d; - } - - kbd { - padding: 0.25rem 0.5rem; - color: #202020; - background-color: #eee; - border-radius: 0.4rem; - border: 1px solid #606060; - font-size: 1.2rem; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; - } - - footer { - text-align: center; - } - - div { - & > dt { - font-size: 1.6rem; - font-weight: 600; - } - - & > dt::before { - content: '#'; - color: #ff6d70; - padding-right: 1ch; - } - - & > dd { - margin: 0.5rem 0; - font-size: 1.4rem; - } - } -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; +.sbdocs.sbdocs-preview { + background-color: tokens.$coral-color-neutral-background; } diff --git a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js index aec34200f9c..dbbb08b4cf5 100644 --- a/tools/scripts-config-storybook-lib/.storybook-templates/preview.js +++ b/tools/scripts-config-storybook-lib/.storybook-templates/preview.js @@ -109,8 +109,10 @@ const defaultPreview = { ].filter(Boolean), parameters:{ backgrounds: { disable: true, grid: { disable: true } }, - doc: { - toc: true, // 👈 Enables the table of contents + docs: { + canvas: { + withToolbar: true, + }, } } };