4632 - Add Themes Support / And other fixes

.github/workflows/ci.yml

@@ -19,43 +19,35 @@ jobs:
 
     steps:
     - uses: actions/checkout@v2
-    
+
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    
+
     - name: Cache multiple paths
       uses: actions/cache@v2
       with:
         path: node_modules
-        key: 0009
-    
+        key: ids-enterprise-wc-009
+
     - name: Install Dependencies
       run: npm i
-
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-       languages: javascript
 
-    - name: Run a test build
+    - name: Build and Compile
       run: npm run build
-    
+
     - name: Run Lint Checks
       run: npm run lint
-
-    - name: Run tests with Test Coverage
-      run: npm run test:coverage
 
-    - name: Coveralls
-      uses: coverallsapp/github-action@master
-      with:
-        github-token: ${{ secrets.GITHUB_TOKEN }}
-
-    - name: Run Percy Tests
+    - name: Run Tests
       uses: percy/exec-action@v0.3.1
       with:
         command: "npm run test:ci"
       env:
         PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+
+    - name: Report Coverage
+      uses: coverallsapp/github-action@master
+      with:
+        github-token: ${{ secrets.GITHUB_TOKEN }}

.nvmrc

@@ -1 +1 @@
-12.16.3
+14.16.0

.percy.json

@@ -0,0 +1,11 @@
+{
+  "version": 2,
+  "snapshot": {
+    "widths": [
+      375,
+      1280
+    ],
+    "minHeight": 1024,
+    "enableJavaScript": true
+  }
+}

.stylelintrc.json

@@ -3,6 +3,7 @@
     "stylelint-order"
   ],
   "extends": "stylelint-config-standard",
