diff --git a/.changeset/afraid-chairs-develop.md b/.changeset/afraid-chairs-develop.md new file mode 100644 index 0000000000..ece675ea4c --- /dev/null +++ b/.changeset/afraid-chairs-develop.md @@ -0,0 +1,5 @@ +--- +"pie-docs": minor +--- + +[Added] - Checkbox overview page diff --git a/.changeset/blue-yaks-mix.md b/.changeset/blue-yaks-mix.md new file mode 100644 index 0000000000..ee7c2e1615 --- /dev/null +++ b/.changeset/blue-yaks-mix.md @@ -0,0 +1,5 @@ +--- +"wc-next13": minor +--- + +[Added] - pie-webc integration to next13 example apps diff --git a/.changeset/curly-tomatoes-leave.md b/.changeset/curly-tomatoes-leave.md new file mode 100644 index 0000000000..9d883f2511 --- /dev/null +++ b/.changeset/curly-tomatoes-leave.md @@ -0,0 +1,5 @@ +--- +"wc-next10": minor +--- + +[Added] pie-webc integration to next10 example app diff --git a/.changeset/neat-lies-relax.md b/.changeset/neat-lies-relax.md new file mode 100644 index 0000000000..86c5c54db3 --- /dev/null +++ b/.changeset/neat-lies-relax.md @@ -0,0 +1,5 @@ +--- +"pie-docs": minor +--- + +[Changed] - Updates Engineering copy and adds new Web Components index guide to current documentation in Github Wiki. diff --git a/apps/examples/wc-next10/ButtonSizes.js b/apps/examples/wc-next10/ButtonSizes.js index 43f6dfa5d0..1a79a45ba9 100644 --- a/apps/examples/wc-next10/ButtonSizes.js +++ b/apps/examples/wc-next10/ButtonSizes.js @@ -1,6 +1,5 @@ import React from 'react'; -import { sizes } from '@justeattakeaway/pie-button'; -import { PieButton } from '@justeattakeaway/pie-button/dist/react'; +import { PieButton, sizes } from '@justeattakeaway/pie-webc/react/button'; export default function ButtonSizes () { return ( diff --git a/apps/examples/wc-next10/Counter.js b/apps/examples/wc-next10/Counter.js index f08cc83326..ee3a41dd07 100644 --- a/apps/examples/wc-next10/Counter.js +++ b/apps/examples/wc-next10/Counter.js @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { PieButton } from '@justeattakeaway/pie-button/dist/react'; +import { PieButton } from '@justeattakeaway/pie-webc/react/button'; export default function Counter () { const [count, setCount] = useState(0); diff --git a/apps/examples/wc-next10/VariantSwitch.js b/apps/examples/wc-next10/VariantSwitch.js index 06464d02a5..b225d83c21 100644 --- a/apps/examples/wc-next10/VariantSwitch.js +++ b/apps/examples/wc-next10/VariantSwitch.js @@ -1,6 +1,5 @@ import React, { useState, useRef } from 'react'; -import { variants } from '@justeattakeaway/pie-button'; -import { PieButton } from '@justeattakeaway/pie-button/dist/react'; +import { PieButton, variants } from '@justeattakeaway/pie-webc/react/button'; export default function VariantSwitch () { const variantIndex = useRef(0); diff --git a/apps/examples/wc-next10/next.config.js b/apps/examples/wc-next10/next.config.js index ed3df9e95e..b739a249e2 100644 --- a/apps/examples/wc-next10/next.config.js +++ b/apps/examples/wc-next10/next.config.js @@ -2,6 +2,7 @@ const path = require('path'); const transpileModules = [ '@justeattakeaway/pie-button', + '@justeattakeaway/pie-webc', '@justeattakeaway/pie-cookie-banner', '@lit/react', 'lit' diff --git a/apps/examples/wc-next10/package.json b/apps/examples/wc-next10/package.json index c5ac7a1fe0..551c57404c 100644 --- a/apps/examples/wc-next10/package.json +++ b/apps/examples/wc-next10/package.json @@ -10,9 +10,8 @@ "lint:examples": "eslint ." }, "dependencies": { - "@justeattakeaway/pie-button": "0.47.8", - "@justeattakeaway/pie-cookie-banner": "0.21.0", "@justeattakeaway/pie-css": "0.12.1", + "@justeattakeaway/pie-webc": "0.5.13", "@lit/react": "1.0.2", "next": "10.2.3", "next-transpile-modules": "4.1.0", diff --git a/apps/examples/wc-next13/.eslintrc.cjs b/apps/examples/wc-next13/.eslintrc.cjs new file mode 100644 index 0000000000..3e212e1d43 --- /dev/null +++ b/apps/examples/wc-next13/.eslintrc.cjs @@ -0,0 +1,21 @@ +module.exports = { + root: true, + env: { browser: true, es2020: true }, + extends: [ + 'eslint:recommended', + 'plugin:react/recommended', + 'plugin:react/jsx-runtime', + 'plugin:react-hooks/recommended', + ], + ignorePatterns: ['dist', '.eslintrc.cjs'], + parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, + settings: { react: { version: '18.2' } }, + plugins: ['react-refresh'], + rules: { + 'react/jsx-no-target-blank': 'off', + 'react-refresh/only-export-components': [ + 'warn', + { allowConstantExport: true }, + ], + }, +} diff --git a/apps/examples/wc-next13/.gitignore b/apps/examples/wc-next13/.gitignore index f287176c62..a547bf36d8 100644 --- a/apps/examples/wc-next13/.gitignore +++ b/apps/examples/wc-next13/.gitignore @@ -1,43 +1,24 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -.yarn/* -!.yarn/patches -!.yarn/plugins -!.yarn/releases -!.yarn/sdks -!.yarn/versions - -# testing -/coverage - -# next.js -/.next/ -/out/ - -# production -/build - -# misc -.DS_Store -*.pem - -# debug +# Logs +logs +*.log npm-debug.log* yarn-debug.log* yarn-error.log* -.pnpm-debug.log* - -# local env files -.env*.local - -# vercel -.vercel - -# typescript -*.tsbuildinfo -next-env.d.ts +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-next13/README.md b/apps/examples/wc-next13/README.md index 85d02da2f3..5ea919416d 100644 --- a/apps/examples/wc-next13/README.md +++ b/apps/examples/wc-next13/README.md @@ -1,4 +1,11 @@ -## How to use Next.js App +# React + Vite + +This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. + +Currently, two official plugins are available: + +- [@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 dev` @@ -39,4 +46,4 @@ React 18 and previous versions don't handle web components and custom elements o Therefore, in order to import the web component into your React application, please use: -import { PieButton } from '@justeattakeaway/pie-button/dist/react'; +import { PieButton } from '@justeattakeaway/pie-webc/react/button.js'; diff --git a/apps/examples/wc-next13/index.html b/apps/examples/wc-next13/index.html new file mode 100644 index 0000000000..0c589eccd4 --- /dev/null +++ b/apps/examples/wc-next13/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + React + + +
+ + + diff --git a/apps/examples/wc-next13/package.json b/apps/examples/wc-next13/package.json index 601bc5c1f9..88534a1a4f 100644 --- a/apps/examples/wc-next13/package.json +++ b/apps/examples/wc-next13/package.json @@ -1,17 +1,17 @@ { "name": "wc-next13", - "version": "0.3.43", "private": true, + "version": "0.3.43", + "type": "module", "scripts": { - "dev": "NODE_OPTIONS=--conditions=development next dev", - "build:examples": "yarn build-static", - "build-static": "next build && next export -o build", - "start": "next start", - "lint:examples": "next lint" + "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", + "@justeattakeaway/pie-webc": "0.5.13", "@lit-labs/nextjs": "0.2.0", "@lit/react": "1.0.5", "next": "13.5.5", @@ -19,11 +19,14 @@ "react-dom": "18.3.1" }, "devDependencies": { - "@types/node": "20.9.3", + "@types/react": "18.3.3", "@types/react-dom": "18.3.0", - "eslint": "8.37.0", - "eslint-config-next": "13.5.5", - "typescript": "5.4.5" + "@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" }, "volta": { "extends": "../../../package.json" diff --git a/apps/examples/wc-next13/pages/_app.tsx b/apps/examples/wc-next13/pages/_app.tsx deleted file mode 100644 index 50e5a5bc24..0000000000 --- a/apps/examples/wc-next13/pages/_app.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import type { AppProps } from 'next/app'; -import '../styles/styles.css'; - -export default function App ({ Component, pageProps }: AppProps) { - return ; -} diff --git a/apps/examples/wc-next13/pages/_document.tsx b/apps/examples/wc-next13/pages/_document.tsx deleted file mode 100644 index cadc422646..0000000000 --- a/apps/examples/wc-next13/pages/_document.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { - Html, Head, Main, NextScript, -} from 'next/document'; - -export default function Document () { - return ( - - - -
- - - - ); -} diff --git a/apps/examples/wc-next13/pages/index.tsx b/apps/examples/wc-next13/pages/index.tsx deleted file mode 100644 index e597b7b5bb..0000000000 --- a/apps/examples/wc-next13/pages/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useState, useRef } from 'react'; -import Head from 'next/head'; -import { - PieButton, ButtonProps, sizes, variants, -} from '@justeattakeaway/pie-button/dist/react'; -import '@justeattakeaway/pie-css'; - -export default function Home () { - const variantIndex = useRef(0); - const [count, setCount] = useState(0); - const [variantName, setVariantName] = useState('primary'); - - const increment = () => setCount(count + 1); - const decrement = () => setCount(count - 1); - const switchVariant = () => { - variantIndex.current += 1; - const variant: ButtonProps['variant'] = variants[variantIndex.current % variants.length]; - - setVariantName(variant); - }; - - return ( - <> - - Create Next App - - - -
-

Test click event

-
-

Counter

-
- decrement -
- Counter: { count } -
- increment -
-
-

Test props

-
-

Click the button to switch the variant

-
- - Switch variant - -
Variant: {variantName}
-
-
-
-

Button sizes

-
- { - sizes - .map((key, index) => { - const size: ButtonProps['size'] = sizes[index]; - - return ( - {key.toLowerCase()} - ); - }) - } -
-
-
- - ); -} diff --git a/apps/examples/wc-next13/public/favicon.ico b/apps/examples/wc-next13/public/favicon.ico deleted file mode 100644 index 718d6fea48..0000000000 Binary files a/apps/examples/wc-next13/public/favicon.ico and /dev/null differ diff --git a/apps/examples/wc-next13/styles/styles.css b/apps/examples/wc-next13/src/App.css similarity index 88% rename from apps/examples/wc-next13/styles/styles.css rename to apps/examples/wc-next13/src/App.css index 1c051c681e..f685d4172a 100644 --- a/apps/examples/wc-next13/styles/styles.css +++ b/apps/examples/wc-next13/src/App.css @@ -25,13 +25,3 @@ * { font-family: JETSansDigital, Arial, sans-serif; } - -.flex-wrapper { - display: flex; - justify-content: flex-start; - align-items: center; -} - -.padding { - padding: 1rem; -} diff --git a/apps/examples/wc-next13/src/App.jsx b/apps/examples/wc-next13/src/App.jsx new file mode 100644 index 0000000000..914abe6a12 --- /dev/null +++ b/apps/examples/wc-next13/src/App.jsx @@ -0,0 +1,17 @@ +import './App.css' +import { PieButton } from "@justeattakeaway/pie-webc/react/button.js"; +import '@justeattakeaway/pie-css'; + +function App() { + return ( + <> +
+ WC Button in NextJS! + WC Button in NextJS! + WC Button in NextJS! +
+ + ) +} + +export default App diff --git a/apps/examples/wc-next13/src/main.jsx b/apps/examples/wc-next13/src/main.jsx new file mode 100644 index 0000000000..51a8c58255 --- /dev/null +++ b/apps/examples/wc-next13/src/main.jsx @@ -0,0 +1,9 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App.jsx' + +ReactDOM.createRoot(document.getElementById('root')).render( + + + , +) diff --git a/apps/examples/wc-next13/tsconfig.json b/apps/examples/wc-next13/tsconfig.json deleted file mode 100644 index 8b8e58111e..0000000000 --- a/apps/examples/wc-next13/tsconfig.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "compilerOptions": { - "target": "es5", - "lib": ["dom", "dom.iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noEmit": true, - "esModuleInterop": true, - "module": "esnext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "preserve", - "incremental": true, - "paths": { - "@/*": ["./*"] - } - }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], - "exclude": ["node_modules"] -} diff --git a/apps/examples/wc-next13/vite.config.js b/apps/examples/wc-next13/vite.config.js new file mode 100644 index 0000000000..c15334f815 --- /dev/null +++ b/apps/examples/wc-next13/vite.config.js @@ -0,0 +1,9 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig({ + plugins: [react()], + resolve: { + alias: {}, + }, +}); diff --git a/apps/pie-docs/README.md b/apps/pie-docs/README.md index 334b5402ec..cf947baac4 100644 --- a/apps/pie-docs/README.md +++ b/apps/pie-docs/README.md @@ -59,16 +59,23 @@ Our primary concerns are: 4. Our shortcodes return the expected HTML ### Page testing + We have route navigation tests that ensure all existing pages can be correctly navigated to. When you add new pages, these tests will fail as there are new unexpected pages (this is by design). -In order to fix the tests, you will need to register the routes to your newly added pages by running from the root of the monorepo: `yarn test:generate-routes`. This will update the JSON file named `expected-routes.snapshot.json` with the URLs to your new page. +Route tests need a production build so that they do not fail with `draft` page routes. For this, we recommend to: +1. Stop any local instance of the doc site +2. Delete your `dist` folder +3. Create a production build with `yarn build --filter=pie-docs` +Once this is done, you can run the route tests with `yarn test --filter=pie-docs`. From here, we run navigation, accessibility and visual tests against each route. -#### Running the route tests -Route tests are ran as part of `yarn test`. +#### Adding new routes + +In order to fix the tests, you will need to register the routes to your newly added pages by running the following command from the root of the monorepo: `yarn test:generate-routes`. This will update the JSON file named `expected-routes.snapshot.json` with the paths to your new pages. + +### Testing navigation responses -#### Testing navigation responses Running `yarn test:browsers` will ensure that navigating to the routes stored in `expected-routes.snapshot.json` result in Status Code `200` responses. In order to run this command you will need the site to be served to localhost by running `yarn dev --filter=pie-docs` in another terminal. diff --git a/apps/pie-docs/src/_11ty/shortcodes/index.js b/apps/pie-docs/src/_11ty/shortcodes/index.js index 5f68ddbfbd..63f19b8a47 100644 --- a/apps/pie-docs/src/_11ty/shortcodes/index.js +++ b/apps/pie-docs/src/_11ty/shortcodes/index.js @@ -11,6 +11,7 @@ const mediaElement = require('./mediaElementList'); const notification = require('./notification'); const resourceTable = require('./resourceTable'); const simpleTable = require('./simpleTable'); +const tag = require('./tag'); const termsAndDescriptions = require('./termsAndDescriptions'); const tokensTable = require('./tokensTable'); const usage = require('./usage'); @@ -36,8 +37,9 @@ const addAllShortCodes = (eleventyConfig) => { eleventyConfig.addShortcode('notification', (shortcodeArgs) => deindentHTML(notification(shortcodeArgs))); eleventyConfig.addShortcode('resourceTable', (shortcodeArgs) => deindentHTML(resourceTable(shortcodeArgs))); eleventyConfig.addShortcode('simpleTable', (shortcodeArgs) => deindentHTML(simpleTable(shortcodeArgs))); - eleventyConfig.addShortcode('tokensTable', (shortcodeArgs) => deindentHTML(tokensTable(shortcodeArgs))); + eleventyConfig.addShortcode('tag', (shortcodeArgs) => deindentHTML(tag(shortcodeArgs))); eleventyConfig.addShortcode('termsAndDescriptions', (shortcodeArgs) => deindentHTML(termsAndDescriptions(shortcodeArgs))); + eleventyConfig.addShortcode('tokensTable', (shortcodeArgs) => deindentHTML(tokensTable(shortcodeArgs))); eleventyConfig.addShortcode('usage', (shortcodeArgs) => deindentHTML(usage(shortcodeArgs))); }; diff --git a/apps/pie-docs/src/_11ty/shortcodes/tag.js b/apps/pie-docs/src/_11ty/shortcodes/tag.js new file mode 100644 index 0000000000..52f11c96a0 --- /dev/null +++ b/apps/pie-docs/src/_11ty/shortcodes/tag.js @@ -0,0 +1,13 @@ +// @TODO DSW-2258: be replaced once web components are integrated +/** + * Generate an HTML tag component. It duplicates pie tag variants. + * Can be replaced by pie tag when we include pie web components + * @param {string} label - string that renders within the tag + * @param {string} variant - variant name: neutral, blue, green, + * yellow, red, brand, neutral-alternative, outline, ghost + * @returns {string} + */ +module.exports = ({ + label, + variant, +}) => `${label}`; diff --git a/apps/pie-docs/src/assets/img/components/checkbox/anatomy.svg b/apps/pie-docs/src/assets/img/components/checkbox/anatomy.svg new file mode 100644 index 0000000000..a7e8465811 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/anatomy.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-LTR-agreement.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-LTR-agreement.svg new file mode 100644 index 0000000000..3029d273c7 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-LTR-agreement.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-RTL-agreement.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-RTL-agreement.svg new file mode 100644 index 0000000000..0b63ca1d33 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-RTL-agreement.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-active.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-active.svg new file mode 100644 index 0000000000..f187a7dc60 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-active.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-checked-LTR.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-checked-LTR.svg new file mode 100644 index 0000000000..86f3a48b25 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-checked-LTR.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-checked-RTL.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-checked-RTL.svg new file mode 100644 index 0000000000..46afa2f22f --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-checked-RTL.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-default.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-default.svg new file mode 100644 index 0000000000..0f73c70a9a --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-default.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-disabled.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-disabled.svg new file mode 100644 index 0000000000..d2affe85cb --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-disabled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-error.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-error.svg new file mode 100644 index 0000000000..6577115950 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-error.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-focused.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-focused.svg new file mode 100644 index 0000000000..3626196af6 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-focused.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-hovered.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-hovered.svg new file mode 100644 index 0000000000..36a6cc8fe2 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-hovered.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-interaction.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-interaction.svg new file mode 100644 index 0000000000..81b5d42d5f --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-interaction.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-label-interaction.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-label-interaction.svg new file mode 100644 index 0000000000..b75e9520f4 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-label-interaction.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-partially-selected.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-partially-selected.svg new file mode 100644 index 0000000000..5a474b04c4 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-partially-selected.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-selected.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-selected.svg new file mode 100644 index 0000000000..8911df9e23 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-selected.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-unselected.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-unselected.svg new file mode 100644 index 0000000000..1ea0d12a3d --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-unselected.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox-with-assistive-text.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-with-assistive-text.svg new file mode 100644 index 0000000000..739dfc33b5 --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox-with-assistive-text.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/checkbox.svg b/apps/pie-docs/src/assets/img/components/checkbox/checkbox.svg new file mode 100644 index 0000000000..c1edbb0bbf --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/checkbox.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/overflow.svg b/apps/pie-docs/src/assets/img/components/checkbox/overflow.svg new file mode 100644 index 0000000000..e5427eb3be --- /dev/null +++ b/apps/pie-docs/src/assets/img/components/checkbox/overflow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/pie-docs/src/assets/img/components/checkbox/overview.svg b/apps/pie-docs/src/assets/img/components/checkbox/overview.svg index aba2738d27..436c93fe7d 100644 --- a/apps/pie-docs/src/assets/img/components/checkbox/overview.svg +++ b/apps/pie-docs/src/assets/img/components/checkbox/overview.svg @@ -1,32 +1,23 @@ - - - + + + - - - + + + - - - - - - - - - - - - - - + + + + + - + - + diff --git a/apps/pie-docs/src/assets/styles/_dependencies.scss b/apps/pie-docs/src/assets/styles/_dependencies.scss index 2552387813..248642e5ad 100644 --- a/apps/pie-docs/src/assets/styles/_dependencies.scss +++ b/apps/pie-docs/src/assets/styles/_dependencies.scss @@ -59,6 +59,7 @@ @use 'components/simpleTable'; @use 'components/table'; @use 'components/tabs'; +@use 'components/tag'; @use 'components/termsAndDescriptions'; @use 'components/toggle'; @use 'components/tokensTable'; diff --git a/apps/pie-docs/src/assets/styles/components/_tag.scss b/apps/pie-docs/src/assets/styles/components/_tag.scss new file mode 100644 index 0000000000..2ddebad3a0 --- /dev/null +++ b/apps/pie-docs/src/assets/styles/components/_tag.scss @@ -0,0 +1,85 @@ +@use '@justeattakeaway/pie-css/scss/settings' as *; +@use '@justeattakeaway/pie-css/scss' as p; + +.c-tag { + --tag-bg-color: var(--dt-color-container-strong); + --tag-color: var(--dt-color-content-default); + --tag-border-radius: var(--dt-radius-rounded-b); + --tag-padding-block: 2px; + --tag-padding-inline: var(--dt-spacing-b); + --tag-font-family: var(--dt-font-body-s-family); + --tag-font-weight: var(--dt-font-body-s-weight); + --tag-font-size: #{p.font-size(--dt-font-body-s-size)}; + --tag-line-height: #{p.line-height(--dt-font-body-s-line-height)}; + + // transparent to variable to function properly in component tests + --tag-transparent-bg-color: transparent; + + // Pie Webc Icon var that is used to ensure the correctly sized icon passed in a slot + --icon-display-override: block; + --icon-size-override: 16px; + + display: inline-flex; + vertical-align: middle; + align-items: center; + justify-content: center; + gap: var(--dt-spacing-a); + padding: var(--tag-padding-block) var(--tag-padding-inline); + border-radius: var(--tag-border-radius); + background-color: var(--tag-bg-color); + color: var(--tag-color); + font-family: var(--tag-font-family); + font-weight: var(--tag-font-weight); + font-size: var(--tag-font-size); + line-height: var(--tag-line-height); + + + &[variant='neutral'] { + // same as default styles + } + + &[variant='blue'] { + --tag-bg-color: var(--dt-color-support-info-02); + --tag-color: var(--dt-color-content-default); + } + + &[variant='green'] { + --tag-bg-color: var(--dt-color-support-positive-02); + --tag-color: var(--dt-color-content-default); + } + + &[variant='yellow'] { + --tag-bg-color: var(--dt-color-support-warning-02); + --tag-color: var(--dt-color-content-default); + } + + &[variant='red'] { + --tag-bg-color: var(--dt-color-support-error-02); + --tag-color: var(--dt-color-content-default); + } + + &[variant='brand'] { + --tag-bg-color: var(--dt-color-support-brand-02); + --tag-color: var(--dt-color-content-default); + } + + &[variant='neutral-alternative'] { + --tag-bg-color: var(--dt-color-container-default); + --tag-color: var(--dt-color-content-default); + } + + &[variant='outline'] { + --tag-bg-color: var(--tag-transparent-bg-color); + --tag-color: var(--dt-color-content-default); + + // the outline in design specs is part of the total component + // height calculation, thus, we use box-shadow to mimic borders + // and avoid the extra 2px from "border: 1px solid" as shadows are applied "internally" + box-shadow: 0 0 0 1px var(--dt-color-border-strong); + } + + &[variant='ghost'] { + --tag-bg-color: var(--tag-transparent-bg-color); + --tag-color: var(--dt-color-content-default); + } +} diff --git a/apps/pie-docs/src/components/checkbox/checkbox.json b/apps/pie-docs/src/components/checkbox/checkbox.json index 056307cab4..b93d371021 100644 --- a/apps/pie-docs/src/components/checkbox/checkbox.json +++ b/apps/pie-docs/src/components/checkbox/checkbox.json @@ -1,5 +1,5 @@ { "title": "Checkbox", "navKey": "Checkbox", - "description": "A checkbox is an interactive element that allows users to select or deselect options from a list of choices." + "description": "A checkbox is an interactive element that allows users to select or deselect an option." } diff --git a/apps/pie-docs/src/components/checkbox/checkbox.md b/apps/pie-docs/src/components/checkbox/checkbox.md index a838e9f41b..88fea999f6 100644 --- a/apps/pie-docs/src/components/checkbox/checkbox.md +++ b/apps/pie-docs/src/components/checkbox/checkbox.md @@ -2,30 +2,8 @@ eleventyNavigation: key: 'Checkbox' parent: Components + url: /components/checkbox/ order: 12 +permalink: false --- -## Overview - -Checkboxes provide a binary selection mechanism where users can either check the box to indicate they want a particular option or leave it unchecked to indicate they do not want that option. - -They are commonly used in forms, settings panels, and various other interfaces where users need to make multiple selections or provide input from a predefined set of options. - - -{% contentPageImage { - src:"../../assets/img/components/checkbox/overview.svg", - alt: "A group of checkboxes vertically stacked together." -} %} - ---- - -## Resources - -{% notification { - type: "warning", - message: "We’re currently working on updating our Checkbox documentation, please see the resources below." -} %} - -{% resourceTable { - componentName: 'Checkbox' -} %} diff --git a/apps/pie-docs/src/components/checkbox/overview/overview.md b/apps/pie-docs/src/components/checkbox/overview/overview.md new file mode 100644 index 0000000000..638152addd --- /dev/null +++ b/apps/pie-docs/src/components/checkbox/overview/overview.md @@ -0,0 +1,297 @@ +--- +eleventyNavigation: + key: Overview + parent: 'Checkbox' + order: 1 +shouldShowContents: true +permalink: components/checkbox/ +--- + +## Overview + +Checkboxes provide a binary selection mechanism where users can either check the box to indicate they want a particular option or leave it unchecked to indicate they do not want that option. + +They are commonly used in forms, settings panels, and various other interfaces where users need to make a single selection. + +{% contentPageImage { + src:"../../../assets/img/components/checkbox/overview.svg", + alt: "Checkbox labeled 'I have read and accepted the terms and conditions' is checked." +} %} + +--- + +## Dos and Don’ts + +{% usage { + do: { + type: usageTypes.text, + items: [ + "Make sure labels are concise and that they clearly describe what checking the box means." + ] + }, + dont: { + type: usageTypes.text, + items: [ + "If multiple checkboxes are needed, use a checkbox group." + ] + } +} %} + +--- + +## Anatomy + +{% contentPageImage { + src:"../../../assets/img/components/checkbox/anatomy.svg", + alt: "Anatomy of a checkbox component.", + width: "84px" +} %} + +{% list { + type: listTypes.ordered, + items: [ + "**Checkbox input:** A checkbox input indicates the appropriate state. By default it is unselected.", + "**Label (Optional):** Describes the information you want to select or unselect.", + "**Assistive text (Optional):** The [assistive text](/components/assistive-text/) provides additional instructional information / error / success messaging." + ] +} %} + +--- + +## Variations + +### Default + +{% contentPageImage { + src:"../../../assets/img/components/checkbox/checkbox-default.svg", + alt: "Checkbox component in a default state.", + width: "70px" +} %} + +--- + +## Modifiers + +### Label + +A label should always be present unless being utilised as a nested component and an alternative label is present. + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-default.svg", + width: "70px", + alt: "A blank checkbox followed by the label text." + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox.svg", + width: "24px", + alt: "A blank checkbox component." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +### Assistive text + +Assistive text is used where needed to provide additional information or error / success messaging. The assistive text is always used for an error state to provide the user with the information required to complete the form element. + +{% contentPageImage { + src:"../../../assets/img/components/checkbox/checkbox-with-assistive-text.svg", + alt: "A blank checkbox followed by assistive text in red below it.", + width: "112px" +} %} + +--- + +## Content + +All content should use sentence case. + +### Label + +- Always use clear and concise labels for checkboxes. +- Labels appear to the right of checkbox input (when the text direction is left-to-right). + +--- + +## Overflow + +### Multiple words overflow + +When the label exceeds the available width, the label will wrap onto a new line. + +{% contentPageImage { + src:"../../../assets/img/components/checkbox/overflow.svg", + alt: "A blank checkbox followed by the label that exceeds the available width and wraps onto a new line.", + width: "281px" +} %} + +--- + +## Behaviours + +### States + +The checkbox input allows for a series of three states: unselected, selected, and partially selected. The default state for a checkbox is unselected. + +Use the partially selected state when the checkbox contains a sublist of selections, some of which are selected, and some unselected. + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-unselected.svg", + width: "112px", + alt: "Checkbox component in a selected state." + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-selected.svg", + width: "94px", + alt: "Checkbox component in an unselected state." + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-partially-selected.svg", + width: "154px", + alt: "Checkbox component in a partially selected state." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- + +## Interactions + +Users can trigger the checkbox directly or by clicking the checkbox label. Having all regions interactive creates a more accessible click target. + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-interaction.svg", + width: "70px", + alt: "An illustration represents that users can trigger the checkbox directly." + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-label-interaction.svg", + width: "70px", + alt: "An illustration represents that users can trigger the checkbox by clicking the checkbox label. " + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- + +## Interactive states + +Outlines the atomic level interactive elements for the component. + +{% contentLayout %} + {% contentItem %} +

Default

+ {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-default.svg", + width: "70px", + alt: "Checkbox component in a default state." + } %} + {% endcontentItem %} + {% contentItem %} +

Hover

+ {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-hovered.svg", + width: "70px", + alt: "Checkbox component when hovered over." + } %} + {% endcontentItem %} + {% contentItem %} +

Active

+ {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-active.svg", + width: "70px", + alt: "Checkbox component in an active state." + } %} + {% endcontentItem %} + {% contentItem %} +

Focus

+ {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-focused.svg", + width: "70px", + alt: "Checkbox component when it has focus." + } %} + {% endcontentItem %} + {% contentItem %} +

Disabled

+ {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-disabled.svg", + width: "70px", + alt: "Checkbox component in a disabled state." + } %} + {% endcontentItem %} + {% contentItem %} +

Error

+ {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-error.svg", + width: "112px", + alt: "Checkbox state example showing an error." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- + +## Examples + +### LTR examples + +Here are some examples of the component in a left-to-right context: + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-LTR-agreement.svg", + width: "375px", + alt: "Checkbox labeled 'I have read and accepted the terms and conditions' in a left-to-right context." + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-checked-LTR.svg", + width: "360px", + alt: "Selected checkbox followed by the label text in a left-to-right context." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +### RTL examples + +Here are some examples of the component in a right-to-left context: + +{% contentLayout %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-RTL-agreement.svg", + width: "271px", + alt: "Checkbox labeled 'I have read and accepted the terms and conditions' in a right-to-left context." + } %} + {% endcontentItem %} + {% contentItem %} + {% contentPageImage { + src: "../../../assets/img/components/checkbox/checkbox-checked-RTL.svg", + width: "360px", + alt: "Selected checkbox followed by the label text in a right-to-left context." + } %} + {% endcontentItem %} +{% endcontentLayout %} + +--- + +## Resources + +{% resourceTable { + componentName: 'Checkbox' +} %} diff --git a/apps/pie-docs/src/engineers/getting-started/overview.md b/apps/pie-docs/src/engineers/getting-started/overview.md index bfa0e88664..77c18c007f 100644 --- a/apps/pie-docs/src/engineers/getting-started/overview.md +++ b/apps/pie-docs/src/engineers/getting-started/overview.md @@ -10,17 +10,11 @@ permalink: engineers/getting-started/ One of the core aims of the **PIE Design System** is to provide engineers with a consistent set of components and best practices for creating and maintaining UIs across JET. -If you're just starting out with PIE, here's a list of recommended resources to get you started. - ---- - -## Code and Project Structure - -All of our PIE components, tools and documentation (including this site) are maintained on the open-source [PIE Monorepo on Github](https://github.com/justeattakeaway/pie). +We develop and maintain several component libraries that implement the PIE design language. Please follow [this guide](/engineers/getting-started/structure/#which-library-should-i-use) to find out which library to use based on your tech stack. For a more detailed look at the **component systems** the PIE team maintain, the PIE monorepo and how it’s structured, see the [structure section of our engineering docs](/engineers/getting-started/structure). -We also help to maintain a number of other projects that incorporate the PIE Design Language (such as [Fozzie](https://github.com/justeattakeaway/fozzie-components) for **VueJS components**, or [Snacks](https://snacks.takeaway.com/) and [Skip PIE](https://github.com/justeat/pie-project) for **React components**). +For a list of which components are supported in each of our libraries, please refer to the [Component Status page](/components/component-status/). --- @@ -30,6 +24,11 @@ If you'd like to contribute to PIE, check out our [contributing guide](/engineer We also maintain **guides** for global front-end best practices across JET. These can be found in the [engineering guidelines section of our docs](/engineers/guidelines/). +### Code and Project Structure + +PIE Web Components, tools and documentation (including this site) are maintained on the open-source [PIE Monorepo on Github](https://github.com/justeattakeaway/pie). + +We support and maintain a number of other projects that incorporate the PIE Design Language (such as [Fozzie](https://github.com/justeattakeaway/fozzie-components) for **VueJS components**, or [Snacks](https://snacks.takeaway.com/) and [Skip PIE](https://github.com/justeat/pie-project) for **React components**).