@govtechsg/sgds-web-component 0.0.10 → 0.0.12

package/lib/utils/card-element.d.ts

@@ -1,11 +0,0 @@
-import SgdsElement from "./sgds-element";
-export type Variant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light" | string;
-export type Color = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "dark" | "light" | "white" | "muted";
-export declare class CardElement extends SgdsElement {
-    borderColor?: Variant;
-    /** The bg's variant. */
-    bgColor?: Variant;
-    /** The text's variant. */
-    textColor?: Color;
-    disabled: boolean;
-}

package/mocks/dropdown.d.ts

@@ -1,4 +0,0 @@
-import { DropdownElement } from "../src/utils/dropdown-element";
-export declare class MockDropdown extends DropdownElement {
-    render(): import("lit-html").TemplateResult<1>;
-}

package/mocks/dropdown.ts

@@ -1,27 +0,0 @@
-import { html } from "lit";
-import { customElement } from "lit/decorators.js";
-import { ref } from "lit/directives/ref.js";
-import { DropdownElement } from "../src/utils/dropdown-element";
-
-@customElement("mock-dropdown")
-export class MockDropdown extends DropdownElement {
-  render() {
-    return html`
-      <div>
-        <button
-          variant="outline-${this.variant}"
-          ?disabled=${this.disabled}
-          aria-expanded="${this.menuIsOpen}"
-          ${ref(this.myDropdown)}
-          @click=${() => this._onClickButton()}
-          id=${this.togglerId}
-        >
-          Mock Dropdown
-        </button>
-        <ul class="dropdown-menu" role="menu" part="menu">
-          <slot @click=${this._handleSelectSlot}></slot>
-        </ul>
-      </div>
-    `;
-  }
-}

package/mocks/link.d.ts

@@ -1,3 +0,0 @@
-import LinkElement from "../src/utils/link-element";
-export declare class MockLink extends LinkElement {
-}

package/mocks/link.ts

@@ -1,6 +0,0 @@
-import { customElement } from "lit/decorators.js";
-import LinkElement from "../src/utils/link-element";
-
-@customElement("mock-link")
-export class MockLink extends LinkElement {
-}

package/rollup.config.js

@@ -1,73 +0,0 @@
-import typescript from "rollup-plugin-typescript2";
-import resolve from "@rollup/plugin-node-resolve";
-import postcss from "rollup-plugin-postcss";
-import litcss from "rollup-plugin-postcss-lit";
-const packageJson = require("./package.json");
-import { getFolders } from './scripts/buildUtils';
-import generatePackageJson from 'rollup-plugin-generate-package-json';
-import replace from '@rollup/plugin-replace'; 
-
-const plugins = [
-  resolve({
-    browser: true,
-  }),
-  replace({
-    'process.env.NODE_ENV': JSON.stringify("production"),
-    preventAssignment: true
-  }),
-  postcss({
-    minimize: false,
-    inject: false,
-  }),
-  litcss(),
-  typescript({
-    useTsconfigDeclarationDir: true,
-  }),
-]
-const subfolderPlugins = (folderName) => [
-  ...plugins,
-  generatePackageJson({
-    baseContents: {
-      name: `${packageJson.name}/${folderName}`,
-      private: true,
-      main: '../umd/index.js',
-      module: './index.js',
-      types: './index.d.ts',
-    },
-  }),
-];
-const folderBuilds = getFolders('./src').map((folder) => {
-  return {
-    input: `src/${folder}/index.ts`,
-    output: [
-      {
-      file: `lib/${folder}/index.js`,
-      sourcemap: true,
-      exports: 'named',
-      format: 'esm',
-      }
-    ],
-    plugins: subfolderPlugins(folder),
-  };
-});
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: packageJson.module,
-        format: "esm",
-        sourcemap: true,
-      },
-      {
-        file: packageJson.main,
-        format: "umd",
-        sourcemap: true,
-        name: "index"
-      },
-    ],
-    plugins
-  },
-  ...folderBuilds
-];

package/rollup.test.config.js

@@ -1,42 +0,0 @@
-import typescript from "rollup-plugin-typescript2";
-import resolve from "@rollup/plugin-node-resolve";
-import postcss from "rollup-plugin-postcss";
-import litcss from "rollup-plugin-postcss-lit";
-import path from "path";
-import replace from '@rollup/plugin-replace'; 
-const packageJson = require("./package.json");
-const fs = require('fs');
-
-export const getFiles = (entry, extensions = [], excludeExtensions = []) => {
-    const files = fs.readdirSync(entry);
-    const filePaths =  files.map(fileName => path.join(entry, fileName))
-    return filePaths
-  };
-
-export default [
-  {
-    input: getFiles('./test'),
-    output: [
-      {
-        dir: "test-outdir",
-        format: 'es'
-      },
-    ],
-    plugins: [
-      resolve({
-        browser: true,
-      }),
-      replace({
-        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
-      }),
-      typescript({
-        tsconfig: './tsconfig.test.json'
-      }),
-      postcss({                     // process .scss files
-        minimize: false,
-        inject: false,
-      }),
-      litcss(),                     // process adoptedStylesheets for lit 
-    ],
-  },
-];

