aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/molecules/forms/ackee-select.stories.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-06-01 22:37:56 +0200
committerGitHub <noreply@github.com>2022-06-01 22:37:56 +0200
commit0a33a4658d848fe056715c6da053763407845b2a (patch)
tree7c679e54ba4bbadaf0a59bbde780f5742e3b875d /src/components/molecules/forms/ackee-select.stories.tsx
parent97031a86ca38890e60ecec79828498b7bb13cbfa (diff)
parent6be20422494e3806fba3d1c5ad5c3e98bd6e67e5 (diff)
chore(a11y): improve website settings accessibility (#17)
The previous switch buttons (using checkbox) was not a11y compliant. So I change my approach to use radio buttons and to clearly separate the two different states. I also convert the Ackee select setting to improve consistency between settings.
Diffstat (limited to 'src/components/molecules/forms/ackee-select.stories.tsx')
-rw-r--r--src/components/molecules/forms/ackee-select.stories.tsx84
1 files changed, 0 insertions, 84 deletions
diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx
deleted file mode 100644
index 81eb5df..0000000
--- a/src/components/molecules/forms/ackee-select.stories.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import AckeeSelect from './ackee-select';
-
-/**
- * AckeeSelect - Storybook Meta
- */
-export default {
- title: 'Molecules/Forms/Select',
- component: AckeeSelect,
- argTypes: {
- className: {
- control: {
- type: 'text',
- },
- description: 'Set additional classnames to the select wrapper.',
- table: {
- category: 'Styles',
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- initialValue: {
- control: {
- type: 'select',
- },
- description: 'Initial selected option.',
- options: ['full', 'partial'],
- type: {
- name: 'string',
- required: true,
- },
- },
- labelClassName: {
- control: {
- type: 'text',
- },
- description: 'Set additional classnames to the label wrapper.',
- table: {
- category: 'Styles',
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- storageKey: {
- control: {
- type: 'text',
- },
- description: 'Set Ackee settings local storage key.',
- type: {
- name: 'string',
- required: true,
- },
- },
- tooltipClassName: {
- control: {
- type: 'text',
- },
- description: 'Set additional classnames to the tooltip wrapper.',
- table: {
- category: 'Styles',
- },
- type: {
- name: 'string',
- required: false,
- },
- },
- },
-} as ComponentMeta<typeof AckeeSelect>;
-
-const Template: ComponentStory<typeof AckeeSelect> = (args) => (
- <AckeeSelect {...args} />
-);
-
-/**
- * Select Stories - Ackee select
- */
-export const Ackee = Template.bind({});
-Ackee.args = {
- initialValue: 'full',
-};