Modernize docs app and migrate to Bootstrap 5

docs/app/controllers/demo/button.js

@@ -1,17 +1,18 @@
 import Controller from '@ember/controller';
 import RSVP from 'rsvp';
 import { later } from '@ember/runloop';
+import { action } from '@ember/object';
 
-export default Controller.extend({
-  actions: {
-    submit() {
-      window.alert('You pressed the button!');
-    },
+export default class ButtonController extends Controller {
+  @action
+  submit() {
+    window.alert('You pressed the button!');
+  }
 
-    download() {
-      return new RSVP.Promise(function (resolve) {
-        later(resolve, 3000);
-      });
-    },
-  },
-});
+  @action
+  download() {
+    return new RSVP.Promise(function (resolve) {
+      later(resolve, 3000);
+    });
+  }
+}

docs/app/controllers/demo/forms.js

@@ -1,37 +1,32 @@
 // BEGIN-SNIPPET form-controller
 import Controller from '@ember/controller';
-import { computed } from '@ember/object';
+import { action } from '@ember/object';
 import { getOwner } from '@ember/application';
 import Login from '../../models/login';
 
-export default Controller.extend({
-  formLayout: 'vertical',
-  email: 'foo@example.com',
-  password: null,
-  checkbox: false,
-  switched: false,
-  radio: null,
+export default class FormsController extends Controller {
+  formLayout = 'vertical';
+  email = 'foo@example.com';
+  password = null;
+  checkbox = false;
+  switched = false;
+  radio = null;
+  radioOptions = [
+    {
+      label: 'foo',
+    },
+    {
+      label: 'bar',
+    },
+  ];
 
-  login: computed(function () {
+  get login() {
     return Login.create(getOwner(this).ownerInjection());
-  }),
-
-  actions: {
-    submit() {
-      window.alert('Successfully submitted form data!');
-    },
-  },
+  }
 
-  init() {
-    this._super(...arguments);
-    this.radioOptions = [
-      {
-        label: 'foo',
-      },
-      {
-        label: 'bar',
-      },
-    ];
-  },
-});
+  @action
+  submit() {
+    window.alert('Successfully submitted form data!');
+  }
+}
 // END-SNIPPET

docs/app/controllers/demo/modal.js

@@ -1,59 +1,60 @@
-import { oneWay } from '@ember/object/computed';
+import { action } from '@ember/object';
 import Controller from '@ember/controller';
-import { A } from '@ember/array';
 import { next } from '@ember/runloop';
+import { tracked } from '@glimmer/tracking';
 
-export default Controller.extend({
-  modal1: false,
-  modal2: true,
-  modal3: false,
-  hasModal3: false,
+export default class ModalController extends Controller {
+  @tracked
+  modal1 = false;
+  @tracked
+  modal2 = true;
+  @tracked
+  modal3 = false;
+  @tracked
+  hasModal3 = false;
+  @tracked
+  title = 'Simple Modal';
+  @tracked
+  sizes = ['', 'sm', 'lg'];
+  @tracked
+  size = '';
+  @tracked
+  closeButton = true;
+  @tracked
+  closeTitle = 'Ok';
+  @tracked
+  submitTitle = null;
+  @tracked
+  backdrop = true;
+  @tracked
+  backdropClose = true;
+  @tracked
+  fade = true;
 
-  title: 'Simple Modal',
-  sizes: A(['', 'sm', 'lg']),
-  size: oneWay('sizes.firstObject'),
-  closeButton: true,
-  closeTitle: 'Ok',
-  submitTitle: null,
-  backdrop: true,
-  backdropClose: true,
-  fade: true,
+  _ignoreClose = false;
 
-  _ignoreClose: false,
-
-  actions: {
-    addModal3() {
-      this.set('hasModal3', true);
-      this.set('modal3', true);
-    },
-    removeModal3() {
-      this.set('hasModal3', false);
-    },
-    submit() {
-      alert('Modal submitted!');
-    },
-    close() {
-      if (!this._ignoreClose) {
-        this.set('modal2', false);
-        alert('Modal closed!');
-      }
-    },
-    open() {
-      this.set('modal2', true);
-    },
-    backdropChange(backdrop) {
-      this._ignoreClose = true;
-      let fade = this.fade;
-      this.set('fade', false);
-      this.set('modal2', false);
-      next(() => {
-        this.set('backdrop', backdrop);
-        this.set('modal2', true);
-        next(() => {
-          this.set('fade', fade);
-          this._ignoreClose = false;
-        });
-      });
-    },
-  },
-});
+  @action
+  addModal3() {
+    this.hasModal3 = true;
+    this.modal3 = true;
+  }
+  @action
+  removeModal3() {
+    this.hasModal3 = false;
+  }
+  @action
+  submit() {
+    alert('Modal submitted!');
+  }
+  @action
+  close() {
+    if (!this._ignoreClose) {
+      this.modal2 = false;
+      alert('Modal closed!');
+    }
+  }
+  @action
+  open() {
+    this.modal2 = true;
+  }
+}

docs/app/controllers/demo/navbars.js

@@ -1,11 +1,15 @@
-/* eslint-disable ember/avoid-leaking-state-in-ember-objects */
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
 
