All Projects → axa-ch → Patterns Library

axa-ch / Patterns Library

AXA CH UI components library. Please share, comment, create issues and work with us!

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Patterns Library

smart-custom-element
Smart a lightweight web component library that provides capabilities for web components, such as data binding, using es6 native class inheritance. This library is focused for providing the developer the ability to write robust and native web components without the need of dependencies and an overhead of a framework.
Stars: ✭ 17 (-73.02%)
Mutual labels:  polyfill, webcomponents
pattern-library
AXA CH UI component library. Please share, comment, create issues and work with us!
Stars: ✭ 103 (+63.49%)
Mutual labels:  styleguide, webcomponents
github-wc-polyfill
Ensure that all GitHub and GitLab scripts required for UXP and SeaMonkey are loaded correctly
Stars: ✭ 87 (+38.1%)
Mutual labels:  polyfill, webcomponents
Html Modules Toolkit
Transforming HTML standards of the future into JavaScript standards of the past
Stars: ✭ 45 (-28.57%)
Mutual labels:  polyfill, webcomponents
Resize Observer
Polyfills the ResizeObserver API.
Stars: ✭ 540 (+757.14%)
Mutual labels:  polyfill, webcomponents
Egghead Typescript Vuejs Apps
Stars: ✭ 41 (-34.92%)
Mutual labels:  webcomponents
Polymer Quill
Polymer Quill Rich Text Editor
Stars: ✭ 48 (-23.81%)
Mutual labels:  webcomponents
Sqlstyle.guide
A consistent code style guide for SQL to ensure legible and maintainable projects
Stars: ✭ 994 (+1477.78%)
Mutual labels:  styleguide
Lwc
⚡️ LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation
Stars: ✭ 974 (+1446.03%)
Mutual labels:  webcomponents
Flake8
The official GitHub mirror of https://gitlab.com/pycqa/flake8
Stars: ✭ 1,112 (+1665.08%)
Mutual labels:  styleguide
Random compat
PHP 5.x support for random_bytes() and random_int()
Stars: ✭ 7,950 (+12519.05%)
Mutual labels:  polyfill
Pytorch Styleguide
An unofficial styleguide and best practices summary for PyTorch
Stars: ✭ 1,025 (+1526.98%)
Mutual labels:  styleguide
Axiom React
Axiom - Brandwatch design system and React pattern library
Stars: ✭ 41 (-34.92%)
Mutual labels:  styleguide
Javascript Style Guide
🎨 Javascript styleguide followed by us here at Pagar.me
Stars: ✭ 49 (-22.22%)
Mutual labels:  styleguide
Quantum
The default pack of components and layout principles that dictates Catho Frontend applications.
Stars: ✭ 39 (-38.1%)
Mutual labels:  styleguide
Login Fire
An element that allows simple configuration of multiple provider login for firebase
Stars: ✭ 58 (-7.94%)
Mutual labels:  webcomponents
Swift Style Guide
Swift language style guide & coding conventions followed by Xmartlabs.
Stars: ✭ 36 (-42.86%)
Mutual labels:  styleguide
Go Styleguide
🏆 Opinionated Styleguide for the Go language
Stars: ✭ 1,053 (+1571.43%)
Mutual labels:  styleguide
Svelte Custom Elements
Turn Svelte components into web components
Stars: ✭ 45 (-28.57%)
Mutual labels:  webcomponents
Masonry Layout
An efficient and fast web component that gives you a beautiful masonry layout
Stars: ✭ 43 (-31.75%)
Mutual labels:  webcomponents

Pattern Library

Build Status Deployment Status

>> Pattern Library Demo

Check out our Contribution File

Check out our Architecture File

Check out our Code of Conduct

Communication

Use the following channels for different kinds of requests/reports:

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).

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 <axa-button></axa-button>: <script src="https://cdn.jsdelivr.net/npm/@axa-ch/[email protected]/dist/index.js"></script>

Build Pattern Library components in your own application

Pattern Library components are exported to npm with 2 types of build artifacts: /dist/index.js in ES5 JavaScript and /lib/index.* in ES6. If you use the Pattern Library in AXA's DX WebHub context, you don't have to worry about this topic. All others, please read on.

The de-facto standard in the frontend community is to render /lib exports as ESM, i.e. ES5 + import/export. Due to the nature of web components and lit-element, however, we are forced to export in ES6. For more details, see the custom element specification.

If you need to support Internet Explorer (11) in your application, you therefore need to transpile our component (/lib) artifacts in your build. To do so, you need to include the path to our components (@axa-ch) and their underlying framework (lit-element/html) in the section of your transpilation configuration that describes transpilation to ES5. Here is an example snippet of how this would look in a webpack config:

{
  test: /.js$/,
  include: [
    /src/,
    new RegExp(`node_modules${sep}lit-html`),
    new RegExp(`node_modules${sep}lit-element`),
    new RegExp(`node_modules${sep}@axa-ch(?!${sep}patterns-library-polyfill)`),
  ],
  use: {
    loader: 'babel-loader',
    options: {
      ...babelrc,
    },
  },
},

Component versioning

Different versions of our web components can coexist on the same web page! Here you can read more about component versioning.

Released Polyfills

Released Components

lerna

Component npmjs.com
AXA Button npm version
AXA Button Link npm version
AXA Carousel npm version
AXA Checkbox npm version
AXA Commercial Hero Banner npm version
AXA Container npm version
AXA Cookie Disclaimer npm version
AXA Datepicker npm version
AXA Dropdown npm version
AXA Fieldset npm version
AXA File Upload npm version
AXA Footer npm version
AXA Heading npm version
AXA Footer Small npm version
AXA Icon npm version
AXA Input File npm version
AXA Input Text npm version
AXA Link npm version
AXA Materials npm version
AXA Policy Features npm version
AXA Popup npm version
AXA Radio npm version
AXA Table npm version
AXA Table Sortable npm version
AXA Text npm version
AXA Textarea npm version
AXA Top Content Bar npm version

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>
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].