diff --git a/.changeset/few-gifts-shop.md b/.changeset/few-gifts-shop.md deleted file mode 100644 index 42d099a87f..0000000000 --- a/.changeset/few-gifts-shop.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@justeattakeaway/pie-icons-webc": minor ---- - -[Fixed] - Remove `:host-context` usage for icon sizing diff --git a/.changeset/ten-wolves-drive.md b/.changeset/ten-wolves-drive.md deleted file mode 100644 index ccefc95251..0000000000 --- a/.changeset/ten-wolves-drive.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@justeattakeaway/pie-button": patch ---- - -[Fixed] - Add missing closing bracket for tag diff --git a/.github/project-labeler.yml b/.github/project-labeler.yml index 0532f31fd7..bc43e4e12f 100644 --- a/.github/project-labeler.yml +++ b/.github/project-labeler.yml @@ -60,6 +60,9 @@ pie-form-label: pie-icon-button: - 'packages/components/pie-icon-button/**/*' +pie-input: +- "packages/components/pie-input/**/*" + pie-link: - 'packages/components/pie-link/**/*' diff --git a/.github/workflows/changeset-snapshot.yml b/.github/workflows/changeset-snapshot.yml index 2221824066..246fb109a6 100644 --- a/.github/workflows/changeset-snapshot.yml +++ b/.github/workflows/changeset-snapshot.yml @@ -140,7 +140,7 @@ jobs: github-token: ${{ secrets.CHANGESETS_TOKEN }} script: | const execa = require('execa'); - const script = require('./changeset-snapshot/create-and-publish.js') + const script = require('./.github/workflows/changeset-snapshot/create-and-publish.js') await script({ github, context }, execa); - name: Add failure comment diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 5cb7d6d4f4..35546585b3 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -30,6 +30,7 @@ env: PERCY_TOKEN_PIE_FORM_LABEL: ${{ secrets.PERCY_TOKEN_PIE_FORM_LABEL }} PERCY_TOKEN_PIE_DIVIDER: ${{ secrets.PERCY_TOKEN_PIE_DIVIDER }} PERCY_TOKEN_PIE_ICON_BUTTON: ${{ secrets.PERCY_TOKEN_PIE_ICON_BUTTON }} + PERCY_TOKEN_PIE_INPUT: ${{ secrets.PERCY_TOKEN_PIE_INPUT }} PERCY_TOKEN_PIE_LINK: ${{ secrets.PERCY_TOKEN_PIE_LINK }} PERCY_TOKEN_PIE_MODAL: ${{ secrets.PERCY_TOKEN_PIE_MODAL }} PERCY_TOKEN_PIE_NOTIFICATION: ${{ secrets.PERCY_TOKEN_PIE_NOTIFICATION }} @@ -329,4 +330,4 @@ jobs: with: # "allowed-skips" lists jobs that are optional but should not fail allowed-skips: browser-tests-components, deploy-docs, deploy-storybook, browser-tests-docs - jobs: ${{ toJSON(needs) }} \ No newline at end of file + jobs: ${{ toJSON(needs) }} diff --git a/CHANGELOG.md b/CHANGELOG.md index 9fbee79651..0c2444f455 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 2.48.0 + +### Minor Changes + +- [Added] - New pie-input component with boilerplate code ([#1135](https://github.com/justeattakeaway/pie/pull/1135)) by [@jamieomaguire](https://github.com/jamieomaguire) + ## 2.47.1 ### Patch Changes diff --git a/apps/examples/wc-angular12/CHANGELOG.md b/apps/examples/wc-angular12/CHANGELOG.md index 18db462ac4..d61e12b95a 100644 --- a/apps/examples/wc-angular12/CHANGELOG.md +++ b/apps/examples/wc-angular12/CHANGELOG.md @@ -1,5 +1,12 @@ # wc-angular12 +## 0.4.20 + +### Patch Changes + +- Updated dependencies [[`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`99160e0c3`](https://github.com/justeattakeaway/pie/commit/99160e0c3fa6d4ef566fefdbea7850e469e502b9), [`5541a6b1d`](https://github.com/justeattakeaway/pie/commit/5541a6b1d6f7fb9dff75e16c28087bd853564426)]: + - @justeattakeaway/pie-button@0.42.0 + ## 0.4.19 ### Patch Changes diff --git a/apps/examples/wc-angular12/package.json b/apps/examples/wc-angular12/package.json index 4a980111c1..a13a3d61eb 100644 --- a/apps/examples/wc-angular12/package.json +++ b/apps/examples/wc-angular12/package.json @@ -1,6 +1,6 @@ { "name": "wc-angular12", - "version": "0.4.19", + "version": "0.4.20", "private": true, "scripts": { "ng": "ng", @@ -17,7 +17,7 @@ "@angular/platform-browser": "15.2.0", "@angular/platform-browser-dynamic": "15.2.0", "@angular/router": "15.2.0", - "@justeattakeaway/pie-button": "0.41.1", + "@justeattakeaway/pie-button": "0.42.0", "@justeattakeaway/pie-css": "0.9.0", "rxjs": "7.8.0", "tslib": "2.3.0", diff --git a/apps/examples/wc-next10/CHANGELOG.md b/apps/examples/wc-next10/CHANGELOG.md index 6632640187..28b346fd15 100644 --- a/apps/examples/wc-next10/CHANGELOG.md +++ b/apps/examples/wc-next10/CHANGELOG.md @@ -1,5 +1,13 @@ # wc-next10 +## 0.5.12 + +### Patch Changes + +- Updated dependencies [[`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`99160e0c3`](https://github.com/justeattakeaway/pie/commit/99160e0c3fa6d4ef566fefdbea7850e469e502b9), [`5541a6b1d`](https://github.com/justeattakeaway/pie/commit/5541a6b1d6f7fb9dff75e16c28087bd853564426)]: + - @justeattakeaway/pie-button@0.42.0 + - @justeattakeaway/pie-cookie-banner@0.13.2 + ## 0.5.11 ### Patch Changes diff --git a/apps/examples/wc-next10/package.json b/apps/examples/wc-next10/package.json index cec8f0b984..16754d061d 100644 --- a/apps/examples/wc-next10/package.json +++ b/apps/examples/wc-next10/package.json @@ -1,6 +1,6 @@ { "name": "wc-next10", - "version": "0.5.11", + "version": "0.5.12", "private": true, "scripts": { "dev": "next dev", @@ -10,8 +10,8 @@ "lint:examples": "eslint ." }, "dependencies": { - "@justeattakeaway/pie-button": "0.41.1", - "@justeattakeaway/pie-cookie-banner": "0.13.1", + "@justeattakeaway/pie-button": "0.42.0", + "@justeattakeaway/pie-cookie-banner": "0.13.2", "@justeattakeaway/pie-css": "0.9.0", "@lit/react": "1.0.2", "next": "10.2.3", diff --git a/apps/examples/wc-next13/CHANGELOG.md b/apps/examples/wc-next13/CHANGELOG.md index 1ebacb5d9d..7449865f6e 100644 --- a/apps/examples/wc-next13/CHANGELOG.md +++ b/apps/examples/wc-next13/CHANGELOG.md @@ -1,5 +1,12 @@ # wc-next13 +## 0.3.20 + +### Patch Changes + +- Updated dependencies [[`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`99160e0c3`](https://github.com/justeattakeaway/pie/commit/99160e0c3fa6d4ef566fefdbea7850e469e502b9), [`5541a6b1d`](https://github.com/justeattakeaway/pie/commit/5541a6b1d6f7fb9dff75e16c28087bd853564426)]: + - @justeattakeaway/pie-button@0.42.0 + ## 0.3.19 ### Patch Changes diff --git a/apps/examples/wc-next13/package.json b/apps/examples/wc-next13/package.json index 164a07e3a0..433b5b2d7f 100644 --- a/apps/examples/wc-next13/package.json +++ b/apps/examples/wc-next13/package.json @@ -1,6 +1,6 @@ { "name": "wc-next13", - "version": "0.3.19", + "version": "0.3.20", "private": true, "scripts": { "dev": "NODE_OPTIONS=--conditions=development next dev", @@ -10,7 +10,7 @@ "lint:examples": "next lint" }, "dependencies": { - "@justeattakeaway/pie-button": "0.41.1", + "@justeattakeaway/pie-button": "0.42.0", "@justeattakeaway/pie-css": "0.9.0", "@lit-labs/nextjs": "0.1.3", "@lit/react": "1.0.2", diff --git a/apps/examples/wc-nuxt2/CHANGELOG.md b/apps/examples/wc-nuxt2/CHANGELOG.md index 922e56b3ca..b80e83465b 100644 --- a/apps/examples/wc-nuxt2/CHANGELOG.md +++ b/apps/examples/wc-nuxt2/CHANGELOG.md @@ -1,5 +1,12 @@ # wc-nuxt2 +## 0.5.7 + +### Patch Changes + +- Updated dependencies [[`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`99160e0c3`](https://github.com/justeattakeaway/pie/commit/99160e0c3fa6d4ef566fefdbea7850e469e502b9), [`5541a6b1d`](https://github.com/justeattakeaway/pie/commit/5541a6b1d6f7fb9dff75e16c28087bd853564426)]: + - @justeattakeaway/pie-button@0.42.0 + ## 0.5.6 ### Patch Changes diff --git a/apps/examples/wc-nuxt2/package.json b/apps/examples/wc-nuxt2/package.json index c2e3a2995b..eceb731aac 100644 --- a/apps/examples/wc-nuxt2/package.json +++ b/apps/examples/wc-nuxt2/package.json @@ -1,6 +1,6 @@ { "name": "wc-nuxt2", - "version": "0.5.6", + "version": "0.5.7", "private": true, "scripts": { "dev": "nuxt", @@ -9,7 +9,7 @@ "generate:examples": "nuxt generate" }, "dependencies": { - "@justeattakeaway/pie-button": "0.41.1", + "@justeattakeaway/pie-button": "0.42.0", "@justeattakeaway/pie-css": "0.9.0", "core-js": "3.30.0", "nuxt": "2.17.0", diff --git a/apps/examples/wc-nuxt3/CHANGELOG.md b/apps/examples/wc-nuxt3/CHANGELOG.md index 1f147d41fa..000945d2ec 100644 --- a/apps/examples/wc-nuxt3/CHANGELOG.md +++ b/apps/examples/wc-nuxt3/CHANGELOG.md @@ -1,5 +1,12 @@ # wc-nuxt3 +## 0.5.7 + +### Patch Changes + +- Updated dependencies [[`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`99160e0c3`](https://github.com/justeattakeaway/pie/commit/99160e0c3fa6d4ef566fefdbea7850e469e502b9), [`5541a6b1d`](https://github.com/justeattakeaway/pie/commit/5541a6b1d6f7fb9dff75e16c28087bd853564426)]: + - @justeattakeaway/pie-button@0.42.0 + ## 0.5.6 ### Patch Changes diff --git a/apps/examples/wc-nuxt3/package.json b/apps/examples/wc-nuxt3/package.json index 6ce2a1af83..fae8c12163 100644 --- a/apps/examples/wc-nuxt3/package.json +++ b/apps/examples/wc-nuxt3/package.json @@ -1,6 +1,6 @@ { "name": "wc-nuxt3", - "version": "0.5.6", + "version": "0.5.7", "private": true, "scripts": { "build:examples": "nuxt build", @@ -10,7 +10,7 @@ "postinstall": "nuxt prepare" }, "dependencies": { - "@justeattakeaway/pie-button": "0.41.1", + "@justeattakeaway/pie-button": "0.42.0", "@justeattakeaway/pie-css": "0.9.0", "nuxt-ssr-lit": "1.6.5" }, diff --git a/apps/examples/wc-react17/CHANGELOG.md b/apps/examples/wc-react17/CHANGELOG.md index e94a36d970..52acf4de6f 100644 --- a/apps/examples/wc-react17/CHANGELOG.md +++ b/apps/examples/wc-react17/CHANGELOG.md @@ -1,5 +1,12 @@ # wc-react17 +## 0.4.20 + +### Patch Changes + +- Updated dependencies [[`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`99160e0c3`](https://github.com/justeattakeaway/pie/commit/99160e0c3fa6d4ef566fefdbea7850e469e502b9), [`5541a6b1d`](https://github.com/justeattakeaway/pie/commit/5541a6b1d6f7fb9dff75e16c28087bd853564426)]: + - @justeattakeaway/pie-button@0.42.0 + ## 0.4.19 ### Patch Changes diff --git a/apps/examples/wc-react17/package.json b/apps/examples/wc-react17/package.json index 516cc87af3..70a63a264d 100644 --- a/apps/examples/wc-react17/package.json +++ b/apps/examples/wc-react17/package.json @@ -1,9 +1,9 @@ { "name": "wc-react17", - "version": "0.4.19", + "version": "0.4.20", "private": true, "dependencies": { - "@justeattakeaway/pie-button": "0.41.1", + "@justeattakeaway/pie-button": "0.42.0", "@justeattakeaway/pie-css": "0.9.0", "@lit/react": "1.0.2", "react": "17.0.2", diff --git a/apps/examples/wc-react18/CHANGELOG.md b/apps/examples/wc-react18/CHANGELOG.md index 5663fc841a..d5332cad41 100644 --- a/apps/examples/wc-react18/CHANGELOG.md +++ b/apps/examples/wc-react18/CHANGELOG.md @@ -1,5 +1,12 @@ # wc-react18 +## 0.5.19 + +### Patch Changes + +- Updated dependencies [[`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`99160e0c3`](https://github.com/justeattakeaway/pie/commit/99160e0c3fa6d4ef566fefdbea7850e469e502b9), [`5541a6b1d`](https://github.com/justeattakeaway/pie/commit/5541a6b1d6f7fb9dff75e16c28087bd853564426)]: + - @justeattakeaway/pie-button@0.42.0 + ## 0.5.18 ### Patch Changes diff --git a/apps/examples/wc-react18/package.json b/apps/examples/wc-react18/package.json index 82367d76f0..89cbb8c74e 100644 --- a/apps/examples/wc-react18/package.json +++ b/apps/examples/wc-react18/package.json @@ -1,9 +1,9 @@ { "name": "wc-react18", - "version": "0.5.18", + "version": "0.5.19", "private": true, "dependencies": { - "@justeattakeaway/pie-button": "0.41.1", + "@justeattakeaway/pie-button": "0.42.0", "@justeattakeaway/pie-css": "0.9.0", "@lit/react": "1.0.2", "react": "18.2.0", diff --git a/apps/examples/wc-vanilla/CHANGELOG.md b/apps/examples/wc-vanilla/CHANGELOG.md index 33bb30250b..255115e530 100644 --- a/apps/examples/wc-vanilla/CHANGELOG.md +++ b/apps/examples/wc-vanilla/CHANGELOG.md @@ -1,5 +1,15 @@ # wc-vanilla +## 0.4.47 + +### Patch Changes + +- Updated dependencies [[`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`270b4679f`](https://github.com/justeattakeaway/pie/commit/270b4679f2ec553fad25baf16b775b6740e1150c), [`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`99160e0c3`](https://github.com/justeattakeaway/pie/commit/99160e0c3fa6d4ef566fefdbea7850e469e502b9), [`5541a6b1d`](https://github.com/justeattakeaway/pie/commit/5541a6b1d6f7fb9dff75e16c28087bd853564426)]: + - @justeattakeaway/pie-icon-button@0.25.0 + - @justeattakeaway/pie-icons-webc@0.16.0 + - @justeattakeaway/pie-button@0.42.0 + - @justeattakeaway/pie-modal@0.36.0 + ## 0.4.46 ### Patch Changes diff --git a/apps/examples/wc-vanilla/package.json b/apps/examples/wc-vanilla/package.json index 6e94556d2f..ed489c7648 100644 --- a/apps/examples/wc-vanilla/package.json +++ b/apps/examples/wc-vanilla/package.json @@ -1,6 +1,6 @@ { "name": "wc-vanilla", - "version": "0.4.46", + "version": "0.4.47", "private": true, "type": "module", "scripts": { @@ -13,11 +13,11 @@ }, "dependencies": { "@justeat/pie-design-tokens": "5.9.0", - "@justeattakeaway/pie-button": "0.41.1", + "@justeattakeaway/pie-button": "0.42.0", "@justeattakeaway/pie-css": "0.9.0", - "@justeattakeaway/pie-icon-button": "0.24.3", - "@justeattakeaway/pie-icons-webc": "0.15.0", - "@justeattakeaway/pie-modal": "0.35.6" + "@justeattakeaway/pie-icon-button": "0.25.0", + "@justeattakeaway/pie-icons-webc": "0.16.0", + "@justeattakeaway/pie-modal": "0.36.0" }, "installConfig": { "hoistingLimits": "workspaces" diff --git a/apps/examples/wc-vue3/CHANGELOG.md b/apps/examples/wc-vue3/CHANGELOG.md index 60647ee0ce..6a54ae2aca 100644 --- a/apps/examples/wc-vue3/CHANGELOG.md +++ b/apps/examples/wc-vue3/CHANGELOG.md @@ -1,5 +1,12 @@ # wc-vue3 +## 0.4.20 + +### Patch Changes + +- Updated dependencies [[`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`99160e0c3`](https://github.com/justeattakeaway/pie/commit/99160e0c3fa6d4ef566fefdbea7850e469e502b9), [`5541a6b1d`](https://github.com/justeattakeaway/pie/commit/5541a6b1d6f7fb9dff75e16c28087bd853564426)]: + - @justeattakeaway/pie-button@0.42.0 + ## 0.4.19 ### Patch Changes diff --git a/apps/examples/wc-vue3/package.json b/apps/examples/wc-vue3/package.json index ccf0750dd8..589b13f55d 100644 --- a/apps/examples/wc-vue3/package.json +++ b/apps/examples/wc-vue3/package.json @@ -1,6 +1,6 @@ { "name": "wc-vue3", - "version": "0.4.19", + "version": "0.4.20", "private": true, "scripts": { "dev": "vite", @@ -10,7 +10,7 @@ "type-check": "vue-tsc --noEmit" }, "dependencies": { - "@justeattakeaway/pie-button": "0.41.1", + "@justeattakeaway/pie-button": "0.42.0", "@justeattakeaway/pie-css": "0.9.0", "@vitejs/plugin-vue": "4.0.0", "vite": "4.2.3", diff --git a/apps/pie-storybook/CHANGELOG.md b/apps/pie-storybook/CHANGELOG.md index 6253abec21..357b1ed599 100644 --- a/apps/pie-storybook/CHANGELOG.md +++ b/apps/pie-storybook/CHANGELOG.md @@ -1,5 +1,24 @@ # Changelog +## 0.55.0 + +### Minor Changes + +- [Added] - Initial generated storybook boilerplate for pie-input ([#1135](https://github.com/justeattakeaway/pie/pull/1135)) by [@jamieomaguire](https://github.com/jamieomaguire) + +### Patch Changes + +- Updated dependencies [[`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`270b4679f`](https://github.com/justeattakeaway/pie/commit/270b4679f2ec553fad25baf16b775b6740e1150c), [`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`99160e0c3`](https://github.com/justeattakeaway/pie/commit/99160e0c3fa6d4ef566fefdbea7850e469e502b9), [`5541a6b1d`](https://github.com/justeattakeaway/pie/commit/5541a6b1d6f7fb9dff75e16c28087bd853564426)]: + - @justeattakeaway/pie-icon-button@0.25.0 + - @justeattakeaway/pie-icons-webc@0.16.0 + - @justeattakeaway/pie-button@0.42.0 + - @justeattakeaway/pie-divider@0.10.0 + - @justeattakeaway/pie-switch@0.22.0 + - @justeattakeaway/pie-modal@0.36.0 + - @justeattakeaway/pie-card@0.15.0 + - @justeattakeaway/pie-link@0.12.0 + - @justeattakeaway/pie-cookie-banner@0.13.2 + ## 0.54.1 ### Patch Changes diff --git a/apps/pie-storybook/package.json b/apps/pie-storybook/package.json index 5dfa25bf5a..0535020a0b 100644 --- a/apps/pie-storybook/package.json +++ b/apps/pie-storybook/package.json @@ -1,6 +1,6 @@ { "name": "pie-storybook", - "version": "0.54.1", + "version": "0.55.0", "private": true, "description": "Storybook for PIE Design System components", "scripts": { @@ -13,19 +13,19 @@ "license": "Apache-2.0", "dependencies": { "@justeat/pie-design-tokens": "5.9.0", - "@justeattakeaway/pie-button": "0.41.1", - "@justeattakeaway/pie-card": "0.14.3", - "@justeattakeaway/pie-cookie-banner": "0.13.1", + "@justeattakeaway/pie-button": "0.42.0", + "@justeattakeaway/pie-card": "0.15.0", + "@justeattakeaway/pie-cookie-banner": "0.13.2", "@justeattakeaway/pie-css": "0.9.0", - "@justeattakeaway/pie-divider": "0.9.3", + "@justeattakeaway/pie-divider": "0.10.0", "@justeattakeaway/pie-form-label": "0.8.3", - "@justeattakeaway/pie-icon-button": "0.24.3", - "@justeattakeaway/pie-icons-webc": "0.15.0", - "@justeattakeaway/pie-link": "0.11.3", - "@justeattakeaway/pie-modal": "0.35.6", + "@justeattakeaway/pie-icon-button": "0.25.0", + "@justeattakeaway/pie-icons-webc": "0.16.0", + "@justeattakeaway/pie-link": "0.12.0", + "@justeattakeaway/pie-modal": "0.36.0", "@justeattakeaway/pie-notification": "0.1.3", "@justeattakeaway/pie-spinner": "0.3.1", - "@justeattakeaway/pie-switch": "0.21.0", + "@justeattakeaway/pie-switch": "0.22.0", "@justeattakeaway/pie-tag": "0.1.0", "dompurify": "3.0.6" }, diff --git a/apps/pie-storybook/stories/pie-input.stories.ts b/apps/pie-storybook/stories/pie-input.stories.ts new file mode 100644 index 0000000000..e596e9ee71 --- /dev/null +++ b/apps/pie-storybook/stories/pie-input.stories.ts @@ -0,0 +1,36 @@ +import { html } from 'lit'; + +/* eslint-disable import/no-duplicates */ +import '@justeattakeaway/pie-input'; +import { InputProps } from '@justeattakeaway/pie-input'; +/* eslint-enable import/no-duplicates */ + +import { type StoryMeta } from '../types'; +import { createStory } from '../utilities'; + +type InputStoryMeta = StoryMeta; + +const defaultArgs: InputProps = {}; + +const inputStoryMeta: InputStoryMeta = { + title: 'Input', + component: 'pie-input', + argTypes: {}, + args: defaultArgs, + parameters: { + design: { + type: 'figma', + url: '', + }, + }, +}; + +export default inputStoryMeta; + +// TODO: remove the eslint-disable rule when props are added +// eslint-disable-next-line no-empty-pattern +const Template = ({}: InputProps) => html` + +`; + +export const Default = createStory(Template, defaultArgs)(); diff --git a/package.json b/package.json index 12a0fee16d..26ff00c79b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "pie-monorepo", "description": "The home of Just Eat Takeaway.com's PIE Design System", - "version": "2.47.1", + "version": "2.48.0", "keywords": [], "author": "Just Eat Takeaway.com - Design System Team", "license": "Apache-2.0", diff --git a/packages/components/pie-button/CHANGELOG.md b/packages/components/pie-button/CHANGELOG.md index 62b855dd62..d20acf32f1 100644 --- a/packages/components/pie-button/CHANGELOG.md +++ b/packages/components/pie-button/CHANGELOG.md @@ -1,5 +1,17 @@ # Changelog +## 0.42.0 + +### Minor Changes + +- [Changed] - README to link directly to documentation site ([#1126](https://github.com/justeattakeaway/pie/pull/1126)) by [@LTurns](https://github.com/LTurns) + +### Patch Changes + +- [Changed] - `--btn-icon-display` and `--btn-icon-size` to `--icon-display-override` and `--icon-size-override` variables ([#1127](https://github.com/justeattakeaway/pie/pull/1127)) by [@dandel10n](https://github.com/dandel10n) + +- [Fixed] - Add missing closing bracket for tag ([#1109](https://github.com/justeattakeaway/pie/pull/1109)) by [@xander-marjoram](https://github.com/xander-marjoram) + ## 0.41.1 ### Patch Changes diff --git a/packages/components/pie-button/README.md b/packages/components/pie-button/README.md index 023abf4d7e..8f7ce3fe3a 100644 --- a/packages/components/pie-button/README.md +++ b/packages/components/pie-button/README.md @@ -8,20 +8,6 @@

