Merge branch 'main' into privacy-policy-test

justeattakeaway · Mar 10, 2023 · 6a89eb1 · 6a89eb1
2 parents f2f31e3 + 334d5b9
commit 6a89eb1
Show file tree

Hide file tree

Showing 36 changed files with 4,479 additions and 436 deletions.
diff --git a/.changeset/big-coins-eat.md b/.changeset/big-coins-eat.md
@@ -0,0 +1,6 @@
+---
+"pie-docs": minor
+---
+
+[updated] card component to allow icons, headings, content and internal links
+[updated] card component to add overlay to card image on hover
diff --git a/.changeset/chatty-crews-juggle.md b/.changeset/chatty-crews-juggle.md
@@ -0,0 +1,6 @@
+---
+"pie-docs": minor
+---
+
+[Added] Content for Engineers > Structure section of the docs site
+[Changed] Some small copy amends to the Engineers > Overview & Engineers > Our Vision pages
diff --git a/.changeset/fair-donuts-film.md b/.changeset/fair-donuts-film.md
@@ -0,0 +1,5 @@
+---
+"pie-docs": minor
+---
+
+[Changed] - Use `font/ttf` for preload type for PTMono font as `font/truetype' is invalid
diff --git a/.changeset/forty-dolphins-try.md b/.changeset/forty-dolphins-try.md
@@ -0,0 +1,6 @@
+---
+"pie-monorepo": minor
+---
+
+[Added] - `examples` folder for containing example apps
+[Changed] - build script to exclude `wc-react18` app
diff --git a/.changeset/fuzzy-hats-kiss.md b/.changeset/fuzzy-hats-kiss.md
@@ -0,0 +1,5 @@
+---
+"pie-docs": minor
+---
+
+[Changed] - Use cards for storybook links on the engineers contributing page
diff --git a/.changeset/hot-ducks-hope.md b/.changeset/hot-ducks-hope.md
@@ -0,0 +1,5 @@
+---
+"pie-docs": minor
+---
+
+[Changed] - Made the navigation sticky on desktop and scroll-locked on mobile
diff --git a/.changeset/ninety-panthers-thank.md b/.changeset/ninety-panthers-thank.md
@@ -0,0 +1,5 @@
+---
+"pie-docs": minor
+---
+
+[Changed] - Minor copy updates to engineer pages and correct aria-hidden usage in footer
diff --git a/.changeset/ten-ligers-provide.md b/.changeset/ten-ligers-provide.md
@@ -0,0 +1,5 @@
+---
+"wc-react18": minor
+---
+
+[Added] - new example react app for testing web components
diff --git a/apps/examples/wc-react18/.gitignore b/apps/examples/wc-react18/.gitignore
@@ -0,0 +1,4 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# production
+/build
diff --git a/apps/examples/wc-react18/README.md b/apps/examples/wc-react18/README.md
@@ -0,0 +1,9 @@
+### `yarn start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.\
diff --git a/apps/examples/wc-react18/package.json b/apps/examples/wc-react18/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "wc-react18",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "browserslist": [
+    "extends @justeat/browserslist-config-fozzie"
+  ]
+}
diff --git a/apps/examples/wc-react18/public/index.html b/apps/examples/wc-react18/public/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="" href="" />
+    <title></title>
+  </head>
+  <body>
+    <noscript></noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/apps/examples/wc-react18/src/App.js b/apps/examples/wc-react18/src/App.js
@@ -0,0 +1,7 @@
+function App () {
+    return (
+        <div>Hello World!</div>
+    );
+}
+
+export default App;
diff --git a/apps/examples/wc-react18/src/index.js b/apps/examples/wc-react18/src/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(<React.StrictMode><App /></React.StrictMode>);
diff --git a/apps/pie-docs/src/_11ty/shortcodes/card.js b/apps/pie-docs/src/_11ty/shortcodes/card.js
@@ -1,45 +1,115 @@
 const pieIconsSvg = require('../filters/pieIconsSvg');
 
