Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 42 additions & 54 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,24 +23,26 @@ The following sections are editable by making changes to the following files:
<!-- The below content is automatically added from ./docs/partials/description.md -->
`<auro-backtotop>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of providing a quick and accessible means to jump back to the top of a long content page.

The component will be hidden while the page Y scroll position is at the top. When scroll down begins the button will display in the bottom right corner of the page. While scrolling down the button will display only an arrow up icon. When scroll up occurs, the button will additionally display any slotted text content.
The component will be hidden while the page Y scroll position is at the top. When scroll down begins the button will display in the bottom right corner of the page. While scrolling down the button will display only an arrow up icon.
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
<!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
<!-- AURO-GENERATED-CONTENT:END -->

## UI development browser support
## Use Cases

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
The `<auro-backtotop>` element should be used in situations where users may:

* Pages with large amounts of content where a shortcut to jump to the top of the page is appropriate.
Comment on lines +37 to +39
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (typo): Clarify the lead-in sentence and bullet so they form a grammatically complete construction.

The current lead-in + bullet combination (“The <auro-backtotop> element should be used in situations where users may:” + “Pages with large amounts of content…”) is grammatically awkward. Consider either:

  • “The <auro-backtotop> element should be used in situations such as:”
    • “Pages with large amounts of content where a shortcut to jump to the top of the page is appropriate.”

or rephrasing the bullet to start with “On pages with large amounts of content…” so the full construction reads smoothly.

Suggested change
The `<auro-backtotop>` element should be used in situations where users may:
* Pages with large amounts of content where a shortcut to jump to the top of the page is appropriate.
The `<auro-backtotop>` element should be used in situations such as:
* Pages with large amounts of content where a shortcut to jump to the top of the page is appropriate.

<!-- AURO-GENERATED-CONTENT:END -->

## Install

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-backtotop/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-backtotop/actions/workflows/testPublish.yml)
[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-backtotop/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-backtotop/actions/workflows/release.yml)
[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-backtotop?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-backtotop)
[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-backtotop?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)
Expand All @@ -51,17 +53,10 @@ $ npm i @aurodesignsystem/auro-backtotop

<!-- AURO-GENERATED-CONTENT:END -->

### Design Token CSS Custom Property dependency

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).

<!-- AURO-GENERATED-CONTENT:END -->

### Define dependency in project component
### Define Dependency in Project

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
Defining the component dependency within each component that is using the `<auro-backtotop>` component.
Defining the dependency within each project that is using the `<auro-backtotop>` component.

<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
Expand All @@ -70,17 +65,9 @@ Defining the component dependency within each component that is using the `<auro
import "@aurodesignsystem/auro-backtotop";
```

<!-- AURO-GENERATED-CONTENT:END -->
**Reference component in HTML**
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->

```html
<auro-backtotop>Back to top</auro-backtotop>
```
<!-- AURO-GENERATED-CONTENT:END -->

## Use CDN
### Use CDN

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
Expand All @@ -91,18 +78,7 @@ In cases where the project is not able to process JS assets, there are pre-proce

<!-- AURO-GENERATED-CONTENT:END -->

## auro-backtotop use cases

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
The `<auro-backtotop>` element should be used in situations where users may:

* Pages with large amounts of content where a shortcut to jump to the top of the page is appropriate.
<!-- AURO-GENERATED-CONTENT:END -->

## API Code Examples

### Default auro-backtotop
## Basic Example

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
Expand All @@ -112,31 +88,43 @@ The `<auro-backtotop>` element should be used in situations where users may:
```
<!-- AURO-GENERATED-CONTENT:END -->

## Development
## Custom Component Registration for Version Management

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
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.
There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.

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.
When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.

<!-- AURO-GENERATED-CONTENT:END -->

### Start development environment
However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
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**.
You can do this by importing only the component class and using the `register(name)` method with a unique name:

```shell
$ npm run dev
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->

```js
// Import the class only
import { AuroBackToTop } from '@aurodesignsystem/auro-backtotop/class';

// Register with a custom name if desired
AuroBackToTop.register('custom-backtotop');
```

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

This will create a new custom element `<custom-backtotop>` that behaves exactly like `<auro-backtotop>`, allowing both to coexist on the same page without interfering with each other.
<!-- AURO-GENERATED-CONTENT:END -->
<div class="exampleWrapper exampleWrapper--flex">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
<!-- The below content is automatically added from ./apiExamples/custom.html -->
<custom-backtotop>Custom back to top</custom-backtotop>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->

### Testing

<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
Automated tests are required for every Auro component. See `.\test\auro-backtotop.test.js` for the tests for this component. Run `npm run 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.

