diff options
Diffstat (limited to 'src/components/molecules/forms')
11 files changed, 69 insertions, 15 deletions
diff --git a/src/components/molecules/forms/ackee-toggle.stories.tsx b/src/components/molecules/forms/ackee-toggle.stories.tsx index bbc6fb4..3f3f11e 100644 --- a/src/components/molecules/forms/ackee-toggle.stories.tsx +++ b/src/components/molecules/forms/ackee-toggle.stories.tsx @@ -22,6 +22,19 @@ export default { required: false, }, }, + buttonClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the help button.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, className: { control: { type: 'text', diff --git a/src/components/molecules/forms/ackee-toggle.tsx b/src/components/molecules/forms/ackee-toggle.tsx index a666731..67a3644 100644 --- a/src/components/molecules/forms/ackee-toggle.tsx +++ b/src/components/molecules/forms/ackee-toggle.tsx @@ -14,7 +14,11 @@ import Tooltip, { type TooltipProps } from '../modals/tooltip'; export type AckeeToggleProps = Pick< RadioGroupProps, - 'bodyClassName' | 'groupClassName' | 'legendClassName' + | 'bodyClassName' + | 'buttonClassName' + | 'groupClassName' + | 'legendClassName' + | 'legendPosition' > & { /** * Set additional classnames to the toggle wrapper. diff --git a/src/components/molecules/forms/fieldset.module.scss b/src/components/molecules/forms/fieldset.module.scss index 3102bf7..38327b4 100644 --- a/src/components/molecules/forms/fieldset.module.scss +++ b/src/components/molecules/forms/fieldset.module.scss @@ -5,12 +5,12 @@ font-weight: 600; &#{&}--has-tooltip { - padding: 0 var(--spacing-xs) 0 0; + margin: 0 var(--spacing-2xs) 0 0; } } .btn { - margin: 0 var(--spacing-2xs) var(--spacing-2xs) 0; + margin: 0 var(--spacing-xs) var(--spacing-2xs) 0; &--activated { background: var(--color-primary); diff --git a/src/components/molecules/forms/fieldset.stories.tsx b/src/components/molecules/forms/fieldset.stories.tsx index 0778094..85aeb7f 100644 --- a/src/components/molecules/forms/fieldset.stories.tsx +++ b/src/components/molecules/forms/fieldset.stories.tsx @@ -1,6 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { TooltipProps } from '../modals/tooltip'; -import { Help } from '../modals/tooltip.stories'; import FieldsetComponent from './fieldset'; import { body, legend, Tooltip } from './fieldset.fixture'; @@ -8,7 +6,7 @@ import { body, legend, Tooltip } from './fieldset.fixture'; * Fieldset - Storybook Meta */ export default { - title: 'Atoms/Forms/Fieldset', + title: 'Molecules/Forms/Fieldset', component: FieldsetComponent, args: { legendPosition: 'stacked', @@ -28,6 +26,19 @@ export default { required: false, }, }, + buttonClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the help button.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, children: { control: { type: null, diff --git a/src/components/molecules/forms/fieldset.tsx b/src/components/molecules/forms/fieldset.tsx index dae3ead..961ec6d 100644 --- a/src/components/molecules/forms/fieldset.tsx +++ b/src/components/molecules/forms/fieldset.tsx @@ -17,6 +17,10 @@ export type FieldsetProps = { */ bodyClassName?: string; /** + * Set additional classnames to the help button. + */ + buttonClassName?: string; + /** * The fieldset body. */ children: ReactNode | ReactNode[]; @@ -57,6 +61,7 @@ export type FieldsetProps = { */ const Fieldset: FC<FieldsetProps> = ({ bodyClassName = '', + buttonClassName = '', children, className = '', legend, @@ -102,7 +107,7 @@ const Fieldset: FC<FieldsetProps> = ({ <> <HelpButton aria-pressed={isTooltipOpened} - className={`${styles.btn} ${buttonModifier}`} + className={`${styles.btn} ${buttonModifier} ${buttonClassName}`} onClick={() => setIsTooltipOpened(!isTooltipOpened)} ref={buttonRef} /> diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx index ec2d950..ad47b33 100644 --- a/src/components/molecules/forms/motion-toggle.tsx +++ b/src/components/molecules/forms/motion-toggle.tsx @@ -13,7 +13,7 @@ export type MotionToggleValue = 'on' | 'off'; export type MotionToggleProps = Pick< RadioGroupProps, - 'bodyClassName' | 'groupClassName' | 'legendClassName' + 'bodyClassName' | 'groupClassName' | 'legendClassName' | 'legendPosition' > & { /** * True if motion should be reduced by default. @@ -41,7 +41,8 @@ const MotionToggle: FC<MotionToggleProps> = ({ defaultValue === 'on' ? false : true ); useAttributes({ - element: document.documentElement || undefined, + element: + typeof window !== 'undefined' ? document.documentElement : undefined, attribute: 'reduced-motion', value: `${isReduced}`, }); diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx index 0fd9f54..5a4d8a9 100644 --- a/src/components/molecules/forms/prism-theme-toggle.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.tsx @@ -12,7 +12,7 @@ import RadioGroup, { export type PrismThemeToggleProps = Pick< RadioGroupProps, - 'bodyClassName' | 'groupClassName' | 'legendClassName' + 'bodyClassName' | 'groupClassName' | 'legendClassName' | 'legendPosition' >; /** diff --git a/src/components/molecules/forms/radio-group.module.scss b/src/components/molecules/forms/radio-group.module.scss index 0bd34b9..f363d1b 100644 --- a/src/components/molecules/forms/radio-group.module.scss +++ b/src/components/molecules/forms/radio-group.module.scss @@ -2,9 +2,9 @@ @use "@styles/abstracts/mixins" as mix; .wrapper { - &--inline#{&}--regular { - .option:first-of-type { - margin-left: var(--spacing-2xs); + &--inline { + .legend { + margin-right: var(--spacing-2xs); } } diff --git a/src/components/molecules/forms/radio-group.stories.tsx b/src/components/molecules/forms/radio-group.stories.tsx index ad1bd6d..de5da7c 100644 --- a/src/components/molecules/forms/radio-group.stories.tsx +++ b/src/components/molecules/forms/radio-group.stories.tsx @@ -26,6 +26,19 @@ export default { required: false, }, }, + buttonClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the help button.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, className: { control: { type: 'text', diff --git a/src/components/molecules/forms/radio-group.tsx b/src/components/molecules/forms/radio-group.tsx index 134829f..3930908 100644 --- a/src/components/molecules/forms/radio-group.tsx +++ b/src/components/molecules/forms/radio-group.tsx @@ -25,7 +25,12 @@ export type RadioGroupOption = Pick< export type RadioGroupProps = Pick< FieldsetProps, - 'bodyClassName' | 'className' | 'legend' | 'legendClassName' | 'Tooltip' + | 'bodyClassName' + | 'buttonClassName' + | 'className' + | 'legend' + | 'legendClassName' + | 'Tooltip' > & Pick<LabelledBooleanFieldProps, 'labelPosition' | 'labelSize'> & { /** @@ -78,6 +83,7 @@ const RadioGroup: FC<RadioGroupProps> = ({ kind = 'regular', labelPosition, labelSize, + legendClassName, legendPosition = 'inline', onChange, optionClassName = '', @@ -134,6 +140,7 @@ const RadioGroup: FC<RadioGroupProps> = ({ return ( <Fieldset className={`${styles.wrapper} ${styles[alignmentModifier]} ${styles[toggleModifier]} ${className}`} + legendClassName={`${styles.legend} ${legendClassName}`} legendPosition={legendPosition} role="radiogroup" {...props} diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx index 1c6481a..6a676a9 100644 --- a/src/components/molecules/forms/theme-toggle.tsx +++ b/src/components/molecules/forms/theme-toggle.tsx @@ -12,7 +12,7 @@ import RadioGroup, { export type ThemeToggleProps = Pick< RadioGroupProps, - 'bodyClassName' | 'groupClassName' | 'legendClassName' + 'bodyClassName' | 'groupClassName' | 'legendClassName' | 'legendPosition' >; /** |