feat(pie-docs): DSW-000 mention pie-webc more and remove next13 examp…

…les (#2089) * feat(pie-docs): DSW-000 mention pie-webc more and remove next13 example code * Update apps/pie-docs/src/engineers/web-components/overview.md Co-authored-by: Fernando de França <[email protected]> --------- Co-authored-by: Fernando de França <[email protected]>
justeattakeaway · Nov 26, 2024 · 1c18be7 · 1c18be7
1 parent fd4ca48
commit 1c18be7
Show file tree

Hide file tree

Showing 19 changed files with 21 additions and 158 deletions.
diff --git 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
 </PieAssistiveText>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieAssistiveText } from '@justeattakeaway/pie-assistive-text/dist/react';
-
-<PieAssistiveText
-  variant="success">
-  Your request has been submitted.
-</PieAssistiveText>
-```
-
 ## Changelog
 
 {% notification {

diff --git 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';
 <PieButton onClick={handleClick}>increment</PieButton>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieButton } from '@justeattakeaway/pie-button/dist/react';
-
-<PieButton onClick={handleClick}>increment</PieButton>
-```
-
 {% 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
@@ -98,15 +98,6 @@ import { PieCard } from '@justeattakeaway/pie-webc/react/card.js';
 </PieCard>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieCard } from '@justeattakeaway/pie-card/dist/react';
-
-<PieCard tag="a" href="https://www.example.com" target="_blank" padding="d">
-  Take me to example.com!
-</PieCard>
-```
-
 {% 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
@@ -115,18 +115,6 @@ import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js';
 </PieCheckboxGroup>
 ```
 
-```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';
-
-<PieCheckboxGroup>
-  <PieCheckbox name="my-checkbox-one">Checkbox Label 1</PieCheckbox>
-  <PieCheckbox name="my-checkbox-two">Checkbox Label 2</PieCheckbox>
-  <PieCheckbox name="my-checkbox-three">Checkbox Label 3</PieCheckbox>
-</PieCheckboxGroup>
-```
-
 ## 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
@@ -105,13 +105,6 @@ import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js';
 <PieCheckbox name="mycheckbox">Label</PieCheckbox>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react';
-
-<PieCheckbox name="mycheckbox">Label</PieCheckbox>
-```
-
 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
@@ -119,13 +119,6 @@ import { PieChip } from '@justeattakeaway/pie-webc/react/chip.js';
 <PieChip>String</PieChip>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieChip } from '@justeattakeaway/pie-chip/dist/react';
-
-<PieChip>String</PieChip>
-```
-
 {% 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
@@ -86,13 +86,6 @@ import { PieDivider } from '@justeattakeaway/pie-webc/react/divider.js';
 <PieDivider></PieDivider>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieDivider } from '@justeattakeaway/pie-divider/dist/react';
-
-<PieDivider></PieDivider>
-```
-
 {% 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
@@ -126,16 +126,6 @@ import { IconClose } from '@justeattakeaway/pie-icons-webc/dist/react/IconClose.
 </PieIconButton>
 ```
 
-```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';
-
-<PieIconButton onClick={handleClick}>
-  <IconClose></IconClose>
-</PieIconButton>
-```
-
 {% 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
@@ -112,13 +112,6 @@ import { PieLink } from '@justeattakeaway/pie-webc/react/link.js';
 <PieLink href="https://www.pie.design">pie.design</PieLink>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieLink } from '@justeattakeaway/pie-link/dist/react';
-
-<PieLink href="https://www.pie.design">pie.design</PieLink>
-```
-
 {% 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
@@ -106,13 +106,6 @@ import { PieModal } from '@justeattakeaway/pie-webc/react/modal.js';
 <PieModal heading='My Awesome Heading' headingLevel='h3'>Click me!</PieModal>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
-
-<PieModal heading='My Awesome Heading' headingLevel='h3'>Click me!</PieModal>
-```
-
 {% 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
@@ -121,13 +121,6 @@ import { PieNotification } from '@justeattakeaway/pie-webc/react/notification.js
 <PieNotification title="Heading">Content</PieNotification>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieNotification } from '@justeattakeaway/pie-notification/dist/react';
-
-<PieNotification title="Heading">Content</PieNotification>
-```
-
 {% 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
@@ -123,13 +123,6 @@ import { PieSwitch } from '@justeattakeaway/pie-webc/react/switch.js';
 <PieSwitch checked label="Label" labelPlacement="trailing" onChange={handleChange}></PieSwitch>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieSwitch } from '@justeattakeaway/pie-switch/dist/react';
-
-<PieSwitch checked label="Label" labelPlacement="trailing" onChange={handleChange}></PieSwitch>
-```
-
 {% 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
@@ -114,13 +114,6 @@ import { PieTag } from '@justeattakeaway/pie-webc/react/tag.js';
 <PieTag>Label</PieTag>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieTag } from '@justeattakeaway/pie-tag/dist/react';
-
-<PieTag>Label</PieTag>
-```
-
 {% 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
@@ -117,25 +117,6 @@ import { PieTextInput } from '@justeattakeaway/pie-webc/react/text-input.js';
 </PieTextInput>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieTextInput } from '@justeattakeaway/pie-text-input/dist/react';
-
-<PieTextInput
-  autocomplete="on"
-  autoFocus
-  inputmode="text"
-  maxlength={8}
-  minlength={4}
-  name="myinput"
-  pattern="[a-z]{4,8}"
-  placeholder="Please enter a value"
-  readonly
-  type="text"
-  value="">
-</PieTextInput>
-```
-
 ## 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
@@ -95,20 +95,6 @@ import { PieTextarea } from '@justeattakeaway/pie-webc/react/textarea.js';
 </PieTextarea>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react';
-
-<PieTextarea
-    name="my-textarea"
-    placeholder="Please enter a value"
-    autocomplete="on"
-    value=""
-    autoFocus
-    readonly>
-</PieTextarea>
-```
-
 ## 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
@@ -102,13 +102,6 @@ import { PieToast } from '@justeattakeaway/pie-webc/react/toast.js';
 <PieToast message="Message"></PieToast>
 ```
 
-```jsx
-// React templates (using Next 13 and SSR)
-import { PieToast } from '@justeattakeaway/pie-toast/dist/react';
-
-<PieToast message="Message"></PieToast>
-```
-
 {% 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
@@ -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
@@ -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
@@ -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}