From 9fcc6b7dc2bd95ca510b00f9031653d8586e5661 Mon Sep 17 00:00:00 2001 From: Maleh Duenas Date: Mon, 26 Aug 2024 15:24:02 +0200 Subject: [PATCH 01/10] feat(pie-docs): DSW-2268 adds dynamic display of index page cards --- apps/pie-docs/src/_11ty/shortcodes/index.js | 2 + .../src/_11ty/shortcodes/indexPageDisplay.js | 60 ++++++++++ .../indexPageDisplay.test.js.snap | 44 +++++++ .../_11ty/shortcodes/indexPageDisplay.test.js | 69 +++++++++++ .../test-menu-item/default.svg | 3 + .../test-menu-item/first-sub-item.svg | 17 +++ .../test-menu-item/second-sub-item.svg | 50 ++++++++ .../assets/img/index/components/_default.svg | 3 + .../assets/img/index/components/accordion.svg | 17 +++ .../img/index/components/bottom-sheet.svg | 50 ++++++++ .../assets/img/index/components/default.svg | 3 + .../assets/img/index/foundations/default.svg | 4 + .../img/index/foundations/design-tokens.svg | 110 ++++++++++++++++++ .../src/assets/styles/_dependencies.scss | 1 + .../assets/styles/components/_indexPage.scss | 26 +++++ .../component-status/component-status.md | 2 +- apps/pie-docs/src/components/components.md | 7 +- 17 files changed, 466 insertions(+), 2 deletions(-) create mode 100644 apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js create mode 100644 apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap create mode 100644 apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js create mode 100644 apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/default.svg create mode 100644 apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/first-sub-item.svg create mode 100644 apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/second-sub-item.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/_default.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/accordion.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/bottom-sheet.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/default.svg create mode 100644 apps/pie-docs/src/assets/img/index/foundations/default.svg create mode 100644 apps/pie-docs/src/assets/img/index/foundations/design-tokens.svg create mode 100644 apps/pie-docs/src/assets/styles/components/_indexPage.scss diff --git a/apps/pie-docs/src/_11ty/shortcodes/index.js b/apps/pie-docs/src/_11ty/shortcodes/index.js index 63f19b8a47..06269e73cf 100644 --- a/apps/pie-docs/src/_11ty/shortcodes/index.js +++ b/apps/pie-docs/src/_11ty/shortcodes/index.js @@ -5,6 +5,7 @@ const componentStatusTable = require('./componentStatusTable'); const contentPageImage = require('./contentPageImage'); const { contentLayout, contentItem } = require('./contentLayout'); const globalTokensWarning = require('./notifications/globalTokensWarning'); +const indexPageDisplay = require('./indexPageDisplay'); const link = require('./link'); const list = require('./list'); const mediaElement = require('./mediaElementList'); @@ -31,6 +32,7 @@ const addAllShortCodes = (eleventyConfig) => { eleventyConfig.addPairedShortcode('contentLayout', (shortcodeArgs) => deindentHTML(contentLayout(shortcodeArgs))); eleventyConfig.addPairedShortcode('contentItem', (shortcodeArgs) => deindentHTML(contentItem(shortcodeArgs))); eleventyConfig.addShortcode('globalTokensWarning', (shortcodeArgs) => deindentHTML(globalTokensWarning(shortcodeArgs))); + eleventyConfig.addShortcode('indexPageDisplay', (shortcodeArgs) => deindentHTML(indexPageDisplay(shortcodeArgs))); eleventyConfig.addShortcode('link', (shortcodeArgs) => deindentHTML(link(shortcodeArgs))); eleventyConfig.addShortcode('list', (shortcodeArgs) => deindentHTML(list(shortcodeArgs))); eleventyConfig.addShortcode('mediaElementList', (shortcodeArgs) => deindentHTML(mediaElement(shortcodeArgs))); diff --git a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js new file mode 100644 index 0000000000..26fc85e588 --- /dev/null +++ b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js @@ -0,0 +1,60 @@ +const { find } = require('@11ty/eleventy-navigation').navigation; +const fs = require('fs'); +const path = require('path'); + +/** IndexPageDisplay Shortcode - automatic page rendering: + * Render index items in a flexible grid. + * Every main item in our menu can now render an index page. This shortcode will loop on every child menu item and create an + * interactive card with a link to that menu item. Items can be excluded if specified. Images must exist for items not excluded. + * Mobile images are optional, desktop image will be rendered if mobile image is not provided. + * A default image will be rendered if desktop image is not provided and a warning is printed to the server console. + * Images must be added: + * - within a folder with the main menu item name, for example 'components/' 'foundations/' + * - image should have the name of the sub-menu in snakecase, for example Checkbox Group is called 'checkbox-group' + * - mobile images will use the same name with a mobile keyword, for example 'checkbox-group-mobile' + * @param {string} collection - It is the object from 11y collections.all https://www.11ty.dev/docs/collections/ + * @returns {string} itemKey - Is the key of the element in the main menu, and the page we will be rendering e.g. components + * @returns {string} excludedElements - Is the key of the element in the main menu, and the page we will be rendering e.g. 'Component Status' + */ +const defaultImageDirectory = '../../assets/img/index'; +const toSlug = (string) => string.toLowerCase().replace(/\s+/g, '-'); + +module.exports = function ({ + collection, + itemKey, + excludedElements, + imageSrcDirectory, +}) { + const menuItems = find(collection, itemKey); + const indexElements = menuItems.map((element) => { + if (!excludedElements.includes(element.title)) { + const menuItemSlug = toSlug(element.title); + const itemKeySlug = toSlug(itemKey); + const imageDirectory = imageSrcDirectory || defaultImageDirectory; + const imgSrc = `${imageDirectory}/${itemKeySlug}/${menuItemSlug}.svg`; + const imgMobileSrc = `${imageDirectory}/${itemKeySlug}/${menuItemSlug}-mobile.svg`; + const fallbackImage = `${imageDirectory}/${itemKeySlug}/default.svg`; + + const hasSource = fs.existsSync(path.join(__dirname, imgSrc)); + const hasMobileSource = fs.existsSync(path.join(__dirname, imgMobileSrc)); + + const renderFallbackImage = () => { + console.warn(`Fallback image used for ${menuItemSlug}. Please ensure image is provided.`); + return ``; + }; + + return ` +
+ + ${hasMobileSource ? `` : ''} + ${hasSource + ? `` + : renderFallbackImage()} + + ${element.title} +
`; + } + return ''; + }); + return `
${indexElements.join('')}
`; +}; diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap b/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap new file mode 100644 index 0000000000..cd844f3313 --- /dev/null +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap @@ -0,0 +1,44 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`indexPageDisplay.js > should return the expected HTML for an index page and render default image and warning when image is not provided 1`] = ` +"
+
+ + + \\"A + + First Sub Item +
+
+ + + \\"A + + Second Sub Item +
+
+ + + \\"A + + Third Sub Item without image +
" +`; + +exports[`indexPageDisplay.js > should return the expected HTML for an index page with excluded items 1`] = ` +"
+
+ + + \\"A + + First Sub Item +
+
+ + + \\"A + + Second Sub Item +
" +`; diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js b/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js new file mode 100644 index 0000000000..72afcd0900 --- /dev/null +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js @@ -0,0 +1,69 @@ +const indexPageDisplay = require('../../../_11ty/shortcodes/indexPageDisplay'); + +describe('indexPageDisplay.js', () => { + const testImageDirectory = '../../__tests__/_11ty/shortcodes/test-index-images'; + + // Sample of 11y collections.all https://www.11ty.dev/docs/collections/ + const collectionAll = [ + { + data: { + eleventyNavigation: { + key: 'First Sub Item', + parent: 'Test Menu Item', + }, + page: { + url: '/first-sub-item/', + }, + }, + }, + { + data: { + eleventyNavigation: { + key: 'Second Sub Item', + parent: 'Test Menu Item', + }, + page: { + url: '/second-sub-item/', + }, + }, + }, + { + data: { + eleventyNavigation: { + key: 'Third Sub Item without image', + parent: 'Test Menu Item', + }, + page: { + url: '/second-sub-item/', + }, + }, + }]; + + it('should return the expected HTML for an index page and render default image and warning when image is not provided', () => { + // act + const result = indexPageDisplay({ + collection: collectionAll, + itemKey: 'Test Menu Item', + excludedElements: [], + imageSrcDirectory: testImageDirectory, + }); + + // assert + expect(result) + .toMatchSnapshot(); + }); + + it('should return the expected HTML for an index page with excluded items', () => { + // act + const result = indexPageDisplay({ + collection: collectionAll, + itemKey: 'Test Menu Item', + excludedElements: ['Third Sub Item without image'], + imageSrcDirectory: testImageDirectory, + }); + + // assert + expect(result) + .toMatchSnapshot(); + }); +}); diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/default.svg b/apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/default.svg new file mode 100644 index 0000000000..bff901e991 --- /dev/null +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/default.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/first-sub-item.svg b/apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/first-sub-item.svg new file mode 100644 index 0000000000..3cb53a95a6 --- /dev/null +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/first-sub-item.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/second-sub-item.svg b/apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/second-sub-item.svg new file mode 100644 index 0000000000..b2f7a78fba --- /dev/null +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/second-sub-item.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/_default.svg b/apps/pie-docs/src/assets/img/index/components/_default.svg new file mode 100644 index 0000000000..25b30c7710 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/_default.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/pie-docs/src/assets/img/index/components/accordion.svg b/apps/pie-docs/src/assets/img/index/components/accordion.svg new file mode 100644 index 0000000000..3cb53a95a6 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/accordion.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/bottom-sheet.svg b/apps/pie-docs/src/assets/img/index/components/bottom-sheet.svg new file mode 100644 index 0000000000..b2f7a78fba --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/bottom-sheet.svg @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/default.svg b/apps/pie-docs/src/assets/img/index/components/default.svg new file mode 100644 index 0000000000..bff901e991 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/default.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/pie-docs/src/assets/img/index/foundations/default.svg b/apps/pie-docs/src/assets/img/index/foundations/default.svg new file mode 100644 index 0000000000..6cdfe30b8b --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/foundations/default.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pie-docs/src/assets/img/index/foundations/design-tokens.svg b/apps/pie-docs/src/assets/img/index/foundations/design-tokens.svg new file mode 100644 index 0000000000..d365d45b58 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/foundations/design-tokens.svg @@ -0,0 +1,110 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/styles/_dependencies.scss b/apps/pie-docs/src/assets/styles/_dependencies.scss index 248642e5ad..f6bf6ea5f3 100644 --- a/apps/pie-docs/src/assets/styles/_dependencies.scss +++ b/apps/pie-docs/src/assets/styles/_dependencies.scss @@ -45,6 +45,7 @@ @use 'components/header'; @use 'components/heroBanner'; @use 'components/heroContentLayout'; +@use 'components/indexPage'; @use 'components/link'; @use 'components/list'; @use 'components/mediaElementList'; diff --git a/apps/pie-docs/src/assets/styles/components/_indexPage.scss b/apps/pie-docs/src/assets/styles/components/_indexPage.scss new file mode 100644 index 0000000000..9bfa2c340c --- /dev/null +++ b/apps/pie-docs/src/assets/styles/components/_indexPage.scss @@ -0,0 +1,26 @@ +@use '../fozzie-config' as f; +@use '../variables' as v; +@use '@justeattakeaway/pie-css/scss' as p; + +.c-indexPage { + display: flex; + flex-wrap: wrap; + gap: var(--dt-spacing-g) var(--dt-spacing-e); + + .c-indexPage-menu-item { + display: flex; + flex-direction: column; + } + + .c-indexPage-link { + text-decoration: none; + color: inherit; + @include p.font-size(--dt-font-interactive-l-size); + @include p.line-height(--dt-font-interactive-l-line-height); + font-weight: var(--dt-font-interactive-l-weight); + + &:visited { + color: initial; + } + } +} diff --git a/apps/pie-docs/src/components/component-status/component-status.md b/apps/pie-docs/src/components/component-status/component-status.md index 051c1ca4b8..78a87fd46e 100644 --- a/apps/pie-docs/src/components/component-status/component-status.md +++ b/apps/pie-docs/src/components/component-status/component-status.md @@ -1,6 +1,6 @@ --- eleventyNavigation: - key: 'Component status' + key: 'Component Status' parent: Components order: 1 --- diff --git a/apps/pie-docs/src/components/components.md b/apps/pie-docs/src/components/components.md index 8bd154a7e1..4523ec1c6b 100644 --- a/apps/pie-docs/src/components/components.md +++ b/apps/pie-docs/src/components/components.md @@ -8,4 +8,9 @@ eleventyNavigation: title: Components --- -Some content +{% indexPageDisplay { +collection: collections.all, +itemKey: "Components", +excludedElements: ['Component Status'] +} %} + From e9cd3889335e0d6834b68d12e5472a92d66dc4ea Mon Sep 17 00:00:00 2001 From: Maleh Duenas Date: Mon, 26 Aug 2024 17:00:45 +0200 Subject: [PATCH 02/10] feat(pie-docs): DSW-2268 adds hover animation for cards --- .../src/_11ty/shortcodes/indexPageDisplay.js | 7 +++--- .../assets/styles/components/_indexPage.scss | 24 +++++++++++++++++++ 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js index 26fc85e588..87887b527d 100644 --- a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js +++ b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js @@ -44,15 +44,16 @@ module.exports = function ({ }; return ` -
+ ${hasMobileSource ? `` : ''} ${hasSource ? `` : renderFallbackImage()} - ${element.title} -
`; + ${element.title} +
+ `; } return ''; }); diff --git a/apps/pie-docs/src/assets/styles/components/_indexPage.scss b/apps/pie-docs/src/assets/styles/components/_indexPage.scss index 9bfa2c340c..65777b1b4b 100644 --- a/apps/pie-docs/src/assets/styles/components/_indexPage.scss +++ b/apps/pie-docs/src/assets/styles/components/_indexPage.scss @@ -5,6 +5,10 @@ .c-indexPage { display: flex; flex-wrap: wrap; + justify-content: center; + @include f.media('>=mid') { + justify-content: flex-start; + } gap: var(--dt-spacing-g) var(--dt-spacing-e); .c-indexPage-menu-item { @@ -13,6 +17,9 @@ } .c-indexPage-link { + position: relative; + display: flex; + flex-direction: column; text-decoration: none; color: inherit; @include p.font-size(--dt-font-interactive-l-size); @@ -23,4 +30,21 @@ color: initial; } } + + .c-indexPage-background { + position: absolute; + width: 100%; + height: 100%; + inset: 0; + background: rgba(0,0,0,.05); + opacity: 0; + border-radius: var(--dt-radius-rounded-b); + transition: opacity 0.4s cubic-bezier(.31, 1, .34, 1), + transform 0.4s cubic-bezier(.31, 1, .34, 1); + } + + .c-indexPage-link:hover .c-indexPage-background { + opacity: 1; + transform: scale(1.05, 1.1); + } } From e473d69daacfea5656dbc970e57c92d540d55d63 Mon Sep 17 00:00:00 2001 From: Maleh Duenas Date: Tue, 27 Aug 2024 10:49:58 +0200 Subject: [PATCH 03/10] feat(pie-docs): DSW-2268 adds images for index page --- .../img/index/components/assistive-text.svg | 13 ++++ .../assets/img/index/components/avatar.svg | 7 ++ .../src/assets/img/index/components/badge.svg | 5 ++ .../img/index/components/bottom-sheet.svg | 26 +++---- .../img/index/components/breadcrumb.svg | 20 ++++++ .../index/components/buton-third-party.svg | 15 +++++ .../assets/img/index/components/button.svg | 13 ++++ .../src/assets/img/index/components/card.svg | 35 ++++++++++ .../index/components/carousel-indicator.svg | 8 +++ .../assets/img/index/components/checkbox.svg | 5 ++ .../src/assets/img/index/components/chip.svg | 20 ++++++ .../img/index/components/data-table.svg | 41 ++++++++++++ .../index/components/data-visualisation.svg | 63 +++++++++++++++++ .../img/index/components/date-picker.svg | 67 +++++++++++++++++++ .../assets/img/index/components/divider.svg | 4 ++ .../assets/img/index/components/dropdown.svg | 30 +++++++++ .../img/index/components/error-summary.svg | 29 ++++++++ .../src/assets/img/index/components/fab.svg | 35 ++++++++++ .../img/index/components/form-label.svg | 4 ++ .../img/index/components/icon-button.svg | 6 ++ .../src/assets/img/index/components/link.svg | 5 ++ .../components/list-item-interactive.svg | 8 +++ .../assets/img/index/components/list-item.svg | 7 ++ .../src/assets/img/index/components/logo.svg | 4 ++ .../assets/img/index/components/map-pin.svg | 7 ++ .../src/assets/img/index/components/map.svg | 19 ++++++ .../src/assets/img/index/components/modal.svg | 24 +++++++ .../img/index/components/notification.svg | 41 ++++++++++++ .../img/index/components/numeric-stepper.svg | 41 ++++++++++++ .../img/index/components/pagination.svg | 26 +++++++ .../assets/img/index/components/popover.svg | 18 +++++ .../img/index/components/progress-bar.svg | 21 ++++++ .../img/index/components/progress-stepper.svg | 9 +++ .../src/assets/img/index/components/radio.svg | 5 ++ .../assets/img/index/components/rating.svg | 35 ++++++++++ .../index/components/segmented-controls.svg | 38 +++++++++++ .../img/index/components/select-input.svg | 26 +++++++ .../assets/img/index/components/show-more.svg | 5 ++ .../img/index/components/side-sheet.svg | 41 ++++++++++++ .../assets/img/index/components/skeleton.svg | 4 ++ .../assets/img/index/components/spinner.svg | 5 ++ .../assets/img/index/components/switch.svg | 30 +++++++++ .../src/assets/img/index/components/tabs.svg | 7 ++ .../src/assets/img/index/components/tag.svg | 19 ++++++ .../img/index/components/text-input.svg | 20 ++++++ .../assets/img/index/components/textarea.svg | 24 +++++++ .../src/assets/img/index/components/toast.svg | 44 ++++++++++++ .../assets/img/index/components/tooltip.svg | 7 ++ .../assets/img/index/components/uploader.svg | 22 ++++++ apps/pie-docs/src/components/components.md | 2 +- 50 files changed, 996 insertions(+), 14 deletions(-) create mode 100644 apps/pie-docs/src/assets/img/index/components/assistive-text.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/avatar.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/badge.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/breadcrumb.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/buton-third-party.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/button.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/card.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/carousel-indicator.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/checkbox.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/chip.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/data-table.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/data-visualisation.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/date-picker.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/divider.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/dropdown.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/error-summary.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/fab.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/form-label.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/icon-button.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/link.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/list-item-interactive.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/list-item.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/logo.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/map-pin.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/map.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/modal.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/notification.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/numeric-stepper.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/pagination.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/popover.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/progress-bar.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/progress-stepper.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/radio.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/rating.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/segmented-controls.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/select-input.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/show-more.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/side-sheet.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/skeleton.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/spinner.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/switch.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/tabs.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/tag.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/text-input.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/textarea.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/toast.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/tooltip.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/uploader.svg diff --git a/apps/pie-docs/src/assets/img/index/components/assistive-text.svg b/apps/pie-docs/src/assets/img/index/components/assistive-text.svg new file mode 100644 index 0000000000..9c000b5cfb --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/assistive-text.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/avatar.svg b/apps/pie-docs/src/assets/img/index/components/avatar.svg new file mode 100644 index 0000000000..3f2acbef2d --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/avatar.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/badge.svg b/apps/pie-docs/src/assets/img/index/components/badge.svg new file mode 100644 index 0000000000..de2a9b57ab --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/badge.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/bottom-sheet.svg b/apps/pie-docs/src/assets/img/index/components/bottom-sheet.svg index b2f7a78fba..d020d34267 100644 --- a/apps/pie-docs/src/assets/img/index/components/bottom-sheet.svg +++ b/apps/pie-docs/src/assets/img/index/components/bottom-sheet.svg @@ -1,11 +1,11 @@ - + - - + + - + @@ -17,33 +17,33 @@ - + - + - + - + - - + + - + - + - + diff --git a/apps/pie-docs/src/assets/img/index/components/breadcrumb.svg b/apps/pie-docs/src/assets/img/index/components/breadcrumb.svg new file mode 100644 index 0000000000..ba23fb86ab --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/breadcrumb.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/buton-third-party.svg b/apps/pie-docs/src/assets/img/index/components/buton-third-party.svg new file mode 100644 index 0000000000..5a3fb33c24 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/buton-third-party.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/button.svg b/apps/pie-docs/src/assets/img/index/components/button.svg new file mode 100644 index 0000000000..8fc4992bd8 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/button.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/card.svg b/apps/pie-docs/src/assets/img/index/components/card.svg new file mode 100644 index 0000000000..c00f573a88 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/card.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/carousel-indicator.svg b/apps/pie-docs/src/assets/img/index/components/carousel-indicator.svg new file mode 100644 index 0000000000..ddcf4775cd --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/carousel-indicator.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/checkbox.svg b/apps/pie-docs/src/assets/img/index/components/checkbox.svg new file mode 100644 index 0000000000..429207473d --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/checkbox.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/chip.svg b/apps/pie-docs/src/assets/img/index/components/chip.svg new file mode 100644 index 0000000000..6fea076471 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/chip.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/data-table.svg b/apps/pie-docs/src/assets/img/index/components/data-table.svg new file mode 100644 index 0000000000..3cb841bb99 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/data-table.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/data-visualisation.svg b/apps/pie-docs/src/assets/img/index/components/data-visualisation.svg new file mode 100644 index 0000000000..07076febea --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/data-visualisation.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/date-picker.svg b/apps/pie-docs/src/assets/img/index/components/date-picker.svg new file mode 100644 index 0000000000..c6ff611522 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/date-picker.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/divider.svg b/apps/pie-docs/src/assets/img/index/components/divider.svg new file mode 100644 index 0000000000..79d801d18f --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/divider.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/dropdown.svg b/apps/pie-docs/src/assets/img/index/components/dropdown.svg new file mode 100644 index 0000000000..053ce51e75 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/dropdown.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/error-summary.svg b/apps/pie-docs/src/assets/img/index/components/error-summary.svg new file mode 100644 index 0000000000..6211b8510f --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/error-summary.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/fab.svg b/apps/pie-docs/src/assets/img/index/components/fab.svg new file mode 100644 index 0000000000..fcd16fd164 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/fab.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/form-label.svg b/apps/pie-docs/src/assets/img/index/components/form-label.svg new file mode 100644 index 0000000000..cb21ddad94 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/form-label.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/icon-button.svg b/apps/pie-docs/src/assets/img/index/components/icon-button.svg new file mode 100644 index 0000000000..bd68ea9279 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/icon-button.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/link.svg b/apps/pie-docs/src/assets/img/index/components/link.svg new file mode 100644 index 0000000000..dd95c6feff --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/link.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/list-item-interactive.svg b/apps/pie-docs/src/assets/img/index/components/list-item-interactive.svg new file mode 100644 index 0000000000..fadb4d415d --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/list-item-interactive.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/list-item.svg b/apps/pie-docs/src/assets/img/index/components/list-item.svg new file mode 100644 index 0000000000..3346b3baf0 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/list-item.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/logo.svg b/apps/pie-docs/src/assets/img/index/components/logo.svg new file mode 100644 index 0000000000..9db6989cef --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/map-pin.svg b/apps/pie-docs/src/assets/img/index/components/map-pin.svg new file mode 100644 index 0000000000..2196b7a962 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/map-pin.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/map.svg b/apps/pie-docs/src/assets/img/index/components/map.svg new file mode 100644 index 0000000000..834521a369 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/map.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/modal.svg b/apps/pie-docs/src/assets/img/index/components/modal.svg new file mode 100644 index 0000000000..d4809323f6 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/modal.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/notification.svg b/apps/pie-docs/src/assets/img/index/components/notification.svg new file mode 100644 index 0000000000..70ef2fdf44 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/notification.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/numeric-stepper.svg b/apps/pie-docs/src/assets/img/index/components/numeric-stepper.svg new file mode 100644 index 0000000000..3e3596faa6 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/numeric-stepper.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/pagination.svg b/apps/pie-docs/src/assets/img/index/components/pagination.svg new file mode 100644 index 0000000000..0c498be61b --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/pagination.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/popover.svg b/apps/pie-docs/src/assets/img/index/components/popover.svg new file mode 100644 index 0000000000..a0aefb548b --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/popover.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/progress-bar.svg b/apps/pie-docs/src/assets/img/index/components/progress-bar.svg new file mode 100644 index 0000000000..eff5f6b23b --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/progress-bar.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/progress-stepper.svg b/apps/pie-docs/src/assets/img/index/components/progress-stepper.svg new file mode 100644 index 0000000000..d063c62da5 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/progress-stepper.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/radio.svg b/apps/pie-docs/src/assets/img/index/components/radio.svg new file mode 100644 index 0000000000..e947b2da7f --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/radio.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/rating.svg b/apps/pie-docs/src/assets/img/index/components/rating.svg new file mode 100644 index 0000000000..9c403522bb --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/rating.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/segmented-controls.svg b/apps/pie-docs/src/assets/img/index/components/segmented-controls.svg new file mode 100644 index 0000000000..be8b2e17bc --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/segmented-controls.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/select-input.svg b/apps/pie-docs/src/assets/img/index/components/select-input.svg new file mode 100644 index 0000000000..78e5b7f51f --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/select-input.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/show-more.svg b/apps/pie-docs/src/assets/img/index/components/show-more.svg new file mode 100644 index 0000000000..131124f797 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/show-more.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/side-sheet.svg b/apps/pie-docs/src/assets/img/index/components/side-sheet.svg new file mode 100644 index 0000000000..66e69ad5de --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/side-sheet.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/skeleton.svg b/apps/pie-docs/src/assets/img/index/components/skeleton.svg new file mode 100644 index 0000000000..6412c27f8a --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/skeleton.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/spinner.svg b/apps/pie-docs/src/assets/img/index/components/spinner.svg new file mode 100644 index 0000000000..498000aabf --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/spinner.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/switch.svg b/apps/pie-docs/src/assets/img/index/components/switch.svg new file mode 100644 index 0000000000..72ebce1c6f --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/switch.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/tabs.svg b/apps/pie-docs/src/assets/img/index/components/tabs.svg new file mode 100644 index 0000000000..d607b78fd3 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/tabs.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/tag.svg b/apps/pie-docs/src/assets/img/index/components/tag.svg new file mode 100644 index 0000000000..b5e5370c1e --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/tag.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/text-input.svg b/apps/pie-docs/src/assets/img/index/components/text-input.svg new file mode 100644 index 0000000000..12aae676fa --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/text-input.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/textarea.svg b/apps/pie-docs/src/assets/img/index/components/textarea.svg new file mode 100644 index 0000000000..5b5d47d740 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/textarea.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/toast.svg b/apps/pie-docs/src/assets/img/index/components/toast.svg new file mode 100644 index 0000000000..7f551099ae --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/toast.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/tooltip.svg b/apps/pie-docs/src/assets/img/index/components/tooltip.svg new file mode 100644 index 0000000000..756c189962 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/tooltip.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/uploader.svg b/apps/pie-docs/src/assets/img/index/components/uploader.svg new file mode 100644 index 0000000000..9562077453 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/uploader.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/components/components.md b/apps/pie-docs/src/components/components.md index 4523ec1c6b..c5deea2565 100644 --- a/apps/pie-docs/src/components/components.md +++ b/apps/pie-docs/src/components/components.md @@ -11,6 +11,6 @@ title: Components {% indexPageDisplay { collection: collections.all, itemKey: "Components", -excludedElements: ['Component Status'] +excludedElements: ['Component Status', 'Banner', 'Checkbox Group'] } %} From 9a1f41b84ba78984572667611c7049b844004677 Mon Sep 17 00:00:00 2001 From: Maleh Duenas Date: Tue, 27 Aug 2024 11:53:54 +0200 Subject: [PATCH 04/10] test(pie-docs): DSW-2268 update snapshot with latest changes --- .../indexPageDisplay.test.js.snap | 45 ++++++++++--------- 1 file changed, 25 insertions(+), 20 deletions(-) diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap b/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap index cd844f3313..ac7f4b6b23 100644 --- a/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap @@ -2,43 +2,48 @@ exports[`indexPageDisplay.js > should return the expected HTML for an index page and render default image and warning when image is not provided 1`] = ` "
-
+ - \\"A + - First Sub Item -
-
+ First Sub Item +
+ + - \\"A + - Second Sub Item -
-
+ Second Sub Item +
+ + - \\"A + - Third Sub Item without image -
" + Third Sub Item without image +
+ " `; exports[`indexPageDisplay.js > should return the expected HTML for an index page with excluded items 1`] = ` "
-
+ - \\"A + - First Sub Item -
-
+ First Sub Item +
+ + - \\"A + - Second Sub Item -
" + Second Sub Item +
+ " `; From 022987ea5e8f8ee2c0db8f1628442ebf49c60c00 Mon Sep 17 00:00:00 2001 From: Maleh Duenas Date: Tue, 27 Aug 2024 13:24:56 +0200 Subject: [PATCH 05/10] docs(pie-docs): DSW-2268 adds missing images and changeset file --- .changeset/clean-houses-smoke.md | 5 +++ .../src/assets/img/index/components/map.svg | 12 ++--- .../assets/img/index/components/slider.svg | 45 +++++++++++++++++++ .../assets/img/index/components/thumbnail.svg | 10 +++++ 4 files changed, 66 insertions(+), 6 deletions(-) create mode 100644 .changeset/clean-houses-smoke.md create mode 100644 apps/pie-docs/src/assets/img/index/components/slider.svg create mode 100644 apps/pie-docs/src/assets/img/index/components/thumbnail.svg diff --git a/.changeset/clean-houses-smoke.md b/.changeset/clean-houses-smoke.md new file mode 100644 index 0000000000..72f86e66bd --- /dev/null +++ b/.changeset/clean-houses-smoke.md @@ -0,0 +1,5 @@ +--- +"pie-docs": minor +--- + +[Added] - Adds the Components index page using a shortcode that will dynamically generate a card for each component in the navigation menu diff --git a/apps/pie-docs/src/assets/img/index/components/map.svg b/apps/pie-docs/src/assets/img/index/components/map.svg index 834521a369..54adc0b8f7 100644 --- a/apps/pie-docs/src/assets/img/index/components/map.svg +++ b/apps/pie-docs/src/assets/img/index/components/map.svg @@ -1,19 +1,19 @@ - + - + - - + + - + - + diff --git a/apps/pie-docs/src/assets/img/index/components/slider.svg b/apps/pie-docs/src/assets/img/index/components/slider.svg new file mode 100644 index 0000000000..766273d6bd --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/slider.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/index/components/thumbnail.svg b/apps/pie-docs/src/assets/img/index/components/thumbnail.svg new file mode 100644 index 0000000000..1fbd6b1e36 --- /dev/null +++ b/apps/pie-docs/src/assets/img/index/components/thumbnail.svg @@ -0,0 +1,10 @@ + + + + + + + + + + From d8738fa9d856c15f439716d37faf6358d4f0882a Mon Sep 17 00:00:00 2001 From: Maleh Duenas Date: Wed, 28 Aug 2024 19:22:31 +0200 Subject: [PATCH 06/10] feat(pie-docs): DSW-2268 ingnore items for draft pages --- .../src/_11ty/shortcodes/indexPageDisplay.js | 12 ++++++++++- .../indexPageDisplay.test.js.snap | 12 +++++++++++ .../_11ty/shortcodes/indexPageDisplay.test.js | 21 +++++++++++++++++++ 3 files changed, 44 insertions(+), 1 deletion(-) diff --git a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js index 87887b527d..65a436ff1c 100644 --- a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js +++ b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js @@ -19,6 +19,14 @@ const path = require('path'); const defaultImageDirectory = '../../assets/img/index'; const toSlug = (string) => string.toLowerCase().replace(/\s+/g, '-'); +const getDraftPagesList = (collection) => { + const draftPages = []; + collection.forEach((item) => { + if (item.data && item.data.draft) draftPages.push(item.data.title); + }); + return draftPages; +}; + module.exports = function ({ collection, itemKey, @@ -26,8 +34,10 @@ module.exports = function ({ imageSrcDirectory, }) { const menuItems = find(collection, itemKey); + const draftPages = getDraftPagesList(collection); + const indexElements = menuItems.map((element) => { - if (!excludedElements.includes(element.title)) { + if (!excludedElements.includes(element.title) && !draftPages.includes(element.title)) { const menuItemSlug = toSlug(element.title); const itemKeySlug = toSlug(itemKey); const imageDirectory = imageSrcDirectory || defaultImageDirectory; diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap b/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap index ac7f4b6b23..c98a76b7c7 100644 --- a/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap @@ -1,5 +1,17 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`indexPageDisplay.js > should not render items if the page is a draft 1`] = ` +"
+ + + + + + Second Sub Item +
+
" +`; + exports[`indexPageDisplay.js > should return the expected HTML for an index page and render default image and warning when image is not provided 1`] = ` "
diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js b/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js index 72afcd0900..f3dd9f5786 100644 --- a/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js @@ -7,6 +7,7 @@ describe('indexPageDisplay.js', () => { const collectionAll = [ { data: { + title: 'First Sub Item', eleventyNavigation: { key: 'First Sub Item', parent: 'Test Menu Item', @@ -18,6 +19,7 @@ describe('indexPageDisplay.js', () => { }, { data: { + title: 'Second Sub Item', eleventyNavigation: { key: 'Second Sub Item', parent: 'Test Menu Item', @@ -29,6 +31,7 @@ describe('indexPageDisplay.js', () => { }, { data: { + title: 'Third Sub Item without image', eleventyNavigation: { key: 'Third Sub Item without image', parent: 'Test Menu Item', @@ -66,4 +69,22 @@ describe('indexPageDisplay.js', () => { expect(result) .toMatchSnapshot(); }); + + it('should not render items if the page is a draft', () => { + // setup + const collectionsWithDraft = [...collectionAll]; + collectionsWithDraft[0].data.draft = true; + + // act + const result = indexPageDisplay({ + collection: collectionsWithDraft, + itemKey: 'Test Menu Item', + excludedElements: ['Third Sub Item without image'], + imageSrcDirectory: testImageDirectory, + }); + + // assert + expect(result) + .toMatchSnapshot(); + }); }); From 0c95373ec8ec2612e2985814663eaa2a6886008d Mon Sep 17 00:00:00 2001 From: Maleh Duenas Date: Thu, 29 Aug 2024 09:33:40 +0200 Subject: [PATCH 07/10] chore(pie-docs): DSW-2268 update documentation about new feature --- apps/pie-docs/README.md | 19 ++++++++++++++++++- .../src/_11ty/shortcodes/indexPageDisplay.js | 6 ++++-- .../component-status/component-status.md | 2 +- apps/pie-docs/src/components/components.md | 2 +- 4 files changed, 24 insertions(+), 5 deletions(-) diff --git a/apps/pie-docs/README.md b/apps/pie-docs/README.md index f36b3b21ee..e84e462be4 100644 --- a/apps/pie-docs/README.md +++ b/apps/pie-docs/README.md @@ -37,7 +37,7 @@ Please follow our [Wiki documentation](https://github.com/justeattakeaway/pie/wi ### Adding Index pages An index page represents content for one of our main navigation items, for example: Foundations or Components. -When a main navigation item does not have an index page, it will navigate to the first page under it. When it has content, it will open the accordion and navigate to that content. +When a main navigation item does not have an index page, it will navigate to the first page under it. When it has content, it will navigate to that content. In both cases the accordion will be opened, as well when clicking the right caret. To set content for a main navigation item, in the item `.md` page, please add to the eleventyNavigation section at the top `hasIndexPage` like so: @@ -51,6 +51,23 @@ eleventyNavigation: Content needs to be added after this. If no content is added, it will navigate to a 404. +Index pages will have the same format, as such, we developed a mechanism to render link-card items for each navigation item under the Section. +The shortcode `indexPageDisplay` will automatically render each card and look for a matching image in `assets/images/index/`. It can be configured like this: + +```njk +{% indexPageDisplay { +collection: collections.all, +itemKey: "Components", +excludedElements: ['Component Status', 'Banner', 'Checkbox Group'] +} %} +``` + +`collections.all` is an eleventy object that is used by the `eleventy-navigation`plugin to return a list of navigation items. +`itemKey` is the section name that the navigation plugin will search for. +`excludedElements` is a list of elements we would like to exclude from the list. Both for the key name and excluded items, names must follow the `key` attribute use in each page, including casing and white spaces when is 2 or more words. + +When adding new index page content, just remember to add images in the right directory and exclude any items we don't wish to link in that page. + ## Drafts When building a page that is not yet ready for production we can mark the page as a `draft` by adding `draft: true` to the page front matter. This will allow 11ty to build the page during development mode but will exclude the page from builds during production. diff --git a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js index 65a436ff1c..de909e48e0 100644 --- a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js +++ b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js @@ -13,8 +13,10 @@ const path = require('path'); * - image should have the name of the sub-menu in snakecase, for example Checkbox Group is called 'checkbox-group' * - mobile images will use the same name with a mobile keyword, for example 'checkbox-group-mobile' * @param {string} collection - It is the object from 11y collections.all https://www.11ty.dev/docs/collections/ - * @returns {string} itemKey - Is the key of the element in the main menu, and the page we will be rendering e.g. components - * @returns {string} excludedElements - Is the key of the element in the main menu, and the page we will be rendering e.g. 'Component Status' + * @param {string} itemKey - Is the key of the element in the main menu, and the page we will be rendering e.g. components + * @param {string} excludedElements - A list of keys from pages that have to be excluded e.g. ['Component status'] + * @param {string} imageSrcDirectory - Optional when need to replace the default directory + * @returns {string} a
element containing a list of cards representing all elements under the itemKey category */ const defaultImageDirectory = '../../assets/img/index'; const toSlug = (string) => string.toLowerCase().replace(/\s+/g, '-'); diff --git a/apps/pie-docs/src/components/component-status/component-status.md b/apps/pie-docs/src/components/component-status/component-status.md index 78a87fd46e..051c1ca4b8 100644 --- a/apps/pie-docs/src/components/component-status/component-status.md +++ b/apps/pie-docs/src/components/component-status/component-status.md @@ -1,6 +1,6 @@ --- eleventyNavigation: - key: 'Component Status' + key: 'Component status' parent: Components order: 1 --- diff --git a/apps/pie-docs/src/components/components.md b/apps/pie-docs/src/components/components.md index c5deea2565..e6d0d167f0 100644 --- a/apps/pie-docs/src/components/components.md +++ b/apps/pie-docs/src/components/components.md @@ -11,6 +11,6 @@ title: Components {% indexPageDisplay { collection: collections.all, itemKey: "Components", -excludedElements: ['Component Status', 'Banner', 'Checkbox Group'] +excludedElements: ['Component status', 'Banner', 'Checkbox Group'] } %} From 611e48dd2844e0219ab230ddab1f70deb203da75 Mon Sep 17 00:00:00 2001 From: Maleh Duenas Date: Fri, 6 Sep 2024 16:17:37 +0200 Subject: [PATCH 08/10] fix(pie-docs): DSW-2268 address PR comments throws error when image is not provided and adds support for 320 screens --- apps/pie-docs/README.md | 2 +- .../src/_11ty/shortcodes/indexPageDisplay.js | 12 ++---- .../indexPageDisplay.test.js.snap | 34 +++++----------- .../_11ty/shortcodes/indexPageDisplay.test.js | 40 ++++++++++++------- .../assets/styles/components/_indexPage.scss | 9 +++++ 5 files changed, 49 insertions(+), 48 deletions(-) diff --git a/apps/pie-docs/README.md b/apps/pie-docs/README.md index e84e462be4..8290f48dce 100644 --- a/apps/pie-docs/README.md +++ b/apps/pie-docs/README.md @@ -66,7 +66,7 @@ excludedElements: ['Component Status', 'Banner', 'Checkbox Group'] `itemKey` is the section name that the navigation plugin will search for. `excludedElements` is a list of elements we would like to exclude from the list. Both for the key name and excluded items, names must follow the `key` attribute use in each page, including casing and white spaces when is 2 or more words. -When adding new index page content, just remember to add images in the right directory and exclude any items we don't wish to link in that page. +When adding new index page content, just remember to add images in the right directory and exclude any items we don't wish to link in that page. Images for mobile will be automatically selected when available. For more information on how to name images and its directory, visit the jsdocs in the indexPageDisplay shortcode. ## Drafts diff --git a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js index de909e48e0..00adf47b3b 100644 --- a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js +++ b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js @@ -45,23 +45,19 @@ module.exports = function ({ const imageDirectory = imageSrcDirectory || defaultImageDirectory; const imgSrc = `${imageDirectory}/${itemKeySlug}/${menuItemSlug}.svg`; const imgMobileSrc = `${imageDirectory}/${itemKeySlug}/${menuItemSlug}-mobile.svg`; - const fallbackImage = `${imageDirectory}/${itemKeySlug}/default.svg`; const hasSource = fs.existsSync(path.join(__dirname, imgSrc)); const hasMobileSource = fs.existsSync(path.join(__dirname, imgMobileSrc)); - const renderFallbackImage = () => { - console.warn(`Fallback image used for ${menuItemSlug}. Please ensure image is provided.`); - return ``; + const throwOnMissingImage = () => { + throw new Error(`Image not provided for ${menuItemSlug}. Please ensure image is provided or add this item to ExcludedElements.`); }; return ` - ${hasMobileSource ? `` : ''} - ${hasSource - ? `` - : renderFallbackImage()} + ${hasMobileSource ? `` : ''} + ${hasSource ? `` : throwOnMissingImage()} ${element.title}
diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap b/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap index c98a76b7c7..e7651db0a5 100644 --- a/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap @@ -4,39 +4,31 @@ exports[`indexPageDisplay.js > should not render items if the page is a draft 1` "
- - + + Second Sub Item
" `; -exports[`indexPageDisplay.js > should return the expected HTML for an index page and render default image and warning when image is not provided 1`] = ` +exports[`indexPageDisplay.js > should return the expected HTML for an index page 1`] = ` "
- - + + First Sub Item
- - + + Second Sub Item
- - - - - - - Third Sub Item without image -
" `; @@ -44,18 +36,10 @@ exports[`indexPageDisplay.js > should return the expected HTML for an index page "
- - + + First Sub Item
- - - - - - - Second Sub Item -
" `; diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js b/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js index f3dd9f5786..c34cab7c85 100644 --- a/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js @@ -28,21 +28,9 @@ describe('indexPageDisplay.js', () => { url: '/second-sub-item/', }, }, - }, - { - data: { - title: 'Third Sub Item without image', - eleventyNavigation: { - key: 'Third Sub Item without image', - parent: 'Test Menu Item', - }, - page: { - url: '/second-sub-item/', - }, - }, }]; - it('should return the expected HTML for an index page and render default image and warning when image is not provided', () => { + it('should return the expected HTML for an index page', () => { // act const result = indexPageDisplay({ collection: collectionAll, @@ -56,12 +44,36 @@ describe('indexPageDisplay.js', () => { .toMatchSnapshot(); }); + it('should throw when image is not provided', () => { + // setup + const collectionsWithMissingImage = [...collectionAll]; + collectionsWithMissingImage.push({ + data: { + title: 'Third Sub Item without image', + eleventyNavigation: { + key: 'Third Sub Item without image', + parent: 'Test Menu Item', + }, + page: { + url: '/second-sub-item/', + }, + }, + }); + // act & assert + expect(() => indexPageDisplay({ + collection: collectionsWithMissingImage, + itemKey: 'Test Menu Item', + excludedElements: [], + imageSrcDirectory: testImageDirectory, + })).toThrow('Image not provided for third-sub-item-without-image. Please ensure image is provided or add this item to ExcludedElements.'); + }); + it('should return the expected HTML for an index page with excluded items', () => { // act const result = indexPageDisplay({ collection: collectionAll, itemKey: 'Test Menu Item', - excludedElements: ['Third Sub Item without image'], + excludedElements: ['Second Sub Item'], imageSrcDirectory: testImageDirectory, }); diff --git a/apps/pie-docs/src/assets/styles/components/_indexPage.scss b/apps/pie-docs/src/assets/styles/components/_indexPage.scss index 65777b1b4b..616b2785d0 100644 --- a/apps/pie-docs/src/assets/styles/components/_indexPage.scss +++ b/apps/pie-docs/src/assets/styles/components/_indexPage.scss @@ -6,9 +6,18 @@ display: flex; flex-wrap: wrap; justify-content: center; + @include f.media('>=mid') { justify-content: flex-start; } + + // reduce image size for smaller screens - we support 320px min + @include f.media(' Date: Fri, 6 Sep 2024 18:49:35 +0200 Subject: [PATCH 09/10] fix(pie-docs): DSW-2268 fix nav for subpage dropdown items --- .../src/_11ty/shortcodes/indexPageDisplay.js | 11 ++++- .../indexPageDisplay.test.js.snap | 20 +++++++++ .../_11ty/shortcodes/indexPageDisplay.test.js | 45 +++++++++++++++++++ .../test-menu-item/subpage-dropdown.svg | 3 ++ .../src/assets/img/index/components/card.svg | 31 +++---------- 5 files changed, 85 insertions(+), 25 deletions(-) create mode 100644 apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/subpage-dropdown.svg diff --git a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js index 00adf47b3b..a36dc12961 100644 --- a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js +++ b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js @@ -29,6 +29,15 @@ const getDraftPagesList = (collection) => { return draftPages; }; +// Subpage Items navigate to first child if index page does not exist +const getUrl = (element) => { + if (element.subPageDropdown) { + if (element.hasIndexPage) return element.url; + return element.children[0].url; + } + return element.url; +}; + module.exports = function ({ collection, itemKey, @@ -54,7 +63,7 @@ module.exports = function ({ }; return ` - + ${hasMobileSource ? `` : ''} ${hasSource ? `` : throwOnMissingImage()} diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap b/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap index e7651db0a5..708b705cd6 100644 --- a/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/__snapshots__/indexPageDisplay.test.js.snap @@ -43,3 +43,23 @@ exports[`indexPageDisplay.js > should return the expected HTML for an index page
" `; + +exports[`indexPageDisplay.js > should use child url for subpage dropdown when it does not have an index page 1`] = ` +"
+ + + + + + Second Sub Item +
+ + + + + + + Subpage dropdown +
+
" +`; diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js b/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js index c34cab7c85..2118dc8073 100644 --- a/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/indexPageDisplay.test.js @@ -99,4 +99,49 @@ describe('indexPageDisplay.js', () => { expect(result) .toMatchSnapshot(); }); + + it('should use child url for subpage dropdown when it does not have an index page', () => { + // setup + const collectionsWithMissingImage = [...collectionAll]; + collectionsWithMissingImage.push( + { + data: { + title: 'Subpage dropdown', + eleventyNavigation: { + key: 'Subpage dropdown', + parent: 'Test Menu Item', + subPageDropdown: true, + hasIndexPage: undefined, + }, + page: { + url: 'subpage-dropdown', + }, + }, + }, + { + data: { + title: 'Subpage dropdown child', + eleventyNavigation: { + key: 'Subpage dropdown child', + parent: 'Subpage dropdown', + }, + page: { + url: 'subpage-dropdown-child', + }, + }, + }, + ); + + // act + const result = indexPageDisplay({ + collection: collectionsWithMissingImage, + itemKey: 'Test Menu Item', + excludedElements: [], + imageSrcDirectory: testImageDirectory, + }); + + // assert + expect(result) + .toMatchSnapshot(); + }); }); diff --git a/apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/subpage-dropdown.svg b/apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/subpage-dropdown.svg new file mode 100644 index 0000000000..bff901e991 --- /dev/null +++ b/apps/pie-docs/src/__tests__/_11ty/shortcodes/test-index-images/test-menu-item/subpage-dropdown.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/pie-docs/src/assets/img/index/components/card.svg b/apps/pie-docs/src/assets/img/index/components/card.svg index c00f573a88..e13179202e 100644 --- a/apps/pie-docs/src/assets/img/index/components/card.svg +++ b/apps/pie-docs/src/assets/img/index/components/card.svg @@ -1,35 +1,18 @@ - - + - - - - - + - + - - - - - - - - - - - - - + + + + - - - From 4791ed8b751773f40857c994c74ddfcca8bfb82f Mon Sep 17 00:00:00 2001 From: Maleh Duenas Date: Mon, 9 Sep 2024 16:16:27 +0200 Subject: [PATCH 10/10] fix(pie-docs): DSW-2268 address PR comments --- apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js | 2 +- apps/pie-docs/src/assets/styles/components/_indexPage.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js index a36dc12961..4f701b3fc5 100644 --- a/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js +++ b/apps/pie-docs/src/_11ty/shortcodes/indexPageDisplay.js @@ -10,7 +10,7 @@ const path = require('path'); * A default image will be rendered if desktop image is not provided and a warning is printed to the server console. * Images must be added: * - within a folder with the main menu item name, for example 'components/' 'foundations/' - * - image should have the name of the sub-menu in snakecase, for example Checkbox Group is called 'checkbox-group' + * - image should have the name of the sub-menu in kebab-case, for example Checkbox Group is called 'checkbox-group' * - mobile images will use the same name with a mobile keyword, for example 'checkbox-group-mobile' * @param {string} collection - It is the object from 11y collections.all https://www.11ty.dev/docs/collections/ * @param {string} itemKey - Is the key of the element in the main menu, and the page we will be rendering e.g. components diff --git a/apps/pie-docs/src/assets/styles/components/_indexPage.scss b/apps/pie-docs/src/assets/styles/components/_indexPage.scss index 616b2785d0..ada236e57b 100644 --- a/apps/pie-docs/src/assets/styles/components/_indexPage.scss +++ b/apps/pie-docs/src/assets/styles/components/_indexPage.scss @@ -35,6 +35,11 @@ @include p.line-height(--dt-font-interactive-l-line-height); font-weight: var(--dt-font-interactive-l-weight); + picture { + line-height: initial; + margin-bottom: var(--dt-spacing-d); + } + &:visited { color: initial; }