-# Table of Contents - -1. [Introduction](#pie-button) -2. [Installation](#installation) -3. [Importing the component](#importing-the-component) -4. [Peer Dependencies](#peer-dependencies) -5. [Props](#props) -6. [Events](#events) - - [HTML example](#html) - - [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3) - - [React example (using Next 13)](#react-templates-using-next-13) -7. [Forms usage](#forms-usage) -8. [Contributing](#contributing) - ## pie-button @@ -42,165 +28,13 @@ $ npm i @justeattakeaway/pie-button $ yarn add @justeattakeaway/pie-button ``` -For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components). - - -### Importing the component - -#### JavaScript -```js -// Default – for Native JS Applications, Vue, Angular, Svelte, etc. -import { PieButton } from '@justeattakeaway/pie-button'; - -// If you don't need to reference the imported object, you can simply -// import the module which registers the component as a custom element. -import '@justeattakeaway/pie-button'; -``` - -#### React -```js -// React -// For React, you will need to import our React-specific component build -// which wraps the web component using ​@lit/react -import { PieButton } from '@justeattakeaway/pie-button/dist/react'; -``` - -> [!NOTE] -> When using the React version of the component, please make sure to also -> include React as a [peer dependency](#peer-dependencies) in your project. - - -## Peer Dependencies - -> [!IMPORTANT] -> When using `pie-button`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki for more information and how to include these in your application](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies). - - -## Props - -| Property | Type | Default | Description | -|----------------|-----------|------------|----------------------------------------------------------------------------------------------------------------------| -| size | `String` | `medium` | Size of the button, one of `sizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large` | -| type | `String` | `submit` | Type of the button, one of `types` – `submit`, `button`, `reset`. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)| -| variant | `String` | `primary` | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost`, `destructive`, `destructive-ghost`, `inverse`, `ghost-inverse`, `outline-inverse` | -| disabled | `Boolean` | `false` | If `true`, disables the button. | -| isFullWidth | `Boolean` | `false` | If `true`, sets the button width to 100% of its container. | -| isLoading | `Boolean` | `false` | If `true`, displays a loading indicator inside the button. | -| isResponsive | `Boolean` | `false` | If `true`, uses the next larger size on wide viewports. | -| iconPlacement | `String` | `leading` | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing` | -| name | `String` | `undefined`| The name of the button, to be submitted with form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) | -| value | `String` | `undefined`| The value of the button, to be submitted with form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-value) | -| formaction | `String` | `undefined`| Designates an alternative URL for form data submission. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction) | -| formenctype | `String` | `undefined`| Specifies the form data encoding type. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formenctype) | -| formmethod | `String` | `undefined`| Sets the HTTP method for form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formmethod) | -| formnovalidate | `Boolean` | `undefined` | Ensures the form is submitted without native HTML validation. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formnovalidate) | -| formtarget | `String` | `undefined`| Dictates where to display the response after form submission. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formtarget) | -| responsiveSize | `String` | `productive`| Sets a specific size for xsmall button when rendered as responsive. It can be `productive` or `expressive`. | - - -In your markup or JSX, you can then use these to set the properties for the `pie-button` component: - -```html - -Click me! - - -Click me! -``` - - -## Slots - -| Slot | Description | -|---------------|------------------------------------------------------------------------------------------------------------------------------------| -| Default slot | The default slot is used to pass text into the button component. | -| icon | Used to pass in an icon to the button component. The icon placement can be controlled via the `iconPlacement` prop and we recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. | - -### Using `pie-icons-webc` with `pie-button` icon slot - -We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this: - -```html - - - - Search - -``` - - -## Events - -This component does not use any custom event handlers. In order to add event listening to this component, you can treat it like a native HTML element in your application. - -For example, to add a click handler in various templates: - -### HTML - -```html - -Click me! -``` - -### Vue templates (using Nuxt 3) - -```html - -Click me! -``` +## Documentation -### React templates (using Next 13) - -```html - -increment - -``` - -## Forms usage - -The `pie-button` web component is designed to integrate with standard HTML forms just like a native HTML button. When positioned inside a form, the component will automatically associate itself, enabling it to directly interact with the form context. - -### Button Attributes - -The `pie-button` provides a set of attributes to customize its behavior within forms: - -- `type`: Determines the button's function. Set to `submit` for form submissions or `reset` to clear form fields. -- `formaction`: Designates an alternative URL for form data submission when this specific button is clicked. -- `formenctype`: Specifies the form data encoding type during submission via this button. -- `formmethod`: Sets the HTTP method (e.g., GET or POST) for form data when initiated by this button. -- `formnovalidate`: If present, ensures the form is submitted without validation checks. -- `formtarget`: Dictates where to display the response after form submission. - -Please see the [MDN docs]((https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)) for more information on these attributes. - -### Integration Example - -```html -
- - - Submit - -
-``` +Visit [Button | PIE Design System](https://pie.design/components/button/overview) to view more information on this component. -In this example: +## Questions -- The pie-button, when clicked, will send the form data to /alternate-endpoint instead of the form's default /default-endpoint. -- It uses the multipart/form-data encoding type for form submission. -- The form will submit using the POST method. -- No validation will be performed during submission, thanks to formnovalidate. -- The form's submission response will be opened in a new browser tab/window because of the formtarget="_blank" attribute. +Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch. ## Contributing diff --git a/packages/components/pie-button/package.json b/packages/components/pie-button/package.json index 3ef3834738..3a11b81e64 100644 --- a/packages/components/pie-button/package.json +++ b/packages/components/pie-button/package.json @@ -1,6 +1,6 @@ { "name": "@justeattakeaway/pie-button", - "version": "0.41.1", + "version": "0.42.0", "description": "PIE design system button built using web components", "type": "module", "main": "dist/index.js", diff --git a/packages/components/pie-card/CHANGELOG.md b/packages/components/pie-card/CHANGELOG.md index b39ed86ae9..3fbd2ccb1c 100644 --- a/packages/components/pie-card/CHANGELOG.md +++ b/packages/components/pie-card/CHANGELOG.md @@ -1,5 +1,11 @@ # @justeattakeaway/pie-card +## 0.15.0 + +### Minor Changes + +- [Changed] - README to link directly to documentation site ([#1126](https://github.com/justeattakeaway/pie/pull/1126)) by [@LTurns](https://github.com/LTurns) + ## 0.14.3 ### Patch Changes diff --git a/packages/components/pie-card/README.md b/packages/components/pie-card/README.md index 47ab949bc5..6e242c9d71 100644 --- a/packages/components/pie-card/README.md +++ b/packages/components/pie-card/README.md @@ -8,15 +8,6 @@

-# Table of Contents - -1. [Introduction](#pie-card) -2. [Installation](#installation) -3. [Importing the component](#importing-the-component) -4. [Peer Dependencies](#peer-dependencies) -5. [Props](#props) -6. [Contributing](#contributing) - ## pie-card `pie-card` is a Web Component built using the Lit library. @@ -36,64 +27,14 @@ $ npm i @justeattakeaway/pie-card $ yarn add @justeattakeaway/pie-card ``` -For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components). - - -### Importing the component - -#### JavaScript -```js -// Default – for Native JS Applications, Vue, Angular, Svelte, etc. -import { PieCard } from '@justeattakeaway/pie-card'; - -// If you don't need to reference the imported object, you can simply -// import the module which registers the component as a custom element. -import '@justeattakeaway/pie-card'; -``` - -#### React -```js -// React -// For React, you will need to import our React-specific component build -// which wraps the web component using ​@lit/react -import { PieCard } from '@justeattakeaway/pie-card/dist/react'; -``` +## Documentation -> [!NOTE] -> When using the React version of the component, please make sure to also -> include React as a [peer dependency](#peer-dependencies) in your project. +Visit [Card | PIE Design System](https://pie.design/components/card/overview) to view more information on this component. +## Questions -## Peer Dependencies - -> [!IMPORTANT] -> When using `pie-card`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application. - -## Props - -| Property | Type | Default | Description | -|---|---|-------------|------------------------------------------------------------------------------------------------------------------------------| -| tag | `String` | `button` | What HTML element the card should be such as a or button -| variant | `string` | `default` | What style variant the card should be such as default, outline, inverse or outline-inverse | -| disabled | `boolean` | `false` | When true, the card is disabled. | -| href | `string` | `undefined` | The URL that the card should point to (this will not take effect unless the card is a link). | -| target | `string` | `undefined` | Where to display the linked URL such as _self, _blank, _parent or _top (this will not take effect unless the card is a link). | -| rel | `string` | `undefined` | What the relationship of the linked URL is (this will not take effect unless the card is a link). | -| aria | `object` | `undefined` | The ARIA labels used for various parts of the card. | -| isDraggable | `boolean` | `false` | Sets a grab/grabbing cursor when set to true. **Note:** the actual dragging capabilities should be implemented by the consuming application. | -| padding | `String` | `undefined` | Sets the padding of the card. Can be either a single value or two values separated by commas. Setting a single value adds padding to all sides of the card, whereas setting two values will set the "topBottom, leftRight" padding. e.g `'a'` or `'a, b'` | - - -In your markup or JSX, you can then use these to set the properties for the `pie-card` component: - -```html - - - - - -``` +Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch. ## Contributing -Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing). \ No newline at end of file +Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing). diff --git a/packages/components/pie-card/package.json b/packages/components/pie-card/package.json index 62c1b40499..9586d9efed 100644 --- a/packages/components/pie-card/package.json +++ b/packages/components/pie-card/package.json @@ -1,6 +1,6 @@ { "name": "@justeattakeaway/pie-card", - "version": "0.14.3", + "version": "0.15.0", "description": "PIE Design System Card built using Web Components", "type": "module", "main": "dist/index.js", diff --git a/packages/components/pie-cookie-banner/CHANGELOG.md b/packages/components/pie-cookie-banner/CHANGELOG.md index ce3d7a17ae..658954bc58 100644 --- a/packages/components/pie-cookie-banner/CHANGELOG.md +++ b/packages/components/pie-cookie-banner/CHANGELOG.md @@ -1,5 +1,17 @@ # @justeattakeaway/pie-cookie-banner +## 0.13.2 + +### Patch Changes + +- Updated dependencies [[`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`99160e0c3`](https://github.com/justeattakeaway/pie/commit/99160e0c3fa6d4ef566fefdbea7850e469e502b9), [`5541a6b1d`](https://github.com/justeattakeaway/pie/commit/5541a6b1d6f7fb9dff75e16c28087bd853564426)]: + - @justeattakeaway/pie-icon-button@0.25.0 + - @justeattakeaway/pie-button@0.42.0 + - @justeattakeaway/pie-divider@0.10.0 + - @justeattakeaway/pie-switch@0.22.0 + - @justeattakeaway/pie-modal@0.36.0 + - @justeattakeaway/pie-link@0.12.0 + ## 0.13.1 ### Patch Changes diff --git a/packages/components/pie-cookie-banner/package.json b/packages/components/pie-cookie-banner/package.json index 9e5f68359b..bd025d925f 100644 --- a/packages/components/pie-cookie-banner/package.json +++ b/packages/components/pie-cookie-banner/package.json @@ -1,7 +1,7 @@ { "name": "@justeattakeaway/pie-cookie-banner", "description": "PIE Design System Cookie Banner built using Web Components", - "version": "0.13.1", + "version": "0.13.2", "type": "module", "main": "dist/index.js", "module": "dist/index.js", @@ -33,12 +33,12 @@ "@justeattakeaway/pie-components-config": "0.7.0" }, "dependencies": { - "@justeattakeaway/pie-button": "0.41.1", - "@justeattakeaway/pie-divider": "0.9.3", - "@justeattakeaway/pie-icon-button": "0.24.3", - "@justeattakeaway/pie-link": "0.11.3", - "@justeattakeaway/pie-modal": "0.35.6", - "@justeattakeaway/pie-switch": "0.21.0", + "@justeattakeaway/pie-button": "0.42.0", + "@justeattakeaway/pie-divider": "0.10.0", + "@justeattakeaway/pie-icon-button": "0.25.0", + "@justeattakeaway/pie-link": "0.12.0", + "@justeattakeaway/pie-modal": "0.36.0", + "@justeattakeaway/pie-switch": "0.22.0", "@justeattakeaway/pie-webc-core": "0.13.0" }, "volta": { diff --git a/packages/components/pie-divider/CHANGELOG.md b/packages/components/pie-divider/CHANGELOG.md index c36bc0b3f8..043ab02119 100644 --- a/packages/components/pie-divider/CHANGELOG.md +++ b/packages/components/pie-divider/CHANGELOG.md @@ -1,5 +1,11 @@ # @justeattakeaway/pie-divider +## 0.10.0 + +### Minor Changes + +- [Changed] - README to link directly to documentation site ([#1126](https://github.com/justeattakeaway/pie/pull/1126)) by [@LTurns](https://github.com/LTurns) + ## 0.9.3 ### Patch Changes diff --git a/packages/components/pie-divider/README.md b/packages/components/pie-divider/README.md index 67a4ced78f..c25d6cea02 100644 --- a/packages/components/pie-divider/README.md +++ b/packages/components/pie-divider/README.md @@ -8,16 +8,6 @@

