Pattern Library
>> Pattern Library Demo
Check out our Contribution File
Check out our Architecture File
Communication
Use the following channels for different kinds of requests/reports:
- Bug reports, small change requests, "wishes": https://github.com/axa-ch/patterns-library/issues
- Questions, requests for help, requests for product presentations, etc: Slack #patterns-lib-devs
- Feature requests (Components, etc): Slack @martin.stuedle
What we deliver
We release self-contained plug-and-play web components based on the custom elements specification, derived from the lit-element base class (maintained by Google).
Released Polyfills
Released Components
Alpha-Released Components
- None
Design Guidelines
Link to Pattern Library Styleguide
How to contribute
Whether you are helping us to fix bugs, or you are more into creating components, we would love to have you as contributor of the AXA Pattern Library!
Check out our Contributing Guide for ideas on contributing and setup steps for getting the repository up and running on your local machine.
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
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.
Testing in create react app v3+
If you want to have Jest tests in Create React App here an example on how we added them: commit link to patterns library examples. Keep in mind that this is just an example and some configs might not be needed for your case.
Refering to the commit diff: cleaner would be to have, instead of the .babelrc
that adds the babel preset "@babel/react"
, the preset directly inside config/jest/jestPreprocess.js
Testing with Selenium, Testcafe and other UI testing tools
By default, pattern-library web components make use of ShadowDOM. To trigger interactions inside such web component you need to access the DOM via the ShadowRoot. Schematically, this works like this: UI Testtool -> Driver -> native DOM selector -> ShadowRoot -> querySelector
Here is a concrete example in Java using Selenium:
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.cssSelektor
Dealing with F(lash) O(f) U(nstyled) C(ontent)
As described in ARCHITECTURE.md, FOUC can be mitigated by using the CSSpseudo selector: :not(:defined)
. Below please find an example of how we can show to the user that the <axa-footer>
is not yet defined (pulsating blocks). The selector :not(:defined)
won't work in IE11 and therefore there won't have any effect on it. Following the principle of graceful degradation, this if fine, since the only downside in IE11 is that it doesn't look as good as the other browsers while no real functionality has been lost.
<style>
axa-footer:not(:defined) {
background-color: #3b3fd8;
color: #3b3fd8;
display: block;
}
axa-footer:not(:defined) svg {
display: none;
}
axa-footer:not(:defined) a {
color: #FFF;
background: #FFF;
display: inline-block;
margin-left: 10px;
pointer-events: none;
margin-top: 10px;
opacity: 0.2;
transition:opacity 500ms ease-out;
animation: pulseloadingaxafooter 1s infinite;
}
@keyframes pulseloadingaxafooter {
0% {
opacity: 0.2;
}
50% {
opacity: 0.3;
}
100% {
opacity: 0.2;
}
}
</style>