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

…-modal-til-abningstider

Ddfform 822 modal til abningstider

.docker/wiremock/cms/mappings/opening-hours-today-d25c69b9-da31-4c2a-bc7f-41739eb13e40.json

@@ -0,0 +1,21 @@
+{
+  "id" : "d25c69b9-da31-4c2a-bc7f-41739eb13e40",
+  "name" : "Opening hours today",
+  "request": {
+    "urlPattern": "/api/v1/opening_hours\\?from_date=.*&to_date=.*",
+    "method": "GET"
+  },
+  "response": {
+    "status": 200,
+    "body": "[\n  {\n    \"id\": 12,\n    \"category\": {\n      \"title\": \"Åbent\",\n      \"color\": \"#4986E7\"\n    },\n    \"date\": \"{{request.query.from_date}}\",\n    \"start_time\": \"08:00\",\n    \"end_time\": \"17:00\",\n    \"branch_id\": 10,\n    \"repetition\": {\n      \"id\": 12,\n      \"type\": \"none\"\n    }\n  },\n  {\n    \"id\": 20,\n    \"category\": {\n      \"title\": \"Borgerservice\",\n      \"color\": \"#4986E7\"\n    },\n    \"date\": \"{{request.query.from_date}}\",\n    \"start_time\": \"09:00\",\n    \"end_time\": \"12:00\",\n    \"branch_id\": 10,\n    \"repetition\": {\n      \"id\": 20,\n      \"type\": \"none\"\n    }\n  },\n  {\n    \"id\": 21,\n    \"category\": {\n      \"title\": \"Selvbetjening\",\n      \"color\": \"#4986E7\"\n    },\n    \"date\": \"{{request.query.from_date}}\",\n    \"start_time\": \"06:00\",\n    \"end_time\": \"22:00\",\n    \"branch_id\": 10,\n    \"repetition\": {\n      \"id\": 21,\n      \"type\": \"none\"\n    }\n  },\n  {\n    \"id\": 22,\n    \"category\": {\n      \"title\": \"Åbent\",\n      \"color\": \"#4986E7\"\n    },\n    \"date\": \"{{request.query.from_date}}\",\n    \"start_time\": \"08:00\",\n    \"end_time\": \"16:00\",\n    \"branch_id\": 12,\n    \"repetition\": {\n      \"id\": 22,\n      \"type\": \"none\"\n    }\n  },\n  {\n    \"id\": 23,\n    \"category\": {\n      \"title\": \"Med betjening\",\n      \"color\": \"#4986E7\"\n    },\n    \"date\": \"{{request.query.from_date}}\",\n    \"start_time\": \"12:00\",\n    \"end_time\": \"14:30\",\n    \"branch_id\": 12,\n    \"repetition\": {\n      \"id\": 23,\n      \"type\": \"none\"\n    }\n  },\n  {\n    \"id\": 24,\n    \"category\": {\n      \"title\": \"Åbent\",\n      \"color\": \"#4986E7\"\n    },\n    \"date\": \"{{request.query.from_date}}\",\n    \"start_time\": \"10:00\",\n    \"end_time\": \"17:00\",\n    \"branch_id\": 18,\n    \"repetition\": {\n      \"id\": 24,\n      \"type\": \"none\"\n    }\n  }\n]",
+    "headers": {
+      "Content-Type": "application/json"
+    },
+    "transformers": ["response-template"]
+  },
+  "uuid": "eb4b441b-def3-438b-b473-02a068e30d3f",
+  "persistent": true,
+  "priority": 5,
+  "insertionIndex": 2,
+  "postServeActions": []
+}

docs/request_mocking_wiremock.md

@@ -39,6 +39,7 @@ We use Wiremock through Docker based on the following setup:
 ```dotenv
 PUBLIZON_BASEURL=http://publizon-mock.docker`
 FBS_BASEURL=http://fbs-mock.docker`
