Event date facet (DDFFORM-67)

base.scss

@@ -23,7 +23,8 @@
 @import "./src/stories/Library/cover/cover";
 @import "./src/stories/Library/Forms/input/input";
 @import "./src/stories/Library/Forms/date-picker/date-picker";
-@import "./src/stories/Library/date-calendar/date-calendar";
+@import "./src/stories/Library/date-range/flatpickr";
+@import "./src/stories/Library/date-range/date-range";
 @import "./src/stories/Library/list-buttons/list-buttons";
 @import "./src/stories/Library/progress-bar/progress-bar";
 @import "./src/stories/Library/missing-story/missing-story";

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 DateRange from "../../Library/date-range/DateRange";
 
 const filters = [
   {
@@ -50,6 +51,10 @@ const ContentListPage: React.FC = () => {
             </div>
           );
         })}
+        <div className="content-list-page__filter content-list-page__filter--date content-list-page__filter--right">
+          <InputLabel text="Dato" />
+          <DateRange modifiers={["filter"]} open={false} />
+        </div>
       </div>
       <ContentList items={contentListData} />
     </div>

src/stories/Blocks/content-list-page/content-list-page.scss

@@ -21,3 +21,19 @@
     flex-direction: row;
   }
 }
+
+.content-list-page__filter--right {
+  @include media-query__small {
+    margin-left: auto;
+  }
+}
+
+.content-list-page__filter--date {
+  @include media-query__small {
+    // Use the same width as allocated for dropdowns. This should be wide
+    // enough to show all elements when using the j. M Y format e.g.
+    // 01. jan 2024
+    // @see src/stories/Library/dropdown/dropdown.scss
+    width: 230px;
+  }
+}

src/stories/Library/Modals/modal-pause/modal-pause.scss

@@ -31,23 +31,3 @@
   display: grid;
   justify-content: center;
 }
-
-.date-range {
-  input {
-    border: 1px solid $color__global-tertiary-1;
-    box-sizing: border-box;
-    background-color: $color__global-primary;
-    min-width: 100%;
-    height: 50px;
-    padding: 0 10px;
-    color: $color__text-secondary-gray;
-    @include typography($typo__button);
-  }
-
-  .date-range__input {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    margin-bottom: $s-lg;
-  }
-}

src/stories/Library/date-range/DateRange.stories.tsx

@@ -0,0 +1,39 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import DateRange, { DateRangeProps } from "./DateRange";
+
+export default {
+  title: "Library / Date range",
+  component: DateRange,
+  decorators: [withDesign],
+  argTypes: {
+    open: {
+      name: "Open calendar",
+      defaultValue: false,
+      control: { type: "boolean" },
+    },
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7605%3A54868&mode=design&t=MoXpQuI4TAXRxRDe-1",
+    },
+    layout: "padded",
+  },
+} as ComponentMeta<typeof DateRange>;
+
+const Template: ComponentStory<typeof DateRange> = (args: DateRangeProps) => (
+  <DateRange {...args} />
+);
+
+export const Closed = Template.bind({});
+
+export const Open = Template.bind({});
+Open.args = {
+  open: true,
+};
+
+export const Filter = Template.bind({});
+Filter.args = {
+  modifiers: ["filter"],
+};

src/stories/Library/date-range/DateRange.tsx

