@jumpgroup/jump-design-system 0.1.6 → 0.1.8
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/dist/cjs/{index-46644e39.js → index-91a3ed32.js} +42 -448
- package/dist/cjs/index-91a3ed32.js.map +1 -0
- package/dist/cjs/jump-button.cjs.entry.js +4 -3
- package/dist/cjs/jump-button.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-design-system.cjs.js +2 -2
- package/dist/cjs/jump-icon.cjs.entry.js +1 -1
- package/dist/cjs/jump-pagination.cjs.entry.js +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/collection/components/jump-button/jump-button.css +15 -1
- package/dist/collection/components/jump-button/jump-button.js +21 -1
- package/dist/collection/components/jump-button/jump-button.js.map +1 -1
- package/dist/collection/components/jump-button/jump-button.stories.js +211 -26
- package/dist/collection/components/jump-button/jump-button.stories.js.map +1 -1
- package/dist/components/jump-button.js +7 -4
- package/dist/components/jump-button.js.map +1 -1
- package/dist/esm/{index-b0176170.js → index-3cf3394c.js} +42 -448
- package/dist/esm/index-3cf3394c.js.map +1 -0
- package/dist/esm/jump-button.entry.js +4 -3
- package/dist/esm/jump-button.entry.js.map +1 -1
- package/dist/esm/jump-design-system.js +3 -3
- package/dist/esm/jump-icon.entry.js +1 -1
- package/dist/esm/jump-pagination.entry.js +1 -1
- package/dist/esm/loader.js +3 -3
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/p-7216d46f.js +3 -0
- package/dist/jump-design-system/p-7216d46f.js.map +1 -0
- package/dist/jump-design-system/{p-0d2b55a8.entry.js → p-85fbbf60.entry.js} +2 -2
- package/dist/jump-design-system/p-e2af0fd9.entry.js +2 -0
- package/dist/jump-design-system/p-e2af0fd9.entry.js.map +1 -0
- package/dist/jump-design-system/{p-3cbc3a68.entry.js → p-f4cfa17d.entry.js} +2 -2
- package/dist/jump-design-system-elements.json +4 -0
- package/dist/types/components/jump-button/jump-button.d.ts +4 -0
- package/dist/types/components/jump-button/jump-button.stories.d.ts +18 -3
- package/dist/types/components.d.ts +8 -0
- package/package.json +1 -1
- package/dist/cjs/index-46644e39.js.map +0 -1
- package/dist/esm/index-b0176170.js.map +0 -1
- package/dist/jump-design-system/p-1bb7f2a5.entry.js +0 -2
- package/dist/jump-design-system/p-1bb7f2a5.entry.js.map +0 -1
- package/dist/jump-design-system/p-68bce598.js +0 -3
- package/dist/jump-design-system/p-68bce598.js.map +0 -1
- /package/dist/jump-design-system/{p-0d2b55a8.entry.js.map → p-85fbbf60.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-3cbc3a68.entry.js.map → p-f4cfa17d.entry.js.map} +0 -0
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-91a3ed32.js');
|
|
6
6
|
|
|
7
|
-
const jumpButtonCss = "jump-button button,jump-button a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}jump-button{display:inline-flex;align-items:center;--jump-button-color:#ffffff;--jump-button-color-disabled:#cbcbcb;--jump-button-background:var(--primary-standard);--jump-button-background-outline:transparent;--jump-button-color-hover:#ffffff;--jump-button-background-hover:var(--primary-hard);--jump-button-border-radius:var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);--jump-button-padding:1rem 1.25rem}jump-button button,jump-button a{background-color:var(--jump-button-background);border-radius:var(--jump-button-border-radius);color:var(--jump-button-color);position:relative;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-weight:var(--fw-
|
|
7
|
+
const jumpButtonCss = "jump-button button,jump-button a{background-color:transparent;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}jump-button{display:inline-flex;align-items:center;--jump-button-color:#ffffff;--jump-button-color-disabled:#cbcbcb;--jump-button-background:var(--primary-standard);--jump-button-background-outline:transparent;--jump-button-color-hover:#ffffff;--jump-button-background-hover:var(--primary-hard);--jump-button-border-radius:var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);--jump-button-padding:1rem 1.25rem}jump-button button,jump-button a{background-color:var(--jump-button-background);border-radius:var(--jump-button-border-radius);color:var(--jump-button-color);position:relative;font-family:var(--ff-primary, \"Arial\"), sans-serif;font-weight:var(--fw-700, 700);font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3);display:flex;align-items:center;gap:var(--jump-button-gap, 0.5rem);text-decoration:none;padding:var(--jump-button-padding)}jump-button button:hover,jump-button a:hover{background-color:var(--jump-button-background-hover);color:var(--jump-button-color-hover)}jump-button button[data-variant=primary],jump-button a[data-variant=primary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--primary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--primary-hard)}jump-button button[data-variant=secondary],jump-button a[data-variant=secondary]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--secondary-standard);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--secondary-hard)}jump-button button[data-variant=neutral],jump-button a[data-variant=neutral]{--jump-button-color:var(--neutral-white);--jump-button-background:var(--neutral-grey-secondary);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:var(--neutral-grey-primary)}jump-button button[data-variant=white],jump-button a[data-variant=white]{--jump-button-color:var(--neutral-grey-primary);--jump-button-background:var(--neutral-white);--jump-button-color-hover:var(--neutral-grey-primary);--jump-button-background-hover:var(--neutral-grey-background)}jump-button button[disabled],jump-button a[disabled]{--jump-button-background:var(--jump-button-color-disabled);--jump-button-background-hover:var(--jump-button-color-disabled);cursor:not-allowed}jump-button button[data-pill],jump-button a[data-pill]{border-radius:100rem}jump-button button[data-size=small],jump-button a[data-size=small]{font-size:var(--fs-300, 0.875rem);line-height:var(--lh-300, 1.2);--jump-button-padding:0.5rem 1rem}jump-button button[data-size=medium],jump-button a[data-size=medium]{font-size:var(--fs-400, 1rem);line-height:var(--lh-400, 1.3)}jump-button button[data-size=large],jump-button a[data-size=large]{font-size:var(--fs-500, 1.125rem);line-height:var(--lh-500, 1.4);--jump-button-padding:1.125rem 1.5rem}jump-button button[data-outline],jump-button a[data-outline]{background-color:var(--jump-button-background-outline);border:1px solid var(--jump-button-background);color:var(--jump-button-background)}jump-button button[data-outline]:hover,jump-button a[data-outline]:hover{background-color:var(--jump-button-background-hover);border:1px solid var(--jump-button-background-hover);color:var(--jump-button-color-hover)}jump-button button[data-text],jump-button a[data-text]{background-color:transparent;border:none;color:var(--jump-button-background);padding:0}jump-button button[data-text]:hover,jump-button a[data-text]:hover{background-color:transparent;border:none;color:var(--jump-button-background-hover)}jump-button button[data-only-icon],jump-button a[data-only-icon]{--jump-button-padding:1.125rem}jump-button button[data-only-icon][data-size=small],jump-button a[data-only-icon][data-size=small]{--jump-button-padding:0.5rem}jump-button button[data-only-icon][data-size=medium],jump-button a[data-only-icon][data-size=medium]{--jump-button-padding:1rem}jump-button button[data-only-icon][data-size=large],jump-button a[data-only-icon][data-size=large]{--jump-button-padding:1.125rem}jump-button button.chat,jump-button a.chat{--jump-button-color:var(--neutral-white);--jump-button-background:hsla(133, 54%, 58%, 1);--jump-button-color-hover:var(--neutral-white);--jump-button-background-hover:hsla(161, 63%, 31%, 1)}";
|
|
8
8
|
const JumpButtonStyle0 = jumpButtonCss;
|
|
9
9
|
|
|
10
10
|
const AppButton = class {
|
|
@@ -24,9 +24,10 @@ const AppButton = class {
|
|
|
24
24
|
this.value = undefined;
|
|
25
25
|
this.ariaLabel = undefined;
|
|
26
26
|
this.class = undefined;
|
|
27
|
+
this.buttonId = undefined;
|
|
27
28
|
}
|
|
28
29
|
render() {
|
|
29
|
-
return (index.h(index.Host, { key: '
|
|
30
|
+
return (index.h(index.Host, { key: 'd4555173c1ebe30560269c22cfd4fbb71c43494b' }, this.href ? (index.h("a", { href: this.href, id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, "aria-label": this.ariaLabel, target: this.target }, index.h("slot", { name: "prefix" }), !this.onlyIcon && index.h("slot", null), index.h("slot", { name: "suffix" }))) : (index.h("button", { id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, disabled: this.disabled, "aria-label": this.ariaLabel, type: this.type, name: this.name, value: this.value }, index.h("slot", { name: "prefix" }), !this.onlyIcon && index.h("slot", null), index.h("slot", { name: "suffix" })))));
|
|
30
31
|
}
|
|
31
32
|
};
|
|
32
33
|
AppButton.style = JumpButtonStyle0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"jump-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,
|
|
1
|
+
{"file":"jump-button.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,s3IAAs3I,CAAC;AAC74I,yBAAe,aAAa;;MCMf,SAAS;;;wBAIQ,KAAK;uBAK4C,SAAS;uBAK5C,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;wBAKD,KAAK;oBAKV,SAAS;;oBAUU,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEnD,MAAM;QACJ,QACEA,QAACC,UAAI,uDACF,IAAI,CAAC,IAAI,IACRD,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAChQA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAIA,qBAAa,EAChCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJA,oBAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAC7SA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAIA,qBAAa,EAChCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/jump-button/jump-button.scss?tag=jump-button&encapsulation=shadow","src/components/jump-button/jump-button.tsx"],"sourcesContent":["%reset-button {\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n cursor: pointer;\n}\n\njump-button {\n display: inline-flex;\n align-items: center;\n --jump-button-color: #ffffff;\n --jump-button-color-disabled: #cbcbcb;\n --jump-button-background: var(--primary-standard);\n --jump-button-background-outline: transparent;\n --jump-button-color-hover: #ffffff;\n --jump-button-background-hover: var(--primary-hard);\n --jump-button-border-radius: var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem) var(--border-radius-1, 0.1875rem);\n --jump-button-padding: 1rem 1.25rem;\n\n button,\n a {\n @extend %reset-button;\n background-color: var(--jump-button-background);\n border-radius: var(--jump-button-border-radius);\n color: var(--jump-button-color);\n position: relative;\n font-family: var(--ff-primary, 'Arial'), sans-serif;\n font-weight: var(--fw-700, 700);\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n display: flex;\n align-items: center;\n gap: var(--jump-button-gap, 0.5rem);\n text-decoration: none;\n\n //TODO: internal padding of the button\n padding: var(--jump-button-padding);\n\n // TODO: gestire il focus con un outline\n &:hover {\n background-color: var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n\n &[data-variant='primary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--primary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--primary-hard);\n }\n\n &[data-variant='secondary'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--secondary-standard);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--secondary-hard);\n }\n\n &[data-variant='neutral'] {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: var(--neutral-grey-secondary);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: var(--neutral-grey-primary);\n }\n\n &[data-variant='white'] {\n --jump-button-color: var(--neutral-grey-primary);\n --jump-button-background: var(--neutral-white);\n --jump-button-color-hover: var(--neutral-grey-primary);\n --jump-button-background-hover: var(--neutral-grey-background);\n }\n\n &[disabled] {\n --jump-button-background: var(--jump-button-color-disabled);\n --jump-button-background-hover: var(--jump-button-color-disabled);\n cursor: not-allowed;\n }\n\n &[data-pill] {\n border-radius: 100rem;\n }\n\n &[data-size='small'] {\n font-size: var(--fs-300, 0.875rem);\n line-height: var(--lh-300, 1.2);\n --jump-button-padding: 0.5rem 1rem;\n }\n\n &[data-size='medium'] {\n font-size: var(--fs-400, 1rem);\n line-height: var(--lh-400, 1.3);\n }\n\n &[data-size='large'] {\n font-size: var(--fs-500, 1.125rem);\n line-height: var(--lh-500, 1.4);\n --jump-button-padding: 1.125rem 1.5rem;\n }\n\n &[data-outline] {\n background-color: var(--jump-button-background-outline);\n border: 1px solid var(--jump-button-background);\n color: var(--jump-button-background);\n &:hover {\n background-color: var(--jump-button-background-hover);\n border: 1px solid var(--jump-button-background-hover);\n color: var(--jump-button-color-hover);\n }\n }\n\n &[data-text] {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background);\n padding: 0;\n &:hover {\n background-color: transparent;\n border: none;\n color: var(--jump-button-background-hover);\n }\n }\n\n &[data-only-icon] {\n --jump-button-padding: 1.125rem;\n }\n &[data-only-icon][data-size='small'] {\n --jump-button-padding: 0.5rem;\n }\n &[data-only-icon][data-size='medium'] {\n --jump-button-padding: 1rem;\n }\n &[data-only-icon][data-size='large'] {\n --jump-button-padding: 1.125rem;\n }\n\n &.chat {\n --jump-button-color: var(--neutral-white);\n --jump-button-background: hsla(133, 54%, 58%, 1);\n --jump-button-color-hover: var(--neutral-white);\n --jump-button-background-hover: hsla(161, 63%, 31%, 1);\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-button',\n styleUrl: 'jump-button.scss',\n shadow: true,\n})\nexport class AppButton {\n /**\n * Set the button as disabled; Vale solo per i bottoni\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Indicates the variant of the button\n */\n @Prop({reflect: true}) variant: 'primary'|'secondary'|'tertiary'|'neutral' = 'primary';\n\n /**\n * Indicates the button as outline\n */\n @Prop({reflect: true}) outline: boolean = false;\n\n /**\n * Indicates the size of the button\n */\n @Prop({reflect: true}) size: string = 'medium';\n\n /**\n * Indicates the button as pill\n */\n @Prop({reflect: true}) pill: boolean = false;\n\n /**\n * Indicates the button as text\n */\n @Prop({reflect: true}) text: boolean = false;\n\n /**\n * Indicates the button as only icon\n **/\n @Prop({reflect: true}) onlyIcon: boolean = false;\n\n /**\n * Indicates if button becames a anchor\n **/\n @Prop({reflect: true}) href: string = undefined;\n\n /**\n * Indicates the type of anchor's target \n **/\n @Prop({reflect: true}) target: '_blank' | '_parent' | '_self' | '_top'\n\n /**\n * Indicates type button\n **/\n @Prop({reflect: true}) type: 'button'|'submit'|'reset' = 'button';\n\n /**\n * Indicates the name that the sender button will send\n **/\n @Prop({reflect: true}) name: string = undefined;\n\n /**\n * Indicates the value that the sender button will send\n **/\n @Prop({reflect: true}) value: string = undefined;\n\n /**\n * Indicates the value of text alternative to an element that has no visible text on the screen\n **/\n @Prop({reflect: true}) ariaLabel: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop({reflect: true}) class: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop({reflect: true}) buttonId: string = undefined;\n\n render() {\n return (\n <Host>\n {this.href ? (\n <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot>}\n <slot name=\"suffix\"></slot>\n </a>\n ) : ( \n <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot> }\n <slot name=\"suffix\"></slot>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"],"version":3}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-91a3ed32.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
/*
|
|
@@ -19,7 +19,7 @@ const patchBrowser = () => {
|
|
|
19
19
|
|
|
20
20
|
patchBrowser().then(async (options) => {
|
|
21
21
|
await appGlobals.globalScripts();
|
|
22
|
-
return index.bootstrapLazy([["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]],["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-button.cjs",[[
|
|
22
|
+
return index.bootstrapLazy([["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]],["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-button.cjs",[[1,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-91a3ed32.js');
|
|
6
6
|
|
|
7
7
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
8
8
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-91a3ed32.js');
|
|
6
6
|
|
|
7
7
|
const jumpPaginationCss = ":host{display:block}.JumpPagination{--pagination-label-color:var(--neutral-grey-secondary);--pagination-arrows-color:var(--neutral-grey-secondary);font-family:var(--ff-primary)}.JumpPagination__Wrapper{display:flex;justify-content:space-between}.JumpPagination__Wrapper .elementsPerPage{display:flex;gap:1rem;align-items:center}.JumpPagination__Wrapper .elementsPerPage label{color:var(--pagination-label-color);font-size:14px;font-weight:normal}.JumpPagination__Wrapper .indicators{font-size:16px;font-weight:normal;display:flex;justify-content:space-between;gap:20px;color:var(--pagination-label-color)}.JumpPagination__Wrapper .indicators .arrow{color:var(--pagination-arrows-color);display:flex;align-items:center;gap:10px}.JumpPagination__Wrapper .indicators .elements{color:var(--pagination-label-color);display:flex;align-items:center;gap:5px}";
|
|
8
8
|
const JumpPaginationStyle0 = jumpPaginationCss;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
const index = require('./index-
|
|
5
|
+
const index = require('./index-91a3ed32.js');
|
|
6
6
|
const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
7
7
|
|
|
8
8
|
const defineCustomElements = async (win, options) => {
|
|
9
9
|
if (typeof window === 'undefined') return undefined;
|
|
10
10
|
await appGlobals.globalScripts();
|
|
11
|
-
return index.bootstrapLazy([["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]],["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-button.cjs",[[
|
|
11
|
+
return index.bootstrapLazy([["jump-icon.cjs",[[0,"jump-icon",{"name":[1],"class":[1]}]]],["jump-pagination.cjs",[[0,"jump-pagination",{"totalElements":[514,"total-elements"],"currentPage":[514,"current-page"],"lastPage":[514,"last-page"],"labelElementsPerPage":[513,"label-elements-per-page"],"elementsRanges":[16],"firstPage":[514,"first-page"],"completeVersion":[516,"complete-version"],"showAdditionalChrevrons":[516,"show-additional-chrevrons"]}]]],["jump-button.cjs",[[1,"jump-button",{"disabled":[4],"variant":[513],"outline":[516],"size":[513],"pill":[516],"text":[516],"onlyIcon":[516,"only-icon"],"href":[513],"target":[513],"type":[513],"name":[513],"value":[513],"ariaLabel":[513,"aria-label"],"class":[513],"buttonId":[513,"button-id"]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -28,7 +28,7 @@ jump-button a {
|
|
|
28
28
|
color: var(--jump-button-color);
|
|
29
29
|
position: relative;
|
|
30
30
|
font-family: var(--ff-primary, "Arial"), sans-serif;
|
|
31
|
-
font-weight: var(--fw-
|
|
31
|
+
font-weight: var(--fw-700, 700);
|
|
32
32
|
font-size: var(--fs-400, 1rem);
|
|
33
33
|
line-height: var(--lh-400, 1.3);
|
|
34
34
|
display: flex;
|
|
@@ -56,6 +56,20 @@ jump-button a[data-variant=secondary] {
|
|
|
56
56
|
--jump-button-color-hover: var(--neutral-white);
|
|
57
57
|
--jump-button-background-hover: var(--secondary-hard);
|
|
58
58
|
}
|
|
59
|
+
jump-button button[data-variant=neutral],
|
|
60
|
+
jump-button a[data-variant=neutral] {
|
|
61
|
+
--jump-button-color: var(--neutral-white);
|
|
62
|
+
--jump-button-background: var(--neutral-grey-secondary);
|
|
63
|
+
--jump-button-color-hover: var(--neutral-white);
|
|
64
|
+
--jump-button-background-hover: var(--neutral-grey-primary);
|
|
65
|
+
}
|
|
66
|
+
jump-button button[data-variant=white],
|
|
67
|
+
jump-button a[data-variant=white] {
|
|
68
|
+
--jump-button-color: var(--neutral-grey-primary);
|
|
69
|
+
--jump-button-background: var(--neutral-white);
|
|
70
|
+
--jump-button-color-hover: var(--neutral-grey-primary);
|
|
71
|
+
--jump-button-background-hover: var(--neutral-grey-background);
|
|
72
|
+
}
|
|
59
73
|
jump-button button[disabled],
|
|
60
74
|
jump-button a[disabled] {
|
|
61
75
|
--jump-button-background: var(--jump-button-color-disabled);
|
|
@@ -15,11 +15,13 @@ export class AppButton {
|
|
|
15
15
|
this.value = undefined;
|
|
16
16
|
this.ariaLabel = undefined;
|
|
17
17
|
this.class = undefined;
|
|
18
|
+
this.buttonId = undefined;
|
|
18
19
|
}
|
|
19
20
|
render() {
|
|
20
|
-
return (h(Host, { key: '
|
|
21
|
+
return (h(Host, { key: 'd4555173c1ebe30560269c22cfd4fbb71c43494b' }, this.href ? (h("a", { href: this.href, id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, "aria-label": this.ariaLabel, target: this.target }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" }))) : (h("button", { id: this.buttonId, class: this.class, "data-variant": this.variant, "data-outline": this.outline, "data-size": this.size, "data-pill": this.pill, "data-text": this.text, "data-only-icon": this.onlyIcon, disabled: this.disabled, "aria-label": this.ariaLabel, type: this.type, name: this.name, value: this.value }, h("slot", { name: "prefix" }), !this.onlyIcon && h("slot", null), h("slot", { name: "suffix" })))));
|
|
21
22
|
}
|
|
22
23
|
static get is() { return "jump-button"; }
|
|
24
|
+
static get encapsulation() { return "shadow"; }
|
|
23
25
|
static get originalStyleUrls() {
|
|
24
26
|
return {
|
|
25
27
|
"$": ["jump-button.scss"]
|
|
@@ -282,6 +284,24 @@ export class AppButton {
|
|
|
282
284
|
"attribute": "class",
|
|
283
285
|
"reflect": true,
|
|
284
286
|
"defaultValue": "undefined"
|
|
287
|
+
},
|
|
288
|
+
"buttonId": {
|
|
289
|
+
"type": "string",
|
|
290
|
+
"mutable": false,
|
|
291
|
+
"complexType": {
|
|
292
|
+
"original": "string",
|
|
293
|
+
"resolved": "string",
|
|
294
|
+
"references": {}
|
|
295
|
+
},
|
|
296
|
+
"required": false,
|
|
297
|
+
"optional": false,
|
|
298
|
+
"docs": {
|
|
299
|
+
"tags": [],
|
|
300
|
+
"text": "Indicates classes of the component"
|
|
301
|
+
},
|
|
302
|
+
"attribute": "button-id",
|
|
303
|
+
"reflect": true,
|
|
304
|
+
"defaultValue": "undefined"
|
|
285
305
|
}
|
|
286
306
|
};
|
|
287
307
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-button.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;wBAIQ,KAAK;uBAK4C,SAAS;uBAK5C,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;wBAKD,KAAK;oBAKV,SAAS;;oBAUU,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;;
|
|
1
|
+
{"version":3,"file":"jump-button.js","sourceRoot":"","sources":["../../../src/components/jump-button/jump-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;wBAIQ,KAAK;uBAK4C,SAAS;uBAK5C,KAAK;oBAKT,QAAQ;oBAKP,KAAK;oBAKL,KAAK;wBAKD,KAAK;oBAKV,SAAS;;oBAUU,QAAQ;oBAK3B,SAAS;qBAKR,SAAS;yBAKL,SAAS;qBAKb,SAAS;wBAKN,SAAS;;IAEnD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM;YAChQ,YAAM,IAAI,EAAC,QAAQ,GAAQ;YAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa;YAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACL,CAAC,CAAC,CAAC,CACF,cAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,kBAAgB,IAAI,CAAC,OAAO,kBAAgB,IAAI,CAAC,OAAO,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,eAAa,IAAI,CAAC,IAAI,oBAAkB,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK;YAC7S,YAAM,IAAI,EAAC,QAAQ,GAAQ;YAC1B,CAAC,IAAI,CAAC,QAAQ,IAAI,eAAa;YAChC,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACpB,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'jump-button',\n styleUrl: 'jump-button.scss',\n shadow: true,\n})\nexport class AppButton {\n /**\n * Set the button as disabled; Vale solo per i bottoni\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Indicates the variant of the button\n */\n @Prop({reflect: true}) variant: 'primary'|'secondary'|'tertiary'|'neutral' = 'primary';\n\n /**\n * Indicates the button as outline\n */\n @Prop({reflect: true}) outline: boolean = false;\n\n /**\n * Indicates the size of the button\n */\n @Prop({reflect: true}) size: string = 'medium';\n\n /**\n * Indicates the button as pill\n */\n @Prop({reflect: true}) pill: boolean = false;\n\n /**\n * Indicates the button as text\n */\n @Prop({reflect: true}) text: boolean = false;\n\n /**\n * Indicates the button as only icon\n **/\n @Prop({reflect: true}) onlyIcon: boolean = false;\n\n /**\n * Indicates if button becames a anchor\n **/\n @Prop({reflect: true}) href: string = undefined;\n\n /**\n * Indicates the type of anchor's target \n **/\n @Prop({reflect: true}) target: '_blank' | '_parent' | '_self' | '_top'\n\n /**\n * Indicates type button\n **/\n @Prop({reflect: true}) type: 'button'|'submit'|'reset' = 'button';\n\n /**\n * Indicates the name that the sender button will send\n **/\n @Prop({reflect: true}) name: string = undefined;\n\n /**\n * Indicates the value that the sender button will send\n **/\n @Prop({reflect: true}) value: string = undefined;\n\n /**\n * Indicates the value of text alternative to an element that has no visible text on the screen\n **/\n @Prop({reflect: true}) ariaLabel: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop({reflect: true}) class: string = undefined;\n\n /**\n * Indicates classes of the component\n **/\n @Prop({reflect: true}) buttonId: string = undefined;\n\n render() {\n return (\n <Host>\n {this.href ? (\n <a href={this.href} id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} aria-label={this.ariaLabel} target={this.target}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot>}\n <slot name=\"suffix\"></slot>\n </a>\n ) : ( \n <button id={this.buttonId} class={this.class} data-variant={this.variant} data-outline={this.outline} data-size={this.size} data-pill={this.pill} data-text={this.text} data-only-icon={this.onlyIcon} disabled={this.disabled} aria-label={this.ariaLabel} type={this.type} name={this.name} value={this.value}>\n <slot name=\"prefix\"></slot>\n {!this.onlyIcon && <slot></slot> }\n <slot name=\"suffix\"></slot>\n </button>\n )}\n </Host>\n );\n }\n\n}\n"]}
|
|
@@ -14,7 +14,9 @@ export default {
|
|
|
14
14
|
control: 'select',
|
|
15
15
|
options: [
|
|
16
16
|
'primary',
|
|
17
|
-
'secondary'
|
|
17
|
+
'secondary',
|
|
18
|
+
'neutral',
|
|
19
|
+
'white'
|
|
18
20
|
],
|
|
19
21
|
},
|
|
20
22
|
outline: {
|
|
@@ -165,14 +167,19 @@ export default {
|
|
|
165
167
|
_top: '_top'
|
|
166
168
|
}
|
|
167
169
|
},
|
|
170
|
+
id: {
|
|
171
|
+
name: 'ID',
|
|
172
|
+
description: 'Imposta l\'id del bottone',
|
|
173
|
+
control: 'text'
|
|
174
|
+
},
|
|
168
175
|
}
|
|
169
176
|
};
|
|
170
177
|
// TODO: non far passare gli undefined
|
|
171
178
|
const Anchor = (args) => {
|
|
172
|
-
return `<jump-button class="${args.class} "variant="${args.variant}" size="${args.size}" href="${args.href}" target="${args.target}" ariaLabel="${args.ariaLabel}" ${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}${!args.label || args.iconOnly ? ' only-icon' : ''}>${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${!args.iconOnly ? args.label : ''}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
|
|
179
|
+
return `<jump-button id="${args.id}" class="${args.class} "variant="${args.variant}" size="${args.size}" href="${args.href}" target="${args.target}" ariaLabel="${args.ariaLabel}" ${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}${!args.label || args.iconOnly ? ' only-icon' : ''}>${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${!args.iconOnly ? args.label : ''}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
|
|
173
180
|
};
|
|
174
181
|
const Button = (args) => {
|
|
175
|
-
return `<jump-button class="${args.class} "variant="${args.variant}" size="${args.size}" type="${args.type}" ariaLabel="${args.ariaLabel}" name="${args.name}" value="${args.value}" ${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''} ${!args.label || args.iconOnly ? ' only-icon' : ''}>${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${!args.iconOnly ? args.label : ''}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
|
|
182
|
+
return `<jump-button id="${args.id}" class="${args.class} "variant="${args.variant}" size="${args.size}" type="${args.type}" ariaLabel="${args.ariaLabel}" name="${args.name}" value="${args.value}" ${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''} ${!args.label || args.iconOnly ? ' only-icon' : ''}>${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${!args.iconOnly ? args.label : ''}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
|
|
176
183
|
};
|
|
177
184
|
const Template = (args) => `${args.href ? Anchor(args) : !args.label && !args.showIcon ? 'Errore nella configurazione del bottone' : Button(args)}`;
|
|
178
185
|
// TODO: gestire la prop che è opzione: cmq se copio il codice e tolgo le props undefined dovrebbe andare tutto
|
|
@@ -194,6 +201,60 @@ Primary.args = {
|
|
|
194
201
|
value: 'value bottone',
|
|
195
202
|
ariaLabel: 'sono un bottone'
|
|
196
203
|
};
|
|
204
|
+
export const Secondary = Template.bind({});
|
|
205
|
+
Secondary.args = {
|
|
206
|
+
label: 'Secondary',
|
|
207
|
+
variant: 'secondary',
|
|
208
|
+
outline: false,
|
|
209
|
+
pill: false,
|
|
210
|
+
size: 'medium',
|
|
211
|
+
disabled: false,
|
|
212
|
+
text: false,
|
|
213
|
+
showIcon: false,
|
|
214
|
+
iconOnly: false,
|
|
215
|
+
iconName: Object.keys(feather.icons)[0],
|
|
216
|
+
iconPosition: 'left',
|
|
217
|
+
type: 'button',
|
|
218
|
+
name: 'nome bottone',
|
|
219
|
+
value: 'value bottone',
|
|
220
|
+
ariaLabel: 'sono un bottone'
|
|
221
|
+
};
|
|
222
|
+
export const Neutral = Template.bind({});
|
|
223
|
+
Neutral.args = {
|
|
224
|
+
label: 'Neutral',
|
|
225
|
+
variant: 'neutral',
|
|
226
|
+
outline: false,
|
|
227
|
+
pill: false,
|
|
228
|
+
size: 'medium',
|
|
229
|
+
disabled: false,
|
|
230
|
+
text: false,
|
|
231
|
+
showIcon: false,
|
|
232
|
+
iconOnly: false,
|
|
233
|
+
iconName: Object.keys(feather.icons)[0],
|
|
234
|
+
iconPosition: 'left',
|
|
235
|
+
type: 'button',
|
|
236
|
+
name: 'nome bottone',
|
|
237
|
+
value: 'value bottone',
|
|
238
|
+
ariaLabel: 'sono un bottone'
|
|
239
|
+
};
|
|
240
|
+
export const White = Template.bind({});
|
|
241
|
+
White.args = {
|
|
242
|
+
label: 'White',
|
|
243
|
+
variant: 'white',
|
|
244
|
+
outline: false,
|
|
245
|
+
pill: false,
|
|
246
|
+
size: 'medium',
|
|
247
|
+
disabled: false,
|
|
248
|
+
text: false,
|
|
249
|
+
showIcon: false,
|
|
250
|
+
iconOnly: false,
|
|
251
|
+
iconName: Object.keys(feather.icons)[0],
|
|
252
|
+
iconPosition: 'left',
|
|
253
|
+
type: 'button',
|
|
254
|
+
name: 'nome bottone',
|
|
255
|
+
value: 'value bottone',
|
|
256
|
+
ariaLabel: 'sono un bottone'
|
|
257
|
+
};
|
|
197
258
|
export const OutlinePrimary = Template.bind({});
|
|
198
259
|
OutlinePrimary.args = {
|
|
199
260
|
label: 'Outline Primary',
|
|
@@ -212,6 +273,60 @@ OutlinePrimary.args = {
|
|
|
212
273
|
value: 'value bottone',
|
|
213
274
|
ariaLabel: 'sono un bottone'
|
|
214
275
|
};
|
|
276
|
+
export const OutlineSecondary = Template.bind({});
|
|
277
|
+
OutlineSecondary.args = {
|
|
278
|
+
label: 'Outline Secondary',
|
|
279
|
+
variant: 'secondary',
|
|
280
|
+
outline: true,
|
|
281
|
+
pill: false,
|
|
282
|
+
size: 'medium',
|
|
283
|
+
disabled: false,
|
|
284
|
+
text: false,
|
|
285
|
+
showIcon: false,
|
|
286
|
+
iconOnly: false,
|
|
287
|
+
iconName: Object.keys(feather.icons)[0],
|
|
288
|
+
iconPosition: 'left',
|
|
289
|
+
type: 'button',
|
|
290
|
+
name: 'nome bottone',
|
|
291
|
+
value: 'value bottone',
|
|
292
|
+
ariaLabel: 'sono un bottone'
|
|
293
|
+
};
|
|
294
|
+
export const OutlineGrey = Template.bind({});
|
|
295
|
+
OutlineGrey.args = {
|
|
296
|
+
label: 'Outline Neutral',
|
|
297
|
+
variant: 'neutral',
|
|
298
|
+
outline: true,
|
|
299
|
+
pill: false,
|
|
300
|
+
size: 'medium',
|
|
301
|
+
disabled: false,
|
|
302
|
+
text: false,
|
|
303
|
+
showIcon: false,
|
|
304
|
+
iconOnly: false,
|
|
305
|
+
iconName: Object.keys(feather.icons)[0],
|
|
306
|
+
iconPosition: 'left',
|
|
307
|
+
type: 'button',
|
|
308
|
+
name: 'nome bottone',
|
|
309
|
+
value: 'value bottone',
|
|
310
|
+
ariaLabel: 'sono un bottone'
|
|
311
|
+
};
|
|
312
|
+
export const OutlineWhite = Template.bind({});
|
|
313
|
+
OutlineWhite.args = {
|
|
314
|
+
label: 'Outline White',
|
|
315
|
+
variant: 'white',
|
|
316
|
+
outline: true,
|
|
317
|
+
pill: false,
|
|
318
|
+
size: 'medium',
|
|
319
|
+
disabled: false,
|
|
320
|
+
text: false,
|
|
321
|
+
showIcon: false,
|
|
322
|
+
iconOnly: false,
|
|
323
|
+
iconName: Object.keys(feather.icons)[0],
|
|
324
|
+
iconPosition: 'left',
|
|
325
|
+
type: 'button',
|
|
326
|
+
name: 'nome bottone',
|
|
327
|
+
value: 'value bottone',
|
|
328
|
+
ariaLabel: 'sono un bottone'
|
|
329
|
+
};
|
|
215
330
|
export const PillPrimary = Template.bind({});
|
|
216
331
|
PillPrimary.args = {
|
|
217
332
|
label: 'Pill Primary',
|
|
@@ -248,15 +363,15 @@ OutlinePillPrimary.args = {
|
|
|
248
363
|
value: 'value bottone',
|
|
249
364
|
ariaLabel: 'sono un bottone'
|
|
250
365
|
};
|
|
251
|
-
export const
|
|
252
|
-
|
|
253
|
-
label: '
|
|
366
|
+
export const TextPrimary = Template.bind({});
|
|
367
|
+
TextPrimary.args = {
|
|
368
|
+
label: 'Button Text Primary',
|
|
254
369
|
variant: 'primary',
|
|
255
370
|
outline: false,
|
|
256
371
|
pill: false,
|
|
257
372
|
size: 'medium',
|
|
258
|
-
disabled:
|
|
259
|
-
text:
|
|
373
|
+
disabled: false,
|
|
374
|
+
text: true,
|
|
260
375
|
showIcon: false,
|
|
261
376
|
iconOnly: false,
|
|
262
377
|
iconName: Object.keys(feather.icons)[0],
|
|
@@ -268,7 +383,7 @@ Disabled.args = {
|
|
|
268
383
|
};
|
|
269
384
|
export const TextSecondary = Template.bind({});
|
|
270
385
|
TextSecondary.args = {
|
|
271
|
-
label: 'Button Text',
|
|
386
|
+
label: 'Button Text Secondary',
|
|
272
387
|
variant: 'secondary',
|
|
273
388
|
outline: false,
|
|
274
389
|
pill: false,
|
|
@@ -284,26 +399,43 @@ TextSecondary.args = {
|
|
|
284
399
|
value: 'value bottone',
|
|
285
400
|
ariaLabel: 'sono un bottone'
|
|
286
401
|
};
|
|
287
|
-
export const
|
|
288
|
-
|
|
289
|
-
label: '
|
|
402
|
+
export const TextGrey = Template.bind({});
|
|
403
|
+
TextGrey.args = {
|
|
404
|
+
label: 'Button Text Neutral',
|
|
405
|
+
variant: 'neutral',
|
|
290
406
|
outline: false,
|
|
291
|
-
pill:
|
|
292
|
-
size: '
|
|
407
|
+
pill: false,
|
|
408
|
+
size: 'medium',
|
|
293
409
|
disabled: false,
|
|
294
|
-
text:
|
|
295
|
-
showIcon:
|
|
410
|
+
text: true,
|
|
411
|
+
showIcon: false,
|
|
296
412
|
iconOnly: false,
|
|
297
|
-
iconName:
|
|
413
|
+
iconName: Object.keys(feather.icons)[0],
|
|
298
414
|
iconPosition: 'left',
|
|
299
415
|
type: 'button',
|
|
300
416
|
name: 'nome bottone',
|
|
301
417
|
value: 'value bottone',
|
|
302
|
-
ariaLabel: 'sono un bottone'
|
|
303
|
-
|
|
418
|
+
ariaLabel: 'sono un bottone'
|
|
419
|
+
};
|
|
420
|
+
export const TextWhite = Template.bind({});
|
|
421
|
+
TextWhite.args = {
|
|
422
|
+
label: 'Button Text White',
|
|
423
|
+
variant: 'white',
|
|
424
|
+
outline: false,
|
|
425
|
+
pill: false,
|
|
426
|
+
size: 'medium',
|
|
427
|
+
disabled: false,
|
|
428
|
+
text: true,
|
|
429
|
+
showIcon: false,
|
|
430
|
+
iconOnly: false,
|
|
431
|
+
iconName: Object.keys(feather.icons)[0],
|
|
432
|
+
iconPosition: 'left',
|
|
433
|
+
type: 'button',
|
|
434
|
+
name: 'nome bottone',
|
|
435
|
+
value: 'value bottone',
|
|
436
|
+
ariaLabel: 'sono un bottone'
|
|
304
437
|
};
|
|
305
|
-
|
|
306
|
-
const TemplateWithIcon = (args) => `<jump-button variant="${args.variant}" size="${args.size}" type="${args.type}" ariaLabel="${args.ariaLabel}" name="${args.name}" value="${args.value}" ${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}> ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${args.label}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
|
|
438
|
+
const TemplateWithIcon = (args) => `<jump-button id="${args.id}" class="${args.class} variant="${args.variant}" size="${args.size}" type="${args.type}" ariaLabel="${args.ariaLabel}" name="${args.name}" value="${args.value}" ${args.disabled == true ? ' disabled' : ''}${args.pill == true ? ' pill' : ''}${args.outline == true ? ' outline' : ''}${args.text == true ? ' text' : ''}> ${args.iconPosition == 'left' && args.showIcon ? `<jump-icon slot="prefix" name="${args.iconName}"></jump-icon>` : ''}${args.label}${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}</jump-button>`;
|
|
307
439
|
export const ButtonWithIcon = TemplateWithIcon.bind({});
|
|
308
440
|
ButtonWithIcon.args = {
|
|
309
441
|
label: 'Primary',
|
|
@@ -321,9 +453,9 @@ ButtonWithIcon.args = {
|
|
|
321
453
|
value: 'value bottone',
|
|
322
454
|
ariaLabel: 'sono un bottone'
|
|
323
455
|
};
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
456
|
+
const TemplateWithOnlyIcon = (args) => `<jump-button
|
|
457
|
+
id="${args.id}"
|
|
458
|
+
class="${args.class}
|
|
327
459
|
variant="${args.variant}"
|
|
328
460
|
size="${args.size}"
|
|
329
461
|
type="${args.type}"
|
|
@@ -341,8 +473,25 @@ const TemplateWithOnlyIcon = (args) => `<jump-button
|
|
|
341
473
|
${args.iconPosition == 'right' && args.showIcon ? `<jump-icon slot="suffix" name="${args.iconName}"></jump-icon>` : ''}
|
|
342
474
|
|
|
343
475
|
</jump-button>`;
|
|
344
|
-
export const
|
|
345
|
-
|
|
476
|
+
export const ButtonWithOnlyIconSquare = TemplateWithOnlyIcon.bind({});
|
|
477
|
+
ButtonWithOnlyIconSquare.args = {
|
|
478
|
+
label: '',
|
|
479
|
+
variant: 'primary',
|
|
480
|
+
outline: false,
|
|
481
|
+
pill: false,
|
|
482
|
+
size: 'medium',
|
|
483
|
+
disabled: false,
|
|
484
|
+
text: false,
|
|
485
|
+
showIcon: true,
|
|
486
|
+
iconName: 'home',
|
|
487
|
+
iconPosition: 'left',
|
|
488
|
+
type: 'button',
|
|
489
|
+
name: 'nome bottone',
|
|
490
|
+
value: 'value bottone',
|
|
491
|
+
ariaLabel: 'sono un bottone'
|
|
492
|
+
};
|
|
493
|
+
export const ButtonWithOnlyIconPill = TemplateWithOnlyIcon.bind({});
|
|
494
|
+
ButtonWithOnlyIconPill.args = {
|
|
346
495
|
label: '',
|
|
347
496
|
variant: 'primary',
|
|
348
497
|
outline: false,
|
|
@@ -389,4 +538,40 @@ AnchorWithIcon.args = {
|
|
|
389
538
|
href: 'www.google.it',
|
|
390
539
|
ariaLabel: 'sono un bottone'
|
|
391
540
|
};
|
|
541
|
+
export const Disabled = Template.bind({});
|
|
542
|
+
Disabled.args = {
|
|
543
|
+
label: 'Disabled',
|
|
544
|
+
variant: 'primary',
|
|
545
|
+
outline: false,
|
|
546
|
+
pill: false,
|
|
547
|
+
size: 'medium',
|
|
548
|
+
disabled: true,
|
|
549
|
+
text: false,
|
|
550
|
+
showIcon: false,
|
|
551
|
+
iconOnly: false,
|
|
552
|
+
iconName: Object.keys(feather.icons)[0],
|
|
553
|
+
iconPosition: 'left',
|
|
554
|
+
type: 'button',
|
|
555
|
+
name: 'nome bottone',
|
|
556
|
+
value: 'value bottone',
|
|
557
|
+
ariaLabel: 'sono un bottone'
|
|
558
|
+
};
|
|
559
|
+
export const CustomButton = Template.bind({});
|
|
560
|
+
CustomButton.args = {
|
|
561
|
+
label: 'Sono un bottone custom',
|
|
562
|
+
outline: false,
|
|
563
|
+
pill: true,
|
|
564
|
+
size: 'small',
|
|
565
|
+
disabled: false,
|
|
566
|
+
text: false,
|
|
567
|
+
showIcon: true,
|
|
568
|
+
iconOnly: false,
|
|
569
|
+
iconName: 'message-circle',
|
|
570
|
+
iconPosition: 'left',
|
|
571
|
+
type: 'button',
|
|
572
|
+
name: 'nome bottone',
|
|
573
|
+
value: 'value bottone',
|
|
574
|
+
ariaLabel: 'sono un bottone',
|
|
575
|
+
class: 'chat'
|
|
576
|
+
};
|
|
392
577
|
//# sourceMappingURL=jump-button.stories.js.map
|