fix: ensure hidden attribute still works for every HTML component

nl-design-system · Oct 8, 2023 · 2ef6b54 · 2ef6b54
1 parent ff7b849
commit 2ef6b54
Show file tree

Hide file tree

Showing 34 changed files with 743 additions and 101 deletions.
diff --git a/components/button/html/_mixin.scss b/components/button/html/_mixin.scss
@@ -14,6 +14,10 @@
     @include utrecht-button--distanced;
   }
 
+  button[hidden] {
+    display: none;
+  }
+
   button[type="submit" i],
   input[type="submit" i] {
     @include utrecht-button--submit;

diff --git a/components/code-block/html/_mixin.scss b/components/code-block/html/_mixin.scss
@@ -11,6 +11,10 @@
     @include utrecht-code-block;
   }
 
+  pre[hidden]:has(> code:only-child) {
+    display: none;
+  }
+
   pre:has(> code:only-child) > code {
     display: contents;
   }

diff --git a/components/form-fieldset/css/_reset.scss b/components/form-fieldset/css/_reset.scss
@@ -4,6 +4,7 @@
  */
 
 @mixin reset-fieldset {
+  /* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
   all: revert;
   border: 0;
   margin-inline-end: 0;

diff --git a/components/form-fieldset/html/_mixin.scss b/components/form-fieldset/html/_mixin.scss
@@ -11,6 +11,10 @@
     @include utrecht-form-fieldset--html-fieldset;
     @include utrecht-form-fieldset--distanced;
   }
+
+  fieldset[hidden] {
+    display: none;
+  }
 }
 
 @mixin utrecht-html-legend {
@@ -20,6 +24,10 @@
     @include utrecht-form-fieldset__legend--distanced;
   }
 
+  legend[hidden] {
+    display: none;
+  }
+
   fieldset:disabled > legend {
     @include utrecht-form-fieldset__legend--disabled;
   }

diff --git a/packages/storybook-html/src/Article.stories.tsx b/packages/storybook-html/src/Article.stories.tsx
@@ -4,11 +4,15 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/article/README.md?raw';
 import tokensDefinition from '@utrecht/components/article/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Article = ({ children }) => <article>{children}</article>;
+const Article = ({ children, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => (
+  <article {...restProps}>{children}</article>
+);
 
 const meta = {
   title: 'HTML Component/Article',
@@ -19,18 +23,11 @@ const meta = {
     children: {
       description: 'Content of the article',
     },
+    hidden,
   },
   args: {
-    children: [
-      <h1>Lorem ipsum</h1>,
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </p>,
-    ],
+    children: '',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -53,6 +50,18 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  args: {
+    children: [
+      <h1>Lorem ipsum</h1>,
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </p>,
+    ],
+  },
   parameters: {
     docs: {
       description: {
@@ -62,4 +71,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Blockquote.stories.tsx b/packages/storybook-html/src/Blockquote.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/blockquote/README.md?raw';
 import tokensDefinition from '@utrecht/components/blockquote/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Blockquote = ({ children }) => <blockquote>{children}</blockquote>;
+const Blockquote = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <blockquote {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Blockquote',
@@ -19,9 +21,11 @@ const meta = {
     children: {
       description: 'Content of the quote',
     },
+    hidden,
   },
   args: {
     children: [],
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -64,4 +68,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Button.stories.tsx b/packages/storybook-html/src/Button.stories.tsx
@@ -4,12 +4,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/button/README.md?raw';
 import tokensDefinition from '@utrecht/components/button/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
 import buttonDisabledTabindexMarkdown from './_button-disabled-tabindex.md?raw';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Button = ({ children, ...attributes }) => <button {...attributes}>{children}</button>;
+const Button = ({ ...attributes }: PropsWithChildren<HTMLAttributes<HTMLButtonElement>>) => <button {...attributes} />;
 
 const meta = {
   title: 'HTML Component/Button',
@@ -28,6 +30,7 @@ const meta = {
       description: 'Disabled',
       control: 'boolean',
     },
+    hidden,
     tabindex: {
       description: 'Tabindex',
       control: 'boolean',
@@ -40,6 +43,7 @@ const meta = {
   },
   args: {
     disabled: false,
+    hidden: false,
     type: 'button',
   },
   tags: ['autodocs'],
@@ -162,4 +166,18 @@ export const Submit: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Checkbox.stories.tsx b/packages/storybook-html/src/Checkbox.stories.tsx
@@ -4,11 +4,27 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/checkbox/README.md?raw';
 import tokensDefinition from '@utrecht/components/checkbox/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { InputHTMLAttributes } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Checkbox = ({ checked, disabled, indeterminate, invalid, name, required, value, ...attributes }) => (
+interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+  indeterminate?: boolean;
+  invalid?: boolean;
+}
+
+const Checkbox = ({
+  checked,
+  disabled,
+  indeterminate,
+  invalid,
+  name,
+  required,
+  value,
+  ...attributes
+}: CheckboxProps) => (
   <input
     name={name}
     type="checkbox"
@@ -36,6 +52,7 @@ const meta = {
       description: 'Disabled',
       control: 'boolean',
     },
+    hidden,
     invalid: {
       description: 'Invalid',
       control: 'boolean',
@@ -60,6 +77,7 @@ const meta = {
   args: {
     checked: false,
     disabled: false,
+    hidden: false,
     invalid: false,
     required: false,
     name: 'i-agree',
@@ -124,4 +142,18 @@ export const Indeterminate: Story = {
   name: 'Indeterminate',
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Code.stories.tsx b/packages/storybook-html/src/Code.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/code/README.md?raw';
 import tokensDefinition from '@utrecht/components/code/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Code = ({ children }) => <code>{children}</code>;
+const Code = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <code {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Code',
@@ -20,9 +22,11 @@ const meta = {
       description: 'Code',
       control: 'text',
     },
+    hidden,
   },
   args: {
     children: '<input type="url" value="https://example.fi/">',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -54,4 +58,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/CodeBlock.stories.tsx b/packages/storybook-html/src/CodeBlock.stories.tsx
@@ -4,12 +4,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/code-block/README.md?raw';
 import tokensDefinition from '@utrecht/components/code-block/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const CodeBlock = ({ children }) => (
-  <pre>
+const CodeBlock = ({ children, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLPreElement>>) => (
+  <pre {...restProps}>
     <code>{children}</code>
   </pre>
 );
@@ -24,6 +26,7 @@ const meta = {
       description: 'Code',
       control: 'text',
     },
+    hidden,
   },
   args: {
     children: `<!DOCTYPE html>
@@ -37,6 +40,7 @@ const meta = {
   </body>
 </html>
 `,
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -68,4 +72,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);