-# Table of Contents - -1. [Introduction](#pie-divider) -2. [Installation](#installation) -3. [Importing the component](#importing-the-component) -4. [Peer Dependencies](#peer-dependencies) -5. [Props](#props) -6. [Contributing](#contributing) - - ## pie-divider `pie-divider` is a Web Component built using the Lit library. @@ -37,56 +27,14 @@ $ npm i @justeattakeaway/pie-divider $ yarn add @justeattakeaway/pie-divider ``` -For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components). - - -### Importing the component +## Documentation -#### JavaScript -```js -// Default – for Native JS Applications, Vue, Angular, Svelte, etc. -import { PieDivider } from '@justeattakeaway/pie-divider'; - -// If you don't need to reference the imported object, you can simply -// import the module which registers the component as a custom element. -import '@justeattakeaway/pie-divider'; -``` - -#### React -```js -// React -// For React, you will need to import our React-specific component build -// which wraps the web component using ​@lit/react -import { PieDivider } from '@justeattakeaway/pie-divider/dist/react'; -``` +Visit [Divider | PIE Design System](https://pie.design/components/divider/overview) to view more information on this component. -> [!NOTE] -> When using the React version of the component, please make sure to also -> include React as a [peer dependency](#peer-dependencies) in your project. +## Questions - -## Peer Dependencies - -> [!IMPORTANT] -> When using `pie-divider`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application. - -## Props - -| Property | Type | Default | Description | -|---|---|---|---| -| variant | `String` | `default` | Variant of the divider, one of variants – default, inverse | -| orientation | `String` | `horizontal` | Orientation of the divider, one of – horizontal, vertical | - -In your markup or JSX, you can then use these to set the properties for the `pie-divider` component: - -```html - - - - - -``` +Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch. ## Contributing -Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing). \ No newline at end of file +Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing). diff --git a/packages/components/pie-divider/package.json b/packages/components/pie-divider/package.json index 06d5da3f8a..9ffd657c90 100644 --- a/packages/components/pie-divider/package.json +++ b/packages/components/pie-divider/package.json @@ -1,7 +1,7 @@ { "name": "@justeattakeaway/pie-divider", "description": "PIE Design System Divider built using Web Components", - "version": "0.9.3", + "version": "0.10.0", "type": "module", "main": "dist/index.js", "module": "dist/index.js", diff --git a/packages/components/pie-icon-button/CHANGELOG.md b/packages/components/pie-icon-button/CHANGELOG.md index e0a4c72a92..acd21357ac 100644 --- a/packages/components/pie-icon-button/CHANGELOG.md +++ b/packages/components/pie-icon-button/CHANGELOG.md @@ -1,5 +1,18 @@ # @justeattakeaway/pie-icon-button +## 0.25.0 + +### Minor Changes + +- [Changed] - README to link directly to documentation site ([#1126](https://github.com/justeattakeaway/pie/pull/1126)) by [@LTurns](https://github.com/LTurns) + +### Patch Changes + +- [Changed] - `--btn-icon-display`, `--btn-icon-size` and `--btn-icon-size-default` to `--icon-display-override` and `--icon-size-override` variables ([#1127](https://github.com/justeattakeaway/pie/pull/1127)) by [@dandel10n](https://github.com/dandel10n) + +- Updated dependencies [[`270b4679f`](https://github.com/justeattakeaway/pie/commit/270b4679f2ec553fad25baf16b775b6740e1150c), [`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e)]: + - @justeattakeaway/pie-icons-webc@0.16.0 + ## 0.24.3 ### Patch Changes diff --git a/packages/components/pie-icon-button/README.md b/packages/components/pie-icon-button/README.md index 5d4fa52c67..64f0a3984b 100644 --- a/packages/components/pie-icon-button/README.md +++ b/packages/components/pie-icon-button/README.md @@ -8,20 +8,6 @@

