@govtechsg/sgds-web-component 0.0.7 → 0.0.10

package/stories/common.js

@@ -0,0 +1,185 @@
+export const partDescription = `Name of the part attribute of element in shadow tree. Use ::part CSS pseudo-element to modify the styles of the targeted element`;
+
+export const dropdownElementProps = (componentName, disableControl = false) => {
+  const argsObj = {
+    drop: {
+      control: "select",
+      options: ["down", "up", "left", "right"],
+      defaultValue: "down",
+      description: "The drop position of menu relative to the toggle button",
+      table: {
+        category: `props: ${componentName}`,
+        defaultValue: { summary: "down" },
+        type: {
+          summary: "DropDirection",
+        },
+      },
+    },
+    menuAlignRight: {
+      control: "boolean",
+      description:
+        "When true, aligns right edge of menu with right edge of button ",
+      table: {
+        defaultValue: { summary: "false" },
+        category: `props: ${componentName}`,
+        type: { summary: "boolean" },
+      },
+    },
+    menuIsOpen: {
+      control: "disable",
+      description: "When true, dropdown menu shows on first load",
+      table: {
+        defaultValue: { summary: "false" },
+        category: `props: ${componentName}`,
+        type: { summary: "boolean" },
+      },
+    },
+    noFlip: {
+      control: "boolean",
+      description: "Controls auto-flipping of menu",
+      table: {
+        category: `props: ${componentName}`,
+        type: {
+          defaultValue: { summary: "false" },
+          summary: "boolean",
+        },
+      },
+    },
+    popperOpts: {
+      control: "object",
+      description:
+        "Additional configuration to pass to Popper.js. See https://popper.js.org/ for config opts",
+      table: {
+        category: `props: ${componentName}`,
+        defaultValue: { summary: "{}" },
+        type: {
+          summary: "object",
+        },
+      },
+    },
+    togglerId: {
+      control: "text",
+      description:
+        "Forwards value to id attribute of toggle button of Dropdown. An unique id generated by default",
+      table: {
+        category: `props: ${componentName}`,
+      },
+    },
+    togglerText: {
+      control: "text",
+      description: "Sets the text content of Dropdown button ",
+      table: {
+        defaultValue: { summary: "" },
+        category: `props: ${componentName}`,
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    variant: {
+      control: "select",
+      description: "Sets color of Dropdown button",
+      options: [
+        "primary",
+        "secondary",
+        "success",
+        "danger",
+        "warning",
+        "info",
+        "light",
+        "dark",
+      ],
+      table: {
+        category: `props: ${componentName}`,
+        defaultValue: { summary: "secondary" },
+        type: {
+          summary: "DropdownButtonVariant",
+        },
+      },
+    },
+    close: {
+      control: "select",
+      options: ["default", "outside", "inside"],
+      description:
+        "Controls the close behaviour of dropdown menu. By default menu auto-closes when SgdsDropdownItem or area outside dropdown is clicked",
+      table: {
+        defaultValue: { summary: "default" },
+        category: `props: ${componentName}`,
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    dropdownDisabled: {
+      name: "disabled",
+      control: "boolean",
+      description: "Disables the dropdown toggle",
+      table: {
+        defaultValue: { summary: "false" },
+        category: `props: ${componentName}`,
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    "sgds-select": {
+      description:
+        "Emitted event from SgdsDropdown element when a the slot item is selected/clicked",
+      table: {
+        category: `Event: ${componentName}`,
+      },
+    },
+    "sgds-show": {
+      description: "Emitted event when show instance is called ",
+      table: {
+        category: `Event: ${componentName}`,
+      },
+    },
+    "sgds-shown": {
+      description:
+        "Emitted event when dropdown has been made visible to the user and CSS transitions have completed",
+      table: {
+        category: `Event: ${componentName}`,
+      },
+    },
+    "sgds-hide": {
+      description: "Emitted event when hide instance is called",
+      table: {
+        category: `Event: ${componentName}`,
+      },
+    },
+    "sgds-hidden": {
+      description:
+        "Emitted event when the dropdown has finished being hidden from the user and CSS transitions have completed",
+      table: {
+        category: `Event: ${componentName}`,
+      },
+    },
+    showMenu: {
+      control: "disable",
+      description: "When invoked, opens the dropdown menu",
+      table: {
+        category: `Method: ${componentName}`,
+        type: {
+          summary: "function",
+        },
+      },
+    },
+    hideMenu: {
+      control: "disable",
+      description: "When invoked, hides the dropdown menu",
+      table: {
+        category: `Method: ${componentName}`,
+        type: {
+          summary: "function",
+        },
+      },
+    },
+  };
+  if (disableControl) {
+    for (const [key, value] of Object.entries(argsObj)) {
+      value.control = "disable";
+    }
+    return argsObj
+  } else return argsObj
+};

package/stories/textarea.stories.mdx

@@ -0,0 +1,253 @@
+import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
+import { html } from "lit-html";
+import "../lib/Textarea";
+
+<Meta
+  title="Components/Textarea"
+  argTypes={{
+    name:{
+      control: "text",
+      table:{ 
+        category: "props",
+        type: { summary: "string" },
+      },
+      description: "The textarea's name attribute"
+    },
+    label:{
+      control: "text",
+      defaultValue: 'Label',
+      table:{ 
+        category: "props",
+        type: { summary: "string" },
+      },
+      description: "The textarea's label"
+    },
+    textareaId:{
+      control: 'text',
+      defaultValue: 'textarea',
+      table:{ 
+        category: "props",
+        type: { summary: "string" },
+      },
+      description: "The textarea's unique id"
+    },
+    textareaClasses: { 
+      control: "text",
+      table:{ 
+        category: "props",
+        type: { summary: "string" },
+      },
+      description: 'Can be used to insert any classes such as `mt-2`'
+    },
+    value:{
+      control: 'text',
+      defaultValue: "",
+      table:{ 
+        category: "props",
+        type: { summary: "string" },
+      },
+      description:"The textarea's value attribute."
+    },
+    rows:{
+      control: 'number',
+      defaultValue: 4,
+      table:{ 
+        category: "props",
+        type: { summary: "number" },
+      },
+      description:"The number of rows to display by default."
+    },
+    placeholder:{
+      control: 'text',
+      defaultValue: "this is a placeholder text",
+      table:{ 
+        category: "props",
+        type: { summary: "string" },
+      },
+      description:"The textarea's placeholder text."
+    },
+    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',
+      defaultValue: "0",
+      table:{ 
+        category: "props",
+        type: { summary: "string" },
+      },
+      description: 'Sets the minimum length of the input'
+    },
+    maxlength:{
+      control:'text',
+      defaultValue: "100",
+      table:{ 
+        category: "props",
+        type: { summary: "string" },
+      },
+      description: 'Sets the maximum length of the input'
+    },
+    spellcheck:{
+      control:'boolean',
+      defaultValue: false,
+      table:{ 
+        category: "props",
+        type: { summary: "boolean" },
+      },
+      description: 'Enables spell checking on the textarea'
+    },
+    autocorrect:{
+      control:'select',
+      options: [
+        'on',
+        'off',
+      ],
+      defaultValue: "off",
+      table:{ 
+        category: "props",
+        type: { summary: "string" },
+      },
+      description: "The textarea's autocorrect attribute."
+    },
+    resize:{
+      control:'select',
+      options: [
+        'none',
+        'vertical',
+      ],
+      defaultValue: "none",
+      table:{ 
+        category: "props",
+        type: { summary: "string" },
+      },
+      description: "Controls how the textarea can be resized."
+    },
+    '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 textarea is in focus"
+    },
+    'sgds-blur':{
+      table:{ 
+        category: "Events",
+        type: { summary: "Event" },
+      },
+      description: "Emitted when textarea is not focus"
+    },
+    select:{
+      table:{ 
+        category: "Methods",
+        type: { summary: "Method" },
+      },
+      description: "Select textarea content"
+    },
+    focus:{
+      table:{ 
+        category: "Methods",
+        type: { summary: "Method" },
+      },
+      description: "Sets the focus of textarea. <br>Parameters (options: [FocusOptions](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#parameters))",
+    },
+  }}
+/>
+
+export const Template = (args) =>
+  html`
+    <sgds-textarea 
+      .label=${args.label} 
+      .name=${args.name}
+      .id=${args.textareaId}
+      .textareaClasses=${args.textareaClasses}
+      value=${args.value}
+      rows=${args.rows}
+      .invalidFeedback=${args.invalidFeedback}
+      .placeholder=${args.placeholder}
+      ?autofocus=${args.autofocus}
+      ?disabled=${args.disabled}
+      ?required=${args.required}
+      ?readonly=${args.readonly}
+      minlength=${args.minlength}
+      maxlength=${args.maxlength}
+      ?spellcheck=${args.spellcheck}
+      ?autocorrect=${args.autocorrect}
+      resize=${args.resize}
+    >
+    </sgds-textarea>
+  `;
+
+# SgdsInput
+
+Text inputs allow your users to enter letters, numbers and symbols on a single line.
+
+<Canvas>
+  <Story name="Basic" args={{ name: "textarea" }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## API
+
+```jsx
+import { SgdsATextArea } from "@govtechsg/sgds-web-component/Textarea";
+```
+
+<ArgsTable story="Basic" />
+

package/test/button.element.test.ts

@@ -0,0 +1,185 @@
+import { SgdsButton } from '../src/Button/sgds-button'
+import '../src/Button/sgds-button';
+import {fixture, assert, expect, aTimeout, waitUntil} from '@open-wc/testing';
+import {html} from 'lit';
+import sinon  from 'sinon';
+
+describe('sgds-button', () => {
+  it('is defined', () => {
+      const el = document.createElement('sgds-button');
+      assert.instanceOf(el, SgdsButton)
+  })
+  it('renders with default values', async () => {
+    const el = await fixture(html`<sgds-button></sgds-button>`);
+    assert.shadowDom.equal(
+      el,
+      `<button class="btn btn-primary sgds" type="button" aria-disabled="false" tabindex="0">
+        <slot></slot>
+      </button>
+    `
+    );
+  })
+
+  it('should convert from button tag to anchor tag if href is defined', async () => {
+    const el = await fixture(html`<sgds-button href="#"></sgds-button>`);
+    const anchorTag = el.shadowRoot?.querySelector("a");
+    expect(anchorTag).to.have.attribute('href','#');
+    expect(anchorTag).to.have.attribute('role','button');
+    expect(anchorTag).not.to.have.attribute('type','button');
+    expect(el.shadowRoot?.querySelector("button")).not.to.exist;
+  })
+
+  it('should convert to anchor tag if download and href attributes are defined, button tag', async () => {
+    const el = await fixture(html`<sgds-button download="logo.svg" href="folder/subfolder/logo.svg"></sgds-button>`);
+    const anchorTag = el.shadowRoot?.querySelector("a");
+    expect(anchorTag).to.have.attribute('download','logo.svg');
+    expect(el.shadowRoot?.querySelector("button")).not.to.exist;
+  })
+
+  it('anchor tag should contain rel="noreferrer noopener" attribute if href and target="_blank" attributes are defined', async () => {
+    const el = await fixture(html`<sgds-button href="#" target="_blank"></sgds-button>`);
+    const anchorTag = el.shadowRoot?.querySelector("a");
+    expect(anchorTag).to.have.attribute('rel','noreferrer noopener');
+    expect(el.shadowRoot?.querySelector("button")).not.to.exist;
+  })
+
+  it('should contain disabled if is an anchor tag and disabled attributes are defined', async () => {
+    const el = await fixture(html`<sgds-button href="#" disabled></sgds-button>`);
+    const anchorTag = el.shadowRoot?.querySelector("a");
+    expect(anchorTag).to.have.class("disabled");
+    expect(anchorTag).to.have.attribute('aria-disabled','true');
+    expect(anchorTag).to.have.attribute('tabindex','-1');
+    expect(anchorTag).not.to.have.attribute('disabled','');
+    expect(el.shadowRoot?.querySelector("button")).not.to.exist;
+  })
+
+  it('should emit a click event when calling click()', async () => {
+    const el = await fixture<SgdsButton>(html` <sgds-button></sgds-button> `);
+    const clickHandler = sinon.spy();
+
+    el.addEventListener('click', clickHandler);
+    el.click();
+    await waitUntil(() => clickHandler.calledOnce);
+
+    expect(clickHandler).to.have.been.calledOnce;
+  });
+
+});
+
+
+
+describe('when submitting a form', () => {
+  it('should submit when the button is inside the form', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form action="" method="post">
+        <sgds-button type="submit"></sgds-button>
+      </form>
+    `);
+    const button = form.querySelector<SgdsButton>('sgds-button')!;
+    const handleSubmit = sinon.spy((event: SubmitEvent) => event.preventDefault());
+
+    form.addEventListener('submit', handleSubmit);
+    button.click();
+    expect(handleSubmit).to.have.been.calledOnce;
+  });
+
+  it('should submit when the button is outside the form and has a form attribute', async () => {
+    const el = await fixture(html`
+      <div>
+        <form id="a" action="" method="post"></form>
+        <sgds-button type="submit" form="a">Submit</sgds-button>
+      </div>
+    `);
+    const form = el.querySelector<HTMLFormElement>('form')!;
+    const button = el.querySelector<SgdsButton>('sgds-button')!;
+    const handleSubmit = sinon.spy((event: SubmitEvent) => event.preventDefault());
+
+    form.addEventListener('submit', handleSubmit);
+    button.click();
+
+    expect(handleSubmit).to.have.been.calledOnce;
+  });
+
+  it('should override form attributes when formaction, formmethod, formnovalidate, and formtarget are used inside a form', async () => {
+    const form = await fixture<HTMLFormElement>(html`
+      <form id="a" action="foo" method="post" target="_self">
+        <sgds-button type="submit" form="a" formaction="bar" formmethod="get" formtarget="_blank" formnovalidate>
+          Submit
+        </sgds-button>
+      </form>
+    `);
+    const button = form.querySelector<SgdsButton>('sgds-button')!;
+    const handleSubmit = sinon.spy((event: SubmitEvent) => {
+      submitter = event.submitter as HTMLButtonElement;
+      event.preventDefault();
+    });
+    let submitter!: HTMLButtonElement;
+
+    form.addEventListener('submit', handleSubmit);
+    button.click();
+
+    expect(handleSubmit).to.have.been.calledOnce;
+    expect(submitter.formAction.endsWith('/bar')).to.be.true;
+    expect(submitter.formMethod).to.equal('get');
+    expect(submitter.formTarget).to.equal('_blank');
+    expect(submitter.formNoValidate).to.be.true;
+  });
+
+  it('should override form attributes when formaction, formmethod, formnovalidate, and formtarget are used outside a form', async () => {
+    const el = await fixture(html`
+      <div>
+        <form id="a" action="foo" method="post" target="_self"></form>
+        <sgds-button type="submit" form="a" formaction="bar" formmethod="get" formtarget="_blank" formnovalidate>
+          Submit
+        </sgds-button>
+      </div>
+    `);
+    const form = el.querySelector<HTMLFormElement>('form')!;
+    const button = el.querySelector<SgdsButton>('sgds-button')!;
+    const handleSubmit = sinon.spy((event: SubmitEvent) => {
+      submitter = event.submitter as HTMLButtonElement;
+      event.preventDefault();
+    });
+    let submitter!: HTMLButtonElement;
+
+    form.addEventListener('submit', handleSubmit);
+    button.click();
+
+    expect(handleSubmit).to.have.been.calledOnce;
+    expect(submitter.formAction.endsWith('/bar')).to.be.true;
+    expect(submitter.formMethod).to.equal('get');
+    expect(submitter.formTarget).to.equal('_blank');
+    expect(submitter.formNoValidate).to.be.true;
+  });
+});
+
+describe('when using methods', () => {
+  it('should emit sgds-focus and sgds-blur when the button is focused and blurred', async () => {
+    const el = await fixture<SgdsButton>(html` <sgds-button>Button</sgds-button> `);
+    const focusHandler = sinon.spy();
+    const blurHandler = sinon.spy();
+
+    el.addEventListener('sgds-focus', focusHandler);
+    el.addEventListener('sgds-blur', blurHandler);
+
+    el.focus();
+    await waitUntil(() => focusHandler.calledOnce);
+
+    el.blur();
+    await waitUntil(() => blurHandler.calledOnce);
+
+    expect(focusHandler).to.have.been.calledOnce;
+    expect(blurHandler).to.have.been.calledOnce;
+  });
+
+  it('should emit a click event when calling click()', async () => {
+    const el = await fixture<SgdsButton>(html` <sgds-button></sgds-button> `);
+    const clickHandler = sinon.spy();
+
+    el.addEventListener('click', clickHandler);
+    el.click();
+    await waitUntil(() => clickHandler.calledOnce);
+
+    expect(clickHandler).to.have.been.calledOnce;
+  });
+});