@aurodesignsystem-dev/auro-carousel 0.0.0-pr104.1 → 0.0.0-pr106.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.
Files changed (12) hide show
  1. package/README.md +79 -68
  2. package/demo/api.html +1 -1
  3. package/demo/api.js +1 -1
  4. package/demo/api.md +103 -153
  5. package/demo/auro-carousel.min.js +40 -22
  6. package/demo/index.html +2 -3
  7. package/demo/index.md +22 -300
  8. package/dist/{auro-carousel-DbNzxhOH.js → auro-carousel-D1ntQpGY.js} +4 -4
  9. package/dist/index.d.ts +209 -128
  10. package/dist/index.js +1 -1
  11. package/dist/registered.js +1 -1
  12. package/package.json +14 -8
package/README.md CHANGED
@@ -28,17 +28,20 @@ The following sections are editable by making changes to the following files:
28
28
  <!-- 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. -->
29
29
  <!-- AURO-GENERATED-CONTENT:END -->
30
30
 
31
- ## UI development browser support
31
+ ## Use Cases
32
32
 
33
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/browserSupport.md) -->
34
- For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
33
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
34
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
35
+ The `<auro-carousel>` element should be used in situations where users may:
35
36
 
37
+ * Scroll through multiple flight date options or shoulder dates
38
+ * Scroll through multiple images
36
39
  <!-- AURO-GENERATED-CONTENT:END -->
37
40
 
38
41
  ## Install
39
42
 
40
43
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentInstall.md) -->
41
- [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-carousel/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-carousel/actions/workflows/testPublish.yml)
44
+ [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-carousel/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-carousel/actions/workflows/release.yml)
42
45
  [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-carousel?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-carousel)
43
46
  [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-carousel?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
44
47
  ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
@@ -49,17 +52,10 @@ $ npm i @aurodesignsystem/auro-carousel
49
52
 
50
53
  <!-- AURO-GENERATED-CONTENT:END -->
51
54
 
52
- ### Design Token CSS Custom Property dependency
53
-
54
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/designTokens.md) -->
55
- The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
56
-
57
- <!-- AURO-GENERATED-CONTENT:END -->
58
-
59
- ### Define dependency in project component
55
+ ### Define Dependency in Project
60
56
 
61
57
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImportDescription.md) -->
62
- Defining the component dependency within each component that is using the `<auro-carousel>` component.
58
+ Defining the dependency within each project that is using the `<auro-carousel>` component.
63
59
 
64
60
  <!-- AURO-GENERATED-CONTENT:END -->
65
61
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
@@ -68,28 +64,9 @@ Defining the component dependency within each component that is using the `<auro
68
64
  import "@aurodesignsystem/auro-carousel";
69
65
  ```
70
66
 
71
- <!-- AURO-GENERATED-CONTENT:END -->
72
- **Reference component in HTML**
73
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
74
- <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
75
-
76
- ```html
77
- <auro-carousel centerSelected>
78
- <auro-pane date="2020-10-10" price="$435"></auro-pane>
79
- <auro-pane date="2020-10-11" price="$435"></auro-pane>
80
- <auro-pane date="2020-10-12" price="$435"></auro-pane>
81
- <auro-pane date="2020-10-13" selected price="$666"></auro-pane>
82
- <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
83
- <auro-pane date="2020-10-15" price="$435"></auro-pane>
84
- <auro-pane date="2020-10-16" price="$435"></auro-pane>
85
- <auro-pane date="2020-10-17" price="$435"></auro-pane>
86
- <auro-pane date="2020-10-18" price="$435"></auro-pane>
87
- <auro-pane date="2020-10-19" price="$435"></auro-pane>
88
- </auro-carousel>
89
- ```
90
67
  <!-- AURO-GENERATED-CONTENT:END -->
91
68
 
92
- ## Use CDN
69
+ ### Use CDN
93
70
 
94
71
  <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
95
72
  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.
@@ -100,64 +77,98 @@ In cases where the project is not able to process JS assets, there are pre-proce
100
77
 
101
78
  <!-- AURO-GENERATED-CONTENT:END -->
102
79
 
103
- ## auro-carousel use cases
104
-
105
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
106
- <!-- The below content is automatically added from ./docs/partials/useCases.md -->
107
- The `<auro-carousel>` element should be used in situations where users may:
108
-
109
- * Scroll through multiple flight date options or shoulder dates
110
- * Scroll through multiple images
111
- <!-- AURO-GENERATED-CONTENT:END -->
112
-
113
- ## API Code Examples
114
-
115
- ### Default auro-carousel
80
+ ## Basic Example
116
81
 
117
82
  <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
118
83
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
119
84
 
120
85
  ```html
121
- <auro-carousel centerSelected>
86
+ <auro-carousel>
122
87
  <auro-pane date="2020-10-10" price="$435"></auro-pane>
123
88
  <auro-pane date="2020-10-11" price="$435"></auro-pane>
124
89
  <auro-pane date="2020-10-12" price="$435"></auro-pane>
125
- <auro-pane date="2020-10-13" selected price="$666"></auro-pane>
126
- <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
90
+ <auro-pane date="2020-10-13" price="$435"></auro-pane>
91
+ <auro-pane date="2020-10-14" price="$435"></auro-pane>
127
92
  <auro-pane date="2020-10-15" price="$435"></auro-pane>
128
93
  <auro-pane date="2020-10-16" price="$435"></auro-pane>
129
94
  <auro-pane date="2020-10-17" price="$435"></auro-pane>
95
+ <auro-pane date="2020-10-18" selected price="$435"></auro-pane>
96
+ <auro-pane date="2020-10-19" price="$435"></auro-pane>
97
+ <auro-pane date="2020-10-16" price="$435"></auro-pane>
98
+ <auro-pane date="2020-10-17" price="$435"></auro-pane>
130
99
  <auro-pane date="2020-10-18" price="$435"></auro-pane>
131
100
  <auro-pane date="2020-10-19" price="$435"></auro-pane>
132
101
  </auro-carousel>
133
102
  ```
