Merge remote-tracking branch 'origin/lab' into lab

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/<Component>/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/<Component>/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 <major|minor|path> ```
-    or for alpha releases
-    ``` npm version <version-name> ```
-    **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 <major|minor|path> `
+   or for alpha releases
+   `npm version <version-name>`
+   **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 <newly-created-tag> ```
-** 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 <newly-created-tag> `
+   \*\* 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

index.html

@@ -145,17 +145,16 @@
 <body class="d-flex flex-column min-vh-100"></body>
 <sgds-masthead></sgds-masthead>
 <sgds-mainnav expand="lg">
-  <span slot="brand">Design System</span>
   <img width="130" src="https://www.designsystem.tech.gov.sg/assets/img/logo-sgds.svg" slot="brand">
 
   <sgds-mainnav-item active href="#">
-    <strong>Home</strong>
+    Home
   </sgds-mainnav-item>
   <sgds-mainnav-item disabled href="#">About</sgds-mainnav-item>
   <sgds-mainnav-item href="#" slot="end" class="test test2">Info</sgds-mainnav-item>
-  <sgds-mainnav-item slot="end" id="night-theme"><i class="bi bi-moon"></i></sgds-mainnav-item>
+  <sgds-mainnav-item href="#" slot="end" id="night-theme"><i class="bi bi-moon"></i></sgds-mainnav-item>
   <sgds-mainnav-dropdown disabled>
-    <strong slot="toggler">Dropdown</strong>
+    <span slot="toggler">Dropdown</span>
     <sgds-dropdown-item href="#">Item 1</sgds-dropdown-item>
     <sgds-dropdown-item href="#">Item 2</sgds-dropdown-item>
     <sgds-dropdown-item href="#">Item 3</sgds-dropdown-item>
@@ -1966,7 +1965,7 @@ <h2 slot="title">Name of portal/digital service</h2>
         // qT.disabled = false;
       });
       enabltT.addEventListener("click", () => {
-        const qT = document.querySelector("sgds-textarea");
+        const qT = document.querySelector("sgds-checkbox");
         qT.disabled = false;
         // qT.disabled = false;
       });

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;

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);
 }
 

src/base/dropdown-element.ts

@@ -52,7 +52,7 @@ export class DropdownElement extends SgdsElement {
   @state()
   dropdownConfig: Partial<Popper.Options>;
   /** @internal */
-  @state()
+  @property()
   protected modifierOpt: StrictModifiers[] = [];
 
   /** When true, dropdown menu shows on first load */

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<string, any>) {
+    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<void> {
@@ -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);
       }
     }
   }

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);

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);