axa-ch-webhub-cloud/pattern-library

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

pattern-library's Issues

define integration policy

To ease development and keep quality high we should define and stick to an integration policy.

I recommend:

• establishing a develop branch
• prevent merges in case of failing linters or tests (can be setup by travis, appveyor, you name it)
• fast-forward merges only into master
• versioning strategy (semver)
• deprecation warning (static analysis vs runtime analysis)

Firefox: unreachable code after return statement

unreachable code after return statement

Keep existing css classes

If a custom component has some classes attached to it, then they should be kept and not thrown away.

Edit:

<axa-custom class="any-classes-here"></axa-custom>

Custom extends HTMLElement {
  connectedCallback() {
    // remove all classes, in above case: .any-classes-here
    this.className = 'a-custom';
  }
}

window.customElements.define('axa-custom', Custom);

Results in:

<axa-custom class="a-custom"></axa-custom>

Stroke on nav doesnt work correctly on IE11

IE footer social icons coloring broken

Dropdown: Label and value missing

Todo

• define supported behaviours like, changing values, links, custom content, etc.
• <label> optional
• native <select>-based variation

finish checkbox and radio

The checkbox and the radio input element are not finished yet.

Todo: Needs an input and a label. They should be connected. WC are only used as holders so we need the input element

device state should trigger initially

Since we switched component initialisation to DOMContentLoaded, the device-state/change event doesn't trigger anymore after the component was initialised (cause this initial trigger is itself also triggered by DOMContentLoaded).

Thus just fire always an initial event on subscription, if possible 🎉

Well, that's not so easy because of redundant modules.
So it seems it's time to start attaching data to DOM...

Or just provide a static getDeviceState function which needs to be used for initial value retrieval

contextual communication between components

After I quickly fixed #26 (publish/subscribe) I see the possible use case of a list of child components who need to communicate between each other within a specific context.

<axa-context>
  <axa-foo></axa-foo>
  <axa-bar></axa-bar>
</axa-context>

<axa-context>
  <axa-foo></axa-foo>
  <axa-bar></axa-bar>
</axa-context>

With a small hack this can be archived currently using incremental channels, like:

let n = 0;
publish(`channel-${n}/change`, ...)
subscribe(`channel-${n}/change`, ...)

...
++n;
publish(`channel-${n}/change`, ...)
subscribe(`channel-${n}/change`, ...)

Requirements

• enable intercommunication between hierarchy-agnostic components
• opt-in to select kind of context
• pass contextual data down

TypeError: window.customElements is undefined

Firefox gives this error:

TypeError: window.customElements is undefined

@LucaMele
Maybe this is still related to webcomponents not initialising properly.

$map must be a map

{ Error: argument $map of map-has-key($map, $key) must be a map

Backtrace:
node_modules/@axa-ch/patterns-library/src/styles/functions/_color-map.scss:2, in function map_has_key
node_modules/@axa-ch/patterns-library/src/styles/functions/_color-map.scss:2, in function get-colors
node_modules/@axa-ch/patterns-library/src/styles/functions/_color-map.scss:10, in function get-color
node_modules/@axa-ch/patterns-library/src/components/a-link/mixins/_link.scss:16, in mixin link-color
node_modules/@axa-ch/patterns-library/src/components/m-header-main-navigation/index.scss:105
at options.error (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/node-sass/lib/index.js:291:26)
status: 1,
file: '/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/@axa-ch/patterns-library/src/styles/functions/_color-map.scss',
line: 2,
column: 11,
message: 'argument $map of map-has-key($map, $key) must be a map\n\nBacktrace:\n\tnode_modules/@axa-ch/patterns-library/src/styles/functions/_color-map.scss:2, in function map_has_key\n\tnode_modules/@axa-ch/patterns-library/src/styles/functions/_color-map.scss:2, in function get-colors\n\tnode_modules/@axa-ch/patterns-library/src/styles/functions/_color-map.scss:10, in function get-color\n\tnode_modules/@axa-ch/patterns-library/src/components/a-link/mixins/_link.scss:16, in mixin link-color\n\tnode_modules/@axa-ch/patterns-library/src/components/m-header-main-navigation/index.scss:105',
formatted: 'Error: argument $map of map-has-key($map, $key) must be a map\n\n Backtrace:\n \tnode_modules/@axa-ch/patterns-library/src/styles/functions/_color-map.scss:2, in function map_has_key\n \tnode_modules/@axa-ch/patterns-library/src/styles/functions/_color-map.scss:2, in function get-colors\n \tnode_modules/@axa-ch/patterns-library/src/styles/functions/_color-map.scss:10, in function get-color\n \tnode_modules/@axa-ch/patterns-library/src/components/a-link/mixins/_link.scss:16, in mixin link-color\n \tnode_modules/@axa-ch/patterns-library/src/components/m-header-main-navigation/index.scss:105\n on line 2 of node_modules/@axa-ch/patterns-library/src/styles/functions/_color-map.scss\n>> @if not map_has_key($color-map, $style) {\n ----------^\n' }

