Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update markdown partial pathing to consume new auro lib #72 #73

Merged
merged 3 commits into from
Nov 23, 2024
Merged

fix: update markdown partial pathing to consume new auro lib #72 #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
df9934d
fix: update markdown partial pathing to consume new auro lib #72
sun-mota Nov 11, 2024
116f285
docs: fix typo on `api.md` `<auro-banner`> -> `<auro-banner>`
sun-mota Nov 12, 2024
a0d63db
perf: update library to 3.0.2
sun-mota Nov 13, 2024
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
24 changes: 12 additions & 12 deletions README.md
View file
Open in desktop
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
74 changes: 37 additions & 37 deletions demo/api.md
View file
Open in desktop
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 @@ -258,11 +258,11 @@ The following example illustrates an option to left align the text `alignLeft` a

### Hero

The following example illustrates a `<auro-banner`> custom element with the `hero` template style. This example also illustrates the use of the `prefix` slot.
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