4 | Card
5 | Some quick example text to build on the card title and make up the bulk of the card's
6 | content.
7 | Go somewhere
8 |
3 |
5 |
6 |
8 |
9 |
11 | 
3 | Header
3 |
11 |
12 | Dropdown
13 | item #1 (argsTable controlled)
14 | item #2
15 | item #3
16 |
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/cypress/apps/next-app/src/app/components/FileUpload.tsx:
--------------------------------------------------------------------------------
1 | import SgdsFileUpload from "@govtechsg/sgds-web-component/react/file-upload/index.js";
2 |
3 | export const FileUpload = () => {
4 | return (
5 |
9 |
11 |
12 |
14 |
15 |
17 | Header
9 |
12 | Card
13 |
14 | Some quick example text to build on the card title and make up the bulk of the card's content.
15 |
16 |
17 | Go somewhere
18 |
19 |
9 |
15 |
17 |
10 | Aww yeah, you successfully read this important
11 |
15 |
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
16 |
4 | Header
4 |
2 | 
3 | 
4 |
5 | # sgds-web-component
6 |
--------------------------------------------------------------------------------
/docs/Slots.md:
--------------------------------------------------------------------------------
1 | # Slots
2 |
3 | The [HTMl slot elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) are placeholders inside the web components that you can fill up with your own HTML markups.
4 |
5 | There are two kinds of slots: default and named slots. In the storybook documentation, slots are found under the API table with their names. If the name of a slot is
18 |
`;
23 | }
24 | }
25 |
26 | export default SgdsTableOfContents;
27 |
--------------------------------------------------------------------------------
/src/components/TableOfContents/table-of-contents.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | flex-direction: column;
4 | gap: var(--sgds-gap-xl);
5 | }
6 |
7 | slot:not([name])::slotted(*) {
8 | --sgds-font-size-5: var(--sgds-font-size-4);
9 | --sgds-font-size-6: var(--sgds-font-size-4);
10 | --sgds-margin-2-xs: var(--sgds-margin-none);
11 | --sgds-font-weight-bold: var(--sgds-font-weight-semibold);
12 | margin-bottom: var(--sgds-margin-2-xs, var(--sgds-margin-none));
13 | font-size: var(--sgds-font-size-4);
14 | font-weight: var(--sgds-font-weight-bold, var(--sgds-font-weight-semibold));
15 | }
16 |
17 | .contents {
18 | display: flex;
19 | flex-direction: column;
20 | gap: var(--sgds-gap-md);
21 | list-style: none;
22 | margin: var(--sgds-margin-none);
23 | padding: var(--sgds-padding-none);
24 | }
25 |
26 | slot[name="contents"]::slotted(li) {
27 | --sgds-margin-3-xs: var(--sgds-margin-none);
28 | margin-top: var(--sgds-margin-3-xs, var(--sgds-margin-none));
29 | }
--------------------------------------------------------------------------------
/src/components/Textarea/index.ts:
--------------------------------------------------------------------------------
1 | import { SgdsTextarea } from "./sgds-textarea";
2 | import { register } from "../../utils/ce-registry";
3 |
4 | register("sgds-textarea", SgdsTextarea);
5 |
6 | declare global {
7 | interface HTMLElementTagNameMap {
8 | "sgds-textarea": SgdsTextarea;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/Toast/index.ts:
--------------------------------------------------------------------------------
1 | import { SgdsToast } from "./sgds-toast";
2 | import { SgdsToastContainer } from "./sgds-toast-container";
3 | import { register } from "../../utils/ce-registry";
4 |
5 | register("sgds-toast", SgdsToast);
6 | register("sgds-toast-container", SgdsToastContainer);
7 | declare global {
8 | interface HTMLElementTagNameMap {
9 | "sgds-toast-container": SgdsToastContainer;
10 | "sgds-toast": SgdsToast;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/Tooltip/index.ts:
--------------------------------------------------------------------------------
1 | import { SgdsTooltip } from "./sgds-tooltip";
2 | import { register } from "../../utils/ce-registry";
3 |
4 | register("sgds-tooltip", SgdsTooltip);
5 |
6 | declare global {
7 | interface HTMLElementTagNameMap {
8 | "sgds-tooltip": SgdsTooltip;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/components/Tooltip/tooltip.css:
--------------------------------------------------------------------------------
1 | :host {
2 | display: contents;
3 | }
4 | .tooltip-placeholder{
5 | display: inline-block;
6 | }
7 | .tooltip {
8 | word-wrap: break-word;
9 | display: block;
10 | line-break: auto;
11 | opacity: 0;
12 | text-align: left;
13 | text-decoration: none;
14 | text-shadow: none;
15 | text-transform: none;
16 | white-space: normal;
17 | word-break: normal;
18 | word-spacing: normal;
19 | z-index: 1080;
20 | }
21 |
22 | .tooltip.show {
23 | opacity: 1;
24 | }
25 |
26 | .tooltip-inner {
27 | background-color: var(--sgds-surface-fixed-dark);
28 | border-radius: var(--sgds-border-radius-md);
29 | color: var(--sgds-color-fixed-light);
30 | font-size: var(--sgds-font-size-1);
31 | max-width: var(--sgds-dimension-320);
32 | padding: var(--sgds-padding-xs) var(--sgds-padding-sm);
33 | box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
34 | }
35 |
36 | div {
37 | max-width: fit-content;
38 | }
39 |
--------------------------------------------------------------------------------
/src/css/sgds.css:
--------------------------------------------------------------------------------
1 | @import "./reboot.css";
2 | @import "./grid.css";
3 |
--------------------------------------------------------------------------------
/src/internals/CloseButton/index.ts:
--------------------------------------------------------------------------------
1 | import { SgdsCloseButton } from "./sgds-close-button";
2 | import { register } from "../../utils/ce-registry";
3 |
4 | register("sgds-close-button", SgdsCloseButton);
5 |
6 | declare global {
7 | interface HTMLElementTagNameMap {
8 | "sgds-close-button": SgdsCloseButton;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/internals/OverflowMenu/index.ts:
--------------------------------------------------------------------------------
1 | import { SgdsOverflowMenu } from "./sgds-overflow-menu";
2 | import { register } from "../../utils/ce-registry";
3 |
4 | register("sgds-overflow-menu", SgdsOverflowMenu);
5 |
6 | declare global {
7 | interface HTMLElementTagNameMap {
8 | "sgds-overflow-menu": SgdsOverflowMenu;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/src/internals/OverflowMenu/overflow-menu.css:
--------------------------------------------------------------------------------
1 | :host([size="sm"]) .overflow-btn{
2 | width: var(--sgds-dimension-24);
3 | height: var(--sgds-dimension-24);
4 | }
5 |
6 | .overflow-btn {
7 | width: var(--sgds-dimension-32);
8 | height: var(--sgds-dimension-32);
9 | background-color: var(--sgds-bg-transparent);
10 | border-radius: var(--sgds-border-radius-sm);
11 | border: 0;
12 | padding: 0;
13 | position: relative;
14 | cursor: pointer;
15 | display: flex;
16 | justify-content: center;
17 | align-items: center;
18 | }
19 |
20 | .overflow-btn:hover {
21 | background-color: var(--sgds-bg-translucent-subtle);
22 | }
23 |
24 | .overflow-btn:focus,
25 | .overflow-btn:focus-visible {
26 | outline: 0;
27 | box-shadow: var(--sgds-box-shadow-focus);
28 | background-color: var(--sgds-bg-translucent-subtle);
29 | }
--------------------------------------------------------------------------------
/src/styles/bg-variants.css:
--------------------------------------------------------------------------------
1 | .bg-primary {
2 | background-color: var(--sgds-primary) !important;
3 | }
4 | .bg-secondary {
5 | background-color: var(--sgds-secondary) !important;
6 | }
7 | .bg-success {
8 | background-color: var(--sgds-success) !important;
9 | }
10 | .bg-info {
11 | background-color: var(--sgds-info) !important;
12 | }
13 | .bg-warning {
14 | background-color: var(--sgds-warning) !important;
15 | }
16 | .bg-danger {
17 | background-color: var(--sgds-danger)!important;
18 | }
19 | .bg-light {
20 | background-color: var(--sgds-light) !important;
21 | }
22 | .bg-dark {
23 | background-color:var(--sgds-dark) !important;
24 | }
25 |
--------------------------------------------------------------------------------
/src/styles/border-variants.css:
--------------------------------------------------------------------------------
1 | .border-primary {
2 | border-color: var(--sgds-primary) !important;
3 | }
4 | .border-secondary {
5 | border-color: var(--sgds-secondary) !important;
6 | }
7 | .border-success {
8 | border-color: var(--sgds-success) !important;
9 | }
10 | .border-info {
11 | border-color: var(--sgds-info) !important;
12 | }
13 | .border-warning {
14 | border-color: var(--sgds-warning) !important;
15 | }
16 | .border-danger {
17 | border-color: var(--sgds-danger) !important;
18 | }
19 | .border-light {
20 | border-color: var(--sgds-light) !important;
21 | }
22 | .border-dark {
23 | border-color: var(--sgds-dark)!important;
24 | }
25 |
--------------------------------------------------------------------------------
/src/styles/feedback.css:
--------------------------------------------------------------------------------
1 | .invalid-feedback-container {
2 | display: flex;
3 | gap: var(--sgds-form-gap-sm);
4 | color: var(--sgds-form-danger-color-default);
5 | line-height: var(--sgds-line-height-min);
6 |
7 | }
8 |
9 | .invalid-feedback {
10 | color: var(--sgds-form-danger-color-default);
11 | font-size: var(--sgds-font-size-1);
12 | font-weight: var(--sgds-font-weight-regular);
13 | line-height: var(--sgds-line-height-min);
14 | }
15 |
16 | .valid-icon{
17 | color: var(--sgds-form-success-color-default);
18 | }
19 |
--------------------------------------------------------------------------------
/src/styles/form-check.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GovTechSG/sgds-web-component/a5338d634096973a83083b8378b2782ce9cf6fed/src/styles/form-check.css
--------------------------------------------------------------------------------
/src/styles/form-hint.css:
--------------------------------------------------------------------------------
1 | .form-text {
2 | color: var(--sgds-form-color-subtle);
3 | font-size: var(--sgds-font-size-1);
4 | line-height: var(--sgds-line-height-min);
5 | }
6 |
7 | .form-text.disabled {
8 | opacity: var(--sgds-opacity-50);
9 | }
--------------------------------------------------------------------------------
/src/styles/form-label.css:
--------------------------------------------------------------------------------
1 | .form-label {
2 | margin-bottom: 0;
3 | color: var(--sgds-form-color-default);
4 | }
5 |
6 | .form-label.disabled {
7 | opacity: var(--sgds-opacity-50);
8 | }
9 |
10 | .form-check-label {
11 | color: var(--sgds-form-color-default);
12 | }
13 | .form-check-input:disabled ~ .form-check-label,
14 | .form-check-input[disabled] ~ .form-check-label {
15 | /* opacity: var(--sgds-disabled-opacity); */
16 | cursor: not-allowed;
17 | }
18 |
--------------------------------------------------------------------------------
/src/styles/form-placeholder.css:
--------------------------------------------------------------------------------
1 | .form-control::placeholder {
2 | color: var(--sgds-form-color-subtle);
3 | font-family: var(--sgds-font-family-brand);
4 | font-weight: var(--sgds-font-weight-light);
5 | line-height: var(--sgds-line-height-body);
6 | }
7 |
--------------------------------------------------------------------------------
/src/styles/paragraph.css:
--------------------------------------------------------------------------------
1 | p {
2 | margin-bottom: 1.5rem;
3 | margin-top: 0;
4 | }
--------------------------------------------------------------------------------
/src/styles/svg.css:
--------------------------------------------------------------------------------
1 | svg {
2 | vertical-align: middle;
3 | }
4 |
--------------------------------------------------------------------------------
/src/styles/text-variants.css:
--------------------------------------------------------------------------------
1 | .text-primary {
2 | color: var(--sgds-primary-rgb) !important;
3 | }
4 | .text-secondary {
5 | color: var(--sgds-secondary-rgb) !important;
6 | }
7 | .text-success {
8 | color: var(--sgds-success-rgb) !important;
9 | }
10 | .text-info {
11 | color: var(--sgds-info-rgb) !important;
12 | }
13 | .text-warning {
14 | color: var(--sgds-warning-rgb) !important;
15 | }
16 | .text-danger {
17 | color: var(--sgds-danger-rgb) !important;
18 | }
19 | .text-light {
20 | color: var(--sgds-light-rgb) !important;
21 | }
22 | .text-dark {
23 | color: var(--sgds-dark-rgb) !important;
24 | }
25 | .text-muted {
26 | color: var(--sgds-secondary-color) !important;
27 | }
28 |
--------------------------------------------------------------------------------
/src/typings/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module "bootstrap/js/src/collapse";
2 | declare module "bootstrap/js/src/dropdown";
3 | declare module "bootstrap/js/src/tooltip";
4 |
--------------------------------------------------------------------------------
/src/utils/breakpoints.ts:
--------------------------------------------------------------------------------
1 | export const LG_BREAKPOINT = 992;
2 | export const MD_BREAKPOINT = 768;
3 | export const SM_BREAKPOINT = 576;
4 | export const XL_BREAKPOINT = 1200;
5 | export const XXL_BREAKPOINT = 1400;
6 |
--------------------------------------------------------------------------------
/src/utils/ce-registry.ts:
--------------------------------------------------------------------------------
1 | import SgdsElement from "../base/sgds-element";
2 |
3 | /**
4 | *
5 | * @param name tagname of custom element
6 | * @returns boolean
7 | */
8 | export function isRegistered(name: string): boolean {
9 | return !!customElements.get(name);
10 | }
11 |
12 | export function register(name: string, constructor: typeof SgdsElement) {
13 | if (!customElements.get(name)) {
14 | customElements.define(name, constructor);
15 | }
16 | }
17 | export function warnUnregisteredElements(name: string): boolean {
18 | if (isRegistered(name)) {
19 | return true;
20 | } else {
21 | console.error(
22 | `Custom element of name : ${name} is not registered. Remember to import the component file for custom element registration`
23 | );
24 | return false;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/utils/event.ts:
--------------------------------------------------------------------------------
1 | /** Waits for a specific event to be emitted from an element. Ignores events that bubble up from child elements. */
2 | export function waitForEvent(el: HTMLElement, eventName: string) {
3 | return new Promise-
20 |
Description with link
13 |
6 |
9 | `;
10 | };
11 |
12 | const LabelTemplate = args => {
13 | return html`
14 |
15 |
18 | `;
19 | };
20 |
21 | export const Variants = {
22 | render: VariantTemplate.bind({}),
23 | name: "Variants",
24 | args: {},
25 | parameters: {},
26 | tags: ["!dev"]
27 | };
28 | export const Label = {
29 | render: LabelTemplate.bind({}),
30 | name: "Label",
31 | args: {},
32 | parameters: {},
33 | tags: ["!dev"]
34 | };
35 |
--------------------------------------------------------------------------------
/stories/templates/ProgressBar/basic.js:
--------------------------------------------------------------------------------
1 | import { html } from "lit-html";
2 | import { ifDefined } from "lit/directives/if-defined.js";
3 |
4 | export const Template = args => html`
5 |
6 |
16 | `;
17 |
18 | export const args = {
19 | width: "128px",
20 | height: "64px",
21 | borderRadius: "4px"
22 | };
23 |
24 | export const parameters = {};
25 |
--------------------------------------------------------------------------------
/stories/templates/Spinner/additional.mdx:
--------------------------------------------------------------------------------
1 | ## Variant
2 |
3 | Spinners come in two variants: primary(default) and neutral.
4 |
5 |
8 |
9 | ## Size
10 |
11 | There are three sizes of spinners: small, medium(default) and large.
12 |
13 |
16 |
17 | ## Label
18 |
19 | Set a label for the spinner with `label` prop of string type.
20 |
21 |
--------------------------------------------------------------------------------
/stories/templates/Spinner/additional.stories.js:
--------------------------------------------------------------------------------
1 | import { html } from "lit-html";
2 |
3 | const VariantTemplate = () => html`
4 | ${ifDefined(args.title)}
6 | ${args.contents?.map( 7 | item => 8 | html`
7 |
8 |
17 | Action
20 |
21 |
22 |
23 | `;
24 |
25 | export const args = {
26 | show: true
27 | };
28 |
29 | export const parameters = {
30 | docs: {}
31 | };
32 |
--------------------------------------------------------------------------------
/stories/templates/Tooltip/additional.mdx:
--------------------------------------------------------------------------------
1 | ## Placement
2 |
3 | Change `placement` of tooltip relative to its target child
4 |
5 |
8 |
9 | ## Trigger
10 |
11 | Change `trigger` of tooltip to invoke the tooltip differently
12 |
13 |
--------------------------------------------------------------------------------
/stories/troubleshooting.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Markdown } from "@storybook/blocks";
2 | import faq from "../docs/FAQ.md?raw";
3 |
4 |
5 |
6 |
12 |
13 |
23 |
`
24 | );
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/test/sgds-web-component.ts:
--------------------------------------------------------------------------------
1 | import "../src/index";
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2017",
4 | "module": "esnext",
5 | "moduleResolution": "node",
6 | "lib": ["es2017", "dom", "dom.iterable"],
7 | "declaration": true,
8 | "declarationDir": "lib",
9 | "sourceMap": true,
10 | "experimentalDecorators": true,
11 | "inlineSources": true,
12 | "skipLibCheck": true,
13 | "noImplicitAny": false,
14 | "importHelpers": true,
15 | "rootDir": "src",
16 | "allowJs": true,
17 | "typeRoots": ["./src/typings", "./node_modules/@types"]
18 | },
19 | "include": ["**/*.ts", "typings"],
20 | "exclude": ["node_modules", "lib", "test", "test-outdir", "mocks", "react", "cypress", "cypress.config.ts"]
21 | }
22 |
--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "allowSyntheticDefaultImports": true,
5 | "rootDir": "."
6 | },
7 | "include": ["**/*.ts", "./mocks/*.ts"],
8 | "exclude": ["node_modules", "lib", "src", "cypress", "cypress.config.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/typings/css.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.css" {
2 | import { CSSResult } from "lit";
3 | const styles: CSSResult;
4 | export default styles;
5 | }
6 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig, createLogger } from "vite";
2 | import postcssLit from "rollup-plugin-postcss-lit";
3 | import replace from "@rollup/plugin-replace";
4 |
5 | const logger = createLogger();
6 | const originalWarning = logger.warn;
7 | logger.warn = (msg, options) => {
8 | if (msg.includes("Default and named imports from CSS files are deprecated")) return;
9 | originalWarning(msg, options);
10 | };
11 |
12 | export default defineConfig({
13 | plugins: [
14 | replace({
15 | ".css": ".css?inline",
16 | preventAssignment: true
17 | }),
18 | postcssLit({ include: ["**/*.css", "**/*.css?*"] })
19 | ],
20 | resolve: {
21 | alias: [
22 | {
23 | // this is required for the SCSS modules
24 | find: /^~(.*)$/,
25 | replacement: "$1"
26 | }
27 | ]
28 | },
29 | define: {
30 | "process.env.VITE_ENV": JSON.stringify(process.env.VITE_ENV)
31 | },
32 | customLogger: logger,
33 | build: {
34 | cssCodeSplit: false
35 | }
36 | });
37 |
--------------------------------------------------------------------------------