@aurodesignsystem-dev/auro-header 0.0.0-pr168.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +332 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +143 -0
- package/demo/api.html +56 -0
- package/demo/api.md +334 -0
- package/demo/index.html +56 -0
- package/demo/index.js +4 -0
- package/demo/index.md +76 -0
- package/demo/index.min.js +417 -0
- package/dist/auro-header-D9QEL8PS.js +2 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +80 -0
package/README.md
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
The README.md file is a compiled document. No edits should be made directly to this file.
|
|
3
|
+
|
|
4
|
+
README.md is created by running `npm run build:docs`.
|
|
5
|
+
|
|
6
|
+
This file is generated based on a template fetched from
|
|
7
|
+
`https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/README.md`
|
|
8
|
+
and copied to `./componentDocs/README.md` each time the docs are compiled.
|
|
9
|
+
|
|
10
|
+
The following sections are editable by making changes to the following files:
|
|
11
|
+
|
|
12
|
+
| SECTION | DESCRIPTION | FILE LOCATION |
|
|
13
|
+
|------------------------|---------------------------------------------------|-------------------------------------|
|
|
14
|
+
| Description | Description of the component | `./docs/partials/description.md` |
|
|
15
|
+
| Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` |
|
|
16
|
+
| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
|
|
17
|
+
| Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
|
|
18
|
+
-->
|
|
19
|
+
|
|
20
|
+
# Header
|
|
21
|
+
|
|
22
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
|
|
23
|
+
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
24
|
+
The `<auro-header>` component is a simple component for rendering page or content headers without having to deal with font styling. Simply choose the level of the header want and the style type.
|
|
25
|
+
|
|
26
|
+
The auro-header component is able to take any combination of options for heading levels and display options. See [Auro's header usage guidelines](https://auro.alaskaair.com/typography/usage) for additional examples sans web component dependency.
|
|
27
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
28
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
|
|
29
|
+
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
|
|
30
|
+
<!-- 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. -->
|
|
31
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
32
|
+
|
|
33
|
+
## UI development browser support
|
|
34
|
+
|
|
35
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
|
|
36
|
+
For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
|
|
37
|
+
|
|
38
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
39
|
+
|
|
40
|
+
## Install
|
|
41
|
+
|
|
42
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
|
|
43
|
+
[](https://github.com/AlaskaAirlines/auro-header/actions/workflows/testPublish.yml)
|
|
44
|
+
[](https://www.npmjs.com/package/@aurodesignsystem/auro-header)
|
|
45
|
+
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
```shell
|
|
49
|
+
$ npm i @aurodesignsystem/auro-header
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
53
|
+
|
|
54
|
+
### Design Token CSS Custom Property dependency
|
|
55
|
+
|
|
56
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
|
|
57
|
+
The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
|
|
58
|
+
|
|
59
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
60
|
+
|
|
61
|
+
### Define dependency in project component
|
|
62
|
+
|
|
63
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
|
|
64
|
+
Defining the component dependency within each component that is using the `<auro-header>` component.
|
|
65
|
+
|
|
66
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
67
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
|
|
68
|
+
|
|
69
|
+
```js
|
|
70
|
+
import "@aurodesignsystem/auro-header";
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
74
|
+
**Reference component in HTML**
|
|
75
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
76
|
+
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<auro-header>Hello World!</auro-header>
|
|
80
|
+
```
|
|
81
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
82
|
+
|
|
83
|
+
## Use CDN
|
|
84
|
+
|
|
85
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
|
|
86
|
+
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm"></script>
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
93
|
+
|
|
94
|
+
## auro-header use cases
|
|
95
|
+
|
|
96
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
97
|
+
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
98
|
+
The `<auro-header>` element should be used in situations where users may:
|
|
99
|
+
|
|
100
|
+
* page header
|
|
101
|
+
* content / paragraph header
|
|
102
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
103
|
+
|
|
104
|
+
## API Code Examples
|
|
105
|
+
|
|
106
|
+
### Default auro-header
|
|
107
|
+
|
|
108
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
|
|
109
|
+
<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
|
|
110
|
+
|
|
111
|
+
```html
|
|
112
|
+
<auro-header>Hello World!</auro-header>
|
|
113
|
+
```
|
|
114
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
115
|
+
|
|
116
|
+
## Development
|
|
117
|
+
|
|
118
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
|
|
119
|
+
In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
|
|
120
|
+
|
|
121
|
+
Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.
|
|
122
|
+
|
|
123
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
124
|
+
|
|
125
|
+
### Start development environment
|
|
126
|
+
|
|
127
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
|
|
128
|
+
Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
|
|
129
|
+
|
|
130
|
+
```shell
|
|
131
|
+
$ npm run dev
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Open [localhost:8000](http://localhost:8000/)
|
|
135
|
+
|
|
136
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
137
|
+
|
|
138
|
+
### Testing
|
|
139
|
+
|
|
140
|
+
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
|
|
141
|
+
Automated tests are required for every Auro component. See `.\test\auro-header.test.js` for the tests for this component. Run `npm run test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.
|
|
142
|
+
|
|
143
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
package/demo/api.html
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3
|
+
See LICENSE in the project root for license information.
|
|
4
|
+
|
|
5
|
+
HTML in this document is standardized and NOT to be edited.
|
|
6
|
+
All demo code should be added/edited in ./demo/api.md
|
|
7
|
+
|
|
8
|
+
With the exception of adding custom elements if needed for the demo.
|
|
9
|
+
|
|
10
|
+
----------------------- DO NOT EDIT -----------------------------
|
|
11
|
+
|
|
12
|
+
-->
|
|
13
|
+
|
|
14
|
+
<!DOCTYPE html>
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<head>
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
+
<title>Auro Web Component Demo | auro-header</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-header's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
+
</head>
|
|
37
|
+
<body class="auro-markdown">
|
|
38
|
+
<main></main>
|
|
39
|
+
|
|
40
|
+
<script type="module">
|
|
41
|
+
import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
|
|
42
|
+
import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
|
|
43
|
+
fetch('./api.md')
|
|
44
|
+
.then((response) => response.text())
|
|
45
|
+
.then((text) => {
|
|
46
|
+
const rawHtml = marked.parse(text);
|
|
47
|
+
document.querySelector('main').innerHTML = rawHtml;
|
|
48
|
+
Prism.highlightAll();
|
|
49
|
+
});
|
|
50
|
+
</script>
|
|
51
|
+
<script type="module" data-demo-script="true" src="./index.min.js"></script>
|
|
52
|
+
|
|
53
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
package/demo/api.md
ADDED
|
@@ -0,0 +1,334 @@
|
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-header
|
|
5
|
+
|
|
6
|
+
The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy.
|
|
7
|
+
|
|
8
|
+
## Properties
|
|
9
|
+
|
|
10
|
+
| Property | Attribute | Type | Default | Description |
|
|
11
|
+
|---------------|---------------|----------|-------------------------|--------------------------------------------------|
|
|
12
|
+
| [color](#color) | `color` | `string` | | (Deprecated) Allows user to pass in CSS custom property or direct hex value to change the color of the header. |
|
|
13
|
+
| [display](#display) | `display` | `string` | | (Deprecated) Determines the visual appearance of the header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`. |
|
|
14
|
+
| [level](#level) | `level` | `number` | 1 | Determines the semantic heading level of the HTML element. Options are `1` - `6`. |
|
|
15
|
+
| [margin](#margin) | `margin` | `string` | | (Deprecated) Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`. |
|
|
16
|
+
| [size](#size) | `size` | `string` | | (Deprecated) Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`. |
|
|
17
|
+
| [typography](#typography) | `typography` | `string` | "heading" | Determines the font of heading, Options are `heading` or `display`. |
|
|
18
|
+
| [visualLevel](#visualLevel) | `visualLevel` | `number` | "same value as `level`" | Determines the visual appearance of the header. Options are `1` - `6`. |
|
|
19
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
20
|
+
|
|
21
|
+
## API Examples
|
|
22
|
+
|
|
23
|
+
### Basic
|
|
24
|
+
|
|
25
|
+
The `auro-header` defaults to an `<h1>` element.
|
|
26
|
+
|
|
27
|
+
<div class="exampleWrapper">
|
|
28
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
|
|
29
|
+
<!-- The below content is automatically added from ../apiExamples/basic.html -->
|
|
30
|
+
<auro-header>Hello World!</auro-header>
|
|
31
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
32
|
+
</div>
|
|
33
|
+
<auro-accordion alignRight>
|
|
34
|
+
<span slot="trigger">See code</span>
|
|
35
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
|
|
36
|
+
<!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<auro-header>Hello World!</auro-header>
|
|
40
|
+
```
|
|
41
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
42
|
+
</auro-accordion>
|
|
43
|
+
|
|
44
|
+
### Changing Header Styles and Sizes
|
|
45
|
+
|
|
46
|
+
The `auro-header` component allows for flexible customization of both HTML semantics and visual appearance styles.
|
|
47
|
+
|
|
48
|
+
#### Header Level (HTML Semantics)
|
|
49
|
+
|
|
50
|
+
Use the `level` attribute to control the semantic heading level (`<h1>` through `<h6>`).
|
|
51
|
+
|
|
52
|
+
If `visualLevel` is not specified, `visualLevel` will default to the same value as `level`.
|
|
53
|
+
|
|
54
|
+
<div class="exampleWrapper">
|
|
55
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/level.html) -->
|
|
56
|
+
<!-- The below content is automatically added from ../apiExamples/level.html -->
|
|
57
|
+
<auro-header level="3">Hello World!</auro-header>
|
|
58
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
59
|
+
</div>
|
|
60
|
+
<auro-accordion alignRight>
|
|
61
|
+
<span slot="trigger">See code</span>
|
|
62
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/level.html) -->
|
|
63
|
+
<!-- The below code snippet is automatically added from ../apiExamples/level.html -->
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<auro-header level="3">Hello World!</auro-header>
|
|
67
|
+
```
|
|
68
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
69
|
+
</auro-accordion>
|
|
70
|
+
|
|
71
|
+
#### Header Style (Visual Appearance) <a name="visualLevel"></a>
|
|
72
|
+
Use the `visualLevel` attribute to control the visual style of the header.
|
|
73
|
+
|
|
74
|
+
<div class="exampleWrapper">
|
|
75
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/visualLevel.html) -->
|
|
76
|
+
<!-- The below content is automatically added from ../apiExamples/visualLevel.html -->
|
|
77
|
+
<table>
|
|
78
|
+
<thead>
|
|
79
|
+
<tr>
|
|
80
|
+
<th>visualLevel</th>
|
|
81
|
+
<th>typography="heading"</th>
|
|
82
|
+
<th>typography="display"</th>
|
|
83
|
+
</tr>
|
|
84
|
+
</thead>
|
|
85
|
+
<tr>
|
|
86
|
+
<td>
|
|
87
|
+
1
|
|
88
|
+
</td>
|
|
89
|
+
<td>
|
|
90
|
+
<auro-header visualLevel="1">Extra large heading</auro-header>
|
|
91
|
+
</td>
|
|
92
|
+
<td>
|
|
93
|
+
<auro-header visualLevel="1" typography="display">2 Extra large display</auro-header>
|
|
94
|
+
</td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr>
|
|
97
|
+
<td>
|
|
98
|
+
2
|
|
99
|
+
</td>
|
|
100
|
+
<td>
|
|
101
|
+
<auro-header visualLevel="2">Large heading</auro-header>
|
|
102
|
+
</td>
|
|
103
|
+
<td>
|
|
104
|
+
<auro-header visualLevel="2" typography="display">Extra large display</auro-header>
|
|
105
|
+
</td>
|
|
106
|
+
</tr>
|
|
107
|
+
<tr>
|
|
108
|
+
<td>
|
|
109
|
+
3
|
|
110
|
+
</td>
|
|
111
|
+
<td>
|
|
112
|
+
<auro-header visualLevel="3">Medium heading</auro-header>
|
|
113
|
+
</td>
|
|
114
|
+
<td>
|
|
115
|
+
<auro-header visualLevel="3" typography="display">Large display</auro-header>
|
|
116
|
+
</td>
|
|
117
|
+
</tr>
|
|
118
|
+
<tr>
|
|
119
|
+
<td>
|
|
120
|
+
4
|
|
121
|
+
</td>
|
|
122
|
+
<td>
|
|
123
|
+
<auro-header visualLevel="4">Small heading</auro-header>
|
|
124
|
+
</td>
|
|
125
|
+
<td>
|
|
126
|
+
<auro-header visualLevel="4" typography="display">Medium display</auro-header>
|
|
127
|
+
</td>
|
|
128
|
+
</tr>
|
|
129
|
+
<tr>
|
|
130
|
+
<td>
|
|
131
|
+
5
|
|
132
|
+
</td>
|
|
133
|
+
<td>
|
|
134
|
+
<auro-header visualLevel="5">Extra small heading</auro-header>
|
|
135
|
+
</td>
|
|
136
|
+
<td>
|
|
137
|
+
<auro-header visualLevel="5" typography="display">Small display</auro-header>
|
|
138
|
+
</td>
|
|
139
|
+
</tr>
|
|
140
|
+
<tr>
|
|
141
|
+
<td>
|
|
142
|
+
6
|
|
143
|
+
</td>
|
|
144
|
+
<td>
|
|
145
|
+
<auro-header visualLevel="6">2 Extra small heading</auro-header>
|
|
146
|
+
</td>
|
|
147
|
+
<td>
|
|
148
|
+
<auro-header visualLevel="6" typography="display">Extra small display</auro-header>
|
|
149
|
+
</td>
|
|
150
|
+
</tr>
|
|
151
|
+
</table>
|
|
152
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
153
|
+
</div>
|
|
154
|
+
<auro-accordion alignRight>
|
|
155
|
+
<span slot="trigger">See code</span>
|
|
156
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/visualLevel.html) -->
|
|
157
|
+
<!-- The below code snippet is automatically added from ../apiExamples/visualLevel.html -->
|
|
158
|
+
|
|
159
|
+
```html
|
|
160
|
+
<table>
|
|
161
|
+
<thead>
|
|
162
|
+
<tr>
|
|
163
|
+
<th>visualLevel</th>
|
|
164
|
+
<th>typography="heading"</th>
|
|
165
|
+
<th>typography="display"</th>
|
|
166
|
+
</tr>
|
|
167
|
+
</thead>
|
|
168
|
+
<tr>
|
|
169
|
+
<td>
|
|
170
|
+
1
|
|
171
|
+
</td>
|
|
172
|
+
<td>
|
|
173
|
+
<auro-header visualLevel="1">Extra large heading</auro-header>
|
|
174
|
+
</td>
|
|
175
|
+
<td>
|
|
176
|
+
<auro-header visualLevel="1" typography="display">2 Extra large display</auro-header>
|
|
177
|
+
</td>
|
|
178
|
+
</tr>
|
|
179
|
+
<tr>
|
|
180
|
+
<td>
|
|
181
|
+
2
|
|
182
|
+
</td>
|
|
183
|
+
<td>
|
|
184
|
+
<auro-header visualLevel="2">Large heading</auro-header>
|
|
185
|
+
</td>
|
|
186
|
+
<td>
|
|
187
|
+
<auro-header visualLevel="2" typography="display">Extra large display</auro-header>
|
|
188
|
+
</td>
|
|
189
|
+
</tr>
|
|
190
|
+
<tr>
|
|
191
|
+
<td>
|
|
192
|
+
3
|
|
193
|
+
</td>
|
|
194
|
+
<td>
|
|
195
|
+
<auro-header visualLevel="3">Medium heading</auro-header>
|
|
196
|
+
</td>
|
|
197
|
+
<td>
|
|
198
|
+
<auro-header visualLevel="3" typography="display">Large display</auro-header>
|
|
199
|
+
</td>
|
|
200
|
+
</tr>
|
|
201
|
+
<tr>
|
|
202
|
+
<td>
|
|
203
|
+
4
|
|
204
|
+
</td>
|
|
205
|
+
<td>
|
|
206
|
+
<auro-header visualLevel="4">Small heading</auro-header>
|
|
207
|
+
</td>
|
|
208
|
+
<td>
|
|
209
|
+
<auro-header visualLevel="4" typography="display">Medium display</auro-header>
|
|
210
|
+
</td>
|
|
211
|
+
</tr>
|
|
212
|
+
<tr>
|
|
213
|
+
<td>
|
|
214
|
+
5
|
|
215
|
+
</td>
|
|
216
|
+
<td>
|
|
217
|
+
<auro-header visualLevel="5">Extra small heading</auro-header>
|
|
218
|
+
</td>
|
|
219
|
+
<td>
|
|
220
|
+
<auro-header visualLevel="5" typography="display">Small display</auro-header>
|
|
221
|
+
</td>
|
|
222
|
+
</tr>
|
|
223
|
+
<tr>
|
|
224
|
+
<td>
|
|
225
|
+
6
|
|
226
|
+
</td>
|
|
227
|
+
<td>
|
|
228
|
+
<auro-header visualLevel="6">2 Extra small heading</auro-header>
|
|
229
|
+
</td>
|
|
230
|
+
<td>
|
|
231
|
+
<auro-header visualLevel="6" typography="display">Extra small display</auro-header>
|
|
232
|
+
</td>
|
|
233
|
+
</tr>
|
|
234
|
+
</table>
|
|
235
|
+
```
|
|
236
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
237
|
+
</auro-accordion>
|
|
238
|
+
|
|
239
|
+
#### Typography <a name="typography"></a> to Heading CSS Class Mapping
|
|
240
|
+
|
|
241
|
+
The `visualLevel` attribute controls the visual style of the header by mapping to specific <a href="https://auro.alaskaair.com/typography/usage" target="_blank">typography classes</a>.
|
|
242
|
+
|
|
243
|
+
Below is how each `visualLevel` value corresponds to a typography class:
|
|
244
|
+
|
|
245
|
+
| visualLevel | `typography="heading"` | `typography="display"` |
|
|
246
|
+
|-----------------|---------------|---------------|
|
|
247
|
+
| `1` | `heading-xl` | `display-2xl` |
|
|
248
|
+
| `2` | `heading-lg` | `display-xl` |
|
|
249
|
+
| `3` | `heading-md` | `display-lg` |
|
|
250
|
+
| `4` | `heading-sm` | `display-md` |
|
|
251
|
+
| `5` | `heading-xs` | `display-sm` |
|
|
252
|
+
| `6` | `heading-2xs` | `display-xs` |
|
|
253
|
+
|
|
254
|
+
These classes apply consistent typography styles, including font size, line height, font weight, and more, ensuring uniform header presentation across components.
|
|
255
|
+
|
|
256
|
+
### Additional Header Examples
|
|
257
|
+
|
|
258
|
+
Additional examples with various header `level` and `visualLevel` options.
|
|
259
|
+
|
|
260
|
+
<div class="exampleWrapper">
|
|
261
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/additionalExamples.html) -->
|
|
262
|
+
<!-- The below content is automatically added from ../apiExamples/additionalExamples.html -->
|
|
263
|
+
<auro-header level="2" visualLevel="1">Hello World!</auro-header>
|
|
264
|
+
<auro-header level="2" visualLevel="2">Hello World!</auro-header>
|
|
265
|
+
<auro-header level="3" visualLevel="3">Hello World!</auro-header>
|
|
266
|
+
<auro-header level="5" visualLevel="4">Hello World!</auro-header>
|
|
267
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
268
|
+
</div>
|
|
269
|
+
<auro-accordion alignRight>
|
|
270
|
+
<span slot="trigger">See code</span>
|
|
271
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/additionalExamples.html) -->
|
|
272
|
+
<!-- The below code snippet is automatically added from ../apiExamples/additionalExamples.html -->
|
|
273
|
+
|
|
274
|
+
```html
|
|
275
|
+
<auro-header level="2" visualLevel="1">Hello World!</auro-header>
|
|
276
|
+
<auro-header level="2" visualLevel="2">Hello World!</auro-header>
|
|
277
|
+
<auro-header level="3" visualLevel="3">Hello World!</auro-header>
|
|
278
|
+
<auro-header level="5" visualLevel="4">Hello World!</auro-header>
|
|
279
|
+
```
|
|
280
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
281
|
+
</auro-accordion>
|
|
282
|
+
|
|
283
|
+
### Adjust Margins
|
|
284
|
+
|
|
285
|
+
In some cases the margin between elements may need to be adjusted. To do this, add margin using css style.
|
|
286
|
+
<div class="exampleWrapper">
|
|
287
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/margins.html) -->
|
|
288
|
+
<!-- The below content is automatically added from ../apiExamples/margins.html -->
|
|
289
|
+
<auro-header level="2" visualLevel="4" style="margin-bottom: var(--ds-size-400)">Hello World!</auro-header>
|
|
290
|
+
<ol>
|
|
291
|
+
<li>... thing</li>
|
|
292
|
+
<li>thing ...</li>
|
|
293
|
+
</ol>
|
|
294
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
295
|
+
</div>
|
|
296
|
+
<auro-accordion alignRight>
|
|
297
|
+
<span slot="trigger">See code</span>
|
|
298
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/margins.html) -->
|
|
299
|
+
<!-- The below code snippet is automatically added from ../apiExamples/margins.html -->
|
|
300
|
+
|
|
301
|
+
```html
|
|
302
|
+
<auro-header level="2" visualLevel="4" style="margin-bottom: var(--ds-size-400)">Hello World!</auro-header>
|
|
303
|
+
<ol>
|
|
304
|
+
<li>... thing</li>
|
|
305
|
+
<li>thing ...</li>
|
|
306
|
+
</ol>
|
|
307
|
+
```
|
|
308
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
309
|
+
</auro-accordion>
|
|
310
|
+
|
|
311
|
+
### Color Inheritance
|
|
312
|
+
|
|
313
|
+
If there is a CSS selector that has the color definition you want to use with the header, simply wrap the header in a `div` or `span` and the auro-header component will inherit the color.
|
|
314
|
+
|
|
315
|
+
<div class="exampleWrapper">
|
|
316
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/colorInheritance.html) -->
|
|
317
|
+
<!-- The below content is automatically added from ../apiExamples/colorInheritance.html -->
|
|
318
|
+
<div style="color: var(--ds-color-alert-error-default)">
|
|
319
|
+
<auro-header level="3" visualLevel="2">There has been an error</auro-header>
|
|
320
|
+
</div>
|
|
321
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
322
|
+
</div>
|
|
323
|
+
<auro-accordion alignRight>
|
|
324
|
+
<span slot="trigger">See code</span>
|
|
325
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/colorInheritance.html) -->
|
|
326
|
+
<!-- The below code snippet is automatically added from ../apiExamples/colorInheritance.html -->
|
|
327
|
+
|
|
328
|
+
```html
|
|
329
|
+
<div style="color: var(--ds-color-alert-error-default)">
|
|
330
|
+
<auro-header level="3" visualLevel="2">There has been an error</auro-header>
|
|
331
|
+
</div>
|
|
332
|
+
```
|
|
333
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
334
|
+
</auro-accordion>
|
package/demo/index.html
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
3
|
+
See LICENSE in the project root for license information.
|
|
4
|
+
|
|
5
|
+
HTML in this document is standardized and NOT to be edited.
|
|
6
|
+
All demo code should be added/edited in ./demo/index.md
|
|
7
|
+
|
|
8
|
+
With the exception of adding custom elements if needed for the demo.
|
|
9
|
+
|
|
10
|
+
----------------------- DO NOT EDIT -----------------------------
|
|
11
|
+
|
|
12
|
+
-->
|
|
13
|
+
|
|
14
|
+
<!DOCTYPE html>
|
|
15
|
+
<html lang="en">
|
|
16
|
+
<head>
|
|
17
|
+
<meta charset="UTF-8" />
|
|
18
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
|
+
<title>Auro Web Component Demo | auro-header</title>
|
|
20
|
+
|
|
21
|
+
<!-- Prism.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-header's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
|
+
</head>
|
|
37
|
+
<body class="auro-markdown">
|
|
38
|
+
<main></main>
|
|
39
|
+
|
|
40
|
+
<script type="module">
|
|
41
|
+
import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
|
|
42
|
+
import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
|
|
43
|
+
fetch('./index.md')
|
|
44
|
+
.then((response) => response.text())
|
|
45
|
+
.then((text) => {
|
|
46
|
+
const rawHtml = marked.parse(text);
|
|
47
|
+
document.querySelector('main').innerHTML = rawHtml;
|
|
48
|
+
Prism.highlightAll();
|
|
49
|
+
});
|
|
50
|
+
</script>
|
|
51
|
+
<script type="module" data-demo-script="true" src="./index.min.js"></script>
|
|
52
|
+
|
|
53
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
package/demo/index.js
ADDED
package/demo/index.md
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
The index.md file is a compiled document. No edits should be made directly to this file.
|
|
3
|
+
README.md is created by running `npm run build:docs`.
|
|
4
|
+
This file is generated based on a template fetched from `./docs/partials/index.md`
|
|
5
|
+
-->
|
|
6
|
+
|
|
7
|
+
# Header
|
|
8
|
+
|
|
9
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/description.md) -->
|
|
10
|
+
<!-- The below content is automatically added from ../docs/partials/description.md -->
|
|
11
|
+
The `<auro-header>` component is a simple component for rendering page or content headers without having to deal with font styling. Simply choose the level of the header want and the style type.
|
|
12
|
+
|
|
13
|
+
The auro-header component is able to take any combination of options for heading levels and display options. See [Auro's header usage guidelines](https://auro.alaskaair.com/typography/usage) for additional examples sans web component dependency.
|
|
14
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
15
|
+
|
|
16
|
+
## auro-header use cases
|
|
17
|
+
|
|
18
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../docs/partials/useCases.md) -->
|
|
19
|
+
<!-- The below content is automatically added from ../docs/partials/useCases.md -->
|
|
20
|
+
The `<auro-header>` element should be used in situations where users may:
|
|
21
|
+
|
|
22
|
+
* page header
|
|
23
|
+
* content / paragraph header
|
|
24
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
25
|
+
|
|
26
|
+
## Example(s)
|
|
27
|
+
|
|
28
|
+
The `auro-header` defaults to an `<h1>` element.
|
|
29
|
+
|
|
30
|
+
<div class="exampleWrapper">
|
|
31
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/basic.html) -->
|
|
32
|
+
<!-- The below content is automatically added from ../apiExamples/basic.html -->
|
|
33
|
+
<auro-header>Hello World!</auro-header>
|
|
34
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
35
|
+
</div>
|
|
36
|
+
<auro-accordion alignRight>
|
|
37
|
+
<span slot="trigger">See code</span>
|
|
38
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/basic.html) -->
|
|
39
|
+
<!-- The below code snippet is automatically added from ../apiExamples/basic.html -->
|
|
40
|
+
|
|
41
|
+
```html
|
|
42
|
+
<auro-header>Hello World!</auro-header>
|
|
43
|
+
```
|
|
44
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
45
|
+
</auro-accordion>
|
|
46
|
+
|
|
47
|
+
## Recommended Use and Version Control
|
|
48
|
+
|
|
49
|
+
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-header` custom element is defined automatically.
|
|
50
|
+
|
|
51
|
+
To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroHeader.register(name)` method and pass in a unique name.
|
|
52
|
+
|
|
53
|
+
```js
|
|
54
|
+
import { AuroHeader } from '@aurodesignsystem/auro-header/class';
|
|
55
|
+
|
|
56
|
+
AuroHeader.register('custom-header');
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
This will create a new custom element that you can use in your HTML that will function identically to the `auro-header` element.
|
|
60
|
+
|
|
61
|
+
<div class="exampleWrapper">
|
|
62
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/custom.html) -->
|
|
63
|
+
<!-- The below content is automatically added from ../apiExamples/custom.html -->
|
|
64
|
+
<custom-header>Hello World!</custom-header>
|
|
65
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
66
|
+
</div>
|
|
67
|
+
<auro-accordion alignRight>
|
|
68
|
+
<span slot="trigger">See code</span>
|
|
69
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/custom.html) -->
|
|
70
|
+
<!-- The below code snippet is automatically added from ../apiExamples/custom.html -->
|
|
71
|
+
|
|
72
|
+
```html
|
|
73
|
+
<custom-header>Hello World!</custom-header>
|
|
74
|
+
```
|
|
75
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
76
|
+
</auro-accordion>
|