diff --git a/.changeset/light-badgers-suffer.md b/.changeset/light-badgers-suffer.md new file mode 100644 index 0000000000..b1a24cd8e0 --- /dev/null +++ b/.changeset/light-badgers-suffer.md @@ -0,0 +1,7 @@ +--- +"@justeattakeaway/pie-checkbox": minor +--- + +[Changed] - Replaced label prop with a slot to give consumers the option to easily customize the label. +[Changed] - Fixed the rtl styles for the tick/dash for checked/indeterminate state. +[Changed] - Updated visual tests. diff --git a/.changeset/modern-melons-draw.md b/.changeset/modern-melons-draw.md new file mode 100644 index 0000000000..8c7dfa0c17 --- /dev/null +++ b/.changeset/modern-melons-draw.md @@ -0,0 +1,6 @@ +--- +"@justeattakeaway/pie-button": minor +--- + +[Changed] - Styles now use classmap +[Fixed] - Fixed background colour when button is in `xsmall` or `small` size and responsive mode is true, where the bg-color wasn't updating to orange as required diff --git a/.changeset/neat-cooks-pay.md b/.changeset/neat-cooks-pay.md new file mode 100644 index 0000000000..54ce33184a --- /dev/null +++ b/.changeset/neat-cooks-pay.md @@ -0,0 +1,7 @@ +--- +"@justeattakeaway/pie-checkbox": patch +"@justeattakeaway/pie-switch": patch +"@justeattakeaway/pie-webc": patch +--- + +[Changed] - isRtl attr changed to data-is-rtl diff --git a/.changeset/polite-carpets-mix.md b/.changeset/polite-carpets-mix.md new file mode 100644 index 0000000000..509537dbfb --- /dev/null +++ b/.changeset/polite-carpets-mix.md @@ -0,0 +1,7 @@ +--- +"@justeattakeaway/pie-checkbox-group": minor +--- + +[Added] - New `isInline` prop. +[Added] - Styling for Checkbox Group. +[Added] - Visual tests. diff --git a/.changeset/six-ducks-kneel.md b/.changeset/six-ducks-kneel.md new file mode 100644 index 0000000000..95da7c130f --- /dev/null +++ b/.changeset/six-ducks-kneel.md @@ -0,0 +1,5 @@ +--- +"wc-react17": minor +--- + +[Added] - pie-webc integration to react app diff --git a/apps/examples/wc-react17/.eslintrc.js b/apps/examples/wc-react17/.eslintrc.js index fd91e9f133..b3e81446f7 100644 --- a/apps/examples/wc-react17/.eslintrc.js +++ b/apps/examples/wc-react17/.eslintrc.js @@ -1,4 +1,5 @@ module.exports = { + root: true, extends: [ require.resolve('@justeattakeaway/eslint-config-pie/strict'), ], diff --git a/apps/examples/wc-react17/.gitignore b/apps/examples/wc-react17/.gitignore index 6e66e91a7a..a547bf36d8 100644 --- a/apps/examples/wc-react17/.gitignore +++ b/apps/examples/wc-react17/.gitignore @@ -1,25 +1,24 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -.yarn/* - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - +# Logs +logs +*.log npm-debug.log* yarn-debug.log* yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/apps/examples/wc-react17/README.md b/apps/examples/wc-react17/README.md index b8c06bf66e..10e327e02b 100644 --- a/apps/examples/wc-react17/README.md +++ b/apps/examples/wc-react17/README.md @@ -1,20 +1,20 @@ -# Getting Started with Create React App +# React + Vite -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. -## Available Scripts +Currently, two official plugins are available: -In the project directory, you can run: +- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh +- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh -### `yarn start` -Runs the app in the development mode.\ -Open [http://localhost:3000](http://localhost:3000) to view it in your browser. +## Available Scripts -The page will reload when you make changes.\ -You may also see any lint errors in the console. +In the project directory, you can run: ### `yarn dev` -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. +Runs the app in the development mode. + +The page will reload when you make changes. +You may also see any lint errors in the console. diff --git a/apps/examples/wc-react17/index.html b/apps/examples/wc-react17/index.html new file mode 100644 index 0000000000..0c589eccd4 --- /dev/null +++ b/apps/examples/wc-react17/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/apps/examples/wc-react17/package.json b/apps/examples/wc-react17/package.json index 4572b32309..8bccf45c0f 100644 --- a/apps/examples/wc-react17/package.json +++ b/apps/examples/wc-react17/package.json @@ -1,18 +1,30 @@ { "name": "wc-react17", - "version": "0.4.43", "private": true, + "version": "0.4.43", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", + "preview": "vite preview" + }, "dependencies": { - "@justeattakeaway/pie-button": "0.47.8", "@justeattakeaway/pie-css": "0.12.1", - "@lit/react": "1.0.2", + "@justeattakeaway/pie-webc": "0.5.13", + "@lit/react": "1.0.5", "react": "17.0.2", - "react-dom": "17.0.2", - "react-scripts": "5.0.1" + "react-dom": "17.0.2" }, - "scripts": { - "dev": "react-scripts start", - "build:examples": "react-scripts build" + "devDependencies": { + "@types/react": "^17.0.2", + "@types/react-dom": "^17.0.2", + "@vitejs/plugin-react": "4.3.1", + "eslint": "8.57.0", + "eslint-plugin-react": "7.34.3", + "eslint-plugin-react-hooks": "4.6.2", + "eslint-plugin-react-refresh": "0.4.7", + "vite": "5.3.4" }, "browserslist": { "production": [ diff --git a/apps/examples/wc-react17/public/index.html b/apps/examples/wc-react17/public/index.html deleted file mode 100644 index aa069f27cb..0000000000 --- a/apps/examples/wc-react17/public/index.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - - - - - - - - - React App - - - -
- - - diff --git a/apps/examples/wc-react17/src/styles.css b/apps/examples/wc-react17/src/App.css similarity index 100% rename from apps/examples/wc-react17/src/styles.css rename to apps/examples/wc-react17/src/App.css diff --git a/apps/examples/wc-react17/src/App.js b/apps/examples/wc-react17/src/App.jsx similarity index 79% rename from apps/examples/wc-react17/src/App.js rename to apps/examples/wc-react17/src/App.jsx index 7a8c897866..d5fe3bcd68 100644 --- a/apps/examples/wc-react17/src/App.js +++ b/apps/examples/wc-react17/src/App.jsx @@ -1,7 +1,7 @@ -import { PieButton } from '@justeattakeaway/pie-button/dist/react'; +import { PieButton } from '@justeattakeaway/pie-webc/react/button.js'; import '@justeattakeaway/pie-css'; -import './styles.css'; +import './App.css'; function App () { return ( diff --git a/apps/examples/wc-react17/src/index.js b/apps/examples/wc-react17/src/index.js deleted file mode 100644 index 8e6b727804..0000000000 --- a/apps/examples/wc-react17/src/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import { render } from 'react-dom'; -import App from './App'; - -render( - - - , - document.getElementById('root'), -); diff --git a/apps/examples/wc-react17/src/main.jsx b/apps/examples/wc-react17/src/main.jsx new file mode 100644 index 0000000000..26a751e915 --- /dev/null +++ b/apps/examples/wc-react17/src/main.jsx @@ -0,0 +1,10 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App.jsx"; + +ReactDOM.render( + + + , + document.getElementById("root") +); diff --git a/apps/examples/wc-react17/vite.config.js b/apps/examples/wc-react17/vite.config.js new file mode 100644 index 0000000000..5a33944a9b --- /dev/null +++ b/apps/examples/wc-react17/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}) diff --git a/apps/pie-docs/src/_11ty/shortcodes/componentStatusTable.js b/apps/pie-docs/src/_11ty/shortcodes/componentStatusTable.js index 4224bff484..5808967a9f 100644 --- a/apps/pie-docs/src/_11ty/shortcodes/componentStatusTable.js +++ b/apps/pie-docs/src/_11ty/shortcodes/componentStatusTable.js @@ -13,9 +13,7 @@ const buildRow = (cells, headings) => cells.map((cell) => { headings.map((heading) => { if ('componentName' in cell) { content = `${cell.componentName}`; - } else - - if (heading.title === cell.resource) { + } else if (heading.title === cell.resource) { const { bgColor, status } = statusSettings[cell.status]; content = `${status}`; } diff --git a/apps/pie-storybook/data/tag-variants-to-statuses-map.ts b/apps/pie-storybook/data/tag-variants-to-statuses-map.ts index f74e1059ed..13ff8f6892 100644 --- a/apps/pie-storybook/data/tag-variants-to-statuses-map.ts +++ b/apps/pie-storybook/data/tag-variants-to-statuses-map.ts @@ -1,4 +1,4 @@ -import { TagVariantToStatusMap } from '../interfaces/tag-variant-to-status-map'; +import { type TagVariantToStatusMap } from '../interfaces/tag-variant-to-status-map'; export const tagVariantToStatusMap: TagVariantToStatusMap = { alpha: 'yellow', diff --git a/apps/pie-storybook/decorators/component-status.ts b/apps/pie-storybook/decorators/component-status.ts index ba32858b3c..83e4e5172a 100644 --- a/apps/pie-storybook/decorators/component-status.ts +++ b/apps/pie-storybook/decorators/component-status.ts @@ -1,9 +1,9 @@ -import { TemplateResult, html } from 'lit'; +import { type TemplateResult, html } from 'lit'; import '@justeattakeaway/pie-tag'; import '@justeattakeaway/pie-icons-webc/dist/IconHelpCircle.js'; import componentStatusesJson from '../component-statuses.json'; -import { StorybookContext } from '../interfaces/storybook-context'; -import { ComponentStatuses } from '../interfaces/component-status'; +import { type StorybookContext } from '../interfaces/storybook-context'; +import { type ComponentStatuses } from '../interfaces/component-status'; import { tagVariantToStatusMap } from '../data/tag-variants-to-statuses-map'; const componentStatuses: ComponentStatuses = componentStatusesJson; diff --git a/apps/pie-storybook/decorators/writing-direction.ts b/apps/pie-storybook/decorators/writing-direction.ts index cf2701e117..85df7f9aff 100644 --- a/apps/pie-storybook/decorators/writing-direction.ts +++ b/apps/pie-storybook/decorators/writing-direction.ts @@ -1,5 +1,5 @@ -import { TemplateResult } from 'lit'; -import { StorybookContext } from '../interfaces/storybook-context'; +import { type TemplateResult } from 'lit'; +import { type StorybookContext } from '../interfaces/storybook-context'; export const WritingDirection = (story: () => TemplateResult, storybookContext: StorybookContext) => { const { globals } = storybookContext; diff --git a/apps/pie-storybook/stories/pie-button.stories.ts b/apps/pie-storybook/stories/pie-button.stories.ts index ab4144c653..0a38c79706 100644 --- a/apps/pie-storybook/stories/pie-button.stories.ts +++ b/apps/pie-storybook/stories/pie-button.stories.ts @@ -4,13 +4,13 @@ import { ifDefined } from 'lit/directives/if-defined.js'; /* eslint-disable import/no-duplicates */ import '@justeattakeaway/pie-button'; import { - ButtonProps as ButtonPropsBase, iconPlacements, sizes, types, variants, responsiveSizes, defaultProps, + type ButtonProps as ButtonPropsBase, iconPlacements, sizes, types, variants, responsiveSizes, defaultProps, } from '@justeattakeaway/pie-button'; /* eslint-enable import/no-duplicates */ import '@justeattakeaway/pie-icons-webc/dist/IconPlusCircle.js'; import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; -import { StoryMeta, SlottedComponentProps } from '../types'; +import { type StoryMeta, type SlottedComponentProps } from '../types'; type ButtonProps = SlottedComponentProps; type ButtonStoryMeta = StoryMeta; diff --git a/apps/pie-storybook/stories/pie-card.stories.ts b/apps/pie-storybook/stories/pie-card.stories.ts index 42aad1d75f..26ef53b4d2 100644 --- a/apps/pie-storybook/stories/pie-card.stories.ts +++ b/apps/pie-storybook/stories/pie-card.stories.ts @@ -5,7 +5,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'; /* eslint-disable import/no-duplicates */ import '@justeattakeaway/pie-card'; import { - CardProps as CardPropsBase, variants, tags, paddingValues, defaultProps, + type CardProps as CardPropsBase, variants, tags, paddingValues, defaultProps, } from '@justeattakeaway/pie-card'; /* eslint-enable import/no-duplicates */ diff --git a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts index 4d46b694eb..f9edd4312d 100644 --- a/apps/pie-storybook/stories/pie-checkbox-group.stories.ts +++ b/apps/pie-storybook/stories/pie-checkbox-group.stories.ts @@ -2,7 +2,7 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; /* eslint-disable import/no-duplicates */ import '@justeattakeaway/pie-checkbox-group'; -import { CheckboxGroupProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group'; +import { type CheckboxGroupProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group'; /* eslint-enable import/no-duplicates */ import { type StoryMeta } from '../types'; @@ -29,6 +29,13 @@ const checkboxGroupStoryMeta: CheckboxGroupStoryMeta = { description: 'The visible label for the checkbox group.', control: 'text', }, + isInline: { + description: 'Inline (horizontal) positioning of checkbox items.', + control: 'boolean', + defaultValue: { + summary: defaultArgs.isInline, + }, + }, status: { description: 'The status of the checkbox group component / assistive text. Can be default, success or error.', control: 'select', @@ -66,32 +73,31 @@ export default checkboxGroupStoryMeta; const Template = ({ name, label, + isInline, assistiveText, status, disabled, }: CheckboxGroupProps) => html` -

Please note, the checkboxes are separate components. See - pie-checkbox.

- - - - - - - - +
+

Please note, the checkboxes are separate components. See + pie-checkbox.

+ + checkbox 1 + checkbox 2 + checkbox 3 longer label + checkbox 4 + checkbox 5 even longer label: Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + checkbox 6 + +
`; export const Default = createStory(Template, defaultArgs)(); diff --git a/apps/pie-storybook/stories/pie-checkbox.stories.ts b/apps/pie-storybook/stories/pie-checkbox.stories.ts index 6d25ff131c..925f09be45 100644 --- a/apps/pie-storybook/stories/pie-checkbox.stories.ts +++ b/apps/pie-storybook/stories/pie-checkbox.stories.ts @@ -2,24 +2,19 @@ import { html } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; /* eslint-disable import/no-duplicates */ import '@justeattakeaway/pie-checkbox'; -import { CheckboxProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox'; +import { type CheckboxProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox'; /* eslint-enable import/no-duplicates */ import { action } from '@storybook/addon-actions'; import { type StoryMeta } from '../types'; -import { createStory, type TemplateFunction } from '../utilities'; +import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities'; type CheckboxStoryMeta = StoryMeta; const defaultArgs: CheckboxProps = { ...defaultProps, name: 'name', - label: 'Label', - checked: false, - defaultChecked: false, - disabled: false, - indeterminate: false, - required: false, + slot: 'Label', }; const checkboxStoryMeta: CheckboxStoryMeta = { @@ -39,12 +34,9 @@ const checkboxStoryMeta: CheckboxStoryMeta = { }, }, - label: { - description: 'The visible label for the checkbox', + slot: { + description: 'Content to place as a checkbox label', control: 'text', - defaultValue: { - summary: defaultArgs.label, - }, }, checked: { @@ -118,7 +110,6 @@ export default checkboxStoryMeta; const Template = ({ value, name, - label, checked, defaultChecked, disabled, @@ -126,6 +117,7 @@ const Template = ({ required, assistiveText, status, + slot, }: CheckboxProps) => { function onChange (event: CustomEvent) { action('change')({ @@ -137,7 +129,6 @@ const Template = ({ + ${sanitizeAndRenderHTML(slot)} `; }; @@ -160,6 +152,7 @@ const ExampleFormTemplate: TemplateFunction = ({ required, assistiveText, status, + slot, }: CheckboxProps) => { function onChange (event: CustomEvent) { action('change')({ @@ -172,7 +165,6 @@ const ExampleFormTemplate: TemplateFunction = ({ = ({ ?required="${required}" @change="${onChange}" assistiveText="${ifDefined(assistiveText)}" - status=${ifDefined(status)}> + status=${ifDefined(status)}> + ${sanitizeAndRenderHTML(slot)} +