Skip to content

Commit

Permalink
fix: update markdown partial pathing to consume new auro lib #48
Browse files Browse the repository at this point in the history
  • Loading branch information
@sun-mota
sun-mota committed Nov 8, 2024
1 parent b06ea16 commit 4a4702d
Show file tree
Hide file tree
Showing 10 changed files with 365 additions and 182 deletions.
22 changes: 11 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ The README.md file is a compiled document. No edits should be made directly to t
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`
`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`
and copied to `./componentDocs/README.md` each time the the docs are compiled.
The following sections are editable by making changes to the following files:
Expand All @@ -19,8 +19,8 @@ The following sections are editable by making changes to the following files:

# Loader

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
<!-- The below content is automatically added from ./../docs/partials/description.md -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
<!-- The below content is automatically added from ./docs/partials/description.md -->
`<auro-loader>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of illustrating animated loaders.

Things take time. Sometimes we just need to take a second for some data to show up. For this Auro supports the `<auro-loader>` custom element. This powerful element supports multiple modes for use, `ringworm`, `orbit`, `pulse`, and `laser`.
Expand All @@ -31,8 +31,8 @@ For color support `<auro-loader>` supports `currentColor`, this allows for any c

The `<auro-loader>` custom element also supports three pre-defined color modes, `onlight`, `ondark` and `white`.
<!-- 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: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 -->

Expand Down Expand Up @@ -80,8 +80,8 @@ import "@aurodesignsystem/auro-loader";

<!-- 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 -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->

```html
<auro-loader ringworm></auro-loader>
Expand Down Expand Up @@ -114,17 +114,17 @@ In cases where the project is not able to process JS assets, there are pre-proce

## auro-loader use cases

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
<!-- The below content is automatically added from ./../docs/partials/useCases.md -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
The `<auro-loader>` element should be used in situations where developers may need to illustrate a wait time for their users.
<!-- AURO-GENERATED-CONTENT:END -->

## API Code Examples

### Default auro-loader

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

```html
<auro-loader ringworm></auro-loader>
Expand Down
112 changes: 56 additions & 56 deletions demo/api.md
View file

Large diffs are not rendered by default.

117 changes: 105 additions & 12 deletions demo/api.min.js
View file

Large diffs are not rendered by default.

64 changes: 32 additions & 32 deletions demo/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ This file is generated based on a template fetched from `./docs/partials/index.m

# Loader

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./description.md) -->
<!-- The below content is automatically added from ./description.md -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/description.md) -->
<!-- The below content is automatically added from ../docs/partials/description.md -->
`<auro-loader>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of illustrating animated loaders.

Things take time. Sometimes we just need to take a second for some data to show up. For this Auro supports the `<auro-loader>` custom element. This powerful element supports multiple modes for use, `ringworm`, `orbit`, `pulse`, and `laser`.
Expand All @@ -21,8 +21,8 @@ The `<auro-loader>` custom element also supports three pre-defined color modes,

## auro-loader use cases

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./useCases.md) -->
<!-- The below content is automatically added from ./useCases.md -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/useCases.md) -->
<!-- The below content is automatically added from ../docs/partials/useCases.md -->
The `<auro-loader>` element should be used in situations where developers may need to illustrate a wait time for their users.
<!-- AURO-GENERATED-CONTENT:END -->

