@govtechsg/sgds-web-component 0.0.10 → 0.0.11

package/package.json

@@ -1,22 +1,10 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "",
-  "main": "lib/umd/index.js",
-  "module": "lib/index.js",
-  "typings": "lib/index.d.ts",
-  "scripts": {
-    "build": "rm -rf lib && rollup --config rollup.config.js",
-    "post:build": "node ./scripts/frankBuild.js",
-    "build:lib": "npm run build && npm run post:build",
-    "build:watch": "npm run build -- --watch",
-    "dev": "npm run build:watch & npm run serve",
-    "serve": "wds --watch --open",
-    "test": "rm -rf test-outdir && rollup --config rollup.test.config.js && web-test-runner",
-    "storybook": "npm run build && start-storybook -p 6006",
-    "build-storybook": "rm -rf lib && npm run build && build-storybook",
-    "prepare": "husky install"
-  },
+  "main": "./umd/index.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts",
   "author": "",
   "license": "MIT",
   "dependencies": {
@@ -24,55 +12,10 @@
     "bootstrap": "^5.1.3",
     "lit": "^2.3.1"
   },
-  "devDependencies": {
-    "@babel/core": "^7.18.13",
-    "@commitlint/cli": "^17.1.2",
-    "@commitlint/config-conventional": "^17.1.0",
-    "@esm-bundle/chai": "^4.3.4-fix.0",
-    "@open-wc/storybook": "^0.2.8",
-    "@open-wc/testing": "^3.0.0-next.5",
-    "@playwright/test": "^1.27.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@rollup/plugin-replace": "^5.0.0",
-    "@shoelace-style/shoelace": "^2.0.0-beta.83",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-controls": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/preset-scss": "^1.0.3",
-    "@storybook/web-components": "^6.5.16",
-    "@types/bootstrap": "^5.2.4",
-    "@web/dev-server": "^0.1.17",
-    "@web/dev-server-esbuild": "^0.3.2",
-    "@web/dev-server-rollup": "^0.3.19",
-    "@web/dev-server-storybook": "^0.5.4",
-    "@web/test-runner": "^0.14.0",
-    "@web/test-runner-commands": "^0.6.5",
-    "@web/test-runner-playwright": "^0.8.10",
-    "autoprefixer": "^10.4.8",
-    "babel-loader": "^8.2.5",
-    "cz-conventional-changelog": "^3.3.0",
-    "esbuild-sass-plugin": "^2.3.2",
-    "husky": "^8.0.0",
-    "postcss": "^8.2.13",
-    "rollup": "^2.46.0",
-    "rollup-plugin-generate-package-json": "^3.2.0",
-    "rollup-plugin-postcss": "^4.0.0",
-    "rollup-plugin-postcss-lit": "^1.0.1",
-    "rollup-plugin-typescript2": "^0.33.0",
-    "sass": "^1.54.4",
-    "sass-loader": "^13.0.2",
-    "sinon": "^14.0.0",
-    "storybook-addon-web-components-knobs": "^0.3.20",
-    "tslib": "^2.4.0",
-    "typescript": "^4.2.4"
-  },
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
-  }
-}
+  },
+  "private": false
+}

package/.github/workflows/publish-latest.yml

@@ -1,22 +0,0 @@
-name: Publish Latest
-
-on:
-  push:
-    tags:
-      - 'v[0-9]+.[0-9]+.[0-9]+'
-
-jobs:
-  publish:    
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 14
-          registry-url: 'https://registry.npmjs.org'
-      - run: npm ci
-      - run: npm run test
-      - run: npm run build:lib
-      - run: npm publish --tag latest ./lib --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/publish-pr.yml

@@ -1,28 +0,0 @@
-name: Publish Pre-releases
-
-on:
-  push:
-    tags:
-      - 'v[0-9]+.[0-9]+.[0-9]+-alpha.[0-9]+'
-      - 'v[0-9]+.[0-9]+.[0-9]+-beta.[0-9]+'
-
-jobs:
-  publish:    
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Set Tag env
-        run: echo "NPM_TAG=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
-      - uses: actions/setup-node@v1
-        with:
-          node-version: 14
-          registry-url: 'https://registry.npmjs.org'
-      - run: npm ci
-      - run: npm run test
-      - run: npm run build:lib
-      - run: npm publish --tag alpha ./lib
-        if: contains(env.NPM_TAG, 'alpha')
-      - run: npm publish --tag beta ./lib
-        if: contains(env.NPM_TAG, 'beta')
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx --no -- commitlint --edit

