@shortfuse/materialdesignweb 0.0.9 → 0.4.0

package/docs/pages/button.js

@@ -0,0 +1,224 @@
+import * as Button from '../../components/button/index.js';
+import { iterateArrayLike, setTextNode } from '../../core/dom.js';
+import * as Overlay from '../../core/overlay/index.js';
+import * as Ripple from '../../core/ripple/index.js';
+import { convertElementToCode } from '../_sample-utils.js';
+
+/** @return {void} */
+function initializeSampleComponents() {
+  iterateArrayLike(document.querySelectorAll('.js .mdw-button'), Button.attach);
+}
+
+/** @type {HTMLElement} */
+let sampleComponent;
+
+/**
+ * @param {string} name
+ * @param {boolean} value
+ * @return {void}
+ */
+function toggleOverlayOption(name, value) {
+  const attr = sampleComponent.getAttribute('mdw-overlay-off') || '';
+  if (!attr) {
+    if (!value) {
+      return;
+    }
+    sampleComponent.setAttribute('mdw-overlay-off', name);
+    return;
+  }
+  if (value) {
+    if (attr.indexOf(name) !== -1) {
+      return;
+    }
+    sampleComponent.setAttribute('mdw-overlay-off', `${attr} ${name}`);
+    return;
+  }
+  if (attr.indexOf(name) === -1) {
+    return;
+  }
+  sampleComponent.setAttribute('mdw-overlay-off', attr.replace(name, '').trim());
+}
+
+/** @return {void} */
+function updateSampleCode() {
+  const jsRequired = document.querySelector('input[name="javascript"][value="required"]').checked;
+  const jsOptional = document.querySelector('input[name="javascript"][value="optional"]').checked;
+  const useJS = jsRequired || jsOptional;
+
+  // Strip JS related elements and attributes
+  Button.detach(sampleComponent);
+
+  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
+  setTextNode(htmlCodeElement, convertElementToCode(sampleComponent,
+    document.getElementById('usePug').getAttribute('aria-pressed') === 'true'));
+
+  // Reattach JS if requested
+  if (useJS) {
+    Button.attachCore(sampleComponent);
+    if (sampleComponent.classList.contains('mdw-ripple')) {
+      Ripple.attach(sampleComponent);
+    }
+    if (sampleComponent.classList.contains('mdw-overlay')) {
+      Overlay.attach(sampleComponent);
+    }
+  }
+
+  const jsCodeElement = document.getElementsByClassName('component-js')[0];
+  jsCodeElement.textContent = 'mdw.Button.attach(buttonElement);';
+}
+
+/** @return {void} */
+function setupPugButton() {
+  const pugButton = document.getElementById('usePug');
+  Button.attach(pugButton);
+  pugButton.addEventListener('click', () => {
+    if (pugButton.getAttribute('aria-pressed') === 'true') {
+      pugButton.setAttribute('aria-pressed', 'false');
+    } else {
+      pugButton.setAttribute('aria-pressed', 'true');
+    }
+    updateSampleCode();
+  });
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  const { name, value, checked } = event.target;
+  let newElement;
+  switch (name) {
+    case 'raised':
+      if (checked) {
+        sampleComponent.setAttribute('mdw-raised', '');
+      } else {
+        sampleComponent.removeAttribute('mdw-raised');
+      }
+      break;
+    case 'outline':
+      switch (value) {
+        case 'none':
+          sampleComponent.removeAttribute('mdw-border-ink');
+          break;
+        default:
+          sampleComponent.setAttribute('mdw-border-ink', value);
+      }
+      break;
+    case 'activated':
+      if (checked) {
+        sampleComponent.setAttribute('mdw-activated', '');
+      } else {
+        sampleComponent.removeAttribute('mdw-activated');
+      }
+      break;
+    case 'active':
+      if (checked) {
+        sampleComponent.setAttribute('mdw-active', '');
+      } else {
+        sampleComponent.removeAttribute('mdw-active');
+      }
+      break;
+    case 'toggle':
+      if (!value) {
+        sampleComponent.removeAttribute('aria-pressed');
+      } else {
+        sampleComponent.setAttribute('aria-pressed', value);
+      }
+      break;
+    case 'disabled':
+      if (checked) {
+        sampleComponent.setAttribute('aria-disabled', 'true');
+      } else {
+        sampleComponent.removeAttribute('aria-disabled');
+      }
+      break;
+    case 'icon':
+      if (checked) {
+        sampleComponent.setAttribute('mdw-icon', '');
+        sampleComponent.classList.add('material-icons');
+        setTextNode(sampleComponent, 'favorite');
+      } else {
+        sampleComponent.removeAttribute('mdw-icon');
+        sampleComponent.classList.remove('material-icons');
+        setTextNode(sampleComponent, 'Button');
+      }
+      break;
+    case 'ink':
+      switch (value) {
+        case 'default':
+          sampleComponent.removeAttribute('mdw-ink');
+          break;
+        default:
+          sampleComponent.setAttribute('mdw-ink', value);
+          break;
+      }
+      break;
+    case 'ripple':
+      if (checked) {
+        sampleComponent.classList.add('mdw-ripple');
+      } else {
+        sampleComponent.classList.remove('mdw-ripple');
+      }
+      break;
+    case 'overlay-hover':
+    case 'overlay-focus':
+    case 'overlay-activated':
+      toggleOverlayOption(name.replace('overlay-', ''), !checked);
+      break;
+    case 'surface':
+      switch (value) {
+        case 'none':
+          sampleComponent.removeAttribute('mdw-surface');
+          sampleComponent.removeAttribute('mdw-light');
+          sampleComponent.removeAttribute('mdw-dark');
+          break;
+        default:
+          sampleComponent.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));
+          if (value.indexOf(' light') === -1) {
+            sampleComponent.removeAttribute('mdw-light');
+          } else {
+            sampleComponent.setAttribute('mdw-light', '');
+          }
+          if (value.indexOf(' dark') === -1) {
+            sampleComponent.removeAttribute('mdw-dark');
+          } else {
+            sampleComponent.setAttribute('mdw-dark', '');
+          }
+          if (value === 'none') {
+            sampleComponent.classList.remove('mdw-theme');
+          } else {
+            sampleComponent.classList.add('mdw-theme');
+          }
+          break;
+      }
+      break;
+    case 'htmltype':
+      newElement = document.createElement(value);
+      while (sampleComponent.firstChild) {
+        newElement.appendChild(sampleComponent.firstChild);
+      }
+      iterateArrayLike(sampleComponent.attributes, (attr) => {
+        newElement.attributes.setNamedItem(attr.cloneNode());
+      });
+      sampleComponent.parentElement.replaceChild(newElement, sampleComponent);
+      sampleComponent = newElement;
+      break;
+    default:
+  }
+  updateSampleCode();
+}
+
+/** @return {void} */
+function setupComponentOptions() {
+  sampleComponent = document.querySelector('.component-sample .mdw-button');
+  Button.attach(sampleComponent);
+  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+    el.addEventListener('change', onOptionChange);
+  });
+}
+
+initializeSampleComponents();
+setupComponentOptions();
+setupPugButton();
+updateSampleCode();

