Skip to content

Commit

Permalink
Fix for #67, #52
Browse files Browse the repository at this point in the history
  • Loading branch information
@remkoj
remkoj committed Nov 1, 2024
1 parent c460c3d commit 732c963
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 106 deletions.
54 changes: 15 additions & 39 deletions apps/frontend/src/components/cms/element/HeadingElement/_animated.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<AnimatedHeadingStylesComponent<HeadingElementDataFragment>> & {
withReducedMotion?: boolean
}

export const AnimatedHeadingElement : FunctionComponent<AnimatedHeadingElementProps> = ({ 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 <div className={ (`${ className } prose prose-h1:text-[72px] prose-p:text-[24px] prose-p:leading-tight ` + cssClasses.join(' ')).trim() } { ...containerProps }>
return <div className={ cssClasses.filter(x=>x).join(' ') } { ...containerProps }>
{ withReducedMotion ? <Component>{ headingText ?? "" }</Component> : <AnimatedText el={ Component } text={ headingText ?? "" } delay={ delay } /> }
</div>
}
78 changes: 11 additions & 67 deletions apps/frontend/src/components/cms/element/HeadingElement/_default.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<HeadingElementDataFragment> = ({ 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(' ')

Expand Down
54 changes: 54 additions & 0 deletions apps/frontend/src/components/cms/element/HeadingElement/_styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<HeadingElementLayoutProps>]: {
[SV in LayoutPropsSettingValues<HeadingElementLayoutProps, K>]: string
};
}, 'showAs' | 'delay'> & Pick<{
[K in LayoutPropsSettingKeys<HeadingElementLayoutProps>]: {
[SV in LayoutPropsSettingValues<HeadingElementLayoutProps, K>]: number
};
}, 'delay'>
export type StyleDefaults = {
[K in LayoutPropsSettingKeys<HeadingElementLayoutProps>]: LayoutPropsSettingValues<HeadingElementLayoutProps, K>
}

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
}
}

0 comments on commit 732c963

Please sign in to comment.