@forter/radio-button - npm Package Compare versions

Comparing version 2.0.0 to 2.1.1

CHANGELOG.md

@@ -6,2 +6,25 @@ # Change Log
 
+## [2.1.1](https://github.com/forter/web-components/compare/@forter/radio-button@2.1.0...@forter/radio-button@2.1.1) (2019-09-16)
+
+
+### Bug Fixes
+
+* **radio-button:** fix radio theme ([22b4978](https://github.com/forter/web-components/commit/22b4978))
+* **radio-button:** use new select-mixin api ([45bca30](https://github.com/forter/web-components/commit/45bca30))
+
+
+
+
+
+# [2.1.0](https://github.com/forter/web-components/compare/@forter/radio-button@2.0.0...@forter/radio-button@2.1.0) (2019-09-09)
+
+
+### Features
+
+* **radio-button:** changing colors ([5a277f5](https://github.com/forter/web-components/commit/5a277f5))
+
+
+
+
+
 # 2.0.0 (2019-09-02)
@@ -8,0 +31,0 @@

fc-radio-button.css.js

@@ -22,3 +22,3 @@ import { css } from 'lit-element';
   width: 14px;
-  border: 1px solid var(--fc-radio-border-color, var(--ftr-grey-dark));
+  border: 1px solid var(--fc-radio-border-color, var(--gray-5));
   border-radius: 50%;
@@ -55,7 +55,7 @@ cursor: pointer;
   cursor: pointer;
-  color: var(--fc-radio-text-color, black);
+  color: var(--fc-radio-text-color, var(--black));
 }
 
 :host([checked]) #input span {
-  background: var(--fc-radio-checked-color, var(--ftr-cyan));
+  background: var(--fc-radio-checked-color, var(--ftr-apply-5));
 }
@@ -65,7 +65,7 @@
 :host(:hover) #input {
-  background: var(--fc-radio-hover-color, var(--ftr-grey-lighter));
+  background: var(--fc-radio-hover-color, var(--ftr-apply-0));
 }
 
 :host([disabled]:hover) #input {
-  border: 1px solid var(--fc-radio-disabled-border-color, rgba(0, 0, 0, 0.25));
+  border: 1px solid var(--fc-radio-disabled-border-color, var(--ftr-cancel-5));
   background: inherit;
@@ -81,7 +81,7 @@ }
 :host([disabled]) #input {
-  border: 1px solid var(--fc-radio-disabled-border-color, rgba(0, 0, 0, 0.25));
+  border: 1px solid var(--fc-radio-disabled-border-color, var(--ftr-cancel-5));
 }
 
 :host([disabled]) #label ::slotted(label) {
-  color: var(--fc-radio-disabled-text-color, var(--ftr-grey-light));
+  color: var(--fc-radio-disabled-text-color, var(--ftr-cancel-5));
 }
@@ -101,3 +101,3 @@
 :host(:hover:not([disabled])) #container:hover {
-  background: var(--fc-radio-button-hover-color, #e7f5ff);
+  background: var(--fc-radio-button-hover-color, var(--ftr-apply-0));
 }
