update docs header

addon/components/docs-header/index.hbs

@@ -1,7 +1,7 @@
-<header class="docs-shadow docs-relative docs-z-40 docs-bg-white">
+<header class="docs-shadow docs-relative docs-z-40 docs-bg-white" ...attributes>
   <div class="docs-flex docs-items-center docs-max-w-site-container docs-mx-auto md:docs-px-2">
 
-    {{#docs-header/link "index"}}
+    <DocsHeader::Link @route="index">
       <span class="docs-leading-none docs-font-title docs-text-large-2 docs-font-normal docs-normal-case docs-block docs-mr-6">
         {{#if this.prefix}}
           <div class="docs-text-xxs">
@@ -10,20 +10,20 @@
         {{/if}}
         {{this.name}}
       </span>
-    {{/docs-header/link}}
+    </DocsHeader::Link>
 
     <div class="docs-flex-1 docs-flex docs-items-center docs-overflow-auto docs-scrolling-touch docs-mask-image md:docs-no-mask-image">
-      {{#docs-header/link "docs"}}
+      <DocsHeader::Link @route="docs">
         Documentation
-      {{/docs-header/link}}
+      </DocsHeader::Link>
 
       {{yield (hash
         link=(component "docs-header/link")
       )}}
 
-      <DocsHeader::SearchBox @query={{this.query}} @on-input={{set this "query"}} />
+      <DocsHeader::SearchBox @query={{this.query}} @onInput={{set this "query"}} />
 
-      <DocsHeader::Link @on-click={{toggle "isShowingVersionSelector" this}}>
+      <DocsHeader::Link @onClick={{toggle "isShowingVersionSelector" this}}>
         <span data-test-id="current-version" data-version-selector class="docs-flex docs-items-center">
 
           {{#if (eq this.currentVersion.key this.latestVersionName)}}
@@ -55,9 +55,9 @@
 </header>
 
 {{#if this.query}}
-  <DocsHeader::SearchResults @query={{this.query}} @on-visit={{action "didVisitPage"}} />
+  <DocsHeader::SearchResults @query={{this.query}} @onClose={{set this "query" null}} @onVisit={{this.didVisitPage}} />
 {{/if}}
 
 {{#if this.isShowingVersionSelector}}
-  <DocsHeader::VersionSelector @on-close={{set this "isShowingVersionSelector" false}} />
+  <DocsHeader::VersionSelector @onClose={{set this "isShowingVersionSelector" false}} />
 {{/if}}

addon/components/docs-header/index.js

@@ -1,10 +1,12 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
 import config from 'ember-get-config';
-import { computed } from '@ember/object';
 import { classify } from '@ember/string';
-import { addonLogo, addonPrefix } from 'ember-cli-addon-docs/utils/computed';
+import { addonPrefix } from 'ember-cli-addon-docs/utils/computed';
 import { inject as service } from '@ember/service';
 import { reads } from '@ember/object/computed';
+import { action } from '@ember/object';
+import { localCopy } from 'tracked-toolbox';
 
 const { projectName, projectHref, latestVersionName } =
   config['ember-cli-addon-docs'];
@@ -17,76 +19,79 @@ const { projectName, projectHref, latestVersionName } =
   header links.
 
   ```hbs
-  {{#docs-header as |header|}}
-    {{#header.link 'sandbox'}}
+  <DocsHeader as |header|>
+    <header.link @route="sandbox">
       Sandbox
-    {{/header.link}}
-  {{/docs-header}}
+    </header.link>
+  </DocsHeader>
   ```
 
   @class DocsHeader
   @public
   @yield {Hash} header
   @yield {Component} header.link
 */
-export default Component.extend({
-  tagName: '',
+export default class DocsHeader extends Component {
+  @service projectVersion;
 
-  projectVersion: service(),
+  projectHref = projectHref;
+  latestVersionName = latestVersionName;
 
-  projectHref,
-  latestVersionName,
+  @tracked query;
 
-  didInsertElement() {
-    this._super(...arguments);
+  constructor() {
+    super(...arguments);
 
     this.projectVersion.loadAvailableVersions();
-  },
-
-  logo: classify(addonLogo(projectName)),
+  }
 
   /**
     The prefix of your project, typically "Ember", "EmberCLI" or "EmberData".
 
     By default the prefix will be autodiscovered from the `name` field of your addon's package.json.
 
     ```hbs
-    {{docs-header prefix='EmberData'}}
+    <DocsHeader @prefix="EmberData"/>
     ```
 
     @argument prefix
     @type String?
   */
-  prefix: addonPrefix(projectName),
+  @localCopy('args.prefix', addonPrefix(projectName))
+  prefix;
 
   /**
     The name of your project (without the "ember", "ember-cli" or "ember-data" prefix).
 
     By default the name will be autodiscovered from the `name` field of your addon's package.json.
 
     ```hbs
-    {{docs-header name='MyProject'}}
+    <DocsHeader @name="MyProject"/>
     ```
 
     @argument name
     @type String?
   */
-  name: computed(function () {
-    let name = projectName;
-    name = name.replace('ember-data-', '');
-    name = name.replace('ember-cli-', '');
-    name = name.replace('ember-', '');
-
-    return classify(name);
-  }),
-
-  currentVersion: reads('projectVersion.currentVersion'),
-
-  actions: {
-    didVisitPage() {
-      this.set('query', null);
-      let search = document.querySelector('[data-search-box-input]');
-      search.blur();
-    },
-  },
-});
+  get name() {
+    if (this.args.name) {
+      return this.args.name;
+    } else {
+      let name = projectName;
+      name = name.replace('ember-data-', '');
+      name = name.replace('ember-cli-', '');
+      name = name.replace('ember-', '');
+
+      return classify(name);
+    }
+  }
+
+  @reads('projectVersion.currentVersion')
+  currentVersion;
+
+  @action
+  didVisitPage() {
+    this.query = null;
+    let search = document.querySelector('[data-search-box-input]');
+    search.blur();
+  }
+}

addon/components/docs-header/link/index.hbs

@@ -1,33 +1,47 @@
 {{#if @href}}
 
-  <a href={{@href}}
-    class="
-      docs-px-4 docs-py-5 docs-transition docs-uppercase docs-text-xxs docs-font-bold
-      docs-text-grey-darkest docs-no-underline hover:docs-text-brand
-      {{if this.push "docs-ml-auto"}}
-    "
-    data-test-id={{this.data-test-id}}>
+  <a
+    href={{@href}}
+    class="docs-px-4 docs-py-5 docs-transition docs-uppercase docs-text-xxs docs-font-bold docs-text-grey-darkest docs-no-underline hover:docs-text-brand
+      {{if @push 'docs-ml-auto'}}
+      "
+    ...attributes
+  >
     {{yield}}
   </a>
 
-{{else if @on-click}}
+{{else if @onClick}}
 
-  <a {{action @on-click}}
+  <a
+    {{on "click" @onClick}}
     href="#"
-    class="
-      docs-px-4 docs-py-5 docs-transition docs-uppercase docs-text-xxs docs-font-bold
-      docs-text-grey-darkest docs-no-underline hover:docs-text-brand
-      {{if this.push "docs-ml-auto"}}
-    "
-    data-test-id={{this.data-test-id}}>
+    class="docs-px-4 docs-py-5 docs-transition docs-uppercase docs-text-xxs docs-font-bold docs-text-grey-darkest docs-no-underline hover:docs-text-brand
+      {{if @push 'docs-ml-auto'}}"
+    ...attributes
+  >
     {{yield}}
   </a>
 
 {{else}}
 
-  <LinkTo @route={{@route}} class={{concat "docs-px-4 docs-py-5 docs-transition docs-uppercase docs-text-xxs
-      docs-font-bold docs-no-underline " (if (not (eq @route "index")) (if this.isActive "docs-text-brand" "docs-text-grey-darkest hover:docs-text-brand") "docs-text-grey-darkest")}} data-test-id={{this.data-test-id}}>
+  <LinkTo
+    @route={{@route}}
+    class={{concat
+      "docs-px-4 docs-py-5 docs-transition docs-uppercase docs-text-xxs
+      docs-font-bold docs-no-underline "
+      (if
+        (not (eq @route "index"))
+        (if
+          this.isActive
+          "docs-text-brand"
+          "docs-text-grey-darkest hover:docs-text-brand"
+        )
+        "docs-text-grey-darkest"
+      )
+    }}
+    ...attributes
+  >
     {{yield}}
   </LinkTo>
 
-{{/if}}
+{{/if}}

addon/components/docs-header/link/index.js

@@ -1,16 +1,10 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
-import { computed } from '@ember/object';
 
-export default Component.extend({
-  tagName: '',
+export default class DocsHeaderLink extends Component {
+  @service router;
 
-  router: service(),
-
-  isActive: computed('router.currentRouteName', 'route', function () {
-    // Naive isActive check. Replace with router service when updated.
-    return this.get('router.currentRouteName').indexOf(this.route) === 0;
-  }),
-}).reopenClass({
-  positionalParams: ['route'],
-});
+  get isActive() {
+    return this.router.isActive(this.args.route);
+  }
+}

addon/components/docs-header/search-box/index.hbs

@@ -1,28 +1,30 @@
-<div class="docs-relative docs-text-grey-darkest" data-search-box>
-  {{svg-jar
-    "search"
-    width=12
-    height=12
-    class="docs-absolute docs-top-0 docs-h-full docs-ml-1"
-  }}
+<div class="docs-ml-auto" ...attributes>
+  <div class="docs-relative docs-text-grey-darkest" data-search-box>
+    {{svg-jar
+      "search"
+      width=12
+      height=12
+      class="docs-absolute docs-top-0 docs-h-full docs-ml-1"
+    }}
 
-  {{!--
-    This is a dumb input - so why not use the {{input}} helper? Because apparently
-    it takes over enter and ctrl+n/p keys. We are using those for our own shortcuts
-    so we stick with the dumb html element. Maybe there's a way to disable them
-    and get the convenient two-way binding.
-   --}}
-  <input
-    oninput={{action @on-input value="target.value"}}
-    value={{@query}}
-    type="text"
-    disabled={{this.fetchProject.isRunning}}
-    placeholder="SEARCH"
-    class="docs-w-24 docs-text-xxs docs-p-2 docs-pl-6 docs-rounded focus:docs-bg-grey-lighter outline-none"
-    data-search-box-input
-    data-test-search-box-input
-    aria-label="search"
-  />
+    {{!--
+      This is a dumb input - so why not use the {{input}} helper? Because apparently
+      it takes over enter and ctrl+n/p keys. We are using those for our own shortcuts
+      so we stick with the dumb html element. Maybe there's a way to disable them
+      and get the convenient two-way binding.
+    --}}
+    <input
+      {{on "input" this.handleInput}}
+      value={{@query}}
+      type="text"
+      disabled={{this.fetchProject.isRunning}}
+      placeholder="SEARCH"
+      class="outline-none docs-w-24 docs-text-xxs docs-p-2 docs-pl-6 docs-rounded focus:docs-bg-grey-lighter"
+      data-search-box-input
+      data-test-search-box-input
+      aria-label="search"
+    />
+  </div>
 </div>
 
 {{on-key "/" this.focusSearch event="keyup"}}

addon/components/docs-header/search-box/index.js

@@ -1,17 +1,13 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { task } from 'ember-concurrency';
 import { getOwner } from '@ember/application';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { classNames } from '@ember-decorators/component';
 import { formElementHasFocus } from 'ember-cli-addon-docs/keyboard-config';
 
-@classNames('docs-ml-auto')
-export default class DocsHeaderSearchBoxComponent extends Component {
+export default class DocsHeaderSearchBox extends Component {
   @service store;
 
-  query = null;
-
   constructor() {
     super(...arguments);
 
@@ -21,12 +17,7 @@ export default class DocsHeaderSearchBoxComponent extends Component {
       ];
     const { projectName } = config;
 
-    this.set('projectName', projectName);
-  }
-
-  didInsertElement() {
-    super.didInsertElement(...arguments);
-
+    this.projectName = projectName;
     this.fetchProject.perform();
   }
 
@@ -49,6 +40,11 @@ export default class DocsHeaderSearchBoxComponent extends Component {
 
   @action
   unfocusSearch() {
-    this.get('on-input')(null);
+    this.args.onInput?.(null);
+  }
+
+  @action
+  handleInput(event) {
+    this.args.onInput?.(event.target.value);
   }
 }