+CMS_BASEURL=http://cms-mock.docker
 ```
 
 <!-- markdownlint-disable-next-line MD029 -->

src/apps/material/material.tsx

@@ -231,6 +231,7 @@ const Material: React.FC<MaterialProps> = ({ wid }) => {
       </MaterialDisclosure>
       {hasReview && hasReview.length > 0 && (
         <DisclosureControllable
+          detailsClassName="disclosure text-body-large"
           id="reviews"
           showContent={shouldOpenReviewDisclosure}
           cyData="material-reviews-disclosure"

src/apps/opening-hours-sidebar/OpeningHoursSidebar.dev.tsx

@@ -0,0 +1,45 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import React from "react";
+import serviceUrlArgs from "../../core/storybook/serviceUrlArgs";
+import OpeningHoursSidebar from "./OpeningHoursSidebar.entry";
+
+export default {
+  title: "Apps / Opening Hour Sidebar",
+  component: OpeningHoursSidebar,
+  argTypes: {
+    ...serviceUrlArgs,
+    openingHoursSidebarTitleText: {
+      name: "Today's opening hours",
+      defaultValue: "Today's opening hours",
+      control: { type: "text" }
+    },
+    openingHoursText: {
+      name: "Opening hours text",
+      defaultValue: "Opening hours",
+      control: { type: "text" }
+    },
+    openingHoursSidebarLinkText: {
+      name: "Opening hours link text",
+      defaultValue: "Go to @branchName",
+      control: { type: "text" }
+    },
+    openingHoursSidebarBranchesConfig: {
+      name: "Opening hours sidebar branches",
+      defaultValue:
+        '[{"branch_id":"10","name":"Hovedbiblioteket","link":"/hovedbiblioteket","promoted":true},{"branch_id":"12","name":"Brønshøj Bibliotek","link":"/bronshoj-bibliotek","promoted":false},{"branch_id":"18","name":"Læsefilialen","link":"/laesefilialen","promoted":false},{"branch_id":"24","name":"Det virtuelle bibliotek","link":"/det-virtuelle-bibliotek","promoted":false}]',
+      control: { type: "text" }
+    },
+    size: {
+      name: "Size",
+      defaultValue: "small",
+      control: {
+        type: "select",
+        options: ["small", "large"]
+      }
+    }
+  }
+} as ComponentMeta<typeof OpeningHoursSidebar>;
+
+export const App: ComponentStory<typeof OpeningHoursSidebar> = (args) => (
+  <OpeningHoursSidebar {...args} />
+);

src/apps/opening-hours-sidebar/OpeningHoursSidebar.entry.tsx

@@ -0,0 +1,27 @@
+import React, { FC } from "react";
+import { withText } from "../../core/utils/text";
+import { withUrls } from "../../core/utils/url";
+import OpeningHoursSidebar, {
+  OpeningHoursSidebarType
+} from "./OpeningHoursSidebar";
+import { withConfig } from "../../core/utils/config";
+
+interface OpeningHoursClockEntryTextProps {
+  openingHoursText: string;
+  openingHoursSidebarTitleText: string;
+  openingHoursSidebarLinkText: string;
+}
+
+interface OpeningHoursClockEntryConfigProps {
+  openingHoursSidebarBranchesConfig: string;
+}
+
+const OpeningHoursSidebarEntry: FC<
+  OpeningHoursClockEntryTextProps &
+    OpeningHoursSidebarType &
+    OpeningHoursClockEntryConfigProps
+> = ({ size }) => {
+  return <OpeningHoursSidebar size={size} />;
+};
+
+export default withConfig(withUrls(withText(OpeningHoursSidebarEntry)));

src/apps/opening-hours-sidebar/OpeningHoursSidebar.mount.ts

@@ -0,0 +1,4 @@
+import addMount from "../../core/addMount";
+import OpeningHoursSidebar from "./OpeningHoursSidebar.entry";
+
+addMount({ appName: "opening-hours-sidebar", app: OpeningHoursSidebar });

src/apps/opening-hours-sidebar/OpeningHoursSidebar.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from "react";
+import useDialog from "../../components/dialog/useDialog";
+import OpeningHoursSidebarContent from "./OpeningHoursSidebarContent";
+import OpeningHoursSidebarButtonLarge from "./OpeningHoursSidebarButtonLarge";
+import OpeningHoursSidebarButtonSmall from "./OpeningHoursSidebarButtonSmall";
+import Dialog from "../../components/dialog/Dialog";
+import useOpeningHoursSidebar from "./useOpeningHoursSidebar";
+
+export type OpeningHoursSidebarType = {
+  size: "small" | "large";
+};
+
+const OpeningHoursSidebar: FC<OpeningHoursSidebarType> = ({ size }) => {
+  const { dialogContent, openDialogWithContent, closeDialog, dialogRef } =
+    useDialog();
+
+  const { libraries } = useOpeningHoursSidebar();
+
+  const openDialog = () =>
+    openDialogWithContent(<OpeningHoursSidebarContent libraries={libraries} />);
+
+  return (
+    <>
+      {size === "large" && (
+        <OpeningHoursSidebarButtonLarge openDialog={openDialog} />
+      )}
+      {size === "small" && (
+        <OpeningHoursSidebarButtonSmall openDialog={openDialog} />
+      )}
+
+      <Dialog isSidebar closeDialog={closeDialog} ref={dialogRef}>
+        {dialogContent}
+      </Dialog>
+    </>
+  );
+};
+
+export default OpeningHoursSidebar;

src/apps/opening-hours-sidebar/OpeningHoursSidebarButtonLarge.tsx

@@ -0,0 +1,36 @@
+import React, { FC } from "react";
+import iconWatch from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/basic/icon-watch-static.svg";
+import { useText } from "../../core/utils/text";
+
+type ButtonLargeProps = {
+  openDialog: () => void;
+};
+
+const ButtonLarge: FC<ButtonLargeProps> = ({ openDialog }) => {
+  const t = useText();
+
+  return (
+    <div className="header__clock">
+      <div className="pagefold-parent--medium">
+        <div className="pagefold-triangle--medium" />
+      </div>
+      <button
+        type="button"
+        className="header__clock-items"
+        onClick={openDialog}
+      >
+        <img
+          loading="lazy"
+          width="58"
+          height="58"
+          src={iconWatch}
+          className="mb-8"
+          alt=""
+        />
+        <span className="text-small-caption">{t("openingHoursText")}</span>
+      </button>
+    </div>
+  );
+};
+
+export default ButtonLarge;

src/apps/opening-hours-sidebar/OpeningHoursSidebarButtonSmall.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from "react";
+import iconWatch from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/basic/icon-watch-static.svg";
+import { useText } from "../../core/utils/text";
+
+type ButtonSmallProps = {
+  openDialog: () => void;
+};
+
+const ButtonSmall: FC<ButtonSmallProps> = ({ openDialog }) => {
+  const t = useText();
+
+  return (
+    <button
+      type="button"
+      className="header__button header__button--left-border"
+      onClick={openDialog}
+    >
+      <img
+        className="header__button-icon"
+        loading="lazy"
+        width="24"
+        height="24"
+        src={iconWatch}
+        alt="clock icon"
+      />
+      <span className="header__button-text">{t("openingHoursText")}</span>
+    </button>
+  );
+};
+
+export default ButtonSmall;

src/apps/opening-hours-sidebar/OpeningHoursSidebarContent.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from "react";
+import iconWatch from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/basic/icon-watch-static.svg";
+import DisclosureControllable from "../../components/Disclosures/DisclosureControllable";
+import OpeningHoursSidebarSummary from "./OpeningHoursSidebarSummary";
+import OpeningHoursSidebarDetails from "./OpeningHoursSidebarDetails";
+import { LibraryType, toDayString } from "./helper";
+import { useText } from "../../core/utils/text";
+
+const OpeningHoursSidebarContent: FC<{ libraries: LibraryType[] }> = ({
+  libraries
+}) => {
+  const t = useText();
+  return (
+    <section className="opening-hours-sidebar">
+      <header className="opening-hours-sidebar__header">
+        <img src={iconWatch} className="opening-hours-sidebar__icon" alt="" />
+        <div className="opening-hours-sidebar__texts">
+          <h2 className="opening-hours-sidebar__title">
+            {t("openingHoursSidebarTitleText")}
+          </h2>
+          <p className="opening-hours-sidebar__date">{toDayString()}</p>
+        </div>
+      </header>
+
+      {libraries.map(({ branch_id, name, openingHoursData, link }, i) => (
+        <DisclosureControllable
+          showContent={i === 0}
+          key={branch_id}
+          id={branch_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 OpeningHoursSidebarContent;

src/apps/opening-hours-sidebar/OpeningHoursSidebarDetails.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from "react";
+import { LibraryType } from "./helper";
+import { useText } from "../../core/utils/text";
+
+const OpeningHoursSidebarDetails: FC<
+  Pick<LibraryType, "openingHoursData" | "link" | "name">
+> = ({ openingHoursData, link, name }) => {
+  const t = useText();
+  return (
+    <div className="opening-hours-sidebar-details__content">
+      <dl className="opening-hours-sidebar-details__list">
+        {openingHoursData.map(({ term, description }, i) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <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">
+        {t("openingHoursSidebarLinkText", {
+          placeholders: {
+            "@branchName": name
+          }
+        })}
+      </a>
+    </div>
+  );
+};
+
+export default OpeningHoursSidebarDetails;

src/apps/opening-hours-sidebar/OpeningHoursSidebarSummary.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from "react";
+import IconExpand from "@danskernesdigitalebibliotek/dpl-design-system/build/icons/collection/ExpandMore.svg";
+import { LibraryType } from "./helper";
+
+const OpeningHoursSidebarSummary: FC<Pick<LibraryType, "name">> = ({
+  name
+}) => {
+  return (
+    <>
+      <h3 className="opening-hours-sidebar-summary__name">{name}</h3>
+      <img
+        src={IconExpand}
+        alt=""
+        className="opening-hours-sidebar-summary__icon"
+      />
+    </>
+  );
+};
+
+export default OpeningHoursSidebarSummary;