@govtechsg/sgds-web-component 0.0.7 → 0.0.10

package/stories/QuantityToggle.stories.mdx

@@ -0,0 +1,97 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { html } from "lit-html";
+import  "../lib/QuantityToggle";
+
+<Meta
+  title="Components/QuantityToggle"
+  argTypes={{
+    quantityToggleClasses: { 
+      control: "text" ,
+      table: { category: "props" },
+      description: 'Optional. Can be used to insert any utility classes such as `me-auto`'
+    },
+    count: { 
+      control: "text" ,
+      defaultValue: "0",
+      table: { category: "props" },
+      type: { summary: "String" },
+      description: 'Optional. Can be used to insert any utility classes such as `me-auto`'
+    },
+    step: { 
+      control: "text" ,
+      defaultValue: "1",
+      table: { category: "props" },
+      type: { summary: "String" },
+      description: 'Optional. Can be used to insert any utility classes such as `me-auto`'
+    },
+    size:{
+      control: 'select',
+      options:['sm','lg'],
+      type: { summary: "String" },
+      defaultValue: 'sm',
+      description:'Specifies a large or small button',
+      table: { category: "props" },
+    },
+    disabled:{
+      control: "boolean",
+      defaultValue: false,
+      table: { category: "props" },
+      description:'The disabled state of the component'
+    },
+    blur:{
+      table: { 
+        category: "Method",
+        type: { summary: "Method" },
+      },
+      description: 'Removes focus from the button.'
+    },
+    focus:{
+      table: { 
+        category: "Method",
+        type: { summary: "Method" },
+      },
+      description: 'Sets focus on the button.'
+    },
+    'sgds-blur':{
+      table: { 
+        category: "Events",
+        type: { summary: "Event" },
+      },
+      description: 'Removes focus from the button.'
+    },
+    'sgds-focus':{
+      table: { 
+        category: "Events",
+        type: { summary: "Event" },
+      },
+      description: 'Sets focus on the button.'
+    }
+  }}
+/>
+
+export const Template = (args) =>
+  html`
+    <sgds-quantitytoggle
+     .count=${args.count}
+     .step=${args.step}
+     .quantityToggleClasses=${args.quantityToggleClasses}
+     .disabled=${args.disabled}
+     .size=${args.size}
+    ></sgds-quantitytoggle>
+  `;
+
+# SgdsFooter
+
+<Canvas>
+  <Story name="Basic">
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## API
+
+```jsx
+import { SgdsFooter, ColumnLinks } from "@govtechsg/sgds-web-component";
+```
+
+<ArgsTable story="Basic" />

package/stories/Radio.stories.mdx

