Merge branch 'lab' of https://github.com/GovTechSG/sgds-web-component into lab

Author: tonghauhive

index.html

@@ -283,7 +283,7 @@ <h2>IconList</h2>
       <div class="d-flex-row">
         <sgds-icon-list size="sm">
           <div role="listitem">
-            <sgds-icon name="placeholder" size="sm"></sgds-icon>item one
+            <sgds-icon size="sm" name="placeholder"></sgds-icon>item one
           </div>
           <div role="listitem">
             <sgds-icon name="placeholder" size="sm"></sgds-icon>item one
@@ -471,7 +471,7 @@ <h3>Size</h3>
       </sgds-table>
     </div>
     <div class="container">
-      <sgds-tab-group variant="tabs-info-toggle">
+      <sgds-tab-group>
         <sgds-tab slot="nav" panel="apple">
           <sgds-icon slot="icon" name="map"></sgds-icon>
           <span slot="count">1</span>
@@ -489,7 +489,7 @@ <h3>Size</h3>
         <sgds-tab-panel name="banana">Banana</sgds-tab-panel>
         <sgds-tab-panel name="carrot">Carrot</sgds-tab-panel>
       </sgds-tab-group>
-      <sgds-tab-group variant="tabs-basic-toggle">
+      <sgds-tab-group>
         <sgds-tab slot="nav" panel="12">
           <sgds-icon slot="icon" name="map"></sgds-icon>
           <span>12</span>
@@ -1151,13 +1151,15 @@ <h3>Button Full Width</h3>
       <h2>Close Button</h2>
       <div class="row">
         <sgds-close-button></sgds-close-button>
+        <sgds-close-button variant="light"></sgds-close-button>
+        <sgds-close-button variant="dark"></sgds-close-button>
         <sgds-close-button size="sm"></sgds-close-button>
       </div>
     </div>
     <div class="container">
       <h2>Modal</h2>
       <sgds-button id="modalShowButton">Open Modal</sgds-button>
-      <sgds-modal size="fullscreen">
+      <sgds-modal>
         <h2 slot="title">Modal title</h2>
         <p slot="description">Modal description</p>
         <p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dictum est vitae erat molestie blandit. Pellentesque at nunc at mi auctor imperdiet eu at leo. Integer aliquam, turpis vel ultricies ornare, sem massa commodo velit, pretium dictum quam nibh et ex. Suspendisse eu dignissim libero. Donec aliquam, lacus eu pellentesque interdum, arcu nisl blandit turpis, at tincidunt purus orci ut dolor. Morbi malesuada faucibus lorem, ornare accumsan sapien lacinia vel. In enim justo, hendrerit eu mi vitae, viverra fringilla nunc. Proin semper nunc a mollis faucibus. Nam at arcu non justo congue tincidunt. Donec vehicula felis risus, et lobortis lacus fringilla eu. Proin faucibus, nisi non semper elementum, sapien nisi viverra urna, id tempus augue felis ac nibh. Nullam pulvinar magna eros. Vestibulum at orci elit. Sed convallis fermentum gravida.
@@ -1632,24 +1634,14 @@ <h2>Drawer</h2>
       <sgds-button>Open Drawer</sgds-button>
     </div>
 
-    <div class="container">
+    <div class="">
       <h2>Tooltip</h2>
       Hover me
       <sgds-tooltip content="This is a tooltip" placement="top" trigger="hover">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle"
-          viewBox="0 0 16 16">
-          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-          <path
-            d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
-        </svg>
-      </sgds-tooltip>
+        <sgds-icon name="plus"></sgds-icon>
+      </sgds-tooltip> 
       <sgds-tooltip content="This is a tooltip" placement="right" trigger="hover">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle"
-          viewBox="0 0 16 16">
-          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-          <path
-            d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" />
-        </svg>
+        <sgds-icon name="plus"></sgds-icon>
       </sgds-tooltip>
       <sgds-tooltip content="This is a tooltip" placement="bottom" trigger="hover">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle"

scripts/generateStories.mjs

