From 93bd6b6ed511324f4b05183f71213ad58b891b85 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 2 May 2022 12:19:33 -0700 Subject: [PATCH 1/4] Use SVG images of grouped font stepper controls Aligning the components in CSS didn't work very well, so this uses exported versions of the design with the `A` icon and `+/-` symbol in a single image. --- .../templates/article/ReaderSettingsControl.tsx | 14 +++++++------- .../web/public/static/icons/font-stepper-down.svg | 5 +++++ .../web/public/static/icons/font-stepper-up.svg | 5 +++++ 3 files changed, 17 insertions(+), 7 deletions(-) create mode 100644 packages/web/public/static/icons/font-stepper-down.svg create mode 100644 packages/web/public/static/icons/font-stepper-up.svg diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx index 4e5f731aa..cde4bb9f4 100644 --- a/packages/web/components/templates/article/ReaderSettingsControl.tsx +++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx @@ -7,7 +7,7 @@ import { AlignCenterHorizontalSimple, ArrowsInLineHorizontal, ArrowsOutLineHoriz import { AIcon } from '../../elements/images/AIcon' import { TickedRangeSlider } from '../../elements/TickedRangeSlider' import { showSuccessToast } from '../../../lib/toastHelpers' - +import Image from 'next/image' type ReaderSettingsProps = { marginWidth: number @@ -34,20 +34,20 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element { - - + + + + diff --git a/packages/web/public/static/icons/font-stepper-up.svg b/packages/web/public/static/icons/font-stepper-up.svg new file mode 100644 index 000000000..20edd0870 --- /dev/null +++ b/packages/web/public/static/icons/font-stepper-up.svg @@ -0,0 +1,5 @@ + + + + + From 9bdd7573c6540dec1879a586f1290aa205dcc29e Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 2 May 2022 12:32:41 -0700 Subject: [PATCH 2/4] Story for the ReaderSettingsControl --- .../stories/ReaderSettingsControl.stories.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 packages/web/stories/ReaderSettingsControl.stories.tsx diff --git a/packages/web/stories/ReaderSettingsControl.stories.tsx b/packages/web/stories/ReaderSettingsControl.stories.tsx new file mode 100644 index 000000000..d97da58b7 --- /dev/null +++ b/packages/web/stories/ReaderSettingsControl.stories.tsx @@ -0,0 +1,24 @@ +import { ComponentStory, ComponentMeta } from '@storybook/react' +import { Box } from '../components/elements/LayoutPrimitives' +import { ReaderSettingsControl } from '../components/templates/article/ReaderSettingsControl' + +export default { + title: 'Components/ReaderSettingsControl', + component: ReaderSettingsControl, + argTypes: { + position: { + description: 'The ReaderSettingsControl component', + control: { type: 'select' }, + }, + }, +} as ComponentMeta + +export const ReaderSettingsStory: ComponentStory = (args: any) => { + return ( +
+ { + console.log('articleActionHandler') + }} /> +
+ ) +} From 039cab33edd5032fd0d653427fe18ee20bee4f74 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 2 May 2022 13:01:50 -0700 Subject: [PATCH 3/4] Use embedded SVG so we can set colours --- .../components/elements/images/FontStepperDown.tsx | 13 +++++++++++++ .../components/elements/images/FontStepperUp.tsx | 13 +++++++++++++ .../templates/article/ReaderSettingsControl.tsx | 6 ++++-- .../web/public/static/icons/font-stepper-down.svg | 5 ----- .../web/public/static/icons/font-stepper-up.svg | 5 ----- 5 files changed, 30 insertions(+), 12 deletions(-) create mode 100644 packages/web/components/elements/images/FontStepperDown.tsx create mode 100644 packages/web/components/elements/images/FontStepperUp.tsx delete mode 100644 packages/web/public/static/icons/font-stepper-down.svg delete mode 100644 packages/web/public/static/icons/font-stepper-up.svg diff --git a/packages/web/components/elements/images/FontStepperDown.tsx b/packages/web/components/elements/images/FontStepperDown.tsx new file mode 100644 index 000000000..c23e398e2 --- /dev/null +++ b/packages/web/components/elements/images/FontStepperDown.tsx @@ -0,0 +1,13 @@ +type FontStepperDownProps = { + color: string +} + +export function FontStepperDown(props: FontStepperDownProps): JSX.Element { + return ( + + + + + + ) +} \ No newline at end of file diff --git a/packages/web/components/elements/images/FontStepperUp.tsx b/packages/web/components/elements/images/FontStepperUp.tsx new file mode 100644 index 000000000..7b6efaf7e --- /dev/null +++ b/packages/web/components/elements/images/FontStepperUp.tsx @@ -0,0 +1,13 @@ +type FontStepperUpProps = { + color: string +} + +export function FontStepperUp(props: FontStepperUpProps): JSX.Element { + return ( + + + + + + ) +} \ No newline at end of file diff --git a/packages/web/components/templates/article/ReaderSettingsControl.tsx b/packages/web/components/templates/article/ReaderSettingsControl.tsx index cde4bb9f4..8133d2004 100644 --- a/packages/web/components/templates/article/ReaderSettingsControl.tsx +++ b/packages/web/components/templates/article/ReaderSettingsControl.tsx @@ -8,6 +8,8 @@ import { AIcon } from '../../elements/images/AIcon' import { TickedRangeSlider } from '../../elements/TickedRangeSlider' import { showSuccessToast } from '../../../lib/toastHelpers' import Image from 'next/image' +import { FontStepperDown } from '../../elements/images/FontStepperDown' +import { FontStepperUp } from '../../elements/images/FontStepperUp' type ReaderSettingsProps = { marginWidth: number @@ -43,11 +45,11 @@ export function ReaderSettingsControl(props: ReaderSettingsProps): JSX.Element { }} > - - - - diff --git a/packages/web/public/static/icons/font-stepper-up.svg b/packages/web/public/static/icons/font-stepper-up.svg deleted file mode 100644 index 20edd0870..000000000 --- a/packages/web/public/static/icons/font-stepper-up.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - From deac4b6680371746bfa9817f6f4de7998bd05ede Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 2 May 2022 13:21:35 -0700 Subject: [PATCH 4/4] Use react attributes for SVG --- packages/web/components/elements/images/FontStepperDown.tsx | 6 +++--- packages/web/components/elements/images/FontStepperUp.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/web/components/elements/images/FontStepperDown.tsx b/packages/web/components/elements/images/FontStepperDown.tsx index c23e398e2..1b669fd4e 100644 --- a/packages/web/components/elements/images/FontStepperDown.tsx +++ b/packages/web/components/elements/images/FontStepperDown.tsx @@ -5,9 +5,9 @@ type FontStepperDownProps = { export function FontStepperDown(props: FontStepperDownProps): JSX.Element { return ( - - - + + + ) } \ No newline at end of file diff --git a/packages/web/components/elements/images/FontStepperUp.tsx b/packages/web/components/elements/images/FontStepperUp.tsx index 7b6efaf7e..c0d9888dd 100644 --- a/packages/web/components/elements/images/FontStepperUp.tsx +++ b/packages/web/components/elements/images/FontStepperUp.tsx @@ -5,8 +5,8 @@ type FontStepperUpProps = { export function FontStepperUp(props: FontStepperUpProps): JSX.Element { return ( - - + + )