diff --git a/packages/@nucleus/app/styles/doc/_icon.scss b/packages/@nucleus/app/styles/doc/_icon.scss
new file mode 100644
index 00000000..bc685ff8
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/packages/@nucleus/app/styles/doc/_playground.scss b/packages/@nucleus/app/styles/doc/_playground.scss
new file mode 100644
index 00000000..38056dfb
--- /dev/null
+++ b/packages/@nucleus/app/styles/doc/_playground.scss
@@ -0,0 +1,52 @@
+$playground-border-color: #dae1e7;
+$padding: 8px;
+
+.playground-container {
+ display: flex;
+ border-bottom: 1px dotted $playground-border-color;
+ justify-content: space-around;
+
+ &--preview {
+ display: flex;
+ align-self: center;
+ width: 75%;
+ justify-content: center;
+ padding: $padding;
+ }
+
+ &--props {
+ padding: $padding;
+ border-left: 1px dotted $playground-border-color;
+ max-height: 25vh;
+ width: 50%;
+ overflow-y: auto;
+
+ .item {
+ margin: 10px;
+
+ &--label {
+ display: block;
+ padding-bottom: $padding;
+ font-weight: 700;
+ }
+
+ .ember-text-field {
+ border: 1px solid $playground-border-color;
+ padding: $padding;
+ }
+ }
+ }
+
+ &--code {
+ position: relative;
+ margin: 8px;
+ padding: $padding 0;
+ overflow-x: hidden;
+ }
+
+ &--code-copy {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ }
+}
diff --git a/packages/@nucleus/app/styles/nucleus-docs.scss b/packages/@nucleus/app/styles/nucleus-docs.scss
index f0557b40..4e54abb1 100644
--- a/packages/@nucleus/app/styles/nucleus-docs.scss
+++ b/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/playground";
diff --git a/packages/@nucleus/tests/dummy/app/components/docs-playground.js b/packages/@nucleus/tests/dummy/app/components/docs-playground.js
new file mode 100644
index 00000000..69c3e219
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/components/docs-playground.js
@@ -0,0 +1,4 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+});
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/components/docs-playground/code.js b/packages/@nucleus/tests/dummy/app/components/docs-playground/code.js
new file mode 100644
index 00000000..32b1413e
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/components/docs-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;
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/components/docs-playground/preview.js b/packages/@nucleus/tests/dummy/app/components/docs-playground/preview.js
new file mode 100644
index 00000000..e329c90d
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/components/docs-playground/preview.js
@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+ tagName: ''
+});
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/components/docs-playground/props.js b/packages/@nucleus/tests/dummy/app/components/docs-playground/props.js
new file mode 100644
index 00000000..234b3ed4
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/components/docs-playground/props.js
@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+import { action } from '@ember/object';
+
+class Props extends Component {
+ @action
+ handleChange(property, e) {
+ let value = (property.toggle) ? e.target.checked : e.target.value;
+ this.onchange(property.name, value, e);
+ }
+
+}
+
+export default Props;
diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js b/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js
new file mode 100644
index 00000000..f0eafbed
--- /dev/null
+++ b/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';
+
+import icons from '../../constants/icons';
+
+const PROPERTIES = [
+ {
+ name: 'label',
+ input: true,
+ value: 'Click here',
+ },
+ {
+ name: 'variant',
+ 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',
+ ...icons
+ ]
+ },
+ {
+ 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) {
+ this._handleIconOnly(properties);
+ }
+
+ handlePropertyChange(properties, name, value);
+ this._generateCode();
+ }
+
+
+ _generateCode() {
+ set(this, 'code', generateCode({
+ component:'nucleus-button',
+ properties: get(this, 'properties'),
+ multiline: true
+ }));
+ }
+
+ _handleIconOnly(properties) {
+ let changables = ['label', 'variant', '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);
+ }
+}
+
+export default Playground;
diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-icon/demo-1.js b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/demo-1.js
index dc5b094c..df0c6b2e 100644
--- a/packages/@nucleus/tests/dummy/app/components/nucleus-icon/demo-1.js
+++ b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/demo-1.js
@@ -1,23 +1,24 @@
// BEGIN-SNIPPET nucleus-icon.js
import Component from '@ember/component';
-
-const ICON_LIST = [
- "nucleus-circle-check",
- "nucleus-circle-cross",
- "nucleus-circle-help",
- "nucleus-circle-info",
- "nucleus-circle-minus",
- "nucleus-circle-plus",
- "nucleus-cross-thin",
- "nucleus-cross"
-];
+import { inject } from '@ember/service';
+import copyToClipboard from '../../utils/copy-to-clipboard';
+import icons from '../../constants/icons';
export default Component.extend({
+ flashMessages: inject(),
+
icons: null,
init() {
this._super(...arguments);
- this.set('icons', ICON_LIST)
+ this.set('icons', icons)
+ },
+
+ actions: {
+ copyIcon(icon) {
+ copyToClipboard(icon)
+ .then(this.flashMessages.success(`Copied '${icon}' to clipboard`));
+ }
}
});
// END-SNIPPET
diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js
new file mode 100644
index 00000000..a175ebeb
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js
@@ -0,0 +1,67 @@
+import Component from '@ember/component';
+import { get, set, action } from "@ember/object";
+import {
+ registerComputedProperties,
+ handlePropertyChange,
+ generateCode
+} from '../../utils/playground';
+import icons from '../../constants/icons';
+
+
+const PROPERTIES = [
+ {
+ name: 'name',
+ select: true,
+ value: 'nucleus-circle-check',
+ types: icons
+ },
+ {
+ 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() {
+ set(this, 'code', generateCode({
+ component: 'nucleus-icon',
+ properties: get(this, 'properties')
+ }));
+ }
+}
+
+export default Playground;
+
diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js b/packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js
new file mode 100644
index 00000000..43bfcf66
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js
@@ -0,0 +1,61 @@
+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: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.',
+ },
+ {
+ 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() {
+ set(this, 'code', generateCode({
+ component: 'nucleus-inline-banner',
+ properties: get(this, 'properties'),
+ multiline:true
+ }));
+ }
+}
+
+export default Playground;
+
diff --git a/packages/@nucleus/tests/dummy/app/constants/icons.js b/packages/@nucleus/tests/dummy/app/constants/icons.js
new file mode 100644
index 00000000..96c073ab
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/constants/icons.js
@@ -0,0 +1,10 @@
+export default [
+ "nucleus-circle-check",
+ "nucleus-circle-cross",
+ "nucleus-circle-help",
+ "nucleus-circle-info",
+ "nucleus-circle-minus",
+ "nucleus-circle-plus",
+ "nucleus-cross-thin",
+ "nucleus-cross"
+];
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/helpers/eq.js b/packages/@nucleus/tests/dummy/app/helpers/eq.js
new file mode 100644
index 00000000..8b8e9831
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/helpers/eq.js
@@ -0,0 +1,7 @@
+import { helper } from "@ember/component/helper";
+
+function eq(args) {
+ return (args[0] === args[1])
+}
+
+export default helper(eq);
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs
new file mode 100644
index 00000000..6bf26114
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs
@@ -0,0 +1,16 @@
+{{#docs-demo as |demo|}}
+
+
+ {{yield (hash preview=(component "docs-playground/preview"))}}
+
+
+
+
Properties
+ {{yield (hash props=(component "docs-playground/props"))}}
+
+
+
+
+ {{yield (hash codeblock=(component "docs-playground/code"))}}
+
+{{/docs-demo}}
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/code.hbs b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/code.hbs
new file mode 100644
index 00000000..2a369a75
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/code.hbs
@@ -0,0 +1,11 @@
+
+ {{html-safe computedCode}}
+
+
+{{nucleus-button
+ label="copy"
+ variant="text"
+ size="small"
+ class="playground-container--code-copy"
+ onClick=(action 'copyCode')
+}}
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/preview.hbs b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/preview.hbs
new file mode 100644
index 00000000..fb5c4b15
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/preview.hbs
@@ -0,0 +1 @@
+{{yield}}
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/props.hbs b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/props.hbs
new file mode 100644
index 00000000..851cf3b7
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/props.hbs
@@ -0,0 +1,47 @@
+{{#each properties as |property|}}
+
+
+ {{property.name}}
+
+
+ {{!-- select box --}}
+ {{#if property.select}}
+
+ {{#each property.types as |type|}}
+
+ {{type}}
+
+ {{/each}}
+
+
+ {{!-- input --}}
+ {{else if property.input}}
+
+
+ {{!-- toggle --}}
+ {{else if property.toggle}}
+
+ {{/if}}
+
+
+
+{{/each}}
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/templates/components/nucleus-button/playground.hbs b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-button/playground.hbs
new file mode 100644
index 00000000..a87b4ffe
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-button/playground.hbs
@@ -0,0 +1,22 @@
+{{!-- Demo with variants --}}
+{{#docs-playground as |p|}}
+ {{!-- preview --}}
+ {{#p.preview}}
+ {{nucleus-button
+ label=label.value
+ variant=variant.value
+ size=size.value
+ block=block.value
+ disabled=disabled.value
+ icon=icon.value
+ iconSize=iconSize.value
+ iconOnly=iconOnly.value
+ }}
+ {{/p.preview}}
+
+ {{!-- props --}}
+ {{p.props onchange=(action 'onchange') properties=properties}}
+
+ {{!-- code --}}
+ {{p.codeblock code=code}}
+{{/docs-playground}}
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/demo-1.hbs b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/demo-1.hbs
index 85f096bd..c9a2a1af 100644
--- a/packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/demo-1.hbs
+++ b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/demo-1.hbs
@@ -1,23 +1,12 @@
{{#docs-demo as |demo|}}
{{#demo.example name="nucleus-icon.hbs"}}
-
-
-
- {{!-- template-lint-disable no-inline-styles --}}
- Icon
- Name
-
-
-
- {{#each icons as |icon|}}
-
- {{!-- template-lint-disable no-inline-styles --}}
- {{nucleus-icon name=icon}}
- {{icon}}
-
- {{/each}}
-
-
-
+
+ {{#each icons as |icon|}}
+
+ {{nucleus-icon name=icon size="large"}}
+
{{icon}}
+
+ {{/each}}
+
{{/demo.example}}
{{/docs-demo}}
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/playground.hbs b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/playground.hbs
new file mode 100644
index 00000000..192c3f22
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/playground.hbs
@@ -0,0 +1,17 @@
+{{!-- Demo with variants --}}
+{{#docs-playground as |p|}}
+ {{!-- component --}}
+ {{#p.preview}}
+ {{nucleus-icon
+ name=name.value
+ size=size.value
+ variant=variant.value
+ }}
+ {{/p.preview}}
+
+ {{!-- props --}}
+ {{p.props onchange=(action 'onchange') properties=properties}}
+
+ {{!-- code --}}
+ {{p.codeblock code=code}}
+{{/docs-playground}}
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/templates/components/nucleus-inline-banner/playground.hbs b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-inline-banner/playground.hbs
new file mode 100644
index 00000000..a4b1b240
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-inline-banner/playground.hbs
@@ -0,0 +1,17 @@
+{{!-- Demo with variants --}}
+{{#docs-playground as |p|}}
+ {{!-- component --}}
+ {{#p.preview}}
+ {{nucleus-inline-banner
+ type=type.value
+ title=title.value
+ isDismissible=isDismissible.value
+ }}
+ {{/p.preview}}
+
+ {{!-- props --}}
+ {{p.props onchange=(action 'onchange') properties=properties}}
+
+ {{!-- code --}}
+ {{p.codeblock code=code}}
+{{/docs-playground}}
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/templates/docs/components/nucleus-button.md b/packages/@nucleus/tests/dummy/app/templates/docs/components/nucleus-button.md
index 1514f4b2..d06a83fe 100644
--- a/packages/@nucleus/tests/dummy/app/templates/docs/components/nucleus-button.md
+++ b/packages/@nucleus/tests/dummy/app/templates/docs/components/nucleus-button.md
@@ -4,21 +4,23 @@
yarn add @freshworks/button
```
-Buttons are interactive components that the users can click or touch to trigger corresponding business logic.
+Buttons are interactive components that the users can click or touch to trigger corresponding business logic.
## Usage
-#### 1. Simplest use case
-A button with text in it, telling the user what to do.
-
{{#docs-demo as |demo|}}
- {{#demo.example name="nucleus-button.hbs"}}
+ {{#docs-snippet name="nucleus-button.hbs"}}
{{nucleus-button label="Click here"}}
- {{/demo.example}}
- {{demo.snippet 'nucleus-button.hbs'}}
+ {{/docs-snippet}}
{{/docs-demo}}
-#### 2. Block form
+## Playground
+
+{{nucleus-button/playground}}
+
+## Usecases
+
+#### 1. Block form
Button with yieldable content.
{{#docs-demo as |demo|}}
@@ -27,78 +29,31 @@ Button with yieldable content.
Some yield content here
{{/nucleus-button}}
{{/demo.example}}
+
{{demo.snippet 'nucleus-button-block-form.hbs'}}
{{/docs-demo}}
-#### 3. Asynchronous Button
+#### 2. Asynchronous Button
Dynamic button which has different states: pending and success. Supply an `action` that returns a `Promise` and watch the magic!
{{nucleus-button/demo-1}}
-## Styles
-
-#### 1. Different variants:
-{{#docs-demo as |demo|}}
- {{#demo.example name='nucleus-button-light.hbs'}}
- {{nucleus-button label="Click here"}}
- {{nucleus-button label="Click here" variant="secondary"}}
- {{nucleus-button label="Click here" variant="danger"}}
- {{nucleus-button label="Click here" variant="link"}}
- {{nucleus-button label="Click here" variant="text"}}
- {{/demo.example}}
- {{demo.snippet 'nucleus-button-light.hbs'}}
-{{/docs-demo}}
-
-#### 2. Different sizes:
-{{#docs-demo as |demo|}}
- {{#demo.example name='nucleus-button-tiny.hbs'}}
- {{nucleus-button label="Click here" size="small"}}
- {{nucleus-button label="Click here" size="mini"}}
- {{/demo.example}}
- {{demo.snippet 'nucleus-button-tiny.hbs'}}
-{{/docs-demo}}
-
#### 3. Icon buttons:
-It is possible to create buttons that contain only icons with the `iconOnly` attribute.
+It is possible to create buttons that contain only icons with the `iconOnly` attribute.
The `iconSize` property specifies the size of the icon. If the iconSize is not mentioned, the icon takes the size of the button.
{{#docs-demo as |demo|}}
{{#demo.example name='nucleus-button-dense.hbs'}}
- {{nucleus-button icon="nucleus-circle-check" iconOnly=true iconSize="medium"
+ {{nucleus-button icon="nucleus-circle-check" iconOnly=true iconSize="medium"
variant="text"}}
- {{nucleus-button icon="nucleus-circle-check" iconOnly=true size="small"
- iconSize="small" variant="text"}}
- {{nucleus-button icon="nucleus-circle-check" iconOnly=true size="mini"
- iconSize="mini" variant="text"}}
+ {{nucleus-button icon="nucleus-circle-check" label="Click here" variant="secondary"}}
{{/demo.example}}
+
{{demo.snippet 'nucleus-button-dense.hbs'}}
{{/docs-demo}}
-{{#docs-demo as |demo|}}
- {{#demo.example name='nucleus-button-icon.hbs'}}
- {{nucleus-button icon="nucleus-circle-help" label="Click here" variant="primary"}}
- {{nucleus-button icon="nucleus-circle-check" label="Click here" variant="secondary"}}
- {{nucleus-button icon="nucleus-circle-minus" label="Click here" variant="danger"}}
- {{/demo.example}}
- {{demo.snippet 'nucleus-button-icon.hbs'}}
-{{/docs-demo}}
-#### 4. Full-width button:
-{{#docs-demo as |demo|}}
- {{#demo.example name='nucleus-button-block.hbs'}}
- {{nucleus-button label="Click here" block=true}}
- {{/demo.example}}
- {{demo.snippet 'nucleus-button-block.hbs'}}
-{{/docs-demo}}
-#### 5. Disabled button
-To toggle the 'disabled' property, set 'disabled' to true
-{{#docs-demo as |demo|}}
- {{#demo.example name='nucleus-button-disabled.hbs'}}
- {{nucleus-button variant="primary" label="Click here" disabled=true}}
- {{/demo.example}}
- {{demo.snippet 'nucleus-button-disabled.hbs'}}
-{{/docs-demo}}
## Guidelines
@@ -121,7 +76,7 @@ To toggle the 'disabled' property, set 'disabled' to true
🚫**Dont's**
-1. Avoid using too many buttons in one page
+1. Avoid using too many buttons in one page
2. Button copy shouldn’t be too wordy
@@ -129,7 +84,7 @@ To toggle the 'disabled' property, set 'disabled' to true
4. Don’t use buttons instead of tabs
-5. Don’t trigger the action without alerting the user for destructive buttons
+5. Don’t trigger the action without alerting the user for destructive buttons
6. Don’t use destructive buttons for all delete/ cancellation scenarios. More applicable for actions which involves deleting the data permanently
diff --git a/packages/@nucleus/tests/dummy/app/templates/docs/components/nucleus-inline-banner.md b/packages/@nucleus/tests/dummy/app/templates/docs/components/nucleus-inline-banner.md
index f55bf662..f2fc6241 100644
--- a/packages/@nucleus/tests/dummy/app/templates/docs/components/nucleus-inline-banner.md
+++ b/packages/@nucleus/tests/dummy/app/templates/docs/components/nucleus-inline-banner.md
@@ -8,11 +8,24 @@ Inline messages are those which stay in the screen for a limited period of time
## Usage
-#### 1. Simple use case
+{{#docs-demo as |demo|}}
+ {{#docs-snippet name="nucleus-inline-banners.hbs"}}
+ {{nucleus-inline-banner
+ type="warning"
+ title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+ onClose=(action "onClose")
+ }}
+ {{/docs-snippet}}
+{{/docs-demo}}
-{{nucleus-inline-banner/demo-1}}
-#### 2. Custom content
+## Playground
+
+{{nucleus-inline-banner/playground}}
+
+## Usecases
+
+#### 1.Custom content
{{nucleus-inline-banner/demo-2}}
@@ -22,9 +35,9 @@ Inline messages are those which stay in the screen for a limited period of time
1. When used in a form, in-line messages are used at the bottom before the CTA button. However, based on the content, it can be placed above as well.
-2. Follow the character limit guidelines mentioned in Typography.
+2. Follow the character limit guidelines mentioned in Typography.
-🚫**Dont's**
+🚫**Dont's**
1. Do not include buttons in an in-line message.
diff --git a/packages/@nucleus/tests/dummy/app/templates/docs/foundation/nucleus-icon.md b/packages/@nucleus/tests/dummy/app/templates/docs/foundation/nucleus-icon.md
index 7b9d27f3..d66742fc 100644
--- a/packages/@nucleus/tests/dummy/app/templates/docs/foundation/nucleus-icon.md
+++ b/packages/@nucleus/tests/dummy/app/templates/docs/foundation/nucleus-icon.md
@@ -7,14 +7,15 @@ yarn add @freshworks/icon
## Usage
{{#docs-demo as |demo|}}
- {{#demo.example name='nucleus-icon-eg.hbs'}}
+ {{#docs-snippet name="nucleus-icon.hbs"}}
{{nucleus-icon name="nucleus-circle-check" size="small"}}
- {{nucleus-icon name="nucleus-circle-cross" size="medium" variant="danger"}}
- {{nucleus-icon name="nucleus-circle-help" size="large" variant="success"}}
- {{/demo.example}}
- {{demo.snippet 'nucleus-icon-eg.hbs'}}
+ {{/docs-snippet}}
{{/docs-demo}}
+## Playground
+
+{{nucleus-icon/playground}}
+
## List of icons
{{nucleus-icon/demo-1}}
diff --git a/packages/@nucleus/tests/dummy/app/utils/copy-to-clipboard.js b/packages/@nucleus/tests/dummy/app/utils/copy-to-clipboard.js
new file mode 100644
index 00000000..0879de26
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/utils/copy-to-clipboard.js
@@ -0,0 +1,32 @@
+const copyToClipboard = (content) => {
+ if (navigator.clipboard) {
+ return navigator.clipboard.writeText(content);
+ } else {
+ // lets do it, on the old way
+ return new Promise((resolve, reject) => {
+ let copyAreaId = 'copy-area';
+ let textarea = document.getElementById(copyAreaId);
+ if (!textarea) {
+ textarea = document.createElement('textarea');
+ textarea.id = copyAreaId
+ textarea.setAttribute('readonly', '');
+ textarea.style.position = 'absolute';
+ textarea.style.left = '-9999px';
+ document.body.appendChild(textarea);
+ }
+ textarea.value = content;
+
+ try {
+ textarea.select();
+ document.execCommand('copy');
+ resolve();
+ } catch(e) {
+ reject(e);
+ }
+ });
+ }
+};
+
+
+
+export default copyToClipboard;
\ No newline at end of file
diff --git a/packages/@nucleus/tests/dummy/app/utils/playground.js b/packages/@nucleus/tests/dummy/app/utils/playground.js
new file mode 100644
index 00000000..c52c4021
--- /dev/null
+++ b/packages/@nucleus/tests/dummy/app/utils/playground.js
@@ -0,0 +1,44 @@
+import { defineProperty, computed, get, set } from '@ember/object';
+
+// registers computed properties dynamically with property names
+const registerComputedProperties = (context, elements) => {
+ elements.forEach(element => {
+ defineProperty(context, element.name, computed('properties', function() {
+ return get(context, 'properties').find((prop) => prop.name === element.name);
+ }));
+ });
+};
+
+const handlePropertyChange = (properties, name, value) => {
+ let prop = properties.find((prop) => prop.name === name);
+ set(prop, 'value', value);
+}
+
+const generateCode = ({ component, properties, multiline = false }) => {
+ let code = `{{${component}`
+
+ let attributes = properties.map((prop) => {
+ return {
+ name: prop.name,
+ value: prop.value,
+ }
+ });
+
+ attributes.forEach((attr) => {
+ let ignoreProp = (attr.value === 'none' || !attr.value);
+ if (!ignoreProp) {
+ code = `${code}${multiline ? '\n ': ''} ${attr.name}="${attr.value}"`;
+ }
+ });
+
+ code = `${code} ${multiline ? '\n ': ''}}}`
+
+ return code;
+};
+
+
+export {
+ registerComputedProperties,
+ handlePropertyChange,
+ generateCode
+};
\ No newline at end of file
diff --git a/packages/button/addon/components/nucleus-button.js b/packages/button/addon/components/nucleus-button.js
index 7e8bf9d4..89a3a3ce 100644
--- a/packages/button/addon/components/nucleus-button.js
+++ b/packages/button/addon/components/nucleus-button.js
@@ -356,10 +356,10 @@ class NucleusButton extends Component {
* @computed _typeClass
* @private
*/
- @computed('type')
+ @computed('variant')
get _typeClass() {
let type = this.get('variant');
- return type ? `nucleus-button--${this.get('variant')}` : 'nucleus-button--primary';
+ return type ? `nucleus-button--${type}` : 'nucleus-button--primary';
}
/**
@@ -368,7 +368,7 @@ class NucleusButton extends Component {
* @computed _iconClass
* @private
*/
- @computed('iconButton')
+ @computed('iconOnly')
get _iconClass() {
let iconButton = this.get('iconOnly');
return iconButton ? `nucleus-button--iconOnly` : null;