{"id":13560488,"url":"https://github.com/axa-ch-webhub-cloud/pattern-library","last_synced_at":"2025-04-05T23:05:38.921Z","repository":{"id":37087778,"uuid":"112588368","full_name":"axa-ch-webhub-cloud/pattern-library","owner":"axa-ch-webhub-cloud","description":"AXA CH UI component library. Please share, comment, create issues and work with us!","archived":false,"fork":false,"pushed_at":"2023-12-04T13:54:22.000Z","size":71381,"stargazers_count":124,"open_issues_count":27,"forks_count":17,"subscribers_count":22,"default_branch":"develop","last_synced_at":"2025-03-29T22:04:34.108Z","etag":null,"topics":["custom-elements","lerna","lit-element","lit-html","polyfills","storybook","styleguide","webcomponents"],"latest_commit_sha":null,"homepage":"https://axa-ch-webhub-cloud.github.io/plib-feature/develop","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/axa-ch-webhub-cloud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-11-30T08:55:17.000Z","updated_at":"2025-02-05T02:07:47.000Z","dependencies_parsed_at":"2023-12-04T14:54:45.860Z","dependency_job_id":"a27c6b11-d5d0-4c8d-a06b-4b448d8d2c91","html_url":"https://github.com/axa-ch-webhub-cloud/pattern-library","commit_stats":{"total_commits":6211,"total_committers":36,"mean_commits":"172.52777777777777","dds":0.7795846079536306,"last_synced_commit":"ea59ddd0ee58770af172b31b59b2d83f03c3fcd0"},"previous_names":["axa-ch/patterns-library"],"tags_count":2915,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axa-ch-webhub-cloud%2Fpattern-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axa-ch-webhub-cloud%2Fpattern-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axa-ch-webhub-cloud%2Fpattern-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axa-ch-webhub-cloud%2Fpattern-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/axa-ch-webhub-cloud","download_url":"https://codeload.github.com/axa-ch-webhub-cloud/pattern-library/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393480,"owners_count":20931807,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","lerna","lit-element","lit-html","polyfills","storybook","styleguide","webcomponents"],"created_at":"2024-08-01T13:00:45.042Z","updated_at":"2025-04-05T23:05:38.904Z","avatar_url":"https://github.com/axa-ch-webhub-cloud.png","language":"JavaScript","funding_links":[],"categories":["Design Systems build with Web Components","Real World","Design Systems"],"sub_categories":["Component Libraries"],"readme":"# Pattern Library\n![CI/CD Status](https://github.com/axa-ch-webhub-cloud/pattern-library/actions/workflows/CI.yml/badge.svg?branch=develop)\n\n## [\u003e\u003e Pattern Library Demo](https://axa-ch-webhub-cloud.github.io/plib-feature/develop)\n\n[Check out our Contribution File](https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/CONTRIBUTION.md#rules-and-lintings)\n\n[Check out our Architecture File](https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/ARCHITECTURE.md)\n\n[Check out our Code of Conduct](https://github.com/axa-ch-webhub-cloud/pattern-library/blob/develop/CODE_OF_CONDUCT.md)\n\n## Design Guidelines\n[Link to Styleguide](https://www.figma.com/file/6zurYk3bJpzUg0H2THSxGF/AXA-UI-Kit)\n\n## Communication\n\nUse the following channels for different kinds of requests/reports:\n\n- Bug reports, small change requests, \"wishes\": [Issues](https://github.com/axa-ch-webhub-cloud/pattern-library/issues)\n- Questions, requests for help, requests for product presentations, etc: Slack #patterns-lib-devs\n- Feature requests (Components, etc): Contact Webhub Team\n\n## What we deliver\n\nWe 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).\n\nPattern Library components are exported to npm with 2 types of build artifacts: `/dist/index.js` and `/lib/index.*` in ES2019.\n\n## Component versioning\n\nDifferent 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).\n\n## Released Components\n[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)\n\n| Component                                                                          | Github Packages                                                                                                                                                                                                                                                                                                                                          |\n|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [AXA Accordion](./src/components/20-molecules/accordion)                           | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F20-molecules%2Faccordion%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/accordion)         |\n| [AXA Button](./src/components/10-atoms/button)                                     | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F10-atoms%2Fbutton%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/button)                                     |\n| [AXA Carousel](./src/components/10-atoms/carousel)                                 | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F10-atoms%2Fcarousel%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/carousel)                                 |\n| [AXA Checkbox](./src/components/10-atoms/checkbox)                                 | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F10-atoms%2Fcheckbox%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/checkbox)                                 |\n| [AXA Commercial Hero Banner](./src/components/30-organisms/commercial-hero-banner) | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F30-organisms%2Fcommercial-hero-banner%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/commercial-hero-banner) |\n| [AXA Container](./src/components/30-organisms/container)                           | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F30-organisms%2Fcontainer%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/container)                           |\n| [AXA Cookie Disclaimer](./src/components/20-molecules/cookie-disclaimer)           | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F20-molecules%2Fcookie-disclaimer%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/cookie-disclaimer)           |\n| [AXA Datepicker](./src/components/20-molecules/datepicker)                         | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F20-molecules%2Fdatepicker%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/datepicker)                         |\n| [AXA Dropdown](./src/components/20-molecules/dropdown)                             | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F20-molecules%2Fdropdown%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/dropdown)                             |\n| [AXA Fieldset](./src/components/10-atoms/fieldset)                                 | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F10-atoms%2Ffieldset%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/fieldset)                                 |\n| [AXA File Upload](./src/components/20-molecules/file-upload)                       | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F20-molecules%2Ffile-upload%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/file-upload)                       |\n| [AXA Footer](./src/components/30-organisms/footer)                                 | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F30-organisms%2Ffooter%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/footer)                                 |\n| [AXA Heading](./src/components/10-atoms/heading)                                   | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F10-atoms%2Fheading%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/heading)                                   |\n| [AXA Footer Small](./src/components/20-molecules/footer-small)                     | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F20-molecules%2Ffooter-small%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/footer-small)                     |\n| [AXA Icon](./src/components/10-atoms/icon)                                         | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F10-atoms%2Ficon%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/icon)                                         |\n| [AXA Input File](./src/components/10-atoms/input-file)                             | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F10-atoms%2Finput-file%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/input-file)                             |\n| [AXA Input Text](./src/components/10-atoms/input-text)                             | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F10-atoms%2Finput-text%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/input-text)                             |\n| [AXA Link](./src/components/10-atoms/link)                                         | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F10-atoms%2Flink%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/link)                                         |\n| [AXA Materials](./src/components/00-materials)                                     | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F00-materials%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/materials)                                       |\n| [AXA Policy Features](./src/components/20-molecules/policy-features)               | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F20-molecules%2Fpolicy-features%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/policy-features)               |\n| [AXA Popup](./src/components/20-molecules/popup)                                   | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F20-molecules%2Fpopup%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/popup)                                   |\n| [AXA Radio](./src/components/10-atoms/radio)                                       | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F10-atoms%2Fradio%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/radio)                                       |\n| [AXA Table](./src/components/30-organisms/table)                                   | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F30-organisms%2Ftable%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/table)                                   |\n| [AXA Table Sortable](./src/components/30-organisms/table-sortable)                 | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F30-organisms%2Ftable-sortable%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/table-sortable)                 |\n| [AXA Text](./src/components/10-atoms/text)                                         | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F10-atoms%2Ftext%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/text)                                         |\n| [AXA Textarea](./src/components/10-atoms/textarea)                                 | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F10-atoms%2Ftextarea%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/textarea)                                 |\n| [AXA Top Content Bar](./src/components/20-molecules/top-content-bar)               | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F20-molecules%2Ftop-content-bar%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/top-content-bar)               |\n| [AXA Modal](./src/components/30-organisms/modal)                                   | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F30-organisms%2Fmodal%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/modal)                                   |\n| [AXA Stepper](./src/components/20-molecules/stepper)                               | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F20-molecules%2Fstepper%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/stepper)                               |\n| [AXA Testimonials](./src/components/30-molecules/testimonials)                     | [![npm version](https://img.shields.io/badge/dynamic/json?color=blue\u0026label=npm\u0026prefix=v\u0026query=version\u0026url=https%3A%2F%2Fraw.githubusercontent.com%2Faxa-ch-webhub-cloud%2Fpattern-library%2Fdevelop%2Fsrc%2Fcomponents%2F30-organisms%2Ftestimonials%2Fpackage.json?style=flat)](https://github.com/axa-ch-webhub-cloud/midgard/pkgs/npm/testimonials)                     |\n\n## Code of Conduct\n\nWe 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)\n\n## Version Control\n\nThis 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.\n\n## Commits\n\nWe are using [Conventional Commits](https://www.conventionalcommits.org/) to automatically version the components and update their changelogs.\nFeel free to use a [tool of your choice](https://www.conventionalcommits.org/en/about/#tooling-for-conventional-commits) to generate these commits.\n\nExample for a commit message\n```\nfeat(button): add new color blue\n\nCloses #ticket-1234\n```\n\nExample for a Changelog entry\n```\n# [16.3.0](https://github.com/axa-ch-webhub-cloud/pattern-library/compare/@axa-ch-webhub-cloud/materials@16.2.2...@axa-ch-webhub-cloud/materials@16.3.0) (2023-07-31)\n\n### Features\n\n- **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)\n```\n\nFor more examples, especially with BREAKING CHANGES, have a look at the [Conventional Commits Examples](https://www.conventionalcommits.org/en/v1.0.0/#examples).\n\n## Pattern Library via community CDN\n\nYou 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 `\u003caxa-button\u003e\u003c/axa-button\u003e`: `\u003cscript src=\"https://cdn.jsdelivr.net/npm/@axa-ch/button@latest/dist/index.js\"\u003e\u003c/script\u003e`\n\n\n## How do I get my (unit) tests to work when using Pattern Library components?\n\n### The problem\nUnit-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.\n\n### Solutions\nSo what are your options?\n\n- 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).\n- 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.\n- Use a lightweight mocking strategy. The idea is to mock pattern library components by a simple, traditional-HTML replacement such as a \u0026lt;div\u0026gt; or a \u0026lt;button\u0026gt;. Here is a code sketch using Jest that employs this strategy:\n    ```\n    All Pattern-Library React components are imported from this index.js.\n    \n    import createAXAButton from '@axa-ch-webhub-cloud/button/lib/index.react';\n    import createAXADropdown from '@axa-ch-webhub-cloud/dropdown/lib/index.react';\n\n    export const AXAButton = createAXAButton(createElement);\n    export const AXADropdown = createAXADropdown(createElement);\n  \n    AXAButton.displayName = 'AXAButton';\n    AXADropdown.displayName = 'AXADropdown';\n    ```\n    ```\n    __mocks__/index.js\n  \n    export const AXAButton = (props) =\u003e {\n    return \u003cbutton {...props}\u003e{props.children}\u003c/button\u003e;\n    };\n    ...\n    ```\n\n### Testing with Selenium, Testcafe and other UI testing tools\n\nBy 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 -\u003e Driver -\u003e native DOM selector -\u003e ShadowRoot -\u003e querySelector**\n\nHere is a concrete example in Java using Selenium:\n\n```java\npublic WebElement expandRootElement(WebElement element, WebDriver driver) {\n    WebElement ele = (WebElement) ((JavascriptExecutor) driver)\n            .executeScript(\"return arguments[0].shadowRoot\",element);\n    return ele;\n}\n```\nCalling 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:\n\n- By.id\n- By.className\n- By.cssSelector\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxa-ch-webhub-cloud%2Fpattern-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faxa-ch-webhub-cloud%2Fpattern-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxa-ch-webhub-cloud%2Fpattern-library/lists"}