From b1ae384be4903135a07818a4c9a2e38d3edd57df Mon Sep 17 00:00:00 2001 From: Bryan de Jong Date: Tue, 15 Oct 2024 10:22:28 +0200 Subject: [PATCH 1/7] feat: add footer logo logic and den haag margins --- packages/storybook/package.json | 2 + .../form-wmebv/components/Layout.tsx | 8 +- .../src/templates/form-wmebv/index.css | 104 ++++++++++++++++++ .../form-wmebv/wmebv-1-intro.stories.tsx | 17 ++- .../form-wmebv/wmebv-2-login.stories.tsx | 23 +++- .../form-wmebv/wmebv-3-step-1.stories.tsx | 17 ++- .../form-wmebv/wmebv-3-step-2.stories.tsx | 23 +++- .../form-wmebv/wmebv-3-step-3.stories.tsx | 17 ++- .../form-wmebv/wmebv-4-succes.stories.tsx | 17 ++- .../mijn-profiel/components/Logo.tsx | 23 ++++ pnpm-lock.yaml | 25 +++++ 11 files changed, 251 insertions(+), 25 deletions(-) diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 0d9af0a..3fdf1f5 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -35,6 +35,8 @@ "@types/react": "18.3.5", "@types/react-dom": "18.3.0", "@utrecht/component-library-react": "7.2.0", + "@utrecht/design-tokens": "2.1.1", + "@utrecht/button-react": "2.0.0", "@utrecht/icon": "1.1.0", "@vng.nl/assets": "workspace:*", "@vng.nl/design-tokens": "workspace:*", diff --git a/packages/storybook/src/templates/form-wmebv/components/Layout.tsx b/packages/storybook/src/templates/form-wmebv/components/Layout.tsx index c869ba6..4e1e521 100644 --- a/packages/storybook/src/templates/form-wmebv/components/Layout.tsx +++ b/packages/storybook/src/templates/form-wmebv/components/Layout.tsx @@ -8,17 +8,17 @@ import { PageHeader, } from '@utrecht/component-library-react/dist/css-module'; import { HTMLAttributes, PropsWithChildren, ReactElement } from 'react'; -import { Logo, PageHeaderLogo } from './Logo'; interface LayoutProps extends PropsWithChildren> { logo?: ReactElement; + footerLogo?: ReactElement; } -export const Layout = ({ logo, children, className, ...props }: LayoutProps) => { +export const Layout = ({ logo, children, className, footerLogo, ...props }: LayoutProps) => { return (
-
{logo || }
+
{logo}
{children}
@@ -26,7 +26,7 @@ export const Layout = ({ logo, children, className, ...props }: LayoutProps) =>
-
{logo || }
+ {footerLogo &&
{footerLogo}
}
Contact
diff --git a/packages/storybook/src/templates/form-wmebv/index.css b/packages/storybook/src/templates/form-wmebv/index.css index 9d03d80..931988e 100644 --- a/packages/storybook/src/templates/form-wmebv/index.css +++ b/packages/storybook/src/templates/form-wmebv/index.css @@ -33,6 +33,110 @@ --todo-page-header-padding-inline-end: var(--voorbeeld-space-inline-mouse); } +.denhaag-theme { + --utrecht-space-around: 1; + --utrecht-article-max-inline-size: 670px; + --todo-page-header-content-max-inline-size: calc(var(--utrecht-article-max-inline-size) * 1.5); + --todo-page-header-padding-inline-start: var(--voorbeeld-space-inline-mouse); + --todo-page-header-padding-inline-end: var(--voorbeeld-space-inline-mouse); + --utrecht-paragraph-margin-block-end: var(--voorbeeld-space-block-rabbit); + --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-button-group-margin-block-start: var(--voorbeeld-space-block-rabbit); + --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); + --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-beetle); + --utrecht-page-content-padding-block-end: var(--voorbeeld-space-block-dog); + --utrecht-page-content-padding-inline-start: 0; + --utrecht-page-content-padding-inline-end: 0; + + /* TEMP VOORBEELD SCALE */ + --voorbeeld-space-relation-onbemind: var(--voorbeeld-space-row-horse); + --voorbeeld-space-relation-onbekenden: var(--voorbeeld-space-row-pig); + --voorbeeld-space-relation-bekenden: var(--voorbeeld-space-row-cat); + --voorbeeld-space-relation-vrienden: var(--voorbeeld-space-row-rat); + --voorbeeld-space-relation-besties: var(--voorbeeld-space-row-snail); + --voorbeeld-space-relation-kind: 0px; + --voorbeeld-space-row-giraffe: 160px; + --voorbeeld-space-row-elephant: 96px; + --voorbeeld-space-row-horse: 64px; + --voorbeeld-space-row-tiger: 48px; + --voorbeeld-space-row-pig: 32px; + --voorbeeld-space-row-dog: 28px; + --voorbeeld-space-row-cat: 24px; + --voorbeeld-space-row-rabbit: 20px; + --voorbeeld-space-row-rat: 16px; + --voorbeeld-space-row-mouse: 12px; + --voorbeeld-space-row-snail: 8px; + --voorbeeld-space-row-beetle: 4px; + --voorbeeld-space-row-ant: 2px; + --voorbeeld-space-row-flea: 1px; + --voorbeeld-space-column-giraffe: 160px; + --voorbeeld-space-column-elephant: 96px; + --voorbeeld-space-column-horse: 64px; + --voorbeeld-space-column-tiger: 48px; + --voorbeeld-space-column-pig: 32px; + --voorbeeld-space-column-dog: 28px; + --voorbeeld-space-column-cat: 24px; + --voorbeeld-space-column-rabbit: 20px; + --voorbeeld-space-column-rat: 16px; + --voorbeeld-space-column-mouse: 12px; + --voorbeeld-space-column-snail: 8px; + --voorbeeld-space-column-beetle: 4px; + --voorbeeld-space-column-ant: 2px; + --voorbeeld-space-column-flea: 1px; + --voorbeeld-space-text-dog: 24px; + --voorbeeld-space-text-cat: 16px; + --voorbeeld-space-text-rabbit: 14px; + --voorbeeld-space-text-rat: 12px; + --voorbeeld-space-text-mouse: 8px; + --voorbeeld-space-text-snail: 6px; + --voorbeeld-space-text-beetle: 4px; + --voorbeeld-space-text-ant: 2px; + --voorbeeld-space-text-flea: 1px; + --voorbeeld-space-block-pig: 64px; + --voorbeeld-space-block-dog: 48px; + --voorbeeld-space-block-cat: 32px; + --voorbeeld-space-block-rabbit: 24px; + --voorbeeld-space-block-rat: 20px; + --voorbeeld-space-block-mouse: 16px; + --voorbeeld-space-block-snail: 12px; + --voorbeeld-space-block-beetle: 8px; + --voorbeeld-space-block-ant: 4px; + --voorbeeld-space-block-flea: 2px; + --voorbeeld-space-inline-pig: 48px; + --voorbeeld-space-inline-dog: 32px; + --voorbeeld-space-inline-cat: 28px; + --voorbeeld-space-inline-rabbit: 24px; + --voorbeeld-space-inline-rat: 20px; + --voorbeeld-space-inline-mouse: 16px; + --voorbeeld-space-inline-snail: 12px; + --voorbeeld-space-inline-beetle: 8px; + --voorbeeld-space-inline-ant: 4px; + --voorbeeld-space-inline-flea: 2px; +} + +.utrecht-theme { + --utrecht-space-around: 1.5; + --todo-page-header-content-max-inline-size: calc(var(--utrecht-article-max-inline-size) * 1.5); + --todo-page-header-padding-inline-start: var(--voorbeeld-space-inline-mouse); + --todo-page-header-padding-inline-end: var(--voorbeeld-space-inline-mouse); + --voorbeeld-space-inline-mouse: 16px; +} + +.denhaag-header__logo { + block-size: 64px; + inline-size: 180px; +} + .voorbeeld-back-link { align-items: center; column-gap: 8px; 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 ff0ad3d..be3cecb 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 @@ -15,6 +15,7 @@ import './index.css'; import { ReactElement } from 'react'; import { Layout } from './components/Layout'; import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; +import { VoorbeeldFooterLogo } from '../mijn-profiel/components/Logo'; const meta = { title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/1 - Intro', @@ -28,8 +29,16 @@ export default meta; type Story = StoryObj; -const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => ( - +const TemplatePage = ({ + logo, + theme, + footerLogo, +}: { + logo: ReactElement; + theme: string; + footerLogo?: ReactElement; +}) => ( + @@ -54,7 +63,9 @@ const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => ); export const Default: Story = { - render: () => } theme={'voorbeeld-theme'} />, + render: () => ( + } theme={'voorbeeld-theme'} footerLogo={} /> + ), }; export const DenHaagTheme: Story = { diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-2-login.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-2-login.stories.tsx index 4b562c5..cc4bce9 100644 --- a/packages/storybook/src/templates/form-wmebv/wmebv-2-login.stories.tsx +++ b/packages/storybook/src/templates/form-wmebv/wmebv-2-login.stories.tsx @@ -3,8 +3,8 @@ 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 { IconArrowLeft } from '@tabler/icons-react'; +import { Button } from '@utrecht/button-react/dist/css'; import { - Button, ButtonGroup, Heading1, Heading2, @@ -15,6 +15,7 @@ import { import { ReactElement } from 'react'; import { Layout } from './components/Layout'; import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; +import { VoorbeeldFooterLogo } from '../mijn-profiel/components/Logo'; const meta = { title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/2 - Login', @@ -28,9 +29,17 @@ export default meta; type Story = StoryObj; -const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => ( +const TemplatePage = ({ + logo, + theme, + footerLogo, +}: { + logo?: ReactElement; + theme: string; + footerLogo?: ReactElement; +}) => ( <> - + @@ -44,15 +53,17 @@ const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => Wanneer u inlogt worden uw persoonlijke gegevens automatisch ingevuld. - - + + ); export const Default: Story = { - render: () => } theme={'voorbeeld-theme'} />, + render: () => ( + } theme={'voorbeeld-theme'} footerLogo={} /> + ), }; export const DenHaagTheme: Story = { diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-1.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-1.stories.tsx index a088185..cc43495 100644 --- a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-1.stories.tsx +++ b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-1.stories.tsx @@ -18,6 +18,7 @@ import { import { ReactElement } from 'react'; import { Layout } from './components/Layout'; import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; +import { VoorbeeldFooterLogo } from '../mijn-profiel/components/Logo'; const meta = { title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/3 - Stap 1', @@ -31,9 +32,17 @@ export default meta; type Story = StoryObj; -const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => ( +const TemplatePage = ({ + logo, + theme, + footerLogo, +}: { + logo?: ReactElement; + theme: string; + footerLogo?: ReactElement; +}) => ( <> - + @@ -62,7 +71,9 @@ const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => ); export const Default: Story = { - render: () => } theme={'voorbeeld-theme'} />, + render: () => ( + } theme={'voorbeeld-theme'} footerLogo={} /> + ), }; export const DenHaagTheme: Story = { diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-2.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-2.stories.tsx index 121f305..dcd0eed 100644 --- a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-2.stories.tsx +++ b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-2.stories.tsx @@ -1,6 +1,7 @@ import { Meta, StoryObj } from '@storybook/react'; import '@nl-design-system-unstable/voorbeeld-design-tokens/dist/index.css'; import '@gemeente-denhaag/design-tokens-components/dist/theme/index.css'; +import '@utrecht/design-tokens/dist/theme.css'; import './index.css'; import { IconArrowLeft } from '@tabler/icons-react'; import { @@ -13,12 +14,14 @@ import { Icon, Link, LinkButton, + LogoImage, Paragraph, PreHeading, } from '@utrecht/component-library-react/dist/css-module'; import { ReactElement } from 'react'; import { Layout } from './components/Layout'; import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; +import { VoorbeeldFooterLogo } from '../mijn-profiel/components/Logo'; const meta = { title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/4 - Stap 2', @@ -32,9 +35,17 @@ export default meta; type Story = StoryObj; -const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => ( +const TemplatePage = ({ + logo, + theme, + footerLogo, +}: { + logo?: ReactElement; + theme: string; + footerLogo?: ReactElement; +}) => ( <> - + @@ -80,9 +91,15 @@ const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => ); export const Default: Story = { - render: () => } theme={'voorbeeld-theme'} />, + render: () => ( + } theme={'voorbeeld-theme'} footerLogo={} /> + ), }; export const DenHaagTheme: Story = { render: () => } theme={'denhaag-theme'} />, }; + +export const UtrechtTheme: Story = { + render: () => } theme={'utrecht-theme'} />, +}; diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-3.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-3.stories.tsx index af52d8b..cabfb40 100644 --- a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-3.stories.tsx +++ b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-3.stories.tsx @@ -25,6 +25,7 @@ import { import { ReactElement } from 'react'; import { Layout } from './components/Layout'; import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; +import { VoorbeeldFooterLogo } from '../mijn-profiel/components/Logo'; const meta = { title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/5 - Stap 3', @@ -38,9 +39,17 @@ export default meta; type Story = StoryObj; -const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => ( +const TemplatePage = ({ + logo, + theme, + footerLogo, +}: { + logo?: ReactElement; + theme: string; + footerLogo?: ReactElement; +}) => ( <> - + @@ -141,7 +150,9 @@ const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => ); export const Default: Story = { - render: () => } theme={'voorbeeld-theme'} />, + render: () => ( + } theme={'voorbeeld-theme'} footerLogo={} /> + ), }; export const DenHaagTheme: Story = { diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-4-succes.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-4-succes.stories.tsx index 5a1bdfd..9c22c6b 100644 --- a/packages/storybook/src/templates/form-wmebv/wmebv-4-succes.stories.tsx +++ b/packages/storybook/src/templates/form-wmebv/wmebv-4-succes.stories.tsx @@ -20,6 +20,7 @@ import { import { ReactElement } from 'react'; import { Layout } from './components/Layout'; import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; +import { VoorbeeldFooterLogo } from '../mijn-profiel/components/Logo'; const meta = { title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/6 - Succes', @@ -33,9 +34,17 @@ export default meta; type Story = StoryObj; -const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => ( +const TemplatePage = ({ + logo, + theme, + footerLogo, +}: { + logo: ReactElement; + theme: string; + footerLogo?: ReactElement; +}) => ( <> - + @@ -79,7 +88,9 @@ const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => ); export const Default: Story = { - render: () => } theme={'voorbeeld-theme'} />, + render: () => ( + } theme={'voorbeeld-theme'} footerLogo={} /> + ), }; export const DenHaagTheme: Story = { diff --git a/packages/storybook/src/templates/mijn-profiel/components/Logo.tsx b/packages/storybook/src/templates/mijn-profiel/components/Logo.tsx index c8f5fcc..4d3fe81 100644 --- a/packages/storybook/src/templates/mijn-profiel/components/Logo.tsx +++ b/packages/storybook/src/templates/mijn-profiel/components/Logo.tsx @@ -53,6 +53,29 @@ export const Logo = () => { ); }; +export const VoorbeeldFooterLogo = () => { + return ( + + + + + ); +}; + export const DenHaagLogo = () => { return ( Date: Fri, 18 Oct 2024 07:47:34 +0200 Subject: [PATCH 2/7] chore: refactor components folders --- .../form-wmebv => }/components/Layout.tsx | 0 .../mijn-profiel => }/components/Logo.tsx | 0 .../templates/form-wmebv/components/Logo.tsx | 572 ------------------ .../form-wmebv/wmebv-1-intro.stories.tsx | 5 +- .../form-wmebv/wmebv-2-login.stories.tsx | 5 +- .../form-wmebv/wmebv-3-step-1.stories.tsx | 5 +- .../form-wmebv/wmebv-3-step-2.stories.tsx | 5 +- .../form-wmebv/wmebv-3-step-3.stories.tsx | 5 +- .../form-wmebv/wmebv-4-succes.stories.tsx | 5 +- .../mijn-profiel/components/Layout.tsx | 54 -- .../mijn-profiel/mijn-profiel.stories.tsx | 25 +- 11 files changed, 31 insertions(+), 650 deletions(-) rename packages/storybook/src/{templates/form-wmebv => }/components/Layout.tsx (100%) rename packages/storybook/src/{templates/mijn-profiel => }/components/Logo.tsx (100%) delete mode 100644 packages/storybook/src/templates/form-wmebv/components/Logo.tsx delete mode 100644 packages/storybook/src/templates/mijn-profiel/components/Layout.tsx diff --git a/packages/storybook/src/templates/form-wmebv/components/Layout.tsx b/packages/storybook/src/components/Layout.tsx similarity index 100% rename from packages/storybook/src/templates/form-wmebv/components/Layout.tsx rename to packages/storybook/src/components/Layout.tsx diff --git a/packages/storybook/src/templates/mijn-profiel/components/Logo.tsx b/packages/storybook/src/components/Logo.tsx similarity index 100% rename from packages/storybook/src/templates/mijn-profiel/components/Logo.tsx rename to packages/storybook/src/components/Logo.tsx diff --git a/packages/storybook/src/templates/form-wmebv/components/Logo.tsx b/packages/storybook/src/templates/form-wmebv/components/Logo.tsx deleted file mode 100644 index c8f5fcc..0000000 --- a/packages/storybook/src/templates/form-wmebv/components/Logo.tsx +++ /dev/null @@ -1,572 +0,0 @@ -import { Link } from '@utrecht/component-library-react'; -import { useId } from 'react'; - -export const PageHeaderLogo = () => { - const homepageTitleId = useId(); - return ( - - - - - - - - ); -}; - -export const Logo = () => { - return ( - - - - - ); -}; - -export const DenHaagLogo = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; 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 be3cecb..474fee5 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 @@ -13,9 +13,8 @@ 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 { ReactElement } from 'react'; -import { Layout } from './components/Layout'; -import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; -import { VoorbeeldFooterLogo } from '../mijn-profiel/components/Logo'; +import { Layout } from '../../components/Layout'; +import { DenHaagLogo, PageHeaderLogo, VoorbeeldFooterLogo } from '../../components/Logo'; const meta = { title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/1 - Intro', diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-2-login.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-2-login.stories.tsx index cc4bce9..6099ce6 100644 --- a/packages/storybook/src/templates/form-wmebv/wmebv-2-login.stories.tsx +++ b/packages/storybook/src/templates/form-wmebv/wmebv-2-login.stories.tsx @@ -13,9 +13,8 @@ import { Paragraph, } from '@utrecht/component-library-react/dist/css-module'; import { ReactElement } from 'react'; -import { Layout } from './components/Layout'; -import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; -import { VoorbeeldFooterLogo } from '../mijn-profiel/components/Logo'; +import { Layout } from '../../components/Layout'; +import { DenHaagLogo, PageHeaderLogo, VoorbeeldFooterLogo } from '../../components/Logo'; const meta = { title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/2 - Login', diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-1.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-1.stories.tsx index cc43495..43f5340 100644 --- a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-1.stories.tsx +++ b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-1.stories.tsx @@ -16,9 +16,8 @@ import { PreHeading, } from '@utrecht/component-library-react/dist/css-module'; import { ReactElement } from 'react'; -import { Layout } from './components/Layout'; -import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; -import { VoorbeeldFooterLogo } from '../mijn-profiel/components/Logo'; +import { Layout } from '../../components/Layout'; +import { DenHaagLogo, PageHeaderLogo, VoorbeeldFooterLogo } from '../../components/Logo'; const meta = { title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/3 - Stap 1', diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-2.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-2.stories.tsx index dcd0eed..892bcc4 100644 --- a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-2.stories.tsx +++ b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-2.stories.tsx @@ -19,9 +19,8 @@ import { PreHeading, } from '@utrecht/component-library-react/dist/css-module'; import { ReactElement } from 'react'; -import { Layout } from './components/Layout'; -import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; -import { VoorbeeldFooterLogo } from '../mijn-profiel/components/Logo'; +import { Layout } from '../../components/Layout'; +import { DenHaagLogo, PageHeaderLogo, VoorbeeldFooterLogo } from '../../components/Logo'; const meta = { title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/4 - Stap 2', diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-3.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-3.stories.tsx index cabfb40..3873c36 100644 --- a/packages/storybook/src/templates/form-wmebv/wmebv-3-step-3.stories.tsx +++ b/packages/storybook/src/templates/form-wmebv/wmebv-3-step-3.stories.tsx @@ -23,9 +23,8 @@ import { URLData, } from '@utrecht/component-library-react/dist/css-module'; import { ReactElement } from 'react'; -import { Layout } from './components/Layout'; -import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; -import { VoorbeeldFooterLogo } from '../mijn-profiel/components/Logo'; +import { Layout } from '../../components/Layout'; +import { DenHaagLogo, PageHeaderLogo, VoorbeeldFooterLogo } from '../../components/Logo'; const meta = { title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/5 - Stap 3', diff --git a/packages/storybook/src/templates/form-wmebv/wmebv-4-succes.stories.tsx b/packages/storybook/src/templates/form-wmebv/wmebv-4-succes.stories.tsx index 9c22c6b..bd05763 100644 --- a/packages/storybook/src/templates/form-wmebv/wmebv-4-succes.stories.tsx +++ b/packages/storybook/src/templates/form-wmebv/wmebv-4-succes.stories.tsx @@ -18,9 +18,8 @@ import { URLData, } from '@utrecht/component-library-react/dist/css-module'; import { ReactElement } from 'react'; -import { Layout } from './components/Layout'; -import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; -import { VoorbeeldFooterLogo } from '../mijn-profiel/components/Logo'; +import { Layout } from '../../components/Layout'; +import { DenHaagLogo, PageHeaderLogo, VoorbeeldFooterLogo } from '../../components/Logo'; const meta = { title: 'Templates/Meerstappenformulier/WMEBV Contactformulier/6 - Succes', diff --git a/packages/storybook/src/templates/mijn-profiel/components/Layout.tsx b/packages/storybook/src/templates/mijn-profiel/components/Layout.tsx deleted file mode 100644 index c869ba6..0000000 --- a/packages/storybook/src/templates/mijn-profiel/components/Layout.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { - Heading2, - Link, - LinkList, - LinkListLink, - PageContent, - PageFooter, - PageHeader, -} from '@utrecht/component-library-react/dist/css-module'; -import { HTMLAttributes, PropsWithChildren, ReactElement } from 'react'; -import { Logo, PageHeaderLogo } from './Logo'; - -interface LayoutProps extends PropsWithChildren> { - logo?: ReactElement; -} - -export const Layout = ({ logo, children, className, ...props }: LayoutProps) => { - return ( -
- -
{logo || }
- - -
{children}
- - -
-
-
{logo || }
-
- 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 - -
-
-
- -
- ); -}; diff --git a/packages/storybook/src/templates/mijn-profiel/mijn-profiel.stories.tsx b/packages/storybook/src/templates/mijn-profiel/mijn-profiel.stories.tsx index 6311348..dc857e5 100644 --- a/packages/storybook/src/templates/mijn-profiel/mijn-profiel.stories.tsx +++ b/packages/storybook/src/templates/mijn-profiel/mijn-profiel.stories.tsx @@ -19,11 +19,12 @@ import { BreadcrumbNavLink, BreadcrumbNavSeparator, Heading1, + Heading2, Icon, } from '@utrecht/component-library-react/dist/css-module'; import { ReactElement } from 'react'; -import { Layout } from './components/Layout'; -import { DenHaagLogo, PageHeaderLogo } from './components/Logo'; +import { Layout } from '../../components/Layout'; +import { DenHaagLogo, PageHeaderLogo, VoorbeeldFooterLogo } from '../../components/Logo'; const meta = { title: 'Templates/Mijn Profiel/Mijn Gegevens', @@ -37,8 +38,16 @@ export default meta; type Story = StoryObj; -const TemplatePage = ({ logo, theme }: { logo: ReactElement; theme: string }) => ( - +const TemplatePage = ({ + logo, + theme, + footerLogo, +}: { + logo: ReactElement; + theme: string; + footerLogo?: ReactElement; +}) => ( +
From 3950a034ecacf480ad8e73e31e102b3f3c583cce Mon Sep 17 00:00:00 2001 From: Bryan de Jong Date: Fri, 18 Oct 2024 08:33:00 +0200 Subject: [PATCH 4/7] feat: add profile page content --- .../components/ExpandableSection/index.tsx | 2 +- .../src/templates/mijn-profiel/index.css | 5 ++ .../mijn-profiel/mijn-profiel.stories.tsx | 61 ++++++++++++++++--- 3 files changed, 60 insertions(+), 8 deletions(-) diff --git a/packages/storybook/src/components/ExpandableSection/index.tsx b/packages/storybook/src/components/ExpandableSection/index.tsx index be6c3c0..c05d8e5 100644 --- a/packages/storybook/src/components/ExpandableSection/index.tsx +++ b/packages/storybook/src/components/ExpandableSection/index.tsx @@ -5,7 +5,7 @@ import './index.css'; export interface ExpandableSectionProps { title: ReactNode; description?: ReactNode; - children: ReactNode; + children?: ReactNode; } export const ExpandableSection: React.FC = ({ title, description, children }) => { diff --git a/packages/storybook/src/templates/mijn-profiel/index.css b/packages/storybook/src/templates/mijn-profiel/index.css index cc26518..5d5ec45 100644 --- a/packages/storybook/src/templates/mijn-profiel/index.css +++ b/packages/storybook/src/templates/mijn-profiel/index.css @@ -29,6 +29,7 @@ --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); + --utrecht-link-list-icon-inset-block-start: 6px; /* Custom component tokens */ --voorbeeld-logo-icon-color: var(--voorbeeld-color-violet-700); @@ -112,6 +113,10 @@ flex-direction: column; } +.todo-profile-page-content { + flex-grow: 1; +} + @media screen and (width <= 960px) { .todo-footer-content-group { align-items: start; diff --git a/packages/storybook/src/templates/mijn-profiel/mijn-profiel.stories.tsx b/packages/storybook/src/templates/mijn-profiel/mijn-profiel.stories.tsx index d305c7f..da4719b 100644 --- a/packages/storybook/src/templates/mijn-profiel/mijn-profiel.stories.tsx +++ b/packages/storybook/src/templates/mijn-profiel/mijn-profiel.stories.tsx @@ -21,6 +21,8 @@ import { Heading1, Heading2, Icon, + LinkList, + LinkListLink, } from '@utrecht/component-library-react/dist/css-module'; import { ReactElement } from 'react'; import { ExpandableSection } from '../../components/ExpandableSection'; @@ -128,14 +130,59 @@ const TemplatePage = ({ -
+
Uw gegevens - -

This is the content of the first panel.

- - -

This is the content of the second panel.

- + + + + +
+ Wijzigingen en aanvragen BRP + + + + + } + > + Meer informatie over adresonderzoek + + + + + } + > + Gegevens in BRP laten corrigeren, wijzigen of verwijderen + + + + + } + > + Geheimhouding persoonsgegevens aanvragen + + +
From 7febefb1bd230903ff121ba2be0e4cd546db6ac9 Mon Sep 17 00:00:00 2001 From: Bryan de Jong Date: Fri, 18 Oct 2024 09:12:16 +0200 Subject: [PATCH 5/7] feat: add contatgegevens --- .../mijn-profiel/mijn-profiel.stories.tsx | 41 ++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/storybook/src/templates/mijn-profiel/mijn-profiel.stories.tsx b/packages/storybook/src/templates/mijn-profiel/mijn-profiel.stories.tsx index da4719b..b356a3e 100644 --- a/packages/storybook/src/templates/mijn-profiel/mijn-profiel.stories.tsx +++ b/packages/storybook/src/templates/mijn-profiel/mijn-profiel.stories.tsx @@ -12,17 +12,25 @@ import { IconInbox, IconLayoutGrid, IconParking, + IconPencil, + IconPlus, IconUser, } from '@tabler/icons-react'; +import { Link } from '@utrecht/component-library-react'; import { BreadcrumbNav, BreadcrumbNavLink, BreadcrumbNavSeparator, + DataList, + DataListItem, + DataListKey, + DataListValue, Heading1, Heading2, Icon, LinkList, LinkListLink, + PreserveData, } from '@utrecht/component-library-react/dist/css-module'; import { ReactElement } from 'react'; import { ExpandableSection } from '../../components/ExpandableSection'; @@ -135,7 +143,38 @@ const TemplatePage = ({ + > + + + + E-mailadres + + + j.vandrouwen@gmail.com + + + + + + Aanpassen + + + + + Telefoonnummer + + + - + + + + + + Toevoegen + + + + Date: Fri, 18 Oct 2024 09:49:39 +0200 Subject: [PATCH 6/7] feat: add mijn omgeving pagina --- packages/storybook/package.json | 2 + .../templates/mijn-omgeving-home/index.css | 132 +++++++++++++ .../mijn-omgeving.stories.tsx | 183 ++++++++++++++++++ pnpm-lock.yaml | 143 ++++++++++++++ 4 files changed, 460 insertions(+) create mode 100644 packages/storybook/src/templates/mijn-omgeving-home/index.css create mode 100644 packages/storybook/src/templates/mijn-omgeving-home/mijn-omgeving.stories.tsx diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 3fdf1f5..7af10fb 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -21,6 +21,8 @@ }, "devDependencies": { "@gemeente-denhaag/design-tokens-components": "0.2.3-alpha.408", + "@gemeente-denhaag/action": "0.1.1-alpha.80", + "@gemeente-denhaag/card": "0.2.3-alpha.414", "@gemeente-denhaag/sidenav": "0.1.0-alpha.228", "@nl-design-system-unstable/voorbeeld-design-tokens": "2.0.0", "@storybook/addon-a11y": "8.2.9", diff --git a/packages/storybook/src/templates/mijn-omgeving-home/index.css b/packages/storybook/src/templates/mijn-omgeving-home/index.css new file mode 100644 index 0000000..e6fee1b --- /dev/null +++ b/packages/storybook/src/templates/mijn-omgeving-home/index.css @@ -0,0 +1,132 @@ +.voorbeeld-theme { + --utrecht-space-around: 1; + + /* Component spacing tokens that aren't set in voorbeeld-theme */ + --denhaag-sidenav-display: flex; + --denhaag-sidenav-mobile-display: var(--denhaag-sidenav-display); + --denhaag-sidenav-flex-direction: column; + --denhaag-sidenav-row-gap: 24px; + --utrecht-article-max-inline-size: 670px; + --utrecht-button-group-margin-block-start: var(--voorbeeld-space-block-rabbit); + --utrecht-form-field-margin-block-start: var(--voorbeeld-space-block-rabbit); + --utrecht-form-label-font-weight: var(--voorbeeld-typography-font-weight-bold); + --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); + --utrecht-link-list-icon-inset-block-start: 6px; + + /* Custom component tokens */ + --voorbeeld-logo-icon-color: var(--voorbeeld-color-violet-700); + --todo-page-header-content-max-inline-size: calc(var(--utrecht-article-max-inline-size) * 1.5); + --todo-page-header-padding-inline-start: var(--voorbeeld-space-inline-mouse); + --todo-page-header-padding-inline-end: var(--voorbeeld-space-inline-mouse); +} + +.voorbeeld-back-link { + align-items: center; + column-gap: 8px; + display: inline-flex; +} + +.voorbeeld-data-list-item { + border-block-end-color: var(--voorbeeld-color-gray-200); + border-block-end-style: solid; + border-block-end-width: 1px; + display: block; + -webkit-margin-after: 0; + margin-block-end: 0; + -webkit-padding-after: var(--voorbeeld-space-block-mouse); + -webkit-padding-before: var(--voorbeeld-space-block-mouse); + padding-block-end: var(--voorbeeld-space-block-mouse); + padding-block-start: var(--voorbeeld-space-block-mouse); +} + +.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-content { + margin-inline-end: auto; + margin-inline-start: auto; + max-inline-size: calc(var(--utrecht-article-max-inline-size) * 1.25); +} + +.todo-page-header__content { + margin-inline-end: auto; + margin-inline-start: auto; + max-inline-size: var(--todo-page-header-content-max-inline-size); + padding-inline-end: var(--todo-page-header-padding-inline-end); + padding-inline-start: var(--todo-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.25); +} + +.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; +} + +.todo-form-field { + display: flex; + flex-direction: column; +} + +.todo-profile-page-content { + flex-grow: 1; +} + +.todo-card-layout { + column-gap: 24px; + display: flex; + flex-direction: row; +} + +@media screen and (width <= 960px) { + .todo-footer-content-group { + align-items: start; + flex-direction: column; + gap: 1em; + } +} diff --git a/packages/storybook/src/templates/mijn-omgeving-home/mijn-omgeving.stories.tsx b/packages/storybook/src/templates/mijn-omgeving-home/mijn-omgeving.stories.tsx new file mode 100644 index 0000000..9479cfe --- /dev/null +++ b/packages/storybook/src/templates/mijn-omgeving-home/mijn-omgeving.stories.tsx @@ -0,0 +1,183 @@ +import { ActionSingle } from '@gemeente-denhaag/action'; +import { CaseCard } from '@gemeente-denhaag/card'; +import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '@gemeente-denhaag/sidenav'; +import { Meta, StoryObj } from '@storybook/react'; +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 { + IconArchive, + IconBuildingCommunity, + IconChevronRight, + IconCurrencyEuro, + IconHome, + IconInbox, + IconLayoutGrid, + IconParking, + IconUser, +} from '@tabler/icons-react'; +import { + BreadcrumbNav, + BreadcrumbNavLink, + BreadcrumbNavSeparator, + Heading1, + Heading2, + Icon, + Paragraph, +} from '@utrecht/component-library-react/dist/css-module'; +import { ReactElement } from 'react'; +import { Layout } from '../../components/Layout'; +import { DenHaagLogo, PageHeaderLogo, VoorbeeldFooterLogo } from '../../components/Logo'; + +const meta = { + title: 'Templates/Mijn Omgeving/Overzichtspagina', + id: 'mijn-omgeving-1', + parameters: { + layout: 'fullscreen', + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +const TemplatePage = ({ + logo, + theme, + footerLogo, +}: { + logo: ReactElement; + theme: string; + footerLogo?: ReactElement; +}) => ( + + + + Home + + + + + + Mijn Voorbeeld + + + + + + + Mijn gegevens + + +
+ + + + + + Home + + + + + + + + Berichten + + + + + + Lopende zaken + + + + + + + + Belastingzaken + + + + + + WOZ + + + + + + Parkeren + + + + + + Erfpacht + + + + + + + + Gegevens + + + + +
+ Hallo Jeroen van Drouwen + + In ‘Mijn omgeving’ kunt u zelf uw persoonlijke zaken regelen wanneer het u uitkomt. U kunt bijvoorbeeld uw + rekeningen betalen en zien wanneer uw aanvraag klaar is. + +
+ Wat moet ik regelen + + Geef informatie voor uw aanvraag subsidie geluidisolatie + + + Betaal uw parkeerbon van € 74,90 voor parkeren bij Valeriusplein + + + Verleng uw identiteitskaart + +
+
+ Lopende zaken +
+ + +
+
+
+
+ +); + +export const Default: Story = { + render: () => ( + } theme={'voorbeeld-theme'} footerLogo={} /> + ), +}; + +export const DenHaagTheme: Story = { + render: () => } theme={'denhaag-theme'} />, +}; + +const labels = { + today: 'vandaag', + yesterday: 'gisteren', + before: 'vóór', + approachingDeadline: (daysDifference: number) => { + if (daysDifference === 1) { + return `nog ${daysDifference} dag`; + } + return `nog ${daysDifference} dagen`; + }, +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0645bb0..c3629d5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -90,6 +90,12 @@ importers: packages/storybook: devDependencies: + '@gemeente-denhaag/action': + specifier: 0.1.1-alpha.80 + version: 0.1.1-alpha.80(react@18.3.1) + '@gemeente-denhaag/card': + specifier: 0.2.3-alpha.414 + version: 0.2.3-alpha.414(@babel/runtime@7.25.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@gemeente-denhaag/design-tokens-components': specifier: 0.2.3-alpha.408 version: 0.2.3-alpha.408 @@ -1300,14 +1306,53 @@ packages: resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + '@gemeente-denhaag/action@0.1.1-alpha.80': + resolution: {integrity: sha512-KPAk/pYylLKrPfxfeirowAqpzzRv/YYIdbE0XnLe3LcIbigmlGFCueEq8angaz0lSyKObPLyodffeFi9EZSJlA==} + + '@gemeente-denhaag/button@0.2.3-alpha.414': + resolution: {integrity: sha512-NYKlc7Wjouw1a2inGy0sLvJUt9/Ys2mFn8U8DGzgTB7SJ/Gg6HJRsNsp2pkHitDfmBpN56dZ16eYpxAki4H8ZQ==} + peerDependencies: + react: ^18.0.0 + + '@gemeente-denhaag/card@0.2.3-alpha.414': + resolution: {integrity: sha512-EYig1kyZ2A1sqXSAcE5Gj2AByg30lFYpi3+b8+yHV8nQrKHDDKwK16u0bAhAwFomheLSLOsppyuPcl+B/XBENQ==} + peerDependencies: + react: ^18.0.0 + + '@gemeente-denhaag/design-tokens-common@0.2.3-alpha.416': + resolution: {integrity: sha512-JVDvsHvYez7DlKuQmW8xyqpiWYPZb6fsIXUnR7GViuV72T3E9d0CNS4m1t8RqJIMZMDmrSvqdOHp7Wrx/WRUgg==} + '@gemeente-denhaag/design-tokens-components@0.2.3-alpha.408': resolution: {integrity: sha512-wRflvVGEju4H+QBwProL/HILjSLfxOtJlFjXI6CFTpH5UlfNLc76pBE3UaihSUz5/GHLIYxHwEM92vaqipHYZQ==} + '@gemeente-denhaag/design-tokens-components@0.2.3-alpha.416': + resolution: {integrity: sha512-MF6+CehBFzP3uT6XzWe7jrwz2U2tHC3/O/ZcccZcEdQ0Blw7xkK3vmH8Yba+ClXzjGScAO899GbFwhTerYoDZw==} + + '@gemeente-denhaag/icons@0.2.3-alpha.414': + resolution: {integrity: sha512-04Q++110VpeNNsWNny7xl5Vh5sKyqL0DC5vRLlO7Fiw0TDX6j0Hf93MYMSdqxV6QG4Yxl05plj1t6BaTRAmmoQ==} + peerDependencies: + react: ^18.0.0 + + '@gemeente-denhaag/link@0.2.3-alpha.414': + resolution: {integrity: sha512-zmiu9KsqtNODuXcVRM1x5O1503Qq1w68rYwB+xChIKf50gup99GnRsz4OzokwEQjSkIMej+mt6wW2CqPFEit1A==} + peerDependencies: + react: ^18.0.0 + '@gemeente-denhaag/sidenav@0.1.0-alpha.228': resolution: {integrity: sha512-UXGIHQqwqqteK/HufpzNW5yehBeD4WCUAPdtIRSX6rgJWQQJwIDTF8PVRr3H8HgGzl+JRauNiyHdWOi3EdVcyg==} peerDependencies: react: ^18.0.0 + '@gemeente-denhaag/typography@0.2.3-alpha.414': + resolution: {integrity: sha512-WgNyqLiYQ02c2LooUClypmXeGnWDbD3JkP9PNr5UhuPqb6Wm0z51pAyZNzAhhjW6ot5pKwsopEt6t9nhr480sQ==} + peerDependencies: + react: ^18.0.0 + + '@gemeente-denhaag/utils@0.2.3-alpha.413': + resolution: {integrity: sha512-ZQgrTQLGc7jABprLqB1nz/BQ0iRMnqu5SKMFxogoRbyMamOFF9F9ZS3G974wVBFvBcv6k7sxXXKmB6SMuX/65g==} + peerDependencies: + react: ^18.0.0 + '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} @@ -2153,6 +2198,23 @@ packages: react: '18' react-dom: '18' + '@utrecht/component-library-react@6.0.0': + resolution: {integrity: sha512-GSPZS5JBTadLE/L3EQ/ZTy7zi9pTcntslvuId7e7ZGCsOlzT06GhzVRvAaCJ5l7FF1zExz9eOYf/NiUSFTrk5g==} + peerDependencies: + '@babel/runtime': ^7.23.6 + date-fns: ^2.30.0 + react: '18' + react-dom: '18' + react-vega: ^7.6.0 + vega: ^5.25.0 + peerDependenciesMeta: + date-fns: + optional: true + react-vega: + optional: true + vega: + optional: true + '@utrecht/component-library-react@7.2.0': resolution: {integrity: sha512-o2nJIWxc93KmQIVNSX4WIJQqZCcMCOnS1A6oqfFKV8kBbnVaDxuqQSgjT/HNkoqLWZQY9Zo5orKdmRDHDpKr+w==} peerDependencies: @@ -2170,6 +2232,9 @@ packages: vega: optional: true + '@utrecht/components@7.0.0': + resolution: {integrity: sha512-5Yq9xjWQt5A6zM8Q7HqSyHnuyf/UO4l+jnNxTEtRfj46lAqN4E44Vp4oZdi+mESE+g/fAnVDUbJVhjQChG9jlA==} + '@utrecht/design-tokens@2.1.1': resolution: {integrity: sha512-+mt1fhxwp9f5gBmD9Qh/E0H8w2mIj1ZEvMh9aXY1QdEC9hxRZRdbOjedHhelAtq6kM18SS0AXpgkB2yvhrVwDg==} @@ -2855,6 +2920,9 @@ packages: resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==} engines: {node: '>= 0.4'} + date-fns@3.6.0: + resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==} + debug@2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} peerDependencies: @@ -7738,12 +7806,73 @@ snapshots: '@eslint/js@8.57.0': {} + '@gemeente-denhaag/action@0.1.1-alpha.80(react@18.3.1)': + dependencies: + '@gemeente-denhaag/button': 0.2.3-alpha.414(react@18.3.1) + '@gemeente-denhaag/icons': 0.2.3-alpha.414(react@18.3.1) + '@gemeente-denhaag/link': 0.2.3-alpha.414(react@18.3.1) + '@gemeente-denhaag/utils': 0.2.3-alpha.413(react@18.3.1) + date-fns: 3.6.0 + transitivePeerDependencies: + - react + + '@gemeente-denhaag/button@0.2.3-alpha.414(react@18.3.1)': + dependencies: + '@gemeente-denhaag/icons': 0.2.3-alpha.414(react@18.3.1) + react: 18.3.1 + + '@gemeente-denhaag/card@0.2.3-alpha.414(@babel/runtime@7.25.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@gemeente-denhaag/icons': 0.2.3-alpha.414(react@18.3.1) + '@gemeente-denhaag/link': 0.2.3-alpha.414(react@18.3.1) + '@gemeente-denhaag/typography': 0.2.3-alpha.414(@babel/runtime@7.25.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@gemeente-denhaag/utils': 0.2.3-alpha.413(react@18.3.1) + react: 18.3.1 + transitivePeerDependencies: + - '@babel/runtime' + - date-fns + - react-dom + - react-vega + - vega + + '@gemeente-denhaag/design-tokens-common@0.2.3-alpha.416': {} + '@gemeente-denhaag/design-tokens-components@0.2.3-alpha.408': {} + '@gemeente-denhaag/design-tokens-components@0.2.3-alpha.416': {} + + '@gemeente-denhaag/icons@0.2.3-alpha.414(react@18.3.1)': + dependencies: + react: 18.3.1 + + '@gemeente-denhaag/link@0.2.3-alpha.414(react@18.3.1)': + dependencies: + '@gemeente-denhaag/icons': 0.2.3-alpha.414(react@18.3.1) + react: 18.3.1 + '@gemeente-denhaag/sidenav@0.1.0-alpha.228(react@18.3.1)': dependencies: react: 18.3.1 + '@gemeente-denhaag/typography@0.2.3-alpha.414(@babel/runtime@7.25.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@gemeente-denhaag/design-tokens-common': 0.2.3-alpha.416 + '@gemeente-denhaag/design-tokens-components': 0.2.3-alpha.416 + '@utrecht/component-library-react': 6.0.0(@babel/runtime@7.25.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@utrecht/components': 7.0.0 + react: 18.3.1 + transitivePeerDependencies: + - '@babel/runtime' + - date-fns + - react-dom + - react-vega + - vega + + '@gemeente-denhaag/utils@0.2.3-alpha.413(react@18.3.1)': + dependencies: + date-fns: 3.6.0 + react: 18.3.1 + '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.2 @@ -8945,6 +9074,14 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + '@utrecht/component-library-react@6.0.0(@babel/runtime@7.25.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@babel/runtime': 7.25.6 + clsx: 2.1.1 + lodash.chunk: 4.2.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@utrecht/component-library-react@7.2.0(@babel/runtime@7.25.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.25.6 @@ -8953,6 +9090,10 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + '@utrecht/components@7.0.0': + dependencies: + clsx: 2.1.1 + '@utrecht/design-tokens@2.1.1': {} '@utrecht/icon@1.1.0': {} @@ -9745,6 +9886,8 @@ snapshots: es-errors: 1.3.0 is-data-view: 1.0.1 + date-fns@3.6.0: {} + debug@2.6.9: dependencies: ms: 2.0.0 From 168c359cac67b37f5aa73f50baab9343d38a6c8a Mon Sep 17 00:00:00 2001 From: Bryan de Jong Date: Sat, 19 Oct 2024 14:15:14 +0200 Subject: [PATCH 7/7] wip: eigen huisstijl hack --- .../storybook/addons/user-theme/manager.tsx | 137 ++++++++++++++++++ packages/storybook/config/main.ts | 1 + packages/storybook/package.json | 5 + .../src/templates/form-wmebv/index.css | 5 + packages/storybook/tsconfig.json | 2 +- pnpm-lock.yaml | 12 ++ 6 files changed, 161 insertions(+), 1 deletion(-) create mode 100644 packages/storybook/addons/user-theme/manager.tsx diff --git a/packages/storybook/addons/user-theme/manager.tsx b/packages/storybook/addons/user-theme/manager.tsx new file mode 100644 index 0000000..8f04744 --- /dev/null +++ b/packages/storybook/addons/user-theme/manager.tsx @@ -0,0 +1,137 @@ +import { addons, types } from '@storybook/manager-api'; +import { useStorybookState } from '@storybook/manager-api'; +import React, { useRef, useState } from 'react'; + +addons.register('my/panel', () => { + addons.add('my-panel-addon/panel', { + title: 'Jouw huisstijl', + type: types.TAB, //another option is using a panel but its much less visible to non power users + route: () => `/design-tokens`, + match: ({ viewMode }) => viewMode === 'design-tokens', + render: () => , + }); +}); + +const DesignTokenUploaderTab = () => { + const [themeName, setThemeName] = useState(null); + const { storyId } = useStorybookState(); + const iframeRef = useRef(null); + const iframeUrl = `/iframe.html?id=${storyId}&viewMode=story`; + const themeElementRef = useRef(null); + + const handleFileUpload = (file: File) => { + const reader = new FileReader(); + + reader.onload = (e) => { + const fileContent = e.target?.result as string; + + if (fileContent) { + console.log('File content successfully read:', fileContent); + + const themeMatch = fileContent.match(/(\.[\w-]+)/); + if (themeMatch) { + const themeSelector = themeMatch[1]; + setThemeName(formatSelectorAsThemeName(themeSelector)); + + console.log(`Extracted theme selector: ${themeSelector}`); + + if (iframeRef.current) { + const iframeDoc = iframeRef.current.contentDocument || iframeRef.current.contentWindow?.document; + if (iframeDoc) { + applyCustomTheme(iframeDoc, themeSelector, fileContent); + } + } + } else { + console.error('Failed to extract a valid theme selector from the file.'); + } + } else { + console.error('No file content was read.'); + } + }; + + reader.readAsText(file); + }; + + const handleFileDrop = (e: React.DragEvent) => { + e.preventDefault(); + const file = e.dataTransfer.files[0]; + if (file) { + handleFileUpload(file); + } + }; + + const applyCustomTheme = (iframeDoc: Document, customTheme: string, fileContent: string) => { + const themeElement = iframeDoc.querySelector("[class$='-theme']"); + + if (themeElement) { + console.log('Found theme element:', themeElement); + + themeElementRef.current = themeElement as HTMLElement; + + const oldThemeClass = Array.from(themeElement.classList).find((c) => c.endsWith('-theme')); + if (oldThemeClass) { + themeElement.classList.remove(oldThemeClass); + } + + themeElement.classList.add(customTheme.replace('.', '')); + + const styleElement = document.createElement('style'); + styleElement.innerHTML = fileContent; + themeElement.appendChild(styleElement); + + console.log(`Applied new theme: ${customTheme} and dumped all CSS.`); + } + }; + + return ( +
+
e.preventDefault()} + > +

+ Upload eigen huisstijl: Actief: {themeName || 'Geen eigen thema'} +

+

+ Je kan je eigen huisstijl uploaden door middel van een theme.css bestand. Lees hier voor een stappenplan: rip + geen docs +

+ { + if (e.target.files?.[0]) { + handleFileUpload(e.target.files[0]); + } + }} + /> +
+ +
+