feat(docs): Interactive playground component

packages/@nucleus/app/styles/doc/_icon.scss

@@ -0,0 +1,21 @@
+// icon tiles
+.icon-container {
+  display: flex;
+  flex-wrap: wrap;
+
+  .icon {
+    text-align: center;
+    padding: 10px 5px 5px;
+    margin: 5px;
+    width: 150px;
+    cursor: pointer;
+
+    &:hover {
+      background: #dae1e7;
+    }
+
+    &--text {
+      padding: 5px 0;
+    }
+  }
+}

packages/@nucleus/app/styles/doc/_playgroud.scss

@@ -0,0 +1,45 @@
+$playground-border-color: #dae1e7;
+
+.playground-container {
+  display: flex;
+  border-bottom: 1px dotted $playground-border-color;
+  padding: 10px;
+  justify-content: space-around;
+
+  &--component {
+    align-self: center;
+    width: 50%;
+    text-align: center;
+    padding-right: 10px;
+  }
+
+  &--props {
+    padding-left: 10px;
+    border-left: 1px dotted $playground-border-color;
+    max-height: 25vh;
+    width: 50%;
+    overflow-y: auto;
+
+    .item {
+      margin: 10px;
+
+      &--label {
+        display: block;
+        padding-bottom: 5px;
+        font-weight: 700;
+      }
+    }
+  }
+
+  &--code {
+    position: relative;
+    padding: 20px;
+  }
+
+  &--code-copy {
+    position: absolute;
+    right: 0;
+    bottom: -1px;
+    padding: 0;
+  }
+}

packages/@nucleus/app/styles/nucleus-docs.scss

@@ -5,3 +5,5 @@
 @import "./doc/custom-addon-theme";
 @import "./doc/custom-syntax-highlight";
 @import "./doc/nucleus-mod";
+@import "./doc/icon";
+@import "./doc/playgroud";

packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js

@@ -0,0 +1,121 @@
+import Component from '@ember/component';
+import { get, set, action } from "@ember/object";
+import {
+  registerComputedProperties,
+  handlePropertyChange,
+  generateCode
+} from '../../utils/playground';
+
+const PROPERTIES = [
+  {
+    name: 'label',
+    input: true,
+    value: 'Click here',
+  },
+  {
+    name: 'type',
+    select: true,
+    value: 'primary',
+    types: [
+      'primary',
+      'secondary',
+      'danger',
+      'link',
+      'text'
+    ]
+  },
+  {
+    name: 'size',
+    select: true,
+    value: 'none',
+    types: [
+      'none',
+      'small',
+      'mini'
+    ]
+  },
+  {
+    name: 'block',
+    toggle: true,
+    value: false,
+  },
+  {
+    name: 'disabled',
+    toggle: true,
+    value: false,
+  },
+  {
+    name: 'icon',
+    select: true,
+    value: 'none',
+    types: [
+      'none',
+      'nucleus-circle-check',
+      'nucleus-cross'
+    ]
+  },
+  {
+    name: 'iconSize',
+    select: true,
+    value: 'none',
+    types: [
+      'none',
+      'medium',
+      'small',
+      'mini'
+    ]
+  },
+  {
+    name: 'iconOnly',
+    toggle: true,
+    value: false,
+  }
+]
+class Playground extends Component {
+  properties = PROPERTIES;
+
+  code = null;
+
+  init() {
+    super.init(...arguments);
+    registerComputedProperties(this, get(this, 'properties'));
+    this._generateCode();
+  }
+
+  @action
+  onchange(name, value) {
+    let properties = get(this, 'properties');
+    if (name === 'iconOnly' && !name.value) {
+      let changables = ['label', 'type', 'icon'];
+      let [
+        label,
+        type,
+        icon
+      ] = properties.filter(prop => changables.includes(prop.name));
+
+      set(label, 'value', '');
+      set(type, 'value', 'text');
+      set(icon, 'value', (icon.value === 'none') ? icon.types[1] : icon.value);
+    }
+    handlePropertyChange(properties, name, value);
+    this._generateCode();
+  }
+
+
+  _generateCode() {
+    let attributes = get(this, 'properties').map((prop) => {
+      return {
+        name: prop.name,
+        value: prop.value,
+      }
+    });
+
+    set(this, 'code', generateCode({
+      component:'nucleus-button',
+      attributes,
+      multiline: true
+    }));
+  }
+}
+
+export default Playground;

packages/@nucleus/tests/dummy/app/components/nucleus-icon/demo-1.js