-export default Controller.extend({
-  type: 'light',
-  bg: 'light',
-  typeChoices: ['light', 'dark'],
-  bgChoices: [
+export default class NavbarsController extends Controller {
+  @tracked
+  type = 'light';
+
+  @tracked
+  bg = 'light';
+
+  typeChoices = ['light', 'dark'];
+  bgChoices = [
     'light',
     'dark',
     'primary',
@@ -14,6 +18,5 @@ export default Controller.extend({
     'danger',
     'warning',
     'info',
-  ],
-  collapsed: true,
-});
+  ];
+}

docs/app/controllers/demo/navs.js

@@ -1,32 +1,32 @@
-import { oneWay } from '@ember/object/computed';
+import { action } from '@ember/object';
 import Controller from '@ember/controller';
-import { A } from '@ember/array';
+import { tracked } from '@glimmer/tracking';
 
-export default Controller.extend({
-  type: oneWay('typeChoices.firstObject'),
-  stacked: false,
-  justified: false,
-  fill: false,
-  typeChoices: A(['pills', 'tabs']),
+export default class NavsController extends Controller {
+  @tracked
+  type = 'pills';
+  @tracked
+  stacked = false;
+  @tracked
+  justified = false;
+  @tracked
+  fill = false;
 
-  actions: {
-    updateType(type) {
-      let props = {
-        type,
-      };
-      if (type === 'tabs') {
-        props.stacked = false;
-      }
-      this.setProperties(props);
-    },
-    updateStacked(stacked) {
-      let props = {
-        stacked,
-      };
-      if (stacked) {
-        props.justified = false;
-      }
-      this.setProperties(props);
-    },
-  },
-});
+  typeChoices = ['pills', 'tabs'];
+
+  @action
+  updateType(type) {
+    this.type = type;
+    if (type === 'tabs') {
+      this.stacked = false;
+    }
+  }
+
+  @action
+  updateStacked(stacked) {
+    this.stacked = stacked;
+    if (stacked) {
+      this.justified = false;
+    }
+  }
+}

docs/app/controllers/demo/progress.js

@@ -1,16 +1,13 @@
-import { not } from '@ember/object/computed';
 import Controller from '@ember/controller';
 
-export default Controller.extend({
-  value: 50,
-  minValue: 0,
-  maxValue: 100,
-  showLabel: false,
-  type: 'default',
-  striped: false,
-  animate: false,
-  roundDigits: 0,
-  /* eslint-disable ember/avoid-leaking-state-in-ember-objects */
-  typeChoices: ['default', 'success', 'info', 'warning', 'danger'],
-  notStriped: not('striped'),
-});
+export default class ProgressController extends Controller {
+  value = 50;
+  minValue = 0;
+  maxValue = 100;
+  showLabel = false;
+  type = 'default';
+  striped = false;
+  animate = false;
+  roundDigits = 0;
+  typeChoices = ['default', 'success', 'info', 'warning', 'danger'];
+}

docs/app/controllers/demo/tabs.js

@@ -1,9 +1,6 @@
-import { oneWay } from '@ember/object/computed';
 import Controller from '@ember/controller';
-import { A } from '@ember/array';
 
-export default Controller.extend({
-  type: oneWay('typeChoices.lastObject'),
-  typeChoices: A(['pills', 'tabs']),
-  badge: 5,
-});
+export default class TabController extends Controller {
+  type = 'tabs';
+  typeChoices = ['pills', 'tabs'];
+}

docs/app/helpers/dynamic-code-snippet.js

@@ -7,6 +7,7 @@ export default helper(function ([source], { language, dynamic, quote = '"' }) {
   }
   Object.keys(dynamic).forEach((property) => {
     let propertyValue = get(dynamic, property);
+    let hasValue = propertyValue !== undefined && propertyValue !== null;
     let type = typeof propertyValue;
 
     let quotedValue =
@@ -16,8 +17,15 @@ export default helper(function ([source], { language, dynamic, quote = '"' }) {
       case 'handlebars':
       case 'htmlbars':
         source = source.replace(
-          new RegExp(`(<\\w*[^>]*\\s@[^=]+=){{${property}}}([^>]*>)`, 'g'),
-          type === 'string' ? `$1${quotedValue}$2` : `$1{{${propertyValue}}}$2`
+          new RegExp(
+            `(<\\w*[^>]*\\s)(@[^=]+)={{(?:this\\.)?${property}}}([^>]*>)`,
+            'g'
+          ),
+          hasValue
+            ? type === 'string'
+              ? `$1$2=${quotedValue}$3`
+              : `$1$2={{${propertyValue}}}$3`
+            : '$1$3'
         );
         source = source.replace(
           new RegExp(`{{${property}}}`, 'g'),
@@ -36,5 +44,5 @@ export default helper(function ([source], { language, dynamic, quote = '"' }) {
     }
   });
 
-  return source;
+  return source.replace(/\n\s*\n/g, '\n');
 });

docs/app/styles/app.scss

@@ -44,4 +44,4 @@ code {
   &:hover .line-numbers-rows {
     opacity: 1;
   }
-}
+}

docs/app/styles/variables.scss

@@ -9,4 +9,6 @@ $navbar-dark-hover-color:           rgba(#fff, .9) !default;
 $font-family-sans-serif: 'myriad-pro', sans-serif;
 
 // make sure this is defined so Sass compiles without errors even for BS4 build
-$zindex-modal-background:  1040;
+$zindex-modal-background:  1040;
+
+$min-contrast-ratio: 3;