Release 2024.38.0

.github/workflows/chromatic.yml

@@ -34,7 +34,7 @@ jobs:
       - run: yarn css:build
 
       - name: Publish to Chromatic
-        uses: chromaui/action@v11.7.1
+        uses: chromaui/action@v11.10.2
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: c6b96f9648b6

.stylelintrc

@@ -1,5 +1,8 @@
 {
-  "extends": ["stylelint-config-recommended-scss", "stylelint-prettier/recommended"],
+  "extends": [
+    "stylelint-config-recommended-scss",
+    "stylelint-prettier/recommended"
+  ],
   "rules": {
     "max-nesting-depth": 3,
     "selector-class-pattern": "^[a-z][a-z0-9_-]*$",
@@ -11,6 +14,18 @@
       }
     ],
     "property-no-vendor-prefix": null,
-    "scss/dollar-variable-pattern": null
+    "scss/dollar-variable-pattern": null,
+    "property-no-unknown": [
+      true,
+      {
+        "ignoreProperties": ["transition-behavior"]
+      }
+    ],
+    "scss/at-rule-no-unknown": [
+      true,
+      {
+        "ignoreAtRules": ["starting-style"]
+      }
+    ]
   }
 }

admin-base.scss

@@ -1,6 +1,7 @@
 @import "./src/styles/scss/tools";
 
 // CSS sheets that are used to style the admin interface.
+@import "./src/stories/Library/dialog/dialog";
 @import "./src/stories/Library/opening-hours-editor/opening-hours-editor";
 @import "./src/stories/Library/material-search/material-search";
 @import "./src/stories/Library/cover/cover";

base.scss

@@ -21,6 +21,7 @@
 @import "./src/stories/Library/counter/counter";
 @import "./src/stories/Library/patron-info/patron-info";
 @import "./src/stories/Library/Forms/checkbox/checkbox";
+@import "./src/stories/Library/Forms/radio/radio";
 @import "./src/stories/Library/cover/cover";
 @import "./src/stories/Library/Forms/input/input";
 @import "./src/stories/Library/Forms/textarea/textarea";
@@ -138,11 +139,14 @@
 @import "./src/stories/Library/opening-hours-editor/opening-hours-editor";
 @import "./src/stories/Library/opening-hours/opening-hours";
 @import "./src/stories/Library/opening-hours/opening-hours-skeleton";
+@import "./src/stories/Library/opening-hours-sidebar/opening-hours-sidebar";
 @import "./src/stories/Library/filtered-event-list/filtered-event-list";
 @import "./src/stories/Library/event-list-stacked/event-list-stacked";
 @import "./src/stories/Library/material-search/material-search";
 @import "./src/stories/Library/banner/banner";
 @import "./src/stories/Library/simple-link/simple-link";
+@import "./src/stories/Library/search-full-text/search-full-text";
+@import "./src/stories/empty-view/empty-view";
 
 // Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
 @import "./src/stories/Blocks/autosuggest/autosuggest";

package.json

@@ -51,7 +51,7 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@types/node": "^16.0.0",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
@@ -70,13 +70,13 @@
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.35.2",
+    "eslint-plugin-react": "^7.36.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-webpack-plugin": "^4.2.0",
     "flatpickr": "^4.6.13",
     "json": "^11.0.0",
     "markdownlint-cli2": "^0.4.0",
-    "postcss": "^8.4.45",
+    "postcss": "^8.4.47",
     "prettier": "^2.7.1",
     "react": "^17.0.2",
     "react-docgen-typescript": "^2.1.0",

src/stories/Blocks/content-list-page/ContentListPage.tsx

@@ -3,6 +3,7 @@ import ContentList from "../../Library/content-list/ContentList";
 import contentListData from "../../Library/content-list/ContentListData";
 import { InputLabel } from "../../Library/input-label/InputLabel";
 import { Dropdown } from "../../Library/dropdown/Dropdown";
