Skip to content

Commit

Permalink
🎨 Campaign phase 2 #2374 (#2391)
Browse files Browse the repository at this point in the history
* 🎨 better text wrapping

* 🎨 add background image to grid and more content alignment options

* 🎨 update grid

* 🐛 fix alignment on span2

* 🎨 update grid components

* 🐛 fix heading for sharedtitle

* 🎨 fix some alignment issues

* 🎨 fix some issues

* 🎨 dont use theme when themed title

* 🎨 same for gridteaser

* 🎨 add more bg to arrow variant

* 🎨 better image validation on image teaser
  • Loading branch information
BorghildSelle authored Jul 5, 2024
1 parent cda5fc0 commit 79c96b5
Show file tree
Hide file tree
Showing 29 changed files with 959 additions and 243 deletions.
28 changes: 28 additions & 0 deletions sanityv3/icons/customIcons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,34 @@ export const ContentRightImage = (): JSX.Element => (
/>
</svg>
)
export const ContentBottomCenterImage = (): JSX.Element => (
<svg
xmlns="http://www.w3.org/2000/svg"
className="icon icon-tabler icon-tabler-align-box-right-middle-filled"
width="48"
height="48"
viewBox="0 0 24 24"
strokeWidth="0"
stroke="currentColor"
fill="currentColor"
>
<path d="M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005 .195v12.666c0 1.96 -1.537 3.56 -3.472 3.662l-.195 .005h-12.666a3.667 3.667 0 0 1 -3.662 -3.472l-.005 -.195v-12.666c0 -1.96 1.537 -3.56 3.472 -3.662l.195 -.005h12.666zm-9.333 13a1 1 0 0 0 -1 1v2l.007 .117a1 1 0 0 0 1.993 -.117v-2l-.007 -.117a1 1 0 0 0 -.993 -.883zm3 -4a1 1 0 0 0 -1 1v6l.007 .117a1 1 0 0 0 1.993 -.117v-6l-.007 -.117a1 1 0 0 0 -.993 -.883zm3 2a1 1 0 0 0 -1 1v4l.007 .117a1 1 0 0 0 1.993 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"></path>
</svg>
)
export const ContentBottomLeftImage = (): JSX.Element => (
<svg
xmlns="http://www.w3.org/2000/svg"
className=""
width="48"
height="48"
viewBox="0 0 24 24"
strokeWidth="0"
stroke="currentColor"
fill="currentColor"
>
<path d="M18.333 2c1.96 0 3.56 1.537 3.662 3.472l.005 .195v12.666c0 1.96 -1.537 3.56 -3.472 3.662l-.195 .005h-12.666a3.667 3.667 0 0 1 -3.662 -3.472l-.005 -.195v-12.666c0 -1.96 1.537 -3.56 3.472 -3.662l.195 -.005h12.666zm-12.333 13a1 1 0 0 0 -1 1v2l.007 .117a1 1 0 0 0 1.993 -.117v-2l-.007 -.117a1 1 0 0 0 -.993 -.883zm3 -4a1 1 0 0 0 -1 1v6l.007 .117a1 1 0 0 0 1.993 -.117v-6l-.007 -.117a1 1 0 0 0 -.993 -.883zm3 2a1 1 0 0 0 -1 1v4l.007 .117a1 1 0 0 0 1.993 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"></path>
</svg>
)

