ember-freestyle 0.12.11 → 0.14.0

package/CHANGELOG.md

@@ -2,6 +2,59 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [0.14.0](https://github.com/chrislopresto/ember-freestyle/compare/v0.13.2...v0.14.0) (2022-03-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove `freestyle-showdown-content` component
+* update `ember-modifier` to v3
+* update to Ember v4.2
+
+* remove `freestyle-showdown-content` component ([5956a9e](https://github.com/chrislopresto/ember-freestyle/commit/5956a9ea183ddb7274a83478c7dbdcaab86a93d8))
+* update `ember-modifier` to v3 ([700eb07](https://github.com/chrislopresto/ember-freestyle/commit/700eb071847449f9843f7dc767b26cf843aa492d))
+* update to Ember v4.2 ([f6646a2](https://github.com/chrislopresto/ember-freestyle/commit/f6646a223880ce7882d1412aa38bc109b2f4f649))
+
+### [0.13.2](https://github.com/chrislopresto/ember-freestyle/compare/v0.13.1...v0.13.2) (2021-11-21)
+
+### [0.13.1](https://github.com/chrislopresto/ember-freestyle/compare/v0.13.0...v0.13.1) (2021-11-21)
+
+This release didn't make it to npm. 0.13.2 has the same stuff.
+
+### Features
+
+* remove dependency on `ember-cli-sass` and `sass` ([5482db1](https://github.com/chrislopresto/ember-freestyle/commit/5482db1b11332526e6916f2147e59216120b5fd2))
+
+
+### Bug Fixes
+
+* pass down [@hide](https://github.com/hide)Controls argument ([c8eac40](https://github.com/chrislopresto/ember-freestyle/commit/c8eac406cc1e59b99f659b68fed7af5b4722d5d4))
+
+## [0.13.0](https://github.com/chrislopresto/ember-freestyle/compare/v0.12.11...v0.13.0) (2021-10-29)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove the use of `ember-json-viewer`
+* drop support for Node v10
+
+### Features
+
+* deprecate `<FreestyleShowdownContent />` component ([78f2568](https://github.com/chrislopresto/ember-freestyle/commit/78f25681c40d33d56c1789601503f3d5ccca88da))
+
+
+### Bug Fixes
+
+* fix generated id for `freestyle-dynamic-input` component ([942c901](https://github.com/chrislopresto/ember-freestyle/commit/942c901293827e51f35a976623ccdeb0139181e9))
+* import computed.or directly ([ecb6811](https://github.com/chrislopresto/ember-freestyle/commit/ecb6811368e41c10466bf859e3bb9118f5683bfc))
+* import htmlSafe from @ember/template ([57ea33f](https://github.com/chrislopresto/ember-freestyle/commit/57ea33f6651342488e6cc6209a041dbc15ce977f))
+* make AST plugin functional ([87f521c](https://github.com/chrislopresto/ember-freestyle/commit/87f521ce1371a31f0f1fad9530a973f595819723))
+* resolve deprecations related to built-in component events ([a4d07c6](https://github.com/chrislopresto/ember-freestyle/commit/a4d07c6661299e9ab161a75a35a50ead5e755707))
+
+
+* drop support for Node v10 ([2add9c7](https://github.com/chrislopresto/ember-freestyle/commit/2add9c7152a5b58b9de45b4e188b836b656d5fb5))
+* remove the use of `ember-json-viewer` ([023f559](https://github.com/chrislopresto/ember-freestyle/commit/023f5591f5531d61188c20d4107447e26172d2b0))
+
 ### [0.12.11](https://github.com/chrislopresto/ember-freestyle/compare/v0.12.10...v0.12.11) (2021-03-23)
 
 

package/README.md

@@ -2,36 +2,34 @@
 
 [![Build Status](https://github.com/chrislopresto/ember-freestyle/workflows/CI/badge.svg?branch=master)](https://github.com/chrislopresto/ember-freestyle/actions)
 
-![npm version](https://img.shields.io/npm/v/ember-freestyle?logo=npm)
-![Download count all time](https://img.shields.io/npm/dt/ember-freestyle.svg)
+![NPM Version](https://img.shields.io/npm/v/ember-freestyle?logo=npm)
+![Download Count All Time](https://img.shields.io/npm/dt/ember-freestyle.svg)
 [![Ember Observer Score](http://emberobserver.com/badges/ember-freestyle.svg)](http://emberobserver.com/addons/ember-freestyle)
 [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-38-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-39-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-Ember Freestyle is an Ember addon that allows you to quickly create a component explorer for your Ember app.
+Ember Freestyle is an Ember addon that allows you to quickly create a component
+explorer for your Ember app.
 
 ## Documentation
 
-This README provides a lightweight overview of Ember Freestyle to get you going. More complete documentation can be found at https://chrislopresto.github.io/ember-freestyle
+This README provides a lightweight overview of Ember Freestyle to get you going.
+More complete documentation can be found at [https://chrislopresto.github.io/ember-freestyle](https://chrislopresto.github.io/ember-freestyle).
 
 ## Live Demo
 
-To see Ember Freestyle in action, visit [https://chrislopresto.github.io/ember-freestyle/#/acceptance](https://chrislopresto.github.io/ember-freestyle/#/acceptance)
+To see Ember Freestyle in action, visit [https://chrislopresto.github.io/ember-freestyle/#/acceptance](https://chrislopresto.github.io/ember-freestyle/#/acceptance).
 
-### Compatibility
+## Compatibility
 
 * Ember.js v3.16 or above
-* Ember CLI v2.13 or above
-* Node.js v10 or above
+* Ember CLI v3.16 or above
+* Node.js v12 or above
+* Ember Auto Import v2 or above
 
-### Support
-
-Ember Freestyle support is only provided for the 2 latest Ember versions
-
-Installation
-------------------------------------------------------------------------------
+## Installation
 
 This installation process is opinionated in order to get you going quickly.
 
@@ -43,63 +41,80 @@ This installation process is opinionated in order to get you going quickly.
     - Add a `freestyle` template in your app
     - Add a `freestyle` controller in your app
 
-    *Note:* Ember CLI versions < 0.2.3 should use `ember install:addon` instead of `ember install`
-
-1. Add `this.route('freestyle');` to your `router.js` file
-1. Navigate to `/freestyle`. You should now see something like:
+2. Add `this.route('freestyle');` to your `app/router.js` file
+3. Navigate to `/freestyle`. You should now see something like:
 
     ![](doc/freestyle-generated.png)
 
-All of the generated output is optional. If you don't want a `freestyle` route, for example, feel free to get rid of it in and add a `freestyle-guide` somewhere else in your app.
+All of the generated output is optional. If you don't want a `freestyle` route,
+for example, feel free to get rid of it and add a `freestyle-guide` somewhere
+else in your app.
 
-You can use the `freestyle-guide` component anywhere you'd like in your app. You can organize your components into multiple Freestyle guides if you want to. You can even use the constituent components like `freestyle-usage` on their own.
+You can use the `freestyle-guide` component anywhere you'd like in your app.
+You can organize your components into multiple Freestyle guides if you want to.
+You can even use the constituent components like `freestyle-usage` on their own.
 
 ## Problems? No problem.
 
-Hopefully the installation instructions got you off to a smooth, seamless start. If you have any problems, feel free to chat with us in the [Ember Community Discord](https://discordapp.com/invite/zT3asNS) or [open an issue](https://github.com/chrislopresto/ember-freestyle/issues/new). As always, PRs are welcome!
+Hopefully the installation instructions got you off to a smooth, seamless start.
+If you have any problems, feel free to chat with us in the [Ember Community Discord](https://discord.gg/emberjs) or [open an issue](https://github.com/chrislopresto/ember-freestyle/issues/new). As always, PRs are welcome!
 
-## Removing Ember Freestyle from Your Production Payload
+## Excluding Ember Freestyle's Styles
 
-We recommend blacklisting Ember Freestyle for production builds using Ember CLI's [addon blacklist feature](https://ember-cli.com/user-guide/#whitelisting-and-blacklisting-assets).
+If you want to exclude Ember Freestyle's styles, you can set the `includeStyles`
+option to `false` in your `ember-cli-build.js` file:
 
-```javascript
-var environment = process.env.EMBER_ENV;
-var pluginsToBlacklist = environment === 'production' ? ['ember-freestyle'] : [];
+```js
+// ember-cli-build.js
 
-module.exports = function(defaults) {
-  var app = new EmberApp(defaults, {
-    addons: {
-      blacklist: pluginsToBlacklist
-    }
+module.exports = function (defaults) {
+  const app = new EmberApp(defaults, {
+    'ember-freestyle': {
+      includeStyles: false,
+    },
   };
-}
+};
 ```
 
-## Using Ember Freestyle Within an Addon
+This might be useful in case you want to define your own styles _or_ if you are
+using `ember-cli-sass` and want to import Ember Freestyle's styles explicitly:
 
-### Dependency Configuration
+```scss
+$FreestyleGuide-color--primary: #C70039;
+$FreestyleGuide-color--accent: #DAF7A6;
 
-You should include Ember Freestyle as a devDependency so that apps using your addon will not include
-Ember Freestyle CSS and JavaScript in their production payloads.
+@import 'ember-freestyle';
+```
 
-## Running
+## Excluding Ember Freestyle from Your Production Build
 
-* `npm run lint:js`
-* `npm run lint:js -- --fix`
+We recommend excluding Ember Freestyle from production builds using Ember CLI's
+`addons.blacklist` option.
 
-### Running tests
+```js
+// ember-cli-build.js
 
-* `ember test` – Runs the test suite on the current Ember version
-* `ember test --server` – Runs the test suite in "watch mode"
-* `ember try:each` – Runs the test suite against multiple Ember versions
+const environment = process.env.EMBER_ENV;
+const addonsToExclude = environment === 'production' ? ['ember-freestyle'] : [];
 
-### Running the dummy application
+module.exports = function (defaults) {
+  const app = new EmberAddon(defaults, {
+    addons: {
+      blacklist: addonsToExclude,
+    },
+  };
+};
+```
+
+## Using Ember Freestyle Within an Addon
 
-* `ember serve`
-* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
+You should include `ember-freestyle` in your `devDependencies` so that apps
+using your addon will not include Ember Freestyle CSS and JavaScript in their
+production builds.
 
-For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
+## Contributing
 
+See the [Contributing](CONTRIBUTING.md) guide for details.
 
 ## Contributors ✨
 
@@ -158,6 +173,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://github.com/lucasmerat"><img src="https://avatars.githubusercontent.com/u/32575355?v=4?s=100" width="100px;" alt=""/><br /><sub><b>lucasmerat</b></sub></a><br /><a href="https://github.com/chrislopresto/ember-freestyle/commits?author=lucasmerat" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/skwongr"><img src="https://avatars.githubusercontent.com/u/19978361?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Kit</b></sub></a><br /><a href="https://github.com/chrislopresto/ember-freestyle/commits?author=skwongr" title="Code">💻</a></td>
     <td align="center"><a href="https://lolma.us/"><img src="https://avatars.githubusercontent.com/u/200884?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Andrey Mikhaylov (lolmaus)</b></sub></a><br /><a href="https://github.com/chrislopresto/ember-freestyle/issues?q=author%3Alolmaus" title="Bug reports">🐛</a> <a href="https://github.com/chrislopresto/ember-freestyle/commits?author=lolmaus" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/bertdeblock"><img src="https://avatars.githubusercontent.com/u/7403183?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Bert De Block</b></sub></a><br /><a href="https://github.com/chrislopresto/ember-freestyle/commits?author=bertdeblock" title="Code">💻</a> <a href="#ideas-bertdeblock" title="Ideas, Planning, & Feedback">🤔</a></td>
   </tr>
 </table>
 
@@ -166,4 +182,8 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!
+
+## License
+
+This project is licensed under the [MIT License](LICENSE.md).

package/addon/components/freestyle/usage/argument/index.hbs

@@ -15,7 +15,7 @@
     {{#if @required}}
       <span class="FreestyleUsageArgument-required">Required</span>
     {{/if}}
-    {{#if (is-present @defaultValue)}}
+    {{#if this.shouldRenderDefaultValue}}
       <span class="FreestyleUsageArgument-default u-codePill">
         {{@defaultValue}}
       </span>

package/addon/components/freestyle/usage/argument/index.js

@@ -1,6 +1,11 @@
+import { isPresent } from '@ember/utils';
 import Component from '@glimmer/component';
 
 export default class FreestyleUsageArgumentComponent extends Component {
+  get shouldRenderDefaultValue() {
+    return isPresent(this.args.defaultValue);
+  }
+
   get typeLabel() {
     return this.args.typeLabel || this.args.type;
   }

package/addon/components/freestyle/usage/array/index.hbs

@@ -5,6 +5,7 @@
   @description={{@description}}
   @required={{@required}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   {{#each @items key=@identity as |item index|}}
     <div class="FreestyleUsageArray-item">

package/addon/components/freestyle/usage/bool/{control.hbs → control/index.hbs}

@@ -4,6 +4,6 @@
   <input
     type="checkbox"
     checked={{@value}}
-    {{on 'input' (pick 'target.checked' @onInput)}}
+    {{on 'input' this.callOnInput}}
   />
 </label>

package/addon/components/freestyle/usage/bool/control/index.js

@@ -0,0 +1,9 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+export default class FreestyleUsageBoolControlComponent extends Component {
+  @action
+  callOnInput(event) {
+    this.args.onInput(event.target.checked);
+  }
+}

package/addon/components/freestyle/usage/bool/index.hbs

@@ -4,6 +4,7 @@
   @description={{@description}}
   @required={{@required}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   <Freestyle::Usage::Bool::Control
     @value={{@value}}

package/addon/components/freestyle/usage/number/{control.hbs → control/index.hbs}

@@ -1,5 +1,6 @@
+{{! template-lint-disable require-input-label }}
 
-{{#if (is-present @min @max)}}
+{{#if this.shouldRenderRangeInput}}
   <input
     type="range"
     value={{@value}}

package/addon/components/freestyle/usage/number/{control.js → control/index.js}

@@ -1,7 +1,12 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { isPresent } from '@ember/utils';
 
 export default class FreestyleUsageNumberComponent extends Component {
+  get shouldRenderRangeInput() {
+    return isPresent(this.args.min) && isPresent(this.args.max);
+  }
+
   @action onInput(event) {
     let { value } = event.target;
     this.args.onInput(value ? parseFloat(value) : null);

package/addon/components/freestyle/usage/number/index.hbs

@@ -4,6 +4,7 @@
   @description={{@description}}
   @required={{@required}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   <Freestyle::Usage::Number::Control
     @value={{@value}}

package/addon/components/freestyle/usage/object/control/index.hbs

@@ -0,0 +1,5 @@
+{{#if @value}}
+  <div class="FreestyleUsageArgument-jsonViewer">
+    {{this.jsonTree}}
+  </div>
+{{/if}}

package/addon/components/freestyle/usage/object/control/index.js

@@ -0,0 +1,18 @@
+import Component from '@glimmer/component';
+import JsonFormatter from 'json-formatter-js';
+
+const OPTIONS = {
+  animateClose: false,
+  animateOpen: false,
+  theme: 'dark',
+};
+
+export default class FreestyleUsageObjectControlComponent extends Component {
+  get jsonTree() {
+    const json = this.args.value;
+    const openDepth = this.args.jsonCollapseDepth;
+    const jsonFormatter = new JsonFormatter(json, openDepth, OPTIONS);
+
+    return jsonFormatter.render();
+  }
+}

package/addon/components/freestyle/usage/object/index.hbs

@@ -4,6 +4,7 @@
   @description={{@description}}
   @required={{@required}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   <Freestyle::Usage::Object::Control
     @value={{@value}}

package/addon/components/freestyle/usage/string/{control.hbs → control/index.hbs}

@@ -1,5 +1,7 @@
+{{! template-lint-disable require-input-label }}
+
 {{#if @options}}
-  <select {{on 'change' (pick 'target.value' @onInput)}}>
+  <select {{on 'change' this.callOnInput}}>
     {{#each @options as |optionValue|}}
       <option value={{optionValue}} selected={{eq optionValue @value}}>{{optionValue}}</option>
     {{/each}}
@@ -8,6 +10,6 @@
   <input
     type="text"
     value={{@value}}
-    {{on this.inputEvent (pick 'target.value' @onInput)}}
+    {{on this.inputEvent this.callOnInput}}
   />
 {{/if}}

package/addon/components/freestyle/usage/string/{control.js → control/index.js}

@@ -1,7 +1,13 @@
+import { action } from '@ember/object';
 import Component from '@glimmer/component';
 
 export default class FreestyleUsageStringControlComponent extends Component {
   get inputEvent() {
     return this.args.inputEvent || 'input';
   }
+
+  @action
+  callOnInput(event) {
+    this.args.onInput(event.target.value);
+  }
 }

package/addon/components/freestyle/usage/string/index.hbs

@@ -5,6 +5,7 @@
   @required={{@required}}
   @array={{@array}}
   @defaultValue={{@defaultValue}}
+  @hideControls={{@hideControls}}
 >
   <Freestyle::Usage::String::Control
     @options={{@options}}

package/addon/components/freestyle-collection/index.js

@@ -3,8 +3,7 @@ import { and, not } from '@ember/object/computed';
 import { A } from '@ember/array';
 import { next } from '@ember/runloop';
 import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { action } from '@ember/object';
+import { action, computed } from '@ember/object';
 
 export default Component.extend({
   tagName: '',

package/addon/components/freestyle-dynamic/index.js

@@ -1,8 +1,7 @@
 import { assign } from '@ember/polyfills';
 import Component from '@ember/component';
-import { set, get, computed } from '@ember/object';
+import { action, set, get, computed } from '@ember/object';
 import { assert } from '@ember/debug';
-import { action } from '@ember/object';
 
 export default Component.extend({
   tagName: '',

package/addon/components/freestyle-dynamic-input/index.hbs

@@ -3,22 +3,50 @@
     {{@propertyName}}:
   </label>
   {{#if this.isCheckbox}}
-    <Input @type="checkbox" @checked={{readonly @value}} @id={{this.inputId}} @change={{this.toggleCheckbox}} />
+    <input
+      checked={{@value}}
+      id={{this.inputId}}
+      type="checkbox"
+      {{on "input" this.toggleCheckbox}}
+    >
   {{else if this.isTextarea}}
-    <Textarea @value={{@value}} @id={{this.inputId}} @rows={{5}} @cols={{40}} @key-up={{this.sendChangedText}} />
+    <textarea
+      cols="40"
+      id={{this.inputId}}
+      rows="5"
+      value={{@value}}
+      {{on "input" this.sendChangedText}}
+    />
   {{else if this.isSelect}}
-    <select {{on 'change' this.onChange}}>
+    <select id={{this.inputId}} {{on "change" this.onChange}}>
       {{#each @options as |option|}}
         <FreestyleDynamicInputSelectOption @selectedValue={{@value}} @optionValue={{option}} />
       {{/each}}
     </select>
   {{else if this.isNumber}}
-    <Input @type="number" @value={{@value}} @id={{this.inputId}} @input={{this.onChangeWithNumericCoercion}} />
+    <input
+      id={{this.inputId}}
+      type="number"
+      value={{@value}}
+      {{on "input" this.onChangeWithNumericCoercion}}
+    >
   {{else if this.isRange}}
-    <Input @type="range" @id={{this.inputId}} @min={{@min}} @max={{@max}} @input={{this.onChangeWithNumericCoercion}} @value={{readonly @value}} />
+    <input
+      id={{this.inputId}}
+      max={{@max}}
+      min={{@min}}
+      type="range"
+      value={{@value}}
+      {{on "input" this.onChangeWithNumericCoercion}}
+    >
     {{@value}}
   {{else}}
-    <Input @value={{@value}} @id={{this.inputId}} @key-up={{this.onChange}} />
+    <input
+      id={{this.inputId}}
+      type="text"
+      value={{@value}}
+      {{on "input" this.onChange}}
+    >
   {{/if}}
   {{#if @description}}
     <small class="FreestyleDynamic-inputDescription">

package/addon/components/freestyle-dynamic-input/index.js

@@ -1,7 +1,7 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
 import { equal } from '@ember/object/computed';
-import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
 
 export default Component.extend({
   tagName: '',
@@ -12,8 +12,8 @@ export default Component.extend({
   isNumber: equal('inputType', 'number'),
   isRange: equal('inputType', 'range'),
 
-  inputId: computed('elementId', 'propertyName', function () {
-    return `${this.elementId}_${this.propertyName}`;
+  inputId: computed('propertyName', function () {
+    return `${guidFor(this)}_${this.propertyName}`;
   }),
 
   @action
@@ -27,8 +27,8 @@ export default Component.extend({
     this.changeValueTo(ev.target.value);
   },
   @action
-  sendChangedText(text) {
-    this.changeValueTo(text);
+  sendChangedText(ev) {
+    this.changeValueTo(ev.target.value);
   },
   @action
   onChangeWithNumericCoercion(ev) {

package/addon/components/freestyle-focus-button/index.hbs

@@ -1,3 +1,4 @@
+{{!-- template-lint-disable require-presentational-children --}}
 <span role="button" ...attributes>
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14" viewBox="0 0 24 24" data-code="58332" data-tags="filter_center_focus"><g transform="scale(0.0234375 0.0234375)"><path d="M512 384q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM810 810v-170h86v170q0 34-26 60t-60 26h-170v-86h170zM810 128q34 0 60 26t26 60v170h-86v-170h-170v-86h170zM214 214v170h-86v-170q0-34 26-60t60-26h170v86h-170zM214 640v170h170v86h-170q-34 0-60-26t-26-60v-170h86z" /></g></svg>
 </span>

package/addon/components/freestyle-guide/index.hbs

@@ -7,7 +7,7 @@
       href="#"
       {{on 'click' this.toggleNav}}
     >
-      <svg height="20px" class="FreestyleGuide-ctaIcon" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="20px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>
+      <svg height="20px" class="FreestyleGuide-ctaIcon" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="20px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
     </a>
     <div class="FreestyleGuide-titleContainer">
       <div class="FreestyleGuide-title">{{@title}}</div>
@@ -19,7 +19,7 @@
       title="Show Aside"
       {{on 'click' this.toggleAside}}
     >
-      <svg xmlns="http://www.w3.org/2000/svg" class="FreestyleGuide-ctaIcon" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 340.274 340.274" style="enable-background:new 0 0 340.274 340.274;" xml:space="preserve"><path d="M293.629,127.806l-5.795-13.739c19.846-44.856,18.53-46.189,14.676-50.08l-25.353-24.77l-2.516-2.12h-2.937     c-1.549,0-6.173,0-44.712,17.48l-14.184-5.719c-18.332-45.444-20.212-45.444-25.58-45.444h-35.765     c-5.362,0-7.446-0.006-24.448,45.606l-14.123,5.734C86.848,43.757,71.574,38.19,67.452,38.19l-3.381,0.105L36.801,65.032     c-4.138,3.891-5.582,5.263,15.402,49.425l-5.774,13.691C0,146.097,0,147.838,0,153.33v35.068c0,5.501,0,7.44,46.585,24.127     l5.773,13.667c-19.843,44.832-18.51,46.178-14.655,50.032l25.353,24.8l2.522,2.168h2.951c1.525,0,6.092,0,44.685-17.516     l14.159,5.758c18.335,45.438,20.218,45.427,25.598,45.427h35.771c5.47,0,7.41,0,24.463-45.589l14.195-5.74     c26.014,11,41.253,16.585,45.349,16.585l3.404-0.096l27.479-26.901c3.909-3.945,5.278-5.309-15.589-49.288l5.734-13.702     c46.496-17.967,46.496-19.853,46.496-25.221v-35.029C340.268,146.361,340.268,144.434,293.629,127.806z M170.128,228.474     c-32.798,0-59.504-26.187-59.504-58.364c0-32.153,26.707-58.315,59.504-58.315c32.78,0,59.43,26.168,59.43,58.315     C229.552,202.287,202.902,228.474,170.128,228.474z"/></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" class="FreestyleGuide-ctaIcon" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="14px" height="14px" viewBox="0 0 340.274 340.274" style="enable-background:new 0 0 340.274 340.274;" xml:space="preserve"><path d="M293.629,127.806l-5.795-13.739c19.846-44.856,18.53-46.189,14.676-50.08l-25.353-24.77l-2.516-2.12h-2.937 c-1.549,0-6.173,0-44.712,17.48l-14.184-5.719c-18.332-45.444-20.212-45.444-25.58-45.444h-35.765 c-5.362,0-7.446-0.006-24.448,45.606l-14.123,5.734C86.848,43.757,71.574,38.19,67.452,38.19l-3.381,0.105L36.801,65.032 c-4.138,3.891-5.582,5.263,15.402,49.425l-5.774,13.691C0,146.097,0,147.838,0,153.33v35.068c0,5.501,0,7.44,46.585,24.127 l5.773,13.667c-19.843,44.832-18.51,46.178-14.655,50.032l25.353,24.8l2.522,2.168h2.951c1.525,0,6.092,0,44.685-17.516 l14.159,5.758c18.335,45.438,20.218,45.427,25.598,45.427h35.771c5.47,0,7.41,0,24.463-45.589l14.195-5.74 c26.014,11,41.253,16.585,45.349,16.585l3.404-0.096l27.479-26.901c3.909-3.945,5.278-5.309-15.589-49.288l5.734-13.702 c46.496-17.967,46.496-19.853,46.496-25.221v-35.029C340.268,146.361,340.268,144.434,293.629,127.806z M170.128,228.474 c-32.798,0-59.504-26.187-59.504-58.364c0-32.153,26.707-58.315,59.504-58.315c32.78,0,59.43,26.168,59.43,58.315 C229.552,202.287,202.902,228.474,170.128,228.474z"/></svg>
     </a>
   </header>
   <main class="FreestyleGuide-body">

package/addon/components/freestyle-palette-item/index.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { htmlSafe } from '@ember/string';
+import { htmlSafe } from '@ember/template';
 import { computed } from '@ember/object';
 
 export default Component.extend({

package/addon/components/freestyle-section/index.js

@@ -1,5 +1,3 @@
-/* eslint-disable ember/no-component-lifecycle-hooks */
-
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 

package/addon/components/freestyle-source/index.js

@@ -1,9 +1,8 @@
 /* eslint-disable ember/no-component-lifecycle-hooks */
 /* eslint-disable ember/require-tagless-components */
-import { set } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
-import { computed, get } from '@ember/object';
+import { computed, get, set } from '@ember/object';
 
 export default Component.extend({
   initialHighlightComplete: false,

package/addon/components/freestyle-subsection/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable ember/no-component-lifecycle-hooks */
 import { inject as service } from '@ember/service';
 import Component from '@glimmer/component';
 

package/addon/components/freestyle-typeface/index.hbs

@@ -1,3 +1,4 @@
+{{!-- template-lint-disable no-whitespace-within-word --}}
 <div class="FreestyleTypeface" style={{this.fontFamilyStyle}}>
   <div class="FreestyleTypeface-previewHero">Aa</div>
   <div class="FreestyleTypeface-previewSampleContainer">

package/addon/components/freestyle-typeface/index.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { htmlSafe } from '@ember/string';
+import { htmlSafe } from '@ember/template';
 import { computed } from '@ember/object';
 
 export default Component.extend({

package/addon/components/freestyle-usage/index.js

@@ -1,9 +1,8 @@
 /* eslint-disable ember/no-component-lifecycle-hooks */
 import { inject as service } from '@ember/service';
-import { and, readOnly } from '@ember/object/computed';
+import { and, or, readOnly } from '@ember/object/computed';
 import Component from '@ember/component';
-import { computed } from '@ember/object';
-import { action } from '@ember/object';
+import { action, computed } from '@ember/object';
 
 let FreestyleUsage = Component.extend({
   tagName: '',
@@ -22,7 +21,7 @@ let FreestyleUsage = Component.extend({
   }),
   defaultTheme: readOnly('emberFreestyle.defaultTheme'),
   // highlightJsTheme - passed in
-  computedTheme: computed.or('defaultTheme', 'highlightJsTheme'),
+  computedTheme: or('defaultTheme', 'highlightJsTheme'),
 
   hasLabels: and('showLabels', 'title'),
   hasCode: computed('showCode', 'slug', 'source', function () {