diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 535d653df..b25833d1c 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -34,7 +34,7 @@ jobs: - run: yarn css:build - name: Publish to Chromatic - uses: chromaui/action@v11.7.1 + uses: chromaui/action@v11.10.2 with: token: ${{ secrets.GITHUB_TOKEN }} projectToken: c6b96f9648b6 diff --git a/.stylelintrc b/.stylelintrc index 6caf8a3eb..ce37096f6 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -1,5 +1,8 @@ { - "extends": ["stylelint-config-recommended-scss", "stylelint-prettier/recommended"], + "extends": [ + "stylelint-config-recommended-scss", + "stylelint-prettier/recommended" + ], "rules": { "max-nesting-depth": 3, "selector-class-pattern": "^[a-z][a-z0-9_-]*$", @@ -11,6 +14,18 @@ } ], "property-no-vendor-prefix": null, - "scss/dollar-variable-pattern": null + "scss/dollar-variable-pattern": null, + "property-no-unknown": [ + true, + { + "ignoreProperties": ["transition-behavior"] + } + ], + "scss/at-rule-no-unknown": [ + true, + { + "ignoreAtRules": ["starting-style"] + } + ] } } diff --git a/admin-base.scss b/admin-base.scss index f09652bd2..59ba8a893 100644 --- a/admin-base.scss +++ b/admin-base.scss @@ -1,6 +1,7 @@ @import "./src/styles/scss/tools"; // CSS sheets that are used to style the admin interface. +@import "./src/stories/Library/dialog/dialog"; @import "./src/stories/Library/opening-hours-editor/opening-hours-editor"; @import "./src/stories/Library/material-search/material-search"; @import "./src/stories/Library/cover/cover"; diff --git a/base.scss b/base.scss index b3acf30d5..5e798099d 100644 --- a/base.scss +++ b/base.scss @@ -21,6 +21,7 @@ @import "./src/stories/Library/counter/counter"; @import "./src/stories/Library/patron-info/patron-info"; @import "./src/stories/Library/Forms/checkbox/checkbox"; +@import "./src/stories/Library/Forms/radio/radio"; @import "./src/stories/Library/cover/cover"; @import "./src/stories/Library/Forms/input/input"; @import "./src/stories/Library/Forms/textarea/textarea"; @@ -138,11 +139,14 @@ @import "./src/stories/Library/opening-hours-editor/opening-hours-editor"; @import "./src/stories/Library/opening-hours/opening-hours"; @import "./src/stories/Library/opening-hours/opening-hours-skeleton"; +@import "./src/stories/Library/opening-hours-sidebar/opening-hours-sidebar"; @import "./src/stories/Library/filtered-event-list/filtered-event-list"; @import "./src/stories/Library/event-list-stacked/event-list-stacked"; @import "./src/stories/Library/material-search/material-search"; @import "./src/stories/Library/banner/banner"; @import "./src/stories/Library/simple-link/simple-link"; +@import "./src/stories/Library/search-full-text/search-full-text"; +@import "./src/stories/empty-view/empty-view"; // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest @import "./src/stories/Blocks/autosuggest/autosuggest"; diff --git a/package.json b/package.json index 03714cdaa..f55b62e65 100644 --- a/package.json +++ b/package.json @@ -51,7 +51,7 @@ "@testing-library/jest-dom": "^6.5.0", "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^14.5.2", - "@types/jest": "^29.5.12", + "@types/jest": "^29.5.13", "@types/node": "^16.0.0", "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", @@ -70,13 +70,13 @@ "eslint-plugin-import": "^2.30.0", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react": "^7.35.2", + "eslint-plugin-react": "^7.36.1", "eslint-plugin-react-hooks": "^4.6.2", "eslint-webpack-plugin": "^4.2.0", "flatpickr": "^4.6.13", "json": "^11.0.0", "markdownlint-cli2": "^0.4.0", - "postcss": "^8.4.45", + "postcss": "^8.4.47", "prettier": "^2.7.1", "react": "^17.0.2", "react-docgen-typescript": "^2.1.0", diff --git a/src/stories/Blocks/content-list-page/ContentListPage.tsx b/src/stories/Blocks/content-list-page/ContentListPage.tsx index fa72882ff..a46ff431d 100644 --- a/src/stories/Blocks/content-list-page/ContentListPage.tsx +++ b/src/stories/Blocks/content-list-page/ContentListPage.tsx @@ -3,6 +3,7 @@ import ContentList from "../../Library/content-list/ContentList"; import contentListData from "../../Library/content-list/ContentListData"; import { InputLabel } from "../../Library/input-label/InputLabel"; import { Dropdown } from "../../Library/dropdown/Dropdown"; +import SearchFullText from "../../Library/search-full-text/SearchFullText"; const filters = [ { @@ -47,6 +48,10 @@ const ContentListPage: React.FC = () => {
  • {
    • ); })} +
  • + + +
    • diff --git a/src/stories/Blocks/content-list-page/content-list-page.scss b/src/stories/Blocks/content-list-page/content-list-page.scss index 6b9c05bed..ed56a83f2 100644 --- a/src/stories/Blocks/content-list-page/content-list-page.scss +++ b/src/stories/Blocks/content-list-page/content-list-page.scss @@ -33,3 +33,9 @@ flex-direction: row; } } + +.content-list-page__filter--right { + @include media-query__small { + margin-left: auto; + } +} diff --git a/src/stories/Blocks/form/form.scss b/src/stories/Blocks/form/form.scss index a9207e9aa..2a7b079fd 100644 --- a/src/stories/Blocks/form/form.scss +++ b/src/stories/Blocks/form/form.scss @@ -59,3 +59,35 @@ max-width: 550px; } } + +.dpl-fieldset { + @include typography($typo__small-caption); + + border: 0; + padding-block-start: 0; + padding-block-end: 0; + padding-inline-start: 0; + padding-inline-end: 0; + margin-inline-start: 0; + margin-inline-end: 0; + margin-bottom: $s-lg; + + legend { + @include typography($typo__body-medium); + color: $color__text-secondary-gray; + padding-inline-start: 0; + padding-inline-end: 0; + margin-bottom: 6px; + max-width: 550px; + + &--full-width { + max-width: 750px; + } + + &:has(p) { + @include typography($typo__links); + color: $color__global-tertiary-2; + max-width: 550px; + } + } +} diff --git a/src/stories/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx index b46b6d62c..e891f2a4b 100644 --- a/src/stories/Blocks/header/Header.tsx +++ b/src/stories/Blocks/header/Header.tsx @@ -150,10 +150,10 @@ export const Header = ({
    - +
    diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss index 2f1f05f99..53eb1b06e 100644 --- a/src/stories/Blocks/header/header.scss +++ b/src/stories/Blocks/header/header.scss @@ -214,6 +214,7 @@ } .header__clock { + height: 100%; border-left: 1px solid $color__global-tertiary-1; display: none; @@ -224,9 +225,12 @@ .header__clock-items { text-decoration: none; + border: none; + cursor: pointer; display: flex; flex-direction: column; align-items: center; + width: 100%; } // has-burger-menu is added dynamically using JS, by calculating if there diff --git a/src/stories/Library/Forms/checkbox/Checkbox.stories.tsx b/src/stories/Library/Forms/checkbox/Checkbox.stories.tsx index 8d30847ae..079653533 100644 --- a/src/stories/Library/Forms/checkbox/Checkbox.stories.tsx +++ b/src/stories/Library/Forms/checkbox/Checkbox.stories.tsx @@ -1,6 +1,7 @@ import { ComponentMeta, ComponentStory } from "@storybook/react"; import { withDesign } from "storybook-addon-designs"; import { Checkbox } from "./Checkbox"; +import { CheckboxDrupal } from "./CheckboxDrupal"; export default { title: "Library / Forms / Checkbox", @@ -28,6 +29,17 @@ export default { defaultValue: "", }, }, + includeHeadline: { + control: { + type: "null", + }, + }, + description: { + control: { + type: "text", + defaultValue: "This is a description.", + }, + }, // We disable the isChecked control, since it is not possible to // get the states from the React component to work with Storybook controls. isChecked: { @@ -90,3 +102,21 @@ Multiple.args = { isChecked: false, label: "Checkbox", }; + +// The stories below mimic HTML structure from Drupal for checkbox usage. +const DrupalCheckboxExample: ComponentStory = (args) => ( + +); + +export const DrupalCheckbox = DrupalCheckboxExample.bind({}); +DrupalCheckbox.args = { + label: "Toggle this checkbox", + description: "This is a description.", +}; + +export const DrupalMultiple = DrupalCheckboxExample.bind({}); +DrupalMultiple.args = { + label: "Toggle this checkbox", + includeHeadline: true, + description: "This is a description.", +}; diff --git a/src/stories/Library/Forms/checkbox/CheckboxDrupal.tsx b/src/stories/Library/Forms/checkbox/CheckboxDrupal.tsx new file mode 100644 index 000000000..1f6ed1974 --- /dev/null +++ b/src/stories/Library/Forms/checkbox/CheckboxDrupal.tsx @@ -0,0 +1,94 @@ +import clsx from "clsx"; +import React from "react"; + +export type CheckboxDrupalProps = { + label: string; + validation?: string; + classNames?: string; + includeHeadline?: boolean; + description?: string; +}; + +// This component and styling are meant to target specifically the Drupal HTML structure. +// Note that some of the classes are also copied from there. The classes we created ourselves +// can be found in the ./checkbox.scss file in this directory. +export const CheckboxDrupal: React.FC = ({ + label, + validation, + classNames, + includeHeadline, + description, +}) => { + const checkboxElement = (checkboxLabel: string) => { + return ( +
    + + + {!!description && ( +
    +
    + {description} +
    +
    + )} + {validation &&
    {validation}
    } +
    + ); + }; + + const checkboxElementMultiple = (checkboxLabel: string) => { + return ( +
    + + Multiple checkboxes title + +
    +
    + {[1, 2, 3, 4, 5].map((value) => { + // Append a number to make it easier to distinguish between each entry. + return checkboxElement(`${checkboxLabel} ${value}`); + })} +
    +
    +
    +
    +
    +
    + ); + }; + + return ( +
    + {includeHeadline && checkboxElementMultiple(label || "")} + {!includeHeadline && checkboxElement(label || "label")} +
    + ); +}; diff --git a/src/stories/Library/Forms/checkbox/checkbox.scss b/src/stories/Library/Forms/checkbox/checkbox.scss index da72b4632..2cf21cd8b 100644 --- a/src/stories/Library/Forms/checkbox/checkbox.scss +++ b/src/stories/Library/Forms/checkbox/checkbox.scss @@ -94,3 +94,38 @@ transform: scale(0.9); } } + +// Classes below are meant to target specifically overwriting Drupal component styling. +// These checkboxes are always used inside a .dpl-input container in Drupal. +.dpl-form { + .dpl-input.checkbox-override { + display: flex; + flex-direction: row; + align-items: center; + padding: 6px $s-sm 6px 0; + margin-bottom: 0; + } + + .dpl-input.checkbox-override input { + accent-color: black; + width: 18px; + height: 18px; + cursor: pointer; + margin-left: 0; + } + + .dpl-input.checkbox-override .input-label, + .dpl-input.checkbox-override .description { + @include typography($typo__small-caption); + color: $color__text-secondary-gray; + padding: 0 $s-sm 0 $s-sm; + width: fit-content; + max-width: 300px; + margin: 0; + height: auto; + } + + .dpl-input.checkbox-override .input-label { + cursor: pointer; + } +} diff --git a/src/stories/Library/Forms/radio/Radio.stories.tsx b/src/stories/Library/Forms/radio/Radio.stories.tsx new file mode 100644 index 000000000..00fab0358 --- /dev/null +++ b/src/stories/Library/Forms/radio/Radio.stories.tsx @@ -0,0 +1,36 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import { RadioDrupal } from "./RadioDrupal"; + +export default { + title: "Library / Forms / Radio", + component: RadioDrupal, + decorators: [withDesign], + argTypes: { + legend: { + control: { + type: "text", + defaultValue: "This is a legend.", + }, + }, + description: { + control: { + type: "text", + defaultValue: "This is a description.", + }, + }, + }, + parameters: { + layout: "centered", + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const drupalRadio = Template.bind({}); +drupalRadio.args = { + legend: "Try this radio", + description: "This is a description.", +}; diff --git a/src/stories/Library/Forms/radio/RadioDrupal.tsx b/src/stories/Library/Forms/radio/RadioDrupal.tsx new file mode 100644 index 000000000..95d710215 --- /dev/null +++ b/src/stories/Library/Forms/radio/RadioDrupal.tsx @@ -0,0 +1,61 @@ +export type CheckboxProps = { + legend?: string; + description?: string; +}; + +export const RadioDrupal: React.FC = ({ + legend, + description, +}) => { + return ( +
    +
    + + {legend} + +
    +
    +
    + {/* this id is only there because it emulates the Drupal id */} + + +
    +
    + {description} +
    +
    +
    +
    + + +
    +
    + {description} +
    +
    +
    +
    +
    +
    +
    + ); +}; diff --git a/src/stories/Library/Forms/radio/radio.scss b/src/stories/Library/Forms/radio/radio.scss new file mode 100644 index 000000000..617ccd5a5 --- /dev/null +++ b/src/stories/Library/Forms/radio/radio.scss @@ -0,0 +1,32 @@ +.dpl-form { + .dpl-input.radio-override { + display: flex; + flex-direction: row; + align-items: center; + padding: 6px $s-sm 6px 0; + margin-bottom: 0; + + input[type="radio"] { + accent-color: black; + width: 18px; + height: 18px; + cursor: pointer; + margin: 3px 3px 3px 0; + } + + label, + .description { + @include typography($typo__small-caption); + color: $color__text-secondary-gray; + padding: 0 $s-sm 0 $s-sm; + width: fit-content; + max-width: 300px; + margin: 0; + height: auto; + } + + label { + cursor: pointer; + } + } +} diff --git a/src/stories/Library/Modals/modal-pause/modal-pause.scss b/src/stories/Library/Modals/modal-pause/modal-pause.scss index 65a2d3bd6..01cd2b874 100644 --- a/src/stories/Library/Modals/modal-pause/modal-pause.scss +++ b/src/stories/Library/Modals/modal-pause/modal-pause.scss @@ -38,7 +38,7 @@ box-sizing: border-box; background-color: $color__global-primary; min-width: 100%; - height: 50px; + height: $form_input_height; padding: 0 10px; color: $color__text-secondary-gray; @include typography($typo__button); diff --git a/src/stories/Library/dialog/Dialog.tsx b/src/stories/Library/dialog/Dialog.tsx index 1b2655369..e871a04e8 100644 --- a/src/stories/Library/dialog/Dialog.tsx +++ b/src/stories/Library/dialog/Dialog.tsx @@ -1,15 +1,17 @@ +import clsx from "clsx"; import React, { forwardRef } from "react"; export type DialogType = { children: React.ReactNode; closeDialog: () => void; + isSidebar?: boolean; }; const Dialog = forwardRef( - ({ children, closeDialog }, ref) => { + ({ children, closeDialog, isSidebar }, ref) => { return ( { diff --git a/src/stories/Library/dialog/dialog.scss b/src/stories/Library/dialog/dialog.scss index f1064c573..929376d3f 100644 --- a/src/stories/Library/dialog/dialog.scss +++ b/src/stories/Library/dialog/dialog.scss @@ -13,3 +13,58 @@ background-color: transparent; padding: 10px; } + +.dialog--sidebar { + // Reset dialog + max-height: unset; + max-width: unset; + border: 0; + border-radius: 0; + // Apply custom + background-color: $color__global-primary; + position: fixed; + height: 100vh; + width: 100%; + left: auto; + + @include media-query__small { + width: 435px; + } + // Apply animation + // The 'allow-discrete' property is necessary for animating the dialog + transition-behavior: allow-discrete; + transition-property: translate overlay display; + transition-duration: 0.7s; + transition-timing-function: ease-out; + translate: 100vw 0; +} + +.dialog--sidebar[open] { + translate: 0 0; +} + +@starting-style { + .dialog--sidebar[open] { + translate: 100vw 0; + } +} + +.dialog--sidebar[open]::backdrop { + animation: backdrop-fade-in 0.25s forwards; +} + +@keyframes backdrop-fade-in { + from { + background-color: rgb(0 0 0 / 0%); + } + to { + background-color: rgb(0 0 0 / 25%); + } +} + +// This sets the correct sidebar width for accurate visual regression testing. +.storybook-dialog-sidebar { + @include media-query__small { + width: 435px; + } +} diff --git a/src/stories/Library/disclosure-controllable/DisclosureControllable.tsx b/src/stories/Library/disclosure-controllable/DisclosureControllable.tsx index 70cff748e..80af0ba40 100644 --- a/src/stories/Library/disclosure-controllable/DisclosureControllable.tsx +++ b/src/stories/Library/disclosure-controllable/DisclosureControllable.tsx @@ -25,13 +25,22 @@ const DisclosureControllable: React.FunctionComponent< setIsOpen(!isOpen); }, [isOpen]); + const onKeyDown = useCallback( + (e: { key: string }) => { + if (e.key === "Enter" || e.key === " ") { + toggleOpen(); + } + }, + [toggleOpen] + ); + const disclosureId = `disclosure-${id}`; return (
    ; + +const Template: ComponentStory = (args) => { + return ( +
    + ; +
    + ); +}; + +export const Default = Template.bind({}); diff --git a/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.tsx b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.tsx new file mode 100644 index 000000000..5acdf5085 --- /dev/null +++ b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.tsx @@ -0,0 +1,56 @@ +import { FC } from "react"; +import { ReactComponent as WatchStaticIcon } from "../../../public/icons/basic/icon-watch-static.svg"; +import DisclosureControllable from "../disclosure-controllable/DisclosureControllable"; +import OpeningHoursSidebarSummary from "./OpeningHoursSidebarSummary"; +import OpeningHoursSidebarDetails, { + OpeningHoursItemType, +} from "./OpeningHoursSidebarDetails"; + +type OpeningHoursSidebarType = { + title: string; + dateString: string; + libraries: { + id: string; + name: string; + openingHoursData: OpeningHoursItemType[]; + }[]; + link: string; +}; + +const OpeningHoursSidebar: FC = ({ + title, + dateString, + libraries, + link, +}) => { + return ( +
    +
    + +
    +

    {title}

    +

    {dateString}

    +
    +
    + + {libraries.map(({ id, name, openingHoursData }, i) => ( + } + > + + + ))} +
    + ); +}; + +export default OpeningHoursSidebar; diff --git a/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarDetails.tsx b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarDetails.tsx new file mode 100644 index 000000000..732fefc18 --- /dev/null +++ b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarDetails.tsx @@ -0,0 +1,38 @@ +import React from "react"; + +export type OpeningHoursItemType = { + term: string; + description: string; +}; + +type OpeningHoursSidebarDetailsType = { + openingHoursData: OpeningHoursItemType[]; + link: string; + name: string; +}; + +const OpeningHoursSidebarDetails: React.FC = ({ + openingHoursData, + link, + name, +}) => { + return ( +
    +
    + {openingHoursData.map(({ term, description }, i) => ( +
    +
    {term}
    +
    + {description} +
    +
    + ))} +
    + + {`Gå til ${name}`} + +
    + ); +}; + +export default OpeningHoursSidebarDetails; diff --git a/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarSummary.tsx b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarSummary.tsx new file mode 100644 index 000000000..cabe6d47d --- /dev/null +++ b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarSummary.tsx @@ -0,0 +1,19 @@ +import { FC } from "react"; +import { ReactComponent as ExpandMoreIcon } from "../../../public/icons/collection/ExpandMore.svg"; + +type OpeningHoursSidebarSummaryType = { + name: string; +}; + +const OpeningHoursSidebarSummary: FC = ({ + name, +}) => { + return ( + <> +

    {name}

    + + + ); +}; + +export default OpeningHoursSidebarSummary; diff --git a/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarWithDialog.stories.tsx b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarWithDialog.stories.tsx new file mode 100644 index 000000000..aa0f1d193 --- /dev/null +++ b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarWithDialog.stories.tsx @@ -0,0 +1,66 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import OpeningHoursSidebar from "./OpeningHoursSidebar"; +import Dialog from "../dialog/Dialog"; +import useDialog from "../dialog/useDialog"; +import defaultLibraries from "./opening-hours-libraries-data"; + +export default { + title: "Library/Opening Hours Sidebar/With Dialog", + component: OpeningHoursSidebar, + decorators: [withDesign], + argTypes: { + title: { + defaultValue: "Åbningstider", + control: { + type: "text", + }, + }, + dateString: { + defaultValue: "I dag (fredag 28. maj)", + control: { + type: "text", + }, + }, + libraries: { + control: { + type: "object", + }, + defaultValue: defaultLibraries, + }, + link: { + defaultValue: "#", + control: { + type: "text", + }, + }, + }, + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/design/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=7760-59368&t=FtYoMFQsdy52r88A-4", + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => { + const { dialogContent, openDialogWithContent, closeDialog, dialogRef } = + useDialog(); + + return ( + <> + + + + {dialogContent} + + + ); +}; + +export const Default = Template.bind({}); diff --git a/src/stories/Library/opening-hours-sidebar/opening-hours-libraries-data.ts b/src/stories/Library/opening-hours-sidebar/opening-hours-libraries-data.ts new file mode 100644 index 000000000..705729767 --- /dev/null +++ b/src/stories/Library/opening-hours-sidebar/opening-hours-libraries-data.ts @@ -0,0 +1,30 @@ +const openingHoursData = [ + { term: "Selvbetjening & læsesale", description: "7:00 - 22:00" }, + { term: "Personlig betjening:", description: "9:00 - 16:00" }, + { term: "Telefon (+45 30 30 30 30):", description: "7:00 - 22:00" }, +]; + +const defaultLibraries = [ + { + id: "1", + name: "Hovedbiblioteket", + openingHoursData, + }, + { + id: "2", + name: "BIBLIOTEKET Rentemestervej", + openingHoursData, + }, + { + id: "3", + name: "Bibliotekshuset", + openingHoursData, + }, + { + id: "4", + name: "Blågårdens Bibliotek", + openingHoursData, + }, +]; + +export default defaultLibraries; diff --git a/src/stories/Library/opening-hours-sidebar/opening-hours-sidebar.scss b/src/stories/Library/opening-hours-sidebar/opening-hours-sidebar.scss new file mode 100644 index 000000000..2fb9a4288 --- /dev/null +++ b/src/stories/Library/opening-hours-sidebar/opening-hours-sidebar.scss @@ -0,0 +1,75 @@ +@mixin opening-hours-sidebar-padding { + padding: $s-lg $s-md; + + @include media-query__small { + padding: $s-lg $s-xl; + } +} + +.opening-hours-sidebar__header { + @include opening-hours-sidebar-padding; + display: flex; + align-items: center; + justify-content: space-between; +} + +.opening-hours-sidebar__texts { + align-items: end; + text-align: end; +} + +.opening-hours-sidebar__title { + @include typography($typo__h4); +} + +.opening-hours-sidebar__date { + @include typography($typo__body-medium); + font-weight: $font__weight--normal; +} + +.opening-hours-sidebar-details { + @include opening-hours-sidebar-padding; + border-top: 1px solid $color__global-tertiary-1; +} + +.opening-hours-sidebar-summary { + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; +} + +.opening-hours-sidebar-summary__icon { + transition: transform 0.3s; +} + +.opening-hours-sidebar-summary[aria-expanded="true"] + .opening-hours-sidebar-summary__icon { + transform: rotateZ(180deg); +} + +.opening-hours-sidebar-summary__name { + @include typography($typo__body-placeholder); + font-weight: $font__weight--semi-bold; +} + +.opening-hours-sidebar-details__content { + @include typography($typo__body-placeholder); + margin-top: $s-lg; + color: $color__global-grey; +} + +.opening-hours-sidebar-details__item { + display: flex; + justify-content: space-between; +} + +.opening-hours-sidebar__link { + @include link-tag; + display: block; + margin-top: $s-lg; + + @include media-query__small { + font-size: 14px; + } +} diff --git a/src/stories/Library/search-full-text/SearchFullText.stories.tsx b/src/stories/Library/search-full-text/SearchFullText.stories.tsx new file mode 100644 index 000000000..edd2dd73a --- /dev/null +++ b/src/stories/Library/search-full-text/SearchFullText.stories.tsx @@ -0,0 +1,21 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; + +import SearchFullText from "./SearchFullText"; + +export default { + title: "Library / Search Full Text", + component: SearchFullText, + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/design/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?node-id=7477-41886&t=0ImS2cbKrXQEOurg-4", + }, + layout: "fullscreen", + }, +} as ComponentMeta; + +const Template: ComponentStory = () => ( + +); + +export const Default = Template.bind({}); diff --git a/src/stories/Library/search-full-text/SearchFullText.tsx b/src/stories/Library/search-full-text/SearchFullText.tsx new file mode 100644 index 000000000..f4c9b1bb7 --- /dev/null +++ b/src/stories/Library/search-full-text/SearchFullText.tsx @@ -0,0 +1,16 @@ +import SearchIcon from "../../../public/icons/basic/icon-search.svg"; + +const SearchFullText = () => { + return ( +
    + + +
    + ); +}; + +export default SearchFullText; diff --git a/src/stories/Library/search-full-text/search-full-text.scss b/src/stories/Library/search-full-text/search-full-text.scss new file mode 100644 index 000000000..e7e577d83 --- /dev/null +++ b/src/stories/Library/search-full-text/search-full-text.scss @@ -0,0 +1,28 @@ +.search-full-text { + @include typography($typo__button); + font-weight: $font__weight--normal; + @extend %default-focus-within; + width: 100%; + border: $color__global-tertiary-1 1px solid; + display: flex; + align-items: center; + padding: 0 20px; + + @include media-query__small { + width: fit-content; + } +} + +.search-full-text__input { + width: 100%; + outline: none; + height: $form_input_height; + background-color: transparent; + border: none; +} + +.search-full-text__button { + border: none; + display: grid; + place-items: center; +} diff --git a/src/stories/empty-view/EmptyView.stories.tsx b/src/stories/empty-view/EmptyView.stories.tsx new file mode 100644 index 000000000..59f60e15c --- /dev/null +++ b/src/stories/empty-view/EmptyView.stories.tsx @@ -0,0 +1,11 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import EmptyView from "./EmptyView"; + +export default { + title: "Library / Empty view", + component: EmptyView, +} as ComponentMeta; + +const Template: ComponentStory = () => ; + +export const Default = Template.bind({}); diff --git a/src/stories/empty-view/EmptyView.tsx b/src/stories/empty-view/EmptyView.tsx new file mode 100644 index 000000000..611960bca --- /dev/null +++ b/src/stories/empty-view/EmptyView.tsx @@ -0,0 +1,10 @@ +const EmptyView = () => { + return ( +
    + Unfortunately, there were no results for your search. Try using a + different search term. +
    + ); +}; + +export default EmptyView; diff --git a/src/stories/empty-view/empty-view.scss b/src/stories/empty-view/empty-view.scss new file mode 100644 index 000000000..e1da062bf --- /dev/null +++ b/src/stories/empty-view/empty-view.scss @@ -0,0 +1,5 @@ +.empty-view { + @include layout-container($block-max-width__large); + margin-top: $s-2xl; + text-align: center; +} diff --git a/src/styles/scss/tools.scss b/src/styles/scss/tools.scss index 775f30cac..dd827793b 100644 --- a/src/styles/scss/tools.scss +++ b/src/styles/scss/tools.scss @@ -5,6 +5,7 @@ @import "tools/variables.colors"; @import "tools/variables.breakpoints"; @import "tools/variables.typography"; +@import "tools/variables.form"; @import "tools/mixins.tools"; @import "tools/mixins.media-query"; @import "tools/mixins.misc"; diff --git a/src/styles/scss/tools/placeholder.scss b/src/styles/scss/tools/placeholder.scss index ba80c0f8d..668650e74 100644 --- a/src/styles/scss/tools/placeholder.scss +++ b/src/styles/scss/tools/placeholder.scss @@ -112,6 +112,12 @@ } } +%default-focus-within { + &:focus-within { + outline: 2px solid $color__text-primary-black; + } +} + %identity-placeholder-pseudo { background-color: var(--tint-color-120); position: relative; diff --git a/src/styles/scss/tools/variables.form.scss b/src/styles/scss/tools/variables.form.scss new file mode 100644 index 000000000..b456784b6 --- /dev/null +++ b/src/styles/scss/tools/variables.form.scss @@ -0,0 +1 @@ +$form_input_height: 50px; diff --git a/yarn.lock b/yarn.lock index 128a4d228..e88654476 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3038,10 +3038,10 @@ dependencies: "@types/istanbul-lib-report" "*" -"@types/jest@^29.5.12": - version "29.5.12" - resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.12.tgz#7f7dc6eb4cf246d2474ed78744b05d06ce025544" - integrity sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw== +"@types/jest@^29.5.13": + version "29.5.13" + resolved "https://registry.yarnpkg.com/@types/jest/-/jest-29.5.13.tgz#8bc571659f401e6a719a7bf0dbcb8b78c71a8adc" + integrity sha512-wd+MVEZCHt23V0/L642O5APvspWply/rGY5BcW4SUETo2UzPU3Z26qr8jC2qxpimI2jjx9h7+2cj2FwIr01bXg== dependencies: expect "^29.0.0" pretty-format "^29.0.0" @@ -4754,10 +4754,10 @@ bn.js@^5.0.0, bn.js@^5.2.1: resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70" integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ== -body-parser@1.20.2: - version "1.20.2" - resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd" - integrity sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA== +body-parser@1.20.3: + version "1.20.3" + resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6" + integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g== dependencies: bytes "3.1.2" content-type "~1.0.5" @@ -4767,7 +4767,7 @@ body-parser@1.20.2: http-errors "2.0.0" iconv-lite "0.4.24" on-finished "2.4.1" - qs "6.11.0" + qs "6.13.0" raw-body "2.5.2" type-is "~1.6.18" unpipe "1.0.0" @@ -6724,6 +6724,11 @@ encodeurl@~1.0.2: resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w== +encodeurl@~2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58" + integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg== + end-of-stream@^1.0.0, end-of-stream@^1.1.0: version "1.4.4" resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0" @@ -7299,10 +7304,10 @@ eslint-plugin-react-hooks@^4.2.0, eslint-plugin-react-hooks@^4.6.2: resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz#c829eb06c0e6f484b3fbb85a97e57784f328c596" integrity sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ== -eslint-plugin-react@^7.21.5, eslint-plugin-react@^7.35.2: - version "7.35.2" - resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.35.2.tgz#d32500d3ec268656d5071918bfec78cfd8b070ed" - integrity sha512-Rbj2R9zwP2GYNcIak4xoAMV57hrBh3hTaR0k7hVjwCQgryE/pw5px4b13EYjduOI0hfXyZhwBxaGpOTbWSGzKQ== +eslint-plugin-react@^7.21.5, eslint-plugin-react@^7.36.1: + version "7.36.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.36.1.tgz#f1dabbb11f3d4ebe8b0cf4e54aff4aee81144ee5" + integrity sha512-/qwbqNXZoq+VP30s1d4Nc1C5GTxjJQjk4Jzs4Wq2qzxFM7dSmuG2UkIjg2USMLh3A/aVcUNrK7v0J5U1XEGGwA== dependencies: array-includes "^3.1.8" array.prototype.findlast "^1.2.5" @@ -7703,36 +7708,36 @@ expect@^29.0.0: jest-util "^29.7.0" express@^4.17.1: - version "4.19.2" - resolved "https://registry.yarnpkg.com/express/-/express-4.19.2.tgz#e25437827a3aa7f2a827bc8171bbbb664a356465" - integrity sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q== + version "4.21.0" + resolved "https://registry.yarnpkg.com/express/-/express-4.21.0.tgz#d57cb706d49623d4ac27833f1cbc466b668eb915" + integrity sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng== dependencies: accepts "~1.3.8" array-flatten "1.1.1" - body-parser "1.20.2" + body-parser "1.20.3" content-disposition "0.5.4" content-type "~1.0.4" cookie "0.6.0" cookie-signature "1.0.6" debug "2.6.9" depd "2.0.0" - encodeurl "~1.0.2" + encodeurl "~2.0.0" escape-html "~1.0.3" etag "~1.8.1" - finalhandler "1.2.0" + finalhandler "1.3.1" fresh "0.5.2" http-errors "2.0.0" - merge-descriptors "1.0.1" + merge-descriptors "1.0.3" methods "~1.1.2" on-finished "2.4.1" parseurl "~1.3.3" - path-to-regexp "0.1.7" + path-to-regexp "0.1.10" proxy-addr "~2.0.7" - qs "6.11.0" + qs "6.13.0" range-parser "~1.2.1" safe-buffer "5.2.1" - send "0.18.0" - serve-static "1.15.0" + send "0.19.0" + serve-static "1.16.2" setprototypeof "1.2.0" statuses "2.0.1" type-is "~1.6.18" @@ -7929,13 +7934,13 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" -finalhandler@1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32" - integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg== +finalhandler@1.3.1: + version "1.3.1" + resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019" + integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ== dependencies: debug "2.6.9" - encodeurl "~1.0.2" + encodeurl "~2.0.0" escape-html "~1.0.3" on-finished "2.4.1" parseurl "~1.3.3" @@ -11173,10 +11178,10 @@ meow@^9.0.0: type-fest "^0.18.0" yargs-parser "^20.2.3" -merge-descriptors@1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" - integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w== +merge-descriptors@1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5" + integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ== merge-stream@^2.0.0: version "2.0.0" @@ -12248,10 +12253,10 @@ path-parse@^1.0.6, path-parse@^1.0.7: resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== -path-to-regexp@0.1.7: - version "0.1.7" - resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" - integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ== +path-to-regexp@0.1.10: + version "0.1.10" + resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b" + integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w== path-type@^1.0.0: version "1.1.0" @@ -12295,10 +12300,10 @@ picocolors@^0.2.1: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f" integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA== -picocolors@^1.0.0, picocolors@^1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1" - integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew== +picocolors@^1.0.0, picocolors@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59" + integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw== picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1: version "2.3.1" @@ -13105,14 +13110,14 @@ postcss@^7, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, po picocolors "^0.2.1" source-map "^0.6.1" -postcss@^8.1.0, postcss@^8.4.19, postcss@^8.4.45: - version "8.4.45" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.45.tgz#538d13d89a16ef71edbf75d895284ae06b79e603" - integrity sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q== +postcss@^8.1.0, postcss@^8.4.19, postcss@^8.4.47: + version "8.4.47" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365" + integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ== dependencies: nanoid "^3.3.7" - picocolors "^1.0.1" - source-map-js "^1.2.0" + picocolors "^1.1.0" + source-map-js "^1.2.1" prelude-ls@^1.2.1: version "1.2.1" @@ -13357,7 +13362,14 @@ q@^1.1.2: resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw== -qs@6.11.0, qs@^6.10.0, qs@^6.4.0: +qs@6.13.0: + version "6.13.0" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906" + integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg== + dependencies: + side-channel "^1.0.6" + +qs@^6.10.0, qs@^6.4.0: version "6.11.0" resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a" integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q== @@ -14475,10 +14487,10 @@ semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7: dependencies: lru-cache "^6.0.0" -send@0.18.0: - version "0.18.0" - resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be" - integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg== +send@0.19.0: + version "0.19.0" + resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8" + integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw== dependencies: debug "2.6.9" depd "2.0.0" @@ -14539,15 +14551,15 @@ serve-index@^1.9.1: mime-types "~2.1.17" parseurl "~1.3.2" -serve-static@1.15.0: - version "1.15.0" - resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540" - integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g== +serve-static@1.16.2: + version "1.16.2" + resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296" + integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw== dependencies: - encodeurl "~1.0.2" + encodeurl "~2.0.0" escape-html "~1.0.3" parseurl "~1.3.3" - send "0.18.0" + send "0.19.0" set-blocking@^2.0.0: version "2.0.0" @@ -14796,10 +14808,10 @@ source-list-map@^2.0.0, source-list-map@^2.0.1: resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw== -"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af" - integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg== +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46" + integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA== source-map-resolve@^0.5.0, source-map-resolve@^0.5.2: version "0.5.3"