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/index.html b/index.html index 3cf03c6a..cafc7819 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 @@ -1966,7 +1965,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; }); 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; 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); } 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 */ 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); } } } diff --git a/src/themes/day.css b/src/themes/day.css index e4098bdf..dcd1b72f 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 5462c39e..b54c36de 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);