PR - feat extend navs with nav buttons

.github/actions/build-action/action.yml

@@ -28,36 +28,36 @@ runs:
     - name: get-npm-version
       id: package-version
       uses: martinbeentjes/npm-get-version-action@v1.3.1
-    - name: "build minified main css library, js plugins and demo in standalone mode"
+    - name: BETA-PREVIEW build minified main css library, js plugins and demo in standalone mode
       if: ${{ inputs.stage != 'release' }}
       env:
         PACKAGE_VERSION: v${{ steps.package-version.outputs.current-version }}-${{ inputs.stage }}
       run: |
         npm install
         npm run lint
-        npm run build
+        npm run build:lib        
         parcel build --target demo --no-source-maps --no-content-hash --public-url ./v${{ steps.package-version.outputs.current-version }}-${{ inputs.stage }}
         npm run test --if-present
       shell: bash
-    - name: "build minified main css library, js plugins and demo in standalone mode"
-      if: ${{ inputs.stage == 'release' }} && {{ inputs.release_update_only == "false" }}
+    - name: "RELEASE - build minified main css library, js plugins and demo in standalone mode"
+      if: ${{ inputs.stage == 'release' && inputs.release_update_only == 'false' }}
       env:
         PACKAGE_VERSION: v${{ steps.package-version.outputs.current-version }}
       run: |
         npm install
         npm run lint
-        npm run build
+        npm run build:lib         
         parcel build --target demo --no-source-maps --no-content-hash --public-url ./v${{ steps.package-version.outputs.current-version }}
         npm run test --if-present
       shell: bash
-    - name: "update only release demo page"
-      if: ${{ inputs.stage == 'release' }} && {{ inputs.release_update_only == "true" }}
+    - name: "RELEASE - update only release demo page"
+      if: ${{ inputs.stage == 'release' && inputs.release_update_only == 'true' }}
       env:
         PACKAGE_VERSION: v${{ steps.package-version.outputs.current-version }}
       run: |
         npm install
         npm run lint
-        npm run build
+        npm run build:lib         
         parcel build --target demo --no-source-maps --no-content-hash --public-url ./
         npm run test --if-present
       shell: bash

.github/actions/deploy-action/action.yml

@@ -29,5 +29,5 @@ runs:
           az extension add -n storage-preview -y
           az storage blob upload-batch -s  $DEMO_SOURCE_DIR -d $DEMO_DEST_DIR --account-name $ACCOUNT_NAME
           az storage blob upload-batch -s  $DIST_SOURCE_DIR -d $DIST_DEST_DIR --account-name $ACCOUNT_NAME
