Added flatpickr

base.scss

@@ -27,6 +27,7 @@
 @import "./src/stories/Library/Forms/checkbox/checkbox";
 @import "./src/stories/Library/cover/cover";
 @import "./src/stories/Library/Forms/input/input";
+@import "./src/stories/Library/Forms/date-picker/datepicker.scss";
 @import "./src/stories/Library/list-buttons/list-buttons";
 @import "./src/stories/Library/progress-bar/progress-bar";
 @import "./src/stories/Library/missing-story/missing-story";

package.json

@@ -71,6 +71,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "^4.0.1",
+    "flatpickr": "^4.6.13",
     "json": "^11.0.0",
     "markdownlint-cli2": "^0.4.0",
     "postcss": "^8.4.31",

src/stories/Library/Forms/date-picker/DatePicker.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { withDesign } from "storybook-addon-designs";
+import DatePicker from "./DatePicker";
+
+export default {
+  title: "Library / Forms / DatePicker",
+  component: DatePicker,
+  decorators: [withDesign],
+  argTypes: {},
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7605%3A54868&mode=design&t=MoXpQuI4TAXRxRDe-1",
+    },
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof DatePicker>;
+
+const Template: ComponentStory<typeof DatePicker> = () => <DatePicker />;
+
+export const Default = Template.bind({});

src/stories/Library/Forms/date-picker/DatePicker.tsx

@@ -0,0 +1,59 @@
+// Import default styling
+import "flatpickr/dist/flatpickr.css";
+
+import flatpickr from "flatpickr";
+import { english } from "flatpickr/dist/l10n/default";
+import { Danish } from "flatpickr/dist/l10n/da";
+import { Instance } from "flatpickr/dist/types/instance";
+import { MutableRefObject, useCallback, useRef } from "react";
+import { BaseOptions } from "flatpickr/dist/types/options";
+
+export type DatePickerProps = {
+  locale?: "en" | "da";
+};
+
+const DatePicker = (props: DatePickerProps) => {
+  const { locale = "en" } = props;
+  const picker = useRef() as MutableRefObject<Instance>;
+
+  const pickerRef = useCallback(
+    (node: Node | null) => {
+      const options: Partial<BaseOptions> = {
+        wrap: true,
+        static: true,
+        locale: locale === "en" ? english : Danish,
+      };
+
+      if (node !== null) {
+        picker.current = flatpickr(node, options);
+      }
+    },
+    [locale]
+  );
+
+  return (
+    <div className="datepicker">
+      <div className="datepicker__wrapper" ref={pickerRef}>
+        <input
+          type="text"
+          placeholder="Date"
+          className="datepicker__input"
+          data-input
+        />
+        <button
+          name="Toggle datepicker"
+          className="datepicker__opener"
+          data-toggle
+        >
+          <img
+            className="datepicker__icon"
+            src="icons/collection/ExpandMore.svg"
+            alt="Expand more icon"
+          />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default DatePicker;

src/stories/Library/Forms/date-picker/datepicker.scss

@@ -0,0 +1,42 @@
+.datepicker {
+  &__wrapper {
+    position: relative;
+    width: 100%;
+    height: 48px;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    border: 1px solid $c-global-tertiary-1;
+  }
+
+  & .flatpickr-calendar * {
+    font-family: "Noto Sans JP", sans-serif;
+  }
+
+  &__input {
+    @extend %text-button-placeholder;
+    width: 100%;
+    height: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 0 $s-md;
+    border: none;
+    cursor: pointer;
+  }
+
+  &__opener {
+    width: 44px;
+    min-width: 44px;
+    height: 48px;
+    border-left: 1px solid $c-global-tertiary-1;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &__icon {
+    margin: auto;
+  }
+}

yarn.lock

@@ -7760,6 +7760,11 @@ flat@^5.0.2:
   resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
   integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
 
+flatpickr@^4.6.13:
+  version "4.6.13"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.6.13.tgz#8a029548187fd6e0d670908471e43abe9ad18d94"
+  integrity sha512-97PMG/aywoYpB4IvbvUJi0RQi8vearvU0oov1WW3k0WZPBMrTQVqekSX5CjSG/M4Q3i6A/0FKXC7RyAoAUUSPw==
+
 flatted@^3.1.0:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"