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

cypress/apps/angular-app/src/app/app.component.html

@@ -17,7 +17,7 @@
 <icon-component></icon-component>
 <modal-component></modal-component>
 <pagination-component></pagination-component>
-<progress-component></progress-component>
+<progress-bar-component></progress-bar-component>
 <quantitytoggle-component></quantitytoggle-component>
 <radio-component></radio-component>
 <sidenav-component></sidenav-component>

cypress/apps/angular-app/src/app/app.module.ts

@@ -24,7 +24,7 @@ import { Mainnav } from "../components/mainnav/mainnav.component";
 import { Masthead } from "../components/masthead/masthead.component";
 import { Modal } from "../components/modal/modal.component";
 import { Pagination } from "../components/pagination/pagination.component";
-import { Progress } from "../components/progress/progress.component";
+import { ProgressBar } from "../components/progressbar/progressbar.component";
 import { QuantityToggle } from "../components/quantitytoggle/quantitytoggle.component";
 import { Radio } from "../components/radio/radio.component";
 import { Sidenav } from "../components/sidenav/sidenav.component";
@@ -61,7 +61,7 @@ import { Tooltip } from "../components/tooltip/tooltip.component";
     Masthead,
     Modal,
     Pagination,
-    Progress,
+    ProgressBar,
     QuantityToggle,
     Radio,
     Sidenav,

cypress/apps/angular-app/src/components/progressbar/progressbar.component.html

@@ -0,0 +1,3 @@
+<sgds-progress-bar label="50%" value="50" ariamin="0" ariamax="100"
+    aria-label="Loading in progress">
+</sgds-progress-bar>

cypress/apps/angular-app/src/components/progressbar/progressbar.component.ts

@@ -0,0 +1,7 @@
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "progress-bar-component",
+  templateUrl: "./progressbar.component.html"
+})
+export class ProgressBar {}

cypress/apps/next-app/src/app/components/ProgressBar.tsx

@@ -0,0 +1,14 @@
+import SgdsProgressBar from "@govtechsg/sgds-web-component/react/progress-bar/index.js";
+
+export const ProgressBar = () => {
+  return (
+    <SgdsProgressBar
+      label="50%"
+      variant="secondary"
+      value={50}
+      ariamin={0}
+      ariamax={100}
+      aria-label="Loading in progress"
+    ></SgdsProgressBar>
+  );
+};

cypress/apps/next-app/src/app/page.tsx

@@ -18,7 +18,7 @@ import { Mainnav } from "./components/Mainnav";
 import { Masthead } from "./components/Masthead";
 import { Modal } from "./components/Modal";
 import { Pagination } from "./components/Pagination";
-import { Progress } from "./components/Progress";
+import { ProgressBar } from "./components/ProgressBar";
 import { QuantityToggle } from "./components/QuantityToggle";
 import { Radio } from "./components/Radio";
 import { Sidenav } from "./components/Sidenav";
@@ -53,7 +53,7 @@ export default function Home() {
       <Input />
       <Modal />
       <Pagination />
-      <Progress />
+      <ProgressBar />
       <QuantityToggle />
       <Radio />
       <Sidenav />
@@ -65,7 +65,7 @@ export default function Home() {
       <Textarea />
       <Toast />
       <Tooltip />
-      <Footer /> 
+      <Footer />
     </main>
   );
 }

cypress/apps/react-app/src/App.js

@@ -19,7 +19,7 @@ import { Mainnav } from "./components/Mainnav";
 import { Masthead } from "./components/Masthead";
 import { Modal } from "./components/Modal";
 import { Pagination } from "./components/Pagination";
-import { Progress } from "./components/Progress";
+import { ProgressBar } from "./components/ProgressBar";
 import { QuantityToggle } from "./components/QuantityToggle";
 import { Radio } from "./components/Radio";
 import { Sidenav } from "./components/Sidenav";