Expand All @@ -31,8 +31,8 @@ The `<auro-loader>` element should be used in situations where developers may ne
See in the following examples the different loader modes that the `<auro-loader>` element supports.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/basic.html) -->
<!-- The below content is automatically added from ./../../apiExamples/basic.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
<!-- The below content is automatically added from ../apiExamples/basic.html -->
<auro-loader ringworm></auro-loader>
<auro-loader orbit></auro-loader>
<auro-loader pulse></auro-loader>
Expand All @@ -41,8 +41,8 @@ See in the following examples the different loader modes that the `<auro-loader>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/basic.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/basic.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/basic.html -->

```html
<auro-loader ringworm></auro-loader>
Expand All @@ -58,8 +58,8 @@ See in the following examples the different loader modes that the `<auro-loader>
The `<auro-loader>` element supports a scale of sizes. Options are `[sm, md, lg, xl]`.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/loader_sizes.html) -->
<!-- The below content is automatically added from ./../../apiExamples/loader_sizes.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/loader_sizes.html) -->
<!-- The below content is automatically added from ../apiExamples/loader_sizes.html -->
<auro-loader ringworm xs></auro-loader>
<auro-loader ringworm></auro-loader>
<auro-loader ringworm sm></auro-loader>
Expand All @@ -69,8 +69,8 @@ The `<auro-loader>` element supports a scale of sizes. Options are `[sm, md, lg,
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/loader_sizes.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/loader_sizes.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/loader_sizes.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/loader_sizes.html -->

```html
<auro-loader ringworm xs></auro-loader>
Expand All @@ -87,32 +87,32 @@ The `<auro-loader>` element supports a scale of sizes. Options are `[sm, md, lg,
The `<auro-loader>` element supports a scale of pre-defines color options. Options are `[onLight, onDark, white]`.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/loader_color.html) -->
<!-- The below content is automatically added from ./../../apiExamples/loader_color.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/loader_color.html) -->
<!-- The below content is automatically added from ../apiExamples/loader_color.html -->
<auro-loader pulse onlight md></auro-loader>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/loader_color.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/loader_color.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/loader_color.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/loader_color.html -->

```html
<auro-loader pulse onlight md></auro-loader>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>
<div class="exampleWrapper--ondark">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/loader_color_ondark.html) -->
<!-- The below content is automatically added from ./../../apiExamples/loader_color_ondark.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/loader_color_ondark.html) -->
<!-- The below content is automatically added from ../apiExamples/loader_color_ondark.html -->
<auro-loader pulse ondark md></auro-loader>
<auro-loader pulse white md></auro-loader>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/loader_color_ondark.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/loader_color_ondark.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/loader_color_ondark.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/loader_color_ondark.html -->

```html
<auro-loader pulse ondark md></auro-loader>
Expand All @@ -126,17 +126,17 @@ The `<auro-loader>` element supports a scale of pre-defines color options. Optio
The `<auro-loader>` element supports any custom color defined at the root level of the element.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom_color.html) -->
<!-- The below content is automatically added from ./../../apiExamples/custom_color.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom_color.html) -->
<!-- The below content is automatically added from ../apiExamples/custom_color.html -->
<auro-loader style="color: var(--ds-color-brand-tropical-300)" ringworm md></auro-loader>
<auro-loader style="color: var(--ds-color-brand-goldcoast-300)" orbit md></auro-loader>
<auro-loader style="color: var(--ds-color-brand-alpine-400)" pulse md></auro-loader>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom_color.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/custom_color.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom_color.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/custom_color.html -->

```html
<auro-loader style="color: var(--ds-color-brand-tropical-300)" ringworm md></auro-loader>
Expand All @@ -151,8 +151,8 @@ The `<auro-loader>` element supports any custom color defined at the root level
The `<auro-loader>` custom element has a CSS shadow part included in it's API. Create a custom selector using `::part(element)` and easily adjust the `animation-duration` as seen in the examples below.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom_speed.html) -->
<!-- The below content is automatically added from ./../../apiExamples/custom_speed.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom_speed.html) -->
<!-- The below content is automatically added from ../apiExamples/custom_speed.html -->
<style>
.slow::part(element) {
animation-duration: 8s;
Expand All @@ -167,8 +167,8 @@ The `<auro-loader>` custom element has a CSS shadow part included in it's API. C
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/custom_speed.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/custom_speed.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom_speed.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/custom_speed.html -->

```html
<style>
Expand Down Expand Up @@ -200,8 +200,8 @@ AuroLoader.register('custom-loader');
This will create a new custom element that you can use in your HTML that will function identically to the `<auro-loader>` element.

<div class="exampleWrapper exampleWrapper--flex">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/custom.html) -->
<!-- The below content is automatically added from ./../../apiExamples/custom.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
<!-- The below content is automatically added from ../apiExamples/custom.html -->
<custom-loader ringworm></custom-loader>
<custom-loader orbit></custom-loader>
<custom-loader pulse></custom-loader>
Expand All @@ -210,8 +210,8 @@ This will create a new custom element that you can use in your HTML that will fu
</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 -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/custom.html -->

```html
<custom-loader ringworm></custom-loader>
Expand Down
Loading

0 comments on commit 4a4702d

Please sign in to comment.