From 413812eac2e669dc4270c638b261cb09a7fc8b2a Mon Sep 17 00:00:00 2001
From: Markus Sanin <markus.sanin@zeppelin-group.com>
Date: Tue, 5 Dec 2023 08:28:51 +0100
Subject: [PATCH] Update docs & add BasicDropdownWormhole component

---
 docs/app/index.html                           |  2 --
 docs/app/templates/application.hbs            |  4 ++-
 .../public-pages/docs/installation.hbs        | 31 +++++++++++++------
 docs/tests/index.html                         |  2 --
 ember-basic-dropdown/package.json             |  1 +
 ember-basic-dropdown/rollup.config.mjs        |  4 +--
 .../components/basic-dropdown-wormhole.hbs    |  1 +
 .../ember-basic-dropdown.css => css/base.css} |  0
 .../{styles => css}/ember-basic-dropdown.less |  0
 .../{styles => css}/ember-basic-dropdown.scss |  0
 test-app/app/index.html                       |  2 --
 test-app/app/templates/application.hbs        |  4 ++-
 12 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 ember-basic-dropdown/src/components/basic-dropdown-wormhole.hbs
 rename ember-basic-dropdown/src/{styles/ember-basic-dropdown.css => css/base.css} (100%)
 rename ember-basic-dropdown/src/{styles => css}/ember-basic-dropdown.less (100%)
 rename ember-basic-dropdown/src/{styles => css}/ember-basic-dropdown.scss (100%)

diff --git a/docs/app/index.html b/docs/app/index.html
index d1f1f1a9..afb9b035 100644
--- 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
index e2147cab..b2e33d99 100644
--- a/docs/app/templates/application.hbs
+++ b/docs/app/templates/application.hbs
@@ -1 +1,3 @@
-{{outlet}}
\ No newline at end of file
+{{outlet}}
+
+<BasicDropdownWormhole />
\ No newline at end of file
diff --git a/docs/app/templates/public-pages/docs/installation.hbs b/docs/app/templates/public-pages/docs/installation.hbs
index 81bce981..22bdb475 100644
--- 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
index 61932c70..a5c5bfd9 100644
--- 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
index adaa8a2c..dc2156b2 100644
--- 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
index 328c4f96..06acc51b 100644
--- 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
new file mode 100644
index 00000000..fe3e76b1
--- /dev/null
+++ b/ember-basic-dropdown/src/components/basic-dropdown-wormhole.hbs
@@ -0,0 +1 @@
+<div id="ember-basic-dropdown-wormhole"></div>
\ No newline at end of file
diff --git a/ember-basic-dropdown/src/styles/ember-basic-dropdown.css b/ember-basic-dropdown/src/css/base.css
similarity index 100%
rename from ember-basic-dropdown/src/styles/ember-basic-dropdown.css
rename to ember-basic-dropdown/src/css/base.css
diff --git a/ember-basic-dropdown/src/styles/ember-basic-dropdown.less b/ember-basic-dropdown/src/css/ember-basic-dropdown.less
similarity index 100%
rename from ember-basic-dropdown/src/styles/ember-basic-dropdown.less
rename to ember-basic-dropdown/src/css/ember-basic-dropdown.less
diff --git a/ember-basic-dropdown/src/styles/ember-basic-dropdown.scss b/ember-basic-dropdown/src/css/ember-basic-dropdown.scss
similarity index 100%
rename from ember-basic-dropdown/src/styles/ember-basic-dropdown.scss
rename to ember-basic-dropdown/src/css/ember-basic-dropdown.scss
diff --git a/test-app/app/index.html b/test-app/app/index.html
index 2d41f2bf..90cb9a37 100644
--- 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
index e2147cab..b2e33d99 100644
--- a/test-app/app/templates/application.hbs
+++ b/test-app/app/templates/application.hbs
@@ -1 +1,3 @@
-{{outlet}}
\ No newline at end of file
+{{outlet}}
+
+<BasicDropdownWormhole />
\ No newline at end of file