@forter/button-group - npm Package Compare versions

Comparing version 1.1.0 to 1.2.1

_virtual/_rollupPluginBabelHelpers.js

@@ -0,1 +1,38 @@
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _superPropBase(object, property) {
+  while (!Object.prototype.hasOwnProperty.call(object, property)) {
+    object = _getPrototypeOf(object);
+    if (object === null) break;
+  }
+
+  return object;
+}
+
+function _get(target, property, receiver) {
+  if (typeof Reflect !== "undefined" && Reflect.get) {
+    _get = Reflect.get;
+  } else {
+    _get = function _get(target, property, receiver) {
+      var base = _superPropBase(target, property);
+
+      if (!base) return;
+      var desc = Object.getOwnPropertyDescriptor(base, property);
+
+      if (desc.get) {
+        return desc.get.call(receiver);
+      }
+
+      return desc.value;
+    };
+  }
+
+  return _get(target, property, receiver || target);
+}
+
 function _toArray(arr) {
@@ -433,3 +470,3 @@ return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest();
 
-export { _arrayWithHoles as arrayWithHoles, _decorate as decorate, _iterableToArray as iterableToArray, _nonIterableRest as nonIterableRest, _toArray as toArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };
+export { _arrayWithHoles as arrayWithHoles, _decorate as decorate, _get as get, _getPrototypeOf as getPrototypeOf, _iterableToArray as iterableToArray, _nonIterableRest as nonIterableRest, _superPropBase as superPropBase, _toArray as toArray, _toPrimitive as toPrimitive, _toPropertyKey as toPropertyKey };
 //# sourceMappingURL=_rollupPluginBabelHelpers.js.map

CHANGELOG.md

@@ -6,2 +6,27 @@ # Change Log
 
+## [1.2.1](https://github.com/forter/web-components/compare/@forter/button-group@1.2.0...@forter/button-group@1.2.1) (2019-09-16)
+
+
+### Bug Fixes
+
+* **button:** fix button theme ([3cbfc6e](https://github.com/forter/web-components/commit/3cbfc6e))
+* **button-group:** fix CSS bugs ([9b15bf7](https://github.com/forter/web-components/commit/9b15bf7))
+* **button-group:** use new icon property ([f07900b](https://github.com/forter/web-components/commit/f07900b))
+* **button-group:** use new select-mixin api ([eaa31f3](https://github.com/forter/web-components/commit/eaa31f3))
+
+
+
+
+
+# [1.2.0](https://github.com/forter/web-components/compare/@forter/button-group@1.1.0...@forter/button-group@1.2.0) (2019-09-09)
+
+
+### Features
+
+* **button:** changing colors ([7e6ab0b](https://github.com/forter/web-components/commit/7e6ab0b))
+
+
+
+
+
 # 1.1.0 (2019-09-02)
@@ -8,0 +33,0 @@

fc-button-group.css.js

@@ -9,5 +9,7 @@ import { css } from 'lit-element';
   --padding-vertical: 5px;
+  --fc-icon-size: 20px;
 }
 
-.container {
+#container {
+  background-color: var(--white);
   height: 35px;
@@ -24,40 +26,13 @@ padding-left: calc(var(--padding-horizontal) * 2);
 
-:host([intent=secondary]) .container {
-  background-color: var(--ftr-grey-lighter);
+:host([intent=secondary]) #container {
   box-shadow: none;
 }
 
-.container ::slotted(*) {
-  display: inline-block;
-}
-
-.container ::slotted(label) {
-  margin: 0 1px;
-  min-width: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 5px;
-  position: relative;
-  padding: var(--padding-vertical) var(--padding-horizontal);
-}
-
-.container ::slotted(label:hover),
-.container ::slotted(.selected) {
-  --fc-icon-fill: var(--fc-button-group-selected-icon-fill, var(--ftr-cyan));
-}
-
-.container ::slotted(input) {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-}
-
-:host([disabled]) .container {
-  background-color: var(--ftr-grey-lighter);
+:host([disabled]) #container {
   pointer-events: none;
+  background: none;
 }
 
-:host([disabled]) .container ::slotted(.button-group-item) {
-  --fc-icon-fill: var(--ftr-grey);
+:host([disabled]) #container ::slotted(fc-button-group-item) {
+  --fc-icon-fill: var(--gray-5);
 }
@@ -64,0 +39,0 @@ `;

FcButtonGroup.js

@@ -1,2 +0,3 @@
-import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
+import { register } from '@forter/core';
+import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js';
 import { LitElement, property, html } from 'lit-element';
@@ -9,3 +10,3 @@ import bound from 'bound-decorator';
 import { getRandomString } from '@forter/functions/get-random-string';
-import { SelectMixin } from '@forter/mixins';
+import { SelectMixin, DelegatesFocusMixin } from '@forter/mixins';
 import '@forter/icon';
@@ -15,7 +16,14 @@ import '@forter/tooltip';
 import style from './fc-button-group.css.js';
+import itemStyle from './fc-button-group-item.css.js';
 
-const assignSelected = selectedIndex => (item, index) => ({ ...item,
-  selected: index === selectedIndex
-});
+/** @typedef {import('lit-html').TemplateResult} TemplateResult */
+
 /**
+ * @typedef {Object} ItemModel
+ * @param {String} [icon]
+ * @param {String} [tooltip]
+ * @param {Boolean} [selected]
+ */
+
+/**
  * @typedef {Object} ButtonModel
@@ -29,9 +37,17 @@ * @property {String} icon the name of the icon to display
 /**
- * # `<fc-button-group>`
+ * @element fc-button-group
+ *
+ * @slot - used internally to render light children. Do not slot in your own content.
+ *
+ * @cssprop --padding-horizontal
+ * @cssprop --padding-vertical
  */
 
-
 let FcButtonGroup = _decorate(null, function (_initialize, _SelectMixin) {
   class FcButtonGroup extends _SelectMixin {
-    /** If the element is disabled */
+    /**
+     * If the element is disabled
+     * @type {Boolean}
+     * @attr
+     */
 
@@ -41,11 +57,33 @@ /**
      * @type {ButtonModel[]}
+     * @prop
      */
 
-    /** The label for the group*/
+    /**
+     * The label for the group
+     * @type {String}
+     * @attr
+     */
 
-    /** The name for the group*/
+    /**
+     * The formdata name for the group
+     * @type {String}
+     * @attr
+     */
 
-    /** The intent of the button goup */
+    /**
+     * The intent of the button group
+     * @type {'primary'}
+     * @attr
+     */
 
     /** @inheritdoc */
+
+    /**
+     * Template for a light child
+     * @protected
+     * @param {ItemModel} item
+     * @return {TemplateResult}
+     */
+
+    /** @inheritdoc */
     constructor() {
@@ -61,3 +99,3 @@ super();
         style.textContent = `
-        fc-button-group label .invisible {
+        fc-button-group-item label .invisible {
           position: absolute;
@@ -99,2 +137,15 @@ clip: rect(1px, 1px, 1px, 1px);
     }, {
+      kind: "get",
+      key: "options",
+      value: function options() {
+        return this._options;
+      }
+    }, {
+      kind: "set",
+      key: "options",
+      value: function options(value) {
+        render(value.map(this.lightItemTemplate), this);
+        this._options = value;
+      }
+    }, {
       kind: "field",
@@ -140,3 +191,3 @@ decorators: [property({
       value() {
-        return ['input'];
+        return ['fc-button-group-item'];
       }
@@ -159,4 +210,4 @@
         return html`
-      <div role="group" class="container" aria-label="${ifDefined(this.label)}">
-        <slot @slotchange="${this.onContentSlotchange}"></slot>
+      <div role="group" id="container" aria-label="${ifDefined(this.label)}">
+        <slot></slot>
       </div>
@@ -172,17 +223,153 @@ `;
         tooltip,
-        selected
+        selected,
+        value
       }) {
         const inputId = `${this.inputId}-${getRandomString()}`;
         const labelId = `label-${this.inputId}-${getRandomString()}`;
-        const pointerEvents = this.disabled ? 'none' : 'auto';
         return html`
+      <fc-button-group-item
+          .inputId="${inputId}"
+          .labelId="${labelId}"
+          name="${ifDefined(this.name)}"
+          ?disabled="${this.disabled}"
+          .value="${value}"
+          .selected="${ifDefined(selected)}"
+          tooltip="${ifDefined(tooltip)}"
+          icon="${ifDefined(icon)}"
+      ></fc-button-group-item>
+    `;
+      }
+    }]
+  };
+}, SelectMixin(LitElement));
+register(_decorate(null, function (_initialize2, _DelegatesFocusMixin) {
+  class FcButtonGroupButton extends _DelegatesFocusMixin {
+    constructor(...args) {
+      super(...args);
+
+      _initialize2(this);
+    }
+
+  }
+
+  return {
+    F: FcButtonGroupButton,
+    d: [{
+      kind: "field",
+      decorators: [property({
+        type: String,
+        attribute: 'input-id'
+      })],
+      key: "inputId",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: String,
+        attribute: 'label-id'
+      })],
+      key: "labelId",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: String
+      })],
+      key: "tooltip",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: String
+      })],
+      key: "icon",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: String
+      })],
+      key: "name",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean
+      })],
+      key: "disabled",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "selected",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property()],
+      key: "value",
+      value: void 0
+    }, {
+      kind: "field",
+      static: true,
+      key: "is",
+
+      value() {
+        return 'fc-button-group-item';
+      }
+
+    }, {
+      kind: "field",
+      static: true,
+      key: "styles",
+
+      value() {
+        return [itemStyle];
+      }
+
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
+        return html`
+      <div id="container">
+        <slot name="input"></slot>
+        <slot name="label"></slot>
+      </div>
+    `;
+      }
+    }, {
+      kind: "method",
+      decorators: [bound],
+      key: "lightItemTemplate",
+      value: function lightItemTemplate() {
+        const {
+          selected,
+          value,
+          tooltip,
+          icon,
+          name,
+          disabled,
+          inputId,
+          labelId
+        } = this;
+        const pointerEvents = disabled ? 'none' : 'auto';
+        return html`
       <input id="${inputId}"
+          slot="input"
           type="radio"
-          name="${this.name || `${this.inputId}-name`}"
+          name="${name || `${inputId}-name`}"
           .checked="${selected}"
+          .value="${ifDefined(value)}"
+          ?disabled="${disabled}"
+          @change="${this.onChange}"
           style="${styleMap({
           pointerEvents
-        })}"
-          @change="${this.onChange}">
-      <label id="${labelId}" for="${inputId}" class="button-group-item ${classMap({
+        })}">
+      <label id="${labelId}"
+          slot="label"
+          for="${inputId}"
+          class="button-group-item ${classMap({
           selected
@@ -192,3 +379,3 @@ })}">
         <fc-tooltip tooltip="${tooltip}">
-          <fc-icon icon="${icon}" size="20px"></fc-icon>
+          <fc-icon icon="${icon}"></fc-icon>
         </fc-tooltip>
@@ -201,28 +388,23 @@ </label>
       key: "updated",
-      value: function updated(_changedProperties) {
-        if (_changedProperties.has('options')) {
-          render(this.options.map(this.lightItemTemplate), this);
-        }
+      value: function updated() {
+        _get(_getPrototypeOf(FcButtonGroupButton.prototype), "updated", this).call(this);
 
-        if (_changedProperties.has('selectedIndex')) {
-          this.options = this.options.map(assignSelected(this.selectedIndex));
-        }
+        render(this.lightItemTemplate(), this);
       }
     }, {
       kind: "method",
+      decorators: [bound],
       key: "onChange",
-      value: function onChange(event) {
-        event.target.dispatchEvent(new CustomEvent('item-selected'));
+      value: function onChange({
+        target: {
+          checked
+        }
+      }) {
+        this.selected = checked;
       }
-    }, {
-      kind: "method",
-      key: "renderSlotted",
-      value: function renderSlotted() {
-        return this.options.map(this.lightItemTemplate);
-      }
     }]
   };
-}, SelectMixin(LitElement));
+}, DelegatesFocusMixin(LitElement)));
 
 export { FcButtonGroup };
 //# sourceMappingURL=FcButtonGroup.js.map

package.json

 {
   "name": "@forter/button-group",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Button Group from Forter Components",
@@ -54,3 +54,3 @@ "author": "Forter Developers",
   },
-  "gitHead": "b2e02bb45adf8f84dda34e8be754bf1a8fb413c4"
+  "gitHead": "95651597e8de75c722b9e06ebba9fba86f66108e"
 }

src/fc-button-group.spec.js

@@ -9,2 +9,3 @@ import constant from 'crocks/combinators/constant';
   assertRenderWithHTML,
+  element,
   getDefaultExport,
@@ -37,2 +38,8 @@ setupTestWithInput,
 
+function selectItemAtIndex(index) {
+  return function() {
+    element.selectIndex(0);
+  };
+}
+
 describe(tagName, function() {
@@ -42,3 +49,3 @@ it('Instantiates without error', assertInstantiation(tagName));
     beforeEach(setupTest);
-    it('passess basic a11y audit', assertA11y);
+    it('passes basic a11y audit', assertA11y());
   });
@@ -62,3 +69,8 @@
     it('should have false disabled property', assertProperties({ disabled: false }));
+    describe('when selecting first item', function() {
+      beforeEach(selectItemAtIndex(0));
+      it('should have selectedIndex 0', assertProperties({ selectedIndex: 0, value: 'add user' }));
+      it('should have selectedItem', assertProperties(() => ({ selectedItem: element.items[0] })));
+    });
   });
 });

src/FcButtonGroup.js

@@ -0,1 +1,3 @@
+import { register } from '@forter/core';
+
 import { LitElement, html, property } from 'lit-element';
@@ -8,3 +10,4 @@ import bound from 'bound-decorator';
 import { getRandomString } from '@forter/functions/get-random-string';
-import { SelectMixin } from '@forter/mixins';
+import { SelectMixin, DelegatesFocusMixin } from '@forter/mixins';
+
 import '@forter/icon';
@@ -15,7 +18,11 @@ import '@forter/tooltip';
 import style from './fc-button-group.css';
+import itemStyle from './fc-button-group-item.css';
 
-const assignSelected = selectedIndex => (item, index) => ({
-  ...item,
-  selected: index === selectedIndex,
-});
+/** @typedef {import('lit-html').TemplateResult} TemplateResult */
+/**
+ * @typedef {Object} ItemModel
+ * @param {String} [icon]
+ * @param {String} [tooltip]
+ * @param {Boolean} [selected]
+ */
 
@@ -31,6 +38,15 @@ /**
 /**
- * # `<fc-button-group>`
+ * @element fc-button-group
+ *
+ * @slot - used internally to render light children. Do not slot in your own content.
+ *
+ * @cssprop --padding-horizontal
+ * @cssprop --padding-vertical
  */
 export class FcButtonGroup extends SelectMixin(LitElement) {
-  /** If the element is disabled */
+  /**
+   * If the element is disabled
+   * @type {Boolean}
+   * @attr
+   */
   @property({ type: Boolean, reflect: true }) disabled = false;
@@ -41,12 +57,34 @@
    * @type {ButtonModel[]}
+   * @prop
    */
   @property({ type: Array }) options = [];
 
-  /** The label for the group*/
+  get options() {
+    return this._options;
+  }
+
+  set options(value) {
+    render(value.map(this.lightItemTemplate), this);
+    this._options = value;
+  }
+
+  /**
+   * The label for the group
+   * @type {String}
+   * @attr
+   */
   @property({ type: String }) label;
 
-  /** The name for the group*/
+  /**
+   * The formdata name for the group
+   * @type {String}
+   * @attr
+   */
   @property({ type: String }) name;
 
-  /** The intent of the button goup */
+  /**
+   * The intent of the button group
+   * @type {'primary'}
+   * @attr
+   */
   @property({ type: String, reflect: true }) intent = 'primary';
@@ -56,3 +94,3 @@
 
-  static allowedChildren = ['input'];
+  static allowedChildren = ['fc-button-group-item'];
 
@@ -67,4 +105,4 @@ static styles = [
     return html`
-      <div role="group" class="container" aria-label="${ifDefined(this.label)}">
-        <slot @slotchange="${this.onContentSlotchange}"></slot>
+      <div role="group" id="container" aria-label="${ifDefined(this.label)}">
+        <slot></slot>
       </div>
@@ -74,22 +112,26 @@ `;
 
-  @bound lightItemTemplate({ icon, tooltip, selected }) {
+  /**
+   * Template for a light child
+   * @protected
+   * @param {ItemModel} item
+   * @return {TemplateResult}
+   */
+  @bound lightItemTemplate({ icon, tooltip, selected, value }) {
     const inputId = `${this.inputId}-${getRandomString()}`;
     const labelId = `label-${this.inputId}-${getRandomString()}`;
-    const pointerEvents = this.disabled ? 'none' : 'auto';
     return html`
-      <input id="${inputId}"
-          type="radio"
-          name="${this.name || `${this.inputId}-name`}"
-          .checked="${selected}"
-          style="${styleMap({ pointerEvents })}"
-          @change="${this.onChange}">
-      <label id="${labelId}" for="${inputId}" class="button-group-item ${classMap({ selected })}">
-        <span class="invisible">${tooltip}</span>
-        <fc-tooltip tooltip="${tooltip}">
-          <fc-icon icon="${icon}" size="20px"></fc-icon>
-        </fc-tooltip>
-      </label>
+      <fc-button-group-item
+          .inputId="${inputId}"
+          .labelId="${labelId}"
+          name="${ifDefined(this.name)}"
+          ?disabled="${this.disabled}"
+          .value="${value}"
+          .selected="${ifDefined(selected)}"
+          tooltip="${ifDefined(tooltip)}"
+          icon="${ifDefined(icon)}"
+      ></fc-button-group-item>
     `;
   }
 
+  /** @inheritdoc */
   constructor() {
@@ -101,3 +143,3 @@ super();
       style.textContent = `
-        fc-button-group label .invisible {
+        fc-button-group-item label .invisible {
           position: absolute;
@@ -110,20 +152,69 @@ clip: rect(1px, 1px, 1px, 1px);
   }
+}
 
-  updated(_changedProperties) {
-    if (_changedProperties.has('options')) {
-      render(this.options.map(this.lightItemTemplate), this);
-    }
+register(class FcButtonGroupButton extends DelegatesFocusMixin(LitElement) {
+  @property({ type: String, attribute: 'input-id' }) inputId;
 
-    if (_changedProperties.has('selectedIndex')) {
-      this.options = this.options.map(assignSelected(this.selectedIndex));
-    }
+  @property({ type: String, attribute: 'label-id' }) labelId;
+
+  @property({ type: String }) tooltip;
+
+  @property({ type: String }) icon;
+
+  @property({ type: String }) name;
+
+  @property({ type: Boolean }) disabled;
+
+  @property({ type: Boolean, reflect: true }) selected;
+
+  @property() value;
+
+  static is = 'fc-button-group-item';
+
+  static styles = [
+    itemStyle,
+  ]
+
+  render() {
+    return html`
+      <div id="container">
+        <slot name="input"></slot>
+        <slot name="label"></slot>
+      </div>
+    `;
   }
 
-  onChange(event) {
-    event.target.dispatchEvent(new CustomEvent('item-selected'));
+  @bound lightItemTemplate() {
+    const { selected, value, tooltip, icon, name, disabled, inputId, labelId } = this;
+    const pointerEvents = disabled ? 'none' : 'auto';
+    return html`
+      <input id="${inputId}"
+          slot="input"
+          type="radio"
+          name="${name || `${inputId}-name`}"
+          .checked="${selected}"
+          .value="${ifDefined(value)}"
+          ?disabled="${disabled}"
+          @change="${this.onChange}"
+          style="${styleMap({ pointerEvents })}">
+      <label id="${labelId}"
+          slot="label"
+          for="${inputId}"
+          class="button-group-item ${classMap({ selected })}">
+        <span class="invisible">${tooltip}</span>
+        <fc-tooltip tooltip="${tooltip}">
+          <fc-icon icon="${icon}"></fc-icon>
+        </fc-tooltip>
+      </label>
+    `;
   }
 
-  renderSlotted() {
-    return this.options.map(this.lightItemTemplate);
+  updated() {
+    super.updated();
+    render(this.lightItemTemplate(), this);
   }
-}
+
+  @bound onChange({ target: { checked } }) {
+    this.selected = checked;
+  }
+});

stories/button-group.stories.js

@@ -18,3 +18,2 @@ import markdown from '../README.md';
   const { disabled, options, intent, label } = require(`../test/${title.toLowerCase()}/input.json`);
-  console.log({ disabled, options, intent, label })
   const render = () => html`
@@ -21,0 +20,0 @@ <fc-button-group

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

62218

increased by18.78%

Number of package files

37

increased by12.12%

Lines of code

1281

increased by32.47%

Worsened metrics

Number of lines in readme file

1

decreased by-97.14%

No dependency changes