134
103
  <!-- AURO-GENERATED-CONTENT:END -->
135
104
 
136
- ## Development
105
+ ## Custom Component Registration for Version Management
137
106
 
138
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/developmentDescription.md) -->
139
- 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.
107
+ There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition.
108
+ The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
140
109
 
141
- 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.
110
+ When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
142
111
 
143
- <!-- AURO-GENERATED-CONTENT:END -->
144
-
145
- ### Start development environment
112
+ However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
146
113
 
147
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/localhost.md) -->
148
- 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**.
114
+ You can do this by importing only the component class and using the `register(name)` method with a unique name:
149
115
 
150
- ```shell
151
- $ npm run dev
116
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
117
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
118
+
119
+ ```js
120
+ // Import the class only
121
+ import { AuroCarousel } from '@aurodesignsystem/auro-carousel/class';
122
+
123
+ // Register with a custom name if desired
124
+ AuroCarousel.register('custom-carousel');
152
125
  ```
153
126
 
154
- Open [localhost:8000](http://localhost:8000/)
155
-
127
+ This will create a new custom element `<custom-carousel>` that behaves exactly like `<auro-carousel>`, allowing both to coexist on the same page without interfering with each other.
156
128
  <!-- AURO-GENERATED-CONTENT:END -->
129
+ <div class="exampleWrapper exampleWrapper--flex">
130
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
131
+ <!-- The below content is automatically added from ./apiExamples/custom.html -->
132
+ <custom-carousel label="Flight options" scrollDistance="420" id="demo1">
133
+ <auro-pane date="2020-10-10" price="$435"></auro-pane>
134
+ <auro-pane date="2020-10-11" price="$435"></auro-pane>
135
+ <auro-pane date="2020-10-12" price="$435"></auro-pane>
136
+ <auro-pane date="2020-10-13" selected price="$435"></auro-pane>
137
+ <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
138
+ <auro-pane date="2020-10-15" price="$435"></auro-pane>
139
+ <auro-pane date="2020-10-16" price="$435"></auro-pane>
140
+ <auro-pane date="2020-10-17" price="$435"></auro-pane>
141
+ <auro-pane date="2020-10-18" price="$435"></auro-pane>
142
+ <auro-pane date="2020-10-19" price="$435"></auro-pane>
143
+ <auro-pane date="2020-10-16" price="$435"></auro-pane>
144
+ <auro-pane date="2020-10-17" price="$435"></auro-pane>
145
+ <auro-pane date="2020-10-18" price="$435"></auro-pane>
146
+ <auro-pane date="2020-10-19" price="$435"></auro-pane>
147
+ </custom-carousel>
148
+ <!-- AURO-GENERATED-CONTENT:END -->
149
+ </div>
150
+ <auro-accordion alignRight>
151
+ <span slot="trigger">See code</span>
152
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
153
+ <!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
157
154
 
158
- ### Testing
159
-
160
- <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/development/testing.md) -->
161
- Automated tests are required for every Auro component. See `.\test\auro-carousel.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.
162
-
163
- <!-- AURO-GENERATED-CONTENT:END -->
155
+ ```html
156
+ <custom-carousel label="Flight options" scrollDistance="420" id="demo1">
157
+ <auro-pane date="2020-10-10" price="$435"></auro-pane>
158
+ <auro-pane date="2020-10-11" price="$435"></auro-pane>
159
+ <auro-pane date="2020-10-12" price="$435"></auro-pane>
160
+ <auro-pane date="2020-10-13" selected price="$435"></auro-pane>
161
+ <auro-pane date="2020-10-14" price="$435" disabled></auro-pane>
162
+ <auro-pane date="2020-10-15" price="$435"></auro-pane>
163
+ <auro-pane date="2020-10-16" price="$435"></auro-pane>
164
+ <auro-pane date="2020-10-17" price="$435"></auro-pane>
165
+ <auro-pane date="2020-10-18" price="$435"></auro-pane>
166
+ <auro-pane date="2020-10-19" price="$435"></auro-pane>
167
+ <auro-pane date="2020-10-16" price="$435"></auro-pane>
168
+ <auro-pane date="2020-10-17" price="$435"></auro-pane>
169
+ <auro-pane date="2020-10-18" price="$435"></auro-pane>
170
+ <auro-pane date="2020-10-19" price="$435"></auro-pane>
171
+ </custom-carousel>
172
+ ```
173
+ <!-- AURO-GENERATED-CONTENT:END -->
174
+ </auro-accordion>
package/demo/api.html CHANGED
@@ -54,7 +54,7 @@
54
54
  </script>
55
55
 
56
56
  <!-- If additional elements are needed for the demo, add them here. -->
57
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
57
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
58
58
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-pane@latest/+esm" type="module"></script>
59
59
  </body>
60
60
  </html>
package/demo/api.js CHANGED
@@ -1,4 +1,4 @@
1
- import { centerElementExample } from "../apiExamples/centerElement";
1
+ import { centerElementExample } from "../apiExamples/center-element";
2
2
  import "../src/registered";
3
3
 
4
4
  export function initExamples(initCount) {