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

AlaskaAirlines · Oct 30, 2023 · 169ab71 · 169ab71
1 parent 82840ac
commit 169ab71
Show file tree

Hide file tree

Showing 8 changed files with 841 additions and 626 deletions.
diff --git a/.github/workflows/publishDemo.yml b/.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}}
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <!--
 The README.md file is a compiled document. No edits should be made directly to this file.
 
-README.md is created by running `npm run build:markdownDocs`.
+README.md is created by running `npm run build:docs`.
 
 This file is generated based on a template fetched from
 `https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README.md`
@@ -15,108 +15,103 @@ The following sections are editable by making changes to the following files:
 | Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |
 | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
 | Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |
--->
-
-# Dropdown
-
-The `auro-dropdown` component is a trigger and dropdown element combination intended to be used with dropdown content that is interactive. `auro-dropdown` is content agnostic and any valid HTML can be placed in either the trigger or the dropdown.
-
-_Note: if the dropdown content in your implementation is not interactive (e.g. a tooltip) [auro-popover](http://auro.alaskaair.com/components/auro/popover) may better serve your needs._
-
-## UI development browser support
-
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
-
-## Install
-
+-->
+
+# Dropdown
+
+The `auro-dropdown` component is a trigger and dropdown element combination intended to be used with dropdown content that is interactive. `auro-dropdown` is content agnostic and any valid HTML can be placed in either the trigger or the dropdown.
+
+_Note: if the dropdown content in your implementation is not interactive (e.g. a tooltip) [auro-popover](http://auro.alaskaair.com/components/auro/popover) may better serve your needs._
+
+## UI development browser support
+
+For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
+
+## Install
+
 [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-dropdown/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-dropdown/actions/workflows/testPublish.yml)
 [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-dropdown?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-dropdown)
 [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-dropdown?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
-[![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@aurodesignsystem/auro-dropdown?style=for-the-badge)](https://snyk.io/test/npm/@aurodesignsystem/auro-dropdown?tab=issues)
 
 ```shell
 $ npm i @aurodesignsystem/auro-dropdown
 ```
 
-Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
-
-### Design Token CSS Custom Property dependency
-
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
-
-### CSS Custom Property fallbacks
-
+Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
+
+### Design Token CSS Custom Property dependency
+
+The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
+
+### CSS Custom Property fallbacks
+
 [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) are [not supported](https://auro.alaskaair.com/support/custom-properties) in older browsers. For this, fallback properties are pre-generated and included with the npm.
 
-Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
-
-### Define dependency in project component
-
-Defining the component dependency within each component that is using the `<auro-dropdown>` component.
-
+Any update to the Auro Design Tokens will be immediately reflected with browsers that support CSS custom properties, legacy browsers will require updated components with pre-generated fallback properties.
+
+### Define dependency in project component
+
+Defining the component dependency within each component that is using the `<auro-dropdown>` component.
+
 ```js
 import "@aurodesignsystem/auro-dropdown";
-```
-
-**Reference component in HTML**
-
+```
+
+**Reference component in HTML**
+
 ```html
 <auro-dropdown aria-label="custom label">
   Lorem ipsum solar
   <div slot="trigger">
     Trigger
   </div>
-</auro-dropdown>
-```
-
-## CDN Use
-
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use.
-
-### Install
-Include the following example HTML code in the `<head>` element of your page.
-
+</auro-dropdown>
+```
+
+## Install bundled assets from CDN
+
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-dropdown__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
+
+We recommend you load these bundles using [differential serving](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) so that the browser only loads the bundle correctly. To accomplish this, the script tag for the modern bundle should have `type="module"` and the script tag.
+
+### Bundle example code
+
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dropdown@latest/dist/auro-dropdown__bundled.js" type="module"></script>
-```
-
-**NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk.
-
-### CDN options
-
-Both [Unpkg](https://www.unpkg.com/) and [JSDelivr](https://www.jsdelivr.com/) are free open source options that you can use. These are 3rd party resources and Auro is not responsible for their uptime. **Use at your own risk.** These bundle resources are included with the npm package, you are free to use any CDN resource that fits your needs.
-
-## auro-dropdown use cases
-
+<!-- **NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. @latest is NOT aware of any MAJOR releases, use at your own risk. -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials.css" />
+<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dropdown@latest/dist/auro-dropdown__bundled.js" type="module"></script>
+```
+
+## auro-dropdown use cases
+
 The `auro-dropdown` element should be used in situations where users may:
 
 * interact with an element to get clarification on content offering
 * provide definition to iconic imagery
-* when interactive help is required
-
-## API Code Examples
-
-### Default auro-dropdown
-
+* when interactive help is required
+
+## API Code Examples
+
+### Default auro-dropdown
+
 ```html
 <auro-dropdown aria-label="custom label">
   Lorem ipsum solar
   <div slot="trigger">
     Trigger
   </div>
-</auro-dropdown>
-```
-
-## Development
-
+</auro-dropdown>
+```
+
+## Development
+
 In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
 
-Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
-
-### Start development environment
-
+Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
+
+### Start development environment
+
 Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
 
 ```shell
@@ -131,21 +126,17 @@ If running separate sessions is preferred, please run the following commands in
 $ npm run build:watch
 
 $ npm run serve
-```
-
-### API generation
-
-The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.
-
-### Testing
-
-Automated tests are required for every Auro component. See `.\test\auro-dropdown.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
-
-### Bundled assets
-
-Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.
-
-### Demo deployment
-
-To deploy a demo version of the component for review, run `npm run build:demo` to create a `./build` directory that can be pushed to any static server.
-
+```
+
+### API generation
+
+The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.
+
+### Testing
+
+Automated tests are required for every Auro component. See `.\test\auro-dropdown.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
+
+### Bundled assets
+
+Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.
+