From 57526805944d7749036fb88c0ac243cf44c58c1e Mon Sep 17 00:00:00 2001 From: Tong Hau Date: Tue, 17 Dec 2024 00:44:26 +0800 Subject: [PATCH 1/8] chore(file upload): update check icon name --- src/components/FileUpload/sgds-file-upload.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/FileUpload/sgds-file-upload.ts b/src/components/FileUpload/sgds-file-upload.ts index 73fd4ef8..5a928118 100644 --- a/src/components/FileUpload/sgds-file-upload.ts +++ b/src/components/FileUpload/sgds-file-upload.ts @@ -170,7 +170,7 @@ export class SgdsFileUpload extends SgdsFormValidatorMixin(FormControlElement) { } render() { const getCheckedIcon = () => { - return html``; + return html``; }; const listItems = this.selectedFiles.map( From 7b37943b6db2c80e7884339182007a6d9bdf82df Mon Sep 17 00:00:00 2001 From: Tong Hau Date: Tue, 17 Dec 2024 00:45:27 +0800 Subject: [PATCH 2/8] chore(quantity toggle): update icon button usage --- src/components/QuantityToggle/sgds-quantity-toggle.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/QuantityToggle/sgds-quantity-toggle.ts b/src/components/QuantityToggle/sgds-quantity-toggle.ts index 7c673c57..f4a976c9 100644 --- a/src/components/QuantityToggle/sgds-quantity-toggle.ts +++ b/src/components/QuantityToggle/sgds-quantity-toggle.ts @@ -237,8 +237,8 @@ export class SgdsQuantityToggle extends SgdsFormValidatorMixin(FormControlElemen ariaLabel=${`decrease by ${this.step}`} ?disabled=${this.disabled || (this.min !== undefined ? this.value <= this.min : this.value < 1)} @click=${this._onMinus} + name="dash" > - = this.max)} - > + name="plus" + > From 00ff95426ae0d12363a92e6f61559097a1c2040c Mon Sep 17 00:00:00 2001 From: Tong Hau Date: Fri, 20 Dec 2024 09:44:02 +0800 Subject: [PATCH 3/8] chore(*): update index.html --- index.html | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 8653a36b..98f86f78 100644 --- a/index.html +++ b/index.html @@ -145,17 +145,16 @@ - Design System - Home + Home About Info - + - Dropdown + Dropdown Item 1 Item 2 Item 3 @@ -1575,8 +1574,7 @@

Overflow

- - + @@ -1964,7 +1962,7 @@

Name of portal/digital service

// qT.disabled = false; }); enabltT.addEventListener("click", () => { - const qT = document.querySelector("sgds-textarea"); + const qT = document.querySelector("sgds-checkbox"); qT.disabled = false; // qT.disabled = false; }); From 8f43923807aab51d3aef05e9dd2627bf0ec2bba4 Mon Sep 17 00:00:00 2001 From: Tong Hau Date: Fri, 20 Dec 2024 09:45:32 +0800 Subject: [PATCH 4/8] style(*): add new css variable --- src/themes/day.css | 1 + src/themes/night.css | 1 + 2 files changed, 2 insertions(+) diff --git a/src/themes/day.css b/src/themes/day.css index bb676499..73f9ccd8 100644 --- a/src/themes/day.css +++ b/src/themes/day.css @@ -4,6 +4,7 @@ /* Semantic - Default Colors */ --sgds-default-bg: var(--sgds-gray-000); + --sgds-default-bg-surface: var(--sgds-gray-000); --sgds-default-bg-muted: var(--sgds-gray-200); --sgds-default-bg-subtle: var(--sgds-gray-500); --sgds-default-bg-emphasis: var(--sgds-gray-800); diff --git a/src/themes/night.css b/src/themes/night.css index 80a98789..aa88efc2 100644 --- a/src/themes/night.css +++ b/src/themes/night.css @@ -4,6 +4,7 @@ /* Semantic - Default Colors */ --sgds-default-bg: var(--sgds-gray-900); + --sgds-default-bg-surface: var(--sgds-gray-800); --sgds-default-bg-muted: var(--sgds-gray-700); --sgds-default-bg-subtle: var(--sgds-gray-500); --sgds-default-bg-emphasis: var(--sgds-gray-200); From 7d9cd010a75cc737684105eb8e28e8cacd5e4f75 Mon Sep 17 00:00:00 2001 From: Tong Hau Date: Fri, 20 Dec 2024 10:02:58 +0800 Subject: [PATCH 5/8] chore(*): update external react build package --- CONTRIBUTING.md | 108 +++++++++++++++++++++++++--------------------- rollup.config.mjs | 24 +++++------ 2 files changed, 70 insertions(+), 62 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f0810d41..7d4e2b33 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,23 +1,24 @@ # Contributing Guide + [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/) -Thank you so much for contributing to @govtechsg/sgds-web-component. Please read this guideline before starting your development works. +Thank you so much for contributing to @govtechsg/sgds-web-component. Please read this guideline before starting your development works. -## Contributing workflow +## Contributing workflow -To contribute, please start off at the Issue section of our github repository. +To contribute, please start off at the Issue section of our github repository. -1) Checkout our Issue section to search for similar bugs/issues/feature request that you encounter. Someone else might have already raised a similar issue. -2) If your issue is not found, open an issue ! -3) Follow the instructions of the issue request form and answer them -4) Describe your bug / new feature request as detailed as possible. For new feature request, let us know your motivation behind your proposal and how you intend to build the feature. For bug fixes, let us know how you intend to fix the bug. -5) An SGDS admin will pick up on the discussion and notify you if the proposal is accepted -6) Once accepted, you can fork the repository and start working away ! -7) Raise a PR, tagging the issue number, and request a review from one of our admins. +1. Checkout our Issue section to search for similar bugs/issues/feature request that you encounter. Someone else might have already raised a similar issue. +2. If your issue is not found, open an issue ! +3. Follow the instructions of the issue request form and answer them +4. Describe your bug / new feature request as detailed as possible. For new feature request, let us know your motivation behind your proposal and how you intend to build the feature. For bug fixes, let us know how you intend to fix the bug. +5. An SGDS admin will pick up on the discussion and notify you if the proposal is accepted +6. Once accepted, you can fork the repository and start working away ! +7. Raise a PR, tagging the issue number, and request a review from one of our admins. -## Development +## Development -This project uses Lit 2.0 + SASS + TS and bundled with rollup +This project uses Lit 2.0 + SASS + TS and bundled with rollup ### Recommended : Auto-generate boilerplate code @@ -30,31 +31,32 @@ Alternatively, you can set up your files and folders manually. See the instructi ### Folder Structure Build new components in src folder. Create folder name according to the component you are building. -SCSS files specific to the component should be stored here. Create an entry point (index.ts) file per folder to export the components/classes and its types/interface +SCSS files specific to the component should be stored here. Create an entry point (index.ts) file per folder to export the components/classes and its types/interface + +Place common/reusable functions and global stylings in utils folder -Place common/reusable functions and global stylings in utils folder +### Filename -### Filename -Custom elements must be in kebab case. Prefix the files with sgds-*.ts +Custom elements must be in kebab case. Prefix the files with sgds-\*.ts -## Testing +## Testing -Unit test is written in typescript, compiled to javascript by rollup, dumped into test-outdir. The resulting test-outdir/**.test.js files are run by web-test-runner. Configuration wise, rollup has plugins to convert sass files to css, but web-test-runner does not have great support for sass files atm. Hence, this approach was taken. See configurations in rollup.test.config.js and web-test-runner.config.mjs. +Unit test is written in typescript, compiled to javascript by rollup, dumped into test-outdir. The resulting test-outdir/\*\*.test.js files are run by web-test-runner. Configuration wise, rollup has plugins to convert sass files to css, but web-test-runner does not have great support for sass files atm. Hence, this approach was taken. See configurations in rollup.test.config.js and web-test-runner.config.mjs. All test needs to pass in order for aws amplify deployment build to pass ### Run single test file To run single test file, run the output javascript test file instead of the typescript file -```npm run test test-outdir/button-element.test.js``` +`npm run test test-outdir/button-element.test.js` -## Storybook +## Storybook -To start the storybook server +To start the storybook server -```npm run storybook``` +`npm run storybook` -The basic storybook documentation is auto-generated from the cem metadata. Write your basic template example inside `stories/templates//basic.js`. Follow this template and be sure to export `args` and `Template` +The basic storybook documentation is auto-generated from the cem metadata. Write your basic template example inside `stories/templates//basic.js`. Follow this template and be sure to export `args` and `Template` ```hbs import { html } from "lit-html"; @@ -75,45 +77,51 @@ This file will be concatenated with the basic template to give the final stories ## Markdown files and README.md .md files are located in docs folder. These markdown files are used in both Storybook and github's README. - Do not edit README.md file directly. Instead edit the markdown files in docs folder and run `npm run build:readme`. Note that Gulp-concat will combine the files in alphabetical order - name any new markdown files with this in mind. +Do not edit README.md file directly. Instead edit the markdown files in docs folder and run `npm run build:readme`. Note that Gulp-concat will combine the files in alphabetical order - name any new markdown files with this in mind. ## Output React components -- Using custom-elements-manifest/analzyer to obtain metadata info of the Lit components. Read more [here](https://custom-elements-manifest.open-wc.org/analyzer/getting-started/#how-it-works) +- Using custom-elements-manifest/analzyer to obtain metadata info of the Lit components. Read more [here](https://custom-elements-manifest.open-wc.org/analyzer/getting-started/#how-it-works) -- Document your component class with the relevant [jsdoc tags](https://api-viewer.open-wc.org/docs/guide/writing-jsdoc/). See examples in Button, Masthead, Sidenav folder. +- Document your component class with the relevant [jsdoc tags](https://api-viewer.open-wc.org/docs/guide/writing-jsdoc/). See examples in Button, Masthead, Sidenav folder. -- ```npm run build:react``` runs the cem analyer which reads custom-elements-manifest.config.mjs file. This manifest file tells cem analyzer what files to process and generate the output file custom-elements.json. Script file in scripts/makeReact.mjs reads custom-elements.json file and outputs the react components of all components automatically using @lit-labs/react. +- `npm run build:react` runs the cem analyer which reads custom-elements-manifest.config.mjs file. This manifest file tells cem analyzer what files to process and generate the output file custom-elements.json. Script file in scripts/makeReact.mjs reads custom-elements.json file and outputs the react components of all components automatically using @lit/react. -- `src/react` and `custom-elements.json` are untracked and will be generated by CI github actions during build step ```npm run build:lib``` +- `src/react` and `custom-elements.json` are untracked and will be generated by CI github actions during build step `npm run build:lib` -- During rollup build step, the ```src/react``` folder is read and output in ```lib/react``` and the rest of the Lit components in ```lib``` +- During rollup build step, the `src/react` folder is read and output in `lib/react` and the rest of the Lit components in `lib` -- React users should import as such : -named exports when importing from whole library entry point -```import {SgdsMasthead} from 'clk-web-components/react';``` +- React users should import as such : + named exports when importing from whole library entry point + `import {SgdsMasthead} from 'clk-web-components/react';` -- All steps in this section are included in ```npm run build:lib``` +- All steps in this section are included in `npm run build:lib` ## Publishing (for admin only) + Library publication is performed in workflow by github actions. When ready for publishing, perform the following steps -##### Bump version -1) run ```npm version ``` - or for alpha releases - ``` npm version ``` - **version number should observe SEMVER - **this step will auto-generate a git tag on your local -2) ```git push ``` the changes - -##### Generate Changelog -3) run ```cz changelog``` to update CHANGELOG.md file (ensure that you have set up [cz-cli](https://github.com/commitizen/cz-cli) globally) -**`cz changelog` updates based on your local git tags -4) Push the changes - +##### Bump version + +1. run `npm version ` + or for alpha releases + `npm version ` + **version number should observe SEMVER + **this step will auto-generate a git tag on your local +2. `git push ` the changes + +##### Generate Changelog + +3. run `cz changelog` to update CHANGELOG.md file (ensure that you have set up [cz-cli](https://github.com/commitizen/cz-cli) globally) + \*\*`cz changelog` updates based on your local git tags +4. Push the changes + ##### Push git tag -4) run `git tag` to check the newly generated git tag on local -5) ```git push origin ``` -** this triggers gh action workflow to publish the library to npm + +4. run `git tag` to check the newly generated git tag on local +5. `git push origin ` + \*\* this triggers gh action workflow to publish the library to npm + ##### Create a release -6) Manually create a release on github + +6. Manually create a release on github diff --git a/rollup.config.mjs b/rollup.config.mjs index 230071b3..130ce693 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -7,7 +7,7 @@ import { visualizer } from "rollup-plugin-visualizer"; import glob from "glob"; import path from "node:path"; import { fileURLToPath } from "node:url"; -import copy from 'rollup-plugin-copy' +import copy from "rollup-plugin-copy"; import preserveDirectives from "rollup-plugin-preserve-directives"; const external = [ @@ -21,16 +21,16 @@ const external = [ /lit\/.*/, /bootstrap\/.*/, "imask", - "date-fns", + "date-fns" ]; const copyPlugin = copy({ targets: [ - {src: "src/themes/**/*", dest: "lib/themes"}, - {src: "src/css/**/*", dest: "lib/css"}, - {src: "src/icons/**/*", dest: "lib/icons"}, + { src: "src/themes/**/*", dest: "lib/themes" }, + { src: "src/css/**/*", dest: "lib/css" }, + { src: "src/icons/**/*", dest: "lib/icons" } ] -}) +}); const wcPlugins = [ resolve({ browser: true, @@ -43,7 +43,7 @@ const wcPlugins = [ }), postcss({ minimize: true, - inject: false, + inject: false }), litcss(), typescript({ @@ -133,11 +133,11 @@ const buildSgdsPackage = () => { exports: "named", preserveModules: true, preserveModulesRoot: "src/react", - banner: `'use client';`, + banner: `'use client';` } ], plugins: [...reactBuildPlugins], - external: ["@lit-labs/react", "react", ...external] + external: ["@lit/react", "react", ...external] }, { input: "src/react/index.ts", @@ -150,15 +150,15 @@ const buildSgdsPackage = () => { exports: "named", preserveModules: true, preserveModulesRoot: "src/react", - banner: `'use client';`, + banner: `'use client';` } ], plugins: [...reactBuildPlugins], - external: ["@lit-labs/react", "react", ...external] + external: ["@lit/react", "react", ...external] } ]; - return [...reactPackage, ...esmModules, ...umdBundles ]; + return [...reactPackage, ...esmModules, ...umdBundles]; }; export default buildSgdsPackage; From c95bd15e31b6b1d7754e41e1e5a60c86e5edad8e Mon Sep 17 00:00:00 2001 From: Tong Hau Date: Fri, 20 Dec 2024 10:04:01 +0800 Subject: [PATCH 6/8] style(button): update cursor for disabled button --- src/base/button.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/base/button.css b/src/base/button.css index 36fbb146..dea085b9 100644 --- a/src/base/button.css +++ b/src/base/button.css @@ -86,7 +86,7 @@ .btn.disabled, .btn:disabled { opacity: var(--sgds-opacity-50); - pointer-events: none; + cursor: not-allowed; color: var(--sgds-btn-color); } From 0e0c516fa919ba14cdb04fa3de4c0b5edcbdfee7 Mon Sep 17 00:00:00 2001 From: Tong Hau Date: Fri, 20 Dec 2024 10:08:03 +0800 Subject: [PATCH 7/8] chore(dropdown element): change dropdown modifierOpt to property --- src/base/dropdown-element.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/base/dropdown-element.ts b/src/base/dropdown-element.ts index 0923891f..e253925f 100644 --- a/src/base/dropdown-element.ts +++ b/src/base/dropdown-element.ts @@ -52,7 +52,7 @@ export class DropdownElement extends SgdsElement { @state() dropdownConfig: Partial; /** @internal */ - @state() + @property() protected modifierOpt: StrictModifiers[] = []; /** When true, dropdown menu shows on first load */ From 4f4fa838cff482d56e85c004d6f9425e9f303760 Mon Sep 17 00:00:00 2001 From: Tong Hau Date: Fri, 20 Dec 2024 11:43:11 +0800 Subject: [PATCH 8/8] chore(icon): update lifecycle hook to allow icon change --- src/components/Icon/sgds-icon.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/Icon/sgds-icon.ts b/src/components/Icon/sgds-icon.ts index 3f45a955..52a2980e 100644 --- a/src/components/Icon/sgds-icon.ts +++ b/src/components/Icon/sgds-icon.ts @@ -23,14 +23,11 @@ export class SgdsIcon extends SgdsElement { @state() private _svgContent: string | null = null; - async firstUpdated() { - if (this.name) { + async updated(changedProperties: Map) { + if (changedProperties.has("name")) { await this.loadSvg(this.name); } - } - - updated() { - this.style.display = this._svgContent ? "flex" : "none"; + this.style.display = this._svgContent ? "" : "none"; } async loadSvg(name: string): Promise { @@ -46,10 +43,10 @@ export class SgdsIcon extends SgdsElement { if (svg) { this._svgContent = svg; } else { - throw new Error("icon `name` is undefined"); + throw new Error("Icon `name` is undefined"); } } catch (error) { - console.error(`Error loading SVG: ${name}`, error); + console.error(`Unable to load icon: ${name}.`, error); } } }