@uh-design-system/component-library 0.2.1-alpha.0 → 0.2.2-alpha.0
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/ds-button_2.cjs.entry.js +1 -2
- package/dist/collection/components/01-base-components/ds-button/ds-button.js +1 -2
- package/dist/component-library/ds-button_2.entry.js +1 -1
- package/dist/components/ds-button2.js +1 -2
- package/dist/esm/ds-button_2.entry.js +1 -2
- package/package.json +2 -2
|
@@ -136,7 +136,6 @@ const DsButton = class {
|
|
|
136
136
|
]));
|
|
137
137
|
}
|
|
138
138
|
render() {
|
|
139
|
-
console.log('render');
|
|
140
139
|
const classes = index$1.classNames(`${this.variant} ${this.colour} ${this.size}`, {
|
|
141
140
|
'icon-start': this.icon && this.iconPosition === 'start' && this.value,
|
|
142
141
|
'icon-end': this.icon && this.iconPosition === 'end' && this.value,
|
|
@@ -144,7 +143,7 @@ const DsButton = class {
|
|
|
144
143
|
});
|
|
145
144
|
const iconSize = this.size === 'small' ? '1rem' : undefined;
|
|
146
145
|
const isDisabled = this.disabled || this.ariaDisabled === 'true';
|
|
147
|
-
return (index.h("button", Object.assign({ key: '
|
|
146
|
+
return (index.h("button", Object.assign({ key: '1230108c308cc8a89f8202bef69e839e36b6912d', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false' }, this.inheritedAttributes), index.h("slot", { key: 'bb67886e636e7a5294a6fbbde4a8a013e1ace3ce', name: "prefix" }, this.icon && this.iconPosition === 'start' && index.h("ds-icon", { key: '6e93f6095ee4482d5026b42a67b7591712206146', name: this.icon, size: iconSize })), this.value && index.h("span", { key: '833424437f89ace4253e9daef6d8cda409563a4a', class: "button-value" }, this.value), index.h("slot", { key: '162e459206000c3b1b5b4ede761f5600f88b3de1', name: "suffix" }, this.icon && this.iconPosition === 'end' && index.h("ds-icon", { key: '2e9bff6bdc4d5023374916bcbdc11151270113b6', name: this.icon, size: iconSize }))));
|
|
148
147
|
}
|
|
149
148
|
get el() { return index.getElement(this); }
|
|
150
149
|
};
|
|
@@ -54,7 +54,6 @@ export class DsButton {
|
|
|
54
54
|
]));
|
|
55
55
|
}
|
|
56
56
|
render() {
|
|
57
|
-
console.log('render');
|
|
58
57
|
const classes = classNames(`${this.variant} ${this.colour} ${this.size}`, {
|
|
59
58
|
'icon-start': this.icon && this.iconPosition === 'start' && this.value,
|
|
60
59
|
'icon-end': this.icon && this.iconPosition === 'end' && this.value,
|
|
@@ -62,7 +61,7 @@ export class DsButton {
|
|
|
62
61
|
});
|
|
63
62
|
const iconSize = this.size === 'small' ? '1rem' : undefined;
|
|
64
63
|
const isDisabled = this.disabled || this.ariaDisabled === 'true';
|
|
65
|
-
return (h("button", Object.assign({ key: '
|
|
64
|
+
return (h("button", Object.assign({ key: '1230108c308cc8a89f8202bef69e839e36b6912d', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false' }, this.inheritedAttributes), h("slot", { key: 'bb67886e636e7a5294a6fbbde4a8a013e1ace3ce', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '6e93f6095ee4482d5026b42a67b7591712206146', name: this.icon, size: iconSize })), this.value && h("span", { key: '833424437f89ace4253e9daef6d8cda409563a4a', class: "button-value" }, this.value), h("slot", { key: '162e459206000c3b1b5b4ede761f5600f88b3de1', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '2e9bff6bdc4d5023374916bcbdc11151270113b6', name: this.icon, size: iconSize }))));
|
|
66
65
|
}
|
|
67
66
|
static get is() { return "ds-button"; }
|
|
68
67
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as o,h as t,g as r}from"./index-dfeefc7e.js";import{c as a}from"./index-72ac5051.js";const s=(o,t=[])=>{const r={};return t.forEach((t=>{o.hasAttribute(t)&&(null!==o.getAttribute(t)&&(r[t]=o.getAttribute(t)),o.removeAttribute(t))})),r},e=["role","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-errormessage","aria-expanded","aria-flowto","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"],n=class{constructor(t){o(this,t),this.inheritedAttributes={},this.pressedKeys=new Set,this.value="",this.variant="primary",this.colour="blue",this.size="medium",this.fontWeight="normal",this.icon="",this.iconPosition="start",this.type="button",this.disabled=!1,this.ariaDisabled="false",this.handleKeyDown=o=>{if(!o.repeat)switch(o.key){case"Enter":case" ":this.pressedKeys.add(o.key),this.buttonEl.classList.add(`${this.colour}--active`)}},this.handleKeyUp=o=>{switch(o.key){case"Enter":case" ":this.pressedKeys.delete(o.key),0===this.pressedKeys.size&&this.buttonEl.classList.remove(`${this.colour}--active`)}}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},((o,t)=>{let r=[...e];return t&&t.length>0&&(r=r.filter((o=>!t.includes(o)))),s(o,r)})(this.el,["aria-disabled"])),s(this.el,["autofocus","form","formaction","formenctype","formmethod","formnovalidate","formtarget","name","popovertarget","popovertargetaction"]))}render(){console.log("render");const o=a(`${this.variant} ${this.colour} ${this.size}`,{"icon-start":this.icon&&"start"===this.iconPosition&&this.value,"icon-end":this.icon&&"end"===this.iconPosition&&this.value,"icon-only":this.icon&&!this.value}),r="small"===this.size?"1rem":void 0;return t("button",Object.assign({key:"d85ee424afafcb437fa873e69b7554e315e4cad5",ref:o=>this.buttonEl=o,onKeyDown:this.handleKeyDown,onKeyUp:this.handleKeyUp,class:o,style:{fontWeight:this.fontWeight},type:this.type,"aria-disabled":this.disabled||"true"===this.ariaDisabled?"true":"false"},this.inheritedAttributes),t("slot",{key:"c21dc9317ae1970d8e5fcead12b4041a8dc13af0",name:"prefix"},this.icon&&"start"===this.iconPosition&&t("ds-icon",{key:"cc993dd0b2a12b3243bc8863d754a0efa3b6f1f4",name:this.icon,size:r})),this.value&&t("span",{key:"b8a7bcac21782fd898192d98c605c0eacbfff882",class:"button-value"},this.value),t("slot",{key:"e4766fc18983798416533173ceddcbe3c80779ba",name:"suffix"},this.icon&&"end"===this.iconPosition&&t("ds-icon",{key:"f308fb96c0b0b06036975df25fc5fba59dffe301",name:this.icon,size:r})))}get el(){return r(this)}};n.style=".sc-ds-button-h{display:inline-block}button.sc-ds-button{align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-bold);outline:4px solid transparent;border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}button.sc-ds-button:focus{outline-offset:2px;outline-width:2px}button.icon-only.sc-ds-button{padding-left:0;padding-right:0;aspect-ratio:1;justify-content:center}button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}button.primary.blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}button.primary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}button.primary.blue.sc-ds-button:active,button.primary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.primary.blue[aria-disabled=true].sc-ds-button,button.primary.blue.disabled.sc-ds-button,button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.primary.black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}button.primary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}button.primary.black.sc-ds-button:active,button.primary.black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.primary.black[aria-disabled=true].sc-ds-button,button.primary.black.disabled.sc-ds-button,button.primary.black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.primary.white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}button.primary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}button.primary.white.sc-ds-button:active,button.primary.white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}button.primary.white[aria-disabled=true].sc-ds-button,button.primary.white.disabled.sc-ds-button,button.primary.white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}button.secondary.blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}button.secondary.blue.sc-ds-button:active,button.secondary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.secondary.blue[aria-disabled=true].sc-ds-button,button.secondary.blue.disabled.sc-ds-button,button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}button.secondary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}button.secondary.black.sc-ds-button:active,button.secondary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.secondary.black[aria-disabled=true].sc-ds-button,button.secondary.black.disabled.sc-ds-button,button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}button.secondary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}button.secondary.white.sc-ds-button:active,button.secondary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}button.secondary.white[aria-disabled=true].sc-ds-button,button.secondary.white.disabled.sc-ds-button,button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary);padding-right:0;padding-left:0}button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}button.supplementary.blue.sc-ds-button:active,button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.supplementary.blue[aria-disabled=true].sc-ds-button,button.supplementary.blue.disabled.sc-ds-button,button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default);padding-right:0;padding-left:0}button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}button.supplementary.black.sc-ds-button:active,button.supplementary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.supplementary.black[aria-disabled=true].sc-ds-button,button.supplementary.black.disabled.sc-ds-button,button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white);padding-right:0;padding-left:0}button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}button.supplementary.white.sc-ds-button:active,button.supplementary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}button.supplementary.white[aria-disabled=true].sc-ds-button,button.supplementary.white.disabled.sc-ds-button,button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}button.small.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}button.small.icon-only.sc-ds-button{width:32px}button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}";const d=class{constructor(t){o(this,t)}render(){return t("slot",{key:"390610148832811748f7700f0d438b257bdb354d"})}};d.style=":host{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";export{n as ds_button,d as ds_visually_hidden}
|
|
1
|
+
import{r as o,h as t,g as r}from"./index-dfeefc7e.js";import{c as a}from"./index-72ac5051.js";const s=(o,t=[])=>{const r={};return t.forEach((t=>{o.hasAttribute(t)&&(null!==o.getAttribute(t)&&(r[t]=o.getAttribute(t)),o.removeAttribute(t))})),r},e=["role","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-errormessage","aria-expanded","aria-flowto","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"],n=class{constructor(t){o(this,t),this.inheritedAttributes={},this.pressedKeys=new Set,this.value="",this.variant="primary",this.colour="blue",this.size="medium",this.fontWeight="normal",this.icon="",this.iconPosition="start",this.type="button",this.disabled=!1,this.ariaDisabled="false",this.handleKeyDown=o=>{if(!o.repeat)switch(o.key){case"Enter":case" ":this.pressedKeys.add(o.key),this.buttonEl.classList.add(`${this.colour}--active`)}},this.handleKeyUp=o=>{switch(o.key){case"Enter":case" ":this.pressedKeys.delete(o.key),0===this.pressedKeys.size&&this.buttonEl.classList.remove(`${this.colour}--active`)}}}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},((o,t)=>{let r=[...e];return t&&t.length>0&&(r=r.filter((o=>!t.includes(o)))),s(o,r)})(this.el,["aria-disabled"])),s(this.el,["autofocus","form","formaction","formenctype","formmethod","formnovalidate","formtarget","name","popovertarget","popovertargetaction"]))}render(){const o=a(`${this.variant} ${this.colour} ${this.size}`,{"icon-start":this.icon&&"start"===this.iconPosition&&this.value,"icon-end":this.icon&&"end"===this.iconPosition&&this.value,"icon-only":this.icon&&!this.value}),r="small"===this.size?"1rem":void 0;return t("button",Object.assign({key:"1230108c308cc8a89f8202bef69e839e36b6912d",ref:o=>this.buttonEl=o,onKeyDown:this.handleKeyDown,onKeyUp:this.handleKeyUp,class:o,style:{fontWeight:this.fontWeight},type:this.type,"aria-disabled":this.disabled||"true"===this.ariaDisabled?"true":"false"},this.inheritedAttributes),t("slot",{key:"bb67886e636e7a5294a6fbbde4a8a013e1ace3ce",name:"prefix"},this.icon&&"start"===this.iconPosition&&t("ds-icon",{key:"6e93f6095ee4482d5026b42a67b7591712206146",name:this.icon,size:r})),this.value&&t("span",{key:"833424437f89ace4253e9daef6d8cda409563a4a",class:"button-value"},this.value),t("slot",{key:"162e459206000c3b1b5b4ede761f5600f88b3de1",name:"suffix"},this.icon&&"end"===this.iconPosition&&t("ds-icon",{key:"2e9bff6bdc4d5023374916bcbdc11151270113b6",name:this.icon,size:r})))}get el(){return r(this)}};n.style=".sc-ds-button-h{display:inline-block}button.sc-ds-button{align-items:center;border-radius:0;border-style:solid;display:flex;font-family:var(--ds-fontFamily-body);font-weight:var(--ds-fontWeight-bold);outline:4px solid transparent;border-width:var(--ds-borderWidth-thick);font-size:var(--ds-fontSize-18);min-height:44px;padding:var(--ds-spacing-3xSmall) var(--ds-spacing-xSmall)}button.sc-ds-button:focus{outline-offset:2px;outline-width:2px}button.icon-only.sc-ds-button{padding-left:0;padding-right:0;aspect-ratio:1;justify-content:center}button.sc-ds-button .button-value.sc-ds-button{padding-right:var(--ds-spacing-3xSmall);padding-left:var(--ds-spacing-3xSmall)}button.sc-ds-button ds-icon.sc-ds-button{height:1.5rem}button.icon-start.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-right:var(--ds-spacing-3xSmall)}button.icon-end.sc-ds-button:not(.small) ds-icon.sc-ds-button{margin-left:var(--ds-spacing-3xSmall)}button.primary.blue.sc-ds-button{background-color:var(--ds-bgColor-primary);border-color:transparent;color:var(--ds-textColor-white)}button.primary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-primary-hover)}button.primary.blue.sc-ds-button:active,button.primary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-primary-active)}button.primary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.primary.blue[aria-disabled=true].sc-ds-button,button.primary.blue.disabled.sc-ds-button,button.primary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.primary.black.sc-ds-button{background-color:var(--ds-bgColor-black);border-color:transparent;color:var(--ds-textColor-white)}button.primary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-black-hover)}button.primary.black.sc-ds-button:active,button.primary.black--active.sc-ds-button{background-color:var(--ds-bgColor-black-active)}button.primary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.primary.black[aria-disabled=true].sc-ds-button,button.primary.black.disabled.sc-ds-button,button.primary.black.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onLight);border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.primary.white.sc-ds-button{background-color:var(--ds-bgColor-white);border-color:transparent;color:var(--ds-textColor-default)}button.primary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-white-hover)}button.primary.white.sc-ds-button:active,button.primary.white--active.sc-ds-button{background-color:var(--ds-bgColor-white-active)}button.primary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}button.primary.white[aria-disabled=true].sc-ds-button,button.primary.white.disabled.sc-ds-button,button.primary.white.sc-ds-button:disabled{background-color:var(--ds-bgColor-disabled-onDark);border-color:transparent;color:var(--ds-textColor-disabled-onDark)}button.secondary.blue.sc-ds-button{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-primary);color:var(--ds-textColor-primary)}button.secondary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}button.secondary.blue.sc-ds-button:active,button.secondary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}button.secondary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.secondary.blue[aria-disabled=true].sc-ds-button,button.secondary.blue.disabled.sc-ds-button,button.secondary.blue.sc-ds-button:disabled{background-color:var(--ds-bgColor-secondary);border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}button.secondary.black.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-black);color:var(--ds-textColor-default)}button.secondary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}button.secondary.black.sc-ds-button:active,button.secondary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}button.secondary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.secondary.black[aria-disabled=true].sc-ds-button,button.secondary.black.disabled.sc-ds-button,button.secondary.black.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onLight);color:var(--ds-textColor-disabled-onLight)}button.secondary.white.sc-ds-button{background-color:transparent;border-color:var(--ds-borderColor-white);color:var(--ds-textColor-white)}button.secondary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}button.secondary.white.sc-ds-button:active,button.secondary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}button.secondary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}button.secondary.white[aria-disabled=true].sc-ds-button,button.secondary.white.disabled.sc-ds-button,button.secondary.white.sc-ds-button:disabled{background-color:transparent;border-color:var(--ds-borderColor-disabled-onDark);color:var(--ds-textColor-disabled-onDark)}button.supplementary.blue.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-primary);padding-right:0;padding-left:0}button.supplementary.blue.sc-ds-button:hover{background-color:var(--ds-bgColor-secondary-hover)}button.supplementary.blue.sc-ds-button:active,button.supplementary.blue--active.sc-ds-button{background-color:var(--ds-bgColor-secondary-active)}button.supplementary.blue.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.supplementary.blue[aria-disabled=true].sc-ds-button,button.supplementary.blue.disabled.sc-ds-button,button.supplementary.blue.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.supplementary.black.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-default);padding-right:0;padding-left:0}button.supplementary.black.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onLight-hover)}button.supplementary.black.sc-ds-button:active,button.supplementary.black--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onLight-active)}button.supplementary.black.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-white);outline-color:var(--ds-borderColor-black)}button.supplementary.black[aria-disabled=true].sc-ds-button,button.supplementary.black.disabled.sc-ds-button,button.supplementary.black.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onLight)}button.supplementary.white.sc-ds-button{background-color:transparent;border-color:transparent;color:var(--ds-textColor-white);padding-right:0;padding-left:0}button.supplementary.white.sc-ds-button:hover{background-color:var(--ds-bgColor-transparent-onDark-hover)}button.supplementary.white.sc-ds-button:active,button.supplementary.white--active.sc-ds-button{background-color:var(--ds-bgColor-transparent-onDark-active)}button.supplementary.white.sc-ds-button:focus-visible{box-shadow:0 0 0 2px var(--ds-borderColor-black);outline-color:var(--ds-borderColor-white)}button.supplementary.white[aria-disabled=true].sc-ds-button,button.supplementary.white.disabled.sc-ds-button,button.supplementary.white.sc-ds-button:disabled{background-color:transparent;border-color:transparent;color:var(--ds-textColor-disabled-onDark)}button.small.sc-ds-button{border-width:var(--ds-borderWidth-thin);font-size:var(--ds-fontSize-14);min-height:32px;padding:var(--ds-spacing-4xSmall) var(--ds-spacing-2xSmall)}button.small.icon-only.sc-ds-button{width:32px}button.small.sc-ds-button ds-icon.sc-ds-button{height:1rem}";const d=class{constructor(t){o(this,t)}render(){return t("slot",{key:"390610148832811748f7700f0d438b257bdb354d"})}};d.style=":host{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}";export{n as ds_button,d as ds_visually_hidden}
|
|
@@ -134,7 +134,6 @@ const DsButton = proxyCustomElement(class DsButton extends H {
|
|
|
134
134
|
]));
|
|
135
135
|
}
|
|
136
136
|
render() {
|
|
137
|
-
console.log('render');
|
|
138
137
|
const classes = classNames(`${this.variant} ${this.colour} ${this.size}`, {
|
|
139
138
|
'icon-start': this.icon && this.iconPosition === 'start' && this.value,
|
|
140
139
|
'icon-end': this.icon && this.iconPosition === 'end' && this.value,
|
|
@@ -142,7 +141,7 @@ const DsButton = proxyCustomElement(class DsButton extends H {
|
|
|
142
141
|
});
|
|
143
142
|
const iconSize = this.size === 'small' ? '1rem' : undefined;
|
|
144
143
|
const isDisabled = this.disabled || this.ariaDisabled === 'true';
|
|
145
|
-
return (h("button", Object.assign({ key: '
|
|
144
|
+
return (h("button", Object.assign({ key: '1230108c308cc8a89f8202bef69e839e36b6912d', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false' }, this.inheritedAttributes), h("slot", { key: 'bb67886e636e7a5294a6fbbde4a8a013e1ace3ce', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '6e93f6095ee4482d5026b42a67b7591712206146', name: this.icon, size: iconSize })), this.value && h("span", { key: '833424437f89ace4253e9daef6d8cda409563a4a', class: "button-value" }, this.value), h("slot", { key: '162e459206000c3b1b5b4ede761f5600f88b3de1', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '2e9bff6bdc4d5023374916bcbdc11151270113b6', name: this.icon, size: iconSize }))));
|
|
146
145
|
}
|
|
147
146
|
get el() { return this; }
|
|
148
147
|
static get style() { return DsButtonStyle0; }
|
|
@@ -132,7 +132,6 @@ const DsButton = class {
|
|
|
132
132
|
]));
|
|
133
133
|
}
|
|
134
134
|
render() {
|
|
135
|
-
console.log('render');
|
|
136
135
|
const classes = classNames(`${this.variant} ${this.colour} ${this.size}`, {
|
|
137
136
|
'icon-start': this.icon && this.iconPosition === 'start' && this.value,
|
|
138
137
|
'icon-end': this.icon && this.iconPosition === 'end' && this.value,
|
|
@@ -140,7 +139,7 @@ const DsButton = class {
|
|
|
140
139
|
});
|
|
141
140
|
const iconSize = this.size === 'small' ? '1rem' : undefined;
|
|
142
141
|
const isDisabled = this.disabled || this.ariaDisabled === 'true';
|
|
143
|
-
return (h("button", Object.assign({ key: '
|
|
142
|
+
return (h("button", Object.assign({ key: '1230108c308cc8a89f8202bef69e839e36b6912d', ref: el => (this.buttonEl = el), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, class: classes, style: { fontWeight: this.fontWeight }, type: this.type, "aria-disabled": isDisabled ? 'true' : 'false' }, this.inheritedAttributes), h("slot", { key: 'bb67886e636e7a5294a6fbbde4a8a013e1ace3ce', name: "prefix" }, this.icon && this.iconPosition === 'start' && h("ds-icon", { key: '6e93f6095ee4482d5026b42a67b7591712206146', name: this.icon, size: iconSize })), this.value && h("span", { key: '833424437f89ace4253e9daef6d8cda409563a4a', class: "button-value" }, this.value), h("slot", { key: '162e459206000c3b1b5b4ede761f5600f88b3de1', name: "suffix" }, this.icon && this.iconPosition === 'end' && h("ds-icon", { key: '2e9bff6bdc4d5023374916bcbdc11151270113b6', name: this.icon, size: iconSize }))));
|
|
144
143
|
}
|
|
145
144
|
get el() { return getElement(this); }
|
|
146
145
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uh-design-system/component-library",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2-alpha.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -82,5 +82,5 @@
|
|
|
82
82
|
"glob": "^9.0.0"
|
|
83
83
|
},
|
|
84
84
|
"license": "MIT",
|
|
85
|
-
"gitHead": "
|
|
85
|
+
"gitHead": "588b5b4244e3a2119deb08f64f8fa34b807e529b"
|
|
86
86
|
}
|