@justeattakeaway/pie-modal 0.14.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintignore +6 -0
- package/.turbo/turbo-build.log +4 -4
- package/CHANGELOG.md +35 -0
- package/README.md +17 -17
- package/dist/index.js +1024 -180
- package/dist/react.js +0 -0
- package/dist/types/index.d.ts +0 -0
- package/dist/types/packages/components/pie-modal/src/defs.d.ts +46 -25
- package/dist/types/packages/components/pie-modal/src/defs.d.ts.map +1 -1
- package/dist/types/packages/components/pie-modal/src/index.d.ts +26 -10
- package/dist/types/packages/components/pie-modal/src/index.d.ts.map +1 -1
- package/dist/types/packages/components/pie-modal/src/react.d.ts +0 -0
- package/dist/types/packages/components/pie-modal/src/react.d.ts.map +0 -0
- package/dist/types/react.d.ts +0 -0
- package/package.json +3 -1
- package/playwright/index.ts +1 -1
- package/playwright-lit-visual.config.ts +0 -1
- package/playwright-lit.config.ts +1 -2
- package/src/defs.ts +57 -30
- package/src/index.ts +122 -52
- package/src/modal.scss +44 -2
- package/test/component/pie-modal.spec.ts +163 -0
- package/test/visual/pie-modal.spec.ts +200 -26
- package/tsconfig.json +1 -1
package/.eslintignore
ADDED
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
[
|
|
1
|
+
[3:36:05 PM] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
2
|
react wrapper has been added!
|
|
3
3
|
[36mvite v4.3.9 [32mbuilding for production...[36m[39m
|
|
4
4
|
transforming...
|
|
5
5
|
[32m✓[39m 27 modules transformed.
|
|
6
6
|
rendering chunks...
|
|
7
7
|
computing gzip size...
|
|
8
|
-
[2mdist/[22m[36mindex.js [39m[1m[
|
|
8
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m54.46 kB[22m[1m[22m[2m │ gzip: 14.59 kB[22m
|
|
9
9
|
[2mdist/[22m[36mreact.js [39m[1m[2m59.27 kB[22m[1m[22m[2m │ gzip: 15.99 kB[22m
|
|
10
10
|
[32m
|
|
11
11
|
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
-
[32m✓ built in
|
|
13
|
-
[32m[36m[vite:dts][32m Declaration files built in
|
|
12
|
+
[32m✓ built in 41.09s[39m
|
|
13
|
+
[32m[36m[vite:dts][32m Declaration files built in 35252ms.
|
|
14
14
|
[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,40 @@
|
|
|
1
1
|
# @justeattakeaway/pie-modal
|
|
2
2
|
|
|
3
|
+
## 0.16.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [Added] - hasStackedActions to pie-modal action buttons ([#650](https://github.com/justeattakeaway/pie/pull/650)) by [@ashleynolan](https://github.com/ashleynolan)
|
|
8
|
+
|
|
9
|
+
- [Fixed] - Prevent tree-shaking of components in storybook ([#667](https://github.com/justeattakeaway/pie/pull/667)) by [@xander-marjoram](https://github.com/xander-marjoram)
|
|
10
|
+
|
|
11
|
+
[Removed] - Built webc icons from source control
|
|
12
|
+
[Added] - Type declaration files for components
|
|
13
|
+
[Added] - Types for pie-icons
|
|
14
|
+
[Added] - TS version of pie-icons-configs/config.js (Will be used after DSW-1025)
|
|
15
|
+
[Added] - Webc icon tests for width, height and base classes
|
|
16
|
+
[Changed] - Update pie-icons-webc build to generate a slightly different template for regular and large icons (using different types, etc.)
|
|
17
|
+
[Changed] - Update pie-icons-webc rollup config to remove commonjs build
|
|
18
|
+
[Changed] - Use `just-kebab-case` and `just-pascal-case` instead of `kebab-case` and `pascal-case` to simplify usage (and they're more recently maintained)
|
|
19
|
+
|
|
20
|
+
- [Added] - New ActionProps type for modal leading/supporting actions ([#670](https://github.com/justeattakeaway/pie/pull/670)) by [@xander-marjoram](https://github.com/xander-marjoram)
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- [Fixed] - Re-add property decorator for modal position prop ([#676](https://github.com/justeattakeaway/pie/pull/676)) by [@xander-marjoram](https://github.com/xander-marjoram)
|
|
25
|
+
|
|
26
|
+
## 0.15.0
|
|
27
|
+
|
|
28
|
+
### Minor Changes
|
|
29
|
+
|
|
30
|
+
- [Added] - isFooterPinned property to modal which offers more scrolling options to consumers ([#648](https://github.com/justeattakeaway/pie/pull/648)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
31
|
+
|
|
32
|
+
- [Added] - Modal aria labels to close, back and loading elements ([#652](https://github.com/justeattakeaway/pie/pull/652)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
|
|
33
|
+
|
|
34
|
+
- [Changed] - Add js/ts linting and fix errors ([#653](https://github.com/justeattakeaway/pie/pull/653)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
35
|
+
|
|
36
|
+
- [Added] SupportingAction prop to modal ([#643](https://github.com/justeattakeaway/pie/pull/643)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
|
|
37
|
+
|
|
3
38
|
## 0.14.0
|
|
4
39
|
|
|
5
40
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -57,23 +57,23 @@ import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
|
|
|
57
57
|
|
|
58
58
|
## Props
|
|
59
59
|
|
|
60
|
-
| Property
|
|
61
|
-
|
|
62
|
-
|
|
|
63
|
-
|
|
64
|
-
|
|
|
65
|
-
|
|
66
|
-
|
|
|
67
|
-
|
|
|
68
|
-
|
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
| isOpen
|
|
72
|
-
|
|
|
73
|
-
|
|
|
74
|
-
|
|
|
75
|
-
|
|
|
76
|
-
|
|
|
60
|
+
| Property | Type | Default | Description |
|
|
61
|
+
|-------------------------------|-----------|----------------|-------------|
|
|
62
|
+
| 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`). |
|
|
63
|
+
| hasBackButton | `Boolean` | `false` | If true, the modal includes a back button which closes the modal when clicked. |
|
|
64
|
+
| hasStackedActions | `Boolean` | `false` | If true, the action buttons will be stacked (full width) at narrow breakpoints. |
|
|
65
|
+
| heading | `String` | n/a (Required) | The heading text of the modal. |
|
|
66
|
+
| headingLevel | `String` | `h2` | The HTML tag to use for the modal's heading (can be `h1`-`h6`). |
|
|
67
|
+
| 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. |
|
|
68
|
+
| isFooterPinned | `Boolean` | `true` | When false, the modal footer will scroll with the content inside the modal body. |
|
|
69
|
+
| 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. |
|
|
70
|
+
| isLoading | `Boolean` | `false` | When true, displays a loading spinner in the modal |
|
|
71
|
+
| isOpen | `Boolean` | `false` | Controls if the modal element is open or closed |
|
|
72
|
+
| leadingAction | `Object` | `undefined` | An object representing the leading action of the modal. It has the following properties:<br>- text (required): The text to display on the leading action button.<br>- 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.<br>- ariaLabel: The ARIA label for the leading action button. Example: `leadingAction = { text: "Example Text", variant: "secondary", ariaLabel: "Example Aria Label" }` |
|
|
73
|
+
| position | `String` | `center` | The position of the modal; this controls where it will appear on the page. Can be `top` or `center`. |
|
|
74
|
+
| 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. |
|
|
75
|
+
| 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`. |
|
|
76
|
+
| supportingAction | `Object` | `undefined` | An object representing the supporting action of the modal. It has the following properties:<br>- text (required): The text to display on the supporting action button.<br>- 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.<br>- ariaLabel: The ARIA label for the supporting action button. Example: `supportingAction = { text: "Example Text", variant: "ghost", ariaLabel: "Example Aria Label" }` |
|
|
77
77
|
|
|
78
78
|
In your markup or JSX, you can then use these to set the properties for the `pie-modal` component:
|
|
79
79
|
|