<!-- AURO-GENERATED-CONTENT:END -->
```html
<custom-backtotop>Custom back to top</custom-backtotop>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
File renamed without changes.
File renamed without changes.
1 change: 1 addition & 0 deletions apiExamples/custom.html
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<custom-backtotop>Custom back to top</custom-backtotop>
File renamed without changes.
File renamed without changes.
16 changes: 8 additions & 8 deletions docs/api.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
# auro-backtotop

The auro-backtotop element provides users a way to quickly return to page top.
The `auro-backtotop` element provides users a way to quickly return to page top.

### Properties & Attributes

| Properties | Attributes | Type | Default | Description |
| ---------- | ---------- | ------- | --------- | ------------------------------------------------------------------------------------------------------ |
| disabled | disabled | boolean | | Render the trigger inline, will always be visible. |
| variant | variant | string | "primary" | The variant attribute allows for rendering the button using the primary (default) or secondary styles. |
| Properties | Attributes | Modifiers | Type | Default | Description |
| ---------- | ---------- | --------- | ------------------------ | --------- | ------------------------------------------------------------------------------------------------------ |
| disabled | disabled | | boolean | `false` | Render the trigger inline, will always be visible. |
| variant | variant | | `primary` \| `secondary` | `primary` | The variant attribute allows for rendering the button using the primary (default) or secondary styles. |

### Methods

| Name | Parameters | Return | Description |
| -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- |
| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
| Name | Parameters | Return | Description |
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |

### Slots

Expand Down
49 changes: 14 additions & 35 deletions docs/partials/api.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
<!-- AURO-GENERATED-CONTENT:END -->

## API Examples

### Basic
## Basic

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicButtonOnly.html) -->

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic_button-only.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>

<auro-accordion alignRight>
<span slot="trigger">See code</span>

Expand All @@ -19,14 +19,14 @@

</auro-accordion>

### Attribute Examples
## Property & Attribute Examples

#### disabled
### Disabled

This example demonstrates auro-backtotop in its disabled state.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledButtonOnly.html) -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled_button-only.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
Expand All @@ -37,58 +37,37 @@ This example demonstrates auro-backtotop in its disabled state.

</auro-accordion>

#### variant
### Variant

The `variant` attribute allows for rendering the button using the `primary` (default) or `secondary` styles.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/secondaryButtonOnly.html) -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant_button-only.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>

<auro-accordion alignRight>
<span slot="trigger">See code</span>

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/secondary.html) -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant.html) -->
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>

### Slot Examples

#### default

The default slot defines the content of the button.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicButtonOnly.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
## Slot Examples

</auro-accordion>

#### ariaLabel
### Aria Label

The `ariaLabel` slot allows you to pass an aria-label to the HTML5 button. The default value is `"arrow-up"`.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelButtonOnly.html) -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/aria-label_button-only.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabel.html) -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/aria-label.html) -->
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>

## Page Content For Demo

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pageContent.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
10 changes: 9 additions & 1 deletion docs/partials/customRegistration.md
Original file line number Diff line number Diff line change
@@ -1 +1,9 @@
<!-- add custom registration content here -->
```js
// Import the class only
import { AuroBackToTop } from '@aurodesignsystem/auro-backtotop/class';

// Register with a custom name if desired
AuroBackToTop.register('custom-backtotop');
```

This will create a new custom element `<custom-backtotop>` that behaves exactly like `<auro-backtotop>`, allowing both to coexist on the same page without interfering with each other.
2 changes: 1 addition & 1 deletion docs/partials/description.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
`<auro-backtotop>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of providing a quick and accessible means to jump back to the top of a long content page.

The component will be hidden while the page Y scroll position is at the top. When scroll down begins the button will display in the bottom right corner of the page. While scrolling down the button will display only an arrow up icon. When scroll up occurs, the button will additionally display any slotted text content.
The component will be hidden while the page Y scroll position is at the top. When scroll down begins the button will display in the bottom right corner of the page. While scrolling down the button will display only an arrow up icon.
59 changes: 16 additions & 43 deletions docs/partials/index.md
Original file line number Diff line number Diff line change
@@ -1,64 +1,37 @@
<!--
The index.md file is a compiled document. No edits should be made directly to this file.
README.md is created by running `npm run build:docs`.
This file is generated based on a template fetched from `./docs/partials/index.md`
THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
-->

# Backtotop

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
<!-- AURO-GENERATED-CONTENT:END -->

## auro-backtotop use cases

## Use Cases
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
<!-- AURO-GENERATED-CONTENT:END -->

## Example(s)

### Basic

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicButtonOnly.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic_button-only.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>

<auro-accordion alignRight>
<span slot="trigger">See code</span>

<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>

## Page Content For Demo
### Page Content For Demo

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/pageContent.html) -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/page-content.html) -->
<!-- AURO-GENERATED-CONTENT:END -->

## Recommended Use and Version Control

There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-backtotop` custom element is defined automatically.

To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroBackToTop.register(name)` method and pass in a unique name.

```js
import { AuroBackToTop } from '@aurodesignsystem/auro-backtotop/class';

AuroBackToTop.register('custom-backtotop');
```

This will create a new custom element that you can use in your HTML that will function identically to the `auro-backtotop` element.

<!-- <div class="exampleWrapper">
<auro-backtotop>Custom back to top</auro-backtotop>
</div>

<auro-accordion alignRight>
<span slot="trigger">See code</span>

```html
<auro-backtotop>Custom back to top</auro-backtotop>
```

</auro-accordion> -->
Loading