From 732c963038ccb1ab009b43d2b4f8d0b297380d30 Mon Sep 17 00:00:00 2001 From: Remko Jantzen <693172+remkoj@users.noreply.github.com> Date: Fri, 1 Nov 2024 19:09:39 +0100 Subject: [PATCH] Fix for #67, #52 --- .../cms/element/HeadingElement/_animated.tsx | 54 ++++--------- .../cms/element/HeadingElement/_default.tsx | 78 +++---------------- .../cms/element/HeadingElement/_styles.tsx | 54 +++++++++++++ 3 files changed, 80 insertions(+), 106 deletions(-) create mode 100644 apps/frontend/src/components/cms/element/HeadingElement/_styles.tsx diff --git a/apps/frontend/src/components/cms/element/HeadingElement/_animated.tsx b/apps/frontend/src/components/cms/element/HeadingElement/_animated.tsx index 03269c3d..6b1596db 100644 --- a/apps/frontend/src/components/cms/element/HeadingElement/_animated.tsx +++ b/apps/frontend/src/components/cms/element/HeadingElement/_animated.tsx @@ -3,53 +3,29 @@ import { type AnimatedHeadingStylesComponent } from './displayTemplates' import { type HeadingElementDataFragment } from "@/gql/graphql" import AnimatedText from "@/components/shared/animated_text" import { extractSettings } from "@remkoj/optimizely-cms-react/components" +import { styleDictionary, styleDefaults } from './_styles' type AnimatedHeadingElementProps = ComponentProps> & { withReducedMotion?: boolean } export const AnimatedHeadingElement : FunctionComponent = ({ data: { headingText }, layoutProps, className, withReducedMotion, ...containerProps }) => { - const cssClasses : string[] = [] - const { textAlign, headingType, delay: delayValue } = extractSettings(layoutProps) + const cssClasses : string[] = [className ?? '', 'prose prose-h1:text-[72px] prose-p:text-[24px] prose-p:leading-tight'] + const { + textAlign = styleDefaults.textAlign, + headingType = styleDefaults.headingType, + delay: delayValue = styleDefaults.delay, + showAs = styleDefaults.showAs, + transform = styleDefaults.transform + } = extractSettings(layoutProps) - switch (textAlign) { - case 'left': - cssClasses.push('text-left mr-auto') - break - case 'center': - cssClasses.push('text-center mx-auto') - break - case 'right': - cssClasses.push('text-right ml-auto') - break - case 'justify': - cssClasses.push('text-justify') - break - default: - break; - } - const Component = !headingType || headingType == 'plain' ? 'p' : headingType - - let delay = 0 - switch (delayValue) { - case 'short': - delay = 500 - break; - case 'medium': - delay = 1000 - break; - case 'long': - delay = 1500 - break; - case 'verylong': - delay = 2000 - break; - default: - delay = 0 - break; - } + const Component = showAs == 'element' ? 'p' : headingType == 'plain' ? 'p' : headingType + cssClasses.push(styleDictionary.textAlign[textAlign]) + cssClasses.push(styleDictionary.headingType[headingType]) + cssClasses.push(styleDictionary.transform[transform]) + const delay = styleDictionary.delay[delayValue] - return
+ return
x).join(' ') } { ...containerProps }> { withReducedMotion ? { headingText ?? "" } : }
} \ No newline at end of file diff --git a/apps/frontend/src/components/cms/element/HeadingElement/_default.tsx b/apps/frontend/src/components/cms/element/HeadingElement/_default.tsx index 38f7c934..68341267 100644 --- a/apps/frontend/src/components/cms/element/HeadingElement/_default.tsx +++ b/apps/frontend/src/components/cms/element/HeadingElement/_default.tsx @@ -1,77 +1,21 @@ import type { HeadingStylesComponent } from './displayTemplates' import { type HeadingElementDataFragment } from "@/gql/graphql" import { extractSettings } from "@remkoj/optimizely-cms-react/components" +import { styleDictionary, styleDefaults } from './_styles' export const DefaultHeadingElement : HeadingStylesComponent = ({ data: { headingText }, layoutProps, className, ...containerProps }) => { - const { headingType, showAs, textAlign, transform } = extractSettings(layoutProps) + const { + headingType = styleDefaults.headingType, + showAs = styleDefaults.showAs, + textAlign = styleDefaults.textAlign, + transform = styleDefaults.transform + } = extractSettings(layoutProps) const cssClasses : (string | undefined)[] = [ className, 'flex-initial' ] - const Component = showAs == 'element' ? 'p' : !headingType || headingType == 'plain' ? 'p' : headingType + const Component = showAs == 'element' ? 'p' : headingType == 'plain' ? 'p' : headingType - switch (textAlign) { - case 'left': - cssClasses.push('text-left mr-auto') - break - case 'center': - cssClasses.push('text-center mx-auto') - break - case 'right': - cssClasses.push('text-right ml-auto') - break - case 'justify': - cssClasses.push('text-justify') - break - default: - break; - } - switch (transform) { - case 'uppercase': - cssClasses.push('uppercase') - break; - case 'lowercase': - cssClasses.push('lowercase') - break; - case 'capitalize': - cssClasses.push('capitalize') - break; - } - switch (headingType) { - case 'h1': - cssClasses.push('font-bold my-0') - cssClasses.push('text-[4.8rem]') - cssClasses.push('lg:text-[6.4rem]') - cssClasses.push('xl:text-[7.2rem]') - break; - case 'h2': - cssClasses.push('font-bold my-0') - cssClasses.push('text-[4.2rem]') - cssClasses.push('lg:text-[4.8rem]') - cssClasses.push('xl:text-[6.4rem]') - break; - case 'h3': - cssClasses.push('font-bold my-0') - cssClasses.push('text-[3.6rem]') - cssClasses.push('lg:text-[4.2rem]') - cssClasses.push('xl:text-[4.8rem]') - break; - case 'h4': - cssClasses.push('font-bold my-0') - cssClasses.push('text-[3.6rem]') - cssClasses.push('lg:text-[4.2rem]') - cssClasses.push('xl:text-[4.8rem]') - break; - case 'h5': - cssClasses.push('font-bold my-0') - cssClasses.push('text-[3.6rem]') - cssClasses.push('lg:text-[4.2rem]') - cssClasses.push('xl:text-[4.8rem]') - break; - case 'h6': - cssClasses.push('font-bold my-0') - break; - case 'plain': - cssClasses.push('my-0') - break; - } + cssClasses.push(styleDictionary.textAlign[textAlign]) + cssClasses.push(styleDictionary.transform[transform]) + cssClasses.push(styleDictionary.headingType[headingType]) const cssClassName = cssClasses.filter(x => x).join(' ') diff --git a/apps/frontend/src/components/cms/element/HeadingElement/_styles.tsx b/apps/frontend/src/components/cms/element/HeadingElement/_styles.tsx new file mode 100644 index 00000000..ce4bdfd8 --- /dev/null +++ b/apps/frontend/src/components/cms/element/HeadingElement/_styles.tsx @@ -0,0 +1,54 @@ +import { type LayoutPropsSettingKeys, type LayoutPropsSettingValues } from '@remkoj/optimizely-cms-react' +import { type HeadingElementLayoutProps } from './displayTemplates' + +export type StyleDictionary = Omit<{ + [K in LayoutPropsSettingKeys]: { + [SV in LayoutPropsSettingValues]: string + }; +}, 'showAs' | 'delay'> & Pick<{ + [K in LayoutPropsSettingKeys]: { + [SV in LayoutPropsSettingValues]: number + }; +}, 'delay'> +export type StyleDefaults = { + [K in LayoutPropsSettingKeys]: LayoutPropsSettingValues +} + +export const styleDefaults : StyleDefaults = { + transform: 'keep', + delay: 'none', + headingType: 'h1', + showAs: 'heading', + textAlign: 'left' +} + +export const styleDictionary : StyleDictionary = { + textAlign: { + left: 'text-left mr-auto', + center: 'text-center mx-auto', + right: 'text-right ml-auto', + justify: 'text-justify' + }, + transform: { + uppercase: 'uppercase', + lowercase: 'lowercase', + capitalize: 'capitalize', + keep: '' + }, + headingType: { + h1: 'font-bold my-0 text-[4.8rem] lg:text-[6.4rem] xl:text-[7.2rem]', + h2: 'font-bold my-0 text-[4.2rem] lg:text-[4.8rem] xl:text-[6.4rem]', + h3: 'font-bold my-0 text-[3.6rem] lg:text-[4.2rem] xl:text-[4.8rem]', + h4: 'font-bold my-0 text-[3.0rem] lg:text-[3.6rem] xl:text-[4.2rem]', + h5: 'font-bold my-0 text-[2.4rem] lg:text-[3.0rem] xl:text-[3.6rem]', + h6: 'font-bold my-0', + plain: 'my-0', + }, + delay: { + short: 500, + medium: 1000, + long: 1500, + verylong: 2000, + none: 0 + } +} \ No newline at end of file