Fonts Slow Network is detected

Chrome dev tools log:

Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-regular.woff2
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-regular.woff
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-700.woff2
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-700.woff
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-600.woff2
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-600.woff
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/PublicoHeadline-Bold-Web.woff2
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/PublicoHeadline-Bold-Web.woff
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-regular.woff2
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-regular.woff
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-700.woff2
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-700.woff
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-600.woff2
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-600.woff
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/PublicoHeadline-Bold-Web.woff2
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/PublicoHeadline-Bold-Web.woff
index.js:925 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-regular.woff2
index.js:925 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-regular.woff
index.js:925 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-700.woff2
index.js:925 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-700.woff
index.js:925 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-600.woff2
index.js:925 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-600.woff
index.js:925 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/PublicoHeadline-Bold-Web.woff2
index.js:925 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/PublicoHeadline-Bold-Web.woff
index.js:1781 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-regular.woff2
index.js:1781 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-regular.woff
index.js:1781 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-700.woff2
index.js:1781 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-700.woff
index.js:1781 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-600.woff2
index.js:1781 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-600.woff
index.js:1781 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/PublicoHeadline-Bold-Web.woff2
index.js:1781 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/PublicoHeadline-Bold-Web.woff
Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-regular.woff2
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-regular.woff
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-700.woff2
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-700.woff
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-600.woff2
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/source-sans-pro-v10-latin-600.woff
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/PublicoHeadline-Bold-Web.woff2
:3000/#o-header:1 Slow network is detected. Fallback font will be used while loading: http://localhost:3000/assets/fonts/PublicoHeadline-Bold-Web.woff

a-button with tag a is button isntead of link

Simple Publish Subscribe Intercom not working

So I just tried to add a simple pubsub library to enable intercom between components.

Unfortunately:

• At the moment all our components code is bundled as separate modules!
• This redundantly imports all modules and thus affects the scope of a each module being a new one for every used module within each component
• this breaks simple intercom possibilities, because private vars within modules aren't shared with their redundant friends...

Reproducible bug can be found at this PR #24

Must have features

• DOM Mutation agnostic
• loose coupling
• ideally it would work with bundle or redundant modules (though redundant modules are a bug)

Mention: I really want to say that I mentioned this culprit weeks ago, but wasn't believed...
Though I know that I'm very competent in my profession and I always look from a wide point of view at tasks, including various very different angles.

Mention 2: Indeed there is a possible workaround, by polluting the global window object like: window.__sharedVarAmongRedundantModules. But NO; the correct way is bundling/loading each module never more than once.

Dropdown: Make the dropdown accessible

state classes are constantly repeating

I periodically utilize generic state classes like is-open, is-active, etc.

So I'm concerned what if 2 separate components utilize the same state class and are being nested within each other. This could lead to wrong states triggering false CSS properties.

Hence I propose to namespace even state classes by the components name in the format of is-component-state, like: is-dropdown-open.

All webcomponent custom element classes should be prefixed with AXA

Just to avoid namespace collision or confusion, I would prefer to prefix every web component class with AXA

Mobile Navigation still not connected to o-header

The burger button of m-main-navigation needs to be able to talk to m-main-navigation-mobile

Related: #26 #31

IE Unexpected character in comment end. Expected "-->"

Improve documentation (README and maybe wiki)

Make header for Pattern Library mobile ready

Only the o-header is mobile ready. Also the main header of the styleguide should work on mobile

SCSS/CSS not optional

Error: File to read not found or unreadable: /Users/axawinterthur/dev/axa-ch_style-html-guide/src/components/o-deterministic-lifecycle/index.scss