@@ -104,0 +104,0 @@ `;

FcRadioButton.js

@@ -11,3 +11,12 @@ import { decorate as _decorate, get as _get, getPrototypeOf as _getPrototypeOf } from './_virtual/_rollupPluginBabelHelpers.js';
 /**
- * # `<fc-radio-button>`
+ * @element fc-radio-button
+ * @slot input - internally used to render light children. Do not use.
+ * @slot label - internally used to render light children. Do not use.
+ * @fires item-selected
+ * @cssprop --fc-radio-border-color - default: `var(--gray-8)`
+ * @cssprop --fc-radio-text-color - default: `black`
+ * @cssprop --fc-radio-checked-color - default: `var(--ftr-cyan)`
+ * @cssprop --fc-radio-hover-color - default: `var(--gray-0)`
+ * @cssprop --fc-radio-disabled-border-color - default: `rgba(0, 0, 0, 0.25)`
+ * @cssprop --fc-radio-disabled-text-color - default: `var(--gray-3)`
  */
@@ -17,13 +26,35 @@
   class FcRadioButton extends _DelegatesFocusMixin {
-    /** Whether the element is disabled */
+    /**
+     * Whether the element is disabled
+     * @type {Boolean}
+     * @attr
+     */
 
-    /** Whether the element is selected */
+    /**
+     * The element's label
+     * @type {String}
+     * @attr
+     */
 
-    /** The element's label */
+    /**
+     * The input's value
+     * @type {String}
+     * @attr
+     */
 
-    /** The input's value */
+    /**
+     * The input's name
+     * @type {String}
+     * @attr
+     */
 
-    /** The input's name */
+    /**
+     * If the element is disabled
+     * @type {Boolean}
+     * @attr
+     */
 
     /** @inheritdoc */
+
+    /** @inheritdoc */
     constructor() {
@@ -37,3 +68,5 @@ super();
     }
+    /** @inheritdoc */
 
+
   }
@@ -57,9 +90,2 @@
       decorators: [property({
-        type: Boolean
-      })],
-      key: "selected",
-      value: void 0
-    }, {
-      kind: "field",
-      decorators: [property({
         type: String
@@ -175,6 +201,2 @@ })],
         render(this.renderRadio(), this);
-
-        if (changed.has('selected') && this.selected != null) {
-          this.checked = this.selected;
-        }
       }
@@ -191,3 +213,2 @@ }, {
         this.checked = checked;
-        this.fire('item-selected');
       }
@@ -194,0 +215,0 @@ }]

FcRadioGroup.js

@@ -8,3 +8,37 @@ import { decorate as _decorate } from './_virtual/_rollupPluginBabelHelpers.js';
 /**
- * # `<fc-radio-group>`
+ * ##Usage
+ * ### Default
+ * ```html
+ * <fc-radio-group>
+ *     <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>
+ *     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
+ * </fc-radio-group>
+ * ```
+ *
+ * ### Preselected
+ * ```html
+ * <fc-radio-group>
+ *     <fc-radio-button checked label="Pizza" value="pizza"></fc-radio-button>
+ *     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
+ * </fc-radio-group>
+ * ```
+ *
+ * ### Disabled
+ * ```html
+ * <fc-radio-group>
+ *     <fc-radio-button disabled label="Pizza" value="pizza"></fc-radio-button>
+ *     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
+ * </fc-radio-group>
+ * ```
+ *
+ * ### Disable All
+ * ```html
+ * <fc-radio-group disabled>
+ *     <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>
+ *     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
+ * </fc-radio-group>
+ * ```
+ * @element fc-radio-group
+ * @slot - internally used for light input. Do not use.
+ * @cssprop --fc-radio-group-legend-color - default: `var(--ftr-red)`
  */
@@ -63,6 +97,18 @@
     }, {
+      kind: "field",
+      key: "attributeForSelected",
+
+      value() {
+        return 'checked';
+      }
+
+    }, {
       kind: "method",
       key: "render",
       value:
-      /** The legend for the fieldset */
+      /**
+       * The legend for the fieldset
+       * @type {String}
+       * @attr
+       */
 
@@ -77,3 +123,3 @@ /** @inheritdoc */
       <legend>${legend}</legend>
-      <slot @slotchange="${this.onContentSlotchange}"></slot>
+      <slot></slot>
     </fieldset>
@@ -80,0 +126,0 @@ `;

package.json

 {
   "name": "@forter/radio-button",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Radio Button and Group from Forter Components",
@@ -55,5 +55,5 @@ "author": "Forter Developers",
     "@forter/functions": "^2.0.0",
-    "@forter/mixins": "^2.0.0"
+    "@forter/mixins": "^3.0.0"
   },
-  "gitHead": "b2e02bb45adf8f84dda34e8be754bf1a8fb413c4"
+  "gitHead": "95651597e8de75c722b9e06ebba9fba86f66108e"
 }

README.md

@@ -1,35 +0,91 @@
-<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-radio-button
+## Properties
 
-# `@forter/radio-group`
+| Property   | Attribute  | Type      | Description                     |
+|------------|------------|-----------|---------------------------------|
+| `checked`  | `checked`  | `boolean` | If the element is disabled      |
+| `disabled` | `disabled` | `boolean` | Whether the element is disabled |
+| `inputId`  |            | `string`  |                                 |
+| `label`    | `label`    | `string`  | The element's label             |
+| `labelId`  |            | `string`  |                                 |
+| `name`     | `name`     | `string`  | The input's name                |
+| `value`    | `value`    | `string`  | The input's value               |
 
