@bliss-design-system/button - npm Package Compare versions

Comparing version 1.0.0-alpha.0 to 1.0.0-beta.0

CHANGELOG.md

 # @bliss-design-system/button
 
+## 1.0.0-beta.0
+
+### Patch Changes
+
+- move to beta
+
+## 1.0.0
+
+### Major Changes
+
+- edfc569: pre-release
+
 ## 1.0.0-alpha.0
+
 ### Patch Changes
 
 - pre-release

package.json

 {
   "name": "@bliss-design-system/button",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-beta.0",
   "description": "",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -1,2 +0,2 @@
-# /<bliss-button>
+# \<bliss-button>
 
@@ -36,5 +36,37 @@ `<bliss-button>` does excellent things.
 ```html
-<bliss-button></bliss-button>
+<!-- renders a primary button with a default theme in medium size -->
+<bliss-button>I am button</bliss-button>
 ```
 
+To use the button with an icon, you'll need the [`<bliss-icon>` component](https://gitlab.com/bliss-design-system/components/-/tree/main/packages/icon), and you can use it like this:
+```html
+<bliss-button>
+  <bliss-icon slot="icon" name="trash"></bliss-icon>
+  Delete
+</bliss-button>
+```
+
+To use the button with a loading spinner, you'll need the [`<bliss-loading>` component](https://gitlab.com/bliss-design-system/components/-/tree/main/packages/loading), and you can use it like this:
+```html
+<bliss-button>
+  <bliss-loading slot="icon"></bliss-loading>
+  Doing things
+</bliss-button>
+```
+
+There are [multiple attributes](#properties) you can add to the button to leverage different needs, e.g. for a secondary, full width, critical button:
+```html
+<bliss-button variant="secondary" theme="critical" full-width>
+  Very wide and important button
+</bliss-button>
+```
+
+In addition to the examples above, the you can also render an `<a>` with button styling (including the button attributes defined below), by providing a `href`:
+
+```html
+<bliss-button href="www.example.com">
+  I'm a link!
+</bliss-button>
+```
+
 ### Properties
@@ -44,5 +76,18 @@
 
-| Property        | Type           | Description                | Default | Required | Options |
+| Attribute        | Type           | Description                | Default | Required | Options |
 | --------------- |:--------------:| :-------------------------:|:-------:|:--------:|:-------:|
-| xxxx            | xxxxxx         | xxxx                       |  xxxx   | xxxx     | xxxx    |
+| size            | string         | defines the button size    | `medium`  | no       | `small`, `medium` |
+| type            | string         | defines the button type    | `button`  | no       | `button`, `submit`, `reset` |
+| theme           | string         | button theme               | `default` | no       | `default`, `neutral`, `critical` |
+| variant         | string         | button variant             | `primary` | no       | `primary`, `secondary`, `ghost |
+| disabled        | boolean        | disable the button         | `false`   | no       | - |
+| loading         | boolean        | display the loading spinner    | `false`  | no       | - |
+| icon-only       | boolean        | display an icon only    | `false`  | no       | - |
+| icon-trailing   | boolean        | display icon after the label    | `false`  | no       | - |
+| full-width      | boolean        | make the button full width of its container    | `false`  | no       | - |
+| Anchor specific attributes below      |         |       |    |        |  |
+| href            | string         | URL    | ''  | no       | - |
+| target          | string         | where to display the linked URL    | ''  | no       | `_blank`, `_self`, `_top`, `_parent` |
+| rel             | string         | relationship of the linked URL    | ''  | no       | - |
+| download             | string         | download instead of navigate    | ''  | no       | - |
 
@@ -65,2 +110,3 @@ ## 🫕 Contributing
 You don't need to move into the package's directory to run storybook, tests or anything else. All of those commands exist in the root of the component toolkit, so while you can work on the component within its specific folder, you don't need to move through directories to run anything.
+
 ### Demoing with Storybook
@@ -67,0 +113,0 @@

src/styles/index.css.js

 import { css } from 'lit-element';
 export const styles = css `
+:host[hidden] {
+  display: none;
+}
+
 :host {
@@ -81,2 +85,13 @@ display: inline-block;
 
+:host([loading]) [part=button] slot[name=icon] {
+  position: absolute;
+}
+:host([loading]) [part=button] span {
+  visibility: hidden;
+}
+
+:host([icon-only][loading]) [part=button] slot[name=icon] {
+  position: relative;
+}
+
 :host([size=small][icon-trailing]) [part=button] slot[name=icon] {
@@ -83,0 +98,0 @@ display: block;

src/styles/index.css.ts

 import { css, CSSResult } from 'lit-element';
 
 export const styles: CSSResult = css`
+:host[hidden] {
+  display: none;
+}
+
 :host {
@@ -82,2 +86,13 @@ display: inline-block;
 
+:host([loading]) [part=button] slot[name=icon] {
+  position: absolute;
+}
+:host([loading]) [part=button] span {
+  visibility: hidden;
+}
+
+:host([icon-only][loading]) [part=button] slot[name=icon] {
+  position: relative;
+}
+
 :host([size=small][icon-trailing]) [part=button] slot[name=icon] {
@@ -84,0 +99,0 @@ display: block;

src/ts/BlissButton.d.ts

@@ -6,12 +6,18 @@ import { LitElement, TemplateResult, CSSResultArray, PropertyValues } from 'lit-element';
  * This is a description of this bliss component.
- * @element \<bliss-button\>
+ * @element bliss-button
  *
  * @prop {String} [type=button] - input type, one of 'button', 'submit' or 'reset'
+ * @prop {String} [href] - converts button into an anchor tag
+ * @prop {String} {_blank|_parent|_self|_top} [target] - where to open the link, requires `href` attribnute
+ * @prop {String} [rel] - sets the relationship between the link and the document, requires `href` attribnute
+ * @prop {String} [download] - download instead of navigate, requires `href` attribnute
  *
  * @attr {Boolean} [disabled=false] - whether or not to disable the button
+ * @attr {Boolean} [loading=false] - whether or not to display loading spinner
  * @attr {Boolean} [icon-trailing=false] - whether to display the icon after the label
  * @attr {Boolean} [icon-only=false] - whether to display an icon only
- * @attr {Boolean} [full-width=false] - whether to display an icon only
- * @attr {primary|secondary|ghost} variant - button variant
- * @attr {default|netural|critical} theme - button theme
+ * @attr {Boolean} [full-width=false] - whether to make the button full width of its container
+ * @attr {primary|secondary|ghost} [variant=primary] - button variant
+ * @attr {default|netural|critical} [theme=default] - button theme
+ * @attr {small|medium} [size=medium] - button size
  *
@@ -31,2 +37,3 @@ * @slot - Default text slot
     protected iconOnly: boolean;
+    loading: boolean;
     disabled: boolean;
@@ -33,0 +40,0 @@ type: 'button' | 'submit' | 'reset';

src/ts/BlissButton.js

@@ -10,12 +10,18 @@ var _a;
  * This is a description of this bliss component.
- * @element \<bliss-button\>
+ * @element bliss-button
  *
  * @prop {String} [type=button] - input type, one of 'button', 'submit' or 'reset'
+ * @prop {String} [href] - converts button into an anchor tag
+ * @prop {String} {_blank|_parent|_self|_top} [target] - where to open the link, requires `href` attribnute
+ * @prop {String} [rel] - sets the relationship between the link and the document, requires `href` attribnute
+ * @prop {String} [download] - download instead of navigate, requires `href` attribnute
  *
  * @attr {Boolean} [disabled=false] - whether or not to disable the button
+ * @attr {Boolean} [loading=false] - whether or not to display loading spinner
  * @attr {Boolean} [icon-trailing=false] - whether to display the icon after the label
  * @attr {Boolean} [icon-only=false] - whether to display an icon only
- * @attr {Boolean} [full-width=false] - whether to display an icon only
- * @attr {primary|secondary|ghost} variant - button variant
- * @attr {default|netural|critical} theme - button theme
+ * @attr {Boolean} [full-width=false] - whether to make the button full width of its container
+ * @attr {primary|secondary|ghost} [variant=primary] - button variant
+ * @attr {default|netural|critical} [theme=default] - button theme
+ * @attr {small|medium} [size=medium] - button size
  *
@@ -34,2 +40,3 @@ * @slot - Default text slot
         this.iconOnly = false;
+        this.loading = false;
         this.disabled = false;
@@ -110,3 +117,3 @@ this.type = 'button';
         return html ` <button
-      ?disabled="${this.disabled}"
+      ?disabled="${this.disabled || this.loading}"
       ?aria-disabled="${this.disabled}"
@@ -145,2 +152,5 @@ aria-label="${this.textContent}"
     property({ type: Boolean })
+], BlissButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean })
 ], BlissButton.prototype, "disabled", void 0);
