Dsw 000 formatting example

.changeset/short-brooms-share.md

@@ -0,0 +1,7 @@
+---
+"pie-storybook": patch
+"pie-docs": patch
+"pie-monorepo": patch
+---
+
+[Changed] - Updates Readme information about component status

.github/workflows/changeset-snapshot.yml

@@ -81,9 +81,9 @@ jobs:
               core.setFailed(`Request failed with error ${err}`);
             }
 
-       # issue_comment event doesn't provide access to head_ref env var.
-       # This action provides us with the env vars we need to do a git diff.
-       # https://github.com/actions/checkout/issues/331#issuecomment-1242708547
+      # issue_comment event doesn't provide access to head_ref env var.
+      # This action provides us with the env vars we need to do a git diff.
+      # https://github.com/actions/checkout/issues/331#issuecomment-1242708547
       - uses: xt0rted/pull-request-comment-branch@d97294d304604fa98a2600a6e2f916a84b596dc7 # v2.0.0
         id: comment-branch
 
@@ -121,16 +121,16 @@ jobs:
       - name: Get Markdown Changeset Files Difference
         id: diff_changeset_files
         run: |
-            git fetch origin ${{ steps.comment-branch.outputs.base_ref }}
-            git diff --name-only origin/${{ steps.comment-branch.outputs.base_ref }}...HEAD .changeset/*.md > changeset_diff.txt
+          git fetch origin ${{ steps.comment-branch.outputs.base_ref }}
+          git diff --name-only origin/${{ steps.comment-branch.outputs.base_ref }}...HEAD .changeset/*.md > changeset_diff.txt
 
       - name: Delete Unrelated Markdown Files in Changeset
         run: |
-            for file in $(ls .changeset/*.md); do
-              if ! grep -q "$(basename $file)" changeset_diff.txt; then
-                rm "$file"
-              fi
-            done
+          for file in $(ls .changeset/*.md); do
+            if ! grep -q "$(basename $file)" changeset_diff.txt; then
+              rm "$file"
+            fi
+          done
 
       - name: Create and publish snapshot release
         uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1

README.md

@@ -25,39 +25,39 @@
 4. [Changelog](#changelog)
 5. [Need Help?](#need-help)
 
-
 ## Introduction
 
 PIE (Principles for Interfaces and Experiences) is Just Eat Takeaway's global design system.
 
 The PIE monorepo has several distinct sections, including:
-  - pie-docs: This holds the content for our documentation site [pie.design](https://pie.design/).
-  - pie-storybook: A playground for testing Web Component changes. See [webc.pie.design](https://webc.pie.design).
-  - components: This contains all the Web Components in the design system.
 
+- pie-docs: This holds the content for our documentation site [pie.design](https://pie.design/).
+- pie-storybook: A playground for testing Web Component changes. See [webc.pie.design](https://webc.pie.design).
+- components: This contains all the Web Components in the design system.
 
 ## Contributing
 
-To contribute to the PIE Monorepo, please head to our **[Contributing Guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide)**. This guide contains all the information required for you to set up the repository and run everything locally, from the documentation site to Web Components. It also provides information on how to commit code, as well as versioning and publishing.
-
+To contribute to the PIE Monorepo, please head to our *
+*[Contributing Guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide)**. This guide contains all the
+information required for you to set up the repository and run everything locally, from the documentation site to Web
+Components. It also provides information on how to commit code, as well as versioning and publishing.
 
 ## Code of Conduct
 
 Please see [Code of Conduct Guide](./CODE_OF_CONDUCT.md).
 
-
 ## Changelog
 
 Please see [Changelog](./CHANGELOG.md).
 
-
 ## Repo Tooling
 
-To find out more about the tools we use to help us maintain this repo, such as DangerJS, take a look at the **[Workflow Tooling](https://github.com/justeattakeaway/pie/wiki/Workflow-Tooling)** section of our Wiki.
-
+To find out more about the tools we use to help us maintain this repo, such as DangerJS, take a look at the *
+*[Workflow Tooling](https://github.com/justeattakeaway/pie/wiki/Workflow-Tooling)** section of our Wiki.
 
 ## Need help?
 
 Please head to our [FAQs](https://pie.design/support/faq/) for answers to frequently asked questions.
 
-If you are in need of any support, please create a workflow request in our slack channel `#help-designsystem` and someone from the team will get back to you as soon as possible.
+If you are in need of any support, please create a workflow request in our slack channel `#help-designsystem` and
+someone from the team will get back to you as soon as possible.

packages/components/README.md

@@ -57,7 +57,7 @@ const component = await mount(
         {
             props: {
               variant: 'secondary',
-            }
+            },
             slots: {
                 default: 'Click me!',
             },
@@ -112,4 +112,30 @@ As with the browser tests, it is vital that the component to test is mounted and
 When we build a component, we run a plugin for Rollup named `rollup-plugin-visualizer`. This generates a file for each component named `stats.html` in the root of the component package. This file can be viewed in the browser to visualise the bundled Javascript and better understand what contributes to the size of the final build output.
 
 ## Component Status changes
-The `package.json` file of each component is the source of truth for its status. Any change of status will be automatically reflected in Storybook and the Documentation site. There is no need to manually change the `component-statuses.json` file.
+The `package.json` file of each component is the source of truth for its status. Any change of status will be automatically reflected in Storybook and the Documentation site.
+
+Supported statuses are `alpha`, `beta` and `stable`.
+
+```json
+// package.json
+"pieMetadata": {
+  "componentStatus": "alpha"
+},
+```
+
+### Release Categorisation
+|                    | Prerelease/Alpha (v0.x.x)                                                                                                           | Beta (v0.x.x)                                                                                                            | Stable (v1.x.x)                                                                                                                                                                                                   |
+|--------------------|-------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| **NPM Versioning** | Breaking changes should be expected. Component is still in active development and released as v0.x.x (indicating semver prerelease) | Breaking changes will be less likely, but could still occur due to component being integration tested with applications. | Component moves to v1.x.x NPM release. Breaking changes are communicated through version updates and any major feature changes will be tested as beta package releases.                                           | 
+| **Use in production applications is** | Not recommended. Component is still in active development and may have known issues. Is done so at application teams own risk.      | Is encouraged, but with appropriate level of caution for a beta package release. Thorough testing is recommended.        | Is encouraged and we don’t expect any obvious defects being found.  Component has already been tested in other applications and is therefore considered stable. As always, thorough testing is still recommended. | 
+
+### What to do as a contributor
+Versioning will happen automatically through our pipeline, and will use each commit description to determine the right version. Remember you can use `yarn cz` when committing any changes. You don't need to change versions manually in the `package.json`.
+
+#### When to change a component's status
+Use `alpha` during development of the first epic or MVP of the component.
+
+Once the MVP is done, the component will be released as `beta`. This is generally done by the PIE team.
+
+It will move to `stable` after it has been tested in at least 2 production environments. This is generally done by the PIE team.
+

packages/components/pie-button/src/index.ts

@@ -77,7 +77,10 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
     @property({ type: Boolean })
     public disabled = defaultProps.disabled;
 
-    @property({ type: Boolean, reflect: true })
+    @property({
+        type: Boolean,
+        reflect: true,
+    })
     public isLoading = defaultProps.isLoading;
 
     @property({ type: Boolean })
@@ -212,7 +215,11 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
      * @private
      */
     private renderSpinner (): TemplateResult {
-        const { size, variant, disabled } = this;
+        const {
+            size,
+            variant,
+            disabled,
+        } = this;
 
         const spinnerSize: SpinnerProps['size'] = size && size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
         let spinnerVariant: SpinnerProps['variant'];
@@ -225,31 +232,39 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
 
         return html`
             <pie-spinner
-                size="${spinnerSize}"
-                variant="${spinnerVariant}">
+                    size="${spinnerSize}"
+                    variant="${spinnerVariant}">
             </pie-spinner>`;
     }
 
     renderAnchor (classes: ClassInfo) {
         const {
-            href, iconPlacement, rel, target,
+            href,
+            iconPlacement,
+            rel,
+            target,
         } = this;
 
         return html`
             <a
-                href="${ifDefined(href)}"
-                rel="${ifDefined(rel)}"
-                target="${ifDefined(target)}"
-                class="${classMap(classes)}">
-                ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
+                    href="${ifDefined(href)}"
+                    rel="${ifDefined(rel)}"
+                    target="${ifDefined(target)}"
+                    class="${classMap(classes)}">
+                ${iconPlacement === 'leading' ? html`
+                    <slot name="icon"></slot>` : nothing}
                 <slot></slot>
-                ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
+                ${iconPlacement === 'trailing' ? html`
+                    <slot name="icon"></slot>` : nothing}
             </a>`;
     }
 
     renderButton (classes: ClassInfo) {
         const {
-            disabled, iconPlacement, isLoading, type,
+            disabled,
+            iconPlacement,
+            isLoading,
+            type,
         } = this;
 
         const buttonClasses = {
@@ -259,14 +274,16 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
 
         return html`
             <button
-                @click=${this._handleClick}
-                class=${classMap(buttonClasses)}
-                type=${type}
-                ?disabled=${disabled}>
-                    ${isLoading ? this.renderSpinner() : nothing}
-                    ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
-                    <span class="o-btn-text"><slot></slot></span>
-                    ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
+                    @click=${this._handleClick}
+                    class=${classMap(buttonClasses)}
+                    type=${type}
+                    ?disabled=${disabled}>
+                ${isLoading ? this.renderSpinner() : nothing}
+                ${iconPlacement === 'leading' ? html`
+                    <slot name="icon"></slot>` : nothing}
+                <span class="o-btn-text"><slot></slot></span>
+                ${iconPlacement === 'trailing' ? html`
+                    <slot name="icon"></slot>` : nothing}
             </button>`;
     }
 
@@ -297,7 +314,8 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
     }
 
     focus () {
-        this.shadowRoot?.querySelector('button')?.focus();
+        this.shadowRoot?.querySelector('button')
+            ?.focus();
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite