ember-freestyle 0.12.8 → 0.13.0

package/CHANGELOG.md

@@ -2,6 +2,53 @@
 
 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.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)
+
+
+### Bug Fixes
+
+* Move glimmer/tracker to the deps list since ([3a39dc6](https://github.com/chrislopresto/ember-freestyle/commit/3a39dc6daa2d6a69f6b1e090c19e216edf3fef8d))
+* rendering a color palette ([336af81](https://github.com/chrislopresto/ember-freestyle/commit/336af817a43553a3662ebb0cc4b0d174fcf0b23b))
+
+### [0.12.10](https://github.com/chrislopresto/ember-freestyle/compare/v0.12.9...v0.12.10) (2021-03-17)
+
+
+### Bug Fixes
+
+* blueprint subsection invocation ([#515](https://github.com/chrislopresto/ember-freestyle/issues/515)) ([ad7f63a](https://github.com/chrislopresto/ember-freestyle/commit/ad7f63abf60f2b7013b91881ea2aa0484835226b))
+
+### [0.12.9](https://github.com/chrislopresto/ember-freestyle/compare/v0.12.8...v0.12.9) (2021-03-12)
+
+
+### Bug Fixes
+
+* @ember/render-modifiers must be a normal dependency ([4bacc17](https://github.com/chrislopresto/ember-freestyle/commit/4bacc1755df39f0e75a1741ae7401150030e63b0))
+
 ### [0.12.8](https://github.com/chrislopresto/ember-freestyle/compare/v0.12.7...v0.12.8) (2021-03-03)
 
 

package/README.md

@@ -2,36 +2,33 @@
 
 [![Build Status](https://github.com/chrislopresto/ember-freestyle/workflows/CI/badge.svg?branch=master)](https://github.com/chrislopresto/ember-freestyle/actions)
 
-[![npm version](https://badge.fury.io/js/ember-freestyle.svg)](https://badge.fury.io/js/ember-freestyle)
-![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-34-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
 
-### 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 +40,51 @@ 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
+## Removing Ember Freestyle from Your Production Build
 
-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).
+We recommend excluding Ember Freestyle from production builds using Ember CLI's
+`addons.blacklist` option.
 
-```javascript
-var environment = process.env.EMBER_ENV;
-var pluginsToBlacklist = environment === 'production' ? ['ember-freestyle'] : [];
+```js
+const environment = process.env.EMBER_ENV;
+const addonsToExclude = environment === 'production' ? ['ember-freestyle'] : [];
 
-module.exports = function(defaults) {
-  var app = new EmberApp(defaults, {
+module.exports = function (defaults) {
+  const app = new EmberAddon(defaults, {
     addons: {
-      blacklist: pluginsToBlacklist
-    }
+      blacklist: addonsToExclude,
+    },
   };
-}
+};
 ```
 
 ## Using Ember Freestyle Within an Addon
 
-### Dependency Configuration
-
-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.
-
-## Running
-
-* `npm run lint:js`
-* `npm run lint:js -- --fix`
-
-### Running tests
+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.
 
-* `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
-
-### Running the dummy application
-
-* `ember serve`
-* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
-
-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 ✨
 
@@ -152,6 +137,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://twitter.com/fivetanley"><img src="https://avatars0.githubusercontent.com/u/1275021?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Stanley Stuart</b></sub></a><br /><a href="https://github.com/chrislopresto/ember-freestyle/commits?author=fivetanley" title="Code">💻</a></td>
     <td align="center"><a href="https://mcmanus.io"><img src="https://avatars2.githubusercontent.com/u/9383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Matt McManus</b></sub></a><br /><a href="https://github.com/chrislopresto/ember-freestyle/commits?author=mattmcmanus" title="Code">💻</a></td>
     <td align="center"><a href="http://suzidao.com"><img src="https://avatars0.githubusercontent.com/u/6305709?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Suzi Dao</b></sub></a><br /><a href="https://github.com/chrislopresto/ember-freestyle/commits?author=suzidao" title="Code">💻</a> <a href="https://github.com/chrislopresto/ember-freestyle/commits?author=suzidao" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/raytiley"><img src="https://avatars.githubusercontent.com/u/41680?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ray Tiley</b></sub></a><br /><a href="https://github.com/chrislopresto/ember-freestyle/commits?author=raytiley" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <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>
 
@@ -160,4 +152,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/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/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/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/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-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-palette/index.hbs

@@ -1,7 +1,7 @@
 <div class='FreestylePalette'>
-  <div class='FreestylePalette-title'>{{@title}}</div>
-  <div class='FreestylePalette-description'>{{@description}}</div>
-  {{#each @colors as |color|}}
+  <div class='FreestylePalette-title'>{{this.title}}</div>
+  <div class='FreestylePalette-description'>{{this.description}}</div>
+  {{#each this.colors as |color|}}
     <FreestylePaletteItem @color={{color}} />
   {{/each}}
   {{yield}}

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

@@ -5,6 +5,7 @@ import { computed } from '@ember/object';
 export default Component.extend({
   tagName: '',
   title: 'Freestyle Palette',
+  description: 'Represents all colors used in this project.',
 
   colors: computed('colorPalette', function () {
     return A(

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-showdown-content/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable ember/no-component-lifecycle-hooks */
 /* eslint-disable ember/require-tagless-components */
+import { deprecate } from '@ember/debug';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 
@@ -8,7 +9,20 @@ export default Component.extend({
 
   didInsertElement() {
     this._super(...arguments);
+
+    deprecate(
+      'The `<FreestyleShowdownContent />` component is deprecated. Please use `ember-cli-showdown` directly if you need Markdown support.',
+      false,
+      {
+        for: 'ember-freestyle',
+        id: 'freestyle-showdown-content-component',
+        since: '0.13.0',
+        until: '0.14.0',
+      }
+    );
+
     let pre = this.element.getElementsByTagName('pre');
+
     if (pre[0]) {
       this.emberFreestyle.highlight(pre[0]);
     }

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.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 () {

package/addon/components/freestyle-usage-controls/index.hbs

@@ -39,8 +39,8 @@
   {{#if this.showFocus}}
     <div class="FreestyleUsageControls-item FreestyleUsageControls-item--focus">
       <div class="FreestyleUsageControls-itemControl">
-        <label for="focus" class="FreestyleUsageControls-label--focus">Focus a section
-          <Input class="FreestyleUsageControls-input--focus" @value={{this.focus}} @name="focus" @enter={{this.setFocus}} />
+        <label class="FreestyleUsageControls-label--focus">Focus a section
+          <Input class="FreestyleUsageControls-input--focus" @value={{this.focus}} @enter={{this.setFocus}} />
         </label>
         <button class="FreestyleUsageControls-button" onclick={{this.setFocus}} type="button">Focus</button>
       </div>

package/addon/components/freestyle-variant-list/index.hbs

@@ -1,7 +1,7 @@
 <ul class='FreestyleCollection-variantList'>
   {{#each @variants as |variantKey|}}
     <li
-      class='FreestyleCollection-variantListItem {{if (variant-eq @activeKey variantKey) 'FreestyleCollection-variantListItem--active'}}'
+      class='FreestyleCollection-variantListItem {{if (eq @activeKey variantKey) 'FreestyleCollection-variantListItem--active'}}'
       role="button"
       onclick={{fn this.onClickItem variantKey}}
     >

package/addon/services/ember-freestyle.js

@@ -1,11 +1,11 @@
 /* global hljs */
 import Service from '@ember/service';
-import { isPresent } from '@ember/utils';
+import { isBlank, isPresent } from '@ember/utils';
 import { A } from '@ember/array';
 import { Promise } from 'rsvp';
 import { tracked } from '@glimmer/tracking';
-import { isBlank } from '@ember/utils';
 import { action } from '@ember/object';
+
 export default class EmberFreestyleService extends Service {
   @tracked showLabels = true;
   @tracked showNotes = true;

package/addon/styles/addon.scss

@@ -1,13 +1,13 @@
 // TODO: Replace with actual breakpoint system
 $FreestyleBreakpoints: (
-  large: 600px
+  large: 600px,
 );
 
 @mixin freestyle-breakpoint($name: 'large') {
   @media (min-width: map-get($FreestyleBreakpoints, $name)) {
-    @content
+    @content;
   }
-};
+}
 
 // Default Ember Freestyle Palette
 $FreestyleGuide-color--primary: #00bcd4 !default;