diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a141094328..acb1a6ce63 100644 --- a/.github/workflows/ci.yml +++ b/.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 }} diff --git a/.nvmrc b/.nvmrc index 493319d27c..2a0dc9a810 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -12.16.3 +14.16.0 diff --git a/.percy.json b/.percy.json new file mode 100644 index 0000000000..ab9c91a745 --- /dev/null +++ b/.percy.json @@ -0,0 +1,11 @@ +{ + "version": 2, + "snapshot": { + "widths": [ + 375, + 1280 + ], + "minHeight": 1024, + "enableJavaScript": true + } +} diff --git a/.percyrc b/.percyrc deleted file mode 100644 index 0c0f00235d..0000000000 --- a/.percyrc +++ /dev/null @@ -1,8 +0,0 @@ -{ - "version": 1, - "snapshot": { - "widths": [375, 1280], - "min-height": 1024, - "enable-javascript": true - } -} diff --git a/.stylelintrc.json b/.stylelintrc.json index 0662b8ca20..4493cd6ad7 100644 --- a/.stylelintrc.json +++ b/.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"] diff --git a/.vscode/spellright.dict b/.vscode/spellright.dict index 8bcf050cbe..8116895cc0 100644 --- a/.vscode/spellright.dict +++ b/.vscode/spellright.dict @@ -13,3 +13,4 @@ Vue ids-enterprise-wc linted Namespaced +README.md diff --git a/README.md b/README.md index 96bdc50d3a..44fcb3fbcd 100644 --- a/README.md +++ b/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: + + +| [IE / Edge](http://godban.github.io/browsers-support-badges/)
IE Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [iOS Safari](http://godban.github.io/browsers-support-badges/)
iOS Safari | +| --------- | --------- | --------- | --------- | --------- | +| R-1 | R-1 | R-1| R-1| R-1 + + + +## 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 diff --git a/app/ids-expandable-area/example.html b/app/ids-expandable-area/example.html index f3f3a0c3ef..d11587153b 100644 --- a/app/ids-expandable-area/example.html +++ b/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. - Show More - Show Less + Show More + Show Less @@ -45,8 +45,8 @@ June 21, 2015 (4 days) - Show More - Show Less + Show More + Show Less @@ -62,20 +62,12 @@ - Show More - Show Less + Show More + Show Less - + Default Button diff --git a/app/ids-expandable-area/example.js b/app/ids-expandable-area/example.js index acea236a93..b223dcff29 100644 --- a/app/ids-expandable-area/example.js +++ b/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 diff --git a/app/ids-hyperlink/example.html b/app/ids-hyperlink/example.html new file mode 100644 index 0000000000..4d2cc0188f --- /dev/null +++ b/app/ids-hyperlink/example.html @@ -0,0 +1,10 @@ + + Hyperlink + + + + Normal Link +
+ Disabled Link + + diff --git a/app/ids-hyperlink/index.html b/app/ids-hyperlink/index.html new file mode 100644 index 0000000000..7f3e3457bb --- /dev/null +++ b/app/ids-hyperlink/index.html @@ -0,0 +1,3 @@ +{{> ../layouts/head.html }} +{{> example.html }} +{{> ../layouts/footer.html }} diff --git a/app/ids-hyperlink/index.js b/app/ids-hyperlink/index.js new file mode 100644 index 0000000000..4f112a546f --- /dev/null +++ b/app/ids-hyperlink/index.js @@ -0,0 +1 @@ +import IdsHyperlink from '../../src/ids-hyperlink/ids-hyperlink'; diff --git a/app/ids-menu-button/example.html b/app/ids-menu-button/example.html index 4b95aadfd0..9fe7599aab 100644 --- a/app/ids-menu-button/example.html +++ b/app/ids-menu-button/example.html @@ -1,44 +1,44 @@ - Menu Buttons + Menu Buttons - - - Settings - - - - Personalize Columns - - - - Row Height - Extra Small - Small - Medium - Large - - - - Show Filter Row - - - Run Filter - Clear Filter - - - - - - Icon Only Button - - + + + Settings + + + + Personalize Columns + + + + Row Height + Extra Small + Small + Medium + Large + + + + Show Filter Row + - Option One - Option Two - Option Three + Run Filter + Clear Filter - + + + + + Icon Only Button + + + + Option One + Option Two + Option Three + + - + diff --git a/app/ids-skip-link/example.html b/app/ids-skip-link/example.html new file mode 100644 index 0000000000..7760023e63 --- /dev/null +++ b/app/ids-skip-link/example.html @@ -0,0 +1,4 @@ +Skip to Main Content + + Skiplink (tab into the page) + diff --git a/app/ids-skip-link/index.html b/app/ids-skip-link/index.html new file mode 100644 index 0000000000..7f3e3457bb --- /dev/null +++ b/app/ids-skip-link/index.html @@ -0,0 +1,3 @@ +{{> ../layouts/head.html }} +{{> example.html }} +{{> ../layouts/footer.html }} diff --git a/app/ids-skip-link/index.js b/app/ids-skip-link/index.js new file mode 100644 index 0000000000..0a633ace52 --- /dev/null +++ b/app/ids-skip-link/index.js @@ -0,0 +1 @@ +import IdsSkipLink from '../../src/ids-skip-link/ids-skip-link'; diff --git a/app/ids-tag/example.js b/app/ids-tag/example.js index 24f5c76fbc..49f71463aa 100644 --- a/app/ids-tag/example.js +++ b/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); }); diff --git a/app/ids-text/index.js b/app/ids-text/index.js index 078782c76a..fb29f57c9f 100644 --- a/app/ids-text/index.js +++ b/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'; diff --git a/app/ids-theme-switcher/example.html b/app/ids-theme-switcher/example.html new file mode 100644 index 0000000000..30aa16e42a --- /dev/null +++ b/app/ids-theme-switcher/example.html @@ -0,0 +1,9 @@ + + + + Themes + + + Normal Tag + + diff --git a/app/ids-theme-switcher/index.html b/app/ids-theme-switcher/index.html new file mode 100644 index 0000000000..7f3e3457bb --- /dev/null +++ b/app/ids-theme-switcher/index.html @@ -0,0 +1,3 @@ +{{> ../layouts/head.html }} +{{> example.html }} +{{> ../layouts/footer.html }} diff --git a/app/ids-theme-switcher/index.js b/app/ids-theme-switcher/index.js new file mode 100644 index 0000000000..90bf4721ce --- /dev/null +++ b/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'; diff --git a/app/ids-trigger-button/index.js b/app/ids-trigger-button/index.js index 4849402d5c..7729e45610 100644 --- a/app/ids-trigger-button/index.js +++ b/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'; diff --git a/app/ids-trigger-field/example.html b/app/ids-trigger-field/example.html index 81f369a4e3..746179852e 100644 --- a/app/ids-trigger-field/example.html +++ b/app/ids-trigger-field/example.html @@ -15,7 +15,7 @@ - + Timepicker trigger diff --git a/app/index.html b/app/index.html index b4c8bf854a..6ced22afd1 100644 --- a/app/index.html +++ b/app/index.html @@ -6,6 +6,7 @@ {{> ids-alert/example.html }} {{> ids-badge/example.html}} {{> ids-text/example.html }} +{{> ids-hyperlink/example.html }} {{> ids-checkbox/example.html }} {{> ids-radio/example.html }} {{> ids-switch/example.html }} @@ -17,11 +18,9 @@ {{> ids-toolbar/example.html }} {{> ids-progress/example.html }} {{> ids-upload-advanced/example.html }} -{{> ids-layout-grid/example.html }} {{> ids-trigger-field/example.html }} {{> ids-expandable-area/example.html }} {{> ids-accordion/example.html }} {{> ids-block-grid/example.html }} -{{> ids-icon/example.html }} {{> ids-render-loop/example.html }} {{> layouts/footer.html }} diff --git a/app/index.js b/app/index.js index 0437d19952..a480fd492a 100644 --- a/app/index.js +++ b/app/index.js @@ -6,6 +6,7 @@ import IdsSwitch from '../src/ids-switch/ids-switch'; import IdsToggleButton from '../src/ids-toggle-button/ids-toggle-button'; import IdsMenuButton from '../src/ids-menu-button/ids-menu-button'; import IdsText from '../src/ids-text/ids-text'; +import IdsHyperlink from '../src/ids-hyperlink/ids-hyperlink'; import IdsIcon from '../src/ids-icon/ids-icon'; import IdsPopup from '../src/ids-popup/ids-popup'; import IdsToolbar from '../src/ids-toolbar/ids-toolbar'; @@ -16,7 +17,7 @@ import IdsLayoutGrid from '../src/ids-layout-grid/ids-layout-grid'; import IdsLayoutGridCell from '../src/ids-layout-grid/ids-layout-grid-cell'; import IdsInput from '../src/ids-input/ids-input'; import IdsTriggerField from '../src/ids-trigger-field/ids-trigger-field'; -import IdsTriggerButton from '../src/ids-trigger-button/ids-trigger-button'; +import IdsTriggerButton from '../src/ids-trigger-field/ids-trigger-button'; import IdsExpandableArea from '../src/ids-expandable-area/ids-expandable-area'; import IdsAccordion from '../src/ids-accordion/ids-accordion'; import IdsRadio from '../src/ids-radio/ids-radio'; @@ -27,6 +28,8 @@ import IdsAlert from '../src/ids-alert/ids-alert'; import IdsBadge from '../src/ids-badge/ids-badge'; import IdsBlockGrid from '../src/ids-block-grid/ids-block-grid'; import IdsBlockGridItem from '../src/ids-block-grid/ids-block-grid-item'; +import IdsContainer from '../src/ids-container/ids-container'; +import IdsThemeSwitcher from '../src/ids-theme-switcher/ids-theme-switcher'; // Import Example Code diff --git a/app/layouts/footer.html b/app/layouts/footer.html index f5471aad90..38a87ce17d 100644 --- a/app/layouts/footer.html +++ b/app/layouts/footer.html @@ -1,3 +1,3 @@ - + diff --git a/app/layouts/head.html b/app/layouts/head.html index 77d4036735..7b21bb0ded 100644 --- a/app/layouts/head.html +++ b/app/layouts/head.html @@ -13,4 +13,6 @@ -