package/scripts/buildUtils.js

@@ -1,30 +0,0 @@
-const fs = require('fs');
-export const getFolders = (entry) => {
-   const dirs = fs.readdirSync(entry)
-   const dirsWithoutIndex = dirs.filter(name => name !== 'index.ts').filter(name => name !== 'utils')
-   return dirsWithoutIndex
-}
-
-export const getFiles = (entry, extensions = [], excludeExtensions = []) => {
-  let fileNames = [];
-  const dirs = fs.readdirSync(entry);
-  dirs.forEach((dir) => {
-    const path = `${entry}/${dir}`;
-   
-    if (fs.lstatSync(path).isDirectory()) {
-      fileNames = [
-        ...fileNames,
-        ...getFiles(path, extensions, excludeExtensions),
-      ];
-
-      return;
-    }
-
-    if (!excludeExtensions.some((exclude) => dir.endsWith(exclude))
-      && extensions.some((ext) => dir.endsWith(ext))
-    ) {
-      fileNames.push(path);
-    }
-  });
-  return fileNames;
-};

package/scripts/frankBuild.js

@@ -1,49 +0,0 @@
-/* eslint-disable no-console */
-const { resolve, join, basename } = require('path');
-const { readFile, writeFile, copy } = require('fs-extra');
-const packagePath = process.cwd();
-const distPath = join(packagePath, './lib');
-
-const writeJson = (targetPath, obj) =>
-  writeFile(targetPath, JSON.stringify(obj, null, 2), 'utf8');
-
-async function createPackageFile() {
-  const packageData = await readFile(
-    resolve(packagePath, './package.json'),
-    'utf8'
-  );
-  const { scripts, devDependencies, ...packageOthers } =
-    JSON.parse(packageData);
-  const newPackageData = {
-    ...packageOthers,
-    private: false,
-    typings: './index.d.ts',
-    main: './umd/index.js',
-    module: './index.js',
-  };
-
-  const targetPath = resolve(distPath, './package.json');
-
-  await writeJson(targetPath, newPackageData);
-  console.log(`Created package.json in ${targetPath}`);
-}
-
-async function includeFileInBuild(file) {
-  const sourcePath = resolve(packagePath, file);
-  const targetPath = resolve(distPath, basename(file));
-  await copy(sourcePath, targetPath);
-  console.log(`Copied ${sourcePath} to ${targetPath}`);
-}
-
-async function run() {
-  try {
-    await createPackageFile();
-    await includeFileInBuild('./README.md');
-    // await includeFileInBuild('../../LICENSE');
-  } catch (err) {
-    console.error(err);
-    process.exit(1);
-  }
-}
-
-run();

package/src/Button/index.ts

@@ -1 +0,0 @@
-export { SgdsButton } from "./sgds-button";

package/src/Button/sgds-button.scss

