diff --git a/.prettierrc b/.prettierrc index b82d3df5a..c40391d71 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { "singleQuote": false, - "endOfLine": "lf" + "endOfLine": "lf", + "plugins": ["prettier-plugin-svelte"] } diff --git a/apps/react-demo/src/app/app.tsx b/apps/react-demo/src/app/app.tsx index 56689fda3..7c916fe49 100644 --- a/apps/react-demo/src/app/app.tsx +++ b/apps/react-demo/src/app/app.tsx @@ -1,6 +1,7 @@ import { GoAAppFooter, GoAAppHeader, + GoAAppHeaderMenu, GoAMicrositeHeader, GoASideMenu, GoASideMenuGroup, @@ -14,7 +15,15 @@ export default function App() { header={ <> - + + Support + + Cases + Payments + Outstanding + + Sign in + } footer={} diff --git a/apps/react-demo/src/routes/appHeader.tsx b/apps/react-demo/src/routes/appHeader.tsx index 26eac2e37..cfe6a97f8 100644 --- a/apps/react-demo/src/routes/appHeader.tsx +++ b/apps/react-demo/src/routes/appHeader.tsx @@ -21,17 +21,6 @@ export default function AppHeader() { heading="Ticket and Fine Payments" > About Us - - Seniors - Family - - Children with a really realllllllllllllllllly long text - - - - Settings - Preferences - Login diff --git a/libs/web-components/package-lock.json b/libs/web-components/package-lock.json index 9f164ab57..9f9190020 100644 --- a/libs/web-components/package-lock.json +++ b/libs/web-components/package-lock.json @@ -91,6 +91,12 @@ "regenerator-runtime": "^0.13.4" } }, + "@csstools/postcss-global-data": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@csstools/postcss-global-data/-/postcss-global-data-2.1.0.tgz", + "integrity": "sha512-n8SoAaapXATQ/fI8c0GVM+VNfvpNo6fN/79GGTjqatEG8bZNh72b2r+KKLVMcQHvRKjDlXxzurxnf6L5nsxDGA==", + "dev": true + }, "@gar/promisify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz", diff --git a/libs/web-components/package.json b/libs/web-components/package.json index 2b01d98d0..9aecbefdb 100644 --- a/libs/web-components/package.json +++ b/libs/web-components/package.json @@ -29,6 +29,7 @@ "directory": "libs/web-components" }, "devDependencies": { + "@csstools/postcss-global-data": "^2.1.0", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-typescript": "^8.0.0", diff --git a/libs/web-components/playground/public/index.html b/libs/web-components/playground/public/index.html index 85d5f8710..903f8eda2 100644 --- a/libs/web-components/playground/public/index.html +++ b/libs/web-components/playground/public/index.html @@ -1,22 +1,25 @@ - + + + + - - - + DIO Components - DIO Components + + - - + + - - + + - - - - - - - \ No newline at end of file + + diff --git a/libs/web-components/playground/src/pg-app-header.svelte b/libs/web-components/playground/src/pg-app-header.svelte index 2b74b1975..5cd7c7a6e 100644 --- a/libs/web-components/playground/src/pg-app-header.svelte +++ b/libs/web-components/playground/src/pg-app-header.svelte @@ -1,5 +1,6 @@ + Learn more About Us diff --git a/libs/web-components/playground/src/pg-dropdown.svelte b/libs/web-components/playground/src/pg-dropdown.svelte index 44bff06fc..5f3438802 100644 --- a/libs/web-components/playground/src/pg-dropdown.svelte +++ b/libs/web-components/playground/src/pg-dropdown.svelte @@ -42,10 +42,6 @@ -
- -
- diff --git a/libs/web-components/playground/src/pg-form-stepper.svelte b/libs/web-components/playground/src/pg-form-stepper.svelte index c923b9547..5c0eb9068 100644 --- a/libs/web-components/playground/src/pg-form-stepper.svelte +++ b/libs/web-components/playground/src/pg-form-stepper.svelte @@ -24,14 +24,12 @@
-
- + -
@@ -57,14 +55,4 @@ overflow-x: auto; padding: 1rem; } - - .scroll .inner { - width: 1600px; - } - - @media (max-width: 640px) { - .scroll .inner { - width: unset; - } - } \ No newline at end of file diff --git a/libs/web-components/playground/src/pg-modal.svelte b/libs/web-components/playground/src/pg-modal.svelte index 587384d04..f5776fd41 100644 --- a/libs/web-components/playground/src/pg-modal.svelte +++ b/libs/web-components/playground/src/pg-modal.svelte @@ -1,29 +1,57 @@ - - open = false}> - {}} value={value} disabled={false}> - - - - - - - - - - - - + (open = false)}> + {}} {value} disabled={false}> + + + + + + + + + + + + - + + +
This is a card
+ + diff --git a/libs/web-components/rollup.config.js b/libs/web-components/rollup.config.js index 82381ae4e..13f7ad11e 100644 --- a/libs/web-components/rollup.config.js +++ b/libs/web-components/rollup.config.js @@ -5,8 +5,11 @@ import summary from "rollup-plugin-summary"; import preprocess from "svelte-preprocess"; import commonjs from "@rollup/plugin-commonjs"; import typescript from "@rollup/plugin-typescript"; -import css from 'rollup-plugin-css-only'; -import {replaceCodePlugin} from 'vite-plugin-replace'; +import css from "rollup-plugin-css-only"; +import { replaceCodePlugin } from "vite-plugin-replace"; +import postcssGlobalData from "@csstools/postcss-global-data"; +import autoprefixer from "autoprefixer"; +import postcssCustomMedia from "postcss-custom-media"; export default { input: "src/index.ts", @@ -20,28 +23,39 @@ export default { svelte({ include: /\.svelte$/, exclude: /^(\.test)\.svelte$/, - preprocess: preprocess({ sourceMap: true }), + preprocess: preprocess({ + sourceMap: true, + postcss: { + plugins: [ + postcssGlobalData({ + files: ["./src/assets/css/breakpoints.css"], + }), + autoprefixer(), + postcssCustomMedia(), + ], + }, + }), settings: { - 'svelte3/compiler-options': { + "svelte3/compiler-options": { generate: false, - customElement: true + customElement: true, }, }, compilerOptions: { customElement: true, }, }), - css({output: 'index.css' }), + css({ output: "index.css" }), resolve(), - // terser(), + terser(), summary(), replaceCodePlugin({ replacements: [ - { - from: /:global\(([\[\]\(\)\-\.\:\*\w]+)\)/g, - to: "$1", - } - ] + { + from: /:global\(([\[\]\(\)\-\.\:\*\w]+)\)/g, + to: "$1", + }, + ], }), ], watch: { diff --git a/libs/web-components/rollup.playground.config.js b/libs/web-components/rollup.playground.config.js index da63fe723..34cb29bfc 100644 --- a/libs/web-components/rollup.playground.config.js +++ b/libs/web-components/rollup.playground.config.js @@ -5,6 +5,9 @@ import livereload from "rollup-plugin-livereload"; import css from "rollup-plugin-css-only"; import preprocess from "svelte-preprocess"; import typescript from "@rollup/plugin-typescript"; +import postcssGlobalData from "@csstools/postcss-global-data"; +import autoprefixer from "autoprefixer"; +import postcssCustomMedia from "postcss-custom-media"; function serve() { let server; @@ -16,10 +19,14 @@ function serve() { return { writeBundle() { if (server) return; - server = require("child_process").spawn("npm", ["run", "start", "--", "--dev"], { - stdio: ["ignore", "inherit", "inherit"], - shell: true, - }); + server = require("child_process").spawn( + "npm", + ["run", "start", "--", "--dev"], + { + stdio: ["ignore", "inherit", "inherit"], + shell: true, + }, + ); process.on("SIGTERM", toExit); process.on("exit", toExit); @@ -37,11 +44,22 @@ export default { }, plugins: [ commonjs(), - typescript({ sourceMap: true}), + typescript({ sourceMap: true }), svelte({ include: /\.svelte$/, exclude: /(App)\.svelte/, - preprocess: preprocess({ sourceMap: true }), + preprocess: preprocess({ + sourceMap: true, + postcss: { + plugins: [ + postcssGlobalData({ + files: ["./src/assets/css/breakpoints.css"], + }), + autoprefixer(), + postcssCustomMedia(), + ], + }, + }), compilerOptions: { dev: true, customElement: true, @@ -62,7 +80,7 @@ export default { // https://github.com/rollup/plugins/tree/master/packages/commonjs resolve({ browser: true, - dedupe: ["svelte"], + // dedupe: ["svelte"], }), serve(), @@ -72,4 +90,3 @@ export default { clearScreen: false, }, }; - diff --git a/libs/web-components/src/assets/css/breakpoints.css b/libs/web-components/src/assets/css/breakpoints.css new file mode 100644 index 000000000..1fb851f33 --- /dev/null +++ b/libs/web-components/src/assets/css/breakpoints.css @@ -0,0 +1,3 @@ +@custom-media --mobile screen and (max-width: 623px); +@custom-media --tablet screen and (min-width: 624px) and (max-width: 1023px); +@custom-media --desktop screen and (min-width: 1024px); diff --git a/libs/web-components/src/common/breakpoints.ts b/libs/web-components/src/common/breakpoints.ts new file mode 100644 index 000000000..2babcb708 --- /dev/null +++ b/libs/web-components/src/common/breakpoints.ts @@ -0,0 +1,2 @@ +export const MOBILE_BP = 624; +export const TABLET_BP = 1024; diff --git a/libs/web-components/src/common/styling.ts b/libs/web-components/src/common/styling.ts index 30ad52f0b..f4ee82da0 100644 --- a/libs/web-components/src/common/styling.ts +++ b/libs/web-components/src/common/styling.ts @@ -1,6 +1,25 @@ -export type Spacing = - "none" | "3xs" | "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl" | - "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"; +export type Spacing = + | "none" + | "3xs" + | "2xs" + | "xs" + | "s" + | "m" + | "l" + | "xl" + | "2xl" + | "3xl" + | "4xl" + | "0" + | "1" + | "2" + | "3" + | "4" + | "5" + | "6" + | "7" + | "8" + | "9"; const conversions = { "0": "none", @@ -14,14 +33,14 @@ const conversions = { "8": "2xl", "9": "3xl", "10": "4xl", -} +}; /** * Allow for 0-10 values to be used along side the existing Spacing values */ function convertSpacing(size: Spacing): Spacing { if (!Number.isInteger(+size)) { - return size + return size; } return conversions[size] || ""; } @@ -38,7 +57,12 @@ function convertSpacing(size: Spacing): Spacing { * // add the following style attribute to the root element * style={calculateMargin(mt, mr, mb, ml)} */ -export function calculateMargin(mt: Spacing, mr: Spacing, mb: Spacing, ml: Spacing) { +export function calculateMargin( + mt: Spacing, + mr: Spacing, + mb: Spacing, + ml: Spacing, +) { mt = convertSpacing(mt); mb = convertSpacing(mb); ml = convertSpacing(ml); @@ -65,9 +89,17 @@ export function calculateMargin(mt: Spacing, mr: Spacing, mb: Spacing, ml: Spaci * , media?: string) { +export function injectCss( + el: HTMLElement, + rootSelector: string, + css: Record, + media?: string, +) { + if (!el) return; const style = document.createElement("style"); - const _css = Object.entries(css).map(entry => `${entry[0]}: ${entry[1]};`).join(" "); + const _css = Object.entries(css) + .map((entry) => `${entry[0]}: ${entry[1]};`) + .join(" "); if (media) { style.innerHTML = `@media (${media}) { ${rootSelector} {${_css}} }`; } else { diff --git a/libs/web-components/src/components/accordion/Accordion.svelte b/libs/web-components/src/components/accordion/Accordion.svelte index 33f360c88..a2d1a6df9 100644 --- a/libs/web-components/src/components/accordion/Accordion.svelte +++ b/libs/web-components/src/components/accordion/Accordion.svelte @@ -209,7 +209,7 @@ } - @media (max-width: 640px) { + @media (--mobile) { summary { align-items: flex-start; } diff --git a/libs/web-components/src/components/app-header-menu/AppHeaderMenu.svelte b/libs/web-components/src/components/app-header-menu/AppHeaderMenu.svelte index 9cff903cf..fbbec2544 100644 --- a/libs/web-components/src/components/app-header-menu/AppHeaderMenu.svelte +++ b/libs/web-components/src/components/app-header-menu/AppHeaderMenu.svelte @@ -5,6 +5,7 @@ import { onMount, tick } from "svelte"; import { validateRequired } from "../../common/utils"; import type { GoAIconType } from "../icon/Icon.svelte"; + import { TABLET_BP } from "../../common/breakpoints"; // Required export let heading: string; @@ -28,7 +29,7 @@ let _open = false; // Reactive - $: _desktop = _innerWidth >= 960; + $: _desktop = _innerWidth >= TABLET_BP; // call the method when window changes to desktop size $: _desktop && bindToPopoverCloseEvent() @@ -207,11 +208,7 @@ color: var(--goa-color-interactive-default); } - /* ============= */ - /* Mobile/Tablet */ - /* ============= */ - - @media (max-width: 959px) { + @media not (--desktop) { button { box-shadow: inset 0 1px 0 0 var(--goa-color-greyscale-200); height: 3rem; @@ -228,12 +225,8 @@ flex: 0 0 auto; } } - - /* ============= */ - /* Desktop */ - /* ============= */ - @media (min-width: 960px) { + @media (--desktop) { button[slot=target] { font-weight: var(--goa-font-weight-bold); /* ensures that the button spans 100% of the height of the desktop app header bar */ diff --git a/libs/web-components/src/components/app-header/AppHeader.svelte b/libs/web-components/src/components/app-header/AppHeader.svelte index 4283c18ae..371727c2c 100644 --- a/libs/web-components/src/components/app-header/AppHeader.svelte +++ b/libs/web-components/src/components/app-header/AppHeader.svelte @@ -5,6 +5,7 @@ - - diff --git a/libs/web-components/src/layouts/FullScreenNavbarLayout.svelte b/libs/web-components/src/layouts/FullScreenNavbarLayout.svelte index 83a4ec505..e15c078ae 100644 --- a/libs/web-components/src/layouts/FullScreenNavbarLayout.svelte +++ b/libs/web-components/src/layouts/FullScreenNavbarLayout.svelte @@ -15,7 +15,7 @@ gap: 0 0; } - @media (min-width: 640px) { + @media (--mobile) { .page { grid-template-columns: 300px auto; grid-template-rows: min-content auto min-content; diff --git a/libs/web-components/src/layouts/three-column-layout/ThreeColumnLayout.svelte b/libs/web-components/src/layouts/three-column-layout/ThreeColumnLayout.svelte index 4cccf1c1b..53d184a55 100644 --- a/libs/web-components/src/layouts/three-column-layout/ThreeColumnLayout.svelte +++ b/libs/web-components/src/layouts/three-column-layout/ThreeColumnLayout.svelte @@ -80,7 +80,7 @@ padding: 0.5rem 0; } - @media (min-width: 640px) { + @media not (--mobile) { .page { gap: 2rem; } @@ -108,12 +108,7 @@ } } - - - @media (min-width: 1300px) { - .content { - } - + @media (--desktop) { main { padding-right: 4.5rem; } diff --git a/libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte b/libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte index 28a92653a..37a64e9e3 100644 --- a/libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte +++ b/libs/web-components/src/layouts/two-column-layout/TwoColumnLayout.svelte @@ -1,8 +1,6 @@