Merge pull request #430 from danskernesdigitalebibliotek/release/2024…

…-4-0

Release 2024.4.0

.stylelintrc

@@ -1,12 +1,7 @@
 {
   "extends": ["stylelint-config-recommended-scss", "stylelint-prettier/recommended"],
-  "plugins": ["@namics/stylelint-bem"],
   "rules": {
     "max-nesting-depth": 3,
-    "plugin/stylelint-bem-namics": {
-      "patternPrefixes": [],
-      "helperPrefixes": []
-    },
     "selector-class-pattern": "^[a-z][a-z0-9_-]*$",
     "selector-max-id": null,
     "selector-no-qualifying-type": [

base.scss

@@ -1,6 +1,6 @@
+@import "./src/styles/scss/tools";
 @import "./src/styles/scss/reset";
 @import "./src/styles/scss/skeleton";
-@import "./src/styles/scss/tools";
 
 // Legacy - utility classes and other stuff that needs to be cleaned later.
 @import "./src/styles/scss/legacy";
@@ -98,12 +98,19 @@
 @import "./src/stories/Library/Buttons/row-button/row-buttons";
 @import "./src/stories/Library/article-header/article-header";
 @import "./src/stories/Library/event-header/event-header";
+@import "./src/stories/Library/event-list-item/event-list-item";
+@import "./src/stories/Library/event-list/event-list";
 @import "./src/stories/Library/image-credited/image-credited";
 @import "./src/stories/Library/event-description/event-description";
 @import "./src/stories/Library/link-with-icon/link-with-icon";
 @import "./src/stories/Library/rich-text/rich-text";
 @import "./src/stories/Library/medias/medias";
-@import "./src/stories/Library/event-paragraphs/event-paragraphs";
+@import "./src/stories/Library/slider/slider";
+@import "./src/stories/Library/card/card";
+@import "./src/stories/Library/paragraphs/paragraphs";
+@import "./src/stories/Library/video-embed/video-embed";
+@import "./src/stories/Library/card-grid/card-grid";
+@import "./src/stories/Library/promo-title/promo-title";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";
@@ -120,6 +127,8 @@
 @import "./src/stories/Blocks/advanced-search/advanced-search";
 @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/styles/scss/shared";
 @import "./src/styles/scss/internal";
+@import "./src/stories/utils/show-more";

docs/layout-documentation.md

@@ -0,0 +1,138 @@
+# Project Layout documentation & Examples
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [Variables](#variables)
+- [Mixins](#mixins)
+- [Utility classes](#utility-classes)
+- [Example Usage](#example-usage)
+
+## Introduction
+
+This documentation provides detailed information on the CSS/SCSS standards for
+the 'formidling' project. It covers the usage of mixins for layout and spacing,
+as well as guidelines for responsive design.
+
+### Note on Applicability
+
+This document and its standards apply specifically to elements of the
+'formidling' project starting from December 1, 2023, and onwards. It has been
+created to aligsn with the recent developments in the project and is not
+retroactively applied to earlier components or structures.
+
+Layout related SCSS is defined in the `variables.layout.scss` file.
+
+If anything in `variables.layout.scss` is modified or extended, make sure you
+include your changes in this documentation.
+
+## Variables
+
+The file defines several variables for managing layout and spacing:
+
+- `$layout__max-width--*`: These variables store the maximum width values
+aligned with breakpoints.
+- `$_vertical-spacing--*`: These variables store the vertical spacing values.
+- `$layout__edge-spacing`: This variable stores the edge spacing (padding)
+value for containers.
+
+Some components may use different variables. These should not be defined in
+`variables.layout.scss`, but instead be kept in scss file for the relevant
+component(s).
+
+## Mixins
+
+The file defines two mixins:
+
+- `layout-container($max-width, $padding)`: This mixin sets the maximum width,
+ and padding of an element, as well as centering them.
+
+- `vertical-spacing($top, $bottom)`: This manages the vertical margins of
+elements, allowing for consistent spacing throughout the project. This uses
+margin in order to allow for collapsing margins if there design requires it
+in the future.
+
+Vertical padding is _not_ a part of layout.scss. Use regular `$spacing`
+variables for that.
+
+## Utility Classes
+
+**Important note** : Use utility classes only as a last resort. Prefer mixins
+for responsive customization.
+
+As we currently don't see/want these being applied, they do not include logic
+for responsive customization like the mixins do.
+
+The file defines several utility classes:
+
+- `.layout__vertical-spacing--*`: These classes apply the `vertical-spacing`
+mixin with different values. Replace `*` with `small`, `medium`, `large`, or
+`x-large`.
+- `.layout__max-width--*`: These classes apply the `layout-container` mixin
+with different maximum width values and zero padding. Replace `*` with
+`x-small`, `small`, `medium`, `large`, `x-large`, or `xx-large`.
+- `.layout__edge-spacing--*`: These classes apply different left and right
+padding values. Replace `*` with `small`, `medium`, `large`, or `x-large`.
+
+## Example Usage
+
+Here are some examples of how to use these mixins, and utility classes.
+
+### Including mixins in components using BEM
+
+```scss
+// Using mixins in your BEM-named parent container. 
+.your-BEM-component-name {
+  @include layout-container;
+  @include vertical-spacing;
+
+  @include media-query__small() {
+    // Applying new edge spacing (Padding) using $spacings / other. 
+    @include layout-container($padding: $s-xl);
+    // applying new vertical spacing. 
+    @include vertical-spacing(
+      $top: $_layout-spacing--large,
+      $bottom: $_layout-spacing--large
+    );
+  }
+
+ @include media-query__large() {
+    // Removing max-width & applying specific padding from $spacings / other
+     @include layout-container($max-width: 0, $padding: $s-md);
+    // Removing vertical spacing entirely. 
+     @include vertical-spacing(
+      $top: 0,
+      $bottom: 0
+    );
+  }
+}
+```
+
+### Applying utility classes when mixins cannot be used
+
+```html
+
+<!-- layout utility using the default sizes -->
+<div class="layout__max-width layout__edge-spacing layout__vertical-spacing">
+  <!-- Content  -->
+</div>
+
+<!-- layout utility using respective specified sizes -->
+<div class="layout__max-width--medium layout__edge-spacing--large 
+    layout__vertical-spacing--small">
+  <!-- Content  -->
+</div>
+
+```
+
+If you aren't interested in applying for example an edge-spacing(padding), then
+you might be expecting a --none modifier. If this is not obvious, then in this
+ case you simply don't use a utility at all.
+
+```html
+<!-- layout utility respective specified sizes with no edge-spacing(padding) -->
+<div class="layout__max-width layout__vertical-spacing--small">
+  <!-- Content  -->
+</div>
+
+``````

package.json

@@ -12,20 +12,20 @@
     "js:lint:watch": "chokidar './src/**/*.{js,jsx,ts,tsx}' -c 'yarn js:lint'",
     "js:format": "concurrently 'yarn:js:eslint -- --fix' 'yarn:js:prettier -- --write' --max-processes 1 --raw",
     "css:stylelint": "stylelint 'src/**/*.scss'",
-    "css:prettier": "prettier 'src/styles/**/*.scss'",
+    "css:prettier": "prettier 'src/**/*.scss'",
     "css:lint": "concurrently 'yarn:css:stylelint' 'yarn:css:prettier -- --check' --raw",
     "css:lint:watch": "chokidar 'src/**/*.scss' -c 'yarn css:lint'",
     "css:format": "concurrently 'yarn:css:stylelint -- --fix' 'yarn:css:prettier -- --write' --max-processes 1 --raw",
     "css:build": "sass base.scss:src/styles/css/base.css --style compressed",
     "css:watch": "yarn css:build -- --watch",
+    "build": "concurrently 'yarn:css:build' --raw",
     "markdown:lint": "markdownlint-cli2",
     "markdown:format": "markdownlint-cli2-fix",
     "watch": "concurrently 'yarn:js:lint:watch' 'yarn:css:lint:watch'",
     "dev": "concurrently --raw 'yarn storybook' 'yarn css:watch' 'yarn watch'",
     "chromatic": "npx chromatic --exit-zero-on-changes",
     "lint": "concurrently 'yarn:js:lint' 'yarn:css:lint' 'yarn:markdown:lint'",
     "format": "concurrently 'yarn:js:format' 'yarn:css:format' 'yarn:markdown:format'"
-
   },
   "browserslist": {
     "production": [
@@ -41,7 +41,6 @@
   },
   "devDependencies": {
     "@chanzuckerberg/axe-storybook-testing": "^6.0.1",
-    "@namics/stylelint-bem": "^7.0.0",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.9",
@@ -56,6 +55,7 @@
     "@types/node": "^16.0.0",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
+    "@types/react-helmet": "^6.1.11",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@whitespace/storybook-addon-html": "^5.0.0",
@@ -81,6 +81,7 @@
     "react": "^17.0.2",
     "react-docgen-typescript": "^2.1.0",
     "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
     "react-scripts": "^4.0.3",
     "sass": "^1.70.0",
     "skeleton-screen-css": "^1.1.0",

src/stories/Blocks/article/Article.stories.tsx

@@ -3,7 +3,7 @@ import { withDesign } from "storybook-addon-designs";
 import Article from "./Article";
 
 export default {
-  title: "Blocks / Article",
+  title: "Blocks / Article page",
   component: Article,
   decorators: [withDesign],
   argTypes: {

src/stories/Blocks/article/Article.tsx

@@ -1,5 +1,6 @@
 import { FC } from "react";
 import ArticleHeader from "../../Library/article-header/ArticleHeader";
+import { ArticleParagraphs } from "../../Library/paragraphs/Paragraphs";
 
 type ArticleProps = {
   title: string;
@@ -17,6 +18,7 @@ const Article: FC<ArticleProps> = ({ title, subtitle, author, date }) => {
         author={author}
         date={date}
       />
+      <ArticleParagraphs />
     </article>
   );
 };

src/stories/Blocks/event-list-page/EventListPage.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import EventListPage from "./EventListPage";
+
+export default {
+  title: "Blocks/Event List Page",
+  component: EventListPage,
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zx9GrkFA3l4ISvyZD2q0Qi/Designsystem?type=design&node-id=7527-54179&mode=dev",
+    },
+    layout: "fullscreen",
+  },
+} as ComponentMeta<typeof EventListPage>;
+
+const Template: ComponentStory<typeof EventListPage> = () => <EventListPage />;
+
+export const Default = Template.bind({});

src/stories/Blocks/event-list-page/EventListPage.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import EventList from "../../Library/event-list/EventList";
+import eventListData from "../../Library/event-list/EventListData";
+
+const EventListPage: React.FC = () => {
+  return (
+    <div className="event-list-page">
+      <h1 className="event-list-page__heading">Arrangementer</h1>
+      <EventList events={eventListData} />
+    </div>
+  );
+};
+
+export default EventListPage;

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

@@ -0,0 +1,10 @@
+.event-list-page {
+  background-color: $color__global-primary;
+}
+
+.event-list-page__heading {
+  @include layout-container;
+  @include typography($typo__h2);
+  @include vertical-spacing(0, $s-xl);
+  padding-top: $s-xl;
+}

src/stories/Blocks/event-page/EventPage.tsx

@@ -3,7 +3,7 @@ import EventHeader from "../../Library/event-header/EventHeader";
 import EventDescription, {
   EventDescriptionProps,
 } from "../../Library/event-description/EventDescription";
-import EventParagraphs from "../../Library/event-paragraphs/EventParagraphs";
+import { EventParagraphs } from "../../Library/paragraphs/Paragraphs";
 
 type EventPageProps = {
   title: string;

src/stories/Blocks/header/Header.tsx

@@ -56,7 +56,7 @@ export const Header = (props: HeaderProps) => {
             <Logo
               fallback={false}
               libraryName="Hjørring"
-              altText="Logo image of libary"
+              altText="PromoTitle image of libary"
             />
           </a>
         </div>
@@ -84,7 +84,7 @@ export const Header = (props: HeaderProps) => {
                   <Logo
                     fallback
                     libraryName="Lyngby-Taarbæk"
-                    altText="Logo image of libary"
+                    altText="PromoTitle image of libary"
                   />
                 </div>
               </div>

src/stories/Blocks/header/header.scss

@@ -86,7 +86,7 @@
 
 .header__menu-navigation-item:hover {
   border-top: 1px solid transparent; // to prevent jumping
-  border-bottom: 1px solid #000;
+  border-bottom: 1px solid $color__global-black;
 }
 
 .header__menu-navigation-link {
@@ -162,7 +162,7 @@
   }
 
   &:focus {
-    background-color: $color__text-primary-white;
+    background-color: $color__global-white;
     border: 0 solid transparent;
     outline: none;
   }
@@ -273,7 +273,7 @@
 }
 
 .header__overlay-backdrop {
-  background-color: #000;
+  background-color: $color__global-black;
   opacity: 0.6;
 }
 

src/stories/Blocks/material-manifestation-item/material-manifestation-item.scss

@@ -1,5 +1,5 @@
 .material-manifestation-item {
-  background-color: #fff;
+  background-color: $color__global-white;
   padding: $s-lg;
   margin: 0 $s-lg $s-md $s-lg;
   padding-top: 30px;

src/stories/Library/Arrows/arrows.scss

@@ -1,5 +1,4 @@
 // BEM plugin does not support interpolation.
-// stylelint-disable plugin/stylelint-bem-namics
 @mixin _icon-arrow-animated($direction, $size, $scaleX, $translatePx, $origin) {
   .arrow__hover--#{$direction}-#{$size} {
     cursor: pointer;
@@ -32,7 +31,6 @@
     }
   }
 }
-// stylelint-enable plugin/stylelint-bem-namics
 
 @include _icon-arrow-animated("right", "large", 1.165, 25px, left);
 @include _icon-arrow-animated("right", "small", 1.5, 30px, left);