-# Table of Contents - -1. [Introduction](#pie-icon-button) -2. [Installation](#installation) -3. [Importing the component](#importing-the-component) -4. [Peer Dependencies](#peer-dependencies) -5. [Props](#props) -6. [Events](#events) - - [HTML example](#html) - - [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3) - - [React example (using Next 13)](#react-templates-using-next-13) -7. [Contributing](#contributing) - - ## `pie-icon-button` `pie-icon-button` is a Web Component built using the Lit library. It offers a simple and accessible icon button component for web applications. @@ -41,113 +27,14 @@ $ npm i @justeattakeaway/pie-icon-button $ yarn add @justeattakeaway/pie-icon-button ``` -For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components). - - -### Importing the component - -#### JavaScript -```js -// Default – for Native JS Applications, Vue, Angular, Svelte, etc. -import { PieIconButton } from '@justeattakeaway/pie-icon-button'; - -// If you don't need to reference the imported object, you can simply -// import the module which registers the component as a custom element. -import '@justeattakeaway/pie-icon-button'; -``` - -#### React -```js -// React -// For React, you will need to import our React-specific component build -// which wraps the web component using ​@lit/react -import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react'; -``` - -> [!NOTE] -> When using the React version of the component, please make sure to also -> include React as a [peer dependency](#peer-dependencies) in your project. +## Documentation +Visit [Icon Button | PIE Design System](https://pie.design/components/icon-button/overview) to view more information on this component. -## Peer Dependencies - -> [!IMPORTANT] -> When using `pie-icon-button`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application. - -## Importing Icons - -We recommend using the `pie-icon-button` component alongside the `pie-icons-webc` package. This package contains all of the PIE icons as importable web components and are built to work alongside our other PIE components. - -`pie-icon-button` provides a slot into which you can pass your chosen icon, and it will automatically size it to the correct dimensions depending on the `size` of the `pie-icon-button` component. - -### Importing an icon with `pie-icons-webc` - -To import an icon using `pie-icons-webc`, you should import the icon that you would like to use alongside the `pie-icon-button` component: - -```js -import { PieIconButton } from '@justeattakeaway/pie-icon-button'; -import '@justeattakeaway/pie-icons-webc/IconClose'; -``` - -Then, in your markup, you would implement the component like this: - -```html - -``` +## Questions -> [!WARNING] -> Usually, icons imported from `pie-icons-webc` can be resized by specifying the `size` prop (such as ``). -> These size props will have no effect when used alongside the `pie-icon-button` component, as the icon is resized with respect to the size of the `pie-icon-button`. - - -## Props - -| Property | Type | Default | Description | -|-------------|-----------|-----------------|----------------------------------------------------------------------| -| size | `String` | `medium` | Size of the Icon Button, one of `sizes` – `xsmall`, `small`, `medium`, `large` | -| variant | `String` | `primary` | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost`, `ghost-secondary` | -| disabled | `Boolean` | `false`| If `true`, disables the button.| -| isLoading | `Boolean` | `false` | If `true`, displays a loading indicator inside the icon button. | - -In your HTML markup or JSX, you can then use these to set the properties for the `pie-icon-button` component, like so: - -```html - - - - - -``` - -## Events - -This component does not use any custom event handlers. In order to add event listening to this component, you can treat it like a native HTML element in your application. - -For example, to add a click handler in various templates: - - -### HTML - -```html - - -``` - -### Vue templates (using Nuxt 3) - -```html - - -``` - -### React templates (using Next 13) - -```html - - - -``` +Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch. ## Contributing -Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing). \ No newline at end of file +Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing). diff --git a/packages/components/pie-icon-button/package.json b/packages/components/pie-icon-button/package.json index a90571889a..0d15b8672f 100644 --- a/packages/components/pie-icon-button/package.json +++ b/packages/components/pie-icon-button/package.json @@ -1,6 +1,6 @@ { "name": "@justeattakeaway/pie-icon-button", - "version": "0.24.3", + "version": "0.25.0", "description": "PIE Design System Icon Button built using Web Components", "type": "module", "main": "dist/index.js", @@ -26,7 +26,7 @@ "author": "Just Eat Takeaway.com - Design System Team", "license": "Apache-2.0", "dependencies": { - "@justeattakeaway/pie-icons-webc": "0.15.0", + "@justeattakeaway/pie-icons-webc": "0.16.0", "@justeattakeaway/pie-spinner": "0.3.1", "@justeattakeaway/pie-webc-core": "0.13.0" }, diff --git a/packages/components/pie-input/.eslintignore b/packages/components/pie-input/.eslintignore new file mode 100644 index 0000000000..a4c746553e --- /dev/null +++ b/packages/components/pie-input/.eslintignore @@ -0,0 +1,6 @@ +.turbo +dist +node_modules +lit-browsers-report +lit-visual-report +test-results diff --git a/packages/components/pie-input/CHANGELOG.md b/packages/components/pie-input/CHANGELOG.md new file mode 100644 index 0000000000..2d2f1172d6 --- /dev/null +++ b/packages/components/pie-input/CHANGELOG.md @@ -0,0 +1,7 @@ +# @justeattakeaway/pie-input + +## 0.1.0 + +### Minor Changes + +- [Added] - Generated component boilerplate code ([#1135](https://github.com/justeattakeaway/pie/pull/1135)) by [@jamieomaguire](https://github.com/jamieomaguire) diff --git a/packages/components/pie-input/README.md b/packages/components/pie-input/README.md new file mode 100644 index 0000000000..eb7d09c2af --- /dev/null +++ b/packages/components/pie-input/README.md @@ -0,0 +1,91 @@ +