package/.husky/prepare-commit-msg

@@ -1,8 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-  if [ -z "${2-}" ]; then
-    # By default git hooks are not interactive. exec < /dev/tty allows a users terminal to interact with commitizen.
-    exec < /dev/tty && npx cz --hook || true
-  fi
-

package/.storybook/main.js

@@ -1,16 +0,0 @@
-module.exports = {
-  "stories": [
-    "../stories/**/*.stories.mdx",
-    // "../stories/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    '@storybook/preset-scss',
-    '@storybook/addon-controls'
-  ],
-  "framework": "@storybook/web-components",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
-  },
-}

package/.storybook/preview-head.html

@@ -1,11 +0,0 @@
-<link href='https://designsystem.gov.sg/css/sgds.css' rel='stylesheet' type='text/css' />
-<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel='stylesheet'
-    type='text/css' />
-<script type="module"
-    src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.83/dist/shoelace.js"></script>
-    <script
-    type="module"
-    id="dev-console-gateway"
-    src="https://assets.developer.tech.gov.sg/bundled-scripts/dev-console-gateway.bundle.js"
-  ></script>
-  <script src="../lib/index.js"></script>

package/.storybook/preview.js

@@ -1,9 +0,0 @@
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}

package/.vscode/settings.json

@@ -1,7 +0,0 @@
-{
-    "workbench.colorCustomizations": {
-        "activityBar.background": "#203220",
-        "titleBar.activeBackground": "#2C452D",
-        "titleBar.activeForeground": "#FAFCFA"
-    }
-}

package/CONTRIBUTING.md