+  "ignoreFiles": ["**/*.js"],
   "rules": {
     "at-rule-no-unknown": [true, {
       "ignoreAtRules": [
@@ -18,15 +19,13 @@
       "declarations"
     ],
     "max-nesting-depth": 3,
-    "no-descending-specificity": [true, {
-      "ignore": [ "selectors-within-list" ]
-    }],
+    "no-descending-specificity": null,
     "order/properties-alphabetical-order": true,
     "selector-pseudo-class-no-unknown": [true, {
-      "ignorePseudoClasses": ["root", "host", "unresolved"]
+      "ignorePseudoClasses": ["root", "host", "unresolved", "part", "::part"]
     }],
     "selector-pseudo-element-no-unknown": [true, {
-      "ignorePseudoElements": ["root", "host", "unresolved"]
+      "ignorePseudoElements": ["root", "host", "unresolved", "part", "::part"]
     }],
     "selector-type-no-unknown":  [true, {
       "ignore": ["custom-elements"]

.vscode/spellright.dict

@@ -13,3 +13,4 @@ Vue
 ids-enterprise-wc
 linted
 Namespaced
+README.md 

README.md

@@ -1,25 +1,58 @@
-# IDS Web Components
+# Infor Design System's Enterprise Components
 
-![Build Status](https://github.com/infor-design/enterprise-wc/workflows/Build%20Check/badge.svg)
-[![Visual Regression Status](https://percy.io/static/images/percy-badge.svg)](https://percy.io/Infor-Design-System/IDS-Web-Components)
-[![Coverage Status](https://coveralls.io/repos/github/infor-design/enterprise-wc/badge.svg)](https://coveralls.io/github/infor-design/enterprise-wc)
+[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+[![npm version](https://badge.fury.io/js/ids-enterprise.svg)](https://badge.fury.io/js/ids-enterprise)
+![Build Check](https://github.com/infor-design/enterprise/workflows/Build%20Check/badge.svg)
 
-Infor Design System Web Components (IDS WC) is an Infor community sourced, open source project that creates high quality web components that contain the common patterns and styles used in Infor Applications. We built these in such a way that they could be used by any application in a variety of popular frameworks (Angular, React Vue).
+Infor Design System's Enterprise component library is a framework-independent UI library consisting of CSS and JS that provides Infor product development teams, partners, and customers the tools to create user experiences that are approachable, focused, relevant and perceptive.
 
-## Getting Started
+For guidelines on when and where to use the components see the [design.infor.com](http://design.infor.com).
 
-```bash
-npm i ids-enterprise-wc -D
+## Key Features
+
+- Multiple themes, including a WCAG 2.0 AAA compatible high-contrast theme
+- Responsive components, patterns and layouts
+- Touch-friendly interactions
+- SVG-based iconography compatible with high DPI screens
+- Built-in, extendible localization system
+- Built-in mitigation of XSS exploits
+- 140+ Components
+
+## Browser Support
+
+We support the latest release and the release previous to the latest (R-1) for browsers and OS versions:
+
+<!-- markdownlint-disable MD013 MD033 -->
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>iOS Safari |
+| --------- | --------- | --------- | --------- | --------- |
+| R-1 | R-1 | R-1| R-1| R-1
+
+<!-- markdownlint-enable MD013 MD033 -->
+
+## Installation
+
+```sh
+npm install --save ids-enterprise@latest
 ```
 
-At that point the node_modules/ids-enterprise-wc folder will contain all the files you need. You can import just the .js files which include encapsulated css. Then just use the custom element as mentioned in the docs for each component. Or you can use a the standalone css file for each component, for a limited bit of css support per component.
+For additional usage methods, see [Installing IDS](docs/DEVELOPER.md#installing-ids-into-your-project)
 
-## TypeScript
+## Documentation
 
+- [Latest Release Docs](https://design.infor.com/code/ids-enterprise/latest)
+- [Change Log](docs/CHANGELOG.md) (Includes latest release changes)
+- [How to build the documentation from source](docs/DEVELOPER.md#basic-commands)
 In Ids Web Components we chose to use Javascript and not TypeScript, however we want to support developers that use typescript. For each component we also include TypeScript declaration files for all methods, settings and events. And we ensure our code if included directly is type safe via. We also created a small [example TypeScript project](https://github.com/infor-design/enterprise-wc-examples/tree/master/typescript-ids-wc) to show one way to use Ids Web Components in a plain typescript project.
 
-## Core principles
+## Contributing
 
+- [Contribution Guidelines](docs/CONTRIBUTING.md)
+- [Developer Information](docs/DEVELOPER.md)
+- Use [Github Issues](https://github.com/infor-design/enterprise/issues) to report all requests, bugs, questions, and feature requests
+- [Review source code changes](https://github.com/infor-design/enterprise/pulls)
+- [Releases, previous and upcoming](https://github.com/infor-design/enterprise/releases)
+- [Microsoft Teams Group](https://teams.microsoft.com/l/team/19%3a2b0c9ce520b0481a9ce115f0ca4a326f%40thread.skype/conversations?groupId=4f50ef7d-e88d-4ccb-98ca-65f26e57fe35&tenantId=457d5685-0467-4d05-b23b-8f817adda47c) (Infor Employees only)
+- [Roadmap and Sprint Board](https://github.com/orgs/infor-design/projects)
 - Test first - 100% Test Coverage
 - Passes all code security scans and is fully CSP compatible
 - Well documented in `.md` format

app/ids-expandable-area/example.html

@@ -14,8 +14,8 @@
         bleeding-edge tagclouds." Platforms extend interactive B2C benchmark proactive, embrace e-markets,
         transition generate peer-to-peer.
       </ids-text>
-      <ids-text slot="expander-default" font-size="14">Show More</ids-text>
-      <ids-text slot="expander-expanded" font-size="14">Show Less</ids-text>
+      <ids-hyperlink slot="expander-default">Show More</ids-hyperlink>
+      <ids-hyperlink slot="expander-expanded">Show Less</ids-hyperlink>
     </ids-expandable-area>
 
     <ids-expandable-area>
@@ -45,8 +45,8 @@
           <ids-text font-size="14">June 21, 2015 (4 days)</ids-text>
         </ids-layout-grid-cell>
       </ids-layout-grid>
-      <ids-text slot="expander-default" font-size="14">Show More</ids-text>
-      <ids-text slot="expander-expanded" font-size="14">Show Less</ids-text>
+      <ids-hyperlink slot="expander-default">Show More</ids-hyperlink>
+      <ids-hyperlink slot="expander-expanded">Show Less</ids-hyperlink>
     </ids-expandable-area>
 
     <ids-expandable-area>
@@ -62,20 +62,12 @@
       <ids-layout-grid slot="pane" cols="2" gap="md" no-margins="true">
         <ids-input size="full" type="text" label="More Customer Details" name="more-customer-details" placeholder="Normal text Field"></ids-input>
       </ids-layout-grid>
-      <ids-text slot="expander-default" font-size="14">Show More</ids-text>
-      <ids-text slot="expander-expanded" font-size="14">Show Less</ids-text>
+      <ids-hyperlink slot="expander-default">Show More</ids-hyperlink>
+      <ids-hyperlink slot="expander-expanded">Show Less</ids-hyperlink>
     </ids-expandable-area>
 
     <ids-expandable-area type="toggle-btn">
-      <ids-toggle-button
-        slot="header"
-        id="test-toggle-button"
-        icon-on="caret-up"
-        icon-off="caret-down"
-        text-off="Employee"
-        text-on="Employee"
-        icon-align="start"
-      >
+      <ids-toggle-button slot="header" id="test-toggle-button" icon-on="caret-up" icon-off="caret-down" text-off="Employee" text-on="Employee" icon-align="start">
         <ids-icon slot="icon" icon="caret-up"></ids-icon>
         <span slot="text">Default Button</span>
     </ids-toggle-button>

app/ids-expandable-area/example.js

@@ -5,6 +5,7 @@ import IdsText from '../../src/ids-text/ids-text';
 import IdsInput from '../../src/ids-input/ids-input';
 import IdsToggleButton from '../../src/ids-toggle-button/ids-toggle-button';
 import IdsIcon from '../../src/ids-icon/ids-icon';
+import IdsHyperlink from '../../src/ids-hyperlink/ids-hyperlink';
 
 document.addEventListener('DOMContentLoaded', () => {
   // Add an event listener to test clickable links

app/ids-hyperlink/example.html

@@ -0,0 +1,10 @@
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1">Hyperlink</ids-text>
+</ids-layout-grid>
+<ids-layout-grid>
+  <ids-layout-grid-cell>
+    <ids-hyperlink href="http://www.example.com" target="_blank">Normal Link</ids-hyperlink>
+    <br/>
+    <ids-hyperlink href="http://www.example.com" disabled="true" target="_blank">Disabled Link</ids-hyperlink>
+  </ids-layout-grid-cell>
+</ids-layout-grid>

app/ids-hyperlink/index.html

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

app/ids-hyperlink/index.js

@@ -0,0 +1 @@
+import IdsHyperlink from '../../src/ids-hyperlink/ids-hyperlink';

app/ids-menu-button/example.html

@@ -1,44 +1,44 @@
 <ids-layout-grid>
-    <ids-text font-size="12" type="h1">Menu Buttons</ids-text>
+  <ids-text font-size="12" type="h1">Menu Buttons</ids-text>
 </ids-layout-grid>
 <ids-layout-grid cols="4" gap="md">
-    <ids-layout-grid-cell>
-        <ids-menu-button id="menu-button" icon="settings" type="tertiary" menu="my-menu" dropdown-icon>
-            <span slot="text">Settings</span>
-        </ids-menu-button>
-        <ids-popup-menu id="my-menu" target="menu-button" trigger="click">
-            <ids-menu-group>
-                <ids-menu-item>Personalize Columns</ids-menu-item>
-            </ids-menu-group>
-            <ids-separator></ids-separator>
-            <ids-menu-group select="single">
-                <ids-menu-header>Row Height</ids-menu-header>
-                <ids-menu-item disabled="true">Extra Small</ids-menu-item>
-                <ids-menu-item>Small</ids-menu-item>
-                <ids-menu-item>Medium</ids-menu-item>
-                <ids-menu-item selected="true">Large</ids-menu-item>
-            </ids-menu-group>
-            <ids-separator></ids-separator>
-            <ids-menu-group select="multiple" keep-open="true">
-                <ids-menu-item selected="true">Show Filter Row</ids-menu-item>
-            </ids-menu-group>
-            <ids-menu-group>
-                <ids-menu-item>Run Filter</ids-menu-item>
-                <ids-menu-item>Clear Filter</ids-menu-item>
-            </ids-menu-group>
-        </ids-popup-menu>
-
-        <ids-menu-button id="icon-button" menu="icon-menu">
-          <ids-icon slot="icon" icon="more"></ids-icon>
-          <span class="audible">Icon Only Button</span>
-        </ids-menu-button>
-        <ids-popup-menu id="icon-menu" target="icon-button" trigger="click">
+  <ids-layout-grid-cell>
+      <ids-menu-button id="menu-button" icon="settings" type="tertiary" menu="my-menu" dropdown-icon>
+          <span slot="text">Settings</span>
+      </ids-menu-button>
+      <ids-popup-menu id="my-menu" target="menu-button" trigger="click">
+          <ids-menu-group>
+              <ids-menu-item>Personalize Columns</ids-menu-item>
+          </ids-menu-group>
+          <ids-separator></ids-separator>
+          <ids-menu-group select="single">
+              <ids-menu-header>Row Height</ids-menu-header>
+              <ids-menu-item disabled="true">Extra Small</ids-menu-item>
+              <ids-menu-item>Small</ids-menu-item>
+              <ids-menu-item>Medium</ids-menu-item>
+              <ids-menu-item selected="true">Large</ids-menu-item>
+          </ids-menu-group>
+          <ids-separator></ids-separator>
+          <ids-menu-group select="multiple" keep-open="true">
+              <ids-menu-item selected="true">Show Filter Row</ids-menu-item>
+          </ids-menu-group>
           <ids-menu-group>
-            <ids-menu-item>Option One</ids-menu-item>
-            <ids-menu-item>Option Two</ids-menu-item>
-            <ids-menu-item>Option Three</ids-menu-item>
+              <ids-menu-item>Run Filter</ids-menu-item>
+              <ids-menu-item>Clear Filter</ids-menu-item>
           </ids-menu-group>
-        </ids-popup-menu>
+      </ids-popup-menu>
+
+      <ids-menu-button id="icon-button" menu="icon-menu">
+        <ids-icon slot="icon" icon="more"></ids-icon>
+        <span class="audible">Icon Only Button</span>
+      </ids-menu-button>
+      <ids-popup-menu id="icon-menu" target="icon-button" trigger="click">
+        <ids-menu-group>
+          <ids-menu-item>Option One</ids-menu-item>
+          <ids-menu-item>Option Two</ids-menu-item>
+          <ids-menu-item>Option Three</ids-menu-item>
+        </ids-menu-group>
+      </ids-popup-menu>
 
-    </ids-layout-grid-cell>
+  </ids-layout-grid-cell>
 </ids-layout-grid>

app/ids-skip-link/example.html

@@ -0,0 +1,4 @@
+<ids-skip-link href="#main-content">Skip to Main Content</ids-skip-link>
+<ids-layout-grid>
+  <ids-text font-size="12" type="h1" id="main-content">Skiplink (tab into the page)</ids-text>
+</ids-layout-grid>

app/ids-skip-link/index.html

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

app/ids-skip-link/index.js

@@ -0,0 +1 @@
+import IdsSkipLink from '../../src/ids-skip-link/ids-skip-link';

app/ids-tag/example.js

@@ -1,5 +1,5 @@
 // Add an event listener to test clickable links
 const tag = document.querySelector('#ids-clickable-tag');
 tag?.addEventListener('click', (e) => {
-  console.log('Click Fired', e); //eslint-disable-line
+  console.info('Click Fired', e);
 });

app/ids-text/index.js

@@ -1 +1,3 @@
+import IdsContainer from '../../src/ids-container/ids-container';
+import IdsThemeSwitcher from '../../src/ids-theme-switcher/ids-theme-switcher';
 import IdsText from '../../src/ids-text/ids-text';

app/ids-theme-switcher/example.html

@@ -0,0 +1,9 @@
+<ids-container>
+  <ids-theme-switcher mode="light" version="new"></ids-theme-switcher>
+  <ids-layout-grid>
+    <ids-text font-size="12" type="h1">Themes</ids-text>
+  </ids-layout-grid>
+  <ids-layout-grid>
+  <ids-tag>Normal Tag</ids-tag>
+  </ids-layout-grid>
+</ids-container>

app/ids-theme-switcher/index.html

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

app/ids-theme-switcher/index.js

@@ -0,0 +1,3 @@
+import IdsContainer from '../../src/ids-container/ids-container';
+import IdsThemeSwitcher from '../../src/ids-theme-switcher/ids-theme-switcher';
+import IdsTag from '../../src/ids-tag/ids-tag';

app/ids-trigger-button/index.js

@@ -1 +1 @@
-import IdsTriggerButton from '../../src/ids-trigger-button/ids-trigger-button';
+import IdsTriggerButton from '../../src/ids-trigger-field/ids-trigger-button';

app/ids-trigger-field/example.html

@@ -15,7 +15,7 @@
 
   <ids-layout-grid-cell>
     <ids-trigger-field>
-      <ids-input type="text" label="Timepicker"></ids-input>
+      <ids-input type="text" label="Timepicker" size="full"></ids-input>
       <ids-trigger-button>
         <ids-text audible="true">Timepicker trigger</ids-text>
         <ids-icon slot="icon" icon="clock"></ids-icon>