Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/axa-ch-webhub-cloud/pattern-library
AXA CH UI component library. Please share, comment, create issues and work with us!
https://github.com/axa-ch-webhub-cloud/pattern-library
custom-elements lerna lit-element lit-html polyfills storybook styleguide webcomponents
Last synced: about 2 months ago
JSON representation
AXA CH UI component library. Please share, comment, create issues and work with us!
- Host: GitHub
- URL: https://github.com/axa-ch-webhub-cloud/pattern-library
- Owner: axa-ch-webhub-cloud
- Created: 2017-11-30T08:55:17.000Z (over 6 years ago)
- Default Branch: develop
- Last Pushed: 2023-12-04T13:54:22.000Z (7 months ago)
- Last Synced: 2024-04-26T19:10:15.906Z (2 months ago)
- Topics: custom-elements, lerna, lit-element, lit-html, polyfills, storybook, styleguide, webcomponents
- Language: JavaScript
- Homepage: https://axa-ch-webhub-cloud.github.io/plib-feature/develop
- Size: 68.1 MB
- Stars: 121
- Watchers: 24
- Forks: 18
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Lists
- awesome-web-components - AXA Pattern Library - AXA CH UI components library built with Web Components. (Real World / Component Libraries)
- awesome-lit - AXA Pattern Library - AXA CH UI components library built with LitElement. (Design Systems)
README
# Pattern Library
## [>> Pattern Library Demo](https://axa-ch-webhub-cloud.github.io/plib-feature/develop)
[Check out our Contribution File](https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/CONTRIBUTION.md#rules-and-lintings)
[Check out our Architecture File](https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/ARCHITECTURE.md)
[Check out our Code of Conduct](https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/CODE_OF_CONDUCT.md)
## Design Guidelines
[Link to Styleguide](https://www.figma.com/file/6zurYk3bJpzUg0H2THSxGF/AXA-UI-Kit)
## Communication
Use the following channels for different kinds of requests/reports:
- Bug reports, small change requests, "wishes": [Issues](https://github.com/axa-ch-webhub-cloud/pattern-library/issues)
- Questions, requests for help, requests for product presentations, etc: Slack #patterns-lib-devs
- Feature requests (Components, etc): Contact Webhub Team
## What we deliver
We release self-contained plug-and-play web components based on the [custom elements specification](https://html.spec.whatwg.org/multipage/custom-elements.html), derived from the [lit-element](https://lit.dev/docs/api/LitElement/) base class (maintained by Google).
Pattern Library components are exported to npm with 2 types of build artifacts: `/dist/index.js` and `/lib/index.*` in ES2019.
## Component versioning
Different versions of our web components can coexist on the same web page! Here you can [read more about component versioning](https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/COMPONENT_VERSIONING.md).
## Released Components
[](https://lerna.js.org/)
| Component | Github Packages |
|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| [AXA Accordion](./src/components/20-molecules/accordion) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/accordion) |
| [AXA Button](./src/components/10-atoms/button) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/button) |
| [AXA Carousel](./src/components/10-atoms/carousel) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/carousel) |
| [AXA Checkbox](./src/components/10-atoms/checkbox) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/checkbox) |
| [AXA Commercial Hero Banner](./src/components/30-organisms/commercial-hero-banner) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/commercial-hero-banner) |
| [AXA Container](./src/components/30-organisms/container) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/container) |
| [AXA Cookie Disclaimer](./src/components/20-molecules/cookie-disclaimer) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/cookie-disclaimer) |
| [AXA Datepicker](./src/components/20-molecules/datepicker) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/datepicker) |
| [AXA Dropdown](./src/components/20-molecules/dropdown) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/dropdown) |
| [AXA Fieldset](./src/components/10-atoms/fieldset) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/fieldset) |
| [AXA File Upload](./src/components/20-molecules/file-upload) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/file-upload) |
| [AXA Footer](./src/components/30-organisms/footer) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/footer) |
| [AXA Heading](./src/components/10-atoms/heading) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/heading) |
| [AXA Footer Small](./src/components/20-molecules/footer-small) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/footer-small) |
| [AXA Icon](./src/components/10-atoms/icon) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/icon) |
| [AXA Input File](./src/components/10-atoms/input-file) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/input-file) |
| [AXA Input Text](./src/components/10-atoms/input-text) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/input-text) |
| [AXA Link](./src/components/10-atoms/link) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/link) |
| [AXA Materials](./src/components/00-materials) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/materials) |
| [AXA Policy Features](./src/components/20-molecules/policy-features) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/policy-features) |
| [AXA Popup](./src/components/20-molecules/popup) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/popup) |
| [AXA Radio](./src/components/10-atoms/radio) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/radio) |
| [AXA Table](./src/components/30-organisms/table) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/table) |
| [AXA Table Sortable](./src/components/30-organisms/table-sortable) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/table-sortable) |
| [AXA Text](./src/components/10-atoms/text) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/text) |
| [AXA Textarea](./src/components/10-atoms/textarea) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/textarea) |
| [AXA Top Content Bar](./src/components/20-molecules/top-content-bar) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/top-content-bar) |
| [AXA Modal](./src/components/30-organisms/modal) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/modal) |
| [AXA Stepper](./src/components/20-molecules/stepper) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/stepper) |
| [AXA Testimonials](./src/components/30-molecules/testimonials) | [](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/testimonials) |
## Code of Conduct
We are dedicated to building a welcoming, diverse, and safe community. We expect everyone participating in the AXA community to read and accept our [Code of Conduct](https://github.com/axa-ch-webhub-cloud/pattern-library/tree/develop/CODE_OF_CONDUCT.md)
## Version Control
This repository is a monorepo managed by Lerna. This means that all components are centrally managed here, even though we publish them to NPM as separate packages.
## Commits
We are using [Conventional Commits](https://www.conventionalcommits.org/) to automatically version the components and update their changelogs.
Feel free to use a [tool of your choice](https://www.conventionalcommits.org/en/about/#tooling-for-conventional-commits) to generate these commits.
Example for a commit message
```
feat(button): add new color blue
Closes #ticket-1234
```
Example for a Changelog entry
```
# [16.3.0](https://github.com/axa-ch-webhub-cloud/pattern-library/compare/@axa-ch-webhub-cloud/[email protected]...@axa-ch-webhub-cloud/[email protected]) (2023-07-31)
### Features
- **materials:** update color ([b832830](https://github.com/axa-ch-webhub-cloud/pattern-library/commit/b83283048acb5594812d019e2523bb014d3fc509)), closes [#123456](https://github.com/axa-ch-webhub-cloud/pattern-library/issues/123456)
```
For more examples, especially with BREAKING CHANGES, have a look at the [Conventional Commits Examples](https://www.conventionalcommits.org/en/v1.0.0/#examples).
## Pattern Library via community CDN
You can add any Pattern Library component via the community CDN jsdelivr. This is useful for Prototyping or experimenting or if you don't want to bother with a frontend stack. This works only native (no react support). Here an example on how to add the JS for ``: ``
## How do I get my (unit) tests to work when using Pattern Library components?
### The problem
Unit-test frameworks like Jest run under the `node` environment, which is quite different from a browser. The most commonly used abstraction to mimic a minimal browser within `node` is `jsdom`. However, `jsdom` lacks crucial features such as `Mutation Observer`, `Custom Elements` and other browser APIs commonly needed by web components.
### Solutions
So what are your options?
- Insisting on `jest`, one option would be to use a better DOM emulation. Exchanging `jsdom` with `happydom`, we now have enough emulated browser features to test web components. The details are described [here](https://github.com/capricorn86/happy-dom/tree/master/packages/jest-environment).
- Instead of using `jest`, employ end-to-end (e2e) testing tools that control a real browser, e.g. `Playwright`, `Cypress` or `Testcafe`. Arguably this is a better match for UI-heavy apps anyway, because e2e tests are closer to a real user experience.
- Use a lightweight mocking strategy. The idea is to mock pattern library components by a simple, traditional-HTML replacement such as a <div> or a <button>. Here is a code sketch using Jest that employs this strategy:
```
All Pattern-Library React components are imported from this index.js.
import createAXAButton from '@axa-ch-webhub-cloud/button/lib/index.react';
import createAXADropdown from '@axa-ch-webhub-cloud/dropdown/lib/index.react';
export const AXAButton = createAXAButton(createElement);
export const AXADropdown = createAXADropdown(createElement);
AXAButton.displayName = 'AXAButton';
AXADropdown.displayName = 'AXADropdown';
```
```
__mocks__/index.js
export const AXAButton = (props) => {
return {props.children};
};
...
```
### Testing with Selenium, Testcafe and other UI testing tools
By default, pattern-library web components make use of [ShadowDOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM). To trigger interactions inside such web component you need to access the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) via the [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot). Schematically, this works like this: **UI Testtool -> Driver -> native DOM selector -> ShadowRoot -> querySelector**
Here is a concrete example in Java using Selenium:
```java
public WebElement expandRootElement(WebElement element, WebDriver driver) {
WebElement ele = (WebElement) ((JavascriptExecutor) driver)
.executeScript("return arguments[0].shadowRoot",element);
return ele;
}
```
Calling this method gives you the `ShadowRoot` in your Selenium environment. **Beware**: when calling `findElement` on the return value of `expandRootElement` only the following selectors will work:
- By.id
- By.className
- By.cssSelector