Merge pull request #11 from Opetushallitus/OK-656

OK-656: OphCheckbox-komponentti

.storybook/main.ts

@@ -8,6 +8,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
+    'storybook-addon-pseudo-states',
   ],
 
   framework: {

example/package.json

@@ -20,7 +20,7 @@
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^6.1.0",
     "@mui/material-nextjs": "^6.1.0",
-    "@opetushallitus/oph-design-system": "file:../pkg/opetushallitus-oph-design-system-0.1.1.tgz",
+    "@opetushallitus/oph-design-system": "file:../pkg/opetushallitus-oph-design-system-0.1.2.tgz",
     "next": "14.2.10",
     "next-intl": "^3.19.1",
     "react": "^18",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/oph-design-system",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "",
   "type": "module",
   "exports": {
@@ -62,6 +62,7 @@
     "prettier": "^3.3.3",
     "start-server-and-test": "^2.0.7",
     "storybook": "^8.3.0",
+    "storybook-addon-pseudo-states": "^4.0.2",
     "tsup": "^8.2.4",
     "typescript": "^5.6.2",
     "typescript-eslint": "^8.5.0",

src/OphCheckbox.stories.tsx

@@ -0,0 +1,128 @@
+import { within } from '@storybook/test';
+import { OphCheckbox } from './OphCheckbox';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  component: OphCheckbox,
+} satisfies Meta<typeof OphCheckbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof OphCheckbox>;
+
+export const Default: Story = {
+  args: {
+    label: 'Otsake',
+  },
+};
+
+export const DefaultRequired: Story = {
+  args: { ...Default.args, required: true },
+};
+
+export const DefaultHovered: Story = {
+  args: Default.args,
+  parameters: {
+    pseudo: { hover: true },
+  },
+};
+
+export const DefaultFocused: Story = {
+  args: Default.args,
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkboxes = canvas.getAllByRole('checkbox');
+    for (const checkbox of checkboxes) {
+      checkbox.focus();
+    }
+  },
+};
+
+export const DefaultDisabled: Story = {
+  args: { ...Default.args, disabled: true },
+};
+
+export const DefaultError: Story = {
+  args: { ...Default.args, error: true },
+};
+
+export const Indeterminate: Story = {
+  args: { ...Default.args, indeterminate: true },
+};
+
+export const IndeterminateRequired: Story = {
+  args: { ...Indeterminate.args, required: true },
+};
+
+export const IndeterminateFocused: Story = {
+  ...DefaultFocused,
+  args: Indeterminate.args,
+};
+
+export const IndeterminateHovered: Story = {
+  ...DefaultHovered,
+  args: Indeterminate.args,
+};
+
+export const IndeterminateDisabled: Story = {
+  args: { ...Indeterminate.args, disabled: true },
+};
+
+export const IndeterminateError: Story = {
+  ...Indeterminate,
+  args: { ...Indeterminate.args, error: true },
+};
+
+export const Checked: Story = {
+  args: { ...Default.args, checked: true },
+};
+
+export const CheckedRequired: Story = {
+  args: { ...Checked.args, required: true },
+};
+
+export const CheckedFocused: Story = {
+  ...DefaultFocused,
+  args: Checked.args,
+};
+
+export const CheckedHovered: Story = {
+  ...DefaultHovered,
+  args: Checked.args,
+};
+
+export const CheckedDisabled: Story = {
+  args: { ...Checked.args, disabled: true },
+};
+
+export const CheckedError: Story = {
+  args: { ...Checked.args, error: true },
+};
+
+export const WithoutLabel: Story = {
+  args: {
+    ...Default.args,
+    label: undefined,
+    inputProps: { 'aria-label': 'Otsake' },
+  },
+};
+
+export const WithoutLabelFocused: Story = {
+  ...DefaultFocused,
+  args: WithoutLabel.args,
+};
+
+export const WithoutLabelHovered: Story = {
+  ...DefaultHovered,
+  args: WithoutLabel.args,
+};
+
+export const WithoutLabelDisabled: Story = {
+  ...DefaultDisabled,
+  args: { ...WithoutLabel.args, disabled: true },
+};
+
+export const WithoutLabelError: Story = {
+  ...DefaultError,
+  args: { ...WithoutLabel.args, error: true },
+};

src/OphCheckbox.tsx

@@ -0,0 +1,44 @@
+import {
+  Checkbox,
+  FormControlLabel,
+  type CheckboxProps,
+  type FormControlLabelProps,
+} from '@mui/material';
+import React, { forwardRef } from 'react';
+
+export type OphCheckboxProps = Omit<
+  CheckboxProps,
+  | 'centerRipple'
+  | 'checkedIcon'
+  | 'disableRipple'
+  | 'icon'
+  | 'indeterminateIcon'
+  | 'size'
+  | 'LinkComponent'
+> & {
+  formControlLabelProps?: Omit<FormControlLabelProps, 'label' | 'control'>;
+  label?: React.ReactNode;
+  error?: boolean;
+};
+
+export const OphCheckbox = forwardRef<HTMLButtonElement, OphCheckboxProps>(
+  function renderCheckbox(
+    { label, error, formControlLabelProps, ...props },
+    ref,
+  ) {
+    const checkboxProps = {
+      ...props,
+      color: error ? 'error' : props.color,
+      ref,
+    };
+    return label ? (
+      <FormControlLabel
+        {...formControlLabelProps}
+        label={label}
+        control={<Checkbox {...checkboxProps} />}
+      />
+    ) : (
+      <Checkbox {...checkboxProps} />
+    );
+  },
+);

src/index.ts

@@ -1,6 +1,7 @@
 export { OphButton } from './OphButton';
-export { OphTypography } from './OphTypography';
+export { OphCheckbox } from './OphCheckbox';
 export { OphSelect } from './OphSelect';
+export { OphTypography } from './OphTypography';
 export { ophColors } from './colors';
 
 export type { OphThemeParams, OphThemeVariant, OphLanguage } from './types';