Merge pull request #190 from infor-design/4972-ids-rating-wc

4972 - Implement the ids-rating web comoponent

app/ids-rating/example.html

@@ -0,0 +1,19 @@
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Rating (4/5 stars)</ids-text>
+</ids-layout-grid>
+
+<ids-layout-grid>
+  <ids-layout-grid-cell>
+    <ids-rating value="4"></ids-rating>
+  </ids-layout-grid-cell>
+</ids-layout-grid>
+
+<ids-layout-grid>
+  <ids-text font-size="12" type="h2">Rating (3.5/5 Stars)</ids-text>
+</ids-layout-grid>
+
+<ids-layout-grid>
+  <ids-layout-grid-cell>
+    <ids-rating value="3.5" readonly="true"></ids-rating>
+  </ids-layout-grid-cell>
+</ids-layout-grid>

app/ids-rating/index.html

@@ -0,0 +1,3 @@
+{{> ../layouts/head.html }}
+{{> example.html }}
+{{> ../layouts/footer.html }}

app/ids-rating/index.js

@@ -0,0 +1 @@
+import IdsRating from '../../src/ids-rating/ids-rating';

app/index.html

@@ -29,5 +29,6 @@
 {{> ids-accordion/example.html }}
 {{> ids-block-grid/example.html }}
 {{> ids-render-loop/example.html }}
+{{> ids-rating/example.html}}
 {{> ids-counts/example.html }}
 {{> layouts/footer.html }}

app/index.js

@@ -31,6 +31,7 @@ import IdsBlockGridItem from '../src/ids-block-grid/ids-block-grid-item';
 import IdsCounts from '../src/ids-counts/ids-counts';
 import IdsContainer from '../src/ids-container/ids-container';
 import IdsThemeSwitcher from '../src/ids-theme-switcher/ids-theme-switcher';
+import IdsRating from '../src/ids-rating/ids-rating';
 import IdsWizard, { IdsWizardStep } from '../src/ids-wizard';
 import IdsModal, { IdsOverlay } from '../src/ids-modal';
 import IdsTabs, { IdsTab } from '../src/ids-tabs';

src/ids-rating/README.MD

@@ -0,0 +1,98 @@
+# Ids Rating
+
+## Description
+
+Allows for the display or selection of an objects rating.
+
+## Usage
+
+The rating component displays a scale of selectable values in ascending order. A user can select a rating by clicking the star with the position that corresponds to the users rating out of the total. Best for showing a user's current selection relative to the lower and upper limits of a scale.
+
+## Code Examples
+
+
+The rating component can be used as an interactive or read only element. Users may select any whole value out of the total as a rating. When functioning as a read-only element, ratings may use .5 decimals to more accurately display the average rating of an object.
+
+A basic rating with 5 stars by default and none checked.
+
+```html
+<ids-rating></ids-rating>
+```
+
+A rating rating with 4.5/5 which is also readonly. If using half stars the rating component should be readonly as you cannot click half stars in any way with the UI.
+
+```html
+<ids-rating stars="5" readonly="true" value="4.5" size="large"></ids-rating>
+```
+
+## Keyboard Guidelines
+
+- <kbd>Tab/Shift+Tab</kbd>: If the rating item is enabled this will focus or unfocus the star.
+- <kbd>Enter</kbd>: If this will follow the link url or action.
+
+## Accessibility Guidelines
+
+- `aubible` span are added for screen readers to hear the star information.
+
+## Settings and Attributes
+
+- `stars` {number} Sets the stars attribute to displayed the amount of items`stars="5"`
+- `value` {number} Sets the rating value attribute. `value="0"`
+- `readyonly` {boolean} Sets the readonly attribute. Valid values are 'true' | 'false'
+- `size` {number} Sets the rating size attribute. `size="large"` Valid values are 'small' | 'medium' | 'large'
+- `mode` {string} Sets the theme mode
+- `version` {string} Sets the theme version
+
+## Converting from Previous Versions
+
+### Version - 4.x:
+
+```html
+  <div class="rating">
+  <input type="radio" class="is-filled" name="rating-name" id="one-star-id1"/>
+  <label for="one-star-id1">
+    <svg class="icon" focusable="false" aria-hidden="true">
+      <use href="#icon-star-filled"/>
+    </svg>
+    <span class="audible">1 out of 5 Stars</span>
+  </label>
+
+  <input type="radio" class="is-filled" name="rating-name" id="two-star-id1"/>
+  <label for="two-star-id1">
+    <svg class="icon" focusable="false" aria-hidden="true">
+      <use href="#icon-star-filled"/>
+    </svg>
+    <span class="audible">2 out of 5 Stars</span>
+  </label>
+
+  <input type="radio" class="is-filled" name="rating-name" id="three-star-id1"/>
+  <label for="three-star-id1">
+    <svg class="icon" focusable="false" aria-hidden="true">
+      <use href="#icon-star-filled"/>
+    </svg>
+    <span class="audible">3 out of 5 Stars</span>
+  </label>
+
+  <input type="radio" class="is-half" checked name="rating-name" id="four-star-id1"/>
+  <label for="four-star-id1">
+    <svg class="icon" focusable="false" aria-hidden="true">
+      <use href="#icon-star-half"/>
+    </svg>
+    <span class="audible">4 out of 5 Stars</span>
+  </label>
+
+  <input type="radio" name="rating-name" id="five-star-id1"/>
+  <label for="five-star-id1">
+    <svg class="icon" focusable="false" aria-hidden="true">
+      <use href="#icon-star-filled"/>
+    </svg>
+    <span class="audible">5 out of 5 Stars</span>
+  </label>
+  </div>
+```
+
+### Version - 5.x:
+
+```html
+  <ids-rating></ids-rating>
+```

