@govtechsg/sgds-web-component 0.0.10 → 0.0.12

package/stories/Input.stories.mdx

@@ -1,236 +0,0 @@
-import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
-import { html } from "lit-html";
-import "../lib/Input";
-
-<Meta
-  title="Components/Input"
-  argTypes={{
-    type: {
-      control: 'select',
-      options: [
-        'text',
-        'date',
-        'email',
-        'number',
-        'password',
-        'url',
-      ],
-      defaultValue: 'text',
-      table: { 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description: "The input's type"
-    },
-    name:{
-      control: "text",
-      table:{ 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description: "The input's name attribute"
-    },
-    label:{
-      control: "text",
-      defaultValue: 'Label',
-      table:{ 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description: "The input's label"
-    },
-    hintText:{
-      control: "text",
-      defaultValue: 'This is a hint text',
-      table:{ 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description: "The input's hint text below the label"
-    },
-    inputId:{
-      control: 'text',
-      table:{ 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description: "The input's unique id"
-    },
-    inputClasses: { 
-      control: "text",
-      table:{ 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description: 'Can be used to insert any classes such as `mt-2`'
-    },
-    iconName:{
-      control: "text",
-      defaultValue: "badge-8k-fill",
-      table:{ 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description:"Optional. The name of the [bootstrap's icon](https://icons.getbootstrap.com/)"
-    },
-    value:{
-      control: 'text',
-      defaultValue: "",
-      table:{ 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description:"The input's value attribute."
-    },
-    placeholder:{
-      control: 'text',
-      defaultValue: "this is a placeholder text",
-      table:{ 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description:"The input's placeholder text."
-    },
-    pattern:{
-      control: 'text',
-      defaultValue: "[A-Za-z]{5}",
-      table:{ 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description:'A pattern to validate input against.',
-    },
-    invalidFeedback:{
-      control:'text',
-      defaultValue: "Please key in 5 letters",
-      table:{ 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description: 'Feedback text for error state when validated'
-    },
-    autofocus:{
-      control:'boolean',
-      defaultValue: false,
-      table:{ 
-        category: "props",
-        type: { summary: "boolean" },
-      },
-      description: 'Autofocus the input'
-    },
-    disabled:{
-      control:'boolean',
-      defaultValue: false,
-      table:{ 
-        category: "props",
-        type: { summary: "boolean" },
-      },
-      description: 'Disables the input.'
-    },
-    required:{
-      control:'boolean',
-      defaultValue: false,
-      table:{ 
-        category: "props",
-        type: { summary: "boolean" },
-      },
-      description: 'Makes the input a required field.'
-    },
-    readonly:{
-      control:'boolean',
-      defaultValue: false,
-      table:{ 
-        category: "props",
-        type: { summary: "boolean" },
-      },
-      description: 'Makes the input a read only field'
-    },
-    minlength:{
-      control:'text',
-      table:{ 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description: 'Sets the minimum length of the input'
-    },
-    maxlength:{
-      control:'text',
-      table:{ 
-        category: "props",
-        type: { summary: "string" },
-      },
-      description: 'Sets the maximum length of the input'
-    },
-    'sgds-change':{
-      table:{ 
-        category: "Events",
-        type: { summary: "Event" },
-      },
-      description: "Emitted when an alteration to the control's value is committed by the user"
-    },
-    'sgds-input':{
-      table:{ 
-        category: "Events",
-        type: { summary: "Event" },
-      },
-      description: 'Emitted when the control receives input and its value changes.'
-    },
-    'sgds-focus':{
-      table:{ 
-        category: "Events",
-        type: { summary: "Event" },
-      },
-      description: "Emitted when input is in focus"
-    },
-    'sgds-blur':{
-      table:{ 
-        category: "Events",
-        type: { summary: "Event" },
-      },
-      description: "Emitted when input is not focus"
-    },
-  }}
-/>
-
-export const Template = (args) =>
-  html`
-    <sgds-input 
-      .type=${args.type} 
-      .label=${args.label} 
-      .hintText=${args.hintText} 
-      .name=${args.name}
-      .id=${args.inputID}
-      .inputClasses=${args.inputClasses}
-      .value=${args.value}
-      .pattern=${args.pattern} 
-      .invalidFeedback=${args.invalidFeedback}
-      .iconName=${args.iconName}
-      .placeholder=${args.placeholder}
-      ?autofocus=${args.autofocus}
-      ?disabled=${args.disabled}
-      ?required=${args.required}
-      ?readonly=${args.readonly}
-      ?minlength=${args.minlength}
-      ?maxlength=${args.maxlength}
-    >
-    </sgds-input>
-  `;
-
-# SgdsInput
-
-Text inputs allow your users to enter letters, numbers and symbols on a single line.
-
-<Canvas>
-  <Story name="Basic" args={{ type: "text" }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## API
-
-```jsx
-import { SgdsInput } from "@govtechsg/sgds-web-component";
-```
-
-<ArgsTable story="Basic" />
-

package/stories/MainNav.stories.mdx

@@ -1,169 +0,0 @@
-import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
-import { html } from "lit-html";
-import "../lib/Mainnav";
-import { partDescription, dropdownElementProps } from "./common";
-
-<Meta
-  title="Components/Mainnav"
-  argTypes={{
-    expand: {
-      control: "select",
-      options: ["always", "never", "sm", "md", "lg", "xl", "xxl"],
-      defaultValue: "lg",
-      description:
-        "The breakpoint, below which, the Navbar will collapse. When `always` the Navbar will always be expanded regardless of screen size. When `never`, the Navbar will always be collapsed",
-      table: {
-        category: "props: SgdsMainnav",
-        defaultValue: { summary: "lg" },
-        type: {
-          summary: "MainnavExpandSize",
-        },
-      },
-    },
-    brandHref: {
-      control: "text",
-      defaultValue: "",
-      description: "The href link for brand logo",
-      table: {
-        defaultValue: { summary: "" },
-        category: "props: SgdsMainnav",
-        type: { summary: "string" },
-      },
-    },
-    collapseId: {
-      control: "text",
-      description:
-        "Forwards to id attribute of div.collapse and aria-controls attribute of toggler button in SgdsMainnav. By default, SgdsMainnav auto-generates a unique id. Override the default id by specifiying your own",
-      table: {
-        category: "props: SgdsMainnav",
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    // SgdsMainnav slots
-    default: {
-      description:
-        "default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here",
-      table: {
-        category: "slot: SgdsMainnav",
-      },
-    },
-    brand: {
-      description: "Brand slot of SgdsMainnav. Pass in brand logo or img here",
-      table: {
-        category: "slot: SgdsMainnav",
-      },
-    },
-    "non-collapsible": {
-      description: "Elements in this slot will not be collapsed",
-      table: {
-        category: "slot: SgdsMainnav",
-      },
-    },
-    end: {
-      description:
-        "Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu",
-      table: {
-        category: "slot: SgdsMainnav",
-      },
-    },
-    // SgdsMainnavItem props
-    active: {
-      control: "boolean",
-      description: "when true, sets the active stylings of .nav-link",
-      table: {
-        category: "props: SgdsMainnavItem",
-        defaultValue: { summary: false },
-        type: {
-          summary: "boolean",
-        },
-      },
-    },
-    href: {
-      control: "text",
-      description: "Href attribute for anchor element in SgdsMainnavItem",
-      table: {
-        defaultValue: { summary: "" },
-        category: "props: SgdsMainnavItem",
-        type: {
-          summary: "string",
-        },
-      },
-    },
-    disabledMNI: {
-       name: "disabled",
-      control: "boolean",
-      description: "Disables the SgdsMainnavItem",
-      table: { category: "props: SgdsMainnavItem" },
-    },
-    defaultMNI: {
-      name: "default",
-      description: "default slot for SgdsMainnavItem element",
-      table: {
-        category: "slot: SgdsMainnavItem",
-      },
-    },
-    ...dropdownElementProps('SgdsMainnavDropdown', true)
-  }}
-/>
-
-export const Template = ({ expand, brandHref, collapseId, active, href, disabledMNI }) => {
-  return html`
-    <sgds-mainnav
-      .expand=${expand}
-      .brandHref=${brandHref}
-      .collapseId=${collapseId}
-    >
-      <img
-        width="130"
-        src="https://www.designsystem.tech.gov.sg/assets/img/logo-sgds.svg"
-        slot="brand"
-      />
-      <sgds-mainnav-item .active=${active} .href=${href} .disabled=${disabledMNI}
-        >ArgsTable Controlled
-      </sgds-mainnav-item>
-      <sgds-mainnav-dropdown togglerText="Dropdown">
-         <sgds-dropdown-item href="https://google.com">Item 1</sgds-dropdown-item>
-         <sgds-dropdown-item href="#">Item 2</sgds-dropdown-item>
-         <sgds-dropdown-item href="#">Item 3</sgds-dropdown-item>
-      </sgds-mainnav-dropdown>
-      <sgds-mainnav-item href="#">About</sgds-mainnav-item>
-      <sgds-mainnav-item href="#" slot="end">Contact Us</sgds-mainnav-item>
-      <sgds-button slot="end">Login</sgds-button>
-      <dev-console-widget
-        slot="non-collapsible"
-        iconColor="black"
-        iconWidth="28px"
-        iconHeight="28px"
-      ></dev-console-widget>
-    </sgds-mainnav>
-  `;
-};
-
-# SgdsMainnav
-
-<Canvas>
-  <Story name="Basic" height="500px">
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## API
-
-```jsx
-import {
-  SgdsMainnav,
-  SgdsMainnavItem,
-  SgdsMainnavDropdown,
-  MainNavExpandSize,
-} from "@govtechsg/sgds-web-component/MainNav";
-```
-
-<ArgsTable story="Basic" />
-
-## CSS Custom Properties
-
-| Name                         | Description                                                                                                           |
-| ---------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| `--mainnav-item-theme-color` | Sets color of hovered/active text and bottom-border of`<sgds-mainnav-item/>` Default to sgds primary color (#5925DC). |

package/stories/Masthead.stories.mdx

@@ -1,112 +0,0 @@
-import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
-import { html } from "lit-html";
-import "../lib/Masthead";
-
-<Meta
-  title="Components/Masthead"
-  argTypes={{
-    fluid: {
-      control: { type: 'boolean' },
-      description: "Sets the container width:100% to all breakpoints",
-    }
-  }}
-/>
-
-export const Template = ({
-  fluid
-}) =>
-  html`
-    <sgds-masthead .fluid=${fluid}></sgds-masthead>
-  `;
-
-# SgdsMasthead
-
-All .gov.sg digital services shall adopt The Official Government Banner for every page in the digital service and be placed at the top of the page.
-
-<Canvas>
-  <Story name="Basic" args={{ fluid : 'true' }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## API
-
-```jsx
-import { SgdsMasthead } from "@govtechsg/sgds-web-component/Masthead";
-```
-<ArgsTable story="Basic" />
-
-## CSS Custom Properties
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Description</th>
-      <th>Default Value</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <code>--masthead-font-family</code>
-      </td>
-      <td>Sets font family for masthead</td>
-      <td>system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--masthead-text-color</code>
-      </td>
-      <td>
-        Sets overall text color 
-      </td>
-      <td>hsl(0, 0%, 28%)</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--masthead-link-color</code>
-      </td>
-      <td>
-        Sets link color for  "How to identify?" and "Trusted Site"
-      </td>
-      <td>hsl(222, 63%, 50%)</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--masthead-link-color-hover</code>
-      </td>
-      <td>
-        Sets link hover color for  "How to identify?" and "Trusted Site"
-      </td>
-      <td>hsl(221, 64%, 55%)</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--masthead-mobile-padding-x</code>
-      </td>
-      <td>
-        Sets the padding left and right for viewport width 1024px and below
-      </td>
-      <td>0.75rem</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--masthead-mobile-font-size</code>
-      </td>
-      <td>
-        Sets the font size for viewport width 1024px and below
-      </td>
-      <td>0.6875rem</td>
-    </tr>
-    <tr>
-      <td>
-        <code>--masthead-fluid-padding-x</code>
-      </td>
-      <td>
-        Sets the container-fluid padding left and right for viewport width 1024px and above
-      </td>
-      <td>0.75rem</td>
-    </tr>
-  </tbody>
-</table>

package/stories/Modal.stories.mdx

@@ -1,103 +0,0 @@
-import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
-import { html } from "lit-html";
-import "../lib/Modal";
-import "../lib/Button";
-
-<Meta
-  title="Components/Modal"
-  argTypes={{
-    open: { 
-      control: "boolean" ,
-      table: { category: "props" },
-      description: 'Indicates whether or not the modal is open. You can use this in lieu of the show/hide methods.',
-      defaultValue: false,
-    },
-    title: { 
-      control: "text",
-      table: { category: "props" },
-      description: "The modal's title as displayed in the header",
-      defaultValue: 'This is a title',
-    },
-    titleIcon: { 
-      control: "text" ,
-      table: { category: "props" },
-      description: "The modal's icon as displayed in the header",
-      defaultValue: 'stack',
-    },
-    'sgds-show': { 
-      table: { category: "Events" },
-      description: "Emitted when the modal opens.",
-    },
-    'sgds-after-show': { 
-      table: { category: "Events" },
-      description: "	Emitted after the modal opens and all animations are complete.",
-    },
-    'sgds-hide': { 
-      table: { category: "Events" },
-      description: "Emitted when the modal closes.",
-    },
-    'sgds-after-hide': { 
-      table: { category: "Events" },
-      description: "Emitted after the modal closes and all animations are complete.",
-    },
-    'hide': { 
-      table: { category: "Methods" },
-      description: "Hides the modal.",
-    },
-    'show': { 
-      table: { category: "Methods" },
-      description: "Shows the modal.",
-    },
-    default: { 
-      control: "text" ,
-      table: { category: "Slots" },
-      description: "The modal's content.",
-      defaultValue: 'This is the modal body',
-    },
-    'label ': { 
-      table: { category: "Slots" },
-      description: "The modal's label.",
-    },
-    'footer': { 
-      table: { category: "Slots" },
-      description: "The modal's footer.",
-    },
-    '--sgds-modal-width': { 
-      control: "text" ,
-      table: { category: "CSS Custom Properties" },
-      description: "The preferred width of the modal. Note that the modal will shrink to accommodate smaller screens.",
-    }
-  }}
-/>
-
-export const Template = (args) =>
-  html`
-    <sgds-modal
-      .open=${args.open}
-      .title=${args.title}
-      .titleIcon=${args.titleIcon}
-      .centeredAlignVariant=${args.centeredAlignVariant}
-    >
-      ${args.default}
-      <sgds-button slot="footer" variant="link" class="close-modal">Close</sgds-button>
-      <sgds-button slot="footer" variant="primary" type="submit" form="formA" >Submit</sgds-button>
-    </sgds-modal>
-  `;
-
-# SgdsModal
-
-The modal component inform users about a specific task and may contain critical information which users then have to make a decision. E.g Accepting the T&Cs during signup
-
-<Canvas>
-  <Story name="Basic" args={{}}>
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-## API
-
-```jsx
-import { SgdsModal } from "@govtechsg/sgds-web-component";
-```
-
-<ArgsTable story="Basic" />