JS is unaware of active breakpoint

We should be able to detect the current breakpoint even in JS, and also changes of it.

• define breakpoints at one place - in CSS (single source of truth)
• add custom breakpoint:change event

Should work like it is described here https://davidwalsh.name/device-state-detection-css-media-queries-javascript

Let‘s move away from web components

Let‘s discuss with the all the frontend guys/girls if it‘s still a good practice to build webcomponents, since we have now a more clear sight who is using which framework and what the trend shows for axa switzerland. The new disussions with multiple teams shows a trend from moving away from angular to react. Let‘s discuss this since we are facing multiple problems with webcomponents... and they are not as simple to use in an other franework as thought.

IE footer links mobile interaction not working

The click handling is broken in IE, either by pubsub, CustomEvent, on or a-device-state...

clean header sub navigation

Currently the sub navigation data format is a bit foggy.

• subMenuIndexSettings shouldn't be needed, better inherit from parent.
• boxes, column seems suboptimal, I guess it's rather columns and links

How to release not complete

Currently bumping the version does only that.

But the dist folder is tracked within git and should be rebuild.
Anything else?

Button animation sometimes slow

Sometimes I randomly observed a very slow button animation.
Guess the animation should be moved to hardware acceleration enabled motion.

Hierachical Webcomponents Lifecycle order is not deterministic

Edit:
~~Markup should determine hierarchical components bootstrap order, but it doesn't!~~~
The spec allows to bootstrap components as they are defined, independent of the markup's structure. Though in the following case I need this order to be deterministic in sense of markup structure, not definition order.

Given following example I expect:

<axa-parent>
  <axa-child></axa-child>
</axa-parent>

Expected:

Parent -> constructor
Parent > connectedCallback
Child -> constructor
Child > connectedCallback

Instead the definition of a web-component dictates the order of it's bootstrapping process.
Observed:

index.js:579 Child -> constructor
index.js:588 Child > connectedCallback
index.js:542 Parent -> constructor
index.js:551 Parent > connectedCallback

Firefox: TypeError: window.customElements is undefined

TypeError: window.customElements is undefined

How wil we document those components

Each component has some intrinsic features and behaviours.
In special cases or in combination with certain other components it's likely that layout, measurements and other stuff may change.

Concrete examples are the mobile menu (which triggers an unrelated DOM tree from within another component) or the various variations of the footer.

Those intrinsic features and behaviours are reflected by code, either as html, in css or through js. So I don't think that we need to document the related stuff in all code, but we need to find an easy way to do it and make it parseable.

Regarding JS i would use awesome @JSdoc doclets.
And for SCSS I would use awesome @sassdoc doclets

Button should be a molecule as it includes an atom

Stroke goes astray on resize

add boilerplate code generator scripts

It would be comfortable to have special scripts to kick-start component development for atoms, molecules and organisms 🚀

Webcomponents randomly not rendered

Somehow importing our custom Web Components into Chrome by HTML Imports randomly triggers a weird bug in Chrome, which results in rendering the component in one place but not in another.

Switching to pure ESnext based import's seems to make Firefox some troubles #25 :

TypeError: window.customElements is undefined

This bug isn't reasonable and needs to be 1000% fixed.

Todo

• Make 1000% sure to understand the cause of this bug - no guessing. Ideally easily observable by failing test.
• order of components lifecycle has to be deterministic
• Report this bug to Chrome's issue tracker and link it's issue here
• find reliable cross-browser, testable workaround / bugfix
• document above solution, and communicate it to everyone involved
• make sure that every single web component can be reliable rendered in all supported browsers

SCSS Pretty build for npm run serve

We should see the css in pretty format while developing. Update the rollup configuration

is mobile click delay really fixed through CSS?

According to BS4 reboot:

Traditionally, browsers on touchscreen devices have a delay of approximately 300ms between the end of a “tap” – the moment when a finger/stylus is lifted from screen – and the click event being fired. This delay is necessary for these browsers to correctly handle “double-tap to zoom” gestures without prematurely triggering actions or links after the first “tap”, but it can make your site feel slightly sluggish and unresponsive.

Most mobile browsers automatically optimize away this 300ms delay for sites that use the width=device-width property as part of their responsive meta tag (as well as for sites that disable zooming, for instance with user-scalable=no, though this practice is strongly discouraged for accessibility and usability reasons). The biggest exceptions here are IE11 on Windows Phone 8.1, and iOS Safari (and any other iOS WebView-based browser) prior to iOS 9.3.

On touch-enabled laptop/desktop devices, IE11 and Microsoft Edge are currently the only browsers with “double-tap to zoom” functionality. As the responsive meta tag is ignored by all desktop browsers, using width=device-width will have no effect on the 300ms delay here.

To address this problem in IE11 and Microsoft Edge on desktop, as well as IE11 on Windows Phone 8.1, Bootstrap explicitly uses the touch-action:manipulation CSS property on all interactive elements (such as buttons and links). This property essentially disables double-tap functionality on those elements, eliminating the 300ms delay.

In the case of old iOS versions (prior to 9.3), the suggested approach is to use additional scripts such as FastClick to explicitly work around the delay.

For further details, see the compatibility table for suppressing 300ms delay for touchscreen interactions.

ELIFECYCLE error

try running either of bump scripts like npm run bump-major-beta results in:

@axa-ch/[email protected] prebump-major-beta /Users/axawinterthur/dev/axa-ch_style-html-guide
test
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @axa-ch/[email protected] prebump-major-beta: test
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @axa-ch/[email protected] prebump-major-beta script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/axawinterthur/.npm/_logs/2017-12-13T16_43_48_507Z-debug.log

Footer Links interaction not decoupled from web component

The interaction code needed for mobile and it's accordion menu is directly coded within axa-footer-links Web Component.
Instead it should be decoupled as a separate class with various bindings to Web component, React, Angular, even jQuery

Firefox: Footer Links mobile animation jump

Implement common module. Activate ES Modules in pkg.module prop and IFEE modules that global namespace

ATM we bundle up isolated bundle which include identical modules redundantly.

This breaks access to local variables between same module instances.

// this variable is scope within each redundant import/bundle of this module
// and not accessible to other instances of this same module
const localVar = {}

export function foo() {
  localVar.key = 'value';
}

export function bar() {
  return localVar.key;
}

IE SCRIPT5022: Exception thrown and not caught

Deploy to gh pages

Would be nice to have a gh page deployment to be able to explore the lib

Arrow on a-link atom can also be on the left

The arrow on a-link should also be configurable to be on the left

add sticky container

The header should be sticky but only on mobile.

Requirements:

• only one sticky element at a time
• support sticky containers
• track stickyness of x components -> spy
• conditional stickyness like only at sm or md-up, etc not needed according to https://design.axa.com/web-guidelines/header#sticky-behavior

Like:

<axa-sticky-container>
  <axa-sticky>...</axa-sticky>

  <axa-sticky>...</axa-sticky>
</axa-sticky-container>

Should we use proposed Custom Element

Due to different limitations and not standardised specs, should we keep investing in the Web-Components Custom Element or should we use only already standardised technology. Matter of the topic is about being fully standard or use experimental technology. Other frameworks, comparison between Web-Components and React are out of topic here as they don't move in direction of the main objective of the Style-Guide.

Objective: Create a Guide in HTML/CSS that is perfectly working and Semantically correct with some components that can be used within every framework

Module build failed: Error: Unknown plugin "external-helpers"

I'm currently migrating the footer in axa.ch repo and face this bug.
So I just installed it locally into the aem repo, though we should document this some how.

ERROR in ./~/@axa-ch/patterns-library/src/components/m-footer-links/js/footer-links.js
[scripts:watch] Module build failed: Error: Unknown plugin "external-helpers" specified in "/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/@axa-ch/patterns-library/.babelrc" at 0, attempted to resolve relative to "/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/@axa-ch/patterns-library"
[scripts:watch] ReferenceError: Unknown plugin "external-helpers" specified in "/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/@axa-ch/patterns-library/.babelrc" at 0, attempted to resolve relative to "/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/@axa-ch/patterns-library"
[scripts:watch] at /Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
[scripts:watch] at Array.map (native)
[scripts:watch] at Function.normalisePlugins (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
[scripts:watch] at OptionManager.mergeOptions (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
[scripts:watch] at OptionManager.init (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
[scripts:watch] at File.initOptions (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/file/index.js:216:65)
[scripts:watch] at new File (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/file/index.js:139:24)
[scripts:watch] at Pipeline.transform (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
[scripts:watch] at transpile (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-loader/lib/index.js:46:20)
[scripts:watch] at /Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-loader/lib/fs-cache.js:79:18
[scripts:watch] at /Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/happypack/lib/HappyLoader.js:46:23
[scripts:watch] at Object.Thread::0:1 (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/happypack/lib/HappyPlugin.js:321:7)
[scripts:watch] at ChildProcess.acceptMessageFromWorker (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/happypack/lib/HappyThread.js:66:32)
[scripts:watch] at emitTwo (events.js:105:20)
[scripts:watch] at ChildProcess.emit (events.js:185:7)
[scripts:watch] at handleMessage (internal/child_process.js:718:10)
[scripts:watch] at Pipe.channel.onread (internal/child_process.js:444:11)
[scripts:watch] @ ./src/js/redesign/footer-links.binding.js 7:19-100
[scripts:watch]

[scripts:watch] ERROR in ./~/@axa-ch/patterns-library/src/components/a-device-state/js/device-state.js
[scripts:watch] Module build failed: Error: Unknown plugin "external-helpers" specified in "/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/@axa-ch/patterns-library/.babelrc" at 0, attempted to resolve relative to "/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/@axa-ch/patterns-library"
[scripts:watch] ReferenceError: Unknown plugin "external-helpers" specified in "/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/@axa-ch/patterns-library/.babelrc" at 0, attempted to resolve relative to "/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/@axa-ch/patterns-library"
[scripts:watch] at /Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
[scripts:watch] at Array.map (native)
[scripts:watch] at Function.normalisePlugins (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
[scripts:watch] at OptionManager.mergeOptions (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
[scripts:watch] at OptionManager.init (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
[scripts:watch] at File.initOptions (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/file/index.js:216:65)
[scripts:watch] at new File (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/file/index.js:139:24)
[scripts:watch] at Pipeline.transform (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
[scripts:watch] at transpile (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-loader/lib/index.js:46:20)
[scripts:watch] at /Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/babel-loader/lib/fs-cache.js:79:18
[scripts:watch] at /Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/happypack/lib/HappyLoader.js:46:23
[scripts:watch] at Object.Thread::1:1 (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/happypack/lib/HappyPlugin.js:321:7)
[scripts:watch] at ChildProcess.acceptMessageFromWorker (/Users/axawinterthur/dev/aem-all_ext/frontend-lib/node_modules/happypack/lib/HappyThread.js:66:32)
[scripts:watch] at emitTwo (events.js:105:20)
[scripts:watch] at ChildProcess.emit (events.js:185:7)
[scripts:watch] at handleMessage (internal/child_process.js:718:10)
[scripts:watch] at Pipe.channel.onread (internal/child_process.js:444:11)
[scripts:watch] @ ./src/js/redesign/device-state.binding.js 7:19-100

first class props

How do we support properties other than string?

Requirements:

• Data down, actions up
• support prop types of Number, String, Boolean, Object, Array Null
• Function as property

Note:
We already parse the given property string with JSON.parse(). This way we can support true, false, 1234, 'string', [], {}, null

Nice Reads:

• http://robdodson.me/interoperable-custom-elements/
• React discussion: facebook/react#7901

Header molecules naming

I'm just curious, wouldn't it make sense to prefix header related/only components by header-, so it's more clear where to use them, like:

from	to	or even
m-top-content-bar	m-header-top-content-bar	m-header-top
m-meta-navigation	m-header-meta-navigation	m-header-meta
m-meta-navigation-mobile	m-header-meta-navigation-mobile	m-header-meta-mobile
m-main-navigation	m-header-main-navigation	m-header-main
m-main-navigation-mobile	m-header-main-navigation-mobile	m-header-main-mobile
m-sub-navigation	m-header-sub-navigation	m-header-sub

We could even drop the -navigation part, cause it's redundant and isn't always meant for navigation only...

Add warning logs if dependencies are missing

Currently device-state is the only component which is implemented without an associated custom element.
Instead it's class a-device-state needs to be attached to an existing DOM node to be working(<body> recommended).
If somehow the consumer of the patterns-lib imports device-state but forgets to add the class to an existing DOM, it should log a Warning/Error to help fix the issue.

I think this is a generic issue, which should be taken into consideration for every component.