@@ -0,0 +1,262 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { html } from "lit-html";
+import "../lib/Radio";
+
+<Meta
+  title='Components/Radio'
+  argTypes={{
+    radioId: {
+      control: "text",
+      description:
+        "Forwards value to id/for pair attribute of each of the SgdsRadio input. A unique id generated by default",
+      table: {
+        category: "props: SgdsRadio",
+        defaultValue: { summary: "" },
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    name: {
+      control: "text",
+      description: "The name assigned to the radio controls wrapper fieldset",
+      table: {
+        category: "props: SgdsRadioGroup",
+        defaultValue: { summary: "" },
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    defaultValue: {
+      name: "value",
+      control: "text",
+      description: "The selected value of the control",
+      table: {
+        category: "props: SgdsRadioGroup",
+        defaultValue: { summary: "" },
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disables the radio",
+      table: {
+        category: "props: SgdsRadio",
+        defaultValue: { summary: false },
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    invalid: {
+      control: "boolean",
+      description:
+        "toggles the invalid state to true and shows the invalid feedback",
+      table: {
+        category: "props: SgdsRadioGroup",
+        defaultValue: { summary: false },
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    invalidFeedback: {
+      control: "text",
+      description: "Sets a text to the invalid feedback div",
+      table: {
+        category: "props: SgdsRadioGroup",
+        defaultValue: { summary: "" },
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    required: {
+      defaultValue: "radioLabel",
+      control: "boolean",
+      description:
+        "specifies the radio input to be check before submitting the form.",
+      table: {
+        category: "props: SgdsRadioGroup",
+        defaultValue: { summary: false },
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    isInline: {
+      control: "boolean",
+      description: "Sets SgdsRadio elements to be horizontally align",
+      table: {
+        category: "props: SgdsRadio",
+        defaultValue: { summary: false },
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    radioValue: {
+      name: "value",
+      control: "text",
+      description: "The radio's value attribute.",
+      table: {
+        category: "props: SgdsRadio",
+        defaultValue: { summary: "" },
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    radioSlot: {
+      name: "default-radio",
+      control: "text",
+      defaultValue: "Option 1",
+      description:
+        "default slot for SgdsRadio element, for labelling SgdsRadio element",
+      table: {
+        category: "slot: SgdsRadio",
+      },
+    },
+    defaultRadioGroupSlot: {
+      name: "default-radioGroup",
+      control: "disabled",
+      defaultValue: "disabled",
+      description: "default slot for inserting SgdsRadio elements",
+      table: {
+        category: "slot: SgdsRadioGroup",
+      },
+    },
+    radioGroupSlot: {
+      name: "slot[name='label']",
+      defaultValue: "Select an option",
+      control: "text",
+      description: "label named slot for SgdsRadioGroup wrapper",
+      table: {
+        category: "slot: SgdsRadioGroup",
+      },
+    },
+    ariaLabel: {
+      defaultValue: "radioLabel",
+      control: "text",
+      description: "Aria-label attribute text",
+      table: {
+        category: "props: SgdsRadio",
+        defaultValue: { summary: "" },
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    event: {
+      name: "sgds-change",
+      description:
+        "emitted when there is a change in value in SgdsRadioGroup el",
+      table: {
+        category: "event: SgdsRadioGroup",
+      },
+    },
+    baseRadio: {
+      name: "base",
+      description: "SgdsRadio component's internal wrapper.",
+      table: {
+        category: "Css Parts: SgdsRadio",
+      },
+    },
+    controlRadio: {
+      name: "control",
+      description: "SgdsRadio component's radio control.",
+      table: {
+        category: "Css Parts: SgdsRadio",
+      },
+    },
+    labelRadio: {
+      name: "label",
+      description: "SgdsRadio component's radio label.",
+      table: {
+        category: "Css Parts: SgdsRadio",
+      },
+    },
+    baseRadioGroup: {
+      name: "base",
+      description: "SgdsRadioGroup component's internal wrapper.",
+      table: {
+        category: "Css Parts: SgdsRadioGroup",
+      },
+    },
+    controlRadioGroup: {
+      name: "control",
+      description: "SgdsRadioGroup component's radiogroup control.",
+      table: {
+        category: "Css Parts: SgdsRadioGroup",
+      },
+    },
+    labelRadioGroup: {
+      name: "label",
+      description: "SgdsRadioGroup component's radiogroup label.",
+      table: {
+        category: "Css Parts: SgdsRadioGroup",
+      },
+    },
+    invalidFeedbackRadioGroup: {
+      name: "invalidFeedback",
+      description: "SgdsRadioGroup component's radiogroup invalid feedback.",
+      table: {
+        category: "Css Parts: SgdsRadioGroup",
+      },
+    },
+  }}
+/>
+
+export const Template = ({
+  name,
+  defaultValue,
+  disabled,
+  isInline,
+  radioValue,
+  radioId,
+  radioSlot,
+  radioGroupSlot,
+  ariaLabel,
+  required,
+  invalid,
+  invalidFeedback,
+}) => {
+  return html`
+    <sgds-radiogroup
+      .name=${name}
+      .value=${defaultValue}
+      .required=${required}
+      .invalid=${invalid}
+      .invalidFeedback=${invalidFeedback}
+    >
+      <span slot="label">${radioGroupSlot}</span>
+      <sgds-radio
+        .value=${radioValue}
+        .disabled=${disabled}
+        .radioId=${radioId}
+        .ariaLabel=${ariaLabel}
+        .isInline=${isInline}
+        >${radioSlot}</sgds-radio
+      >
+      <sgds-radio value="2" .isInline=${isInline}>Option 2</sgds-radio>
+      <sgds-radio value="3" .isInline=${isInline}>Option 3</sgds-radio>
+    </sgds-radiogroup>
+  `;
+};
+
+# SgdsRadio
+
+<Canvas>
+  <Story name='Basic'>{Template.bind({})}</Story>
+</Canvas>
+
+## API
+
+```jsx
+import { SgdsRadioGroup, SgdsRadio } from "@govtechsg/sgds-web-component/Radio";
+```
+
+<ArgsTable story='Basic' />

package/stories/Sample.stories.js

@@ -0,0 +1,29 @@
+import { Story, Meta } from '@storybook/web-components';
+import '../lib/Button'
+import {html } from 'lit'
+import { state, property} from "lit/decorators.js";
+
+
+export default {
+    title: 'Components/Sample-js',
+    // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
+    argTypes: {
+      variant: { control: 'text' },
+      classes: { control: "text" },
+    },
+  };
+
+  const Template = ({variant, classes}) => {
+
+    return  html`
+    <button-element .variant=${variant} .classes=${classes}>
+      Blaze it
+    </button-element>
+    `;
+  }
+
+
+  export const Primary = Template.bind({})
+  Primary.args = {
+    variant : "secondary"
+  }

package/stories/Sample.stories.mdx

@@ -0,0 +1,33 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { html } from "lit-html";
+import { ButtonElement } from "../lib/Button";
+
+<Meta
+  title="Components/Sample-mdx"
+  argTypes={{
+    variant: { control: "text" },
+    classes: { control: "text" },
+  }}
+/>
+
+export const Template = (args) => {
+ return html`
+    <button-element .variant=${args.variant} .classes=${args.classes}>
+      Blaze it
+    </button-element>
+  `;
+}
+
+
+# Sample
+
+This is the sample file for MDX
+
+<Canvas>
+  <Story name="Basic" args={{ variant: "primary" }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Basic" />
+

package/stories/SideNav.stories.mdx

@@ -0,0 +1,245 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { html } from "lit-html";
+import "../lib/Sidenav";
+import { SgdsSidenavItem, SgdsSidenav } from "../lib/Sidenav";
+import { partDescription } from "./common";
+
+<Meta
+  title="Components/Sidenav"
+  argTypes={{
+    // SgdsSidenav
+    alwaysOpen: {
+      control: "boolean",
+      defaultValue: false,
+      description:
+        "Allow sidenav items to stay open when another item is opened",
+      table: {
+        category: "props: SgdsSidenav",
+        defaultValue: { summary: false },
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    default: {
+      description:
+        "default slot of SgdsSidenavItem. Pass in SideNavItem elements here",
+      table: {
+        category: "slot: SgdsSidenav",
+      },
+    },
+    //SgdsSidenavItem
+    active: {
+      control: "boolean",
+      description:
+        "when true, toggles the sgds-sidenav-item to open on first load and set the active stylings",
+      table: {
+        category: "props: SgdsSidenavItem",
+        defaultValue: { summary: false },
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    collapseId: {
+      control: "text",
+      description:
+        "Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own",
+      table: {
+        category: "props: SgdsSidenavItem",
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    buttonId: {
+      control: "text",
+      description:
+        "Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own",
+      table: {
+        category: "props: SgdsSidenavItem",
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    href: {
+      control: "text",
+      description:
+        "When defined, converts SgdsSidenavItem from a button element to an Anchor element",
+      table: {
+        defaultValue: { summary: "" },
+        category: "props: SgdsSidenavItem",
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    disabledSNI: {
+      name: "disabled",
+      control: "boolean",
+      description: "Disables the SgdsSidenavItem",
+      table: {
+        category: "props: SgdsSidenavItem",
+        defaultValue: { summary: "false" },
+      },
+    },
+    openItem: {
+      control: "disable",
+      description: "When invoked, opens the SgdsSidenavItem",
+      table: {
+        category: "methods: SgdsSidenavItem",
+        type: {
+          summary: "function",
+        },
+      },
+    },
+    closeItem: {
+      control: "disable",
+      description: "When invoked, closes the SgdsSidenavItem",
+      table: {
+        category: "methods: SgdsSidenavItem",
+        type: {
+          summary: "function",
+        },
+      },
+    },
+    defaultSNI: {
+      name: "default",
+      description: "default slot for SgdsSidenavLink element",
+      table: {
+        category: "slot: SgdsSidenavItem",
+      },
+    },
+    title: {
+      description:
+        "title slot for the content of SgdsSidenavItem's button / anchor element",
+      table: {
+        category: "slot: SgdsSidenavItem",
+      },
+    },
+    // SgdsSidenavLink
+    activeSNL: {
+      name: "active",
+      control: "boolean",
+      description: "When true, sets the active styling of SgdsSidenavLink",
+      table: { category: "props: SgdsSidenavLink" },
+    },
+    hrefSNL: {
+      name: "href",
+      control: "text",
+      description: "href link for SgdsSidenavLink",
+      table: { category: "props: SgdsSidenavLink" },
+    },
+    defaultSNL: {
+      name: "default",
+      description: "default slot for the title of SgdsSidenavLink",
+      table: {
+        category: "slot: SgdsSidenavLink",
+      },
+    },
+    disabledSNL: {
+      name: "disabled",
+      control: "boolean",
+      description: "Disables the SgdsSidenavLink",
+      table: {
+        category: "props: SgdsSidenavLink",
+        defaultValue: { summary: "false" },
+      },
+    },
+  }}
+/>
+
+export const Template = ({
+  alwaysOpen,
+  active,
+  href,
+  activeSNL,
+  hrefSNL,
+  collapseId,
+  buttonId,
+  disabledSNL,
+  disabledSNI,
+}) => {
+  return html`
+    <sgds-sidenav .alwaysOpen=${alwaysOpen}>
+      <sgds-sidenav-item
+        .active=${active}
+        .href=${href}
+        .collapseId=${collapseId}
+        .buttonId=${buttonId}
+        .disabled=${disabledSNI}
+      >
+        <span slot="title">
+          <sl-icon name="stack"></sl-icon> SideNav Item #1 (control by
+          Argstable)
+        </span>
+        <sgds-sidenav-link
+          .href=${hrefSNL}
+          .active=${activeSNL}
+          .disabled=${disabledSNL}
+          >sgds-sidenav-link (control by Argstable)</sgds-sidenav-link
+        >
+        <sgds-sidenav-link href="#">sgds-sidenav-link</sgds-sidenav-link>
+        <sgds-sidenav-link href="#">sgds-sidenav-link</sgds-sidenav-link>
+      </sgds-sidenav-item>
+      <sgds-sidenav-item>
+        <span slot="title">
+          <sl-icon name="stack"></sl-icon>SideNav Item #2</span
+        >
+        <sgds-sidenav-link href="#">sgds-sidenav-link</sgds-sidenav-link>
+        <sgds-sidenav-link href="#">sgds-sidenav-link</sgds-sidenav-link>
+        <sgds-sidenav-link href="#">sgds-sidenav-link</sgds-sidenav-link>
+      </sgds-sidenav-item>
+      <sgds-sidenav-item href="#">
+        <span slot="title">SideNav Item #3</span>
+      </sgds-sidenav-item>
+    </sgds-sidenav>
+  `;
+};
+
+# SgdsSidenav, SgdsSidenavItem, SgdsSgdsSidenavLink
+
+<Canvas>
+  <Story name="Basic">{Template.bind({})}</Story>
+</Canvas>
+
+_Example is using shoelace's icon. See [here](https://shoelace.style/components/icon)_
+
+## API
+
+```jsx
+import {
+  SgdsSidenav,
+  SgdsSidenavLink,
+  SgdsSidenavItem,
+} from "@govtechsg/sgds-web-component/Sidenav";
+```
+
+<ArgsTable story="Basic" />
+
+## SgdsSidenavItem methods
+
+`openItem()` and `closeItem()` are public methods exposed by SgdsSidenavItem component for user to customize the opening and closing of SgdsSidenavItems when required.
+
+```jsx
+// class method
+
+const SgdsSidenavItem = new SgdsSidenavItem();
+SgdsSidenavItem.openItem();
+SgdsSidenavItem.closeItem();
+
+//dom method
+
+const SgdsSidenavItemEl = document.querySelector(
+  "sgds-sidenav-item#specificId"
+);
+SgdsSidenavItemEl.openItem();
+SgdsSidenavItemEl.closeItem();
+```
+
+## CSS Custom Properties
+
+| Name                    | Description                                                                                 |
+| ----------------------- | ------------------------------------------------------------------------------------------- |
+| `--sidenav-theme-color` | Sets color of all text and left-border of sidenav. Default to sgds primary color (#5925DC). |