diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 500c67ab5..972603c12 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -7,7 +7,8 @@ on: - main jobs: - css_stylelint: + css-lint: + name: CSS Linter runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 @@ -16,10 +17,11 @@ jobs: node-version-file: '.nvmrc' - run: yarn install --frozen-lockfile - - name: Run Stylelint - run: yarn css:stylelint -- -f github + - name: Run css:lint + run: yarn css:lint - js_eslint: + js-lint: + name: JS Linter runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 @@ -28,49 +30,19 @@ jobs: node-version-file: '.nvmrc' - run: yarn install --frozen-lockfile - - name: Run eslint - run: yarn js:eslint + - name: Run js:lint + run: yarn js:lint - css_prettier: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - uses: actions/setup-node@v4 - with: - node-version-file: '.nvmrc' - - - run: yarn install --frozen-lockfile - - - name: Run Prettier - run: yarn css:prettier -- --check - - js_prettier: + markdown-linkt: + name: Markdown Linter + if: '!github.event.deleted' runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version-file: '.nvmrc' - - run: yarn install --frozen-lockfile - - name: Run Prettier - run: yarn js:prettier -- --check - - markdownlint: - name: Lint markdown - if: '!github.event.deleted' - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - name: Setup Node - uses: actions/setup-node@v4 - with: - node-version-file: '.nvmrc' - cache: 'yarn' - - name: Install Dependencies - run: yarn install - - name: Install problem matcher - uses: xt0rted/markdownlint-problem-matcher@v2 - - name: Lint markdown - run: yarn lint:markdown + - name: Run markdown:lint + run: yarn markdown:lint diff --git a/.gitignore b/.gitignore index b2b162574..f76b9c72f 100644 --- a/.gitignore +++ b/.gitignore @@ -31,3 +31,6 @@ storybook-static # Dev Tools .vscode .history + +#zipped files generated when using dapple. +dist.zip \ No newline at end of file diff --git a/Taskfile.yml b/Taskfile.yml index a04e92490..bd03055a2 100644 --- a/Taskfile.yml +++ b/Taskfile.yml @@ -64,13 +64,15 @@ tasks: cmds: - task dev:cli -- yarn chromatic + dev:format: + summary: Auto-fix linting errors + cmds: + - task dev:cli -- yarn format + dev:lint: summary: Run linters cmds: - - task dev:cli -- yarn js:eslint - - task dev:cli -- yarn js:lint - - task dev:cli -- yarn css:stylelint - - task dev:cli -- yarn lint:markdown + - task dev:cli -- yarn lint dev:chromatic: summary: Run Chromatic for visual test diff --git a/base.scss b/base.scss index 06524452b..fb2cfc3db 100644 --- a/base.scss +++ b/base.scss @@ -1,23 +1,18 @@ @import "./src/styles/scss/reset"; -@import "./src/stories/Library/colors/color-variables"; @import "./src/styles/scss/skeleton"; +@import "./src/styles/scss/tools"; -// The imports below are not advised to be moved around, because -// they cross-reference various defined variables between each other. +// Legacy - utility classes and other stuff that needs to be cleaned later. +@import "./src/styles/scss/legacy"; // Library -@import "./src/stories/Library/breakpoints/breakpoints"; -@import "./src/stories/Library/typography/typography"; @import "./src/stories/Library/links/links"; @import "./src/stories/Library/link-filters/link-filters"; @import "./src/stories/Library/Arrows/arrows"; @import "./src/stories/Library/Buttons/button/buttons"; @import "./src/stories/Library/Buttons/button-ui/buttons-ui"; -@import "./src/stories/Library/layout/spacing"; -@import "./src/stories/Library/layout/z-index"; @import "./src/stories/Library/tag/tag"; @import "./src/stories/Library/logo/logo"; -@import "./src/stories/Library/pagefold/pagefold"; @import "./src/stories/Library/dropdown/dropdown"; @import "./src/stories/Library/breadcrumb/breadcrumb"; @import "./src/stories/Library/status-label/status-label"; @@ -102,6 +97,12 @@ @import "./src/stories/Library/Buttons/row-button/row-button"; @import "./src/stories/Library/Buttons/row-button/row-buttons"; @import "./src/stories/Library/article-header/article-header"; +@import "./src/stories/Library/event-header/event-header"; +@import "./src/stories/Library/image-credited/image-credited"; +@import "./src/stories/Library/event-description/event-description"; +@import "./src/stories/Library/link-with-icon/link-with-icon"; +@import "./src/stories/Library/rich-text/rich-text"; +@import "./src/stories/Library/medias/medias"; // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest @import "./src/stories/Blocks/autosuggest/autosuggest"; @@ -117,8 +118,7 @@ @import "./src/stories/Blocks/material-manifestation-item/material-manifestation-item"; @import "./src/stories/Blocks/advanced-search/advanced-search"; @import "./src/stories/Blocks/article/article"; +@import "./src/stories/Blocks/event-page/event-page"; @import "./src/styles/scss/shared"; @import "./src/styles/scss/internal"; -// Should be last to make it easier to overwrite. -@import "./src/stories/Library/colors/color-classes"; diff --git a/docs/Icon-guidelines.md b/docs/Icon-guidelines.md new file mode 100644 index 000000000..9d5268358 --- /dev/null +++ b/docs/Icon-guidelines.md @@ -0,0 +1,16 @@ +# Icon Usage Guidelines + +This folder contains SVG icons that are used in the design system. When using +icons from this folder, please follow the guidelines below: + +- Icons located in public/ folder is the current source of truth. All icons +will be placed in this folder. Ensure that icons placed gere are using the +`class` attribute, and not `className` for SVG element. + +- For icons used in React components that require class modifications or +similar, first create the icon in public/icons, and then manually copy the SVG +from the `public/icons` folder and make any necessary changes, i.e replacing +the `class` with `className` or other modifications. + +Currently, there is no automated solution for this process that ensures +consistency for this. This may be changed in the future. diff --git a/docs/scss.md b/docs/scss.md new file mode 100644 index 000000000..7c685bf8f --- /dev/null +++ b/docs/scss.md @@ -0,0 +1,48 @@ +# SCSS strategy + +In December 2023, we have aimed to streamline the way we write SCSS. +Some of these rules have not been applied on previous code, but moving forward, +this is what we aim to do. + +## BEM naming convention + +### Examples of do's and dont's + +Assuming we have a Counter block: + +- Styling must be placed in a correspondingly named file `counter.scss` +- `.counter__title` ✅ +- `&__title` ❌ (`&__` should be avoided, to avoid massive indention.) +- `.counter-title` ❌ (Must start with `.FILE-NAME__`) +- `.counter__title__text` ❌ (Only one level) + +#### Variants and modifiers + +Sometimes you'll want to add variants to CSS-only classes. This can be done +using **modifier classes** - e.g. `.counter--large`, `.counter__title--large`. +**These classes must not be set alone.** E.g. `.counter__title--large` must not +exist on an element without also having `.counter__title`. + +## Mixins, placeholder and variables + +Shared tooling is saved in [src/styles/scss/tools](../src/styles/scss/tools), +NOT in individual stories. + +### Typography + +Typography is defined in +[src/styles/scss/tools/variables.typography.scss](../src/styles/scss/tools/variables.typography.scss). +These variables, all starting with `$typo__`, can be used, using a mixin, +`@include typography($typo__h2);` in stories. +Generally speaking, font styling should be avoided directly in stories, rather +adding new variants in the `variables.typography.scss` file. +This way, we can better keep track of what is available, and avoid duplicate +styling in the future. + +## Legacy classes + +In the future, we want to apply these rules to old code too. Until then, +the old classes are supported using the files +in [src/styles/scss/legacy](../src/styles/scss/legacy). + +These classes should **not be used in new components** diff --git a/package.json b/package.json index 8700abc1e..43dd4bbed 100644 --- a/package.json +++ b/package.json @@ -16,14 +16,16 @@ "css:lint": "concurrently 'yarn:css:stylelint' 'yarn:css:prettier -- --check' --raw", "css:lint:watch": "chokidar 'src/**/*.scss' -c 'yarn css:lint'", "css:format": "concurrently 'yarn:css:stylelint -- --fix' 'yarn:css:prettier -- --write' --max-processes 1 --raw", - "css:build": "sass base.scss:src/styles/css/base.css", + "css:build": "sass base.scss:src/styles/css/base.css --style compressed", "css:watch": "yarn css:build -- --watch", + "markdown:lint": "markdownlint-cli2", + "markdown:format": "markdownlint-cli2-fix", "watch": "concurrently 'yarn:js:lint:watch' 'yarn:css:lint:watch'", - "dev": "concurrently --raw \"yarn storybook\" \"yarn css:watch\" \"yarn watch\"", + "dev": "concurrently --raw 'yarn storybook' 'yarn css:watch' 'yarn watch'", "chromatic": "npx chromatic --exit-zero-on-changes", - "lint": "concurrently 'yarn:js:lint' 'yarn:css:lint'", - "lint:markdown": "markdownlint-cli2", - "lint:markdown:fix": "markdownlint-cli2-fix" + "lint": "concurrently 'yarn:js:lint' 'yarn:css:lint' 'yarn:markdown:lint'", + "format": "concurrently 'yarn:js:format' 'yarn:css:format' 'yarn:markdown:format'" + }, "browserslist": { "production": [ @@ -60,12 +62,12 @@ "chokidar-cli": "^3.0.0", "clsx": "^2.0.0", "concurrently": "^8.2.2", - "eslint": "^8.55.0", + "eslint": "^8.56.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.1.0", "eslint-config-prettier": "^9.1.0", "eslint-loader": "^4.0.2", - "eslint-plugin-import": "^2.29.0", + "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.33.2", diff --git a/public/icons/README.md b/public/icons/README.md new file mode 100644 index 000000000..5279acc96 --- /dev/null +++ b/public/icons/README.md @@ -0,0 +1,3 @@ +# Icon Usage Guidelines + +For information on how to use icons for this project, see [icon-guidelines.md](../../docs/Icon-guidelines.md). diff --git a/public/icons/arrow-ui/icon-arrow-ui-large-left.svg b/public/icons/arrow-ui/icon-arrow-ui-large-left.svg index 41d2c739a..543ea6e45 100644 --- a/public/icons/arrow-ui/icon-arrow-ui-large-left.svg +++ b/public/icons/arrow-ui/icon-arrow-ui-large-left.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/icons/arrow-ui/icon-arrow-ui-large-right.svg b/public/icons/arrow-ui/icon-arrow-ui-large-right.svg index 843458a19..7da9d8704 100644 --- a/public/icons/arrow-ui/icon-arrow-ui-large-right.svg +++ b/public/icons/arrow-ui/icon-arrow-ui-large-right.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/icons/arrow-ui/icon-arrow-ui-small-left.svg b/public/icons/arrow-ui/icon-arrow-ui-small-left.svg index 06cc6da7c..7c62fb9f8 100644 --- a/public/icons/arrow-ui/icon-arrow-ui-small-left.svg +++ b/public/icons/arrow-ui/icon-arrow-ui-small-left.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/icons/arrow-ui/icon-arrow-ui-small-right.svg b/public/icons/arrow-ui/icon-arrow-ui-small-right.svg index 99a8020ff..c6c03a846 100644 --- a/public/icons/arrow-ui/icon-arrow-ui-small-right.svg +++ b/public/icons/arrow-ui/icon-arrow-ui-small-right.svg @@ -1,4 +1,4 @@ - - + + diff --git a/public/icons/collection/InternalLink.svg b/public/icons/collection/InternalLink.svg new file mode 100644 index 000000000..8cf4d4eab --- /dev/null +++ b/public/icons/collection/InternalLink.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/icons/collection/SearchBooks.svg b/public/icons/collection/SearchBooks.svg new file mode 100644 index 000000000..b5e61850d --- /dev/null +++ b/public/icons/collection/SearchBooks.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/stories/Blocks/advanced-search/advanced-search.scss b/src/stories/Blocks/advanced-search/advanced-search.scss index e5c644b26..bd00de0be 100644 --- a/src/stories/Blocks/advanced-search/advanced-search.scss +++ b/src/stories/Blocks/advanced-search/advanced-search.scss @@ -2,9 +2,9 @@ width: 100%; padding: 40px $s-md; - background-color: $c-global-primary; + background-color: $color__global-primary; - @include breakpoint-m { + @include media-query__medium { width: 100%; padding: $s-4xl 157px 64px 157px; } @@ -12,19 +12,19 @@ &__title { margin-bottom: $s-xl; - @include breakpoint-m { + @include media-query__medium { margin-bottom: 48px; } } &__clauses { - @extend %text-button-placeholder; + @include typography($typo__button); display: flex; flex-direction: row; align-items: center; margin: 0 0 $s-md $s-xl; - @include breakpoint-m { + @include media-query__medium { margin: 0 0 $s-lg $s-xl; } } @@ -32,10 +32,10 @@ &__clause { display: inline-block; margin-right: $s-xl; - color: $c-text-primary-black; + color: $color__text-primary-black; &.advanced-search__clause--grey { - color: $c-global-tertiary-2; + color: $color__global-tertiary-2; } } @@ -51,7 +51,7 @@ &__filter { width: 100%; - @include breakpoint-s { + @include media-query__small { width: 260px; margin-right: $s-lg; } @@ -63,7 +63,7 @@ flex-direction: column; justify-content: flex-end; - @include breakpoint-s { + @include media-query__small { flex-direction: row; } } @@ -72,7 +72,7 @@ align-self: center; margin-bottom: $s-lg; - @include breakpoint-s { + @include media-query__small { align-self: center; margin-bottom: 0; } @@ -81,7 +81,7 @@ &__search-button { width: 100%; - @include breakpoint-s { + @include media-query__small { margin-left: $s-lg; width: 266px; } @@ -89,19 +89,19 @@ &__divider { height: 1px; - background-color: $c-global-tertiary-1; + background-color: $color__global-tertiary-1; margin: $s-2xl 0; width: 100%; } &__cql-input { - @extend %text-body-medium-regular-placeholder; - border: solid 1px $c-global-tertiary-1; + @include typography($typo__body-placeholder); + border: solid 1px $color__global-tertiary-1; width: 100%; margin-bottom: 46px; padding: $s-md; resize: none; - background-color: $c-global-primary; + background-color: $color__global-primary; } } @@ -113,7 +113,7 @@ &__input { width: 100%; - @include breakpoint-m { + @include media-query__medium { padding-right: $s-4xl; margin-bottom: 48px; } @@ -121,18 +121,18 @@ &__preview { padding: $s-xl 48px $s-xl 64px; - background-color: $c-global-secondary; + background-color: $color__global-secondary; flex-direction: column; align-self: flex-start; display: none; - @include breakpoint-m { + @include media-query__medium { display: flex; width: 300px; min-width: 300px; padding: $s-2xl $s-xl; } - @include breakpoint-l { + @include media-query__large { padding: $s-xl 48px $s-xl 64px; width: 420px; min-width: 420px; @@ -144,7 +144,7 @@ width: 100%; margin-bottom: 48px; - @include breakpoint-m { + @include media-query__medium { display: none; } } diff --git a/src/stories/Blocks/article/article.scss b/src/stories/Blocks/article/article.scss index 9485ace79..e7a43242b 100644 --- a/src/stories/Blocks/article/article.scss +++ b/src/stories/Blocks/article/article.scss @@ -1,3 +1,3 @@ .article { - background-color: $c-global-primary; + background-color: $color__global-primary; } diff --git a/src/stories/Blocks/autosuggest/autosuggest.scss b/src/stories/Blocks/autosuggest/autosuggest.scss index 504ac3edb..9473bebe9 100644 --- a/src/stories/Blocks/autosuggest/autosuggest.scss +++ b/src/stories/Blocks/autosuggest/autosuggest.scss @@ -1,6 +1,6 @@ .autosuggest { - background-color: $c-global-primary; - outline: 1px solid $c-global-tertiary-1; + background-color: $color__global-primary; + outline: 1px solid $color__global-tertiary-1; position: absolute; left: 0; right: 0; diff --git a/src/stories/Blocks/event-page/EventPage.stories.tsx b/src/stories/Blocks/event-page/EventPage.stories.tsx new file mode 100644 index 000000000..716883336 --- /dev/null +++ b/src/stories/Blocks/event-page/EventPage.stories.tsx @@ -0,0 +1,115 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import Event from "./EventPage"; + +export default { + title: "Blocks / Event page", + component: Event, + decorators: [withDesign], + argTypes: { + title: { + defaultValue: "Fernisering Modern Dans", + type: "string", + }, + date: { + defaultValue: "06 Dec - 12 Jan 2022", + type: "string", + }, + image: { + defaultValue: + "https://images.unsplash.com/photo-1531058020387-3be344556be6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZXZlbnR8fHx8fHwxNzAyOTEwMzE0&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080", + type: "string", + }, + descriptionTitle: { + defaultValue: "Beskrivelse", + type: "string", + }, + descriptionDescription: { + defaultValue: `Foreningen for Integreret Moderne Dans arbejder med at udvide + normalitetsbegrebet i scenekunsten. For hvad er normalt? Rosenreglen og + Mødrenes hus. I 2022 udgav hun også den stærkt politiske digtsamling Jeg + vil have en statsminister.`, + type: "string", + }, + horizontalTermLineData: { + defaultValue: [ + { + title: "I samme serie ", + linkList: [ + { + text: "Litteratur & Aktivisme", + url: "/", + }, + ], + }, + { + title: "Emneord", + linkList: [ + { + text: "dans", + url: "/", + }, + { + text: "contemporary", + url: "/", + }, + { + text: "modern", + url: "/", + }, + { + text: "scenekunst", + url: "/", + }, + { + text: "digt", + url: "/", + }, + { + text: "3-8 årige", + url: "/", + }, + ], + }, + ], + }, + listDescriptionData: { + defaultValue: { + Tid: { value: ["19:30 — 21:00"], type: "standard" }, + Pris: { + value: ["Standard: 65 kr.", "Børn: Gratis"], + type: "standard", + layout: "column", + }, + Sted: { + value: [ + "Hovedbibliotek", + "Greve bibliotek", + "Hovedbibliotek", + "Greve bibliotek", + ], + type: "link", + }, + Adresse: { + value: ["Kampmanns Plads 2, 8000, Aarhus"], + type: "standard", + }, + Målgruppe: { value: ["Alle"], type: "standard" }, + }, + }, + }, + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39846&mode=dev", + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const Default = Template.bind({}); +export const withOutImage = Template.bind({}); +withOutImage.args = { + image: "", +}; diff --git a/src/stories/Blocks/event-page/EventPage.tsx b/src/stories/Blocks/event-page/EventPage.tsx new file mode 100644 index 000000000..8ca87a781 --- /dev/null +++ b/src/stories/Blocks/event-page/EventPage.tsx @@ -0,0 +1,35 @@ +import { FC } from "react"; +import EventHeader from "../../Library/event-header/EventHeader"; +import EventDescription, { + EventDescriptionProps, +} from "../../Library/event-description/EventDescription"; + +type EventPageProps = { + title: string; + date: string; + image: string; +} & EventDescriptionProps; + +const EventPage: FC = ({ + title, + date, + image, + descriptionTitle, + descriptionDescription, + horizontalTermLineData, + listDescriptionData, +}) => { + return ( +
+ + +
+ ); +}; + +export default EventPage; diff --git a/src/stories/Blocks/event-page/event-page.scss b/src/stories/Blocks/event-page/event-page.scss new file mode 100644 index 000000000..583f93dc8 --- /dev/null +++ b/src/stories/Blocks/event-page/event-page.scss @@ -0,0 +1,3 @@ +.event-page { + background-color: $color__global-primary; +} diff --git a/src/stories/Blocks/footer/footer.scss b/src/stories/Blocks/footer/footer.scss index b5ca2fa84..273906a5d 100644 --- a/src/stories/Blocks/footer/footer.scss +++ b/src/stories/Blocks/footer/footer.scss @@ -7,7 +7,7 @@ display: none; } - @include breakpoint-s { + @include media-query__small { .footer__mobile { display: none; } @@ -37,10 +37,10 @@ } .internal-pagefold-parent { - background-color: $c-global-secondary; + background-color: $color__global-secondary; - @include breakpoint-m { - padding: 56px 100px 24px; + @include media-query__medium { + padding: 56px $s-5xl $s-lg; } } } @@ -56,15 +56,15 @@ width: 82px; .dropdown__select { - background-color: $c-global-secondary; - height: 32px; + background-color: $color__global-secondary; + height: $s-xl; padding: 0 12px; min-width: 82px; } .dropdown__arrows { - height: 32px; - width: 32px; + height: $s-xl; + width: $s-xl; } } @@ -78,16 +78,16 @@ display: flex; li { - padding-bottom: 16px; + padding-bottom: $s-md; } - @include breakpoint-s { + @include media-query__small { li { padding-bottom: 0; } a { - padding-right: 24px; + padding-right: $s-lg; } a:last-child { @@ -100,33 +100,33 @@ display: flex; a { - padding-right: 24px; + padding-right: $s-lg; } } // Separator .footer__separator { - border-bottom: 1px solid $c-global-tertiary-1; - margin: #{$s-24}px 0; + border-bottom: 1px solid $color__global-tertiary-1; + margin: $s-lg 0; } // Separator mobile tweaks .footer__mobile .footer__separator { - margin: #{$s-24}px -50px; + margin: $s-lg (-50px); } // Link tweaks .footer__column-link { - margin-top: #{$s-16}px; + margin-top: $s-md; } .footer__site-info-link { text-decoration: none; - @extend %text-links-placeholder; + @include typography($typo__links); } .footer__column-phone { - color: $c-text-primary-black; + color: $color__text-primary-black; text-decoration: none; } diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss index 295c6852c..0e19c8a07 100644 --- a/src/stories/Blocks/header/header.scss +++ b/src/stories/Blocks/header/header.scss @@ -1,28 +1,28 @@ .header { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; width: 100%; display: grid; grid-template-columns: 1fr; - background-color: $c-global-primary; + background-color: $color__global-primary; position: sticky; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; z-index: $z-20; - @include breakpoint-s { + @include media-query__small { grid-template-columns: 1fr 105px; } - @include breakpoint-m { + @include media-query__medium { grid-template-columns: 250px 1fr 105px; } } .header__logo-desktop { display: none; - border-right: 1px solid $c-global-tertiary-1; - @include breakpoint-m { + border-right: 1px solid $color__global-tertiary-1; + @include media-query__medium { display: block; } } @@ -41,13 +41,13 @@ } .header__menu-first { - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; display: grid; grid-template-columns: 1fr auto auto; } .header__menu-navigation-logo { - margin-left: 16px; + margin-left: $s-md; display: flex; align-items: center; } @@ -55,7 +55,7 @@ .header__menu-navigation { display: none; - @include breakpoint-m { + @include media-query__medium { display: flex; padding: 0 12px; height: 100%; @@ -65,13 +65,13 @@ .header__menu-navigation-mobile { display: flex; - @include breakpoint-s { + @include media-query__small { .pagefold-triangle-small { display: none; } } - @include breakpoint-m { + @include media-query__medium { display: none; } } @@ -80,7 +80,7 @@ display: flex; justify-content: center; align-items: center; - border-right: 1px solid $c-global-tertiary-1; + border-right: 1px solid $color__global-tertiary-1; } .header__menu-navigation-item:hover { @@ -93,13 +93,13 @@ height: 100%; display: flex; align-items: center; - color: $c-text-primary-black; + color: $color__text-primary-black; } .header__menu-profile, .header__menu-bookmarked { position: relative; - border-left: 1px solid $c-global-tertiary-1; + border-left: 1px solid $color__global-tertiary-1; a { width: 100%; @@ -117,20 +117,20 @@ text-overflow: ellipsis; overflow: hidden; width: 100%; - padding: 0 4px; + padding: 0 $s-xs; text-align: center; } - @include breakpoint-s { + @include media-query__small { span { - bottom: 4px; + bottom: $s-xs; } } .header__notification { position: absolute; - width: 8px; - height: 8px; + width: $s-sm; + height: $s-sm; border-radius: 100%; transform: translateX(10px) translateY(-12px); } @@ -148,20 +148,20 @@ } .header__menu-search-input { + @include typography($typo__body-placeholder); + width: 100%; height: 100%; - padding: 0 24px; + padding: 0 $s-lg; border: 0 solid transparent; background-color: transparent; - font-size: 16px; - @extend %text-body-medium-regular-placeholder; ::placeholder { - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; } &:focus { - background-color: $c-text-primary-white; + background-color: $color__text-primary-white; border: 0 solid transparent; outline: none; } @@ -180,16 +180,16 @@ } .header__menu-dropdown { - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-placeholder); position: absolute; right: 0; top: 58px; - background-color: $c-global-primary; + background-color: $color__global-primary; padding: $s-xs 0; - outline: $c-global-tertiary-1 solid 1px; + outline: $color__global-tertiary-1 solid 1px; z-index: $z-10; - @include breakpoint-s { + @include media-query__small { padding: $s-sm 0; right: 0; top: 72px; @@ -202,12 +202,12 @@ cursor: pointer; &:hover { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } } .header__menu-dropdown-item--highlighted { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } .header__menu-dropdown-icon { @@ -217,10 +217,10 @@ } .header__clock { - border-left: 1px solid $c-global-tertiary-1; + border-left: 1px solid $color__global-tertiary-1; display: none; - @include breakpoint-s { + @include media-query__small { display: block; } } @@ -238,7 +238,7 @@ justify-content: center; align-items: center; - @include breakpoint-s { + @include media-query__small { height: 70px; width: 70px; } @@ -262,13 +262,13 @@ height: 100vh; grid-template-columns: 384px 1fr; - @include breakpoint-s { + @include media-query__small { grid-template-columns: 384px 1fr; } } .header__overlay-main { - background-color: $c-global-primary; + background-color: $color__global-primary; } .header__overlay-backdrop { @@ -282,7 +282,7 @@ } .header__overlay-menu-item { - margin-bottom: 8px; + margin-bottom: $s-sm; } // The kebab casing conflicts with our naming convention. diff --git a/src/stories/Blocks/material-banner/material-banner.scss b/src/stories/Blocks/material-banner/material-banner.scss index ec045f72c..5416a714c 100644 --- a/src/stories/Blocks/material-banner/material-banner.scss +++ b/src/stories/Blocks/material-banner/material-banner.scss @@ -1,13 +1,13 @@ .material-banner__header { position: relative; - padding: 24px; + padding: $s-lg; - @include breakpoint-s { - padding: 24px 45px; + @include media-query__small { + padding: $s-lg 45px; } - @include breakpoint-m { - padding: 50px 0 45px 100px; + @include media-query__medium { + padding: 50px 0 45px $s-5xl; } } @@ -15,7 +15,7 @@ display: flex; flex-direction: column; - @include breakpoint-s { + @include media-query__small { flex-direction: row; align-items: flex-end; justify-content: space-between; @@ -23,14 +23,14 @@ } .material-banner__menu { - margin-top: 16px; + margin-top: $s-md; padding-right: 20px; .link-filters { display: none; } - @include breakpoint-m { + @include media-query__medium { position: absolute; top: 88px; right: 20px; @@ -48,7 +48,7 @@ position: relative; } - @include breakpoint-l { + @include media-query__large { position: unset; top: unset; right: unset; @@ -68,11 +68,11 @@ background-color: #f6f5f0; } - @include breakpoint-s { + @include media-query__small { grid-template-columns: repeat(3, 1fr); } - @include breakpoint-l { + @include media-query__large { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } } diff --git a/src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.stories.tsx b/src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.stories.tsx index 1d9cc273a..aa4f704aa 100644 --- a/src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.stories.tsx +++ b/src/stories/Blocks/material-manifestation-item/MaterialMainfestationItem.stories.tsx @@ -38,14 +38,14 @@ const Template: ComponentStory = (args) => { export const Item = Template.bind({}); Item.args = { detailsData: { - Type: { value: "Bog", type: "standard" }, - Sprog: { value: "Dansk", type: "standard" }, - Bidragsydere: { value: "Karsten Sand Iversen", type: "link" }, - Originaltitel: { value: "Ulysses (1922)", type: "standard" }, - ISBN: { value: "9788763814584", type: "standard" }, - Udgave: { value: "Udgave, 2. oplag (2015)", type: "standard" }, - Omfang: { value: "795 sider", type: "standard" }, - Forlag: { value: "Rosinante", type: "standard" }, - Målgruppe: { value: "Voksenmateriale", type: "standard" }, + Type: { value: ["Bog"], type: "standard" }, + Sprog: { value: ["Dansk"], type: "standard" }, + Bidragsydere: { value: ["Karsten Sand Iversen"], type: "link" }, + Originaltitel: { value: ["Ulysses (1922)"], type: "standard" }, + ISBN: { value: ["9788763814584"], type: "standard" }, + Udgave: { value: ["Udgave, 2. oplag (2015)"], type: "standard" }, + Omfang: { value: ["795 sider"], type: "standard" }, + Forlag: { value: ["Rosinante"], type: "standard" }, + Målgruppe: { value: ["Voksenmateriale"], type: "standard" }, }, }; diff --git a/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss b/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss index 2dc3a2a33..24183fcfd 100644 --- a/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss +++ b/src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss @@ -6,7 +6,7 @@ display: grid; cursor: pointer; - @include breakpoint-s { + @include media-query__small { min-height: 184px; grid-template-columns: min-content minmax(0, 634px) 1fr; grid-template-rows: 40px auto; @@ -14,13 +14,13 @@ } &:hover { - filter: drop-shadow(0 4px 20px rgba(72, 72, 72, 0.1)); + filter: drop-shadow(0 $s-xs 20px rgba(72, 72, 72, 0.1)); } &__cover { display: none; - @include breakpoint-s { + @include media-query__small { display: block; grid-column: 1/2; grid-row: 1/3; @@ -34,23 +34,23 @@ } &__text { - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; - @include breakpoint-s { + @include media-query__small { grid-column: 2/3; } } &__title { - color: $c-text-primary-black; + color: $color__text-primary-black; margin-top: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px; - @include breakpoint-s { - margin-top: 16px; + @include media-query__small { + margin-top: $s-md; max-width: 100%; } } @@ -62,7 +62,7 @@ gap: 9px; img { - width: 16px; + width: $s-md; } &.expanded { @@ -72,22 +72,22 @@ } & p.text-small-caption { - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; } } &__buttons { - @include breakpoint-s { + @include media-query__small { display: flex; flex-direction: column; align-items: center; justify-self: end; } .reserve-button { - margin-top: 16px; + margin-top: $s-md; max-width: 158px; - @include breakpoint-s { + @include media-query__small { margin-top: 0; } } diff --git a/src/stories/Blocks/material-page/material-page-skeleton.scss b/src/stories/Blocks/material-page/material-page-skeleton.scss index a0fc73290..31a54aec6 100644 --- a/src/stories/Blocks/material-page/material-page-skeleton.scss +++ b/src/stories/Blocks/material-page/material-page-skeleton.scss @@ -1,19 +1,10 @@ // Since we are using the Skeleton Screen Css classes connected to the existing styling // we deliberately not follow the BEM naming convention here. -/* stylelint-disable plugin/stylelint-bem-namics */ -/* stylelint-disable max-nesting-depth */ - -.material-page { - &.ssc { - .material-header { - &__content { - height: 605px; - // Favorite icon. - .ssc-square { - height: 30px; - width: 30px; - } - } - } +.material-page.ssc .material-header__content { + height: 605px; + // Favorite icon. + .ssc-square { + height: 30px; + width: 30px; } } diff --git a/src/stories/Blocks/material-page/material-page.scss b/src/stories/Blocks/material-page/material-page.scss index 06b594860..4a3fdd67e 100644 --- a/src/stories/Blocks/material-page/material-page.scss +++ b/src/stories/Blocks/material-page/material-page.scss @@ -1,6 +1,6 @@ .material-page { padding-bottom: $s-2xl; - @include breakpoint-s { + @include media-query__small { padding-bottom: $s-6xl; } } diff --git a/src/stories/Blocks/status-loans/status-loans.scss b/src/stories/Blocks/status-loans/status-loans.scss index 41ea82cce..e4768b2d4 100644 --- a/src/stories/Blocks/status-loans/status-loans.scss +++ b/src/stories/Blocks/status-loans/status-loans.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: column; - @include breakpoint-s { + @include media-query__small { width: 50%; } } diff --git a/src/stories/Blocks/status-userprofile/status-userprofile.scss b/src/stories/Blocks/status-userprofile/status-userprofile.scss index 8a9419356..3a2e2bf2c 100644 --- a/src/stories/Blocks/status-userprofile/status-userprofile.scss +++ b/src/stories/Blocks/status-userprofile/status-userprofile.scss @@ -4,7 +4,7 @@ column-gap: 25px; align-items: unset; - @include breakpoint-s { + @include media-query__small { align-items: baseline; flex-direction: row; row-gap: 25px; diff --git a/src/stories/Introduction.stories.mdx b/src/stories/Introduction.stories.mdx index a4dff225b..79c858684 100644 --- a/src/stories/Introduction.stories.mdx +++ b/src/stories/Introduction.stories.mdx @@ -9,7 +9,7 @@ import { Meta } from "@storybook/addon-docs"; font-size: 13px; color: #999; letter-spacing: 6px; - line-height: 24px; + line-height: $s-lg; text-transform: uppercase; margin-bottom: 12px; margin-top: 40px; @@ -86,7 +86,7 @@ import { Meta } from "@storybook/addon-docs"; font-weight: 700; background: #E7FDD8; color: #66BF3C; - padding: 4px 12px; + padding: $s-xs 12px; margin-right: 10px; vertical-align: top; } diff --git a/src/stories/Library/Arrows/arrows.scss b/src/stories/Library/Arrows/arrows.scss index d3d967dbe..90fa15110 100644 --- a/src/stories/Library/Arrows/arrows.scss +++ b/src/stories/Library/Arrows/arrows.scss @@ -1,6 +1,6 @@ -/* BEM plugin does not support interpolation */ -/* stylelint-disable plugin/stylelint-bem-namics */ -@mixin icon-arrow-animated($direction, $size, $scaleX, $translatePx, $origin) { +// BEM plugin does not support interpolation. +// stylelint-disable plugin/stylelint-bem-namics +@mixin _icon-arrow-animated($direction, $size, $scaleX, $translatePx, $origin) { .arrow__hover--#{$direction}-#{$size} { cursor: pointer; @@ -32,40 +32,13 @@ } } } -/* stylelint-enable plugin/stylelint-bem-namics */ +// stylelint-enable plugin/stylelint-bem-namics -@include icon-arrow-animated("right", "large", 1.165, 25px, left); -@include icon-arrow-animated("right", "small", 1.5, 30px, left); -@include icon-arrow-animated("left", "large", 1.165, -25px, right); -@include icon-arrow-animated("left", "small", 1.5, -30px, right); +@include _icon-arrow-animated("right", "large", 1.165, 25px, left); +@include _icon-arrow-animated("right", "small", 1.5, 30px, left); +@include _icon-arrow-animated("left", "large", 1.165, -25px, right); +@include _icon-arrow-animated("left", "small", 1.5, -30px, right); .arrow__link { text-decoration: none; } - -/* BEM plugin does not support interpolation */ -/* stylelint-disable plugin/stylelint-bem-namics */ -@mixin arrow($className) { - // Hide arrow - .#{$className} > { - svg { - width: 35px; - visibility: hidden; - opacity: 0; - margin-right: 20px; - } - } - // Show arrow on hover - .#{$className} { - &:hover { - svg { - @include breakpoint-s { - visibility: visible; - opacity: 1; - align-self: center; - justify-self: end; - } - } - } - } -} diff --git a/src/stories/Library/Buttons/button-ui/buttons-ui.scss b/src/stories/Library/Buttons/button-ui/buttons-ui.scss index faac8e942..e18eab2cc 100644 --- a/src/stories/Library/Buttons/button-ui/buttons-ui.scss +++ b/src/stories/Library/Buttons/button-ui/buttons-ui.scss @@ -1,5 +1,5 @@ -$c-btn-border-active: $c-text-primary-black; -$c-btn-border-disabled: $c-global-tertiary-2; +$color__btn-border-active: $color__text-primary-black; +$color__btn-border-disabled: $color__global-tertiary-2; .btn-ui { background-color: transparent; diff --git a/src/stories/Library/Buttons/button/buttons.scss b/src/stories/Library/Buttons/button/buttons.scss index b8ebe29eb..8bda48978 100644 --- a/src/stories/Library/Buttons/button/buttons.scss +++ b/src/stories/Library/Buttons/button/buttons.scss @@ -1,13 +1,13 @@ -$c-btn-border-active: $c-text-primary-black; -$c-btn-border-disabled: $c-global-tertiary-2; +$color__btn-border-active: $color__text-primary-black; +$color__btn-border-disabled: $color__global-tertiary-2; .btn-icon { - margin-left: 16px; + margin-left: $s-md; color: inherit; } .btn-collapsible { - margin-left: 16px; + margin-left: $s-md; display: none; } @@ -16,14 +16,14 @@ $c-btn-border-disabled: $c-global-tertiary-2; align-items: center; justify-content: center; border-radius: 0; - border: 1px solid $c-btn-border-active; + border: 1px solid $color__btn-border-active; cursor: pointer; white-space: nowrap; transition: background-color 0.4s ease-in-out, color 0.2s ease-in-out, opacity 0.4s ease-in-out; text-decoration: none; - @extend %text-button-placeholder; + @include typography($typo__button); &:hover { .btn-collapsible { @@ -32,24 +32,24 @@ $c-btn-border-disabled: $c-global-tertiary-2; } &[disabled] { - border: 1px solid $c-btn-border-disabled; - color: $c-btn-border-disabled; - fill: $c-btn-border-disabled; + border: 1px solid $color__btn-border-disabled; + color: $color__btn-border-disabled; + fill: $color__btn-border-disabled; cursor: not-allowed; .arrow__body { - stroke: $c-btn-border-disabled; + stroke: $color__btn-border-disabled; } .arrow__head { - fill: $c-btn-border-disabled; + fill: $color__btn-border-disabled; } } } .btn-xlarge { height: 48px; - padding: 8px 86px; + padding: $s-sm 86px; } .btn-large { @@ -64,17 +64,17 @@ $c-btn-border-disabled: $c-global-tertiary-2; .btn-small { height: 40px; - padding: 0 32px; + padding: 0 $s-xl; } .btn-xsmall { - height: 32px; - padding: 0 24px; + height: $s-xl; + padding: 0 $s-lg; } .btn-filled:not([disabled]) { - background-color: $c-text-primary-black; - color: $c-text-primary-white; + background-color: $color__text-primary-black; + color: $color__text-primary-white; &:hover { opacity: 0.7; @@ -83,10 +83,10 @@ $c-btn-border-disabled: $c-global-tertiary-2; .btn-outline { background-color: transparent; - color: $c-text-primary-black; + color: $color__text-primary-black; &:not([disabled]):hover { - background-color: $c-text-primary-black; - color: $c-text-primary-white; + background-color: $color__text-primary-black; + color: $color__text-primary-white; } } diff --git a/src/stories/Library/Buttons/icon-button/icon-button.scss b/src/stories/Library/Buttons/icon-button/icon-button.scss index e79d04d55..6caf3ac25 100644 --- a/src/stories/Library/Buttons/icon-button/icon-button.scss +++ b/src/stories/Library/Buttons/icon-button/icon-button.scss @@ -3,10 +3,10 @@ cursor: pointer; &--selected { - fill: $c-global-tertiary-2; + fill: $color__global-tertiary-2; } &.dpl-icon-button:focus { - outline: $c-text-primary-black 5px auto; + outline: $color__text-primary-black 5px auto; } } diff --git a/src/stories/Library/Buttons/row-button/row-button.scss b/src/stories/Library/Buttons/row-button/row-button.scss index 916be7242..c89ade0c8 100644 --- a/src/stories/Library/Buttons/row-button/row-button.scss +++ b/src/stories/Library/Buttons/row-button/row-button.scss @@ -1,6 +1,6 @@ .row-button { height: 40px; - background-color: $c-global-secondary; + background-color: $color__global-secondary; padding: 9px $s-md; display: flex; align-items: center; diff --git a/src/stories/Library/Buttons/toggle-button/toggle-button.scss b/src/stories/Library/Buttons/toggle-button/toggle-button.scss index e550300e0..e02f8640e 100644 --- a/src/stories/Library/Buttons/toggle-button/toggle-button.scss +++ b/src/stories/Library/Buttons/toggle-button/toggle-button.scss @@ -1,7 +1,7 @@ .dpl-toggle-button { border-radius: 34px; - width: 44px; - height: 24px; + width: $s-2xl; + height: $s-lg; position: relative; border: 0px; cursor: pointer; @@ -18,7 +18,7 @@ } &--inactive { - background-color: $c-global-tertiary-2; + background-color: $color__global-tertiary-2; &::before { left: 2px; @@ -26,7 +26,7 @@ } &--active { - background-color: $c-signal-success; + background-color: $color__signal-success; &::before { right: 2px; diff --git a/src/stories/Library/Forms/checkbox/checkbox.scss b/src/stories/Library/Forms/checkbox/checkbox.scss index a840298e2..c85d558f1 100644 --- a/src/stories/Library/Forms/checkbox/checkbox.scss +++ b/src/stories/Library/Forms/checkbox/checkbox.scss @@ -11,7 +11,7 @@ .checkbox__label { user-select: none; cursor: pointer; - padding: 6px 8px 6px 0; + padding: 6px $s-sm 6px 0; overflow: hidden; transition: all 0.3s ease; display: flex; @@ -28,9 +28,9 @@ flex: 0 0 18px; width: 18px; height: 18px; - border-radius: 4px; + border-radius: $s-xs; transform: scale(1); - border: 1px solid $c-global-tertiary-2; + border: 1px solid $color__global-tertiary-2; transition: all 0.3s ease; } @@ -40,18 +40,18 @@ left: 2px; fill: none; stroke: #fff; - stroke-dasharray: 16px; - stroke-dashoffset: 16px; + stroke-dasharray: $s-md; + stroke-dashoffset: $s-md; transition: all 0.3s ease; transform: translate3d(0, 0, 0); } .checkbox__label .checkbox__text { - padding-left: 8px; + padding-left: $s-sm; line-height: 18px; &--validation { - color: $c-signal-alert; + color: $color__signal-alert; } &--hide-visually { @@ -68,13 +68,13 @@ } .checkbox__label:hover .checkbox__icon:first-of-type { - border-color: $c-text-secondary-gray; + border-color: $color__text-secondary-gray; } /* stylelint-disable selector-max-compound-selectors */ .checkbox__input:checked + .checkbox__label .checkbox__icon:first-of-type { - background: $c-text-secondary-gray; - border-color: $c-text-secondary-gray; + background: $color__text-secondary-gray; + border-color: $color__text-secondary-gray; animation: zoom-in-out 0.3s ease; svg { @@ -85,7 +85,7 @@ .checkbox__input:focus + .checkbox__label { // TODO: Determine a proper design for elements in focus. // This is a temporary solution to make it easier to test keyboard navigation. - outline: solid 1px $c-text-secondary-gray; + outline: solid 1px $color__text-secondary-gray; outline-offset: 0; } diff --git a/src/stories/Library/Forms/date-picker/date-picker.scss b/src/stories/Library/Forms/date-picker/date-picker.scss index ad50c25f1..59d74486f 100644 --- a/src/stories/Library/Forms/date-picker/date-picker.scss +++ b/src/stories/Library/Forms/date-picker/date-picker.scss @@ -7,11 +7,11 @@ display: flex; align-items: center; flex-direction: row; - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; } &__input { - @extend %text-button-placeholder; + @include typography($typo__button); width: 100%; height: 100%; white-space: nowrap; @@ -26,7 +26,7 @@ width: 44px; min-width: 44px; height: 48px; - border-left: 1px solid $c-global-tertiary-1; + border-left: 1px solid $color__global-tertiary-1; display: flex; align-items: center; cursor: pointer; diff --git a/src/stories/Library/Forms/input/input.scss b/src/stories/Library/Forms/input/input.scss index ed36cd810..097f6b3db 100644 --- a/src/stories/Library/Forms/input/input.scss +++ b/src/stories/Library/Forms/input/input.scss @@ -3,14 +3,14 @@ flex-direction: column; label { - @extend %text-body-medium-medium; - color: $c-text-secondary-gray; + @include typography($typo__body-medium); + color: $color__text-secondary-gray; } input { background-color: transparent; border: none; - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; height: 40px; &:focus { @@ -20,15 +20,15 @@ } &__description { - color: $c-text-secondary-gray; - @extend %text-body-small-regular; - @extend %mt-8; + color: $color__text-secondary-gray; + @include typography($typo__body-small); + margin-top: $s-md; } &__validation { - color: $c-signal-alert; - @extend %text-body-small-regular; - @extend %mt-8; + color: $color__signal-alert; + @include typography($typo__body-small); + margin-top: $s-md; } /* Chrome, Safari, Edge, Opera */ diff --git a/src/stories/Library/Icons/icon-collection/IconCollection.stories.tsx b/src/stories/Library/Icons/icon-collection/IconCollection.stories.tsx index 1876cfe89..fba5b103f 100644 --- a/src/stories/Library/Icons/icon-collection/IconCollection.stories.tsx +++ b/src/stories/Library/Icons/icon-collection/IconCollection.stories.tsx @@ -11,7 +11,7 @@ const StoryBase: Meta = { parameters: { design: { type: "figma", - url: "hhttps://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=1385%3A10755", + url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=1385%3A10755", }, }, }; diff --git a/src/stories/Library/Icons/icon-collection/icon-collection.json b/src/stories/Library/Icons/icon-collection/icon-collection.json index 07f5d505f..e0f577190 100644 --- a/src/stories/Library/Icons/icon-collection/icon-collection.json +++ b/src/stories/Library/Icons/icon-collection/icon-collection.json @@ -298,5 +298,13 @@ { "title": "Plus circle", "fileName": "PlusButton.svg" + }, + { + "title": "Search Books", + "fileName": "SearchBooks.svg" + }, + { + "title": "Internal Link", + "fileName": "InternalLink.svg" } ] diff --git a/src/stories/Library/Icons/icon-favourite/icon-favourite.scss b/src/stories/Library/Icons/icon-favourite/icon-favourite.scss index 9866eaed4..64d60deca 100644 --- a/src/stories/Library/Icons/icon-favourite/icon-favourite.scss +++ b/src/stories/Library/Icons/icon-favourite/icon-favourite.scss @@ -1,26 +1,26 @@ .icon-favourite { cursor: pointer; - height: 24px; - width: 24px; - color: $c-text-primary-black; - stroke: $c-text-primary-black; + height: $s-lg; + width: $s-lg; + color: $color__text-primary-black; + stroke: $color__text-primary-black; fill: none; &--filled { - color: $c-identity-primary; - stroke: $c-identity-primary; - fill: $c-identity-primary; + color: $color__identity-primary; + stroke: $color__identity-primary; + fill: $color__identity-primary; } } .icon-favourite--bright { - color: $c-text-primary-white; - stroke: $c-text-primary-white; + color: $color__text-primary-white; + stroke: $color__text-primary-white; fill: none; } .icon-favourite--bright-filled { - stroke: $c-text-primary-white; - color: $c-text-primary-white; - fill: $c-text-primary-white; + stroke: $color__text-primary-white; + color: $color__text-primary-white; + fill: $color__text-primary-white; } diff --git a/src/stories/Library/Lists/fee-list/fee-list.scss b/src/stories/Library/Lists/fee-list/fee-list.scss index 501a552c6..b889d4c94 100644 --- a/src/stories/Library/Lists/fee-list/fee-list.scss +++ b/src/stories/Library/Lists/fee-list/fee-list.scss @@ -1,10 +1,10 @@ .fee-list-page { - background: $c-global-primary; + background: $color__global-primary; padding: $s-md; position: relative; z-index: 0; - @include breakpoint-m { + @include media-query__medium { padding: $s-6xl; } } diff --git a/src/stories/Library/Lists/list-dashboard/list-dashboard.scss b/src/stories/Library/Lists/list-dashboard/list-dashboard.scss index db03b4b8c..518c2f4cd 100644 --- a/src/stories/Library/Lists/list-dashboard/list-dashboard.scss +++ b/src/stories/Library/Lists/list-dashboard/list-dashboard.scss @@ -3,15 +3,15 @@ align-items: center; background: #fff; position: relative; - padding: 16px; + padding: $s-md; text-decoration: none; & .status-label { margin-left: auto; } - @include breakpoint-s { - padding: 16px 24px; + @include media-query__small { + padding: $s-md $s-lg; & .status-label { margin-left: unset; @@ -26,11 +26,11 @@ } .list-dashboard__title { - margin-left: 8px; - margin-right: 16px; + margin-left: $s-sm; + margin-right: $s-md; - @include breakpoint-s { - margin-left: 24px; + @include media-query__small { + margin-left: $s-lg; } } @@ -38,8 +38,8 @@ position: absolute; top: -4px; right: -4px; - width: 8px; - height: 8px; + width: $s-sm; + height: $s-sm; background: #d63649; border-radius: 100%; } @@ -50,8 +50,7 @@ margin-left: auto; width: 90px; // Avoids extending beyond the edge of the box. - // Arrow takes too much space on small screens - @include breakpoint-l { + @include media-query__small { display: block; } } diff --git a/src/stories/Library/Lists/list-description/ListDescription.tsx b/src/stories/Library/Lists/list-description/ListDescription.tsx index 72ffa6f56..afef063f8 100644 --- a/src/stories/Library/Lists/list-description/ListDescription.tsx +++ b/src/stories/Library/Lists/list-description/ListDescription.tsx @@ -1,7 +1,13 @@ +import clsx from "clsx"; +import { Fragment } from "react"; import { generateId } from "../../horizontal-term-line/HorizontalTermLine"; export type ListData = { - [k: string]: { value: string; type: "standard" | "link" }; + [k: string]: { + value: string[]; + type: "standard" | "link"; + layout?: "default" | "column"; + }; }; const ListDescription: React.FC<{ data: ListData; className?: string }> = ({ @@ -11,13 +17,22 @@ const ListDescription: React.FC<{ data: ListData; className?: string }> = ({ return (
{Object.keys(data).map((key, index) => { - const { value, type } = data[key as keyof ListData]; + const { value, type, layout = "default" } = data[key as keyof ListData]; return ( -
-
{key}:
-
- {type === "standard" && value} - {type === "link" && {value}} +
+
{key}:
+
+ {value.map((val) => ( + + {type === "standard" && {val}} + {type === "link" && {val}} + + ))}
); diff --git a/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx b/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx index 1f6c3ceb0..57ecaad77 100644 --- a/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx +++ b/src/stories/Library/Lists/list-description/ListDescriptionFakeData.tsx @@ -1,15 +1,20 @@ import { ListData } from "./ListDescription"; const fakeData: ListData = { - Type: { value: "Bog", type: "standard" }, - Sprog: { value: "Dansk", type: "standard" }, - Bidragsydere: { value: "Karsten Sand Iversen", type: "link" }, - Originaltitel: { value: "Ulysses (1922)", type: "standard" }, - ISBN: { value: "9788763814584", type: "standard" }, - Udgave: { value: "Udgave, 2. oplag (2015)", type: "standard" }, - Omfang: { value: "795 sider", type: "standard" }, - Forlag: { value: "Rosinante", type: "standard" }, - Målgruppe: { value: "Voksenmateriale", type: "standard" }, + Type: { value: ["Bog"], type: "standard" }, + Sprog: { value: ["Dansk"], type: "standard" }, + Bidragsydere: { value: ["Karsten Sand Iversen"], type: "link" }, + Originaltitel: { value: ["Ulysses (1922)"], type: "standard" }, + ISBN: { value: ["9788763814584"], type: "standard" }, + Udgave: { value: ["Udgave, 2. oplag (2015)"], type: "standard" }, + Omfang: { value: ["795 sider"], type: "standard" }, + Forlag: { value: ["Rosinante"], type: "standard" }, + Målgruppe: { value: ["Voksenmateriale"], type: "standard" }, + Pris: { + value: ["Standard: 65 kr.", "Børn: Gratis"], + type: "standard", + layout: "column", + }, }; export default fakeData; diff --git a/src/stories/Library/Lists/list-description/list-description.scss b/src/stories/Library/Lists/list-description/list-description.scss index f3be5ea41..543b3d983 100644 --- a/src/stories/Library/Lists/list-description/list-description.scss +++ b/src/stories/Library/Lists/list-description/list-description.scss @@ -1,30 +1,60 @@ dl.list-description { - @extend %text-small-caption; + @include typography($typo__small-caption); - color: $c-text-secondary-gray; - display: flex; - flex-flow: column; + max-width: 420px; + color: $color__text-secondary-gray; - & > div { - display: flex; - flex-flow: row wrap; + .list-description__item { + display: grid; + grid-template-columns: 1fr 2fr; } - dt { - flex-basis: 18%; - padding: 2px 4px; + .list-description__key, + .list-description__value { + padding: 2px $s-xs; } - dd { - flex-basis: 72%; - flex-grow: 1; - margin: 0; - padding: 2px 4px; + .list-description__value { + display: grid; + @include media-query__small() { + display: flex; + flex-wrap: wrap; + gap: $s-sm; + } + } + + .list-description__value--column { + flex-direction: column; + } + + .link-tag { + @include typography($typo__small-caption); + + color: $color__text-primary-black; + } +} + +dl.list-description.list-description--event { + height: max-content; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: $s-md; + align-items: start; + + .list-description__item { + grid-template-columns: 1fr; + } + + .list-description__value { + font-weight: bold; + } - .link-tag { - @extend %text-small-caption; + @include media-query__small() { + grid-template-columns: 1fr; + gap: $s-xs; - color: $c-text-primary-black; + .list-description__item { + grid-template-columns: 1fr 2fr; } } } diff --git a/src/stories/Library/Lists/list-details/list-details.scss b/src/stories/Library/Lists/list-details/list-details.scss index 74dfcd09f..569d92211 100644 --- a/src/stories/Library/Lists/list-details/list-details.scss +++ b/src/stories/Library/Lists/list-details/list-details.scss @@ -2,24 +2,24 @@ display: flex; align-items: center; min-height: 72px; - padding: 16px; - background-color: $c-text-primary-white; + padding: $s-md; + background-color: $color__text-primary-white; - @include breakpoint-s { + @include media-query__small { height: 96px; - padding: 16px 32px; + padding: $s-md $s-xl; } } .list-details__icon { - margin-top: 8px; - margin-right: 16px; - width: 24px; + margin-top: $s-sm; + margin-right: $s-md; + width: $s-lg; - @include breakpoint-s { + @include media-query__small { margin-top: 0; - margin-right: 32px; - width: 32px; + margin-right: $s-xl; + width: $s-xl; } } @@ -28,7 +28,7 @@ display: flex; flex-direction: column; - @include breakpoint-s { + @include media-query__small { flex-direction: row; display: flex; justify-content: space-between; @@ -37,7 +37,7 @@ .list-details__dropdown { margin-top: $s-md; - @include breakpoint-s { + @include media-query__small { margin-top: 0; } } @@ -45,7 +45,7 @@ .list-details__menu { margin-top: $s-md; - @include breakpoint-s { + @include media-query__small { margin-top: 0; } } diff --git a/src/stories/Library/Lists/list-empty/list-empty.scss b/src/stories/Library/Lists/list-empty/list-empty.scss index 737f2f465..9a0e164c3 100644 --- a/src/stories/Library/Lists/list-empty/list-empty.scss +++ b/src/stories/Library/Lists/list-empty/list-empty.scss @@ -5,13 +5,12 @@ flex-direction: column; justify-content: center; align-items: center; - border: 1px dotted $c-text-secondary-gray; + border: 1px dotted $color__text-secondary-gray; text-align: left; - @extend %color-secondary-gray; - @extend %p-4; - @extend %pt-48; - @extend %pb-48; - @extend %text-body-large; + color: $color__text-secondary-gray; + padding: 48px $s-xs; + + @include typography($typo__body-large); &__links { display: flex; diff --git a/src/stories/Library/Lists/list-find-on-shelf/list-find-on-shelf.scss b/src/stories/Library/Lists/list-find-on-shelf/list-find-on-shelf.scss index 63001c237..ca863a030 100644 --- a/src/stories/Library/Lists/list-find-on-shelf/list-find-on-shelf.scss +++ b/src/stories/Library/Lists/list-find-on-shelf/list-find-on-shelf.scss @@ -1,10 +1,10 @@ .find-on-shelf { - background-color: $c-global-secondary; + background-color: $color__global-secondary; &__header-row { display: none; - @include breakpoint-s { + @include media-query__small { display: flex; height: $s-xl; align-items: center; @@ -17,7 +17,7 @@ } &__item-count-header { - @include breakpoint-s { + @include media-query__small { margin-left: auto; } } @@ -25,11 +25,11 @@ &__row { display: flex; flex-direction: column; - border-top: solid 1px $c-global-primary; + border-top: solid 1px $color__global-primary; padding: $s-lg $s-md; gap: $s-md; - @include breakpoint-s { + @include media-query__small { padding: 0 $s-xl 0 $s-xl; flex-direction: row; min-height: 110px; @@ -41,7 +41,7 @@ &__material-text { max-width: 600px; - @include breakpoint-s { + @include media-query__small { // Both width and min-width need to be here to prevent flex shrink & stretch. width: 404px; min-width: 404px; @@ -49,7 +49,7 @@ } &__item-count-text { - @include breakpoint-s { + @include media-query__small { margin-left: auto; overflow-y: visible; } diff --git a/src/stories/Library/Lists/list-materials/list-materials.scss b/src/stories/Library/Lists/list-materials/list-materials.scss index 0b7ef4fd8..f2ed95ba4 100644 --- a/src/stories/Library/Lists/list-materials/list-materials.scss +++ b/src/stories/Library/Lists/list-materials/list-materials.scss @@ -1,12 +1,12 @@ .list-materials { display: flex; min-height: 96px; - padding: 16px; - background-color: $c-text-primary-white; + padding: $s-md; + background-color: $color__text-primary-white; justify-content: space-between; - @include breakpoint-s { - padding: 16px 32px; + @include media-query__small { + padding: $s-md 32px; align-items: center; flex-direction: row; } @@ -26,8 +26,8 @@ } .list-materials__content__header { - @extend %ellipsis-two-lines; - @extend %text-header-h5; + @extend %text-ellipsis-two-lines; + @include typography($typo__h5); } .list-materials--disabled { @@ -46,20 +46,20 @@ flex-direction: row; margin-top: 0; align-items: center; - grid-gap: 16px; + grid-gap: $s-md; } .list-materials__status__note-desktop { - @extend %text-small-caption; + @include typography($typo__small-caption); display: none; - @include breakpoint-s { + @include media-query__small { display: flex; } } .list-materials__status__note-mobile { - @extend %text-small-caption; + @include typography($typo__small-caption); display: flex; - @include breakpoint-s { + @include media-query__small { display: none; } } @@ -68,14 +68,14 @@ display: inline-flex; gap: 8; - @include breakpoint-s { + @include media-query__small { display: flex; flex-direction: row; } } .list-materials__content-status-label { - @include breakpoint-s { + @include media-query__small { display: none; } } @@ -86,7 +86,7 @@ cursor: pointer; display: none; - @include breakpoint-s { + @include media-query__small { display: block; } } diff --git a/src/stories/Library/Lists/list-reservation/list-reservation.scss b/src/stories/Library/Lists/list-reservation/list-reservation.scss index 830c44ee0..f325a0977 100644 --- a/src/stories/Library/Lists/list-reservation/list-reservation.scss +++ b/src/stories/Library/Lists/list-reservation/list-reservation.scss @@ -1,4 +1,4 @@ -$list-reservation-space-mobile: 16px; +$list-reservation-space-mobile: $s-md; $list-reservation-space-desktop: 24px; .list-reservation-container { @@ -6,23 +6,25 @@ $list-reservation-space-desktop: 24px; } .list-reservation { - background-color: $c-text-primary-white; + @include show-svg-on-hover(".list-reservation__status"); + + background-color: $color__text-primary-white; border: 0; width: 100%; display: grid; grid-template-columns: 1fr; - box-shadow: 0 4px 20px rgb(0 0 0 / 10%); + box-shadow: 0 $s-xs 20px rgb(0 0 0 / 10%); position: relative; padding: $list-reservation-space-mobile; - @include breakpoint-s { + @include media-query__small { grid-template-columns: 1fr 1fr; height: 184px; padding: $list-reservation-space-desktop; } &:hover { - filter: drop-shadow(0 4px 20px rgb(72 72 72 / 10%)); + filter: drop-shadow(0 $s-xs 20px rgb(72 72 72 / 10%)); } } @@ -45,6 +47,8 @@ $list-reservation-space-desktop: 24px; } .list-reservation__note { + @include typography($typo__small-caption); + // To make it easy to click min-height: 20px; cursor: pointer; @@ -52,25 +56,21 @@ $list-reservation-space-desktop: 24px; align-self: baseline; border: 0; display: block; - margin-top: 4px; + margin-top: $s-xs; white-space: break-spaces; text-decoration: underline; padding-left: 0; - @extend %text-small-caption; - @extend %color-secondary-gray; } .list-reservation__note--desktop { - @extend %text-body-small-regular; display: none; - @include breakpoint-s { + @include media-query__small { display: block; } } .list-reservation__note--mobile { - @extend %text-body-small-regular; - @include breakpoint-s { + @include media-query__small { display: none; } } @@ -83,7 +83,7 @@ $list-reservation-space-desktop: 24px; align-items: baseline; justify-content: space-between; - @include breakpoint-s { + @include media-query__small { margin-left: $list-reservation-space-desktop; } } @@ -98,7 +98,7 @@ $list-reservation-space-desktop: 24px; margin-bottom: $s-md; } - @include breakpoint-s { + @include media-query__small { margin-top: 0; p { font-size: 12px; @@ -108,7 +108,7 @@ $list-reservation-space-desktop: 24px; } .list-reservation__header { - @extend %text-header-h4; + @include typography($typo__h4); padding: 0; cursor: pointer; @@ -119,7 +119,7 @@ $list-reservation-space-desktop: 24px; } .list-reservation__header__text { - @extend %ellipsis-two-lines; + @extend %text-ellipsis-two-lines; } .list-reservation__status { @@ -128,25 +128,16 @@ $list-reservation-space-desktop: 24px; align-items: flex-end; grid-template-columns: auto 1fr auto; - svg { - display: none; - @include breakpoint-s { - display: flex; - } - } - - @include breakpoint-s { + @include media-query__small { align-items: center; } } -@include arrow("list-reservation__status"); - .list-reservation__counter { display: none; margin: $s-xs; - @include breakpoint-s { + @include media-query__small { width: 92px; display: block; } @@ -154,10 +145,10 @@ $list-reservation-space-desktop: 24px; .list-reservation__deadline { display: inline-grid; - grid-row-gap: 8px; + grid-row-gap: $s-sm; margin-left: 2px; - @include breakpoint-s { + @include media-query__small { margin-left: 15px; } } @@ -174,9 +165,9 @@ $list-reservation-space-desktop: 24px; width: 100%; position: absolute; bottom: 0; - background-color: $c-text-primary-white; + background-color: $color__text-primary-white; perspective: 500px; - box-shadow: 0 4px 20px rgb(72 72 72 / 10%); + box-shadow: 0 $s-xs 20px rgb(72 72 72 / 10%); } .list-reservation--stacked { @@ -192,7 +183,7 @@ $list-reservation-space-desktop: 24px; @extend %list-stacked; content: " "; - transform: translateY(16px) scale(0.9); + transform: translateY($s-md) scale(0.9); z-index: $-z-10; } diff --git a/src/stories/Library/Modals/modal-cta/ModalCTA.tsx b/src/stories/Library/Modals/modal-cta/ModalCTA.tsx index 9dba1d583..557b61841 100644 --- a/src/stories/Library/Modals/modal-cta/ModalCTA.tsx +++ b/src/stories/Library/Modals/modal-cta/ModalCTA.tsx @@ -36,6 +36,7 @@ export const ModalCTA: React.FC = ({ title, showModal }) => ( label="Annuller fornyelse" disabled={false} collapsible + classNames="modal-cta__button" />
component. --parent-bg-color: #f6f5f0; - background-color: $c-global-primary; + background-color: $color__global-primary; position: relative; opacity: 0; display: none; @@ -26,13 +15,13 @@ @include hide-visually; } - @include breakpoint-s { + @include media-query__small { height: calc(100vh - 200px); width: calc(100vw - 200px); - margin: 100px 0 0 100px; + margin: $s-5xl 0 0 $s-5xl; } - @include breakpoint-m { + @include media-query__medium { padding: $s-4xl $s-7xl; } @@ -90,13 +79,13 @@ z-index: $z-15; &.modal-btn-close--offset { - @include breakpoint-s { - top: 100px; - right: 100px; + @include media-query__small { + top: $s-5xl; + right: $s-5xl; } } - @include breakpoint-s { + @include media-query__small { padding: 34px; } @@ -107,7 +96,7 @@ & > img { width: 11.5px; - @include breakpoint-s { + @include media-query__small { width: 19.5px; } } diff --git a/src/stories/Library/accordion/accordion.scss b/src/stories/Library/accordion/accordion.scss index bb14e73f0..38adf554e 100644 --- a/src/stories/Library/accordion/accordion.scss +++ b/src/stories/Library/accordion/accordion.scss @@ -1,5 +1,5 @@ .accordion { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } .accordion__button-arrow { @@ -8,7 +8,7 @@ } .accordion__button { - color: $c-text-primary-black; + color: $color__text-primary-black; border-width: 0; border-color: transparent; border-radius: 0; @@ -20,10 +20,10 @@ display: flex; justify-content: space-between; align-items: center; - border-top: 1px solid $c-global-tertiary-1; + border-top: 1px solid $color__global-tertiary-1; &[aria-expanded="true"] { - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; .accordion__button-arrow { transform: rotateZ(0deg); @@ -36,7 +36,7 @@ } .accordion__header { - height: 60px; + height: $s-3xl; button:focus { outline: -webkit-focus-ring-color auto 5px; @@ -47,11 +47,11 @@ display: grid; a { - line-height: 32px; - padding-left: #{$s-48}px; + line-height: $s-xl; + padding-left: $s-2xl; text-decoration: none; - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-placeholder); } &[hidden] { @@ -61,10 +61,10 @@ .accordion__row:last-child { .accordion__button { - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; } .accordion__body { - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; } } diff --git a/src/stories/Library/article-header/article-header.scss b/src/stories/Library/article-header/article-header.scss index 30660f990..aac054810 100644 --- a/src/stories/Library/article-header/article-header.scss +++ b/src/stories/Library/article-header/article-header.scss @@ -4,7 +4,7 @@ padding: $s-4xl $s-xl; position: relative; - @include breakpoint-s { + @include media-query__small { padding: $s-4xl $s-7xl; } } @@ -14,34 +14,35 @@ left: $s-md; top: $s-sm; - @include breakpoint-s { + @include media-query__small { left: $s-2xl; top: $s-lg; } } .article-header__title { - @extend %text-header-h1; + @include typography($typo__h1); } .article-header__subtitle { - @extend %text-subtitle; + @include typography($typo__subtitle); } .article-header__title, .article-header__subtitle { - @include breakpoint-s { + @include media-query__small { max-width: 897px; } } .article-header__info { - @extend %text-body-small-regular; + @include typography($typo__body-small); } .article-header__author { + @include typography($typo__body-small); + @extend %link-tag; - @extend %text-body-small-regular; margin-left: $s-xs; } diff --git a/src/stories/Library/autosuggest-material/autosuggest-material.scss b/src/stories/Library/autosuggest-material/autosuggest-material.scss index 1d8403c8a..831cf3de7 100644 --- a/src/stories/Library/autosuggest-material/autosuggest-material.scss +++ b/src/stories/Library/autosuggest-material/autosuggest-material.scss @@ -7,53 +7,53 @@ margin-bottom: 0; } - @include breakpoint-m { + @include media-query__medium { width: calc(100% / 3); // Because the main autosuggest is a prominent feature we don't want the hover // effect to take effect on phones, as iPhones have a known bug that requires // users to double click in order to get past hover to register a click. &:hover { - background-color: $c-global-secondary; + background-color: $color__global-secondary; cursor: pointer; } } &.autosuggest__material-item--two { - @include breakpoint-m { + @include media-query__medium { width: calc(100% / 2); } } &.autosuggest__material-item--one { - @include breakpoint-m { + @include media-query__medium { width: 100%; } } &--highlight { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } } // Autosuggest dividers on phones: // - between text suggestions & material suggestions &__text-item + &__material-item { - border-top: 1px solid $c-global-tertiary-1; + border-top: 1px solid $color__global-tertiary-1; margin-top: $s-lg; padding-top: $s-lg; - @include breakpoint-m { + @include media-query__medium { border: none; margin: 0; } } // - between material suggestions & text suggestions &__material-item + &__text-item { - border-top: 1px solid $c-global-tertiary-1; + border-top: 1px solid $color__global-tertiary-1; margin-top: $s-md; padding-top: $s-md; - @include breakpoint-m { + @include media-query__medium { border: none; padding-top: 0; margin-top: 0; @@ -63,9 +63,9 @@ // Autosuggest dividers on desktop: // - both dividers are rendered if both types of suggestions are present &__text-item ~ &__material-item { - @include breakpoint-m { - border-top: 1px solid $c-global-tertiary-1; - border-bottom: 1px solid $c-global-tertiary-1; + @include media-query__medium { + border-top: 1px solid $color__global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; margin: $s-lg 0; padding-top: $s-lg; padding-bottom: $s-lg; @@ -89,16 +89,16 @@ } &__title { - color: $c-text-secondary-gray; - line-height: 24px; + color: $color__text-secondary-gray; + line-height: $s-lg; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } &__author { - color: $c-text-primary-black; - line-height: 24px; + color: $color__text-primary-black; + line-height: $s-lg; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; diff --git a/src/stories/Library/autosuggest-text/autosuggest-text.scss b/src/stories/Library/autosuggest-text/autosuggest-text.scss index 2b3d34e7b..e555dff9a 100644 --- a/src/stories/Library/autosuggest-text/autosuggest-text.scss +++ b/src/stories/Library/autosuggest-text/autosuggest-text.scss @@ -5,30 +5,30 @@ display: flex; align-items: center; - @include breakpoint-m { + @include media-query__medium { // Because the main autosuggest is a prominent feature we don't want the hover // effect to take effect on phones, as iPhones have a known bug that requires // users to double click in order to get past hover to register a click. // For reference, go to https://github.com/common-voice/common-voice/issues/424 // or google "iphone hover issue". &:hover { - background-color: $c-global-secondary; + background-color: $color__global-secondary; cursor: pointer; } } - @include breakpoint-l { + @include media-query__large { height: 40px; padding-right: $s-lg; } &--highlight { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } } &__text { - @include breakpoint-m { + @include media-query__medium { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; diff --git a/src/stories/Library/availability-label/availability-label.scss b/src/stories/Library/availability-label/availability-label.scss index 6c3018234..b2513be77 100644 --- a/src/stories/Library/availability-label/availability-label.scss +++ b/src/stories/Library/availability-label/availability-label.scss @@ -5,21 +5,21 @@ align-items: center; width: auto; height: 25px; - background-color: $c-global-primary; + background-color: $color__global-primary; white-space: nowrap; &--selected { - border: 1px solid $c-text-primary-black; + border: 1px solid $color__text-primary-black; } &--unselected { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; } &__divider { height: 14px; width: 1px; - background-color: $c-global-tertiary-1; + background-color: $color__global-tertiary-1; } &__check { diff --git a/src/stories/Library/boxed-text/boxed-text.scss b/src/stories/Library/boxed-text/boxed-text.scss index 94114fe44..6737f7034 100644 --- a/src/stories/Library/boxed-text/boxed-text.scss +++ b/src/stories/Library/boxed-text/boxed-text.scss @@ -2,6 +2,6 @@ height: $s-lg; display: flex; align-items: center; - outline: 1px solid $c-global-tertiary-1; + outline: 1px solid $color__global-tertiary-1; padding: 0 $s-sm; } diff --git a/src/stories/Library/breadcrumb/breadcrumb.scss b/src/stories/Library/breadcrumb/breadcrumb.scss index bf5d8ff00..0d887ff7c 100644 --- a/src/stories/Library/breadcrumb/breadcrumb.scss +++ b/src/stories/Library/breadcrumb/breadcrumb.scss @@ -4,16 +4,16 @@ } .text-links { - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; margin-bottom: -4px; - @extend %text-links-placeholder; + @include typography($typo__links); } .arrow__body { - stroke: $c-text-secondary-gray; + stroke: $color__text-secondary-gray; } .arrow__head { - fill: $c-text-secondary-gray; + fill: $color__text-secondary-gray; } } diff --git a/src/stories/Library/breakpoints/Breakpoints.stories.tsx b/src/stories/Library/breakpoints/Breakpoints.stories.tsx deleted file mode 100644 index b5ff4e0b5..000000000 --- a/src/stories/Library/breakpoints/Breakpoints.stories.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { withDesign } from "storybook-addon-designs"; -import { Meta } from "@storybook/react"; - -import { Breakpoints } from "./Breakpoints"; - -export default { - title: "Library / Breakpoints", - component: Breakpoints, - decorators: [withDesign], - parameters: { - design: { - type: "figma", - url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=255%3A2080", - }, - layout: "centered", - }, -} as Meta; - -export const Default = () => ; diff --git a/src/stories/Library/breakpoints/Breakpoints.tsx b/src/stories/Library/breakpoints/Breakpoints.tsx deleted file mode 100644 index 07ba6f92c..000000000 --- a/src/stories/Library/breakpoints/Breakpoints.tsx +++ /dev/null @@ -1,50 +0,0 @@ -const spaceClasses = [ - { - classPrefix: "@media (min-width: 375px) {}", - classProperty: "375px", - }, - { - classPrefix: "@media (min-width: 768px) {}", - classProperty: "768px", - }, - { - classPrefix: "@media (min-width: 1024px) {}", - classProperty: "1024px", - }, - { - classPrefix: "@media (min-width: 1440px) {}", - classProperty: "1440px", - }, - { - classPrefix: "@media (min-width: 1920px) {}", - classProperty: "1920px", - }, - { - classPrefix: "@media (min-width: 2200px) {}", - classProperty: "2200px", - }, -]; - -export const Breakpoints = () => { - return ( -
-

CSS breakpoints / sizes

-
- {spaceClasses.map((spaceClass) => ( -
-
- 
-                {spaceClass.classPrefix}
-
-
-
- {spaceClass.classProperty} -
-
- ))} -
-
- ); -}; - -export default Breakpoints; diff --git a/src/stories/Library/breakpoints/breakpoints.scss b/src/stories/Library/breakpoints/breakpoints.scss deleted file mode 100644 index c3fbe98b3..000000000 --- a/src/stories/Library/breakpoints/breakpoints.scss +++ /dev/null @@ -1,44 +0,0 @@ -/** Breakpoints **/ -$screen-xs: 375px; -$screen-s: 768px; -$screen-m: 1024px; -$screen-l: 1440px; -$screen-xl: 1920px; -$screen-xxl: 2200px; - -/** Breakpoint mixin's **/ -@mixin breakpoint-xs { - @media (min-width: $screen-xs) { - @content; - } -} - -@mixin breakpoint-s { - @media (min-width: $screen-s) { - @content; - } -} - -@mixin breakpoint-m { - @media (min-width: $screen-m) { - @content; - } -} - -@mixin breakpoint-l { - @media (min-width: $screen-l) { - @content; - } -} - -@mixin breakpoint-xl { - @media (min-width: $screen-xl) { - @content; - } -} - -@mixin breakpoint-xxl { - @media (min-width: $screen-xxl) { - @content; - } -} diff --git a/src/stories/Library/button-box/button-box.scss b/src/stories/Library/button-box/button-box.scss index 3c33b0421..cedf79be3 100644 --- a/src/stories/Library/button-box/button-box.scss +++ b/src/stories/Library/button-box/button-box.scss @@ -1,12 +1,12 @@ .button-box { - background-color: $c-global-primary; + background-color: $color__global-primary; display: flex; justify-content: flex-end; margin-top: 40px; flex-direction: column; margin-bottom: 10px; - @include breakpoint-s { + @include media-query__small { align-items: center; flex-direction: row; } @@ -21,10 +21,10 @@ margin-bottom: 0px; z-index: $z-20; - @include breakpoint-s { + @include media-query__small { padding: $s-lg $s-7xl $s-lg 0; - bottom: 100px; - right: 100px; - left: 100px; + bottom: $s-5xl; + right: $s-5xl; + left: $s-5xl; } } diff --git a/src/stories/Library/campaign/campaign.scss b/src/stories/Library/campaign/campaign.scss index e3cc9125a..68a626a72 100644 --- a/src/stories/Library/campaign/campaign.scss +++ b/src/stories/Library/campaign/campaign.scss @@ -1,9 +1,9 @@ .campaign { - background-color: $c-global-tertiary-2; + background-color: $color__global-tertiary-2; display: grid; grid-template-rows: 150px auto; - @include breakpoint-s { + @include media-query__small { height: 150px; display: flex; } @@ -13,12 +13,12 @@ width: 100%; object-fit: cover; - @include breakpoint-s { + @include media-query__small { max-width: 30%; } &.campaign__image--full-width { - @include breakpoint-s { + @include media-query__small { max-width: 100%; min-width: 100%; } @@ -26,10 +26,11 @@ } &__title { - @extend %text-header-h4; + @include typography($typo__h4); + margin: $s-lg; align-self: center; - color: $c-text-primary-white; + color: $color__text-primary-white; &.campaign__title--none { display: none; @@ -38,7 +39,7 @@ } .campaign--reverse { - @include breakpoint-s { + @include media-query__small { flex-direction: row-reverse; } } diff --git a/src/stories/Library/card-list-item/card-list-item-skeleton.scss b/src/stories/Library/card-list-item/card-list-item-skeleton.scss index e4ef423cc..9210a6b76 100644 --- a/src/stories/Library/card-list-item/card-list-item-skeleton.scss +++ b/src/stories/Library/card-list-item/card-list-item-skeleton.scss @@ -1,7 +1,3 @@ -// Since we are using the Skeleton Screen Css classes connected to the existing styling -// we deliberately not follow the BEM naming convention here. -/* stylelint-disable plugin/stylelint-bem-namics */ - .card-list-item { &.ssc { grid-template-columns: min-content 1fr; @@ -10,13 +6,11 @@ width: 95px; } .ssc-head-line { - @extend %mt-16; + margin-top: $s-md; } - @include breakpoint-s { + @include media-query__small { .ssc-wrapper { width: 50%; } } } - -/* stylelint-enable plugin/stylelint-bem-namics */ diff --git a/src/stories/Library/card-list-item/card-list-item.scss b/src/stories/Library/card-list-item/card-list-item.scss index 70ca7a46e..ce2975c42 100644 --- a/src/stories/Library/card-list-item/card-list-item.scss +++ b/src/stories/Library/card-list-item/card-list-item.scss @@ -1,14 +1,16 @@ .card-list-item { + @include show-svg-on-hover; + background-color: #fff; - padding: 16px 24px; + padding: $s-md $s-lg; display: grid; grid-template-columns: min-content 1fr; - gap: 22px 16px; + gap: 22px $s-md; cursor: pointer; text-decoration: none; min-height: 184px; - @include breakpoint-s { + @include media-query__small { gap: 0; column-gap: $s-lg; padding: $s-lg; @@ -16,16 +18,14 @@ } &:hover { - filter: drop-shadow(0 4px 20px rgb(72 72 72 / 10%)); + filter: drop-shadow(0 $s-xs 20px rgb(72 72 72 / 10%)); } } -@include arrow("card-list-item"); - .card-list-item__cover { grid-row: span 2; - @include breakpoint-s { + @include media-query__small { grid-row: auto; } } @@ -37,7 +37,7 @@ flex-wrap: wrap; gap: 6px; - @include breakpoint-s { + @include media-query__small { grid-column: 3; } } @@ -58,11 +58,11 @@ } } - @include breakpoint-s { + @include media-query__small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - margin-top: 16px; + margin-top: $s-md; overflow: hidden; text-overflow: ellipsis; line-height: calc(120% + 2px); diff --git a/src/stories/Library/card-list-page/card-list-page-skeleton.scss b/src/stories/Library/card-list-page/card-list-page-skeleton.scss index 99e069794..e5fb70b93 100644 --- a/src/stories/Library/card-list-page/card-list-page-skeleton.scss +++ b/src/stories/Library/card-list-page/card-list-page-skeleton.scss @@ -1,14 +1,14 @@ .card-list-page__skeleton-facet-line { &--mobile { display: block; - @include breakpoint-s { + @include media-query__small { display: none; } } &--desktop { display: none; - @include breakpoint-s { + @include media-query__small { display: block; } } diff --git a/src/stories/Library/card-list-page/card-list-page.scss b/src/stories/Library/card-list-page/card-list-page.scss index 51f065d45..faf450cc1 100644 --- a/src/stories/Library/card-list-page/card-list-page.scss +++ b/src/stories/Library/card-list-page/card-list-page.scss @@ -1,13 +1,13 @@ .card-list-page { - background: $c-global-primary; - padding: 16px; + background: $color__global-primary; + padding: $s-md; - @include breakpoint-m { + @include media-query__medium { padding: $s-4xl 157px $s-2xl; } &__list { display: grid; - gap: 16px; + gap: $s-md; } } diff --git a/src/stories/Library/card-list-page/facet-line.scss b/src/stories/Library/card-list-page/facet-line.scss index a0ce99b88..13478330a 100644 --- a/src/stories/Library/card-list-page/facet-line.scss +++ b/src/stories/Library/card-list-page/facet-line.scss @@ -1,17 +1,10 @@ -.facet-line { - &__item { - display: inline-block; - @extend %mr-8; - @extend %mt-8; - } +.facet-line-selected-terms__item, +.facet-line__item { + display: inline-block; + margin-right: $s-sm; + margin-top: $s-md; } .facet-line-selected-terms { - @extend %mt-16; - - &__item { - display: inline-block; - @extend %mr-8; - @extend %mt-8; - } + margin-top: $s-md; } diff --git a/src/stories/Library/card-list-page/result-pager.scss b/src/stories/Library/card-list-page/result-pager.scss index 28d95419b..8b98afb0c 100644 --- a/src/stories/Library/card-list-page/result-pager.scss +++ b/src/stories/Library/card-list-page/result-pager.scss @@ -1,13 +1,13 @@ .result-pager { &__title { text-align: center; - margin-top: 24px; - margin-bottom: 16px; + margin-top: $s-lg; + margin-bottom: $s-md; } } .result-pager--margin-bottom { - margin-bottom: 100px; + margin-bottom: $s-5xl; margin-top: 0px; } // Override button css (Center + Width) @@ -15,13 +15,13 @@ margin: 0 auto; width: 100%; - @include breakpoint-s { + @include media-query__small { max-width: 253px; } } .result-pager--margin-bottom > .btn-primary { - @include breakpoint-s { + @include media-query__small { margin-bottom: 90px; } } diff --git a/src/stories/Library/card-list-page/search-result-zero.scss b/src/stories/Library/card-list-page/search-result-zero.scss index b6630123a..b7ad035d9 100644 --- a/src/stories/Library/card-list-page/search-result-zero.scss +++ b/src/stories/Library/card-list-page/search-result-zero.scss @@ -1,5 +1,5 @@ .search-result-zero { - border: 1px dashed $c-text-secondary-gray; + border: 1px dashed $color__text-secondary-gray; height: 240px; display: grid; place-content: center; diff --git a/src/stories/Library/colors/color-classes.scss b/src/stories/Library/colors/color-classes.scss deleted file mode 100644 index 512b4b1ef..000000000 --- a/src/stories/Library/colors/color-classes.scss +++ /dev/null @@ -1,197 +0,0 @@ -// *** Global colors *** -// Background -%bg-global-primary, -.bg-global-primary { - background-color: $c-global-primary; -} - -%bg-global-secondary, -.bg-global-secondary { - background-color: $c-global-secondary; -} - -%bg-global-tertiary-1, -.bg-global-tertiary-1 { - background-color: $c-global-tertiary-1; -} - -%bg-global-tertiary-2, -.bg-global-tertiary-2 { - background-color: $c-global-tertiary-2; -} - -// Border -%border-global-primary, -.border-global-primary { - border: 1px solid $c-global-primary; - stroke: $c-global-primary; -} - -%border-global-secondary, -.border-global-secondary { - border: 1px solid $c-global-secondary; - stroke: $c-global-secondary; -} - -%border-global-tertiary-1, -.border-global-tertiary-1 { - border: 1px solid $c-global-tertiary-1; - stroke: $c-global-tertiary-1; -} - -%border-global-tertiary-2, -.border-global-tertiary-2 { - border: 1px solid $c-global-tertiary-2; - stroke: $c-global-tertiary-2; -} - -// *** Identity colors *** -// Background -%bg-identity-primary, -.bg-identity-primary { - background-color: $c-identity-primary; - fill: $c-identity-primary; -} - -// Border -%border-identity-primary, -.border-identity-primary { - border: 1px solid $c-identity-primary; - stroke: $c-identity-primary; -} - -// Color -%color-identity-primary, -.color-identity-primary { - color: $c-identity-primary; -} - -%color-secondary-gray, -.color-secondary-gray { - color: $c-text-secondary-gray; -} - -// *** Identity color tints *** -// Background -%bg-identity-tint-20, -.bg-identity-tint-20 { - background-color: var(--tint-color-20); -} - -%bg-identity-tint-40, -.bg-identity-tint-40 { - background-color: var(--tint-color-40); -} - -%bg-identity-tint-80, -.bg-identity-tint-80 { - background-color: var(--tint-color-80); -} - -%bg-identity-tint-100, -.bg-identity-tint-100 { - background-color: var(--tint-color-100); -} - -%bg-identity-tint-120, -.bg-identity-tint-120 { - background-color: var(--tint-color-120); -} - -// *** Text colors *** -// Color -%color-primary-white, -.color-primary-white { - color: $c-text-primary-white; -} - -%color-primary-black, -.color-primary-black { - color: $c-text-primary-black; -} - -%border-primary-white, -border-primary-white { - border: 1px solid $c-text-primary-white; - stroke: $c-text-primary-white; -} - -%border-primary-black, -.border-primary-black { - border: 1px solid $c-text-primary-black; - stroke: $c-text-primary-black; -} - -%border-secondary-gray, -.border-secondary-gray { - border: 1px solid $c-text-secondary-gray; - stroke: $c-text-secondary-gray; -} - -// Only used internally for bg-color in Colors comp. -%bg-color-primary-white, -.bg-color-primary-white { - background-color: $c-text-primary-white; -} - -%bg-color-primary-black, -.bg-color-primary-black { - background-color: $c-text-primary-black; -} - -%bg-color-secondary-gray, -.bg-color-secondary-gray { - background-color: $c-text-secondary-gray; -} - -// *** Signal colors *** -// Background -%bg-signal-success, -.bg-signal-success { - background-color: $c-signal-success; -} - -%bg-signal-aware, -.bg-signal-aware { - background-color: $c-signal-aware; -} - -%bg-signal-alert, -.bg-signal-alert { - background-color: $c-signal-alert; -} - -// Border -%border-signal-success, -.border-signal-success { - border: 1px solid $c-signal-success; - stroke: $c-signal-success; -} - -%border-signal-aware, -.border-signal-aware { - border: 1px solid $c-signal-aware; - stroke: $c-signal-aware; -} - -%border-signal-alert, -.border-signal-alert { - border: 1px solid $c-signal-alert; - stroke: $c-signal-alert; -} - -// Color -%color-signal-success, -.color-signal-success { - color: $c-signal-success; -} - -%color-signal-aware, -.color-signal-aware { - color: $c-signal-aware; -} - -%color-signal-alert, -.color-signal-alert { - color: $c-signal-alert; -} diff --git a/src/stories/Library/colors/color-variables.scss b/src/stories/Library/colors/color-variables.scss deleted file mode 100644 index abd7f83e1..000000000 --- a/src/stories/Library/colors/color-variables.scss +++ /dev/null @@ -1,50 +0,0 @@ -// Global colors -$c-global-primary: #f6f5f0; -$c-global-secondary: #eee9e5; -$c-global-tertiary-1: #dbdbdb; -$c-global-tertiary-2: #707070; -$c-identity-primary: hsl( - var(--identity-color-h), - var(--identity-color-s), - var(--identity-color-l), - 1 -); - -$c-text-primary-white: #fff; -$c-text-primary-black: #000; -$c-text-secondary-gray: #484848; - -$c-signal-success: #068802; -$c-signal-aware: #f7bf42; -$c-signal-alert: #d5364a; - -// *** CSS variables for identity color tints *** -:root { - // Identity color tones - --identity-color-h: 145; - --identity-color-s: 22%; - --identity-color-l: 35%; - --identity-color: var(--identity-color-h), var(--identity-color-s), - var(--identity-color-l); - --tint-color-20: hsl(var(--identity-color), 0.2); - --tint-color-40: hsl(var(--identity-color), 0.4); - --tint-color-80: hsl(var(--identity-color), 0.8); - --tint-color-100: hsl(var(--identity-color), 1); - --tint-color-120: hsl( - var(--identity-color-h), - calc(var(--identity-color-s) - 1%), - calc(var(--identity-color-l) - 8%) - ); - - // Global colors - --c-global-primary: #f6f5f0; - --c-global-secondary: #eee9e5; - --c-global-tertiary-1: #dbdbdb; - --c-global-tertiary-2: #949494; - --c-text-primary-white: #fff; - --c-text-primary-black: #000; - --c-text-secondary-gray: #484848; - --c-signal-success: #068802; - --c-signal-aware: #f7bf42; - --c-signal-alert: #d5364a; -} diff --git a/src/stories/Library/counter/counter.scss b/src/stories/Library/counter/counter.scss index a72c20cc0..e5401bb4a 100644 --- a/src/stories/Library/counter/counter.scss +++ b/src/stories/Library/counter/counter.scss @@ -6,15 +6,17 @@ justify-content: center; align-items: center; border-radius: 100%; -} -.counter__value { - font-family: "Noto Sans JP", sans-serif; + font-family: $font__body; font-size: 22px; font-style: normal; font-weight: 400; line-height: 26px; letter-spacing: 0; +} + +.counter__value { + line-height: 1em; text-align: center; img { @@ -23,12 +25,9 @@ } .counter__label { - font-family: "Noto Sans JP", sans-serif; font-size: 12px; - font-style: normal; font-weight: 500; line-height: 19px; - letter-spacing: 0; text-align: center; text-transform: capitalize; } diff --git a/src/stories/Library/cover/cover.scss b/src/stories/Library/cover/cover.scss index 2c732d2d8..b6992c411 100644 --- a/src/stories/Library/cover/cover.scss +++ b/src/stories/Library/cover/cover.scss @@ -13,35 +13,35 @@ $MATERIAL_XLARGE_DESKTOP: 460px; &-xsmall { border-radius: 3px; height: $MATERIAL_XSMALL_MOBILE; - @include breakpoint-s { + @include media-query__small { height: $MATERIAL_XSMALL_DESKTOP; } } &-small { height: $MATERIAL_SMALL_MOBILE; - @include breakpoint-s { + @include media-query__small { height: $MATERIAL_SMALL_DESKTOP; } } &-medium { height: $MATERIAL_LARGE_MOBILE; - @include breakpoint-s { + @include media-query__small { height: $MATERIAL_LARGE_DESKTOP; } } &-large { height: $MATERIAL_LARGE_MOBILE; - @include breakpoint-s { + @include media-query__small { height: $MATERIAL_LARGE_DESKTOP; } } &-xlarge { height: $MATERIAL_XLARGE_MOBILE; - @include breakpoint-s { + @include media-query__small { height: $MATERIAL_XLARGE_DESKTOP; } } @@ -83,7 +83,7 @@ a.cover { } &.cover__img--shadow { - filter: drop-shadow(0 4px 40px rgb(0 0 0 / 15%)); + filter: drop-shadow(0 $s-xs 40px rgb(0 0 0 / 15%)); } } // In this case we do not want to use kebab case diff --git a/src/stories/Library/dashboard-page/dashboard-page.scss b/src/stories/Library/dashboard-page/dashboard-page.scss index a4515f34d..3275f20d9 100644 --- a/src/stories/Library/dashboard-page/dashboard-page.scss +++ b/src/stories/Library/dashboard-page/dashboard-page.scss @@ -1,9 +1,9 @@ .dashboard-page { - background: $c-global-primary; + background: $color__global-primary; padding: $s-md; position: relative; - @include breakpoint-m { + @include media-query__medium { padding: $s-6xl; } } diff --git a/src/stories/Library/date-calendar/date-calendar.scss b/src/stories/Library/date-calendar/date-calendar.scss index 365d30ad8..cf9e6708c 100644 --- a/src/stories/Library/date-calendar/date-calendar.scss +++ b/src/stories/Library/date-calendar/date-calendar.scss @@ -12,7 +12,7 @@ $selected-date-background: rgb(0, 105, 255); font-family: "Noto Sans JP"; font-style: normal; font-weight: 500; - color: $c-text-primary-black; + color: $color__text-primary-black; padding: $s-md !important; width: fit-content !important; @@ -40,7 +40,7 @@ $selected-date-background: rgb(0, 105, 255); width: auto; font-size: 14px; line-height: 100%; - color: $c-text-primary-black; + color: $color__text-primary-black; & select { appearance: none; @@ -70,7 +70,7 @@ $selected-date-background: rgb(0, 105, 255); } & svg { - stroke: $c-text-primary-black; + stroke: $color__text-primary-black; } } } diff --git a/src/stories/Library/disclosure/disclosure.scss b/src/stories/Library/disclosure/disclosure.scss index 58f7954b1..3e413109a 100644 --- a/src/stories/Library/disclosure/disclosure.scss +++ b/src/stories/Library/disclosure/disclosure.scss @@ -1,13 +1,13 @@ .disclosure { width: auto; - border: solid 1px $c-global-tertiary-1; + border: solid 1px $color__global-tertiary-1; border-top: none; &:first-of-type { - border-top: solid 1px $c-global-tertiary-1; + border-top: solid 1px $color__global-tertiary-1; } - @include breakpoint-s { + @include media-query__small { margin: 0 133px; } @@ -15,7 +15,7 @@ width: 100%; margin: 0; - @include breakpoint-s { + @include media-query__small { margin: 0; } } @@ -28,13 +28,13 @@ cursor: pointer; padding-left: $s-md; - @include breakpoint-s { + @include media-query__small { padding-left: $s-xl; } &.disclosure__headline--no-padding { padding-left: $s-xl; - @include breakpoint-s { + @include media-query__small { padding-left: $s-2xl; } } @@ -46,14 +46,14 @@ max-height: 84px; overflow-y: hidden; - @include breakpoint-s { + @include media-query__small { width: 685px; } &--shorter { width: 197px; - @include breakpoint-s { + @include media-query__small { width: 404px; } } @@ -67,7 +67,7 @@ justify-content: center; margin-right: $s-md; - @include breakpoint-s { + @include media-query__small { margin-left: -#{$s-sm}; margin-right: $s-lg; } @@ -81,7 +81,7 @@ margin-left: auto; margin-right: $s-md; - @include breakpoint-s { + @include media-query__small { margin-right: $s-xl; } diff --git a/src/stories/Library/dropdown/dropdown.scss b/src/stories/Library/dropdown/dropdown.scss index 0a89d0c09..5632985d4 100644 --- a/src/stories/Library/dropdown/dropdown.scss +++ b/src/stories/Library/dropdown/dropdown.scss @@ -1,17 +1,17 @@ .dropdown { width: 100%; position: relative; - border-color: $c-text-primary-black; + border-color: $color__text-primary-black; &--grey-borders { - border-color: $c-global-tertiary-1; + border-color: $color__global-tertiary-1; } } .dropdown__desktop { width: 100%; - @include breakpoint-m { + @include media-query__medium { width: 50%; } } @@ -24,7 +24,7 @@ height: 50px; cursor: pointer; background-color: transparent; - color: $c-text-primary-black; + color: $color__text-primary-black; border-radius: 0; border: 1px solid; border-color: inherit; @@ -32,11 +32,11 @@ text-overflow: ellipsis; white-space: nowrap; - @extend %text-button-placeholder; + @include typography($typo__button); &:focus { outline: none; - border-color: $c-text-primary-black; + border-color: $color__text-primary-black; } } @@ -45,7 +45,7 @@ background-color: #f9f9f9; height: 400px; - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-placeholder); } .dropdown__arrows { @@ -64,19 +64,18 @@ } .dropdown__arrow--bottom { - margin-top: 4px; + margin-top: $s-xs; transform: rotateZ(180deg); } .dropdown__select--inline { - @extend %text-tags; + @include typography($typo__tags); height: 100%; padding: $s-sm $s-md; min-width: 200px; } .dropdown__select--inline-body-font { - @extend %text-body-medium-regular-placeholder; height: 100%; padding: $s-sm $s-3xl $s-sm $s-md; min-width: 200px; diff --git a/src/stories/Library/event-description/EventDescription.tsx b/src/stories/Library/event-description/EventDescription.tsx new file mode 100644 index 000000000..8b71f6b06 --- /dev/null +++ b/src/stories/Library/event-description/EventDescription.tsx @@ -0,0 +1,44 @@ +import { FC } from "react"; +import HorizontalTermLine, { + HorizontalTermLineProps, + generateId, +} from "../horizontal-term-line/HorizontalTermLine"; +import ListDescription, { + ListData, +} from "../Lists/list-description/ListDescription"; + +export type EventDescriptionProps = { + descriptionTitle: string; + listDescriptionData: ListData; + horizontalTermLineData: HorizontalTermLineProps[]; + descriptionDescription: string; +}; + +const EventDescription: FC = ({ + descriptionTitle, + descriptionDescription, + horizontalTermLineData, + listDescriptionData, +}) => { + return ( +
+

{descriptionTitle}

+
+

+ {descriptionDescription} +

+
+ {horizontalTermLineData.map((item, index) => ( + + ))} +
+
+ +
+ ); +}; + +export default EventDescription; diff --git a/src/stories/Library/event-description/event-description.scss b/src/stories/Library/event-description/event-description.scss new file mode 100644 index 000000000..e41d563ce --- /dev/null +++ b/src/stories/Library/event-description/event-description.scss @@ -0,0 +1,42 @@ +.event-description { + // @todo use @include layout-container instead here. + padding: $s-md; + max-width: $layout__max-width; + margin: 0 auto; + + @include media-query__small { + padding: $s-xl $s-4xl; + display: grid; + column-gap: $s-xl; + grid-template-columns: 2fr 1fr; + } +} + +.event-description__title { + @include typography($typo__h4); + margin-bottom: $s-md; + + @include media-query__small { + grid-column: 1 / -1; + margin-bottom: $s-lg; + } +} + +.event-description__description { + @include typography($typo__body-large); + + line-height: 24px; + margin-bottom: $s-md; + + @include media-query__small { + line-height: 32px; + } +} + +.event-description__links { + margin-bottom: $s-2xl; + + @include media-query__small { + margin-bottom: 0; + } +} diff --git a/src/stories/Library/event-header/EventHeader.tsx b/src/stories/Library/event-header/EventHeader.tsx new file mode 100644 index 000000000..974b1530f --- /dev/null +++ b/src/stories/Library/event-header/EventHeader.tsx @@ -0,0 +1,38 @@ +import { FC } from "react"; +import { Tag } from "../tag/Tag"; +import ImageCredited from "../image-credited/ImageCredited"; + +type EventHeaderProps = { + title: string; + date: string; + image: string; +}; + +const EventHeader: FC = ({ title, date, image }) => { + return ( +
+
+ + Udstilling + + +

{title}

+ + Køb billet + +
+
+ +
+
+ ); +}; + +export default EventHeader; diff --git a/src/stories/Library/event-header/event-header.scss b/src/stories/Library/event-header/event-header.scss new file mode 100644 index 000000000..4ed97aea1 --- /dev/null +++ b/src/stories/Library/event-header/event-header.scss @@ -0,0 +1,87 @@ +.event-header { + // @todo use @include layout-container instead here. + max-width: $layout__max-width; + margin: 0 auto; + + border-bottom: 1px solid $color__global-tertiary-1; + display: grid; + gap: $s-lg; + padding-bottom: $s-2xl; + @include media-query__small { + grid-template-columns: 2fr 1fr; + gap: 0; + padding-bottom: 0; + } +} + +.event-header__content, +.event-header__visual { + padding: 0 $s-md; + @include media-query__small { + padding: $s-2xl; + } +} + +.event-header__content { + padding-top: $s-md; + display: grid; + grid-template-columns: $s-3xl 1fr $s-3xl; + grid-template-areas: + ". tag ." + ". date ." + ". title ." + "btn btn btn"; + + @include media-query__small { + padding-top: $s-3xl; + grid-template-columns: 1fr; + } +} + +.event-header__tag { + grid-area: tag; + width: max-content; + margin-bottom: $s-md; + @include media-query__small { + margin-bottom: $s-lg; + } +} + +.event-header__date { + @include typography($typo__h4); + + grid-area: date; + display: block; + margin-bottom: $s-md; + @include media-query__small { + margin-bottom: $s-sm; + } +} + +.event-header__title { + @include typography($typo__h1); + + grid-area: title; + margin-bottom: $s-xl; + + @include media-query__small { + margin-bottom: $s-5xl; + } +} + +.event-header__button { + grid-area: btn; + width: 100%; + text-decoration: none; + @include media-query__small { + width: auto; + } +} + +.event-header__visual { + @include media-query__small { + grid-column: 1/2; + grid-row: 1/2; + border-right: 1px solid $color__global-tertiary-1; + } +} diff --git a/src/stories/Library/image-credited/ImageCredited.stories.tsx b/src/stories/Library/image-credited/ImageCredited.stories.tsx new file mode 100644 index 000000000..b4253695f --- /dev/null +++ b/src/stories/Library/image-credited/ImageCredited.stories.tsx @@ -0,0 +1,44 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import ImageCredited from "./ImageCredited"; + +export default { + title: "Library / Image Credited", + component: ImageCredited, + decorators: [withDesign], + argTypes: { + src: { + defaultValue: + "https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", + type: "string", + }, + alt: { + defaultValue: "Photo by Unsplash", + type: "string", + }, + description: { + defaultValue: "Fernisering Modern Dans", + type: "string", + }, + year: { + defaultValue: "©2021", + type: "string", + }, + }, + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39846&mode=dev", + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Default = Template.bind({}); +export const withOutImage = Template.bind({}); +withOutImage.args = { + src: "", +}; diff --git a/src/stories/Library/image-credited/ImageCredited.tsx b/src/stories/Library/image-credited/ImageCredited.tsx new file mode 100644 index 000000000..21af01698 --- /dev/null +++ b/src/stories/Library/image-credited/ImageCredited.tsx @@ -0,0 +1,38 @@ +import clsx from "clsx"; +import { FC } from "react"; + +type ImageCreditedProps = { + src: string; + alt?: string; + description?: string; + year?: string; + className?: string; +}; + +const ImageCredited: FC = ({ + src, + alt = "", + description, + year, + className, +}) => { + return ( +
+ {src ? ( + <> + {alt} + {(description || year) && ( +
+ {description} + {year} +
+ )} + + ) : ( +
+ )} +
+ ); +}; + +export default ImageCredited; diff --git a/src/stories/Library/image-credited/image-credited.scss b/src/stories/Library/image-credited/image-credited.scss new file mode 100644 index 000000000..ee3567c10 --- /dev/null +++ b/src/stories/Library/image-credited/image-credited.scss @@ -0,0 +1,15 @@ +.image-credited__img { + width: 100%; +} + +.image-credited__info { + @include typography($typo__small-caption); + margin-top: $s-md; + display: flex; + justify-content: space-between; +} + +.image-credited__no-image { + aspect-ratio: 4/3; + @extend %identity-placeholder; +} diff --git a/src/stories/Library/input-with-dropdown/input-with-dropdown.scss b/src/stories/Library/input-with-dropdown/input-with-dropdown.scss index 2f38d3418..8cdac5f80 100644 --- a/src/stories/Library/input-with-dropdown/input-with-dropdown.scss +++ b/src/stories/Library/input-with-dropdown/input-with-dropdown.scss @@ -6,22 +6,22 @@ margin-bottom: $s-md; padding-right: 48px; - @include breakpoint-s { + @include media-query__small { margin-bottom: $s-lg; flex-direction: row; - padding-right: 0px; + padding-right: 0; height: 48px; } - @include breakpoint-m { + @include media-query__medium { margin-bottom: $s-lg; } &__input { - @extend %text-body-small-regular; + @include typography($typo__body-small); width: 100%; min-height: 48px; - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; padding-left: $s-md; background-color: transparent; } @@ -32,7 +32,7 @@ min-height: 48px; margin-top: -1px; - @include breakpoint-s { + @include media-query__small { width: 200px; margin: 0 0 0 -1px; } @@ -45,7 +45,7 @@ top: 12px; right: $s-sm; - @include breakpoint-s { + @include media-query__small { margin: 0 $s-md $s-lg $s-md; position: relative; } diff --git a/src/stories/Library/instant-loan/instant-loan.scss b/src/stories/Library/instant-loan/instant-loan.scss index b61f54285..8d3ef42a3 100644 --- a/src/stories/Library/instant-loan/instant-loan.scss +++ b/src/stories/Library/instant-loan/instant-loan.scss @@ -3,11 +3,11 @@ } .instant-loan-summary { - background-color: $c-text-primary-white; + background-color: $color__text-primary-white; display: flex; flex-direction: column; gap: $s-lg; - @include breakpoint-s { + @include media-query__small { flex-direction: row; } // Flips arrow icon with class .instant-loan-arrow @@ -31,7 +31,7 @@ } .instant-loan-branch { - background-color: $c-text-primary-white; + background-color: $color__text-primary-white; min-height: $s-4xl; display: grid; grid-template-columns: 1fr max-content 1fr; diff --git a/src/stories/Library/layout/Spacing.stories.tsx b/src/stories/Library/layout/Spacing.stories.tsx deleted file mode 100644 index 0cc23ccc6..000000000 --- a/src/stories/Library/layout/Spacing.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { withDesign } from "storybook-addon-designs"; -import { Meta } from "@storybook/react"; - -import { Spacing } from "./Spacing"; - -export default { - title: "Library / Spacing", - component: Spacing, - decorators: [withDesign], - parameters: { - design: { - type: "figma", - url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=255%3A2080", - }, - }, -} as Meta; - -export const Default = () => ; diff --git a/src/stories/Library/layout/Spacing.tsx b/src/stories/Library/layout/Spacing.tsx deleted file mode 100644 index 9fcd92389..000000000 --- a/src/stories/Library/layout/Spacing.tsx +++ /dev/null @@ -1,97 +0,0 @@ -const scaleValues = [8, 16, 24, 32, 48, 64, 80, 96, 112]; - -const spaceClasses = [ - { - classPrefix: "m", - classProperty: "margin", - }, - { - classPrefix: "mx", - classProperty: "margin-left, margin-right", - }, - { - classPrefix: "my", - classProperty: "margin-top, margin-bottom", - }, - { - classPrefix: "ml", - classProperty: "margin-left", - }, - { - classPrefix: "mr", - classProperty: "margin-right", - }, - { - classPrefix: "mb", - classProperty: "margin-bottom", - }, - { - classPrefix: "mt", - classProperty: "margin-top", - }, - { - classPrefix: "p", - classProperty: "padding", - }, - { - classPrefix: "px", - classProperty: "padding-left, padding-right", - }, - { - classPrefix: "py", - classProperty: "padding-top, padding-bottom", - }, - { - classPrefix: "pl", - classProperty: "padding-left", - }, - { - classPrefix: "pr", - classProperty: "padding-right", - }, - { - classPrefix: "pb", - classProperty: "padding-bottom", - }, - { - classPrefix: "pt", - classProperty: "padding-top", - }, -]; - -export const Spacing = () => { - return ( -
-
-

Scale Values

-
- {scaleValues.map((scaleValue) => ( -
-
{scaleValue}px
-
-
- ))} -
-
-
-

CSS Classes / CSS properties

-
- {spaceClasses.map((spaceClass) => ( -
-
- 
-                  {`.${spaceClass.classPrefix}-[SCALE_VALUE]`}
-
-
-
- {spaceClass.classProperty} -
-
- ))} -
-
-
- ); -}; - -export default Spacing; diff --git a/src/stories/Library/layout/spacing.scss b/src/stories/Library/layout/spacing.scss deleted file mode 100644 index ad745166d..000000000 --- a/src/stories/Library/layout/spacing.scss +++ /dev/null @@ -1,121 +0,0 @@ -$s-4: 4; -$s-8: 8; -$s-16: 16; -$s-22: 22; -$s-24: 24; -$s-32: 32; -$s-35: 35; -$s-48: 48; -$s-64: 64; -$s-75: 75; -$s-80: 80; -$s-96: 96; -$s-112: 112; -$s-215: 215; - -$s-xs: 4px; -$s-sm: 8px; -$s-md: 16px; -$s-lg: 24px; -$s-xl: 32px; -$s-2xl: 44px; -$s-3xl: 60px; -$s-4xl: 80px; -$s-5xl: 100px; -$s-6xl: 112px; -$s-7xl: 215px; - -$spacers: ( - $s-4, - $s-8, - $s-16, - $s-22, - $s-24, - $s-32, - $s-35, - $s-48, - $s-64, - $s-80, - $s-96, - $s-112, - $s-215 -); - -/* BEM plugin does not support interpolation */ -/* stylelint-disable plugin/stylelint-bem-namics */ -@each $space in $spacers { - %m-#{$space}, - .m-#{$space} { - margin: #{$space}px; - } - - %mx-#{$space}, - .mx-#{$space} { - margin-left: #{$space}px; - margin-right: #{$space}px; - } - - %my-#{$space}, - .my-#{$space} { - margin-top: #{$space}px; - margin-bottom: #{$space}px; - } - - %ml-#{$space}, - .ml-#{$space} { - margin-left: #{$space}px; - } - - %mr-#{$space}, - .mr-#{$space} { - margin-right: #{$space}px; - } - - %mb-#{$space}, - .mb-#{$space} { - margin-bottom: #{$space}px; - } - - %mt-#{$space}, - .mt-#{$space} { - margin-top: #{$space}px; - } - - %p-#{$space}, - .p-#{$space} { - padding: #{$space}px; - } - - %px-#{$space}, - .px-#{$space} { - padding-left: #{$space}px; - padding-right: #{$space}px; - } - - %py-#{$space}, - .py-#{$space} { - padding-top: #{$space}px; - padding-bottom: #{$space}px; - } - - %pl-#{$space}, - .pl-#{$space} { - padding-left: #{$space}px; - } - - %pr-#{$space}, - .pr-#{$space} { - padding-right: #{$space}px; - } - - %pb-#{$space}, - .pb-#{$space} { - padding-bottom: #{$space}px; - } - - %pt-#{$space}, - .pt-#{$space} { - padding-top: #{$space}px; - } -} -/* stylelint-enable plugin/stylelint-bem-namics */ diff --git a/src/stories/Library/link-filters/link-filters.scss b/src/stories/Library/link-filters/link-filters.scss index 8eddb893c..1bcabbf24 100644 --- a/src/stories/Library/link-filters/link-filters.scss +++ b/src/stories/Library/link-filters/link-filters.scss @@ -1,6 +1,6 @@ .link-filters { display: flex; - grid-column-gap: 24px; + grid-column-gap: $s-lg; } .link-filters__tag-wrapper:last-child { @@ -9,10 +9,8 @@ } .link-filters__tag { - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-small); - font-size: 14px; - line-height: 18px; text-transform: uppercase; text-decoration: none; padding-bottom: 0; @@ -27,12 +25,11 @@ } .link-filters__counter { - font-size: 14px; - line-height: 18px; + @include typography($typo__body-small); + position: relative; top: -8px; - padding-left: 8px; - @extend %text-body-medium-regular-placeholder; + padding-left: $s-sm; } .link-filters__tag:active { diff --git a/src/stories/Library/link-with-icon/LinkTypes.ts b/src/stories/Library/link-with-icon/LinkTypes.ts new file mode 100644 index 000000000..ebb92114c --- /dev/null +++ b/src/stories/Library/link-with-icon/LinkTypes.ts @@ -0,0 +1,7 @@ +export type LinkType = "internal" | "external" | "download" | "search"; + +export type IconType = + | "ArrowBack" + | "icon-external-link" + | "Ebook" + | "SearchBooks"; diff --git a/src/stories/Library/link-with-icon/LinkWithIcon.stories.tsx b/src/stories/Library/link-with-icon/LinkWithIcon.stories.tsx new file mode 100644 index 000000000..c4a085abd --- /dev/null +++ b/src/stories/Library/link-with-icon/LinkWithIcon.stories.tsx @@ -0,0 +1,68 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import { LinkWithIcon } from "./LinkWithIcon"; + +export default { + title: "Library / Link with icon", + component: LinkWithIcon, + decorators: [withDesign], + argTypes: { + href: { + defaultValue: "/", + }, + linkText: { + defaultValue: "Følg prisoverrækkelsen live fra kl. 15:30", + }, + linkType: { + control: { + type: "select", + options: ["internal", "external", "download", "search"], + }, + defaultValue: "internal", + }, + }, + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39110&mode=design&t=d1dz4FVEPRORqxUN-4", + }, + layout: "full", + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const Default = Template.bind({}); + +const LinkWithIconListComponentTemplate: ComponentStory< + typeof LinkWithIcon +> = () => ( +
+ + + + + +
+); + +export const LinkList = LinkWithIconListComponentTemplate.bind({}); +LinkList.decorators = [(Story) => Story()]; diff --git a/src/stories/Library/link-with-icon/LinkWithIcon.tsx b/src/stories/Library/link-with-icon/LinkWithIcon.tsx new file mode 100644 index 000000000..f9ec75c8b --- /dev/null +++ b/src/stories/Library/link-with-icon/LinkWithIcon.tsx @@ -0,0 +1,48 @@ +import clsx from "clsx"; +import { ReactComponent as ArrowSmallRight } from "../Arrows/icon-arrow-ui/icon-arrow-ui-small-right.svg"; +import { IconType, LinkType } from "./LinkTypes"; + +export type LinksProps = { + href: string; + linkText: string; + linkType: LinkType; +}; + +const linkTypeAttributes: { + [key in LinkType]: { + target: "_self" | "_blank"; + icon: IconType; + folder: "basic" | "collection"; + }; +} = { + internal: { target: "_self", icon: "ArrowBack", folder: "collection" }, + external: { + target: "_blank", + icon: "icon-external-link", + folder: "basic", + }, + download: { target: "_blank", icon: "Ebook", folder: "collection" }, + search: { target: "_self", icon: "SearchBooks", folder: "collection" }, +}; + +export const LinkWithIcon = ({ href, linkText, linkType }: LinksProps) => { + const { target, icon, folder } = linkTypeAttributes[linkType]; + + const linkIconClass = clsx({ + "link-with-icon__icon--rotate-180": linkType === "internal", + }); + + return ( + +
+ +
+ {linkText} + + + ); +}; diff --git a/src/stories/Library/link-with-icon/link-with-icon.scss b/src/stories/Library/link-with-icon/link-with-icon.scss new file mode 100644 index 000000000..5222d6b65 --- /dev/null +++ b/src/stories/Library/link-with-icon/link-with-icon.scss @@ -0,0 +1,46 @@ +.link-with-icon { + @include typography($typo__body-placeholder); + @include show-svg-on-hover(); + @include layout-container; + + background-color: $color__global-primary; + padding-top: $s-md; + padding-bottom: $s-md; + display: grid; + grid-template-columns: 40px auto max-content; + align-items: center; + gap: $s-md; + text-decoration: none; + border: 1px solid $color__global-tertiary-1; + width: 100%; + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + + & + .link-with-icon { + margin-top: 0; + } + + @include media-query__small { + padding: $s-lg $s-xl; + } +} + +.link-with-icon__icon { + background-color: $color__identity-primary; + min-width: 40px; + min-height: 40px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; +} + +.link-with-icon__icon--rotate-180 { + transform: rotate(180deg); +} diff --git a/src/stories/Library/links/links.scss b/src/stories/Library/links/links.scss index 6adf20761..caa02d2aa 100644 --- a/src/stories/Library/links/links.scss +++ b/src/stories/Library/links/links.scss @@ -1,41 +1,13 @@ -/* BEM plugin does not support interpolation */ -/* stylelint-disable plugin/stylelint-bem-namics */ -@mixin link($className) { - %#{$className}, - .#{$className} { - text-decoration: none; - color: $c-text-primary-black; - display: inline-block; - width: fit-content; - - @extend %text-body-medium-regular-placeholder; - } - // Hide arrow - %#{$className}::after, - .#{$className}::after { - display: block; - content: ""; - border-bottom: solid 1px; - transform: scaleX(1); - transition: transform 300ms ease-in-out; - transform-origin: 100% 50%; - padding-bottom: 2px; - } - // Show arrow on hover - %#{$className}:hover::after, - .#{$className}:hover::after { - transform: scaleX(0); - transform-origin: 100% 0%; - } +.link-tag { + @extend %link-tag; } -@include link("link-tag"); -@include link("button-link"); - .button-link { - color: $c-text-primary-white; + @extend %button-link; + + color: $color__text-primary-white; } .button-link--bright { - color: $c-text-primary-black; + color: $color__text-primary-black; } diff --git a/src/stories/Library/list-buttons/list-buttons.scss b/src/stories/Library/list-buttons/list-buttons.scss index 95b9b11da..94d141bd7 100644 --- a/src/stories/Library/list-buttons/list-buttons.scss +++ b/src/stories/Library/list-buttons/list-buttons.scss @@ -1,7 +1,7 @@ .dpl-list-buttons { display: flex; justify-content: space-between; - @extend %text-body-medium-medium; + @include typography($typo__body-medium); } .dpl-list-buttons__header { @@ -14,11 +14,11 @@ } .dpl-list-buttons__power { + @include typography($typo__small-caption); + margin-left: 2px; height: 30px; vertical-align: super; - font-size: 12px; - @extend %text-body-medium-regular-placeholder; } .dpl-list-buttons__buttons { @@ -28,14 +28,14 @@ } .dpl-list-buttons__buttons__button { - @extend %ml-32; + margin-left: $s-xl; display: flex; } .dpl-list-buttons__buttons__button--hide-on-mobile { display: none; - @include breakpoint-s { + @include media-query__small { display: flex; } } diff --git a/src/stories/Library/loan-list-page/loan-list-page.scss b/src/stories/Library/loan-list-page/loan-list-page.scss index 89ca5c3c6..2f6c596b0 100644 --- a/src/stories/Library/loan-list-page/loan-list-page.scss +++ b/src/stories/Library/loan-list-page/loan-list-page.scss @@ -1,9 +1,9 @@ .loan-list-page { - background: $c-global-primary; + background: $color__global-primary; padding: $s-md $s-md $s-4xl $s-md; position: sticky; - @include breakpoint-m { + @include media-query__medium { padding: $s-6xl; } } diff --git a/src/stories/Library/logo/logo.scss b/src/stories/Library/logo/logo.scss index 90f038398..eb7f1a969 100644 --- a/src/stories/Library/logo/logo.scss +++ b/src/stories/Library/logo/logo.scss @@ -1,14 +1,5 @@ .logo-fallback { - font-family: "Noto Sans JP", sans-serif; - font-size: 14px; - font-style: normal; - line-height: 18px; - text-align: left; - - @include breakpoint-m { - font-size: 24px; - line-height: 27px; - } + @include typography($typo__body-small); } .logo-fallback__text-name { diff --git a/src/stories/Library/material-card/material-card.scss b/src/stories/Library/material-card/material-card.scss index b1deb46bf..d232675a6 100644 --- a/src/stories/Library/material-card/material-card.scss +++ b/src/stories/Library/material-card/material-card.scss @@ -1,5 +1,5 @@ .material-card { - padding: 16px; + padding: $s-md; max-width: 500px; text-decoration: none; height: 100%; @@ -15,21 +15,21 @@ justify-content: center; .cover { - margin-top: 8px; + margin-top: $s-sm; } } .material-card__texts { - margin-top: 16px; + margin-top: $s-md; display: grid; - @include breakpoint-s { - margin-top: 32px; + @include media-query__small { + margin-top: $s-xl; } } .material-card__description { - @extend %text-body-small-regular; + @include typography($typo__body-small); white-space: nowrap; overflow: hidden; @@ -38,5 +38,7 @@ } .material-card__title { - @extend %text-body-small-medium; + @include typography($typo__body-small); + + font-weight: $font__weight--semi-bold; } diff --git a/src/stories/Library/material-description/material-description.scss b/src/stories/Library/material-description/material-description.scss index 3e10ced58..0cd887492 100644 --- a/src/stories/Library/material-description/material-description.scss +++ b/src/stories/Library/material-description/material-description.scss @@ -3,8 +3,8 @@ padding-top: $s-3xl; padding-bottom: $s-2xl; - & > h2.text-header-h4 { - font-size: $s-lg; + > h2.text-header-h4 { + font-size: 24px; } &__content { @@ -12,7 +12,7 @@ line-height: 160%; } - @include breakpoint-m { + @include media-query__medium { padding-top: $s-4xl; padding-left: $s-7xl; padding-bottom: $s-5xl; diff --git a/src/stories/Library/material-header/material-header.scss b/src/stories/Library/material-header/material-header.scss index 354305a84..778b2a9af 100644 --- a/src/stories/Library/material-header/material-header.scss +++ b/src/stories/Library/material-header/material-header.scss @@ -1,14 +1,14 @@ .material-header { - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; padding-bottom: 56px; - @include breakpoint-m { + @include media-query__medium { min-height: 800px; display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 0; } - @include breakpoint-l { + @include media-query__large { min-height: 650px; } @@ -22,19 +22,19 @@ display: grid; place-content: center; - @include breakpoint-m { + @include media-query__medium { padding: 0; } } &__content { - padding: 16px; + padding: $s-md; - @include breakpoint-m { + @include media-query__medium { padding: $s-4xl $s-2xl $s-4xl $s-7xl; grid-column: 1/2; grid-row: 1/2; - border-right: 1px solid $c-global-tertiary-1; + border-right: 1px solid $color__global-tertiary-1; } & > h1 { @@ -55,13 +55,13 @@ // Spacing between buttons &__button > * + * { - margin-top: 8px; + margin-top: $s-sm; } // set all buttons to the full width &__button > * { width: 100%; - @include breakpoint-m { + @include media-query__medium { width: 346px; max-width: 346px; } diff --git a/src/stories/Library/material-header/material-periodical-select.scss b/src/stories/Library/material-header/material-periodical-select.scss index 9b6f26448..c79ba5265 100644 --- a/src/stories/Library/material-header/material-periodical-select.scss +++ b/src/stories/Library/material-header/material-periodical-select.scss @@ -2,13 +2,13 @@ $icon-position: 10px; .material-periodical { display: flex; - gap: 24px; + gap: $s-lg; margin-bottom: 48px; } .material-periodical-select { display: flex; - gap: 8px; + gap: $s-sm; &__border-container { position: relative; diff --git a/src/stories/Library/medias/Medias.stories.tsx b/src/stories/Library/medias/Medias.stories.tsx new file mode 100644 index 000000000..fe1886ce1 --- /dev/null +++ b/src/stories/Library/medias/Medias.stories.tsx @@ -0,0 +1,40 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import Medias from "./Medias"; +import ImageCredited from "../image-credited/ImageCredited"; + +export default { + title: "Library / Medias", + component: Medias, + decorators: [withDesign], + argTypes: { + items: { + // Disabling controls, as the different variations are added already. + control: false, + }, + }, + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39100&mode=design&t=SREzD6mFi3A15ap4-4", + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const Multiple = Template.bind({}); +Multiple.args = { + items: [ + , + , + ], +}; + +export const Single = Template.bind({}); +Single.args = { + items: [], +}; diff --git a/src/stories/Library/medias/Medias.tsx b/src/stories/Library/medias/Medias.tsx new file mode 100644 index 000000000..1575cc934 --- /dev/null +++ b/src/stories/Library/medias/Medias.tsx @@ -0,0 +1,31 @@ +import { FC, ReactNode } from "react"; +import clsx from "clsx"; + +type MediasProps = { + items: ReactNode[]; +}; + +const Medias: FC = ({ items }) => { + const classes = clsx("medias", { + "medias--multiple": items.length > 1, + "medias--single": items.length <= 1, + }); + + return ( +
+ {items.map((item, index) => { + const itemClasses = clsx("medias__item", { + "medias__item--last": index === items.length - 1, + }); + + return ( +
+ {item} +
+ ); + })} +
+ ); +}; + +export default Medias; diff --git a/src/stories/Library/medias/medias.scss b/src/stories/Library/medias/medias.scss new file mode 100644 index 000000000..1c9524883 --- /dev/null +++ b/src/stories/Library/medias/medias.scss @@ -0,0 +1,61 @@ +$_medias-breakpoint: 550px; + +.medias__item { + width: 100%; + box-sizing: border-box; + + img { + width: 100%; + height: auto; + aspect-ratio: 33 / 25; + object-fit: cover; + } +} + +.medias--single { + @include layout-container($layout__max-width--single-media, 0); +} + +@include media-query($_medias-breakpoint) { + .medias--multiple { + display: grid; + grid-gap: 8%; + grid-template-columns: auto 40%; + } + + .medias__item { + width: 100%; + min-width: 250px; + } + + .medias__item--last { + margin-top: 4rem; + } +} + +@include media-query($_medias-breakpoint, "max-width") { + .medias--multiple { + .medias__item { + max-width: 330px; + padding-right: $s-lg; + } + .medias__item--last { + max-width: 300px; + margin-top: $s-md; + margin-left: auto; + padding-left: $s-lg; + padding-right: 0; + } + } +} + +.medias--multiple { + @include layout-container($layout__max-width--multiple-medias, 0); + + .medias__item--last { + img { + aspect-ratio: 1 / 1; + object-fit: cover; + } + } +} diff --git a/src/stories/Library/multiselect/multiselect.scss b/src/stories/Library/multiselect/multiselect.scss index 8bab09bf3..b2cc4f0c8 100644 --- a/src/stories/Library/multiselect/multiselect.scss +++ b/src/stories/Library/multiselect/multiselect.scss @@ -6,10 +6,10 @@ display: flex; align-items: center; flex-direction: row; - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; &__selected { - @extend %text-button-placeholder; + @include typography($typo__button); width: 100%; white-space: nowrap; overflow: hidden; @@ -19,10 +19,10 @@ } &__opener { - width: 44px; - min-width: 44px; + width: $s-2xl; + min-width: $s-2xl; height: 48px; - border-left: 1px solid $c-global-tertiary-1; + border-left: 1px solid $color__global-tertiary-1; display: flex; align-items: center; cursor: pointer; @@ -33,16 +33,16 @@ } &__options { - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-placeholder); width: 100%; padding: $s-md 0; position: absolute; top: 47px; - background-color: $c-global-primary; + background-color: $color__global-primary; z-index: 1; display: flex; flex-direction: column; - outline: 1px solid $c-global-tertiary-1; + outline: 1px solid $color__global-tertiary-1; } &__option { @@ -53,7 +53,7 @@ cursor: pointer; &.multiselect__option--highlighted { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } } @@ -64,7 +64,7 @@ } &__caption { - @extend %text-small-caption; + @include typography($typo__small-caption); width: 100%; height: $s-lg; margin-bottom: $s-sm; diff --git a/src/stories/Library/number/number.scss b/src/stories/Library/number/number.scss index 95fba8b72..053e0f330 100644 --- a/src/stories/Library/number/number.scss +++ b/src/stories/Library/number/number.scss @@ -7,27 +7,27 @@ align-items: center; border: 2px solid transparent; border-radius: 100%; - @extend %text-body-medium-medium; + @include typography($typo__body-medium); - @include breakpoint-s { + @include media-query__small { min-width: 56px; width: 56px; height: 56px; } &--danger { - border-color: $c-signal-alert; + border-color: $color__signal-alert; } &--warning { - border-color: $c-signal-aware; + border-color: $color__signal-aware; } &--info { - border-color: $c-signal-success; + border-color: $color__signal-success; } &--neutral { - border-color: $c-text-secondary-gray; + border-color: $color__text-secondary-gray; } } diff --git a/src/stories/Library/patron-info/patron-info.scss b/src/stories/Library/patron-info/patron-info.scss index db165a694..82512ee3a 100644 --- a/src/stories/Library/patron-info/patron-info.scss +++ b/src/stories/Library/patron-info/patron-info.scss @@ -1,29 +1,29 @@ .dpl-patron-info { - @extend %color-secondary-gray; - @extend %bg-global-secondary; - @extend %pb-32; + color: $color__text-secondary-gray; + background-color: $color__global-secondary; + padding-bottom: $s-xl; &__label { - @extend %text-body-large; - @extend %ml-32; - @extend %pt-32; + @include typography($typo__body-large); + margin-left: $s-xl; + padding-top: $s-xl; } &__text { - @extend %text-body-medium-medium; - @extend %ml-32; + @include typography($typo__body-medium); + margin-left: $s-xl; } } .patron-buttons { display: flex; - @extend %mt-32; + margin-top: $s-xl; } .contact-info-flex { display: flex; flex-direction: column; - @include breakpoint-s { + @include media-query__small { flex-direction: row; } } @@ -31,7 +31,7 @@ .patron-page-info { width: 100%; - @include breakpoint-s { + @include media-query__small { width: 75%; } } @@ -39,35 +39,35 @@ .patron__input { display: flex; flex-direction: column; - @extend %text-body-medium-medium; + @include typography($typo__body-medium); label { - @extend %text-body-medium-medium; - color: $c-text-secondary-gray; + @include typography($typo__body-medium); + color: $color__text-secondary-gray; } input { background-color: transparent; border: none; - border-bottom: 1px solid $c-global-tertiary-1; + border-bottom: 1px solid $color__global-tertiary-1; height: 40px; &:focus { - border-bottom-color: $c-text-primary-black; + border-bottom-color: $color__text-primary-black; outline: none; } } &__description { - color: $c-text-secondary-gray; - @extend %text-body-small-regular; - @extend %mt-8; + color: $color__text-secondary-gray; + @include typography($typo__body-small); + margin-top: $s-sm; } &__validation { - color: $c-signal-alert; - @extend %text-body-small-regular; - @extend %mt-8; + color: $color__signal-alert; + @include typography($typo__body-small); + margin-top: $s-sm; } input::-webkit-outer-spin-button, @@ -84,12 +84,12 @@ width: 100%; &:first-of-type { - @include breakpoint-s { + @include media-query__small { margin-right: $s-lg; } } - @include breakpoint-m { + @include media-query__medium { width: 50%; } } diff --git a/src/stories/Library/patron-page/patron-page.scss b/src/stories/Library/patron-page/patron-page.scss index aa5873278..a73b88d37 100644 --- a/src/stories/Library/patron-page/patron-page.scss +++ b/src/stories/Library/patron-page/patron-page.scss @@ -1,8 +1,8 @@ .dpl-patron-page { - background: $c-global-primary; + background: $color__global-primary; padding: $s-md; - @include breakpoint-m { + @include media-query__medium { padding: $s-6xl; } } diff --git a/src/stories/Library/pause-reservation/pause-reservation.scss b/src/stories/Library/pause-reservation/pause-reservation.scss index 3e5f93e86..e5396930a 100644 --- a/src/stories/Library/pause-reservation/pause-reservation.scss +++ b/src/stories/Library/pause-reservation/pause-reservation.scss @@ -1,10 +1,10 @@ .dpl-pause-reservation-component { - background-color: $c-global-secondary; + background-color: $color__global-secondary; min-height: 72px; position: relative; display: flex; align-items: center; - @extend %p-16; + padding: $s-md; @extend %pagefold-parent--medium; &__pagefold { @@ -20,25 +20,25 @@ justify-content: center; gap: $s-sm; - @include breakpoint-xs { + @include media-query__x-small { justify-content: start; } &__reservation-icon { justify-content: center; - @include breakpoint-s { + @include media-query__small { padding-left: 48px; } } &__text { - @extend %text-body-large; + @include typography($typo__body-large); } &__badge { - background-color: $c-global-primary; + background-color: $color__global-primary; padding: $s-xs $s-sm; - @extend %text-body-medium-medium; + @include typography($typo__body-medium); } &__button { @@ -46,7 +46,7 @@ flex: 1; justify-content: center; - @include breakpoint-xs { + @include media-query__x-small { justify-content: flex-end; } } diff --git a/src/stories/Library/pincode-container/pincode-container.scss b/src/stories/Library/pincode-container/pincode-container.scss index 46fb958fe..ebbf41be9 100644 --- a/src/stories/Library/pincode-container/pincode-container.scss +++ b/src/stories/Library/pincode-container/pincode-container.scss @@ -2,15 +2,15 @@ display: flex; flex-wrap: wrap; - @include breakpoint-m { + @include media-query__medium { flex-wrap: nowrap; .dpl-input:first-of-type { - margin-right: 8px; + margin-right: $s-sm; } .dpl-input:last-of-type { - margin-left: 8px; + margin-left: $s-sm; } } } diff --git a/src/stories/Library/progress-bar/progress-bar.scss b/src/stories/Library/progress-bar/progress-bar.scss index 667e55977..56796fc11 100644 --- a/src/stories/Library/progress-bar/progress-bar.scss +++ b/src/stories/Library/progress-bar/progress-bar.scss @@ -2,12 +2,12 @@ &__progress-bar { display: flex; width: 100%; - height: 16px; + height: $s-md; } &__header { display: flex; justify-content: space-between; - column-gap: 8px; + column-gap: $s-sm; } } diff --git a/src/stories/Library/promo-bar/promo-bar.scss b/src/stories/Library/promo-bar/promo-bar.scss index 0c5d6281a..895b36cce 100644 --- a/src/stories/Library/promo-bar/promo-bar.scss +++ b/src/stories/Library/promo-bar/promo-bar.scss @@ -1,6 +1,6 @@ .promo-bar { min-height: $s-2xl; - background-color: $c-global-secondary; + background-color: $color__global-secondary; display: flex; align-items: center; gap: $s-md; @@ -10,7 +10,7 @@ } &.promo-bar--dark { - color: $c-text-primary-white; + color: $color__text-primary-white; background-color: #5a5f63; } } diff --git a/src/stories/Library/recommenders/recommenders.scss b/src/stories/Library/recommenders/recommenders.scss index 954691338..e2a586c5f 100644 --- a/src/stories/Library/recommenders/recommenders.scss +++ b/src/stories/Library/recommenders/recommenders.scss @@ -1,16 +1,16 @@ .recommender { - background-color: $c-global-tertiary-2; - color: $c-text-primary-white; - border-color: $c-text-secondary-gray; + background-color: $color__global-tertiary-2; + color: $color__text-primary-white; + border-color: $color__text-secondary-gray; &--bright { - background-color: $c-global-primary; - color: $c-text-primary-black; - border-color: $c-global-tertiary-1; + background-color: $color__global-primary; + color: $color__text-primary-black; + border-color: $color__global-tertiary-1; } /* stylelint-disable max-nesting-depth */ &--triple-desktop { - @include breakpoint-m { + @include media-query__medium { .simple-material { &:last-of-type { display: none; @@ -20,7 +20,7 @@ } &--padding-desktop { - @include breakpoint-m { + @include media-query__medium { padding: $s-6xl; } } @@ -29,7 +29,7 @@ text-align: center; padding: $s-lg; - @include breakpoint-m { + @include media-query__medium { padding-bottom: $s-6xl; } } @@ -38,7 +38,7 @@ text-align: left; padding-left: $s-md; - @include breakpoint-m { + @include media-query__medium { padding-left: $s-4xl; } } @@ -56,7 +56,7 @@ grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; - @include breakpoint-m { + @include media-query__medium { grid-template-columns: 33.33% 33.33% 33.33%; } } @@ -66,14 +66,14 @@ grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; - @include breakpoint-m { + @include media-query__medium { grid-template-columns: 25% 25% 25% 25%; } } } .simple-material { - border: 1px solid $c-text-secondary-gray; + border: 1px solid $color__text-secondary-gray; padding: 30px; display: flex; width: 100%; @@ -81,7 +81,7 @@ height: 350px; &--bright { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; } &__favourite { @@ -106,7 +106,7 @@ } &__title { - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-placeholder); text-decoration: none; display: block; overflow: hidden; @@ -120,7 +120,7 @@ } &__author { - @extend %text-body-medium-regular-placeholder; + @include typography($typo__body-placeholder); font-weight: 500; overflow: hidden; white-space: nowrap; diff --git a/src/stories/Library/reservation-list-page/reservation-list-page.scss b/src/stories/Library/reservation-list-page/reservation-list-page.scss index 1810ac654..d24a986ca 100644 --- a/src/stories/Library/reservation-list-page/reservation-list-page.scss +++ b/src/stories/Library/reservation-list-page/reservation-list-page.scss @@ -1,8 +1,8 @@ .reservation-list-page { - background: $c-global-primary; + background: $color__global-primary; padding: $s-md; - @include breakpoint-m { + @include media-query__medium { padding: $s-6xl; } } diff --git a/src/stories/Library/review/review.scss b/src/stories/Library/review/review.scss index 567867704..b673b7edb 100644 --- a/src/stories/Library/review/review.scss +++ b/src/stories/Library/review/review.scss @@ -9,7 +9,7 @@ } &__meta { - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; } &__heart { @@ -23,12 +23,13 @@ } &__headline { - color: $c-text-secondary-gray; - @extend %text-small-caption-bold; + color: $color__text-secondary-gray; + @include typography($typo__small-caption); + font-weight: 700; } &__body { max-width: 545px; - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; } } diff --git a/src/stories/Library/rich-text/RichText.stories.tsx b/src/stories/Library/rich-text/RichText.stories.tsx new file mode 100644 index 000000000..3a12f8371 --- /dev/null +++ b/src/stories/Library/rich-text/RichText.stories.tsx @@ -0,0 +1,20 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import { RichText } from "./RichText"; + +export default { + title: "Library / Rich Text", + component: RichText, + decorators: [withDesign], + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7880-59101&mode=design&t=dMcJmvsouH6erxzA-4", + }, + layout: "centered", + }, +} as ComponentMeta; + +const Template: ComponentStory = () => ; + +export const Default = Template.bind({}); diff --git a/src/stories/Library/rich-text/RichText.tsx b/src/stories/Library/rich-text/RichText.tsx new file mode 100644 index 000000000..dce43b40d --- /dev/null +++ b/src/stories/Library/rich-text/RichText.tsx @@ -0,0 +1,50 @@ +export interface RichTextProps { + text: string; +} + +export const RichText = () => { + return ( +
+

Tad survive ensnare joy mistake courtesy Bagshot Row.

+

+ Ligulas step drops both? You shall not pass! Tender + Tender respectable success. Valar impressive unfriendly bloom scraped? + Branch hey-diddle-diddle pony troublell sleeping. +

+

North valor overflowing sort Iáve mister kingly money?

+

+ Curse you and all the halflings! Deserted anytime Lake-town burned caves + balls. Smoked lthilien forbids Thrain? +

+
    +
  • Adamant.
    • +
  • + Ligulas step drops both? You shall not pass!. Valar + impressive unfriendly bloom scraped? Branch hey-diddle-diddle pony + troublell sleeping during jump Narsil. +
    • +
  • Witch-king.
    • +
  • Precious.
    • +
  • Gaffers!
    • +
+

+ Narsil enjoying shattered bigger leaderless retrieve dreamed dwarf. +

+

+ Ravens wonder wanted runs me crawl gaining lots faster! Khazad-dum + surprise baby season ranks. I bid you all a very fond farewell. +

+
    +
  1. Narsil.
    2. +
  2. Elros.
    3. +
  3. Arwen Evenstar.
    4. +
  4. + Ligulas step drops both? You shall not pass! Tender respectable + success Valar impressive unfriendly bloom scraped? Branch + hey-diddle-diddle pony troublell sleeping during jump Narsil. +
    5. +
  5. Bagginses?
    6. +
+
+ ); +}; diff --git a/src/stories/Library/rich-text/rich-text.scss b/src/stories/Library/rich-text/rich-text.scss new file mode 100644 index 000000000..0a961032d --- /dev/null +++ b/src/stories/Library/rich-text/rich-text.scss @@ -0,0 +1,77 @@ +// This component is used for WYSIWYG content. +// E.g. we cannot control classes of the underlying elements, so in this case +// we will target HTML tags instead. +.rich-text { + @include typography($typo__rich-text-body); + + // Setting a max-width to increase readability for sentences. + @include layout-container($layout__max-width--text); + + a { + @extend %text-inline-link; + } + + h2 { + @include typography($typo__h3); + } + + h3 { + @include typography($typo__h4); + } + + > * { + margin-bottom: $s-md; + } + + ol > li, + ul > li { + $_dash-width: 21px; + $_dash-width--wide: 33px; + + position: relative; + padding-left: $_dash-width + $s-md; + padding-bottom: $s-lg; + + &::before { + position: absolute; + top: 0.8em; + left: 0; + width: $_dash-width; + text-align: center; + } + + @include media-query__medium { + padding-left: $_dash-width--wide + $s-lg; + + &::before { + width: $_dash-width--wide; + } + } + } + + ul > li::before { + content: ""; + height: 1px; + background-color: black; + } + + ol { + counter-reset: list; + + > li::before { + @include typography( + $typo__h4, + ( + excludes: ( + line-height, + ), + ) + ); + + font-weight: normal; + line-height: 0; + counter-increment: list; + content: counter(list) "."; + } + } +} diff --git a/src/stories/Library/shadows/shadows.scss b/src/stories/Library/shadows/shadows.scss index 6ce1fd5b4..456162636 100644 --- a/src/stories/Library/shadows/shadows.scss +++ b/src/stories/Library/shadows/shadows.scss @@ -3,10 +3,10 @@ $shadows: "low" "medium" "0px 0px 3px hsla(0deg, 0%, 0%, 0.03), 0 1px 16px hsla(0deg, 0%, 0%, 0.1), 3px 0px 6px hsla(0deg, 0%, 0%, 0.03)", "high" - "0px 0px 3px hsla(0deg, 0%, 0%, 0.04), 0 1px 16px hsla(0deg, 0%, 0%, 0.2), 6px 0px 24px hsla(0deg, 0%, 0%, 0.06)"; + "0px 0px 3px hsla(0deg, 0%, 0%, 0.04), 0 1px 16px hsla(0deg, 0%, 0%, 0.2), 6px 0px 24px hsla(0deg, 0%, 0%, 0.06)"; /* BEM plugin does not support interpolation */ -/* stylelint-disable plugin/stylelint-bem-namics */ +// stylelint-disable plugin/stylelint-bem-namics @each $name, $shadow in $shadows { .shadow-#{$name} { box-shadow: #{$shadow}; @@ -19,4 +19,4 @@ $shadows: "low" } } } -/* stylelint-enable plugin/stylelint-bem-namics */ +// stylelint-enable plugin/stylelint-bem-namics diff --git a/src/stories/Library/status-label/status-label.scss b/src/stories/Library/status-label/status-label.scss index 1167a7730..5f62e535d 100644 --- a/src/stories/Library/status-label/status-label.scss +++ b/src/stories/Library/status-label/status-label.scss @@ -1,49 +1,41 @@ .status-label { + @include typography($typo__label); + min-height: 28px; - padding: 0 4px; + padding: 0 $s-xs; display: inline-flex; justify-content: center; align-items: center; - font-size: 10px; - line-height: 11px; //keep text inside when it is wrapped + text-transform: uppercase; + font-weight: $font__weight--semi-bold; - @include breakpoint-s { + @include media-query__small { padding: 0 16px; } &--danger { - @extend %text-button-placeholder; - - background-color: $c-signal-alert; - color: $c-text-primary-white; + background-color: $color__signal-alert; + color: $color__text-primary-white; } &--warning { - @extend %text-button-placeholder; - - background-color: $c-signal-aware; - color: $c-text-secondary-gray; + background-color: $color__signal-aware; + color: $color__text-secondary-gray; } &--info { - @extend %text-button-placeholder; - - background-color: $c-signal-success; - color: $c-text-primary-white; + background-color: $color__signal-success; + color: $color__text-primary-white; } &--neutral { - @extend %text-button-placeholder; - - background-color: $c-global-primary; - color: $c-text-secondary-gray; + background-color: $color__global-primary; + color: $color__text-secondary-gray; } &--outline { - @extend %text-button-placeholder; - background-color: transparent; border: 1px solid #dbdbdb; - color: $c-text-secondary-gray; + color: $color__text-secondary-gray; } } diff --git a/src/stories/Library/tag/Tag.tsx b/src/stories/Library/tag/Tag.tsx index 1138a94c0..a7d86ef86 100644 --- a/src/stories/Library/tag/Tag.tsx +++ b/src/stories/Library/tag/Tag.tsx @@ -8,6 +8,7 @@ type TagProps = { hasBackground?: boolean; showCloseIcon?: boolean; isClickable?: boolean; + className?: string; }; export const Tag = ({ @@ -17,6 +18,7 @@ export const Tag = ({ usesCursor = true, showCloseIcon = false, isClickable = true, + className, }: TagProps) => { const [selected, setSelected] = useState(false); @@ -28,7 +30,8 @@ export const Tag = ({ "tag", (hasBackground || selected) && "tag--fill", usesCursor && "cursor-pointer", - `tag--${size}` + `tag--${size}`, + className )} > {children} diff --git a/src/stories/Library/tag/tag.scss b/src/stories/Library/tag/tag.scss index cf6561375..717c3f1b8 100644 --- a/src/stories/Library/tag/tag.scss +++ b/src/stories/Library/tag/tag.scss @@ -2,22 +2,22 @@ display: inline-flex; justify-content: center; align-items: center; - border: 1px solid $c-global-tertiary-1; - padding: 8px 16px; - @extend %text-tags; + border: 1px solid $color__global-tertiary-1; + padding: $s-sm $s-md; + @include typography($typo__tags); &.tag--fill { - background-color: $c-global-secondary; + background-color: $color__global-secondary; } &.tag--small { - height: 32px; - padding: 0 8px; + height: $s-xl; + padding: 0 $s-sm; } &.tag--large { height: 40px; - padding: 0 16px; + padding: 0 $s-md; } } diff --git a/src/stories/Library/typography/typography.scss b/src/stories/Library/typography/typography.scss deleted file mode 100644 index deb4e5ff5..000000000 --- a/src/stories/Library/typography/typography.scss +++ /dev/null @@ -1,449 +0,0 @@ -// Since we host the fonts ourselves, they may need to be updated in the future -// We use this online open source tool to retrieve fonts & their css definition: https://gwfh.mranftl.com/fonts -/* noto-sans-jp-regular - latin */ -@font-face { - font-display: swap; - font-family: "Noto Sans JP"; - font-style: normal; - font-weight: 400; - src: url("../fonts/noto-sans-jp-v42-latin-regular.woff2") format("woff2"), - /* Chrome 36+, Opera 23+, Firefox 39+ */ - url("../fonts/noto-sans-jp-v42-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} -/* noto-sans-jp-500 - latin */ -@font-face { - font-display: swap; - font-family: "Noto Sans JP"; - font-style: normal; - font-weight: 500; - src: url("../fonts/noto-sans-jp-v42-latin-500.woff2") format("woff2"), - /* Chrome 36+, Opera 23+, Firefox 39+ */ - url("../fonts/noto-sans-jp-v42-latin-500.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} -/* noto-sans-jp-700 - latin */ -@font-face { - font-display: swap; - font-family: "Noto Sans JP"; - font-style: normal; - font-weight: 700; - src: url("../fonts/noto-sans-jp-v42-latin-700.woff2") format("woff2"), - /* Chrome 36+, Opera 23+, Firefox 39+ */ - url("../fonts/noto-sans-jp-v42-latin-700.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} -/* lora-regular - latin */ -@font-face { - font-display: swap; - font-family: "Lora"; - font-style: normal; - font-weight: 400; - src: url("../fonts/lora-v26-latin-regular.woff2") format("woff2"), - /* Chrome 36+, Opera 23+, Firefox 39+ */ - url("../fonts/lora-v26-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} -/* lora-italic - latin */ -@font-face { - font-display: swap; - font-family: "Lora"; - font-style: italic; - font-weight: 400; - src: url("../fonts/lora-v26-latin-italic.woff2") format("woff2"), - /* Chrome 36+, Opera 23+, Firefox 39+ */ - url("../fonts/lora-v26-latin-italic.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} - -/* gochi-hand-regular - latin */ -@font-face { - font-display: swap; - font-family: "Gochi Hand"; - font-style: normal; - font-weight: 400; - src: url("../fonts/gochi-hand-v19-latin-regular.woff2") format("woff2"), - /* Chrome 36+, Opera 23+, Firefox 39+ */ - url("../fonts/gochi-hand-v19-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} - -// styleName: Desktop/H1; -%text-header-h1, -.text-header-h1 { - font-family: Lora, serif; - font-style: normal; - font-weight: 400; - font-size: 32px; - line-height: 40px; - text-align: left; - - @include breakpoint-s { - line-height: 120%; - } - - @include breakpoint-m { - font-size: 52px; - } - - @include breakpoint-xl { - font-size: 58px; - } -} - -//styleName: Desktop/H2; -.text-header-h2 { - font-family: Lora, serif; - font-style: normal; - font-weight: 400; - font-size: 28px; - line-height: 32px; - text-align: left; - - @include breakpoint-s { - line-height: 120%; - } - - @include breakpoint-m { - font-size: 42px; - } - - @include breakpoint-xl { - font-size: 44px; - } -} - -//styleName: Desktop/H3; -.text-header-h3 { - font-family: Lora, serif; - font-size: 24px; - font-style: normal; - font-weight: 400; - line-height: 32px; - text-align: left; - - @include breakpoint-s { - line-height: 120%; - } - - @include breakpoint-m { - font-size: 32px; - } - - @include breakpoint-xl { - font-size: 34px; - } -} - -//styleName: Desktop/H4; -%text-header-h4, -.text-header-h4 { - font-family: Lora, serif; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 24px; - text-align: left; - - @include breakpoint-s { - line-height: 120%; - } - - @include breakpoint-m { - font-size: 24px; - } - - @include breakpoint-xl { - font-size: 26px; - } -} - -//styleName: Desktop/H5; -%text-header-h5, -.text-header-h5 { - font-family: Lora, serif; - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 24px; - letter-spacing: 0; - text-align: left; -} - -//styleName: Desktop/Subtitle; -%text-subtitle, -.text-subtitle { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 18px; - line-height: 32px; - text-align: left; - - @include breakpoint-s { - line-height: 160%; - } - - @include breakpoint-m { - font-size: 24px; - } - - @include breakpoint-xl { - font-size: 26px; - } -} - -//styleName: Desktop/Accent; -.text-accent { - font-family: "Gochi Hand", cursive; - font-style: normal; - font-weight: 400; - font-size: 24px; - line-height: 120%; - text-align: left; - - @include breakpoint-xl { - font-size: 26px; - } -} - -// styleName: Desktop/Body Copy - L -%text-body-large, -.text-body-large { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 42px; - text-align: left; - - @include breakpoint-s { - line-height: 160%; - } - - @include breakpoint-m { - font-size: 18px; - } - - @include breakpoint-xl { - font-size: 20px; - } -} - -//styleName: Desktop/Body Copy - M - regular; -%text-body-medium-regular-placeholder, -.text-body-medium-regular { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 32px; - text-align: left; - color: $c-text-secondary-gray; - - @include breakpoint-s { - line-height: 160%; - } - - @include breakpoint-m { - font-size: 16px; - } - - @include breakpoint-xl { - font-size: 18px; - } -} - -//styleName: Desktop/Body Copy - M - medium; -%text-body-medium-medium, -.text-body-medium-medium { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 160%; - text-align: left; - - @include breakpoint-m { - font-size: 16px; - } - - @include breakpoint-xl { - font-size: 18px; - } -} - -//styleName: Desktop/Body Copy - S - regular; -%text-body-small-regular, -.text-body-small-regular { - font-family: "Noto Sans JP", sans-serif; - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 16px; - letter-spacing: 0; - text-align: left; -} - -//styleName: Desktop/Body Copy - S - medium; -%text-body-small-medium, -.text-body-small-medium { - font-family: "Noto Sans JP", sans-serif; - font-size: 14px; - font-style: normal; - font-weight: 500; - line-height: 16px; - letter-spacing: 0; - text-align: left; -} - -// Using the placeholder selector, recommended by this rule -// https://github.com/kristerkari/stylelint-scss/blob/master/src/rules/at-extend-no-missing-placeholder/README.md -//styleName: Desktop/Button text; -%text-button-placeholder, -.text-button { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 24px; - letter-spacing: 0.02em; - text-align: left; - text-transform: uppercase; - - @include breakpoint-s { - line-height: 120%; - } - - @include breakpoint-xl { - font-size: 16px; - line-height: 19px; - } -} - -//styleName: Desktop/Links; -%text-links-placeholder, -.text-links { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 24px; - text-align: left; - - @include breakpoint-s { - line-height: 150%; - } - - @include breakpoint-xl { - font-size: 16px; - } -} - -//styleName: Desktop/Tags; -%text-tags, -.text-tags { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 500; - font-size: 12px; - line-height: 120%; - letter-spacing: 0.02em; - text-align: left; - text-transform: uppercase; - - @include breakpoint-s { - line-height: 120%; - } - - @include breakpoint-xl { - font-size: 14px; - } -} - -//styleName: Desktop/Small Text - Caption; -%text-small-caption, -.text-small-caption { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 400; - font-size: 10px; - line-height: 16px; - text-align: left; - - @include breakpoint-s { - line-height: 160%; - } - - @include breakpoint-m { - font-size: 12px; - line-height: 120%; - } - - @include breakpoint-xl { - font-size: 14px; - line-height: 130%; - } -} - -//styleName: Desktop/Small Text - Caption Bold; -%text-small-caption-bold, -.text-small-caption-bold { - font-family: "Noto Sans JP", sans-serif; - font-style: normal; - font-weight: 700; - font-size: 10px; - line-height: 16px; - text-align: left; - - @include breakpoint-s { - line-height: 160%; - } - - @include breakpoint-m { - font-size: 12px; - line-height: 120%; - } - - @include breakpoint-xl { - font-size: 14px; - line-height: 130%; - } -} - -//styleName: Desktop/Label; -%text-label, -.text-label { - font-family: "Noto Sans JP", sans-serif; - font-size: 10px; - font-style: normal; - line-height: 24px; - letter-spacing: 0.02em; - text-align: left; -} - -.text-label-normal { - @extend %text-label; - - font-weight: 400; -} - -.text-label-semibold { - @extend %text-label; - font-weight: 500; -} - -.text-label-bold { - @extend %text-label; - font-weight: 700; -} - -.text-truncate { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; -} - -%ellipsis-two-lines, -.ellipsis-two-lines { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; -} diff --git a/src/stories/Library/warning-status/warning-status.scss b/src/stories/Library/warning-status/warning-status.scss index 5a60f3053..67573e011 100644 --- a/src/stories/Library/warning-status/warning-status.scss +++ b/src/stories/Library/warning-status/warning-status.scss @@ -2,22 +2,22 @@ display: flex; align-items: center; justify-content: space-between; - padding: 16px; + padding: $s-md; - @include breakpoint-s { - padding: 16px 32px; + @include media-query__small { + padding: $s-md $s-xl; } } .warning-bar__icon { - margin-right: 16px; + margin-right: $s-md; } .warning-bar__left { display: flex; align-items: center; - @include breakpoint-s { + @include media-query__small { align-items: center; } } @@ -28,9 +28,9 @@ } .warning-bar__owes { - margin-right: 8px; + margin-right: $s-sm; - @include breakpoint-s { - margin-right: 24px; + @include media-query__small { + margin-right: $s-lg; } } diff --git a/src/styles/scss/internal.scss b/src/styles/scss/internal.scss index 9fbd9fc9a..a841a5d96 100644 --- a/src/styles/scss/internal.scss +++ b/src/styles/scss/internal.scss @@ -49,13 +49,13 @@ } .internal-spacing-css-inner-prefix { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; width: 200px; height: 60px; } .internal-spacing-css-inner-property { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; width: 250px; height: 60px; } @@ -66,13 +66,13 @@ // Breakpoints .internal-breakpoints-css-inner-prefix { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; width: 250px; height: 60px; } .internal-breakpoints-css-inner-property { - border: 1px solid $c-global-tertiary-1; + border: 1px solid $color__global-tertiary-1; width: 90px; height: 60px; } @@ -85,7 +85,7 @@ code { font-family: monospace; background-color: #f5f8fa; - padding: 4px; + padding: $s-xs; border-radius: 2px; font-size: 90%; line-height: 1.45; @@ -136,6 +136,7 @@ code { flex-direction: column; row-gap: 24px; } + .shadow-box-item { padding: 24px; } diff --git a/src/styles/scss/legacy.scss b/src/styles/scss/legacy.scss new file mode 100644 index 000000000..102a33766 --- /dev/null +++ b/src/styles/scss/legacy.scss @@ -0,0 +1,5 @@ +@import "legacy/spacings.legacy"; +@import "legacy/animations.legacy"; +@import "legacy/pagefold.legacy"; +@import "legacy/typography.legacy"; +@import "legacy/colors.legacy"; diff --git a/src/styles/scss/legacy/animations.legacy.scss b/src/styles/scss/legacy/animations.legacy.scss new file mode 100644 index 000000000..cfb94276a --- /dev/null +++ b/src/styles/scss/legacy/animations.legacy.scss @@ -0,0 +1,12 @@ +// Remove all animations and transitions for people that prefer not to see them. +// @todo this has to be re-visited, as using * is really bad performance. +// Instead, we should consider setting a `has-animations` class on the body, +// using JS, that we can listen for when adding animations. +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} diff --git a/src/styles/scss/legacy/colors.legacy.scss b/src/styles/scss/legacy/colors.legacy.scss new file mode 100644 index 000000000..15f3f0b2c --- /dev/null +++ b/src/styles/scss/legacy/colors.legacy.scss @@ -0,0 +1,163 @@ +// *** Global colors *** +// Background +.bg-global-primary { + background-color: $color__global-primary; +} + +.bg-global-secondary { + background-color: $color__global-secondary; +} + +.bg-global-tertiary-1 { + background-color: $color__global-tertiary-1; +} + +.bg-global-tertiary-2 { + background-color: $color__global-tertiary-2; +} + +// Border +.border-global-primary { + border: 1px solid $color__global-primary; + stroke: $color__global-primary; +} + +.border-global-secondary { + border: 1px solid $color__global-secondary; + stroke: $color__global-secondary; +} + +.border-global-tertiary-1 { + border: 1px solid $color__global-tertiary-1; + stroke: $color__global-tertiary-1; +} + +.border-global-tertiary-2 { + border: 1px solid $color__global-tertiary-2; + stroke: $color__global-tertiary-2; +} + +// *** Identity colors *** +// Background +.bg-identity-primary { + background-color: $color__identity-primary; + fill: $color__identity-primary; +} + +// Border +.border-identity-primary { + border: 1px solid $color__identity-primary; + stroke: $color__identity-primary; +} + +// Color +.color-identity-primary { + color: $color__identity-primary; +} + +.color-secondary-gray { + color: $color__text-secondary-gray; +} + +// *** Identity color tints *** +// Background +.bg-identity-tint-20 { + background-color: var(--tint-color-20); +} + +.bg-identity-tint-40 { + background-color: var(--tint-color-40); +} + +.bg-identity-tint-80 { + background-color: var(--tint-color-80); +} + +.bg-identity-tint-100 { + background-color: var(--tint-color-100); +} + +.bg-identity-tint-120 { + background-color: var(--tint-color-120); +} + +// *** Text colors *** +// Color +.color-primary-white { + color: $color__text-primary-white; +} + +.color-primary-black { + color: $color__text-primary-black; +} + +.border-primary-white { + border: 1px solid $color__text-primary-white; + stroke: $color__text-primary-white; +} + +.border-primary-black { + border: 1px solid $color__text-primary-black; + stroke: $color__text-primary-black; +} + +.border-secondary-gray { + border: 1px solid $color__text-secondary-gray; + stroke: $color__text-secondary-gray; +} + +// Only used internally for bg-color in Colors comp. +.bg-color-primary-white { + background-color: $color__text-primary-white; +} + +.bg-color-primary-black { + background-color: $color__text-primary-black; +} + +.bg-color-secondary-gray { + background-color: $color__text-secondary-gray; +} + +// *** Signal colors *** +// Background +.bg-signal-success { + background-color: $color__signal-success; +} + +.bg-signal-aware { + background-color: $color__signal-aware; +} + +.bg-signal-alert { + background-color: $color__signal-alert; +} + +// Border +.border-signal-success { + border: 1px solid $color__signal-success; + stroke: $color__signal-success; +} + +.border-signal-aware { + border: 1px solid $color__signal-aware; + stroke: $color__signal-aware; +} + +.border-signal-alert { + border: 1px solid $color__signal-alert; + stroke: $color__signal-alert; +} + +// Color +.color-signal-success { + color: $color__signal-success; +} + +.color-signal-aware { + color: $color__signal-aware; +} + +.color-signal-alert { + color: $color__signal-alert; +} diff --git a/src/stories/Library/pagefold/pagefold.scss b/src/styles/scss/legacy/pagefold.legacy.scss similarity index 77% rename from src/stories/Library/pagefold/pagefold.scss rename to src/styles/scss/legacy/pagefold.legacy.scss index 87d16adc0..cf872fcea 100644 --- a/src/stories/Library/pagefold/pagefold.scss +++ b/src/styles/scss/legacy/pagefold.legacy.scss @@ -12,8 +12,8 @@ $pagefold-map: ( "xlarge": 56, ); -/* BEM plugin does not support interpolation */ -/* stylelint-disable plugin/stylelint-bem-namics */ +// BEM plugin does not support interpolation. +// stylelint-disable plugin/stylelint-bem-namics @each $size, $triangle-width in $pagefold-map { .m-#{$size} { margin: #{$size}px; @@ -45,7 +45,7 @@ $pagefold-map: ( .pagefold-triangle--#{$size} { width: #{$triangle-width}px; height: #{$triangle-width}px; - background-color: $c-identity-primary; + background-color: $color__identity-primary; position: absolute; top: 0; left: 0; @@ -53,12 +53,13 @@ $pagefold-map: ( .pagefold-triangle { &--success { - background-color: $c-signal-success; + background-color: $color__signal-success; } &--alert { - background-color: $c-signal-alert; + background-color: $color__signal-alert; } } } -/* stylelint-enable plugin/stylelint-bem-namics */ + +// stylelint-enable plugin/stylelint-bem-namics diff --git a/src/styles/scss/legacy/spacings.legacy.scss b/src/styles/scss/legacy/spacings.legacy.scss new file mode 100644 index 000000000..b97a545cf --- /dev/null +++ b/src/styles/scss/legacy/spacings.legacy.scss @@ -0,0 +1,80 @@ +// stylelint-disable plugin/stylelint-bem-namics +$legacy_spacings: ( + 4: $s-xs, + 8: $s-sm, + 16: $s-md, + 22: 22px, + 24: $s-lg, + 32: $s-xl, + 35: 35px, + 48: 48px, + 64: 64px, + 80: $s-4xl, + 96: 96px, + 112: $s-6xl, + 215: $s-7xl, +); + +@each $key, $space in $legacy_spacings { + .m-#{$key} { + margin: $space; + } + + .mx-#{$key} { + margin-left: $space; + margin-right: $space; + } + + .my-#{$key} { + margin-top: $space; + margin-bottom: $space; + } + + .ml-#{$key} { + margin-left: $space; + } + + .mr-#{$key} { + margin-right: $space; + } + + .mb-#{$key} { + margin-bottom: $space; + } + + .mt-#{$key} { + margin-top: $space; + } + + .p-#{$key} { + padding: $space; + } + + .px-#{$key} { + padding-left: $space; + padding-right: $space; + } + + .py-#{$key} { + padding-top: $space; + padding-bottom: $space; + } + + .pl-#{$key} { + padding-left: $space; + } + + .pr-#{$key} { + padding-right: $space; + } + + .pb-#{$key} { + padding-bottom: $space; + } + + .pt-#{$key} { + padding-top: $space; + } +} + +// stylelint-enable plugin/stylelint-bem-namics diff --git a/src/styles/scss/legacy/typography.legacy.scss b/src/styles/scss/legacy/typography.legacy.scss new file mode 100644 index 000000000..33604f5a8 --- /dev/null +++ b/src/styles/scss/legacy/typography.legacy.scss @@ -0,0 +1,93 @@ +.text-header-h1 { + @include typography($typo__h1); +} + +.text-header-h2 { + @include typography($typo__h2); +} + +.text-header-h3 { + @include typography($typo__h3); +} + +.text-header-h4 { + @include typography($typo__h4); +} + +.text-header-h5 { + @include typography($typo__h5); +} + +.text-subtitle { + @include typography($typo__subtitle); +} + +.text-accent { + @include typography($typo__accent); +} + +.text-body-large { + @include typography($typo__body-large); +} + +.text-body-medium-regular { + @include typography($typo__body-placeholder); +} + +.text-body-medium-medium { + @include typography($typo__body-medium); +} + +.text-body-small-regular { + @include typography($typo__body-small); +} + +.text-body-small-medium { + @include typography($typo__body-small); + + font-weight: bold; +} + +.text-button { + @include typography($typo__button); +} + +.text-links { + @include typography($typo__links); +} + +.text-tags { + @include typography($typo__tags); +} + +.text-small-caption { + @include typography($typo__small-caption); +} + +.text-small-caption-bold { + @include typography($typo__small-caption); + font-weight: bold; +} + +.text-label, +.text-label-normal { + @include typography($typo__label); +} + +.text-label-semibold { + @include typography($typo__label); + font-weight: 500; +} + +.text-label-bold { + @include typography($typo__label); + font-weight: 700; +} + +.text-truncate { + @extend %text-truncate; +} + +.ellipsis-two-lines { + @extend %text-ellipsis-two-lines; +} diff --git a/src/styles/scss/reset.scss b/src/styles/scss/reset.scss index 55dd890ce..755094991 100644 --- a/src/styles/scss/reset.scss +++ b/src/styles/scss/reset.scss @@ -49,6 +49,7 @@ a:not([class]) { /* Make images easier to work with */ img { + height: auto; max-width: 100%; display: block; } @@ -70,13 +71,3 @@ input[type="reset"] { border: inherit; background-color: inherit; } - -/* Remove all animations and transitions for people that prefer not to see them */ -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } -} diff --git a/src/styles/scss/shared.scss b/src/styles/scss/shared.scss index 1f05ac972..1866fd7ab 100644 --- a/src/styles/scss/shared.scss +++ b/src/styles/scss/shared.scss @@ -2,40 +2,18 @@ text-decoration: inherit; } -/** - * Hide element visually but not from screen readers. - * - * https://www.accessibility-developer-guide.com/examples/hiding-elements/visually/ - * - * The class is intentionally called .hide-visually and not .visually-hidden. - * Drupal which is a known consumer of the design system also has a - * .visually-hidden class where the implementation is a bit different. - * To avoid any conflicts we call our class something else. - * - * https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/modules/system/css/components/hidden.module.css#L18-33 - */ -@mixin hide-visually { - position: absolute; - clip: rect(1px, 1px, 1px, 1px); - padding: 0; - border: 0; - height: 1px; - width: 1px; - overflow: hidden; -} - .hide-visually { @include hide-visually; &--on-desktop { - @include breakpoint-s { + @include media-query__name("small") { @include hide-visually; } } } .hide-on-desktop { - @include breakpoint-s { + @include media-query__name("small") { display: none; } } @@ -91,13 +69,14 @@ .focus-styling { &:focus { outline: none; - border: 1px solid $c-text-primary-black; + border: 1px solid $color__text-primary-black; } + &__input { &:focus { outline: none; - border: 1px solid $c-text-primary-black; - background-color: $c-text-primary-white; + border: 1px solid $color__text-primary-black; + background-color: $color__text-primary-white; } } } diff --git a/src/styles/scss/tools.scss b/src/styles/scss/tools.scss new file mode 100644 index 000000000..775f30cac --- /dev/null +++ b/src/styles/scss/tools.scss @@ -0,0 +1,11 @@ +@import "tools/variables.fonts"; +@import "tools/variables.z-indexes"; +@import "tools/variables.spacings"; +@import "tools/variables.layout"; +@import "tools/variables.colors"; +@import "tools/variables.breakpoints"; +@import "tools/variables.typography"; +@import "tools/mixins.tools"; +@import "tools/mixins.media-query"; +@import "tools/mixins.misc"; +@import "tools/placeholder"; diff --git a/src/styles/scss/tools/mixins.media-query.scss b/src/styles/scss/tools/mixins.media-query.scss new file mode 100644 index 000000000..9a9977600 --- /dev/null +++ b/src/styles/scss/tools/mixins.media-query.scss @@ -0,0 +1,72 @@ +/** Create media query, based on unit (e.g. PX) value. + * + * If you want to go by names (e.g. "medium"), use media-query__name(). + */ +@mixin media-query($breakpoint, $definition: "min-width") { + // If we're meassuring by max-width, we want to remove a + // pixel as the variables are the max width of the device. + @if ($definition == "max-width") { + $breakpoint: $breakpoint - 1; + } + + @media screen and ($definition: $breakpoint) { + @content; + } +} + +/** Trigger media query, by using name as a parameter. + * + * Useful if you have the breakpoint name as a variable, as you cant use + * variables in mixin include names. + * + * @param {string} $breakpoint-name — E.g. 'mobile'. + */ +@mixin media-query__name($breakpoint-name, $definition: "min-width") { + // We're going mobile-first, so no MQ necessary here. + @if ($breakpoint-name == "mobile") { + @content; + } @else { + $breakpoint: map_get($breakpoints, $breakpoint-name); + + @include media-query($breakpoint, $definition) { + @content; + } + } +} + +// Defining explicit aliases for media queries, for editor auto-complete. +@mixin media-query__x-small($definition: "min-width") { + @include media-query__name("x-small", $definition) { + @content; + } +} + +@mixin media-query__small($definition: "min-width") { + @include media-query__name("small", $definition) { + @content; + } +} + +@mixin media-query__medium($definition: "min-width") { + @include media-query__name("medium", $definition) { + @content; + } +} + +@mixin media-query__large($definition: "min-width") { + @include media-query__name("large", $definition) { + @content; + } +} + +@mixin media-query__x-large($definition: "min-width") { + @include media-query__name("x-large", $definition) { + @content; + } +} + +@mixin media-query__xx-large($definition: "min-width") { + @include media-query__name("xx-large", $definition) { + @content; + } +} diff --git a/src/styles/scss/tools/mixins.misc.scss b/src/styles/scss/tools/mixins.misc.scss new file mode 100644 index 000000000..dafe603d4 --- /dev/null +++ b/src/styles/scss/tools/mixins.misc.scss @@ -0,0 +1,59 @@ +/** + * Hide element visually but not from screen readers. + * + * https://www.accessibility-developer-guide.com/examples/hiding-elements/visually/ + * The class is intentionally called .hide-visually and not .visually-hidden. + * Drupal which is a known consumer of the design system also has a + * .visually-hidden class where the implementation is a bit different. + * To avoid any conflicts we call our class something else. + * https://git.drupalcode.org/project/drupal/-/blob/9.2.x/core/modules/system/css/components/hidden.module.css#L18-33 + */ +@mixin hide-visually { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); + padding: 0; + border: 0; + height: 1px; + width: 1px; + overflow: hidden; +} + +/** + * Add styling, that only shows svg arrow when hovering. + * + * @todo - this needs to be cleaned up, as it currently targets all SVGs. + * It is also a problem that we need to do the $icon-container, which can be + * fixed by actually adding a class to the svg - or, a common wrapper class. + */ +@mixin show-svg-on-hover($icon-container: "") { + // stylelint-disable-next-line plugin/stylelint-bem-namics + #{$icon-container} > svg { + visibility: hidden; + opacity: 0; + margin-right: 40px; + align-self: center; + + transition: opacity 0.5s ease-in-out; + + @include media-query__small("max-width") { + display: none; + } + } + + // stylelint-disable-next-line plugin/stylelint-bem-namics + &:hover #{$icon-container} > svg { + visibility: visible; + opacity: 1; + } +} + +@mixin layout-container( + $max-width: $layout__max-width, + $padding: $layout__page-padding +) { + max-width: $max-width; + margin: auto; + padding-left: $padding; + padding-right: $padding; + box-sizing: border-box; +} diff --git a/src/styles/scss/tools/mixins.tools.scss b/src/styles/scss/tools/mixins.tools.scss new file mode 100644 index 000000000..504eea79b --- /dev/null +++ b/src/styles/scss/tools/mixins.tools.scss @@ -0,0 +1,55 @@ +/** + * Set styling across breakpoints, with possibility to exclude. + * + * Example usage of this mixin, where margin-top is excluded: + * @include map-styling($map, (excludes: ('margin-top')); + * + * @param {map} $map. + * @param {options} $options - List of options. Supports: + * - excludes : list - List of properties to ignore + */ +@mixin map-styling($map, $options: ()) { + $excludes: if( + map_has_key($options, "excludes"), + map_get($options, "excludes"), + () + ); + + @each $breakpoint-name, $map-values in $map { + $map-inner: map_get($map, $breakpoint-name); + + @include media-query__name($breakpoint-name) { + @each $property, $value in $map-inner { + @if not(index($excludes, $property)) { + #{$property}: $value; + } + } + } + } +} + +/** + * Set styling for a font variant, across breakpoints. + * + * @see mixin map-styling(). + * Example usage of this mixin, where line-height is excluded: + * @iinclude typography($font__h4, (excludes: ('line-height')); + * + * @param {map} $font. See available maps in _variables.typography.scss. + * @param {options} $options - List of options. Supports: + * - excludes : list - List of properties to ignore + */ +@mixin typography($font, $options: ()) { + $excludes: if( + map_has_key($options, "excludes"), + map_get($options, "excludes"), + () + ); + + @include map-styling( + $font, + ( + excludes: $excludes, + ) + ); +} diff --git a/src/styles/scss/tools/placeholder.scss b/src/styles/scss/tools/placeholder.scss new file mode 100644 index 000000000..83f0bc374 --- /dev/null +++ b/src/styles/scss/tools/placeholder.scss @@ -0,0 +1,70 @@ +// stylelint-disable plugin/stylelint-bem-namics +%text-ellipsis-two-lines { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; +} + +%text-truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; +} + +%text-inline-link { + text-decoration: underline solid black; + text-underline-offset: 0.3em; + transition: text-underline-offset 0.1s ease-in-out; + + &:hover { + color: $color__text-primary-black; + text-underline-offset: 0.2em; + } +} + +%link-tag { + @include typography($typo__body-placeholder); + + text-decoration: none; + color: $color__text-primary-black; + display: inline-block; + width: fit-content; + + // Hide arrow + &::after { + display: block; + content: ""; + border-bottom: solid 1px; + transform: scaleX(1); + transition: transform 300ms ease-in-out; + transform-origin: 100% 50%; + padding-bottom: 2px; + } + + // Show arrow on hover + &:hover::after { + transform: scaleX(0); + transform-origin: 100% 0; + } +} + +%button-link { + @extend %link-tag; + + @include typography($typo__body-small); +} + +%identity-placeholder { + background-color: var(--tint-color-120); + border: $s-lg solid $color__identity-primary; + + @include media-query__small { + border: $s-2xl solid $color__identity-primary; + } +} + +// stylelint-enable plugin/stylelint-bem-namics diff --git a/src/styles/scss/tools/variables.breakpoints.scss b/src/styles/scss/tools/variables.breakpoints.scss new file mode 100644 index 000000000..a7462042e --- /dev/null +++ b/src/styles/scss/tools/variables.breakpoints.scss @@ -0,0 +1,8 @@ +$breakpoints: ( + "x-small": 375px, + "small": 768px, + "medium": 1024px, + "large": 1440px, + "x-large": 1920px, + "xx-large": 2200px, +); diff --git a/src/styles/scss/tools/variables.colors.scss b/src/styles/scss/tools/variables.colors.scss new file mode 100644 index 000000000..22770c0f1 --- /dev/null +++ b/src/styles/scss/tools/variables.colors.scss @@ -0,0 +1,50 @@ +// Global colors +$color__global-primary: #f6f5f0; +$color__global-secondary: #eee9e5; +$color__global-tertiary-1: #dbdbdb; +$color__global-tertiary-2: #707070; +$color__identity-primary: hsl( + var(--identity-color-h), + var(--identity-color-s), + var(--identity-color-l), + 1 +); + +$color__text-primary-white: #fff; +$color__text-primary-black: #000; +$color__text-secondary-gray: #484848; + +$color__signal-success: #068802; +$color__signal-aware: #f7bf42; +$color__signal-alert: #d5364a; + +// *** CSS variables for identity color tints *** +:root { + // Identity color tones + --identity-color-h: 145; + --identity-color-s: 22%; + --identity-color-l: 35%; + --identity-color: var(--identity-color-h), var(--identity-color-s), + var(--identity-color-l); + --tint-color-20: hsl(var(--identity-color), 0.2); + --tint-color-40: hsl(var(--identity-color), 0.4); + --tint-color-80: hsl(var(--identity-color), 0.8); + --tint-color-100: hsl(var(--identity-color), 1); + --tint-color-120: hsl( + var(--identity-color-h), + calc(var(--identity-color-s) - 1%), + calc(var(--identity-color-l) - 8%) + ); + + // Global colors + --c-global-primary: $color__global-primary; + --c-global-secondary: $color__global-secondary; + --c-global-tertiary-1: $color__global-tertiary-1; + --c-global-tertiary-2: $color__global-tertiary-2; + --c-text-primary-white: $color__text-primary-white; + --c-text-primary-black: $color__text-primary-black; + --c-text-secondary-gray: $color__text-secondary-gray; + --c-signal-success: $color__signal-success; + --c-signal-aware: $color__signal-aware; + --c-signal-alert: $color__signal-alert; +} diff --git a/src/styles/scss/tools/variables.fonts.scss b/src/styles/scss/tools/variables.fonts.scss new file mode 100644 index 000000000..a18df9f35 --- /dev/null +++ b/src/styles/scss/tools/variables.fonts.scss @@ -0,0 +1,75 @@ +$font__title: "Lora", serif; +$font__body: "Noto Sans JP", sans-serif; +$font__accent: "Gochi Hand", cursive; +$font__weight--normal: 400; +$font__weight--semi-bold: 500; +$font__weight--bold: 700; + +// Since we host the fonts ourselves, they may need to be updated in the future +// We use this online open source tool to retrieve fonts & their css definition: +// https://gwfh.mranftl.com/fonts +/* noto-sans-jp-regular - latin */ +@font-face { + font-display: swap; + font-family: "Noto Sans JP"; + font-style: normal; + font-weight: 400; + src: url("../fonts/noto-sans-jp-v42-latin-regular.woff2") format("woff2"), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url("../fonts/noto-sans-jp-v42-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* noto-sans-jp-500 - latin */ +@font-face { + font-display: swap; + font-family: "Noto Sans JP"; + font-style: normal; + font-weight: 500; + src: url("../fonts/noto-sans-jp-v42-latin-500.woff2") format("woff2"), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url("../fonts/noto-sans-jp-v42-latin-500.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* noto-sans-jp-700 - latin */ +@font-face { + font-display: swap; + font-family: "Noto Sans JP"; + font-style: normal; + font-weight: 700; + src: url("../fonts/noto-sans-jp-v42-latin-700.woff2") format("woff2"), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url("../fonts/noto-sans-jp-v42-latin-700.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* lora-regular - latin */ +@font-face { + font-display: swap; + font-family: "Lora"; + font-style: normal; + font-weight: 400; + src: url("../fonts/lora-v26-latin-regular.woff2") format("woff2"), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url("../fonts/lora-v26-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* lora-italic - latin */ +@font-face { + font-display: swap; + font-family: "Lora"; + font-style: italic; + font-weight: 400; + src: url("../fonts/lora-v26-latin-italic.woff2") format("woff2"), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url("../fonts/lora-v26-latin-italic.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} + +/* gochi-hand-regular - latin */ +@font-face { + font-display: swap; + font-family: "Gochi Hand"; + font-style: normal; + font-weight: 400; + src: url("../fonts/gochi-hand-v19-latin-regular.woff2") format("woff2"), + /* Chrome 36+, Opera 23+, Firefox 39+ */ + url("../fonts/gochi-hand-v19-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ +} diff --git a/src/styles/scss/tools/variables.layout.scss b/src/styles/scss/tools/variables.layout.scss new file mode 100644 index 000000000..75a0cf854 --- /dev/null +++ b/src/styles/scss/tools/variables.layout.scss @@ -0,0 +1,11 @@ +$layout__max-width: 1024px; +$layout__max-width--small: 768px; +$layout__max-width--large: 1440px; + +$layout__max-width--text: 780px; +$layout__max-width--single-media: 896px; +$layout__max-width--multiple-medias: 1240px; + +// Some elements should not go out to the edge of the screen on small screens. +// This is the padding that is always shown on the left and right. +$layout__page-padding: $s-xl; diff --git a/src/styles/scss/tools/variables.spacings.scss b/src/styles/scss/tools/variables.spacings.scss new file mode 100644 index 000000000..6cac1090a --- /dev/null +++ b/src/styles/scss/tools/variables.spacings.scss @@ -0,0 +1,25 @@ +$s-xs: 4px; +$s-sm: 8px; +$s-md: 16px; +$s-lg: 24px; +$s-xl: 32px; +$s-2xl: 44px; +$s-3xl: 60px; +$s-4xl: 80px; +$s-5xl: 100px; +$s-6xl: 112px; +$s-7xl: 215px; + +$spacings: ( + xs: $s-xs, + sm: $s-sm, + md: $s-md, + lg: $s-lg, + xl: $s-xl, + 2xl: $s-2xl, + 3xl: $s-3xl, + 4xl: $s-4xl, + 5xl: $s-5xl, + 6xl: $s-6xl, + 7xl: $s-7xl, +); diff --git a/src/styles/scss/tools/variables.typography.scss b/src/styles/scss/tools/variables.typography.scss new file mode 100644 index 000000000..2228424d2 --- /dev/null +++ b/src/styles/scss/tools/variables.typography.scss @@ -0,0 +1,294 @@ +// "Title / Header 1" +$typo__h1: ( + mobile: ( + font-family: $font__title, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 32px, + line-height: 40px, + ), + small: ( + line-height: 120%, + ), + medium: ( + font-size: 52px, + ), + x-large: ( + font-size: 58px, + ), +); + +// "Header 2" +$typo__h2: ( + mobile: ( + font-family: $font__title, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 28px, + line-height: 32px, + ), + small: ( + line-height: 120%, + ), + medium: ( + font-size: 42px, + ), + x-large: ( + font-size: 44px, + ), +); + +// "Header 3" +$typo__h3: ( + mobile: ( + font-family: $font__title, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 24px, + line-height: 32px, + ), + small: ( + line-height: 120%, + ), + medium: ( + font-size: 32px, + ), + x-large: ( + font-size: 34px, + ), +); + +// "Header 4" +$typo__h4: ( + mobile: ( + font-family: $font__title, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 18px, + line-height: 24px, + ), + small: ( + line-height: 120%, + ), + medium: ( + font-size: 24px, + ), + x-large: ( + font-size: 26px, + ), +); + +// "Header 5" +$typo__h5: ( + mobile: ( + font-family: $font__title, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 20px, + line-height: 24px, + ), +); + +// "Subtitle" +$typo__subtitle: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 18px, + line-height: 32px, + ), + small: ( + line-height: 160%, + ), + medium: ( + font-size: 24px, + ), + x-large: ( + font-size: 26px, + ), +); + +// "Accent" +$typo__accent: ( + mobile: ( + font-family: $font__accent, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 24px, + line-height: 120%, + ), + x-large: ( + font-size: 26px, + ), +); + +// "Body Copy - L" +$typo__body-large: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 16px, + line-height: 42px, + ), + small: ( + line-height: 160%, + ), + medium: ( + font-size: 18px, + ), + x-large: ( + font-size: 20px, + ), +); + +// "Body Copy - M" +$typo__body-placeholder: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 14px, + line-height: 32px, + color: $color__text-secondary-gray, + ), + small: ( + line-height: 160%, + ), + medium: ( + font-size: 16px, + ), + x-large: ( + font-size: 18px, + ), +); + +// "Body Copy - M - medium" +$typo__body-medium: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--semi-bold, + font-size: 14px, + line-height: 160%, + ), + medium: ( + font-size: 16px, + ), + x-large: ( + font-size: 18px, + ), +); + +// "Body Copy - S" +$typo__body-small: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 14px, + line-height: 16px, + ), +); + +// "Button text" +$typo__button: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--semi-bold, + font-size: 14px, + line-height: 24px, + letter-spacing: 0.02em, + text-transform: uppercase, + ), + small: ( + line-height: 120%, + ), + x-large: ( + font-size: 16px, + line-height: 19px, + ), +); + +// "Links" +$typo__links: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 14px, + line-height: 24px, + ), + small: ( + line-height: 150%, + ), + x-large: ( + font-size: 16px, + ), +); + +// "Tags" +$typo__tags: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--semi-bold, + font-size: 12px, + line-height: 120%, + letter-spacing: 0.02em, + text-transform: uppercase, + ), + small: ( + line-height: 120%, + ), + x-large: ( + font-size: 14px, + ), +); + +// "Small Text - Caption" +$typo__small-caption: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 10px, + line-height: 16px, + ), + small: ( + line-height: 160%, + ), + medium: ( + font-size: 12px, + line-height: 120%, + ), +); + +// "Label" +$typo__label: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 10px, + line-height: 18px, + letter-spacing: 0.02em, + ), +); + +$typo__rich-text-body: ( + mobile: ( + font-family: $font__body, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 16px, + line-height: 24px, + color: $color__text-secondary-gray, + ), + medium: ( + font-size: 18px, + line-height: 32px, + ), +); diff --git a/src/stories/Library/layout/z-index.scss b/src/styles/scss/tools/variables.z-indexes.scss similarity index 100% rename from src/stories/Library/layout/z-index.scss rename to src/styles/scss/tools/variables.z-indexes.scss diff --git a/yarn.lock b/yarn.lock index fb56a6943..3c0aa4a04 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1360,10 +1360,10 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" -"@eslint/js@8.55.0": - version "8.55.0" - resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.55.0.tgz#b721d52060f369aa259cf97392403cb9ce892ec6" - integrity sha512-qQfo2mxH5yVom1kacMtZZJFVdW+E70mqHMJvVg6WTLo+VBuQJ4TojZlfWBjK0ve5BdEeNAVxOsl/nvNMpJOaJA== +"@eslint/js@8.56.0": + version "8.56.0" + resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b" + integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A== "@figspec/components@^1.0.0": version "1.0.1" @@ -7006,10 +7006,10 @@ eslint-plugin-flowtype@^5.2.0: lodash "^4.17.15" string-natural-compare "^3.0.1" -eslint-plugin-import@^2.22.1, eslint-plugin-import@^2.29.0: - version "2.29.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz#8133232e4329ee344f2f612885ac3073b0b7e155" - integrity sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg== +eslint-plugin-import@^2.22.1, eslint-plugin-import@^2.29.1: + version "2.29.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643" + integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw== dependencies: array-includes "^3.1.7" array.prototype.findlastindex "^1.2.3" @@ -7027,7 +7027,7 @@ eslint-plugin-import@^2.22.1, eslint-plugin-import@^2.29.0: object.groupby "^1.0.1" object.values "^1.1.7" semver "^6.3.1" - tsconfig-paths "^3.14.2" + tsconfig-paths "^3.15.0" eslint-plugin-jest@^24.1.0: version "24.7.0" @@ -7221,15 +7221,15 @@ eslint@^7.11.0: text-table "^0.2.0" v8-compile-cache "^2.0.3" -eslint@^8.55.0: - version "8.55.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.55.0.tgz#078cb7b847d66f2c254ea1794fa395bf8e7e03f8" - integrity sha512-iyUUAM0PCKj5QpwGfmCAG9XXbZCWsqP/eWAWrG/W0umvjuLRBECwSFdt+rCntju0xEH7teIABPwXpahftIaTdA== +eslint@^8.56.0: + version "8.56.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.56.0.tgz#4957ce8da409dc0809f99ab07a1b94832ab74b15" + integrity sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ== dependencies: "@eslint-community/eslint-utils" "^4.2.0" "@eslint-community/regexpp" "^4.6.1" "@eslint/eslintrc" "^2.1.4" - "@eslint/js" "8.55.0" + "@eslint/js" "8.56.0" "@humanwhocodes/config-array" "^0.11.13" "@humanwhocodes/module-importer" "^1.0.1" "@nodelib/fs.walk" "^1.2.8" @@ -15338,10 +15338,10 @@ ts-pnp@1.2.0, ts-pnp@^1.1.6: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== -tsconfig-paths@^3.14.2: - version "3.14.2" - resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088" - integrity sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g== +tsconfig-paths@^3.15.0: + version "3.15.0" + resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4" + integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg== dependencies: "@types/json5" "^0.0.29" json5 "^1.0.2"