Skip to content

Commit 04d8398

Browse files
jordanjones243jordanjones243
committed
docs: readme added
1 parent 7b46914 commit 04d8398

File tree

1 file changed

+37
-56
lines changed

1 file changed

+37
-56
lines changed

‎README.md‎

Lines changed: 37 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,17 @@ The `<auro-skeleton>` element uses animation to convey that the page is still lo
3232
<!-- 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. -->
3333
<!-- AURO-GENERATED-CONTENT:END -->
3434

35-
## UI development browser support
36-
37-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
38-
For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
35+
## Use Cases
3936

37+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
38+
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
39+
The `<auro-skeleton>` element can be used on container-based components like `<auro-card>` and other structured lists.
4040
<!-- AURO-GENERATED-CONTENT:END -->
4141

4242
## Install
4343

4444
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
45-
[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-skeleton/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-skeleton/actions/workflows/testPublish.yml)
45+
[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-skeleton/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-skeleton/actions/workflows/release.yml)
4646
[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-skeleton?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-skeleton)
4747
[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-skeleton?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
4848
![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -53,17 +53,10 @@ $ npm i @aurodesignsystem/auro-skeleton
5353

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

56-
### Design Token CSS Custom Property dependency
57-
58-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
59-
The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
60-
61-
<!-- AURO-GENERATED-CONTENT:END -->
62-
63-
### Define dependency in project component
56+
### Define Dependency in Project
6457

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

6861
<!-- AURO-GENERATED-CONTENT:END -->
6962
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -72,19 +65,9 @@ Defining the component dependency within each component that is using the `<auro
7265
import "@aurodesignsystem/auro-skeleton";
7366
```
7467

75-
<!-- AURO-GENERATED-CONTENT:END -->
76-
**Reference component in HTML**
77-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
78-
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
79-
80-
```html
81-
<auro-skeleton shape="circle" style="width: 40px; height: 40px"></auro-skeleton>
82-
<auro-skeleton shape="oval" style="width: 200px; height: 100px;"></auro-skeleton>
83-
<auro-skeleton shape="rectangle" style="width: 400px; height: 300px"></auro-skeleton>
84-
```
8568
<!-- AURO-GENERATED-CONTENT:END -->
8669

87-
## Use CDN
70+
### Use CDN
8871

8972
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
9073
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.
@@ -95,16 +78,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
9578

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

98-
## auro-skeleton use cases
99-
100-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
101-
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
102-
The `<auro-skeleton>` element can be used on container-based components like `<auro-card>` and other structured lists.
103-
<!-- AURO-GENERATED-CONTENT:END -->
104-
105-
## API Code Examples
106-
107-
### Default auro-skeleton
81+
## Basic Example
10882

10983
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
11084
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
@@ -116,31 +90,38 @@ The `<auro-skeleton>` element can be used on container-based components like `<a
11690
```
11791
<!-- AURO-GENERATED-CONTENT:END -->
11892

119-
## Development
93+
## Custom Component Registration for Version Management
12094

121-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
122-
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.
95+
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.
96+
The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
12397

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

126-
<!-- AURO-GENERATED-CONTENT:END -->
127-
128-
### Start development environment
100+
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.
129101

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

133-
```shell
134-
$ npm run dev
135-
```
136-
137-
Open [localhost:8000](http://localhost:8000/)
138-
104+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
105+
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
106+
<!-- add custom registration content here -->
139107
<!-- AURO-GENERATED-CONTENT:END -->
108+
<div class="exampleWrapper exampleWrapper--flex">
109+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
110+
<!-- The below content is automatically added from ./apiExamples/custom.html -->
111+
<custom-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
112+
<custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
113+
<custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>
114+
<!-- AURO-GENERATED-CONTENT:END -->
115+
</div>
116+
<auro-accordion alignRight>
117+
<span slot="trigger">See code</span>
118+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
119+
<!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
140120

141-
### Testing
142-
143-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
144-
Automated tests are required for every Auro component. See `.\test\auro-skeleton.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.
145-
146-
<!-- AURO-GENERATED-CONTENT:END -->
121+
```html
122+
<custom-skeleton shape="circle" style="width: 40px; height: 40px"></custom-skeleton>
123+
<custom-skeleton shape="oval" style="width: 200px; height: 100px;"></custom-skeleton>
124+
<custom-skeleton shape="rectangle" style="width: 400px; height: 300px"></custom-skeleton>
125+
```
126+
<!-- AURO-GENERATED-CONTENT:END -->
127+
</auro-accordion>

0 commit comments

Comments
 (0)