@@ -1,56 +0,0 @@
-# Contributing Guide
-[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
-
-Thank you so much for contributing to @govtechsg/sgds-web-component. Please read this guideline before starting your development works. 
-
-## Development 
-
-This project uses Lit 2.0 + SASS + TS and bundled with rollup 
-
-### Folder Structure
-
-Build new components in src folder. Create folder name according to the component you are building.
-SCSS files specific to the component should be stored here. Create an entry point (index.ts) file per folder to export the components/classes and its types/interface 
-
-Place common/reusable functions and global stylings in utils folder 
-
-### Filename 
-Custom elements must be in kebab case. Prefix the files with *-element.ts
-
-## Testing 
-
-Unit test is written in typescript, compiled to javascript by rollup, dumped into test-outdir. The resulting test-outdir/**.test.js files are run by web-test-runner. Configuration wise, rollup has plugins to convert sass files to css, but web-test-runner does not have great support for sass files atm. Hence, this approach was taken. See configurations in rollup.test.config.js and web-test-runner.config.mjs.
-
-All test needs to pass in order for aws amplify deployment build to pass
-
-### Run single test file
-
-To run single test file, run the output javascript test file instead of the typescript file
-```npm run test test-outdir/button-element.test.js```
-
-## Storybook 
-
-Write documentation in storybook in MDX format. Include API argstable, import instructions, at least a basic example and custom css properties table (if present)
-
-## Publishing (for admin only)
-Library publication is performed in workflow by github actions. When ready for publishing, perform the following steps
-
-##### Bump version 
-1) run ```npm version <major|minor|path> ```
-    or for alpha releases
-    ``` npm version <version-name> ```
-    **version number should observe SEMVER
-    **this step will auto-generate a git tag on your local
-2) ```git push ``` the changes
-
-##### Generate Changelog 
-3) run ```cz changelog``` to update CHANGELOG.md file (ensure that you have set up [cz-cli](https://github.com/commitizen/cz-cli) globally)
-**`cz changelog` updates based on your local git tags
-4) Push the changes 
-    
-##### Push git tag
-4) run `git tag` to check the newly generated git tag on local
-5) ```npm push origin <newly-created-tag> ```
-** this triggers gh action workflow to publish the library to npm 
-##### Create a release
-6) Manually create a release on github 

package/LICENSE

@@ -1,20 +0,0 @@
-Copyright (c) 2021 Elliott Marquez and others
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/amplify.yml

@@ -1,22 +0,0 @@
-version: 1
-frontend:
-  phases:
-    preBuild:
-      commands:
-        - rm -rf node_modules && npm ci
-    build:
-      commands:
-        - npm run test && npm run build-storybook
-  artifacts:
-    baseDirectory: /storybook-static
-    files:
-      - '**/*'
-# test:
-#   phases:
-#     test:
-#       commands:
-#         - npm run test
-#   artifacts:
-#     baseDirectory: coverage
-#     configFilePath: '**/coverage-final.json'
-#     files: '**/*'

package/commitlint.config.js

@@ -1 +0,0 @@
-module.exports = {extends: ['@commitlint/config-conventional']}

package/coverage/lcov-report/base.css

@@ -1,224 +0,0 @@
-body, html {
-  margin:0; padding: 0;
-  height: 100%;
-}
-body {
-    font-family: Helvetica Neue, Helvetica, Arial;
-    font-size: 14px;
-    color:#333;
-}
-.small { font-size: 12px; }
-*, *:after, *:before {
-  -webkit-box-sizing:border-box;
-     -moz-box-sizing:border-box;
-          box-sizing:border-box;
-  }
-h1 { font-size: 20px; margin: 0;}
-h2 { font-size: 14px; }
-pre {
-    font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    margin: 0;
-    padding: 0;
-    -moz-tab-size: 2;
-    -o-tab-size:  2;
-    tab-size: 2;
-}
-a { color:#0074D9; text-decoration:none; }
-a:hover { text-decoration:underline; }
-.strong { font-weight: bold; }
-.space-top1 { padding: 10px 0 0 0; }
-.pad2y { padding: 20px 0; }
-.pad1y { padding: 10px 0; }
-.pad2x { padding: 0 20px; }
-.pad2 { padding: 20px; }
-.pad1 { padding: 10px; }
-.space-left2 { padding-left:55px; }
-.space-right2 { padding-right:20px; }
-.center { text-align:center; }
-.clearfix { display:block; }
-.clearfix:after {
-  content:'';
-  display:block;
-  height:0;
-  clear:both;
-  visibility:hidden;
-  }
-.fl { float: left; }
-@media only screen and (max-width:640px) {
-  .col3 { width:100%; max-width:100%; }
-  .hide-mobile { display:none!important; }
-}
-
-.quiet {
-  color: #7f7f7f;
-  color: rgba(0,0,0,0.5);
-}
-.quiet a { opacity: 0.7; }
-
-.fraction {
-  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-  font-size: 10px;
-  color: #555;
-  background: #E8E8E8;
-  padding: 4px 5px;
-  border-radius: 3px;
-  vertical-align: middle;
-}
-
-div.path a:link, div.path a:visited { color: #333; }
-table.coverage {
-  border-collapse: collapse;
-  margin: 10px 0 0 0;
-  padding: 0;
-}
-
-table.coverage td {
-  margin: 0;
-  padding: 0;
-  vertical-align: top;
-}
-table.coverage td.line-count {
-    text-align: right;
-    padding: 0 5px 0 20px;
-}
-table.coverage td.line-coverage {
-    text-align: right;
-    padding-right: 10px;
-    min-width:20px;
-}
-
-table.coverage td span.cline-any {
-    display: inline-block;
-    padding: 0 5px;
-    width: 100%;
-}
-.missing-if-branch {
-    display: inline-block;
-    margin-right: 5px;
-    border-radius: 3px;
-    position: relative;
-    padding: 0 4px;
-    background: #333;
-    color: yellow;
-}
-
-.skip-if-branch {
-    display: none;
-    margin-right: 10px;
-    position: relative;
-    padding: 0 4px;
-    background: #ccc;
-    color: white;
-}
-.missing-if-branch .typ, .skip-if-branch .typ {
-    color: inherit !important;
-}
-.coverage-summary {
-  border-collapse: collapse;
-  width: 100%;
-}
-.coverage-summary tr { border-bottom: 1px solid #bbb; }
-.keyline-all { border: 1px solid #ddd; }
-.coverage-summary td, .coverage-summary th { padding: 10px; }
-.coverage-summary tbody { border: 1px solid #bbb; }
-.coverage-summary td { border-right: 1px solid #bbb; }
-.coverage-summary td:last-child { border-right: none; }
-.coverage-summary th {
-  text-align: left;
-  font-weight: normal;
-  white-space: nowrap;
-}
-.coverage-summary th.file { border-right: none !important; }
-.coverage-summary th.pct { }
-.coverage-summary th.pic,
-.coverage-summary th.abs,
-.coverage-summary td.pct,
-.coverage-summary td.abs { text-align: right; }
-.coverage-summary td.file { white-space: nowrap;  }
-.coverage-summary td.pic { min-width: 120px !important;  }
-.coverage-summary tfoot td { }
-
-.coverage-summary .sorter {
-    height: 10px;
-    width: 7px;
-    display: inline-block;
-    margin-left: 0.5em;
-    background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
-}
-.coverage-summary .sorted .sorter {
-    background-position: 0 -20px;
-}
-.coverage-summary .sorted-desc .sorter {
-    background-position: 0 -10px;
-}
-.status-line {  height: 10px; }
-/* yellow */
-.cbranch-no { background: yellow !important; color: #111; }
-/* dark red */
-.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
-.low .chart { border:1px solid #C21F39 }
-.highlighted,
-.highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{
-  background: #C21F39 !important;
-}
-/* medium red */
-.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
-/* light red */
-.low, .cline-no { background:#FCE1E5 }
-/* light green */
-.high, .cline-yes { background:rgb(230,245,208) }
-/* medium green */
-.cstat-yes { background:rgb(161,215,106) }
-/* dark green */
-.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
-.high .chart { border:1px solid rgb(77,146,33) }
-/* dark yellow (gold) */
-.status-line.medium, .medium .cover-fill { background: #f9cd0b; }
-.medium .chart { border:1px solid #f9cd0b; }
-/* light yellow */
-.medium { background: #fff4c2; }
-
-.cstat-skip { background: #ddd; color: #111; }
-.fstat-skip { background: #ddd; color: #111 !important; }
-.cbranch-skip { background: #ddd !important; color: #111; }
-
-span.cline-neutral { background: #eaeaea; }
-
-.coverage-summary td.empty {
-    opacity: .5;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    line-height: 1;
-    color: #888;
-}
-
-.cover-fill, .cover-empty {
-  display:inline-block;
-  height: 12px;
-}
-.chart {
-  line-height: 0;
-}
-.cover-empty {
-    background: white;
-}
-.cover-full {
-    border-right: none !important;
-}
-pre.prettyprint {
-    border: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-.com { color: #999 !important; }
-.ignore-none { color: #999; font-weight: normal; }
-
-.wrapper {
-  min-height: 100%;
-  height: auto !important;
-  height: 100%;
-  margin: 0 auto -48px;
-}
-.footer, .push {
-  height: 48px;
-}

package/coverage/lcov-report/block-navigation.js

@@ -1,87 +0,0 @@
-/* eslint-disable */
-var jumpToCode = (function init() {
-    // Classes of code we would like to highlight in the file view
-    var missingCoverageClasses = ['.cbranch-no', '.cstat-no', '.fstat-no'];
-
-    // Elements to highlight in the file listing view
-    var fileListingElements = ['td.pct.low'];
-
-    // We don't want to select elements that are direct descendants of another match
-    var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > `
-
-    // Selecter that finds elements on the page to which we can jump
-    var selector =
-        fileListingElements.join(', ') +
-        ', ' +
-        notSelector +
-        missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b`
-
-    // The NodeList of matching elements
-    var missingCoverageElements = document.querySelectorAll(selector);
-
-    var currentIndex;
-
-    function toggleClass(index) {
-        missingCoverageElements
-            .item(currentIndex)
-            .classList.remove('highlighted');
-        missingCoverageElements.item(index).classList.add('highlighted');
-    }
-
-    function makeCurrent(index) {
-        toggleClass(index);
-        currentIndex = index;
-        missingCoverageElements.item(index).scrollIntoView({
-            behavior: 'smooth',
-            block: 'center',
-            inline: 'center'
-        });
-    }
-
-    function goToPrevious() {
-        var nextIndex = 0;
-        if (typeof currentIndex !== 'number' || currentIndex === 0) {
-            nextIndex = missingCoverageElements.length - 1;
-        } else if (missingCoverageElements.length > 1) {
-            nextIndex = currentIndex - 1;
-        }
-
-        makeCurrent(nextIndex);
-    }
-
-    function goToNext() {
-        var nextIndex = 0;
-
-        if (
-            typeof currentIndex === 'number' &&
-            currentIndex < missingCoverageElements.length - 1
-        ) {
-            nextIndex = currentIndex + 1;
-        }
-
-        makeCurrent(nextIndex);
-    }
-
-    return function jump(event) {
-        if (
-            document.getElementById('fileSearch') === document.activeElement &&
-            document.activeElement != null
-        ) {
-            // if we're currently focused on the search input, we don't want to navigate
-            return;
-        }
-
-        switch (event.which) {
-            case 78: // n
-            case 74: // j
-                goToNext();
-                break;
-            case 66: // b
-            case 75: // k
-            case 80: // p
-                goToPrevious();
-                break;
-        }
-    };
-})();
-window.addEventListener('keydown', jumpToCode);