Merge pull request #568 from danskernesdigitalebibliotek/DDFFORM-417

DDFFORM 417

base.scss

@@ -133,6 +133,8 @@
 @import "./src/stories/Library/icon-text-link/icon-text-link";
 @import "./src/stories/Library/material-grid/material-grid";
 @import "./src/stories/Library/error-message/error-message";
+@import "./src/stories/Library/opening-hours/opening-hours";
+@import "./src/stories/Library/opening-hours/opening-hours-skeleton";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

src/stories/Library/opening-hours/OpeningHours.stories.tsx

@@ -0,0 +1,37 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+
+import OpeningHours from "./OpeningHours";
+import { groupedOpeningHoursExampleData } from "./OpeningHoursExampleData";
+
+export default {
+  title: "Library / Opening Hours",
+  component: OpeningHours,
+  decorators: [withDesign],
+  argTypes: {
+    weekCurrentlyDisplayed: {
+      defaultValue: "Uge 4, 2023",
+      control: {
+        type: "text",
+      },
+    },
+    groupedOpeningHours: {
+      defaultValue: groupedOpeningHoursExampleData,
+      control: {
+        type: "object",
+      },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7486-63527&mode=design&t=9DUvbqMhUcaeDTKR-4",
+    },
+  },
+} as ComponentMeta<typeof OpeningHours>;
+
+const Template: ComponentStory<typeof OpeningHours> = (args) => (
+  <OpeningHours {...args} />
+);
+
+export const Default = Template.bind({});

src/stories/Library/opening-hours/OpeningHours.tsx

@@ -0,0 +1,46 @@
+import { FC } from "react";
+import { ReactComponent as ArrowLeft } from "../../../public/icons/collection/ArrowLeft.svg";
+import { ReactComponent as ArrowRight } from "../../../public/icons/collection/ArrowRight.svg";
+import { GroupedOpeningHours } from "./OpeningHoursExampleData";
+import OpeningHoursWeekList from "./OpeningHoursWeekList";
+
+type OpeningHoursProps = {
+  title: string;
+  weekCurrentlyDisplayed: string;
+  groupedOpeningHours: GroupedOpeningHours;
+};
+
+const OpeningHours: FC<OpeningHoursProps> = ({
+  groupedOpeningHours,
+  weekCurrentlyDisplayed,
+}) => {
+  return (
+    <div className="opening-hours">
+      <div className="opening-hours__header">
+        <h2 className="opening-hours__heading">Åbningstider</h2>
+        <div className="opening-hours__navigation-controls">
+          <button
+            className="opening-hours__navigation-control"
+            aria-label="Previous week"
+            type="button"
+          >
+            <ArrowLeft />
+          </button>
+          <div className="opening-hours__week-display">
+            {weekCurrentlyDisplayed}
+          </div>
+          <button
+            className="opening-hours__navigation-control"
+            aria-label="Next week"
+            type="button"
+          >
+            <ArrowRight />
+          </button>
+        </div>
+      </div>
+      <OpeningHoursWeekList groupedOpeningHours={groupedOpeningHours} />
+    </div>
+  );
+};
+
+export default OpeningHours;

src/stories/Library/opening-hours/OpeningHoursDayEntry.tsx

@@ -0,0 +1,20 @@
+import { FC } from "react";
+import { DplOpeningHoursListGET200Item } from "./OpeningHoursExampleData";
+
+type OpeningHoursDayEntryProps = {
+  data: DplOpeningHoursListGET200Item;
+};
+
+const OpeningHoursDayEntry: FC<OpeningHoursDayEntryProps> = ({ data }) => {
+  const { start_time: startTime, end_time: endTime, category } = data;
+  return (
+    <li className="opening-hours__individual-opening">
+      <div className="opening-hours__category">{category.title}</div>
+      <div className="opening-hours__time">
+        {startTime} - {endTime}
+      </div>
+    </li>
+  );
+};
+
+export default OpeningHoursDayEntry;

src/stories/Library/opening-hours/OpeningHoursExampleData.ts