package/docs/pages/button.pug

@@ -0,0 +1,121 @@
+include ../../templates/index.pug
+include ../_mixins.pug
+
+mixin button-test
+  .display-flex.flex-wrap
+    +mdwButton Text
+    +mdwButton({ raised:true }) Contained
+    +mdwButton({ raised:true, disabled:true }) Disabled
+    +mdwButton({ borderInk:'default'}) Outlined
+  div(style="height:24px")
+  .display-flex.flex-wrap
+    +mdwButton({ ink:'primary' }) Text
+    +mdwButton({ ink:'primary', raised:true }) Contained
+    +mdwButton({ ink:'primary', raised:true, disabled:true }) Disabled
+    +mdwButton({ ink:'secondary' }) Secondary
+    +mdwButton({ ink:'secondary', borderInk:true }) Outlined
+  div(style="height:24px")
+  .display-flex.flex-wrap
+    +mdwButton({ surface:'primary 500', dark:true }) Text
+    +mdwButton({ surface:'primary 500', dark:true, raised:true }) Contained
+    +mdwButton({ surface:'primary 500', dark:true, raised:true, disabled:true }) Disabled
+    +mdwButton({ surface:'secondary 100', light:true, raised:true }) Outlined
+  div(style="height:24px")
+  .display-flex.flex-wrap
+    +mdwButton({ icon:true }).material-icons favorite
+    +mdwButton({ ink:"warn", dark:true, icon:true }).material-icons favorite
+    +mdwButton({ surface:"warn 500", dark:true, icon:true }).material-icons favorite
+    +mdwButton({ surface:"warn 500", dark:true, icon:true, raised:true }).material-icons favorite
+    +mdwButton({ surface:"warn 500", dark:true, icon:true, raised:true, disabled:true }).material-icons favorite
+    +mdwButton({ icon:true, disabled:true }).material-icons favorite
+
++header("button")
+  .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
+    .mdw-grid__item(mdw-colspan="100%")
+      .mdw-grid__content
+        h5.mdw-type(mdw-baseline-next="36") Buttons communicate the action that will occur when the user touches them.
+        p.mdw-type Material buttons trigger an ink reaction on press. They may display text, imagery, or both.
+    .mdw-grid__item(mdw-colspan="6")
+      .mdw-grid__content
+        .component-sample
+          .display-flex
+            a.mdw-button.mdw-theme(mdw-ink="secondary") Button
+    .mdw-grid__item(mdw-colspan="6")
+      .mdw-grid__content
+        .mdw-type(mdw-style="subtitle") Javascript
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'required', disabled:true}) Required
+          +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'optional', checked:true}) Optional
+          +mdwSelection({ink:'secondary', name:'javascript', type:'radio', value:'none'}) None
+        .mdw-type(mdw-style="subtitle") Overlay
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'overlay-hover', checked:true}) Hover
+          +mdwSelection({ink:'secondary', name:'overlay-focus', checked:true}) Focus
+          +mdwSelection({ink:'secondary', name:'overlay-activated', checked:true}) Activated
+        .mdw-type(mdw-style="subtitle") Options
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'icon'}) Icon
+          +mdwSelection({ink:'secondary', name:'raised'}) Raised
+          +mdwSelection({ink:'secondary', name:'ripple', checked:true}) Ripple
+          +mdwSelection({ink:'secondary', name:'disabled'}) Disabled
+        .mdw-type(mdw-style="subtitle") Outline
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'outline', type:'radio', value:'none', checked:true}) None
+          +mdwSelection({ink:'secondary', name:'outline', type:'radio', value:'default'}) Default
+          +mdwSelection({ink:'secondary', name:'outline', type:'radio', value:''}) Ink
+        .mdw-type(mdw-style="subtitle") Activated Toggle
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'toggle', type:'radio', value:'', checked:true}) None
+          +mdwSelection({ink:'secondary', name:'toggle', type:'radio', value:'false'}) Off
+          +mdwSelection({ink:'secondary', name:'toggle', type:'radio', value:'true'}) On
+        .mdw-type(mdw-style="subtitle") Ink
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'default'}) Default
+          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'primary'}) Primary
+          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'secondary', checked:true}) Secondary
+          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'warn contrast'}) Warn Contrast
+          +mdwSelection({ink:'secondary', name:'ink', type:'radio', value:'purple'}) Purple
+        .mdw-type(mdw-style="subtitle") Surface
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'none', checked:true}) Default
+          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'primary 500 dark'}) Primary (Dark)
+          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'secondary 100 light'}) Secondary (Light)
+          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'warn 200 light'}) Warn 200 (Light)
+          +mdwSelection({ink:'secondary', name:'surface', type:'radio', value:'green 700 dark'}) Green 700 (Dark)
+        .mdw-type(mdw-style="subtitle") HTML Element Type
+        .docs-option-list
+          +mdwSelection({ink:'secondary', name:'htmltype', type:'radio', value:'a', checked:true}) HTMLAnchorElement
+          +mdwSelection({ink:'secondary', name:'htmltype', type:'radio', value:'button'}) HTMLButtonElement
+          +mdwSelection({ink:'secondary', name:'htmltype', type:'radio', value:'div'}) HTMLDivElement
+    .mdw-grid__item(mdw-colspan="100%" style="max-height:0")
+    .mdw-grid__item(mdw-colspan="6")
+      .mdw-grid__content
+        h6.mdw-type HTML Code
+        .mdw-card.mdw-theme.component-code.component-html(mdw-surface="card" mdw-border-ink)
+          +mdwButton({ icon:true, ink:'secondary' })#usePug(aria-pressed="false" mdw-overlay-off="activated") PUG
+    .mdw-grid__item(mdw-colspan="6")
+      .mdw-grid__content
+        h6.mdw-type Javascript Code
+        .mdw-card.mdw-theme.component-code.component-js(mdw-surface="card" mdw-border-ink)
+    .mdw-grid__item(mdw-colspan="100%")
+      .mdw-grid__content
+        h6.mdw-type Samples
+    .mdw-grid__item(mdw-colspan="6")
+      .mdw-grid__content
+        .render-fill.mdw-theme
+          +androidstatusbar('')
+          +appbar('', '', [], []) CSS Only
+          .content.mdw-theme(style="padding: 16px 0" mdw-surface="binary")
+            div
+              +button-test
+          +androidnavbar
+    .mdw-grid__item(mdw-colspan="6")
+      .mdw-grid__content
+        .render-fill.js.mdw-theme
+          +androidstatusbar('')
+          +appbar('', '', [], []) Javascript Version
+          .content.mdw-theme(style="padding: 16px 0" mdw-surface="binary")
+            div
+              +button-test
+          +androidnavbar
+  script(src='button.min.js')