src/ids-rating/TODO.MD

@@ -0,0 +1,32 @@
+# Task List for Web Components
+
+## General Component Checklist
+
+ - [X] Accessibility: Create accessible markup at the start and test a screen reader like Chrome Vox. Also pass Axe tests (with some exceptions)
+ - [X] Abstraction: Think about abstraction, does this component needs to be broken down into different smaller components.
+ - [X] Re Use: Try and use existing components and mixins in your component.
+ - [X] Settings/Events/Methods: Look at the old component and cover the most important settings, we will try to not bring all of this over so will spec this out.
+ - [ ] Private Methods and Classes: Make anything private that should be with # on the name
+ - [ ] Id/Automation Ids: Using the appendIds mixin and test that id's can be added (TBD)
+ - [X] example.index: The main example.html page should just show one simple example and not all variations
+ - [ ] test-sandbox.index: The sandbox page should show all other examples in a nicely formatted way.
+ - [ ] Standalone Css: Add a basic standalone css example
+ - [ ] Compatibility Example: Works in Page with 4.x version
+ - [ ] Documentation: Add copious documentation in a README.MD in the folder
+ - [X] TODO: Add a TODO.md for anything needing to be done in the future you think of
+ - [ ] Themes: Implement color changes for Themes
+ - [X] Types: In the `d.ts` file add types for all public settings, methods and events
+ - [ ] 100% Test Coverage: Add Functional test coverage to 100% or by ignoring coverage on a non testable section
+ - [ ] Changelog: Add detailed Upgrade Docs in Changelog discussing any gotchas converting from 4.x
+ - [ ] e2e Tests: Add tests for any e2e functionality that cant be accurately tested in the functional tests as well as basic sanity checks, Axe checks and Percy Tests for all 3 themes
+ - [ ] Security: We will always pass all [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) guidelines. But the code is setup to error if this fails. Also we will pass security scans like Veracode and Snyk. The biggest issue here is usually XSS.
+ - [ ] NG / Vue / React / Svelte / TS Example (we will build this out)
+ - [ ] Old Issues: Review Be aware of old and new issues on a component in the [old backlog](https://github.com/infor-design/enterprise/issues)
+
+# TODO on IDS Rating
+
+## Features
+
+- [] Stars attribute render stars on setter and getter
+- [] e2e coverage above 50%
+- [] 

src/ids-rating/ids-rating.d.ts

@@ -0,0 +1,16 @@
+export default class IdsRating extends HTMLElement {
+  /** Set the value attribute */
+  value: '0' | string | number;
+
+  /** Set the stars attribute */
+  stars: '5' | string | number;
+
+  /** Set the readonly attribute */
+  readonly: 'true' | 'false' | string;
+
+  /** Set the size attribute */
+  size: 'small' | 'medium' | 'large' | string;
+
+  /** Set the theme version */
+  version: 'new' | 'classic' | string;
+}