+import SearchFullText from "../../Library/search-full-text/SearchFullText";
 
 const filters = [
   {
@@ -47,13 +48,21 @@ const ContentListPage: React.FC = () => {
             <li className="content-list-page__filter">
               <InputLabel text={filter.label} />
               <Dropdown
+                classNames="dropdown--grey-borders"
+                innerClassNames={{
+                  select: "dropdown__select--grey",
+                }}
                 list={filter.options}
                 ariaLabel="Kategorier"
                 arrowIcon="chevron"
               />
             </li>
           );
         })}
+        <li className="content-list-page__filter content-list-page__filter--right">
+          <InputLabel text="Søg" />
+          <SearchFullText />
+        </li>
       </ul>
       <ContentList items={contentListData} />
     </div>

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

@@ -33,3 +33,9 @@
     flex-direction: row;
   }
 }
+
+.content-list-page__filter--right {
+  @include media-query__small {
+    margin-left: auto;
+  }
+}

src/stories/Blocks/form/form.scss

@@ -59,3 +59,35 @@
     max-width: 550px;
   }
 }
+
+.dpl-fieldset {
+  @include typography($typo__small-caption);
+
+  border: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  margin-bottom: $s-lg;
+
+  legend {
+    @include typography($typo__body-medium);
+    color: $color__text-secondary-gray;
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+    margin-bottom: 6px;
+    max-width: 550px;
+
+    &--full-width {
+      max-width: 750px;
+    }
+
+    &:has(p) {
+      @include typography($typo__links);
+      color: $color__global-tertiary-2;
+      max-width: 550px;
+    }
+  }
+}

src/stories/Blocks/header/Header.tsx

