feat(modal): make popover modal below breakpoint #183

.github/workflows/publishDemo.yml

@@ -0,0 +1,11 @@
+name: Deploy Demo
+
+on:
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  call-publish-demo-workflow:
+    uses: AlaskaAirlines/auro-library/.github/workflows/publishDemo.yml@main
+    secrets:
+      AURO_SURGE_TOKEN: ${{secrets.AURO_SURGE_TOKEN}}

.husky/_/husky.sh

@@ -1,36 +0,0 @@
-#!/usr/bin/env sh
-if [ -z "$husky_skip_init" ]; then
-  debug () {
-    if [ "$HUSKY_DEBUG" = "1" ]; then
-      echo "husky (debug) - $1"
-    fi
-  }
-
-  readonly hook_name="$(basename -- "$0")"
-  debug "starting $hook_name..."
-
-  if [ "$HUSKY" = "0" ]; then
-    debug "HUSKY env variable is set to 0, skipping hook"
-    exit 0
-  fi
-
-  if [ -f ~/.huskyrc ]; then
-    debug "sourcing ~/.huskyrc"
-    . ~/.huskyrc
-  fi
-
-  readonly husky_skip_init=1
-  export husky_skip_init
-  sh -e "$0" "$@"
-  exitCode="$?"
-
-  if [ $exitCode != 0 ]; then
-    echo "husky - $hook_name hook exited with code $exitCode (error)"
-  fi
-
-  if [ $exitCode = 127 ]; then
-    echo "husky - command not found in PATH=$PATH"
-  fi
-
-  exit $exitCode
-fi

apiExamples/common.html

@@ -1,10 +1,42 @@
+<auro-dropdown id="common" common modal aria-label="Label content for screen reader">
+  <div style="padding: var(--auro-size-sm);">
+    Lorem ipsum solar
+    <br />
+    <input />
+    <auro-button onclick="document.querySelector('#common').hide()">
+      Dismiss Dropdown
+    </auro-button>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <input />
+  </div>
+  <span slot="helpText">
+    Help text
+  </span>
+  <div slot="trigger">
+    Trigger
+  </div>
+</auro-dropdown>
+
+### Default
+
 <auro-dropdown id="common" common aria-label="Label content for screen reader">
-  <div style="padding: var(--ds-size-150);">
+  <div style="padding: var(--auro-size-sm);">
     Lorem ipsum solar
     <br />
+    <input />
     <auro-button onclick="document.querySelector('#common').hide()">
       Dismiss Dropdown
     </auro-button>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Purus in mollis nunc sed. Cursus eget nunc scelerisque viverra. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Viverra vitae congue eu consequat ac felis. Amet volutpat consequat mauris nunc congue nisi. Praesent tristique magna sit amet purus gravida quis blandit turpis. Risus sed vulputate odio ut enim blandit volutpat maecenas volutpat. Consectetur lorem donec massa sapien faucibus et molestie. Non odio euismod lacinia at quis risus sed vulputate. Id ornare arcu odio ut sem. Eget mi proin sed libero. Dui accumsan sit amet nulla. Tellus integer feugiat scelerisque varius morbi enim. Fermentum iaculis eu non diam phasellus vestibulum. Sed risus pretium quam vulputate dignissim suspendisse in est ante. Dolor morbi non arcu risus quis varius.</p>
+    <input />
   </div>
   <span slot="helpText">
     Help text

demo/api.md

@@ -20,6 +20,7 @@
 | [inset](#inset)                 | `inset`                 | ` Boolean ` |         | If declared, will apply padding around trigger slot content. |
 | [isPopoverVisible](#isPopoverVisible)      | `isPopoverVisible`      | ` Boolean ` | false   | If true, the dropdown bib is displayed.          |
 | [matchWidth](#matchWidth)            | `matchWidth`            | ` Boolean ` | false   | If declared, the popover and trigger will be set to the same width. |
+| [modalTrigger](#modalTrigger)          | `modalTrigger`          | ` Boolean ` | false   | If declared, the dropdown will be displayed as a modal on a mobile device. |
 | [noHideOnThisFocusLoss](#noHideOnThisFocusLoss) | `noHideOnThisFocusLoss` | ` Boolean ` | false   | If delclared, the dropdown will not hide when moving focus outside the element. |
 | [noToggle](#noToggle)              | `noToggle`              | ` Boolean ` |         | If declared, the trigger will only show the the dropdown bib. |
 | [ready](#ready)                 | `ready`                 | ` Boolean ` |         | When false the component API should not be called. |