export const RightAlignedImage = (): JSX.Element => (
<svg
Expand Down
7 changes: 4 additions & 3 deletions sanityv3/schemas/components/ThemeSelector/ThemeSelector.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Box, Card, Flex, Stack, Tooltip, Text } from '@sanity/ui'
import { useCallback } from 'react'
import { useCallback, useId } from 'react'
import { set } from 'sanity'
import type { ObjectInputProps } from 'sanity'
import styled from 'styled-components'
Expand Down Expand Up @@ -66,6 +66,7 @@ type ThemeSelectorProps = ObjectInputProps
export const ThemeSelector = ({ value, onChange, schemaType }: ThemeSelectorProps) => {
const { options } = schemaType
const colors = (options?.colors as ThemeSelectorValue[]) || themeColors
const theSelectorUniqueId = useId()

const handleSelect = useCallback(
(selected: ThemeSelectorValue) => {
Expand All @@ -83,10 +84,10 @@ export const ThemeSelector = ({ value, onChange, schemaType }: ThemeSelectorProp
<Card>
<Flex direction={'row'} wrap={'wrap'}>
{colors.map((colorItem: ThemeSelectorValue) => {
const { background } = getColorForTheme(colorItem.value)
const { background, highlight } = getColorForTheme(colorItem.value)
return (
<ColorCircle
key={background.value}
key={`${theSelectorUniqueId}_${background.value}_${highlight.key}`}
color={colorItem}
active={colorItem.value === value?.value}
onClickHandler={handleSelect}
Expand Down
76 changes: 69 additions & 7 deletions sanityv3/schemas/components/ThemeSelector/themeColors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,17 +13,41 @@ export const themeColors = [
{ title: 'Mid Blue 3', value: 8 },
{ title: 'Mid Green', value: 9 },
{ title: 'Mist Blue 2', value: 10 },
{ title: 'Black text', value: 11 },
{ title: 'White text', value: 12 },
]

export const fromLargerTextThemeColors = [
{ title: 'White', value: 0 },
{ title: 'Moss Green Light', value: 1 },
{ title: 'Mid Blue 1', value: 6 },
{ title: 'Mid Blue 2', value: 7 },
{ title: 'Mist Blue 2', value: 10 },
]
export const fromNormalTextThemeColors = [
{ title: 'Moss Green Light', value: 13 },
{ title: 'Spruce Wood', value: 2 },
{ title: 'Mist Blue', value: 3 },
{ title: 'Mid Yellow', value: 4 },
{ title: 'Mid Orange', value: 5 },
{ title: 'Mid Blue 2', value: 7 },
{ title: 'Mid Blue 3', value: 8 },
{ title: 'Mid Green', value: 9 },
{ title: 'Black text', value: 11 },
{ title: 'White text', value: 12 },
]

//Keep in sync with web/pageComponents/shared/textTeaser/theme
export const getColorForTheme = (pattern: number) => {
switch (pattern) {
case 1:
return {
//moss green light
background: {
value: defaultColors[1].value,
key: defaultColors[1].key,
},
//energy red
highlight: {
value: defaultColors[8].value,
key: defaultColors[8].key,
Expand All @@ -36,8 +60,8 @@ export const getColorForTheme = (pattern: number) => {
key: defaultColors[2].key,
},
highlight: {
value: defaultColors[8].value,
key: defaultColors[8].key,
value: defaultColors[9].value,
key: defaultColors[9].key,
},
}
case 3:
Expand All @@ -47,8 +71,8 @@ export const getColorForTheme = (pattern: number) => {
key: defaultColors[3].key,
},
highlight: {
value: defaultColors[8].value,
key: defaultColors[8].key,
value: defaultColors[9].value,
key: defaultColors[9].key,
},
}
case 4:
Expand All @@ -58,8 +82,8 @@ export const getColorForTheme = (pattern: number) => {
key: defaultColors[4].key,
},
highlight: {
value: defaultColors[8].value,
key: defaultColors[8].key,
value: defaultColors[9].value,
key: defaultColors[9].key,
},
}
case 5:
Expand All @@ -68,7 +92,10 @@ export const getColorForTheme = (pattern: number) => {
value: defaultColors[5].value,
key: defaultColors[5].key,
},
highlight: {},
highlight: {
value: defaultColors[9].value,
key: defaultColors[9].key,
},
}
case 6:
return {
Expand Down Expand Up @@ -122,6 +149,41 @@ export const getColorForTheme = (pattern: number) => {
key: defaultColors[6].key,
},
}
case 11:
return {
background: {
value: defaultColors[0].value,
key: defaultColors[0].key,
},
highlight: {
value: defaultColors[9].value,
key: defaultColors[9].key,
},
}
case 12:
return {
background: {
value: defaultColors[9].value,
key: defaultColors[9].key,
},
highlight: {
value: defaultColors[0].value,
key: defaultColors[0].key,
},
}
case 13: {
//black on moss green light
return {
background: {
value: defaultColors[1].value,
key: defaultColors[1].key,
},
highlight: {
value: defaultColors[9].value,
key: defaultColors[9].key,
},
}
}

case 0:
default:
Expand Down
1 change: 1 addition & 0 deletions sanityv3/schemas/defaultColors.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,5 @@ export const defaultColors = [
{ title: 'Mid Blue', value: colors.blue[50], key: 'blue-50', dark: true },
{ title: 'Mid Green', value: colors.green[50], key: 'green-50', dark: false },
{ title: 'Energy Red', value: colors['energy-red'][100], key: 'energy-red-50', dark: false, onlyTextColor: true },
{ title: 'Black', value: 'rgba(61, 61, 61, 1)', key: 'slate-80', dark: false, onlyTextColor: true },
]
1 change: 1 addition & 0 deletions sanityv3/schemas/editors/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export * from './blockContentType'
export * from './titleEditorContentType'
export * from './themedTitleEditorContentType'
95 changes: 95 additions & 0 deletions sanityv3/schemas/editors/themedTitleEditorContentType.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import { SuperScriptRenderer, SubScriptRenderer, StrikeThroughRenderer } from '../components'
import { IconSuperScript, IconSubScript } from '../../icons'
import { StrikethroughIcon } from '@sanity/icons'
import { BlockDefinition } from 'sanity'
import { em, ExtraLargeTextRender, LargeTextRender } from './blockContentType'

export type ThemedTitleContentProps = {
normalText?: boolean
largeText?: boolean
extraLargeText?: boolean
twoXLText?: boolean
}

const TwoXLTextRender = (props: any) => {
const { children } = props
return <span style={{ fontSize: `${em(64, 16)}`, fontWeight: '400' }}>{children}</span>
}

// TODO: Add relevant styles for titles (i.e. highlighted text)
export const configureThemedTitleBlockContent = (options: ThemedTitleContentProps = {}): BlockDefinition => {
const { largeText = true, extraLargeText = false, twoXLText = false, normalText = true } = options

const config: BlockDefinition = {
type: 'block',
name: 'block',
styles: [],
lists: [],
marks: {
decorators: [
{ title: 'Strong', value: 'strong' },
{ title: 'Emphasis', value: 'em' },
{
title: 'Strikethrough',
value: 's',
icon: StrikethroughIcon,
component: StrikeThroughRenderer,
},
{
title: 'Sub',
value: 'sub',
icon: IconSubScript,
component: SubScriptRenderer,
},
{
title: 'Super',
value: 'sup',
icon: IconSuperScript,
component: SuperScriptRenderer,
},
],
annotations: [],
},
}

const normalTextConfig = { title: 'Normal', value: 'normal' }
// Since one cant disable value normal, when title should only have large and not normal, make normal like Large
// Make sure that the block serializer picks up this 'as large' for normal text
const normalAsLargeTextConfig = { title: 'Large', value: 'normal', blockEditor: { render: LargeTextRender } }

const largeTextConfig = {
title: 'Large text',
value: 'largeText',
component: LargeTextRender,
}
const extraLargeTextConfig = {
title: 'Extra large text',
value: 'extraLargeText',
component: ExtraLargeTextRender,
}
const twoXLTextConfig = {
title: '2XL text',
value: 'twoXLText',
component: TwoXLTextRender,
}

if (normalText) {
config?.styles?.push(normalTextConfig)
}
if (!normalText && largeText) {
config?.styles?.push(normalAsLargeTextConfig)
}
if (normalText && largeText) {
config?.styles?.push(largeTextConfig)
}
if (extraLargeText) {
config?.styles?.push(extraLargeTextConfig)
}
if (twoXLText) {
config?.styles?.push(twoXLTextConfig)
}

return config
}

export default configureThemedTitleBlockContent()
6 changes: 5 additions & 1 deletion sanityv3/schemas/objects/background/imageBackground.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ export default defineType({
name: 'useAnimation',
type: 'boolean',
description: 'Animates content over the background image.',
hidden: ({ parent }: any) => {
console.log('parent in image background', parent)
return false
},
}),
defineField({
title: 'Apply light gradient',
Expand All @@ -43,7 +47,7 @@ export default defineType({
defineField({
name: 'contentAlignment',
title: 'Content Alignment',
description: 'Select the content alignment on larger screens.',
description: 'Select the content alignment on larger screens. Bottom alignments can be kept on mobile',
type: 'string',
initialValue: 'left',
components: {
Expand Down
Loading

0 comments on commit 79c96b5

Please sign in to comment.