Skip to content

Commit

Permalink
fix: check in doc after build
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisfalaska
chrisfalaska authored and chrisfalaska committed Dec 5, 2024
1 parent 98d2a47 commit 76f8027
Showing 1 changed file with 86 additions and 86 deletions.
172 changes: 86 additions & 86 deletions components/select/demo/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@ The demo.md file is a compiled document. No edits should be made directly to thi
demo.md is created by running `npm run build:markdownDocs`.
This file is generated based on a template fetched from `./docs/partials/demo.md`
-->

-->

# Select

<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
<!-- The below content is automatically added from ./../docs/partials/description.md -->
`<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. See the <auro-hyperlink href="https://auro.alaskaair.com/components/auro/menu/api">auro-menu API docs</auro-hyperlink> for additional information.

`<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. See the <auro-hyperlink href="https://auro.alaskaair.com/components/auro/menu/api">auro-menu API docs</auro-hyperlink> for additional information.

## About auro-select

The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.

The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.

## Install instructions

The `<auro-select>` custom element is a combo-element using independent primitives for the most flexibility. To allow consumers the most control over the versioning their dependencies, `<auro-select>` requires the following peer dependencies along with `<auro-select>`.
Expand All @@ -26,8 +26,8 @@ $ npm i @aurodesignsystem/auro-select
$ npm i @aurodesignsystem/auro-dropdown
$ npm i @aurodesignsystem/auro-menu
```
<!-- AURO-GENERATED-CONTENT:END -->

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

## Default example

A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements. Notice a default `Please select option` placeholder in the trigger.
Expand All @@ -46,12 +46,12 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<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 -->

<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->

```html
<auro-select>
<auro-menu>
Expand All @@ -62,11 +62,11 @@ A baseline `<auro-select>` using `<auro-menu>` and `<auro-menuoption>` elements.
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Example with auro-icons in options

Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
Expand Down Expand Up @@ -94,12 +94,12 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/withIcons.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/withIcons.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/withIcons.html -->

```html
<auro-select>
<auro-menu>
Expand All @@ -119,11 +119,11 @@ Displays an `<auro-select>` element with `<auro-icon>` elements in each option.
<auro-icon label customColor category="health" name="spraybottle">Spray Bottle</auro-icon>
</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Example with nested menus

This example shows nesting `<auro-menu>` elements to create submenus.
Expand Down Expand Up @@ -165,12 +165,12 @@ This example shows nesting `<auro-menu>` elements to create submenus.
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/withSubmenus.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/withSubmenus.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/withSubmenus.html -->

```html
<auro-select>
<auro-menu>
Expand Down Expand Up @@ -204,11 +204,11 @@ This example shows nesting `<auro-menu>` elements to create submenus.
<auro-menuoption value="planes">Planes</auro-menuoption>
<auro-menuoption value="motorcycles">Motorcycles</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Example with no checkmark

Applying the `noCheckmark` attribute will prevent the checkmark icon from being shown on the selected option. The left padding to reserve space for the checkmark will not be shown.
Expand All @@ -227,12 +227,12 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noCheckmark.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/noCheckmark.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/noCheckmark.html -->

```html
<auro-select nocheckmark>
<auro-menu>
Expand All @@ -243,11 +243,11 @@ Applying the `noCheckmark` attribute will prevent the checkmark icon from being
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Example with custom bib height

This example shows how to set a custom height for the bib from `<auro-dropdown>`.
Expand All @@ -266,19 +266,19 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
</auro-select>
<style>
#customBibHeightExample::part(dropdownSize) {
max-height: 100px;
}
</style>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customBibHeight.html) -->
<!-- The below code snippet is automatically added from ../apiExamples/customBibHeight.html -->

<!-- The below code snippet is automatically added from ../apiExamples/customBibHeight.html -->

```html
<auro-select id="customBibHeightExample">
<auro-menu>
Expand All @@ -289,16 +289,16 @@ Custom height dimensions are set by using the `dropdownSize` CSS Part and then a
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
</auro-select>
<style>
#customBibHeightExample::part(dropdownSize) {
max-height: 100px;
}
</style>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</style>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Label and help text slots

The following example illustrates the use of the `label` and `helptext` slots for additional placement of content around the select menu.
Expand All @@ -319,12 +319,12 @@ The following example illustrates the use of the `label` and `helptext` slots fo
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/slots.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/slots.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/slots.html -->

```html
<auro-select>
<span slot="label">Please choose a preference</span>
Expand All @@ -337,11 +337,11 @@ The following example illustrates the use of the `label` and `helptext` slots fo
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Error State

Use the `error` boolean attribute to toggle the error UI.
Expand All @@ -360,12 +360,12 @@ Use the `error` boolean attribute to toggle the error UI.
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->

```html
<auro-select error="Custom error message">
<auro-menu>
Expand All @@ -376,11 +376,11 @@ Use the `error` boolean attribute to toggle the error UI.
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Disabled state

Use the `disabled` boolean attribute to toggle the disabled UI.
Expand All @@ -399,12 +399,12 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
</auro-menu>
</auro-select>
<!-- AURO-GENERATED-CONTENT:END -->
</div>
</div>
<auro-accordion alignRight>
<span slot="trigger">See code</span>
<span slot="trigger">See code</span>
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->

<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->

```html
<auro-select disabled>
<auro-menu>
Expand All @@ -415,11 +415,11 @@ Use the `disabled` boolean attribute to toggle the disabled UI.
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

</auro-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

## Recommended Use and Version Control

There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-select` custom element is defined automatically.
Expand Down Expand Up @@ -452,8 +452,8 @@ This will create a new custom element that you can use in your HTML that will fu
<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 -->

<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->

```html
<custom-select>
<auro-menu>
Expand All @@ -464,7 +464,7 @@ This will create a new custom element that you can use in your HTML that will fu
<auro-menuoption value="arrival">Arrival</auro-menuoption>
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
</auro-menu>
</custom-select>
```
</custom-select>
```
<!-- AURO-GENERATED-CONTENT:END -->
</auro-accordion>

0 comments on commit 76f8027

Please sign in to comment.