Skip to content

Commit 2357d4a

Browse files
ashleynolanashleynolan
authored
Merge branch 'main' into dsw-000-reviewtracker
2 parents 8f6d166 + b7ea0a0 commit 2357d4a

File tree

15 files changed

+537
-65
lines changed

15 files changed

+537
-65
lines changed

‎.changeset/hungry-zoos-press.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@justeattakeaway/pie-css": minor
3+
---
4+
5+
[Updated] - version to push new pie-css version to CDN

‎.changeset/old-cameras-shop.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@justeattakeaway/pie-monorepo-utils": minor
3+
"pie-monorepo": minor
4+
---
5+
6+
[Updated] - cdn publishing functionality to handle multiple packages

‎.changeset/plenty-dolphins-sneeze.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@justeattakeaway/pie-cookie-banner": minor
3+
"@justeattakeaway/pie-css": minor
4+
---
5+
6+
[Added] - `pieMetadata` properties for cdn publishing

‎.changeset/twenty-vans-joke.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@justeattakeaway/pie-select": minor
3+
"pie-storybook": minor
4+
---
5+
6+
[Added] - shell component and its main props

‎.github/workflows/changeset-release.yml

+14-38
Original file line numberDiff line numberDiff line change
@@ -201,41 +201,17 @@ jobs:
201201
}
202202
env:
203203
SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
204-
205-
publish-cookie-banner-cdn:
206-
needs: changesets
207-
runs-on: ${{ inputs.os }}
208-
if: needs.changesets.outputs.published == 'true' && contains(fromJson(needs.changesets.outputs.publishedPackages).*.name, '@justeattakeaway/pie-cookie-banner')
209-
steps:
210-
# Checkout the Repo
211-
- name: Checkout
212-
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
213-
214-
# Setup Repo
215-
- name: Setup Repo
216-
uses: ./.github/actions/setup-repo
217-
with:
218-
node-version: ${{ inputs.node-version }}
219-
os: ${{ inputs.os }}
220-
221-
# Build
222-
- name: Build Cookie Banner
223-
uses: ./.github/actions/run-script
224-
with:
225-
script-name: "build --filter=pie-cookie-banner"
226-
227-
- name: Extract cookie banner version
228-
id: extract-version
229-
run: |
230-
PACKAGES='${{ needs.changesets.outputs.publishedPackages }}'
231-
cookie_banner_version=$(echo $PACKAGES | jq -r '.[] | select(.name == "@justeattakeaway/pie-cookie-banner") | .version')
232-
echo "COOKIE_BANNER_VERSION=$cookie_banner_version" >> $GITHUB_ENV
233-
234-
- name: Upload to S3
235-
run: |
236-
aws s3 sync $GITHUB_WORKSPACE/packages/components/pie-cookie-banner/cdn_dist/ s3://$PIE_CDN_BUCKET_NAME/pie-cookie-banner/$COOKIE_BANNER_VERSION/ --region $AWS_REGION --content-type "text/javascript"
237-
env:
238-
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY_ID }}
239-
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
240-
AWS_REGION: eu-west-1
241-
PIE_CDN_BUCKET_NAME: ${{ vars.PIE_CDN_BUCKET_NAME }}
204+
205+
- name: Publish packages to CDN
206+
if: steps.changesets-main.outputs.published == 'true'
207+
uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
208+
env:
209+
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY_ID }}
210+
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
211+
AWS_REGION: eu-west-1
212+
PIE_CDN_BUCKET_NAME: ${{ vars.PIE_CDN_BUCKET_NAME }}
213+
with:
214+
script: |
215+
const publishedPackages = JSON.parse('${{ steps.changesets-main.outputs.publishedPackages }}');
216+
const publishToCdn = require('${{ github.workspace }}/packages/tools/pie-monorepo-utils/pie-cdn/publish-to-cdn.js');
217+
await publishToCdn({ publishedPackages });

‎apps/pie-storybook/stories/pie-select.stories.ts

+88-11
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,111 @@
1-
import { html } from 'lit';
1+
import { html, nothing } from 'lit';
22
import { type Meta } from '@storybook/web-components';
33