-## Default
+## Events
+
+| Event           |
+|-----------------|
+| `item-selected` |
+
+## CSS Custom Properties
+
+| Property                           | Description                    |
+|------------------------------------|--------------------------------|
+| `--fc-radio-border-color`          | default: `var(--gray-8)`       |
+| `--fc-radio-checked-color`         | default: `var(--ftr-cyan)`     |
+| `--fc-radio-disabled-border-color` | default: `rgba(0, 0, 0, 0.25)` |
+| `--fc-radio-disabled-text-color`   | default: `var(--gray-3)`       |
+| `--fc-radio-hover-color`           | default: `var(--gray-0)`       |
+| `--fc-radio-text-color`            | default: `black`               |
+
+## Slots
+
+| Name    | Description                                      |
+|---------|--------------------------------------------------|
+| `input` | internally used to render light children. Do not use. |
+| `label` | internally used to render light children. Do not use. |
+
+
+# fc-radio-group
+
+##Usage
+### Default
 ```html
 <fc-radio-group>
-    <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>    
-    <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
+     <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>
+     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
 </fc-radio-group>
 ```
 
-## Preselected
+### Preselected
 ```html
 <fc-radio-group>
-    <fc-radio-button checked label="Pizza" value="pizza"></fc-radio-button>
-    <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
+     <fc-radio-button checked label="Pizza" value="pizza"></fc-radio-button>
+     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
 </fc-radio-group>
 ```
 
-## Disabled
+### Disabled
 ```html
 <fc-radio-group>
-    <fc-radio-button disabled label="Pizza" value="pizza"></fc-radio-button>    
-    <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
+     <fc-radio-button disabled label="Pizza" value="pizza"></fc-radio-button>
+     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
 </fc-radio-group>
 ```
 
