diff --git a/README.md b/README.md index 42c692d68..e4fe5166a 100644 --- a/README.md +++ b/README.md @@ -1,352 +1,17 @@ ![https://detdigitalefolkebibliotek.dk/sites/default/files/ddf_logo_rgb_blue_web.png](https://detdigitalefolkebibliotek.dk/sites/default/files/ddf_logo_rgb_blue_web.png) - - - - -- [DPL Design System](#dpl-design-system) - - [Requirements](#requirements) - - [Manual requirements](#manual-requirements) - - [Installation](#installation) - - [Installation outside docker](#installation-outside-docker) - - [Development](#development) - - [Development without docker](#development-without-docker) - - [Usage](#usage) - - [NPM package](#npm-package) - - [Deployment and releases](#deployment-and-releases) - - [Tagged releases](#tagged-releases) - - [Usage: npm package](#usage-npm-package) - - [Usage: Release file](#usage-release-file) - - [Branch releases](#branch-releases) - - [Usage: npm package](#usage-npm-package-1) - - [Usage: Release file](#usage-release-file-1) - - [Storybook](#storybook) - - [Chromatic](#chromatic) - - [What is Storybook](#what-is-storybook) - - [How to use](#how-to-use) - - [Addons](#addons) - - [Important to notice](#important-to-notice) - - [Internal classes](#internal-classes) - - - - # DPL Design System DPL Design System is a library of UI components that should be used as a common base system for "Danmarks Biblioteker" / "Det Digitale Folkebibliotek". The -design is implemented -with [Storybook](https://storybook.js.org/docs/react/get-started/introduction) -/ [React](https://reactjs.org/) and is output with HTML markup and css-classes +design is implemented with +[Storybook](https://storybook.js.org/docs/react/get-started/introduction) / +[React](https://reactjs.org/) and is output with HTML markup and css-classes through an addon in Storybook. -The codebase follows the naming that designers have used in Figma closely -to ensure consistency. - -## Requirements - -This project comes with [go-task](https://github.com/go-task/task) and docker -compose, hence the requirements are limited to having docker install and tasks. - -### Manual requirements - -This project can be used outside docker with the following requirements: - -- `node 16` -- `yarn` - -Check in the terminal which versions you have installed with `node -v`. - -## Installation - -Use the tasks defined in `Taskfile` to run the project: - -```shell -task dev:install -``` - -### Installation outside docker - -Use the node package manager to install project dependencies: - -```shell -yarn install -``` - -## Development - -To start the docker compose setup in development simple use the `start` task: - -```shell -task dev:start -``` - -To see the output from the compile process and start of storybook: - -```shell -task dev:logs -``` - -Use `task` and tabulator key in the terminal to see the other predefined tasks: - -```shell -task dev:[TAB] -``` - -### Development without docker - -To start developing run: - -```shell -yarn dev -``` - -Components and CSS will be automatically recompiled when making changes in the -source code. - -## Usage - -The project is available in two ways and should be consumed accordingly: - -1. As package in the local npm registry for this repository -2. As a `dist.zip` file attached to a release for this repository - -Both releases contain the built assets of the project: JavaScript files, CSS -styles and icons. - -You can find the HTML output for a given story under the HTML tab inside -storybook. - -### NPM package - -[The GitHub NPM package registry requires authentication if you are to access -packages there](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token). - -Consequently, if you want to use the design system as an NPM package or if you -use a project that depends on the design system as an NPM package you must -authenticate: - -1. [Create a GitHub token with the required scopes: `repo` and `read:packages`](https://github.com/settings/tokens/new?description=npm&scopes=repo,read:packages) -2. Run `npm login --registry=https://npm.pkg.github.com` -3. Enter the following information: - -```shell -> Username: [Your GitHub username] -> Password: [Your GitHub token] -> Email: [An email address used with your GitHub account] -``` - -Note that you will need to reauthenticate when your personal access token -expires. - -## Deployment and releases - -The project is [automatically built and deployed](.github/workflows/deployment.yml) -on pushes to every branch and every tag and the result is available as releases -which support [both types of usage](#usage). This applies for the original -repository on GitHub and all GitHub forks. - -You can follow the status of deployments in the [Actions list for the repository -on GitHub](https://github.com/danskernesdigitalebibliotek/dpl-design-system/actions/workflows/deployment.yml). -The action logs also contain additional details regarding the contents and -publication of each release. If using a fork then deployment actions can be -seen on the corresponding list. - -In general consuming projects should prefer tagged releases as they are stable -proper releases. - -During development where the design system is being updated in parallel with -the implementation of a consuming project it may be advantageous to use a -release tagging a branch. - -### Tagged releases - -Run the following to publish a tag and create a release: - -```shell -git tag -a v*.*.* && git push origin v*.*.* -``` - -#### Usage: npm package - -In the consuming project update usage to the new release: - -```shell -npm install @danskernesdigitalebibliotek/dpl-design-system@*.*.* -``` - -#### Usage: Release file - -Find the release for the tag on [the releases page on GitHub](https://github.com/danskernesdigitalebibliotek/dpl-design-system/releases) -and download the `dist.zip` file from there and use it as needed in the -consuming project. - -### Branch releases - -The project automatically creates a release for each branch. - -Example: Pushing a commit to a new branch `feature/reservation-modal` will -create the following parts: - -1. A git tag for the commit `release-feature/reservation-modal`. A tag is needed - to create a GitHub release. -2. A GitHub release for the called *feature/reservation-modal*. The build is - attached here. -3. A package in the local npm repository tagged `feature-reservation-modal`. - Special characters like `/` are not supported by npm tags and are converted - to `-`. - -Updating the branch will update all parts accordingly. - -#### Usage: npm package - -In the consuming project update usage to the new release: - -```shell -npm install @danskernesdigitalebibliotek/dpl-design-system@feature-reservation-modal -``` - -If your release belongs to a fork you can use [aliasing](https://docs.npmjs.com/cli/v8/commands/npm-install) -to point to the release of the package in the npm repository for the fork: - -```shell -npm config set @my-fork:registry=https://npm.pkg.github.com -npm install @danskernesdigitalebibliotek/dpl-design-system@npm:@my-fork/dpl-design-system@feature-reservation-modal -``` - -This will update your `package.json` and lock files accordingly. Note that -branch releases use temporary versions in the format `0.0.0-[GIT-SHA]` and you -may in practice see these referenced in both files. - -If you push new code to the branch you have to update the version used in the -consuming project: - -```shell -npm update @danskernesdigitalebibliotek/dpl-design-system -``` - -[Aliasing](https://classic.yarnpkg.com/lang/en/docs/cli/add/#toc-yarn-add-alias), -[repository configuration](https://classic.yarnpkg.com/en/docs/cli/config) and -[updating installed packages](https://classic.yarnpkg.com/en/docs/cli/upgrade) -are also supported by Yarn. - -#### Usage: Release file - -Find the release for the branch on [the releases page on GitHub](https://github.com/danskernesdigitalebibliotek/dpl-design-system/releases) -and download the `dist.zip` file from there and use it as needed in the -consuming project. - -If your branch belongs to a fork then you can find the release on the releases -page for the fork. - -Repeat the process if you push new code to the branch. - -## Storybook - -Spin up storybook by running this command in the terminal: - -```shell -yarn storybook -``` - -When storybook is ready it automatically opens up in a browser with the -interface ready to use. - -## Chromatic - -We are using Chromatic for visual test. You can access the dashboard -under the `danskernesdigitalebibliotek` (organisation) `dpl-design-system` -(project). - - - -You can deploy a version locally to Chromatic by running: - -```shell -yarn chromatic -``` - -Make sure to set the `CHROMATIC_PROJECT_TOKEN` environment variable is available -in your shell context. You can access the token from: - - - -### What is Storybook - -[Storybook](https://storybook.js.org/docs/react/get-started/introduction) is an -open source tool for building UI components and pages in isolation from your -app's business logic, data, and context. Storybook helps you document components -for reuse and automatically visually test your components to prevent bugs. It -promotes the [component-driven](https://componentdriven.org) process and agile -development. - -It is possible to extend Storybook with an ecosystem of addons that help you do -things like fine-tune responsive layouts or verify accessibility. - -#### How to use - -The Storybook interface is simple and intuitive to use. Browse the project's -stories now by navigating to them in the sidebar. - -The stories are placed in a flat structure, where developers should not spend -time thinking of structure, since we want to keep all parts of the system under -a heading called Library. This Library is then dividid in folders where common -parts are kept together. - -To expose to the user how we think these parts stitch together for example -for the new website, we have a heading called Blocks, to resemble what cms -blocks a user can expect to find when building pages in the choosen CMS. - -This could replicate in to mobile applications, newsletters etc. all pulling -parts from the Library. - -Each story has a corresponding `.stories` file. View their code in the -`src/stories` directory to learn how they work. -The `stories` file is used to add the component to the Storybook interface via -the title. Start the title with "Library" or "Blocks" and use / to -divide into folders fx. `Library / Buttons / Button` - -#### Addons - -Storybook ships with some essential -pre-installed [addons](https://storybook.js.org/addons/tag/essentials/) -to power the core Storybook experience. - -- [Controls](https://storybook.js.org/addons/@storybook/addon-controls/) -- [Actions](https://storybook.js.org/addons/@storybook/addon-actions/) -- [Docs](https://storybook.js.org/addons/@storybook/addon-docs/) -- [Viewport](https://storybook.js.org/addons/@storybook/addon-viewport/) -- [Backgrounds](https://storybook.js.org/addons/@storybook/addon-backgrounds/) -- [Toolbars](https://storybook.js.org/addons/@storybook/addon-toolbars/) -- [Measure](https://storybook.js.org/addons/@storybook/addon-measure/) -- [Outline](https://storybook.js.org/addons/@storybook/addon-outline/) - -There are many other helpful addons to customise the usage and experience. -Additional addons used for this project: - -- [HTML / storybook-addon-html](https://storybook.js.org/addons/@whitespace/storybook-addon-html/): - This addon is used to display compiled HTML markup for each story and make it - easier for developers to grab the code. Because we are developing with React, - it is necessary to be able to show the HTML markup with the css-classes to - make it easier for other developers that will implement it in the future. - If a story has controls the HTML markup changes according to the controls that - are set. - -- [Designs / storybook-addon-designs](https://storybook.js.org/addons/storybook-addon-designs/): - This addon is used to embed Figma in the addon panel for a better - design-development workflow. - -- [A11Y](https://storybook.js.org/addons/@storybook/addon-a11y/): - This addon is used to check the accessibility of the components. - -All the addons can be found in `storybook/main.js` directory. - -#### Important to notice - -##### Internal classes +The codebase follows the naming that designers have used in Figma closely to +ensure consistency. -To display some components (fx Colors, Spacing) in a more presentable way, we -are using some "internal" css-classes which can be found in the -`styles/internal.scss` file. All css-classes with "internal" in the front should -therefore be ignored in the HTML markup. +Read more about the DPL Design System by visiting our +[Documentation site](https://danskernesdigitalebibliotek.github.io/dpl-docs) diff --git a/base.scss b/base.scss index 25f2e37a2..15a1c54f4 100644 --- a/base.scss +++ b/base.scss @@ -32,14 +32,13 @@ @import "./src/stories/Library/Icons/icon-favourite/icon-favourite"; @import "./src/stories/Library/Buttons/button-favourite/button-favourite"; @import "./src/stories/Library/Buttons/icon-button/icon-button"; +@import "./src/stories/Library/Buttons/button/button-expand/button-expand"; @import "./src/stories/Library/warning-status/warning-status"; @import "./src/stories/Library/availability-label/availability-label"; @import "./src/stories/Library/avatar/avatar"; -@import "./src/stories/Library/autosuggest-text/autosuggest-text"; -@import "./src/stories/Library/autosuggest-material/autosuggest-material"; @import "./src/stories/Library/material-card/material-card"; -@import "./src/stories/Library/search-result-item/search-result-item"; -@import "./src/stories/Library/search-result-item/search-result-item-skeleton"; +@import "./src/stories/Library/card-list-item/card-list-item"; +@import "./src/stories/Library/card-list-item/card-list-item-skeleton"; @import "./src/stories/Library/Lists/list-reservation/list-reservation"; @import "./src/stories/Library/Lists/list-dashboard/list-dashboard"; @import "./src/stories/Library/Lists/list-description/list-description"; @@ -69,16 +68,16 @@ @import "./src/stories/Library/material-description/material-description"; @import "./src/stories/Library/disclosure/disclosure"; @import "./src/stories/Library/horizontal-term-line/horizontal-term-line"; -@import "./src/stories/Library/search-result-page/search-result-info"; -@import "./src/stories/Library/search-result-page/search-result-page"; -@import "./src/stories/Library/search-result-page/search-result-page-skeleton"; +@import "./src/stories/Library/card-list-page/search-result-info"; +@import "./src/stories/Library/card-list-page/card-list-page"; +@import "./src/stories/Library/card-list-page/card-list-page-skeleton"; @import "./src/stories/Library/loan-list-page/loan-list-page"; @import "./src/stories/Library/patron-page/patron-page"; @import "./src/stories/Library/reservation-list-page/reservation-list-page"; -@import "./src/stories/Library/search-result-page/result-pager"; -@import "./src/stories/Library/search-result-page/search-result-title"; -@import "./src/stories/Library/search-result-page/search-result-zero"; -@import "./src/stories/Library/search-result-page/facet-line"; +@import "./src/stories/Library/card-list-page/result-pager"; +@import "./src/stories/Library/card-list-page/search-result-title"; +@import "./src/stories/Library/card-list-page/search-result-zero"; +@import "./src/stories/Library/card-list-page/facet-line"; @import "./src/stories/Library/review/review"; @import "./src/stories/Library/shadows/shadows"; @import "./src/stories/Library/boxed-text/boxed-text"; @@ -88,11 +87,15 @@ @import "./src/stories/Library/Modals/modal-infomedia/infomedia"; @import "./src/stories/Library/pincode-container/pincode-container"; @import "./src/stories/Library/promo-bar/promo-bar"; -@import "./src/stories/Library/recommender/recommender"; +@import "./src/stories/Library/recommenders/recommenders"; @import "./src/stories/Library/Lists/fee-list/fee-list"; @import "./src/stories/Library/instant-loan/instant-loan"; @import "./src/stories/Library/scroll-lock-background/scroll-lock-background"; -@import "./src/stories/Library/favorites-list-material-component/favorites-list-material-component"; + +// Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest +@import "./src/stories/Blocks/autosuggest/autosuggest"; +@import "./src/stories/Library/autosuggest-text/autosuggest-text"; +@import "./src/stories/Library/autosuggest-material/autosuggest-material"; // Blocks @import "./src/stories/Blocks/footer/footer"; diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 000000000..0b8b44009 --- /dev/null +++ b/docs/README.md @@ -0,0 +1,318 @@ +# DPL Design System + +DPL Design System is a library of UI components that should be used as a common +base system for "Danmarks Biblioteker" / "Det Digitale Folkebibliotek". The +design is implemented +with [Storybook](https://storybook.js.org/docs/react/get-started/introduction) +/ [React](https://reactjs.org/) and is output with HTML markup and css-classes +through an addon in Storybook. + +The codebase follows the naming that designers have used in Figma closely +to ensure consistency. + +## Requirements + +This project comes with [go-task](https://github.com/go-task/task) and docker +compose, hence the requirements are limited to having docker install and tasks. + +### Manual requirements + +This project can be used outside docker with the following requirements: + +- `node 16` +- `yarn` + +Check in the terminal which versions you have installed with `node -v`. + +## Installation + +Use the tasks defined in `Taskfile` to run the project: + +```shell +task dev:install +``` + +### Installation outside docker + +Use the node package manager to install project dependencies: + +```shell +yarn install +``` + +## Development + +To start the docker compose setup in development simple use the `start` task: + +```shell +task dev:start +``` + +To see the output from the compile process and start of storybook: + +```shell +task dev:logs +``` + +Use `task` and tabulator key in the terminal to see the other predefined tasks: + +```shell +task dev:[TAB] +``` + +### Development without docker + +To start developing run: + +```shell +yarn dev +``` + +Components and CSS will be automatically recompiled when making changes in the +source code. + +## Usage + +The project is available in two ways and should be consumed accordingly: + +1. As package in the local npm registry for this repository +2. As a `dist.zip` file attached to a release for this repository + +Both releases contain the built assets of the project: JavaScript files, CSS +styles and icons. + +You can find the HTML output for a given story under the HTML tab inside +storybook. + +### NPM package + +[The GitHub NPM package registry requires authentication if you are to access +packages there](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#authenticating-with-a-personal-access-token). + +Consequently, if you want to use the design system as an NPM package or if you +use a project that depends on the design system as an NPM package you must +authenticate: + +1. [Create a GitHub token with the required scopes: `repo` and `read:packages`](https://github.com/settings/tokens/new?description=npm&scopes=repo,read:packages) +2. Run `npm login --registry=https://npm.pkg.github.com` +3. Enter the following information: + +```shell +> Username: [Your GitHub username] +> Password: [Your GitHub token] +> Email: [An email address used with your GitHub account] +``` + +Note that you will need to reauthenticate when your personal access token +expires. + +## Deployment and releases + +The project is [automatically built and deployed](.github/workflows/deployment.yml) +on pushes to every branch and every tag and the result is available as releases +which support [both types of usage](#usage). This applies for the original +repository on GitHub and all GitHub forks. + +You can follow the status of deployments in the [Actions list for the repository +on GitHub](https://github.com/danskernesdigitalebibliotek/dpl-design-system/actions/workflows/deployment.yml). +The action logs also contain additional details regarding the contents and +publication of each release. If using a fork then deployment actions can be +seen on the corresponding list. + +In general consuming projects should prefer tagged releases as they are stable +proper releases. + +During development where the design system is being updated in parallel with +the implementation of a consuming project it may be advantageous to use a +release tagging a branch. + +### Tagged releases + +Run the following to publish a tag and create a release: + +```shell +git tag -a v*.*.* && git push origin v*.*.* +``` + +#### Usage: npm package + +In the consuming project update usage to the new release: + +```shell +npm install @danskernesdigitalebibliotek/dpl-design-system@*.*.* +``` + +#### Usage: Release file + +Find the release for the tag on [the releases page on GitHub](https://github.com/danskernesdigitalebibliotek/dpl-design-system/releases) +and download the `dist.zip` file from there and use it as needed in the +consuming project. + +### Branch releases + +The project automatically creates a release for each branch. + +Example: Pushing a commit to a new branch `feature/reservation-modal` will +create the following parts: + +1. A git tag for the commit `release-feature/reservation-modal`. A tag is needed + to create a GitHub release. +2. A GitHub release for the called *feature/reservation-modal*. The build is + attached here. +3. A package in the local npm repository tagged `feature-reservation-modal`. + Special characters like `/` are not supported by npm tags and are converted + to `-`. + +Updating the branch will update all parts accordingly. + +#### Usage: npm package + +In the consuming project update usage to the new release: + +```shell +npm install @danskernesdigitalebibliotek/dpl-design-system@feature-reservation-modal +``` + +If your release belongs to a fork you can use [aliasing](https://docs.npmjs.com/cli/v8/commands/npm-install) +to point to the release of the package in the npm repository for the fork: + +```shell +npm config set @my-fork:registry=https://npm.pkg.github.com +npm install @danskernesdigitalebibliotek/dpl-design-system@npm:@my-fork/dpl-design-system@feature-reservation-modal +``` + +This will update your `package.json` and lock files accordingly. Note that +branch releases use temporary versions in the format `0.0.0-[GIT-SHA]` and you +may in practice see these referenced in both files. + +If you push new code to the branch you have to update the version used in the +consuming project: + +```shell +npm update @danskernesdigitalebibliotek/dpl-design-system +``` + +[Aliasing](https://classic.yarnpkg.com/lang/en/docs/cli/add/#toc-yarn-add-alias), +[repository configuration](https://classic.yarnpkg.com/en/docs/cli/config) and +[updating installed packages](https://classic.yarnpkg.com/en/docs/cli/upgrade) +are also supported by Yarn. + +#### Usage: Release file + +Find the release for the branch on [the releases page on GitHub](https://github.com/danskernesdigitalebibliotek/dpl-design-system/releases) +and download the `dist.zip` file from there and use it as needed in the +consuming project. + +If your branch belongs to a fork then you can find the release on the releases +page for the fork. + +Repeat the process if you push new code to the branch. + +## Storybook + +Spin up storybook by running this command in the terminal: + +```shell +yarn storybook +``` + +When storybook is ready it automatically opens up in a browser with the +interface ready to use. + +## Chromatic + +We are using Chromatic for visual test. You can access the dashboard +under the `danskernesdigitalebibliotek` (organisation) `dpl-design-system` +(project). + + + +You can deploy a version locally to Chromatic by running: + +```shell +yarn chromatic +``` + +Make sure to set the `CHROMATIC_PROJECT_TOKEN` environment variable is available +in your shell context. You can access the token from: + + + +### What is Storybook + +[Storybook](https://storybook.js.org/docs/react/get-started/introduction) is an +open source tool for building UI components and pages in isolation from your +app's business logic, data, and context. Storybook helps you document components +for reuse and automatically visually test your components to prevent bugs. It +promotes the [component-driven](https://componentdriven.org) process and agile +development. + +It is possible to extend Storybook with an ecosystem of addons that help you do +things like fine-tune responsive layouts or verify accessibility. + +#### How to use + +The Storybook interface is simple and intuitive to use. Browse the project's +stories now by navigating to them in the sidebar. + +The stories are placed in a flat structure, where developers should not spend +time thinking of structure, since we want to keep all parts of the system under +a heading called Library. This Library is then dividid in folders where common +parts are kept together. + +To expose to the user how we think these parts stitch together for example +for the new website, we have a heading called Blocks, to resemble what cms +blocks a user can expect to find when building pages in the choosen CMS. + +This could replicate in to mobile applications, newsletters etc. all pulling +parts from the Library. + +Each story has a corresponding `.stories` file. View their code in the +`src/stories` directory to learn how they work. +The `stories` file is used to add the component to the Storybook interface via +the title. Start the title with "Library" or "Blocks" and use / to +divide into folders fx. `Library / Buttons / Button` + +#### Addons + +Storybook ships with some essential +pre-installed [addons](https://storybook.js.org/addons/tag/essentials/) +to power the core Storybook experience. + +- [Controls](https://storybook.js.org/addons/@storybook/addon-controls/) +- [Actions](https://storybook.js.org/addons/@storybook/addon-actions/) +- [Docs](https://storybook.js.org/addons/@storybook/addon-docs/) +- [Viewport](https://storybook.js.org/addons/@storybook/addon-viewport/) +- [Backgrounds](https://storybook.js.org/addons/@storybook/addon-backgrounds/) +- [Toolbars](https://storybook.js.org/addons/@storybook/addon-toolbars/) +- [Measure](https://storybook.js.org/addons/@storybook/addon-measure/) +- [Outline](https://storybook.js.org/addons/@storybook/addon-outline/) + +There are many other helpful addons to customise the usage and experience. +Additional addons used for this project: + +- [HTML / storybook-addon-html](https://storybook.js.org/addons/@whitespace/storybook-addon-html/): + This addon is used to display compiled HTML markup for each story and make it + easier for developers to grab the code. Because we are developing with React, + it is necessary to be able to show the HTML markup with the css-classes to + make it easier for other developers that will implement it in the future. + If a story has controls the HTML markup changes according to the controls that + are set. + +- [Designs / storybook-addon-designs](https://storybook.js.org/addons/storybook-addon-designs/): + This addon is used to embed Figma in the addon panel for a better + design-development workflow. + +- [A11Y](https://storybook.js.org/addons/@storybook/addon-a11y/): + This addon is used to check the accessibility of the components. + +All the addons can be found in `storybook/main.js` directory. + +#### Important to notice + +##### Internal classes + +To display some components (fx Colors, Spacing) in a more presentable way, we +are using some "internal" css-classes which can be found in the +`styles/internal.scss` file. All css-classes with "internal" in the front should +therefore be ignored in the HTML markup. diff --git a/architecture/adr-001-skeleton-screens.md b/docs/architecture/adr-001-skeleton-screens.md similarity index 93% rename from architecture/adr-001-skeleton-screens.md rename to docs/architecture/adr-001-skeleton-screens.md index a83eacef3..f64695bf4 100644 --- a/architecture/adr-001-skeleton-screens.md +++ b/docs/architecture/adr-001-skeleton-screens.md @@ -40,4 +40,4 @@ client side or server side. Because we want to use existing styling setup in conjunction with the Skeleton Screen Classes we sometimes need to ignore the existing BEM rules that we normally comply to. -See eg. the [search result styling](../src/stories/Library/search-result-item/search-result-item-skeleton.scss). +See eg. the [search result styling](../src/stories/Library/card-list-item/card-list-item-skeleton.scss). diff --git a/package.json b/package.json index d10d47e77..e3d7d1925 100644 --- a/package.json +++ b/package.json @@ -23,8 +23,7 @@ "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", - "build:doc": "doctoc README.md" + "lint:markdown:fix": "markdownlint-cli2-fix" }, "browserslist": { "production": [ @@ -61,7 +60,6 @@ "chokidar-cli": "^3.0.0", "clsx": "^1.1.1", "concurrently": "^7.2.2", - "doctoc": "^2.2.0", "eslint": "^8.19.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.0.0", diff --git a/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx new file mode 100644 index 000000000..524b00e52 --- /dev/null +++ b/src/stories/Blocks/autosuggest/Autosuggest.stories.tsx @@ -0,0 +1,84 @@ +import { ComponentStory } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import clsx from "clsx"; +import { Autosuggest, AutosuggestProps } from "./Autosuggest"; +import AutosuggestMaterialStories from "../../Library/autosuggest-material/AutosuggestMaterial.stories"; +import AutosuggestTextStories from "../../Library/autosuggest-text/AutosuggestText.stories"; +import { autosuggestMaterialSuggestions } from "../../Library/autosuggest-material/helper"; + +export default { + title: "Blocks / Autosuggest", + component: Autosuggest, + decorators: [withDesign], + argTypes: { + ...AutosuggestMaterialStories.argTypes, + ...AutosuggestTextStories.argTypes, + }, + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/ETOZIfmgGS1HUfio57SOh7/S%C3%B8gning?node-id=4709%3A24976", + }, + }, +}; + +const Template: ComponentStory = ( + args: AutosuggestProps +) => ( + // Apart from , everything else is here just for the story + // context. The autosuggest styling is directly dependent on the header component, + // Please keep up to date with Header.tsx +
+
+

Context

+
+
+ +
+
+ + search icon + +
+
+
+
+

Context

+
+
+); + +export const Default = Template.bind({}); + +const getStoryArguments = (suggestions: number) => { + return { + ...AutosuggestTextStories.argTypes, + materialSuggestions: { + ...{ ...AutosuggestMaterialStories.argTypes?.materialSuggestions }, + defaultValue: autosuggestMaterialSuggestions.slice(0, suggestions), + }, + classes: { + ...{ ...AutosuggestMaterialStories.argTypes?.classes }, + defaultValue: clsx({ + "autosuggest__material-item--two": suggestions === 2, + "autosuggest__material-item--one": suggestions === 1, + }), + }, + }; +}; + +export const TwoMaterials = Template.bind({}); +TwoMaterials.argTypes = getStoryArguments(2); + +export const OneMaterial = Template.bind({}); +OneMaterial.argTypes = getStoryArguments(1); diff --git a/src/stories/Blocks/autosuggest/Autosuggest.tsx b/src/stories/Blocks/autosuggest/Autosuggest.tsx new file mode 100644 index 000000000..b612aa599 --- /dev/null +++ b/src/stories/Blocks/autosuggest/Autosuggest.tsx @@ -0,0 +1,33 @@ +import { + AutosuggestMaterial, + AutosuggestMaterialProps, +} from "../../Library/autosuggest-material/AutosuggestMaterial"; +import { + AutosuggestText, + AutosuggestTextProps, +} from "../../Library/autosuggest-text/AutosuggestText"; + +export type AutosuggestProps = AutosuggestTextProps & AutosuggestMaterialProps; + +export const Autosuggest: React.FC = ({ + textSuggestions, + categoryText, + materialSuggestions, + classes, +}) => { + return ( +
    + + + +
+ ); +}; + +export default Autosuggest; diff --git a/src/stories/Blocks/autosuggest/autosuggest.scss b/src/stories/Blocks/autosuggest/autosuggest.scss new file mode 100644 index 000000000..0b5a84cb4 --- /dev/null +++ b/src/stories/Blocks/autosuggest/autosuggest.scss @@ -0,0 +1,13 @@ +.autosuggest { + background-color: $c-global-primary; + outline: 1px solid $c-global-tertiary-1; + position: absolute; + left: 0; + right: 0; + top: calc(100% + 1px); + z-index: 1; + display: flex; + flex-wrap: wrap; + justify-content: center; + padding-top: $s-md; +} diff --git a/src/stories/Blocks/material-page/MaterialPageSkeleton.tsx b/src/stories/Blocks/material-page/MaterialPageSkeleton.tsx index 990968fa3..327626a0f 100644 --- a/src/stories/Blocks/material-page/MaterialPageSkeleton.tsx +++ b/src/stories/Blocks/material-page/MaterialPageSkeleton.tsx @@ -3,7 +3,7 @@ const MaterialPageSkeleton: React.FC = () => {
-
+
diff --git a/src/stories/Blocks/material-page/material-page-skeleton.scss b/src/stories/Blocks/material-page/material-page-skeleton.scss index b0608f3d4..a0fc73290 100644 --- a/src/stories/Blocks/material-page/material-page-skeleton.scss +++ b/src/stories/Blocks/material-page/material-page-skeleton.scss @@ -6,11 +6,6 @@ .material-page { &.ssc { .material-header { - &__cover { - .ssc-square { - width: 300px; - } - } &__content { height: 605px; // Favorite icon. diff --git a/src/stories/Library/Buttons/button/button-expand/ButtonExpand.tsx b/src/stories/Library/Buttons/button/button-expand/ButtonExpand.tsx new file mode 100644 index 000000000..c0f8a9b34 --- /dev/null +++ b/src/stories/Library/Buttons/button/button-expand/ButtonExpand.tsx @@ -0,0 +1,28 @@ +import clsx from "clsx"; +import { FC } from "react"; + +export type ButtonExpandProps = { + showMore: boolean; + setShowMore: (showMore: boolean) => void; +}; + +const ButtonExpand: FC = ({ showMore, setShowMore }) => { + return ( + + ); +}; + +export default ButtonExpand; diff --git a/src/stories/Library/Buttons/button/button-expand/button-expand.scss b/src/stories/Library/Buttons/button/button-expand/button-expand.scss new file mode 100644 index 000000000..1cbb49305 --- /dev/null +++ b/src/stories/Library/Buttons/button/button-expand/button-expand.scss @@ -0,0 +1,12 @@ +.button-expand { + cursor: pointer; + align-self: center; + + &__image { + transition: transform 0.3s ease-in-out; + + &.button-expand__image--expanded { + transform: scaleY(-1); + } + } +} diff --git a/src/stories/Library/Buttons/button/button-expand/button-expand.stories.tsx b/src/stories/Library/Buttons/button/button-expand/button-expand.stories.tsx new file mode 100644 index 000000000..a42d78c97 --- /dev/null +++ b/src/stories/Library/Buttons/button/button-expand/button-expand.stories.tsx @@ -0,0 +1,34 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import ButtonExpand, { ButtonExpandProps } from "./ButtonExpand"; + +export default { + title: "Library / Buttons / Button Expand", + component: ButtonExpand, + parameters: {}, + argTypes: { + showMore: { + control: { + type: "boolean", + }, + title: { + control: { + type: "text", + }, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = ( + args: ButtonExpandProps +) => ; + +export const Default = Template.bind({}); +Default.args = { + showMore: false, +}; + +export const Expand = Template.bind({}); +Expand.args = { + showMore: true, +}; diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx index 684854e83..1e7ecb002 100644 --- a/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx +++ b/src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx @@ -1,6 +1,5 @@ import { withDesign } from "storybook-addon-designs"; import { ComponentMeta, ComponentStory } from "@storybook/react"; - import { ListMaterials } from "./ListMaterials"; export default { @@ -30,14 +29,12 @@ const Template: ComponentStory = (args) => ( export const Item = Template.bind({}); Item.args = { + year: "2001", title: "Audrey Hepburn", - author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)", + author: "Af Isabel Sánchez Vegara, Amaia Arrazola", + statusMessage: "The item cannot be renewed further", isChecked: true, - canBeRenewed: true, - statusDelivery: { - label: "AFLEVERES 20.11.21", - status: "neutral", - }, + disabled: true, statusMaterialType: { label: "bog", status: "outline", diff --git a/src/stories/Library/Lists/list-materials/ListMaterials.tsx b/src/stories/Library/Lists/list-materials/ListMaterials.tsx index f305424df..359374345 100644 --- a/src/stories/Library/Lists/list-materials/ListMaterials.tsx +++ b/src/stories/Library/Lists/list-materials/ListMaterials.tsx @@ -1,23 +1,25 @@ -import { useState } from "react"; +import { useState, FC } from "react"; import { Checkbox } from "../../Forms/checkbox/Checkbox"; import { StatusLabel, StatusLabelProps } from "../../status-label/StatusLabel"; export type ListMaterialsProps = { title: string; author: string; + year: string; + statusMessage: string; statusMaterialType: StatusLabelProps; - statusDelivery: StatusLabelProps; - canBeRenewed: boolean; isChecked: boolean; + disabled: boolean; }; -export const ListMaterials: React.FC = ({ +export const ListMaterials: FC = ({ title, + year, author, - statusDelivery, statusMaterialType, - canBeRenewed, isChecked, + statusMessage, + disabled, }) => { const [isItChecked, setIsItChecked] = useState(isChecked); @@ -26,40 +28,86 @@ export const ListMaterials: React.FC = ({ }; return ( -
- {canBeRenewed && ( -
- +
    +
  • +
    +
    + +
    +
    +
    + +
    +

    {title}

    +

    + {author} ({year}) +

    +
    +
    + {statusMessage && ( + + {statusMessage} + + )} +
    +
    + Afleveres 27-04-2023 +
    + {statusMessage && ( + + {statusMessage} + + )} + +
    +
    - )} -
    -
    - - +
    • +
  • +
    +
    + +
    +
    +
    +
    Bog
    +
    +

    {title}

    +

    + {author} ({year}) +

    +
    +
    +
    +
    + Afleveres 27-04-2023 +
    + +
    +
    -

    {title}

    -

    {author}

    -
-
- {!canBeRenewed && ( - - Digitale materialer kan ikke fornys - - )} - -
-
+ + ); }; diff --git a/src/stories/Library/Lists/list-materials/list-materials.scss b/src/stories/Library/Lists/list-materials/list-materials.scss index c63960670..ea895b629 100644 --- a/src/stories/Library/Lists/list-materials/list-materials.scss +++ b/src/stories/Library/Lists/list-materials/list-materials.scss @@ -43,9 +43,20 @@ margin-top: 0; align-items: center; grid-gap: 16px; +} - .text-small-caption { - color: $c-text-secondary-gray; +.list-materials__status__note-desktop { + @extend %text-small-caption; + display: none; + @include breakpoint-s { + display: flex; + } +} +.list-materials__status__note-mobile { + @extend %text-small-caption; + display: flex; + @include breakpoint-s { + display: none; } } diff --git a/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx b/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx index abb834cad..27cef44d5 100644 --- a/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx +++ b/src/stories/Library/Modals/modal-loan/ModalLoan.stories.tsx @@ -1,6 +1,5 @@ import { withDesign } from "storybook-addon-designs"; import { ComponentMeta, ComponentStory } from "@storybook/react"; - import { ModalLoan } from "./ModalLoan"; export default { diff --git a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx index 1e81e59df..9b9ae3212 100644 --- a/src/stories/Library/Modals/modal-loan/ModalLoan.tsx +++ b/src/stories/Library/Modals/modal-loan/ModalLoan.tsx @@ -1,8 +1,7 @@ -import { useMemo, useState } from "react"; +import { useState } from "react"; import { Button } from "../../Buttons/button/Button"; import { Checkbox } from "../../Forms/checkbox/Checkbox"; import { Counter } from "../../counter/Counter"; -import { LinkFilters } from "../../link-filters/LinkFilters"; import { ListMaterials, ListMaterialsProps, @@ -19,56 +18,48 @@ const listExpired: LoanMaterials = [ { list: [ { + year: "2001", title: "Audrey Hepburn", - author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)", - isChecked: false, - canBeRenewed: true, - statusDelivery: { - label: "AFLEVERES 20.11.21", - status: "danger", - }, + author: "Af Isabel Sánchez Vegara, Amaia Arrazola", + statusMessage: "The item cannot be renewed further", + isChecked: true, + disabled: true, statusMaterialType: { label: "bog", status: "outline", }, }, { + year: "2001", title: "Audrey Hepburn", - author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)", - isChecked: false, - canBeRenewed: true, - statusDelivery: { - label: "AFLEVERES 20.11.21", - status: "danger", - }, + author: "Af Isabel Sánchez Vegara, Amaia Arrazola", + statusMessage: "The item cannot be renewed further", + isChecked: true, + disabled: false, statusMaterialType: { label: "bog", status: "outline", }, }, { + year: "2001", title: "Audrey Hepburn", - author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)", - isChecked: false, - canBeRenewed: true, - statusDelivery: { - label: "AFLEVERES 20.11.21", - status: "danger", - }, + author: "Af Isabel Sánchez Vegara, Amaia Arrazola", + statusMessage: "The item cannot be renewed further", + isChecked: true, + disabled: true, statusMaterialType: { label: "bog", status: "outline", }, }, { + year: "2001", title: "Audrey Hepburn", - author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)", - isChecked: false, - canBeRenewed: false, - statusDelivery: { - label: "AFLEVERES 20.11.21", - status: "danger", - }, + author: "Af Isabel Sánchez Vegara, Amaia Arrazola", + statusMessage: "The item cannot be renewed further", + isChecked: true, + disabled: true, statusMaterialType: { label: "bog", status: "outline", @@ -80,36 +71,14 @@ const listExpired: LoanMaterials = [ const listExpiresSoon: LoanMaterials = [ { - materialType: "lån", - list: [ - { - title: "Audrey Hepburn", - author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)", - isChecked: false, - canBeRenewed: true, - statusDelivery: { - label: "AFLEVERES 20.11.21", - status: "warning", - }, - statusMaterialType: { - label: "bog", - status: "outline", - }, - }, - ], - }, - { - materialType: "digitale lån", list: [ { + year: "2001", title: "Audrey Hepburn", - author: "Af Isabel Sánchez Vegara, Amaia Arrazola (2018)", + author: "Af Isabel Sánchez Vegara, Amaia Arrazola", + statusMessage: "The item cannot be renewed further", isChecked: true, - canBeRenewed: true, - statusDelivery: { - label: "UDLØBER 20.11.21", - status: "warning", - }, + disabled: true, statusMaterialType: { label: "bog", status: "outline", @@ -138,16 +107,6 @@ export const ModalLoan: React.FC = ({ const isExpired = showExpired; const loanList = isExpired ? listExpired : listExpiresSoon; - const countRenewable = useMemo(() => { - let total = 0; - loanList.forEach((loans) => - loans.list.forEach((material) => { - if (material.canBeRenewed) total += 1; - }) - ); - return total; - }, [loanList]); - const handleToggleAll = () => { setChecked(!isAllChecked); }; @@ -161,7 +120,7 @@ export const ModalLoan: React.FC = ({ @@ -192,7 +151,7 @@ export const ModalLoan: React.FC = ({ />
)}
    - {loanList.map(({ materialType, list }) => ( + {loanList.map(({ list }) => (
  • - {materialType && ( -
    - -
    - )}
      {list.map((listItem, index) => (
      • ))} @@ -244,7 +186,7 @@ export const ModalLoan: React.FC = ({ />
+
+ + ); + })} + ); }; diff --git a/src/stories/Library/autosuggest-material/autosuggest-material.scss b/src/stories/Library/autosuggest-material/autosuggest-material.scss index dcc56477a..1d8403c8a 100644 --- a/src/stories/Library/autosuggest-material/autosuggest-material.scss +++ b/src/stories/Library/autosuggest-material/autosuggest-material.scss @@ -1,36 +1,14 @@ .autosuggest { - &__divider { + &__material-item { width: 100%; - display: block; - height: 1px; - border: 0; - border-top: 1px solid $c-global-tertiary-1; - margin: 20px 0; - padding: 0; - } - - &__materials { - display: flex; - flex-direction: column; - margin: 0 15px; - - @include breakpoint-m { - display: grid; - grid-template-columns: repeat(3, 1fr); - justify-content: center; - } - } - - &__material { - width: 100%; - overflow: hidden; - padding: 7px 0; + padding: $s-sm $s-md; &:last-child { margin-bottom: 0; } @include breakpoint-m { + 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. @@ -40,17 +18,66 @@ } } + &.autosuggest__material-item--two { + @include breakpoint-m { + width: calc(100% / 2); + } + } + + &.autosuggest__material-item--one { + @include breakpoint-m { + width: 100%; + } + } + &--highlight { background-color: $c-global-secondary; } + } - &__content { - display: flex; - flex-flow: row nowrap; - gap: 15px; - width: 95%; + // Autosuggest dividers on phones: + // - between text suggestions & material suggestions + &__text-item + &__material-item { + border-top: 1px solid $c-global-tertiary-1; + margin-top: $s-lg; + padding-top: $s-lg; + + @include breakpoint-m { + border: none; + margin: 0; } } + // - between material suggestions & text suggestions + &__material-item + &__text-item { + border-top: 1px solid $c-global-tertiary-1; + margin-top: $s-md; + padding-top: $s-md; + + @include breakpoint-m { + border: none; + padding-top: 0; + margin-top: 0; + } + } + + // 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; + margin: $s-lg 0; + padding-top: $s-lg; + padding-bottom: $s-lg; + } + } + + &__material-card { + display: flex; + flex-flow: row nowrap; + gap: 15px; + width: 95%; + } &__info { display: flex; diff --git a/src/stories/Library/autosuggest-material/helper.ts b/src/stories/Library/autosuggest-material/helper.ts new file mode 100644 index 000000000..4112d3923 --- /dev/null +++ b/src/stories/Library/autosuggest-material/helper.ts @@ -0,0 +1,22 @@ +export const autosuggestMaterialSuggestions = [ + { + cover: "images/book_cover_1.jpg", + title: "De uadskillelige", + author: "Simone De Beauvoir", + year: "1954", + }, + { + cover: "images/book_cover_2.jpg", + title: "Den lille bog om dansk design", + author: "Marie Hugsted", + year: "2018", + }, + { + cover: "images/book_cover_3.jpg", + title: "Audrey Hepburn", + author: "Maria Isabel Sanchez Vegara", + year: "2018", + }, +]; + +export default {}; diff --git a/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx b/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx index 24e96b709..2bf433926 100644 --- a/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx +++ b/src/stories/Library/autosuggest-text/AutosuggestText.stories.tsx @@ -8,9 +8,9 @@ export default { component: AutosuggestText, decorators: [withDesign], argTypes: { - items: { - name: "Items", - defaultValue: ["Item one", "Item two"], + textSuggestions: { + name: "Text suggestions", + defaultValue: ["Item one (author)", "Item two (work)"], control: { type: "array" }, }, categoryText: { @@ -30,50 +30,25 @@ export default { const Template: ComponentStory = ( args: AutosuggestTextProps ) => ( - // apart from SuggestText, everything else is here just for the story context - // SuggestText style is directly dependent on the header and search field styling -
-
-

Context

-
-
- -
-
- - search icon - -
-
-
-
-

Context

-
-
+
+
    + +
+
); -export const TextSuggestion = Template.bind({}); +export const Default = Template.bind({}); -export const TextSuggestionWithCategory = Template.bind({}); -TextSuggestionWithCategory.args = { - items: ["Item one", "Item two"], - categoryText: "Author", -}; -export const MultipleLineTextSuggestion = Template.bind({}); -MultipleLineTextSuggestion.args = { - items: [ - "Lorem ipsum hal de pretty clanging scales, because seldom they have seemed seven over the top (work)", - "Lorem ipsum hal de pretty clanging scales, because seldom they have seemed seven over the top (work)", - "Author Name (author)", +export const MultipleLines = Template.bind({}); +MultipleLines.args = { + textSuggestions: [ + "Lorem ipsum hal de pretty clanging scales, because seldom they have seemed seven over the top lorem ipsum hal de pretty clanging scales, because seldom they have seemed seven over the top lorem ipsum hal de pretty clanging scales, because seldom they have seemed (work)", + "Item two (work)", ], }; + +export const WithCategoryTag = Template.bind({}); +WithCategoryTag.args = { + textSuggestions: ["Item one", "Item two"], + categoryText: "Author", +}; diff --git a/src/stories/Library/autosuggest-text/AutosuggestText.tsx b/src/stories/Library/autosuggest-text/AutosuggestText.tsx index b841ee4fe..476263921 100644 --- a/src/stories/Library/autosuggest-text/AutosuggestText.tsx +++ b/src/stories/Library/autosuggest-text/AutosuggestText.tsx @@ -1,28 +1,24 @@ export type AutosuggestTextProps = { - items: string[]; - categoryText: string; + textSuggestions: string[]; + categoryText?: string; }; export const AutosuggestText = (props: AutosuggestTextProps) => { - const { items, categoryText } = props; + const { textSuggestions, categoryText } = props; return ( -
    -
  • -
      - {items.map((item) => { - return ( -
    • - {item} - {categoryText && ( -
      - {categoryText} -
      - )} -
      • - ); - })} -
    -
    • -
+ <> + {textSuggestions.map((item) => { + return ( +
  • +

    {item}

    + {categoryText && ( +
    + {categoryText} +
    + )} +
    • + ); + })} + ); }; diff --git a/src/stories/Library/autosuggest-text/autosuggest-text.scss b/src/stories/Library/autosuggest-text/autosuggest-text.scss index a6942e3ea..2b3d34e7b 100644 --- a/src/stories/Library/autosuggest-text/autosuggest-text.scss +++ b/src/stories/Library/autosuggest-text/autosuggest-text.scss @@ -1,20 +1,9 @@ .autosuggest { - background-color: $c-global-primary; - outline: 1px solid $c-global-tertiary-1; - position: absolute; - left: 0; - right: 0; - top: calc(100% + 1px); - z-index: 1; - - @include breakpoint-m { - padding-top: $s-md; - } - - &__text { + &__text-item { + min-height: 40px; + width: 100%; display: flex; align-items: center; - min-height: 40px; @include breakpoint-m { // Because the main autosuggest is a prominent feature we don't want the hover @@ -30,10 +19,19 @@ @include breakpoint-l { height: 40px; + padding-right: $s-lg; } &--highlight { background-color: $c-global-secondary; } } + + &__text { + @include breakpoint-m { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } } diff --git a/src/stories/Library/search-result-item/SearchResultItem.stories.tsx b/src/stories/Library/card-list-item/CardListItem.stories.tsx similarity index 75% rename from src/stories/Library/search-result-item/SearchResultItem.stories.tsx rename to src/stories/Library/card-list-item/CardListItem.stories.tsx index e7435fc44..4daa38415 100644 --- a/src/stories/Library/search-result-item/SearchResultItem.stories.tsx +++ b/src/stories/Library/card-list-item/CardListItem.stories.tsx @@ -1,12 +1,11 @@ import { withDesign } from "storybook-addon-designs"; import { ComponentMeta, ComponentStory } from "@storybook/react"; - -import { SearchResultItem } from "./SearchResultItem"; -import { SearchResultItemSkeleton } from "./SearchResultItemSkeleton"; +import { CardListItem } from "./CardListItem"; +import { CardListItemSkeleton } from "./CardListItemSkeleton"; export default { - title: "Library / Search Result Item", - component: SearchResultItem, + title: "Library / Card List Item", + component: CardListItem, decorators: [withDesign], parameters: { design: { @@ -50,10 +49,10 @@ export default { defaultValue: 3, }, }, -} as ComponentMeta; +} as ComponentMeta; -export const Item: ComponentStory = (args) => { - return ; +export const Item: ComponentStory = (args) => { + return ; }; export const ContentOverload = Item.bind({}); @@ -64,8 +63,6 @@ ContentOverload.args = { availabilityLabels: 25, }; -export const SkeletonItem: ComponentStory< - typeof SearchResultItemSkeleton -> = () => { - return ; +export const SkeletonItem: ComponentStory = () => { + return ; }; diff --git a/src/stories/Library/search-result-item/SearchResultItem.tsx b/src/stories/Library/card-list-item/CardListItem.tsx similarity index 82% rename from src/stories/Library/search-result-item/SearchResultItem.tsx rename to src/stories/Library/card-list-item/CardListItem.tsx index bd47d3d4e..42f8f6191 100644 --- a/src/stories/Library/search-result-item/SearchResultItem.tsx +++ b/src/stories/Library/card-list-item/CardListItem.tsx @@ -8,7 +8,7 @@ import HorizontalTermLine, { } from "../horizontal-term-line/HorizontalTermLine"; import { getCoverTint } from "../cover/helper"; -export type SearchResultItemProps = { +export type CardListItemProps = { heartFill?: boolean; title: string; author: string; @@ -18,7 +18,7 @@ export type SearchResultItemProps = { tintIndex: number; }; -export const SearchResultItem = ({ +export const CardListItem = ({ heartFill, title, author, @@ -26,7 +26,7 @@ export const SearchResultItem = ({ horizontalTermLineData, availabilityLabels, tintIndex, -}: SearchResultItemProps) => { +}: CardListItemProps) => { const materialTypes: AvailabilityLabelPropsType["manifestationType"][] = [ "Bog", "Ebog", @@ -35,8 +35,8 @@ export const SearchResultItem = ({ ]; return ( - -
    + +
    -
    -
    + -
    +
    {/* We render the amount of availability labels defined by the story. */} {Array(availabilityLabels) .fill(0) diff --git a/src/stories/Library/search-result-item/SearchResultItemSkeleton.tsx b/src/stories/Library/card-list-item/CardListItemSkeleton.tsx similarity index 71% rename from src/stories/Library/search-result-item/SearchResultItemSkeleton.tsx rename to src/stories/Library/card-list-item/CardListItemSkeleton.tsx index 6daa8efef..d51d10fc1 100644 --- a/src/stories/Library/search-result-item/SearchResultItemSkeleton.tsx +++ b/src/stories/Library/card-list-item/CardListItemSkeleton.tsx @@ -1,6 +1,6 @@ -export const SearchResultItemSkeleton = () => { +export const CardListItemSkeleton = () => { return ( -
    +
     
    diff --git a/src/stories/Library/search-result-item/search-result-item-skeleton.scss b/src/stories/Library/card-list-item/card-list-item-skeleton.scss similarity index 95% rename from src/stories/Library/search-result-item/search-result-item-skeleton.scss rename to src/stories/Library/card-list-item/card-list-item-skeleton.scss index 42e2cd751..e4ef423cc 100644 --- a/src/stories/Library/search-result-item/search-result-item-skeleton.scss +++ b/src/stories/Library/card-list-item/card-list-item-skeleton.scss @@ -2,7 +2,7 @@ // we deliberately not follow the BEM naming convention here. /* stylelint-disable plugin/stylelint-bem-namics */ -.search-result-item { +.card-list-item { &.ssc { grid-template-columns: min-content 1fr; } diff --git a/src/stories/Library/search-result-item/search-result-item.scss b/src/stories/Library/card-list-item/card-list-item.scss similarity index 84% rename from src/stories/Library/search-result-item/search-result-item.scss rename to src/stories/Library/card-list-item/card-list-item.scss index 7921205a5..c681fb24a 100644 --- a/src/stories/Library/search-result-item/search-result-item.scss +++ b/src/stories/Library/card-list-item/card-list-item.scss @@ -1,4 +1,4 @@ -.search-result-item { +.card-list-item { background-color: #fff; padding: 16px 24px; display: grid; @@ -20,9 +20,9 @@ } } -@include arrow("search-result-item"); +@include arrow("card-list-item"); -.search-result-item__cover { +.card-list-item__cover { grid-row: span 2; @include breakpoint-s { @@ -30,7 +30,7 @@ } } -.search-result-item__availability { +.card-list-item__availability { grid-column: 2; display: flex; align-content: center; @@ -42,12 +42,12 @@ } } -.search-result-item__meta { +.card-list-item__meta { display: flex; gap: 10px; } -.search-result-item__title { +.card-list-item__title { margin-top: 10px; & > a { @@ -65,5 +65,6 @@ margin-top: 16px; overflow: hidden; text-overflow: ellipsis; + min-height: 30px; } } diff --git a/src/stories/Library/search-result-page/SearchResultPage.stories.tsx b/src/stories/Library/card-list-page/CardListPage.stories.tsx similarity index 66% rename from src/stories/Library/search-result-page/SearchResultPage.stories.tsx rename to src/stories/Library/card-list-page/CardListPage.stories.tsx index 87b8be959..6e9509df9 100644 --- a/src/stories/Library/search-result-page/SearchResultPage.stories.tsx +++ b/src/stories/Library/card-list-page/CardListPage.stories.tsx @@ -1,11 +1,11 @@ import { withDesign } from "storybook-addon-designs"; import { ComponentMeta, ComponentStory } from "@storybook/react"; -import { SearchResultPage } from "./SearchResultPage"; -import { SearchResultPageSkeleton } from "./SearchResultPageSkeleton"; +import { CardListPage } from "./CardListPage"; +import { CardListPageSkeleton } from "./CardListPageSkeleton"; export default { - title: "Blocks / Search Result Page", - component: SearchResultPage, + title: "Blocks / Card list Page", + component: CardListPage, decorators: [withDesign], parameters: { design: { @@ -40,16 +40,16 @@ export default { defaultValue: false, }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = (args) => { - return ; +const Template: ComponentStory = (args) => { + return ; }; export const Item = Template.bind({}); -const SkeletonTemplate: ComponentStory = ( +const SkeletonTemplate: ComponentStory = ( args ) => { - return ; + return ; }; export const SkeletonVersion = SkeletonTemplate.bind({}); diff --git a/src/stories/Library/search-result-page/SearchResultPage.tsx b/src/stories/Library/card-list-page/CardListPage.tsx similarity index 75% rename from src/stories/Library/search-result-page/SearchResultPage.tsx rename to src/stories/Library/card-list-page/CardListPage.tsx index 65d052982..62b86edcc 100644 --- a/src/stories/Library/search-result-page/SearchResultPage.tsx +++ b/src/stories/Library/card-list-page/CardListPage.tsx @@ -1,13 +1,13 @@ -import { SearchResultItem } from "../search-result-item/SearchResultItem"; +import { CardListItem } from "../card-list-item/CardListItem"; import { SearchResultInfo } from "./SearchResultInfo"; import ResultPager from "./ResultPager"; import { SearchResultTitle } from "./SearchResultTitle"; import { SearchResultZero } from "./SearchResultZero"; import FacetLine from "./FacetLine"; import FacetLineSelected from "./FacetLineSelectedTerms"; -import data from "./SearchResultPageData"; +import data from "./CardListPageData"; -export type SearchResultPageProps = { +export type CardListPageProps = { title: string; currentResults: number; totalResults: number; @@ -17,19 +17,19 @@ export type SearchResultPageProps = { }; const SearchResultList = data.searchResult.map((item, i) => { - return ; + return ; }); -export const SearchResultPage = ({ +export const CardListPage = ({ title, linkName, linkTotalResults, currentResults, totalResults, zeroResult, -}: SearchResultPageProps) => { +}: CardListPageProps) => { return ( -
    +
    -
    - {SearchResultList} -
    +
    {SearchResultList}
    { +export const CardListPageSkeleton = ({ title }: CardListPageSkeletonProps) => { return ( -
    +
    -
    +
    -
    +
    -
      +
      • - +
      • - +
      • - +
      • - +
      • - +
    diff --git a/src/stories/Library/search-result-page/FacetLine.tsx b/src/stories/Library/card-list-page/FacetLine.tsx similarity index 100% rename from src/stories/Library/search-result-page/FacetLine.tsx rename to src/stories/Library/card-list-page/FacetLine.tsx diff --git a/src/stories/Library/search-result-page/FacetLineSelectedTerms.tsx b/src/stories/Library/card-list-page/FacetLineSelectedTerms.tsx similarity index 100% rename from src/stories/Library/search-result-page/FacetLineSelectedTerms.tsx rename to src/stories/Library/card-list-page/FacetLineSelectedTerms.tsx diff --git a/src/stories/Library/search-result-page/ResultPager.tsx b/src/stories/Library/card-list-page/ResultPager.tsx similarity index 100% rename from src/stories/Library/search-result-page/ResultPager.tsx rename to src/stories/Library/card-list-page/ResultPager.tsx diff --git a/src/stories/Library/search-result-page/SearchResultInfo.tsx b/src/stories/Library/card-list-page/SearchResultInfo.tsx similarity index 100% rename from src/stories/Library/search-result-page/SearchResultInfo.tsx rename to src/stories/Library/card-list-page/SearchResultInfo.tsx diff --git a/src/stories/Library/search-result-page/SearchResultTitle.stories.tsx b/src/stories/Library/card-list-page/SearchResultTitle.stories.tsx similarity index 100% rename from src/stories/Library/search-result-page/SearchResultTitle.stories.tsx rename to src/stories/Library/card-list-page/SearchResultTitle.stories.tsx diff --git a/src/stories/Library/search-result-page/SearchResultTitle.tsx b/src/stories/Library/card-list-page/SearchResultTitle.tsx similarity index 100% rename from src/stories/Library/search-result-page/SearchResultTitle.tsx rename to src/stories/Library/card-list-page/SearchResultTitle.tsx diff --git a/src/stories/Library/search-result-page/SearchResultZero.tsx b/src/stories/Library/card-list-page/SearchResultZero.tsx similarity index 100% rename from src/stories/Library/search-result-page/SearchResultZero.tsx rename to src/stories/Library/card-list-page/SearchResultZero.tsx diff --git a/src/stories/Library/search-result-page/search-result-page-skeleton.scss b/src/stories/Library/card-list-page/card-list-page-skeleton.scss similarity index 81% rename from src/stories/Library/search-result-page/search-result-page-skeleton.scss rename to src/stories/Library/card-list-page/card-list-page-skeleton.scss index 8814632da..99e069794 100644 --- a/src/stories/Library/search-result-page/search-result-page-skeleton.scss +++ b/src/stories/Library/card-list-page/card-list-page-skeleton.scss @@ -1,4 +1,4 @@ -.search-result-page__skeleton-facet-line { +.card-list-page__skeleton-facet-line { &--mobile { display: block; @include breakpoint-s { diff --git a/src/stories/Library/search-result-page/search-result-page.scss b/src/stories/Library/card-list-page/card-list-page.scss similarity index 88% rename from src/stories/Library/search-result-page/search-result-page.scss rename to src/stories/Library/card-list-page/card-list-page.scss index c9e3e8a93..51f065d45 100644 --- a/src/stories/Library/search-result-page/search-result-page.scss +++ b/src/stories/Library/card-list-page/card-list-page.scss @@ -1,4 +1,4 @@ -.search-result-page { +.card-list-page { background: $c-global-primary; padding: 16px; diff --git a/src/stories/Library/search-result-page/facet-line.scss b/src/stories/Library/card-list-page/facet-line.scss similarity index 100% rename from src/stories/Library/search-result-page/facet-line.scss rename to src/stories/Library/card-list-page/facet-line.scss diff --git a/src/stories/Library/search-result-page/result-pager.scss b/src/stories/Library/card-list-page/result-pager.scss similarity index 100% rename from src/stories/Library/search-result-page/result-pager.scss rename to src/stories/Library/card-list-page/result-pager.scss diff --git a/src/stories/Library/search-result-page/search-result-info.scss b/src/stories/Library/card-list-page/search-result-info.scss similarity index 100% rename from src/stories/Library/search-result-page/search-result-info.scss rename to src/stories/Library/card-list-page/search-result-info.scss diff --git a/src/stories/Library/search-result-page/search-result-title.scss b/src/stories/Library/card-list-page/search-result-title.scss similarity index 100% rename from src/stories/Library/search-result-page/search-result-title.scss rename to src/stories/Library/card-list-page/search-result-title.scss diff --git a/src/stories/Library/search-result-page/search-result-zero.scss b/src/stories/Library/card-list-page/search-result-zero.scss similarity index 100% rename from src/stories/Library/search-result-page/search-result-zero.scss rename to src/stories/Library/card-list-page/search-result-zero.scss diff --git a/src/stories/Library/cover/Cover.tsx b/src/stories/Library/cover/Cover.tsx index a53198981..c20552c68 100644 --- a/src/stories/Library/cover/Cover.tsx +++ b/src/stories/Library/cover/Cover.tsx @@ -12,6 +12,7 @@ const Cover: FC = ({ coverUrl, description, shadow, + ariaLabel = "Link to the material", }) => { const [imageLoaded, setImageLoaded] = useState(null); @@ -31,7 +32,7 @@ const Cover: FC = ({ diff --git a/src/stories/Library/cover/types.ts b/src/stories/Library/cover/types.ts index c3ce6dc92..b5b59b7e6 100644 --- a/src/stories/Library/cover/types.ts +++ b/src/stories/Library/cover/types.ts @@ -6,4 +6,5 @@ export type CoverProps = { coverUrl?: string; description?: string; shadow?: boolean; + ariaLabel?: string; }; diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss deleted file mode 100644 index ac50fc790..000000000 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.scss +++ /dev/null @@ -1,105 +0,0 @@ -.favorites-list-mc { - background-color: $c-global-tertiary-2; - color: $c-text-primary-white; - border-color: $c-text-secondary-gray; - - @include breakpoint-m { - padding: $s-6xl; - } - - &--bright { - background-color: $c-global-primary; - color: $c-text-primary-black; - border-color: $c-global-tertiary-1; - - @include breakpoint-m { - padding: $s-6xl; - } - } - - &__title { - text-align: center; - padding: $s-lg; - - &--left { - text-align: left; - } - - @include breakpoint-m { - padding-bottom: $s-6xl; - } - } - - &__buttons { - display: flex; - justify-content: end; - margin-bottom: $s-md; - } - - &__grid { - display: grid; - grid-template-columns: 50% 50%; - grid-template-rows: 50% 50%; - - @include breakpoint-m { - grid-template-columns: 25% 25% 25% 25%; - } - } -} - -.favorites-list-mc-material { - border: 1px solid $c-text-secondary-gray; - padding: $s-xl; - display: flex; - width: 100%; - position: relative; - height: 350px; - - &--bright { - border: 1px solid $c-global-tertiary-1; - } - - &__favourite { - position: absolute; - top: $s-sm; - right: $s-sm; - } - - &__cover-container { - display: flex; - justify-content: center; - width: 100%; - margin-top: $s-sm; - } - - &__meta { - position: absolute; - left: $s-sm; - bottom: $s-sm; - width: 100%; - padding-right: $s-sm; - } - - &__title { - @extend %text-body-medium-regular-placeholder; - text-decoration: none; - display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - color: inherit; - - &:hover { - text-decoration: underline; - } - } - - &__author { - @extend %text-body-medium-regular-placeholder; - font-weight: 500; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - color: inherit; - } -} diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx deleted file mode 100644 index c42b234a7..000000000 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { ComponentMeta, ComponentStory } from "@storybook/react"; -import FavoritesListMaterialComponent from "./favorites-list-material-component"; - -export default { - title: "Library / Favorites list material-component", - component: FavoritesListMaterialComponent, - argTypes: { - title: { - control: "text", - defaultValue: "Din favoritliste", - }, - bright: { - control: { type: "boolean" }, - defaultValue: true, - }, - recommenderData: { - control: "object", - defaultValue: [ - { - title: "Ella Fitzgerald", - authors: "Af Isabel Sánchez Vegara", - filled: true, - }, - { - title: "Ella Fitzgerald", - authors: "Af Isabel Sánchez Vegara", - filled: true, - }, - { - title: "Ella Fitzgerald", - authors: "Af Isabel Sánchez Vegara", - filled: true, - }, - { - title: "Ella Fitzgerald", - authors: "Af Isabel Sánchez Vegara", - filled: true, - }, - ], - }, - }, -} as ComponentMeta; - -const Template: ComponentStory = ( - args -) => ; - -export const FavoritesList = Template.bind({}); -FavoritesList.args = {}; diff --git a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx b/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx deleted file mode 100644 index 5c5220c4b..000000000 --- a/src/stories/Library/favorites-list-material-component/favorites-list-material-component.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import Cover from "../cover/Cover"; -import { ReactComponent as SvgIcon } from "../Icons/icon-favourite/icon-favourite.svg"; - -export type RecommenderData = { - title: string; - authors: string; - filled: boolean; -}; -export type RecommenderProps = { - recommenderData: RecommenderData[]; - title: string; - bright: boolean; -}; - -const FavoritesListMaterialComponent: React.FC = ({ - recommenderData, - title, - bright, -}) => { - return ( - - ); -}; - -export default FavoritesListMaterialComponent; diff --git a/src/stories/Library/horizontal-term-line/HorizontalTermLine.tsx b/src/stories/Library/horizontal-term-line/HorizontalTermLine.tsx index 34231dbaf..1db65dd05 100644 --- a/src/stories/Library/horizontal-term-line/HorizontalTermLine.tsx +++ b/src/stories/Library/horizontal-term-line/HorizontalTermLine.tsx @@ -1,5 +1,5 @@ -import clsx from "clsx"; import { useState } from "react"; +import ButtonExpand from "../Buttons/button/button-expand/ButtonExpand"; export interface HorizontalTermLineList { url: string; @@ -45,19 +45,7 @@ const HorizontalTermLine: React.FC = ({ ))} {showMoreButton && ( - + )}
    ); diff --git a/src/stories/Library/horizontal-term-line/horizontal-term-line.scss b/src/stories/Library/horizontal-term-line/horizontal-term-line.scss index 2a9dc3941..586512270 100644 --- a/src/stories/Library/horizontal-term-line/horizontal-term-line.scss +++ b/src/stories/Library/horizontal-term-line/horizontal-term-line.scss @@ -1,6 +1,6 @@ .horizontal-term-line { display: flex; - align-items: center; + align-items: baseline; flex-wrap: wrap; white-space: nowrap; gap: $s-sm; @@ -9,19 +9,4 @@ * { font-size: 12px; } - - &__list { - display: flex; - flex-wrap: wrap; - gap: $s-sm; - } - - &__expand { - cursor: pointer; - transition: transform 0.3s ease-in-out; - - &--expanded { - transform: scaleY(-1); - } - } } diff --git a/src/stories/Library/material-header/material-header.scss b/src/stories/Library/material-header/material-header.scss index a62d88d08..354305a84 100644 --- a/src/stories/Library/material-header/material-header.scss +++ b/src/stories/Library/material-header/material-header.scss @@ -59,7 +59,7 @@ } // set all buttons to the full width - &__button button { + &__button > * { width: 100%; @include breakpoint-m { width: 346px; diff --git a/src/stories/Library/recommender/Recommender.stories.tsx b/src/stories/Library/recommenders/Recommenders.stories.tsx similarity index 56% rename from src/stories/Library/recommender/Recommender.stories.tsx rename to src/stories/Library/recommenders/Recommenders.stories.tsx index b3d9af866..13796fb3c 100644 --- a/src/stories/Library/recommender/Recommender.stories.tsx +++ b/src/stories/Library/recommenders/Recommenders.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from "@storybook/react"; -import Recommender from "./Recommender"; +import Recommender from "./Recommenders"; export default { title: "Library / Recommender", @@ -7,13 +7,24 @@ export default { argTypes: { title: { control: "text", - defaultValue: - "Kunne du lide “Audrey Hepburn” og mangler du noget at læse?", + defaultValue: "Because you have borrowed something you may also like", }, bright: { control: { type: "boolean" }, defaultValue: true, }, + padding: { + control: { type: "boolean" }, + defaultValue: true, + }, + titleLeft: { + control: { type: "boolean" }, + defaultValue: false, + }, + triple: { + control: { type: "boolean" }, + defaultValue: true, + }, recommenderData: { control: "object", defaultValue: [ @@ -42,9 +53,20 @@ export default { }, } as ComponentMeta; -const Template: ComponentStory = (args) => ( +const RecommenderMC: ComponentStory = (args) => ( + +); + +const SomethingSimilarMC: ComponentStory = (args) => ( ); -export const Recommend = Template.bind({}); +export const Recommend = RecommenderMC.bind({}); +export const SomethingSimilar = SomethingSimilarMC.bind({}); Recommend.args = {}; +SomethingSimilar.args = { + padding: false, + titleLeft: true, + title: "Something similar", + triple: false, +}; diff --git a/src/stories/Library/recommender/Recommender.tsx b/src/stories/Library/recommenders/Recommenders.tsx similarity index 63% rename from src/stories/Library/recommender/Recommender.tsx rename to src/stories/Library/recommenders/Recommenders.tsx index 836ccfc26..429ee9544 100644 --- a/src/stories/Library/recommender/Recommender.tsx +++ b/src/stories/Library/recommenders/Recommenders.tsx @@ -10,16 +10,33 @@ export type RecommenderProps = { recommenderData: RecommenderData[]; title: string; bright: boolean; + padding: boolean; + titleLeft: boolean; + triple: boolean; }; const Recommender: React.FC = ({ recommenderData, title, bright, + padding, + titleLeft, + triple, }) => { return ( -
    -

    {title}

    +
    +

    + {title} +

    -
      +
        {recommenderData.map(({ title: recTitle, filled, authors }) => (
      • -
        +
        = ({ />
        -
        +
        = ({ tint="120" />
        -
        - {recTitle} -
        {authors}
        +
        + {recTitle} +
        {authors}
        • ))} diff --git a/src/stories/Library/recommender/recommender.scss b/src/stories/Library/recommenders/recommenders.scss similarity index 76% rename from src/stories/Library/recommender/recommender.scss rename to src/stories/Library/recommenders/recommenders.scss index 4c4a2901c..954691338 100644 --- a/src/stories/Library/recommender/recommender.scss +++ b/src/stories/Library/recommenders/recommenders.scss @@ -3,15 +3,23 @@ color: $c-text-primary-white; border-color: $c-text-secondary-gray; - @include breakpoint-m { - padding: $s-6xl; - } - &--bright { background-color: $c-global-primary; color: $c-text-primary-black; border-color: $c-global-tertiary-1; + } + /* stylelint-disable max-nesting-depth */ + &--triple-desktop { + @include breakpoint-m { + .simple-material { + &:last-of-type { + display: none; + } + } + } + } + &--padding-desktop { @include breakpoint-m { padding: $s-6xl; } @@ -25,18 +33,25 @@ padding-bottom: $s-6xl; } } - &__title--left { + + &__left-title { text-align: left; + padding-left: $s-md; + + @include breakpoint-m { + padding-left: $s-4xl; + } } &__buttons { display: flex; justify-content: end; margin-bottom: $s-md; + margin-right: $s-md; gap: $s-md; } - &__grid { + &__triple-grid { display: grid; grid-template-columns: 50% 50%; grid-template-rows: 50% 50%; @@ -45,9 +60,19 @@ grid-template-columns: 33.33% 33.33% 33.33%; } } + + &__grid { + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: 50% 50%; + + @include breakpoint-m { + grid-template-columns: 25% 25% 25% 25%; + } + } } -.recommender-material { +.simple-material { border: 1px solid $c-text-secondary-gray; padding: 30px; display: flex; @@ -55,12 +80,6 @@ position: relative; height: 350px; - @include breakpoint-m { - &:last-of-type { - display: none; - } - } - &--bright { border: 1px solid $c-global-tertiary-1; } diff --git a/yarn.lock b/yarn.lock index ae85bfe66..d711d8651 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2765,25 +2765,6 @@ dependencies: "@babel/runtime" "^7.12.5" -"@textlint/ast-node-types@^12.2.1": - version "12.2.1" - resolved "https://registry.yarnpkg.com/@textlint/ast-node-types/-/ast-node-types-12.2.1.tgz#bec1e4b02e97ff1167d057c71feeee1a80015aef" - integrity sha512-NXYza6aG1+LdZ4g83gjRhDht+gdrTjJYkdcQhpvzNCtTar/sVpaykkauRcAKLhkIWrQpfb311pfMlU6qNDW76Q== - -"@textlint/markdown-to-ast@^12.1.1": - version "12.2.1" - resolved "https://registry.yarnpkg.com/@textlint/markdown-to-ast/-/markdown-to-ast-12.2.1.tgz#e9ec19be71e4513d882986d14ab9a993dec74511" - integrity sha512-p+LlVcrgHnSNEWWflYU412uu+v4Cejs6hmI4SgZCheNg4u7Ik78aKgpe4jT5BhjLSBZ/KP6IrJxtCUOoJIUWmQ== - dependencies: - "@textlint/ast-node-types" "^12.2.1" - debug "^4.3.4" - remark-footnotes "^3.0.0" - remark-frontmatter "^3.0.0" - remark-gfm "^1.0.0" - remark-parse "^9.0.0" - traverse "^0.6.6" - unified "^9.2.2" - "@tootallnate/once@1": version "1.1.2" resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82" @@ -3776,13 +3757,6 @@ alphanum-sort@^1.0.0: resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3" integrity sha512-0FcBfdcmaumGPQ0qPn7Q5qTgz/ooXgIyp1rf8ik5bGX8mpE2YHjC0P/eyQvxu1GURYQgq9ozf2mteQ5ZD9YiyQ== -anchor-markdown-header@^0.5.7: - version "0.5.7" - resolved "https://registry.yarnpkg.com/anchor-markdown-header/-/anchor-markdown-header-0.5.7.tgz#045063d76e6a1f9cd327a57a0126aa0fdec371a7" - integrity sha512-AmikqcK15r3q99hPvTa1na9n3eLkW0uE+RL9BZMSgwYalQeDnNXbYrN06BIcBPfGlmsGIE2jvkuvl/x0hyPF5Q== - dependencies: - emoji-regex "~6.1.0" - ansi-align@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59" @@ -5895,7 +5869,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9: dependencies: ms "2.0.0" -debug@4, debug@4.3.4, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4: +debug@4, debug@4.3.4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4: version "4.3.4" resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== @@ -6160,18 +6134,6 @@ dns-txt@^2.0.2: dependencies: buffer-indexof "^1.0.0" -doctoc@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/doctoc/-/doctoc-2.2.0.tgz#27f23eb75d109d29722d449efbcde3854cb0eabf" - integrity sha512-PtiyaS+S3kcMbpx6x2V0S+PeDKisxmjEFnZsuYkkj4Lh3ObozJuuYh9dM4+sX02Ouuty8RF2LOCnIbpu/hWy/A== - dependencies: - "@textlint/markdown-to-ast" "^12.1.1" - anchor-markdown-header "^0.5.7" - htmlparser2 "^7.2.0" - minimist "^1.2.6" - underscore "^1.13.2" - update-section "^0.3.3" - doctrine@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d" @@ -6242,7 +6204,7 @@ domexception@^2.0.1: dependencies: webidl-conversions "^5.0.0" -domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.1: +domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1: version "4.3.1" resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c" integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ== @@ -6366,11 +6328,6 @@ emoji-regex@^9.2.2: resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72" integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg== -emoji-regex@~6.1.0: - version "6.1.3" - resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.1.3.tgz#ec79a3969b02d2ecf2b72254279bf99bc7a83932" - integrity sha512-73/zxHTjP2N2FQf0J5ngNjxP9LqG2krUshxYaowI8HxZQsiL2pYJc3k9/O93fc5/lCSkZv+bQ5Esk6k6msiSvg== - emojis-list@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" @@ -6431,11 +6388,6 @@ entities@^2.0.0: resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55" integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A== -entities@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/entities/-/entities-3.0.1.tgz#2b887ca62585e96db3903482d336c1006c3001d4" - integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q== - entities@~2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5" @@ -8255,16 +8207,6 @@ htmlparser2@^6.1.0: domutils "^2.5.2" entities "^2.0.0" -htmlparser2@^7.2.0: - version "7.2.0" - resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-7.2.0.tgz#8817cdea38bbc324392a90b1990908e81a65f5a5" - integrity sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog== - dependencies: - domelementtype "^2.0.1" - domhandler "^4.2.2" - domutils "^2.8.0" - entities "^3.0.1" - http-deceiver@^1.2.7: version "1.2.7" resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87" @@ -10056,11 +9998,6 @@ loglevel@^1.6.8: resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.0.tgz#e7ec73a57e1e7b419cb6c6ac06bf050b67356114" integrity sha512-G6A/nJLRgWOuuwdNuA6koovfEV1YpqqAG4pRUlFaz3jj2QNZ8M4vBqnVA+HBTmU/AMNUtlOsMmSpF6NyOjztbA== -longest-streak@^2.0.0: - version "2.0.4" - resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4" - integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg== - loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" @@ -10182,13 +10119,6 @@ markdown-it@12.3.2: mdurl "^1.0.1" uc.micro "^1.0.5" -markdown-table@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-2.0.0.tgz#194a90ced26d31fe753d8b9434430214c011865b" - integrity sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A== - dependencies: - repeat-string "^1.0.0" - markdownlint-cli2-formatter-default@0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.3.tgz#5aecd6e576ad18801b76e58bbbaf0e916c583ab8" @@ -10247,83 +10177,6 @@ mdast-util-definitions@^4.0.0: dependencies: unist-util-visit "^2.0.0" -mdast-util-find-and-replace@^1.1.0: - version "1.1.1" - resolved "https://registry.yarnpkg.com/mdast-util-find-and-replace/-/mdast-util-find-and-replace-1.1.1.tgz#b7db1e873f96f66588c321f1363069abf607d1b5" - integrity sha512-9cKl33Y21lyckGzpSmEQnIDjEfeeWelN5s1kUW1LwdB0Fkuq2u+4GdqcGEygYxJE8GVqCl0741bYXHgamfWAZA== - dependencies: - escape-string-regexp "^4.0.0" - unist-util-is "^4.0.0" - unist-util-visit-parents "^3.0.0" - -mdast-util-footnote@^0.1.0: - version "0.1.7" - resolved "https://registry.yarnpkg.com/mdast-util-footnote/-/mdast-util-footnote-0.1.7.tgz#4b226caeab4613a3362c144c94af0fdd6f7e0ef0" - integrity sha512-QxNdO8qSxqbO2e3m09KwDKfWiLgqyCurdWTQ198NpbZ2hxntdc+VKS4fDJCmNWbAroUdYnSthu+XbZ8ovh8C3w== - dependencies: - mdast-util-to-markdown "^0.6.0" - micromark "~2.11.0" - -mdast-util-from-markdown@^0.8.0: - version "0.8.5" - resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz#d1ef2ca42bc377ecb0463a987910dae89bd9a28c" - integrity sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ== - dependencies: - "@types/mdast" "^3.0.0" - mdast-util-to-string "^2.0.0" - micromark "~2.11.0" - parse-entities "^2.0.0" - unist-util-stringify-position "^2.0.0" - -mdast-util-frontmatter@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/mdast-util-frontmatter/-/mdast-util-frontmatter-0.2.0.tgz#8bd5cd55e236c03e204a036f7372ebe9e6748240" - integrity sha512-FHKL4w4S5fdt1KjJCwB0178WJ0evnyyQr5kXTM3wrOVpytD0hrkvd+AOOjU9Td8onOejCkmZ+HQRT3CZ3coHHQ== - dependencies: - micromark-extension-frontmatter "^0.2.0" - -mdast-util-gfm-autolink-literal@^0.1.0: - version "0.1.3" - resolved "https://registry.yarnpkg.com/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-0.1.3.tgz#9c4ff399c5ddd2ece40bd3b13e5447d84e385fb7" - integrity sha512-GjmLjWrXg1wqMIO9+ZsRik/s7PLwTaeCHVB7vRxUwLntZc8mzmTsLVr6HW1yLokcnhfURsn5zmSVdi3/xWWu1A== - dependencies: - ccount "^1.0.0" - mdast-util-find-and-replace "^1.1.0" - micromark "^2.11.3" - -mdast-util-gfm-strikethrough@^0.2.0: - version "0.2.3" - resolved "https://registry.yarnpkg.com/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-0.2.3.tgz#45eea337b7fff0755a291844fbea79996c322890" - integrity sha512-5OQLXpt6qdbttcDG/UxYY7Yjj3e8P7X16LzvpX8pIQPYJ/C2Z1qFGMmcw+1PZMUM3Z8wt8NRfYTvCni93mgsgA== - dependencies: - mdast-util-to-markdown "^0.6.0" - -mdast-util-gfm-table@^0.1.0: - version "0.1.6" - resolved "https://registry.yarnpkg.com/mdast-util-gfm-table/-/mdast-util-gfm-table-0.1.6.tgz#af05aeadc8e5ee004eeddfb324b2ad8c029b6ecf" - integrity sha512-j4yDxQ66AJSBwGkbpFEp9uG/LS1tZV3P33fN1gkyRB2LoRL+RR3f76m0HPHaby6F4Z5xr9Fv1URmATlRRUIpRQ== - dependencies: - markdown-table "^2.0.0" - mdast-util-to-markdown "~0.6.0" - -mdast-util-gfm-task-list-item@^0.1.0: - version "0.1.6" - resolved "https://registry.yarnpkg.com/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-0.1.6.tgz#70c885e6b9f543ddd7e6b41f9703ee55b084af10" - integrity sha512-/d51FFIfPsSmCIRNp7E6pozM9z1GYPIkSy1urQ8s/o4TC22BZ7DqfHFWiqBD23bc7J3vV1Fc9O4QIHBlfuit8A== - dependencies: - mdast-util-to-markdown "~0.6.0" - -mdast-util-gfm@^0.1.0: - version "0.1.2" - resolved "https://registry.yarnpkg.com/mdast-util-gfm/-/mdast-util-gfm-0.1.2.tgz#8ecddafe57d266540f6881f5c57ff19725bd351c" - integrity sha512-NNkhDx/qYcuOWB7xHUGWZYVXvjPFFd6afg6/e2g+SV4r9q5XUcCbV4Wfa3DLYIiD+xAEZc6K4MGaE/m0KDcPwQ== - dependencies: - mdast-util-gfm-autolink-literal "^0.1.0" - mdast-util-gfm-strikethrough "^0.2.0" - mdast-util-gfm-table "^0.1.0" - mdast-util-gfm-task-list-item "^0.1.0" - mdast-util-to-markdown "^0.6.1" - mdast-util-to-hast@10.0.1: version "10.0.1" resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-10.0.1.tgz#0cfc82089494c52d46eb0e3edb7a4eb2aea021eb" @@ -10338,28 +10191,11 @@ mdast-util-to-hast@10.0.1: unist-util-position "^3.0.0" unist-util-visit "^2.0.0" -mdast-util-to-markdown@^0.6.0, mdast-util-to-markdown@^0.6.1, mdast-util-to-markdown@~0.6.0: - version "0.6.5" - resolved "https://registry.yarnpkg.com/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.5.tgz#b33f67ca820d69e6cc527a93d4039249b504bebe" - integrity sha512-XeV9sDE7ZlOQvs45C9UKMtfTcctcaj/pGwH8YLbMHoMOXNNCn2LsqVQOqrF1+/NU8lKDAqozme9SCXWyo9oAcQ== - dependencies: - "@types/unist" "^2.0.0" - longest-streak "^2.0.0" - mdast-util-to-string "^2.0.0" - parse-entities "^2.0.0" - repeat-string "^1.0.0" - zwitch "^1.0.0" - mdast-util-to-string@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527" integrity sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A== -mdast-util-to-string@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz#b8cfe6a713e1091cb5b728fc48885a4767f8b97b" - integrity sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w== - mdn-data@2.0.14: version "2.0.14" resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50" @@ -10469,73 +10305,6 @@ microevent.ts@~0.1.1: resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0" integrity sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g== -micromark-extension-footnote@^0.3.0: - version "0.3.2" - resolved "https://registry.yarnpkg.com/micromark-extension-footnote/-/micromark-extension-footnote-0.3.2.tgz#129b74ef4920ce96719b2c06102ee7abb2b88a20" - integrity sha512-gr/BeIxbIWQoUm02cIfK7mdMZ/fbroRpLsck4kvFtjbzP4yi+OPVbnukTc/zy0i7spC2xYE/dbX1Sur8BEDJsQ== - dependencies: - micromark "~2.11.0" - -micromark-extension-frontmatter@^0.2.0: - version "0.2.2" - resolved "https://registry.yarnpkg.com/micromark-extension-frontmatter/-/micromark-extension-frontmatter-0.2.2.tgz#61b8e92e9213e1d3c13f5a59e7862f5ca98dfa53" - integrity sha512-q6nPLFCMTLtfsctAuS0Xh4vaolxSFUWUWR6PZSrXXiRy+SANGllpcqdXFv2z07l0Xz/6Hl40hK0ffNCJPH2n1A== - dependencies: - fault "^1.0.0" - -micromark-extension-gfm-autolink-literal@~0.5.0: - version "0.5.7" - resolved "https://registry.yarnpkg.com/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-0.5.7.tgz#53866c1f0c7ef940ae7ca1f72c6faef8fed9f204" - integrity sha512-ePiDGH0/lhcngCe8FtH4ARFoxKTUelMp4L7Gg2pujYD5CSMb9PbblnyL+AAMud/SNMyusbS2XDSiPIRcQoNFAw== - dependencies: - micromark "~2.11.3" - -micromark-extension-gfm-strikethrough@~0.6.5: - version "0.6.5" - resolved "https://registry.yarnpkg.com/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-0.6.5.tgz#96cb83356ff87bf31670eefb7ad7bba73e6514d1" - integrity sha512-PpOKlgokpQRwUesRwWEp+fHjGGkZEejj83k9gU5iXCbDG+XBA92BqnRKYJdfqfkrRcZRgGuPuXb7DaK/DmxOhw== - dependencies: - micromark "~2.11.0" - -micromark-extension-gfm-table@~0.4.0: - version "0.4.3" - resolved "https://registry.yarnpkg.com/micromark-extension-gfm-table/-/micromark-extension-gfm-table-0.4.3.tgz#4d49f1ce0ca84996c853880b9446698947f1802b" - integrity sha512-hVGvESPq0fk6ALWtomcwmgLvH8ZSVpcPjzi0AjPclB9FsVRgMtGZkUcpE0zgjOCFAznKepF4z3hX8z6e3HODdA== - dependencies: - micromark "~2.11.0" - -micromark-extension-gfm-tagfilter@~0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-0.3.0.tgz#d9f26a65adee984c9ccdd7e182220493562841ad" - integrity sha512-9GU0xBatryXifL//FJH+tAZ6i240xQuFrSL7mYi8f4oZSbc+NvXjkrHemeYP0+L4ZUT+Ptz3b95zhUZnMtoi/Q== - -micromark-extension-gfm-task-list-item@~0.3.0: - version "0.3.3" - resolved "https://registry.yarnpkg.com/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-0.3.3.tgz#d90c755f2533ed55a718129cee11257f136283b8" - integrity sha512-0zvM5iSLKrc/NQl84pZSjGo66aTGd57C1idmlWmE87lkMcXrTxg1uXa/nXomxJytoje9trP0NDLvw4bZ/Z/XCQ== - dependencies: - micromark "~2.11.0" - -micromark-extension-gfm@^0.3.0: - version "0.3.3" - resolved "https://registry.yarnpkg.com/micromark-extension-gfm/-/micromark-extension-gfm-0.3.3.tgz#36d1a4c089ca8bdfd978c9bd2bf1a0cb24e2acfe" - integrity sha512-oVN4zv5/tAIA+l3GbMi7lWeYpJ14oQyJ3uEim20ktYFAcfX1x3LNlFGGlmrZHt7u9YlKExmyJdDGaTt6cMSR/A== - dependencies: - micromark "~2.11.0" - micromark-extension-gfm-autolink-literal "~0.5.0" - micromark-extension-gfm-strikethrough "~0.6.5" - micromark-extension-gfm-table "~0.4.0" - micromark-extension-gfm-tagfilter "~0.3.0" - micromark-extension-gfm-task-list-item "~0.3.0" - -micromark@^2.11.3, micromark@~2.11.0, micromark@~2.11.3: - version "2.11.4" - resolved "https://registry.yarnpkg.com/micromark/-/micromark-2.11.4.tgz#d13436138eea826383e822449c9a5c50ee44665a" - integrity sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA== - dependencies: - debug "^4.0.0" - parse-entities "^2.0.0" - micromatch@4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9" @@ -13211,30 +12980,6 @@ remark-footnotes@2.0.0: resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-2.0.0.tgz#9001c4c2ffebba55695d2dd80ffb8b82f7e6303f" integrity sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ== -remark-footnotes@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-3.0.0.tgz#5756b56f8464fa7ed80dbba0c966136305d8cb8d" - integrity sha512-ZssAvH9FjGYlJ/PBVKdSmfyPc3Cz4rTWgZLI4iE/SX8Nt5l3o3oEjv3wwG5VD7xOjktzdwp5coac+kJV9l4jgg== - dependencies: - mdast-util-footnote "^0.1.0" - micromark-extension-footnote "^0.3.0" - -remark-frontmatter@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/remark-frontmatter/-/remark-frontmatter-3.0.0.tgz#ca5d996361765c859bd944505f377d6b186a6ec6" - integrity sha512-mSuDd3svCHs+2PyO29h7iijIZx4plX0fheacJcAoYAASfgzgVIcXGYSq9GFyYocFLftQs8IOmmkgtOovs6d4oA== - dependencies: - mdast-util-frontmatter "^0.2.0" - micromark-extension-frontmatter "^0.2.0" - -remark-gfm@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-1.0.0.tgz#9213643001be3f277da6256464d56fd28c3b3c0d" - integrity sha512-KfexHJCiqvrdBZVbQ6RopMZGwaXz6wFJEfByIuEwGf0arvITHjiKKZ1dpXujjH9KZdm1//XJQwgfnJ3lmXaDPA== - dependencies: - mdast-util-gfm "^0.1.0" - micromark-extension-gfm "^0.3.0" - remark-mdx@1.6.22: version "1.6.22" resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.22.tgz#06a8dab07dcfdd57f3373af7f86bd0e992108bbd" @@ -13271,13 +13016,6 @@ remark-parse@8.0.3: vfile-location "^3.0.0" xtend "^4.0.1" -remark-parse@^9.0.0: - version "9.0.0" - resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-9.0.0.tgz#4d20a299665880e4f4af5d90b7c7b8a935853640" - integrity sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw== - dependencies: - mdast-util-from-markdown "^0.8.0" - remark-slug@^6.0.0: version "6.1.0" resolved "https://registry.yarnpkg.com/remark-slug/-/remark-slug-6.1.0.tgz#0503268d5f0c4ecb1f33315c00465ccdd97923ce" @@ -13315,7 +13053,7 @@ repeat-element@^1.1.2: resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9" integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ== -repeat-string@^1.0.0, repeat-string@^1.5.4, repeat-string@^1.6.1: +repeat-string@^1.5.4, repeat-string@^1.6.1: version "1.6.1" resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637" integrity sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w== @@ -14882,11 +14620,6 @@ tr46@~0.0.3: resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw== -traverse@^0.6.6: - version "0.6.6" - resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137" - integrity sha512-kdf4JKs8lbARxWdp7RKdNzoJBhGUcIalSYibuGyHJbmk40pOysQ0+QPvlkCOICOivDWU2IJo2rkrxyTK2AH4fw== - tree-kill@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc" @@ -15068,11 +14801,6 @@ unbox-primitive@^1.0.2: has-symbols "^1.0.3" which-boxed-primitive "^1.0.2" -underscore@^1.13.2: - version "1.13.4" - resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.13.4.tgz#7886b46bbdf07f768e0052f1828e1dcab40c0dee" - integrity sha512-BQFnUDuAQ4Yf/cYY5LNrK9NCJFKriaRbD9uR1fTeXnBeoa97W0i41qkZfGO9pSo8I5KzjAcSY2XYtdf0oKd7KQ== - unfetch@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/unfetch/-/unfetch-4.2.0.tgz#7e21b0ef7d363d8d9af0fb929a5555f6ef97a3be" @@ -15121,18 +14849,6 @@ unified@9.2.0: trough "^1.0.0" vfile "^4.0.0" -unified@^9.2.2: - version "9.2.2" - resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.2.tgz#67649a1abfc3ab85d2969502902775eb03146975" - integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ== - dependencies: - bail "^1.0.0" - extend "^3.0.0" - is-buffer "^2.0.0" - is-plain-obj "^2.0.0" - trough "^1.0.0" - vfile "^4.0.0" - union-value@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847" @@ -15287,11 +15003,6 @@ update-browserslist-db@^1.0.4: escalade "^3.1.1" picocolors "^1.0.0" -update-section@^0.3.3: - version "0.3.3" - resolved "https://registry.yarnpkg.com/update-section/-/update-section-0.3.3.tgz#458f17820d37820dc60e20b86d94391b00123158" - integrity sha512-BpRZMZpgXLuTiKeiu7kK0nIPwGdyrqrs6EDSaXtjD/aQ2T+qVo9a5hRC3HN3iJjCMxNT/VxoLGQ7E/OzE5ucnw== - uri-js@^4.2.2: version "4.4.1" resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"