Skip to content

Commit

Permalink
fix: update markdown partial pathing to consume new auro lib #72
Browse files Browse the repository at this point in the history
  • Loading branch information
@sun-mota @jason-capsule42
sun-mota authored and jason-capsule42 committed Nov 23, 2024
1 parent 2af56b9 commit 3bd64df
Show file tree
Hide file tree
Showing 10 changed files with 923 additions and 158 deletions.
24 changes: 12 additions & 12 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,14 +19,14 @@ The following sections are editable by making changes to the following files:

# Banner

<!-- 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 -->
The `<auro-banner>` element provides users a flexible way to convey a summary of information. The primary elements of a banner include an image, and details.

The details are broken down into `prefix`, `title`, `description`, `action`, and `disclaimer`.
<!-- 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. -->
**Do not** use `<auro-banner>` as a primary source of information.
<!-- AURO-GENERATED-CONTENT:END -->
Expand Down Expand Up @@ -75,8 +75,8 @@ import "@aurodesignsystem/auro-banner";

<!-- 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-banner billboard>
Expand Down Expand Up @@ -123,15 +123,15 @@ In cases where the project is not able to process JS assets, there are pre-proce
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/tokens/CSSCustomProperties.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/bundled/essentials.css" />
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-banner@3.0.1/dist/auro-banner__bundled.js" type="module"></script>
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-banner@3.1.0/dist/auro-banner__bundled.js" type="module"></script>
```

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

## auro-banner 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 -->
Use the `<auro-banner>` element to:

* grab the attention of a user
Expand All @@ -142,8 +142,8 @@ Use the `<auro-banner>` element to:

### Default auro-banner

<!-- 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-banner billboard>
Expand Down
72 changes: 36 additions & 36 deletions demo/api.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../api.md) -->
<!-- The below content is automatically added from ./../api.md -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
<!-- The below content is automatically added from ../docs/api.md -->

# auro-banner

Expand Down Expand Up @@ -62,8 +62,8 @@ This allows the editor the upmost in image flexibility for cropped images placed

By default `<img>` elements are `inline` elements and will add a few pixels of space below the image. To counter this, either set `display: block` on the `<img>` element, or add this [WCSS pre-defined selector](https://alaskaairlines.github.io/WebCoreStyleSheets/#core-css-#{$sym}#{$prefix}picture#{$scope}) to your project.<br><br>
<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-banner billboard>
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/430/1124/800" media="(min-width: 1024px)">
Expand Down Expand Up @@ -93,8 +93,8 @@ By default `<img>` elements are `inline` elements and will add a few pixels of s
</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-banner billboard>
Expand Down Expand Up @@ -133,8 +133,8 @@ The following example illustrates a series of additional API options available t
For the call-to-action button, see in the example code that it is required to set the `onDark` attribute on the `<auro-hyperlink>` element itself. This is **not** controlled by the `<auro-banner>` element.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/billboardSeries.html) -->
<!-- The below content is automatically added from ./../../apiExamples/billboardSeries.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/billboardSeries.html) -->
<!-- The below content is automatically added from ../apiExamples/billboardSeries.html -->
<auro-banner billboard slim alignRight ondark>
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/324/1124/800" media="(min-width: 1024px)">
Expand All @@ -161,8 +161,8 @@ For the call-to-action button, see in the example code that it is required to se
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/billboardSeries.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/billboardSeries.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/billboardSeries.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/billboardSeries.html -->

```html
<auro-banner billboard slim alignRight ondark>
Expand Down Expand Up @@ -196,8 +196,8 @@ For the call-to-action button, see in the example code that it is required to se
The following example illustrates an option to left align the text `alignLeft` along with `slim` to reduce the padding and `onDark` to change the text to white.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/billboardSeriesLeft.html) -->
<!-- The below content is automatically added from ./../../apiExamples/billboardSeriesLeft.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/billboardSeriesLeft.html) -->
<!-- The below content is automatically added from ../apiExamples/billboardSeriesLeft.html -->
<auro-banner billboard slim alignLeft onDark>
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/42/1124/800" media="(min-width: 1024px)">
Expand Down Expand Up @@ -225,8 +225,8 @@ The following example illustrates an option to left align the text `alignLeft` a
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/billboardSeriesLeft.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/billboardSeriesLeft.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/billboardSeriesLeft.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/billboardSeriesLeft.html -->