@@ -1,5 +1,7 @@
 // BEGIN-SNIPPET nucleus-icon.js
 import Component from '@ember/component';
+import { inject } from '@ember/service';
+import copyToClipboard from '../../utils/copy-to-clipboard';
 
 const ICON_LIST = [
   "nucleus-circle-check",
@@ -13,11 +15,20 @@ const ICON_LIST = [
 ];
 
 export default Component.extend({
+  flashMessages: inject(),
+
   icons: null,
 
   init() {
     this._super(...arguments);
     this.set('icons', ICON_LIST)
+  },
+
+  actions: {
+    copyIcon(icon) {
+      copyToClipboard(icon)
+        .then(this.flashMessages.success(`Copied '${icon}' to clipboard`));
+    }
   }
 });
 // END-SNIPPET

packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js

@@ -0,0 +1,73 @@
+import Component from '@ember/component';
+import { get, set, action } from "@ember/object";
+import {
+  registerComputedProperties,
+  handlePropertyChange,
+  generateCode
+} from '../../utils/playground';
+
+const PROPERTIES = [
+  {
+    name: 'size',
+    select: true,
+    value: 'large',
+    types: [
+      'small',
+      'medium',
+      'large'
+    ]
+  },
+  {
+    name: 'variant',
+    select: true,
+    value: 'none',
+    types: [
+      'none',
+      'danger',
+      'success'
+    ]
+  }
+]
+
+class Playground extends Component {
+  properties = PROPERTIES;
+
+  code = null;
+
+  init() {
+    super.init(...arguments);
+    registerComputedProperties(this, get(this, 'properties'));
+    this._generateCode();
+  }
+
+  @action
+  onchange(name, value) {
+    handlePropertyChange(get(this, 'properties'), name, value);
+    this._generateCode();
+  }
+
+
+  _generateCode() {
+    let props = get(this, 'properties').map((prop) => {
+      return {
+        name: prop.name,
+        value: prop.value,
+      }
+    });
+
+    let staticProps = [
+      {
+        name: 'name',
+        value: 'nucleus-circle-help'
+      }
+    ];
+
+    set(this, 'code', generateCode({
+      component: 'nucleus-icon',
+      attributes: [...staticProps, ...props]
+    }));
+  }
+}
+
+export default Playground;
+

packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js

@@ -0,0 +1,68 @@
+import Component from '@ember/component';
+import { get, set, action } from "@ember/object";
+import {
+  registerComputedProperties,
+  handlePropertyChange,
+  generateCode
+} from '../../utils/playground';
+
+const PROPERTIES = [
+  {
+    name: 'type',
+    select: true,
+    value: 'warning',
+    types: [
+      'warning',
+      'danger',
+      'success',
+      'info'
+    ]
+  },
+  {
+    name: 'title',
+    input: true,
+    value: 'This message has been identified as spam.',
+  },
+  {
+    name: 'isDismissible',
+    toggle: true,
+    value: true
+  }
+]
+
+class Playground extends Component {
+  properties = PROPERTIES;
+
+  code = null;
+
+  init() {
+    super.init(...arguments);
+    registerComputedProperties(this, get(this, 'properties'));
+    this._generateCode();
+  }
+
+  @action
+  onchange(name, value) {
+    handlePropertyChange(get(this, 'properties'), name, value);
+    this._generateCode();
+  }
+
+
+  _generateCode() {
+    let attributes = get(this, 'properties').map((prop) => {
+      return {
+        name: prop.name,
+        value: prop.value,
+      }
+    });
+
+    set(this, 'code', generateCode({
+      component: 'nucleus-inline-banner',
+      attributes,
+      multiline:true
+    }));
+  }
+}
+
+export default Playground;
+

packages/@nucleus/tests/dummy/app/components/playground/blank.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+
+});

packages/@nucleus/tests/dummy/app/components/playground/code.js

@@ -0,0 +1,21 @@
+import Component from '@ember/component';
+import { action, computed, get } from '@ember/object';
+import { highlightCode } from 'ember-cli-addon-docs/utils/compile-markdown';
+import copyToClipboard from '../../utils/copy-to-clipboard';
+
+
+class Code extends Component {
+  @computed('code')
+  get computedCode() {
+    return highlightCode(get(this, 'code'), 'hbs');
+  }
+
+
+  @action
+  copyCode() {
+    copyToClipboard(get(this, 'code'))
+        .then(this.flashMessages.success(`Code copied.`));
+  }
+}
+
+export default Code;