Merge pull request #713 from danskernesdigitalebibliotek/DDFFORM-822-…

…modal-til-abningstider

Ddfform 822 modal til abningstider

.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"]
+      }
+    ]
   }
 }

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";

base.scss

@@ -139,6 +139,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";

src/stories/Blocks/header/Header.tsx

@@ -150,10 +150,10 @@ export const Header = ({
 
         <div className="header__clock">
           <Pagefold isInheriting={false} isAContainer={false} size="medium" />
-          <a href="#" className="header__clock-items">
+          <button className="header__clock-items">
             <WatchStaticIcon className="mb-8" />
             <span className="text-small-caption">Opening hours</span>
-          </a>
+          </button>
         </div>
       </header>
       <HeaderSidebarNav menuLinks={menuItems} />

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

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<HTMLDialogElement, DialogType>(
-  ({ children, closeDialog }, ref) => {
+  ({ children, closeDialog, isSidebar }, ref) => {
     return (
       <dialog
-        className="dialog"
+        className={clsx("dialog", isSidebar && "dialog--sidebar")}
         ref={ref}
         // Close dialog when clicking outside of it (::backdrop pseudo-element)
         onClick={({ currentTarget, target }) => {

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;
+  }
+}

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 (
     <div className={detailsClassName}>
       <div
         className={summaryClassName}
         onClick={toggleOpen}
-        onKeyDown={toggleOpen}
+        onKeyDown={onKeyDown}
         role="button"
         tabIndex={0}
         aria-controls={disclosureId}

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;

src/stories/Library/opening-hours-sidebar/OpeningHoursSidebar.stories.tsx

@@ -0,0 +1,52 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import OpeningHoursSidebar from "./OpeningHoursSidebar";
+import defaultLibraries from "./opening-hours-libraries-data";
+
+export default {
+  title: "Library/Opening Hours Sidebar/Without Dialog",
+  component: OpeningHoursSidebar,
+  decorators: [withDesign],
+  argTypes: {
+    title: {
+      defaultValue: "Dagens åbningstider",
+      control: {
+        type: "text",
+      },
+    },
+    dateString: {
+      defaultValue: "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<typeof OpeningHoursSidebar>;
+
+const Template: ComponentStory<typeof OpeningHoursSidebar> = (args) => {
+  return (
+    <div className="storybook-dialog-sidebar">
+      <OpeningHoursSidebar {...args} />;
+    </div>
+  );
+};
+
+export const Default = Template.bind({});

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<OpeningHoursSidebarType> = ({
+  title,
+  dateString,
+  libraries,
+  link,
+}) => {
+  return (
+    <section className="opening-hours-sidebar">
+      <header className="opening-hours-sidebar__header">
+        <WatchStaticIcon className="opening-hours-sidebar__icon" />
+        <div className="opening-hours-sidebar__texts">
+          <h2 className="opening-hours-sidebar__title">{title}</h2>
+          <p className="opening-hours-sidebar__date">{dateString}</p>
+        </div>
+      </header>
+
+      {libraries.map(({ id, name, openingHoursData }, i) => (
+        <DisclosureControllable
+          showContent={i === 0}
+          key={id}
+          id={id}
+          detailsClassName="opening-hours-sidebar-details"
+          summaryClassName="opening-hours-sidebar-summary"
+          summary={<OpeningHoursSidebarSummary name={name} />}
+        >
+          <OpeningHoursSidebarDetails
+            openingHoursData={openingHoursData}
+            link={link}
+            name={name}
+          />
+        </DisclosureControllable>
+      ))}
+    </section>
+  );
+};
+
+export default OpeningHoursSidebar;

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<OpeningHoursSidebarDetailsType> = ({
+  openingHoursData,
+  link,
+  name,
+}) => {
+  return (
+    <div className="opening-hours-sidebar-details__content">
+      <dl className="opening-hours-sidebar-details__list">
+        {openingHoursData.map(({ term, description }, i) => (
+          <div key={i} className="opening-hours-sidebar-details__item">
+            <dt className="opening-hours-sidebar-details__term">{term}</dt>
+            <dd className="opening-hours-sidebar-details__description">
+              {description}
+            </dd>
+          </div>
+        ))}
+      </dl>
+      <a href={link} className="opening-hours-sidebar__link">
+        {`Gå til ${name}`}
+      </a>
+    </div>
+  );
+};
+
+export default OpeningHoursSidebarDetails;

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<OpeningHoursSidebarSummaryType> = ({
+  name,
+}) => {
+  return (
+    <>
+      <h3 className="opening-hours-sidebar-summary__name">{name}</h3>
+      <ExpandMoreIcon className="opening-hours-sidebar-summary__icon" />
+    </>
+  );
+};
+
+export default OpeningHoursSidebarSummary;