docs(icon): add storybook

GovTechSG · Dec 20, 2024 · c3be582 · c3be582
1 parent 3db6e7c
commit c3be582
Show file tree

Hide file tree

Showing 13 changed files with 372 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -1634,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"

diff --git a/src/base/sgds-element.ts b/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() {

diff --git a/src/components/Icon/icon.css b/src/components/Icon/icon.css
@@ -1,5 +1,6 @@
 :host {
   color: inherit;
+  display: inline-block;
 }
 :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);
 }
diff --git a/src/components/Icon/sgds-icon.ts b/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);

diff --git a/src/components/QuantityToggle/sgds-quantity-toggle.ts b/src/components/QuantityToggle/sgds-quantity-toggle.ts
@@ -12,7 +12,6 @@ import { SgdsFormValidatorMixin } from "../../utils/validatorMixin";
 import SgdsIconButton from "../IconButton/sgds-icon-button";
 import SgdsInput from "../Input/sgds-input";
 import quantityToggleStyle from "./quantity-toggle.css";
-import SgdsIcon from "../Icon/sgds-icon";
 /**
  * @summary The quantity toggle component is used to increase or decrease an incremental venue,  best used when the user needs to enter or adjust the quantity of a selected item.
  *

diff --git a/src/components/Tooltip/sgds-tooltip.ts b/src/components/Tooltip/sgds-tooltip.ts
@@ -112,7 +112,7 @@ export class SgdsTooltip extends SgdsElement {
 
   render() {
     return html`
-      <div ${ref(this._myTooltip)}>
+      <div ${ref(this._myTooltip)} class="tooltip-placeholder">
         <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
     `;

diff --git a/src/components/Tooltip/tooltip.css b/src/components/Tooltip/tooltip.css
@@ -1,3 +1,9 @@
+:host {
+  display: contents;
+}
+.tooltip-placeholder{
+  display: inline-block;
+}
 .tooltip {
   word-wrap: break-word;
   display: block;

diff --git a/stories/templates/Icon/additional.mdx b/stories/templates/Icon/additional.mdx
@@ -0,0 +1,15 @@
+## Sizes
+
+SgdsIcons offer a variety of sizes : `sm` , `md` , `lg` , `xl` , `2-xl` , `3-xl`. By default, the icon size is `lg`
+
+<Canvas of={IconStories.Size}>
+  <Story of={IconStories.Size} />
+</Canvas>
+
+## Color 
+
+The color of the icons is inherited from its parent container 
+
+<Canvas of={IconStories.Color}>
+  <Story of={IconStories.Color} />
+</Canvas>
diff --git a/stories/templates/Icon/additional.stories.js b/stories/templates/Icon/additional.stories.js
@@ -0,0 +1,35 @@
+import { html } from "lit-html";
+
+const SizeTemplate = args => {
+  const sizes = ["sm", "md", "lg", "xl", "2-xl", "3-xl"];
+  return html`${sizes.map(s => html` <sgds-icon name="house-door" size=${s}></sgds-icon> `)} `;
+};
+
+const ColorTemplate = args => {
+  const colors = ["red", "blue", "green", "purple", "pink"];
+  return html`
+    ${colors.map(
+      c => html`
+        <span style="color:${c}">
+          <sgds-icon name="house-door"></sgds-icon>
+        </span>
+      `
+    )}
+  `;
+};
+
+export const Size = {
+  render: SizeTemplate.bind({}),
+  name: "Size",
+  args: {},
+  parameters: {},
+  tags: ["!dev"]
+};
+
+export const Color = {
+  render: ColorTemplate.bind({}),
+  name: "Color",
+  args: {},
+  parameters: {},
+  tags: ["!dev"]
+};