diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx index 5e399c97..0bd4d9a7 100644 --- a/src/components/Typography.tsx +++ b/src/components/Typography.tsx @@ -130,6 +130,13 @@ export const Body2 = styled.p<{ $color?: ColorKey }>( }) ) +export const OverlineLabel = styled.span<{ $color?: ColorKey }>( + ({ theme, $color = 'text-light' }) => ({ + ...theme.partials.marketingText.label, + color: theme.colors[$color] as string, + }) +) + export const AppBody1 = styled.p<{ $color?: ColorKey }>( ({ theme, $color = 'text-light' }) => ({ ...theme.partials.text.body1, diff --git a/src/components/custom-page/SectionHeader.tsx b/src/components/custom-page/SectionHeader.tsx index 2e7239a3..b26f32d5 100644 --- a/src/components/custom-page/SectionHeader.tsx +++ b/src/components/custom-page/SectionHeader.tsx @@ -1,5 +1,26 @@ import { type SectionHeaderComponentFragment } from '@src/generated/graphqlDirectus' -export function SectionHeader({ spacing }: SectionHeaderComponentFragment) { - return
SectionHeader
+import { cn } from '../cn' +import { Body1, Hero2, OverlineLabel } from '../Typography' + +import { getSpacingClassName } from './common' + +export function SectionHeader({ + spacing, + overline, + title, + description, +}: SectionHeaderComponentFragment) { + return ( +
+ {overline && {overline}} + {title} + {description} +
+ ) } diff --git a/src/generated/graphqlDirectus.ts b/src/generated/graphqlDirectus.ts index c1dec457..029023f8 100644 --- a/src/generated/graphqlDirectus.ts +++ b/src/generated/graphqlDirectus.ts @@ -5724,8 +5724,11 @@ export type Create_Rich_Text_Columns_Input = { export type Create_Section_Header_Input = { date_created?: InputMaybe; date_updated?: InputMaybe; + description?: InputMaybe; id?: InputMaybe; + overline?: InputMaybe; spacing?: InputMaybe; + title?: InputMaybe; user_created?: InputMaybe; user_updated?: InputMaybe; }; @@ -8266,8 +8269,11 @@ export type Section_Header = { date_created_func?: Maybe; date_updated?: Maybe; date_updated_func?: Maybe; + description?: Maybe; id: Scalars['ID']['output']; + overline?: Maybe; spacing?: Maybe; + title?: Maybe; user_created?: Maybe; user_updated?: Maybe; }; @@ -8310,8 +8316,11 @@ export type Section_Header_Aggregated_Count = { __typename?: 'section_header_aggregated_count'; date_created?: Maybe; date_updated?: Maybe; + description?: Maybe; id?: Maybe; + overline?: Maybe; spacing?: Maybe; + title?: Maybe; user_created?: Maybe; user_updated?: Maybe; }; @@ -8328,8 +8337,11 @@ export type Section_Header_Filter = { date_created_func?: InputMaybe; date_updated?: InputMaybe; date_updated_func?: InputMaybe; + description?: InputMaybe; id?: InputMaybe; + overline?: InputMaybe; spacing?: InputMaybe; + title?: InputMaybe; user_created?: InputMaybe; user_updated?: InputMaybe; }; @@ -9692,8 +9704,11 @@ export type Update_Rich_Text_Columns_Input = { export type Update_Section_Header_Input = { date_created?: InputMaybe; date_updated?: InputMaybe; + description?: InputMaybe; id?: InputMaybe; + overline?: InputMaybe; spacing?: InputMaybe; + title?: InputMaybe; user_created?: InputMaybe; user_updated?: InputMaybe; }; @@ -9898,7 +9913,7 @@ export type SolutionsQueryVariables = Exact<{ export type SolutionsQuery = { __typename?: 'Query', solutions_pages: Array<{ __typename?: 'solutions_pages', id: string, slug: string, title?: string | null, description?: string | null, upper_features_title?: string | null, lower_features_title?: string | null, download_section_title?: string | null, download_section_description?: string | null, upper_features?: Array<{ __typename?: 'solution_features', id: string, title?: string | null, description?: string | null, icon?: string | null, link_title?: string | null, link_url?: string | null } | null> | null, lower_features?: Array<{ __typename?: 'solution_features', id: string, title?: string | null, description?: string | null, icon?: string | null, link_title?: string | null, link_url?: string | null } | null> | null, problems?: Array<{ __typename?: 'solution_problems', id: string, title?: string | null, subtitle?: string | null, problem?: string | null, solution?: string | null } | null> | null, featured_quote?: { __typename?: 'quotes', id: string, quote?: string | null, author_text?: string | null } | null }> }; -export type CustomPageFragment = { __typename?: 'custom_pages', id: string, slug: string, components?: Array<{ __typename?: 'custom_pages_components', collection?: string | null, item?: { __typename?: 'blog_cards', spacing?: string | null } | { __typename?: 'cards', spacing?: string | null } | { __typename?: 'cta', spacing?: string | null } | { __typename?: 'customer_quote', spacing?: string | null } | { __typename?: 'hero', spacing?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | { __typename?: 'large_image', spacing?: string | null } | { __typename?: 'logo_strip', spacing?: string | null, logo_list?: { __typename?: 'company_logo_lists', slug?: string | null, logos?: Array<{ __typename?: 'company_logo_lists_company_logos', company_logos_id?: { __typename?: 'company_logos', slug?: string | null, name: string, url?: string | null, logo_light?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo_dark?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null } | { __typename?: 'rich_text_columns', spacing?: string | null } | { __typename?: 'section_header', spacing?: string | null } | null } | null> | null }; +export type CustomPageFragment = { __typename?: 'custom_pages', id: string, slug: string, components?: Array<{ __typename?: 'custom_pages_components', collection?: string | null, item?: { __typename?: 'blog_cards', spacing?: string | null } | { __typename?: 'cards', spacing?: string | null } | { __typename?: 'cta', spacing?: string | null } | { __typename?: 'customer_quote', spacing?: string | null } | { __typename?: 'hero', spacing?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | { __typename?: 'large_image', spacing?: string | null } | { __typename?: 'logo_strip', spacing?: string | null, logo_list?: { __typename?: 'company_logo_lists', slug?: string | null, logos?: Array<{ __typename?: 'company_logo_lists_company_logos', company_logos_id?: { __typename?: 'company_logos', slug?: string | null, name: string, url?: string | null, logo_light?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo_dark?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null } | { __typename?: 'rich_text_columns', spacing?: string | null } | { __typename?: 'section_header', spacing?: string | null, overline?: string | null, title?: string | null, description?: string | null } | null } | null> | null }; export type CustomPageTinyFragment = { __typename?: 'custom_pages', id: string, slug: string }; @@ -9912,13 +9927,13 @@ export type CustomPageQueryVariables = Exact<{ }>; -export type CustomPageQuery = { __typename?: 'Query', custom_pages: Array<{ __typename?: 'custom_pages', id: string, slug: string, components?: Array<{ __typename?: 'custom_pages_components', collection?: string | null, item?: { __typename?: 'blog_cards', spacing?: string | null } | { __typename?: 'cards', spacing?: string | null } | { __typename?: 'cta', spacing?: string | null } | { __typename?: 'customer_quote', spacing?: string | null } | { __typename?: 'hero', spacing?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | { __typename?: 'large_image', spacing?: string | null } | { __typename?: 'logo_strip', spacing?: string | null, logo_list?: { __typename?: 'company_logo_lists', slug?: string | null, logos?: Array<{ __typename?: 'company_logo_lists_company_logos', company_logos_id?: { __typename?: 'company_logos', slug?: string | null, name: string, url?: string | null, logo_light?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo_dark?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null } | { __typename?: 'rich_text_columns', spacing?: string | null } | { __typename?: 'section_header', spacing?: string | null } | null } | null> | null }> }; +export type CustomPageQuery = { __typename?: 'Query', custom_pages: Array<{ __typename?: 'custom_pages', id: string, slug: string, components?: Array<{ __typename?: 'custom_pages_components', collection?: string | null, item?: { __typename?: 'blog_cards', spacing?: string | null } | { __typename?: 'cards', spacing?: string | null } | { __typename?: 'cta', spacing?: string | null } | { __typename?: 'customer_quote', spacing?: string | null } | { __typename?: 'hero', spacing?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | { __typename?: 'large_image', spacing?: string | null } | { __typename?: 'logo_strip', spacing?: string | null, logo_list?: { __typename?: 'company_logo_lists', slug?: string | null, logos?: Array<{ __typename?: 'company_logo_lists_company_logos', company_logos_id?: { __typename?: 'company_logos', slug?: string | null, name: string, url?: string | null, logo_light?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo_dark?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null } | { __typename?: 'rich_text_columns', spacing?: string | null } | { __typename?: 'section_header', spacing?: string | null, overline?: string | null, title?: string | null, description?: string | null } | null } | null> | null }> }; export type HeroComponentFragment = { __typename?: 'hero', spacing?: string | null, heading?: string | null, body_text?: string | null, media_type?: string | null, video_url?: string | null, form?: string | null, cta_text?: string | null, cta_url?: string | null, image?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null }; export type LogoStripComponentFragment = { __typename?: 'logo_strip', spacing?: string | null, logo_list?: { __typename?: 'company_logo_lists', slug?: string | null, logos?: Array<{ __typename?: 'company_logo_lists_company_logos', company_logos_id?: { __typename?: 'company_logos', slug?: string | null, name: string, url?: string | null, logo_light?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null, logo_dark?: { __typename?: 'directus_files', id: string, title?: string | null, description?: string | null, tags?: any | null, filename_disk?: string | null, filename_download: string, metadata?: any | null, type?: string | null, filesize?: any | null } | null } | null } | null> | null } | null }; -export type SectionHeaderComponentFragment = { __typename?: 'section_header', spacing?: string | null }; +export type SectionHeaderComponentFragment = { __typename?: 'section_header', spacing?: string | null, overline?: string | null, title?: string | null, description?: string | null }; export type LargeImageComponentFragment = { __typename?: 'large_image', spacing?: string | null }; @@ -10276,6 +10291,9 @@ export const LogoStripComponentFragmentDoc = gql` export const SectionHeaderComponentFragmentDoc = gql` fragment SectionHeaderComponent on section_header { spacing + overline + title + description } `; export const LargeImageComponentFragmentDoc = gql` diff --git a/src/graph/directus/customPages.graphql b/src/graph/directus/customPages.graphql index bc390b0f..a8321921 100644 --- a/src/graph/directus/customPages.graphql +++ b/src/graph/directus/customPages.graphql @@ -57,6 +57,9 @@ fragment LogoStripComponent on logo_strip { fragment SectionHeaderComponent on section_header { spacing + overline + title + description } fragment LargeImageComponent on large_image {