@@ -0,0 +1,250 @@
+// These types are based on the actual data structure returned from the API.
+// The types starting with DplOpeningHours.. are generated with Orval in react
+// and copy pasted here.
+export type DplOpeningHoursListGET200Item = {
+  /** An serial unique id of the opening hours instance. */
+  id: number;
+  category: DplOpeningHoursListGET200ItemCategory;
+  /** The date which the opening hours applies to. In ISO 8601 format. */
+  date: string;
+  /** When the opening hours start. In format HH:MM */
+  start_time: string;
+  /** When the opening hours end. In format HH:MM */
+  end_time: string;
+  /** The id for the branch the instance belongs to */
+  branch_id: number;
+};
+export type DplOpeningHoursListGET200ItemCategory = {
+  title: string;
+  /** A CSS compatible color code which can be used to represent the category */
+  color: string;
+};
+
+export type GroupedOpeningHours = Array<{
+  day: string;
+  date: string;
+  openingHourEntries: DplOpeningHoursListGET200Item[];
+}>;
+
+// Example data in the format it is used in the grouped opening hours component
+export const groupedOpeningHoursExampleData: GroupedOpeningHours = [
+  {
+    day: "Mandag",
+    date: "2024-03-18",
+    openingHourEntries: [
+      {
+        id: 0,
+        category: {
+          title: "Åbent",
+          color: "#0000FF",
+        },
+        date: "2024-03-18",
+        start_time: "09:00",
+        end_time: "12:00",
+        branch_id: 1,
+      },
+      {
+        id: 1,
+        category: {
+          title: "Selvbetjening",
+          color: "#FF0000",
+        },
+        date: "2024-03-18",
+        start_time: "13:00",
+        end_time: "16:00",
+        branch_id: 1,
+      },
+      {
+        id: 2,
+        category: {
+          title: "Med betjening",
+          color: "#008000",
+        },
+        date: "2024-03-18",
+        start_time: "17:00",
+        end_time: "19:00",
+        branch_id: 1,
+      },
+    ],
+  },
+  {
+    day: "Tirsdag",
+    date: "2024-03-19",
+    openingHourEntries: [
+      {
+        id: 3,
+        category: {
+          title: "Telefontid",
+          color: "#FFFF00",
+        },
+        date: "2024-03-19",
+        start_time: "08:00",
+        end_time: "10:00",
+        branch_id: 1,
+      },
+      {
+        id: 4,
+        category: {
+          title: "Borgerservice",
+          color: "#0000FF",
+        },
+        date: "2024-03-19",
+        start_time: "11:00",
+        end_time: "13:00",
+        branch_id: 1,
+      },
+      {
+        id: 5,
+        category: {
+          title: "Børneetagen",
+          color: "#FF0000",
+        },
+        date: "2024-03-19",
+        start_time: "14:00",
+        end_time: "17:00",
+        branch_id: 1,
+      },
+    ],
+  },
+  {
+    day: "Onsdag",
+    date: "2024-03-20",
+    openingHourEntries: [
+      {
+        id: 6,
+        category: {
+          title: "Makerlab",
+          color: "#0000FF",
+        },
+        date: "2024-03-20",
+        start_time: "09:00",
+        end_time: "12:00",
+        branch_id: 1,
+      },
+      {
+        id: 7,
+        category: {
+          title: "Åbent",
+          color: "#008000",
+        },
+        date: "2024-03-20",
+        start_time: "13:00",
+        end_time: "15:00",
+        branch_id: 1,
+      },
+      {
+        id: 8,
+        category: {
+          title: "Selvbetjening",
+          color: "#FFFF00",
+        },
+        date: "2024-03-20",
+        start_time: "16:00",
+        end_time: "19:00",
+        branch_id: 1,
+      },
+    ],
+  },
+  {
+    day: "Torsdag",
+    date: "2024-03-21",
+    openingHourEntries: [
+      {
+        id: 9,
+        category: {
+          title: "Med betjening",
+          color: "#0000FF",
+        },
+        date: "2024-03-21",
+        start_time: "09:00",
+        end_time: "11:00",
+        branch_id: 1,
+      },
+      {
+        id: 10,
+        category: {
+          title: "Telefontid",
+          color: "#FF0000",
+        },
+        date: "2024-03-21",
+        start_time: "12:00",
+        end_time: "14:00",
+        branch_id: 1,
+      },
+      {
+        id: 11,
+        category: {
+          title: "Borgerservice",
+          color: "#008000",
+        },
+        date: "2024-03-21",
+        start_time: "15:00",
+        end_time: "18:00",
+        branch_id: 1,
+      },
+    ],
+  },
+  {
+    day: "Fredag",
+    date: "2024-03-22",
+    openingHourEntries: [
+      {
+        id: 12,
+        category: {
+          title: "Børneetagen",
+          color: "#0000FF",
+        },
+        date: "2024-03-22",
+        start_time: "10:00",
+        end_time: "13:00",
+        branch_id: 1,
+      },
+    ],
+  },
+  {
+    day: "Lørdag",
+    date: "2024-03-23",
+    openingHourEntries: [],
+  },
+  {
+    day: "Søndag",
+    date: "2024-03-24",
+    openingHourEntries: [
+      {
+        id: 18,
+        category: {
+          title: "Borgerservice",
+          color: "#008000",
+        },
+        date: "2024-03-24",
+        start_time: "10:00",
+        end_time: "13:00",
+        branch_id: 1,
+      },
+      {
+        id: 19,
+        category: {
+          title: "Børneetagen",
+          color: "#FFFF00",
+        },
+        date: "2024-03-24",
+        start_time: "14:00",
+        end_time: "18:00",
+        branch_id: 1,
+      },
+      {
+        id: 20,
+        category: {
+          title: "Makerlab",
+          color: "#0000FF",
+        },
+        date: "2024-03-24",
+        start_time: "19:00",
+        end_time: "21:00",
+        branch_id: 1,
+      },
+    ],
+  },
+];
+
+export default groupedOpeningHoursExampleData;