{ "timestamp": "2024-04-07T10:33:59", "compiler": { "name": "@stencil/core", "version": "4.13.0", "typescriptVersion": "5.4.2" }, "components": [ { "filePath": "src/components/go-accordion/go-accordion.tsx", "encapsulation": "none", "tag": "go-accordion", "readme": "---\ntitle: Accordion\n---\n\n# Accordion `go-accordion`\n\n\n\n
Accordions help users reduce cluster by showing only the sections that they are interested in.
\n\n## Accessibility\n\n`go-accordion` and `go-accordion-item` components are implemented following the [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) guidelines.\n\n\n## Demo\n\n### Single mode\n\nBy default only one `` element inside a `` can be expanded at any given time. When clicked on a different ``, the active one will be collapsed and the clicked one will be expanded.\n\n\n\n### Multiple mode\n\nThere are times when you need multiple items to be open at the same time. Just add `multiple` attribute to the `` element.\n\n\n\n### Nested\n\nNested accordions are also possible, the components will figure out which `` component is being interacted with.\n\n\n\n### Customisation\n\nThere are 2 slots you can use to customise each item. `slot=\"heading\"` and `slot=\"arrow\"`\n\n\n\n\n", "docs": "---\ntitle: Accordion\n---", "docsTags": [], "usage": { "multiple": "
\n \n Lorem ipsum dolor sit \n Lorem ipsum dolor sit \n Lorem ipsum dolor sit \n \n
\n", "nested": "
\n \n \n Lorem ipsum dolor sit\n\n \n \n Lorem ipsum dolor sit\n \n\n \n Lorem ipsum dolor sit\n \n \n Lorem ipsum dolor sit\n \n \n\n \n \n Lorem ipsum dolor sit\n \n \n
\n", "single": "
\n \n Add active attribute to open an item by default. \n Lorem ipsum dolor sit \n Lorem ipsum dolor sit \n \n
\n", "slots": "
\n \n \n
\n Use slot=\"heading\" to customise heading \n
\n Lorem ipsum dolor sit\n \n \n
❤
\n Use slot=\"arrow\" to customise arrow\n \n \n
\n" }, "props": [ { "name": "multiple", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "multiple", "reflectToAttr": false, "docs": "If true, multiple ``s can be opened at the same time", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false } ], "methods": [], "events": [], "listeners": [ { "event": "opened", "capture": false, "passive": false } ], "styles": [ { "name": "--heading-bg-color", "annotation": "prop", "docs": "Heading background colour - default: var(--go-color-neutral-100)" }, { "name": "--heading-bg-color-hover", "annotation": "prop", "docs": "Bg color for hover state - default: var(--go-color-neutral-200)" }, { "name": "--heading-border-bottom", "annotation": "prop", "docs": "Bottom border applied to the heading element to better separate the heading and panel, especially useful when content is scrollable. - default: var(--go-border-thin) solid var(--go-color-border)" }, { "name": "--heading-fg-color-hover", "annotation": "prop", "docs": "Foreground color for hover state - default: var(--go-color-text)" }, { "name": "--heading-font-size", "annotation": "prop", "docs": "Heading font size - default: var(--go-size-0, 1rem)" }, { "name": "--heading-font-weight", "annotation": "prop", "docs": "Heading font weight - default: 700" }, { "name": "--heading-padding-x", "annotation": "prop", "docs": "Horizontal padding for item heading - default: 1rem" }, { "name": "--heading-padding-y", "annotation": "prop", "docs": "Vertical padding for item heading - default: 0.5rem" }, { "name": "--heading-radius", "annotation": "prop", "docs": "Border radius of heading button - default: var(--radius-2)" }, { "name": "--heading-text-color", "annotation": "prop", "docs": "Heading text colour - default: var(--go-color-text, #333333)" }, { "name": "--panel-bg-color", "annotation": "prop", "docs": "Content background colour - default: var(--go-color-bg)" }, { "name": "--panel-max-height", "annotation": "prop", "docs": "Inner content max height. This values is also used for CSS animation - default: 100vh" }, { "name": "--panel-padding-x", "annotation": "prop", "docs": "Horizontal padding for inner content - default: 2rem" }, { "name": "--panel-padding-y", "annotation": "prop", "docs": "Vertical padding for inner content - default: 2rem" } ], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/go-accordion/go-accordion-item.tsx", "encapsulation": "none", "tag": "go-accordion-item", "readme": "---\ntitle: Accordion\n---\n\n# Accordion `go-accordion`\n\n\n\n
Accordions help users reduce cluster by showing only the sections that they are interested in.
\n\n## Accessibility\n\n`go-accordion` and `go-accordion-item` components are implemented following the [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) guidelines.\n\n\n## Demo\n\n### Single mode\n\nBy default only one `` element inside a `` can be expanded at any given time. When clicked on a different ``, the active one will be collapsed and the clicked one will be expanded.\n\n\n\n### Multiple mode\n\nThere are times when you need multiple items to be open at the same time. Just add `multiple` attribute to the `` element.\n\n\n\n### Nested\n\nNested accordions are also possible, the components will figure out which `` component is being interacted with.\n\n\n\n### Customisation\n\nThere are 2 slots you can use to customise each item. `slot=\"heading\"` and `slot=\"arrow\"`\n\n\n\n\n", "docs": "---\ntitle: Accordion\n---", "docsTags": [], "usage": { "multiple": "
\n \n Lorem ipsum dolor sit \n Lorem ipsum dolor sit \n Lorem ipsum dolor sit \n \n
\n", "nested": "
\n \n \n Lorem ipsum dolor sit\n\n \n \n Lorem ipsum dolor sit\n \n\n \n Lorem ipsum dolor sit\n \n \n Lorem ipsum dolor sit\n \n \n\n \n \n Lorem ipsum dolor sit\n \n \n
\n", "single": "
\n \n Add active attribute to open an item by default. \n Lorem ipsum dolor sit \n Lorem ipsum dolor sit \n \n
\n", "slots": "
\n \n \n
\n Use slot=\"heading\" to customise heading \n
\n Lorem ipsum dolor sit\n \n \n
❤
\n Use slot=\"arrow\" to customise arrow\n \n \n
\n" }, "props": [ { "name": "active", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": true, "attr": "active", "reflectToAttr": true, "docs": "If the accordion item should be opened by default", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "autoHeight", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "auto-height", "reflectToAttr": false, "docs": "If expanded height should be automatically calculated. If true, the `--go-accordion-item-body-max-height` CSS variable will be set automatically to the content height", "docsTags": [], "default": "true", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "heading", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "heading", "reflectToAttr": false, "docs": "Heading text.\nThis can be overwritten by `heading` slot", "docsTags": [], "default": "null", "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "headingTag", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "heading-tag", "reflectToAttr": false, "docs": "The HTML tag to be applied to the heading text.\nThis can be overwritten by `heading` slot", "docsTags": [], "default": "'h3'", "values": [ { "type": "string" } ], "optional": true, "required": false } ], "methods": [ { "name": "close", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "close() => Promise", "parameters": [], "docs": "Closes the accordion item", "docsTags": [] }, { "name": "focusOnControl", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" }, "HTMLElement": { "location": "global", "id": "global::HTMLElement" } }, "return": "Promise" }, "signature": "focusOnControl() => Promise", "parameters": [], "docs": "Focus on header control", "docsTags": [] }, { "name": "open", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "open() => Promise", "parameters": [], "docs": "Opens the accordion item.", "docsTags": [] }, { "name": "toggle", "returns": { "type": "Promise", "docs": "" }, "complexType": { "signature": "() => Promise", "parameters": [], "references": { "Promise": { "location": "global", "id": "global::Promise" } }, "return": "Promise" }, "signature": "toggle() => Promise", "parameters": [], "docs": "Toggle open state of accordion item", "docsTags": [] } ], "events": [ { "event": "closed", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when accordion item has closed", "docsTags": [] }, { "event": "closing", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when accordion item started closing", "docsTags": [] }, { "event": "opened", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when accordion item has opened", "docsTags": [] }, { "event": "opening", "detail": "any", "bubbles": true, "complexType": { "original": "any", "resolved": "any", "references": {} }, "cancelable": true, "composed": true, "docs": "Emitted when accordion item started opening", "docsTags": [] } ], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/go-badge/go-badge.tsx", "encapsulation": "none", "tag": "go-badge", "readme": "---\ntitle: Badge\n---\n\n# Badge `go-badge`\n\n\n\n
Badge is used to alert users to a particular status or to show a count.
\n\n## Usage\n\nBadges are to be used on interactable elements such as buttons, links and other elements that need to convey a status.\n\n## Accessibility\n\nBadges contain only limited information, in order to make assistive technologies convey the meanings correctly, you can use the `label` attribute on the badge component.\n\n## Demo\n\n\n\n", "docs": "---\ntitle: Badge\n---", "docsTags": [], "usage": { "go-badge": "\n\n\n\n" }, "props": [ { "name": "count", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "count", "reflectToAttr": false, "docs": "Number to be displayed on the badge", "docsTags": [], "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "dotOnly", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "dot-only", "reflectToAttr": false, "docs": "If true, the badge will be displayed only as a dot, no number will be shown", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "label", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "label", "reflectToAttr": false, "docs": "Provide a meaningful label for the badge", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "max", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "max", "reflectToAttr": false, "docs": "maximum number displayable on the badge, if count is greater than max, `{max}+` is displayed", "docsTags": [], "default": "99", "values": [ { "type": "number" } ], "optional": false, "required": false }, { "name": "min", "type": "number", "complexType": { "original": "number", "resolved": "number", "references": {} }, "mutable": false, "attr": "min", "reflectToAttr": false, "docs": "minimum number displayable on the badge, if count is less than min, the badge will not be displayed", "docsTags": [], "default": "0", "values": [ { "type": "number" } ], "optional": false, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/go-banner/go-banner.tsx", "encapsulation": "none", "tag": "go-banner", "readme": "---\ntitle: Banner\n---\n\n# Banner `go-banner`\n\n\n\n
Banner is a component in Go UI.
\n\n## Usage\n\nBanner can be used inside a container or by itself on top of the page (global banner).\n\nA banner draws the users' attention to the content. The banner can be used to display a message, a success feedback, or an error.\n\n## Demo\n\n\n", "docs": "---\ntitle: Banner\n---", "docsTags": [], "usage": { "go-banner": "\n\n\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis voluptatum commodi, earum laudantium dolorem deleniti animi, natus sed aperiam.\n \n\"\n>\n\n" }, "props": [ { "name": "dismissible", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "dismissible", "reflectToAttr": false, "docs": "If the banner can be dismissed, a close button will be rendered", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false }, { "name": "heading", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "heading", "reflectToAttr": false, "docs": "Heading of banner", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "variant", "type": "\"critical\" | \"info\" | \"success\"", "complexType": { "original": "BannerVariants", "resolved": "\"critical\" | \"info\" | \"success\"", "references": { "BannerVariants": { "location": "import", "path": "../../interfaces", "id": "src/interfaces/index.ts::BannerVariants" } } }, "mutable": false, "attr": "variant", "reflectToAttr": true, "docs": "Type of banner", "docsTags": [], "default": "'info'", "values": [ { "value": "critical", "type": "string" }, { "value": "info", "type": "string" }, { "value": "success", "type": "string" } ], "optional": false, "required": false } ], "methods": [], "events": [ { "event": "dismissed", "detail": "void", "bubbles": true, "complexType": { "original": "void", "resolved": "void", "references": {} }, "cancelable": true, "composed": true, "docs": "", "docsTags": [] } ], "listeners": [], "styles": [ { "name": "--banner-bg-color", "annotation": "prop", "docs": "Background color for banner. - default: var(--go-color-primary-200)" }, { "name": "--banner-border-color", "annotation": "prop", "docs": "Define the border color for left decorative banner bar. - default: var(--go-color-primary-300)" }, { "name": "--banner-border-width", "annotation": "prop", "docs": "Define the border width for hte left decorative banner bar. - default: 0.5rem" }, { "name": "--banner-fg-color", "annotation": "prop", "docs": "Foreground color for banner - default: var(--go-color-darkest)" }, { "name": "--banner-heading-gap The gap between the heading and the content. - default 0.5rem", "annotation": "prop", "docs": "" }, { "name": "--banner-icon-bar-padding", "annotation": "prop", "docs": "Padding for icon bar - default: 0.5rem" }, { "name": "--banner-padding-x", "annotation": "prop", "docs": "Horizontal padding of banner area - default: 1rem" }, { "name": "--banner-padding-y", "annotation": "prop", "docs": "Vertical padding of banner area - default: 1rem" }, { "name": "--banner-radius", "annotation": "prop", "docs": "Define border radius for banner. - default: var(--radius-2)" }, { "name": "--banner-shadow", "annotation": "prop", "docs": "Shadow for banner - default: var(--shadow-1)" } ], "slots": [], "parts": [], "dependents": [], "dependencies": [ "go-button" ], "dependencyGraph": { "go-banner": [ "go-button" ], "go-button": [ "go-spinner" ] } }, { "filePath": "src/components/go-blockquote/go-blockquote.tsx", "encapsulation": "none", "tag": "go-blockquote", "readme": "---\ntitle: Blockquote\n---\n\n# Blockquote `go-blockquote`\n\n\n\n
\n The blockquote element indicates that the enclosed text is an extended quotation. \n
\n\n## Demo\n\n\n", "docs": "---\ntitle: Blockquote\n---", "docsTags": [], "usage": { "go-blockquote": "\n

Words can be like X-rays, if you use them properly — they’ll go through anything. You read and you’re pierced.

\n
\n Aldous Huxley, Brave New World\n
\n" }, "props": [ { "name": "citeUrl", "type": "string", "complexType": { "original": "string", "resolved": "string", "references": {} }, "mutable": false, "attr": "cite-url", "reflectToAttr": false, "docs": "A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.\nSee also: [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#attr-cite)", "docsTags": [], "values": [ { "type": "string" } ], "optional": true, "required": false }, { "name": "hideQuoteMark", "type": "boolean", "complexType": { "original": "boolean", "resolved": "boolean", "references": {} }, "mutable": false, "attr": "hide-quote-mark", "reflectToAttr": false, "docs": "", "docsTags": [], "default": "false", "values": [ { "type": "boolean" } ], "optional": true, "required": false } ], "methods": [], "events": [], "listeners": [], "styles": [ { "name": "--blockquote-border", "annotation": "prop", "docs": "Left border of blockquote - default: var(--border-size-3) solid var(--go-color-neutral-400)" }, { "name": "--blockquote-caption-font-size", "annotation": "prop", "docs": "Font size of caption - default: var(--go-size-0)" }, { "name": "--blockquote-caption-margin-top", "annotation": "prop", "docs": "Gap between blockquote and caption - default: 1rem" }, { "name": "--blockquote-font-size", "annotation": "prop", "docs": "Font size of block quote content - default: var(--go-size-1)" }, { "name": "--blockquote-icon-size", "annotation": "prop", "docs": "Blockquote quote mark icon size - default: 5rem" }, { "name": "--blockquote-padding", "annotation": "prop", "docs": "blockquote padding - default: 1rem 2rem" } ], "slots": [], "parts": [], "dependents": [], "dependencies": [], "dependencyGraph": {} }, { "filePath": "src/components/go-breadcrumbs/go-breadcrumbs.tsx", "encapsulation": "none", "tag": "go-breadcrumbs", "readme": "---\ntitle: Breadcrumbs\n---\n\n# Breadcrumbs `go-breadcrumbs`\n\n\n\n
Breadcrumbs provide a quick way to help users understand where they are in the website's information hierarchy.
\n\n## Usage and guidance\n\nAlways place breadcrumbs at the top of a page, and have the [skip link](../go-skip-link) target an element below the breadcrumbs so that screen readers can skip this navigation area.\n\n- On desktop devices, the breadcrumbs should start with \"Home\" even though the logo should also link to the home page.\n- Labels of the breadcrumb items should reflect their page headings in the actual information architecture.\n- On mobile devices, due to the limited screen real estate, the breadcrumb items are condensed into only having the direct parent of the current page (and the current page title if `show-current` attribute is set to `\"true\"`). User should be able to click on the logo to go back to the home page.\n- If items in breadcrumb get too long, the items will wrap into the next line. This is an sign that the information architecture (IA) might need to be updated.\n\n## Accessibility\n\n- Breadcrumbs are contained within a `