import

Author: stephenliang

frontend/apps/design-system-storybook/public/images/bg-pattern.png

@@ -0,0 +1,29 @@
+const assertions = {
+  'bf-cache': 'off',
+  'color-contrast': 'off',
+  'inspector-issues': 'off',
+  'offscreen-images': ['error', {minScore: 0.5, maxLength: 1}],
+  'total-byte-weight': ['error', {minScore: 0.5}],
+  'unused-css-rules': ['error', {maxLength: 5}],
+  'unused-javascript': ['error', {maxLength: 10}],
+  'uses-text-compression': ['error', {maxLength: 5}],
+  'third-party-cookies': 'off',
+  'uses-rel-preconnect': 'off',
+};
+
+if (process.env.STAGE !== 'production') {
+  // Not crawlable in preprod
+  assertions['is-crawlable'] = 'off';
+}
+
+module.exports = {
+  ci: {
+    assert: {
+      preset: 'lighthouse:recommended',
+      assertions,
+    },
+    upload: {
+      target: 'temporary-public-storage',
+    },
+  },
+};

frontend/apps/design-system-storybook/public/images/image-component.png

@@ -0,0 +1,40 @@
+import {GoogleAnalytics} from '@next/third-parties/google';
+import {headers} from 'next/headers';
+
+import {getBrandFromHostname} from '@/config/brand';
+import {getGoogleAnalyticsMeasurementId} from '@/config/ga4';
+import {getStage} from '@/config/stage';
+import {generateBootstrapValues} from '@/providers/statsig/statsig-backend';
+import StatsigProvider from '@/providers/statsig/StatsigProvider';
+
+/**
+ * Nested asynchronous layout to temporarily workaround Font Awesome imports going out of order due to CSS Chunking
+ *
+ * Long term fix: https://codedotorg.atlassian.net/browse/CMS-413
+ */
+export default async function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const hostname = (await headers()).get('Host');
+  const brand = getBrandFromHostname(hostname);
+  const googleAnalyticsMeasurementId = getGoogleAnalyticsMeasurementId(brand);
+  const statsigBootstrapValues = await generateBootstrapValues();
+  const statsigClientKey = process.env.STATSIG_CLIENT_KEY;
+
+  return (
+    <>
+      {googleAnalyticsMeasurementId && (
+        <GoogleAnalytics gaId={googleAnalyticsMeasurementId} />
+      )}
+      <StatsigProvider
+        stage={getStage()}
+        clientKey={statsigClientKey}
+        values={statsigBootstrapValues}
+      >
+        {children}
+      </StatsigProvider>
+    </>
+  );
+}

frontend/apps/marketing/.lighthouserc.js

@@ -0,0 +1,20 @@
+import type {MetadataRoute} from 'next';
+
+import {getStage} from '@/config/stage';
+
+const DISALLOW_ALL = {
+  userAgent: '*',
+  disallow: '/',
+};
+
+export default function robots(): MetadataRoute.Robots {
+  const rules = [];
+
+  if (getStage() !== 'production') {
+    rules.push(DISALLOW_ALL);
+  }
+
+  return {
+    rules,
+  };
+}

frontend/apps/marketing/src/app/[locale]/layout.tsx

@@ -0,0 +1,81 @@
+import {EntryFields, BaseEntry} from 'contentful';
+import {useMemo} from 'react';
+
+import FAQAccordion, {
+  FAQAccordionItem,
+} from '@code-dot-org/component-library/accordrion/faqAccordion';
+
+type FAQAccordionContentfulProps = {
+  faqs?: (BaseEntry & {
+    fields: {
+      question: EntryFields.Text | EntryFields.RichText;
+      answer: EntryFields.Text | EntryFields.RichText;
+    };
+  })[];
+};
+
+const checkIfEntryFieldIsRichText = (
+  entry: BaseEntry & {
+    fields: {[key: string]: EntryFields.Text | EntryFields.RichText};
+  },
+  fieldName: string,
+) =>
+  typeof entry.fields[fieldName] !== 'string' &&
+  'content' in entry.fields[fieldName];
+
+const FAQAccordionContentful: React.FunctionComponent<
+  FAQAccordionContentfulProps
+> = ({faqs}) => {
+  const faqItems = useMemo(
+    () =>
+      faqs?.filter(Boolean).map(faq => {
+        let id, question, questionString, answer, answerString;
+
+        if (checkIfEntryFieldIsRichText(faq, 'question')) {
+          question =
+            'Rich Text is not supported yet. Please use Text type instead';
+          questionString = question;
+          id = 'rich-text-not-supported-yet';
+        } else {
+          question = faq.fields.question as string;
+          questionString = question;
+          id = question.replace(' ', '-').toLowerCase();
+        }
+
+        if (checkIfEntryFieldIsRichText(faq, 'answer')) {
+          answer =
+            'Rich Text is not supported yet. Please use Text type instead';
+          answerString = answer;
+        } else {
+          answer = faq.fields.answer as string;
+          answerString = answer;
+        }
+
+        return {
+          id,
+          label: question,
+          questionString,
+          content: answer,
+          answerString,
+        } as FAQAccordionItem;
+      }) || [],
+    [faqs],
+  );
+
+  // Show placeholder text until a content entry is added
+  if (!faqItems.length) {
+    return (
+      <div style={{color: 'var(--text-neutral-primary)'}}>
+        <em>
+          <strong>❓ FAQ Accordion placeholder.</strong> Please add a "FAQs"
+          content type entry in the FAQ Accordion sidebar, save, and open the
+          preview tab to see the accordions in action.
+        </em>
+      </div>
+    );
+  }
+
+  return <FAQAccordion items={faqItems} />;
+};
+
+export default FAQAccordionContentful;