44
import '@justeattakeaway/pie-select';
5-
import { type SelectProps } from '@justeattakeaway/pie-select';
5+
import {
6+
defaultProps,
7+
sizes,
8+
statusTypes,
9+
type SelectProps as SelectBaseProps,
10+
} from '@justeattakeaway/pie-select';
11+
import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
12+
import { ifDefined } from 'lit/directives/if-defined.js';
613

7-
import { createStory } from '../utilities';
14+
import { createStory, type TemplateFunction } from '../utilities';
815

16+
type SelectProps = SelectBaseProps & { showLeadingIcon: boolean };
917
type SelectStoryMeta = Meta<SelectProps>;
1018

11-
const defaultArgs: SelectProps = {};
19+
const defaultArgs: SelectProps = {
20+
...defaultProps,
21+
name: 'testName',
22+
showLeadingIcon: false,
23+
};
1224

1325
const selectStoryMeta: SelectStoryMeta = {
1426
title: 'Select',
1527
component: 'pie-select',
16-
argTypes: {},
28+
argTypes: {
29+
name: {
30+
description: 'The name of the select (used as a key/value pair with `value`). This is required in order to work properly with forms.',
31+
control: 'text',
32+
defaultValue: {
33+
summary: defaultArgs.name,
34+
},
35+
},
36+
disabled: {
37+
description: 'If true, disables the select field.',
38+
control: 'boolean',
39+
defaultValue: {
40+
summary: defaultProps.disabled,
41+
},
42+
},
43+
size: {
44+
description: 'The size of the select field. Can be `small`, `medium` or `large`. Defaults to `medium`.',
45+
control: 'select',
46+
options: sizes,
47+
defaultValue: {
48+
summary: defaultProps.size,
49+
},
50+
},
51+
assistiveText: {
52+
description: 'An optional assistive text to display below the select element. Must be provided when the status is success or error.',
53+
control: 'text',
54+
defaultValue: {
55+
summary: '',
56+
},
57+
},
58+
status: {
59+
description: 'The status of the select component / assistive text. Can be default or error.',
60+
control: 'select',
61+
options: statusTypes,
62+
defaultValue: {
63+
summary: defaultProps.status,
64+
},
65+
},
66+
showLeadingIcon: {
67+
description: '<b>**Not a component prop</b><br><br>Use the `leadingIcon` slot to pass a PIE icon component.',
68+
control: 'boolean',
69+
defaultValue: {
70+
summary: defaultArgs.showLeadingIcon,
71+
},
72+
},
73+
},
1774
args: defaultArgs,
1875
parameters: {
1976
design: {
2077
type: 'figma',
21-
url: '',
78+
url: 'https://www.figma.com/design/pPSC73rPin4csb8DiK1CRr/branch/7dcPx40PggJCudTmgHwlk6/%E2%9C%A8-%5BCore%5D-Web-Components-%5BPIE-3%5D?node-id=1573-114525&p=f&m=dev',
2279
},
2380
},
2481
};
2582

2683
export default selectStoryMeta;
2784

28-
// TODO: remove the eslint-disable rule when props are added
29-
// eslint-disable-next-line no-empty-pattern
30-
const Template = ({}: SelectProps) => html`
31-
<pie-select></pie-select>
32-
`;
85+
const Template = ({
86+
disabled,
87+
size,
88+
assistiveText,
89+
status,
90+
name,
91+
showLeadingIcon,
92+
}: SelectProps) => html`
93+
<pie-select
94+
id="${ifDefined(name)}"
95+
name="${ifDefined(name)}"
96+
?disabled="${disabled}"
97+
size="${ifDefined(size)}"
98+
assistiveText="${ifDefined(assistiveText)}"
99+
status=${ifDefined(status)}>
100+
${showLeadingIcon ? html`<icon-placeholder slot="leadingIcon"></icon-placeholder>` : nothing}
101+
</pie-select>
102+
`;
103+
104+
const WithLabelTemplate: TemplateFunction<SelectProps> = (props: SelectProps) => html`
105+
<p>Please note, the label is a separate component. See <pie-link href="/?path=/story/form-label">pie-form-label</pie-link>.</p>
106+
<pie-form-label for="${ifDefined(props.name)}">Label</pie-form-label>
107+
${Template(props)}
108+
`;
33109

