Static Site
This commit is contained in:
121
Static/package/dist/collection/components/icon-button/icon-button.css
vendored
Normal file
121
Static/package/dist/collection/components/icon-button/icon-button.css
vendored
Normal file
@ -0,0 +1,121 @@
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 40px;
|
||||
padding: 8px;
|
||||
gap: 8px;
|
||||
color: #FFFFFF;
|
||||
flex-direction: row;
|
||||
font-weight: 600;
|
||||
border-radius: 1px;
|
||||
line-height: 1.5rem;
|
||||
outline: none;
|
||||
font-family: var(--ifx-font-family);
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
border: 1px solid rgba(0, 0, 0, 0);
|
||||
font-size: 1rem;
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.btn:not(.disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: #FFFFFF;
|
||||
background-color: #0A8276;
|
||||
}
|
||||
.btn-primary:disabled, .btn-primary.disabled {
|
||||
background-color: #BFBBBB;
|
||||
color: #FFFFFF;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: #0A8276;
|
||||
background-color: #FFFFFF;
|
||||
border-color: #0A8276;
|
||||
}
|
||||
.btn-secondary:disabled, .btn-secondary.disabled {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #BFBBBB;
|
||||
color: #BFBBBB;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-tertiary {
|
||||
background-color: transparent;
|
||||
color: #1D1D1D;
|
||||
}
|
||||
.btn-tertiary:disabled, .btn-tertiary.disabled {
|
||||
color: #BFBBBB;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn.icon-button {
|
||||
min-width: initial;
|
||||
min-height: initial;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
.btn.icon-button.btn-round {
|
||||
border-radius: 100px;
|
||||
}
|
||||
.btn.icon-button.btn-square {
|
||||
border-radius: 1px;
|
||||
}
|
||||
.btn.icon-button.btn-s {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 8px;
|
||||
}
|
||||
.btn.icon-button.btn-l {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 8px;
|
||||
}
|
||||
.btn.btn-primary:not(:disabled, .disabled):focus:not(:active, .active) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
|
||||
}
|
||||
.btn.btn-primary:not(:disabled, .disabled):hover {
|
||||
background-color: #08665C;
|
||||
border-color: #08665C;
|
||||
}
|
||||
.btn.btn-primary:not(:disabled, .disabled):active, .btn.btn-primary:not(:disabled, .disabled).active {
|
||||
background-color: #06534B;
|
||||
border-color: #06534B;
|
||||
}
|
||||
.btn.btn-secondary:not(:disabled, .disabled):focus:not(:active, .active) {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276;
|
||||
}
|
||||
.btn.btn-secondary:not(:disabled, .disabled):hover {
|
||||
background-color: #08665C;
|
||||
border-color: #08665C;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.btn.btn-secondary:not(:disabled, .disabled):active, .btn.btn-secondary:not(:disabled, .disabled).active {
|
||||
background-color: #06534B;
|
||||
border-color: #06534B;
|
||||
}
|
||||
.btn.btn-tertiary:not(:disabled, .disabled):focus:not(:active, .active) {
|
||||
outline: none;
|
||||
color: #1D1D1D;
|
||||
box-shadow: 0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276;
|
||||
}
|
||||
.btn.btn-tertiary:not(:disabled, .disabled):hover {
|
||||
color: #0A8276;
|
||||
}
|
||||
.btn.btn-tertiary:not(:disabled, .disabled):active, .btn.btn-tertiary:not(:disabled, .disabled).active {
|
||||
color: #08665C;
|
||||
}
|
||||
207
Static/package/dist/collection/components/icon-button/icon-button.js
vendored
Normal file
207
Static/package/dist/collection/components/icon-button/icon-button.js
vendored
Normal file
@ -0,0 +1,207 @@
|
||||
import { h, Host } from "@stencil/core";
|
||||
import classNames from "classnames";
|
||||
export class IconButton {
|
||||
constructor() {
|
||||
this.variant = undefined;
|
||||
this.size = undefined;
|
||||
this.disabled = undefined;
|
||||
this.icon = undefined;
|
||||
this.href = undefined;
|
||||
this.target = '_self';
|
||||
this.shape = 'round';
|
||||
}
|
||||
async setFocus() {
|
||||
this.focusableElement.focus();
|
||||
}
|
||||
componentWillLoad() {
|
||||
if (this.shape === '') {
|
||||
this.shape = 'round';
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (h(Host, null, this.href ? (h("a", { "aria-disabled": this.disabled, "aria-label": 'a clickable icon button', ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.icon }))) : (h("button", { class: this.getClassNames(), type: "button" }, h("ifx-icon", { icon: this.icon })))));
|
||||
}
|
||||
getVariantClass() {
|
||||
return `${this.variant}` === "secondary"
|
||||
? `secondary`
|
||||
: `${this.variant}` === 'tertiary'
|
||||
? `tertiary`
|
||||
: `primary`;
|
||||
}
|
||||
getSizeClass() {
|
||||
if (`${this.size}` === "xs") {
|
||||
return "xs";
|
||||
}
|
||||
else if (`${this.size}` === "s") {
|
||||
return "s";
|
||||
}
|
||||
else if (`${this.size}` === "l") {
|
||||
return "l";
|
||||
}
|
||||
else
|
||||
return "";
|
||||
}
|
||||
getClassNames() {
|
||||
return classNames('btn icon-button', `btn-${this.shape}`, this.size && `btn-${this.getSizeClass()}`, `btn-${this.getVariantClass()}`, this.disabled ? 'disabled' : '');
|
||||
}
|
||||
static get is() { return "ifx-icon-button"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["icon-button.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["icon-button.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"variant": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "'primary' | 'secondary' | 'tertiary'",
|
||||
"resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "variant",
|
||||
"reflect": false
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "size",
|
||||
"reflect": false
|
||||
},
|
||||
"disabled": {
|
||||
"type": "boolean",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "boolean",
|
||||
"resolved": "boolean",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "disabled",
|
||||
"reflect": false
|
||||
},
|
||||
"icon": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "icon",
|
||||
"reflect": false
|
||||
},
|
||||
"href": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "href",
|
||||
"reflect": false
|
||||
},
|
||||
"target": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "target",
|
||||
"reflect": false,
|
||||
"defaultValue": "'_self'"
|
||||
},
|
||||
"shape": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "shape",
|
||||
"reflect": false,
|
||||
"defaultValue": "'round'"
|
||||
}
|
||||
};
|
||||
}
|
||||
static get methods() {
|
||||
return {
|
||||
"setFocus": {
|
||||
"complexType": {
|
||||
"signature": "() => Promise<void>",
|
||||
"parameters": [],
|
||||
"references": {
|
||||
"Promise": {
|
||||
"location": "global",
|
||||
"id": "global::Promise"
|
||||
}
|
||||
},
|
||||
"return": "Promise<void>"
|
||||
},
|
||||
"docs": {
|
||||
"text": "",
|
||||
"tags": []
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
static get elementRef() { return "el"; }
|
||||
}
|
||||
//# sourceMappingURL=icon-button.js.map
|
||||
1
Static/package/dist/collection/components/icon-button/icon-button.js.map
vendored
Normal file
1
Static/package/dist/collection/components/icon-button/icon-button.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,UAAU,MAAM,YAAY,CAAC;AAQpC,MAAM,OAAO,UAAU;;;;;;;kBAMI,OAAO;iBACR,OAAO;;EAM/B,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;EAChC,CAAC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE;MACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC;KACtB;EACH,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,QACF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,0BACiB,IAAI,CAAC,QAAQ,gBACjB,yBAAyB,EACpC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC,EACzC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC5C,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS;MAEjE,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CACpC,CACL,CAAC,CAAC,CAAC,CACF,cACE,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,IAAI,EAAC,QAAQ;MAEb,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAC/B,CACV,CACI,CACR,CAAC;EACJ,CAAC;EAID,eAAe;IACb,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,WAAW;MACtC,CAAC,CAAC,WAAW;MACb,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,KAAK,UAAU;QAChC,CAAC,CAAC,UAAU;QACZ,CAAC,CAAC,SAAS,CAAC;EAClB,CAAC;EAED,YAAY;IACV,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE;MAC3B,OAAO,IAAI,CAAA;KACZ;SACI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;MAC/B,OAAO,GAAG,CAAA;KACX;SACI,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG,EAAE;MAC/B,OAAO,GAAG,CAAA;KACX;;MACI,OAAO,EAAE,CAAC;EACjB,CAAC;EAED,aAAa;IACX,OAAO,UAAU,CACf,iBAAiB,EACjB,OAAO,IAAI,CAAC,KAAK,EAAE,EACnB,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,CAAC,YAAY,EAAE,EAAE,EACzC,OAAO,IAAI,CAAC,eAAe,EAAE,EAAE,EAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAChC,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host, Method, Element } from '@stencil/core';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-icon-button',\n styleUrl: 'icon-button.scss',\n shadow: true,\n})\n\nexport class IconButton {\n @Prop() variant: 'primary' | 'secondary' | 'tertiary';\n @Prop() size: string;\n @Prop() disabled: boolean;\n @Prop() icon: string;\n @Prop() href: string;\n @Prop() target: string = '_self';\n @Prop() shape: string = 'round';\n @Element() el;\n\n private focusableElement: HTMLElement;\n\n @Method()\n async setFocus() {\n this.focusableElement.focus();\n }\n\n componentWillLoad() {\n if (this.shape === '') {\n this.shape = 'round';\n }\n }\n\n render() {\n return (\n <Host>\n {this.href ? (\n <a\n aria-disabled={this.disabled}\n aria-label='a clickable icon button'\n ref={(el) => (this.focusableElement = el)}\n class={this.getClassNames()}\n href={!this.disabled ? this.href : undefined}\n target={this.target}\n rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\n >\n <ifx-icon icon={this.icon}></ifx-icon>\n </a>\n ) : (\n <button\n class={this.getClassNames()}\n type=\"button\"\n >\n <ifx-icon icon={this.icon}></ifx-icon>\n </button>\n )}\n </Host>\n );\n }\n\n\n\n getVariantClass() {\n return `${this.variant}` === \"secondary\"\n ? `secondary`\n : `${this.variant}` === 'tertiary'\n ? `tertiary`\n : `primary`;\n }\n\n getSizeClass() {\n if (`${this.size}` === \"xs\") {\n return \"xs\"\n }\n else if (`${this.size}` === \"s\") {\n return \"s\"\n }\n else if (`${this.size}` === \"l\") {\n return \"l\"\n }\n else return \"\";\n }\n\n getClassNames() {\n return classNames(\n 'btn icon-button',\n `btn-${this.shape}`,\n this.size && `btn-${this.getSizeClass()}`,\n `btn-${this.getVariantClass()}`,\n this.disabled ? 'disabled' : ''\n );\n }\n}"]}
|
||||
41
Static/package/dist/collection/components/icon-button/icon-button.stories.js
vendored
Normal file
41
Static/package/dist/collection/components/icon-button/icon-button.stories.js
vendored
Normal file
@ -0,0 +1,41 @@
|
||||
import { icons } from "@infineon/infineon-icons";
|
||||
export default {
|
||||
title: "Components/Icon Button",
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
variant: "primary",
|
||||
size: 'm',
|
||||
disabled: false,
|
||||
icon: "c-info-24",
|
||||
href: "",
|
||||
target: '_blank',
|
||||
shape: 'round'
|
||||
},
|
||||
argTypes: {
|
||||
icon: {
|
||||
options: Object.values(icons).map(i => i['name']),
|
||||
control: { type: 'select' },
|
||||
},
|
||||
variant: {
|
||||
options: ['primary', 'secondary', 'tertiary'],
|
||||
control: { type: 'radio' },
|
||||
},
|
||||
size: {
|
||||
description: "Size options: s (24px), m (40px) and l (48px) - default: m",
|
||||
options: ['s', 'm', 'l'],
|
||||
control: { type: 'radio' },
|
||||
},
|
||||
target: {
|
||||
options: ['_blank', '_self', '_parent'],
|
||||
control: { type: 'radio' }
|
||||
},
|
||||
shape: {
|
||||
options: ['round', 'square'],
|
||||
control: { type: 'radio' }
|
||||
}
|
||||
},
|
||||
};
|
||||
const DefaultTemplate = (args) => `<ifx-icon-button shape="${args.shape}" variant="${args.variant}" icon="${args.icon}" href="${args.href}" target="${args.target}" size="${args.size}" disabled="${args.disabled}">
|
||||
</ifx-icon-button>`;
|
||||
export const Default = DefaultTemplate.bind({});
|
||||
//# sourceMappingURL=icon-button.stories.js.map
|
||||
1
Static/package/dist/collection/components/icon-button/icon-button.stories.js.map
vendored
Normal file
1
Static/package/dist/collection/components/icon-button/icon-button.stories.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,GAAG;IACT,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,WAAW;IACjB,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;GACf;EAED,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;MACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,OAAO,EAAE;MACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,UAAU,CAAC;MAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IAED,IAAI,EAAE;MACJ,WAAW,EAAE,4DAA4D;MACzE,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;MACxB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,MAAM,EAAE;MACN,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;MACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,KAAK,EAAE;MACL,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;MAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;GAEF;CACF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAC/B,2BAA2B,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,YAAY,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ;qBAC7J,CAAC;AAGtB,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { icons } from '@infineon/infineon-icons'\n\nexport default {\n title: \"Components/Icon Button\",\n tags: ['autodocs'],\n\n args: {\n variant: \"primary\",\n size: 'm',\n disabled: false,\n icon: \"c-info-24\",\n href: \"\",\n target: '_blank',\n shape: 'round'\n },\n\n argTypes: {\n icon: {\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n },\n variant: {\n options: ['primary', 'secondary', 'tertiary'],\n control: { type: 'radio' },\n },\n\n size: {\n description: \"Size options: s (24px), m (40px) and l (48px) - default: m\",\n options: ['s', 'm', 'l'],\n control: { type: 'radio' },\n },\n target: {\n options: ['_blank', '_self', '_parent'],\n control: { type: 'radio' }\n },\n shape: {\n options: ['round', 'square'],\n control: { type: 'radio' }\n }\n\n },\n};\n\n\nconst DefaultTemplate = (args) =>\n `<ifx-icon-button shape=\"${args.shape}\" variant=\"${args.variant}\" icon=\"${args.icon}\" href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" disabled=\"${args.disabled}\">\n </ifx-icon-button>`;\n\n\nexport const Default = DefaultTemplate.bind({});\n\n"]}
|
||||
Reference in New Issue
Block a user