@forter/button - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+## [3.1.1](https://github.com/forter/web-components/compare/@forter/button@3.1.0...@forter/button@3.1.1) (2019-09-03)
+
+
+### Bug Fixes
+
+* **button:** export fc-icon-button from index ([e98d397](https://github.com/forter/web-components/commit/e98d397))
+* **icon:** remove tooltip properties from icon in favour of composition ([0fe5431](https://github.com/forter/web-components/commit/0fe5431))
+
+
+
+
+
 # [3.1.0](https://github.com/forter/web-components/compare/@forter/button@3.0.0...@forter/button@3.1.0) (2019-09-03)
@@ -8,0 +20,0 @@

fc-button.md

@@ -34,6 +34,5 @@ <div style="color:black;background-color:cornsilk;border-bottom:4px solid orange;padding:14px 20px">⚠️ Forter Web Components are in development. APIs are subject to change without notice. ⚠️</div>
 ```html
-<fc-button intent="apply"
-    icon="search"
-    tooltip="Search for the Current Order"
->Search</fc-button>
+<fc-tooltip tooltip="Search for the Current Order">
+  <fc-button intent="apply" icon="search">Search</fc-button>
+</fc-tooltip>
 ```
@@ -58,6 +57,5 @@
 ```html
-<fc-button intent="cancel"  
-    icon="cancel"
-    tooltip="Cancel the Chargeback for this Transaction"
->Cancel Chargeback</fc-button>
+<fc-tooltip tooltip="Cancel the Chargeback for this Transaction">
+  <fc-button intent="cancel" icon="cancel">Cancel Chargeback</fc-button>
+</fc-tooltip>
 ```
@@ -82,6 +80,5 @@
 ```html
-<fc-button intent="success"
-    icon="confirmed"
-    tooltip="Release the Order on Forter and on Merchant's ERP"
->Release Order</fc-button>
+<fc-tooltip tooltip="Release the Order on Forter and on Merchant's ERP">
+  <fc-button intent="success" icon="confirmed">Release Order</fc-button>
+</fc-tooltip>
 ```
@@ -106,7 +103,5 @@
 ```html
-<fc-button intent="danger"
-    label="Cancel Order"
-    icon="cancel"
-    tooltip="Cancel the Order on Forter and on Merchant's ERP"
-></fc-button>
+<fc-tooltip tooltip="Cancel the Order on Forter and on Merchant's ERP">
+  <fc-button intent="danger" label="Cancel Order" icon="cancel"></fc-button>
+</fc-tooltip>
 ```
@@ -127,7 +122,5 @@
 ```html
-<fc-button intent="warn"
-    icon="user"
-    icon-Size="15"
-    tooltip="Remove this User from Forter's Portal"
->Delete User</fc-button>
+<fc-tooltip tooltip="Remove this User from Forter's Portal">
+  <fc-button intent="warn" icon="user" icon-Size="15">Delete User</fc-button>
+</fc-tooltip>
 ```
@@ -134,0 +127,0 @@

FcButton.js

@@ -49,7 +49,3 @@ import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js';
       key: "icon",
-
-      value() {
-        return '';
-      }
-
+      value: void 0
     }, {
@@ -61,7 +57,3 @@ kind: "field",
       key: "label",
-
-      value() {
-        return '';
-      }
-
+      value: void 0
     }, {
@@ -172,7 +164,13 @@ kind: "field",
         const minWidth = this.getWidth(width);
+        /**
+         * TODO(benny): class should be
+         * class="${classMap({ active })}"
+         * but there's a bug in semantic-dom-diff
+         */
+
         return html`
       <button id="content"
-          class="${classMap({
+          class="${ifDefined(active ? classMap({
           active
-        })}"
+        }) : undefined)}"
           ?disabled="${disabled}"
@@ -198,3 +196,3 @@ ?active="${active}"
           <div class="layout-row layout-align-center-center mrg-item" style="width: 100%">
-            <span class="mrg-item capitalize" title="${ifDefined(label)}">
+            <span class="mrg-item capitalize">
               <slot></slot>
@@ -201,0 +199,0 @@ </span>

index.js

 import './fc-button.js';
+import './fc-icon-button.js';
 import './fc-copy.js';
 import './fc-speech.js';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@forter/button",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Button from Forter Components",
@@ -51,3 +51,3 @@ "main": "index.js",
     "@forter/core": "^2.0.0",
-    "@forter/icon": "^3.0.0",
+    "@forter/icon": "^3.0.1",
     "@forter/mixins": "^2.0.0",
@@ -59,3 +59,3 @@ "@forter/styles": "^3.0.0",
   },
-  "gitHead": "e0cbc13dacc2f3203e3ee07098cbe47f93d5bc91"
+  "gitHead": "3a02cb2ef78ee9d597e98f1db7a3c9d820319f11"
 }

README.md

@@ -8,3 +8,4 @@ <div style="color:black;background-color:cornsilk;border-bottom:4px solid orange;padding:14px 20px">⚠️ Forter Web Components are in development. APIs are subject to change without notice. ⚠️</div>
 - [`<fc-button>`]('./fc-button.md') Forter Button
+- [`<fc-icon-button>`]('./fc-icon-button.md') Forter Icon Button
 - [`<fc-copy>`]('./fc-copy.md') Forter Copy To Clipboard Button
 - [`<fc-speech>`]('./fc-speech.md') Forter Speech Recognition Button

src/fc-button.spec.js

@@ -1,19 +0,62 @@
-import { chai } from '@bundled-es-modules/chai';
-import { chaiDomEquals } from '@open-wc/chai-dom-equals';
-import { expect, defineCE, fixture } from '@open-wc/testing';
+import constant from 'crocks/combinators/constant';
+import noop from 'crocks/helpers/unit';
 
-import { FcButton } from './FcButton';
+import {
+  assertA11y,
+  assertInstantiation,
+  assertRenderWithHTML,
+  getDefaultExport,
+  setupTestWithInput,
+} from '@forter/test-helpers';
 
-chai.use(chaiDomEquals);
+import './fc-button';
 
-describe('fc-button', () => {
-  const Button = defineCE(FcButton);
-  describe('with an icon attr', function() {
-    it('should render an icon', async () => {
-      const element = await fixture(`<${Button} icon="foo">ok</${Button}>`);
-      const icon = element.shadowRoot.querySelector('fc-icon');
-      expect(icon).to.be.ok;
-      expect(icon.icon).to.equal('foo');
-    });
+const tagName = 'fc-button';
+
+async function setupTest() {
+  return setupTestWithInput({
+    tagName,
+    properties: await import(`../test/fc-button/${this.test.parent.title}/input.json`)
+      .then(getDefaultExport)
+      .catch(constant({})),
+    template: await import(`../test/fc-button/${this.test.parent.title}/template.html`)
+      .then(getDefaultExport)
+      .catch(noop),
   });
+}
+
+async function assertRender() {
+  const html = await import(`../test/fc-button/${this.test.parent.title}/expected.html`)
+    .then(getDefaultExport)
+    .catch(constant(`Could Not Find Expected ShadowDOM for "${this.test.parent.title}"`));
+  return assertRenderWithHTML(html);
+}
+
+describe(tagName, function() {
+  it('Instantiates without error', assertInstantiation(tagName));
+  describe('default properties', function() {
+    beforeEach(setupTest);
+    it('renders expected shadow DOM', assertRender);
+  });
+
+  describe('with icon', function() {
+    beforeEach(setupTest);
+    it('renders expected shadow DOM', assertRender);
+  });
+
+  describe('with icon and label', function() {
+    beforeEach(setupTest);
+    it('renders expected shadow DOM', assertRender);
+    it('passes basic a11y audit', assertA11y);
+  });
+
+  describe('with icon label and icon size', function() {
+    beforeEach(setupTest);
+    it('renders expected shadow DOM', assertRender);
+  });
+
+  describe('with intent', function() {
+    beforeEach(setupTest);
+    it('renders expected shadow DOM', assertRender);
+  });
 });

src/fc-icon-button.spec.js

@@ -35,3 +35,3 @@ import constant from 'crocks/combinators/constant';
 
-describe.only(tagName, function() {
+describe(tagName, function() {
   it('Instantiates without error', assertInstantiation(tagName));
@@ -38,0 +38,0 @@ describe('default properties', function() {

src/FcButton.js

@@ -28,5 +28,5 @@ import { LitElement, html, property } from 'lit-element';
 
-  @property({ type: String }) icon = '';
+  @property({ type: String }) icon;
 
-  @property({ type: String }) label = '';
+  @property({ type: String }) label;
 
@@ -72,5 +72,11 @@ @property({ type: String, attribute: 'icon-size' }) iconSize = DEFAULT_ICON_SIZE;
 
+    /**
+     * TODO(benny): class should be
+     * class="${classMap({ active })}"
+     * but there's a bug in semantic-dom-diff
+     */
+
     return html`
       <button id="content"
-          class="${classMap({ active })}"
+          class="${ifDefined(active ? classMap({ active }) : undefined)}"
           ?disabled="${disabled}"
@@ -94,3 +100,3 @@ ?active="${active}"
           <div class="layout-row layout-align-center-center mrg-item" style="width: 100%">
-            <span class="mrg-item capitalize" title="${ifDefined(label)}">
+            <span class="mrg-item capitalize">
               <slot></slot>
@@ -97,0 +103,0 @@ </span>

src/FcIconButton.js

@@ -52,3 +52,3 @@ import { LitElement, html, property } from 'lit-element';
      * class="${classMap({ active })}"
-     * but there's a but in semantic-dom-diff
+     * but there's a bug in semantic-dom-diff
      */
@@ -55,0 +55,0 @@

src/index.js

 export * from './fc-button';
+export * from './fc-icon-button';
 export * from './fc-copy';
 export * from './fc-speech';

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

119579

increased by11.98%

Number of package files

77

increased by26.23%

Lines of code

2119

increased by10.71%

Number of lines in readme file

11

increased by10%

Dependency changes

• Updated@forter/icon@^3.0.1