34110
export const Default = createStory<SelectProps>(Template, defaultArgs)();
111+
export const Labelled = createStory<SelectProps>(WithLabelTemplate, defaultArgs)();

‎packages/components/README.md

+19-1
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,11 @@ As with the browser tests, it is vital that the component to test is mounted and
111111
## Bundling
112112
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.
113113

114-
## Component Status changes
114+
## PIE Metadata Configuration
115+
116+
The `pieMetadata` object in a package's `package.json` file is used to configure various aspects of PIE packages. This metadata controls component status, CDN publishing, and other features.
117+
118+
### Component Status changes
115119
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.
116120

117121
Supported statuses are `alpha`, `beta` and `stable`.
@@ -123,6 +127,20 @@ Supported statuses are `alpha`, `beta` and `stable`.
123127
},
124128
```
125129

130+
### CDN Publishing
131+
132+
To enable CDN publishing for a package, add the following properties:
133+
134+
```json
135+
// package.json
136+
"pieMetadata": {
137+
"cdnPublish": true,
138+
"cdnSourceFolder": "dist",
139+
"cdnContentType": "text/javascript"
140+
}
141+
```
142+
143+
126144
### Release Categorisation
127145
| | Prerelease/Alpha (v0.x.x) | Beta (v0.x.x) | Stable (v1.x.x) |
128146
|--------------------|-------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

‎packages/components/pie-cookie-banner/package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@
2121
"**/*.d.ts"
2222
],
2323
"pieMetadata": {
24-
"componentStatus": "stable"
24+
"componentStatus": "stable",
25+
"cdnPublish": true,
26+
"cdnSourceFolder": "cdn_dist",
27+
"cdnContentType": "text/javascript"
2528
},
2629
"scripts": {
2730
"build": "run -T vite build && yarn build:cdn",

‎packages/components/pie-select/src/defs-react.ts

+2-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
11
import type React from 'react';
2-
/**
3-
* TODO: Verify if ReactBaseType can be set as a more specific React interface
4-
* Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces
5-
* Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>`
6-
* https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829
7-
*/
8-
export type ReactBaseType = React.HTMLAttributes<HTMLElement>
2+
3+
export type ReactBaseType = React.HTMLAttributes<HTMLSelectElement>

‎packages/components/pie-select/src/defs.ts

+40-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,40 @@
1-
// TODO - please remove the eslint disable comment below when you add props to this interface
2-
// eslint-disable-next-line @typescript-eslint/no-empty-interface
3-
export interface SelectProps {}
1+
import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2+
3+
export const sizes = ['small', 'medium', 'large'] as const;
4+
5+
export const statusTypes = ['default', 'error'] as const;
6+
7+
export interface SelectProps {
8+
/**
9+
* The size of the select component. Can be `small`, `medium` or `large`. Defaults to `medium`.
10+
*/
11+
size?: typeof sizes[number];
12+
13+
/**
14+
* Same as the HTML disabled attribute - indicates whether the select is disabled.
15+
*/
16+
disabled?: boolean;
17+
18+
/**
19+
* An optional assistive text to display below the select element. Must be provided when the status is success or error.
20+
*/
21+
assistiveText?: string;
22+
23+
/**
24+
* The status of the select component / assistive text. Can be default or error.
25+
*/
26+
status?: typeof statusTypes[number];
27+
28+
/**
29+
* The name of the select (used as a key/value pair with `value`). This is required in order to work properly with forms.
30+
*/
31+
name?: string;
32+
}
33+
34+
type DefaultProps = ComponentDefaultProps<SelectProps, keyof Omit<SelectProps, 'name' | 'assistiveText' >>;
35+
36+
export const defaultProps: DefaultProps = {
37+
size: 'medium',
38+
status: 'default',
39+
disabled: false,
40+
};

0 commit comments

Comments
 (0)