Skip to content

Commit

Permalink
add section header component
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsladerman
jsladerman committed Oct 21, 2024
1 parent 0e7a0ca commit b424252
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 5 deletions.
7 changes: 7 additions & 0 deletions src/components/Typography.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
25 changes: 23 additions & 2 deletions src/components/custom-page/SectionHeader.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,26 @@
import { type SectionHeaderComponentFragment } from '@src/generated/graphqlDirectus'

export function SectionHeader({ spacing }: SectionHeaderComponentFragment) {
return <div>SectionHeader</div>
import { cn } from '../cn'
import { Body1, Hero2, OverlineLabel } from '../Typography'

import { getSpacingClassName } from './common'

export function SectionHeader({
spacing,
overline,
title,
description,
}: SectionHeaderComponentFragment) {
return (
<section
className={cn(
getSpacingClassName(spacing),
'm-auto flex w-1/2 flex-col items-center gap-medium'
)}
>
{overline && <OverlineLabel>{overline}</OverlineLabel>}
<Hero2>{title}</Hero2>
<Body1 $color="text-light">{description}</Body1>
</section>
)
}
24 changes: 21 additions & 3 deletions src/generated/graphqlDirectus.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5724,8 +5724,11 @@ export type Create_Rich_Text_Columns_Input = {
export type Create_Section_Header_Input = {
date_created?: InputMaybe<Scalars['Date']['input']>;
date_updated?: InputMaybe<Scalars['Date']['input']>;
description?: InputMaybe<Scalars['String']['input']>;
id?: InputMaybe<Scalars['ID']['input']>;
overline?: InputMaybe<Scalars['String']['input']>;
spacing?: InputMaybe<Scalars['String']['input']>;
title?: InputMaybe<Scalars['String']['input']>;
user_created?: InputMaybe<Create_Directus_Users_Input>;
user_updated?: InputMaybe<Create_Directus_Users_Input>;
};
Expand Down Expand Up @@ -8266,8 +8269,11 @@ export type Section_Header = {
date_created_func?: Maybe<Datetime_Functions>;
date_updated?: Maybe<Scalars['Date']['output']>;
date_updated_func?: Maybe<Datetime_Functions>;
description?: Maybe<Scalars['String']['output']>;
id: Scalars['ID']['output'];
overline?: Maybe<Scalars['String']['output']>;
spacing?: Maybe<Scalars['String']['output']>;
title?: Maybe<Scalars['String']['output']>;
user_created?: Maybe<Directus_Users>;
user_updated?: Maybe<Directus_Users>;
};
Expand Down Expand Up @@ -8310,8 +8316,11 @@ export type Section_Header_Aggregated_Count = {
__typename?: 'section_header_aggregated_count';
date_created?: Maybe<Scalars['Int']['output']>;
date_updated?: Maybe<Scalars['Int']['output']>;
description?: Maybe<Scalars['Int']['output']>;
id?: Maybe<Scalars['Int']['output']>;
overline?: Maybe<Scalars['Int']['output']>;
spacing?: Maybe<Scalars['Int']['output']>;
title?: Maybe<Scalars['Int']['output']>;
user_created?: Maybe<Scalars['Int']['output']>;
user_updated?: Maybe<Scalars['Int']['output']>;
};
Expand All @@ -8328,8 +8337,11 @@ export type Section_Header_Filter = {
date_created_func?: InputMaybe<Datetime_Function_Filter_Operators>;
date_updated?: InputMaybe<Date_Filter_Operators>;
date_updated_func?: InputMaybe<Datetime_Function_Filter_Operators>;
description?: InputMaybe<String_Filter_Operators>;
id?: InputMaybe<Number_Filter_Operators>;
overline?: InputMaybe<String_Filter_Operators>;
spacing?: InputMaybe<String_Filter_Operators>;
title?: InputMaybe<String_Filter_Operators>;
user_created?: InputMaybe<Directus_Users_Filter>;
user_updated?: InputMaybe<Directus_Users_Filter>;
};
Expand Down Expand Up @@ -9692,8 +9704,11 @@ export type Update_Rich_Text_Columns_Input = {
export type Update_Section_Header_Input = {
date_created?: InputMaybe<Scalars['Date']['input']>;
date_updated?: InputMaybe<Scalars['Date']['input']>;
description?: InputMaybe<Scalars['String']['input']>;
id?: InputMaybe<Scalars['ID']['input']>;
overline?: InputMaybe<Scalars['String']['input']>;
spacing?: InputMaybe<Scalars['String']['input']>;
title?: InputMaybe<Scalars['String']['input']>;
user_created?: InputMaybe<Update_Directus_Users_Input>;
user_updated?: InputMaybe<Update_Directus_Users_Input>;
};
Expand Down Expand Up @@ -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 };

Expand All @@ -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 };

Expand Down Expand Up @@ -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`
Expand Down
3 changes: 3 additions & 0 deletions src/graph/directus/customPages.graphql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,9 @@ fragment LogoStripComponent on logo_strip {

fragment SectionHeaderComponent on section_header {
spacing
overline
title
description
}

fragment LargeImageComponent on large_image {
Expand Down

0 comments on commit b424252

Please sign in to comment.