diff --git a/base.scss b/base.scss index b11b536a1..61051826d 100644 --- a/base.scss +++ b/base.scss @@ -138,6 +138,7 @@ @import "./src/stories/Library/opening-hours/opening-hours"; @import "./src/stories/Library/opening-hours/opening-hours-skeleton"; @import "./src/stories/Library/filtered-event-list/filtered-event-list"; +@import "./src/stories/Library/event-list-stacked/event-list-stacked"; // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest @import "./src/stories/Blocks/autosuggest/autosuggest"; diff --git a/public/icons/logo/reload_logo_black.svg b/public/icons/logo/reload_logo_black.svg new file mode 100644 index 000000000..84d3a78c2 --- /dev/null +++ b/public/icons/logo/reload_logo_black.svg @@ -0,0 +1 @@ +Reload_mark_RGB_black diff --git a/public/icons/logo/reload_logo_white.svg b/public/icons/logo/reload_logo_white.svg new file mode 100644 index 000000000..027ca4ebc --- /dev/null +++ b/public/icons/logo/reload_logo_white.svg @@ -0,0 +1 @@ +Reload_mark_RGB_white \ No newline at end of file diff --git a/src/stories/Library/event-list-stacked/EventListStacked.tsx b/src/stories/Library/event-list-stacked/EventListStacked.tsx new file mode 100644 index 000000000..54bb5183c --- /dev/null +++ b/src/stories/Library/event-list-stacked/EventListStacked.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import { ContentListItem } from "../content-list-item/ContentListItem"; +import ContentListItemStacked from "../content-list-item/ContentListItemStacked"; +import contentListData from "../content-list/ContentListData"; + +interface PromoteEventsListProps { + title: string; +} + +const EventListStacked: React.FC = ({ title }) => { + return ( +
+

{title}

+ + {contentListData.map((event) => ( + + ))} +
+ ); +}; +export default EventListStacked; diff --git a/src/stories/Library/event-list-stacked/event-list-stacked.scss b/src/stories/Library/event-list-stacked/event-list-stacked.scss new file mode 100644 index 000000000..a783727fa --- /dev/null +++ b/src/stories/Library/event-list-stacked/event-list-stacked.scss @@ -0,0 +1,9 @@ +.event-list-stacked { + @include layout-container($layout__max-width--medium); + @include block-spacing(); +} + +.event-list-stacked__heading { + @include typography($typo__h2); + margin-bottom: $s-xl; +} diff --git a/src/stories/Library/event-list-stacked/eventListStacked.stories.tsx b/src/stories/Library/event-list-stacked/eventListStacked.stories.tsx new file mode 100644 index 000000000..451af95b1 --- /dev/null +++ b/src/stories/Library/event-list-stacked/eventListStacked.stories.tsx @@ -0,0 +1,21 @@ +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import EventListStacked from "./EventListStacked"; + +export default { + title: "Library/ Stacked Event List", + + component: EventListStacked, + argTypes: { + title: { + defaultValue: "Kommende arrangementer", + control: "text", + description: "Title of the section", + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const FilteredList = Template.bind({}); diff --git a/src/stories/Library/opening-hours-editor/opening-hours-editor.scss b/src/stories/Library/opening-hours-editor/opening-hours-editor.scss index 09c61ab63..e3fe5a5de 100644 --- a/src/stories/Library/opening-hours-editor/opening-hours-editor.scss +++ b/src/stories/Library/opening-hours-editor/opening-hours-editor.scss @@ -6,7 +6,7 @@ display: grid; background: #f8f8f8; padding: 2.5rem; - min-width: 300px; + width: 350px; line-height: 1; } @@ -24,11 +24,43 @@ padding: 0.5rem; color: #555; background-color: #fff; + + &:disabled { + background-color: transparent; + } +} + +.opening-hours-editor-form__checkbox { + margin-top: 1.5rem; + margin-bottom: 0.5rem; + display: flex; + gap: 0.5rem; + align-items: center; + + input[type="checkbox"] { + width: 2rem; + height: 2rem; + } + + label { + margin: 0; + font-size: 0.8rem; + line-height: 1.25; + } +} + +.opening-hours-editor-form__table { + tr > td:last-child { + white-space: nowrap; + text-align: right; + } } .opening-hours-editor-form__submit, -.opening-hours-editor-form__remove { +.opening-hours-editor-form__remove, +.opening-hours-editor-form__cancel { cursor: pointer; + border: 0; margin-top: 1rem; color: #fff; padding: 0.75rem 1.5rem; @@ -37,7 +69,6 @@ } .opening-hours-editor-form__submit { - border: 0; background-color: #22c55e; &:hover { @@ -46,7 +77,6 @@ } .opening-hours-editor-form__remove { - border: 0; background-color: #ef4444; &:hover { @@ -54,9 +84,27 @@ } } +.opening-hours-editor-form__cancel { + background-color: #d1d5db; + + &:hover { + background-color: #a1a1aa; + } +} + .opening-hours-editor-event-content { padding: 5px 10px; cursor: pointer; + width: 100%; + display: flex; + justify-content: space-between; + background-color: rgba(255, 255, 255, 0.8); + color: black; +} + +.opening-hours-editor-event-content__series-icon { + width: 2rem; + height: 2rem; } // Override Drupal's default margin for tables inside .fc to eliminate top and bottom spacing @@ -64,3 +112,8 @@ .fc table { margin: 0; } + +// Override Drupal's default border for table rows inside .fc to keep the correct styling for when an hour starts +.fc tr { + border-bottom: unset; +}