+ +

+ +

+ + GitHub Workflow Status + +

+ +# Table of Contents + +1. [Introduction](#pie-input) +2. [Installation](#installation) +3. [Importing the component](#importing-the-component) +4. [Peer Dependencies](#peer-dependencies) +5. [Props](#props) +6. [Contributing](#contributing) + +## pie-input + +`pie-input` is a Web Component built using the Lit library. + +This component can be easily integrated into various frontend frameworks and customized through a set of properties. + + +## Installation + +To install `pie-input` in your application, run the following on your command line: + +```bash +# npm +$ npm i @justeattakeaway/pie-input + +# yarn +$ yarn add @justeattakeaway/pie-input +``` + +For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components). + + +### Importing the component + +#### JavaScript +```js +// Default – for Native JS Applications, Vue, Angular, Svelte, etc. +import { PieInput } from '@justeattakeaway/pie-input'; + +// If you don't need to reference the imported object, you can simply +// import the module which registers the component as a custom element. +import '@justeattakeaway/pie-input'; +``` + +#### React +```js +// React +// For React, you will need to import our React-specific component build +// which wraps the web component using ​@lit/react +import { PieInput } from '@justeattakeaway/pie-input/dist/react'; +``` + +> [!NOTE] +> When using the React version of the component, please make sure to also +> include React as a [peer dependency](#peer-dependencies) in your project. + + +## Peer Dependencies + +> [!IMPORTANT] +> When using `pie-input`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application. + + +## Props + +| Property | Type | Default | Description | +|---|---|---|---| +| - | - | - | - | + +In your markup or JSX, you can then use these to set the properties for the `pie-input` component: + +```html + + + + + +``` + +## Contributing + +Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing). \ No newline at end of file diff --git a/packages/components/pie-input/declaration.d.ts b/packages/components/pie-input/declaration.d.ts new file mode 100644 index 0000000000..e198d772d0 --- /dev/null +++ b/packages/components/pie-input/declaration.d.ts @@ -0,0 +1,9 @@ +declare module '*.scss' { + const content: Record; + export default content; +} + +declare module '*.scss?inline' { + const content: Record; + export default content; +} diff --git a/packages/components/pie-input/package.json b/packages/components/pie-input/package.json new file mode 100644 index 0000000000..57c4a73949 --- /dev/null +++ b/packages/components/pie-input/package.json @@ -0,0 +1,42 @@ +{ + "name": "@justeattakeaway/pie-input", + "description": "PIE Design System Input built using Web Components", + "version": "0.1.0", + "type": "module", + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "files": [ + "src", + "dist", + "**/*.d.ts" + ], + "scripts": { + "build": "yarn build:wrapper pie-input && run -T vite build", + "lint:scripts": "run -T eslint .", + "lint:scripts:fix": "yarn lint:scripts --fix", + "lint:style": "run -T stylelint ./src/**/*.{css,scss}", + "lint:style:fix": "yarn lint:style --fix", + "watch": "run -T vite build --watch", + "test": "echo \"Error: no test specified\" && exit 0", + "test:ci": "yarn test", + "test:browsers": "npx playwright test -c ./playwright-lit.config.ts", + "test:browsers:ci": "yarn test:browsers", + "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_INPUT} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts", + "test:visual:ci": "yarn test:visual" + }, + "author": "Just Eat Takeaway.com - Design System Team", + "license": "Apache-2.0", + "devDependencies": { + "@justeattakeaway/pie-components-config": "workspace:*" + }, + "dependencies": { + "@justeattakeaway/pie-webc-core": "workspace:*" + }, + "volta": { + "extends": "../../../package.json" + }, + "sideEffects": [ + "dist/*.js" + ] +} diff --git a/packages/components/pie-input/playwright-lit-visual.config.ts b/packages/components/pie-input/playwright-lit-visual.config.ts new file mode 100644 index 0000000000..fb0f14c480 --- /dev/null +++ b/packages/components/pie-input/playwright-lit-visual.config.ts @@ -0,0 +1,4 @@ +import { defineConfig } from '@sand4rt/experimental-ct-web'; +import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config'; + +export default defineConfig(getPlaywrightVisualConfig()); diff --git a/packages/components/pie-input/playwright-lit.config.ts b/packages/components/pie-input/playwright-lit.config.ts new file mode 100644 index 0000000000..e50b9373b3 --- /dev/null +++ b/packages/components/pie-input/playwright-lit.config.ts @@ -0,0 +1,4 @@ +import { defineConfig } from '@sand4rt/experimental-ct-web'; +import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config'; + +export default defineConfig(getPlaywrightConfig()); diff --git a/packages/components/pie-input/playwright/index.html b/packages/components/pie-input/playwright/index.html new file mode 100644 index 0000000000..0e82100b95 --- /dev/null +++ b/packages/components/pie-input/playwright/index.html @@ -0,0 +1,56 @@ + + + + + + + + + + Testing Page + + + + +
+ + + diff --git a/packages/components/pie-input/playwright/index.ts b/packages/components/pie-input/playwright/index.ts new file mode 100644 index 0000000000..425e756bb7 --- /dev/null +++ b/packages/components/pie-input/playwright/index.ts @@ -0,0 +1 @@ +// Import common styles here diff --git a/packages/components/pie-input/src/defs.ts b/packages/components/pie-input/src/defs.ts new file mode 100644 index 0000000000..6503164c0a --- /dev/null +++ b/packages/components/pie-input/src/defs.ts @@ -0,0 +1,3 @@ +// TODO - please remove the eslint disable comment below when you add props to this interface +// eslint-disable-next-line @typescript-eslint/no-empty-interface +export interface InputProps {} diff --git a/packages/components/pie-input/src/index.ts b/packages/components/pie-input/src/index.ts new file mode 100644 index 0000000000..dfbad8bf55 --- /dev/null +++ b/packages/components/pie-input/src/index.ts @@ -0,0 +1,30 @@ +import { LitElement, html, unsafeCSS } from 'lit'; +import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core'; + +import styles from './input.scss?inline'; +import { InputProps } from './defs'; + +// Valid values available to consumers +export * from './defs'; + +const componentSelector = 'pie-input'; + +/** + * @tagname pie-input + */ +export class PieInput extends RtlMixin(LitElement) implements InputProps { + render () { + return html`

