diff --git a/src/components/custom-page/TwoColumnText.tsx b/src/components/custom-page/TwoColumnText.tsx new file mode 100644 index 00000000..a1b6f4d2 --- /dev/null +++ b/src/components/custom-page/TwoColumnText.tsx @@ -0,0 +1,29 @@ +import { Markdown } from '@pluralsh/design-system' + +import { type TwoColumnTextComponentFragment } from '@src/generated/graphqlDirectus' + +import { cn } from '../cn' + +import { getSpacingClassName } from './common' + +export function TwoColumnText({ + spacing, + main_content: mainContent, + side_content: sideContent, +}: TwoColumnTextComponentFragment) { + return ( +
+
+ +
+
+ +
+
+ ) +} diff --git a/src/components/custom-page/common.tsx b/src/components/custom-page/common.tsx index 367fa851..d5a82a13 100644 --- a/src/components/custom-page/common.tsx +++ b/src/components/custom-page/common.tsx @@ -9,6 +9,7 @@ import { LargeImage } from './LargeImage' import { LogoStrip } from './LogoStrip' import { MultiColumnText } from './MultiColumnText' import { SectionHeader } from './SectionHeader' +import { TwoColumnText } from './TwoColumnText' const spacingToClassName = { relaxed: 'my-[192px]', @@ -37,6 +38,8 @@ export function renderComponent( return case 'blog_cards': return + case 'two_column_text': + return case 'multi_column_text': return case 'customer_quote': diff --git a/src/generated/graphqlDirectus.ts b/src/generated/graphqlDirectus.ts index b81559c5..759990fc 100644 --- a/src/generated/graphqlDirectus.ts +++ b/src/generated/graphqlDirectus.ts @@ -116,6 +116,8 @@ export type Mutation = { create_stacks_items: Array; create_team_members_item?: Maybe; create_team_members_items: Array; + create_two_column_text_item?: Maybe; + create_two_column_text_items: Array; delete_apps_item?: Maybe; delete_apps_items?: Maybe; delete_article_cards_item?: Maybe; @@ -206,6 +208,8 @@ export type Mutation = { delete_stacks_items?: Maybe; delete_team_members_item?: Maybe; delete_team_members_items?: Maybe; + delete_two_column_text_item?: Maybe; + delete_two_column_text_items?: Maybe; update_app_defaults?: Maybe; update_apps_batch: Array; update_apps_item?: Maybe; @@ -348,6 +352,9 @@ export type Mutation = { update_team_members_batch: Array; update_team_members_item?: Maybe; update_team_members_items: Array; + update_two_column_text_batch: Array; + update_two_column_text_item?: Maybe; + update_two_column_text_items: Array; }; @@ -1071,6 +1078,22 @@ export type MutationCreate_Team_Members_ItemsArgs = { }; +export type MutationCreate_Two_Column_Text_ItemArgs = { + data: Create_Two_Column_Text_Input; +}; + + +export type MutationCreate_Two_Column_Text_ItemsArgs = { + data?: InputMaybe>; + filter?: InputMaybe; + limit?: InputMaybe; + offset?: InputMaybe; + page?: InputMaybe; + search?: InputMaybe; + sort?: InputMaybe>>; +}; + + export type MutationDelete_Apps_ItemArgs = { id: Scalars['ID']['input']; }; @@ -1521,6 +1544,16 @@ export type MutationDelete_Team_Members_ItemsArgs = { }; +export type MutationDelete_Two_Column_Text_ItemArgs = { + id: Scalars['ID']['input']; +}; + + +export type MutationDelete_Two_Column_Text_ItemsArgs = { + ids: Array>; +}; + + export type MutationUpdate_App_DefaultsArgs = { data: Update_App_Defaults_Input; }; @@ -2860,6 +2893,35 @@ export type MutationUpdate_Team_Members_ItemsArgs = { sort?: InputMaybe>>; }; + +export type MutationUpdate_Two_Column_Text_BatchArgs = { + data?: InputMaybe>; + filter?: InputMaybe; + limit?: InputMaybe; + offset?: InputMaybe; + page?: InputMaybe; + search?: InputMaybe; + sort?: InputMaybe>>; +}; + + +export type MutationUpdate_Two_Column_Text_ItemArgs = { + data: Update_Two_Column_Text_Input; + id: Scalars['ID']['input']; +}; + + +export type MutationUpdate_Two_Column_Text_ItemsArgs = { + data: Update_Two_Column_Text_Input; + filter?: InputMaybe; + ids: Array>; + limit?: InputMaybe; + offset?: InputMaybe; + page?: InputMaybe; + search?: InputMaybe; + sort?: InputMaybe>>; +}; + export type Query = { __typename?: 'Query'; app_defaults?: Maybe; @@ -3004,6 +3066,9 @@ export type Query = { team_members: Array; team_members_aggregated: Array; team_members_by_id?: Maybe; + two_column_text: Array; + two_column_text_aggregated: Array; + two_column_text_by_id?: Maybe; }; @@ -4176,6 +4241,32 @@ export type QueryTeam_Members_By_IdArgs = { id: Scalars['ID']['input']; }; + +export type QueryTwo_Column_TextArgs = { + filter?: InputMaybe; + limit?: InputMaybe; + offset?: InputMaybe; + page?: InputMaybe; + search?: InputMaybe; + sort?: InputMaybe>>; +}; + + +export type QueryTwo_Column_Text_AggregatedArgs = { + filter?: InputMaybe; + groupBy?: InputMaybe>>; + limit?: InputMaybe; + offset?: InputMaybe; + page?: InputMaybe; + search?: InputMaybe; + sort?: InputMaybe>>; +}; + + +export type QueryTwo_Column_Text_By_IdArgs = { + id: Scalars['ID']['input']; +}; + export type App_Defaults = { __typename?: 'app_defaults'; case_study?: Maybe; @@ -6055,6 +6146,17 @@ export type Create_Team_Members_Input = { title?: InputMaybe; }; +export type Create_Two_Column_Text_Input = { + date_created?: InputMaybe; + date_updated?: InputMaybe; + id?: InputMaybe; + main_content: Scalars['String']['input']; + side_content: Scalars['String']['input']; + spacing?: InputMaybe; + user_created?: InputMaybe; + user_updated?: InputMaybe; +}; + export type Cta = { __typename?: 'cta'; body_text?: Maybe; @@ -6278,9 +6380,10 @@ export type Custom_Pages_Components_Filter = { item__logo_strip?: InputMaybe; item__multi_column_text?: InputMaybe; item__section_header?: InputMaybe; + item__two_column_text?: InputMaybe; }; -export type Custom_Pages_Components_Item_Union = Blog_Cards | Cards | Cta | Customer_Quote | Hero | Large_Image | Logo_Strip | Multi_Column_Text | Section_Header; +export type Custom_Pages_Components_Item_Union = Blog_Cards | Cards | Cta | Customer_Quote | Hero | Large_Image | Logo_Strip | Multi_Column_Text | Section_Header | Two_Column_Text; export type Custom_Pages_Filter = { _and?: InputMaybe>>; @@ -9608,6 +9711,86 @@ export type Team_Members_Filter = { title?: InputMaybe; }; +export type Two_Column_Text = { + __typename?: 'two_column_text'; + date_created?: Maybe; + date_created_func?: Maybe; + date_updated?: Maybe; + date_updated_func?: Maybe; + id: Scalars['ID']['output']; + main_content: Scalars['String']['output']; + side_content: Scalars['String']['output']; + spacing?: Maybe; + user_created?: Maybe; + user_updated?: Maybe; +}; + + +export type Two_Column_TextUser_CreatedArgs = { + filter?: InputMaybe; + limit?: InputMaybe; + offset?: InputMaybe; + page?: InputMaybe; + search?: InputMaybe; + sort?: InputMaybe>>; +}; + + +export type Two_Column_TextUser_UpdatedArgs = { + filter?: InputMaybe; + limit?: InputMaybe; + offset?: InputMaybe; + page?: InputMaybe; + search?: InputMaybe; + sort?: InputMaybe>>; +}; + +export type Two_Column_Text_Aggregated = { + __typename?: 'two_column_text_aggregated'; + avg?: Maybe; + avgDistinct?: Maybe; + count?: Maybe; + countAll?: Maybe; + countDistinct?: Maybe; + group?: Maybe; + max?: Maybe; + min?: Maybe; + sum?: Maybe; + sumDistinct?: Maybe; +}; + +export type Two_Column_Text_Aggregated_Count = { + __typename?: 'two_column_text_aggregated_count'; + date_created?: Maybe; + date_updated?: Maybe; + id?: Maybe; + main_content?: Maybe; + side_content?: Maybe; + spacing?: Maybe; + user_created?: Maybe; + user_updated?: Maybe; +}; + +export type Two_Column_Text_Aggregated_Fields = { + __typename?: 'two_column_text_aggregated_fields'; + id?: Maybe; +}; + +export type Two_Column_Text_Filter = { + _and?: InputMaybe>>; + _or?: InputMaybe>>; + date_created?: InputMaybe; + date_created_func?: InputMaybe; + date_updated?: InputMaybe; + date_updated_func?: InputMaybe; + id?: InputMaybe; + main_content?: InputMaybe; + side_content?: InputMaybe; + spacing?: InputMaybe; + user_created?: InputMaybe; + user_updated?: InputMaybe; +}; + export type Update_App_Defaults_Input = { case_study?: InputMaybe; date_updated?: InputMaybe; @@ -10296,6 +10479,17 @@ export type Update_Team_Members_Input = { title?: InputMaybe; }; +export type Update_Two_Column_Text_Input = { + date_created?: InputMaybe; + date_updated?: InputMaybe; + id?: InputMaybe; + main_content?: InputMaybe; + side_content?: InputMaybe; + spacing?: InputMaybe; + user_created?: InputMaybe; + user_updated?: InputMaybe; +}; + export type EventFragment = { __typename?: 'events', id: string, name?: string | null, start_date?: any | null, end_date?: any | null, show_start_time: boolean, show_end_time?: boolean | null, timezone?: string | null, description?: string | null, fields?: any | null, ctas?: any | null }; export type EventsQueryVariables = Exact<{ [key: string]: never; }>; @@ -10380,7 +10574,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, heading?: string | null, body_text?: string | null, cta_text?: string | null, cta_url?: string | null } | { __typename?: 'customer_quote', spacing?: string | null, quote?: { __typename?: 'quotes', id: string, quote?: string | null, author_text?: string | null } | 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, overline?: 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?: '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?: 'multi_column_text', spacing?: string | null, columns?: Array<{ __typename?: 'multi_column_text_rich_text_columns', rich_text_columns_id?: { __typename?: 'rich_text_columns', icon?: string | null, heading?: string | null, body_text: string } | null } | null> | null } | { __typename?: 'section_header', spacing?: string | null, overline?: string | null, title?: string | null, description?: 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, heading?: string | null, body_text?: string | null, cta_text?: string | null, cta_url?: string | null } | { __typename?: 'customer_quote', spacing?: string | null, quote?: { __typename?: 'quotes', id: string, quote?: string | null, author_text?: string | null } | 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, overline?: 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?: '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?: 'multi_column_text', spacing?: string | null, columns?: Array<{ __typename?: 'multi_column_text_rich_text_columns', rich_text_columns_id?: { __typename?: 'rich_text_columns', icon?: string | null, heading?: string | null, body_text: string } | null } | null> | null } | { __typename?: 'section_header', spacing?: string | null, overline?: string | null, title?: string | null, description?: string | null } | { __typename?: 'two_column_text', spacing?: string | null, main_content: string, side_content: string } | null } | null> | null }; export type CustomPageTinyFragment = { __typename?: 'custom_pages', id: string, slug: string }; @@ -10394,7 +10588,7 @@ 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, heading?: string | null, body_text?: string | null, cta_text?: string | null, cta_url?: string | null } | { __typename?: 'customer_quote', spacing?: string | null, quote?: { __typename?: 'quotes', id: string, quote?: string | null, author_text?: string | null } | 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, overline?: 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?: '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?: 'multi_column_text', spacing?: string | null, columns?: Array<{ __typename?: 'multi_column_text_rich_text_columns', rich_text_columns_id?: { __typename?: 'rich_text_columns', icon?: string | null, heading?: string | null, body_text: string } | null } | null> | null } | { __typename?: 'section_header', spacing?: string | null, overline?: string | null, title?: string | null, description?: 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, heading?: string | null, body_text?: string | null, cta_text?: string | null, cta_url?: string | null } | { __typename?: 'customer_quote', spacing?: string | null, quote?: { __typename?: 'quotes', id: string, quote?: string | null, author_text?: string | null } | 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, overline?: 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?: '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?: 'multi_column_text', spacing?: string | null, columns?: Array<{ __typename?: 'multi_column_text_rich_text_columns', rich_text_columns_id?: { __typename?: 'rich_text_columns', icon?: string | null, heading?: string | null, body_text: string } | null } | null> | null } | { __typename?: 'section_header', spacing?: string | null, overline?: string | null, title?: string | null, description?: string | null } | { __typename?: 'two_column_text', spacing?: string | null, main_content: string, side_content: string } | 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 }; @@ -10410,6 +10604,8 @@ export type BlogCardsComponentFragment = { __typename?: 'blog_cards', spacing?: export type RichTextColumnFragment = { __typename?: 'rich_text_columns', icon?: string | null, heading?: string | null, body_text: string }; +export type TwoColumnTextComponentFragment = { __typename?: 'two_column_text', spacing?: string | null, main_content: string, side_content: string }; + export type MultiColumnTextComponentFragment = { __typename?: 'multi_column_text', spacing?: string | null, columns?: Array<{ __typename?: 'multi_column_text_rich_text_columns', rich_text_columns_id?: { __typename?: 'rich_text_columns', icon?: string | null, heading?: string | null, body_text: string } | null } | null> | null }; export type CustomerQuoteComponentFragment = { __typename?: 'customer_quote', spacing?: string | null, quote?: { __typename?: 'quotes', id: string, quote?: string | null, author_text?: string | null } | null }; @@ -10781,6 +10977,13 @@ export const LargeImageComponentFragmentDoc = gql` cta_url } ${ImageFileFragmentDoc}`; +export const TwoColumnTextComponentFragmentDoc = gql` + fragment TwoColumnTextComponent on two_column_text { + spacing + main_content + side_content +} + `; export const RichTextColumnFragmentDoc = gql` fragment RichTextColumn on rich_text_columns { icon @@ -10836,6 +11039,7 @@ export const CustomPageFragmentDoc = gql` ...LogoStripComponent ...SectionHeaderComponent ...LargeImageComponent + ...TwoColumnTextComponent ...MultiColumnTextComponent ...CardsComponent ...BlogCardsComponent @@ -10848,6 +11052,7 @@ export const CustomPageFragmentDoc = gql` ${LogoStripComponentFragmentDoc} ${SectionHeaderComponentFragmentDoc} ${LargeImageComponentFragmentDoc} +${TwoColumnTextComponentFragmentDoc} ${MultiColumnTextComponentFragmentDoc} ${CardsComponentFragmentDoc} ${BlogCardsComponentFragmentDoc} diff --git a/src/graph/directus/customPages.graphql b/src/graph/directus/customPages.graphql index dd7f58a7..95f0e874 100644 --- a/src/graph/directus/customPages.graphql +++ b/src/graph/directus/customPages.graphql @@ -8,6 +8,7 @@ fragment CustomPage on custom_pages { ...LogoStripComponent ...SectionHeaderComponent ...LargeImageComponent + ...TwoColumnTextComponent ...MultiColumnTextComponent ...CardsComponent ...BlogCardsComponent @@ -91,6 +92,12 @@ fragment RichTextColumn on rich_text_columns { body_text } +fragment TwoColumnTextComponent on two_column_text { + spacing + main_content + side_content +} + fragment MultiColumnTextComponent on multi_column_text { spacing columns {