-/**
- * A Card HTML component – takes an array of list items and turns them into a list of cards
- * @param {string[]} items - An array of card items
- * @returns {string}
- */
-// eslint-disable-next-line func-names
-module.exports = function ({ items }) {
-    const iconLink = pieIconsSvg({
+const buildLinkIcon = (isInternalLink) => (isInternalLink
+    ? pieIconsSvg({
+        name: 'arrow-right',
+        attrs: {
+            'aria-hidden': 'true',
+            height: 16,
+            width: 16,
+        },
+    })
+    : pieIconsSvg({
         name: 'link-external',
         attrs: {
             'aria-hidden': 'true',
             height: 21,
             width: 21,
         },
-    });
+    }));
+
+const buildCardLabel = (linkText, href, shouldOpenInNewTab, isInternalLink) => {
+    const labelClasses = [
+        'c-card-labelContainer',
+        isInternalLink && 'c-card-labelContainer--internalLink'
+    ].filter(Boolean).join(' ');
+
+    const labelTag = href ? 'a' : 'p';
+
+    const labelAttributes = [
+        href && `href="${href}"`,
+        href && shouldOpenInNewTab && 'target="_blank"'
+    ].filter(Boolean).join(' ');
 
+    return `<div class="${labelClasses}">
+                <${labelTag} class="c-card-label" ${labelAttributes}><span>${linkText}</span></${labelTag}>
+                ${href ? buildLinkIcon(isInternalLink) : ''}
+            </div>`;
+};
+
+const buildCardIcon = (icon, iconColour) => pieIconsSvg({
+    name: icon,
+    attrs: {
+        class: `c-card-icon c-card-icon--${iconColour}`,
+        'aria-hidden': 'true',
+        height: 48,
+        width: 48,
+    },
+});
+
+const buildCardContent = ({
+    icon, iconColour, heading, headingLevel = '2', content,
+}) => `<div class="c-card-container">
+            ${icon && iconColour ? `${buildCardIcon(icon, iconColour)}` : ''}
+            ${heading ? `<h${headingLevel} class="c-card-heading">${heading}</h${headingLevel}>` : ''}
+            ${content ? `<p class="c-card-content">${content}</p>` : ''}
+        </div>`;
+
+/**
+ * A Card HTML component – takes an array of list items and turns them into a list of cards
+ * @param {object[]} items - An array of card items
+ * @param {string} items.content - card content text
+ * @param {string} items.heading - card heading
+ * @param {string} items.headingLevel - level of heading e.g. "1" - `<h1></h1>`, "2" - `<h2></h2>`
+ * @param {string} items.href - card link path
+ * @param {string} items.icon - icon to be displayed at top of card
+ * @param {string} items.iconColour - background colour for icon
+ * @param {boolean} items.isInternalLink - should be true if card links to another docs site page
+ * @param {string} items.linkText - text for card link
+ * @param {boolean} items.shouldOpenInNewTab - should be true if card link is Okta secured
+ * @param {string} items.src - card image src
+ * @param {boolean} shouldFillContainer - If true card wrapper will fill the container width and cards will expand to fill container when wrapped
+ * @returns {string}
+ */
+// eslint-disable-next-line func-names
+module.exports = function ({ items, shouldFillContainer = false }) {
     const buildCard = ({
-        href, linkText, src, shouldOpenInNewTab = false,
+        content,
+        heading,
+        headingLevel,
+        href,
+        icon,
+        iconColour,
+        isInternalLink,
+        linkText,
+        shouldOpenInNewTab = false,
+        src,
     }) => {
-        const target = shouldOpenInNewTab ? 'target="_blank"' : '';
+        const cardHasImage = !!src;
+        const cardHasContent = (!!icon && !!iconColour) || !!heading || !!content;
 
-        const labelClasses = [
-            'c-card-labelContainer',
-            src && 'c-card-labelContainer--hasImage'
+        const cardClasses = [
+            'c-card',
+            cardHasImage && 'c-card--hasImage'
         ].filter(Boolean).join(' ');
 
-        return `<article class="c-card">
+        return `<article class="${cardClasses}">
+                    ${cardHasContent ? `${buildCardContent({
+            icon, iconColour, heading, headingLevel, content,
+        })}` : ''}
                     ${src ? `<img class="c-card-image" src="${src}" role="presentation" alt="">` : ''}
-                    <div class="${labelClasses}">
-                        <p class="c-card-label">
-                            <a href="${href}" ${target}><span>${linkText}</span></a>
-                        </p>
-                        ${iconLink}
-                    </div>
+                    ${buildCardLabel(linkText, href, shouldOpenInNewTab, isInternalLink)}
                 </article>`;
     };
 
     if (items.length > 1) {
+        const listClasses = [
+            'c-card-list',
+            shouldFillContainer && 'c-card-list--fillContainer'
+        ].filter(Boolean).join(' ');
+
         return `<div class="c-card-wrapper">
-                    <ul class="c-card-list">
+                    <ul class="${listClasses}">
                         ${Object.values(items).map((card) => `<li>${buildCard(card)}</li>`).join('')}
                     </ul>
                 </div>`;