@@ -1,28 +0,0 @@
-
-@import '../utils/base.scss';
-@import "~@govtechsg/sgds/sass/buttons"; 
-
-:host {
-    display: inline-block;
-}
-
-.btn-icon{
-  background: transparent;
-  border: 0;
-  &:hover{
-    background: transparent;
-  }
-}
-:host(.button-group_button-first){
-  .btn{
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-}
-
-:host(.button-group_button-last){
-  .btn{
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-}

package/src/Button/sgds-button.ts

@@ -1,153 +0,0 @@
-import { customElement, property, state, query} from "lit/decorators.js";
-import { html, literal } from 'lit/static-html.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import {classMap} from 'lit/directives/class-map.js';
-import { FormSubmitController } from "../utils/form";
-import SgdsElement from "../utils/sgds-element";
-import styles from "./sgds-button.scss";
-
-export type ButtonVariant = 
-"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link" | "icon" |
-"outline-primary" | "outline-secondary" | "outline-success" | "outline-danger" | "outline-warning" | "outline-info" | "outline-light" | "outline-dark"
-
-@customElement("sgds-button")
-export class SgdsButton extends SgdsElement {
-  static styles = styles;
-
-  @query('.btn') button: HTMLButtonElement | HTMLLinkElement;
-
-  private readonly formSubmitController = new FormSubmitController(this, {
-    form: (input: HTMLInputElement) => {
-      // Buttons support a form attribute that points to an arbitrary form, so if this attribute it set we need to query
-      // the form from the same root using its id
-      if (input.hasAttribute('form')) {
-        const doc = input.getRootNode() as Document | ShadowRoot;
-        const formId = input.getAttribute('form')!;
-        return doc.getElementById(formId) as HTMLFormElement;
-      }
-
-      // Fall back to the closest containing form
-      return input.closest('form');
-    }
-  });
-
-  @state() private hasFocus = false;
-
-  /** The button's variant. */
-  @property({ reflect: true }) variant: ButtonVariant = "primary";
-  
-  @property({ reflect: true }) buttonClasses? : string;
-
-  /** Button sizes */
-  @property({ reflect: true }) size : 'sm' | 'lg' ;
-
-  /** Button active state */
-  @property({ type: Boolean, reflect: true }) active = false ;
-
-  /** Button disabled state */
-  @property({ type: Boolean, reflect: true }) disabled = false ;
-
-  @property() type: 'button' | 'submit' | 'reset' = 'button' ;
-
-  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
-  @property() href?: string;
-
-  /** Tells the browser where to open the link. Only used when `href` is set. */
-  @property() target?: '_blank' | '_parent' | '_self' | '_top';
-
-  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
-  @property({ reflect: true }) download?: string;
-
-  /**
-   * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
-   * value of this attribute must be an id of a form in the same document or shadow root as the button.
-   */
-   @property() form: string;
-
-   /** Used to override the form owner's `action` attribute. */
-   @property({ attribute: 'formaction' }) formAction: string;
- 
-   /** Used to override the form owner's `method` attribute.  */
-   @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';
- 
-   /** Used to override the form owner's `novalidate` attribute. */
-   @property({ attribute: 'formnovalidate', type: Boolean }) formNoValidate: boolean;
- 
-   /** Used to override the form owner's `target` attribute. */
-   @property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
-
-  /** Sets focus on the button. */
-  focus(options?: FocusOptions) {
-    this.button.focus(options);
-  }
-
-  /** Simulates a click on the button. */
-  click() {
-    this.button.click();
-  }
-
-  /** Removes focus from the button. */
-  blur() {
-    this.button.blur();
-  }
-
-  handleBlur() {
-    this.hasFocus = false;
-    this.emit('sgds-blur');
-  }
-
-  handleFocus() {
-    this.hasFocus = true;
-    this.emit('sgds-focus');
-  }
-
-  handleClick(event: MouseEvent) {
-    if (this.disabled) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-
-    if (this.type === 'submit') {
-      this.formSubmitController.submit(this);
-    }
-
-    if (this.type === 'reset') {
-      this.formSubmitController.reset(this);
-    }
-  }
-
-  render() {
-    const isLink = this.href;
-    const tag = isLink ? literal`a` : literal`button`;
-    return html`
-      <${tag}
-        class="sgds btn ${classMap(
-          {
-            'disabled': isLink && this.disabled,
-            'active': this.active, 
-            [`btn-${this.variant}`]: this.variant,
-            [`btn-${this.size}`]: this.size,
-            [`${this.buttonClasses}`]: this.buttonClasses
-          }
-        )}"
-        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
-        type=${ifDefined(isLink ? undefined : this.type)}
-        href=${ifDefined(isLink ? this.href : undefined)}
-        target=${ifDefined(isLink ? this.target : undefined)}
-        download=${ifDefined(isLink ? this.download : undefined)}
-        rel=${ifDefined(isLink && this.target === "_blank" ? 'noreferrer noopener' : undefined)}
-        role=${ifDefined(isLink ? 'button': undefined )}
-        aria-disabled=${this.disabled ? 'true' : 'false'}
-        tabindex=${this.disabled ? '-1' : '0'}
-        @click=${this.handleClick}
-        @focus=${this.handleFocus}
-        @blur=${this.handleBlur}
-      >
-          <slot></slot>
-      </${tag}>
-    `;
-  }
-}
-
-export default SgdsButton;

package/src/Card/index.ts

@@ -1 +0,0 @@
-export { SgdsActionCard } from "./sgds-action-card";

package/src/Card/sgds-action-card.scss

@@ -1,27 +0,0 @@
-@import "../utils/base.scss";
-@import "~@govtechsg/sgds/sass/card/";
-
-:host {
-  .sgds {
-    &.card {
-      &[variant*="card-action"] {
-        .card-body {
-          sl-icon {
-            font-size: 1.5rem;
-            margin-right: 1rem;
-          }
-        }
-      }
-    }
-    @each $color, $value in $theme-colors {
-      &.text-#{$color} {
-        color: $value !important;
-      }
-    }
-    @each $color, $value in $theme-colors {
-      &.bg-#{$color} {
-        background-color: $value !important;
-      }
-    }
-  }
-}

