From cd1ecdd2d016f7b96e96da58e4c404f9f026605f Mon Sep 17 00:00:00 2001 From: Prakash Chokalingam Date: Thu, 27 Feb 2020 12:42:11 +0530 Subject: [PATCH 01/11] playground component initial commit --- packages/@nucleus/app/styles/doc/_icon.scss | 21 ++++ .../@nucleus/app/styles/doc/_playgroud.scss | 45 +++++++ .../@nucleus/app/styles/nucleus-docs.scss | 2 + .../components/nucleus-button/playground.js | 117 ++++++++++++++++++ .../app/components/nucleus-icon/demo-1.js | 11 ++ .../app/components/nucleus-icon/playground.js | 70 +++++++++++ .../nucleus-inline-banner/playground.js | 64 ++++++++++ .../dummy/app/components/playground/blank.js | 5 + .../dummy/app/components/playground/code.js | 21 ++++ .../app/components/playground/container.js | 4 + .../dummy/app/components/playground/props.js | 16 +++ .../components/nucleus-button/playground.hbs | 25 ++++ .../components/nucleus-icon/demo-1.hbs | 27 ++-- .../components/nucleus-icon/playground.hbs | 15 +++ .../nucleus-inline-banner/playground.hbs | 19 +++ .../templates/components/playground/blank.hbs | 1 + .../templates/components/playground/code.hbs | 10 ++ .../components/playground/container.hbs | 16 +++ .../templates/components/playground/props.hbs | 41 ++++++ .../docs/components/nucleus-button.md | 85 +++---------- .../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 | 37 ++++++ .../button/addon/components/nucleus-button.js | 4 +- 25 files changed, 626 insertions(+), 96 deletions(-) create mode 100644 packages/@nucleus/app/styles/doc/_icon.scss create mode 100644 packages/@nucleus/app/styles/doc/_playgroud.scss 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/components/playground/blank.js create mode 100644 packages/@nucleus/tests/dummy/app/components/playground/code.js create mode 100644 packages/@nucleus/tests/dummy/app/components/playground/container.js create mode 100644 packages/@nucleus/tests/dummy/app/components/playground/props.js 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/templates/components/playground/blank.hbs create mode 100644 packages/@nucleus/tests/dummy/app/templates/components/playground/code.hbs create mode 100644 packages/@nucleus/tests/dummy/app/templates/components/playground/container.hbs create mode 100644 packages/@nucleus/tests/dummy/app/templates/components/playground/props.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/_playgroud.scss b/packages/@nucleus/app/styles/doc/_playgroud.scss new file mode 100644 index 00000000..00ad8a7c --- /dev/null +++ b/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; + } +} diff --git a/packages/@nucleus/app/styles/nucleus-docs.scss b/packages/@nucleus/app/styles/nucleus-docs.scss index f0557b40..7ee02be2 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/playgroud"; 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..e109bc47 --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js @@ -0,0 +1,117 @@ +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 props = get(this, 'properties').map((prop) => { + return { + name: prop.name, + value: prop.value, + } + }); + + set(this, 'code', generateCode('nucleus-button', props, true)); + } +} + +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..7de2c39a 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,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 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..a25bdf8f --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js @@ -0,0 +1,70 @@ +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('nucleus-icon', [...staticProps, ...props])); + } +} + +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..d581c147 --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js @@ -0,0 +1,64 @@ +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 props = get(this, 'properties').map((prop) => { + return { + name: prop.name, + value: prop.value, + } + }); + + set(this, 'code', generateCode('nucleus-icon', props, true)); + } +} + +export default Playground; + diff --git a/packages/@nucleus/tests/dummy/app/components/playground/blank.js b/packages/@nucleus/tests/dummy/app/components/playground/blank.js new file mode 100644 index 00000000..51176f3a --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/components/playground/blank.js @@ -0,0 +1,5 @@ +import Component from '@ember/component'; + +export default Component.extend({ + +}); \ No newline at end of file diff --git a/packages/@nucleus/tests/dummy/app/components/playground/code.js b/packages/@nucleus/tests/dummy/app/components/playground/code.js new file mode 100644 index 00000000..32b1413e --- /dev/null +++ b/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; \ No newline at end of file diff --git a/packages/@nucleus/tests/dummy/app/components/playground/container.js b/packages/@nucleus/tests/dummy/app/components/playground/container.js new file mode 100644 index 00000000..69c3e219 --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/components/playground/container.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/playground/props.js b/packages/@nucleus/tests/dummy/app/components/playground/props.js new file mode 100644 index 00000000..64e0595b --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/components/playground/props.js @@ -0,0 +1,16 @@ +import Component from '@ember/component'; +import { action } from '@ember/object'; + +class Props extends Component { + @action + handleChange(property, e) { + let value = e.target.value; + if (property.toggle) { + value = (value === 'false') ? true : false; + } + this.onchange(property.name, value, e); + } + +} + +export default Props; 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..cbfa7624 --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-button/playground.hbs @@ -0,0 +1,25 @@ +{{!-- Demo with variants --}} +{{#playground/container as |playground|}} + + {{!-- component --}} + {{#playground.component}} + {{nucleus-button + label=label.value + variant=type.value + size=size.value + block=block.value + disabled=disabled.value + icon=icon.value + iconSize=iconSize.value + iconOnly=iconOnly.value + }} + {{/playground.component}} + + {{!-- props --}} + {{#playground.props}} + {{playground/props onchange=(action 'onchange') properties=properties}} + {{/playground.props}} + + {{!-- code --}} + {{playground.codeblock code=code}} +{{/playground/container}} 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..e50fae4e --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/playground.hbs @@ -0,0 +1,15 @@ +{{!-- Demo with variants --}} +{{#playground/container as |playground|}} + {{!-- component --}} + {{#playground.component}} + {{nucleus-icon name="nucleus-circle-help" size=size.value variant=variant.value}} + {{/playground.component}} + + {{!-- props --}} + {{#playground.props}} + {{playground/props onchange=(action 'onchange') properties=properties}} + {{/playground.props}} + + {{!-- code --}} + {{playground.codeblock code=code}} +{{/playground/container}} 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..87c1d7c1 --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-inline-banner/playground.hbs @@ -0,0 +1,19 @@ +{{!-- Demo with variants --}} +{{#playground/container as |playground|}} + {{!-- component --}} + {{#playground.component}} + {{nucleus-inline-banner + type=type.value + title=title.value + isDismissible=isDismissible.value + }} + {{/playground.component}} + + {{!-- props --}} + {{#playground.props}} + {{playground/props onchange=(action 'onchange') properties=properties}} + {{/playground.props}} + + {{!-- code --}} + {{playground.codeblock code=code}} +{{/playground/container}} diff --git a/packages/@nucleus/tests/dummy/app/templates/components/playground/blank.hbs b/packages/@nucleus/tests/dummy/app/templates/components/playground/blank.hbs new file mode 100644 index 00000000..fb5c4b15 --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/templates/components/playground/blank.hbs @@ -0,0 +1 @@ +{{yield}} \ No newline at end of file diff --git a/packages/@nucleus/tests/dummy/app/templates/components/playground/code.hbs b/packages/@nucleus/tests/dummy/app/templates/components/playground/code.hbs new file mode 100644 index 00000000..2d5ad6de --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/templates/components/playground/code.hbs @@ -0,0 +1,10 @@ +
+  {{html-safe computedCode}}
+
+ +{{nucleus-button + label="copy" + variant="text" + class="playground-container--code-copy" + onClick=(action 'copyCode') +}} \ No newline at end of file diff --git a/packages/@nucleus/tests/dummy/app/templates/components/playground/container.hbs b/packages/@nucleus/tests/dummy/app/templates/components/playground/container.hbs new file mode 100644 index 00000000..f5209793 --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/templates/components/playground/container.hbs @@ -0,0 +1,16 @@ +{{#docs-demo as |demo|}} +
+
+ {{yield (hash component=(component "playground/blank"))}} +
+ +
+

Properties

+ {{yield (hash props=(component "playground/blank"))}} +
+
+ +
+ {{yield (hash codeblock=(component "playground/code"))}} +
+{{/docs-demo}} \ No newline at end of file diff --git a/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs b/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs new file mode 100644 index 00000000..e39db248 --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs @@ -0,0 +1,41 @@ +{{#each properties as |property|}} +
+ + + {{!-- select box --}} + {{#if property.select}} + + {{/if}} + + {{!-- input --}} + {{#if property.input}} + + {{/if}} + + {{!-- toggle --}} + {{#if property.toggle}} + + {{/if}} + +
+ +{{/each}} \ 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..b2b9d791 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,101 +4,56 @@ 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|}} - {{#demo.example name='nucleus-button-block-form.hbs'}} + {{#demo.example name='nucleus-button-block-forms.hbs'}} {{#nucleus-button variant="secondary" ariaLabel="concise label"}} Some yield content here {{/nucleus-button}} {{/demo.example}} - {{demo.snippet 'nucleus-button-block-form.hbs'}} + + {{demo.snippet 'nucleus-button-block-forms.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..a288471d --- /dev/null +++ b/packages/@nucleus/tests/dummy/app/utils/playground.js @@ -0,0 +1,37 @@ +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, attributes, block = false) => { + let code = `{{${component}` + + attributes.forEach((attr) => { + let ignoreProp = (attr.value === 'none' || !attr.value); + if (!ignoreProp) { + code = `${code}${block ? '\n ': ''} ${attr.name}="${attr.value}"`; + } + }); + + code = `${code} ${block ? '\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 b8a8d107..18843ace 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'; } /** From 39c6c4ebd2d61d7a2df1aff81c49da0d84c62452 Mon Sep 17 00:00:00 2001 From: Prakash Chokalingam Date: Thu, 27 Feb 2020 15:47:24 +0530 Subject: [PATCH 02/11] named params --- .../dummy/app/components/nucleus-button/playground.js | 8 ++++++-- .../tests/dummy/app/components/nucleus-icon/playground.js | 5 ++++- .../app/components/nucleus-inline-banner/playground.js | 8 ++++++-- packages/@nucleus/tests/dummy/app/utils/playground.js | 6 +++--- 4 files changed, 19 insertions(+), 8 deletions(-) diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js b/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js index e109bc47..162ce452 100644 --- a/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js @@ -103,14 +103,18 @@ class Playground extends Component { _generateCode() { - let props = get(this, 'properties').map((prop) => { + let attributes = get(this, 'properties').map((prop) => { return { name: prop.name, value: prop.value, } }); - set(this, 'code', generateCode('nucleus-button', props, true)); + set(this, 'code', generateCode({ + component:'nucleus-button', + attributes, + multiline: true + })); } } diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js index a25bdf8f..284c069c 100644 --- a/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js @@ -62,7 +62,10 @@ class Playground extends Component { } ]; - set(this, 'code', generateCode('nucleus-icon', [...staticProps, ...props])); + set(this, 'code', generateCode({ + component: 'nucleus-icon', + attributes: [...staticProps, ...props] + })); } } 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 index d581c147..28e25eff 100644 --- a/packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js @@ -49,14 +49,18 @@ class Playground extends Component { _generateCode() { - let props = get(this, 'properties').map((prop) => { + let attributes = get(this, 'properties').map((prop) => { return { name: prop.name, value: prop.value, } }); - set(this, 'code', generateCode('nucleus-icon', props, true)); + set(this, 'code', generateCode({ + component: 'nucleus-icon', + attributes, + multiline:true + })); } } diff --git a/packages/@nucleus/tests/dummy/app/utils/playground.js b/packages/@nucleus/tests/dummy/app/utils/playground.js index a288471d..45aff0d0 100644 --- a/packages/@nucleus/tests/dummy/app/utils/playground.js +++ b/packages/@nucleus/tests/dummy/app/utils/playground.js @@ -14,17 +14,17 @@ const handlePropertyChange = (properties, name, value) => { set(prop, 'value', value); } -const generateCode = (component, attributes, block = false) => { +const generateCode = ({ component, attributes, multiline = false }) => { let code = `{{${component}` attributes.forEach((attr) => { let ignoreProp = (attr.value === 'none' || !attr.value); if (!ignoreProp) { - code = `${code}${block ? '\n ': ''} ${attr.name}="${attr.value}"`; + code = `${code}${multiline ? '\n ': ''} ${attr.name}="${attr.value}"`; } }); - code = `${code} ${block ? '\n ': ''}}}` + code = `${code} ${multiline ? '\n ': ''}}}` return code; }; From 04486925699df9ec2f94c57e6c562e29b6e28b37 Mon Sep 17 00:00:00 2001 From: Prakash Chokalingam Date: Thu, 27 Feb 2020 17:00:45 +0530 Subject: [PATCH 03/11] Checkbox fix --- .../nucleus-inline-banner/playground.js | 2 +- .../dummy/app/components/playground/props.js | 5 +--- .../templates/components/playground/props.hbs | 27 ++++++++++--------- 3 files changed, 17 insertions(+), 17 deletions(-) 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 index 28e25eff..6276fe73 100644 --- a/packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js @@ -57,7 +57,7 @@ class Playground extends Component { }); set(this, 'code', generateCode({ - component: 'nucleus-icon', + component: 'nucleus-inline-banner', attributes, multiline:true })); diff --git a/packages/@nucleus/tests/dummy/app/components/playground/props.js b/packages/@nucleus/tests/dummy/app/components/playground/props.js index 64e0595b..234b3ed4 100644 --- a/packages/@nucleus/tests/dummy/app/components/playground/props.js +++ b/packages/@nucleus/tests/dummy/app/components/playground/props.js @@ -4,10 +4,7 @@ import { action } from '@ember/object'; class Props extends Component { @action handleChange(property, e) { - let value = e.target.value; - if (property.toggle) { - value = (value === 'false') ? true : false; - } + let value = (property.toggle) ? e.target.checked : e.target.value; this.onchange(property.name, value, e); } diff --git a/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs b/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs index e39db248..4576a141 100644 --- a/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs +++ b/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs @@ -11,29 +11,32 @@ name="{{property.name}}" id="{{property.name}}" value="{{property.value}}"> - {{#each property.types as |type|}} - - {{/each}} + {{#each property.types as |type|}} + + {{/each}} {{/if}} {{!-- input --}} {{#if property.input}} - + {{on "input" (fn this.handleChange property)}} + /> {{/if}} {{!-- toggle --}} - {{#if property.toggle}} - + {{#if property.toggle}} + {{/if}} From d4736253fdf829b411d89b18f04247a33d59943b Mon Sep 17 00:00:00 2001 From: Prakash Chokalingam Date: Thu, 27 Feb 2020 17:07:09 +0530 Subject: [PATCH 04/11] icon btn fix --- .../tests/dummy/app/templates/components/playground/props.hbs | 1 + packages/button/addon/components/nucleus-button.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs b/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs index 4576a141..de7c5364 100644 --- a/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs +++ b/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs @@ -21,6 +21,7 @@ {{#if property.input}} Date: Thu, 27 Feb 2020 17:22:39 +0530 Subject: [PATCH 05/11] revert naming --- .../dummy/app/templates/docs/components/nucleus-button.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 b2b9d791..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 @@ -24,13 +24,13 @@ Buttons are interactive components that the users can click or touch to trigger Button with yieldable content. {{#docs-demo as |demo|}} - {{#demo.example name='nucleus-button-block-forms.hbs'}} + {{#demo.example name='nucleus-button-block-form.hbs'}} {{#nucleus-button variant="secondary" ariaLabel="concise label"}} Some yield content here {{/nucleus-button}} {{/demo.example}} - {{demo.snippet 'nucleus-button-block-forms.hbs'}} + {{demo.snippet 'nucleus-button-block-form.hbs'}} {{/docs-demo}} #### 2. Asynchronous Button From 8be3c9e784f3dc864d65abf0faa7e47ce266e182 Mon Sep 17 00:00:00 2001 From: Prakash Chokalingam Date: Fri, 28 Feb 2020 17:32:25 +0530 Subject: [PATCH 06/11] review comments --- .../@nucleus/app/styles/doc/_playgroud.scss | 5 +++++ .../container.js => docs-playground.js} | 0 .../{playground => docs-playground}/code.js | 0 .../blank.js => docs-playground/component.js} | 1 - .../{playground => docs-playground}/props.js | 0 .../app/components/nucleus-icon/demo-1.js | 14 ++----------- .../app/components/nucleus-icon/playground.js | 19 +++++++++--------- .../tests/dummy/app/constants/icons.js | 10 ++++++++++ .../@nucleus/tests/dummy/app/helpers/eq.js | 7 +++++++ .../container.hbs => docs-playground.hbs} | 6 +++--- .../{playground => docs-playground}/code.hbs | 0 .../component.hbs} | 0 .../{playground => docs-playground}/props.hbs | 6 +++++- .../components/nucleus-button/playground.hbs | 15 ++++++-------- .../components/nucleus-icon/playground.hbs | 20 ++++++++++--------- .../nucleus-inline-banner/playground.hbs | 14 ++++++------- 16 files changed, 65 insertions(+), 52 deletions(-) rename packages/@nucleus/tests/dummy/app/components/{playground/container.js => docs-playground.js} (100%) rename packages/@nucleus/tests/dummy/app/components/{playground => docs-playground}/code.js (100%) rename packages/@nucleus/tests/dummy/app/components/{playground/blank.js => docs-playground/component.js} (98%) rename packages/@nucleus/tests/dummy/app/components/{playground => docs-playground}/props.js (100%) create mode 100644 packages/@nucleus/tests/dummy/app/constants/icons.js create mode 100644 packages/@nucleus/tests/dummy/app/helpers/eq.js rename packages/@nucleus/tests/dummy/app/templates/components/{playground/container.hbs => docs-playground.hbs} (58%) rename packages/@nucleus/tests/dummy/app/templates/components/{playground => docs-playground}/code.hbs (100%) rename packages/@nucleus/tests/dummy/app/templates/components/{playground/blank.hbs => docs-playground/component.hbs} (100%) rename packages/@nucleus/tests/dummy/app/templates/components/{playground => docs-playground}/props.hbs (86%) diff --git a/packages/@nucleus/app/styles/doc/_playgroud.scss b/packages/@nucleus/app/styles/doc/_playgroud.scss index 00ad8a7c..d48de3ab 100644 --- a/packages/@nucleus/app/styles/doc/_playgroud.scss +++ b/packages/@nucleus/app/styles/doc/_playgroud.scss @@ -28,6 +28,11 @@ $playground-border-color: #dae1e7; padding-bottom: 5px; font-weight: 700; } + + .ember-text-field { + border: 1px solid $playground-border-color; + padding: 5px; + } } } diff --git a/packages/@nucleus/tests/dummy/app/components/playground/container.js b/packages/@nucleus/tests/dummy/app/components/docs-playground.js similarity index 100% rename from packages/@nucleus/tests/dummy/app/components/playground/container.js rename to packages/@nucleus/tests/dummy/app/components/docs-playground.js diff --git a/packages/@nucleus/tests/dummy/app/components/playground/code.js b/packages/@nucleus/tests/dummy/app/components/docs-playground/code.js similarity index 100% rename from packages/@nucleus/tests/dummy/app/components/playground/code.js rename to packages/@nucleus/tests/dummy/app/components/docs-playground/code.js diff --git a/packages/@nucleus/tests/dummy/app/components/playground/blank.js b/packages/@nucleus/tests/dummy/app/components/docs-playground/component.js similarity index 98% rename from packages/@nucleus/tests/dummy/app/components/playground/blank.js rename to packages/@nucleus/tests/dummy/app/components/docs-playground/component.js index 51176f3a..69c3e219 100644 --- a/packages/@nucleus/tests/dummy/app/components/playground/blank.js +++ b/packages/@nucleus/tests/dummy/app/components/docs-playground/component.js @@ -1,5 +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/playground/props.js b/packages/@nucleus/tests/dummy/app/components/docs-playground/props.js similarity index 100% rename from packages/@nucleus/tests/dummy/app/components/playground/props.js rename to packages/@nucleus/tests/dummy/app/components/docs-playground/props.js 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 7de2c39a..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 @@ -2,17 +2,7 @@ import Component from '@ember/component'; import { inject } from '@ember/service'; import copyToClipboard from '../../utils/copy-to-clipboard'; - -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 icons from '../../constants/icons'; export default Component.extend({ flashMessages: inject(), @@ -21,7 +11,7 @@ export default Component.extend({ init() { this._super(...arguments); - this.set('icons', ICON_LIST) + this.set('icons', icons) }, actions: { diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js index 284c069c..42566376 100644 --- a/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js @@ -5,8 +5,16 @@ import { 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, @@ -48,23 +56,16 @@ class Playground extends Component { _generateCode() { - let props = get(this, 'properties').map((prop) => { + let attributes = 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] + attributes })); } } 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/playground/container.hbs b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs similarity index 58% rename from packages/@nucleus/tests/dummy/app/templates/components/playground/container.hbs rename to packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs index f5209793..2ee67a3a 100644 --- a/packages/@nucleus/tests/dummy/app/templates/components/playground/container.hbs +++ b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs @@ -1,16 +1,16 @@ {{#docs-demo as |demo|}}
- {{yield (hash component=(component "playground/blank"))}} + {{yield (hash component=(component "docs-playground/component"))}}

Properties

- {{yield (hash props=(component "playground/blank"))}} + {{yield (hash props=(component "docs-playground/props"))}}
- {{yield (hash codeblock=(component "playground/code"))}} + {{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/playground/code.hbs b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/code.hbs similarity index 100% rename from packages/@nucleus/tests/dummy/app/templates/components/playground/code.hbs rename to packages/@nucleus/tests/dummy/app/templates/components/docs-playground/code.hbs diff --git a/packages/@nucleus/tests/dummy/app/templates/components/playground/blank.hbs b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/component.hbs similarity index 100% rename from packages/@nucleus/tests/dummy/app/templates/components/playground/blank.hbs rename to packages/@nucleus/tests/dummy/app/templates/components/docs-playground/component.hbs diff --git a/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/props.hbs similarity index 86% rename from packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs rename to packages/@nucleus/tests/dummy/app/templates/components/docs-playground/props.hbs index de7c5364..7dfff43c 100644 --- a/packages/@nucleus/tests/dummy/app/templates/components/playground/props.hbs +++ b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/props.hbs @@ -12,7 +12,11 @@ id="{{property.name}}" value="{{property.value}}"> {{#each property.types as |type|}} - + {{/each}} {{/if}} 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 index cbfa7624..2643adf4 100644 --- a/packages/@nucleus/tests/dummy/app/templates/components/nucleus-button/playground.hbs +++ b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-button/playground.hbs @@ -1,8 +1,7 @@ {{!-- Demo with variants --}} -{{#playground/container as |playground|}} - +{{#docs-playground as |p|}} {{!-- component --}} - {{#playground.component}} + {{#p.component}} {{nucleus-button label=label.value variant=type.value @@ -13,13 +12,11 @@ iconSize=iconSize.value iconOnly=iconOnly.value }} - {{/playground.component}} + {{/p.component}} {{!-- props --}} - {{#playground.props}} - {{playground/props onchange=(action 'onchange') properties=properties}} - {{/playground.props}} + {{p.props onchange=(action 'onchange') properties=properties}} {{!-- code --}} - {{playground.codeblock code=code}} -{{/playground/container}} + {{p.codeblock code=code}} +{{/docs-playground}} \ 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 index e50fae4e..cfafe261 100644 --- a/packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/playground.hbs +++ b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-icon/playground.hbs @@ -1,15 +1,17 @@ {{!-- Demo with variants --}} -{{#playground/container as |playground|}} +{{#docs-playground as |p|}} {{!-- component --}} - {{#playground.component}} - {{nucleus-icon name="nucleus-circle-help" size=size.value variant=variant.value}} - {{/playground.component}} + {{#p.component}} + {{nucleus-icon + name=name.value + size=size.value + variant=variant.value + }} + {{/p.component}} {{!-- props --}} - {{#playground.props}} - {{playground/props onchange=(action 'onchange') properties=properties}} - {{/playground.props}} + {{p.props onchange=(action 'onchange') properties=properties}} {{!-- code --}} - {{playground.codeblock code=code}} -{{/playground/container}} + {{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 index 87c1d7c1..2de04384 100644 --- 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 @@ -1,19 +1,17 @@ {{!-- Demo with variants --}} -{{#playground/container as |playground|}} +{{#docs-playground as |p|}} {{!-- component --}} - {{#playground.component}} + {{#p.component}} {{nucleus-inline-banner type=type.value title=title.value isDismissible=isDismissible.value }} - {{/playground.component}} + {{/p.component}} {{!-- props --}} - {{#playground.props}} - {{playground/props onchange=(action 'onchange') properties=properties}} - {{/playground.props}} + {{p.props onchange=(action 'onchange') properties=properties}} {{!-- code --}} - {{playground.codeblock code=code}} -{{/playground/container}} + {{p.codeblock code=code}} +{{/docs-playground}} \ No newline at end of file From 39ccab89c958b2877de1f6efea49470c0c682bf8 Mon Sep 17 00:00:00 2001 From: Prakash Chokalingam Date: Sat, 29 Feb 2020 23:32:49 +0530 Subject: [PATCH 07/11] Rename to preview --- .../{component.js => preview.js} | 0 .../components/nucleus-button/playground.js | 26 ++++++++++++------- .../templates/components/docs-playground.hbs | 2 +- .../{component.hbs => preview.hbs} | 0 .../components/docs-playground/props.hbs | 6 ++--- .../components/nucleus-button/playground.hbs | 6 ++--- .../components/nucleus-icon/playground.hbs | 4 +-- .../nucleus-inline-banner/playground.hbs | 4 +-- 8 files changed, 26 insertions(+), 22 deletions(-) rename packages/@nucleus/tests/dummy/app/components/docs-playground/{component.js => preview.js} (100%) rename packages/@nucleus/tests/dummy/app/templates/components/docs-playground/{component.hbs => preview.hbs} (100%) diff --git a/packages/@nucleus/tests/dummy/app/components/docs-playground/component.js b/packages/@nucleus/tests/dummy/app/components/docs-playground/preview.js similarity index 100% rename from packages/@nucleus/tests/dummy/app/components/docs-playground/component.js rename to packages/@nucleus/tests/dummy/app/components/docs-playground/preview.js diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js b/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js index 162ce452..539013af 100644 --- a/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js @@ -85,18 +85,11 @@ class Playground extends Component { @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); + if (name === 'iconOnly' && !name.value) { + this._handleIconOnly(properties); } + handlePropertyChange(properties, name, value); this._generateCode(); } @@ -116,6 +109,19 @@ class Playground extends Component { multiline: true })); } + + _handleIconOnly(properties) { + 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); + } } export default Playground; diff --git a/packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs index 2ee67a3a..48a31b2e 100644 --- a/packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs +++ b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs @@ -1,7 +1,7 @@ {{#docs-demo as |demo|}}
- {{yield (hash component=(component "docs-playground/component"))}} + {{yield (hash preview=(component "docs-playground/preview"))}}
diff --git a/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/component.hbs b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/preview.hbs similarity index 100% rename from packages/@nucleus/tests/dummy/app/templates/components/docs-playground/component.hbs rename to packages/@nucleus/tests/dummy/app/templates/components/docs-playground/preview.hbs 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 index 7dfff43c..851cf3b7 100644 --- a/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/props.hbs +++ b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/props.hbs @@ -19,10 +19,9 @@ {{/each}} - {{/if}} {{!-- input --}} - {{#if property.input}} + {{else if property.input}} - {{/if}} {{!-- toggle --}} - {{#if property.toggle}} + {{else if property.toggle}} Date: Mon, 2 Mar 2020 12:24:57 +0530 Subject: [PATCH 08/11] Changes --- .../app/components/nucleus-button/playground.js | 16 +++++----------- .../app/components/nucleus-icon/playground.js | 9 +-------- .../nucleus-inline-banner/playground.js | 9 +-------- .../@nucleus/tests/dummy/app/utils/playground.js | 9 ++++++++- 4 files changed, 15 insertions(+), 28 deletions(-) diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js b/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js index 539013af..a92062b8 100644 --- a/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js @@ -6,6 +6,8 @@ import { generateCode } from '../../utils/playground'; +import icons from '../../constants/icons'; + const PROPERTIES = [ { name: 'label', @@ -13,7 +15,7 @@ const PROPERTIES = [ value: 'Click here', }, { - name: 'type', + name: 'variant', select: true, value: 'primary', types: [ @@ -50,8 +52,7 @@ const PROPERTIES = [ value: 'none', types: [ 'none', - 'nucleus-circle-check', - 'nucleus-cross' + ...icons ] }, { @@ -96,16 +97,9 @@ class Playground extends Component { _generateCode() { - let attributes = get(this, 'properties').map((prop) => { - return { - name: prop.name, - value: prop.value, - } - }); - set(this, 'code', generateCode({ component:'nucleus-button', - attributes, + properties: get(this, 'properties'), multiline: true })); } diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js index 42566376..a175ebeb 100644 --- a/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-icon/playground.js @@ -56,16 +56,9 @@ class Playground extends Component { _generateCode() { - let attributes = get(this, 'properties').map((prop) => { - return { - name: prop.name, - value: prop.value, - } - }); - set(this, 'code', generateCode({ component: 'nucleus-icon', - attributes + properties: get(this, 'properties') })); } } 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 index 6276fe73..2007c436 100644 --- a/packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js @@ -49,16 +49,9 @@ class Playground extends Component { _generateCode() { - let attributes = get(this, 'properties').map((prop) => { - return { - name: prop.name, - value: prop.value, - } - }); - set(this, 'code', generateCode({ component: 'nucleus-inline-banner', - attributes, + properties: get(this, 'properties'), multiline:true })); } diff --git a/packages/@nucleus/tests/dummy/app/utils/playground.js b/packages/@nucleus/tests/dummy/app/utils/playground.js index 45aff0d0..c52c4021 100644 --- a/packages/@nucleus/tests/dummy/app/utils/playground.js +++ b/packages/@nucleus/tests/dummy/app/utils/playground.js @@ -14,9 +14,16 @@ const handlePropertyChange = (properties, name, value) => { set(prop, 'value', value); } -const generateCode = ({ component, attributes, multiline = false }) => { +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) { From 2630a9b067424d5fabd617db7e24c1a2ea0827ff Mon Sep 17 00:00:00 2001 From: Shibu Lijack Date: Fri, 6 Mar 2020 11:32:03 +0530 Subject: [PATCH 09/11] fix: button variant prop --- .../tests/dummy/app/components/nucleus-button/playground.js | 2 +- .../app/templates/components/nucleus-button/playground.hbs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js b/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js index a92062b8..f0eafbed 100644 --- a/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-button/playground.js @@ -105,7 +105,7 @@ class Playground extends Component { } _handleIconOnly(properties) { - let changables = ['label', 'type', 'icon']; + let changables = ['label', 'variant', 'icon']; let [ label, type, 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 index a278bb2c..a87b4ffe 100644 --- a/packages/@nucleus/tests/dummy/app/templates/components/nucleus-button/playground.hbs +++ b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-button/playground.hbs @@ -4,7 +4,7 @@ {{#p.preview}} {{nucleus-button label=label.value - variant=type.value + variant=variant.value size=size.value block=block.value disabled=disabled.value From 025d6a0ceceb67cbbe10f6039c519e19b0de089c Mon Sep 17 00:00:00 2001 From: Shibu Lijack Date: Fri, 6 Mar 2020 11:54:16 +0530 Subject: [PATCH 10/11] fix: updated styling --- .../doc/{_playgroud.scss => _playground.scss} | 23 ++++++++++--------- .../@nucleus/app/styles/nucleus-docs.scss | 2 +- .../app/components/docs-playground/preview.js | 1 + .../templates/components/docs-playground.hbs | 2 +- .../components/docs-playground/code.hbs | 1 + 5 files changed, 16 insertions(+), 13 deletions(-) rename packages/@nucleus/app/styles/doc/{_playgroud.scss => _playground.scss} (70%) diff --git a/packages/@nucleus/app/styles/doc/_playgroud.scss b/packages/@nucleus/app/styles/doc/_playground.scss similarity index 70% rename from packages/@nucleus/app/styles/doc/_playgroud.scss rename to packages/@nucleus/app/styles/doc/_playground.scss index d48de3ab..464ba3f2 100644 --- a/packages/@nucleus/app/styles/doc/_playgroud.scss +++ b/packages/@nucleus/app/styles/doc/_playground.scss @@ -1,20 +1,21 @@ $playground-border-color: #dae1e7; +$padding: 8px; .playground-container { display: flex; border-bottom: 1px dotted $playground-border-color; - padding: 10px; justify-content: space-around; - &--component { + &--preview { + display: flex; align-self: center; - width: 50%; - text-align: center; - padding-right: 10px; + width: 75%; + justify-content: center; + padding: $padding; } &--props { - padding-left: 10px; + padding: $padding; border-left: 1px dotted $playground-border-color; max-height: 25vh; width: 50%; @@ -25,26 +26,26 @@ $playground-border-color: #dae1e7; &--label { display: block; - padding-bottom: 5px; + padding-bottom: $padding; font-weight: 700; } .ember-text-field { border: 1px solid $playground-border-color; - padding: 5px; + padding: $padding; } } } &--code { position: relative; - padding: 20px; + margin: 8px; + padding: $padding 0; } &--code-copy { position: absolute; right: 0; - bottom: -1px; - padding: 0; + bottom: 0; } } diff --git a/packages/@nucleus/app/styles/nucleus-docs.scss b/packages/@nucleus/app/styles/nucleus-docs.scss index 7ee02be2..4e54abb1 100644 --- a/packages/@nucleus/app/styles/nucleus-docs.scss +++ b/packages/@nucleus/app/styles/nucleus-docs.scss @@ -6,4 +6,4 @@ @import "./doc/custom-syntax-highlight"; @import "./doc/nucleus-mod"; @import "./doc/icon"; -@import "./doc/playgroud"; +@import "./doc/playground"; diff --git a/packages/@nucleus/tests/dummy/app/components/docs-playground/preview.js b/packages/@nucleus/tests/dummy/app/components/docs-playground/preview.js index 69c3e219..e329c90d 100644 --- a/packages/@nucleus/tests/dummy/app/components/docs-playground/preview.js +++ b/packages/@nucleus/tests/dummy/app/components/docs-playground/preview.js @@ -1,4 +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/templates/components/docs-playground.hbs b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs index 48a31b2e..6bf26114 100644 --- a/packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs +++ b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground.hbs @@ -1,6 +1,6 @@ {{#docs-demo as |demo|}}
-
+
{{yield (hash preview=(component "docs-playground/preview"))}}
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 index 2d5ad6de..2a369a75 100644 --- a/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/code.hbs +++ b/packages/@nucleus/tests/dummy/app/templates/components/docs-playground/code.hbs @@ -5,6 +5,7 @@ {{nucleus-button label="copy" variant="text" + size="small" class="playground-container--code-copy" onClick=(action 'copyCode') }} \ No newline at end of file From e25f3fac011047007b9b809e9ca49943a5ff2858 Mon Sep 17 00:00:00 2001 From: Shibu Lijack Date: Fri, 6 Mar 2020 12:11:58 +0530 Subject: [PATCH 11/11] fix: overflow issue --- packages/@nucleus/app/styles/doc/_playground.scss | 1 + .../dummy/app/components/nucleus-inline-banner/playground.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/@nucleus/app/styles/doc/_playground.scss b/packages/@nucleus/app/styles/doc/_playground.scss index 464ba3f2..38056dfb 100644 --- a/packages/@nucleus/app/styles/doc/_playground.scss +++ b/packages/@nucleus/app/styles/doc/_playground.scss @@ -41,6 +41,7 @@ $padding: 8px; position: relative; margin: 8px; padding: $padding 0; + overflow-x: hidden; } &--code-copy { 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 index 2007c436..43bfcf66 100644 --- a/packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js +++ b/packages/@nucleus/tests/dummy/app/components/nucleus-inline-banner/playground.js @@ -21,7 +21,7 @@ const PROPERTIES = [ { name: 'title', input: true, - value: 'This message has been identified as spam.', + value: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.', }, { name: 'isDismissible',