@@ -86,7 +86,7 @@ ${ArgsType.join('\n')}
 
 ${methodsMeta.map(meta => {
   if (meta.methods.length > 0){
-    return `## Methods \n### ${meta.tagName}\n<table>
+    return `## Methods \n ### ${meta.tagName}\n<table>
         <thead>
           <tr>
             <th>Name</th>

src/base/sgds-element.ts

@@ -62,7 +62,7 @@ export default class SgdsElement extends LitElement {
     //   `Attempted to register <${name}>${newVersion}, but <${name}>${existingVersion} has already been registered.`
     // );
   }
-
+  /** @internal */
   static dependencies: Record<string, typeof SgdsElement> = {};
 
   constructor() {

src/components/Breadcrumb/sgds-breadcrumb-item.ts

@@ -2,14 +2,15 @@ import { html } from "lit";
 import { property } from "lit/decorators.js";
 import SgdsLink from "../Link/sgds-link";
 import breadcrumbItemStyle from "./breadcrumb-item.css";
+import SgdsElement from "../../base/sgds-element";
 /**
  * @summary Breadcrumb Item are navigational links used in Breadcrumb component
  *
- * @slot default - The title of the item
+ * @slot default - The link of the item. Pass in anchor tags into this slot
  */
-export class SgdsBreadcrumbItem extends SgdsLink {
+export class SgdsBreadcrumbItem extends SgdsElement {
   static styles = [...SgdsLink.styles, breadcrumbItemStyle];
-  /** Specifies the url path of the breadcrumb-item. When defined, the breadcrumb-items is a anchor element. When not defined, indicates that the breadcrumb item is active. In such cases, a span element is rendered. */
+  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item  */
   @property({ type: Boolean, reflect: true }) active = false;
 
   render() {

src/components/DescriptionList/sgds-description-list.ts

@@ -7,7 +7,7 @@ let id = 0;
 
 /**
  *
- * @summary Description Lists are used with description list group as list components
+ * @summary Description Lists are used with description list group as list components. A description list (often referred to as a “definition list”) is a type of list used in web design and documentation to pair terms with their corresponding descriptions or values.
  *
  * @slot default - The slot for the label
  * @slot data - The slot for the data

src/components/Icon/icon.css

@@ -1,5 +1,6 @@
 :host {
   color: inherit;
+  display: inline-flex;
 }
 :host([size="sm"]) svg {
   width: var(--sgds-icon-size-sm);
@@ -27,7 +28,7 @@
 }
 
 svg {
-  display: block;
+  display: inline-block;
   width: var(--sgds-icon-size-lg);
   height: var(--sgds-icon-size-lg);
 }

src/components/Icon/sgds-icon.ts

@@ -5,10 +5,7 @@ import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import iconStyles from "./icon.css";
 
 /**
- * @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons form SgdsIcon library set
- *
- * @event sgds-blur - Emitted when the button is blurred.
- * @event sgds-focus - Emitted when the button is focused.
+ * @summary Icons offer a form of visual shorthand that we are all familiar with. They can label, inform and aid navigation quickly and effectively in minimal space. Icons must first and foremost communicate meaning. By default, the icon component renders icons from `SgdsIcon` library set
  */
 export class SgdsIcon extends SgdsElement {
   static styles = [...SgdsElement.styles, iconStyles];
@@ -25,14 +22,12 @@ export class SgdsIcon extends SgdsElement {
 
   async updated(changedProperties: Map<string, any>) {
     if (changedProperties.has("name")) {
-      await this.loadSvg(this.name);
+      await this._loadSvg(this.name);
     }
-    this.style.display = this._svgContent ? "" : "none";
   }
 
-  async loadSvg(name: string): Promise<void> {
+  private async _loadSvg(name: string): Promise<void> {
     if (name) {
-      // Dynamically import the SVG if not cached
       const pascalName = name
         .split("-")
         .map(name => String(name).charAt(0).toUpperCase() + String(name).slice(1))
@@ -43,7 +38,7 @@ export class SgdsIcon extends SgdsElement {
         if (svg) {
           this._svgContent = svg;
         } else {
-          throw new Error("Icon `name` is undefined");
+          throw new Error("icon `name` not found");
         }
       } catch (error) {
         console.error(`Unable to load icon: ${name}.`, error);

src/components/IconButton/icon-button.css

@@ -1,3 +1,7 @@
+:host {
+  display: inline-block;
+}
+
 .btn.btn-icon {
   display: flex;
   width: var(--sgds-dimension-48, 56px);

src/components/IconButton/sgds-icon-button.ts

@@ -9,8 +9,6 @@ import iconButtonStyles from "./icon-button.css";
 /**
  * @summary An icon button is a user interface element that combines an icon and a button, serving as a clickable or tabbable component.
  *
- * @slot default - The slot for sgds-icon
- *
  * @event sgds-blur - Emitted when the button is blurred.
  * @event sgds-focus - Emitted when the button is focused.
  */

src/components/IconList/sgds-icon-list.ts

@@ -1,36 +1,24 @@
-import SgdsElement from "../../base/sgds-element";
 import { html } from "lit";
-import iconListStyles from "./icon-list.css";
 import { property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import SgdsIcon from "../Icon/sgds-icon";
-import { ifDefined } from "lit/directives/if-defined.js";
+import SgdsElement from "../../base/sgds-element";
+import iconListStyles from "./icon-list.css";
 /**
  * @summary A IconList can be used to display content related to the same topic. Each list item begins an icon.
  *
- * @slot default - The list items of IconList. Each list items should have aria attribute role="list" added
+ * @slot default - The list items of IconList. Each list items should have aria attribute role="listitem" added
  */
 export class SgdsIconList extends SgdsElement {
   static styles = [...SgdsElement.styles, iconListStyles];
-  static dependencies = { "sgds-icon": SgdsIcon };
 
   /** Sets the aria-role of the sgds-icon-list */
   @property({ type: String, reflect: true }) role = "list";
   /** The size of icon list. Changes the font-size the list items */
   @property({ type: String, reflect: true }) size: "sm" | "md" | "lg" = "md";
-  /** The name of the icon from sgds icon library */
-  @property({ type: String, reflect: true }) name: string;
-
-  private _assignIconSize(buttonSize: "sm" | "md" | "lg") {
-    if (buttonSize === "sm") return "md";
-    if (buttonSize === "md") return "lg";
-    if (buttonSize === "lg") return "xl";
-  }
 
   render() {
     return html`
       <div class=${classMap({ [this.size]: this.size })}>
-        <sgds-icon name=${ifDefined(this.name)} size=${ifDefined(this._assignIconSize(this.size))}></sgds-icon>
         <slot></slot>
       </div>
     `;