summaryrefslogtreecommitdiffstats
path: root/src/components/organisms
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/organisms')
-rw-r--r--src/components/organisms/forms/settings-form.test.tsx38
-rw-r--r--src/components/organisms/forms/settings-form.tsx32
-rw-r--r--src/components/organisms/layout/header.stories.tsx22
-rw-r--r--src/components/organisms/layout/header.test.tsx19
-rw-r--r--src/components/organisms/layout/header.tsx22
-rw-r--r--src/components/organisms/modals/search-modal.tsx1
-rw-r--r--src/components/organisms/modals/settings-modal.test.tsx7
-rw-r--r--src/components/organisms/modals/settings-modal.tsx6
-rw-r--r--src/components/organisms/toolbar/settings.stories.tsx24
-rw-r--r--src/components/organisms/toolbar/settings.test.tsx18
-rw-r--r--src/components/organisms/toolbar/settings.tsx22
-rw-r--r--src/components/organisms/toolbar/toolbar-items.module.scss2
-rw-r--r--src/components/organisms/toolbar/toolbar.stories.tsx22
-rw-r--r--src/components/organisms/toolbar/toolbar.test.tsx9
-rw-r--r--src/components/organisms/toolbar/toolbar.tsx37
15 files changed, 236 insertions, 45 deletions
diff --git a/src/components/organisms/forms/settings-form.test.tsx b/src/components/organisms/forms/settings-form.test.tsx
index beb65ec..43d546e 100644
--- a/src/components/organisms/forms/settings-form.test.tsx
+++ b/src/components/organisms/forms/settings-form.test.tsx
@@ -1,37 +1,65 @@
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(<SettingsForm />);
+ render(
+ <SettingsForm
+ ackeeStorageKey={ackeeStorageKey}
+ motionStorageKey={motionStorageKey}
+ />
+ );
expect(
screen.getByRole('form', { name: /^Settings form/i })
).toBeInTheDocument();
});
it('renders a theme toggle setting', () => {
- render(<SettingsForm />);
+ render(
+ <SettingsForm
+ ackeeStorageKey={ackeeStorageKey}
+ motionStorageKey={motionStorageKey}
+ />
+ );
expect(
screen.getByRole('checkbox', { name: /^Theme:/i })
).toBeInTheDocument();
});
it('renders a code blocks toggle setting', () => {
- render(<SettingsForm />);
+ render(
+ <SettingsForm
+ ackeeStorageKey={ackeeStorageKey}
+ motionStorageKey={motionStorageKey}
+ />
+ );
expect(
screen.getByRole('checkbox', { name: /^Code blocks:/i })
).toBeInTheDocument();
});
it('renders a motion setting', () => {
- render(<SettingsForm />);
+ render(
+ <SettingsForm
+ ackeeStorageKey={ackeeStorageKey}
+ motionStorageKey={motionStorageKey}
+ />
+ );
expect(
screen.getByRole('checkbox', { name: /^Animations:/i })
).toBeInTheDocument();
});
it('renders a Ackee setting', () => {
- render(<SettingsForm />);
+ render(
+ <SettingsForm
+ ackeeStorageKey={ackeeStorageKey}
+ motionStorageKey={motionStorageKey}
+ />
+ );
expect(
screen.getByRole('combobox', { name: /^Tracking:/i })
).toBeInTheDocument();
diff --git a/src/components/organisms/forms/settings-form.tsx b/src/components/organisms/forms/settings-form.tsx
index 0a34601..c897fa5 100644
--- a/src/components/organisms/forms/settings-form.tsx
+++ b/src/components/organisms/forms/settings-form.tsx
@@ -2,16 +2,31 @@ import Form from '@components/atoms/forms/form';
import AckeeSelect, {
type AckeeSelectProps,
} from '@components/molecules/forms/ackee-select';
-import MotionToggle from '@components/molecules/forms/motion-toggle';
+import MotionToggle, {
+ MotionToggleProps,
+} from '@components/molecules/forms/motion-toggle';
import PrismThemeToggle from '@components/molecules/forms/prism-theme-toggle';
import ThemeToggle from '@components/molecules/forms/theme-toggle';
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<AckeeSelectProps, 'tooltipClassName'> & {
+ /**
+ * The local storage key for Ackee settings.
+ */
+ ackeeStorageKey: AckeeSelectProps['storageKey'];
+ /**
+ * The local storage key for Reduce motion settings.
+ */
+ motionStorageKey: MotionToggleProps['storageKey'];
+};
-const SettingsForm: FC<SettingsFormProps> = ({ tooltipClassName }) => {
+const SettingsForm: FC<SettingsFormProps> = ({
+ ackeeStorageKey,
+ motionStorageKey,
+ tooltipClassName,
+}) => {
const intl = useIntl();
const ariaLabel = intl.formatMessage({
defaultMessage: 'Settings form',
@@ -21,13 +36,18 @@ const SettingsForm: FC<SettingsFormProps> = ({ tooltipClassName }) => {
return (
<Form aria-label={ariaLabel} onSubmit={() => null}>
- <ThemeToggle labelClassName={styles.label} value={false} />
- <PrismThemeToggle labelClassName={styles.label} value={false} />
- <MotionToggle labelClassName={styles.label} value={false} />
+ <ThemeToggle labelClassName={styles.label} />
+ <PrismThemeToggle labelClassName={styles.label} />
+ <MotionToggle
+ labelClassName={styles.label}
+ storageKey={motionStorageKey}
+ value={false}
+ />
<AckeeSelect
initialValue="full"
labelClassName={styles.label}
tooltipClassName={tooltipClassName}
+ storageKey={ackeeStorageKey}
/>
</Form>
);
diff --git a/src/components/organisms/layout/header.stories.tsx b/src/components/organisms/layout/header.stories.tsx
index 98d6377..3ceb337 100644
--- a/src/components/organisms/layout/header.stories.tsx
+++ b/src/components/organisms/layout/header.stories.tsx
@@ -8,11 +8,23 @@ export default {
title: 'Organisms/Layout',
component: HeaderComponent,
args: {
+ ackeeStorageKey: 'ackee-tracking',
isHome: false,
+ motionStorageKey: 'reduced-motion',
searchPage: '#',
withLink: false,
},
argTypes: {
+ ackeeStorageKey: {
+ control: {
+ type: 'text',
+ },
+ description: 'Set Ackee settings local storage key.',
+ type: {
+ name: 'string',
+ required: true,
+ },
+ },
baseline: {
control: {
type: 'text',
@@ -52,6 +64,16 @@ export default {
required: false,
},
},
+ motionStorageKey: {
+ control: {
+ type: 'text',
+ },
+ description: 'Set Reduced motion settings local storage key.',
+ type: {
+ name: 'string',
+ required: true,
+ },
+ },
nav: {
description: 'The main navigation items.',
type: {
diff --git a/src/components/organisms/layout/header.test.tsx b/src/components/organisms/layout/header.test.tsx
index a9896f8..414d96f 100644
--- a/src/components/organisms/layout/header.test.tsx
+++ b/src/components/organisms/layout/header.test.tsx
@@ -16,11 +16,13 @@ describe('Header', () => {
it('renders the website title', () => {
render(
<Header
+ ackeeStorageKey="ackee-tracking"
+ isHome={true}
+ motionStorageKey="reduced-motion"
+ nav={nav}
+ photo={photo}
searchPage="#"
title={title}
- photo={photo}
- nav={nav}
- isHome={true}
/>
);
expect(
@@ -29,7 +31,16 @@ describe('Header', () => {
});
it('renders the main nav', () => {
- render(<Header searchPage="#" title={title} photo={photo} nav={nav} />);
+ render(
+ <Header
+ ackeeStorageKey="ackee-tracking"
+ motionStorageKey="reduced-motion"
+ nav={nav}
+ photo={photo}
+ searchPage="#"
+ title={title}
+ />
+ );
expect(screen.getByRole('navigation')).toBeInTheDocument();
});
});
diff --git a/src/components/organisms/layout/header.tsx b/src/components/organisms/layout/header.tsx
index 18ebb31..f6212c3 100644
--- a/src/components/organisms/layout/header.tsx
+++ b/src/components/organisms/layout/header.tsx
@@ -6,7 +6,10 @@ import Toolbar, { type ToolbarProps } from '../toolbar/toolbar';
import styles from './header.module.scss';
export type HeaderProps = BrandingProps &
- Pick<ToolbarProps, 'nav' | 'searchPage'> & {
+ Pick<
+ ToolbarProps,
+ 'ackeeStorageKey' | 'motionStorageKey' | 'nav' | 'searchPage'
+ > & {
/**
* Set additional classnames to the header element.
*/
@@ -18,12 +21,25 @@ export type HeaderProps = BrandingProps &
*
* Render the website header.
*/
-const Header: FC<HeaderProps> = ({ className, nav, searchPage, ...props }) => {
+const Header: FC<HeaderProps> = ({
+ ackeeStorageKey,
+ className,
+ motionStorageKey,
+ nav,
+ searchPage,
+ ...props
+}) => {
return (
<header className={`${styles.wrapper} ${className}`}>
<div className={styles.body}>
<Branding {...props} />
- <Toolbar nav={nav} searchPage={searchPage} className={styles.toolbar} />
+ <Toolbar
+ ackeeStorageKey={ackeeStorageKey}
+ className={styles.toolbar}
+ motionStorageKey={motionStorageKey}
+ nav={nav}
+ searchPage={searchPage}
+ />
</div>
</header>
);
diff --git a/src/components/organisms/modals/search-modal.tsx b/src/components/organisms/modals/search-modal.tsx
index e92bf1b..c731048 100644
--- a/src/components/organisms/modals/search-modal.tsx
+++ b/src/components/organisms/modals/search-modal.tsx
@@ -10,6 +10,7 @@ const DynamicSearchForm = dynamic(
() => import('@components/organisms/forms/search-form'),
{
loading: () => <Spinner />,
+ ssr: false,
}
);
diff --git a/src/components/organisms/modals/settings-modal.test.tsx b/src/components/organisms/modals/settings-modal.test.tsx
index acbf7d1..d6ed989 100644
--- a/src/components/organisms/modals/settings-modal.test.tsx
+++ b/src/components/organisms/modals/settings-modal.test.tsx
@@ -3,7 +3,12 @@ import SettingsModal from './settings-modal';
describe('SettingsModal', () => {
it('renders a fake heading', () => {
- render(<SettingsModal />);
+ render(
+ <SettingsModal
+ ackeeStorageKey="ackee-tracking"
+ motionStorageKey="reduce-motion"
+ />
+ );
expect(screen.getByText(/Settings/i)).toBeInTheDocument();
});
});
diff --git a/src/components/organisms/modals/settings-modal.tsx b/src/components/organisms/modals/settings-modal.tsx
index e724076..5d14836 100644
--- a/src/components/organisms/modals/settings-modal.tsx
+++ b/src/components/organisms/modals/settings-modal.tsx
@@ -10,11 +10,15 @@ const DynamicSettingsForm = dynamic(
() => import('@components/organisms/forms/settings-form'),
{
loading: () => <Spinner />,
+ ssr: false,
}
);
export type SettingsModalProps = Pick<ModalProps, 'className'> &
- Pick<SettingsFormProps, 'tooltipClassName'>;
+ Pick<
+ SettingsFormProps,
+ 'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName'
+ >;
/**
* SettingsModal component
diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx
index aab4b9e..9d04932 100644
--- a/src/components/organisms/toolbar/settings.stories.tsx
+++ b/src/components/organisms/toolbar/settings.stories.tsx
@@ -8,7 +8,21 @@ import Settings from './settings';
export default {
title: 'Organisms/Toolbar/Settings',
component: Settings,
+ args: {
+ ackeeStorageKey: 'ackee-tracking',
+ motionStorageKey: 'reduced-motion',
+ },
argTypes: {
+ ackeeStorageKey: {
+ control: {
+ type: 'text',
+ },
+ description: 'Set Ackee settings local storage key.',
+ type: {
+ name: 'string',
+ required: true,
+ },
+ },
className: {
control: {
type: 'text',
@@ -32,6 +46,16 @@ export default {
required: true,
},
},
+ motionStorageKey: {
+ control: {
+ type: 'text',
+ },
+ description: 'Set Reduced motion settings local storage key.',
+ type: {
+ name: 'string',
+ required: true,
+ },
+ },
setIsActive: {
control: {
type: null,
diff --git a/src/components/organisms/toolbar/settings.test.tsx b/src/components/organisms/toolbar/settings.test.tsx
index 96a32c9..7ccb234 100644
--- a/src/components/organisms/toolbar/settings.test.tsx
+++ b/src/components/organisms/toolbar/settings.test.tsx
@@ -3,14 +3,28 @@ import Settings from './settings';
describe('Settings', () => {
it('renders a button to open settings modal', () => {
- render(<Settings isActive={false} setIsActive={() => null} />);
+ render(
+ <Settings
+ ackeeStorageKey="ackee-tracking"
+ motionStorageKey="reduced-motion"
+ isActive={false}
+ setIsActive={() => null}
+ />
+ );
expect(
screen.getByRole('checkbox', { name: 'Open settings' })
).toBeInTheDocument();
});
it('renders a button to close settings modal', () => {
- render(<Settings isActive={true} setIsActive={() => null} />);
+ render(
+ <Settings
+ ackeeStorageKey="ackee-tracking"
+ motionStorageKey="reduced-motion"
+ isActive={true}
+ setIsActive={() => null}
+ />
+ );
expect(
screen.getByRole('checkbox', { name: 'Close settings' })
).toBeInTheDocument();
diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx
index 43d3190..9985ba0 100644
--- a/src/components/organisms/toolbar/settings.tsx
+++ b/src/components/organisms/toolbar/settings.tsx
@@ -1,7 +1,7 @@
import Checkbox, { type CheckboxProps } from '@components/atoms/forms/checkbox';
import Label from '@components/atoms/forms/label';
import Cog from '@components/atoms/icons/cog';
-import { FC, forwardRef, ForwardRefRenderFunction } from 'react';
+import { forwardRef, ForwardRefRenderFunction } from 'react';
import { useIntl } from 'react-intl';
import SettingsModal, {
type SettingsModalProps,
@@ -9,7 +9,10 @@ import SettingsModal, {
import settingsStyles from './settings.module.scss';
import sharedStyles from './toolbar-items.module.scss';
-export type SettingsProps = {
+export type SettingsProps = Pick<
+ SettingsModalProps,
+ 'ackeeStorageKey' | 'motionStorageKey' | 'tooltipClassName'
+> & {
/**
* Set additional classnames to the modal wrapper.
*/
@@ -22,14 +25,17 @@ export type SettingsProps = {
* A callback function to handle button state.
*/
setIsActive: CheckboxProps['setValue'];
- /**
- * Set additional classnames to the tooltip wrapper.
- */
- tooltipClassName?: SettingsModalProps['tooltipClassName'];
};
const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
- { className = '', isActive, setIsActive, tooltipClassName = '' },
+ {
+ ackeeStorageKey,
+ className = '',
+ isActive,
+ motionStorageKey,
+ setIsActive,
+ tooltipClassName = '',
+ },
ref
) => {
const intl = useIntl();
@@ -62,7 +68,9 @@ const Settings: ForwardRefRenderFunction<HTMLDivElement, SettingsProps> = (
<Cog />
</Label>
<SettingsModal
+ ackeeStorageKey={ackeeStorageKey}
className={`${sharedStyles.modal} ${settingsStyles.modal} ${className}`}
+ motionStorageKey={motionStorageKey}
tooltipClassName={tooltipClassName}
/>
</div>
diff --git a/src/components/organisms/toolbar/toolbar-items.module.scss b/src/components/organisms/toolbar/toolbar-items.module.scss
index c970b71..20abe01 100644
--- a/src/components/organisms/toolbar/toolbar-items.module.scss
+++ b/src/components/organisms/toolbar/toolbar-items.module.scss
@@ -22,7 +22,7 @@
.modal {
position: absolute;
top: var(--toolbar-size, calc(var(--btn-size) + var(--spacing-2xs)));
- transition: all 0.8s ease-in-out 0s;
+ transition: all 0.8s ease-in-out 0s, background 0s;
@include mix.media("screen") {
@include mix.dimensions(null, "sm") {
diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx
index 477cb55..1f07e79 100644
--- a/src/components/organisms/toolbar/toolbar.stories.tsx
+++ b/src/components/organisms/toolbar/toolbar.stories.tsx
@@ -8,9 +8,21 @@ export default {
title: 'Organisms/Toolbar',
component: ToolbarComponent,
args: {
+ ackeeStorageKey: 'ackee-tracking',
+ motionStorageKey: 'reduced-motion',
searchPage: '#',
},
argTypes: {
+ ackeeStorageKey: {
+ control: {
+ type: 'text',
+ },
+ description: 'Set Ackee settings local storage key.',
+ type: {
+ name: 'string',
+ required: true,
+ },
+ },
className: {
control: {
type: 'text',
@@ -24,6 +36,16 @@ export default {
required: false,
},
},
+ motionStorageKey: {
+ control: {
+ type: 'text',
+ },
+ description: 'Set Reduced motion settings local storage key.',
+ type: {
+ name: 'string',
+ required: true,
+ },
+ },
nav: {
description: 'The main nav items.',
type: {
diff --git a/src/components/organisms/toolbar/toolbar.test.tsx b/src/components/organisms/toolbar/toolbar.test.tsx
index 05e84ff..72965e8 100644
--- a/src/components/organisms/toolbar/toolbar.test.tsx
+++ b/src/components/organisms/toolbar/toolbar.test.tsx
@@ -10,7 +10,14 @@ const nav = [
describe('Toolbar', () => {
it('renders a navigation menu', () => {
- render(<Toolbar nav={nav} searchPage="#" />);
+ render(
+ <Toolbar
+ ackeeStorageKey="ackee-tracking"
+ motionStorageKey="reduced-motion"
+ nav={nav}
+ searchPage="#"
+ />
+ );
expect(screen.getByRole('navigation')).toBeInTheDocument();
});
});
diff --git a/src/components/organisms/toolbar/toolbar.tsx b/src/components/organisms/toolbar/toolbar.tsx
index e4188fe..e196c09 100644
--- a/src/components/organisms/toolbar/toolbar.tsx
+++ b/src/components/organisms/toolbar/toolbar.tsx
@@ -2,26 +2,33 @@ import useClickOutside from '@utils/hooks/use-click-outside';
import { FC, useRef, useState } from 'react';
import MainNav, { type MainNavProps } from '../toolbar/main-nav';
import Search, { type SearchProps } from '../toolbar/search';
-import Settings from '../toolbar/settings';
+import Settings, { SettingsProps } from '../toolbar/settings';
import styles from './toolbar.module.scss';
-export type ToolbarProps = Pick<SearchProps, 'searchPage'> & {
- /**
- * Set additional classnames to the toolbar wrapper.
- */
- className?: string;
- /**
- * The main nav items.
- */
- nav: MainNavProps['items'];
-};
+export type ToolbarProps = Pick<SearchProps, 'searchPage'> &
+ Pick<SettingsProps, 'ackeeStorageKey' | 'motionStorageKey'> & {
+ /**
+ * Set additional classnames to the toolbar wrapper.
+ */
+ className?: string;
+ /**
+ * The main nav items.
+ */
+ nav: MainNavProps['items'];
+ };
/**
* Toolbar component
*
* Render the website toolbar.
*/
-const Toolbar: FC<ToolbarProps> = ({ className = '', nav, searchPage }) => {
+const Toolbar: FC<ToolbarProps> = ({
+ ackeeStorageKey,
+ className = '',
+ motionStorageKey,
+ nav,
+ searchPage,
+}) => {
const [isNavOpened, setIsNavOpened] = useState<boolean>(false);
const [isSearchOpened, setIsSearchOpened] = useState<boolean>(false);
const [isSettingsOpened, setIsSettingsOpened] = useState<boolean>(false);
@@ -53,11 +60,13 @@ const Toolbar: FC<ToolbarProps> = ({ className = '', nav, searchPage }) => {
ref={searchRef}
/>
<Settings
+ ackeeStorageKey={ackeeStorageKey}
+ className={`${styles.modal} ${styles['modal--settings']}`}
isActive={isSettingsOpened}
+ motionStorageKey={motionStorageKey}
+ ref={settingsRef}
setIsActive={setIsSettingsOpened}
- className={`${styles.modal} ${styles['modal--settings']}`}
tooltipClassName={styles.tooltip}
- ref={settingsRef}
/>
</div>
);
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-27 04:32:51 +0000