package/docs/pages/card.eta

@@ -0,0 +1,90 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'card'}) %>
+<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <h5 class="mdw-type" mdw-baseline-next="36">Cards contain content and actions about a single subject.</h5>
+    <p class="mdw-type" mdw-baseline-next="36">Cards are surfaces that display content and actions on a single topic.</p>
+    <p class="mdw-type">They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.</p>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <div class="mdw-grid__content component-sample">
+      <div class="display-flex">
+        <div class="mdw-card mdw-theme" mdw-raised="focus-within" mdw-surface="card" mdw-border-ink>
+          <%~ includeFile(T, { button: { class:"mdw-card__button" }}) %>
+          <div class="mdw-card__start">
+            <div class="mdw-card__thumbnail material-icons" style="font-size:40px;">account_circle</div>
+          </div>
+          <div class="mdw-card__end" style="margin:8px 0;">
+            <%~ includeFile(T, { button: { class:"mdw-card__button", icon:true, text:'clear' }}) %>
+          </div>
+          <h6 class="mdw-card__header" mdw-two-line>Title goes here</h6>
+          <div class="mdw-card__subheader">Secondary text</div>
+          <div class="mdw-card__media" mdw-ratio="16:9"><img class="mdw-card__image" src="https://free-images.com/md/f673/sunset_sky_red_gold_0.jpg"></div>
+          <div class="mdw-card__supporting-text">Grayhound divisively hello coldly wonderfully marginally far upon excluding.</div>
+          <div class="mdw-card__actions">
+            <%~ includeFile(T, { button: {  ink:'secondary' , text:'Action 1' }}) %>
+            <%~ includeFile(T, { button: {  ink:'secondary' , text:'Action 2' }}) %>
+            <%~ includeFile(T, { button: { icon: true , class:'material-icons', text:'more_vert' }}) %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-type" mdw-style="subtitle">Javascript</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'required', disabled:true, text:'Required' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'optional', disabled:true, text:'Optional' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'javascript', type:'radio', value:'none', checked:true, text:'None' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Elevation</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'elevation', type:'radio', value:'auto', checked:true, text:'Auto' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'elevation', type:'radio', value:'0', text:'0dp' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'elevation', type:'radio', value:'1', text:'1dp' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'elevation', type:'radio', value:'8', text:'8dp' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Raise</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'raise-focus-within', value:'focus-within', checked:true, text:'On Focus Within' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'raise-hover', value:'hover', text:'On Hover' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Media Placement</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-placement', type:'radio', value:'none', text:'None' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-placement', type:'radio', value:'top', text:'Top' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-placement', type:'radio', value:'middle', checked:true, text:'Middle' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-placement', type:'radio', value:'bottom', text:'Bottom' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Media Ratio</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'none', text:'None' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'16:9', checked:true, text:'16:9' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'3:2', text:'3:2' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'4:3', text:'4:3' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'media-ratio', type:'radio', value:'1:1', text:'1:1' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Actions</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'primary-action', checked:true, text:'Primary' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'secondary-actions', checked:true, text:'Secondary' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'close-action', checked:true, text:'Close' }}) %>
+    </div>
+    <div class="mdw-type" mdw-style="subtitle">Surface</div>
+    <div class="docs-option-list">
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'card', text:'Card' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'primary dark', checked:true, text:'Primary (Dark)' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'secondary 100 light', text:'Secondary 100 (Light)' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'warn 200 light', text:'Warn 200 (Light)' }}) %>
+      <%~ includeFile(T, { selection: { ink:'secondary', name:'surface', type:'radio', value:'green 700 dark', text:'Green 700 (Dark)' }}) %>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="100%" style="max-height:0;"></div>
+  <div class="mdw-grid__item" mdw-colspan="6">
+    <h6 class="mdw-type">HTML Code</h6>
+    <div class="mdw-card mdw-theme component-code component-html" mdw-surface="card">
+      <%~ includeFile(T, { button: {icon:true, ink:'secondary' , id:'usePug', attributes: {'aria-pressed':"false", 'mdw-overlay-off':"activated"}, text:'PUG' }}) %>
+    </div>
+  </div>
+</div>
+<script src="card.min.js"></script>

