Static Site
This commit is contained in:
88
Static/package/dist/collection/components/link/link.css
vendored
Normal file
88
Static/package/dist/collection/components/link/link.css
vendored
Normal file
@ -0,0 +1,88 @@
|
||||
:root {
|
||||
--ifx-font-family: "Source Sans 3";
|
||||
font-family: var(--ifx-font-family, sans-serif);
|
||||
}
|
||||
|
||||
:host {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
text-decoration: none;
|
||||
color: #0A8276;
|
||||
gap: 8px;
|
||||
line-height: 1.6;
|
||||
font-family: var(--ifx-font-family);
|
||||
}
|
||||
.link:focus {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: #0A8276;
|
||||
outline-offset: 2px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.link.bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
.link.bold:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.link.bold:active {
|
||||
color: #08665C;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.link.underlined {
|
||||
text-decoration: underline;
|
||||
text-decoration-color: #0A8276;
|
||||
color: #1D1D1D;
|
||||
}
|
||||
.link.underlined:hover {
|
||||
color: #0A8276;
|
||||
}
|
||||
.link.underlined:active {
|
||||
color: #0A8276;
|
||||
}
|
||||
.link.title {
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
color: #1D1D1D;
|
||||
}
|
||||
.link.title:hover {
|
||||
color: #0A8276;
|
||||
}
|
||||
.link.title:active {
|
||||
color: #08665C;
|
||||
}
|
||||
.link.menu {
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 26px;
|
||||
color: #1D1D1D;
|
||||
}
|
||||
.link.menu:hover {
|
||||
color: #0A8276;
|
||||
}
|
||||
.link.menu:active {
|
||||
color: #08665C;
|
||||
}
|
||||
.link.small {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.link.medium {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.link.large {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.link.extraLarge {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.link.underline {
|
||||
text-decoration: underline;
|
||||
}
|
||||
23
Static/package/dist/collection/components/link/link.e2e.js
vendored
Normal file
23
Static/package/dist/collection/components/link/link.e2e.js
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
import { newE2EPage } from "@stencil/core/testing";
|
||||
describe('Link', () => {
|
||||
it('should render', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-link href="https://example.com">Example Link</ifx-link>');
|
||||
const linkElement = await page.find('ifx-link');
|
||||
const anchorElement = await page.find('ifx-link >>> a');
|
||||
expect(linkElement).toHaveClass('hydrated');
|
||||
expect(anchorElement).toHaveClass('link');
|
||||
expect(anchorElement.getAttribute('href')).toBe('https://example.com');
|
||||
expect(anchorElement.getAttribute('target')).toBe('_self');
|
||||
});
|
||||
it('should have additional class names based on props', async () => {
|
||||
const page = await newE2EPage();
|
||||
await page.setContent('<ifx-link href="https://example.com" color="primary" bold="false" underline="false">Example Link</ifx-link>');
|
||||
const linkElement = await page.find('ifx-link');
|
||||
const anchorElement = await page.find('ifx-link >>> a');
|
||||
expect(linkElement).toHaveClass('hydrated');
|
||||
expect(anchorElement).toHaveClass('primary');
|
||||
expect(anchorElement).not.toHaveClass('underline');
|
||||
});
|
||||
});
|
||||
//# sourceMappingURL=link.e2e.js.map
|
||||
1
Static/package/dist/collection/components/link/link.e2e.js.map
vendored
Normal file
1
Static/package/dist/collection/components/link/link.e2e.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"link.e2e.js","sourceRoot":"","sources":["../../../src/components/link/link.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,MAAM,EAAE,GAAG,EAAE;EACpB,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC7B,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,8DAA8D,CAAC,CAAC;IAEtF,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAExD,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC5C,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1C,MAAM,CAAC,aAAa,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACvE,MAAM,CAAC,aAAa,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EAC7D,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,mDAAmD,EAAE,KAAK,IAAI,EAAE;IACjE,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,6GAA6G,CAAC,CAAC;IAErI,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAExD,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAC5C,MAAM,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IAC7C,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;EACrD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('Link', () => {\n it('should render', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-link href=\"https://example.com\">Example Link</ifx-link>');\n\n const linkElement = await page.find('ifx-link');\n const anchorElement = await page.find('ifx-link >>> a');\n\n expect(linkElement).toHaveClass('hydrated');\n expect(anchorElement).toHaveClass('link');\n expect(anchorElement.getAttribute('href')).toBe('https://example.com');\n expect(anchorElement.getAttribute('target')).toBe('_self');\n });\n\n it('should have additional class names based on props', async () => {\n const page = await newE2EPage();\n await page.setContent('<ifx-link href=\"https://example.com\" color=\"primary\" bold=\"false\" underline=\"false\">Example Link</ifx-link>');\n\n const linkElement = await page.find('ifx-link');\n const anchorElement = await page.find('ifx-link >>> a');\n\n expect(linkElement).toHaveClass('hydrated');\n expect(anchorElement).toHaveClass('primary');\n expect(anchorElement).not.toHaveClass('underline');\n });\n});\n"]}
|
||||
146
Static/package/dist/collection/components/link/link.js
vendored
Normal file
146
Static/package/dist/collection/components/link/link.js
vendored
Normal file
@ -0,0 +1,146 @@
|
||||
import { h } from "@stencil/core";
|
||||
import classNames from "classnames";
|
||||
export class Link {
|
||||
constructor() {
|
||||
this.href = undefined;
|
||||
this.target = '_self';
|
||||
this.size = undefined;
|
||||
this.variant = 'bold';
|
||||
}
|
||||
render() {
|
||||
return (h("a", { "aria-label": 'a navigation link button', href: this.href, target: this.target, class: this.linkClassNames() }, h("slot", null)));
|
||||
}
|
||||
getSizeClass() {
|
||||
const small = this.size === 's' ? 'small' : null;
|
||||
const medium = this.size === 'm' ? 'medium' : null;
|
||||
const large = this.size === 'l' ? 'large' : null;
|
||||
const extraLarge = this.size === 'xl' ? 'extraLarge' : null;
|
||||
if (small) {
|
||||
return small;
|
||||
}
|
||||
else if (medium) {
|
||||
return medium;
|
||||
}
|
||||
else if (large) {
|
||||
return large;
|
||||
}
|
||||
else if (extraLarge && this.variant === 'underlined') {
|
||||
return 'large';
|
||||
}
|
||||
else if (extraLarge && this.variant !== 'underlined') {
|
||||
return extraLarge;
|
||||
}
|
||||
else
|
||||
return "";
|
||||
}
|
||||
getVariantClass() {
|
||||
const bold = this.variant === 'bold' ? 'bold' : null;
|
||||
const title = this.variant === 'title' ? 'title' : null;
|
||||
const underlined = this.variant === 'underlined' ? 'underlined' : null;
|
||||
const menu = this.variant === 'menu' ? 'menu' : null;
|
||||
if (bold) {
|
||||
return bold;
|
||||
}
|
||||
else if (title) {
|
||||
return title;
|
||||
}
|
||||
else if (underlined) {
|
||||
return underlined;
|
||||
}
|
||||
else if (menu) {
|
||||
return menu;
|
||||
}
|
||||
else
|
||||
return bold;
|
||||
}
|
||||
linkClassNames() {
|
||||
return classNames('link', 'primary', this.getVariantClass(), this.getSizeClass());
|
||||
}
|
||||
static get is() { return "ifx-link"; }
|
||||
static get encapsulation() { return "shadow"; }
|
||||
static get originalStyleUrls() {
|
||||
return {
|
||||
"$": ["link.scss"]
|
||||
};
|
||||
}
|
||||
static get styleUrls() {
|
||||
return {
|
||||
"$": ["link.css"]
|
||||
};
|
||||
}
|
||||
static get properties() {
|
||||
return {
|
||||
"href": {
|
||||
"type": "string",
|
||||
"mutable": true,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "href",
|
||||
"reflect": false
|
||||
},
|
||||
"target": {
|
||||
"type": "string",
|
||||
"mutable": true,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "target",
|
||||
"reflect": false,
|
||||
"defaultValue": "'_self'"
|
||||
},
|
||||
"size": {
|
||||
"type": "string",
|
||||
"mutable": false,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "size",
|
||||
"reflect": false
|
||||
},
|
||||
"variant": {
|
||||
"type": "string",
|
||||
"mutable": true,
|
||||
"complexType": {
|
||||
"original": "string",
|
||||
"resolved": "string",
|
||||
"references": {}
|
||||
},
|
||||
"required": false,
|
||||
"optional": false,
|
||||
"docs": {
|
||||
"tags": [],
|
||||
"text": ""
|
||||
},
|
||||
"attribute": "variant",
|
||||
"reflect": false,
|
||||
"defaultValue": "'bold'"
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
//# sourceMappingURL=link.js.map
|
||||
1
Static/package/dist/collection/components/link/link.js.map
vendored
Normal file
1
Static/package/dist/collection/components/link/link.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../src/components/link/link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,UAAU,MAAM,YAAY,CAAC;AAQpC,MAAM,OAAO,IAAI;;;kBAE2B,OAAO;;mBAEN,MAAM;;EAGjD,MAAM;IACJ,OAAO,CACL,uBAAc,0BAA0B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;MACzG,eAAa,CACX,CACL,CAAA;EACH,CAAC;EAED,YAAY;IACV,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IACjD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;IACnD,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IACjD,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC;IAE5D,IAAI,KAAK,EAAE;MACT,OAAO,KAAK,CAAC;KACd;SAAM,IAAI,MAAM,EAAE;MACjB,OAAO,MAAM,CAAC;KACf;SAAM,IAAI,KAAK,EAAE;MAChB,OAAO,KAAK,CAAC;KACd;SAAM,IAAI,UAAU,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,EAAE;MACtD,OAAO,OAAO,CAAC;KAChB;SAAM,IAAI,UAAU,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,EAAE;MACtD,OAAO,UAAU,CAAC;KACnB;;MAAM,OAAO,EAAE,CAAC;EACnB,CAAC;EAED,eAAe;IACb,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IACrD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC;IACxD,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC;IACvE,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;IAErD,IAAI,IAAI,EAAE;MACR,OAAO,IAAI,CAAA;KACZ;SAAM,IAAI,KAAK,EAAE;MAChB,OAAO,KAAK,CAAC;KACd;SAAM,IAAI,UAAU,EAAE;MACrB,OAAO,UAAU,CAAC;KACnB;SAAM,IAAI,IAAI,EAAE;MACf,OAAO,IAAI,CAAC;KACb;;MAAM,OAAO,IAAI,CAAC;EACrB,CAAC;EAED,cAAc;IACZ,OAAO,UAAU,CACf,MAAM,EACN,SAAS,EACT,IAAI,CAAC,eAAe,EAAE,EACtB,IAAI,CAAC,YAAY,EAAE,CACpB,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-link',\n styleUrl: 'link.scss',\n shadow: true\n})\n\nexport class Link {\n @Prop({ mutable: true }) href: string\n @Prop({ mutable: true }) target: string = '_self';\n @Prop() size: string;\n @Prop({ mutable: true }) variant: string = 'bold';\n\n\n render() {\n return (\n <a aria-label='a navigation link button' href={this.href} target={this.target} class={this.linkClassNames()}>\n <slot></slot>\n </a>\n )\n }\n\n getSizeClass() {\n const small = this.size === 's' ? 'small' : null;\n const medium = this.size === 'm' ? 'medium' : null;\n const large = this.size === 'l' ? 'large' : null;\n const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n if (small) {\n return small;\n } else if (medium) {\n return medium;\n } else if (large) {\n return large;\n } else if (extraLarge && this.variant === 'underlined') {\n return 'large';\n } else if (extraLarge && this.variant !== 'underlined') {\n return extraLarge;\n } else return \"\";\n }\n\n getVariantClass() {\n const bold = this.variant === 'bold' ? 'bold' : null;\n const title = this.variant === 'title' ? 'title' : null;\n const underlined = this.variant === 'underlined' ? 'underlined' : null;\n const menu = this.variant === 'menu' ? 'menu' : null;\n\n if (bold) {\n return bold\n } else if (title) {\n return title;\n } else if (underlined) {\n return underlined;\n } else if (menu) {\n return menu;\n } else return bold;\n }\n\n linkClassNames() {\n return classNames(\n 'link',\n 'primary',\n this.getVariantClass(),\n this.getSizeClass()\n );\n }\n}\n\n"]}
|
||||
36
Static/package/dist/collection/components/link/link.stories.js
vendored
Normal file
36
Static/package/dist/collection/components/link/link.stories.js
vendored
Normal file
@ -0,0 +1,36 @@
|
||||
export default {
|
||||
title: "Components/Link",
|
||||
tags: ['autodocs'],
|
||||
args: {
|
||||
label: 'Link',
|
||||
href: "",
|
||||
target: '_blank',
|
||||
size: 'm',
|
||||
variant: 'bold'
|
||||
},
|
||||
argTypes: {
|
||||
target: {
|
||||
options: ['_blank', '_self', '_parent'],
|
||||
control: { type: 'radio' }
|
||||
},
|
||||
size: {
|
||||
description: "Font Size options: s (14px), m (16px), l (18px), xl (20px) - default: m",
|
||||
options: ['s', 'm', 'l', 'xl'],
|
||||
control: { type: 'radio' }
|
||||
},
|
||||
variant: {
|
||||
options: ['bold', 'underlined', 'title', 'menu'],
|
||||
control: { type: 'radio' }
|
||||
}
|
||||
},
|
||||
};
|
||||
const DefaultTemplate = (args) => `<ifx-link href="${args.href}" target="${args.target}" size="${args.size}" variant="${args.variant}" >
|
||||
${args.label}
|
||||
</ifx-link>`;
|
||||
export const Default = DefaultTemplate.bind({});
|
||||
const TemplateWithIcon = (args) => `<ifx-link href="${args.href}" target="${args.target}" size="${args.size}" variant="${args.variant}" >
|
||||
${args.label}
|
||||
<ifx-icon icon="arrow-right-16"></ifx-icon>
|
||||
</ifx-link>`;
|
||||
export const WithIcon = TemplateWithIcon.bind({});
|
||||
//# sourceMappingURL=link.stories.js.map
|
||||
1
Static/package/dist/collection/components/link/link.stories.js.map
vendored
Normal file
1
Static/package/dist/collection/components/link/link.stories.js.map
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"file":"link.stories.js","sourceRoot":"","sources":["../../../src/components/link/link.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,iBAAiB;EACxB,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,IAAI,EAAE;IACJ,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,EAAE;IACR,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,GAAG;IACT,OAAO,EAAE,MAAM;GAChB;EAED,QAAQ,EAAE;IACR,MAAM,EAAE;MACN,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,CAAC;MACvC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,IAAI,EAAE;MACJ,WAAW,EAAE,yEAAyE;MACtF,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC;MAC9B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;IACD,OAAO,EAAE;MACP,OAAO,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,CAAC;MAChD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;KAC3B;GACF;CACF,CAAC;AAGF,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,EAAE,CAC/B,mBAAmB,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,OAAO;IAChG,IAAI,CAAC,KAAK;cACA,CAAC;AAGf,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE,CAChC,mBAAmB,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,OAAO;IAChG,IAAI,CAAC,KAAK;;cAEA,CAAC;AAGf,MAAM,CAAC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["export default {\n title: \"Components/Link\",\n tags: ['autodocs'],\n\n args: {\n label: 'Link',\n href: \"\",\n target: '_blank',\n size: 'm',\n variant: 'bold'\n },\n\n argTypes: {\n target: {\n options: ['_blank', '_self', '_parent'],\n control: { type: 'radio' }\n },\n size: {\n description: \"Font Size options: s (14px), m (16px), l (18px), xl (20px) - default: m\",\n options: ['s', 'm', 'l', 'xl'],\n control: { type: 'radio' }\n },\n variant: {\n options: ['bold', 'underlined', 'title', 'menu'],\n control: { type: 'radio' }\n }\n },\n};\n\n\nconst DefaultTemplate = (args) =>\n `<ifx-link href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" >\n ${args.label}\n </ifx-link>`;\n\n\nexport const Default = DefaultTemplate.bind({});\n\nconst TemplateWithIcon = (args) =>\n `<ifx-link href=\"${args.href}\" target=\"${args.target}\" size=\"${args.size}\" variant=\"${args.variant}\" >\n ${args.label}\n <ifx-icon icon=\"arrow-right-16\"></ifx-icon>\n </ifx-link>`;\n\n\nexport const WithIcon = TemplateWithIcon.bind({});\n\n\n"]}
|
||||
Reference in New Issue
Block a user