WS-BOILER-PLATE: Sample component

src/app/components/BoilerPlateComponent/README.md

@@ -0,0 +1,7 @@
+## Description
+
+Renders a formatted user defined text.
+
+| Parameter    | type   | example           |
+| ------------ | ------ | ----------------- |
+| textToRender | string | "Hello Everyone!" |

src/app/components/BoilerPlateComponent/index.stories.tsx

@@ -0,0 +1,26 @@
+import HelloWorld, { BoilerPlateProps } from '.';
+import { ServiceContextProvider } from '#app/contexts/ServiceContext';
+import readme from './README.md';
+import metadata from './metadata.json';
+
+
+
+const Component = ({ textToRender }: BoilerPlateProps) => (
+  <ServiceContextProvider service={'pidgin'}>
+    <HelloWorld textToRender={textToRender} />
+  </ServiceContextProvider>
+);
+
+export default {
+  title: 'Components/BoilerPlateComponent',
+  Component,
+  parameters: {
+    docs: { readme },
+    metadata,
+  },
+  args: {
+    textToRender: 'Example Text',
+  },
+};
+
+export const ExampleBoilerPlateComponent = Component;

src/app/components/BoilerPlateComponent/index.style.ts

@@ -0,0 +1,11 @@
+import { css, Theme } from '@emotion/react';
+
+export default {
+  text: ({ palette, mq }: Theme) =>
+    css({
+      color: palette.GREY_6,
+      [mq.GROUP_1_MAX_WIDTH]: {
+        color: palette.POSTBOX,
+      },
+    }),
+};

src/app/components/BoilerPlateComponent/index.test.tsx

@@ -0,0 +1,22 @@
+import { render } from '#app/components/react-testing-library-with-providers';
+import HelloWorld from '.';
+
+describe('BoilerPlateComponent', () => {
+  describe('formatting behaviour', () => {
+    it.each([
+      { text: 'Hello World' },
+      { text: 'Goodbye World' },
+      { text: 'Good Evevning World' },
+    ])(`should render the service and the text $text`, ({ text }) => {
+      const { container } = render(<HelloWorld textToRender={text} />, {
+        service: 'pidgin',
+      });
+
+      const resultingHeading = container.querySelector('h2');
+      const resultingText = container.querySelector('span');
+
+      expect(resultingHeading?.innerHTML).toBe('You are on pidgin');
+      expect(resultingText?.innerHTML).toBe(text);
+    });
+  });
+});

src/app/components/BoilerPlateComponent/index.tsx

@@ -0,0 +1,29 @@
+import { use } from 'react';
+import { ServiceContext } from '#app/contexts/ServiceContext';
+import Text from '#app/components/Text';
+import style from './index.style';
+import Heading from '../Heading';
+
+export type BoilerPlateProps = {
+  textToRender: string;
+};
+
+const SERVICE_ALLOW_LIST = ['mundo'];
+
+export default ({ textToRender }: BoilerPlateProps) => {
+  const { service } = use(ServiceContext);
+  if (!SERVICE_ALLOW_LIST.includes(service)) {
+    return null;
+  }
+
+  return (
+    <>
+      <Heading level={2} css={style.text}>
+        You are on {service}
+      </Heading>
+      <Text css={style.text} size="brevier">
+        {textToRender}
+      </Text>
+    </>
+  );
+};

src/app/components/BoilerPlateComponent/metadata.json

@@ -0,0 +1,29 @@
+{
+  "alpha": true,
+  "lastUpdated": {
+    "day": "<Current Day>",
+    "month": "<Current Month>",
+    "year": "<Current Year>"
+  },
+  "uxAccessibilityDoc": {
+    "done": true,
+    "reference": {
+      "url": "<Figma Document Link>",
+      "label": "Screen Reader UX"
+    }
+  },
+  "acceptanceCriteria": {
+    "done": true,
+    "reference": {
+      "url": "<Dropbox Link>",
+      "label": "Accessibility Acceptance Criteria"
+    }
+  },
+  "swarm": {
+    "done": true,
+    "reference": {
+      "url": "<Dropbox Link>",
+      "label": "Accessibility Swarm Notes"
+    }
+  }
+}

src/app/pages/ArticlePage/ArticlePage.tsx

@@ -60,6 +60,7 @@ import ContinueReadingButton, {
 } from '#app/components/ContinueReadingButton';
 import SaveArticleButton from '#app/components/SaveArticleButton';
 import isLive from '#lib/utilities/isLive';
+import BoilerPlateComponent from '#app/components/BoilerPlateComponent';
 import ElectionBanner from './ElectionBanner';
 import ImageWithCaption from '../../components/ImageWithCaption';
 import AdContainer from '../../components/Ad';
@@ -502,6 +503,7 @@ const ArticlePage = ({
       <ElectionBanner aboutTags={aboutTags} taggings={taggings} />
       <div css={styles.grid}>
         <div css={!isPGL ? styles.primaryColumn : styles.pglColumn}>
+          <BoilerPlateComponent textToRender="My Fantastic Component!" />
           <main css={styles.mainContent} role="main">
             <Blocks
               blocks={articleBlocks}

src/app/pages/HomePage/HomePage.tsx

@@ -2,6 +2,7 @@ import { Fragment, use } from 'react';
 import VisuallyHiddenText from '#app/components/VisuallyHiddenText';
 import PWAPromotionalBanner from '#app/components/PWAPromotionalBanner';
 import AccountPromotionalBanner from '#app/components/Account/AccountPromotionalBanner';
+import BoilerPlateComponent from '#app/components/BoilerPlateComponent';
 import ATIAnalytics from '../../components/ATIAnalytics';
 import {
   Curation,
@@ -63,6 +64,7 @@ const HomePage = ({ pageData }: HomePageProps) => {
   return (
     <>
       {/* EXPERIMENT: PWA Promotional Banner */}
+
       <PWAPromotionalBanner />
       <AccountPromotionalBanner />
       <ChartbeatAnalytics title={title} />
@@ -90,6 +92,7 @@ const HomePage = ({ pageData }: HomePageProps) => {
         </VisuallyHiddenText>
         <div css={styles.inner}>
           <div css={styles.margins}>
+            <BoilerPlateComponent textToRender="My Amazing Component for Home Pages" />
             {curations.map(
               (
                 {