package/src/Card/sgds-action-card.ts

@@ -1,115 +0,0 @@
-import { customElement, property, state, query } from "lit/decorators.js";
-import { html, literal } from "lit/static-html.js";
-import { classMap } from "lit/directives/class-map.js";
-import styles from "./sgds-action-card.scss";
-import { CardElement } from "../utils/card-element";
-import { ref, createRef, Ref } from "lit/directives/ref.js";
-
-export type CardVariant = "card-action" | "card-action-quantity-toggle";
-
-export type TypeVariant = "checkbox" | "radio";
-
-@customElement("sgds-action-card")
-export class SgdsActionCard extends CardElement {
-  static styles = styles;
-
-  // @query("sgds-checkbox") // Define the query
-  // inputEl!: HTMLInputElement; // Declare the prop
-
-  inputRef: Ref<HTMLInputElement> = createRef();
-
-  @property({ type: String, reflect: true }) type?: TypeVariant = "checkbox";
-
-  /** Use on actionable cards like SelectableCard and Quantity Toggle Card' */
-  @property({ reflect: true }) variant?: CardVariant = "card-action";
-
-  /** The card's subtitle iconName. */
-  @property({ reflect: true }) iconName?: string;
-
-  /** The input's id. */
-  @property({ reflect: true }) inputId?: string;
-
-  @property({ reflect: true, type: Boolean })
-  active = false;
-
-  // Declare the click event listener
-  onInputChange() {
-    this.inputRef.value.click();
-    if (this.inputRef.value.checked && (!this.inputRef.value.disabled)) this.active = true;
-    else if (!this.inputRef.value.checked) {
-      this.active = false;
-    }
-  }
-
-  handleKeyDown(event: KeyboardEvent) {
-    const hasModifier =
-      event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
-    if (event.key === "Enter" && !hasModifier) {
-      this.onInputChange();
-    }
-  }
-  // handleChange(event: string){
-  //   this.checked = this.inputRef.value.checked;
-  //   this.emit(event);
-  // }
-
-  render() {
-    const checkbox = html`<sgds-checkbox
-      ${ref(this.inputRef)}
-      ?disabled=${this.disabled}
-      checkboxId=${this.inputId}
-      @click=${this.onInputChange}
-      @keydown=${this.handleKeyDown}
-    ></sgds-checkbox>`;
-
-    const radio = html`<sgds-radio
-      ${ref(this.inputRef)}
-      ?disabled=${this.disabled}
-      radioId=${this.inputId}
-      @click=${this.onInputChange}
-      @keydown=${this.handleKeyDown}
-    ></sgds-radio>`;
-
-    const icon = html`<sl-icon name="${this.iconName}"></sl-icon>`;
-
-    return html`
-      <div
-      tabindex=${this.disabled ? "-1" : "0"}
-      @click=${this.onInputChange}
-     @keydown=${this.handleKeyDown}
-     
-        variant="card-action"
-        class="sgds card
-        ${classMap({
-          [`text-${this.textColor}`]: this.textColor,
-          [`bg-${this.bgColor}`]: this.bgColor,
-          [`border-${this.borderColor}`]: this.borderColor,
-          ["is-active"]: this.active,
-        })}
-        "
-      >
-        <div class="card-body">
-          <h6 class="text-muted card-subtitle">
-            <div>
-              ${this.iconName == undefined ? undefined : icon}
-              <slot name="card-subtitle"></slot></slot>
-            </div>
-            <div class="card-input">
-            ${
-              this.type == "checkbox" && this.variant == "card-action"
-                ? checkbox
-                : this.type == "radio" && this.variant == "card-action"
-                ? radio
-                : undefined
-            }
-            </div>
-          </h6>
-          <h5 class="card-title"><slot name="card-title"></slot></h5>
-          <p class="card-text"><slot name="card-text"></slot></p>
-        </div>
-      </div>
-    `;
-  }
-}
-
-export default SgdsActionCard;

package/src/Checkbox/index.ts

@@ -1 +0,0 @@
-export {SgdsCheckbox} from './sgds-checkbox';

package/src/Checkbox/sgds-checkbox.scss

@@ -1,4 +0,0 @@
-@import "../utils/base.scss";
-@import "~@govtechsg/sgds/sass/forms/form-check";
-@import "~@govtechsg/sgds/sass/forms/validation";
-