Hello world!

`; + } + + // Renders a `CSSResult` generated from SCSS by Vite + static styles = unsafeCSS(styles); +} + +defineCustomElement(componentSelector, PieInput); + +declare global { + interface HTMLElementTagNameMap { + [componentSelector]: PieInput; + } +} diff --git a/packages/components/pie-input/src/input.scss b/packages/components/pie-input/src/input.scss new file mode 100644 index 0000000000..6ffaedad64 --- /dev/null +++ b/packages/components/pie-input/src/input.scss @@ -0,0 +1 @@ +@use '@justeattakeaway/pie-css/scss' as p; diff --git a/packages/components/pie-input/test/accessibility/pie-input.spec.ts b/packages/components/pie-input/test/accessibility/pie-input.spec.ts new file mode 100644 index 0000000000..2ed4816437 --- /dev/null +++ b/packages/components/pie-input/test/accessibility/pie-input.spec.ts @@ -0,0 +1,18 @@ + +import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/fixtures.ts'; +import { PieInput, InputProps } from '@/index'; + +test.describe('PieInput - Accessibility tests', () => { + test('a11y - should test the PieInput component WCAG compliance', async ({ makeAxeBuilder, mount }) => { + await mount( + PieInput, + { + props: {} as InputProps, + }, + ); + + const results = await makeAxeBuilder().analyze(); + + expect(results.violations).toEqual([]); + }); +}); diff --git a/packages/components/pie-input/test/component/pie-input.spec.ts b/packages/components/pie-input/test/component/pie-input.spec.ts new file mode 100644 index 0000000000..ae4f700248 --- /dev/null +++ b/packages/components/pie-input/test/component/pie-input.spec.ts @@ -0,0 +1,20 @@ + +import { test, expect } from '@sand4rt/experimental-ct-web'; +import { PieInput, InputProps } from '@/index'; + +const componentSelector = '[data-test-id="pie-input"]'; + +test.describe('PieInput - Component tests', () => { + test('should render successfully', async ({ mount, page }) => { + // Arrange + await mount(PieInput, { + props: {} as InputProps, + }); + + // Act + const input = page.locator(componentSelector); + + // Assert + expect(input).toBeVisible(); + }); +}); diff --git a/packages/components/pie-input/test/visual/pie-input.spec.ts b/packages/components/pie-input/test/visual/pie-input.spec.ts new file mode 100644 index 0000000000..99dd4bae1f --- /dev/null +++ b/packages/components/pie-input/test/visual/pie-input.spec.ts @@ -0,0 +1,14 @@ + +import { test } from '@sand4rt/experimental-ct-web'; +import percySnapshot from '@percy/playwright'; +import { PieInput, InputProps } from '@/index'; + +test.describe('PieInput - Visual tests`', () => { + test('should display the PieInput component successfully', async ({ page, mount }) => { + await mount(PieInput, { + props: {} as InputProps, + }); + + await percySnapshot(page, 'PieInput - Visual Test'); + }); +}); diff --git a/packages/components/pie-input/tsconfig.json b/packages/components/pie-input/tsconfig.json new file mode 100644 index 0000000000..ee23eb3699 --- /dev/null +++ b/packages/components/pie-input/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../../configs/pie-components-config/tsconfig.json", + "compilerOptions": { + "baseUrl": ".", + "rootDir": ".", + }, + "include": ["src/**/*.ts","./declaration.d.ts", "test/**/*.ts", "playwright-lit-visual.config.ts", "playwright-lit.config.ts"], +} diff --git a/packages/components/pie-input/vite.config.js b/packages/components/pie-input/vite.config.js new file mode 100644 index 0000000000..cd07913d05 --- /dev/null +++ b/packages/components/pie-input/vite.config.js @@ -0,0 +1,3 @@ +import viteConfig from '@justeattakeaway/pie-components-config/vite.config'; + +export default viteConfig; diff --git a/packages/components/pie-link/CHANGELOG.md b/packages/components/pie-link/CHANGELOG.md index 61e4fef664..665b8f8fbb 100644 --- a/packages/components/pie-link/CHANGELOG.md +++ b/packages/components/pie-link/CHANGELOG.md @@ -1,5 +1,11 @@ # @justeattakeaway/pie-link +## 0.12.0 + +### Minor Changes + +- [Changed] - README to link directly to documentation site ([#1126](https://github.com/justeattakeaway/pie/pull/1126)) by [@LTurns](https://github.com/LTurns) + ## 0.11.3 ### Patch Changes diff --git a/packages/components/pie-link/README.md b/packages/components/pie-link/README.md index fa411902b8..f1a5b2953b 100644 --- a/packages/components/pie-link/README.md +++ b/packages/components/pie-link/README.md @@ -8,15 +8,6 @@

