diff options
Diffstat (limited to 'src/components/organisms')
15 files changed, 170 insertions, 81 deletions
diff --git a/src/components/organisms/forms/settings-form.module.scss b/src/components/organisms/forms/settings-form.module.scss index a05c60c..647f1b5 100644 --- a/src/components/organisms/forms/settings-form.module.scss +++ b/src/components/organisms/forms/settings-form.module.scss @@ -1,26 +1,81 @@ @use "@styles/abstracts/mixins" as mix; -.label { - margin-right: auto; -} +.wrapper { + display: flex; + flex-flow: row wrap; + align-items: flex-start; + align-content: flex-start; -.setting, -.label--select { @include mix.media("screen") { - @include mix.dimensions(null, "2xs") { + @include mix.dimensions(null, "2xs", "height") { + column-gap: var(--spacing-lg); + row-gap: var(--spacing-xs); font-size: var(--font-size-sm); } + } - @include mix.dimensions(null, "2xs", "height") { - font-size: var(--font-size-sm); + .label { + @include mix.media("screen") { + @include mix.dimensions(null, "2xs", "height") { + margin: 0 auto; + float: none; + font-size: var(--font-size-sm); + } + + @include mix.dimensions(null, "2xs") { + //font-size: var(--font-size-sm); + } + } + } + + .tooltip { + top: unset; + bottom: calc(100% + var(--spacing-2xs)); + font-size: var(--font-size-sm); + transform-origin: bottom center; + + @include mix.media("screen") { + @include mix.dimensions(null, "2xs", "height") { + width: 250%; + transform-origin: bottom left; + } + + @include mix.dimensions("sm") { + font-size: var(--font-size-md); + } } } } .items { + margin: var(--spacing-2xs) 0; + + @include mix.media("screen") { + @include mix.dimensions(null, "2xs", "height") { + display: flex; + flex-flow: column wrap; + max-width: fit-content; + margin: 0; + } + } +} + +.group { + margin-left: auto; + + @include mix.media("screen") { + @include mix.dimensions(null, "2xs", "height") { + margin: auto; + } + } +} + +.fieldset__body { + margin-left: auto; + @include mix.media("screen") { @include mix.dimensions(null, "2xs", "height") { - margin: var(--spacing-2xs) 0; + margin: 0 auto; } } } diff --git a/src/components/organisms/forms/settings-form.stories.tsx b/src/components/organisms/forms/settings-form.stories.tsx index 70e1844..de9f769 100644 --- a/src/components/organisms/forms/settings-form.stories.tsx +++ b/src/components/organisms/forms/settings-form.stories.tsx @@ -1,3 +1,5 @@ +import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture'; +import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture'; import { ComponentMeta, ComponentStory } from '@storybook/react'; import SettingsForm from './settings-form'; @@ -65,3 +67,7 @@ const Template: ComponentStory<typeof SettingsForm> = (args) => ( * Form Stories - Settings */ export const Settings = Template.bind({}); +Settings.args = { + ackeeStorageKey, + motionStorageKey, +}; diff --git a/src/components/organisms/forms/settings-form.test.tsx b/src/components/organisms/forms/settings-form.test.tsx index 43d546e..584261d 100644 --- a/src/components/organisms/forms/settings-form.test.tsx +++ b/src/components/organisms/forms/settings-form.test.tsx @@ -1,9 +1,8 @@ +import { storageKey as ackeeStorageKey } from '@components/molecules/forms/ackee-toggle.fixture'; +import { storageKey as motionStorageKey } from '@components/molecules/forms/motion-toggle.fixture'; import { render, screen } from '@test-utils'; import SettingsForm from './settings-form'; -const ackeeStorageKey = 'ackee-tracking'; -const motionStorageKey = 'reduce-motion'; - describe('SettingsForm', () => { it('renders a form', () => { render( @@ -17,7 +16,7 @@ describe('SettingsForm', () => { ).toBeInTheDocument(); }); - it('renders a theme toggle setting', () => { + it('renders a theme setting', () => { render( <SettingsForm ackeeStorageKey={ackeeStorageKey} @@ -25,11 +24,11 @@ describe('SettingsForm', () => { /> ); expect( - screen.getByRole('checkbox', { name: /^Theme:/i }) + screen.getByRole('radiogroup', { name: /^Theme:/i }) ).toBeInTheDocument(); }); - it('renders a code blocks toggle setting', () => { + it('renders a code blocks setting', () => { render( <SettingsForm ackeeStorageKey={ackeeStorageKey} @@ -37,7 +36,7 @@ describe('SettingsForm', () => { /> ); expect( - screen.getByRole('checkbox', { name: /^Code blocks:/i }) + screen.getByRole('radiogroup', { name: /^Code blocks:/i }) ).toBeInTheDocument(); }); @@ -49,7 +48,7 @@ describe('SettingsForm', () => { /> ); expect( - screen.getByRole('checkbox', { name: /^Animations:/i }) + screen.getByRole('radiogroup', { name: /^Animations:/i }) ).toBeInTheDocument(); }); @@ -61,7 +60,7 @@ describe('SettingsForm', () => { /> ); expect( - screen.getByRole('combobox', { name: /^Tracking:/i }) + screen.getByRole('radiogroup', { name: /^Tracking:/i }) ).toBeInTheDocument(); }); }); diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx index 9c2cd2c..5d915a8 100644 --- a/src/components/organisms/forms/settings-form.tsx +++ b/src/components/organisms/forms/settings-form.tsx @@ -1,9 +1,9 @@ import Form from '@components/atoms/forms/form'; -import AckeeSelect, { - type AckeeSelectProps, -} from '@components/molecules/forms/ackee-select'; +import AckeeToggle, { + type AckeeToggleProps, +} from '@components/molecules/forms/ackee-toggle'; import MotionToggle, { - MotionToggleProps, + type MotionToggleProps, } from '@components/molecules/forms/motion-toggle'; import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle'; import ThemeToggle from '@components/molecules/forms/theme-toggle'; @@ -11,11 +11,11 @@ import { FC } from 'react'; import { useIntl } from 'react-intl'; import styles from './settings-form.module.scss'; -export type SettingsFormProps = Pick<AckeeSelectProps, 'tooltipClassName'> & { +export type SettingsFormProps = Pick<AckeeToggleProps, 'tooltipClassName'> & { /** * The local storage key for Ackee settings. */ - ackeeStorageKey: AckeeSelectProps['storageKey']; + ackeeStorageKey: AckeeToggleProps['storageKey']; /** * The local storage key for Reduce motion settings. */ @@ -37,26 +37,34 @@ const SettingsForm: FC<SettingsFormProps> = ({ return ( <Form aria-label={ariaLabel} + className={styles.wrapper} itemsClassName={styles.items} onSubmit={() => null} > - <ThemeToggle className={styles.setting} labelClassName={styles.label} /> + <ThemeToggle + bodyClassName={styles.fieldset__body} + groupClassName={styles.group} + legendClassName={styles.label} + /> <PrismThemeToggle - className={styles.setting} - labelClassName={styles.label} + bodyClassName={styles.fieldset__body} + groupClassName={styles.group} + legendClassName={styles.label} /> <MotionToggle - className={styles.setting} - labelClassName={styles.label} + defaultValue="on" + bodyClassName={styles.fieldset__body} + groupClassName={styles.group} + legendClassName={styles.label} storageKey={motionStorageKey} - value={false} /> - <AckeeSelect - className={styles.setting} - initialValue="full" - labelClassName={`${styles.label} ${styles['label--select']}`} - tooltipClassName={tooltipClassName} + <AckeeToggle + defaultValue="full" + bodyClassName={styles.fieldset__body} + groupClassName={`${styles.group} ${styles['group--ackee']}`} + legendClassName={`${styles.label} ${styles['label--ackee']}`} storageKey={ackeeStorageKey} + tooltipClassName={`${styles.tooltip} ${tooltipClassName}`} /> </Form> ); diff --git a/src/components/organisms/layout/no-results.test.tsx b/src/components/organisms/layout/no-results.test.tsx index 7f57177..97846b1 100644 --- a/src/components/organisms/layout/no-results.test.tsx +++ b/src/components/organisms/layout/no-results.test.tsx @@ -4,7 +4,7 @@ import NoResults from './no-results'; describe('NoResults', () => { it('renders a no results text', () => { render(<NoResults searchPage="#" />); - expect(screen.getByText(/No results/gi)).toBeInTheDocument(); + expect(screen.getByText(/No results/i)).toBeInTheDocument(); }); it('renders a search form', () => { diff --git a/src/components/organisms/modals/settings-modal.module.scss b/src/components/organisms/modals/settings-modal.module.scss index a6a2077..70b786d 100644 --- a/src/components/organisms/modals/settings-modal.module.scss +++ b/src/components/organisms/modals/settings-modal.module.scss @@ -1,11 +1 @@ -@use "@styles/abstracts/mixins" as mix; - -.label { - margin-right: auto; - - @include mix.media("screen") { - @include mix.dimensions(null, "2xs", "height") { - font-size: var(--font-size-sm); - } - } -} +// TODO diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx index 5d14836..34f5619 100644 --- a/src/components/organisms/modals/settings-modal.tsx +++ b/src/components/organisms/modals/settings-modal.tsx @@ -37,12 +37,7 @@ const SettingsModal: FC<SettingsModalProps> = ({ }); return ( - <Modal - title={title} - icon="cogs" - className={`${styles.wrapper} ${className}`} - headingClassName={styles.heading} - > + <Modal title={title} icon="cogs" className={className}> <DynamicSettingsForm {...props} /> </Modal> ); diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx index 831636f..7d6d915 100644 --- a/src/components/organisms/toolbar/main-nav.stories.tsx +++ b/src/components/organisms/toolbar/main-nav.stories.tsx @@ -63,7 +63,15 @@ const Template: ComponentStory<typeof MainNav> = ({ }) => { const [isOpen, setIsOpen] = useState<boolean>(isActive); - return <MainNav isActive={isOpen} setIsActive={setIsOpen} {...args} />; + return ( + <MainNav + isActive={isOpen} + setIsActive={() => { + setIsOpen(!isOpen); + }} + {...args} + /> + ); }; /** diff --git a/src/components/organisms/toolbar/main-nav.tsx b/src/components/organisms/toolbar/main-nav.tsx index d205112..5dd32f7 100644 --- a/src/components/organisms/toolbar/main-nav.tsx +++ b/src/components/organisms/toolbar/main-nav.tsx @@ -1,4 +1,6 @@ -import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; +import BooleanField, { + type BooleanFieldProps, +} from '@components/atoms/forms/boolean-field'; import Label from '@components/atoms/forms/label'; import Hamburger from '@components/atoms/icons/hamburger'; import Nav, { @@ -18,7 +20,7 @@ export type MainNavProps = { /** * The button state. */ - isActive: CheckboxProps['value']; + isActive: BooleanFieldProps['checked']; /** * The main nav items. */ @@ -26,7 +28,7 @@ export type MainNavProps = { /** * A callback function to handle button state. */ - setIsActive: CheckboxProps['setValue']; + setIsActive: BooleanFieldProps['onChange']; }; /** @@ -53,12 +55,14 @@ const MainNav: ForwardRefRenderFunction<HTMLDivElement, MainNavProps> = ( return ( <div className={`${sharedStyles.item} ${mainNavStyles.item}`} ref={ref}> - <Checkbox + <BooleanField + checked={isActive} + className={`${sharedStyles.checkbox} ${mainNavStyles.checkbox}`} id="main-nav-button" name="main-nav-button" - value={isActive} - setValue={setIsActive} - className={`${sharedStyles.checkbox} ${mainNavStyles.checkbox}`} + onChange={setIsActive} + type="checkbox" + value="open" /> <Label htmlFor="main-nav-button" diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx index f0f65b4..4baf0bf 100644 --- a/src/components/organisms/toolbar/search.stories.tsx +++ b/src/components/organisms/toolbar/search.stories.tsx @@ -68,7 +68,15 @@ const Template: ComponentStory<typeof Search> = ({ }) => { const [isOpen, setIsOpen] = useState<boolean>(isActive); - return <Search isActive={isOpen} setIsActive={setIsOpen} {...args} />; + return ( + <Search + isActive={isOpen} + setIsActive={() => { + setIsOpen(!isOpen); + }} + {...args} + /> + ); }; /** diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx index 6a8af26..2d4b6b5 100644 --- a/src/components/organisms/toolbar/search.tsx +++ b/src/components/organisms/toolbar/search.tsx @@ -1,4 +1,6 @@ -import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; +import BooleanField, { + type BooleanFieldProps, +} from '@components/atoms/forms/boolean-field'; import MagnifyingGlass from '@components/atoms/icons/magnifying-glass'; import FlippingLabel from '@components/molecules/forms/flipping-label'; import useInputAutofocus from '@utils/hooks/use-input-autofocus'; @@ -16,7 +18,7 @@ export type SearchProps = { /** * The button state. */ - isActive: CheckboxProps['value']; + isActive: BooleanFieldProps['checked']; /** * A callback function to execute search. */ @@ -24,7 +26,7 @@ export type SearchProps = { /** * A callback function to handle button state. */ - setIsActive: CheckboxProps['setValue']; + setIsActive: BooleanFieldProps['onChange']; }; const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = ( @@ -53,12 +55,14 @@ const Search: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = ( return ( <div className={`${sharedStyles.item} ${searchStyles.item}`} ref={ref}> - <Checkbox + <BooleanField + checked={isActive} + className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`} id="search-button" name="search-button" - value={isActive} - setValue={setIsActive} - className={`${sharedStyles.checkbox} ${searchStyles.checkbox}`} + onChange={setIsActive} + type="checkbox" + value="open" /> <FlippingLabel className={sharedStyles.label} diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx index 08ec579..20d0b4d 100644 --- a/src/components/organisms/toolbar/settings.stories.tsx +++ b/src/components/organisms/toolbar/settings.stories.tsx @@ -92,7 +92,15 @@ const Template: ComponentStory<typeof Settings> = ({ }) => { const [isOpen, setIsOpen] = useState<boolean>(isActive); - return <Settings isActive={isOpen} setIsActive={setIsOpen} {...args} />; + return ( + <Settings + isActive={isOpen} + setIsActive={() => { + setIsOpen(!isOpen); + }} + {...args} + /> + ); }; /** diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx index ceb6db4..0e7daa2 100644 --- a/src/components/organisms/toolbar/settings.tsx +++ b/src/components/organisms/toolbar/settings.tsx @@ -1,4 +1,6 @@ -import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox'; +import BooleanField, { + type BooleanFieldProps, +} from '@components/atoms/forms/boolean-field'; import Cog from '@components/atoms/icons/cog'; import FlippingLabel from '@components/molecules/forms/flipping-label'; import { forwardRef, ForwardRefRenderFunction } from 'react'; @@ -13,11 +15,11 @@ export type SettingsProps = SettingsModalProps & { /** * The button state. */ - isActive: CheckboxProps['value']; + isActive: BooleanFieldProps['checked']; /** * A callback function to handle button state. */ - setIsActive: CheckboxProps['setValue']; + setIsActive: BooleanFieldProps['onChange']; }; const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = ( @@ -46,12 +48,14 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = ( return ( <div className={`${sharedStyles.item} ${settingsStyles.item}`} ref={ref}> - <Checkbox + <BooleanField + checked={isActive} + className={`${sharedStyles.checkbox} ${settingsStyles.checkbox}`} id="settings-button" name="settings-button" - value={isActive} - setValue={setIsActive} - className={`${sharedStyles.checkbox} ${settingsStyles.checkbox}`} + onChange={setIsActive} + type="checkbox" + value="open" /> <FlippingLabel className={sharedStyles.label} diff --git a/src/components/organisms/toolbar/toolbar.module.scss b/src/components/organisms/toolbar/toolbar.module.scss index 4bcabcb..ca9cd33 100644 --- a/src/components/organisms/toolbar/toolbar.module.scss +++ b/src/components/organisms/toolbar/toolbar.module.scss @@ -40,7 +40,7 @@ &--settings { @include mix.media("screen") { @include mix.dimensions("sm") { - min-width: 35ch; + min-width: 32ch; } } } diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx index ee61a7b..c18b8ea 100644 --- a/src/components/organisms/toolbar/toolbar.tsx +++ b/src/components/organisms/toolbar/toolbar.tsx @@ -50,14 +50,14 @@ const Toolbar: FC<ToolbarProps> = ({ <MainNav items={nav} isActive={isNavOpened} - setIsActive={setIsNavOpened} + setIsActive={() => setIsNavOpened(!isNavOpened)} className={styles.modal} ref={mainNavRef} /> <Search searchPage={searchPage} isActive={isSearchOpened} - setIsActive={setIsSearchOpened} + setIsActive={() => setIsSearchOpened(!isSearchOpened)} className={`${styles.modal} ${styles['modal--search']}`} ref={searchRef} /> @@ -67,7 +67,7 @@ const Toolbar: FC<ToolbarProps> = ({ isActive={isSettingsOpened} motionStorageKey={motionStorageKey} ref={settingsRef} - setIsActive={setIsSettingsOpened} + setIsActive={() => setIsSettingsOpened(!isSettingsOpened)} tooltipClassName={styles.tooltip} /> </div> |