From 810c413c7d401658ade037ac80d946cd126a1beb Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Thu, 29 Aug 2024 08:15:14 +0200 Subject: [PATCH 1/5] Refactor `.header__clock` after they have been converted to react app --- src/stories/Blocks/header/Header.tsx | 4 ++-- src/stories/Blocks/header/header.scss | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) 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 From f86edfc5f2c9dc7475cdcbf271c4248f3e4ae2ea Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Thu, 29 Aug 2024 09:34:05 +0200 Subject: [PATCH 2/5] Add `OpeningHoursSidebar` story + Refactor `Dialog` to handle sidebars Two stories have been added. The first one is relevant for viewing the layout and animation within a dialog. The second one is for Chromatic to ensure accurate visual regression testing. - Added `isSidebar` prop to `Dialog` This adds a modifier class. - Added `onKeyDown` to `DisclosureControllable` To enable accessibility testing. - Configure Stylelint to bypass unsupported CSS features until the next update --- .stylelintrc | 19 ++++- base.scss | 1 + src/stories/Library/dialog/Dialog.tsx | 6 +- src/stories/Library/dialog/dialog.scss | 55 +++++++++++++++ .../DisclosureControllable.tsx | 11 ++- .../OpeningHoursSidebar.stories.tsx | 52 ++++++++++++++ .../OpeningHoursSidebar.tsx | 55 +++++++++++++++ .../OpeningHoursSidebarDetails.tsx | 36 ++++++++++ .../OpeningHoursSidebarSummary.tsx | 19 +++++ .../OpeningHoursSidebarWithDialog.stories.tsx | 66 +++++++++++++++++ .../opening-hours-libraries-data.ts | 30 ++++++++ .../opening-hours-sidebar.scss | 70 +++++++++++++++++++ 12 files changed, 415 insertions(+), 5 deletions(-) create mode 100644 src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.stories.tsx create mode 100644 src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.tsx create mode 100644 src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarDetails.tsx create mode 100644 src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarSummary.tsx create mode 100644 src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarWithDialog.stories.tsx create mode 100644 src/stories/Library/opening-hours-sidebar/opening-hours-libraries-data.ts create mode 100644 src/stories/Library/opening-hours-sidebar/opening-hours-sidebar.scss 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/base.scss b/base.scss index b3acf30d5..1cf2ffb2d 100644 --- a/base.scss +++ b/base.scss @@ -138,6 +138,7 @@ @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"; 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..56c6243c4 --- /dev/null +++ b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.tsx @@ -0,0 +1,55 @@ +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..7c486154e --- /dev/null +++ b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarDetails.tsx @@ -0,0 +1,36 @@ +import React from "react"; + +export type OpeningHoursItemType = { + term: string; + description: string; +}; + +type OpeningHoursSidebarDetailsType = { + openingHoursData: OpeningHoursItemType[]; + link: string; +}; + +const OpeningHoursSidebarDetails: React.FC = ({ + openingHoursData, + link, +}) => { + return ( +
+
+ {openingHoursData.map(({ term, description }, i) => ( +
+
{term}
+
+ {description} +
+
+ ))} +
+ + Se alle åbningstider + +
+ ); +}; + +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..1e4bc4294 --- /dev/null +++ b/src/stories/Library/opening-hours-sidebar/opening-hours-sidebar.scss @@ -0,0 +1,70 @@ +@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-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; + } +} From dd7c62fb7491bdd2c0d87431f2c7e9a5ab16b536 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Thu, 29 Aug 2024 11:48:23 +0200 Subject: [PATCH 3/5] Add `dialog` CSS to admin-base.scss This change avoids duplicate `dialog` CSS that was previously included in opening-hours-editor.scss. --- admin-base.scss | 1 + .../Library/opening-hours-editor/opening-hours-editor.scss | 4 ---- 2 files changed, 1 insertion(+), 4 deletions(-) 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/src/stories/Library/opening-hours-editor/opening-hours-editor.scss b/src/stories/Library/opening-hours-editor/opening-hours-editor.scss index e3fe5a5de..205224948 100644 --- a/src/stories/Library/opening-hours-editor/opening-hours-editor.scss +++ b/src/stories/Library/opening-hours-editor/opening-hours-editor.scss @@ -1,7 +1,3 @@ -// The Opening Hours Editor utilizes the Dialog component. -// We aim to consolidate all Opening Hours Editor styles into a single file. -// Because is used in drupal admin area -@import "../dialog/dialog"; .opening-hours-editor-form { display: grid; background: #f8f8f8; From 362992462aedce3e5d1e0f8e1541e243dbf11ce1 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Fri, 6 Sep 2024 13:09:08 +0200 Subject: [PATCH 4/5] Correct font css for `.opening-hours-sidebar__date` --- .../Library/opening-hours-sidebar/opening-hours-sidebar.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/stories/Library/opening-hours-sidebar/opening-hours-sidebar.scss b/src/stories/Library/opening-hours-sidebar/opening-hours-sidebar.scss index 1e4bc4294..2fb9a4288 100644 --- a/src/stories/Library/opening-hours-sidebar/opening-hours-sidebar.scss +++ b/src/stories/Library/opening-hours-sidebar/opening-hours-sidebar.scss @@ -22,6 +22,11 @@ @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; From d6ab9ae67ee09cfe60491a79c3c62856bab33473 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Fri, 6 Sep 2024 13:39:44 +0200 Subject: [PATCH 5/5] Corrected text in `OpeningHoursSidebar` Refers to: [DDFHER-42](https://reload.atlassian.net/browse/DDFHER-42) --- .../opening-hours-sidebar/OpeningHoursSidebar.stories.tsx | 4 ++-- .../Library/opening-hours-sidebar/OpeningHoursSidebar.tsx | 1 + .../opening-hours-sidebar/OpeningHoursSidebarDetails.tsx | 4 +++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.stories.tsx b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.stories.tsx index eb2b1a115..a28eb7f99 100644 --- a/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.stories.tsx +++ b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.stories.tsx @@ -9,13 +9,13 @@ export default { decorators: [withDesign], argTypes: { title: { - defaultValue: "Åbningstider", + defaultValue: "Dagens åbningstider", control: { type: "text", }, }, dateString: { - defaultValue: "I dag (fredag 28. maj)", + defaultValue: "fredag 28. maj", control: { type: "text", }, diff --git a/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.tsx b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.tsx index 56c6243c4..5acdf5085 100644 --- a/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.tsx +++ b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.tsx @@ -45,6 +45,7 @@ const OpeningHoursSidebar: FC = ({ ))} diff --git a/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarDetails.tsx b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarDetails.tsx index 7c486154e..732fefc18 100644 --- a/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarDetails.tsx +++ b/src/stories/Library/opening-hours-sidebar/OpeningHoursSidebarDetails.tsx @@ -8,11 +8,13 @@ export type OpeningHoursItemType = { type OpeningHoursSidebarDetailsType = { openingHoursData: OpeningHoursItemType[]; link: string; + name: string; }; const OpeningHoursSidebarDetails: React.FC = ({ openingHoursData, link, + name, }) => { return (
@@ -27,7 +29,7 @@ const OpeningHoursSidebarDetails: React.FC = ({ ))} - Se alle åbningstider + {`Gå til ${name}`}
);