frontend/apps/marketing/src/app/robots.ts

@@ -0,0 +1,25 @@
+// Creates a definition for the FAQ Accordion component to be used in Contentful Studio
+import {ComponentDefinition} from '@contentful/experiences-sdk-react';
+
+export const FAQAccordionContentfulComponentDefinition: ComponentDefinition = {
+  id: 'faqAccordion',
+  name: 'FAQ Accordion',
+  category: '04: Advanced',
+  thumbnailUrl:
+    'https://images.ctfassets.net/90t6bu6vlf76/2T9oZuMVAKZ0HHTJB80ftF/e81cf4131a6580d1edd86c98e0539bfe/component_faq_thumbnail.png',
+  tooltip: {
+    description:
+      'A collapsible list for organizing frequently asked questions.',
+    imageUrl:
+      'https://images.ctfassets.net/90t6bu6vlf76/4ukyPBibtqgkevBelS8CzJ/c4691dd48e5cff1242591c459ee32560/component_faq_tooltip.png',
+  },
+  // Adding an empty array here so no default style options show in the Design tab.
+  builtInStyles: [],
+  children: false,
+  variables: {
+    faqs: {
+      displayName: 'FAQs',
+      type: 'Array',
+    },
+  },
+};

frontend/apps/marketing/src/components/faqAccordion/FAQAccordion.tsx

@@ -0,0 +1,3 @@
+// Export the Component Definition for use in Contentful Studio
+export {FAQAccordionContentfulComponentDefinition} from './FAQAccordionContentfulDefinition';
+export {default} from './FAQAccordion';

frontend/apps/marketing/src/components/faqAccordion/FAQAccordionContentfulDefinition.ts

@@ -0,0 +1,42 @@
+// Creates a definition for the Iframe component to be used in Contentful Studio
+import {ComponentDefinition} from '@contentful/experiences-sdk-react';
+
+export const IframeContentfulComponentDefinition: ComponentDefinition = {
+  id: 'iframe',
+  name: 'iFrame Block',
+  category: '04: Advanced',
+  thumbnailUrl:
+    'https://images.ctfassets.net/90t6bu6vlf76/1qy9FC9Bqb4ADrpyszIa5M/eb4c9dde9c1c90ab40036e8fa4412697/component_iframe_thumbnail.png',
+  tooltip: {
+    description:
+      'Embed external content using an iframe. Ideal for embedding forms, interactive tools, or third-party widgets within a page.',
+    imageUrl:
+      'https://images.ctfassets.net/90t6bu6vlf76/75ulYKJrhP83vfIre5Rm88/4a64acf16b04ac82f94dc0e6cb6c8b77/component_iframe_tooltip.png',
+  },
+  // Adding an empty array here so no default style options show in the Design tab.
+  builtInStyles: [],
+  variables: {
+    src: {
+      displayName: 'Embedded content URL',
+      type: 'Text',
+      group: 'content',
+      validations: {
+        required: true,
+      },
+    },
+    title: {
+      displayName: 'Embedded content title (for accessibility and SEO)',
+      type: 'Text',
+      group: 'content',
+      validations: {
+        required: true,
+      },
+    },
+    height: {
+      displayName: 'Embed container height',
+      type: 'Text',
+      defaultValue: '500px',
+      group: 'style',
+    },
+  },
+};

frontend/apps/marketing/src/components/faqAccordion/index.ts

@@ -0,0 +1,3 @@
+// Export the Component Definition for use in Contentful Studio
+export {IframeContentfulComponentDefinition} from './iframeContentfulDefinition';
+export {default} from '@code-dot-org/component-library/cms/iframe';

