Skip to content

Commit 4238547

Browse files
rmennerrmenner
committed
chore: add custom registration example code
1 parent 070d299 commit 4238547

File tree

3 files changed

+1584
-1822
lines changed

3 files changed

+1584
-1822
lines changed

‎README.md‎

Lines changed: 73 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,44 +15,79 @@ The following sections are editable by making changes to the following files:
1515
| Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` |
1616
| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
1717
| Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
18-
-->
19-
20-
# {{ capitalize name }}
18+
-->
19+
20+
# Backtotop
2121

2222
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23-
<!-- AURO-GENERATED-CONTENT:END -->
23+
<!-- The below content is automatically added from ./docs/partials/description.md -->
24+
`<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.
2425

26+
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.
27+
<!-- AURO-GENERATED-CONTENT:END -->
2528
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
26-
<!-- AURO-GENERATED-CONTENT:END -->
27-
29+
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
30+
<!-- 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. -->
31+
<!-- AURO-GENERATED-CONTENT:END -->
32+
2833
## Use Cases
2934

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

39+
* Pages with large amounts of content where a shortcut to jump to the top of the page is appropriate.
40+
<!-- AURO-GENERATED-CONTENT:END -->
41+
3342
## Install
3443

3544
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
36-
<!-- AURO-GENERATED-CONTENT:END -->
37-
45+
[![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)
46+
[![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)
47+
[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-backtotop?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
48+
![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
49+
50+
```shell
51+
$ npm i @aurodesignsystem/auro-backtotop
52+
```
53+
54+
<!-- AURO-GENERATED-CONTENT:END -->
55+
3856
### Define Dependency in Project
3957

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

43-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
44-
<!-- AURO-GENERATED-CONTENT:END -->
61+
<!-- AURO-GENERATED-CONTENT:END -->
62+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
63+
64+
```js
65+
import "@aurodesignsystem/auro-backtotop";
66+
```
4567

68+
<!-- AURO-GENERATED-CONTENT:END -->
69+
4670
### Use CDN
4771

4872
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
49-
<!-- AURO-GENERATED-CONTENT:END -->
73+
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.
5074

75+
```html
76+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-backtotop@latest/+esm"></script>
77+
```
78+
79+
<!-- AURO-GENERATED-CONTENT:END -->
80+
5181
## Basic Example
5282

5383
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
54-
<!-- AURO-GENERATED-CONTENT:END -->
55-
84+
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
85+
86+
```html
87+
<auro-backtotop>Back to top</auro-backtotop>
88+
```
89+
<!-- AURO-GENERATED-CONTENT:END -->
90+
5691
## Custom Component Registration for Version Management
5792

5893
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.
@@ -65,18 +100,31 @@ However, if you need to load multiple versions of the same component on a single
65100
You can do this by importing only the component class and using the `register(name)` method with a unique name:
66101

67102
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
68-
<!-- AURO-GENERATED-CONTENT:END -->
69-
103+
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
104+
105+
```js
106+
// Import the class only
107+
import { AuroBackToTop } from '@aurodesignsystem/auro-backtotop/class';
108+
109+
// Register with a custom name if desired
110+
AuroBackToTop.register('custom-backtotop');
111+
```
112+
113+
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.
114+
<!-- AURO-GENERATED-CONTENT:END -->
70115
<div class="exampleWrapper exampleWrapper--flex">
71116
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
117+
<!-- The below content is automatically added from ./apiExamples/custom.html -->
118+
<custom-backtotop>Custom back to top</custom-backtotop>
72119
<!-- AURO-GENERATED-CONTENT:END -->
73-
</div>
74-
120+
</div>
75121
<auro-accordion alignRight>
76-
<span slot="trigger">See code</span>
77-
122+
<span slot="trigger">See code</span>
78123
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
79-
<!-- AURO-GENERATED-CONTENT:END -->
80-
81-
</auro-accordion>
82-
124+
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
125+
126+
```html
127+
<custom-backtotop>Custom back to top</custom-backtotop>
128+
```
129+
<!-- AURO-GENERATED-CONTENT:END -->
130+
</auro-accordion>

‎apiExamples/custom.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<custom-backtotop>Custom back to top</custom-backtotop>

0 commit comments

Comments
 (0)