justeattakeaway · xander-marjoram · Sep 17, 2024 · Sep 11, 2024 · Sep 11, 2024 · Sep 12, 2024
@@ -0,0 +1,8 @@
+---
+"pie-storybook": patch
+"pie-docs": patch
+"pie-monorepo": patch
+---
+
+[Changed] - Add caching for `generate:component-statuses` build.
+[Added] - New `copy:component-statuses` script for `pie-docs` and `pie-storybook` which copies the status file from the root.
@@ -12,7 +12,7 @@
     "build:dev": "DEPLOYMENT_ENVIRONMENT='development' eleventy",
     "clean": "run -T rimraf dist",
     "dev": "npx @11ty/eleventy --serve --port=8080",
-    "generate:component-statuses": "npx generate-component-statuses",
+    "copy:component-statuses": "cp -v ../../component-statuses.json .",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "run -T eslint . --fix",
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",

diff --git a/apps/pie-docs/src/_11ty/shortcodes/contentPageImage.js b/apps/pie-docs/src/_11ty/shortcodes/contentPageImage.js
@@ -24,8 +24,7 @@ const createCaption = (config) => (config.caption
  * @param {string} config.variant - Sets the variant of the shortcut. Valid values are default, secondary and inverse. Defaults to "default"
  * @returns {string} a <figure> element containing the image(s) provided with the config settings applied.
  */
-// eslint-disable-next-line func-names
-module.exports = function (config) {
+module.exports = (config) => {
     const context = config.context ?? 'contentPage';
     const contextClass = `c-${context}-img`;
     const isImageFullContainerWidth = !config.width;

diff --git a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js
@@ -38,12 +38,12 @@ const getUrl = (element) => {
     return element.url;
 };
 
-module.exports = function ({
+module.exports = ({
     collection,
     itemKey,
     excludedElements,
     imageSrcDirectory,
-}) {
+}) => {
     const menuItems = find(collection, itemKey);
     const draftPages = getDraftPagesList(collection);
 

diff --git a/apps/pie-docs/src/_11ty/shortcodes/notification.js b/apps/pie-docs/src/_11ty/shortcodes/notification.js
@@ -45,8 +45,7 @@ const notificationSettings = {
  * @param {string} config.iconName - The name of the icon to use for the Notification".
  * @returns {string}
  */
-// eslint-disable-next-line func-names
-module.exports = function (config) {
+module.exports = (config) => {
     const context = config.context ?? 'contentPage';
     const contextClass = `c-${context}-notification`;
     const iconFill = getNotificationColour(notificationSettings[config.type].iconFill);

diff --git a/apps/pie-docs/src/_11ty/shortcodes/usage.js b/apps/pie-docs/src/_11ty/shortcodes/usage.js
@@ -27,9 +27,9 @@ const buildImage = ({
     const mobileImageMaxWidth = '600px';
 
     return `<picture class="c-usage-img">
-            ${mobileSrc ? `<source ${imageStyles} media="(max-width: ${mobileImageMaxWidth})" srcset="${mobileSrc}">` : ''}
-            <img src="${src}" ${imageStyles} ${imageAlt}>
-          </picture>`;
+          ${mobileSrc ? `<source ${imageStyles} media="(max-width: ${mobileImageMaxWidth})" srcset="${mobileSrc}">` : ''}
+          <img src="${src}" ${imageStyles} ${imageAlt}>
+        </picture>`;
 };
 
 const buildUsageCard = (usageType, { type, items, hasPadding = true }) => {
@@ -56,18 +56,17 @@ const buildUsageCard = (usageType, { type, items, hasPadding = true }) => {
         ? items.map((i) => buildImage(i)).join(' ')
         : list({ type: 'bullet', items });
 
-    return `
-    <article class="c-usage" style="--style-colour: ${styleColourValue};">
-      <figure>
-        <figcaption class="c-usage-heading">
-          ${svg}
-          ${displayName}
-        </figcaption>
-        <div class="${backdropClasses.join(' ')}">
-          ${content}
-        </div>
-      </figure>
-    </article>`;
+    return `<article class="c-usage" style="--style-colour: ${styleColourValue};">
+    <figure>
+      <figcaption class="c-usage-heading">
+        ${svg}
+        ${displayName}
+      </figcaption>
+      <div class="${backdropClasses.join(' ')}">
+        ${content}
+      </div>
+    </figure>
+  </article>`;
 };
 
 /**
@@ -83,9 +82,6 @@ const buildUsageCard = (usageType, { type, items, hasPadding = true }) => {
  * @param {UsageItem} usage.dont - Information for the "dont" section.
  * @returns {string} - The HTML representation of the usage component.
 */
-// eslint-disable-next-line func-names
-module.exports = function (props) {
-    return `<div class="c-usage-container">
-    ${Object.keys(metadata).map((usageType) => buildUsageCard(usageType, props[usageType])).join(' ')}
-  </div>`;
-};
+module.exports = (props) => `<div class="c-usage-container">
+  ${Object.keys(metadata).map((usageType) => buildUsageCard(usageType, props[usageType])).join(' ')}
+</div>`;
diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/usage.test.js.snap b/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/usage.test.js.snap
@@ -2,49 +2,46 @@
 
 exports[`usage.js > should return the expected HTML for the image type of the usage component 1`] = `
 "<div class=\\"c-usage-container\\">
-
-    <article class=\\"c-usage\\" style=\\"--style-colour: #017a39;\\">
-      <figure>
-        <figcaption class=\\"c-usage-heading\\">
-          <svg xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"presentation\\" focusable=\\"false\\" fill=\\"#017a39\\" viewBox=\\"0 0 16 16\\" height=\\"24\\" width=\\"24\\" aria-hidden=\\"true\\" class=\\"c-pieIcon c-pieIcon--checkCircle\\"><path fill-rule=\\"evenodd\\" d=\\"M1.478 8C1.478 4.4 4.4 1.478 8 1.478S14.522 4.4 14.522 8 11.6 14.522 8 14.522A6.524 6.524 0 0 1 1.478 8Zm1.305 0A5.222 5.222 0 0 0 8 13.217 5.221 5.221 0 0 0 13.217 8 5.222 5.222 0 0 0 8 2.783 5.222 5.222 0 0 0 2.783 8Zm2.887-.27L7 9.191l.009-.008 3.339-3.626.956.886-3.565 3.87a1.006 1.006 0 0 1-1.47.009L4.705 8.609l.966-.879Z\\" clip-rule=\\"evenodd\\"></path></svg>
-          Do
-        </figcaption>
-        <div class=\\"c-usage-backdrop c-usage-backdrop--hasImage c-usage-backdrop--hasPadding\\">
-          <picture class=\\"c-usage-img\\">
-            <source style=\\"--img-width: 200px;\\" media=\\"(max-width: 600px)\\" srcset=\\"some/path/to/mobile/image\\">
-            <img src=\\"some/path/to/image\\" style=\\"--img-width: 200px;\\" alt=\\"foo bar\\">
-          </picture>
-        </div>
-      </figure>
-    </article> 
-    <article class=\\"c-usage\\" style=\\"--style-colour: #d50525;\\">
-      <figure>
-        <figcaption class=\\"c-usage-heading\\">
-          <svg xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"presentation\\" focusable=\\"false\\" fill=\\"#d50525\\" viewBox=\\"0 0 16 16\\" height=\\"24\\" width=\\"24\\" aria-hidden=\\"true\\" class=\\"c-pieIcon c-pieIcon--closeCircle\\"><path d=\\"M10.87 6.058 8.928 8l1.942 1.943-.927.927L8 8.928 6.058 10.87l-.928-.927L7.072 8 5.13 6.058l.928-.928L8 7.072 9.943 5.13l.927.928ZM14.781 8A6.782 6.782 0 1 1 8 1.219 6.79 6.79 0 0 1 14.781 8ZM13.47 8A5.469 5.469 0 1 0 2.53 8a5.469 5.469 0 0 0 10.938 0Z\\"></path></svg>
-          Don't
-        </figcaption>
-        <div class=\\"c-usage-backdrop c-usage-backdrop--hasImage c-usage-backdrop--hasPadding\\">
-          <picture class=\\"c-usage-img\\">
-            <source style=\\"--img-width: 200px;\\" media=\\"(max-width: 600px)\\" srcset=\\"some/path/to/mobile/image\\">
-            <img src=\\"some/path/to/image\\" style=\\"--img-width: 200px;\\" alt=\\"foo bar\\">
-          </picture>
-        </div>
-      </figure>
-    </article>
-  </div>"
+  <article class=\\"c-usage\\" style=\\"--style-colour: #017a39;\\">
+    <figure>
+      <figcaption class=\\"c-usage-heading\\">
+        <svg xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"presentation\\" focusable=\\"false\\" fill=\\"#017a39\\" viewBox=\\"0 0 16 16\\" height=\\"24\\" width=\\"24\\" aria-hidden=\\"true\\" class=\\"c-pieIcon c-pieIcon--checkCircle\\"><path fill-rule=\\"evenodd\\" d=\\"M1.478 8C1.478 4.4 4.4 1.478 8 1.478S14.522 4.4 14.522 8 11.6 14.522 8 14.522A6.524 6.524 0 0 1 1.478 8Zm1.305 0A5.222 5.222 0 0 0 8 13.217 5.221 5.221 0 0 0 13.217 8 5.222 5.222 0 0 0 8 2.783 5.222 5.222 0 0 0 2.783 8Zm2.887-.27L7 9.191l.009-.008 3.339-3.626.956.886-3.565 3.87a1.006 1.006 0 0 1-1.47.009L4.705 8.609l.966-.879Z\\" clip-rule=\\"evenodd\\"></path></svg>
+        Do
+      </figcaption>
+      <div class=\\"c-usage-backdrop c-usage-backdrop--hasImage c-usage-backdrop--hasPadding\\">
+        <picture class=\\"c-usage-img\\">
+          <source style=\\"--img-width: 200px;\\" media=\\"(max-width: 600px)\\" srcset=\\"some/path/to/mobile/image\\">
+          <img src=\\"some/path/to/image\\" style=\\"--img-width: 200px;\\" alt=\\"foo bar\\">
+        </picture>
+      </div>
+    </figure>
+  </article> <article class=\\"c-usage\\" style=\\"--style-colour: #d50525;\\">
+    <figure>
+      <figcaption class=\\"c-usage-heading\\">
+        <svg xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"presentation\\" focusable=\\"false\\" fill=\\"#d50525\\" viewBox=\\"0 0 16 16\\" height=\\"24\\" width=\\"24\\" aria-hidden=\\"true\\" class=\\"c-pieIcon c-pieIcon--closeCircle\\"><path d=\\"M10.87 6.058 8.928 8l1.942 1.943-.927.927L8 8.928 6.058 10.87l-.928-.927L7.072 8 5.13 6.058l.928-.928L8 7.072 9.943 5.13l.927.928ZM14.781 8A6.782 6.782 0 1 1 8 1.219 6.79 6.79 0 0 1 14.781 8ZM13.47 8A5.469 5.469 0 1 0 2.53 8a5.469 5.469 0 0 0 10.938 0Z\\"></path></svg>
+        Don't
+      </figcaption>
+      <div class=\\"c-usage-backdrop c-usage-backdrop--hasImage c-usage-backdrop--hasPadding\\">
+        <picture class=\\"c-usage-img\\">
+          <source style=\\"--img-width: 200px;\\" media=\\"(max-width: 600px)\\" srcset=\\"some/path/to/mobile/image\\">
+          <img src=\\"some/path/to/image\\" style=\\"--img-width: 200px;\\" alt=\\"foo bar\\">
+        </picture>
+      </div>
+    </figure>
+  </article>
+</div>"
 `;
 
 exports[`usage.js > should return the expected HTML for the text type of the usage component 1`] = `
 "<div class=\\"c-usage-container\\">
-
-    <article class=\\"c-usage\\" style=\\"--style-colour: #017a39;\\">
-      <figure>
-        <figcaption class=\\"c-usage-heading\\">
-          <svg xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"presentation\\" focusable=\\"false\\" fill=\\"#017a39\\" viewBox=\\"0 0 16 16\\" height=\\"24\\" width=\\"24\\" aria-hidden=\\"true\\" class=\\"c-pieIcon c-pieIcon--checkCircle\\"><path fill-rule=\\"evenodd\\" d=\\"M1.478 8C1.478 4.4 4.4 1.478 8 1.478S14.522 4.4 14.522 8 11.6 14.522 8 14.522A6.524 6.524 0 0 1 1.478 8Zm1.305 0A5.222 5.222 0 0 0 8 13.217 5.221 5.221 0 0 0 13.217 8 5.222 5.222 0 0 0 8 2.783 5.222 5.222 0 0 0 2.783 8Zm2.887-.27L7 9.191l.009-.008 3.339-3.626.956.886-3.565 3.87a1.006 1.006 0 0 1-1.47.009L4.705 8.609l.966-.879Z\\" clip-rule=\\"evenodd\\"></path></svg>
-          Do
-        </figcaption>
-        <div class=\\"c-usage-backdrop c-usage-backdrop--hasPadding\\">
-          <ul class=\\"c-list c-list--bullet\\"  >
+  <article class=\\"c-usage\\" style=\\"--style-colour: #017a39;\\">
+    <figure>
+      <figcaption class=\\"c-usage-heading\\">
+        <svg xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"presentation\\" focusable=\\"false\\" fill=\\"#017a39\\" viewBox=\\"0 0 16 16\\" height=\\"24\\" width=\\"24\\" aria-hidden=\\"true\\" class=\\"c-pieIcon c-pieIcon--checkCircle\\"><path fill-rule=\\"evenodd\\" d=\\"M1.478 8C1.478 4.4 4.4 1.478 8 1.478S14.522 4.4 14.522 8 11.6 14.522 8 14.522A6.524 6.524 0 0 1 1.478 8Zm1.305 0A5.222 5.222 0 0 0 8 13.217 5.221 5.221 0 0 0 13.217 8 5.222 5.222 0 0 0 8 2.783 5.222 5.222 0 0 0 2.783 8Zm2.887-.27L7 9.191l.009-.008 3.339-3.626.956.886-3.565 3.87a1.006 1.006 0 0 1-1.47.009L4.705 8.609l.966-.879Z\\" clip-rule=\\"evenodd\\"></path></svg>
+        Do
+      </figcaption>
+      <div class=\\"c-usage-backdrop c-usage-backdrop--hasPadding\\">
+        <ul class=\\"c-list c-list--bullet\\"  >
         <li class=\\"c-list-item\\">
 
 
@@ -55,17 +52,16 @@ exports[`usage.js > should return the expected HTML for the text type of the usa
         <span>Lorem ipsum dolor</span>
         </li>
     </ul>
-        </div>
-      </figure>
-    </article> 
-    <article class=\\"c-usage\\" style=\\"--style-colour: #d50525;\\">
-      <figure>
-        <figcaption class=\\"c-usage-heading\\">
-          <svg xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"presentation\\" focusable=\\"false\\" fill=\\"#d50525\\" viewBox=\\"0 0 16 16\\" height=\\"24\\" width=\\"24\\" aria-hidden=\\"true\\" class=\\"c-pieIcon c-pieIcon--closeCircle\\"><path d=\\"M10.87 6.058 8.928 8l1.942 1.943-.927.927L8 8.928 6.058 10.87l-.928-.927L7.072 8 5.13 6.058l.928-.928L8 7.072 9.943 5.13l.927.928ZM14.781 8A6.782 6.782 0 1 1 8 1.219 6.79 6.79 0 0 1 14.781 8ZM13.47 8A5.469 5.469 0 1 0 2.53 8a5.469 5.469 0 0 0 10.938 0Z\\"></path></svg>
-          Don't
-        </figcaption>
-        <div class=\\"c-usage-backdrop c-usage-backdrop--hasPadding\\">
-          <ul class=\\"c-list c-list--bullet\\"  >
+      </div>
+    </figure>
+  </article> <article class=\\"c-usage\\" style=\\"--style-colour: #d50525;\\">
+    <figure>
+      <figcaption class=\\"c-usage-heading\\">
+        <svg xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"presentation\\" focusable=\\"false\\" fill=\\"#d50525\\" viewBox=\\"0 0 16 16\\" height=\\"24\\" width=\\"24\\" aria-hidden=\\"true\\" class=\\"c-pieIcon c-pieIcon--closeCircle\\"><path d=\\"M10.87 6.058 8.928 8l1.942 1.943-.927.927L8 8.928 6.058 10.87l-.928-.927L7.072 8 5.13 6.058l.928-.928L8 7.072 9.943 5.13l.927.928ZM14.781 8A6.782 6.782 0 1 1 8 1.219 6.79 6.79 0 0 1 14.781 8ZM13.47 8A5.469 5.469 0 1 0 2.53 8a5.469 5.469 0 0 0 10.938 0Z\\"></path></svg>
+        Don't
+      </figcaption>
+      <div class=\\"c-usage-backdrop c-usage-backdrop--hasPadding\\">
+        <ul class=\\"c-list c-list--bullet\\"  >
         <li class=\\"c-list-item\\">
 
 
@@ -76,8 +72,8 @@ exports[`usage.js > should return the expected HTML for the text type of the usa
         <span>Lorem ipsum dolor</span>
         </li>
     </ul>
-        </div>
-      </figure>
-    </article>
-  </div>"
+      </div>
+    </figure>
+  </article>
+</div>"
 `;
@@ -13,7 +13,7 @@
       "dependsOn": [
         "^build",
         "clean",
-        "generate:component-statuses"
+        "copy:component-statuses"
       ],
       "outputs": [
         "dist/**"
@@ -23,7 +23,7 @@
       "cache": true,
       "dependsOn": [
         "^build",
-        "generate:component-statuses"
+        "copy:component-statuses"
       ]
     },
     "dev": {
@@ -32,6 +32,12 @@
         "build:dev"
       ]
     },
+    "copy:component-statuses": {
+      "dependsOn": [
+        "//#generate:component-statuses"
+      ],
+      "cache": false
+    },
     "test:generate-routes": {
       "cache": true,
       "dependsOn": [

@@ -8,7 +8,7 @@
     "build": "storybook build --output-dir dist && cp -R ./static ./dist",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "run -T eslint . --fix",
-    "generate:component-statuses": "npx generate-component-statuses"
+    "copy:component-statuses": "cp -v ../../component-statuses.json ."
   },
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",

@@ -8,15 +8,21 @@
       "cache": false,
       "dependsOn": [
         "^build",
-        "generate:component-statuses"
+        "copy:component-statuses"
       ]
     },
     "build": {
       "cache": true,
       "dependsOn": [
         "^build",
-        "generate:component-statuses"
+        "copy:component-statuses"
       ]
+    },
+    "copy:component-statuses": {
+      "dependsOn": [
+        "//#generate:component-statuses"
+      ],
+      "cache": false
     }
   }
 }
@@ -34,6 +34,7 @@
     "clean": "turbo run clean --filter=!pie-monorepo",
     "cz": "./packages/tools/pie-git-hooks-scripts/check-branch-name.js $(git symbolic-ref --short HEAD) && ./node_modules/cz-customizable/standalone.js",
     "dev": "turbo run dev --filter=!pie-monorepo",
+    "copy:component-statuses": "cross-env-shell turbo run copy:component-statuses --filter=!pie-monorepo --token=${TURBO_TOKEN}",
     "generate:component-statuses": "npx generate-component-statuses",
     "generate:examples": "cross-env-shell turbo run generate:examples --filter=!pie-monorepo --token=${TURBO_TOKEN}",
     "lint:config:fix": "eslint --fix turbo.json (packages|apps)/**/turbo.json",

@@ -6,7 +6,7 @@
       "dependsOn": [
         "^build",
         "build:react-wrapper",
-        "generate:component-statuses"
+        "//#generate:component-statuses"
       ],
       "outputs": [
         "dist/**"
@@ -55,12 +55,16 @@
         ".output/**"
       ]
     },
-    "generate:component-statuses": {
-      "cache": false,
+    "//#generate:component-statuses": {
+      "cache": true,
+      "inputs": [
+        "packages/components/**/package.json"
+      ],
       "outputs": [
-        "**/component-statuses.json"
+        "component-statuses.json"
       ]
     },
+    "copy:component-statuses": {},
     "watch": {
       "cache": true,
       "dependsOn": []
@@ -167,7 +171,7 @@
       "cache": false,
       "dependsOn": [
         "^build",
-        "generate:component-statuses"
+        "//#generate:component-statuses"
       ]
     }
   }