{placeholderText}
- )}
-
+
{typeTag ? (
{typeTag}
diff --git a/src/stories/Library/card/card.scss b/src/stories/Library/card/card.scss
index 0b6c2df71..615a36e31 100644
--- a/src/stories/Library/card/card.scss
+++ b/src/stories/Library/card/card.scss
@@ -4,23 +4,6 @@
margin-bottom: $s-sm;
}
-.card--has-no-image {
- .card__media {
- @extend %identity-placeholder;
- }
-}
-
-.card__placeholder-text {
- @extend %identity-placeholder-text;
-}
-
-.card--has-image {
- // This is necessary to get object-fit to work.
- * {
- height: 100%;
- }
-}
-
.card__tags {
display: flex;
margin-bottom: $s-sm;
@@ -96,24 +79,27 @@
%card-variant--x-large,
.card[data-variant="x-large"] {
+ @include media-container--card;
+
width: 200px;
@include media-query__name($breakpoint__large-card) {
width: 440px;
}
- &.card--has-no-image {
+ &.card--has-no-media {
// We only want the page fold on 1:1 view-modes.
@extend %identity-pagefold;
}
- .card__placeholder-text {
- @include typography($typo__card-placeholder);
+ &.card--has-media {
+ .card__media {
+ @extend %identity-placeholder;
+ }
}
+ // stylelint-disable-next-line no-descending-specificity -- Stylelint wants us to re-order the file, but it actually would make it less readable.
.card__media {
- @extend %identity-placeholder;
-
aspect-ratio: 1/1;
}
}
@@ -122,21 +108,21 @@
.card[data-variant="small"] {
width: 206px;
+ // stylelint-disable-next-line no-descending-specificity -- Stylelint wants us to re-order the file, but it actually would make it less readable.
.card__media {
aspect-ratio: 1/1;
}
- .card__tags,
- .card__media {
+ // stylelint-disable-next-line no-descending-specificity -- Stylelint wants us to re-order the file, but it actually would make it less readable.
+ .card__media,
+ .card__tags {
margin-bottom: $s-xs;
}
// On desktop sizes this small, there is no space for placeholder text, and
// extra tags, but we can still show it for screenreaders.
@include media-query__name($breakpoint__large-card) {
- .card__placeholder-text {
- font-size: 0;
- }
+ @include media-container--small;
.card__tag {
@include typography($typo__byline-tags--small);
@@ -156,6 +142,7 @@
width: 321px;
}
+ // stylelint-disable-next-line no-descending-specificity -- Stylelint wants us to re-order the file, but it actually would make it less readable.
.card__media {
// Odd aspect ratio, taken from the design.
aspect-ratio: 321/426;
diff --git a/src/stories/Library/content-list-item/ContentListItem.stories.tsx b/src/stories/Library/content-list-item/ContentListItem.stories.tsx
index 9ec69a21e..762fa2a78 100644
--- a/src/stories/Library/content-list-item/ContentListItem.stories.tsx
+++ b/src/stories/Library/content-list-item/ContentListItem.stories.tsx
@@ -1,18 +1,13 @@
import { ComponentStory, ComponentMeta } from "@storybook/react";
import { withDesign } from "storybook-addon-designs";
import { ContentListItem } from "./ContentListItem";
+import ImageCredited from "../image-credited/ImageCredited";
export default {
title: "Library / Content List Item",
component: ContentListItem,
decorators: [withDesign],
argTypes: {
- image: {
- defaultValue:
- "https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-
- control: { type: "text" },
- },
tagText: {
defaultValue: "Foredrag",
control: { type: "text" },
@@ -46,6 +41,15 @@ export default {
defaultValue: "/",
control: { type: "text" },
},
+ image: {
+ defaultValue: (
+ = ({
image,
+ placeholderText,
tagText,
title,
description,
@@ -33,7 +37,7 @@ export const ContentListItem: React.FC = ({
return (
- 
+
{tagText && (
diff --git a/src/stories/Library/content-list-item/content-list-item.scss b/src/stories/Library/content-list-item/content-list-item.scss
index cb8507eb7..587d77c48 100644
--- a/src/stories/Library/content-list-item/content-list-item.scss
+++ b/src/stories/Library/content-list-item/content-list-item.scss
@@ -68,23 +68,10 @@ $_stacked-reduce-width: 20px;
}
.content-list-item__image-container {
- @extend %identity-placeholder-pseudo;
grid-area: image;
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
-
- // We want to treat everything inside the image-container as image related.
- // To make object-fit work, it is important that everything has 100%
- // height and width set. We cannot know 100% what markup Drupal will use,
- // so we'll use a wildcard here.
- * {
- width: 100%;
- height: 100%;
- object-fit: cover;
- position: relative;
- z-index: $z-10;
- }
}
.content-list-item__content {
@@ -201,6 +188,8 @@ $_stacked-reduce-width: 20px;
}
.content-list-item__image-container {
+ @include media-container--small;
+
grid-area: image;
max-height: $_content-list-item--image-height;
min-height: $_content-list-item--image-height;
diff --git a/src/stories/Library/content-list/ContentList.stories.tsx b/src/stories/Library/content-list/ContentList.stories.tsx
index b2e1ce36d..d3165c341 100644
--- a/src/stories/Library/content-list/ContentList.stories.tsx
+++ b/src/stories/Library/content-list/ContentList.stories.tsx
@@ -1,6 +1,6 @@
import { ComponentMeta, ComponentStory } from "@storybook/react";
import ContentList from "./ContentList";
-import contentListData from "./ContentListData";
+import ContentListData from "./ContentListData";
export default {
title: "Library / Content List",
@@ -20,5 +20,5 @@ const Template: ComponentStory = (args) => (
export const Default = Template.bind({});
Default.args = {
- items: contentListData,
+ items: ContentListData,
};
diff --git a/src/stories/Library/content-list/ContentListData.ts b/src/stories/Library/content-list/ContentListData.tsx
similarity index 66%
rename from src/stories/Library/content-list/ContentListData.ts
rename to src/stories/Library/content-list/ContentListData.tsx
index 52f2693de..e7c866a92 100644
--- a/src/stories/Library/content-list/ContentListData.ts
+++ b/src/stories/Library/content-list/ContentListData.tsx
@@ -1,11 +1,12 @@
import { ContentListItemProps } from "../content-list-item/ContentListItem";
+import ImageCredited from "../image-credited/ImageCredited";
const contentListData: ContentListItemProps[] = [
{
eventSeriesId: "a",
- image:
- "https://images.unsplash.com/photo-1549277513-f1b32fe1f8f5?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-
+ image: (
+ ;
+
+const Template: ComponentStory = () => (
+ (
+ ({ children, closeDialog }, ref) => {
+ return (
+
+ );
+ }
+);
+export default Dialog;
diff --git a/src/stories/Library/dialog/DialogContent.tsx b/src/stories/Library/dialog/DialogContent.tsx
new file mode 100644
index 000000000..b4d226fd3
--- /dev/null
+++ b/src/stories/Library/dialog/DialogContent.tsx
@@ -0,0 +1,13 @@
+const DialogContent = () => {
+ return (
+ (null);
+
+ const dialogRef = useRef(null);
+
+ const closeDialog = () => {
+ if (!dialogRef.current) {
+ return;
+ }
+ if (onClose) {
+ onClose();
+ }
+ dialogRef.current.close();
+ };
+
+ const openDialogWithContent = (content: React.ReactNode) => {
+ setDialogContent(content);
+ dialogRef.current?.showModal();
+ };
+
+ return {
+ dialogContent,
+ dialogRef,
+ openDialogWithContent,
+ closeDialog,
+ };
+};
+
+export default useDialog;
diff --git a/src/stories/Library/image-credited/ImageCredited.tsx b/src/stories/Library/image-credited/ImageCredited.tsx
index 21af01698..5144692f0 100644
--- a/src/stories/Library/image-credited/ImageCredited.tsx
+++ b/src/stories/Library/image-credited/ImageCredited.tsx
@@ -20,7 +20,9 @@ const ImageCredited: FC = ({
{src ? (
<>
- 
+
{description}
diff --git a/src/stories/Library/image-credited/image-credited.scss b/src/stories/Library/image-credited/image-credited.scss
index ee3567c10..c018287c5 100644
--- a/src/stories/Library/image-credited/image-credited.scss
+++ b/src/stories/Library/image-credited/image-credited.scss
@@ -1,5 +1,9 @@
-.image-credited__img {
+.image-credited__image {
width: 100%;
+
+ * {
+ width: 100%;
+ }
}
.image-credited__info {
diff --git a/src/stories/Library/media-container/MediaContainer.stories.tsx b/src/stories/Library/media-container/MediaContainer.stories.tsx
new file mode 100644
index 000000000..ce6ed296b
--- /dev/null
+++ b/src/stories/Library/media-container/MediaContainer.stories.tsx
@@ -0,0 +1,34 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import MediaContainer from "./MediaContainer";
+import ImageCredited from "../image-credited/ImageCredited";
+
+export default {
+ title: "Library / Media container",
+ component: MediaContainer,
+ argTypes: {
+ media: {
+ defaultValue: (
+ ;
+
+const Template: ComponentStory = (args) => (
+ = ({
+ media,
+ placeholderText = "",
+}) => {
+ const classes = clsx("media-container", {
+ "media-container--placeholder": !media,
+ });
+
+ return (
+ = ({
media,
placeholderText,
}) => {
- const classes = clsx("nav-spot", "arrow__hover--right-large", {
- "nav-spot--has-no-media": !media,
- "nav-spot--has-media": media,
- });
-
return (
-
+
-
- {media || (
-
+
;
+
+const Template: ComponentStory = (args) => (
+ = ({
+ groupedOpeningHours,
+ weekCurrentlyDisplayed,
+}) => {
+ return (
+ = ({ data }) => {
+ const { start_time: startTime, end_time: endTime, category } = data;
+ return (
+
+
+ );
+};
+
+export default OpeningHoursDayEntry;
diff --git a/src/stories/Library/opening-hours/OpeningHoursExampleData.ts b/src/stories/Library/opening-hours/OpeningHoursExampleData.ts
new file mode 100644
index 000000000..c933957e7
--- /dev/null
+++ b/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;
diff --git a/src/stories/Library/opening-hours/OpeningHoursWeekList.tsx b/src/stories/Library/opening-hours/OpeningHoursWeekList.tsx
new file mode 100644
index 000000000..427092c11
--- /dev/null
+++ b/src/stories/Library/opening-hours/OpeningHoursWeekList.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import OpeningHoursDayEntry from "./OpeningHoursDayEntry";
+import { GroupedOpeningHours } from "./OpeningHoursExampleData";
+
+type OpeningHoursWeekListProps = {
+ groupedOpeningHours: GroupedOpeningHours;
+};
+
+const OpeningHoursWeekList: React.FC = ({
+ groupedOpeningHours,
+}) => {
+ return (
+
+
+ );
+};
+export default DialogContent;
diff --git a/src/stories/Library/dialog/DialogPlayGround.tsx b/src/stories/Library/dialog/DialogPlayGround.tsx
new file mode 100644
index 000000000..ae6365b5a
--- /dev/null
+++ b/src/stories/Library/dialog/DialogPlayGround.tsx
@@ -0,0 +1,36 @@
+import DialogContent from "./DialogContent";
+import Dialog from "./Dialog";
+import useDialog from "./useDialog";
+import OpeningHoursForm from "../opening-hours-editor/OpeningHoursForm";
+
+const DialogPlayGround = () => {
+ const { dialogContent, openDialogWithContent, closeDialog, dialogRef } =
+ useDialog();
+
+ return (
+ <>
+
+
+
+
+
+ );
+};
+
+export default DialogPlayGround;
diff --git a/src/stories/Library/dialog/dialog.scss b/src/stories/Library/dialog/dialog.scss
new file mode 100644
index 000000000..f1064c573
--- /dev/null
+++ b/src/stories/Library/dialog/dialog.scss
@@ -0,0 +1,15 @@
+.dialog {
+ position: relative;
+ padding: 0;
+ border-radius: 4px;
+}
+
+.dialog__close-button {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ border: 0;
+ cursor: pointer;
+ background-color: transparent;
+ padding: 10px;
+}
diff --git a/src/stories/Library/dialog/useDialog.tsx b/src/stories/Library/dialog/useDialog.tsx
new file mode 100644
index 000000000..65841e9e5
--- /dev/null
+++ b/src/stories/Library/dialog/useDialog.tsx
@@ -0,0 +1,35 @@
+import { useRef, useState } from "react";
+
+type UseDialogType = {
+ onClose?: () => void;
+};
+
+const useDialog = ({ onClose }: UseDialogType = {}) => {
+ const [dialogContent, setDialogContent] = useStateDialog Content
++ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quia officia + odio temporibus libero a labore sint omnis, autem quibusdam fugit quae, + eveniet incidunt vero illo facere aperiam voluptates in. Repellendus! +
+
+
+
{(description || year) && (
+ {media ? (
+
+ );
+};
+
+export default MediaContainer;
diff --git a/src/stories/Library/media-container/media-container.scss b/src/stories/Library/media-container/media-container.scss
new file mode 100644
index 000000000..ccc7aacec
--- /dev/null
+++ b/src/stories/Library/media-container/media-container.scss
@@ -0,0 +1,62 @@
+@mixin media-container--grid {
+ .media-container {
+ .media-container__placeholder-text {
+ @include typography($typo__card-placeholder--grid);
+ }
+ }
+}
+
+@mixin media-container--card {
+ .media-container {
+ .media-container__placeholder-text {
+ @include typography($typo__card-placeholder);
+ }
+ }
+}
+
+@mixin media-container--small {
+ .media-container {
+ &--placeholder {
+ @include identity-placeholder($placeholder-paddings--small);
+ }
+
+ .media-container__placeholder-text {
+ font-size: 14px;
+ line-height: 16px;
+ padding: $s-md;
+ }
+ }
+}
+
+.media-container {
+ height: 100%;
+ width: 100%;
+
+ &--placeholder {
+ @include identity-placeholder;
+ }
+}
+
+.media-container__media {
+ height: 100%;
+ width: 100%;
+
+ // This is necessary to make object fit work.
+ .image-credited__image,
+ figure,
+ img {
+ width: 100%;
+ height: 100%;
+ }
+
+ img {
+ height: 100%;
+ width: 100%;
+ object-fit: cover;
+ object-position: center;
+ }
+}
+
+.media-container__placeholder-text {
+ @extend %identity-placeholder-text;
+}
diff --git a/src/stories/Library/nav-spot/NavSpot.tsx b/src/stories/Library/nav-spot/NavSpot.tsx
index f24094752..75fb3028b 100644
--- a/src/stories/Library/nav-spot/NavSpot.tsx
+++ b/src/stories/Library/nav-spot/NavSpot.tsx
@@ -1,6 +1,6 @@
import { FC, ReactNode } from "react";
-import clsx from "clsx";
import { ReactComponent as Arrow } from "../Arrows/icon-arrow-ui/icon-arrow-ui-large-right.svg";
+import MediaContainer from "../media-container/MediaContainer";
type NavSpotProps = {
variant?: string;
@@ -17,19 +17,15 @@ const NavSpot: FC {media}
+ ) : (
+
+ {placeholderText}
+
+ )}
+ {placeholderText}
- )}
-
+
{title}
diff --git a/src/stories/Library/nav-spot/nav-spot.scss b/src/stories/Library/nav-spot/nav-spot.scss index 322f041e7..506507c06 100644 --- a/src/stories/Library/nav-spot/nav-spot.scss +++ b/src/stories/Library/nav-spot/nav-spot.scss @@ -23,17 +23,6 @@ $_text-padding: $s-xl; .nav-spot__media { aspect-ratio: 16/9; - - * { - height: 100%; - } - - img { - height: 100%; - width: 100%; - object-fit: cover; - object-position: center; - } } @include media-query__medium("max-width") { @@ -48,16 +37,6 @@ $_text-padding: $s-xl; @extend %nav-spot--default; } -.nav-spot--has-no-media { - .nav-spot__media { - @extend %identity-placeholder; - } -} - -.nav-spot__placeholder-text { - @extend %identity-placeholder-text; -} - %nav-spot--large, .nav-spot[data-variant="large"] { background-color: white; diff --git a/src/stories/Library/opening-hours-editor/OpeningHoursForm.tsx b/src/stories/Library/opening-hours-editor/OpeningHoursForm.tsx new file mode 100644 index 000000000..f8299be32 --- /dev/null +++ b/src/stories/Library/opening-hours-editor/OpeningHoursForm.tsx @@ -0,0 +1,100 @@ +import React from "react"; + +const OpeningHoursForm = () => { + const openingHoursCategories = [ + { + title: "Åbent", + color: "blue", + }, + { + title: "Selvbetjening", + color: "yellow", + }, + { + title: "Med betjening", + color: "green", + }, + { + title: "Telefontid", + color: "grey", + }, + { + title: "Borgerservice", + color: "orange", + }, + { + title: "Børneetagen", + color: "lightblue", + }, + { + title: "Makerlab", + color: "purple", + }, + ]; + + const [category, setCategory] = React.useState(openingHoursCategories[0]); + const [startTime, setStartTime] = React.useState("08:00"); + const [endTime, setEndTime] = React.useState("16:00"); + + return ( + + ); +}; + +export default OpeningHoursForm; diff --git a/src/stories/Library/opening-hours-editor/opening-hours-editor.scss b/src/stories/Library/opening-hours-editor/opening-hours-editor.scss new file mode 100644 index 000000000..09c61ab63 --- /dev/null +++ b/src/stories/Library/opening-hours-editor/opening-hours-editor.scss @@ -0,0 +1,66 @@ +// 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; + padding: 2.5rem; + min-width: 300px; + line-height: 1; +} + +.opening-hours-editor-form__label { + font-weight: bold; + color: #333; + margin-top: 0.75rem; + margin-bottom: 0.5rem; +} + +.opening-hours-editor-form__select, +.opening-hours-editor-form__time-input { + border: 2px solid #ddd; + border-radius: 0.5rem; + padding: 0.5rem; + color: #555; + background-color: #fff; +} + +.opening-hours-editor-form__submit, +.opening-hours-editor-form__remove { + cursor: pointer; + margin-top: 1rem; + color: #fff; + padding: 0.75rem 1.5rem; + border-radius: 0.5rem; + transition: background-color 0.3s; +} + +.opening-hours-editor-form__submit { + border: 0; + background-color: #22c55e; + + &:hover { + background-color: #15803d; + } +} + +.opening-hours-editor-form__remove { + border: 0; + background-color: #ef4444; + + &:hover { + background-color: #dc2626; + } +} + +.opening-hours-editor-event-content { + padding: 5px 10px; + cursor: pointer; +} + +// Override Drupal's default margin for tables inside .fc to eliminate top and bottom spacing +// Fixes the issue where the selected hour starts half an hour later than the actual selection. +.fc table { + margin: 0; +} diff --git a/src/stories/Library/opening-hours/OpeningHours.stories.tsx b/src/stories/Library/opening-hours/OpeningHours.stories.tsx new file mode 100644 index 000000000..411c35c91 --- /dev/null +++ b/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
+
+ );
+};
+
+export default OpeningHours;
diff --git a/src/stories/Library/opening-hours/OpeningHoursDayEntry.tsx b/src/stories/Library/opening-hours/OpeningHoursDayEntry.tsx
new file mode 100644
index 000000000..54240d31e
--- /dev/null
+++ b/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
+
+ Åbningstider
+
+
+
+
+ {weekCurrentlyDisplayed}
+
+
+ {category.title}
+
+ {startTime} - {endTime}
+
+ -
+ {groupedOpeningHours.map(({ day, date, openingHourEntries }) => {
+ const formattedDateForDisplay = new Date(date).toLocaleDateString(
+ "da-DK",
+ {
+ day: "numeric",
+ month: "2-digit",
+ }
+ );
+
+ return (
+
-
+
+ {`${day}:`} + +
+ {openingHourEntries.length > 0 ? ( +-
+ {openingHourEntries.map((item) => (
+
+ ))} + + Biblioteket er lukket denne dag. +
+ )} +
+ );
+ })}
+