From 3daf9bf83e81706e661a60f56790ab403c1bf617 Mon Sep 17 00:00:00 2001 From: Prakash Date: Mon, 9 Mar 2020 09:54:28 +0530 Subject: [PATCH] feat(docs): Interactive playground component (#140) * playground component initial commit * named params * Checkbox fix * icon btn fix * revert naming * review comments * Rename to preview * Changes * fix: button variant prop * fix: updated styling * fix: overflow issue Co-authored-by: Shibu Lijack Co-authored-by: Shibu Lijack --- packages/@nucleus/app/styles/doc/_icon.scss | 21 +++ .../@nucleus/app/styles/doc/_playground.scss | 52 ++++++++ .../@nucleus/app/styles/nucleus-docs.scss | 2 + .../dummy/app/components/docs-playground.js | 4 + .../app/components/docs-playground/code.js | 21 +++ .../app/components/docs-playground/preview.js | 5 + .../app/components/docs-playground/props.js | 13 ++ .../components/nucleus-button/playground.js | 121 ++++++++++++++++++ .../app/components/nucleus-icon/demo-1.js | 25 ++-- .../app/components/nucleus-icon/playground.js | 67 ++++++++++ .../nucleus-inline-banner/playground.js | 61 +++++++++ .../tests/dummy/app/constants/icons.js | 10 ++ .../@nucleus/tests/dummy/app/helpers/eq.js | 7 + .../templates/components/docs-playground.hbs | 16 +++ .../components/docs-playground/code.hbs | 11 ++ .../components/docs-playground/preview.hbs | 1 + .../components/docs-playground/props.hbs | 47 +++++++ .../components/nucleus-button/playground.hbs | 22 ++++ .../components/nucleus-icon/demo-1.hbs | 27 ++-- .../components/nucleus-icon/playground.hbs | 17 +++ .../nucleus-inline-banner/playground.hbs | 17 +++ .../docs/components/nucleus-button.md | 81 +++--------- .../docs/components/nucleus-inline-banner.md | 23 +++- .../templates/docs/foundation/nucleus-icon.md | 11 +- .../dummy/app/utils/copy-to-clipboard.js | 32 +++++ .../tests/dummy/app/utils/playground.js | 44 +++++++ .../button/addon/components/nucleus-button.js | 6 +- 27 files changed, 657 insertions(+), 107 deletions(-) create mode 100644 packages/@nucleus/app/styles/doc/_icon.scss create mode 100644 packages/@nucleus/app/styles/doc/_playground.scss create mode 100644 packages/@nucleus/tests/dummy/app/components/docs-playground.js create mode 100644 packages/@nucleus/tests/dummy/app/components/docs-playground/code.js create mode 100644 packages/@nucleus/tests/dummy/app/components/docs-playground/preview.js create mode 100644 packages/@nucleus/tests/dummy/app/components/docs-playground/props.js create mode 100644 packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js create mode 100644 packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js create mode 100644 packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js create mode 100644 packages/@nucleus/tests/dummy/app/constants/icons.js create mode 100644 packages/@nucleus/tests/dummy/app/helpers/eq.js create mode 100644 packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs create mode 100644 packages/@nucleus/tests/dummy/app/templates/components/docs-playground/code.hbs create mode 100644 packages/@nucleus/tests/dummy/app/templates/components/docs-playground/preview.hbs create mode 100644 packages/@nucleus/tests/dummy/app/templates/components/docs-playground/props.hbs create mode 100644 packages/@nucleus/tests/dummy/app/templates/components/nucleus-button/playground.hbs create mode 100644 packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/playground.hbs create mode 100644 packages/@nucleus/tests/dummy/app/templates/components/nucleus-inline-banner/playground.hbs create mode 100644 packages/@nucleus/tests/dummy/app/utils/copy-to-clipboard.js create mode 100644 packages/@nucleus/tests/dummy/app/utils/playground.js 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|}} +
+ + + {{!-- select box --}} + {{#if property.select}} + + + {{!-- 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 --}} - - - - - - {{#each icons as |icon|}} - - {{!-- template-lint-disable no-inline-styles --}} - - - - {{/each}} - -
IconName
{{nucleus-icon name=icon}}{{icon}}
- +
+ {{#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;