Fix examples

EmberExperts · May 23, 2020 · 4b3160d · 4b3160d
1 parent b8bc83f
commit 4b3160d
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 34 deletions.
diff --git a/tests/dummy/app/components/activate-button/component.js b/tests/dummy/app/components/activate-button/component.js
@@ -1,15 +1,16 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 
-export default Component.extend({
-  classNames: 'activator',
-
-  actions: {
-    activate(value) {
-      this.set('activeExample', value);
-    },
+class ActivateButtonComponent extends Component {
+  @action
+  activate(value) {
+    this.args.onChange(value);
+  }
 
-    deactivate() {
-      this.set('activeExample', null);
-    }
+  @action
+  deactivate() {
+    this.args.onChange(null);
   }
-});
+}
+
+export default ActivateButtonComponent;
diff --git a/tests/dummy/app/components/activate-button/template.hbs b/tests/dummy/app/components/activate-button/template.hbs
@@ -1,5 +1,7 @@
-{{#if activeExample}}
-  <a class="btn btn-lg btn-outline btn-ember" {{action 'deactivate'}}>Back to examples</a>
-{{else}}
-  <a class="btn btn-lg btn-outline btn-ember" {{action 'activate' exampleName}}>Live example</a>
-{{/if}}
+<div class="activator">
+  {{#if @activeExample}}
+    <a class="btn btn-lg btn-outline btn-ember" {{on "click" this.deactivate}}>Back to examples</a>
+  {{else}}
+    <a class="btn btn-lg btn-outline btn-ember" {{on "click" (fn this.activate @exampleName)}}>Live example</a>
+  {{/if}}
+</div>
diff --git a/tests/dummy/app/components/avatar-adorable/template.hbs b/tests/dummy/app/components/avatar-adorable/template.hbs
@@ -4,7 +4,7 @@
       <p class="lead"><code>ember-initials/adorable</code></p>
       {{ember-initials/adorable class="img-thumbnail" image=image size=size email=email}}
       <p class="example-intro">This component has been designed to display user avatar based on <a href="http://avatars.adorable.io/">avatars.adorable.io</a> service.</p>
-      {{activate-button exampleName=exampleName activeExample=activeExample}}
+      <ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
     </div>
 
     <div class="col-sm-8">
@@ -42,7 +42,7 @@
       <p class="lead"><code>ember-initials/adorable</code></p>
       {{ember-initials/adorable class="img-thumbnail" image=image size=size email=email}}
       <p class="example-intro">This component has been designed to display user avatar based on <a href="http://avatars.adorable.io/">avatars.adorable.io</a> service.</p>
-      {{activate-button exampleName=exampleName activeExample=activeExample}}
+      <ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
     </div>
   {{/if}}
 {{/if}}
diff --git a/tests/dummy/app/components/avatar-gravatar/template.hbs b/tests/dummy/app/components/avatar-gravatar/template.hbs
@@ -5,7 +5,7 @@
         <p class="lead"><code>ember-initials/gravatar</code></p>
         {{ember-initials/gravatar class="img-rounded" size=size email=email defaultImage=defaultImage image=image relativeUrl=relativeUrl}}
         <p class="example-intro">This component has been designed to display user avatar based on gravatar service. But it can also work as a fallback for users avatars.</p>
-        {{activate-button exampleName=exampleName activeExample=activeExample}}
+        <ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
       </div>
     </div>
 
@@ -59,7 +59,7 @@
       <p class="lead"><code>ember-initials/gravatar</code></p>
       {{ember-initials/gravatar class="img-rounded" size=size email=email defaultImage=defaultImage image=image relativeUrl=relativeUrl}}
       <p class="example-intro">This component has been designed to display user avatar based on gravatar service. But it can also work as a fallback for users avatars.</p>
-      {{activate-button exampleName=exampleName activeExample=activeExample}}
+      <ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
     </div>
   {{/if}}
 {{/if}}
diff --git a/tests/dummy/app/components/avatar-image/template.hbs b/tests/dummy/app/components/avatar-image/template.hbs
@@ -4,7 +4,7 @@
       <p class="lead"><code>ember-initials/image</code></p>
       {{ember-initials/image class="img-thumbnail" image=image size=size defaultImage=defaultImage}}
       <p class="example-intro">This component has been designed to display user avatar from URL with a fallback to the specific default image.</p>
-      {{activate-button exampleName=exampleName activeExample=activeExample}}
+      <ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
     </div>
 
     <div class="col-sm-8">
@@ -42,7 +42,7 @@
       <p class="lead"><code>ember-initials/image</code></p>
       {{ember-initials/image class="img-thumbnail" image=image size=size defaultImage=defaultImage}}
       <p class="example-intro">This component has been designed to display user avatar from URL with a fallback to the specific default image.</p>
-      {{activate-button exampleName=exampleName activeExample=activeExample}}
+      <ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
     </div>
   {{/if}}
 {{/if}}
diff --git a/tests/dummy/app/components/avatar-initials/template.hbs b/tests/dummy/app/components/avatar-initials/template.hbs
@@ -15,7 +15,7 @@
           @image={{this.image}}
         />
         <p class="example-intro">This component has been designed to display user initials based on user name and unique string like email. But it can also work as a fallback for users avatars.</p>
-        <ActivateButton @exampleName={{this.exampleName}} @activeExample={{this.activeExample}} />
+        <ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
       </div>
     </div>
 
@@ -116,7 +116,7 @@
         @image={{this.image}}
       />
       <p class="example-intro">This component has been designed to display user initials based on user name and unique string like email. But it can also work as a fallback for users avatars.</p>
-      <ActivateButton @exampleName={{this.exampleName}} @activeExample={{this.activeExample}} />
+      <ActivateButton @exampleName={{this.exampleName}} @activeExample={{@activeExample}} @onChange={{@onChange}} />
     </div>
   {{/if}}
 {{/if}}
diff --git a/tests/dummy/app/components/page-sections/examples/component.js b/tests/dummy/app/components/page-sections/examples/component.js
@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+class ExamplesComponent extends Component {
+  @tracked activeExample;
+
+  @action
+  onChange(value) {
+    this.activeExample = value;
+  }
+}
+
+export default ExamplesComponent;
diff --git a/tests/dummy/app/components/page-sections/examples/template.hbs b/tests/dummy/app/components/page-sections/examples/template.hbs
@@ -1,24 +1,25 @@
 <div id="examples">
-  <div class="{{if activeExample 'container' 'container-fluid'}}">
+  {{this.activeExample}}
+  <div class="{{if this.activeExample 'container' 'container-fluid'}}">
     <div class="section-heading">
       <h1 data-wow-delay=".3s" class="title wow fadeInDown" style="visibility: visible; animation-delay: 0.3s; animation-name: fadeInDown;">Live Examples</h1>
     </div>
 
     <div class="row flex">
-      <div class="{{unless activeExample 'col-md-3 col-sm-6'}}">
-        {{avatar-adorable activeExample=activeExample}}
+      <div class="{{unless this.activeExample 'col-md-3 col-sm-6'}}">
+        <AvatarAdorable @activeExample={{this.activeExample}} @onChange={{this.onChange}} />
       </div>
 
-      <div class="{{unless activeExample 'col-md-3 col-sm-6'}}">
-        {{avatar-initials activeExample=activeExample}}
+      <div class="{{unless this.activeExample 'col-md-3 col-sm-6'}}">
+        <AvatarInitials @activeExample={{this.activeExample}} @onChange={{this.onChange}} />
       </div>
 
-      <div class="{{unless activeExample 'col-md-3 col-sm-6'}}">
-        {{avatar-gravatar activeExample=activeExample}}
+      <div class="{{unless this.activeExample 'col-md-3 col-sm-6'}}">
+        <AvatarGravatar @activeExample={{this.activeExample}} @onChange={{this.onChange}} />
       </div>
 
-      <div class="{{unless activeExample 'col-md-3 col-sm-6'}}">
-        {{avatar-image activeExample=activeExample}}
+      <div class="{{unless this.activeExample 'col-md-3 col-sm-6'}}">
+        <AvatarImage @activeExample={{this.activeExample}} @onChange={{this.onChange}} />
       </div>
     </div>
   </div>