diff --git a/apps/pie-docs/src/components/assistive-text/code/code.md b/apps/pie-docs/src/components/assistive-text/code/code.md index 8914393255..177e45a84f 100644 --- a/apps/pie-docs/src/components/assistive-text/code/code.md +++ b/apps/pie-docs/src/components/assistive-text/code/code.md @@ -104,16 +104,6 @@ import { PieAssistiveText } from '@justeattakeaway/pie-webc/react/assistive-text ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text/dist/react'; - - - Your request has been submitted. - -``` - ## Changelog {% notification { diff --git a/apps/pie-docs/src/components/button/code/code.md b/apps/pie-docs/src/components/button/code/code.md index f24eb4acdb..9cb7d8b451 100644 --- a/apps/pie-docs/src/components/button/code/code.md +++ b/apps/pie-docs/src/components/button/code/code.md @@ -144,13 +144,6 @@ import { PieButton } from '@justeattakeaway/pie-webc/react/button.js'; increment ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieButton } from '@justeattakeaway/pie-button/dist/react'; - -increment -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/card/code/code.md b/apps/pie-docs/src/components/card/code/code.md index 21ba960e42..eeb0780ffd 100644 --- a/apps/pie-docs/src/components/card/code/code.md +++ b/apps/pie-docs/src/components/card/code/code.md @@ -98,15 +98,6 @@ import { PieCard } from '@justeattakeaway/pie-webc/react/card.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieCard } from '@justeattakeaway/pie-card/dist/react'; - - - Take me to example.com! - -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/checkbox-group/code/code.md b/apps/pie-docs/src/components/checkbox-group/code/code.md index e578cda925..569d34fef4 100644 --- a/apps/pie-docs/src/components/checkbox-group/code/code.md +++ b/apps/pie-docs/src/components/checkbox-group/code/code.md @@ -115,18 +115,6 @@ import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieCheckboxGroup } from '@justeattakeaway/pie-checkbox-group/dist/react'; -import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react'; - - - Checkbox Label 1 - Checkbox Label 2 - Checkbox Label 3 - -``` - ## Forms Usage Please use the [form label](/components/form-label/) component for adding a label to the Checkbox Group component. diff --git a/apps/pie-docs/src/components/checkbox/code/code.md b/apps/pie-docs/src/components/checkbox/code/code.md index 501bd7d5a1..effeaae802 100644 --- a/apps/pie-docs/src/components/checkbox/code/code.md +++ b/apps/pie-docs/src/components/checkbox/code/code.md @@ -105,13 +105,6 @@ import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js'; Label ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react'; - -Label -``` - Examples with and without a label: ```jsx diff --git a/apps/pie-docs/src/components/chip/code/code.md b/apps/pie-docs/src/components/chip/code/code.md index 91de1a4ceb..561ec48291 100644 --- a/apps/pie-docs/src/components/chip/code/code.md +++ b/apps/pie-docs/src/components/chip/code/code.md @@ -119,13 +119,6 @@ import { PieChip } from '@justeattakeaway/pie-webc/react/chip.js'; String ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieChip } from '@justeattakeaway/pie-chip/dist/react'; - -String -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/divider/code/code.md b/apps/pie-docs/src/components/divider/code/code.md index 69374e62e9..0598576eb5 100644 --- a/apps/pie-docs/src/components/divider/code/code.md +++ b/apps/pie-docs/src/components/divider/code/code.md @@ -86,13 +86,6 @@ import { PieDivider } from '@justeattakeaway/pie-webc/react/divider.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieDivider } from '@justeattakeaway/pie-divider/dist/react'; - - -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/icon-button/code/code.md b/apps/pie-docs/src/components/icon-button/code/code.md index 9c80f16aa3..e2473b42b4 100644 --- a/apps/pie-docs/src/components/icon-button/code/code.md +++ b/apps/pie-docs/src/components/icon-button/code/code.md @@ -126,16 +126,6 @@ import { IconClose } from '@justeattakeaway/pie-icons-webc/dist/react/IconClose. ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react'; -import { IconClose } from '@justeattakeaway/pie-icons-webc/dist/react/IconClose'; - - - - -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/link/code/code.md b/apps/pie-docs/src/components/link/code/code.md index 1266bde321..d7c13970f5 100644 --- a/apps/pie-docs/src/components/link/code/code.md +++ b/apps/pie-docs/src/components/link/code/code.md @@ -112,13 +112,6 @@ import { PieLink } from '@justeattakeaway/pie-webc/react/link.js'; pie.design ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieLink } from '@justeattakeaway/pie-link/dist/react'; - -pie.design -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/modal/code/code.md b/apps/pie-docs/src/components/modal/code/code.md index 44b5df6ed7..0ad91c235e 100644 --- a/apps/pie-docs/src/components/modal/code/code.md +++ b/apps/pie-docs/src/components/modal/code/code.md @@ -106,13 +106,6 @@ import { PieModal } from '@justeattakeaway/pie-webc/react/modal.js'; Click me! ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieModal } from '@justeattakeaway/pie-modal/dist/react'; - -Click me! -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/notification/code/code.md b/apps/pie-docs/src/components/notification/code/code.md index faa698ccf7..67c163a2e2 100644 --- a/apps/pie-docs/src/components/notification/code/code.md +++ b/apps/pie-docs/src/components/notification/code/code.md @@ -121,13 +121,6 @@ import { PieNotification } from '@justeattakeaway/pie-webc/react/notification.js Content ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieNotification } from '@justeattakeaway/pie-notification/dist/react'; - -Content -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/switch/code/code.md b/apps/pie-docs/src/components/switch/code/code.md index e665c62879..9c7488ddd3 100644 --- a/apps/pie-docs/src/components/switch/code/code.md +++ b/apps/pie-docs/src/components/switch/code/code.md @@ -123,13 +123,6 @@ import { PieSwitch } from '@justeattakeaway/pie-webc/react/switch.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieSwitch } from '@justeattakeaway/pie-switch/dist/react'; - - -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/tag/code/code.md b/apps/pie-docs/src/components/tag/code/code.md index 1755dae809..9219b25cce 100644 --- a/apps/pie-docs/src/components/tag/code/code.md +++ b/apps/pie-docs/src/components/tag/code/code.md @@ -114,13 +114,6 @@ import { PieTag } from '@justeattakeaway/pie-webc/react/tag.js'; Label ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieTag } from '@justeattakeaway/pie-tag/dist/react'; - -Label -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/components/text-input/code/code.md b/apps/pie-docs/src/components/text-input/code/code.md index b65342c0be..a28b0c722e 100644 --- a/apps/pie-docs/src/components/text-input/code/code.md +++ b/apps/pie-docs/src/components/text-input/code/code.md @@ -117,25 +117,6 @@ import { PieTextInput } from '@justeattakeaway/pie-webc/react/text-input.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieTextInput } from '@justeattakeaway/pie-text-input/dist/react'; - - - -``` - ## Types The text input accepts various values for the `type` property, allowing control over input behaviour. These are mostly standard HTML input types. For most use cases, the default type of `text` will suffice. It is important to note that setting the type to `number` does not guarantee the prevention of non-numeric characters being entered. This behaviour, which is consistent with native HTML inputs, allows some non-numeric characters such as `e`,`+`, `-`, and `.`. diff --git a/apps/pie-docs/src/components/textarea/code/code.md b/apps/pie-docs/src/components/textarea/code/code.md index a1fef99ba1..1ca9f23435 100644 --- a/apps/pie-docs/src/components/textarea/code/code.md +++ b/apps/pie-docs/src/components/textarea/code/code.md @@ -95,20 +95,6 @@ import { PieTextarea } from '@justeattakeaway/pie-webc/react/textarea.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react'; - - - -``` - ## Forms usage {% notification { type: "information", diff --git a/apps/pie-docs/src/components/toast/code/code.md b/apps/pie-docs/src/components/toast/code/code.md index e3b6bc9f42..55dd04d35b 100644 --- a/apps/pie-docs/src/components/toast/code/code.md +++ b/apps/pie-docs/src/components/toast/code/code.md @@ -102,13 +102,6 @@ import { PieToast } from '@justeattakeaway/pie-webc/react/toast.js'; ``` -```jsx -// React templates (using Next 13 and SSR) -import { PieToast } from '@justeattakeaway/pie-toast/dist/react'; - - -``` - {% notification { type: "neutral", iconName: "link", diff --git a/apps/pie-docs/src/engineers/getting-started/structure.md b/apps/pie-docs/src/engineers/getting-started/structure.md index f140a8d9bb..7d7ae3ba11 100644 --- a/apps/pie-docs/src/engineers/getting-started/structure.md +++ b/apps/pie-docs/src/engineers/getting-started/structure.md @@ -11,11 +11,12 @@ shouldShowContents: true Currently, JET has several officially supported component systems that implement PIE. -- [Fozzie](https://vue.pie.design/) – a set of **Vue components** created by the legacy Just Eat web team +- [PIE Web Components](https://webc.pie.design/) – Our flagship **web component library**, designed to work seamlessly with any tech stack. - [Snacks](https://snacks.takeaway.com/) – a set of **React components** created by the legacy Takeaway design system team +- [Fozzie](https://vue.pie.design/) – a set of **Vue components** created by the legacy Just Eat web team - [Skip PIE Project](https://react.pie.design/) – a set of **React components** created by the Skip web team -We are also currently building the [PIE Web Component System](https://webc.pie.design/). The long-term aim will be to migrate JET teams over to this Web Component System, so we have **one single source of truth** for our global PIE components. +The long-term aim is to migrate JET teams over to this Web Component System, so we have **one single source of truth** for our global PIE components. For more details on Fozzie, Snacks and Skip PIE, please check out the **documentation portals** linked above. @@ -80,7 +81,7 @@ For more details on Fozzie, Snacks and Skip PIE, please check out the **document If you are working with latest stack both in React and Vue ecosystems, we recommend to go straight away with [PIE Web Components](/engineers/web-components/). -### Next 13 and earlier versions +### Next 13 and earlier versions {% contentLayout %} {% tag { @@ -92,8 +93,8 @@ If you are working with latest stack both in React and Vue ecosystems, we recomm variant: "blue" } %} {% endcontentLayout %} - -You can use [PIE Web Components](/engineers/web-components/) for Next 13 or earlier versions if you don't need SSR. + +You can use [PIE Web Components](/engineers/web-components/) for Next 13 or earlier versions if you don't need SSR. If you need to render components on the server (SSR), [Snacks](https://snacks.takeaway.com/portal/) is the best library for you. We recommend updating to Next 14 if you would like to use SSR with our new Web Components. diff --git a/apps/pie-docs/src/engineers/web-components/overview.md b/apps/pie-docs/src/engineers/web-components/overview.md index d8e9bb0c1a..f99ecbce64 100644 --- a/apps/pie-docs/src/engineers/web-components/overview.md +++ b/apps/pie-docs/src/engineers/web-components/overview.md @@ -12,15 +12,12 @@ permalink: engineers/web-components/ Currently, this technology is supported by all browsers, making it possible to have one central library that will work with most frontend frameworks. -The long-term aim will be to migrate JET teams over to this Web Component System, so we have one single source of truth for our global PIE components. +The long-term aim is to migrate JET teams over to this Web Component system, so we have one single source of truth for our global PIE components. ---- - -## Component status - -You can find the documentation for all of our components on this site in the **Components** section. - -For a list of which components are supported in each of our libraries, please refer to the [Component Status page](/components/component-status/). +{% notification { + type: "information", + message: "Our web components can be used via the [@justeattakeaway/pie-webc](https://npmjs.com/package/@justeattakeaway/pie-webc) library. Individual component packages are also available, but we advise sticking to the single entry point." +} %} ___ @@ -44,8 +41,17 @@ More guides coming soon! 🚀 ___ +## Component status + +You can find the documentation for all of our components on this site in the **Components** section. + +For a list of which components are supported in each of our libraries, please refer to the [Component Status page](/components/component-status/). + +--- + ## Usage The following guides are meant to support you while using our web components. +### Forms For information about form elements and how to handle form data and validation, check out our [Form Usage Guide](https://github.com/justeattakeaway/pie/wiki/Form-Controls#pie-forms-usage). diff --git a/apps/pie-docs/src/patterns/cookie-banner/code/code.md b/apps/pie-docs/src/patterns/cookie-banner/code/code.md index dd36d0a73e..18236b8216 100644 --- a/apps/pie-docs/src/patterns/cookie-banner/code/code.md +++ b/apps/pie-docs/src/patterns/cookie-banner/code/code.md @@ -145,7 +145,7 @@ Use of locales in Vue: Default preferences can be configured and passed to the component: ```jsx -// React templates (using Next 13) +// React templates import { PieCookieBanner } from "@justeattakeaway/pie-cookie-banner/dist/react"; const defaultPreferences= {functional: true, personalized: true, analytical: true}