Drop ember-bootstrap

adopted-ember-addons · Jun 29, 2022 · f00c801 · f00c801
1 parent 4738eef
commit f00c801
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 502 deletions.
diff --git a/config/ember-try.js b/config/ember-try.js
@@ -45,7 +45,6 @@ module.exports = async function () {
           devDependencies: {
             'ember-source': await getChannelURL('release'),
             'ember-auto-import': '^2.4.0',
-            'ember-bootstrap': '^5.0.0',
             webpack: '^5.0.0',
           },
         },
@@ -56,7 +55,6 @@ module.exports = async function () {
           devDependencies: {
             'ember-source': await getChannelURL('beta'),
             'ember-auto-import': '^2.4.0',
-            'ember-bootstrap': '^5.0.0',
             webpack: '^5.0.0',
           },
         },
@@ -67,7 +65,6 @@ module.exports = async function () {
           devDependencies: {
             'ember-source': await getChannelURL('canary'),
             'ember-auto-import': '^2.4.0',
-            'ember-bootstrap': '^5.0.0',
             webpack: '^5.0.0',
           },
         },

diff --git a/ember-cli-build.js b/ember-cli-build.js
@@ -7,12 +7,6 @@ module.exports = function (defaults) {
     snippetSearchPaths: ['addon', 'tests/dummy/app'],
     snippetPaths: ['snippets', 'tests/dummy/snippets'],
 
-    'ember-bootstrap': {
-      bootstrapVersion: 4,
-      importBootstrapFont: true,
-      importBootstrapCSS: false,
-    },
-
     'ember-prism': {
       components: ['javascript', 'markup'],
     },

diff --git a/package.json b/package.json
@@ -44,10 +44,8 @@
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
     "babel-eslint": "^10.1.0",
-    "bootstrap": "^4.6.0",
     "broccoli-asset-rev": "^2.7.0",
     "ember-auto-import": "^1.12.0",
-    "ember-bootstrap": "^4.0.0",
     "ember-cli": "~3.28.5",
     "ember-cli-app-version": "^3.1.3",
     "ember-cli-autoprefixer": "^0.7.0",

diff --git a/tests/dummy/app/controllers/index.js b/tests/dummy/app/controllers/index.js
@@ -3,6 +3,9 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class extends Controller {
+  queryParams = ['file'];
+  @tracked file = 'user-model.js';
+
   @tracked showAlert = false;
   @tracked isRegistered = false;
   @tracked showCode = false;

diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
@@ -1,10 +1,13 @@
 $accent-color: #f23818;
 
-@import 'ember-bootstrap/bootstrap';
 @import './navbar';
 @import './form';
 @import './code-snippet';
 
+*, ::after, ::before {
+  box-sizing: border-box;
+}
+
 body,
 html {
   min-height: 100%;
@@ -14,12 +17,17 @@ html {
   font-family: 'Open Sans', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+}
+
+body {
+  font-size: 14px;
+  line-height: 1.428571429;
+  color: #333;
+}
 
-  > div.ember-view {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
+dl, ol, ul {
+  margin-top: 0;
 }
 
 .content {

diff --git a/tests/dummy/app/styles/code-snippet.scss b/tests/dummy/app/styles/code-snippet.scss
@@ -17,40 +17,70 @@ $background-color: #fdfdfd;
   z-index: 0;
 
   &.show {
+    display: block;
     width: 600px;
     margin-left: -2px;
     box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.15);
   }
 
+  .nav {
+    padding-left: 0;
+    margin-bottom: 0;
+    list-style: none;
+  }
+
+  .nav::after,
+  .nav::before {
+    display: table;
+    content: " ";
+  }
+
+  .nav > li,
+  .nav > li > a {
+    display: block;
+  }
+
+  .nav > li > a {
+    padding: 10px 15px;
+    text-decoration: none;
+  }
+
   .nav-tabs {
+    border-bottom: 1px solid #ddd;
+
+    li {
+      display: inline-block;
+      margin-bottom: -1px;
+    }
+
     li > a {
       color: #8A8A8A;
       border-radius: 2px 2px 0 0;
       font-size: 12px;
-    }
-    li.active > a {
-      background-color: $background-color;
-      color: #696969;
+      line-height: 1.428571429;
+      margin-right: 2px;
+      border: 1px solid transparent;
+
+      &.active {
+        background-color: $background-color !important;
+        color: #696969;
+        cursor: default;
+        border: 1px solid #ddd;
+        border-bottom-color: transparent;
+      }
     }
   }
+
   .tab-content {
     background-color: $background-color;
     max-height: 600px;
     overflow: auto;
     height: 100%;
-
-    > .tab-pane {
-      height: 100%;
-
-      &.active {
-        padding: 15px 15px 0;
-      }
-    }
+    font-size: 12px;
+    line-height: 1.428571429;
   }
+
   pre {
-    border: none;
-    margin: 0;
-    padding: 0;
     background-color: $background-color;
     height: 100%;
   }

diff --git a/tests/dummy/app/styles/form.scss b/tests/dummy/app/styles/form.scss
@@ -34,6 +34,10 @@
   margin: 0 0 20px;
 }
 
+.form-control {
+  height: 34px;
+}
+
 .has-error .form-control:focus,
 .has-success .form-control:focus {
   box-shadow: none;

diff --git a/tests/dummy/app/styles/navbar.scss b/tests/dummy/app/styles/navbar.scss
@@ -1,48 +1,45 @@
-.navbar.navbar-light {
+.navbar {
   background-color: white;
   margin: 0;
   border-radius: 0;
   border-width: 0;
   border-bottom-width: 1px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  font-size: 16px;
+  padding: 0 20px;
+
+  a {
+    text-decoration: none;
+  }
 
   .navbar-brand {
     color: #797979;
-    font-size: 16px;
     font-weight: 400;
+    display: block;
+    height: 50px;
+    display: flex;
+    align-items: end;
+    padding-bottom: 10px;
+
     img {
       height: 32px;
       display: inline-block;
-      margin-top: -15px;
     }
+
     span {
       font-size: 12px;
       vertical-align: super;
       text-transform: uppercase;
       color: #444444;
     }
   }
-  .navbar-nav a {
-    font-size: 14px;
-    font-weight: 200;
-    color: #444444;
 
-    .fa-caret-down {
-      margin-left: 3px;
-      margin-right: 3px;
-    }
-
-    &.github {
-      font-size: 24px;
-    }
-  }
-  .navbar-nav a:focus,
-  .navbar-nav a:hover {
-    color: $accent-color;
-  }
-  .navbar-nav > .active > a,
-  .navbar-nav > .active > a:focus,
-  .navbar-nav > .active > a:hover {
-    color: $accent-color;
-    background-color: transparent;
+  .github {
+    font-size: 24px;
+    color: #333;
   }
 }
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,39 +1,13 @@
 {{! template-lint-disable }}
 
-<BsNavbar fluid=true collapsed=true as |navbar|>
-  <div class="navbar-header">
-    <navbar.toggle />
-    <LinkTo @route='index' class='navbar-brand'>
-      <img src='images/ember-logo.png' alt=''>
-      <span>CP Validations</span>
-    </LinkTo>
-  </div>
+<div class="navbar">
+  <LinkTo @route='index' class='navbar-brand'>
+    <img src='images/ember-logo.png' alt=''>
+    <span>CP Validations</span>
+  </LinkTo>
 
-  <navbar.content>
-    <navbar.nav class="ml-auto" as |nav|>
-      <nav.dropdown as |dd|>
-        <dd.toggle>Documentation <span class="caret"></span></dd.toggle>
-        <dd.menu as |ddm|>
-          <ddm.item>
-            <a class="dropdown-item" href='docs'>v4.x</a>
-          </ddm.item>
-          <ddm.item>
-            <a class="dropdown-item" href='https://rawgit.com/adopted-ember-addons/ember-cp-validations/c4123c983e54f24dd790ffa1bad66cfdf2f47ec6/docs/index.html'>v3.x</a>
-          </ddm.item>
-          <ddm.item>
-            <a class="dropdown-item" href='https://rawgit.com/adopted-ember-addons/ember-cp-validations/c08fedbf3dcfff1e8904a6469c8defd1fc2bfdf5/docs/index.html'>v2.x</a>
-          </ddm.item>
-        </dd.menu>
-      </nav.dropdown>
-    </navbar.nav>
-
-    <navbar.nav as |nav|>
-      <nav.item>
-        <a href='https://github.com/adopted-ember-addons/ember-cp-validations' class='fa fa-github github'></a>
-      </nav.item>
-    </navbar.nav>
-  </navbar.content>
-</BsNavbar>
+  <a href='https://github.com/adopted-ember-addons/ember-cp-validations' class='fa fa-github github'></a>
+</div>
 
 <div class='content'>
   {{outlet}}

diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
@@ -72,22 +72,14 @@
 
 {{#unless this.isRegistered}}
   <div class='snippet-container {{if this.showCode 'show'}}'>
-    {{#bs-tab as |tab|}}
-      {{#tab.pane title="models/user.js"}}
-        {{code-snippet name='user-model.js'}}
-      {{/tab.pane}}
-
-      {{#tab.pane title="models/user-detail.js"}}
-        {{code-snippet name='user-detail-model.js'}}
-      {{/tab.pane}}
-
-      {{#tab.pane title="validated-input.js"}}
-        {{code-snippet name='validated-input.js'}}
-      {{/tab.pane}}
-
-      {{#tab.pane title="validated-input.hbs"}}
-        {{code-snippet name='validated-input.hbs'}}
-      {{/tab.pane}}
-    {{/bs-tab}}
+    <ul class="nav nav-tabs">
+      <li><LinkTo @route="index" @query={{hash file="user-model.js"}}>models/user.js</LinkTo></li>
+      <li><LinkTo @route="index" @query={{hash file="user-detail-model.js"}}>models/user-detail.js</LinkTo></li>
+      <li><LinkTo @route="index" @query={{hash file="validated-input.js"}}>validated-input.js</LinkTo></li>
+      <li><LinkTo @route="index" @query={{hash file="validated-input.hbs"}}>validated-input.hbs</LinkTo></li>
+    </ul>
+    <div class="tab-content">
+      {{code-snippet name=this.file}}
+    </div>
   </div>
 {{/unless}}