@aurodesignsystem/auro-devops-component 1.0.0-rc-1.1

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 (19) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +189 -0
  5. package/custom-elements.json +1628 -0
  6. package/demo/api.html +56 -0
  7. package/demo/api.js +1 -0
  8. package/demo/api.md +787 -0
  9. package/demo/api.min.js +3 -0
  10. package/demo/auro-slideshow.min.js +3327 -0
  11. package/demo/index.html +59 -0
  12. package/demo/index.js +6 -0
  13. package/demo/index.md +197 -0
  14. package/demo/index.min.js +6 -0
  15. package/dist/auro-slideshow-rYdnH7og.js +127 -0
  16. package/dist/index.d.ts +134 -0
  17. package/dist/index.js +1 -0
  18. package/dist/registered.js +1 -0
  19. package/package.json +91 -0
package/demo/index.html ADDED
@@ -0,0 +1,59 @@
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-slideshow</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-layover'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
+
44
+ import './index.min.js';
45
+
46
+ fetch('./index.md')
47
+ .then((response) => response.text())
48
+ .then((text) => {
49
+ const rawHtml = marked.parse(text);
50
+ document.querySelector('main').innerHTML = rawHtml;
51
+ Prism.highlightAll();
52
+ });
53
+ </script>
54
+ <!-- If additional elements are needed for the demo, add them here. -->
55
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
56
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/dist/auro-header__bundled.js" type="module"></script>
57
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
58
+ </body>
59
+ </html>
package/demo/index.js ADDED
@@ -0,0 +1,6 @@
1
+ import { AuroSlideshow } from "../src/index.js";
2
+
3
+ console.log("Registering here or something, i guess?");
4
+
5
+ AuroSlideshow.register();
6
+ AuroSlideshow.register("custom-slideshow");
package/demo/index.md ADDED
@@ -0,0 +1,197 @@
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
+ # Slideshow
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
+ `<auro-slideshow>` is an [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of displaying a sequence of slides, which can automatically advance through the content or be manually controlled by the user.
12
+
13
+ The `<auro-slideshow>` component is a wrapper element. All slides are slotted content and must be direct children of the component. Slides must have assigned `width` and `height` properties to display properly.
14
+
15
+ `<auro-slideshow>` is a fully customizable component and does not come with any features turned on by default. The features of `<auro-slideshow>` are turned on by including the proper attributes on the element.
16
+
17
+ **Note:** If all the slides can fit on the page at once, the slideshow will not activate.
18
+ <!-- AURO-GENERATED-CONTENT:END -->
19
+
20
+ ## auro-slideshow use cases
21
+
22
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
23
+ <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
24
+ The `<auro-slideshow>` element should be used in situations where:
25
+
26
+ * A series of images or content needs to be displayed in a space-saving way
27
+ * Autoplaying or autoscrolling functionality is needed
28
+ * A current slide indicator is required
29
+ <!-- AURO-GENERATED-CONTENT:END -->
30
+
31
+ ## Additional Information
32
+
33
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/readmeAddlInfo.md) -->
34
+ <!-- The below content is automatically added from ./../docs/partials/readmeAddlInfo.md -->
35
+
36
+ ### Properties usage
37
+
38
+ `autoplay` and `autoScroll` are mutually exclusive properties and should not be used together on the same component instance.
39
+
40
+ Both `navigation` and `pagination` can be used together, but at least one must be used to give users a clear way to control the slides manually.
41
+
42
+ ### Mobile behavior
43
+
44
+ On mobile devices, `autoScroll` and `navigation` controls are automatically disabled. Users can navigate the slideshow by swiping left or right.
45
+ <!-- AURO-GENERATED-CONTENT:END -->
46
+
47
+ ## Example(s)
48
+
49
+ ### Autoplay
50
+
51
+ <div class="exampleWrapper">
52
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autoplay.html) -->
53
+ <!-- The below content is automatically added from ./../apiExamples/autoplay.html -->
54
+ <auro-slideshow pagination autoplay playOnInit loop>
55
+ <div style="height: 480px">
56
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
57
+ </div>
58
+ <div style="height: 480px">
59
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
60
+ </div>
61
+ <div style="height: 480px">
62
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
63
+ </div>
64
+ <div style="height: 480px">
65
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
66
+ </div>
67
+ <div style="height: 480px">
68
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
69
+ </div>
70
+ </auro-slideshow>
71
+ <!-- AURO-GENERATED-CONTENT:END -->
72
+ </div>
73
+ <auro-accordion alignRight>
74
+ <span slot="trigger">See code</span>
75
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autoplay.html) -->
76
+ <!-- The below code snippet is automatically added from ./../apiExamples/autoplay.html -->
77
+
78
+ ```html
79
+ <auro-slideshow pagination autoplay playOnInit loop>
80
+ <div style="height: 480px">
81
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=1" alt="Random image 1">
82
+ </div>
83
+ <div style="height: 480px">
84
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=2" alt="Random image 2">
85
+ </div>
86
+ <div style="height: 480px">
87
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=3" alt="Random image 3">
88
+ </div>
89
+ <div style="height: 480px">
90
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=4" alt="Random image 4">
91
+ </div>
92
+ <div style="height: 480px">
93
+ <img style="object-fit: cover;" src="https://picsum.photos/1000/480?random=5" alt="Random image 5">
94
+ </div>
95
+ </auro-slideshow>
96
+ ```
97
+ <!-- AURO-GENERATED-CONTENT:END -->
98
+ </auro-accordion>
99
+
100
+ ### AutoScroll
101
+
102
+ <div class="exampleWrapper">
103
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autoscroll.html) -->
104
+ <!-- The below content is automatically added from ./../apiExamples/autoscroll.html -->
105
+ <auro-slideshow navigation autoScroll playOnInit loop>
106
+ <div style="height: 480px; max-width: 400px;">
107
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
108
+ </div>
109
+ <div style="height: 480px; max-width: 400px;">
110
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
111
+ </div>
112
+ <div style="height: 480px; max-width: 400px;">
113
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
114
+ </div>
115
+ <div style="height: 480px; max-width: 400px;">
116
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
117
+ </div>
118
+ <div style="height: 480px; max-width: 400px;">
119
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
120
+ </div>
121
+ </auro-slideshow>
122
+ <!-- AURO-GENERATED-CONTENT:END -->
123
+ </div>
124
+ <auro-accordion alignRight>
125
+ <span slot="trigger">See code</span>
126
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autoscroll.html) -->
127
+ <!-- The below code snippet is automatically added from ./../apiExamples/autoscroll.html -->
128
+
129
+ ```html
130
+ <auro-slideshow navigation autoScroll playOnInit loop>
131
+ <div style="height: 480px; max-width: 400px;">
132
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
133
+ </div>
134
+ <div style="height: 480px; max-width: 400px;">
135
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
136
+ </div>
137
+ <div style="height: 480px; max-width: 400px;">
138
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
139
+ </div>
140
+ <div style="height: 480px; max-width: 400px;">
141
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
142
+ </div>
143
+ <div style="height: 480px; max-width: 400px;">
144
+ <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
145
+ </div>
146
+ </auro-slideshow>
147
+ ```
148
+ <!-- AURO-GENERATED-CONTENT:END -->
149
+ </auro-accordion>
150
+
151
+ ## Recommended Use and Version Control
152
+
153
+ 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 clement. 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-slideshow` custom element is defined automatically.
154
+
155
+ To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `registerComponent(name)` method and pass in a unique name.
156
+
157
+ ```js
158
+ import './node_modules/@aurodesignsystem/auro-slideshow';
159
+ registerComponent('custom-slideshow');
160
+ ```
161
+
162
+ This will create a new custom element that you can use in your HTML that will function identically to the `auro-slideshow` element.
163
+
164
+ <div class="exampleWrapper">
165
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/custom.html) -->
166
+ <!-- The below content is automatically added from ./../apiExamples/custom.html -->
167
+ <custom-slideshow navigation>
168
+ <div style="width: 400px; border: 2px solid #000; display: flex; justify-content: center;">
169
+ <p>Slide 1</p>
170
+ </div>
171
+ <div style="width: 400px; border: 2px solid #000; display: flex; justify-content: center;">
172
+ <p>Slide 2</p>
173
+ </div>
174
+ <div style="width: 400px; border: 2px solid #000; display: flex; justify-content: center;">
175
+ <p>Slide 3</p>
176
+ </div>
177
+ </custom-slideshow>
178
+ <!-- AURO-GENERATED-CONTENT:END -->
179
+ </div>
180
+ <auro-accordion alignRight>
181
+ <span slot="trigger">See code</span>
182
+
183
+ ```html
184
+ <custom-slideshow navigation>
185
+ <div style="width: 400px; border: 2px solid #000; display: flex; justify-content: center;">
186
+ <p>Slide 1</p>
187
+ </div>
188
+ <div style="width: 400px; border: 2px solid #000; display: flex; justify-content: center;">
189
+ <p>Slide 2</p>
190
+ </div>
191
+ <div style="width: 400px; border: 2px solid #000; display: flex; justify-content: center;">
192
+ <p>Slide 3</p>
193
+ </div>
194
+ </custom-slideshow>
195
+ ```
196
+
197
+ </auro-accordion>
package/demo/index.min.js ADDED
@@ -0,0 +1,6 @@
1
+ import { A as AuroSlideshow } from './auro-slideshow.min.js';
2
+
3
+ console.log("Registering here or something, i guess?");
4
+
5
+ AuroSlideshow.register();
6
+ AuroSlideshow.register("custom-slideshow");