-# Table of Contents - -1. [Introduction](#pie-link) -2. [Installation](#installation) -3. [Importing the component](#importing-the-component) -4. [Peer Dependencies](#peer-dependencies) -5. [Props](#props) -6. [Contributing](#contributing) - ## pie-link `pie-link` is a Web Component built using the Lit library. @@ -36,89 +27,14 @@ $ npm i @justeattakeaway/pie-link $ yarn add @justeattakeaway/pie-link ``` -For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components). - - -### Importing the component - -#### JavaScript -```js -// Default – for Native JS Applications, Vue, Angular, Svelte, etc. -import { PieLink } from '@justeattakeaway/pie-link'; - -// If you don't need to reference the imported object, you can simply -// import the module which registers the component as a custom element. -import '@justeattakeaway/pie-link'; -``` - -#### React -```js -// React -// For React, you will need to import our React-specific component build -// which wraps the web component using ​@lit/react -import { PieLink } from '@justeattakeaway/pie-link/dist/react'; -``` - -> [!NOTE] -> When using the React version of the component, please make sure to also -> include React as a [peer dependency](#peer-dependencies) in your project. - - -## Peer Dependencies - -> [!IMPORTANT] -> When using `pie-link`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application. - -## Props - -| Property | Type | Default | Description | -| ------------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------- | -| tag | `String` | `a` | The rendered HTML element of the link, one of `tags` – `a`, `button` | -| variant | `String` | `default` | Variant of the link, one of `variants` – `default`, `high-visibility`, `inverse` | -| size | `String` | `medium` | Size of the link, one of `sizes` – `medium`, `small` | -| underline | `String` | `default` | The underline behaviour of the link, one of `underlineTypes` – `default`, `reversed`. The `reverse` type can only be used if `isStandalone` is set to `true` | -| href | `String` | `undefined` | Native html `href` attribute | -| rel | `String` | `undefined` | Native html `rel` attribute | -| target | `String` | `undefined` | Native html `target` attribute | -| type | `String` | `submit` | Native html `type` attribute if the tag is set to `button` | -| isBold | `Boolean` | `false` | If `true`, sets the link text bold | -| isStandalone | `Boolean` | `false` | If `true`, sets the link as a block element | -| hasVisited | `Boolean` | `false` | If `true`, the link will apply the styles for the visited state | -| iconPlacement | `String` | `leading` | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing`. Can only be used if `isStandalone` is `true` | -| aria | `object` | `undefined` | The ARIA labels used for the link. | - -In your markup or JSX, you can then use these to set the properties for the `pie-link` component: - -```html - - - - - -``` - -## Slots +## Documentation -| Slot | Description | -| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| Default slot | The default slot is used to pass text into the link component. | -| icon | Used to pass in an icon to the link component. The icon placement can be controlled via the `iconPlacement` prop and we recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. | +Visit [Link | PIE Design System](https://pie.design/components/link/overview) to view more information on this component. -### Using `pie-icons-webc` with the `pie-link` icon slot +## Questions -We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this: - -```html - - - - Search - -``` +Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch. ## Contributing -Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing). \ No newline at end of file +Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing). diff --git a/packages/components/pie-link/package.json b/packages/components/pie-link/package.json index e0cc93c8d1..fbd5adaa34 100644 --- a/packages/components/pie-link/package.json +++ b/packages/components/pie-link/package.json @@ -1,7 +1,7 @@ { "name": "@justeattakeaway/pie-link", "description": "PIE Design System Link built using Web Components", - "version": "0.11.3", + "version": "0.12.0", "type": "module", "main": "dist/index.js", "module": "dist/index.js", diff --git a/packages/components/pie-modal/CHANGELOG.md b/packages/components/pie-modal/CHANGELOG.md index da41c6cab0..b5fc45a653 100644 --- a/packages/components/pie-modal/CHANGELOG.md +++ b/packages/components/pie-modal/CHANGELOG.md @@ -1,5 +1,18 @@ # @justeattakeaway/pie-modal +## 0.36.0 + +### Minor Changes + +- [Changed] - README to link directly to documentation site ([#1126](https://github.com/justeattakeaway/pie/pull/1126)) by [@LTurns](https://github.com/LTurns) + +### Patch Changes + +- Updated dependencies [[`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`270b4679f`](https://github.com/justeattakeaway/pie/commit/270b4679f2ec553fad25baf16b775b6740e1150c), [`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e), [`99160e0c3`](https://github.com/justeattakeaway/pie/commit/99160e0c3fa6d4ef566fefdbea7850e469e502b9), [`5541a6b1d`](https://github.com/justeattakeaway/pie/commit/5541a6b1d6f7fb9dff75e16c28087bd853564426)]: + - @justeattakeaway/pie-icon-button@0.25.0 + - @justeattakeaway/pie-icons-webc@0.16.0 + - @justeattakeaway/pie-button@0.42.0 + ## 0.35.6 ### Patch Changes diff --git a/packages/components/pie-modal/README.md b/packages/components/pie-modal/README.md index 98eaa363a3..0baaea807d 100644 --- a/packages/components/pie-modal/README.md +++ b/packages/components/pie-modal/README.md @@ -8,16 +8,6 @@

