Component/checkbox (#546)

Wachten op een beslissing voor de achtergrond kleur bij Indeterminate And Focus --------- Co-authored-by: Mees Work <[email protected]> Co-authored-by: Adham AboHasson <[email protected]>
nl-design-system · Sep 11, 2024 · 7927c48 · 7927c48
1 parent c6a53fa
commit 7927c48
Show file tree

Hide file tree

Showing 9 changed files with 293 additions and 3 deletions.
diff --git a/packages/components-css/checkbox/index.scss b/packages/components-css/checkbox/index.scss
@@ -0,0 +1,17 @@
+@import "./mixin";
+
+.utrecht-checkbox {
+  &--disabled {
+    @include utrecht-checkbox--disabled;
+  }
+  &--invalid {
+    @include utrecht-checkbox--invalid;
+  }
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input,
+.utrecht-custom-checkbox--html-input {
+  @include utrecht-custom-checkbox--html-input;
+}
+.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate {
+  @include utrecht-checkbox--indeterminate;
+}
diff --git a/packages/components-css/checkbox/mixin.scss b/packages/components-css/checkbox/mixin.scss
@@ -0,0 +1,98 @@
+@mixin utrecht-checkbox--checked {
+  background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="white"/></svg>') !important;
+}
+
+@mixin utrecht-checkbox--disabled {
+  background-color: var(--utrecht-checkbox-disabled-background-color);
+  border-color: var(--utrecht-checkbox-disabled-border-color);
+  cursor: var(--utrecht-action-disabled-cursor, revert);
+}
+
+@mixin utrecht-checkbox--invalid {
+  background-color: var(--utrecht-checkbox-invalid-background-color);
+}
+
+@mixin utrecht-checkbox--checked--active {
+  background-color: var(--utrecht-checkbox-checked-active-background-color);
+  border-color: var(--utrecht-checkbox-checked-active-border-color);
+}
+
+@mixin utrecht-checkbox--checked--hover {
+  background-color: var(--utrecht-checkbox-checked-hover-background-color);
+  background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="white"/></svg>');
+  border-color: var(--utrecht-checkbox-checked-hover-border-color);
+}
+@mixin utrecht-checkbox--checked--disabled {
+  background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="%23475569"/></svg>') !important;
+}
+
+@mixin utrecht-checkbox--indeterminate--active {
+  background-color: var(--utrecht-checkbox-indeterminate-active-background-color);
+  border-color: var(--utrecht-checkbox-indeterminate-active-border-color);
+}
+
+@mixin utrecht-checkbox--indeterminate--hover {
+  background-color: var(--utrecht-checkbox-indeterminate-hover-background-color);
+  border-color: var(--utrecht-checkbox-indeterminate-hover-border-color);
+}
+
+@mixin utrecht-checkbox--indeterminate--focus {
+  background-color: var(--utrecht-checkbox-indeterminate-focus-background-color);
+  background-image: url('data:image/svg+xml,<svg  width="16" height="4" viewBox="0 0 16 4"   fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1C16 1.55228 15.5523 2 15 2H1C0.447715 2 0 1.55228 0 1Z" fill="%23154273"/></svg>');
+  border-color: var(--utrecht-checkbox-indeterminate-focus-border-color);
+}
+
+@mixin utrecht-checkbox--indeterminate--disabled {
+  background-color: var(--utrecht-checkbox-indeterminate-disabled-background-color);
+  background-image: url('data:image/svg+xml,<svg width="16" height="4" viewBox="0 0 16 4"  fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1C16 1.55228 15.5523 2 15 2H1C0.447715 2 0 1.55228 0 1Z" fill="%23154273"/></svg>');
+  border-color: var(--utrecht-checkbox-indeterminate-disabled-border-color);
+}
+@mixin utrecht-custom-checkbox--html-input {
+  &:checked {
+    @include utrecht-checkbox--checked;
+    &:active {
+      @include utrecht-checkbox--checked--active;
+    }
+    &:hover {
+      @include utrecht-checkbox--checked--hover;
+    }
+    &:disabled {
+      @include utrecht-checkbox--checked--disabled;
+    }
+    &:focus {
+      background-color: var(--utrecht-checkbox-checked-focus-background-color);
+      background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="%23154273"/></svg>') !important;
+      border-color: var(--utrecht-checkbox-checked-focus-border-color);
+      border-width: var(--utrecht-checkbox-checked-focus-border-width);
+    }
+    &:focus-visible {
+      background-color: var(--utrecht-checkbox-checked-focus-background-color);
+      background-image: url('data:image/svg+xml,<svg width="5.5" height="7" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.7071 0.292893C17.0976 0.683417 17.0976 1.31658 16.7071 1.70711L6.70711 11.7071C6.31658 12.0976 5.68342 12.0976 5.29289 11.7071L0.292893 6.70711C-0.0976311 6.31658 -0.0976311 5.68342 0.292893 5.29289C0.683417 4.90237 1.31658 4.90237 1.70711 5.29289L6 9.58579L15.2929 0.292893C15.6834 -0.0976311 16.3166 -0.0976311 16.7071 0.292893Z" fill="%23154273"/></svg>') !important;
+      border-color: var(--utrecht-checkbox-checked-focus-border-color);
+      border-width: var(--utrecht-checkbox-checked-focus-border-width);
+    }
+  }
+}
+@mixin utrecht-checkbox--indeterminate {
+  &:indeterminate,
+  &:checked:indeterminate {
+    background-image: url('data:image/svg+xml,<svg width="16" height="4" viewBox="0 0 16 4"  fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1C16 1.55228 15.5523 2 15 2H1C0.447715 2 0 1.55228 0 1Z" fill="white"/></svg>');
+    background-position: center;
+    background-size: 16px 4px;
+  }
+  &:indeterminate {
+    &:active {
+      @include utrecht-checkbox--indeterminate--active;
+    }
+    &:hover {
+      @include utrecht-checkbox--indeterminate--hover;
+    }
+
+    &:focus {
+      @include utrecht-checkbox--indeterminate--focus;
+    }
+    &:disabled {
+      @include utrecht-checkbox--indeterminate--disabled;
+    }
+  }
+}
diff --git a/packages/components-css/index.scss b/packages/components-css/index.scss
@@ -9,6 +9,7 @@
 @import "blockquote/index";
 @import "breadcrumb-nav/index";
 @import "button/index";
+@import "checkbox/index";
 @import "form-field/index";
 @import "form-field-error-message/index";
 @import "figure/index";

diff --git a/packages/components-react/src/Checkbox.tsx b/packages/components-react/src/Checkbox.tsx
@@ -0,0 +1 @@
+export { Checkbox } from '@utrecht/component-library-react/';
diff --git a/packages/components-react/src/index.ts b/packages/components-react/src/index.ts
@@ -33,6 +33,7 @@ export {
   SecondaryActionButton,
   SubtleButton,
 } from './Button';
+export { Checkbox } from './Checkbox';
 export { Footer } from './Footer';
 export { FormFieldErrorMessage, type FormFieldErrorMessageProps } from './FormFieldErrorMessage';
 export { FormFieldSelect, type FormFieldSelectProps } from './FormFieldSelect';

diff --git a/packages/storybook/config/main.ts b/packages/storybook/config/main.ts
@@ -6,16 +6,16 @@ const config: StorybookConfig = {
   },
   stories: ['../src/**/*stories.@(js|jsx|ts|tsx)', '../src/**/*.mdx'],
   addons: [
+    '@chromatic-com/storybook',
+    '@etchteam/storybook-addon-status',
     '@storybook/addon-a11y',
     '@storybook/addon-actions',
     '@storybook/addon-docs',
     '@storybook/addon-interactions',
     '@storybook/addon-links',
     '@storybook/addon-themes',
     '@storybook/addon-viewport',
-    '@etchteam/storybook-addon-status',
     '@whitespace/storybook-addon-html',
-    '@chromatic-com/storybook',
     'storybook-addon-pseudo-states',
   ],
   framework: '@storybook/react-vite',

diff --git a/packages/storybook/src/community/checkbox.md b/packages/storybook/src/community/checkbox.md
@@ -0,0 +1 @@
+# Checkbox component
diff --git a/packages/storybook/src/community/checkbox.stories.tsx b/packages/storybook/src/community/checkbox.stories.tsx
@@ -0,0 +1,172 @@
+import { Checkbox } from '@rijkshuisstijl-community/components-react';
+import { Meta, StoryObj } from '@storybook/react/*';
+import readme from './checkbox.md?raw';
+
+const meta = {
+  title: 'Rijkshuisstijl/Checkbox',
+  id: 'rijkshuisstijl-checkbox',
+  component: Checkbox,
+  parameters: {
+    docs: {
+      description: {
+        component: readme,
+      },
+    },
+  },
+  argTypes: {
+    checked: {
+      name: 'checked',
+      type: { name: 'boolean', required: false },
+    },
+    disabled: {
+      name: 'disabled',
+      type: { name: 'boolean', required: false },
+    },
+    value: {
+      name: 'value',
+      type: { name: 'string', required: false },
+    },
+  },
+  args: {
+    appearance: 'custom',
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Active: Story = {
+  parameters: {
+    pseudo: { active: true },
+  },
+};
+
+export const Hover: Story = {
+  parameters: {
+    pseudo: { hover: true },
+  },
+};
+
+export const Focus: Story = {
+  parameters: {
+    pseudo: { focus: true },
+  },
+};
+export const FocusVisible: Story = {
+  parameters: {
+    pseudo: { focusVisible: true },
+  },
+};
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Invalid: Story = {
+  args: {
+    invalid: true,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+};
+
+export const CheckedAndActive: Story = {
+  args: {
+    checked: true,
+  },
+  parameters: {
+    pseudo: { active: true },
+  },
+};
+
+export const CheckedAndHover: Story = {
+  args: {
+    checked: true,
+  },
+  parameters: {
+    pseudo: { hover: true },
+  },
+};
+
+export const CheckedAndFocus: Story = {
+  args: {
+    checked: true,
+  },
+  parameters: {
+    pseudo: { focus: true },
+  },
+};
+
+export const CheckedAndFocusVisible: Story = {
+  args: {
+    checked: true,
+  },
+  parameters: {
+    pseudo: { focusVisible: true },
+    controls: { exclude: ['appearance'] },
+  },
+};
+
+export const CheckedAndDisabled: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+  },
+};
+
+export const Indeterminate: Story = {
+  args: {
+    indeterminate: true,
+  },
+};
+
+export const IndeterminateAndActive: Story = {
+  args: {
+    indeterminate: true,
+  },
+  parameters: {
+    pseudo: { active: true },
+  },
+};
+
+export const IndeterminateAndHover: Story = {
+  args: {
+    indeterminate: true,
+  },
+  parameters: {
+    pseudo: { hover: true },
+  },
+};
+
+export const IndeterminateAndFocus: Story = {
+  args: {
+    indeterminate: true,
+  },
+  parameters: {
+    pseudo: { focus: true },
+  },
+};
+
+export const IndeterminateAndFocusVisible: Story = {
+  args: {
+    indeterminate: true,
+  },
+  parameters: {
+    pseudo: { focusVisible: true, focus: true },
+  },
+};
+
+export const IndeterminateAndDisabled: Story = {
+  args: {
+    indeterminate: true,
+    disabled: true,
+  },
+};
diff --git a/proprietary/design-tokens/token-transformer.mjs b/proprietary/design-tokens/token-transformer.mjs
@@ -14,7 +14,6 @@ const init = async ({ input, output }) => {
     'components/avatar',
     'components/backdrop',
     'components/button-group',
-    'components/checkbox',
     'components/checkbox-group',
     'components/counter-badge',
     'components/drawer',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { Checkbox } from '@utrecht/component-library-react/';