-          az cdn endpoint purge -g rg-devops -n mgplus-demo --profile-name cdn-evo --content-paths '/${{ inputs.package_version }}'
-          az cdn endpoint purge -g rg-devops -n cdn-mgplus --profile-name cdn-evo2 --content-paths '/${{ inputs.package_version }}'
+          az cdn endpoint purge -g rg-devops -n mgplus-demo --profile-name cdn-evo --content-paths /${{ inputs.package_version }}/*
+          az cdn endpoint purge -g rg-devops -n cdn-mgplus --profile-name cdn-evo2 --content-paths /${{ inputs.package_version }}/*

.github/workflows/azure-cdn-deploy.yml

@@ -18,13 +18,13 @@ jobs:
   deploy_pullrequest:
     if: github.event_name == 'pull_request' && github.event.action != 'closed'
     runs-on: ubuntu-latest
-    name: CDN - deploy PR version
+    name: CDN - deploy beta version
     permissions:
       contents: read
       id-token: write
     steps:
       - uses: actions/checkout@v3
-      - name: "build lib and demo"
+      - name: "BETA - build lib and demo"
         id: "build_action"
         uses: ./.github/actions/build-action
         with:
@@ -36,12 +36,12 @@ jobs:
           tenant-id: ${{ secrets.AZURE_TENANT_ID }}
           subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
           enable-AzPSSession: true
-      - name: "deploy lib and demo"
+      - name: "BETA - deploy lib and demo"
         id: "deploy_action"
         uses: ./.github/actions/deploy-action
         with:
-          package_version: ${{ steps.build_action.outputs.package_version }}
-          stage: "beta-${{ github.event.pull_request.number }}"
+          package_version: "${{ steps.build_action.outputs.package_version }}"
+          stage: "beta"
   deploy_preview:
     if: github.event_name == 'push' && startsWith(github.ref, 'refs/heads/master') == true
     runs-on: ubuntu-latest
@@ -51,7 +51,7 @@ jobs:
       id-token: write
     steps:
       - uses: actions/checkout@v3
-      - name: "build lib and demo"
+      - name: "PREVIEW - build lib and demo"
         uses: ./.github/actions/build-action
         id: "build_action"
         with:
@@ -63,7 +63,7 @@ jobs:
           tenant-id: ${{ secrets.AZURE_TENANT_ID }}
           subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
           enable-AzPSSession: true
-      - name: "deploy lib and demo"
+      - name: "PREVIEW - deploy lib and demo"
         id: "deploy_action"
         uses: ./.github/actions/deploy-action
         with:
@@ -78,7 +78,7 @@ jobs:
       id-token: write
     steps:
       - uses: actions/checkout@v3
-      - name: "build lib and demo"
+      - name: "RELEASE - build lib and demo"
         uses: ./.github/actions/build-action
         id: "build_action"
         with:
@@ -90,7 +90,7 @@ jobs:
           tenant-id: ${{ secrets.AZURE_TENANT_ID }}
           subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
           enable-AzPSSession: true
-      - name: "deploy lib and demo"
+      - name: "RELEASE - deploy lib and demo"
         id: "deploy_action"
         uses: ./.github/actions/deploy-action
         with:

demo/index.html

@@ -26,13 +26,11 @@
             <i class="mg-icon svg-icon-darkmode"></i>
           </button>
           <div class="mg-dropdown--content">
-            <div class="mg-nav">
-              <ul>
-                <li data-toggle="theme" data-value="light">Light</li>
-                <li data-toggle="theme" data-value="dark">Dark</li>
-                <li data-toggle="theme" data-value="auto">Auto</li>
-              </ul>
-            </div>
+            <ul class="mg-nav">
+              <li data-toggle="theme" data-value="light">Light</li>
+              <li data-toggle="theme" data-value="dark">Dark</li>
+              <li data-toggle="theme" data-value="auto">Auto</li>
+            </ul>
           </div>
         </div>
         <div class="mg-dropdown">
@@ -64,10 +62,8 @@
           <i class="mg-icon mg-icon--3xl icon-menu"></i>
         </button>
         <div class="mg-dropdown--content mg-right">
-          <div class="mg-nav">
-            <ul data-toggle="navlinks" class="mg-text-bold">
-            </ul>
-          </div>
+          <ul data-toggle="navlinks" class="mg-nav mg-text-bold">
+          </ul>
         </div>
       </div>
 
@@ -108,10 +104,8 @@ <h2>A micro CSS library </h2>
   <div
     class="mg-fixed mg-top5 mg-right mg-bg-initial mg-rounded mg-border-thin mg-marg-l1 mg-marg-r1 mg-pad1 mg-xl-hidden">
     <div class=" mg-max-h80vh mg-overflow-y-auto">
-      <div class="mg-nav">
-        <ul data-toggle="navlinks" class="mg-text-bold">
-        </ul>
-      </div>
+      <ul data-toggle="navlinks" class="mg-nav mg-text-bold">
+      </ul>
     </div>
   </div>
   <main class="mg-container">
@@ -130,7 +124,6 @@ <h2>Examples</h2>
     <include src="demo/sections/colors-section.html"></include>
     <include src="demo/sections/dropdown-section.html"></include>
     <include src="demo/sections/form-section.html"></include>
-    <include src="demo/sections/grid-section.html"> </include>
     <include src="demo/sections/group-section.html"></include>
     <include src="demo/sections/helpers-section.html"></include>
     <include src="demo/sections/icons-section.html"></include>
@@ -141,6 +134,7 @@ <h2>Examples</h2>
     <include src="demo/sections/progress-section.html"></include>
     <include src="demo/sections/radio-section.html"></include>
     <include src="demo/sections/range-section.html"></include>
+    <include src="demo/sections/grid-section.html"> </include>
     <include src="demo/sections/responsive-display-section.html"></include>
     <include src="demo/sections/select-section.html"> </include>
     <include src="demo/sections/tab-section.html"></include>

demo/sections/alert-section.html

@@ -1,5 +1,6 @@
 <section id="alert">
   <h2>Alert</h2>
+  <code>mg-alert</code>
   <p>Alerts are used to display important information to the user. They are used to display important information to the
     user. They are used to display important information to the user.</p>
   <div data-toggle="htmlpreview">

demo/sections/badge-section.html

@@ -1,5 +1,6 @@
 <section id="badges">
   <h2>Badges</h2>
+  <code>mg-badge</code>
   <p>Badges are used to display important information to the user. They are used to display important information to the
     user. They are used to display important information to the user.</p>
   <h3>Default appearance</h3>

demo/sections/check-section.html

@@ -1,5 +1,6 @@
 <section id="check">
   <h2>Check</h2>
+  <code>mg-check</code>
   <p>You will find examples of
     checkboxes in their default, checked, and disabled states.</p>
   <div class="mg-row" id="check-example" data-toggle="htmlpreview">

demo/sections/collapse-section.html

@@ -1,36 +1,50 @@
 <section id="Collapse">
   <h2>Collapse</h2>
+  <code>mg-collapse +/-[opened]</code>
   <p>Collapsible elements are used to hide or show content based on user interaction. Below, you will find examples of
     collapsible elements in their default state, as well as examples of how to trigger the collapse and expand
     functionality.</p>
-  <i>Collapse needs js to toggle class visibility</i>
-  <div class="mg-col mg-m6" id="collapse-example" data-toggle="htmlpreview">
+  <p>Place <code>mg-collapse</code> class to a clickable element</p>
+  <p>Place <code>mg-collapse--content</code> class to a sibling content element</p>
+  <p><code>opened</code> class will toggle visibility of the collapsible content inside
+    <code>mg-collapse--content</code>
+  </p>
+  <p>Place special inline icon <code>mg-icon-collapse</code> to reflect state of collapsible content</p>
+
+
+  <div class="mg-col mg-m6" data-toggle="htmlpreview">
     <button class="mg-button mg-button--outline mg-collapse mg-icon-collapse" data-toggle="collapse">collapse
       Button</button>
     <div class="mg-collapse--content">
       Content 1
     </div>
+  </div>
+
+  <div data-toggle="htmlpreview">
     <span class="mg-collapse mg-icon-collapse" data-toggle="collapse">Collapse div</span>
     <div class="mg-collapse--content">
-      Content 2
+      div content
     </div>
   </div>
+  </div>
   <h3>Collapsible navs</h3>
-  <div id="collapse-navs-example" data-toggle="htmlpreview" data-toggle="nav">
-    <div class="mg-nav mg-m6" data-toggle="nav">
-      <ul>
-        <li class="active"><a href="#home">Home</a></li>
-        <li><a href="#news">News</a></li>
-        <li class="mg-collapse mg-icon-nav" data-toggle="collapse"><a href="#contact">Contact</a>
-        </li>
-        <ul class="mg-collapse--content">
+  Here is a composition of navs and collapse elements
+  <div data-toggle="htmlpreview" data-toggle="nav">
+    <ul class="mg-nav" data-toggle="nav">
+      <li class="active"><a href="#home">Home</a></li>
+      <li><a href="#news">News</a></li>
+      <li class="mg-collapse mg-icon-nav" data-toggle="collapse"><a href="#contact">Contact</a>
+      </li>
+      <div class="mg-collapse--content">
+        <ul class="mg-nav">
           <li>Contact sales</li>
           <li>Contact customer</li>
           <li>Contact care</li>
         </ul>
-        <li><a href="#about">About</a></li>
-      </ul>
-    </div>
+      </div>
+      <li><a href="#about">About</a></li>
+    </ul>
+
   </div>
 
 </section>

demo/sections/dropdown-section.html

@@ -3,54 +3,62 @@ <h2>Dropdown</h2>
   <p>Dropdowns are used to display a
     list of options to the user. Below, you will find examples of dropdowns in their default state, as well as examples
     of how to trigger the dropdown functionality.</p>
-  <i>Dropdown needs js to toggle class visibility</i>
-  <div data-toggle="htmlpreview">
-    <div class="mg-dropdown" role="menu" id="dropdown-example">
+  <p>Place <code>mg-dropdown</code> as container class</p>
+  <p>Inside <code>mg-dropdown</code> place a button element with special icon <code>mg-icon-dropdown</code></p>
+  <p>Place <code>mg-dropdown--content</code> after button element</p>
+  <p>Usualy, place a <code>mg-nav</code> component inside <code>mg-dropdown--content</code> to build a menu</p>
 
+
+  <div>
+    <div class="mg-dropdown" role="menu" data-toggle="htmlpreview">
       <button title="choose a car" class="mg-icon-dropdown" data-toggle="dropdown">
         Choose a car
       </button>
       <div class="mg-dropdown--content">
-        <div class="mg-nav">
-          <ul>
-            <li data-value="audi">Audi</li>
-            <li data-value="bmw">BMW</li>
-            <li data-value="citroen">Citroen</li>
-            <li data-value="ford">Ford</li>
-            <li data-value="honda">Honda</li>
-            <li data-value="jaguar">Jaguar</li>
-            <li data-value="land-rover">Land Rover</li>
-            <li data-value="mini">Mini</li>
-            <li data-value="nissan">Nissan</li>
-            <li data-value="toyota">Toyota</li>
-            <li data-value="volvo">Volvo</li>
-          </ul>
-        </div>
+        <ul class="mg-nav">
+          <li data-value="audi">Audi</li>
+          <li data-value="bmw">BMW</li>
+          <li data-value="citroen">Citroen</li>
+          <li data-value="ford">Ford</li>
+          <li data-value="honda">Honda</li>
+          <li data-value="jaguar">Jaguar</li>
+          <li data-value="land-rover">Land Rover</li>
+          <li data-value="mini">Mini</li>
+          <li data-value="nissan">Nissan</li>
+          <li data-value="toyota">Toyota</li>
+          <li data-value="volvo">Volvo</li>
+        </ul>
       </div>
     </div>
-    <div class="row">
-      <div class="mg-dropdown" role="menu" data-value="bmw" id="dropdown-example2">
-        <button title="left side" data-toggle="dropdown" class="mg-icon-dropdown">
-          left side
-        </button>
-        <div class="mg-dropdown--content mg-left mg-nav">
-          <ul>
-            <li data-value="audi">Audi</li>
-            <li data-value="bmw">BMW</li>
-            <li data-value="mercedes">Mercedes long! very very long!</li>
-          </ul>
+    <div>
+      <h3>Positioning options</h3>
+      <code>mg-dropdown--content</code> + <code>[mg-left|mg-right]</code>
+      <p>Add to <code>mg-dropdown--content</code> <code>mg-left</code> or <code>mg-right</code> to adjust left or right
+        content according to the button position</p>
+      <div class="mg-row mg-x--between" data-toggle="htmlpreview">
+        <div class="mg-dropdown" role="menu" data-value="bmw">
+          <button title="left side" data-toggle="dropdown" class="mg-icon-dropdown">
+            left side
+          </button>
+          <div class="mg-dropdown--content mg-left">
+            <ul class="mg-nav">
+              <li data-value="audi">Audi</li>
+              <li data-value="bmw">BMW</li>
+              <li data-value="mercedes">Mercedes long! very very long!</li>
+            </ul>
+          </div>
         </div>
-      </div>
-      <div class="mg-dropdown mg-right" role="menu" data-value="bmw" id="dropdown-example3">
-        <button title="right side" data-toggle="dropdown" class="mg-icon-dropdown">
-          right side
-        </button>
-        <div class="mg-dropdown--content mg-right mg-nav">
-          <ul>
-            <li data-value="audi">Audi</li>
-            <li data-value="bmw">BMW</li>
-            <li data-value="mercedes">Mercedes long! very long!</li>
-          </ul>
+        <div class="mg-dropdown" role="menu" data-value="bmw">
+          <button title="right side" data-toggle="dropdown" class="mg-icon-dropdown">
+            right side
+          </button>
+          <div class="mg-dropdown--content mg-right">
+            <ul class="mg-nav">
+              <li data-value="audi">Audi</li>
+              <li data-value="bmw">BMW</li>
+              <li data-value="mercedes">Mercedes long! very long!</li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>

demo/sections/form-section.html

@@ -19,12 +19,12 @@ <h2>Forms</h2>
         <label class="mg-toggle">
           on
           <input type="checkbox" checked />
-          <span class="mg-icon-toggle"></span>
+          <span class="mg-toggle--icon"></span>
         </label>
         <label class="mg-toggle">
           off
           <input type="checkbox" checked />
-          <span class="mg-icon-toggle"></span>
+          <span class="mg-toggle--icon"></span>
         </label>
       </div>
       <label>Checkboxes</label>