ember-freestyle 0.14.0 → 0.15.0

package/CHANGELOG.md

@@ -1,6 +1,31 @@
 # Changelog
 
-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.
+All notable changes to this project will be documented in this file.
+
+
+## v0.15.0 (2022-09-14)
+
+#### :rocket: Enhancement
+* [#828](https://github.com/chrislopresto/ember-freestyle/pull/828) Render headings instead of divs ([@KamiKillertO](https://github.com/KamiKillertO))
+
+#### :bug: Bug Fix
+* [#827](https://github.com/chrislopresto/ember-freestyle/pull/827) Fix aside menu ([@KamiKillertO](https://github.com/KamiKillertO))
+* [#823](https://github.com/chrislopresto/ember-freestyle/pull/823) Fix rendering too many submenus ([@bertdeblock](https://github.com/bertdeblock))
+
+#### :memo: Documentation
+* [#835](https://github.com/chrislopresto/ember-freestyle/pull/835) Recommend `exclude` option instead of `blacklist` option ([@bertdeblock](https://github.com/bertdeblock))
+
+#### :house: Internal
+* [#844](https://github.com/chrislopresto/ember-freestyle/pull/844) Move to release-it to manage release and CHANGELOG. ([@lukemelia](https://github.com/lukemelia))
+* [#836](https://github.com/chrislopresto/ember-freestyle/pull/836) Update Ember to v4.6 ([@bertdeblock](https://github.com/bertdeblock))
+* [#837](https://github.com/chrislopresto/ember-freestyle/pull/837) Use spread syntax instead of Ember's `assign` polyfill ([@bertdeblock](https://github.com/bertdeblock))
+* [#810](https://github.com/chrislopresto/ember-freestyle/pull/810) Update Ember to v4.4 ([@bertdeblock](https://github.com/bertdeblock))
+* [#752](https://github.com/chrislopresto/ember-freestyle/pull/752) Resolve `ember-modifier` deprecations ([@bertdeblock](https://github.com/bertdeblock))
+
+#### Committers: 3
+- Benjamin JEGARD ([@KamiKillertO](https://github.com/KamiKillertO))
+- Bert De Block ([@bertdeblock](https://github.com/bertdeblock))
+- Luke Melia ([@lukemelia](https://github.com/lukemelia))
 
 ## [0.14.0](https://github.com/chrislopresto/ember-freestyle/compare/v0.13.2...v0.14.0) (2022-03-11)
 

package/README.md

@@ -5,7 +5,6 @@
 ![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-39-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
@@ -26,7 +25,7 @@ To see Ember Freestyle in action, visit [https://chrislopresto.github.io/ember-f
 
 * Ember.js v3.16 or above
 * Ember CLI v3.16 or above
-* Node.js v12 or above
+* Node.js v14 or above
 * Ember Auto Import v2 or above
 
 ## Installation
@@ -89,7 +88,7 @@ $FreestyleGuide-color--accent: #DAF7A6;
 ## Excluding Ember Freestyle from Your Production Build
 
 We recommend excluding Ember Freestyle from production builds using Ember CLI's
-`addons.blacklist` option.
+`addons.exclude` option.
 
 ```js
 // ember-cli-build.js
@@ -98,9 +97,9 @@ const environment = process.env.EMBER_ENV;
 const addonsToExclude = environment === 'production' ? ['ember-freestyle'] : [];
 
 module.exports = function (defaults) {
-  const app = new EmberAddon(defaults, {
+  const app = new EmberApp(defaults, {
     addons: {
-      blacklist: addonsToExclude,
+      exclude: addonsToExclude,
     },
   };
 };

package/RELEASE.md

@@ -0,0 +1,60 @@
+# Release Process
+
+Releases are mostly automated using
+[release-it](https://github.com/release-it/release-it/) and
+[lerna-changelog](https://github.com/lerna/lerna-changelog/).
+
+## Preparation
+
+Since the majority of the actual release process is automated, the primary
+remaining task prior to releasing is confirming that all pull requests that
+have been merged since the last release have been labeled with the appropriate
+`lerna-changelog` labels and the titles have been updated to ensure they
+represent something that would make sense to our users. Some great information
+on why this is important can be found at
+[keepachangelog.com](https://keepachangelog.com/en/1.0.0/), but the overall
+guiding principle here is that changelogs are for humans, not machines.
+
+When reviewing merged PR's the labels to be used are:
+
+* breaking - Used when the PR is considered a breaking change.
+* enhancement - Used when the PR adds a new feature or enhancement.
+* bug - Used when the PR fixes a bug included in a previous release.
+* documentation - Used when the PR adds or updates documentation.
+* internal - Used for internal changes that still require a mention in the
+  changelog/release notes.
+
+## Release
+
+Once the prep work is completed, the actual release is straight forward:
+
+* First, ensure that you have installed your projects dependencies:
+
+```sh
+yarn install
+```
+
+* Second, ensure that you have obtained a
+  [GitHub personal access token][generate-token] with the `repo` scope (no
+  other permissions are needed). Make sure the token is available as the
+  `GITHUB_AUTH` environment variable.
+
+  For instance:
+
+  ```bash
+  export GITHUB_AUTH=abc123def456
+  ```
+
+[generate-token]: https://github.com/settings/tokens/new?scopes=repo&description=GITHUB_AUTH+env+variable
+
+* And last (but not least 😁) do your release.
+
+```sh
+npx release-it
+```
+
+[release-it](https://github.com/release-it/release-it/) manages the actual
+release process. It will prompt you to to choose the version number after which
+you will have the chance to hand tweak the changelog to be used (for the
+`CHANGELOG.md` and GitHub release), then `release-it` continues on to tagging,
+pushing the tag and commits, etc.

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

@@ -1,4 +1,3 @@
-import { assign } from '@ember/polyfills';
 import Component from '@ember/component';
 import { action, set, get, computed } from '@ember/object';
 import { assert } from '@ember/debug';
@@ -38,7 +37,7 @@ export default Component.extend({
   @action
   changeValueTo(property, newValue) {
     // Make a copy and then reset dynamicProperties, to force template changes
-    let dynamicProperties = assign({}, this.dynamicProperties);
+    let dynamicProperties = { ...this.dynamicProperties };
     set(dynamicProperties, `${property}.value`, newValue);
 
     this.set('dynamicProperties', dynamicProperties);

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

@@ -10,17 +10,16 @@
       <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>
+      <h1 class="FreestyleGuide-title">{{@title}}</h1>
       <div class="FreestyleGuide-subtitle">{{@subtitle}}</div>
     </div>
-    <a
+    <button
       class="FreestyleGuide-cta FreestyleGuide-cta--aside {{unless this.showAside 'FreestyleGuide-cta--active'}}"
-      href="#"
-      title="Show Aside"
+      type="button"
       {{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>
-    </a>
+    </button>
   </header>
   <main class="FreestyleGuide-body">
     <article class="FreestyleGuide-content">
@@ -39,9 +38,17 @@
       </nav>
     {{/if}}
     {{#if this.showAside}}
-      <aside class="FreestyleGuide-aside">
+      <aside class="FreestyleGuide-aside"
+        {{focus-trap
+          focusTrapOptions=(hash
+            onDeactivate=(fn (mut this.showAside) false)
+            allowOutsideClick=true
+            escapeDeactivates=true
+          )
+        }}
+      >
         <FreestyleUsageControls />
       </aside>
     {{/if}}
   </main>
-</div>
+</div>

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

@@ -11,15 +11,17 @@
       <LinkTo @query={{hash f=null s=section.name ss=null}} class="FreestyleMenu-itemLink">
         {{section.name}}
       </LinkTo>
-      {{#each section.subsections as |subsection|}}
+      {{#if section.subsections.length}}
         <ul class="FreestyleMenu-submenu">
-          <li class="FreestyleMenu-submenuItem">
-            <LinkTo @query={{hash f=null s=section.name ss=subsection.name}} class="FreestyleMenu-submenuItemLink">
-              {{subsection.name}}
-            </LinkTo>
-          </li>
+          {{#each section.subsections as |subsection|}}
+            <li class="FreestyleMenu-submenuItem">
+              <LinkTo @query={{hash f=null s=section.name ss=subsection.name}} class="FreestyleMenu-submenuItemLink">
+                {{subsection.name}}
+              </LinkTo>
+            </li>
+          {{/each}}
         </ul>
-      {{/each}}
+      {{/if}}
     </li>
   {{/each}}
 </ul>

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

@@ -5,9 +5,9 @@
 >
   {{#if this.show}}
     {{#if @name}}
-      <div class="FreestyleSection-name">
+      <h2 class="FreestyleSection-name">
         {{@name}}
-      </div>
+      </h2>
     {{/if}}
   {{/if}}
   {{yield

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

@@ -4,9 +4,9 @@
 >
   {{#if this.show}}
     {{#if @name}}
-      <div class="FreestyleSubsection-name">
+      <h3 class="FreestyleSubsection-name">
         {{@name}}
-      </div>
+      </h3>
     {{/if}}
     {{yield}}
   {{/if}}

package/addon/modifiers/freestyle-highlight.js

@@ -4,7 +4,7 @@ import { inject as service } from '@ember/service';
 export default class FreestyleHighlight extends Modifier {
   @service emberFreestyle;
 
-  didReceiveArguments() {
-    this.emberFreestyle.highlight(this.element);
+  modify(element) {
+    this.emberFreestyle.highlight(element);
   }
 }

package/app/styles/components/freestyle-guide.scss

@@ -39,6 +39,12 @@ $FreestyleGuide-boxShadow: 0 2px 5px 0 $FreestyleGuide-shadow1,
     text-align: center;
   }
 
+  &-cta--aside {
+    background: none;
+    border: 0;
+    padding: 0;
+  }
+
   &-ctaIcon {
     &:hover {
       fill: $FreestyleGuide-color--primary;
@@ -113,6 +119,7 @@ $FreestyleGuide-boxShadow: 0 2px 5px 0 $FreestyleGuide-shadow1,
     display: flex;
     height: 100%;
     font-size: 1.4rem;
+
     & > span {
       margin: auto;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-freestyle",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Create a living styleguide for your Ember app.",
   "keywords": [
     "ember-addon"
@@ -28,78 +28,84 @@
     "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
-    "prerelease": "./script/prerelease",
-    "release": "./script/release",
-    "postrelease": "./script/postrelease",
+    "release": "release-it",
     "contributors:add": "all-contributors add",
     "contributors:generate": "all-contributors generate"
   },
   "dependencies": {
     "@ember/render-modifiers": "^2.0.4",
-    "@glimmer/component": "^1.0.4",
-    "@glimmer/tracking": "^1.0.4",
-    "ember-auto-import": "^2.4.0",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/tracking": "^1.1.2",
+    "ember-auto-import": "^2.4.2",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.0.1",
-    "ember-modifier": "^3.1.0",
+    "ember-cli-htmlbars": "^6.1.0",
+    "ember-focus-trap": "^1.0.1",
+    "ember-modifier": "^3.2.7",
     "ember-named-blocks-polyfill": "^0.2.5",
-    "ember-truth-helpers": "^3.0.0",
+    "ember-truth-helpers": "^3.1.1",
     "json-formatter-js": "^2.3.4",
     "macro-decorators": "^0.1.2",
     "strip-indent": "^3.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.6.0",
-    "@embroider/test-setup": "^1.4.0",
+    "@ember/test-helpers": "^2.8.1",
+    "@embroider/test-setup": "^1.8.3",
     "all-contributors-cli": "^6.14.1",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~4.2.0",
+    "ember-cli": "~4.6.0",
     "ember-cli-autoprefixer": "^2.0.0",
-    "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli-dependency-checker": "^3.3.1",
     "ember-cli-deploy": "^1.0.2",
     "ember-cli-deploy-build": "^2.0.0",
     "ember-cli-deploy-git": "^1.3.4",
     "ember-cli-inject-live-reload": "^2.1.0",
-    "ember-cli-sass": "^10.0.0",
+    "ember-cli-sass": "^11.0.1",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-terser": "^4.0.2",
     "ember-code-snippet": "^3.0.0",
-    "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
     "ember-page-title": "^7.0.0",
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^8.0.3",
-    "ember-source": "~4.2.0",
+    "ember-source": "~4.6.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^4.2.0",
+    "ember-template-lint": "^4.14.0",
     "ember-try": "^2.0.0",
     "eslint": "^7.32.0",
     "eslint-config-ember": "0.3.0",
-    "eslint-config-prettier": "^8.4.0",
-    "eslint-plugin-ember": "^10.5.9",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-ember": "^11.0.6",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-qunit": "^7.2.0",
-    "husky": "^7.0.4",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-qunit": "^7.3.1",
+    "husky": "^8.0.1",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.5.1",
-    "qunit": "^2.18.0",
+    "prettier": "^2.7.1",
+    "qunit": "^2.19.1",
     "qunit-dom": "^2.0.0",
+    "release-it": "^15.4.1",
+    "@release-it-plugins/lerna-changelog": "^5.0.0",
     "remarkable": "^2.0.0",
-    "sass": "^1.49.7",
-    "standard-version": "^9.3.2",
-    "stylelint": "^14.5.3",
+    "sass": "^1.54.8",
+    "stylelint": "^14.11.0",
     "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-recommended-scss": "^5.0.2",
-    "stylelint-prettier": "^1.2.0",
-    "stylelint-scss": "^4.1.0",
-    "webpack": "^5.69.1"
+    "stylelint-config-recommended-scss": "^7.0.0",
+    "stylelint-prettier": "^2.0.0",
+    "stylelint-scss": "^4.3.0",
+    "webpack": "^5.74.0"
   },
   "engines": {
-    "node": "12.* || 14.* || >= 16"
+    "node": "14.* || >= 16"
+  },
+  "volta": {
+    "node": "14.19.3",
+    "yarn": "1.22.19"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
   },
   "ember": {
     "edition": "octane"
@@ -114,8 +120,22 @@
       "ember-named-blocks-polyfill"
     ]
   },
-  "volta": {
-    "node": "12.22.6",
-    "yarn": "1.22.15"
+  "release-it": {
+    "plugins": {
+      "@release-it-plugins/lerna-changelog": {
+        "infile": "CHANGELOG.md",
+        "launchEditor": false
+      }
+    },
+    "git": {
+      "tagName": "v${version}"
+    },
+    "github": {
+      "release": true,
+      "tokenRef": "GITHUB_AUTH"
+    },
+    "hooks": {
+      "after:release": "ember deploy production"
+    }
   }
 }

package/vendor/ember-freestyle.css

@@ -22,6 +22,11 @@
   font-size: 1.4rem;
   text-align: center;
 }
+.FreestyleGuide-cta--aside {
+  background: none;
+  border: 0;
+  padding: 0;
+}
 .FreestyleGuide-ctaIcon:hover {
   fill: #00bcd4;
 }