```html
<auro-banner billboard slim alignLeft onDark>
Expand Down Expand Up @@ -261,8 +261,8 @@ The following example illustrates an option to left align the text `alignLeft` a
The following example illustrates a `<auro-banner`> custom element with the `hero` template style. This example also illustrates the use of the `prefix` slot.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/hero.html) -->
<!-- The below content is automatically added from ./../../apiExamples/hero.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/hero.html) -->
<!-- The below content is automatically added from ../apiExamples/hero.html -->
<auro-banner hero>
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/369/2048/2000" media="(min-width: 1024px)">
Expand All @@ -287,8 +287,8 @@ The following example illustrates a `<auro-banner`> custom element with the `her
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/hero.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/hero.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/hero.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/hero.html -->

```html
<auro-banner hero>
Expand Down Expand Up @@ -320,8 +320,8 @@ The following example illustrates a `<auro-banner`> custom element with the `her
The following example illustrates a `<auro-banner>` custom element with the `iconic` template style. The `iconic` template style hides the `displayImage` on small screen sizes and only shows the icon. This examples also shows how to customize the icon background color using `iconbg`.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/iconic.html) -->
<!-- The below content is automatically added from ./../../apiExamples/iconic.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/iconic.html) -->
<!-- The below content is automatically added from ../apiExamples/iconic.html -->
<auro-banner iconic iconbg="var(--ds-color-brand-neutral-400)">
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/452/2800/2000.jpg" media="(min-width: 1054px)">
Expand All @@ -343,8 +343,8 @@ The following example illustrates a `<auro-banner>` custom element with the `ico
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/iconic.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/iconic.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/iconic.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/iconic.html -->

```html
<auro-banner iconic iconbg="var(--ds-color-brand-neutral-400)">
Expand Down Expand Up @@ -373,8 +373,8 @@ The following example illustrates a `<auro-banner>` custom element with the `ico
The following example illustrates a `<auro-banner>` custom element with the `marquee` template style. This template configuration also supports the `slim` and `onDark` attributes.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/marquee.html) -->
<!-- The below content is automatically added from ./../../apiExamples/marquee.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/marquee.html) -->
<!-- The below content is automatically added from ../apiExamples/marquee.html -->
<auro-banner marquee>
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/154/2048/2000" media="(min-width: 1024px)">
Expand All @@ -399,8 +399,8 @@ The following example illustrates a `<auro-banner>` custom element with the `mar
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/marquee.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/marquee.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/marquee.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/marquee.html -->

```html
<auro-banner marquee>
Expand Down Expand Up @@ -432,8 +432,8 @@ The following example illustrates a `<auro-banner>` custom element with the `mar
The following example illustrates a `<auro-banner>` custom element with the `marquee solid` template style. With this configuration, onDark is implied.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/marqueeSolid.html) -->
<!-- The below content is automatically added from ./../../apiExamples/marqueeSolid.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/marqueeSolid.html) -->
<!-- The below content is automatically added from ../apiExamples/marqueeSolid.html -->
<auro-banner marquee solid>
<picture slot="displayImage">
<source srcset="https://picsum.photos/id/1015/1048/2000" media="(min-width: 1024px)">
Expand All @@ -457,8 +457,8 @@ The following example illustrates a `<auro-banner>` custom element with the `mar
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/marqueeSolid.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/marqueeSolid.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/marqueeSolid.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/marqueeSolid.html -->

```html
<auro-banner marquee solid>
Expand Down Expand Up @@ -489,8 +489,8 @@ The following example illustrates a `<auro-banner>` custom element with the `mar
The following example illustrates a `<auro-banner>` custom element with the `roundedBorder` variant style. With this configuration, no `displayImage` is used. Instead only the `contentImage` is used and the rest of the offer is displayed in a row.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/roundedBorder.html) -->
<!-- The below content is automatically added from ./../../apiExamples/roundedBorder.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/roundedBorder.html) -->
<!-- The below content is automatically added from ../apiExamples/roundedBorder.html -->
<auro-banner roundedBorder alignLeft>
<img src="https://images.contentstack.io/v3/assets/blt2cefe12c88e9dd91/blt4f70efe198086558/6633f3defda0c7c6c769b86b/visa_signature.svg" alt="" slot="contentImage" />
<span slot="prefix">Prefix - Limited Time</span>
Expand All @@ -514,8 +514,8 @@ The following example illustrates a `<auro-banner>` custom element with the `rou
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/roundedBorder.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/roundedBorder.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/roundedBorder.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/roundedBorder.html -->

```html
<auro-banner roundedBorder alignLeft>
Expand Down Expand Up @@ -545,8 +545,8 @@ The following example illustrates a `<auro-banner>` custom element with the `rou

The component may be restyled using the following code sample and changing the values of the following token(s).

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

```scss
@import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables";
Expand Down
Loading

0 comments on commit 3bd64df

Please sign in to comment.