Skip to content

Commit e35c49a

Browse files
xander-marjoramxander-marjoram
authored
feat(pie-radio-group): DSW-2285 add component skeleton (#1821)
* feat(pie-radio-group): DSW-2285 add component skeleton * Update generator README * Update yarn.lock * Add changesets
1 parent 9c7cc29 commit e35c49a

29 files changed

+388
-24
lines changed

‎.changeset/red-apricots-beg.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@justeattakeaway/generator-pie-component": patch
3+
---
4+
5+
[Changed] - Updated README

‎.changeset/stupid-gorillas-sing.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@justeattakeaway/pie-radio-group": minor
3+
"@justeattakeaway/pie-webc": patch
4+
---
5+
6+
[Added] - pie-radio-group skeleton from component generator

‎.github/project-labeler.yml

+3
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,9 @@ pie-notification:
9797
pie-radio:
9898
- 'packages/components/pie-radio/**/*'
9999

100+
pie-radio-group:
101+
- 'packages/components/pie-radio-group/**/*'
102+
100103
pie-spinner:
101104
- 'packages/components/pie-spinner/**/*'
102105

‎.github/workflows/ci.yml

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ env:
4040
PERCY_TOKEN_PIE_MODAL: ${{ secrets.PERCY_TOKEN_PIE_MODAL }}
4141
PERCY_TOKEN_PIE_NOTIFICATION: ${{ secrets.PERCY_TOKEN_PIE_NOTIFICATION }}
4242
PERCY_TOKEN_PIE_RADIO: ${{ secrets.PERCY_TOKEN_PIE_RADIO }}
43+
PERCY_TOKEN_PIE_RADIO_GROUP: ${{ secrets.PERCY_TOKEN_PIE_RADIO_GROUP }}
4344
PERCY_TOKEN_PIE_SPINNER: ${{ secrets.PERCY_TOKEN_PIE_SPINNER }}
4445
PERCY_TOKEN_PIE_SWITCH: ${{ secrets.PERCY_TOKEN_PIE_SWITCH }}
4546
PERCY_TOKEN_PIE_TAG: ${{ secrets.PERCY_TOKEN_PIE_TAG }}

‎apps/pie-storybook/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"@justeattakeaway/pie-modal": "0.46.2",
3131
"@justeattakeaway/pie-notification": "0.10.2",
3232
"@justeattakeaway/pie-radio": "0.0.0",
33+
"@justeattakeaway/pie-radio-group": "0.0.0",
3334
"@justeattakeaway/pie-spinner": "0.7.0",
3435
"@justeattakeaway/pie-switch": "0.30.1",
3536
"@justeattakeaway/pie-tag": "0.10.0",

‎apps/pie-storybook/stories/pie-radio-group.stories.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { html } from 'lit';
2+
3+
import '@justeattakeaway/pie-radio-group';
4+
import { type RadioGroupProps } from '@justeattakeaway/pie-radio-group';
5+
6+
import { type StoryMeta } from '../types';
7+
import { createStory } from '../utilities';
8+
9+
type RadioGroupStoryMeta = StoryMeta<RadioGroupProps>;
10+
11+
const defaultArgs: RadioGroupProps = {};
12+
13+
const radioGroupStoryMeta: RadioGroupStoryMeta = {
14+
title: 'Radio Group',
15+
component: 'pie-radio-group',
16+
argTypes: {},
17+
args: defaultArgs,
18+
parameters: {
19+
design: {
20+
type: 'figma',
21+
url: '',
22+
},
23+
},
24+
};
25+
26+
export default radioGroupStoryMeta;
27+
28+
// TODO: remove the eslint-disable rule when props are added
29+
// eslint-disable-next-line no-empty-pattern
30+
const Template = ({}: RadioGroupProps) => html`
31+
<pie-radio-group></pie-radio-group>
32+
`;
33+
34+
export const Default = createStory<RadioGroupProps>(Template, defaultArgs)();

‎packages/components/pie-radio-group/.eslintignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.turbo
2+
dist
3+
node_modules
4+
lit-browsers-report
5+
lit-visual-report
6+
test-results

‎packages/components/pie-radio-group/README.md

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<p align="center">
2+
<img align="center" src="../../../readme_image.png" height="200" alt="">
3+
</p>
4+
5+
<p align="center">
6+
<a href="https://www.npmjs.com/@justeattakeaway/pie-radio-group">
7+
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-radio-group.svg">
8+
</a>
9+
</p>
10+
11+
# Table of Contents
12+
13+
1. [Introduction](#pie-radio-group)
14+
2. [Installation](#installation)
15+
3. [Importing the component](#importing-the-component)
16+
4. [Peer Dependencies](#peer-dependencies)
17+
5. [Props](#props)
18+
6. [Contributing](#contributing)
19+
20+
## pie-radio-group
21+
22+
`pie-radio-group` is a Web Component built using the Lit library.
23+
24+
This component can be easily integrated into various frontend frameworks and customized through a set of properties.
25+
26+
27+
## Installation
28+
29+
To install `pie-radio-group` in your application, run the following on your command line:
30+
31+
```bash
32+
# npm
33+
$ npm i @justeattakeaway/pie-radio-group
34+
35+
# yarn
36+
$ yarn add @justeattakeaway/pie-radio-group
37+
```
38+
39+
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).
40+
41+
42+
### Importing the component
43+
44+
#### JavaScript
45+
```js
46+
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
47+
import { PieRadioGroup } from '@justeattakeaway/pie-radio-group';
48+
49+
// If you don't need to reference the imported object, you can simply
50+
// import the module which registers the component as a custom element.
51+
import '@justeattakeaway/pie-radio-group';
52+
```
53+
54+
#### React
55+
```js
56+
// React
57+
// For React, you will need to import our React-specific component build
58+
// which wraps the web component using ​@lit/react
59+
import { PieRadioGroup } from '@justeattakeaway/pie-radio-group/dist/react';
60+
```
61+
62+
> [!NOTE]
63+
> When using the React version of the component, please make sure to also
64+
> include React as a [peer dependency](#peer-dependencies) in your project.
65+
66+
67+
## Peer Dependencies
68+
69+
> [!IMPORTANT]
70+
> When using `pie-radio-group`, 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.
71+
72+
73+
## Props
74+
75+
| Property | Type | Default | Description |
76+
|---|---|---|---|
77+
| - | - | - | - |
78+
79+
In your markup or JSX, you can then use these to set the properties for the `pie-radio-group` component:
80+
81+
```html
82+
<!-- Native HTML -->
83+
<pie-radio-group></pie-radio-group>
84+
85+
<!-- JSX -->
86+
<PieRadioGroup></PieRadioGroup>
87+
```
88+
89+
## Contributing
90+
91+
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).

‎packages/components/pie-radio-group/custom-elements-manifest.config.mjs

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { moduleFileExtensionsPlugin } from 'cem-plugin-module-file-extensions';
2+
3+
export default {
4+
globs: [
5+
'./src/**/!(*.css).ts',
6+
],
7+
exclude: [
8+
'**/*.d.ts',
9+
'**/*.d.js',
10+
'**/react.ts',
11+
'**/test/**',
12+
'**/node_modules/**',
13+
],
14+
plugins: [moduleFileExtensionsPlugin()],
15+
};

‎packages/components/pie-radio-group/declaration.d.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
declare module '*.scss' {
2+
const content: Record<string, string>;
3+
export default content;
4+
}
5+
6+
declare module '*.scss?inline' {
7+
const content: Record<string, string>;
8+
export default content;
9+
}

‎packages/components/pie-radio-group/package.json

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{
2+
"name": "@justeattakeaway/pie-radio-group",
3+
"description": "PIE Design System Radio Group built using Web Components",
4+
"version": "0.0.0",
5+
"type": "module",
6+
"main": "dist/index.js",
7+
"module": "dist/index.js",
8+
"types": "dist/index.d.ts",
9+
"files": [
10+
"custom-elements.json",
11+
"src",
12+
"dist",
13+
"**/*.d.ts"
14+
],
15+
"pieMetadata": {
16+
"componentStatus": "alpha"
17+
},
18+
"scripts": {
19+
"build": "run -T vite build",
20+
"build:react-wrapper": "npx build-react-wrapper",
21+
"create:manifest": "yarn cem analyze --litelement",
22+
"lint:scripts": "run -T eslint .",
23+
"lint:scripts:fix": "yarn lint:scripts --fix",
24+
"lint:style": "run -T stylelint ./src/**/*.{css,scss}",
25+
"lint:style:fix": "yarn lint:style --fix",
26+
"watch": "run -T vite build --watch",
27+
"test": "echo \"Error: no test specified\" && exit 0",
28+
"test:ci": "yarn test",
29+
"test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
30+
"test:browsers:ci": "yarn test:browsers",
31+
"test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_RADIO_GROUP} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
32+
"test:visual:ci": "yarn test:visual",
33+
"test:browsers-setup": "npx playwright-lit-setup"
34+
},
35+
"author": "Just Eat Takeaway.com - Design System Team",
36+
"license": "Apache-2.0",
37+
"devDependencies": {
38+
"@custom-elements-manifest/analyzer": "0.9.0",
39+
"@justeattakeaway/pie-components-config": "0.18.0",
40+
"@justeattakeaway/pie-css": "0.12.1",
41+
"cem-plugin-module-file-extensions": "0.0.5"
42+
},
43+
"dependencies": {
44+
"@justeattakeaway/pie-webc-core": "0.24.0"
45+
},
46+
"volta": {
47+
"extends": "../../../package.json"
48+
},
49+
"customElements": "custom-elements.json",
50+
"sideEffects": [
51+
"dist/*.js"
52+
]
53+
}

‎packages/components/pie-radio-group/playwright-lit-visual.config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { defineConfig } from '@sand4rt/experimental-ct-web';
2+
import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
3+
4+
export default defineConfig(getPlaywrightVisualConfig());

‎packages/components/pie-radio-group/playwright-lit.config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { defineConfig } from '@sand4rt/experimental-ct-web';
2+
import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
3+
4+
export default defineConfig(getPlaywrightConfig());

‎packages/components/pie-radio-group/src/defs-react.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
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>

‎packages/components/pie-radio-group/src/defs.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
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 RadioGroupProps {}

‎packages/components/pie-radio-group/src/index.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { LitElement, html, unsafeCSS } from 'lit';
2+
3+
import { defineCustomElement } from '@justeattakeaway/pie-webc-core';
4+
import styles from './radio-group.scss?inline';
5+
import { type RadioGroupProps } from './defs';
6+
7+
// Valid values available to consumers
8+
export * from './defs';
9+
10+
const componentSelector = 'pie-radio-group';
11+
12+
/**
13+
* @tagname pie-radio-group
14+
*/
15+
export class PieRadioGroup extends LitElement implements RadioGroupProps {
16+
render () {
17+
return html`<h1 data-test-id="pie-radio-group">Hello world!</h1>`;
18+
}
19+
20+
// Renders a `CSSResult` generated from SCSS by Vite
21+
static styles = unsafeCSS(styles);
22+
}
23+
24+
defineCustomElement(componentSelector, PieRadioGroup);
25+
26+
declare global {
27+
interface HTMLElementTagNameMap {
28+
[componentSelector]: PieRadioGroup;
29+
}
30+
}

‎packages/components/pie-radio-group/src/radio-group.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@use '@justeattakeaway/pie-css/scss' as p;

‎packages/components/pie-radio-group/test/accessibility/pie-radio-group.spec.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
2+
import { PieRadioGroup } from '../../src/index.ts';
3+
4+
test.describe('PieRadioGroup - Accessibility tests', () => {
5+
test('a11y - should test the PieRadioGroup component WCAG compliance', async ({ makeAxeBuilder, mount }) => {
6+
await mount(PieRadioGroup);
7+
8+
const results = await makeAxeBuilder().analyze();
9+
10+
expect(results.violations).toEqual([]);
11+
});
12+
});

‎packages/components/pie-radio-group/test/component/pie-radio-group.spec.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { test, expect } from '@sand4rt/experimental-ct-web';
2+
import { PieRadioGroup } from '../../src/index.ts';
3+
4+
const componentSelector = '[data-test-id="pie-radio-group"]';
5+
6+
test.describe('PieRadioGroup - Component tests', () => {
7+
test('should render successfully', async ({ mount, page }) => {
8+
// Arrange
9+
await mount(PieRadioGroup);
10+
11+
// Act
12+
const radioGroup = page.locator(componentSelector);
13+
14+
// Assert
15+
expect(radioGroup).toBeVisible();
16+
});
17+
});

‎packages/components/pie-radio-group/test/visual/pie-radio-group.spec.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { test } from '@sand4rt/experimental-ct-web';
2+
import percySnapshot from '@percy/playwright';
3+
import { PieRadioGroup } from '../../src/index.ts';
4+
5+
test.describe('PieRadioGroup - Visual tests`', () => {
6+
test('should display the PieRadioGroup component successfully', async ({ page, mount }) => {
7+
await mount(PieRadioGroup);
8+
9+
await percySnapshot(page, 'PieRadioGroup - Visual Test');
10+
});
11+
});

‎packages/components/pie-radio-group/tsconfig.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "@justeattakeaway/pie-components-config/tsconfig.json",
3+
"compilerOptions": {
4+
"baseUrl": ".",
5+
"rootDir": ".",
6+
},
7+
"include": ["src/**/*.ts","./declaration.d.ts", "test/**/*.ts", "playwright-lit-visual.config.ts", "playwright-lit.config.ts"],
8+
}

‎packages/components/pie-radio-group/vite.config.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import viteConfig from '@justeattakeaway/pie-components-config/vite.config';
2+
3+
export default viteConfig;

‎packages/components/pie-webc/components/radio-group.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from '@justeattakeaway/pie-radio-group';

‎packages/components/pie-webc/components/radio-group.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from '@justeattakeaway/pie-radio-group';

0 commit comments

Comments
 (0)