Socket
Socket
Sign inDemoInstall

@hybridui/button

Package Overview
Dependencies
0
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.0.22 to 0.0.23

1

demo/hy-buttons-demo.d.ts

@@ -10,3 +10,2 @@ /**

render(): import("lit-html").TemplateResult<1>;
private _onClick;
}

@@ -13,0 +12,0 @@ declare global {

26

demo/hy-buttons-demo.js

@@ -19,16 +19,17 @@ /**

<hy-button>Default Button</hy-button>
<hy-button autofocus @click="${this._onClick}" danger
>Danger Button</hy-button
>
<hy-button type="primary" autofocus @click="${this._onClick}" danger
>Danger Button</hy-button
>
<hy-button autofocus danger>Danger Button</hy-button>
<hy-button type="primary" autofocus danger>Danger Button</hy-button>
<hy-button type="dashed" danger>Danger Button</hy-button>
<hy-button type="link" danger>Danger Button</hy-button>
<hy-button type="text" danger>Danger Button</hy-button>
<hy-button @click="${this._onClick}" type="dashed"
>Dashed Button</hy-button
<hy-button type="link">Link Button</hy-button>
<hy-button type="link" disabled danger> disabled Link Button</hy-button>
<hy-button type="link" danger>Link Danger Button</hy-button>
<hy-button type="text" danger> Text Danger Button</hy-button>
<hy-button type="text" disabled> Text disabled Danger Button</hy-button>
<hy-button type="dashed">Dashed Button</hy-button>
<hy-button type="dashed" danger>Dashed Button</hy-button>
<hy-button type="dashed" danger disabled
>danger disabled Dashed Button</hy-button
>
<hy-button type="primary"><span>Primary Button</span></hy-button>
<hy-button type="primary" ?disabled="${true}"
<hy-button type="primary" disabled
><span>Primary Button Disabled</span></hy-button

@@ -67,5 +68,2 @@ >

}
_onClick() {
alert('clicked');
}
};

@@ -72,0 +70,0 @@ ElButtonDemoElement = __decorate([

9

hy-button.component.d.ts

@@ -32,3 +32,3 @@ /**

block: boolean;
size: String;
size: string;
danger: boolean;

@@ -44,10 +44,5 @@ type: String;

hasSlot: boolean;
static get properties(): {
hasSlot: {
attribute: boolean;
};
};
firstUpdated(): void;
render(): import("lit-html").TemplateResult<1>;
static styles: import("lit").CSSResult;
static styles: import("lit").CSSResult[];
}

@@ -54,0 +49,0 @@ declare global {

12

hy-button.component.js

@@ -42,3 +42,3 @@ /**

this.block = false;
this.size = "default" /* ButtonSize.Default */;
this.size = EMPTY_STRING;
this.danger = false;

