From 76a2e6fb7baeff54c1d4318463c3c3e898ff89a6 Mon Sep 17 00:00:00 2001 From: Benjamin Rasmussen Date: Mon, 22 Jan 2024 17:34:32 +0100 Subject: [PATCH 001/136] Adjust card-grid max width, to avoid massive cards. DDFFORM-180 --- .../Library/card-grid/CardGrid.stories.tsx | 1 + src/stories/Library/card-grid/card-grid.scss | 18 +++++++++++++++--- src/stories/Library/card/card.scss | 10 +++++----- .../scss/tools/variables.typography.scss | 16 +++++++++++++++- 4 files changed, 36 insertions(+), 9 deletions(-) diff --git a/src/stories/Library/card-grid/CardGrid.stories.tsx b/src/stories/Library/card-grid/CardGrid.stories.tsx index 45bb5e21d..e1dc24303 100644 --- a/src/stories/Library/card-grid/CardGrid.stories.tsx +++ b/src/stories/Library/card-grid/CardGrid.stories.tsx @@ -66,6 +66,7 @@ const Few = Template.bind({}); Few.args = { title: undefined, linkText: undefined, + items: [cardNoImage, card, cardNoImage], }; export { Many, Few }; diff --git a/src/stories/Library/card-grid/card-grid.scss b/src/stories/Library/card-grid/card-grid.scss index d908779c0..9ae9f59bf 100644 --- a/src/stories/Library/card-grid/card-grid.scss +++ b/src/stories/Library/card-grid/card-grid.scss @@ -4,7 +4,15 @@ $_card-grid-gap: $s-lg; .card-grid { - @include layout-container("none"); + @include layout-container(); + + .card__placeholder-text { + @include typography($typo__card-placeholder--grid); + } +} + +.card-grid--full-width { + @include layout-container(none); } .card-grid__header { @@ -85,6 +93,8 @@ $_card-grid-gap: $s-lg; ); // The card widths on the largest (desktop) screen. + // These sizes are only being used on full-width grids, as the cards will + // become too massive otherwise. $_card-widths--large: ( "x-large": 45%, "small": 15%, @@ -102,8 +112,10 @@ $_card-grid-gap: $s-lg; width: map_get($_card-widths--medium, $name); } - @include media-query__large { - width: map_get($_card-widths--large, $name); + .card-grid--full-width & { + @include media-query__large { + width: map_get($_card-widths--large, $name); + } } .card { diff --git a/src/stories/Library/card/card.scss b/src/stories/Library/card/card.scss index fc9c813d8..e899e1cfc 100644 --- a/src/stories/Library/card/card.scss +++ b/src/stories/Library/card/card.scss @@ -11,7 +11,7 @@ } .card__placeholder-text { - @include typography($typo__card-placeholder--small); + @include typography($typo__card-placeholder--medium); @extend %identity-placeholder-inner-padding; display: flex; height: 100%; @@ -125,10 +125,12 @@ %card-variant--small, .card[data-variant="small"] { - @extend %card-variant--x-large; - width: 206px; + .card__media { + aspect-ratio: 1/1; + } + .card__tags, .card__media { margin-bottom: $s-xs; @@ -137,8 +139,6 @@ // 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) { - width: 206px; - .card__placeholder-text { font-size: 0; } diff --git a/src/styles/scss/tools/variables.typography.scss b/src/styles/scss/tools/variables.typography.scss index 12657aa42..fc96c6ec1 100644 --- a/src/styles/scss/tools/variables.typography.scss +++ b/src/styles/scss/tools/variables.typography.scss @@ -325,7 +325,7 @@ $typo__card-placeholder: ( ), ); -$typo__card-placeholder--small: ( +$typo__card-placeholder--medium: ( mobile: ( font-family: $font__title, font-style: normal, @@ -338,3 +338,17 @@ $typo__card-placeholder--small: ( line-height: 32px, ), ); + +$typo__card-placeholder--grid: ( + mobile: ( + font-family: $font__title, + font-style: normal, + font-weight: $font__weight--normal, + font-size: 16px, + line-height: 20px, + ), + #{$breakpoint__large-card}: ( + font-size: 20px, + line-height: 24px, + ), +); From 61f038b0b805f6bca230833d11a614ed5934072f Mon Sep 17 00:00:00 2001 From: Benjamin Rasmussen Date: Mon, 22 Jan 2024 17:35:33 +0100 Subject: [PATCH 002/136] Fix cards sizing, and slider 'jumping' DDFFORM-182 - Make every second item in slider have margin-top, to pull it down, instead of based on no-image. - Add missing mobile styling for tall (medium) cards. - Add framing to XL card teasers with images - Adjust the framing and padding on cards, to make them more sensible on smaller screens. --- src/stories/Library/card-grid/card-grid.scss | 4 ++-- src/stories/Library/card/card.scss | 8 +++++++- src/stories/Library/slider/slider.scss | 10 ++++------ src/styles/scss/tools/variables.spacings.scss | 2 +- 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/stories/Library/card-grid/card-grid.scss b/src/stories/Library/card-grid/card-grid.scss index 9ae9f59bf..e4640e54b 100644 --- a/src/stories/Library/card-grid/card-grid.scss +++ b/src/stories/Library/card-grid/card-grid.scss @@ -105,6 +105,7 @@ $_card-grid-gap: $s-lg; @each $key, $name in $_card-patterns { // The design is very specific about the masonry design. See the sizes // defined in the arrays above, which we loop through here. + // stylelint-disable max-nesting-depth -- I know it's awful nesting, but i have no choice. &:nth-child(#{$key}) { width: map_get($_card-widths--small, $name); @@ -126,7 +127,6 @@ $_card-grid-gap: $s-lg; // placeholder box, that there is no space for the text, on larger // screens. On smaller screens, it takes up 50% of the page, so // there, there is plenty of space. - // stylelint-disable max-nesting-depth -- I know it's awful nesting, but i have no choice. @if ($name == "small") { @include media-query__small { .card__placeholder-text { @@ -134,8 +134,8 @@ $_card-grid-gap: $s-lg; } } } - // stylelint-enable max-nesting-depth } } + // stylelint-enable max-nesting-depth } } diff --git a/src/stories/Library/card/card.scss b/src/stories/Library/card/card.scss index e899e1cfc..28e0e7851 100644 --- a/src/stories/Library/card/card.scss +++ b/src/stories/Library/card/card.scss @@ -119,6 +119,8 @@ } .card__media { + @extend %identity-placeholder; + aspect-ratio: 1/1; } } @@ -155,7 +157,11 @@ %card-variant--medium, .card[data-variant="medium"] { - width: 321px; + width: 200px; + + @include media-query__name($breakpoint__large-card) { + width: 321px; + } .card__media { // Odd aspect ratio, taken from the design. diff --git a/src/stories/Library/slider/slider.scss b/src/stories/Library/slider/slider.scss index 077ab774b..3cb4aeec8 100644 --- a/src/stories/Library/slider/slider.scss +++ b/src/stories/Library/slider/slider.scss @@ -50,21 +50,19 @@ max-width: calc(100vw - #{$_card-mobile-peek}); } - // For some reason, all no-image cards in the slider should be pulled - // up higher than the image ones. - .card--has-image { - margin-top: $s-xl; - } - // The slider follows a very specific card pattern: // 1: large, 2: x-large, 3: medium, 4: small - repeating. @for $i from 1 through 4 { &:nth-child(4n + #{$i}) .card { @if $i == 1 { + margin-top: $s-xl; + @extend %card-variant--large; } @else if $i == 2 { @extend %card-variant--x-large; } @else if $i == 3 { + margin-top: $s-xl; + @extend %card-variant--medium; } @else if $i == 4 { @extend %card-variant--small; diff --git a/src/styles/scss/tools/variables.spacings.scss b/src/styles/scss/tools/variables.spacings.scss index b370166cd..98445bf8a 100644 --- a/src/styles/scss/tools/variables.spacings.scss +++ b/src/styles/scss/tools/variables.spacings.scss @@ -27,5 +27,5 @@ $spacings: ( $placeholder-paddings: ( mobile: $s-lg, small: $s-xl, - medium: $s-3xl, + medium: $s-2xl, ); From d1b6a990311915db7abbea70a3855d5578294e5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Garn=C3=A6s?= Date: Tue, 23 Jan 2024 08:30:59 +0100 Subject: [PATCH 003/136] Start release 2024.6.0 From d77b45e3022181bba3b52608725f8922b9a865cc Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Tue, 23 Jan 2024 11:24:57 +0100 Subject: [PATCH 004/136] Refactor WYSIWYG Styles Enhanced the WYSIWYG styles to improve compatibility with `event-description` and `rich-text`, and potentially other components in future development --- .../Library/event-description/event-description.scss | 1 + src/stories/Library/rich-text/rich-text.scss | 10 +++++++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/stories/Library/event-description/event-description.scss b/src/stories/Library/event-description/event-description.scss index 25f41f15e..a74bf7db7 100644 --- a/src/stories/Library/event-description/event-description.scss +++ b/src/stories/Library/event-description/event-description.scss @@ -21,6 +21,7 @@ } .event-description__description { + @extend %wysiwyg; @include typography($typo__body-large); line-height: 24px; diff --git a/src/stories/Library/rich-text/rich-text.scss b/src/stories/Library/rich-text/rich-text.scss index 3a6b47f4d..0c7d6a891 100644 --- a/src/stories/Library/rich-text/rich-text.scss +++ b/src/stories/Library/rich-text/rich-text.scss @@ -3,10 +3,8 @@ // we will target HTML tags instead. $_max-width-rich-text: 780px; -.rich-text { +%wysiwyg { @include typography($typo__rich-text-body); - @include layout-container($_max-width-rich-text); - @include vertical-spacing; a { @extend %text-inline-link; @@ -126,3 +124,9 @@ $_max-width-rich-text: 780px; font-weight: bold; } } + +.rich-text { + @include layout-container($_max-width-rich-text); + @include vertical-spacing; + @extend %wysiwyg; +} From 10187c7a0151513b056f23c0cdfd52807294409a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Garn=C3=A6s?= Date: Wed, 24 Jan 2024 16:22:25 +0100 Subject: [PATCH 005/136] Rename Tag component to TagButton Currently the tag component consists of a button but there are situations where we want to use it for other purposes e.g. for links. As a first step of this refactoring we: - Rename the current component - Place it in a subfolder - Update all references to it --- .../Library/Modals/modal-facet-browser/FacetBrowser.tsx | 4 ++-- src/stories/Library/card-list-page/FacetLine.tsx | 8 ++++---- .../Library/card-list-page/FacetLineSelectedTerms.tsx | 6 +++--- src/stories/Library/event-header/EventHeader.tsx | 4 ++-- src/stories/Library/event-list-item/EventListItem.tsx | 6 +++--- .../{Tag.stories.tsx => tag-button/TagButton.stories.tsx} | 4 ++-- .../Library/tag/{Tag.tsx => tag-button/TagButton.tsx} | 4 ++-- 7 files changed, 18 insertions(+), 18 deletions(-) rename src/stories/Library/tag/{Tag.stories.tsx => tag-button/TagButton.stories.tsx} (92%) rename src/stories/Library/tag/{Tag.tsx => tag-button/TagButton.tsx} (94%) diff --git a/src/stories/Library/Modals/modal-facet-browser/FacetBrowser.tsx b/src/stories/Library/Modals/modal-facet-browser/FacetBrowser.tsx index fb8aeca11..36f1cc349 100644 --- a/src/stories/Library/Modals/modal-facet-browser/FacetBrowser.tsx +++ b/src/stories/Library/Modals/modal-facet-browser/FacetBrowser.tsx @@ -2,7 +2,7 @@ import Disclosure from "../../disclosure/Disclosure"; import { Button } from "../../Buttons/button/Button"; import Modal from "../Modal"; import facetBrowserDummyData from "./facet-browser-dummy-data"; -import { Tag } from "../../tag/Tag"; +import { TagButton } from "../../tag/tag-button/TagButton"; export type FacetBrowserProps = { title: string; @@ -44,7 +44,7 @@ const FacetBrowser: React.FC = ({ >
{facet.tags.map((tag) => ( - {tag} + {tag} ))}
+ ) : ( + "" + )} + + ); +}; + +export default NavGrid; diff --git a/src/stories/Library/nav-grid/init-nav-grid.js b/src/stories/Library/nav-grid/init-nav-grid.js new file mode 100644 index 000000000..769551b5d --- /dev/null +++ b/src/stories/Library/nav-grid/init-nav-grid.js @@ -0,0 +1,18 @@ +window.addEventListener("load", () => { + const grids = document.querySelectorAll( + ".nav-grid--has-many:not(.is-initialized)" + ); + + grids.forEach((grid) => { + grid.classList.add("is-initialized"); + const button = grid.querySelector(".nav-grid__controller"); + + if (!button) { + return; + } + + button.addEventListener("click", () => { + grid.classList.remove("nav-grid--folded"); + }); + }); +}); diff --git a/src/stories/Library/nav-grid/nav-grid.scss b/src/stories/Library/nav-grid/nav-grid.scss new file mode 100644 index 000000000..236e89d67 --- /dev/null +++ b/src/stories/Library/nav-grid/nav-grid.scss @@ -0,0 +1,73 @@ +.nav-grid { + @include layout-container($layout__max-width--large, 0); +} + +.nav-grid--simple { + .nav-teaser__subtitle { + display: none; + } +} + +.nav-grid__controller { + display: none; + margin: auto; + margin-top: $s-md; +} + +.nav-grid__header { + @include layout-container(); + + display: flex; + align-items: center; +} + +.nav-grid__title { + @include typography($typo__h2); + + display: flex; + flex-grow: 1; + margin-bottom: $s-lg; +} + +.nav-grid__items { + display: grid; + grid-gap: 1px; + + grid-template-columns: 1fr; + + @include media-query__small { + grid-template-columns: 1fr 1fr; + } + + @include media-query__medium { + grid-template-columns: 1fr 1fr 1fr; + + .nav-grid--count-1 &, + .nav-grid--count-2 &, + .nav-grid--count-3 &, + .nav-grid--count-4 & { + grid-template-columns: 1fr 1fr; + } + } +} + +.nav-grid__item { + // We use outline, to collapse the border to avoid double 2px borders. + outline: 1px solid $color__global-tertiary-1; + + // We want the borders to collapse, so we'll remove the borders on the + // individual teasers. + .nav-teaser { + border: 0; + } +} + +.nav-grid--folded { + .nav-grid__item:nth-child(n + 7) { + display: none; + } + + .nav-grid__controller { + display: block; + } +} diff --git a/src/stories/Library/nav-teaser/NavTeaser.stories.tsx b/src/stories/Library/nav-teaser/NavTeaser.stories.tsx new file mode 100644 index 000000000..12e80d97c --- /dev/null +++ b/src/stories/Library/nav-teaser/NavTeaser.stories.tsx @@ -0,0 +1,32 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; +import NavTeaser from "./NavTeaser"; + +export default { + title: "Library / Nav teaser", + component: NavTeaser, + decorators: [withDesign], + argTypes: { + title: { + defaultValue: "Læseklub for børn", + }, + subtitle: { + defaultValue: + "Børn har en tendens til at droppe fritidslæsningen omkring de 10 år. Med læsefamilieposerne får du inspiration til at få hele familien samlet omkring læsning.", + }, + }, + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=434-6449&mode=design&t=BnLo07eCsytFa8Ik-4", + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +const Teaser = Template.bind({}); + +export { Teaser }; diff --git a/src/stories/Library/nav-teaser/NavTeaser.tsx b/src/stories/Library/nav-teaser/NavTeaser.tsx new file mode 100644 index 000000000..a2c9defeb --- /dev/null +++ b/src/stories/Library/nav-teaser/NavTeaser.tsx @@ -0,0 +1,23 @@ +import { FC } from "react"; +import { ReactComponent as Arrow } from "../Arrows/icon-arrow-ui/icon-arrow-ui-nav.svg"; + +type NavTeaserProps = { + title: string; + subtitle?: string; +}; + +const NavTeaser: FC = ({ title, subtitle }) => { + return ( + + ); +}; + +export default NavTeaser; diff --git a/src/stories/Library/nav-teaser/nav-teaser.scss b/src/stories/Library/nav-teaser/nav-teaser.scss new file mode 100644 index 000000000..4d2135115 --- /dev/null +++ b/src/stories/Library/nav-teaser/nav-teaser.scss @@ -0,0 +1,35 @@ +.nav-teaser { + @include typography($typo__body-placeholder); + + display: block; + width: 100%; + box-sizing: border-box; + border: 1px solid $color__global-tertiary-1; + cursor: pointer; + + > a { + display: block; + width: 100%; + height: 100%; + padding: $s-md; + text-decoration: none; + + @include media-query__medium { + padding: $s-xl $s-2xl; + } + + @include media-query__large { + padding: $s-2xl $s-3xl; + } + } +} + +.nav-teaser__title { + @include typography($typo__h3); + + margin-bottom: $s-md; +} + +.nav-teaser__subtitle { + margin-bottom: $s-lg; +} From c43cb5fefc7942a134188bfef8036c59265918f4 Mon Sep 17 00:00:00 2001 From: Benjamin Rasmussen Date: Fri, 2 Feb 2024 11:39:41 +0100 Subject: [PATCH 049/136] Allow logos to also support images without height/width set. (E.g. SVG) DDFFORM-176 DDFFORM-177 --- src/stories/Library/logo/logo.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/stories/Library/logo/logo.scss b/src/stories/Library/logo/logo.scss index 6ac760cfd..11a0a3c33 100644 --- a/src/stories/Library/logo/logo.scss +++ b/src/stories/Library/logo/logo.scss @@ -1,6 +1,10 @@ .logo { img { display: none; + + height: 100px; + width: auto; + @include media-query__small { display: block; } From 0f1118c245b43cb2adb33545b746b61d4d3cf3f0 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Fri, 26 Jan 2024 12:19:52 +0100 Subject: [PATCH 050/136] Add `Hero` component This component shares a lot of CSS with `event-header`, therefore there should be some refactoring in our CSS so the pages components can share "hero" layout css. --- base.scss | 1 + src/stories/Library/hero/Hero.stories.tsx | 42 +++++++++ src/stories/Library/hero/Hero.tsx | 47 ++++++++++ src/stories/Library/hero/hero.scss | 102 ++++++++++++++++++++++ 4 files changed, 192 insertions(+) create mode 100644 src/stories/Library/hero/Hero.stories.tsx create mode 100644 src/stories/Library/hero/Hero.tsx create mode 100644 src/stories/Library/hero/hero.scss diff --git a/base.scss b/base.scss index fbcd3036c..8277827de 100644 --- a/base.scss +++ b/base.scss @@ -117,6 +117,7 @@ @import "./src/stories/Library/recommendation/recommendation-skeleton"; @import "./src/stories/Library/nav-teaser/nav-teaser"; @import "./src/stories/Library/nav-grid/nav-grid"; +@import "./src/stories/Library/hero/hero"; // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest @import "./src/stories/Blocks/autosuggest/autosuggest"; diff --git a/src/stories/Library/hero/Hero.stories.tsx b/src/stories/Library/hero/Hero.stories.tsx new file mode 100644 index 000000000..0e074ae42 --- /dev/null +++ b/src/stories/Library/hero/Hero.stories.tsx @@ -0,0 +1,42 @@ +import { ComponentStory, ComponentMeta } from "@storybook/react"; +import { withDesign } from "storybook-addon-designs"; + +import Hero from "./Hero"; + +export default { + title: "Library / Hero", + component: Hero, + decorators: [withDesign], + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39352&mode=design", + }, + }, + argTypes: { + image: { + defaultValue: + "https://images.unsplash.com/photo-1531058020387-3be344556be6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZXZlbnR8fHx8fHwxNzAyOTEwMzE0&ixlib=rb-4.0.3&q=80&utm_campaign=api-credit&utm_medium=referral&utm_source=unsplash_source&w=1080", + type: "string", + }, + date: { + defaultValue: "06 Dec 2022", + type: "string", + }, + title: { + name: "Title", + control: "text", + defaultValue: "Stine Pilgaard vinder De Gyldne Laurbær", + }, + description: { + name: "Description", + control: "text", + defaultValue: + "Boghandlernes store bogpris - De Gyldne går denne gang til Stine Pilgaard for hendes roman 'Meter i sekundet'. Stort tillykke til Stine Pilgaard.", + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const defaultHero = Template.bind({}); diff --git a/src/stories/Library/hero/Hero.tsx b/src/stories/Library/hero/Hero.tsx new file mode 100644 index 000000000..0669c1390 --- /dev/null +++ b/src/stories/Library/hero/Hero.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import ImageCredited from "../image-credited/ImageCredited"; +import { Tag } from "../tag/Tag"; +import { ReactComponent as ArrowLargeRight } from "../Arrows/icon-arrow-ui/icon-arrow-ui-large-right.svg"; + +type HeroProps = { + image: string; + date: string; + title: string; + description: string; +}; + +const Hero: React.FunctionComponent = ({ + image, + date, + title, + description, +}) => { + return ( +
+ +
+ LITTERATUR +
+
+ Arrangement +
|
+ +
+

{title}

+

{description}

+
+ +
+ +
+ +
+
+ ); +}; + +export default Hero; diff --git a/src/stories/Library/hero/hero.scss b/src/stories/Library/hero/hero.scss new file mode 100644 index 000000000..c2e992fbf --- /dev/null +++ b/src/stories/Library/hero/hero.scss @@ -0,0 +1,102 @@ +// shuld share with event-header +.hero { + @include layout-container; + border-bottom: 1px solid $color__global-tertiary-1; + display: grid; + gap: $s-lg; + padding-bottom: $s-2xl; + @include media-query__small { + grid-template-columns: 2fr 1fr; + gap: 0; + padding-bottom: 0; + } + + a { + text-decoration: none; + } +} + +.hero__content, +.hero__visual { + padding: 0; + @include media-query__small { + padding: $s-2xl; + } +} + +.hero__content { + padding-top: $s-md; + display: grid; + grid-template-columns: $s-3xl 1fr $s-3xl; + grid-template-areas: + ". tags tags" + ". date ." + ". title ." + ". description ." + ". cta cta"; + + @include media-query__small { + padding-top: $s-3xl; + grid-template-columns: 1fr; + } +} + +.hero__visual { + @include media-query__small { + grid-column: 1/2; + grid-row: 1/2; + border-right: 1px solid $color__global-tertiary-1; + } +} + +// shuld share with event-header +.hero__tags { + grid-area: tags; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: $s-md; + @include media-query__small { + margin-bottom: $s-lg; + } +} + +// shuld be a component +.hero-date { + grid-area: date; + @include typography($typo__h5); + display: flex; + align-items: center; + gap: 10px; + margin-bottom: $s-md; + + &__text { + color: $color__global-tertiary-2; + } + + &__date { + @include media-query__small { + white-space: nowrap; + } + } +} + +.hero__title { + @include typography($typo__h1); + + grid-area: title; + margin-bottom: $s-md; + + @include media-query__small { + margin-bottom: $s-xl; + } +} + +.hero__description { + grid-area: description; + margin-bottom: $s-md; +} + +.hero__cta { + grid-area: cta; +} From c6a64ad56e7696b211db82e8683873a260527920 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Fri, 26 Jan 2024 14:32:50 +0100 Subject: [PATCH 051/136] Refactor shared "hero" css + Add `HeroTags` component This is a significant refactor that enables two-column hero components to share the necessary styles. `HeroTags` are now a reusable component used in most hero's, with the addition of 'show-more' functionality --- base.scss | 1 + .../pages/FrontPage.stories.tsx} | 17 +++-- src/stories/Blocks/pages/FrontPage.tsx | 14 ++++ src/stories/Blocks/pages/pages.scss | 56 ++++++++++++++ .../Library/event-header/EventHeader.tsx | 21 ++---- .../Library/event-header/event-header.scss | 70 +---------------- src/stories/Library/hero/Hero.tsx | 20 +++-- src/stories/Library/hero/hero.scss | 75 +------------------ src/stories/Library/tag/HeroTags.stories.tsx | 36 +++++++++ src/stories/Library/tag/HeroTags.tsx | 37 +++++++++ src/stories/Library/tag/tag.scss | 10 +++ 11 files changed, 186 insertions(+), 171 deletions(-) rename src/stories/{Library/hero/Hero.stories.tsx => Blocks/pages/FrontPage.stories.tsx} (77%) create mode 100644 src/stories/Blocks/pages/FrontPage.tsx create mode 100644 src/stories/Blocks/pages/pages.scss create mode 100644 src/stories/Library/tag/HeroTags.stories.tsx create mode 100644 src/stories/Library/tag/HeroTags.tsx diff --git a/base.scss b/base.scss index 8277827de..fe8ede601 100644 --- a/base.scss +++ b/base.scss @@ -135,6 +135,7 @@ @import "./src/stories/Blocks/article/article"; @import "./src/stories/Blocks/event-page/event-page"; @import "./src/stories/Blocks/event-list-page/event-list-page"; +@import "./src/stories/Blocks/pages/pages"; @import "./src/styles/scss/shared"; @import "./src/styles/scss/internal"; diff --git a/src/stories/Library/hero/Hero.stories.tsx b/src/stories/Blocks/pages/FrontPage.stories.tsx similarity index 77% rename from src/stories/Library/hero/Hero.stories.tsx rename to src/stories/Blocks/pages/FrontPage.stories.tsx index 0e074ae42..16c6defb9 100644 --- a/src/stories/Library/hero/Hero.stories.tsx +++ b/src/stories/Blocks/pages/FrontPage.stories.tsx @@ -1,16 +1,15 @@ import { ComponentStory, ComponentMeta } from "@storybook/react"; import { withDesign } from "storybook-addon-designs"; - -import Hero from "./Hero"; +import FrontPage from "./FrontPage"; export default { - title: "Library / Hero", - component: Hero, + title: "Blocks / Front Page", + component: FrontPage, decorators: [withDesign], parameters: { design: { type: "figma", - url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39352&mode=design", + url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7477-39243&mode=dev", }, }, argTypes: { @@ -35,8 +34,10 @@ export default { "Boghandlernes store bogpris - De Gyldne går denne gang til Stine Pilgaard for hendes roman 'Meter i sekundet'. Stort tillykke til Stine Pilgaard.", }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = (args) => ; +const Template: ComponentStory = (args) => ( + +); -export const defaultHero = Template.bind({}); +export const Default = Template.bind({}); diff --git a/src/stories/Blocks/pages/FrontPage.tsx b/src/stories/Blocks/pages/FrontPage.tsx new file mode 100644 index 000000000..fbfadb37f --- /dev/null +++ b/src/stories/Blocks/pages/FrontPage.tsx @@ -0,0 +1,14 @@ +import { FC } from "react"; +import Hero, { HeroProps } from "../../Library/hero/Hero"; + +type FrontPageProps = HeroProps; + +const FrontPage: FC = ({ image, date, title, description }) => { + return ( +
+ +
+ ); +}; + +export default FrontPage; diff --git a/src/stories/Blocks/pages/pages.scss b/src/stories/Blocks/pages/pages.scss new file mode 100644 index 000000000..d9bd07955 --- /dev/null +++ b/src/stories/Blocks/pages/pages.scss @@ -0,0 +1,56 @@ +%hero-2-column { + @include layout-container($layout__max-width--large); + border-bottom: 1px solid $color__global-tertiary-1; + display: grid; + gap: $s-lg; + padding-bottom: $s-2xl; + @include media-query__small { + grid-template-columns: 2fr 1fr; + gap: 0; + padding-bottom: 0; + } + + // if hero-content is a link, remove text-decoration for all children + > a { + text-decoration: none; + } + + .hero-content, + .hero-visual { + @include media-query__small { + padding: $s-2xl; + } + } + + .hero-content { + padding-top: $s-md; + + @include media-query__small { + padding-top: $s-3xl; + } + + // Add paddig on childs except .hero-cta + > *:not(.hero-cta) { + padding: 0 $s-3xl; + @include media-query__small { + padding: 0; + } + } + } + + .hero-visual { + @include media-query__small { + grid-column: 1/2; + grid-row: 1/2; + border-right: 1px solid $color__global-tertiary-1; + } + } + + .hero-cta { + width: 100%; + text-decoration: none; + @include media-query__small { + width: auto; + } + } +} diff --git a/src/stories/Library/event-header/EventHeader.tsx b/src/stories/Library/event-header/EventHeader.tsx index d4ee64479..705c0226a 100644 --- a/src/stories/Library/event-header/EventHeader.tsx +++ b/src/stories/Library/event-header/EventHeader.tsx @@ -1,5 +1,5 @@ import { FC } from "react"; -import { Tag } from "../tag/Tag"; +import HeroTags from "../tag/HeroTags"; import ImageCredited from "../image-credited/ImageCredited"; type EventHeaderProps = { @@ -11,22 +11,15 @@ type EventHeaderProps = { const EventHeader: FC = ({ title, date, image }) => { return (
-
-
- - Udstilling - -
- -

{title}

- +
+ + +

{title}

+ Køb billet
-
+
= ({ description, }) => { return ( -
- -
- LITTERATUR -
+
+ +
Arrangement
|
-

{title}

-

{description}

-
+

{title}

+

{description}

+
-
+
; + +const Template: ComponentStory = (args) => ( + +); + +export const Default = Template.bind({}); +Default.args = { + tags: ["litteratur"], +}; + +export const WithTags = Template.bind({}); +WithTags.args = { + tags: ["litteratur", "skønlitteratur", "børn", "fantasy"], +}; diff --git a/src/stories/Library/tag/HeroTags.tsx b/src/stories/Library/tag/HeroTags.tsx new file mode 100644 index 000000000..0bc8bf0c7 --- /dev/null +++ b/src/stories/Library/tag/HeroTags.tsx @@ -0,0 +1,37 @@ +import { FC, useEffect } from "react"; +import { Tag } from "./Tag"; + +type HeroTagsProps = { + tags: string[]; +}; + +const HeroTags: FC = ({ tags }) => { + useEffect(() => { + require("../../utils/show-more"); + }, []); + + if (!tags) { + return null; + } + + return ( +
    + {tags.map((tag, index) => ( +
  • + + {tag} + +
    • + ))} + +
+ ); +}; + +export default HeroTags; diff --git a/src/stories/Library/tag/tag.scss b/src/stories/Library/tag/tag.scss index 7c896e491..da91e7e5f 100644 --- a/src/stories/Library/tag/tag.scss +++ b/src/stories/Library/tag/tag.scss @@ -25,3 +25,13 @@ .tag-icon { margin-left: 10px; } + +.hero-tags { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-bottom: $s-md; + @include media-query__small { + margin-bottom: $s-lg; + } +} From fa90764042adaffb2c3c0287bd64d7e4b23fdc80 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 29 Jan 2024 09:58:16 +0100 Subject: [PATCH 052/136] Refactor `show-more` markup structure Due to accessibility error: List element has direct children that are not allowed: button --- src/stories/Library/tag/HeroTags.tsx | 22 ++++++++++++---------- src/stories/Library/tag/tag.scss | 9 ++++++++- src/stories/utils/show-more.md | 16 +++++++++------- 3 files changed, 29 insertions(+), 18 deletions(-) diff --git a/src/stories/Library/tag/HeroTags.tsx b/src/stories/Library/tag/HeroTags.tsx index 0bc8bf0c7..4698544c1 100644 --- a/src/stories/Library/tag/HeroTags.tsx +++ b/src/stories/Library/tag/HeroTags.tsx @@ -15,22 +15,24 @@ const HeroTags: FC = ({ tags }) => { } return ( -
    - {tags.map((tag, index) => ( -
  • - - {tag} - -
    • - ))} +
    +
      + {tags.map((tag, index) => ( +
    • + + {tag} + +
      • + ))} +
    -
+
); }; diff --git a/src/stories/Library/tag/tag.scss b/src/stories/Library/tag/tag.scss index da91e7e5f..ac2cc7d3f 100644 --- a/src/stories/Library/tag/tag.scss +++ b/src/stories/Library/tag/tag.scss @@ -29,9 +29,16 @@ .hero-tags { display: flex; flex-wrap: wrap; - gap: 0.5rem; + gap: 0.75rem; margin-bottom: $s-md; @include media-query__small { margin-bottom: $s-lg; } + + ul, + ol { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + } } diff --git a/src/stories/utils/show-more.md b/src/stories/utils/show-more.md index 25c6a2d9b..4d0ae3d4c 100644 --- a/src/stories/utils/show-more.md +++ b/src/stories/utils/show-more.md @@ -10,7 +10,7 @@ Structure your HTML elements as follows for implementing the "Show More/Less" feature: - **List Element**: -Use an `
    ` or `
      ` element with the `data-show-more-list` attribute +Use an wrapper element with the `data-show-more-list` attribute This element will contain both the list items and the toggle button. - **List Items**: Assign the `data-show-more-item` attribute to each list item that you want @@ -34,11 +34,13 @@ Set the initial number of visible items with the ### Example HTML Markup ```html -
        -
      • Item 1
        • -
      • Item 2
        • - -
      • Item 3
        • +
        +
          +
        • Item 1
          • +
        • Item 2
          • + +
        • Item 3
          • +
        -
      +
`````` From 024daee1e037aae710bc31bade48f7d37e0f6189 Mon Sep 17 00:00:00 2001 From: Kasper Birch Date: Mon, 29 Jan 2024 10:13:56 +0100 Subject: [PATCH 053/136] Add size to `HeroTags` --- src/stories/Library/tag/HeroTags.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/Library/tag/HeroTags.tsx b/src/stories/Library/tag/HeroTags.tsx index 4698544c1..ddea1e11a 100644 --- a/src/stories/Library/tag/HeroTags.tsx +++ b/src/stories/Library/tag/HeroTags.tsx @@ -19,7 +19,7 @@ const HeroTags: FC = ({ tags }) => {