From 01f5a6a9d6b86260d585a8c3838c675740b28b73 Mon Sep 17 00:00:00 2001 From: Bryan de Jong Date: Thu, 5 Sep 2024 11:30:33 +0100 Subject: [PATCH] feat: add header and footer --- .github/workflows/continuous-deployment.yml | 11 --- .stylelintrc.json | 6 +- .../templates/form-wmebv/components/Logo.tsx | 54 ++++++++++++++ .../src/templates/form-wmebv/index.css | 71 ++++++++++++++++++- .../form-wmebv/wmebv-1-intro.stories.tsx | 42 +++++++++++ 5 files changed, 169 insertions(+), 15 deletions(-) create mode 100644 packages/storybook/src/templates/form-wmebv/components/Logo.tsx diff --git a/.github/workflows/continuous-deployment.yml b/.github/workflows/continuous-deployment.yml index 630af8b..7fb6e2f 100644 --- a/.github/workflows/continuous-deployment.yml +++ b/.github/workflows/continuous-deployment.yml @@ -162,14 +162,3 @@ jobs: - name: "Continuous Deployment: build" run: pnpm run --if-present build - - - name: "Continuous Deployment: publish to GitHub repository" - env: - GITHUB_TOKEN: ${{ secrets.GH_TOKEN }} - GIT_AUTHOR_EMAIL: ${{ secrets.GIT_AUTHOR_EMAIL }} - GIT_AUTHOR_NAME: "NL Design System" - GIT_COMMITTER_EMAIL: ${{ secrets.GIT_COMMITTER_EMAIL }} - GIT_COMMITTER_NAME: "NL Design System" - run: | - git push --set-upstream origin HEAD - pnpm run release diff --git a/.stylelintrc.json b/.stylelintrc.json index 3019ee4..4234197 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -12,9 +12,9 @@ "scss/percent-placeholder-pattern": "^(example|utrecht)-[a-z0-9-]+$", "scss/operator-no-newline-after": null, "scss/at-extend-no-missing-placeholder": null, - "custom-property-pattern": "^_?(voorbeeld|example|denhaag|utrecht)-[a-z0-9-]+$", - "selector-class-pattern": "^(voorbeeld|example|denhaag|utrecht)-[a-z0-9_-]+$", - "keyframes-name-pattern": "^(example|utrecht)-[a-z0-9-]+$", + "custom-property-pattern": "^_?(voorbeeld|todo|denhaag|utrecht)-[a-z0-9-]+$", + "selector-class-pattern": "^(voorbeeld|todo|denhaag|utrecht)-[a-z0-9_-]+$", + "keyframes-name-pattern": "^(todo|utrecht)-[a-z0-9-]+$", "at-rule-no-unknown": null, "block-no-empty": [true], "color-no-invalid-hex": [true], diff --git a/packages/storybook/src/templates/form-wmebv/components/Logo.tsx b/packages/storybook/src/templates/form-wmebv/components/Logo.tsx new file mode 100644 index 0000000..a99fb8b --- /dev/null +++ b/packages/storybook/src/templates/form-wmebv/components/Logo.tsx @@ -0,0 +1,54 @@ +import { Link } from '@utrecht/component-library-react'; +import { useId } from 'react'; + +export const PageHeaderLogo = () => { + const homepageTitleId = useId(); + return ( + + + + + + + + ); +}; + +export const Logo = () => { + return ( + + + + + ); +}; diff --git a/packages/storybook/src/templates/form-wmebv/index.css b/packages/storybook/src/templates/form-wmebv/index.css index 653c6dc..87ba901 100644 --- a/packages/storybook/src/templates/form-wmebv/index.css +++ b/packages/storybook/src/templates/form-wmebv/index.css @@ -1,12 +1,31 @@ .voorbeeld-theme { --utrecht-space-around: 1; - /* Component spacing tokens */ + /* Component spacing tokens that aren't set in voorbeeld-theme */ --utrecht-heading-1-margin-block-start: 0; --utrecht-heading-1-margin-block-end: var(--voorbeeld-space-block-rabbit); --utrecht-heading-2-margin-block-end: var(--voorbeeld-space-block-rabbit); --utrecht-heading-3-margin-block-start: var(--voorbeeld-space-block-rabbit); --utrecht-paragraph-margin-block-end: var(--voorbeeld-space-block-rabbit); + --utrecht-page-padding-inline-start: var(--voorbeeld-space-inline-pig); + --utrecht-page-padding-inline-end: var(--voorbeeld-space-inline-pig); + --utrecht-page-content-padding-block-start: var(--voorbeeld-space-block-dog); + --utrecht-page-content-padding-block-end: var(--voorbeeld-space-block-pig); + --utrecht-page-content-padding-inline-start: 0; + --utrecht-page-content-padding-inline-end: 0; + --utrecht-page-footer-background-color: var(--voorbeeld-color-violet-700); + --utrecht-page-footer-color: var(--voorbeeld-color-white); + --utrecht-page-footer-padding-block-end: var(--voorbeeld-space-block-dog); + --utrecht-page-footer-padding-block-start: var(--voorbeeld-space-block-dog); + --utrecht-page-footer-padding-inline-end: var(--voorbeeld-space-inline-dog); + --utrecht-page-footer-padding-inline-start: var(--voorbeeld-space-inline-dog); + --utrecht-page-header-padding-block-start: var(--voorbeeld-space-block-mouse); + --utrecht-page-header-padding-block-end: var(--voorbeeld-space-block-mouse); + + /* Custom component tokens */ + --voorbeeld-logo-icon-color: var(--voorbeeld-color-violet-700); + --voorbeeld-page-header-padding-inline-start: var(--voorbeeld-space-inline-mouse); + --voorbeeld-page-header-padding-inline-end: var(--voorbeeld-space-inline-mouse); } .voorbeeld-back-link { @@ -14,3 +33,53 @@ column-gap: 8px; display: inline-flex; } + +.voorbeeld-page-header { + /* Design specific overwrite, these need to be set for page-content but we don't want them to work on the header */ + --utrecht-page-padding-inline-start: 0; + --utrecht-page-padding-inline-end: 0; + + border-block-end: 2px solid var(--voorbeeld-color-violet-700); +} + +.todo-page-header__content { + padding-inline-end: var(--voorbeeld-page-header-padding-inline-end); + padding-inline-start: var(--voorbeeld-page-header-padding-inline-start); +} + +.todo-page-footer__content { + --utrecht-heading-2-color: currentColor; + --utrecht-heading-2-font-family: var(--voorbeeld-typography-font-family-secondary); + --utrecht-heading-2-font-size: var(--voorbeeld-typography-font-size-md); + --utrecht-heading-2-font-weight: var(--voorbeeld-typography-font-weight-bold); + --utrecht-heading-2-line-height: var(--voorbeeld-typography-line-height-lg); + --utrecht-paragraph-color: white; + + margin-inline-end: auto; + margin-inline-start: auto; + max-inline-size: calc(var(--utrecht-article-max-inline-size) * 1.5); +} + +.todo-footer-content-group { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.todo-footer-content-block { + max-inline-size: 50ch; +} + +.todo-address { + font-style: inherit; + margin-block-end: 0; + margin-block-start: 0; +} + +@media screen and (width <= 960px) { + .todo-footer-content-group { + align-items: start; + flex-direction: column; + gap: 1em; + } +} diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-1-intro.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-1-intro.stories.tsx index 1c85c51..fb36c16 100644 --- a/packages/storybook/src/templates/form-wmebv/wmebv-1-intro.stories.tsx +++ b/packages/storybook/src/templates/form-wmebv/wmebv-1-intro.stories.tsx @@ -3,9 +3,14 @@ import { IconArrowLeft } from '@tabler/icons-react'; import { ButtonLink, Heading1, + Heading2, Icon, Link, + LinkList, + LinkListLink, PageContent, + PageFooter, + PageHeader, Paragraph, UnorderedList, UnorderedListItem, @@ -13,10 +18,14 @@ import { import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/index.css'; import '@gemeente-denhaag/design-tokens-components/dist/theme/index.css'; import './index.css'; +import { Logo, PageHeaderLogo } from './components/Logo'; const meta = { title: 'Templates/WMEBV/1 - Intro', id: 'wmebv-1-intro', + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -26,6 +35,11 @@ type Story = StoryObj; const TemplatePage = ({ theme }: { theme: string }) => ( <>
+ +
+ +
+
@@ -51,6 +65,34 @@ const TemplatePage = ({ theme }: { theme: string }) => ( Doorgaan
+ +
+
+
+ +
+
+ Contact +
+ Bel 453 453 (maandag tot en met vrijdag van 09.00 tot 17.00 uur) of stuur + een e-mail naar{' '} + + vragen@gemeentevoorbeeld.nl + + {'.'} +
+
+
+ + Bescherming persoonsgegevens + Gebruikersvoorwaarden + Proclaimer + Cookieverklaring + +
+
+
+
);