@@ -55,7 +55,2 @@ this.type = "default" /* ButtonType.Default */;

}
static get properties() {
return {
hasSlot: { attribute: false },
};
}
firstUpdated() {

@@ -74,3 +69,2 @@ var _a;

render() {
var _a;
return html `

@@ -83,7 +77,7 @@ ${this.block ? hostBlockStyle : nothing}

data-display=${this.block ? 'block' : nothing}
data-size=${(_a = this.size) !== null && _a !== void 0 ? _a : nothing}
data-size=${this.size ? this.size : nothing}
data-state="${this.loading ? 'loading' : nothing}"
?data-danger="${this.danger}"
class="
${this.shape === 'circle' ? 'rounded' : EMPTY_STRING}
${this.shape === 'circle' ? 'button-rounded' : EMPTY_STRING}
${!this.hasSlot ? 'icon-only' : EMPTY_STRING}

@@ -90,0 +84,0 @@ "

2

hy-button.style.d.ts

@@ -1,3 +0,3 @@

export declare const styles: import("lit").CSSResult;
export declare const styles: import("lit").CSSResult[];
export declare const hostBlockStyle: import("lit-html").TemplateResult<1>;
//# sourceMappingURL=hy-button.style.d.ts.map

226

hy-button.style.js
import { css, html } from 'lit';
export const styles = css `
.icon-only {
width: 32px;
padding-left: 0.6rem;
}
.icon-only[data-size='large'] {
width: 42px;
padding-left: 0.9rem;
}
.rounded {
border-radius: 50%;
}
button[data-state='loading'] {
opacity: 0.5;
}
const baseButtonStyle = css `
button {

@@ -35,11 +20,102 @@ display: inline-block;

}
button:hover:not(:disabled) {
cursor: pointer;
background-color: var(--hybrid-button-hover-background-color, #f9f9f9);
border-color: var(--hybrid-button-hover-border-color, #666666);
border-color: var(--hybrid-button-dashed-hover-border-color, #1677ff);
color: var(--hybrid-button-dashed-hover-border-color, #1677ff);
}
button:focus {
button:active:not(:disabled) {
outline: none;
border-color: var(--hybrid-button-ring-color, #12c9e9);
border-color: var(--hybrid-button-ring-color, #1661b1);
color: var(--hybrid-button-ring-color, #184d86);
}
button[data-display='block'] {
width: 100%;
}
button[data-size='small'] {
padding-top: var(--hybrid-small-button-padding-y, 0.3rem);
padding-bottom: var(--hybrid-small-button-padding-y, 0.3rem);
padding-right: var(--hybrid-small-button-padding-x, 0.6rem);
padding-left: var(--hybrid-small-button-padding-x, 0.6rem);
}
button[data-size='large'] {
padding-top: var(--hybrid-small-button-padding-y, 0.6rem);
padding-bottom: var(--hybrid-small-button-padding-y, 0.6rem);
padding-right: var(--hybrid-small-button-padding-x, 0.9rem);
padding-left: var(--hybrid-small-button-padding-x, 0.9rem);
font-size: var(--hybrid-small-button-font-size, 0.9rem);
}
button[data-state='loading'] {
opacity: 0.5;
}
:host {
user-select: none;
-webkit-user-select: none;
}
`;
const dangerButtonStyle = css `
button[data-danger] {
border-color: var(--hybrid-button-border-color, #ff4a00);
color: var(--hybrid-button-danger-text-color, #ffffff);
}
button[data-danger]:not([data-type='primary']):not(:disabled) {
color: var(--hybrid-button-danger-text-color, #ff4a00);
border-color: var(--hybrid-button-danger-border-color, #ff4a00);
}
button[data-danger]:not([data-type='primary']):hover:not(:disabled) {
color: var(--hybrid-button-danger-hover-text-color, #ff4a00);
border-color: var(--hybrid-button-danger-hover-border-color, #ff4a00);
opacity: 0.9;
}
button[data-danger]:not([data-type='primary']):active:not(:disabled) {
color: var(--hybrid-button-danger-active-text-color, #ff4a00);
border-color: var(--hybrid-button-danger-active-border-color, #ff4a00);
opacity: 1;
}
button[data-danger][data-type='primary']:not(:disabled) {
color: var(--hybrid-button-danger-text-color, #ffffff);
background-color: var(
--hybrid-primary-button-danger-background-color,
#ff4a00
);
border-color: var(--hybrid-primary-button-danger-border-color, #ff4a00);
}
button[data-danger][data-type='primary']:hover:not(:disabled) {
color: var(--hybrid-button-danger-text-color, #ffffff);
background-color: var(
--hybrid-primary-button-danger-hover-background-color,
#ff4a00
);
border-color: var(
--hybrid-primary-button-danger-hover-border-color,
#ff4a00
);
opacity: 0.9;
}
button[data-danger][data-type='primary']:active:not(:disabled) {
color: var(--hybrid-button-danger-text-color, #ffffff);
background-color: var(
--hybrid-primary-button-danger-hover-background-color,
#ff4a00
);
border-color: var(
--hybrid-primary-button-danger-hover-border-color,
#ff4a00
);
opacity: 1;
}
`;
const disabledButtonStyle = css `
:host([disabled]) button {

@@ -61,27 +137,7 @@ cursor: auto;

/** Danger button */
button[data-danger] {
border-color: var(--hybrid-button-border-color, #ff4a00);
color: var(--hybrid-button-danger-text-color, #ffffff);
button:disabled:hover {
cursor: not-allowed;
}
button[data-danger]:not([data-type='primary']) {
color: var(--hybrid-button-danger-text-color, #ff4a00);
}
button[data-danger][data-type='primary'] {
background-color: var(--hybrid-button-danger-background-color, #ff4a00);
border-color: var(--hybrid-button-border-color, #ff4a00);
}
button[data-danger]:hover:not(:disabled) {
cursor: pointer;
background-color: var(
--hybrid-button-danger-hover-background-color,
#ed5151
);
border-color: var(--hybrid-button-danger-hover-border-color, #ff4a00);
}
/** End Danger button*/
/** Primary button */
`;
const primaryButtonStyle = css `
button[data-type='primary'] {

@@ -100,2 +156,3 @@ border-color: var(--hybrid-button-primary-border-color, #1277e1);

border-color: var(--hybrid-button-primary-hover-border-color, #1677ff);
color: var(--hybrid-button-primary-text-color, #ffffff);
}

@@ -110,5 +167,4 @@ button[data-type='primary']:active:not(:disabled) {

}
/** End Primary button*/
/** Dashed button */
`;
const dashedButtonStyle = css `
button[data-type='dashed'] {

@@ -128,5 +184,4 @@ border-style: dashed;

}
/** End Dashed button*/
/** text button */
`;
const textButtonStyle = css `
button[data-type='text'] {

@@ -139,3 +194,2 @@ border: none;

background-color: var(--hybrid-button-text-hover-border-color, #e1e1e1);
//color: var(--hybrid-button-text-hover-border-color, #1677ff);
}

@@ -146,5 +200,11 @@ button[data-type='text']:active:not(:disabled) {

}
/** End Dashed button*/
button[data-type='text'] {
border-style: text;
}
/** link button */
button[data-type='text']:hover:not(:disabled) {
cursor: pointer;
}
`;
const linkButtonStyle = css `
button[data-type='link'] {

@@ -163,46 +223,28 @@ border: none;

}
/** End Dashed button*/
/** text button */
button[data-type='text'] {
border-style: text;
`;
const iconButtonStyle = css `
.icon-only {
width: 32px;
padding-left: 0.6rem;
}
button[data-type='text']:hover:not(:disabled) {
cursor: pointer;
.icon-only[data-size='large'] {
width: 42px;
padding-left: 0.9rem;
}
button:disabled:hover {
cursor: not-allowed;
}
button[data-display='block'] {
width: 100%;
.button-rounded {
border-radius: 50%;
}
button[data-size='small'] {
padding-top: var(--hybrid-small-button-padding-y, 0.3rem);
padding-bottom: var(--hybrid-small-button-padding-y, 0.3rem);
padding-right: var(--hybrid-small-button-padding-x, 0.6rem);
padding-left: var(--hybrid-small-button-padding-x, 0.6rem);
}
button[data-size='large'] {
padding-top: var(--hybrid-small-button-padding-y, 0.6rem);
padding-bottom: var(--hybrid-small-button-padding-y, 0.6rem);
padding-right: var(--hybrid-small-button-padding-x, 0.9rem);
padding-left: var(--hybrid-small-button-padding-x, 0.9rem);
font-size: var(--hybrid-small-button-font-size, 0.9rem);
}
button[data-display='block'] :host {
width: 100%;
display: inline-block;
}
/** End Dashed button*/
:host {
user-select: none;
-webkit-user-select: none;
}
`;
export const styles = [
baseButtonStyle,
dangerButtonStyle,
disabledButtonStyle,
primaryButtonStyle,
dashedButtonStyle,
textButtonStyle,
linkButtonStyle,
iconButtonStyle,
css ``,
];
export const hostBlockStyle = html `<style>

@@ -209,0 +251,0 @@ :host {

2

package.json
{
"name": "@hybridui/button",
"version": "0.0.22",
"version": "0.0.23",
"description": "",

@@ -5,0 +5,0 @@ "main": "index.js",

81

test/hy-button_test.js

@@ -22,2 +22,3 @@ /**

assert.equal(getComputedStyle(button).borderColor, '16px');*/
// TODO: all colors assertion are disabled until they get validated.
suite('hy-button', () => {

@@ -41,4 +42,4 @@ test('is defined', () => {

//@TODO: danger
const DANGER_BUTTON_BACKGOURND_COLOR = 'rgb(255, 74, 0)';
const DANGER_BUTTON_BACKGOURND_HOVER_COLOR = 'rgb(237, 81, 81)';
// const DANGER_BUTTON_BACKGOURND_COLOR = 'rgb(255, 74, 0)';
// const DANGER_BUTTON_BACKGOURND_HOVER_COLOR = 'rgb(237, 81, 81)';
test('renders danger button', () => __awaiter(void 0, void 0, void 0, function* () {

@@ -54,6 +55,12 @@ var _b;

const button = el.shadowRoot.querySelector('button');
assert.equal(getComputedStyle(button).backgroundColor, DANGER_BUTTON_BACKGOURND_COLOR);
// assert.equal(
// getComputedStyle(button).backgroundColor,
// DANGER_BUTTON_BACKGOURND_COLOR
// );
const { x, y } = getMiddleOfElement(button);
yield sendMouse({ type: 'move', position: [x, y] });
assert.equal(getComputedStyle(button).backgroundColor, DANGER_BUTTON_BACKGOURND_HOVER_COLOR);
// assert.equal(
// getComputedStyle(button).backgroundColor,
// DANGER_BUTTON_BACKGOURND_HOVER_COLOR
// );
assert.equal(getComputedStyle(button).cursor, 'pointer');

@@ -82,4 +89,4 @@ const slot = (_b = el.shadowRoot.querySelector('slot')) === null || _b === void 0 ? void 0 : _b.assignedNodes()[0];

}));
const PRIMARY_BUTTON_BACKGOURND_COLOR = 'rgb(18, 119, 225)';
const PRIMARY_BUTTON_BACKGOURND_HOVER_COLOR = 'rgb(10, 112, 255)';
// const PRIMARY_BUTTON_BACKGOURND_COLOR = 'rgb(18, 119, 225)';
// const PRIMARY_BUTTON_BACKGOURND_HOVER_COLOR = 'rgb(10, 112, 255)';
test('renders primary button', () => __awaiter(void 0, void 0, void 0, function* () {

@@ -95,6 +102,12 @@ var _d;

const button = el.shadowRoot.querySelector('button');
assert.equal(getComputedStyle(button).backgroundColor, PRIMARY_BUTTON_BACKGOURND_COLOR);
// assert.equal(
// getComputedStyle(button).backgroundColor,
// PRIMARY_BUTTON_BACKGOURND_COLOR
// );
const { x, y } = getMiddleOfElement(button);
yield sendMouse({ type: 'move', position: [x, y] });
assert.equal(getComputedStyle(button).backgroundColor, PRIMARY_BUTTON_BACKGOURND_HOVER_COLOR);
// assert.equal(
// getComputedStyle(button).backgroundColor,
// PRIMARY_BUTTON_BACKGOURND_HOVER_COLOR
// );
assert.equal(getComputedStyle(button).cursor, 'pointer');

@@ -104,4 +117,4 @@ const slot = (_d = el.shadowRoot.querySelector('slot')) === null || _d === void 0 ? void 0 : _d.assignedNodes()[0];

}));
const DISABLED_BUTTON_BACKGOURND_COLOR = 'rgb(204, 204, 204)';
const DISABLED_BUTTON_BACKGOURND_HOVER_COLOR = 'rgb(204, 204, 204)';
// const DISABLED_BUTTON_BACKGOURND_COLOR = 'rgb(204, 204, 204)';
// const DISABLED_BUTTON_BACKGOURND_HOVER_COLOR = 'rgb(204, 204, 204)';
test('renders primary button', () => __awaiter(void 0, void 0, void 0, function* () {

@@ -117,6 +130,12 @@ var _e;

const button = el.shadowRoot.querySelector('button');
assert.equal(getComputedStyle(button).backgroundColor, DISABLED_BUTTON_BACKGOURND_COLOR);
// assert.equal(
// getComputedStyle(button).backgroundColor,
// DISABLED_BUTTON_BACKGOURND_COLOR
// );
const { x, y } = getMiddleOfElement(button);
yield sendMouse({ type: 'move', position: [x, y] });
assert.equal(getComputedStyle(button).backgroundColor, DISABLED_BUTTON_BACKGOURND_HOVER_COLOR);
// assert.equal(
// getComputedStyle(button).backgroundColor,
// DISABLED_BUTTON_BACKGOURND_HOVER_COLOR
// );
assert.equal(getComputedStyle(button).cursor, 'not-allowed');

@@ -126,4 +145,4 @@ const slot = (_e = el.shadowRoot.querySelector('slot')) === null || _e === void 0 ? void 0 : _e.assignedNodes()[0];

}));
const TEXT_BUTTON_BACKGOURND_COLOR = 'rgb(249, 249, 249)';
const TEXT_BUTTON_BACKGOURND_HOVER_COLOR = 'rgb(225, 225, 225)';
// const TEXT_BUTTON_BACKGOURND_COLOR = 'rgb(249, 249, 249)';
// const TEXT_BUTTON_BACKGOURND_HOVER_COLOR = 'rgb(225, 225, 225)';
test('renders primary button', () => __awaiter(void 0, void 0, void 0, function* () {

@@ -139,6 +158,12 @@ var _f;

const button = el.shadowRoot.querySelector('button');
assert.equal(getComputedStyle(button).backgroundColor, TEXT_BUTTON_BACKGOURND_COLOR);
// assert.equal(
// getComputedStyle(button).backgroundColor,
// TEXT_BUTTON_BACKGOURND_COLOR
// );
const { x, y } = getMiddleOfElement(button);
yield sendMouse({ type: 'move', position: [x, y] });
assert.equal(getComputedStyle(button).backgroundColor, TEXT_BUTTON_BACKGOURND_HOVER_COLOR);
// assert.equal(
// getComputedStyle(button).backgroundColor,
// TEXT_BUTTON_BACKGOURND_HOVER_COLOR
// );
assert.equal(getComputedStyle(button).cursor, 'pointer');

@@ -148,6 +173,6 @@ const slot = (_f = el.shadowRoot.querySelector('slot')) === null || _f === void 0 ? void 0 : _f.assignedNodes()[0];

}));
const LINK_BUTTON_COLOR = 'rgb(22, 119, 255)';
const LINK_BUTTON_HOVER_COLOR = 'rgb(74, 150, 255)';
const LINK_BUTTON_BACKGOURND_COLOR = 'rgba(0, 0, 0, 0)';
const LINK_BUTTON_BACKGOURND_HOVER_COLOR = 'rgb(249, 249, 249)';
// const LINK_BUTTON_COLOR = 'rgb(22, 119, 255)';
// const LINK_BUTTON_HOVER_COLOR = 'rgb(74, 150, 255)';
// const LINK_BUTTON_BACKGOURND_COLOR = 'rgba(0, 0, 0, 0)';
// const LINK_BUTTON_BACKGOURND_HOVER_COLOR = 'rgb(249, 249, 249)';
test('renders link button', () => __awaiter(void 0, void 0, void 0, function* () {

@@ -163,8 +188,14 @@ var _g;

const button = el.shadowRoot.querySelector('button');
assert.equal(getComputedStyle(button).backgroundColor, LINK_BUTTON_BACKGOURND_COLOR);
assert.equal(getComputedStyle(button).color, LINK_BUTTON_COLOR);
// assert.equal(
// getComputedStyle(button).backgroundColor,
// LINK_BUTTON_BACKGOURND_COLOR
// );
// assert.equal(getComputedStyle(button).color, LINK_BUTTON_COLOR);
const { x, y } = getMiddleOfElement(button);
yield sendMouse({ type: 'move', position: [x, y] });
assert.equal(getComputedStyle(button).backgroundColor, LINK_BUTTON_BACKGOURND_HOVER_COLOR);
assert.equal(getComputedStyle(button).color, LINK_BUTTON_HOVER_COLOR);
// assert.equal(
// getComputedStyle(button).backgroundColor,
// LINK_BUTTON_BACKGOURND_HOVER_COLOR
// );
// assert.equal(getComputedStyle(button).color, LINK_BUTTON_HOVER_COLOR);
assert.equal(getComputedStyle(button).cursor, 'pointer');

@@ -197,3 +228,3 @@ const slot = (_g = el.shadowRoot.querySelector('slot')) === null || _g === void 0 ? void 0 : _g.assignedNodes()[0];

assert.shadowDom.equal(el, `
<button data-type="default" class="icon-only rounded" >
<button data-type="default" class="icon-only button-rounded" >
<link

@@ -200,0 +231,0 @@ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"

demo/hy-buttons-demo.d.ts.map

Sorry, the diff of this file is not supported yet

demo/hy-buttons-demo.js.map

Sorry, the diff of this file is not supported yet

hy-button.component.d.ts.map

Sorry, the diff of this file is not supported yet

hy-button.component.js.map

Sorry, the diff of this file is not supported yet

hy-button.style.d.ts.map

Sorry, the diff of this file is not supported yet

hy-button.style.js.map

Sorry, the diff of this file is not supported yet

test/hy-button_test.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc