jpzwarte

          <dna-popover
            onPopoverChange={(event: CustomEvent<boolean>) => this.onPopoverChange(event)}
            id={this.popoverId}
            placement="right"
          >
            <dna-shell-menu-popover label={this.label}>
              <dna-portal ref={(el: HTMLDnaPortalElement) => (this.portalElement = el)}>
                <slot></slot>
              </dna-portal>
            </dna-shell-menu-popover>

jpzwarte

• input in shadow dom workaround
• <form> API is not very DX, add helpers to make it more friendly:
  • register custom control events
  • value/getValue @Prop/@Method?
  • validation

export type Orientation = 'horizontal' | 'vertical';

export interface FormControl {

jpzwarte

My stencil + storybook setup

1. Setup your stencil project as usual
2. Add storybook: npx -p @storybook/cli sb init --type react (we use react so you can use JSX inside your stories)
3. Add required deps: npm add @babel/plugin-syntax-import-meta @open-wc/webpack-import-meta-loader webpack-merge -D
4. preview.js:

import { defineCustomElements } from "../dist/esm/loader";

jpzwarte

  constructor(@Inject(DOCUMENT) private document: any) {
    this.style = this.document.createElement('style');
    this.style.id = 'theme';

    this.document.head.appendChild(this.style);
  }

  initialize(): Promise<void> {
    this._theme = 'magister';

jpzwarte

import { convertMenuPositionToConnectedPositions, MenuPositionValue } from './menu-position';
import { ConnectedPosition } from '@angular/cdk/overlay';

interface TestPosition {
  side: MenuPositionValue,
  align: MenuPositionValue,
  positions: ConnectedPosition[]
}

const POSITIONS: TestPosition[] = [

jpzwarte

// webpack.vendor.js
module.exports = {
  entry: {
    vendor: [
      'angular',
      'jquery',
      'jquery-ui/ui/position'
    ]
  },
  externals: {

jpzwarte

module.exports = {
  extends: 'eslint:recommended',
  env: {
    node: true
  },
  parserOptions: {
    ecmaVersion: 6
  },
  rules: {
    'array-callback-return': 'error',

jpzwarte

$bleh: (
    color: red
);

$blah: (
    color: $blue-dark,
    font: 700 20px $font-header,
    line-height: 10px
);

jpzwarte

<div id="grid"></div>

jpzwarte

$ ->
  $.rails.confirm = (message) ->
    answer = $.Deferred();

    modal = $ """
<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Delete</h3>
  </div>