Update docs & add BasicDropdownWormhole component

cibernox · Dec 5, 2023 · 413812e · 413812e
1 parent 10e3914
commit 413812e
Show file tree

Hide file tree

Showing 12 changed files with 31 additions and 20 deletions.
diff --git a/docs/app/index.html b/docs/app/index.html
@@ -18,8 +18,6 @@
 
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/docs.js"></script>
-
-    <div id="ember-basic-dropdown-wormhole"></div>
 
     {{content-for "body-footer"}}
   </body>

diff --git a/docs/app/templates/application.hbs b/docs/app/templates/application.hbs
@@ -1 +1,3 @@
-{{outlet}}
+{{outlet}}
+
+<BasicDropdownWormhole />
diff --git a/docs/app/templates/public-pages/docs/installation.hbs b/docs/app/templates/public-pages/docs/installation.hbs
@@ -2,30 +2,41 @@
 
 <p>
   Ember-basic-dropdown is distributed as an
-  <a href='http://www.ember-cli.com/'>Ember CLI</a>
-  addon, so the only thing you need to do to install it is run the following
+  <a href='https://www.ember-cli.com/'>Ember CLI</a>
+  addon, so you need to install it is run the following
   command in your ember project directory
 </p>
 
 <div class='highlight'>
   <pre>
-    <code class='language-text' data-lang='text'>
-      $ ember install ember-basic-dropdown
-    </code>
+    <code class='language-text' data-lang='text'>$ ember install ember-basic-dropdown</code>
   </pre>
 </div>
 
 <p>
-  If you use just vanilla CSS, you're good to go. Ember-basic-dropdown will add
-  the default styles to your vendor css file.
+  After you have installed you need to add the following lines in your <code>application.hbs</code>. In this component there will be rendered the drop down.
 </p>
 
+<div class='highlight'>
+  <pre>
+    <code class='language-text' data-lang='text'>&lt;BasicDropdownWormhole /&gt;</code>
+  </pre>
+</div>
+
 <p>
-  However, if you are using SASS or LESS won't load any style by default.
-  Instead you need add an import statement to your styles explicitly.
+  If you use vanilla CSS, you need to add the following line into <code>ember-cli-build.js</code>:
 </p>
 
-{{get-code-snippet "installation-1.scss"}}
+<CodeBlock @language="css" @code="app.import('node_modules/ember-basic-dropdown/dist/css/base.css');" />
+
+<p>
+  However, if you are using SASS or LESS you need add an import statement to your styles.
+</p>
+
+
+{{#let (get-code-snippet "installation-1.scss") as |snippet|}}
+  <CodeBlock @language="scss" @code={{snippet.source}} />
+{{/let}}
 
 <br />
 

diff --git a/docs/tests/index.html b/docs/tests/index.html
@@ -32,8 +32,6 @@
     <script src="{{rootURL}}assets/test-support.js"></script>
     <script src="{{rootURL}}assets/docs.js"></script>
     <script src="{{rootURL}}assets/tests.js"></script>
-
-    <div id="ember-basic-dropdown-wormhole"></div>
 
     {{content-for "body-footer"}}
     {{content-for "test-body-footer"}}

diff --git a/ember-basic-dropdown/package.json b/ember-basic-dropdown/package.json
@@ -132,6 +132,7 @@
     "app-js": {
       "./components/basic-dropdown-content.js": "./dist/_app_/components/basic-dropdown-content.js",
       "./components/basic-dropdown-trigger.js": "./dist/_app_/components/basic-dropdown-trigger.js",
+      "./components/basic-dropdown-wormhole.js": "./dist/_app_/components/basic-dropdown-wormhole.js",
       "./components/basic-dropdown.js": "./dist/_app_/components/basic-dropdown.js",
       "./modifiers/basic-dropdown-trigger.js": "./dist/_app_/modifiers/basic-dropdown-trigger.js",
       "./test-support/helpers.js": "./dist/_app_/test-support/helpers.js"

diff --git a/ember-basic-dropdown/rollup.config.mjs b/ember-basic-dropdown/rollup.config.mjs
@@ -64,12 +64,12 @@ export default {
     copy({
       targets: [
         {
-          src: 'src/styles/ember-basic-dropdown.scss',
+          src: 'src/css/ember-basic-dropdown.scss',
           dest: 'dist',
           rename: '_index.scss',
         },
         {
-          src: 'src/styles/ember-basic-dropdown.less',
+          src: 'src/css/ember-basic-dropdown.less',
           dest: 'dist',
           rename: '_index.less',
         },

diff --git a/ember-basic-dropdown/src/components/basic-dropdown-wormhole.hbs b/ember-basic-dropdown/src/components/basic-dropdown-wormhole.hbs
@@ -0,0 +1 @@
+<div id="ember-basic-dropdown-wormhole"></div>
diff --git a/...pdown/src/styles/ember-basic-dropdown.css → ember-basic-dropdown/src/css/base.css b/...pdown/src/styles/ember-basic-dropdown.css → ember-basic-dropdown/src/css/base.css
diff --git a/...down/src/styles/ember-basic-dropdown.less → ...ropdown/src/css/ember-basic-dropdown.less b/...down/src/styles/ember-basic-dropdown.less → ...ropdown/src/css/ember-basic-dropdown.less
diff --git a/...down/src/styles/ember-basic-dropdown.scss → ...ropdown/src/css/ember-basic-dropdown.scss b/...down/src/styles/ember-basic-dropdown.scss → ...ropdown/src/css/ember-basic-dropdown.scss
diff --git a/test-app/app/index.html b/test-app/app/index.html
@@ -18,8 +18,6 @@
 
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/test-app.js"></script>
-
-    <div id="ember-basic-dropdown-wormhole"></div>
 
     {{content-for "body-footer"}}
   </body>

diff --git a/test-app/app/templates/application.hbs b/test-app/app/templates/application.hbs
@@ -1 +1,3 @@
-{{outlet}}
+{{outlet}}
+
+<BasicDropdownWormhole />