Skip to content

Commit

Permalink
fix: update markdown partial pathing to consume new auro lib #155
Browse files Browse the repository at this point in the history
  • Loading branch information
@sun-mota
sun-mota committed Nov 13, 2024
1 parent 6ae2f81 commit cc3a97f
Show file tree
Hide file tree
Showing 11 changed files with 618 additions and 173 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,14 +19,14 @@ The following sections are editable by making changes to the following files:

# Icon

<!-- 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 -->
Icons can be used to represent concepts or provide context to options and/or actions within an experience.

The `<auro-icon>` web component comes pre-configured with all the available [Auro Icons](https://auro.alaskaair.com/icons) . Simply add the `category` and `name` of the icon for quick and easy results.
<!-- 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 @@ -74,8 +74,8 @@ import "@aurodesignsystem/auro-icon";

<!-- 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-icon category="interface" name="pin-trip"></auro-icon>
Expand Down Expand Up @@ -105,16 +105,16 @@ In cases where the project is not able to process JS assets, there are pre-proce

## auro-icon 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 -->
<!-- AURO-GENERATED-CONTENT:END -->

## API Code Examples

### Default auro-icon

<!-- 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-icon category="interface" name="pin-trip"></auro-icon>
Expand Down
187 changes: 168 additions & 19 deletions demo/alaska.min.js
View file

Large diffs are not rendered by default.

64 changes: 32 additions & 32 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-icon

Expand Down Expand Up @@ -45,15 +45,15 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca
### Basic

<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-icon category="interface" name="pin-trip"></auro-icon>
<!-- AURO-GENERATED-CONTENT:END -->
</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-icon category="interface" name="pin-trip"></auro-icon>
Expand All @@ -66,8 +66,8 @@ auro-icon provides users a way to use the Auro Icons by simply passing in the ca
Using the `customSvg` attribute, the component may render any icon svg content required. The `auro-icon` component will continue to render with all the variant and theme styles applied.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customSvg.html) -->
<!-- The below content is automatically added from ./../../apiExamples/customSvg.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customSvg.html) -->
<!-- The below content is automatically added from ../apiExamples/customSvg.html -->
<auro-icon customSvg>
<svg slot="svg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" part="svg" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
</auro-icon>
Expand All @@ -81,8 +81,8 @@ Using the `customSvg` attribute, the component may render any icon svg content r
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customSvg.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/customSvg.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customSvg.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/customSvg.html -->

```html
<auro-icon customSvg>
Expand All @@ -105,15 +105,15 @@ While you may place the icon alone, it is considered best practice to combine th
In situations where the icon is to be listed with a descriptive label, simply use the `label` attribute and the text in the `slot` will appear next to the icon.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/accessRec.html) -->
<!-- The below content is automatically added from ./../../apiExamples/accessRec.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/accessRec.html) -->
<!-- The below content is automatically added from ../apiExamples/accessRec.html -->
<auro-icon label category="in-flight" name="wifi">Your flight is enabled with super fast Wi-Fi</auro-icon>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/accessRec.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/accessRec.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/accessRec.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/accessRec.html -->

```html
<auro-icon label category="in-flight" name="wifi">Your flight is enabled with super fast Wi-Fi</auro-icon>
Expand All @@ -126,8 +126,8 @@ In situations where the icon is to be listed with a descriptive label, simply us
Mono-color icons support the following attributes to illustrate visual state. The `primary` attribute is assigned by default. Other attributes, `emphasis`, `accent`, `disabled`, `error`, `success`, and `advisory` are supported.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/visualState.html) -->
<!-- The below content is automatically added from ./../../apiExamples/visualState.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/visualState.html) -->
<!-- The below content is automatically added from ../apiExamples/visualState.html -->
<auro-icon category="interface" name="pin-trip"></auro-icon> default<br />
<auro-icon category="interface" name="pin-trip" accent></auro-icon> accent<br />
<auro-icon category="interface" name="pin-trip" disabled></auro-icon> disabled<br />
Expand All @@ -143,8 +143,8 @@ Mono-color icons support the following attributes to illustrate visual state. Th
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/visualState.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/visualState.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/visualState.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/visualState.html -->

```html
<auro-icon category="interface" name="pin-trip"></auro-icon> default<br />
Expand All @@ -167,8 +167,8 @@ Mono-color icons support the following attributes to illustrate visual state. Th
All compatible with `onDark` attribute.

<div class="exampleWrapper" style="background: repeating-linear-gradient(45deg, var(--ds-color-background-darkest, #00274a), var(--ds-color-background-darkest, #00274a) 10px, var(--ds-color-background-darker, #01426a) 10px, var(--ds-color-background-darker, #01426a) 20px);">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/onDark.html) -->
<!-- The below content is automatically added from ./../../apiExamples/onDark.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/onDark.html) -->
<!-- The below content is automatically added from ../apiExamples/onDark.html -->
<span style="color: var(--ds-color-text-primary-inverse)">
<auro-icon category="interface" name="pin-trip" onDark></auro-icon>default<br />
<auro-icon category="interface" name="pin-trip" onDark accent></auro-icon>accent<br />
Expand All @@ -186,8 +186,8 @@ All compatible with `onDark` attribute.
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/onDark.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/onDark.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/onDark.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/onDark.html -->

```html
<span style="color: var(--ds-color-text-primary-inverse)">
Expand All @@ -212,17 +212,17 @@ All compatible with `onDark` attribute.
The `auro-icon` by default apply the `primary` selector for color application. This can be over written using the defined API listed above. Custom colors are also allowed when using the `customColor` attribute and a parent element with a color setting.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customColor.html) -->
<!-- The below content is automatically added from ./../../apiExamples/customColor.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customColor.html) -->
<!-- The below content is automatically added from ../apiExamples/customColor.html -->
<auro-icon category="interface" name="pin-trip" ></auro-icon> default inherits color<br/>
<auro-icon category="interface" name="pin-trip" customColor></auro-icon> applies primary color selector<br/>
<auro-icon category="interface" name="pin-trip" customColor style="color: orange;"></auro-icon> applies the color from the style attribute
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customColor.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/customColor.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customColor.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/customColor.html -->

```html
<auro-icon category="interface" name="pin-trip" ></auro-icon> default inherits color<br/>
Expand All @@ -236,8 +236,8 @@ The `auro-icon` by default apply the `primary` selector for color application. T

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
:host {
Expand All @@ -255,15 +255,15 @@ The component may be restyled using the following code sample and changing the v
Auro Icon supports setting a custom size using the `--ds-auro-icon-size` token. The icons height and width will be set to the token value, preserving the square shape that is standard for all icons.

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customSize.html) -->
<!-- The below content is automatically added from ./../../apiExamples/customSize.html -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customSize.html) -->
<!-- The below content is automatically added from ../apiExamples/customSize.html -->
<auro-icon style="--ds-auro-icon-size: 30rem;" category="interface" name="pin-trip" success></auro-icon>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../apiExamples/customSize.html) -->
<!-- The below code snippet is automatically added from ./../../apiExamples/customSize.html -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customSize.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/customSize.html -->

```html
<auro-icon style="--ds-auro-icon-size: 30rem;" category="interface" name="pin-trip" success></auro-icon>
Expand Down
Loading

0 comments on commit cc3a97f

Please sign in to comment.