diff options
Diffstat (limited to 'src/components/molecules')
12 files changed, 105 insertions, 7 deletions
diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx index 6b42b71..81eb5df 100644 --- a/src/components/molecules/forms/ackee-select.stories.tsx +++ b/src/components/molecules/forms/ackee-select.stories.tsx @@ -8,6 +8,19 @@ 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', diff --git a/src/components/molecules/forms/ackee-select.tsx b/src/components/molecules/forms/ackee-select.tsx index 34850fb..f00ca74 100644 --- a/src/components/molecules/forms/ackee-select.tsx +++ b/src/components/molecules/forms/ackee-select.tsx @@ -11,7 +11,7 @@ import SelectWithTooltip, { export type AckeeSelectProps = Pick< SelectWithTooltipProps, - 'labelClassName' | 'tooltipClassName' + 'className' | 'labelClassName' | 'tooltipClassName' > & { /** * A default value for Ackee settings. diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx index 60430d5..e9939bd 100644 --- a/src/components/molecules/forms/motion-toggle.stories.tsx +++ b/src/components/molecules/forms/motion-toggle.stories.tsx @@ -8,6 +8,19 @@ export default { title: 'Molecules/Forms/Toggle', component: MotionToggleComponent, argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the toggle wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, labelClassName: { control: { type: 'text', diff --git a/src/components/molecules/forms/motion-toggle.tsx b/src/components/molecules/forms/motion-toggle.tsx index cbe38fe..55ff150 100644 --- a/src/components/molecules/forms/motion-toggle.tsx +++ b/src/components/molecules/forms/motion-toggle.tsx @@ -9,7 +9,7 @@ import { useIntl } from 'react-intl'; export type MotionToggleProps = Pick< ToggleProps, - 'labelClassName' | 'value' + 'className' | 'labelClassName' | 'value' > & { /** * The local storage key to save preference. diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx index ef4ed6e..6a88e51 100644 --- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx @@ -8,6 +8,19 @@ export default { title: 'Molecules/Forms/Toggle', component: PrismThemeToggle, argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the toggle wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, labelClassName: { control: { type: 'text', diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx index 3320722..e0b795f 100644 --- a/src/components/molecules/forms/prism-theme-toggle.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.tsx @@ -8,7 +8,10 @@ import { usePrismTheme } from '@utils/providers/prism-theme'; import { FC } from 'react'; import { useIntl } from 'react-intl'; -export type PrismThemeToggleProps = Pick<ToggleProps, 'labelClassName'>; +export type PrismThemeToggleProps = Pick< + ToggleProps, + 'className' | 'labelClassName' +>; /** * PrismThemeToggle component diff --git a/src/components/molecules/forms/select-with-tooltip.stories.tsx b/src/components/molecules/forms/select-with-tooltip.stories.tsx index ddf5d4c..d6206a9 100644 --- a/src/components/molecules/forms/select-with-tooltip.stories.tsx +++ b/src/components/molecules/forms/select-with-tooltip.stories.tsx @@ -9,6 +9,19 @@ export default { title: 'Molecules/Forms/Select', component: SelectWithTooltip, argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the select wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, content: { control: { type: 'text', diff --git a/src/components/molecules/forms/select-with-tooltip.tsx b/src/components/molecules/forms/select-with-tooltip.tsx index 29e2563..46075c2 100644 --- a/src/components/molecules/forms/select-with-tooltip.tsx +++ b/src/components/molecules/forms/select-with-tooltip.tsx @@ -11,6 +11,10 @@ export type SelectWithTooltipProps = Omit< > & Pick<TooltipProps, 'title' | 'content'> & { /** + * Set additional classnames to the select wrapper. + */ + className?: string; + /** * Set additional classnames to the tooltip wrapper. */ tooltipClassName?: TooltipProps['className']; @@ -22,9 +26,10 @@ export type SelectWithTooltipProps = Omit< * Render a select with a button to display a tooltip about options. */ const SelectWithTooltip: FC<SelectWithTooltipProps> = ({ - title, + className = '', content, id, + title, tooltipClassName = '', ...props }) => { @@ -47,7 +52,7 @@ const SelectWithTooltip: FC<SelectWithTooltipProps> = ({ ); return ( - <div className={styles.wrapper}> + <div className={`${styles.wrapper} ${className}`}> <LabelledSelect labelPosition="left" id={id} diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx index 5ebf5a2..a7bebb4 100644 --- a/src/components/molecules/forms/theme-toggle.stories.tsx +++ b/src/components/molecules/forms/theme-toggle.stories.tsx @@ -8,6 +8,19 @@ export default { title: 'Molecules/Forms/Toggle', component: ThemeToggle, argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the toggle wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, labelClassName: { control: { type: 'text', diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx index 61ee4c6..e9dd5e4 100644 --- a/src/components/molecules/forms/theme-toggle.tsx +++ b/src/components/molecules/forms/theme-toggle.tsx @@ -8,7 +8,10 @@ import { useTheme } from 'next-themes'; import { FC } from 'react'; import { useIntl } from 'react-intl'; -export type ThemeToggleProps = Pick<ToggleProps, 'labelClassName'>; +export type ThemeToggleProps = Pick< + ToggleProps, + 'className' | 'labelClassName' +>; /** * ThemeToggle component diff --git a/src/components/molecules/forms/toggle.stories.tsx b/src/components/molecules/forms/toggle.stories.tsx index 0351ab7..f1b8296 100644 --- a/src/components/molecules/forms/toggle.stories.tsx +++ b/src/components/molecules/forms/toggle.stories.tsx @@ -17,6 +17,19 @@ export default { value: {}, }, }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the toggle wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, id: { control: { type: 'text', diff --git a/src/components/molecules/forms/toggle.tsx b/src/components/molecules/forms/toggle.tsx index 288062d..0fac45c 100644 --- a/src/components/molecules/forms/toggle.tsx +++ b/src/components/molecules/forms/toggle.tsx @@ -20,6 +20,10 @@ export type ToggleProps = Pick<CheckboxProps, 'id' | 'name'> & { */ choices: ToggleChoices; /** + * Set additional classnames to the toggle wrapper. + */ + className?: string; + /** * The toggle label. */ label: string; @@ -48,6 +52,7 @@ export type ToggleProps = Pick<CheckboxProps, 'id' | 'name'> & { */ const Toggle: FC<ToggleProps> = ({ choices, + className = '', id, label, labelClassName = '', @@ -65,7 +70,11 @@ const Toggle: FC<ToggleProps> = ({ setValue={() => setValue(!value)} className={styles.checkbox} /> - <Label size={labelSize} htmlFor={id} className={styles.label}> + <Label + size={labelSize} + htmlFor={id} + className={`${styles.label} ${className}`} + > <span className={`${styles.title} ${labelClassName}`}>{label}</span> {choices.left} <span className={styles.toggle}></span> |