From ef2c6b45bdc8d171efb06bf22ee7f9c917774d4a Mon Sep 17 00:00:00 2001 From: Tom Wey Date: Fri, 13 Oct 2023 17:09:24 +0100 Subject: [PATCH 1/7] Basic ticker toggle working Needs styling. --- .../bannerDesigns/StickyTopBar.tsx | 6 ++- .../bannerTests/bannerVariantPreview.tsx | 53 +++++++++++++++++-- 2 files changed, 54 insertions(+), 5 deletions(-) diff --git a/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx b/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx index 513e9352..e6c873f0 100644 --- a/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx +++ b/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx @@ -157,7 +157,11 @@ const StickyTopBar: React.FC = ({ )} - + diff --git a/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx b/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx index 98ffe0aa..dad159fd 100644 --- a/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx +++ b/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx @@ -1,18 +1,19 @@ import React, { useState } from 'react'; -import { Theme, makeStyles, Button } from '@material-ui/core'; +import { Button, makeStyles, Theme } from '@material-ui/core'; import VisibilityIcon from '@material-ui/icons/Visibility'; import Drawer from '@material-ui/core/Drawer'; import { + BannerContent, BannerTemplate, BannerVariant, - BannerContent, isBannerTemplate, } from '../../../models/banner'; import Typography from '@material-ui/core/Typography'; import { useModule } from '../../../hooks/useModule'; import useTickerData, { TickerSettingsWithData } from '../hooks/useTickerData'; -import { SelectedAmountsVariant, mockAmountsCardData } from '../../../utils/models'; +import { mockAmountsCardData, SelectedAmountsVariant } from '../../../utils/models'; import { BannerDesign, BannerDesignProps } from '../../../models/bannerDesign'; +import { TickerCountType, TickerEndType, TickerName } from '../helpers/shared'; // Mock prices data interface ProductPriceData { @@ -198,17 +199,47 @@ const useStyles = makeStyles(({ palette }: Theme) => ({ fontStyle: 'italic', fontSize: '20px', }, + controlsContainer: { + position: 'fixed', + backgroundColor: palette.grey[100], + borderRadius: '5px', + top: '10px', + left: '10px', + padding: '20px', + }, })); interface BannerVariantPreviewProps { variant: BannerVariant; design?: BannerDesign; + shouldShowTickerToggle?: boolean; } +const DEFAULT_TICKER_SETTINGS: TickerSettingsWithData = { + tickerData: { + total: 50_000, + goal: 100_000, + }, + countType: TickerCountType.money, + endType: TickerEndType.hardstop, + currencySymbol: '£', + copy: { + countLabel: 'contributions in May', + goalReachedPrimary: "We've met our goal - thank you!", + goalReachedSecondary: '', + }, + name: TickerName.US_2022, +}; + const BannerVariantPreview: React.FC = ({ variant, design, + shouldShowTickerToggle = false, }: BannerVariantPreviewProps) => { + // The default state of showTicker is derived from whether the variant has tickerSettings + const [shouldShowTicker, setShouldShowTicker] = useState( + Boolean(variant.tickerSettings), + ); const classes = useStyles(); const [drawerOpen, setDrawerOpen] = useState(); @@ -231,7 +262,10 @@ const BannerVariantPreview: React.FC = ({ setDrawerOpen(open); }; - const props = buildProps(variant, tickerSettingsWithData, design); + const tickerSettings = + tickerSettingsWithData || (shouldShowTicker ? DEFAULT_TICKER_SETTINGS : undefined); + + const props = buildProps(variant, tickerSettings, design); return (
@@ -247,6 +281,17 @@ const BannerVariantPreview: React.FC = ({ classes={{ paper: classes.drawer }} >
+ {shouldShowTickerToggle && ( +
+ + setShouldShowTicker(!shouldShowTicker)} + /> +
+ )}
Click anywhere outside the banner to close
From bb8e2886f63df9d096fe5586d76903770369e85f Mon Sep 17 00:00:00 2001 From: Tom Wey Date: Fri, 13 Oct 2023 17:29:03 +0100 Subject: [PATCH 2/7] Styling --- .../bannerTests/bannerVariantPreview.tsx | 48 ++++++++++++------- 1 file changed, 32 insertions(+), 16 deletions(-) diff --git a/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx b/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx index dad159fd..147eaaba 100644 --- a/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx +++ b/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Button, makeStyles, Theme } from '@material-ui/core'; +import { Button, Checkbox, FormControlLabel, makeStyles, Theme } from '@material-ui/core'; import VisibilityIcon from '@material-ui/icons/Visibility'; import Drawer from '@material-ui/core/Drawer'; import { @@ -179,7 +179,7 @@ const bannerModules = { }, }; -const useStyles = makeStyles(({ palette }: Theme) => ({ +const useStyles = makeStyles(({ palette, spacing }: Theme) => ({ drawer: { height: 'auto', bottom: 0, @@ -202,10 +202,10 @@ const useStyles = makeStyles(({ palette }: Theme) => ({ controlsContainer: { position: 'fixed', backgroundColor: palette.grey[100], - borderRadius: '5px', - top: '10px', - left: '10px', - padding: '20px', + borderRadius: '4px', + top: spacing(3), + left: spacing(3), + padding: spacing(3), }, })); @@ -231,6 +231,25 @@ const DEFAULT_TICKER_SETTINGS: TickerSettingsWithData = { name: TickerName.US_2022, }; +interface TickerToggleProps { + shouldShowTicker: boolean; + setShouldShowTicker: (shouldShowTicker: boolean) => void; +} +const TickerToggle = ({ shouldShowTicker, setShouldShowTicker }: TickerToggleProps) => { + return ( + setShouldShowTicker(!shouldShowTicker)} + color="primary" + /> + } + label={'Show ticker?'} + /> + ); +}; + const BannerVariantPreview: React.FC = ({ variant, design, @@ -281,21 +300,18 @@ const BannerVariantPreview: React.FC = ({ classes={{ paper: classes.drawer }} >
+
+ Click anywhere outside the banner to close +
+ {shouldShowTickerToggle && (
- - setShouldShowTicker(!shouldShowTicker)} +
)} -
- Click anywhere outside the banner to close -
-
From 83801a7c91db5237fb9587ebb9eb8b2f4b627557 Mon Sep 17 00:00:00 2001 From: Tom Wey Date: Fri, 13 Oct 2023 17:34:01 +0100 Subject: [PATCH 3/7] This can be simplified We won't be showing the ticker toggle for any cases other than the banner design preview. --- .../channelManagement/bannerTests/bannerVariantPreview.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx b/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx index 147eaaba..564718a8 100644 --- a/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx +++ b/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx @@ -256,9 +256,7 @@ const BannerVariantPreview: React.FC = ({ shouldShowTickerToggle = false, }: BannerVariantPreviewProps) => { // The default state of showTicker is derived from whether the variant has tickerSettings - const [shouldShowTicker, setShouldShowTicker] = useState( - Boolean(variant.tickerSettings), - ); + const [shouldShowTicker, setShouldShowTicker] = useState(false); const classes = useStyles(); const [drawerOpen, setDrawerOpen] = useState(); From c42b7a6622022566cfce33cccf6bd140da1026aa Mon Sep 17 00:00:00 2001 From: Tom Wey Date: Fri, 13 Oct 2023 17:37:31 +0100 Subject: [PATCH 4/7] This isn't true any more --- .../channelManagement/bannerTests/bannerVariantPreview.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx b/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx index 564718a8..d66a0932 100644 --- a/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx +++ b/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx @@ -255,7 +255,6 @@ const BannerVariantPreview: React.FC = ({ design, shouldShowTickerToggle = false, }: BannerVariantPreviewProps) => { - // The default state of showTicker is derived from whether the variant has tickerSettings const [shouldShowTicker, setShouldShowTicker] = useState(false); const classes = useStyles(); From 4b0f77159c2a351ab465c26d09bc93324341d0bb Mon Sep 17 00:00:00 2001 From: Tom Wey Date: Fri, 13 Oct 2023 17:57:11 +0100 Subject: [PATCH 5/7] Fix ticker name --- .../channelManagement/bannerTests/bannerVariantPreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx b/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx index d66a0932..d4658043 100644 --- a/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx +++ b/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx @@ -228,7 +228,7 @@ const DEFAULT_TICKER_SETTINGS: TickerSettingsWithData = { goalReachedPrimary: "We've met our goal - thank you!", goalReachedSecondary: '', }, - name: TickerName.US_2022, + name: TickerName.US, }; interface TickerToggleProps { From 816ff2a645de5dd49f53494dc00af92e6fee3efd Mon Sep 17 00:00:00 2001 From: Tom Wey Date: Mon, 16 Oct 2023 10:18:06 +0100 Subject: [PATCH 6/7] Lift complexity of toggling ticker out of the preview component --- .../bannerDesigns/StickyTopBar.tsx | 61 +++++++++++++++++-- .../bannerTests/bannerVariantPreview.tsx | 57 ++--------------- 2 files changed, 60 insertions(+), 58 deletions(-) diff --git a/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx b/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx index e6c873f0..766f9a95 100644 --- a/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx +++ b/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx @@ -1,22 +1,44 @@ -import React from 'react'; -import { Theme, Typography, makeStyles, Button } from '@material-ui/core'; +import React, { useState } from 'react'; +import { + Theme, + Typography, + makeStyles, + Button, + FormControlLabel, + Checkbox, +} from '@material-ui/core'; import EditIcon from '@material-ui/icons/Edit'; import { LockDetails } from './LockDetails'; import LockIcon from '@material-ui/icons/Lock'; import CloseIcon from '@material-ui/icons/Close'; import SaveIcon from '@material-ui/icons/Save'; import { grey } from '@material-ui/core/colors'; -import { LockStatus } from '../helpers/shared'; +import { LockStatus, TickerCountType, TickerEndType, TickerName } from '../helpers/shared'; import LiveSwitch from '../../shared/liveSwitch'; import BannerVariantPreview from '../bannerTests/bannerVariantPreview'; import { getDefaultVariant } from '../bannerTests/utils/defaults'; import { BannerVariant } from '../../../models/banner'; import { BannerDesign, Status } from '../../../models/bannerDesign'; -const buildVariantForPreview = (design: BannerDesign): BannerVariant => { +const buildVariantForPreview = (design: BannerDesign, shouldShowTicker: boolean): BannerVariant => { + const tickerSettings = shouldShowTicker + ? { + countType: TickerCountType.money, + endType: TickerEndType.hardstop, + currencySymbol: '£', + copy: { + countLabel: 'contributions in May', + goalReachedPrimary: "We've met our goal - thank you!", + goalReachedSecondary: '', + }, + name: TickerName.US, + } + : undefined; + return { ...getDefaultVariant(), template: { designName: design.name }, + tickerSettings, }; }; @@ -83,6 +105,26 @@ interface Props { onStatusChange: (status: Status) => void; } +interface TickerToggleProps { + shouldShowTicker: boolean; + setShouldShowTicker: (shouldShowTicker: boolean) => void; +} + +const TickerToggle = ({ shouldShowTicker, setShouldShowTicker }: TickerToggleProps) => { + return ( + setShouldShowTicker(!shouldShowTicker)} + color="primary" + /> + } + label={'Show ticker?'} + /> + ); +}; + const StickyTopBar: React.FC = ({ name, design, @@ -95,6 +137,8 @@ const StickyTopBar: React.FC = ({ }: Props) => { const classes = useStyles(); + const [shouldShowTicker, setShouldShowTicker] = useState(false); + return (
@@ -158,9 +202,14 @@ const StickyTopBar: React.FC = ({ )} + } />
diff --git a/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx b/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx index d4658043..e93c58ab 100644 --- a/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx +++ b/public/src/components/channelManagement/bannerTests/bannerVariantPreview.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Button, Checkbox, FormControlLabel, makeStyles, Theme } from '@material-ui/core'; +import { Button, makeStyles, Theme } from '@material-ui/core'; import VisibilityIcon from '@material-ui/icons/Visibility'; import Drawer from '@material-ui/core/Drawer'; import { @@ -13,7 +13,6 @@ import { useModule } from '../../../hooks/useModule'; import useTickerData, { TickerSettingsWithData } from '../hooks/useTickerData'; import { mockAmountsCardData, SelectedAmountsVariant } from '../../../utils/models'; import { BannerDesign, BannerDesignProps } from '../../../models/bannerDesign'; -import { TickerCountType, TickerEndType, TickerName } from '../helpers/shared'; // Mock prices data interface ProductPriceData { @@ -212,50 +211,14 @@ const useStyles = makeStyles(({ palette, spacing }: Theme) => ({ interface BannerVariantPreviewProps { variant: BannerVariant; design?: BannerDesign; - shouldShowTickerToggle?: boolean; + controls?: React.ReactElement; } -const DEFAULT_TICKER_SETTINGS: TickerSettingsWithData = { - tickerData: { - total: 50_000, - goal: 100_000, - }, - countType: TickerCountType.money, - endType: TickerEndType.hardstop, - currencySymbol: '£', - copy: { - countLabel: 'contributions in May', - goalReachedPrimary: "We've met our goal - thank you!", - goalReachedSecondary: '', - }, - name: TickerName.US, -}; - -interface TickerToggleProps { - shouldShowTicker: boolean; - setShouldShowTicker: (shouldShowTicker: boolean) => void; -} -const TickerToggle = ({ shouldShowTicker, setShouldShowTicker }: TickerToggleProps) => { - return ( - setShouldShowTicker(!shouldShowTicker)} - color="primary" - /> - } - label={'Show ticker?'} - /> - ); -}; - const BannerVariantPreview: React.FC = ({ variant, design, - shouldShowTickerToggle = false, + controls, }: BannerVariantPreviewProps) => { - const [shouldShowTicker, setShouldShowTicker] = useState(false); const classes = useStyles(); const [drawerOpen, setDrawerOpen] = useState(); @@ -278,10 +241,7 @@ const BannerVariantPreview: React.FC = ({ setDrawerOpen(open); }; - const tickerSettings = - tickerSettingsWithData || (shouldShowTicker ? DEFAULT_TICKER_SETTINGS : undefined); - - const props = buildProps(variant, tickerSettings, design); + const props = buildProps(variant, tickerSettingsWithData, design); return (
@@ -301,14 +261,7 @@ const BannerVariantPreview: React.FC = ({ Click anywhere outside the banner to close
- {shouldShowTickerToggle && ( -
- -
- )} + {controls &&
{controls}
}
From 048b53f7dd7778cbedea9464e094e5412ec7b666 Mon Sep 17 00:00:00 2001 From: Tom Wey Date: Mon, 16 Oct 2023 10:25:33 +0100 Subject: [PATCH 7/7] Pull previewing a design into its own component --- .../bannerDesigns/BannerDesignPreview.tsx | 72 +++++++++++++++++++ .../bannerDesigns/StickyTopBar.tsx | 72 ++----------------- 2 files changed, 77 insertions(+), 67 deletions(-) create mode 100644 public/src/components/channelManagement/bannerDesigns/BannerDesignPreview.tsx diff --git a/public/src/components/channelManagement/bannerDesigns/BannerDesignPreview.tsx b/public/src/components/channelManagement/bannerDesigns/BannerDesignPreview.tsx new file mode 100644 index 00000000..8e8458a8 --- /dev/null +++ b/public/src/components/channelManagement/bannerDesigns/BannerDesignPreview.tsx @@ -0,0 +1,72 @@ +import React, { useState } from 'react'; +import BannerVariantPreview from '../bannerTests/bannerVariantPreview'; +import { BannerDesign } from '../../../models/bannerDesign'; +import { Checkbox, FormControlLabel } from '@material-ui/core'; +import { BannerVariant } from '../../../models/banner'; +import { TickerCountType, TickerEndType, TickerName } from '../helpers/shared'; +import { getDefaultVariant } from '../bannerTests/utils/defaults'; + +interface Props { + design: BannerDesign; +} + +interface TickerToggleProps { + shouldShowTicker: boolean; + setShouldShowTicker: (shouldShowTicker: boolean) => void; +} + +const TickerToggle = ({ shouldShowTicker, setShouldShowTicker }: TickerToggleProps) => { + return ( + setShouldShowTicker(!shouldShowTicker)} + color="primary" + /> + } + label={'Show ticker?'} + /> + ); +}; + +const buildVariantForPreview = (design: BannerDesign, shouldShowTicker: boolean): BannerVariant => { + const tickerSettings = shouldShowTicker + ? { + countType: TickerCountType.money, + endType: TickerEndType.hardstop, + currencySymbol: '£', + copy: { + countLabel: 'contributions in May', + goalReachedPrimary: "We've met our goal - thank you!", + goalReachedSecondary: '', + }, + name: TickerName.US, + } + : undefined; + + return { + ...getDefaultVariant(), + template: { designName: design.name }, + tickerSettings, + }; +}; + +const BannerDesignPreview: React.FC = ({ design }: Props) => { + const [shouldShowTicker, setShouldShowTicker] = useState(false); + + return ( + + } + /> + ); +}; + +export { BannerDesignPreview }; diff --git a/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx b/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx index 766f9a95..44387e74 100644 --- a/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx +++ b/public/src/components/channelManagement/bannerDesigns/StickyTopBar.tsx @@ -1,46 +1,15 @@ -import React, { useState } from 'react'; -import { - Theme, - Typography, - makeStyles, - Button, - FormControlLabel, - Checkbox, -} from '@material-ui/core'; +import React from 'react'; +import { Theme, Typography, makeStyles, Button } from '@material-ui/core'; import EditIcon from '@material-ui/icons/Edit'; import { LockDetails } from './LockDetails'; import LockIcon from '@material-ui/icons/Lock'; import CloseIcon from '@material-ui/icons/Close'; import SaveIcon from '@material-ui/icons/Save'; import { grey } from '@material-ui/core/colors'; -import { LockStatus, TickerCountType, TickerEndType, TickerName } from '../helpers/shared'; +import { LockStatus } from '../helpers/shared'; import LiveSwitch from '../../shared/liveSwitch'; -import BannerVariantPreview from '../bannerTests/bannerVariantPreview'; -import { getDefaultVariant } from '../bannerTests/utils/defaults'; -import { BannerVariant } from '../../../models/banner'; import { BannerDesign, Status } from '../../../models/bannerDesign'; - -const buildVariantForPreview = (design: BannerDesign, shouldShowTicker: boolean): BannerVariant => { - const tickerSettings = shouldShowTicker - ? { - countType: TickerCountType.money, - endType: TickerEndType.hardstop, - currencySymbol: '£', - copy: { - countLabel: 'contributions in May', - goalReachedPrimary: "We've met our goal - thank you!", - goalReachedSecondary: '', - }, - name: TickerName.US, - } - : undefined; - - return { - ...getDefaultVariant(), - template: { designName: design.name }, - tickerSettings, - }; -}; +import { BannerDesignPreview } from './BannerDesignPreview'; const useStyles = makeStyles(({ palette, spacing }: Theme) => ({ container: { @@ -105,26 +74,6 @@ interface Props { onStatusChange: (status: Status) => void; } -interface TickerToggleProps { - shouldShowTicker: boolean; - setShouldShowTicker: (shouldShowTicker: boolean) => void; -} - -const TickerToggle = ({ shouldShowTicker, setShouldShowTicker }: TickerToggleProps) => { - return ( - setShouldShowTicker(!shouldShowTicker)} - color="primary" - /> - } - label={'Show ticker?'} - /> - ); -}; - const StickyTopBar: React.FC = ({ name, design, @@ -137,8 +86,6 @@ const StickyTopBar: React.FC = ({ }: Props) => { const classes = useStyles(); - const [shouldShowTicker, setShouldShowTicker] = useState(false); - return (
@@ -201,16 +148,7 @@ const StickyTopBar: React.FC = ({ )} - - } - /> +