Static Site
This commit is contained in:
120
Static/package/dist/collection/components/checkbox/checkbox.css
vendored
Normal file
120
Static/package/dist/collection/components/checkbox/checkbox.css
vendored
Normal file
@ -0,0 +1,120 @@
|
||||
:host {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.checkbox__container {
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0px;
|
||||
gap: 8px;
|
||||
font-family: var(--ifx-font-family);
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #575352;
|
||||
border-radius: 1px;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper.checkbox-m {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper.error {
|
||||
border-color: #CD002F;
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper:focus-visible {
|
||||
border: 1px solid #575352;
|
||||
outline: 2px solid #0A8276;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper:hover {
|
||||
background-color: #EEEDED;
|
||||
border: 1px solid #575352;
|
||||
border-radius: 1px;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper.disabled {
|
||||
background-color: #BFBBBB;
|
||||
border-color: #BFBBBB;
|
||||
border-radius: 1px;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper.checked {
|
||||
background-color: #0A8276;
|
||||
border-radius: 1px;
|
||||
border-color: transparent;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper.checked.error {
|
||||
background-color: #CD002F;
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper.checked:focus-visible {
|
||||
border: 1px solid transparent;
|
||||
outline: 2px solid #0A8276;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper.checked:hover {
|
||||
background-color: #08665C;
|
||||
border-radius: 1px;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper.checked.disabled {
|
||||
background: #BFBBBB;
|
||||
border-radius: 1px;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper.indeterminate:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 70%;
|
||||
height: 2px;
|
||||
background-color: #08665C;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.checkbox__container .label {
|
||||
height: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
color: #1D1D1D;
|
||||
flex: none;
|
||||
order: 1;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.checkbox__container .label.label-m {
|
||||
height: 24px;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
.checkbox__container .label.disabled {
|
||||
color: #BFBBBB;
|
||||
}
|
||||
.checkbox__container .checkbox__wrapper:hover, .checkbox__container .label:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
30
Static/package/dist/collection/components/checkbox/checkbox.e2e.js
vendored
Normal file
30
Static/package/dist/collection/components/checkbox/checkbox.e2e.js
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
import { newE2EPage } from "@stencil/core/testing";
|
||||
describe('ifx-checkbox', () => {
|
||||
it('should render', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-checkbox></ifx-checkbox>');
|
||||
const element = await page.find('ifx-checkbox');
|
||||
expect(element).toHaveClass('hydrated');
|
||||
});
|
||||
it('should display slotted content', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-checkbox>Test content</ifx-checkbox>');
|
||||
const labelContent = await page.evaluate(() => {
|
||||
const checkbox = document.querySelector('ifx-checkbox');
|
||||
const slot = checkbox.shadowRoot.querySelector('slot');
|
||||
const nodes = slot.assignedNodes();
|
||||
return nodes[0].textContent;
|
||||
});
|
||||
expect(labelContent).toBe('Test content');
|
||||
});
|
||||
it('should emit ifxChange event when clicked', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-checkbox></ifx-checkbox>');
|
||||
const checkbox = await page.find('ifx-checkbox');
|
||||
const ifxChange = await checkbox.spyOnEvent('ifxChange');
|
||||
const checkboxWrapper = await page.find('ifx-checkbox >>> .checkbox__wrapper');
|
||||
await checkboxWrapper.click();
|
||||
expect(ifxChange).toHaveReceivedEvent();
|
||||
});
|
||||
});
|
||||
//# sourceMappingURL=checkbox.e2e.js.map
|
||||
1
Static/package/dist/collection/components/checkbox/checkbox.e2e.js.map
vendored
Normal file
1
Static/package/dist/collection/components/checkbox/checkbox.e2e.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"checkbox.e2e.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;EAC5B,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,+BAA+B,CAAC,CAAC;IAEvD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAChD,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;EAC1C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAC9C,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,2CAA2C,CAAC,CAAC;IAEnE,MAAM,YAAY,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;MAC5C,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;MACxD,MAAM,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;MACvD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;MACnC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;IACxD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,+BAA+B,CAAC,CAAC;IAEvD,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,MAAM,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;IAEzD,MAAM,eAAe,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC;IAC/E,MAAM,eAAe,CAAC,KAAK,EAAE,CAAC;IAE9B,MAAM,CAAC,SAAS,CAAC,CAAC,mBAAmB,EAAE,CAAC;EAC1C,CAAC,CAAC,CAAC;AAEL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-checkbox', () => {\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-checkbox></ifx-checkbox>');\n\n const element = await page.find('ifx-checkbox');\n expect(element).toHaveClass('hydrated');\n });\n\n it('should display slotted content', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-checkbox>Test content</ifx-checkbox>');\n\n const labelContent = await page.evaluate(() => {\n const checkbox = document.querySelector('ifx-checkbox');\n const slot = checkbox.shadowRoot.querySelector('slot');\n const nodes = slot.assignedNodes();\n return nodes[0].textContent;\n });\n\n expect(labelContent).toBe('Test content');\n });\n\n it('should emit ifxChange event when clicked', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-checkbox></ifx-checkbox>');\n\n const checkbox = await page.find('ifx-checkbox');\n const ifxChange = await checkbox.spyOnEvent('ifxChange');\n\n const checkboxWrapper = await page.find('ifx-checkbox >>> .checkbox__wrapper');\n await checkboxWrapper.click();\n\n expect(ifxChange).toHaveReceivedEvent();\n });\n\n});\n"]}
|
||||
240
Static/package/dist/collection/components/checkbox/checkbox.js
vendored
Normal file
240
Static/package/dist/collection/components/checkbox/checkbox.js
vendored
Normal file
@ -0,0 +1,240 @@
|
||||
import { h } from "@stencil/core";
|
||||
export class Checkbox {
|
||||
constructor() {
|
||||
this.disabled = false;
|
||||
this.value = false;
|
||||
this.error = false;
|
||||
this.name = '';
|
||||
this.size = 'm';
|
||||
this.internalValue = undefined;
|
||||
this.indeterminate = false;
|
||||
this.internalIndeterminate = undefined;
|
||||
}
|
||||
handleCheckbox() {
|
||||
if (!this.disabled) {
|
||||
if (this.inputElement.indeterminate) {
|
||||
this.internalValue = true;
|
||||
this.internalIndeterminate = false;
|
||||
}
|
||||
else {
|
||||
this.internalValue = !this.internalValue;
|
||||
}
|
||||
this.ifxChange.emit(this.internalValue);
|
||||
}
|
||||
}
|
||||
valueChanged(newValue, oldValue) {
|
||||
if (newValue !== oldValue) {
|
||||
this.internalValue = newValue;
|
||||
this.inputElement.checked = this.internalValue; // update the checkbox's checked property
|
||||
}
|
||||
}
|
||||
indeterminateChanged(newValue, oldValue) {
|
||||
if (newValue !== oldValue) {
|
||||
this.internalIndeterminate = newValue;
|
||||
this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property
|
||||
}
|
||||
}
|
||||
handleKeydown(event) {
|
||||
// Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key
|
||||
if (event.keyCode === 32 || event.keyCode === 13) {
|
||||
this.handleCheckbox();
|
||||
event.preventDefault(); // prevent the default action when space or enter is pressed
|
||||
}
|
||||
}
|
||||
componentWillLoad() {
|
||||
this.internalValue = this.value;
|
||||
this.internalIndeterminate = this.indeterminate;
|
||||
}
|
||||
componentDidRender() {
|
||||
this.inputElement.indeterminate = this.internalIndeterminate;
|
||||
}
|
||||
getCheckedClassName() {
|
||||
if (this.error) {
|
||||
if (this.internalValue) {
|
||||
return "checked error";
|
||||
}
|
||||
else {
|
||||
return "error";
|
||||
}
|
||||
}
|
||||
else if (this.internalValue) {
|
||||
return "checked";
|
||||
}
|
||||
else
|
||||
return "";
|
||||
}
|
||||
render() {
|
||||
const slot = this.el.innerHTML;
|
||||
let hasSlot = false;
|
||||
if (slot) {
|
||||
hasSlot = true;
|
||||
}
|
||||
return (h("div", { class: "checkbox__container" }, h("input", { type: "checkbox", hidden: true, ref: (el) => (this.inputElement = el), name: this.name, checked: this.internalValue, onChange: this.handleCheckbox.bind(this), id: 'checkbox', value: `${this.internalValue}` }), h("div", { tabindex: "0", onClick: this.handleCheckbox.bind(this), onKeyDown: this.handleKeydown.bind(this), role: "checkbox" // role attribute
|
||||
,
|
||||
"aria-value": this.internalValue, "aria-disabled": this.disabled, "aria-labelledby": "label", class: `checkbox__wrapper
|
||||
${this.getCheckedClassName()}
|
||||
${this.size === "m" ? "checkbox-m" : ""}
|
||||
${this.indeterminate ? 'indeterminate' : ""}
|
||||
${this.disabled ? 'disabled' : ""}` }, this.internalValue && h("ifx-icon", { icon: "check-12" })), hasSlot &&
|
||||
h("div", { id: "label", class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ""} `, onClick: this.handleCheckbox.bind(this) }, h("slot", null))));
|
||||
}
|
||||
static get is() { return "ifx-checkbox"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["checkbox.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["checkbox.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "disabled",
|
||||
"reflect": false,
|
||||
"defaultValue": "false"
|
||||
},
|
||||
"value": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "value",
|
||||
"reflect": false,
|
||||
"defaultValue": "false"
|
||||
},
|
||||
"error": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "error",
|
||||
"reflect": false,
|
||||
"defaultValue": "false"
|
||||
},
|
||||
"name": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "name",
|
||||
"reflect": false,
|
||||
"defaultValue": "''"
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "size",
|
||||
"reflect": false,
|
||||
"defaultValue": "'m'"
|
||||
},
|
||||
"indeterminate": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "indeterminate",
|
||||
"reflect": false,
|
||||
"defaultValue": "false"
|
||||
}
|
||||
};
|
||||
}
|
||||
static get states() {
|
||||
return {
|
||||
"internalValue": {},
|
||||
"internalIndeterminate": {}
|
||||
};
|
||||
}
|
||||
static get events() {
|
||||
return [{
|
||||
"method": "ifxChange",
|
||||
"name": "ifxChange",
|
||||
"bubbles": true,
|
||||
"cancelable": true,
|
||||
"composed": true,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"complexType": {
|
||||
"original": "any",
|
||||
"resolved": "any",
|
||||
"references": {}
|
||||
}
|
||||
}];
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
static get watchers() {
|
||||
return [{
|
||||
"propName": "value",
|
||||
"methodName": "valueChanged"
|
||||
}, {
|
||||
"propName": "indeterminate",
|
||||
"methodName": "indeterminateChanged"
|
||||
}];
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=checkbox.js.map
|
||||
1
Static/package/dist/collection/components/checkbox/checkbox.js.map
vendored
Normal file
1
Static/package/dist/collection/components/checkbox/checkbox.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
45
Static/package/dist/collection/components/checkbox/checkbox.stories.js
vendored
Normal file
45
Static/package/dist/collection/components/checkbox/checkbox.stories.js
vendored
Normal file
@ -0,0 +1,45 @@
|
||||
import { action } from "@storybook/addon-actions";
|
||||
export default {
|
||||
title: "Components/Checkbox",
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
error: false,
|
||||
disabled: false,
|
||||
value: false,
|
||||
label: 'Text',
|
||||
size: 's',
|
||||
indeterminate: false,
|
||||
},
|
||||
argTypes: {
|
||||
size: {
|
||||
description: "Size options: s (21px) and m (25px) - default: m",
|
||||
options: ['s', 'm'],
|
||||
control: { type: 'radio' },
|
||||
},
|
||||
ifxChange: {
|
||||
action: 'ifxChange',
|
||||
description: 'Custom event emitted when accordion-item is closed',
|
||||
table: {
|
||||
type: {
|
||||
summary: 'Framework integration',
|
||||
detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
const DefaultTemplate = ({ error, disabled, value, indeterminate, size, label }) => {
|
||||
const checkbox = document.createElement('ifx-checkbox');
|
||||
checkbox.setAttribute('error', error);
|
||||
checkbox.setAttribute('disabled', disabled);
|
||||
checkbox.setAttribute('value', value);
|
||||
checkbox.setAttribute('size', size);
|
||||
checkbox.setAttribute('indeterminate', indeterminate);
|
||||
checkbox.addEventListener('ifxChange', action('ifxChange'));
|
||||
checkbox.innerHTML = `
|
||||
${label}
|
||||
`;
|
||||
return checkbox;
|
||||
};
|
||||
export const Default = DefaultTemplate.bind({});
|
||||
//# sourceMappingURL=checkbox.stories.js.map
|
||||
1
Static/package/dist/collection/components/checkbox/checkbox.stories.js.map
vendored
Normal file
1
Static/package/dist/collection/components/checkbox/checkbox.stories.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"checkbox.stories.js","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,IAAI,EAAE;IACJ,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,GAAG;IACT,aAAa,EAAE,KAAK;GACrB;EAED,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;MACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,SAAS,EAAE;MACT,MAAM,EAAE,WAAW;MACnB,WAAW,EAAE,oDAAoD;MACjE,KAAK,EAAE;QACL,IAAI,EAAE;UACJ,OAAO,EAAE,uBAAuB;UAChC,MAAM,EAAE,iLAAiL;SAC1L;OACF;KACF;GACF;CAEF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,aAAa,EACb,IAAI,EACJ,KAAK,EACN,EAAE,EAAE;EACH,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;EACxD,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;EACtC,QAAQ,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;EAC5C,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;EACtC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;EACpC,QAAQ,CAAC,YAAY,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;EAEtD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;EAE5D,QAAQ,CAAC,SAAS,GAAG;MACjB,KAAK;GACR,CAAA;EAED,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: \"Components/Checkbox\",\n tags: ['autodocs'],\n args: {\n error: false,\n disabled: false,\n value: false,\n label: 'Text',\n size: 's',\n indeterminate: false,\n },\n\n argTypes: {\n size: {\n description: \"Size options: s (21px) and m (25px) - default: m\",\n options: ['s', 'm'],\n control: { type: 'radio' },\n },\n ifxChange: {\n action: 'ifxChange',\n description: 'Custom event emitted when accordion-item is closed',\n table: {\n type: {\n summary: 'Framework integration',\n detail: 'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n },\n },\n }\n },\n\n};\n\n\nconst DefaultTemplate = ({\n error,\n disabled,\n value,\n indeterminate,\n size,\n label\n}) => {\n const checkbox = document.createElement('ifx-checkbox');\n checkbox.setAttribute('error', error);\n checkbox.setAttribute('disabled', disabled);\n checkbox.setAttribute('value', value);\n checkbox.setAttribute('size', size);\n checkbox.setAttribute('indeterminate', indeterminate);\n\n checkbox.addEventListener('ifxChange', action('ifxChange'));\n\n checkbox.innerHTML = `\n ${label}\n `\n\n return checkbox;\n};\n\nexport const Default = DefaultTemplate.bind({});\n\n\n"]}
|
||||
Reference in New Issue
Block a user