@govtechsg/sgds-web-component 0.0.10 → 0.0.11

package/stories/QuantityToggle.stories.mdx

@@ -1,97 +0,0 @@
-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

@@ -1,262 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,245 +0,0 @@
-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). |