@@ -150,10 +150,10 @@ export const Header = ({
 
         <div className="header__clock">
           <Pagefold isInheriting={false} isAContainer={false} size="medium" />
-          <a href="#" className="header__clock-items">
+          <button className="header__clock-items">
             <WatchStaticIcon className="mb-8" />
             <span className="text-small-caption">Opening hours</span>
-          </a>
+          </button>
         </div>
       </header>
       <HeaderSidebarNav menuLinks={menuItems} />

src/stories/Blocks/header/header.scss

@@ -214,6 +214,7 @@
 }
 
 .header__clock {
+  height: 100%;
   border-left: 1px solid $color__global-tertiary-1;
   display: none;
 
@@ -224,9 +225,12 @@
 
 .header__clock-items {
   text-decoration: none;
+  border: none;
+  cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
 }
 
 // has-burger-menu is added dynamically using JS, by calculating if there

src/stories/Library/Forms/checkbox/Checkbox.stories.tsx

@@ -1,6 +1,7 @@
 import { ComponentMeta, ComponentStory } from "@storybook/react";
 import { withDesign } from "storybook-addon-designs";
 import { Checkbox } from "./Checkbox";
+import { CheckboxDrupal } from "./CheckboxDrupal";
 
 export default {
   title: "Library / Forms / Checkbox",
@@ -28,6 +29,17 @@ export default {
         defaultValue: "",
       },
     },
+    includeHeadline: {
+      control: {
+        type: "null",
+      },
+    },
+    description: {
+      control: {
+        type: "text",
+        defaultValue: "This is a description.",
+      },
+    },
     // We disable the isChecked control, since it is not possible to
     // get the states from the React component to work with Storybook controls.
     isChecked: {
@@ -90,3 +102,21 @@ Multiple.args = {
   isChecked: false,
   label: "Checkbox",
 };
+
+// The stories below mimic HTML structure from Drupal for checkbox usage.
+const DrupalCheckboxExample: ComponentStory<typeof CheckboxDrupal> = (args) => (
+  <CheckboxDrupal {...args} />
+);
+
+export const DrupalCheckbox = DrupalCheckboxExample.bind({});
+DrupalCheckbox.args = {
+  label: "Toggle this checkbox",
+  description: "This is a description.",
+};
+
+export const DrupalMultiple = DrupalCheckboxExample.bind({});
+DrupalMultiple.args = {
+  label: "Toggle this checkbox",
+  includeHeadline: true,
+  description: "This is a description.",
+};

src/stories/Library/Forms/checkbox/CheckboxDrupal.tsx

@@ -0,0 +1,94 @@
+import clsx from "clsx";
+import React from "react";
+
+export type CheckboxDrupalProps = {
+  label: string;
+  validation?: string;
+  classNames?: string;
+  includeHeadline?: boolean;
+  description?: string;
+};
+
+// This component and styling are meant to target specifically the Drupal HTML structure.
+// Note that some of the classes are also copied from there. The classes we created ourselves
+// can be found in the ./checkbox.scss file in this directory.
+export const CheckboxDrupal: React.FC<CheckboxDrupalProps> = ({
+  label,
+  validation,
+  classNames,
+  includeHeadline,
+  description,
+}) => {
+  const checkboxElement = (checkboxLabel: string) => {
+    return (
+      <div
+        className={clsx(
+          "dpl-input js-form-item form-item js-form-type-checkbox form-item-title-example js-form-item-title-example checkbox-override",
+          { classNames }
+        )}
+      >
+        <input
+          aria-describedby="edit-title-example--description"
+          type="checkbox"
+          value="1"
+          aria-label={checkboxLabel}
+        />
+        <label
+          id="edit-title-example--description"
+          htmlFor="edit-title-example"
+          className="input-label checkbox__text text-small-caption color-secondary-gray"
+        >
+          {checkboxLabel}
+        </label>
+        {!!description && (
+          <div className="description">
+            <div className="webform-element-description input-description">
+              {description}
+            </div>
+          </div>
+        )}
+        {validation && <div className="">{validation}</div>}
+      </div>
+    );
+  };
+
+  const checkboxElementMultiple = (checkboxLabel: string) => {
+    return (
+      <fieldset
+        data-drupal-selector="edit-multiple-checkboxes-title"
+        aria-describedby="edit-multiple-checkboxes-title--wrapper--description"
+        id="edit-multiple-checkboxes-title--wrapper"
+        className="checkboxes--wrapper fieldgroup form-composite webform-composite-visible-title js-webform-type-checkboxes webform-type-checkboxes js-form-item form-item js-form-wrapper form-wrapper dpl-fieldset"
+      >
+        <legend>
+          <span className="fieldset-legend">Multiple checkboxes title</span>
+        </legend>
+        <div className="fieldset-wrapper">
+          <div
+            id="edit-multiple-checkboxes-title"
+            className="js-webform-checkboxes webform-options-display-one-column form-checkboxes"
+          >
+            {[1, 2, 3, 4, 5].map((value) => {
+              // Append a number to make it easier to distinguish between each entry.
+              return checkboxElement(`${checkboxLabel} ${value}`);
+            })}
+          </div>
+          <div className="description">
+            <div
+              id="edit-multiple-checkboxes-title--wrapper--description"
+              data-drupal-field-elements="description"
+              className="webform-element-description"
+            />
+          </div>
+        </div>
+      </fieldset>
+    );
+  };
+
+  return (
+    <div className="dpl-form">
+      {includeHeadline && checkboxElementMultiple(label || "")}
+      {!includeHeadline && checkboxElement(label || "label")}
+    </div>
+  );
+};

src/stories/Library/Forms/checkbox/checkbox.scss

@@ -94,3 +94,38 @@
     transform: scale(0.9);
   }
 }
+
+// Classes below are meant to target specifically overwriting Drupal component styling.
+// These checkboxes are always used inside a .dpl-input container in Drupal.
+.dpl-form {
+  .dpl-input.checkbox-override {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 6px $s-sm 6px 0;
+    margin-bottom: 0;
+  }
+
+  .dpl-input.checkbox-override input {
+    accent-color: black;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    margin-left: 0;
+  }
+
+  .dpl-input.checkbox-override .input-label,
+  .dpl-input.checkbox-override .description {
+    @include typography($typo__small-caption);
+    color: $color__text-secondary-gray;
+    padding: 0 $s-sm 0 $s-sm;
+    width: fit-content;
+    max-width: 300px;
+    margin: 0;
+    height: auto;
+  }
+
+  .dpl-input.checkbox-override .input-label {
+    cursor: pointer;
+  }
+}