@forter/button - npm Package Compare versions

Comparing version 4.0.4 to 4.0.5

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [4.0.5](https://github.com/forter/web-components/compare/@forter/button@4.0.4...@forter/button@4.0.5) (2019-11-27)
+
+**Note:** Version bump only for package @forter/button
+
+
+
+
+
 ## [4.0.4](https://github.com/forter/web-components/compare/@forter/button@4.0.3...@forter/button@4.0.4) (2019-09-19)
@@ -8,0 +16,0 @@

fc-copy.css.js

@@ -7,2 +7,7 @@ import { css } from 'lit-element';
 
+#button {
+  background-color: transparent;
+  border: none;
+}
+
 #button fc-icon {
@@ -9,0 +14,0 @@ margin-bottom: -5px;

fc-icon-button.css.js

@@ -10,3 +10,5 @@ import { css } from 'lit-element';
   --fc-button-box-shadow: none;
-  --fc-button-focus-outline-box-shadow: inset var(--fc-button-focus-outline-box-shadow);
+  --fc-button-focus-outline-box-shadow:
+    inset
+    var(--fc-button-focus-outline-box-shadow);
   --fc-button-background-color: white;
@@ -20,5 +22,7 @@ --fc-button-hover-background-color: var(--gray-4);
   display: inline-flex;
-  width: 100%;
+  min-width: var(--fc-button-height, 35px);
   align-items: center;
   justify-content: center;
+  background-color: transparent;
+  border: none;
 }