@@ -147,0 +157,0 @@ __decorate([

src/ts/BlissButton.ts

@@ -17,12 +17,18 @@ import {
  * This is a description of this bliss component.
- * @element \<bliss-button\>
+ * @element bliss-button
  *
  * @prop {String} [type=button] - input type, one of 'button', 'submit' or 'reset'
+ * @prop {String} [href] - converts button into an anchor tag
+ * @prop {String} {_blank|_parent|_self|_top} [target] - where to open the link, requires `href` attribnute
+ * @prop {String} [rel] - sets the relationship between the link and the document, requires `href` attribnute
+ * @prop {String} [download] - download instead of navigate, requires `href` attribnute
  *
  * @attr {Boolean} [disabled=false] - whether or not to disable the button
+ * @attr {Boolean} [loading=false] - whether or not to display loading spinner
  * @attr {Boolean} [icon-trailing=false] - whether to display the icon after the label
  * @attr {Boolean} [icon-only=false] - whether to display an icon only
- * @attr {Boolean} [full-width=false] - whether to display an icon only
- * @attr {primary|secondary|ghost} variant - button variant
- * @attr {default|netural|critical} theme - button theme
+ * @attr {Boolean} [full-width=false] - whether to make the button full width of its container
+ * @attr {primary|secondary|ghost} [variant=primary] - button variant
+ * @attr {default|netural|critical} [theme=default] - button theme
+ * @attr {small|medium} [size=medium] - button size
  *
@@ -56,2 +62,5 @@ * @slot - Default text slot
   @property({ type: Boolean })
+  public loading: boolean = false;
+
+  @property({ type: Boolean })
   public disabled: boolean = false;
@@ -164,3 +173,3 @@
     return html` <button
-      ?disabled="${this.disabled}"
+      ?disabled="${this.disabled || this.loading}"
       ?aria-disabled="${this.disabled}"
@@ -167,0 +176,0 @@ aria-label="${this.textContent}"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54175

increased by13.1%

Lines of code

1257

increased by6.26%

Number of lines in readme file

149

increased by44.66%

Worsened metrics

Number of downloads

3

decreased by-78.57%

No dependency changes