@@ -0,0 +1,94 @@
+/* eslint-disable import/no-extraneous-dependencies */
+// Import default styling
+import "flatpickr/dist/flatpickr.css";
+
+import React, { useEffect } from "react";
+import { Helmet } from "react-helmet";
+import { BaseOptions } from "flatpickr/dist/types/options";
+import clsx from "clsx";
+
+declare global {
+  interface Window {
+    // Allow attachment of global Flatpickr configuration options.
+    flatpickrOptions: Partial<BaseOptions>;
+  }
+}
+
+type Modifiers = "filter";
+
+export type DateRangeProps = {
+  open?: boolean;
+  modifiers?: Modifiers[];
+};
+
+const DateRange: React.FC<DateRangeProps> = ({ open, modifiers }) => {
+  // Use a set of static values for testing.
+  const now = "2024-01-19";
+  const from = "2024-01-01";
+  const to = "2024-01-10";
+
+  useEffect(() => {
+    window.flatpickrOptions = {
+      now,
+      animate: false,
+      altInput: true,
+      altFormat: "j. M Y",
+      // For whatever reason we cannot load the Danish translation properly
+      // in Storybook.
+      // locale: da
+      locale: {
+        firstDayOfWeek: 1,
+      },
+    };
+    require("./date-range");
+    require("./init-date-range");
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      // Wait a bit for the calendar to load. Then click the input field to
+      // open it.
+      window.setTimeout(() => {
+        const elements = document.querySelectorAll(
+          ".date-range__input"
+        ) as NodeListOf<HTMLElement>;
+
+        elements.forEach((e) => {
+          e.click();
+        });
+      }, 250);
+    }
+  }, [open]);
+
+  const classNames = clsx(
+    "date-range",
+    modifiers?.map((modifier) => `date-range--${modifier}`)
+  );
+
+  return (
+    <>
+      <Helmet>
+        <link
+          rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/flatpickr@v4/dist/flatpickr.min.css"
+        />
+
+        <script src="https://cdn.jsdelivr.net/npm/flatpickr@4/dist/flatpickr.min.js" />
+      </Helmet>
+
+      <div className={classNames}>
+        <input
+          className="date-range__input"
+          type="text"
+          aria-label="Vælg dato"
+        />
+        <div className="date-range__values">
+          <input className="date-range__from" type="date" defaultValue={from} />
+          <input className="date-range__to" type="date" defaultValue={to} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default DateRange;

src/stories/Library/date-range/date-range.js

@@ -0,0 +1,41 @@
+/* global flatpickr */
+window.DateRange = {
+  init(element, config) {
+    const dateRange = element.querySelectorAll(".date-range");
+
+    dateRange.forEach((e) => {
+      const dateFrom = e.querySelector(".date-range__from");
+      const dateTo = e.querySelector(".date-range__to");
+      const fromToElements = !!dateFrom && !!dateTo;
+
+      const flatPickrConfig = {
+        ...{
+          mode: "range",
+          defaultDate: fromToElements ? [dateFrom.value, dateTo.value] : [],
+          onClose: (selectedDates) => {
+            if (!fromToElements) {
+              return;
+            }
+
+            const formattedDates = selectedDates.map((date) => {
+              // The en-CA date format uses the YYYY-MM-DD date format used by
+              // date type input elements.
+              return date.toLocaleDateString("en-CA", {
+                year: "numeric",
+                month: "2-digit",
+                day: "2-digit",
+              });
+            });
+            [dateFrom.value, dateTo.value] = formattedDates;
+            // Dispatch a change event to allow others to react to the change.
+            // This will not happen by default.
+            dateFrom.dispatchEvent(new Event("change"));
+          },
+        },
+        ...config,
+      };
+
+      flatpickr(e.querySelector(".date-range__input"), flatPickrConfig);
+    });
+  },
+};

src/stories/Library/date-range/date-range.scss

@@ -0,0 +1,32 @@
+.date-range {
+  input {
+    border: 1px solid $color__global-tertiary-1;
+    box-sizing: border-box;
+    background-color: $color__global-primary;
+    min-width: 100%;
+    height: 50px;
+    padding: 0 10px;
+    color: $color__text-secondary-gray;
+    @include typography($typo__button);
+  }
+}
+
+.date-range__input {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: $s-lg;
+}
+
+.date-range__values {
+  // If the date range uses individual form inputs for managing from and to
+  // dates then hide these values in favour of the input field.
+  display: none;
+}
+
+.date-range--filter {
+  input {
+    border-color: $color__global-black;
+    margin-bottom: 0;
+  }
+}

src/stories/Library/date-range/init-date-range.js

@@ -0,0 +1,3 @@
+window.addEventListener("load", () => {
+  window.DateRange.init(document, window.flatpickrOptions);
+});