@@ -25,0 +29,0 @@ `;

FcButton.js

@@ -8,6 +8,6 @@ import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js';
 import '@forter/icon/fc-icon';
-import theme from '@forter/styles/forter-theme.css.js';
-import a11yStyles from '@forter/styles/a11y-styles.css.js';
-import shared from './fc-button-shared.css.js';
-import style from './fc-button.css.js';
+import theme from '@forter/styles/forter-theme.css';
+import a11yStyles from '@forter/styles/a11y-styles.css';
+import shared from './fc-button-shared.css';
+import style from './fc-button.css';
 
@@ -14,0 +14,0 @@ const DEFAULT_ICON_SIZE = 18;

FcCopy.js

 import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
 import { LitElement, property, query, html } from 'lit-element';
 import '@forter/icon/fc-icon';
-import shared from './fc-button-shared.css.js';
-import style from './fc-copy.css.js';
+import shared from './fc-button-shared.css';
+import style from './fc-copy.css';
 
@@ -76,4 +76,3 @@ /**
       <input id="selection" hidden tabindex="-1" value="${this.clipboard || this.textContent}"/>
-      <button id="button" @click=${this.copy}>
-        <fc-icon icon="copy"></fc-icon>
+      <button id="copy" @click=${this.copy} style="background-color:transparent;border:none;">
         <slot></slot>
@@ -80,0 +79,0 @@ </button>

FcIconButton.js

@@ -7,6 +7,6 @@ import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js';
 import '@forter/icon/fc-icon';
-import theme from '@forter/styles/forter-theme.css.js';
-import a11yStyles from '@forter/styles/a11y-styles.css.js';
-import shared from './fc-button-shared.css.js';
-import style from './fc-icon-button.css.js';
+import theme from '@forter/styles/forter-theme.css';
+import a11yStyles from '@forter/styles/a11y-styles.css';
+import shared from './fc-button-shared.css';
+import style from './fc-icon-button.css';
 
@@ -13,0 +13,0 @@ /**

FcSpeech.js

 import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
 import { LitElement, property, html } from 'lit-element';
 import '@forter/icon/fc-icon';
-import shared from './fc-button-shared.css.js';
+import shared from './fc-button-shared.css';
 import bound from 'bound-decorator';
 import '@forter/icon/icons/microphone.svg.js';
-import style from './fc-speech.css.js';
+import style from './fc-speech.css';
 
@@ -9,0 +9,0 @@ /**

package.json

 {
   "name": "@forter/button",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "Button from Forter Components",
@@ -50,4 +50,4 @@ "main": "index.js",
   "dependencies": {
-    "@forter/core": "^2.0.0",
-    "@forter/icon": "^3.2.2",
+    "@forter/core": "^2.0.1",
+    "@forter/icon": "^3.2.3",
     "@forter/mixins": "^3.0.0",
@@ -59,3 +59,3 @@ "@forter/styles": "^3.2.1",
   },
-  "gitHead": "0aae1f4ddd21eb0daaab2d0b142f7eb25bd511e1"
+  "gitHead": "26a81b071f7d326de0472263bfd092842d61a9f8"
 }

README.md

@@ -159,4 +159,4 @@ # fc-button
 |-----------------|------------------|--------------------------------------------------|---------|--------------------------------------------------|
-| `active`        | `active`         | `boolean`                                        |         | If the button is active                          |
-| `disabled`      | `disabled`       | `boolean`                                        |         | If the button is disabled                        |
+| `active`        | `active`         | `boolean`                                        | false   | If the button is active                          |
+| `disabled`      | `disabled`       | `boolean`                                        | false   | If the button is disabled                        |
 | `icon`          | `icon`           | `string`                                         |         | The button's icon                                |
@@ -166,4 +166,4 @@ | `iconSize`      | `icon-size`      | `string \| number`                               | 18      | The icon's icon-size                             |
 | `label`         | `label`          | `string`                                         |         | The button's label, used when accessible content is not slotted in. |
-| `loading`       | `loading`        | `boolean`                                        |         | If the button represents a loading state         |
-| `secondaryIcon` | `secondary-icon` | `string`                                         |         | The button's secondary icon                      |
+| `loading`       | `loading`        | `boolean`                                        | false   | If the button represents a loading state         |
+| `secondaryIcon` | `secondary-icon` | `string`                                         | ""      | The button's secondary icon                      |
 | `width`         | `width`          | `string`                                         |         | The button's width in px or 'small', 'medium', or 'large' |
@@ -226,8 +226,8 @@
 
-| Property   | Attribute  | Type      | Description                                      |
-|------------|------------|-----------|--------------------------------------------------|
-| `active`   | `active`   | `boolean` | If the button is active                          |
-| `disabled` | `disabled` | `boolean` | If the button is disabled                        |
-| `icon`     | `icon`     | `string`  | The button's icon                                |
-| `label`    | `label`    | `string`  | The button's label. Must be passed for accessibility. |
+| Property   | Attribute  | Type      | Default | Description                                      |
+|------------|------------|-----------|---------|--------------------------------------------------|
+| `active`   | `active`   | `boolean` | false   | If the button is active                          |
+| `disabled` | `disabled` | `boolean` | false   | If the button is disabled                        |
+| `icon`     | `icon`     | `string`  |         | The button's icon                                |
+| `label`    | `label`    | `string`  |         | The button's label. Must be passed for accessibility. |
 
@@ -234,0 +234,0 @@ ## CSS Custom Properties

src/FcCopy.js

@@ -40,4 +40,3 @@ import { LitElement, html, property, query } from 'lit-element';
       <input id="selection" hidden tabindex="-1" value="${this.clipboard || this.textContent}"/>
-      <button id="button" @click=${this.copy}>
-        <fc-icon icon="copy"></fc-icon>
+      <button id="copy" @click=${this.copy} style="background-color:transparent;border:none;">
         <slot></slot>
@@ -44,0 +43,0 @@ </button>

stories/button.attributes.stories.js

@@ -43,3 +43,3 @@ import markdown from '../README.md';
 export default {
-  title: 'Controls|Button/Attributes',
+  title: 'Controls|Button|Attributes',
   parameters: {
@@ -46,0 +46,0 @@ notes: { markdown },

stories/button.intents.stories.js

@@ -54,3 +54,3 @@ import markdown from '../README.md';
 export default {
-  title: 'Controls|Button/Intents',
+  title: 'Controls|Button|Intents',
   decorators: [withKnobs],
@@ -57,0 +57,0 @@ parameters: {

stories/copy.stories.js

@@ -21,4 +21,16 @@ import { html } from 'lit-html';
 
+export function iconButton() {
+  return html`
+    <fc-copy
+        clipboard="${text('Text to Copy', 'Copy to Clipboard')}"
+        @copy="${compose(action('copy'), propOr(null, 'detail'))}">
+      <fc-tooltip tooltip="copy to clipboard">
+        <fc-icon-button icon="copy">
+        </fc-icon-button>
+      </fc-tooltip>
+    </fc-copy>
+    `;
+}
 export default {
-  title: 'Controls|Button/Copy Button',
+  title: 'Controls|Copy',
   decorators: [withKnobs],
@@ -25,0 +37,0 @@ parameters: {

stories/icon-button.stories.js

@@ -59,3 +59,3 @@ import { capitalize } from '../../../lib/functions/src/capitalize';
 export default {
-  title: 'Controls|Button/Icon Button',
+  title: 'Controls|Icon Button',
   decorators: [withKnobs],
@@ -62,0 +62,0 @@ parameters: {

stories/speech.stories.js

@@ -32,3 +32,3 @@ import { html } from 'lit-html';
 export default {
-  title: 'Controls|Button/Speech Button',
+  title: 'Controls|Speech',
   decorators: [withKnobs],
@@ -35,0 +35,0 @@ parameters: {

web-components.json

@@ -120,4 +120,80 @@ {
       ],
-      "events": [],
-      "slots": []
+      "cssProperties": [
+        {
+          "name": "--fc-button-text-transform",
+          "description": "button text transform."
+        },
+        {
+          "name": "--fc-button-outer-margin",
+          "description": "button outer margin."
+        },
+        {
+          "name": "--fc-button-min-width",
+          "description": "button min-width. default: 35px;"
+        },
+        {
+          "name": "--fc-button-inner-margin",
+          "description": "button inner margin."
+        },
+        {
+          "name": "--fc-button-icon-color",
+          "description": "icon colour."
+        },
+        {
+          "name": "--fc-button-hover-icon-color",
+          "description": "icon colour when hovered."
+        },
+        {
+          "name": "--fc-button-hover-color",
+          "description": "button box-shadow colour when hovered."
+        },
+        {
+          "name": "--fc-button-hover-box-shadow",
+          "description": "button box-shadow colour when hovered."
+        },
+        {
+          "name": "--fc-button-hover-background-color",
+          "description": "button background colour when hovered."
+        },
+        {
+          "name": "--fc-button-height",
+          "description": "button height."
+        },
+        {
+          "name": "--fc-button-focus-border-color",
+          "description": "button border colour when focused."
+        },
+        {
+          "name": "--fc-button-box-shadow",
+          "description": "button box shadow."
+        },
+        {
+          "name": "--fc-button-border-radius",
+          "description": "button border radius."
+        },
+        {
+          "name": "--fc-button-background-color",
+          "description": "button background colour."
+        },
+        {
+          "name": "--fc-button-active-icon-color",
+          "description": "icon colour when active."
+        },
+        {
+          "name": "--fc-button-active-color",
+          "description": "button colour when active."
+        },
+        {
+          "name": "--fc-button-active-box-shadow",
+          "description": "button box shadow when active. default: 0 0 5px 0 rgba(0, 0, 0, 0.05)"
+        },
+        {
+          "name": "--fc-button-active-border-color",
+          "description": "button border colour when active."
+        },
+        {
+          "name": "--fc-button-active-background-color",
+          "description": "button background colour when active."
+        }
+      ]
     },
@@ -154,4 +230,3 @@ {
         }
-      ],
-      "slots": []
+      ]
     },
@@ -214,6 +289,82 @@ {
       ],
-      "events": [],
-      "slots": []
+      "cssProperties": [
+        {
+          "name": "--fc-button-text-transform",
+          "description": "button text transform."
+        },
+        {
+          "name": "--fc-button-outer-margin",
+          "description": "button outer margin."
+        },
+        {
+          "name": "--fc-button-min-width",
+          "description": "button min-width. default: 35px;"
+        },
+        {
+          "name": "--fc-button-inner-margin",
+          "description": "button inner margin."
+        },
+        {
+          "name": "--fc-button-icon-color",
+          "description": "icon colour."
+        },
+        {
+          "name": "--fc-button-hover-icon-color",
+          "description": "icon colour when hovered."
+        },
+        {
+          "name": "--fc-button-hover-color",
+          "description": "button box-shadow colour when hovered."
+        },
+        {
+          "name": "--fc-button-hover-box-shadow",
+          "description": "button box-shadow colour when hovered."
+        },
+        {
+          "name": "--fc-button-hover-background-color",
+          "description": "button background colour when hovered."
+        },
+        {
+          "name": "--fc-button-height",
+          "description": "button height."
+        },
+        {
+          "name": "--fc-button-focus-border-color",
+          "description": "button border colour when focused."
+        },
+        {
+          "name": "--fc-button-box-shadow",
+          "description": "button box shadow."
+        },
+        {
+          "name": "--fc-button-border-radius",
+          "description": "button border radius."
+        },
+        {
+          "name": "--fc-button-background-color",
+          "description": "button background colour."
+        },
+        {
+          "name": "--fc-button-active-icon-color",
+          "description": "icon colour when active."
+        },
+        {
+          "name": "--fc-button-active-color",
+          "description": "button colour when active."
+        },
+        {
+          "name": "--fc-button-active-box-shadow",
+          "description": "button box shadow when active. default: 0 0 5px 0 rgba(0, 0, 0, 0.05)"
+        },
+        {
+          "name": "--fc-button-active-border-color",
+          "description": "button border colour when active."
+        },
+        {
+          "name": "--fc-button-active-background-color",
+          "description": "button background colour when active."
+        }
+      ]
     }
   ]
 }

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

174302

increased by3.32%

Lines of code

3092

increased by6.07%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@forter/core@^2.0.1

• Updated@forter/icon@^3.2.3