frontend/apps/marketing/src/components/iframe/iframeContentfulDefinition.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import DSCOImage, {ImageProps} from '@code-dot-org/component-library/cms/image';
+
+const Image: React.FC<ImageProps> = ({src}) => {
+  // Show placeholder text until a content entry is added
+  if (src == null) {
+    return (
+      <div style={{color: 'var(--text-neutral-primary)'}}>
+        <em>
+          <strong>🖼️ Image placeholder.</strong> Please add an "Image" content
+          type or image asset entry in the Content sidebar.
+        </em>
+      </div>
+    );
+  }
+
+  return <DSCOImage src={src} />;
+};
+
+export default Image;

frontend/apps/marketing/src/components/iframe/index.ts

@@ -0,0 +1,45 @@
+// Creates a definition for the Image component to be used in Contentful Studio
+import {ComponentDefinition} from '@contentful/experiences-sdk-react';
+
+export const ImageContentfulComponentDefinition: ComponentDefinition = {
+  id: 'image',
+  name: 'Image',
+  category: '03: Basic',
+  // Adding an empty array here so no default style options show in the Design tab.
+  builtInStyles: [],
+  thumbnailUrl:
+    'https://images.ctfassets.net/90t6bu6vlf76/2erlhdZVjByJbpMw9UKcWE/ee11e8a21370bbcd3b1b0b702b00d0e5/component_image_thumbnail.png',
+  tooltip: {
+    description:
+      'Add an image to your layout. Supports border and shadow decorations.',
+    imageUrl:
+      'https://images.ctfassets.net/90t6bu6vlf76/2Yl2LTZiEjpF9cTPzzC4TS/f6d57839806b1d310d1f527042c49e8b/component_image_tooltip.png',
+  },
+  variables: {
+    src: {
+      displayName: 'Image source',
+      type: 'Media',
+      defaultValue: undefined,
+      group: 'content',
+    },
+    altText: {
+      displayName: 'Alt text',
+      type: 'Text',
+      defaultValue: '',
+      group: 'content',
+    },
+    decoration: {
+      displayName: 'Decoration',
+      type: 'Text',
+      defaultValue: 'none',
+      group: 'style',
+      validations: {
+        in: [
+          {value: 'none', displayName: 'None'},
+          {value: 'border', displayName: 'Border'},
+          {value: 'shadow', displayName: 'Shadow'},
+        ],
+      },
+    },
+  },
+};

frontend/apps/marketing/src/components/image/Image.tsx

@@ -0,0 +1,3 @@
+// Export the Component Definition for use in Contentful Studio
+export {ImageContentfulComponentDefinition} from './imageContentfulDefinition';
+export {default} from './Image';

frontend/apps/marketing/src/components/image/imageContentfulDefinition.ts

@@ -0,0 +1,65 @@
+import {Entry, EntryFields} from 'contentful';
+import {useMemo} from 'react';
+
+import {
+  SimpleList,
+  SIMPLE_LIST_DEFAULT_ICON,
+  SimpleListProps,
+  SimpleListItem,
+} from '@code-dot-org/component-library/list';
+
+import {fontAwesomeV6BrandIconsMap} from '@/components/common/constants';
+
+export type SimpleListItemEntry = Entry & {
+  sys: {
+    id: string;
+  };
+  fields: {
+    shortText: EntryFields.Text;
+  };
+};
+
+export interface SimpleListContentfulProps
+  extends Omit<SimpleListProps, 'items'> {
+  items?: SimpleListItemEntry[];
+  iconName?: string;
+}
+
+const SimpleListContentful: React.FunctionComponent<
+  SimpleListContentfulProps
+> = ({items = [], iconName = SIMPLE_LIST_DEFAULT_ICON, ...props}) => {
+  const listItems: SimpleListItem[] = useMemo(
+    () =>
+      items.filter(Boolean).map(listItemEntry => ({
+        key: listItemEntry.sys.id,
+        label: listItemEntry.fields.shortText,
+      })),
+    [items],
+  );
+
+  // Show placeholder text until a content entry is added
+  if (!listItems.length) {
+    return (
+      <em>
+        <strong>🗂️ Simple List placeholder.</strong> Please add a "List" content
+        type entry in the List sidebar.
+      </em>
+    );
+  }
+
+  return (
+    <SimpleList
+      {...props}
+      items={listItems}
+      icon={{
+        iconName,
+        iconStyle: 'solid',
+        iconFamily: fontAwesomeV6BrandIconsMap.has(iconName)
+          ? 'brands'
+          : undefined,
+      }}
+    />
+  );
+};
+
+export default SimpleListContentful;