@@ -55,7 +55,7 @@ function App() {
       <Input />
       <Modal />
       <Pagination />
-      <Progress />
+      <ProgressBar />
       <QuantityToggle />
       <Radio />
       <Sidenav />

cypress/apps/react-app/src/components/ProgressBar.jsx

@@ -0,0 +1,14 @@
+import SgdsProgressBar from "@govtechsg/sgds-web-component/react/progress-bar";
+
+export const ProgressBar = () => {
+  return (
+    <SgdsProgressBar
+      label="50%"
+      variant="neutral"
+      value="50"
+      ariamin="0"
+      ariamax="100"
+      arialabel="Loading in progress"
+    ></SgdsProgressBar>
+  );
+};

cypress/apps/vue-app/src/App.vue

@@ -22,7 +22,7 @@ import Mainnav from './components/Mainnav.vue'
 import Masthead from './components/Masthead.vue'
 import Modal from './components/Modal.vue'
 import Pagination from './components/Pagination.vue'
-import Progress from './components/Progress.vue'
+import ProgressBar from './components/ProgressBar.vue'
 import QuantityToggle from './components/QuantityToggle.vue'
 import Radio from './components/Radio.vue'
 import Sidenav from './components/Sidenav.vue'
@@ -60,7 +60,7 @@ import Trigger from './components/Trigger.vue'
           <Input />
           <Modal />
           <Pagination />
-          <Progress />
+          <ProgressBar />
           <QuantityToggle />
           <Radio />
           <Sidenav />

src/base/dropdown-element.ts

@@ -89,6 +89,7 @@ export class DropdownElement extends SgdsElement {
         //working
         this.dropdownConfig = {
           placement: "bottom-start",
+          strategy: "fixed",
           modifiers: !this.noFlip
             ? this.modifierOpt
             : [

src/base/link-element.ts

@@ -37,6 +37,7 @@ export default class LinkElement extends SgdsElement {
         })} "
         ?disabled=${this.disabled}
         aria-disabled=${this.disabled ? "true" : "false"}
+        tabindex=${this.disabled ? "-1" : "0"}
       >
         <slot></slot>
       </a>

src/components/Badge/badge.css

@@ -1,65 +1,48 @@
 :host {
-  --sgds-badge-bg: var(--sgds-primary-bg);
-  --sgds-badge-color: var(--sgds-default-color-on-dark);
-  --sgds-badge-border-radius: var(--sgds-border-radius-sm);
   display: inline-flex;
 }
 
-:host([variant="success"]) {
-  --sgds-badge-bg: var(--sgds-success-bg);
-  --sgds-badge-color: var(--sgds-default-color-on-dark);
+:host([variant="success"]) .badge {
+  background-color: var(--sgds-success-bg);
 }
 
-:host([variant="danger"]) {
-  --sgds-badge-bg: var(--sgds-danger-bg);
-  --sgds-badge-color: var(--sgds-default-color-on-dark);
+:host([variant="danger"]) .badge {
+  background-color: var(--sgds-danger-bg);
 }
 
-:host([variant="warning"]) {
-  --sgds-badge-bg: var(--sgds-warning-bg);
-  --sgds-badge-color: var(--sgds-default-color-on-dark);
+:host([variant="warning"]) .badge {
+  background-color: var(--sgds-warning-bg);
 }
 
-:host([variant="neutral"]) {
-  --sgds-badge-bg: var(--sgds-neutral-bg);
-  --sgds-badge-color: var(--sgds-default-color-on-dark);
+:host([variant="neutral"]) .badge {
+  background-color: var(--sgds-neutral-bg);
 }
 
-:host([variant="info"][outlined]) {
-  --sgds-badge-bg: var(--sgds-primary-bg-subtle);
-  --sgds-badge-color: var(--sgds-default-color-on-light);
-  --sgds-badge-border-color: var(--sgds-primary-border-color-subtle);
+:host([variant="success"][outlined]) .badge {
+  background-color: var(--sgds-success-bg-subtle);
+  border: var(--sgds-border-width-1) solid var(--sgds-success-border-color-subtle);
 }
 
-:host([variant="success"][outlined]) {
-  --sgds-badge-bg: var(--sgds-success-bg-subtle);
-  --sgds-badge-color: var(--sgds-default-color-on-light);
-  --sgds-badge-border-color: var(--sgds-success-border-color-subtle);
+:host([variant="danger"][outlined]) .badge {
+  background-color: var(--sgds-danger-bg-subtle);
+  border: var(--sgds-border-width-1) solid var(--sgds-danger-border-color-subtle);
 }
 
-:host([variant="danger"][outlined]) {
-  --sgds-badge-bg: var(--sgds-danger-bg-subtle);
-  --sgds-badge-color: var(--sgds-default-color-on-light);
-  --sgds-badge-border-color: var(--sgds-danger-border-color-subtle);
+:host([variant="warning"][outlined]) .badge {
+  background-color: var(--sgds-warning-bg-subtle);
+  border: var(--sgds-border-width-1) solid var(--sgds-warning-border-color-subtle);
 }
 
-:host([variant="warning"][outlined]) {
-  --sgds-badge-bg: var(--sgds-danger-bg-subtle);
-  --sgds-badge-color: var(--sgds-default-color-on-light);
-  --sgds-badge-border-color: var(--sgds-warning-border-color-subtle);
-}
-
-:host([variant="neutral"][outlined]) {
-  --sgds-badge-bg: var(--sgds-neutral-bg-subtle);
-  --sgds-badge-color: var(--sgds-default-color-on-light);
-  --sgds-badge-border-color: var(--sgds-neutral-border-color-subtle);
+:host([variant="neutral"][outlined]) .badge {
+  background-color: var(--sgds-neutral-bg-subtle);
+  border: var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-subtle);
 }
 
 .badge {
-  background-color: var(--sgds-badge-bg);
-  color: var(--sgds-badge-color);
+  background-color: var(--sgds-primary-bg);
+  color: var(--sgds-default-color-on-dark);
   border: var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);
-  border-radius: var(--sgds-badge-border-radius);
+  border-radius: var(--sgds-border-radius-sm);
   font-size: var(--sgds-font-size-1);
   padding: 0 var(--sgds-padding-2-xs);
   height: var(--sgds-dimension-24);
@@ -71,7 +54,9 @@
 }
 
 .badge.outlined {
-  border: var(--sgds-border-width-1) solid var(--sgds-badge-border-color);
+  color: var(--sgds-default-color-on-light);
+  background-color: var(--sgds-primary-bg-subtle);
+  border: var(--sgds-border-width-1) solid var(--sgds-primary-border-color-subtle);
 }
 
 .badge-label {
@@ -83,14 +68,10 @@
 }
 
 .badge-dimissible sgds-close-button {
-  --sgds-close-btn-border-radius: var(--sgds-badge-border-radius);
+  --sgds-close-btn-border-radius: var(--sgds-border-radius-sm);
 }
 
-slot[name="icon"]::slotted(*){
-  color: var(--sgds-badge-color);
-} 
-
 slot::slotted(*){
-font-weight: normal;
-font-size: 14px;
+  font-weight: normal;
+  font-size: 14px;
 }

src/components/Dropdown/dropdown.css

@@ -1,3 +1,4 @@
-.dropdown{
+.dropdown {
   display:flex;
-}
+  height: 100%;
+}

src/components/Dropdown/sgds-dropdown.ts

@@ -57,6 +57,14 @@ export class SgdsDropdown extends DropdownListElement {
     button.focus();
   }
 
+  private _handleClick() {
+    if (this.disabled) {
+      return;
+    }
+
+    this.toggleMenu();
+  }
+
   async connectedCallback() {
     super.connectedCallback();
     this.addEventListener("sgds-hide", this._handleCloseMenu);
@@ -90,7 +98,7 @@ export class SgdsDropdown extends DropdownListElement {
         <div
           class="toggler-container"
           ${ref(this.myDropdown)}
-          @click=${() => this.toggleMenu()}
+          @click=${this._handleClick}
           aria-expanded="${this.menuIsOpen}"
           aria-haspopup="menu"
         >

src/components/Icon/icon-registry.ts

@@ -385,6 +385,12 @@ export const Map = `
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
   <path fill="currentColor" fill-rule="evenodd" d="M21.283 2.471A.6.6 0 0 1 21.6 3v14.4a.6.6 0 0 1-.267.5l-5.4 3.6a.6.6 0 0 1-.63.021L9.3 18.091l-6.002 3.43A.6.6 0 0 1 2.4 21V6.6a.6.6 0 0 1 .302-.52l6.3-3.6a.6.6 0 0 1 .596 0l5.978 3.415 5.091-3.394a.6.6 0 0 1 .616-.03ZM15 6.948 9.9 4.034v13.018l5.1 2.914V6.948Zm1.2 12.93 4.2-2.8V4.122l-4.2 2.8V19.88Zm-7.5-2.826V4.034L3.6 6.948v13.018l5.1-2.914Z" clip-rule="evenodd"/>
 </svg>`;
+export const Menu = `
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M2.375 6C2.375 5.65482 2.65482 5.375 3 5.375H21C21.3452 5.375 21.625 5.65482 21.625 6C21.625 6.34518 21.3452 6.625 21 6.625H3C2.65482 6.625 2.375 6.34518 2.375 6Z" fill="currentColor"/>
+  <path d="M2.375 12C2.375 11.6548 2.65482 11.375 3 11.375H21C21.3452 11.375 21.625 11.6548 21.625 12C21.625 12.3452 21.3452 12.625 21 12.625H3C2.65482 12.625 2.375 12.3452 2.375 12Z" fill="currentColor"/>
+  <path d="M2.375 18C2.375 17.6548 2.65482 17.375 3 17.375H15C15.3452 17.375 15.625 17.6548 15.625 18C15.625 18.3452 15.3452 18.625 15 18.625H3C2.65482 18.625 2.375 18.3452 2.375 18Z" fill="currentColor"/>
+</svg>`;
 export const Paperclip = `
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
   <path fill="currentColor" fill-rule="evenodd" d="M10.4 3.6a2.7 2.7 0 0 0-2.7 2.7v9.75a4.35 4.35 0 1 0 8.7 0V5.93a.6.6 0 1 1 1.2 0v10.12a5.55 5.55 0 1 1-11.1 0V6.3a3.9 3.9 0 0 1 7.8 0v9.701a2.25 2.25 0 0 1-4.5 0V7.186a.6.6 0 1 1 1.2 0v8.815a1.05 1.05 0 1 0 2.1 0V6.3a2.7 2.7 0 0 0-2.7-2.7Z" clip-rule="evenodd"/>