https://github.com/alaskaairlines/auro-popover

Custom element to displays additional information
https://github.com/alaskaairlines/auro-popover

auro custom-element design-system

Last synced: about 1 month ago
JSON representation

Custom element to displays additional information

• Host: GitHub
• URL: https://github.com/alaskaairlines/auro-popover
• Owner: AlaskaAirlines
• License: apache-2.0
• Created: 2020-07-29T22:48:50.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-11-11T17:28:02.000Z (about 2 months ago)
• Last Synced: 2024-11-11T18:29:25.230Z (about 2 months ago)
• Topics: auro, custom-element, design-system
• Language: JavaScript
• Homepage: https://auro.alaskaair.com/components/auro/popover
• Size: 1.46 MB
• Stars: 0
• Watchers: 12
• Forks: 3
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


# Popover

The Auro Design System fully supports `top` and `bottom` placed popovers. The following examples illustrate common popover uses followed up by code examples.

See for more information as how to install and full API for the `` element.

## 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-popover/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-popover/actions/workflows/testPublish.yml)

[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-popover?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-popover)

[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-popover?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)

![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)

```shell

$ npm i @aurodesignsystem/auro-popover

```

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).

### Define dependency in project component

Defining the component dependency within each component that is using the `` component.

```js

import "@aurodesignsystem/auro-popover";

```

**Reference component in HTML**

```html

  Top popover content!

  Popover Test

  Popover content!

  Popover Test

```

## 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-popover__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.

**WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.

### Bundle example code

```html

```

## auro-popover use cases

The `auro-popover` 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 helper text is required

## API Code Examples

### Default auro-popover

```html

  Top popover content!

  Popover Test

  Popover content!

  Popover Test

```

## 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

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

$ npm run dev

```

Open [localhost:8000](http://localhost:8000/)

If running separate sessions is preferred, please run the following commands in individual terminal shells.

```shell

$ 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-popover.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.