-# Table of Contents - -1. [Introduction](#pie-modal) -2. [Installation](#installation) -3. [Importing the component](#importing-the-component) -4. [Peer Dependencies](#peer-dependencies) -5. [Props](#props) -6. [Legacy browser support](#legacy-browser-support) -7. [Contributing](#contributing) - ## pie-modal @@ -38,84 +28,14 @@ $ npm i @justeattakeaway/pie-modal $ yarn add @justeattakeaway/pie-modal ``` -For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components). - - -### Importing the component - -#### JavaScript -```js -// Default – for Native JS Applications, Vue, Angular, Svelte, etc. -import { PieModal } from '@justeattakeaway/pie-modal'; - -// If you don't need to reference the imported object, you can simply -// import the module which registers the component as a custom element. -import '@justeattakeaway/pie-modal'; -``` - -#### React -```js -// React -// For React, you will need to import our React-specific component build -// which wraps the web component using ​@lit/react -import { PieModal } from '@justeattakeaway/pie-modal/dist/react'; -``` - -> [!NOTE] -> When using the React version of the component, please make sure to also -> include React as a [peer dependency](#peer-dependencies) in your project. - - -## Peer Dependencies - -> [!IMPORTANT] -> When using `pie-modal`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application. - - -## Props - -| Property | Type | Default | Description | -|-------------------------------|-----------|----------------|-------------| -| aria | `Object` | `undefined` | An object representing the aria labels for the `close` & `back` buttons within the modal as well as the `isLoading` state labels (`aria-label` & `aria-busy`). | -| hasBackButton | `Boolean` | `false` | If true, the modal includes a back button which closes the modal when clicked. | -| hasStackedActions | `Boolean` | `false` | If true, the action buttons will be stacked (full width) at narrow breakpoints. | -| heading | `String` | n/a (Required) | The heading text of the modal. | -| headingLevel | `String` | `h2` | The HTML tag to use for the modal's heading (can be `h1`-`h6`). | -| isDismissible | `Boolean` | `false` | If true, the modal includes a close button and can be dismissed by clicking on the backdrop or pressing the `Esc` key. | -| isFooterPinned | `Boolean` | `true` | When false, the modal footer will scroll with the content inside the modal body. | -| isFullWidthBelowMid | `Boolean` | `false` | If true and the page is narrower than the mid breakpoint, a **medium-sized** modal will take up the full width of the screen. | -| isLoading | `Boolean` | `false` | When true, displays a loading spinner in the modal | -| isOpen | `Boolean` | `false` | Controls if the modal element is open or closed | -| leadingAction | `Object` | `undefined` | An object representing the leading action of the modal. It has the following properties:
- text (required): The text to display on the leading action button.
- variant: The variant of the leading action button. Please see [pie-button](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-button/README.md#props) for options. Defaults to primary if not provided.
- ariaLabel: The ARIA label for the leading action button. Example: `leadingAction = { text: "Example Text", variant: "secondary", ariaLabel: "Example Aria Label" }` | -| position | `String` | `center` | The position of the modal; this controls where it will appear on the page. Can be `top` or `center`. | -| returnFocusAfterCloseSelector | `String` | `undefined` | If provided, focus will be sent to the first element that matches this selector when the modal is closed. If not provided, the `dialog` element will return focus to the element that opened the modal. | -| size | `String` | `medium` | Determines the maximum width of the modal. Large modals will expand to fill the entire page width at narrow viewports. Can be `small`, `medium` or `large`. | -| supportingAction | `Object` | `undefined` | An object representing the supporting action of the modal. It has the following properties:
- text (required): The text to display on the supporting action button.
- variant: The variant of the supporting action button. Please see [pie-button](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-button/README.md#props) for options. Defaults to ghost if not provided.
- ariaLabel: The ARIA label for the supporting action button. Example: `supportingAction = { text: "Example Text", variant: "ghost", ariaLabel: "Example Aria Label" }` | - -In your markup or JSX, you can then use these to set the properties for the `pie-modal` component: - -```html - -Click me! - - -Click me! -``` - -## Legacy browser support - -`pie-modal` uses the Dialog element which might not be supported by legacy browsers. - -To support them, `pie-modal` uses the [dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill) package. It works automatically and doesn't need any setup. +## Documentation -The polyfill comes with a few limitations, as noted on its [documentation page](https://github.com/GoogleChrome/dialog-polyfill#limitations): -- Dialogs should not be contained by parents that create a stacking context -- The browser's chrome may not always be accessible via the tab key -- Changes to the CSS top/bottom values while open aren't retained +Visit [Modal | PIE Design System](https://pie.design/components/modal/overview) to view more information on this component. -For more details, check the package documentation mentioned above. +## Questions +Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch. ## Contributing -Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing). \ No newline at end of file +Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing). diff --git a/packages/components/pie-modal/package.json b/packages/components/pie-modal/package.json index e1edd04062..8ee8b6619f 100644 --- a/packages/components/pie-modal/package.json +++ b/packages/components/pie-modal/package.json @@ -1,6 +1,6 @@ { "name": "@justeattakeaway/pie-modal", - "version": "0.35.6", + "version": "0.36.0", "description": "PIE design system modal built using web components", "type": "module", "main": "dist/index.js", @@ -36,9 +36,9 @@ "extends": "../../../package.json" }, "dependencies": { - "@justeattakeaway/pie-button": "0.41.1", - "@justeattakeaway/pie-icon-button": "0.24.3", - "@justeattakeaway/pie-icons-webc": "0.15.0", + "@justeattakeaway/pie-button": "0.42.0", + "@justeattakeaway/pie-icon-button": "0.25.0", + "@justeattakeaway/pie-icons-webc": "0.16.0", "@justeattakeaway/pie-spinner": "0.3.1", "@justeattakeaway/pie-webc-core": "0.13.0", "body-scroll-lock": "3.1.5", diff --git a/packages/components/pie-switch/CHANGELOG.md b/packages/components/pie-switch/CHANGELOG.md index 89644f9048..50c1822c8b 100644 --- a/packages/components/pie-switch/CHANGELOG.md +++ b/packages/components/pie-switch/CHANGELOG.md @@ -1,5 +1,16 @@ # @justeattakeaway/pie-switch +## 0.22.0 + +### Minor Changes + +- [Changed] - README to link directly to documentation site ([#1126](https://github.com/justeattakeaway/pie/pull/1126)) by [@LTurns](https://github.com/LTurns) + +### Patch Changes + +- Updated dependencies [[`270b4679f`](https://github.com/justeattakeaway/pie/commit/270b4679f2ec553fad25baf16b775b6740e1150c), [`e27452b22`](https://github.com/justeattakeaway/pie/commit/e27452b228e2a09ded5a2bd88a6d3c567a94f03e)]: + - @justeattakeaway/pie-icons-webc@0.16.0 + ## 0.21.0 ### Minor Changes diff --git a/packages/components/pie-switch/README.md b/packages/components/pie-switch/README.md index ac029c4cfb..7b55034fdc 100644 --- a/packages/components/pie-switch/README.md +++ b/packages/components/pie-switch/README.md @@ -10,13 +10,27 @@ ## pie-switch -`pie-switch` is a Web Component built using the Lit library. +`pie-switch` is a Web Component built using the Lit library. It allows users to switch between two states or options with a single action. -This component can be easily integrated into various frontend frameworks and customized through a set of properties. +## Installation -> [!IMPORTANT] ->For full information on using this component, please refer to our [documentation page](https://pie.design/components/switch/code/). +To install `pie-switch` in your application, run the following on your command line: +```bash +# npm +$ npm i @justeattakeaway/pie-switch + +# yarn +$ yarn add @justeattakeaway/pie-switch +``` + +## Documentation + +Visit [Modal | PIE Design System](https://pie.design/components/modal/overview) to view more information on this component. + +## Questions + +Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch. ## Contributing diff --git a/packages/components/pie-switch/package.json b/packages/components/pie-switch/package.json index 6449dad563..3bdb591c58 100644 --- a/packages/components/pie-switch/package.json +++ b/packages/components/pie-switch/package.json @@ -1,7 +1,7 @@ { "name": "@justeattakeaway/pie-switch", "description": "PIE Design System Switch built using Web Components", - "version": "0.21.0", + "version": "0.22.0", "type": "module", "main": "dist/index.js", "module": "dist/index.js", @@ -31,7 +31,7 @@ "@justeattakeaway/pie-components-config": "0.7.0" }, "dependencies": { - "@justeattakeaway/pie-icons-webc": "0.15.0", + "@justeattakeaway/pie-icons-webc": "0.16.0", "@justeattakeaway/pie-webc-core": "0.13.0", "element-internals-polyfill": "1.3.9" }, diff --git a/packages/tools/pie-icons-webc/CHANGELOG.md b/packages/tools/pie-icons-webc/CHANGELOG.md index 552448dc5c..4ffd9e49fc 100644 --- a/packages/tools/pie-icons-webc/CHANGELOG.md +++ b/packages/tools/pie-icons-webc/CHANGELOG.md @@ -1,5 +1,15 @@ # @justeattakeaway/pie-icons-webc +## 0.16.0 + +### Minor Changes + +- [Fixed] - Remove `:host-context` usage for icon sizing ([#1107](https://github.com/justeattakeaway/pie/pull/1107)) by [@kevinrodrigues](https://github.com/kevinrodrigues) + +### Patch Changes + +- [Changed] - `--btn-icon-size` and `--btn-icon-display` to `--icon-display-override` and `--icon-size-override` variable for display, width and height icon styles for `:host svg` ([#1127](https://github.com/justeattakeaway/pie/pull/1127)) by [@dandel10n](https://github.com/dandel10n) + ## 0.15.0 ### Minor Changes diff --git a/packages/tools/pie-icons-webc/package.json b/packages/tools/pie-icons-webc/package.json index e5d3a0c7f4..77f9cb3118 100644 --- a/packages/tools/pie-icons-webc/package.json +++ b/packages/tools/pie-icons-webc/package.json @@ -1,6 +1,6 @@ { "name": "@justeattakeaway/pie-icons-webc", - "version": "0.15.0", + "version": "0.16.0", "type": "module", "main": "dist/index.js", "module": "dist/index.js", diff --git a/yarn.lock b/yarn.lock index f806287017..74bd1e9123 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5512,7 +5512,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-components-config@0.7.0, @justeattakeaway/pie-components-config@workspace:configs/pie-components-config": +"@justeattakeaway/pie-components-config@0.7.0, @justeattakeaway/pie-components-config@workspace:*, @justeattakeaway/pie-components-config@workspace:configs/pie-components-config": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-components-config@workspace:configs/pie-components-config" dependencies: @@ -5681,6 +5681,15 @@ __metadata: languageName: node linkType: hard +"@justeattakeaway/pie-input@workspace:packages/components/pie-input": + version: 0.0.0-use.local + resolution: "@justeattakeaway/pie-input@workspace:packages/components/pie-input" + dependencies: + "@justeattakeaway/pie-components-config": "workspace:*" + "@justeattakeaway/pie-webc-core": "workspace:*" + languageName: unknown + linkType: soft + "@justeattakeaway/pie-link@0.11.3, @justeattakeaway/pie-link@workspace:packages/components/pie-link": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-link@workspace:packages/components/pie-link" @@ -5745,7 +5754,7 @@ __metadata: languageName: unknown linkType: soft -"@justeattakeaway/pie-webc-core@0.13.0, @justeattakeaway/pie-webc-core@workspace:packages/components/pie-webc-core": +"@justeattakeaway/pie-webc-core@0.13.0, @justeattakeaway/pie-webc-core@workspace:*, @justeattakeaway/pie-webc-core@workspace:packages/components/pie-webc-core": version: 0.0.0-use.local resolution: "@justeattakeaway/pie-webc-core@workspace:packages/components/pie-webc-core" dependencies: