Skip to content

Commit

Permalink
Merge pull request #728 from danskernesdigitalebibliotek/develop
Browse files Browse the repository at this point in the history
Release 2024.38.0
  • Loading branch information
kasperg authored Sep 17, 2024
2 parents d007a04 + 0a1fd44 commit 0dbeffe
Show file tree
Hide file tree
Showing 39 changed files with 951 additions and 84 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/chromatic.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
19 changes: 17 additions & 2 deletions .stylelintrc
Original file line number Diff line number Diff line change
@@ -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_-]*$",
Expand All @@ -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"]
}
]
}
}
1 change: 1 addition & 0 deletions admin-base.scss
Original file line number Diff line number Diff line change
@@ -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";
4 changes: 4 additions & 0 deletions base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
9 changes: 9 additions & 0 deletions src/stories/Blocks/content-list-page/ContentListPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
{
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 6 additions & 0 deletions src/stories/Blocks/content-list-page/content-list-page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,9 @@
flex-direction: row;
}
}

.content-list-page__filter--right {
@include media-query__small {
margin-left: auto;
}
}
32 changes: 32 additions & 0 deletions src/stories/Blocks/form/form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
4 changes: 2 additions & 2 deletions src/stories/Blocks/header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
4 changes: 4 additions & 0 deletions src/stories/Blocks/header/header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,7 @@
}

.header__clock {
height: 100%;
border-left: 1px solid $color__global-tertiary-1;
display: none;

Expand All @@ -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
Expand Down
30 changes: 30 additions & 0 deletions src/stories/Library/Forms/checkbox/Checkbox.stories.tsx
Original file line number Diff line number Diff line change
@@ -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",
Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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.",
};
94 changes: 94 additions & 0 deletions src/stories/Library/Forms/checkbox/CheckboxDrupal.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
35 changes: 35 additions & 0 deletions src/stories/Library/Forms/checkbox/checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Loading

0 comments on commit 0dbeffe

Please sign in to comment.