-## Disable All
+### Disable All
 ```html
 <fc-radio-group disabled>
-    <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>    
-    <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
+     <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>
+     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
 </fc-radio-group>
-```
+```
+
+## Properties
+
+| Property               | Attribute | Type     | Default   | Description                 |
+|------------------------|-----------|----------|-----------|-----------------------------|
+| `attributeForSelected` |           | `string` | "checked" |                             |
+| `legend`               | `legend`  | `string` |           | The legend for the fieldset |
+
+## CSS Custom Properties
+
+| Property                        | Description               |
+|---------------------------------|---------------------------|
+| `--fc-radio-group-legend-color` | default: `var(--ftr-red)` |
+
+## Slots
+
+| Name | Description                                  |
+|------|----------------------------------------------|
+|      | internally used for light input. Do not use. |

src/fc-radio-button.spec.js

@@ -53,4 +53,4 @@ import constant from 'crocks/combinators/constant';
     it('should render expected DOM', assertRender);
-    it('passess basic a11y audit', assertA11y);
+    it('passess basic a11y audit', assertA11y());
   });
 });

src/fc-radio-group.spec.js

@@ -8,2 +8,4 @@ import constant from 'crocks/combinators/constant';
   assertRenderWithHTML,
+  assertProperties,
+  element,
   getDefaultExport,
@@ -36,2 +38,8 @@ setupTestWithInput,
 
+function selectItemAtIndex(index) {
+  return function() {
+    element.selectIndex(0);
+  };
+}
+
 describe(tagName, function() {
@@ -47,4 +55,9 @@ it('Instantiates without error', assertInstantiation(tagName));
     it('should render expected DOM', assertRender);
-    it('should pass basic a11y test', assertA11y);
+    it('should pass basic a11y test', assertA11y());
+    describe('when selecting first item', function() {
+      beforeEach(selectItemAtIndex(0));
+      it('should have selectedIndex 0', assertProperties({ selectedIndex: 0, value: 'eggs' }));
+      it('should have selectedItem', assertProperties(() => ({ selectedItem: element.items[0] })));
+    });
   });
 });

src/FcRadioButton.js

@@ -12,20 +12,47 @@ import bound from 'bound-decorator';
 /**
- * # `<fc-radio-button>`
+ * @element fc-radio-button
+ * @slot input - internally used to render light children. Do not use.
+ * @slot label - internally used to render light children. Do not use.
+ * @fires item-selected
+ * @cssprop --fc-radio-border-color - default: `var(--gray-8)`
+ * @cssprop --fc-radio-text-color - default: `black`
+ * @cssprop --fc-radio-checked-color - default: `var(--ftr-cyan)`
+ * @cssprop --fc-radio-hover-color - default: `var(--gray-0)`
+ * @cssprop --fc-radio-disabled-border-color - default: `rgba(0, 0, 0, 0.25)`
+ * @cssprop --fc-radio-disabled-text-color - default: `var(--gray-3)`
  */
 export class FcRadioButton extends DelegatesFocusMixin(FireMixin(LitElement)) {
-  /** Whether the element is disabled */
+  /**
+   * Whether the element is disabled
+   * @type {Boolean}
+   * @attr
+   */
   @property({ type: Boolean }) disabled = false;
 
-  /** Whether the element is selected */
-  @property({ type: Boolean }) selected;
-
-  /** The element's label */
+  /**
+   * The element's label
+   * @type {String}
+   * @attr
+   */
   @property({ type: String }) label = '';
 
-  /** The input's value */
+  /**
+   * The input's value
+   * @type {String}
+   * @attr
+   */
   @property({ type: String }) value = '';
 
-  /** The input's name */
+  /**
+   * The input's name
+   * @type {String}
+   * @attr
+   */
   @property({ type: String }) name = '';
 
+  /**
+   * If the element is disabled
+   * @type {Boolean}
+   * @attr
+   */
   @property({ type: Boolean, reflect: true }) checked = false;
@@ -69,2 +96,3 @@
 
+  /** @inheritdoc */
   constructor() {
@@ -76,8 +104,6 @@ super();
 
+  /** @inheritdoc */
   updated(changed) {
     super.updated(changed);
     render(this.renderRadio(), this);
-    if (changed.has('selected') && this.selected != null) {
-      this.checked = this.selected;
-    }
   }
@@ -87,4 +113,3 @@
     this.checked = checked;
-    this.fire('item-selected');
   }
 }

src/FcRadioGroup.js

@@ -7,6 +7,44 @@ import { LitElement, html, property } from 'lit-element';
 /**
- * # `<fc-radio-group>`
+ * ##Usage
+ * ### Default
+ * ```html
+ * <fc-radio-group>
+ *     <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>
+ *     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
+ * </fc-radio-group>
+ * ```
+ *
+ * ### Preselected
+ * ```html
+ * <fc-radio-group>
+ *     <fc-radio-button checked label="Pizza" value="pizza"></fc-radio-button>
+ *     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
+ * </fc-radio-group>
+ * ```
+ *
+ * ### Disabled
+ * ```html
+ * <fc-radio-group>
+ *     <fc-radio-button disabled label="Pizza" value="pizza"></fc-radio-button>
+ *     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
+ * </fc-radio-group>
+ * ```
+ *
+ * ### Disable All
+ * ```html
+ * <fc-radio-group disabled>
+ *     <fc-radio-button label="Pizza" value="pizza"></fc-radio-button>
+ *     <fc-radio-button label="Hamburger" value="hamburger"></fc-radio-button>
+ * </fc-radio-group>
+ * ```
+ * @element fc-radio-group
+ * @slot - internally used for light input. Do not use.
+ * @cssprop --fc-radio-group-legend-color - default: `var(--ftr-red)`
  */
 export class FcRadioGroup extends SelectMixin(LitElement) {
-  /** The legend for the fieldset */
+  /**
+   * The legend for the fieldset
+   * @type {String}
+   * @attr
+   */
   @property({ type: String }) legend = '';
@@ -23,2 +61,4 @@
 
+  attributeForSelected = 'checked';
+
   /** @inheritdoc */
@@ -31,3 +71,3 @@ render() {
       <legend>${legend}</legend>
-      <slot @slotchange="${this.onContentSlotchange}"></slot>
+      <slot></slot>
     </fieldset>
@@ -34,0 +74,0 @@ `;

stories/fc-radio-group.stories.js

@@ -12,2 +12,3 @@ import markdown from '../README.md';
 import '../src/fc-radio-button';
+
 /**
@@ -19,3 +20,2 @@ * Generates a spread of story parameters
  */
-
 function onSelect({ target: { value } }) {
@@ -22,0 +22,0 @@ render(html`${value}`, document.querySelector('output'));

No alert changes

Improved metrics

Total package byte prevSize

75466

24.73%

Number of package files

43

2.38%

Lines of code

1428

24.07%

Number of lines in readme file

92

162.86%

Dependency changes

• + Added

  @forter/mixins@3.2.8
  (transitive)

• - Removed

  @forter/mixins@2.0.0
  (transitive)

• Updated

  @forter/mixins@^3.0.0