@govtechsg/sgds-web-component 0.0.7 → 0.0.10

package/stories/Checkbox.stories.mdx

@@ -0,0 +1,196 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { html } from "lit-html";
+import "../lib/Checkbox";
+
+<Meta
+  title='Components/Checkbox'
+  //handles format: ['eventName', 'selector']
+  parameters={{
+    actions: {
+      handles: ["sgds-change", "sgds-checkbox"],
+    },
+  }}
+  argTypes={{
+    value: {
+      control: "text",
+      table: {
+        category: "props",
+        type: {
+          summary: "string",
+        },
+      },
+      description:
+        "Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name.",
+    },
+    checkboxId: {
+      control: "text",
+      description: "For label/input value pair",
+      table: {
+        category: "props",
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    name: {
+      control: "text",
+      table: {
+        category: "props",
+        type: {
+          summary: "string",
+        },
+      },
+      description:
+        "Name of the HTML form control. Submitted with the form as part of a name/value pair.",
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false,
+      description:
+        "Disables the checkbox",
+      table: {
+        category: "props",
+        defaultValue: { summary: false },
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    required: {
+      control: "boolean",
+      defaultValue: false,
+      description: "Makes the checkbox a required field. Only renders validation state ontouch or upon form submission ",
+      table: {
+        category: "props",
+        defaultValue: { summary: false },
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    checked: {
+      control: "boolean",
+      defaultValue: false,
+      description:
+        "Draws the checkbox in a checked state, which toggles input aria-checked to true",
+      table: {
+        category: "props",
+        defaultValue: { summary: false },
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    invalid: {
+      control: "boolean",
+      defaultValue: false,
+      description:
+        "Manually style the input as invalid.",
+      table: {
+        category: "props",
+        defaultValue: { summary: false },
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+     valid: {
+      control: "boolean",
+      defaultValue: false,
+      description:
+        "Manually style the input as valid.",
+      table: {
+        category: "props",
+        defaultValue: { summary: false },
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    defaultSlot: {
+      name: "default",
+      control: "text",
+      defaultValue: "Default text here",
+      description: "default slot for label element",
+      table: {
+        category: "slots",
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    feedbackSlot: {
+      control: "text",
+      defaultValue: "Feedback text here",
+      description: "feedback slot for invalid state",
+      table: {
+        category: "slots",
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    Event: {
+      name: "sgds-change",
+      control: "disable",
+      description:
+        "Emitted when checkbox is checked/unchecked. Refer to canvas mode to view event handler in action.",
+      table: {
+        category: "events",
+      },
+    },
+    base: {
+      name: "base",
+      description: "The component's internal wrapper div",
+      table: {
+        category: "CSS Parts",
+      },
+    },
+    control: {
+      name: "control",
+      description: "The checkbox control input",
+      table: {
+        category: "CSS Parts",
+      },
+    },
+    label: {
+      name: "label",
+      description: "The checkbox label.",
+      table: {
+        category: "CSS Parts",
+      },
+    },
+  }}
+/>
+
+export const Template = (args) => {
+  return html`
+    <sgds-checkbox
+      .name=${args.name}
+      ?disabled=${args.disabled}
+      value=${args.value}
+      ?required=${args.required}
+      .checked=${args.checked}
+      .invalid=${args.invalid}
+      .valid=${args.valid}
+      .checkboxId=${args.checkboxId}
+      >${args.defaultSlot}<span slot="feedback">${args.feedbackSlot}<span></sgds-checkbox
+    >
+  `;
+};
+
+# Checkbox
+
+## Basic
+
+<Canvas>
+  <Story name='Basic'>{Template.bind({})}</Story>
+</Canvas>
+
+## API
+
+```jsx
+import { SgdsCheckbox } from "@govtechsg/sgds-web-component/Checkbox";
+```
+
+<ArgsTable story='Basic' />

package/stories/Dropdown.stories.mdx

@@ -0,0 +1,152 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { html } from "lit-html";
+import "../lib/Dropdown";
+import { partDescription, dropdownElementProps } from "./common";
+
+<Meta
+  title="Components/Dropdown"
+  argTypes={{
+    ...dropdownElementProps("SgdsDropdown"),
+    default: {
+      description: "default slot for SgdsDropdownItem element",
+      table: {
+        category: "slot: SgdsDropdown",
+      },
+    },
+    menu: {
+      table: { category: "part: SgdsDropdown" },
+      description: partDescription,
+    },
+    showMenu: {
+      control: "disable",
+      description: "When invoked, opens the dropdown menu",
+      table: {
+        category: "methods: SgdsDropdown",
+        type: {
+          summary: "function",
+        },
+      },
+    },
+    hideMenu: {
+      control: "disable",
+      description: "When invoked, hides the dropdown menu",
+      table: {
+        category: "methods: SgdsDropdown",
+        type: {
+          summary: "function",
+        },
+      },
+    },
+    // sgds-dropdown-item
+    active: {
+      control: "boolean",
+      description: "when true, sets the active stylings of .dropdown-item",
+      table: {
+        category: "props: SgdsDropdownItem",
+        defaultValue: { summary: false },
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    href: {
+      control: "text",
+      description: "Href attribute for anchor element in SgdsDropdownItem",
+      table: {
+        defaultValue: { summary: "" },
+        category: "props: SgdsDropdownItem",
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    disabledDI: {
+      name: "disabled",
+      control: "boolean",
+      description: "Disables the dropdown item when true",
+      table: {
+        defaultValue: { summary: "false" },
+        category: "props: SgdsDropdownItem",
+        type: {
+          summary: "string",
+        },
+      },
+    },
+  }}
+/>
+
+export const Template = ({
+  noFlip,
+  menuAlignRight,
+  drop,
+  popperOpts,
+  togglerId,
+  togglerText,
+  variant,
+  active,
+  href,
+  disabledDI,
+  close,
+  menuIsOpen,
+  dropdownDisabled,
+}) => {
+  return html`
+    <sgds-dropdown
+      .togglerText=${togglerText}
+      .noFlip=${noFlip}
+      .drop=${drop}
+      .menuAlignRight=${menuAlignRight}
+      .popperOpts=${popperOpts}
+      .togglerId=${togglerId}
+      .variant=${variant}
+      .close=${close}
+      .menuIsOpen=${menuIsOpen}
+      .disabled=${dropdownDisabled}
+    >
+      <sgds-dropdown-item
+        .href=${href}
+        .active=${active}
+        .disabled=${disabledDI}
+        >item #1 (argsTable controlled)</sgds-dropdown-item
+      >
+      <sgds-dropdown-item href="https://google.com">item #2</sgds-dropdown-item>
+      <sgds-dropdown-item href="#" disabled>item #3</sgds-dropdown-item>
+    </sgds-dropdown>
+  `;
+};
+
+# SgdsDropdown, SgdsDropdownItem
+
+
+<Story
+  name="Basic"
+  args={{
+    togglerText: "Dropdown",
+    variant: "secondary",
+    href: "#",
+  }}
+>
+  {Template.bind({})}
+</Story>
+
+```jsx
+import {
+  SgdsDropdown,
+  SgdsDropdownItem,
+} from "@govtechsg/sgds-web-component/Dropdown";
+// SgdsDropdown uses SgdsButton under the hood
+import { SgdsButton } from "@govtechsg/sgds-web-component/Button"
+```
+
+<ArgsTable story="Basic" />
+
+
+```jsx
+<sgds-dropdown>
+  <sgds-dropdown-item>item #1 (argsTable controlled)</sgds-dropdown-item>
+  <sgds-dropdown-item href="https://google.com">item #2</sgds-dropdown-item>
+  <sgds-dropdown-item href="#" disabled>
+    item #3
+  </sgds-dropdown-item>
+</sgds-dropdown>
+``` 

package/stories/Footer.stories.mdx

@@ -0,0 +1,261 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { html } from "lit-html";
+import  "../lib/Footer";
+import { partDescription } from "./common";
+
+<Meta
+  title="Components/Footer"
+  argTypes={{
+    title: {
+      control: "text",
+      description: "Sets title of SgdsFooter",
+      table: { category: "props" },
+    },
+    description: {
+      control: "text",
+      description: "Sets description of SgdsFooter",
+      table: { category: "props" },
+    },
+    links: {
+      control: "object",
+      description: "Array of type `ColumnLinks`",
+      table: {
+        defaultValue: "[]",
+        category: "props",
+        type: {
+          summary: `
+    interface ColumnLinks {
+        title: string;
+        links : Links[]
+    }
+    interface Links {
+        href: string;
+        label: string;
+    }
+    `,
+        },
+      },
+    },
+    lastUpdatedDate: {
+      control: "text",
+      description: "String date for last updated date",
+      table: { category: "props" },
+    },
+    contactHref: {
+      control: "text",
+      description: "href link for contacts",
+      table: { category: "props" },
+    },
+    feedbackHref: {
+      control: "text",
+      description: "href link for feedback",
+      table: { category: "props" },
+    },
+    vulnerabilityHref: {
+      control: "text",
+      description: "href link for vulnerability",
+      table: { category: "props" },
+    },
+    privacyHref: {
+      control: "text",
+      description: "href link for privacy",
+      table: { category: "props" },
+    },
+    termsOfUseHref: {
+      control: "text",
+      description: "href link for terms of use",
+      table: { category: "props" },
+    },
+    "footer-top": {
+      table: { category: "part" },
+      description: partDescription,
+    },
+    "footer-bottom": {
+      table: { category: "part" },
+      description: partDescription,
+    },
+  }}
+/>
+
+export const Template = ({
+  title,
+  description,
+  links,
+  lastUpdatedDate,
+  contactHref,
+  feedbackHref,
+  vulnerabilityHref,
+  privacyHref,
+  termsOfUseHref,
+}) =>
+  html`
+    <sgds-footer
+      .title=${title}
+      .description=${description}
+      .lastUpdatedDate=${lastUpdatedDate}
+      .contactHref=${contactHref}
+      .feedbackHref=${feedbackHref}
+      .vulnerabilityHref=${vulnerabilityHref}
+      .privacyHref=${privacyHref}
+      .termsOfUseHref=${termsOfUseHref}
+      .links=${links}
+    >
+    </sgds-footer>
+  `;
+
+# SgdsFooter
+
+<Canvas>
+  <Story
+    name="Basic"
+    args={{
+      title: "Singapore Government Design System",
+      description:
+        "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum illo delectus laborum libero id ratione quibusdam tempora assumenda quas, pariatur cum minus, aliquid molestiae et nisi dolorem vitae molestias! Voluptate commodi aliquid iusto sequi sit eligendi, quod numquam nihil consectetur eaque error earum laudantium! Temporibus accusamus pariatur quod totam quia.",
+      lastUpdatedDate: "01 Sep 2020",
+      contactHref: "https://form.gov.sg/",
+      feedbackHref: "https://form.gov.sg/",
+      vulnerabilityHref: "https://www.tech.gov.sg/report_vulnerability",
+      privacyHref: "https://www.designsystem.tech.gov.sg/privacy/",
+      termsOfUseHref: "https://www.designsystem.tech.gov.sg/terms-of-use/",
+      links: [
+        {
+          title: "Column 1",
+          links: [
+            {
+              href: "#1",
+              label: "About Us",
+            },
+            {
+              href: "#2",
+              label: "This is a super long link",
+            },
+            {
+              href: "#3",
+              label: "Test",
+            },
+            {
+              href: "#4",
+              label: "Test",
+            },
+          ],
+        },
+        {
+          title: "Column 2",
+          links: [
+            {
+              href: "#1",
+              label: "About Us",
+            },
+            {
+              href: "#2",
+              label: "This is a super long link",
+            },
+            {
+              href: "#3",
+              label: "Test",
+            },
+            {
+              href: "#4",
+              label: "Test",
+            },
+          ],
+        },
+        {
+          title: "Column 3",
+          links: [
+            {
+              href: "#1",
+              label: "About Us",
+            },
+            {
+              href: "#2",
+              label: "This is a super long link",
+            },
+            {
+              href: "#3",
+              label: "Test",
+            },
+            {
+              href: "#4",
+              label: "Test",
+            },
+          ],
+        },
+        {
+          title: "Column 4",
+          links: [
+            {
+              href: "#1",
+              label: "About Us",
+            },
+            {
+              href: "#2",
+              label: "This is a super long link",
+            },
+            {
+              href: "#3",
+              label: "Test",
+            },
+            {
+              href: "#4",
+              label: "Test",
+            },
+          ],
+        },
+        {
+          title: "Column 5",
+          links: [
+            {
+              href: "#1",
+              label: "About Us",
+            },
+            {
+              href: "#2",
+              label: "This is a super long link",
+            },
+            {
+              href: "#3",
+              label: "Test",
+            },
+            {
+              href: "#4",
+              label: "Test",
+            },
+          ],
+        },
+        {
+          title: "Column 6",
+          links: [
+            {
+              href: "#1",
+              label: "About Us",
+            },
+            {
+              href: "#2",
+              label: "This is a super long link",
+            },
+            {
+              href: "#3",
+              label: "Test",
+            },
+            {
+              href: "#4",
+              label: "Test",
+            },
+          ],
+        },
+      ],
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## API
+
+```jsx
+import { SgdsFooter, ColumnLinks } from "@govtechsg/sgds-web-component";
+```
+
+<ArgsTable story="Basic" />