package/docs/pages/card.js

@@ -0,0 +1,177 @@
+import { iterateArrayLike, setTextNode } from '../../core/dom.js';
+import { convertElementToCode } from '../_sample-utils.js';
+
+/** @type {HTMLElement} */
+let sampleComponent;
+/** @type {HTMLElement} */
+let mediaElement;
+/** @type {HTMLElement} */
+let actionsElement;
+/** @type {HTMLElement} */
+let closeActionElement;
+/** @type {HTMLElement} */
+let primaryButtonElement;
+
+/** @return {void} */
+function updateSampleCode() {
+  const htmlCodeElement = document.getElementsByClassName('component-html')[0];
+  setTextNode(htmlCodeElement, convertElementToCode(sampleComponent,
+    document.getElementById('usePug').getAttribute('aria-pressed') === 'true'));
+}
+
+/** @return {void} */
+function setupPugButton() {
+  const pugButton = document.getElementById('usePug');
+  pugButton.addEventListener('click', () => {
+    if (pugButton.getAttribute('aria-pressed') === 'true') {
+      pugButton.setAttribute('aria-pressed', 'false');
+    } else {
+      pugButton.setAttribute('aria-pressed', 'true');
+    }
+    updateSampleCode();
+  });
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onOptionChange(event) {
+  const { name, value, checked } = /** @type {HTMLInputElement} */ (event.target);
+  let raiseOptions;
+  switch (name) {
+    case 'elevation':
+      sampleComponent.removeAttribute('mdw-elevation');
+      switch (value) {
+        case 'auto':
+          break;
+        default:
+          sampleComponent.setAttribute('mdw-elevation', value);
+          break;
+      }
+      break;
+    case 'raise-focus-within':
+    case 'raise-hover':
+      raiseOptions = (sampleComponent.getAttribute('mdw-raised') || '').split(' ');
+      if (checked) {
+        if (raiseOptions.indexOf(name.substr('raise-'.length)) === -1) {
+          raiseOptions.push(name.substr('raise-'.length));
+        }
+      } else {
+        raiseOptions = raiseOptions.filter((o) => o !== name.substr('raise-'.length));
+      }
+      raiseOptions.sort();
+      if (raiseOptions.length) {
+        sampleComponent.setAttribute('mdw-raised', raiseOptions.join(' ').trim());
+      } else {
+        sampleComponent.removeAttribute('mdw-raised');
+      }
+      break;
+    case 'media-placement':
+      if (mediaElement.parentElement) {
+        mediaElement.parentElement.removeChild(mediaElement);
+      }
+      switch (value) {
+        default:
+        case 'none':
+          break;
+        case 'top':
+          sampleComponent.insertBefore(mediaElement, sampleComponent.getElementsByClassName('mdw-card__start')[0]);
+          break;
+        case 'middle':
+          sampleComponent.insertBefore(mediaElement, sampleComponent.getElementsByClassName('mdw-card__supporting-text')[0]);
+          break;
+        case 'bottom':
+          sampleComponent.appendChild(mediaElement);
+          break;
+      }
+      break;
+    case 'media-ratio':
+      switch (value) {
+        default:
+        case 'none':
+          mediaElement.removeAttribute('mdw-ratio');
+          break;
+        case '16:9':
+          mediaElement.setAttribute('mdw-ratio', '16:9');
+          break;
+        case '3:2':
+          mediaElement.setAttribute('mdw-ratio', '3:2');
+          break;
+        case '4:3':
+          mediaElement.setAttribute('mdw-ratio', '4:3');
+          break;
+        case '1:1':
+          mediaElement.setAttribute('mdw-ratio', '1:1');
+          break;
+      }
+      break;
+    case 'primary-action':
+      if (checked) {
+        if (!primaryButtonElement.parentElement) {
+          sampleComponent.insertBefore(primaryButtonElement, sampleComponent.firstChild);
+        }
+      } else if (primaryButtonElement.parentElement) {
+        primaryButtonElement.parentElement.removeChild(primaryButtonElement);
+      }
+      break;
+    case 'secondary-actions':
+      if (checked) {
+        if (!actionsElement.parentElement) {
+          sampleComponent.appendChild(actionsElement);
+        }
+      } else if (actionsElement.parentElement) {
+        actionsElement.parentElement.removeChild(actionsElement);
+      }
+      break;
+    case 'close-action':
+      if (checked) {
+        if (!closeActionElement.parentElement) {
+          sampleComponent.insertBefore(closeActionElement, sampleComponent.getElementsByClassName('mdw-card__header')[0]);
+        }
+      } else if (closeActionElement.parentElement) {
+        closeActionElement.parentElement.removeChild(closeActionElement);
+      }
+      break;
+    case 'surface':
+      sampleComponent.setAttribute('mdw-surface', value.replace(/ (light|dark)/, ''));
+      if (value.indexOf(' light') === -1) {
+        sampleComponent.removeAttribute('mdw-light');
+      } else {
+        sampleComponent.setAttribute('mdw-light', '');
+      }
+      if (value.indexOf(' dark') === -1) {
+        sampleComponent.removeAttribute('mdw-dark');
+      } else {
+        sampleComponent.setAttribute('mdw-dark', '');
+      }
+      if (value === 'card') {
+        sampleComponent.classList.remove('mdw-theme');
+      } else {
+        sampleComponent.classList.add('mdw-theme');
+      }
+      break;
+    default:
+  }
+  updateSampleCode();
+}
+
+/** @return {void} */
+function setupComponentOptions() {
+  sampleComponent = document.querySelector('.component-sample .mdw-card');
+  /** @type {HTMLElement} */
+  mediaElement = (sampleComponent.getElementsByClassName('mdw-card__media')[0]);
+  /** @type {HTMLElement} */
+  actionsElement = (sampleComponent.getElementsByClassName('mdw-card__actions')[0]);
+  /** @type {HTMLElement} */
+  primaryButtonElement = (sampleComponent.getElementsByClassName('mdw-card__button')[0]);
+  /** @type {HTMLElement} */
+  closeActionElement = (sampleComponent.getElementsByClassName('mdw-card__end')[0]);
+  iterateArrayLike(document.querySelectorAll('input[name]'), (el) => {
+    el.addEventListener('change', onOptionChange);
+  });
+}
+
+setupComponentOptions();
+setupPugButton();
+updateSampleCode();