@kyndryl-design-system/shidoka-applications 2.7.0 → 2.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Shidoka Web Components for Applications
|
|
2
2
|
|
|
3
|
-
[](https://github.com/kyndryl-design-system/shidoka-applications/actions/workflows/release.yml)
|
|
4
4
|
|
|
5
5
|
# Contributing
|
|
6
6
|
|
|
@@ -36,9 +36,13 @@ The method used (SCSS @use, CSS @import, JS import, or <style> tag) will v
|
|
|
36
36
|
import '@kyndryl-design-system/shidoka-foundation/css/root.css';
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
### Set a color scheme
|
|
40
|
+
|
|
41
|
+
More info on color schemes in the [Foundation Storybook](https://shidoka-foundation.netlify.app/?path=/docs/foundation-colors--docs#setting-a-theme).
|
|
42
|
+
|
|
39
43
|
### Use CSS tokens/variables
|
|
40
44
|
|
|
41
|
-
|
|
45
|
+
You can make use of tokens/variables included in Foundation to style your non-Shidoka elements.
|
|
42
46
|
|
|
43
47
|
## Start using components
|
|
44
48
|
|
|
@@ -230,14 +230,11 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,b as e,l a
|
|
|
230
230
|
background-color: var(--kd-color-background-button-secondary-destructive-default);
|
|
231
231
|
color: var(--kd-color-text-level-primary);
|
|
232
232
|
}
|
|
233
|
-
.kd-btn--secondary-destructive:hover {
|
|
234
|
-
color: var(--kd-color-text-level-light);
|
|
235
|
-
}
|
|
236
233
|
.kd-btn--secondary-destructive:before {
|
|
237
234
|
background-color: var(--kd-color-background-button-secondary-destructive-hover);
|
|
238
235
|
}
|
|
239
236
|
.kd-btn--secondary-destructive:focus {
|
|
240
|
-
outline-color: var(--kd-color-border-button-
|
|
237
|
+
outline-color: var(--kd-color-border-button-primary-destructive-default);
|
|
241
238
|
}
|
|
242
239
|
.kd-btn--secondary-destructive:active {
|
|
243
240
|
color: var(--kd-color-text-level-primary);
|
|
@@ -330,7 +327,7 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,b as e,l a
|
|
|
330
327
|
.kd-btn--outline-destructive:hover {
|
|
331
328
|
background-color: var(--kd-color-background-button-secondary-destructive-hover);
|
|
332
329
|
border-color: var(--kd-color-border-button-primary-destructive-hover);
|
|
333
|
-
color: var(--kd-color-text-level-
|
|
330
|
+
color: var(--kd-color-text-level-primary);
|
|
334
331
|
}
|
|
335
332
|
.kd-btn--outline-destructive:focus {
|
|
336
333
|
border-color: var(--kd-color-border-button-primary-destructive-focused);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sources":["../../../../src/components/reusable/button/button.ts"],"sourcesContent":["/**\n * Copyright Kyndryl, Inc. 2023\n */\n\nimport { html, LitElement } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedNodes,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\n\nimport {\n BUTTON_KINDS,\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_ICON_POSITION,\n BUTTON_KINDS_SOLID,\n BUTTON_KINDS_OUTLINE,\n} from './defs';\n\nimport stylesheet from './button.scss';\n\n/**\n * Button component.\n *\n * @slot unnamed - Slot for button text.\n * @slot icon - Slot for an icon.\n * @fires on-click - Emits the original click event.\n */\n@customElement('kyn-button')\nexport class Button extends LitElement {\n static override styles = [stylesheet];\n\n /** @ignore */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\n\n /** ARIA label for the button for accessibility. */\n @property({ type: String })\n description = '';\n\n /** Type for the <button> element. */\n @property({ type: String })\n type: BUTTON_TYPES = BUTTON_TYPES.BUTTON;\n\n /** Specifies the visual appearance/kind of the button. */\n @property({ type: String })\n kind: BUTTON_KINDS = BUTTON_KINDS.PRIMARY;\n\n /** Converts the button to an <a> tag if specified. */\n @property({ type: String })\n href = '';\n\n /** Specifies the size of the button. */\n @property({ type: String })\n size: BUTTON_SIZES = BUTTON_SIZES.MEDIUM;\n\n /** Specifies the position of the icon relative to any button text. */\n @property({ type: String })\n iconPosition: BUTTON_ICON_POSITION = BUTTON_ICON_POSITION.CENTER;\n\n /** Determines if the button is disabled.\n * @internal\n */\n @state()\n iconOnly = false;\n\n /** Determines if the button is disabled. */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Button value. */\n @property({ type: String })\n value = '';\n\n /** Button name. */\n @property({ type: String })\n name = '';\n\n /** Determines if the button is Floatable */\n @property({ type: Boolean })\n isFloating = false;\n\n /** Show button after scrolling to 50% of the page*/\n @property({ type: Boolean })\n showOnScroll = false;\n\n /** Determines showButton state .\n * @internal\n */\n @state()\n _showButton = false;\n\n /** re-size button to 'medium' at mobile breakpoint.\n * @internal\n */\n @state()\n _reSizeBtn = false;\n\n /** Button formmethod. */\n @property({ type: String })\n formmethod!: any;\n\n /** Queries default slot nodes.\n * @internal\n */\n @queryAssignedNodes()\n _slottedEls!: Array<any>;\n\n /** Queries icon slot nodes.\n * @internal\n */\n @queryAssignedElements({ slot: 'icon' })\n _iconEls!: Array<any>;\n\n /** Queries the .button element.\n * @internal\n */\n @query('.button')\n _btnEl!: any;\n\n override render() {\n const BtnClasses = {\n 'kd-btn': true,\n [`kd-btn--${this.kind}`]: true,\n 'kd-btn--solid-styles': BUTTON_KINDS_SOLID.includes(this.kind),\n 'kd-btn--outline-styles': BUTTON_KINDS_OUTLINE.includes(this.kind),\n 'kd-btn--large': this.size === BUTTON_SIZES.LARGE,\n 'kd-btn--small': this.size === BUTTON_SIZES.SMALL,\n 'kd-btn--medium': this._reSizeBtn || this.size === BUTTON_SIZES.MEDIUM,\n 'kd-btn--icon-align': !!this.iconPosition,\n [`kd-btn--icon-${this.iconPosition}`]:\n !!this.iconPosition && !this.iconOnly,\n [`kd-btn--icon-center`]: this._iconEls?.length && this.iconOnly,\n 'kd-btn--float': this.isFloating,\n 'kd-btn--hidden': this.showOnScroll && !this._showButton,\n 'icon-only': this._iconEls?.length && this.iconOnly,\n };\n\n return html`\n ${this.href && this.href !== ''\n ? html`\n <a\n part=\"button\"\n class=${classMap(BtnClasses)}\n href=${this.href}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.description)}\n title=${ifDefined(this.description)}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span>\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n <slot\n name=\"icon\"\n @slotchange=${() => this._handleSlotChange()}\n ></slot>\n </span>\n </a>\n `\n : html`\n <button\n part=\"button\"\n class=${classMap(BtnClasses)}\n type=${this.type}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.description)}\n title=${ifDefined(this.description)}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n formmethod=${ifDefined(this.formmethod)}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span>\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n <slot\n name=\"icon\"\n @slotchange=${() => this._handleSlotChange()}\n ></slot>\n </span>\n </button>\n `}\n `;\n }\n\n private handleClick(e: Event) {\n if (this.internals.form) {\n if (this.type === 'submit') {\n this.internals.form.requestSubmit();\n } else if (this.type === 'reset') {\n this.internals.form.reset();\n }\n }\n\n const event = new CustomEvent('on-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private _testIconOnly() {\n if (!this._iconEls?.length) {\n return false;\n }\n\n const TextNodes = this._slottedEls?.filter((node: any) => {\n return node.textContent.trim() !== '';\n });\n\n const VisibleTextNodes = TextNodes.filter((node: any) => {\n if (node.tagName) {\n const Styles = getComputedStyle(node);\n return Styles.display !== 'none' && Styles.visibility !== 'hidden';\n } else {\n return true;\n }\n });\n\n return !VisibleTextNodes.length;\n }\n\n private _handleSlotChange() {\n this.iconOnly = this._testIconOnly();\n this.requestUpdate();\n }\n\n /** @internal */\n private _debounceResize = debounce(() => {\n this._reSizeButton();\n this.iconOnly = this._testIconOnly();\n });\n\n /** @internal */\n private _reSizeButton() {\n // Resize button to medium at mobile breakpoint\n if ((this.isFloating || this.showOnScroll) && window.innerWidth <= 672) {\n this._reSizeBtn = true;\n } else {\n this._reSizeBtn = false;\n }\n }\n\n /** @internal */\n private _debounceScroll = debounce(() => {\n if (this.showOnScroll) {\n this._handleScroll();\n }\n });\n\n /** @internal */\n private _handleScroll() {\n const scrollPosition = window.scrollY;\n const windowHeight = window.innerHeight;\n const pageHeight = document.documentElement.scrollHeight;\n // Show the button if scrolled 50% of the page\n this._showButton = scrollPosition > (pageHeight - windowHeight) / 2;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('resize', this._debounceResize);\n if (this.showOnScroll) {\n window.addEventListener('scroll', this._debounceScroll);\n }\n }\n\n override disconnectedCallback() {\n window.removeEventListener('resize', this._debounceResize);\n if (this.showOnScroll) {\n window.removeEventListener('scroll', this._debounceScroll);\n }\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-button': Button;\n }\n}\n"],"names":["Button","LitElement","constructor","this","internals","attachInternals","description","type","BUTTON_TYPES","BUTTON","kind","BUTTON_KINDS","PRIMARY","href","size","BUTTON_SIZES","MEDIUM","iconPosition","BUTTON_ICON_POSITION","CENTER","iconOnly","disabled","value","name","isFloating","showOnScroll","_showButton","_reSizeBtn","_debounceResize","debounce","_reSizeButton","_testIconOnly","_debounceScroll","_handleScroll","render","BtnClasses","BUTTON_KINDS_SOLID","includes","BUTTON_KINDS_OUTLINE","LARGE","SMALL","_a","_iconEls","length","_b","html","classMap","ifDefined","e","handleClick","_handleSlotChange","formmethod","form","requestSubmit","reset","event","CustomEvent","detail","origEvent","dispatchEvent","_slottedEls","filter","node","textContent","trim","tagName","Styles","getComputedStyle","display","visibility","requestUpdate","window","innerWidth","scrollPosition","scrollY","windowHeight","innerHeight","pageHeight","document","documentElement","scrollHeight","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","stylesheet","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","reflect","queryAssignedNodes","queryAssignedElements","slot","query","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"button.js","sources":["../../../../src/components/reusable/button/button.ts"],"sourcesContent":["/**\n * Copyright Kyndryl, Inc. 2023\n */\n\nimport { html, LitElement } from 'lit';\nimport {\n customElement,\n property,\n state,\n query,\n queryAssignedNodes,\n queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\n\nimport {\n BUTTON_KINDS,\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_ICON_POSITION,\n BUTTON_KINDS_SOLID,\n BUTTON_KINDS_OUTLINE,\n} from './defs';\n\nimport stylesheet from './button.scss';\n\n/**\n * Button component.\n *\n * @slot unnamed - Slot for button text.\n * @slot icon - Slot for an icon.\n * @fires on-click - Emits the original click event.\n */\n@customElement('kyn-button')\nexport class Button extends LitElement {\n static override styles = [stylesheet];\n\n /** @ignore */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Associate the component with forms.\n * @ignore\n */\n static formAssociated = true;\n\n /**\n * Attached internals for form association.\n * @ignore\n */\n @state()\n internals = this.attachInternals();\n\n /** ARIA label for the button for accessibility. */\n @property({ type: String })\n description = '';\n\n /** Type for the <button> element. */\n @property({ type: String })\n type: BUTTON_TYPES = BUTTON_TYPES.BUTTON;\n\n /** Specifies the visual appearance/kind of the button. */\n @property({ type: String })\n kind: BUTTON_KINDS = BUTTON_KINDS.PRIMARY;\n\n /** Converts the button to an <a> tag if specified. */\n @property({ type: String })\n href = '';\n\n /** Specifies the size of the button. */\n @property({ type: String })\n size: BUTTON_SIZES = BUTTON_SIZES.MEDIUM;\n\n /** Specifies the position of the icon relative to any button text. */\n @property({ type: String })\n iconPosition: BUTTON_ICON_POSITION = BUTTON_ICON_POSITION.CENTER;\n\n /** Determines if the button is disabled.\n * @internal\n */\n @state()\n iconOnly = false;\n\n /** Determines if the button is disabled. */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /** Button value. */\n @property({ type: String })\n value = '';\n\n /** Button name. */\n @property({ type: String })\n name = '';\n\n /** Determines if the button is Floatable */\n @property({ type: Boolean })\n isFloating = false;\n\n /** Show button after scrolling to 50% of the page*/\n @property({ type: Boolean })\n showOnScroll = false;\n\n /** Determines showButton state .\n * @internal\n */\n @state()\n _showButton = false;\n\n /** re-size button to 'medium' at mobile breakpoint.\n * @internal\n */\n @state()\n _reSizeBtn = false;\n\n /** Button formmethod. */\n @property({ type: String })\n formmethod!: any;\n\n /** Queries default slot nodes.\n * @internal\n */\n @queryAssignedNodes()\n _slottedEls!: Array<any>;\n\n /** Queries icon slot nodes.\n * @internal\n */\n @queryAssignedElements({ slot: 'icon' })\n _iconEls!: Array<any>;\n\n /** Queries the .button element.\n * @internal\n */\n @query('.button')\n _btnEl!: any;\n\n override render() {\n const BtnClasses = {\n 'kd-btn': true,\n [`kd-btn--${this.kind}`]: true,\n 'kd-btn--solid-styles': BUTTON_KINDS_SOLID.includes(this.kind),\n 'kd-btn--outline-styles': BUTTON_KINDS_OUTLINE.includes(this.kind),\n 'kd-btn--large': this.size === BUTTON_SIZES.LARGE,\n 'kd-btn--small': this.size === BUTTON_SIZES.SMALL,\n 'kd-btn--medium': this._reSizeBtn || this.size === BUTTON_SIZES.MEDIUM,\n 'kd-btn--icon-align': !!this.iconPosition,\n [`kd-btn--icon-${this.iconPosition}`]:\n !!this.iconPosition && !this.iconOnly,\n [`kd-btn--icon-center`]: this._iconEls?.length && this.iconOnly,\n 'kd-btn--float': this.isFloating,\n 'kd-btn--hidden': this.showOnScroll && !this._showButton,\n 'icon-only': this._iconEls?.length && this.iconOnly,\n };\n\n return html`\n ${this.href && this.href !== ''\n ? html`\n <a\n part=\"button\"\n class=${classMap(BtnClasses)}\n href=${this.href}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.description)}\n title=${ifDefined(this.description)}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span>\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n <slot\n name=\"icon\"\n @slotchange=${() => this._handleSlotChange()}\n ></slot>\n </span>\n </a>\n `\n : html`\n <button\n part=\"button\"\n class=${classMap(BtnClasses)}\n type=${this.type}\n ?disabled=${this.disabled}\n aria-label=${ifDefined(this.description)}\n title=${ifDefined(this.description)}\n name=${ifDefined(this.name)}\n value=${ifDefined(this.value)}\n formmethod=${ifDefined(this.formmethod)}\n @click=${(e: Event) => this.handleClick(e)}\n >\n <span>\n <slot @slotchange=${() => this._handleSlotChange()}></slot>\n <slot\n name=\"icon\"\n @slotchange=${() => this._handleSlotChange()}\n ></slot>\n </span>\n </button>\n `}\n `;\n }\n\n private handleClick(e: Event) {\n if (this.internals.form) {\n if (this.type === 'submit') {\n this.internals.form.requestSubmit();\n } else if (this.type === 'reset') {\n this.internals.form.reset();\n }\n }\n\n const event = new CustomEvent('on-click', {\n detail: { origEvent: e },\n });\n this.dispatchEvent(event);\n }\n\n private _testIconOnly() {\n if (!this._iconEls?.length) {\n return false;\n }\n\n const TextNodes = this._slottedEls?.filter((node: any) => {\n return node.textContent.trim() !== '';\n });\n\n const VisibleTextNodes = TextNodes.filter((node: any) => {\n if (node.tagName) {\n const Styles = getComputedStyle(node);\n return Styles.display !== 'none' && Styles.visibility !== 'hidden';\n } else {\n return true;\n }\n });\n\n return !VisibleTextNodes.length;\n }\n\n private _handleSlotChange() {\n this.iconOnly = this._testIconOnly();\n this.requestUpdate();\n }\n\n /** @internal */\n private _debounceResize = debounce(() => {\n this._reSizeButton();\n this.iconOnly = this._testIconOnly();\n });\n\n /** @internal */\n private _reSizeButton() {\n // Resize button to medium at mobile breakpoint\n if ((this.isFloating || this.showOnScroll) && window.innerWidth <= 672) {\n this._reSizeBtn = true;\n } else {\n this._reSizeBtn = false;\n }\n }\n\n /** @internal */\n private _debounceScroll = debounce(() => {\n if (this.showOnScroll) {\n this._handleScroll();\n }\n });\n\n /** @internal */\n private _handleScroll() {\n const scrollPosition = window.scrollY;\n const windowHeight = window.innerHeight;\n const pageHeight = document.documentElement.scrollHeight;\n // Show the button if scrolled 50% of the page\n this._showButton = scrollPosition > (pageHeight - windowHeight) / 2;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('resize', this._debounceResize);\n if (this.showOnScroll) {\n window.addEventListener('scroll', this._debounceScroll);\n }\n }\n\n override disconnectedCallback() {\n window.removeEventListener('resize', this._debounceResize);\n if (this.showOnScroll) {\n window.removeEventListener('scroll', this._debounceScroll);\n }\n super.disconnectedCallback();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-button': Button;\n }\n}\n"],"names":["Button","LitElement","constructor","this","internals","attachInternals","description","type","BUTTON_TYPES","BUTTON","kind","BUTTON_KINDS","PRIMARY","href","size","BUTTON_SIZES","MEDIUM","iconPosition","BUTTON_ICON_POSITION","CENTER","iconOnly","disabled","value","name","isFloating","showOnScroll","_showButton","_reSizeBtn","_debounceResize","debounce","_reSizeButton","_testIconOnly","_debounceScroll","_handleScroll","render","BtnClasses","BUTTON_KINDS_SOLID","includes","BUTTON_KINDS_OUTLINE","LARGE","SMALL","_a","_iconEls","length","_b","html","classMap","ifDefined","e","handleClick","_handleSlotChange","formmethod","form","requestSubmit","reset","event","CustomEvent","detail","origEvent","dispatchEvent","_slottedEls","filter","node","textContent","trim","tagName","Styles","getComputedStyle","display","visibility","requestUpdate","window","innerWidth","scrollPosition","scrollY","windowHeight","innerHeight","pageHeight","document","documentElement","scrollHeight","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","stylesheet","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","reflect","queryAssignedNodes","queryAssignedElements","slot","query","customElement"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kyndryl-design-system/shidoka-applications",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.2",
|
|
4
4
|
"description": "Shidoka Web Components for Applications",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"prepare": "npx husky install"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@kyndryl-design-system/shidoka-foundation": "^2.2.
|
|
30
|
+
"@kyndryl-design-system/shidoka-foundation": "^2.2.1",
|
|
31
31
|
"@kyndryl-design-system/shidoka-icons": "^2.0.0",
|
|
32
32
|
"@lit/context": "^1.1.0",
|
|
33
33
|
"deepmerge-ts": "^7.1.0",
|