Skip to content

Commit

Permalink
💄 After review #2010
Browse files Browse the repository at this point in the history
  • Loading branch information
padms committed Jan 19, 2024
1 parent 7514d26 commit f8efe68
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 6 deletions.
5 changes: 3 additions & 2 deletions sanityv3/schemas/editors/titleEditorContentType.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import React from 'react'
export type TitleContentProps = {
styles?: BlockStyleDefinition[]
highlight?: boolean
highlightTitle?: string
}

// TODO: Add relevant styles for titles (i.e. highlighted text)
Expand All @@ -21,7 +22,7 @@ export const configureTitleBlockContent = (
],
},
): BlockDefinition => {
const { highlight = false, styles } = options
const { highlight = false, styles, highlightTitle = 'Highlight' } = options

const config: BlockDefinition = {
type: 'block',
Expand Down Expand Up @@ -56,7 +57,7 @@ export const configureTitleBlockContent = (
}

const textColorConfig = {
title: 'Highlight',
title: highlightTitle,
value: 'highlight',
icon: EdsBlockEditorIcon(format_color_text),
component: ({ children }: { children: React.ReactNode }) => {
Expand Down
6 changes: 4 additions & 2 deletions sanityv3/schemas/objects/textTeaser.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { ThemeSelectorValue } from '../components/ThemeSelector'

const titleContentType = configureTitleBlockContent({
highlight: true,
highlightTitle: 'Highlight text selected from theme below',
styles: [
{
title: 'Normal',
Expand Down Expand Up @@ -119,8 +120,9 @@ export default {
},
},
{
title: 'Theme',
description: 'Pick a colour combination for the background and title highlight. Default is white.',
title: 'Theme (for title)',
description:
'When you have selected highlight in the title, choose colour combination for the title text/background. If no highlighted is selected colour will be black or white (on blue background) If no theme is selected the default is white background with black text.',
name: 'theme',
type: 'themeList',
fieldset: 'design',
Expand Down
14 changes: 12 additions & 2 deletions web/pageComponents/shared/textTeaser/TextTeaser.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,19 @@ const IngressWrapper = styled.div`
}
`
const TitleWrapper = styled.div`
padding: var(--space-xxLarge) var(--layout-paddingHorizontal-large) 0 var(--layout-paddingHorizontal-large);
@media (min-width: 750px) {
padding: var(--space-xxLarge) var(--space-large);
}
@media (min-width: 1000px) {
padding: var(--space-3xLarge);
}
padding: var(--space-xxLarge) var(--space-large) 0 var(--space-large);
`
const StyledContent = styled(Content)`
padding: 0 var(--layout-paddingHorizontal-large) var(--space-3xLarge) var(--layout-paddingHorizontal-large);
@media (min-width: 750px) {
padding: var(--space-xxLarge);
}
@media (min-width: 1000px) {
padding: var(--space-3xLarge);
}
Expand All @@ -42,6 +46,12 @@ export const StyledTeaser = styled.article`
const StyledLink = styled(Link)`
font-size: var(--typeScale-1);
`
const StyledTitleText = styled(TitleText)`
padding: 0 0 var(--space-large) 0;
@media (min-width: 750px) {
padding: 0;
}
`
const TeaserWrapper = styled.div<{ titlePosition: TitlePostion }>`
--max-content-width: 1440px;
display: grid;
Expand Down Expand Up @@ -98,7 +108,7 @@ const TextTeaser = ({ data, anchor }: TextTeaserProps) => {
<BackgroundContainer style={style} background={background} id={anchor}>
<TeaserWrapper titlePosition={titlePosition}>
<TitleWrapper>
<TitleText value={title} size={'2xl'} />
<StyledTitleText value={title} size={'2xl'} />
</TitleWrapper>
<StyledContent>
{text && (
Expand Down

0 comments on commit f8efe68

Please sign in to comment.