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 #155 #156

Merged
merged 2 commits into from
Nov 13, 2024
Merged

fix: update markdown partial pathing to consume new auro lib #155 #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1754aec
fix: update markdown partial pathing to consume new auro lib #155
sun-mota Nov 8, 2024
76fafe7
fix: update size token to use new icon-size token #153
rmenner Nov 8, 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
22 changes: 11 additions & 11 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:

# 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
Open in desktop

Large diffs are not rendered by default.

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