@jumpgroup/jump-design-system 0.1.5 → 0.1.6
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/jump-button.cjs.entry.js +7 -6
- package/dist/cjs/jump-button.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/jump-button/jump-button.css +47 -21
- package/dist/collection/components/jump-button/jump-button.js +28 -9
- package/dist/collection/components/jump-button/jump-button.js.map +1 -1
- package/dist/collection/components/jump-button/jump-button.stories.js +149 -101
- package/dist/collection/components/jump-button/jump-button.stories.js.map +1 -1
- package/dist/components/jump-button.js +9 -7
- package/dist/components/jump-button.js.map +1 -1
- package/dist/esm/jump-button.entry.js +7 -6
- package/dist/esm/jump-button.entry.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- 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-1bb7f2a5.entry.js +2 -0
- package/dist/jump-design-system/p-1bb7f2a5.entry.js.map +1 -0
- 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 +7 -3
- package/dist/types/components.d.ts +8 -0
- package/package.json +1 -1
- package/dist/jump-design-system/p-9e6ea006.entry.js +0 -2
- package/dist/jump-design-system/p-9e6ea006.entry.js.map +0 -1
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-46644e39.js');
|
|
6
6
|
|
|
7
|
-
const jumpButtonCss = "jump-button button{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:
|
|
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-400, 400);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[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 {
|
|
@@ -17,15 +17,16 @@ const AppButton = class {
|
|
|
17
17
|
this.pill = false;
|
|
18
18
|
this.text = false;
|
|
19
19
|
this.onlyIcon = false;
|
|
20
|
-
this.href =
|
|
20
|
+
this.href = undefined;
|
|
21
21
|
this.target = undefined;
|
|
22
22
|
this.type = 'button';
|
|
23
|
-
this.name =
|
|
24
|
-
this.value =
|
|
25
|
-
this.ariaLabel =
|
|
23
|
+
this.name = undefined;
|
|
24
|
+
this.value = undefined;
|
|
25
|
+
this.ariaLabel = undefined;
|
|
26
|
+
this.class = undefined;
|
|
26
27
|
}
|
|
27
28
|
render() {
|
|
28
|
-
return (index.h(index.Host, { key: '
|
|
29
|
+
return (index.h(index.Host, { key: '74a02b6f19805b842eaa6c6060652225c0f0f255' }, this.href ? (index.h("a", { href: this.href, 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", { 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" })))));
|
|
29
30
|
}
|
|
30
31
|
};
|
|
31
32
|
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,o0HAAo0H,CAAC;AAC31H,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;;IAEhD,MAAM;QACJ,QACEA,QAACC,UAAI,uDACF,IAAI,CAAC,IAAI,IACRD,eAAG,IAAI,EAAE,IAAI,CAAC,IAAI,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,IAC7OA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,EAC1B,CAAC,IAAI,CAAC,QAAQ,IAAIA,qBAAa,EAChCA,kBAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,KAEJA,oBAAQ,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,IAC1RA,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","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-400, 400);\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 &[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: false,\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 render() {\n return (\n <Host>\n {this.href ? (\n <a href={this.href} 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 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}
|
|
@@ -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",[[4,"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"]}]]]], options);
|
|
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",[[4,"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]}]]]], options);
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
|
|
|
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",[[4,"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"]}]]]], options);
|
|
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",[[4,"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]}]]]], options);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
exports.setNonce = index.setNonce;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
jump-button button
|
|
1
|
+
jump-button button,
|
|
2
|
+
jump-button a {
|
|
2
3
|
background-color: transparent;
|
|
3
4
|
border: none;
|
|
4
5
|
padding: 0;
|
|
@@ -13,14 +14,15 @@ jump-button {
|
|
|
13
14
|
align-items: center;
|
|
14
15
|
--jump-button-color: #ffffff;
|
|
15
16
|
--jump-button-color-disabled: #cbcbcb;
|
|
16
|
-
--jump-button-background:
|
|
17
|
+
--jump-button-background: var(--primary-standard);
|
|
17
18
|
--jump-button-background-outline: transparent;
|
|
18
19
|
--jump-button-color-hover: #ffffff;
|
|
19
|
-
--jump-button-background-hover:
|
|
20
|
+
--jump-button-background-hover: var(--primary-hard);
|
|
20
21
|
--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);
|
|
21
22
|
--jump-button-padding: 1rem 1.25rem;
|
|
22
23
|
}
|
|
23
|
-
jump-button button
|
|
24
|
+
jump-button button,
|
|
25
|
+
jump-button a {
|
|
24
26
|
background-color: var(--jump-button-background);
|
|
25
27
|
border-radius: var(--jump-button-border-radius);
|
|
26
28
|
color: var(--jump-button-color);
|
|
@@ -32,76 +34,100 @@ jump-button button {
|
|
|
32
34
|
display: flex;
|
|
33
35
|
align-items: center;
|
|
34
36
|
gap: var(--jump-button-gap, 0.5rem);
|
|
37
|
+
text-decoration: none;
|
|
35
38
|
padding: var(--jump-button-padding);
|
|
36
39
|
}
|
|
37
|
-
jump-button button:hover
|
|
40
|
+
jump-button button:hover,
|
|
41
|
+
jump-button a:hover {
|
|
38
42
|
background-color: var(--jump-button-background-hover);
|
|
39
43
|
color: var(--jump-button-color-hover);
|
|
40
44
|
}
|
|
41
|
-
jump-button button[data-variant=primary]
|
|
45
|
+
jump-button button[data-variant=primary],
|
|
46
|
+
jump-button a[data-variant=primary] {
|
|
42
47
|
--jump-button-color: var(--neutral-white);
|
|
43
48
|
--jump-button-background: var(--primary-standard);
|
|
44
49
|
--jump-button-color-hover: var(--neutral-white);
|
|
45
50
|
--jump-button-background-hover: var(--primary-hard);
|
|
46
51
|
}
|
|
47
|
-
jump-button button[data-variant=secondary]
|
|
52
|
+
jump-button button[data-variant=secondary],
|
|
53
|
+
jump-button a[data-variant=secondary] {
|
|
48
54
|
--jump-button-color: var(--neutral-white);
|
|
49
55
|
--jump-button-background: var(--secondary-standard);
|
|
50
56
|
--jump-button-color-hover: var(--neutral-white);
|
|
51
57
|
--jump-button-background-hover: var(--secondary-hard);
|
|
52
58
|
}
|
|
53
|
-
jump-button button[disabled]
|
|
59
|
+
jump-button button[disabled],
|
|
60
|
+
jump-button a[disabled] {
|
|
54
61
|
--jump-button-background: var(--jump-button-color-disabled);
|
|
55
62
|
--jump-button-background-hover: var(--jump-button-color-disabled);
|
|
56
63
|
cursor: not-allowed;
|
|
57
64
|
}
|
|
58
|
-
jump-button button[data-pill]
|
|
65
|
+
jump-button button[data-pill],
|
|
66
|
+
jump-button a[data-pill] {
|
|
59
67
|
border-radius: 100rem;
|
|
60
68
|
}
|
|
61
|
-
jump-button button[data-size=small]
|
|
69
|
+
jump-button button[data-size=small],
|
|
70
|
+
jump-button a[data-size=small] {
|
|
62
71
|
font-size: var(--fs-300, 0.875rem);
|
|
63
72
|
line-height: var(--lh-300, 1.2);
|
|
64
73
|
--jump-button-padding: 0.5rem 1rem;
|
|
65
74
|
}
|
|
66
|
-
jump-button button[data-size=medium]
|
|
75
|
+
jump-button button[data-size=medium],
|
|
76
|
+
jump-button a[data-size=medium] {
|
|
67
77
|
font-size: var(--fs-400, 1rem);
|
|
68
78
|
line-height: var(--lh-400, 1.3);
|
|
69
79
|
}
|
|
70
|
-
jump-button button[data-size=large]
|
|
80
|
+
jump-button button[data-size=large],
|
|
81
|
+
jump-button a[data-size=large] {
|
|
71
82
|
font-size: var(--fs-500, 1.125rem);
|
|
72
83
|
line-height: var(--lh-500, 1.4);
|
|
73
84
|
--jump-button-padding: 1.125rem 1.5rem;
|
|
74
85
|
}
|
|
75
|
-
jump-button button[data-outline]
|
|
86
|
+
jump-button button[data-outline],
|
|
87
|
+
jump-button a[data-outline] {
|
|
76
88
|
background-color: var(--jump-button-background-outline);
|
|
77
89
|
border: 1px solid var(--jump-button-background);
|
|
78
90
|
color: var(--jump-button-background);
|
|
79
91
|
}
|
|
80
|
-
jump-button button[data-outline]:hover
|
|
92
|
+
jump-button button[data-outline]:hover,
|
|
93
|
+
jump-button a[data-outline]:hover {
|
|
81
94
|
background-color: var(--jump-button-background-hover);
|
|
82
95
|
border: 1px solid var(--jump-button-background-hover);
|
|
83
|
-
color: var(--jump-button-
|
|
96
|
+
color: var(--jump-button-color-hover);
|
|
84
97
|
}
|
|
85
|
-
jump-button button[data-text]
|
|
98
|
+
jump-button button[data-text],
|
|
99
|
+
jump-button a[data-text] {
|
|
86
100
|
background-color: transparent;
|
|
87
101
|
border: none;
|
|
88
102
|
color: var(--jump-button-background);
|
|
89
103
|
padding: 0;
|
|
90
104
|
}
|
|
91
|
-
jump-button button[data-text]:hover
|
|
105
|
+
jump-button button[data-text]:hover,
|
|
106
|
+
jump-button a[data-text]:hover {
|
|
92
107
|
background-color: transparent;
|
|
93
108
|
border: none;
|
|
94
109
|
color: var(--jump-button-background-hover);
|
|
95
110
|
}
|
|
96
|
-
jump-button button[data-only-icon]
|
|
111
|
+
jump-button button[data-only-icon],
|
|
112
|
+
jump-button a[data-only-icon] {
|
|
97
113
|
--jump-button-padding: 1.125rem;
|
|
98
114
|
}
|
|
99
|
-
jump-button button[data-only-icon][data-size=small]
|
|
115
|
+
jump-button button[data-only-icon][data-size=small],
|
|
116
|
+
jump-button a[data-only-icon][data-size=small] {
|
|
100
117
|
--jump-button-padding: 0.5rem;
|
|
101
118
|
}
|
|
102
|
-
jump-button button[data-only-icon][data-size=medium]
|
|
119
|
+
jump-button button[data-only-icon][data-size=medium],
|
|
120
|
+
jump-button a[data-only-icon][data-size=medium] {
|
|
103
121
|
--jump-button-padding: 1rem;
|
|
104
122
|
}
|
|
105
|
-
jump-button button[data-only-icon][data-size=large]
|
|
123
|
+
jump-button button[data-only-icon][data-size=large],
|
|
124
|
+
jump-button a[data-only-icon][data-size=large] {
|
|
106
125
|
--jump-button-padding: 1.125rem;
|
|
126
|
+
}
|
|
127
|
+
jump-button button.chat,
|
|
128
|
+
jump-button a.chat {
|
|
129
|
+
--jump-button-color: var(--neutral-white);
|
|
130
|
+
--jump-button-background: hsla(133, 54%, 58%, 1);
|
|
131
|
+
--jump-button-color-hover: var(--neutral-white);
|
|
132
|
+
--jump-button-background-hover: hsla(161, 63%, 31%, 1);
|
|
107
133
|
}
|
|
@@ -8,15 +8,16 @@ export class AppButton {
|
|
|
8
8
|
this.pill = false;
|
|
9
9
|
this.text = false;
|
|
10
10
|
this.onlyIcon = false;
|
|
11
|
-
this.href =
|
|
11
|
+
this.href = undefined;
|
|
12
12
|
this.target = undefined;
|
|
13
13
|
this.type = 'button';
|
|
14
|
-
this.name =
|
|
15
|
-
this.value =
|
|
16
|
-
this.ariaLabel =
|
|
14
|
+
this.name = undefined;
|
|
15
|
+
this.value = undefined;
|
|
16
|
+
this.ariaLabel = undefined;
|
|
17
|
+
this.class = undefined;
|
|
17
18
|
}
|
|
18
19
|
render() {
|
|
19
|
-
return (h(Host, { key: '
|
|
20
|
+
return (h(Host, { key: '74a02b6f19805b842eaa6c6060652225c0f0f255' }, this.href ? (h("a", { href: this.href, 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", { 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" })))));
|
|
20
21
|
}
|
|
21
22
|
static get is() { return "jump-button"; }
|
|
22
23
|
static get originalStyleUrls() {
|
|
@@ -173,7 +174,7 @@ export class AppButton {
|
|
|
173
174
|
},
|
|
174
175
|
"attribute": "href",
|
|
175
176
|
"reflect": true,
|
|
176
|
-
"defaultValue": "
|
|
177
|
+
"defaultValue": "undefined"
|
|
177
178
|
},
|
|
178
179
|
"target": {
|
|
179
180
|
"type": "string",
|
|
@@ -226,7 +227,7 @@ export class AppButton {
|
|
|
226
227
|
},
|
|
227
228
|
"attribute": "name",
|
|
228
229
|
"reflect": true,
|
|
229
|
-
"defaultValue": "
|
|
230
|
+
"defaultValue": "undefined"
|
|
230
231
|
},
|
|
231
232
|
"value": {
|
|
232
233
|
"type": "string",
|
|
@@ -244,7 +245,7 @@ export class AppButton {
|
|
|
244
245
|
},
|
|
245
246
|
"attribute": "value",
|
|
246
247
|
"reflect": true,
|
|
247
|
-
"defaultValue": "
|
|
248
|
+
"defaultValue": "undefined"
|
|
248
249
|
},
|
|
249
250
|
"ariaLabel": {
|
|
250
251
|
"type": "string",
|
|
@@ -262,7 +263,25 @@ export class AppButton {
|
|
|
262
263
|
},
|
|
263
264
|
"attribute": "aria-label",
|
|
264
265
|
"reflect": true,
|
|
265
|
-
"defaultValue": "
|
|
266
|
+
"defaultValue": "undefined"
|
|
267
|
+
},
|
|
268
|
+
"class": {
|
|
269
|
+
"type": "string",
|
|
270
|
+
"mutable": false,
|
|
271
|
+
"complexType": {
|
|
272
|
+
"original": "string",
|
|
273
|
+
"resolved": "string",
|
|
274
|
+
"references": {}
|
|
275
|
+
},
|
|
276
|
+
"required": false,
|
|
277
|
+
"optional": false,
|
|
278
|
+
"docs": {
|
|
279
|
+
"tags": [],
|
|
280
|
+
"text": "Indicates classes of the component"
|
|
281
|
+
},
|
|
282
|
+
"attribute": "class",
|
|
283
|
+
"reflect": true,
|
|
284
|
+
"defaultValue": "undefined"
|
|
266
285
|
}
|
|
267
286
|
};
|
|
268
287
|
}
|
|
@@ -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,
|
|
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;;IAEhD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CACX,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,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;YAC7O,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,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;YAC1R,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: false,\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 render() {\n return (\n <Host>\n {this.href ? (\n <a href={this.href} 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 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"]}
|