@brightspace-ui/core 3.227.4 → 3.227.6

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 (180) hide show
  1. package/components/button/button-icon.js +10 -10
  2. package/components/button/button.js +8 -8
  3. package/components/demo/test/demo-page-settings.test.js +25 -0
  4. package/components/demo/test/demo-page.test.js +17 -0
  5. package/components/filter/filter-dimension-set-date-time-range-value.js +2 -1
  6. package/components/filter/filter-dimension-set.js +1 -1
  7. package/components/filter/filter.js +2 -1
  8. package/package.json +1 -1
  9. package/components/alert/demo/alert-toast.html +0 -106
  10. package/components/alert/demo/alert.html +0 -82
  11. package/components/backdrop/demo/backdrop-loading.html +0 -166
  12. package/components/backdrop/demo/backdrop.html +0 -57
  13. package/components/breadcrumbs/demo/breadcrumbs.html +0 -53
  14. package/components/button/demo/button-add.html +0 -55
  15. package/components/button/demo/button-copy.html +0 -122
  16. package/components/button/demo/button-icon.html +0 -174
  17. package/components/button/demo/button-move.html +0 -38
  18. package/components/button/demo/button-split.html +0 -76
  19. package/components/button/demo/button-subtle.html +0 -132
  20. package/components/button/demo/button-toggle.html +0 -80
  21. package/components/button/demo/button.html +0 -67
  22. package/components/button/demo/floating-buttons-in-frame.html +0 -44
  23. package/components/button/demo/floating-buttons-in-tabs.html +0 -244
  24. package/components/button/demo/floating-buttons-page.html +0 -100
  25. package/components/button/demo/floating-buttons.html +0 -101
  26. package/components/calendar/demo/calendar.html +0 -76
  27. package/components/card/demo/card.html +0 -304
  28. package/components/collapsible-panel/demo/collapsible-panel.html +0 -218
  29. package/components/colors/demo/color-swatch.js +0 -240
  30. package/components/colors/demo/colors.html +0 -139
  31. package/components/count-badge/demo/count-badge-icon.html +0 -48
  32. package/components/count-badge/demo/count-badge.html +0 -73
  33. package/components/demo/demo/demo-snippet.html +0 -71
  34. package/components/description-list/demo/description-list-test.js +0 -142
  35. package/components/description-list/demo/description-list.html +0 -48
  36. package/components/dialog/demo/dialog-async-content-until.js +0 -89
  37. package/components/dialog/demo/dialog-async-content.js +0 -72
  38. package/components/dialog/demo/dialog-confirm.html +0 -102
  39. package/components/dialog/demo/dialog-container.js +0 -40
  40. package/components/dialog/demo/dialog-fullscreen.html +0 -273
  41. package/components/dialog/demo/dialog-nested.html +0 -94
  42. package/components/dialog/demo/dialog.html +0 -398
  43. package/components/dropdown/demo/dropdown-button.html +0 -102
  44. package/components/dropdown/demo/dropdown-context-menu.html +0 -129
  45. package/components/dropdown/demo/dropdown-flicker-inner.html +0 -70
  46. package/components/dropdown/demo/dropdown-flicker.html +0 -142
  47. package/components/dropdown/demo/dropdown-menu-demo-view.js +0 -37
  48. package/components/dropdown/demo/dropdown-menu.html +0 -227
  49. package/components/dropdown/demo/dropdown-more.html +0 -160
  50. package/components/dropdown/demo/dropdown-positioning.html +0 -127
  51. package/components/dropdown/demo/dropdown-tabs.html +0 -87
  52. package/components/dropdown/demo/dropdown.html +0 -217
  53. package/components/empty-state/demo/empty-state.html +0 -94
  54. package/components/expand-collapse/demo/expand-collapse-content.html +0 -58
  55. package/components/filter/demo/filter-load-more-demo.js +0 -182
  56. package/components/filter/demo/filter-overflow-group.html +0 -246
  57. package/components/filter/demo/filter-search-demo.js +0 -135
  58. package/components/filter/demo/filter-tags.html +0 -115
  59. package/components/filter/demo/filter.html +0 -230
  60. package/components/focus-trap/demo/focus-trap.html +0 -75
  61. package/components/form/demo/form-demo.js +0 -105
  62. package/components/form/demo/form-dialog-demo.js +0 -94
  63. package/components/form/demo/form-panel-demo.js +0 -89
  64. package/components/form/demo/form.html +0 -37
  65. package/components/hierarchical-view/demo/hierarchical-view.html +0 -221
  66. package/components/html-block/demo/html-block-code.html +0 -55
  67. package/components/html-block/demo/html-block.html +0 -696
  68. package/components/icons/demo/icon-color-override.js +0 -23
  69. package/components/icons/demo/icon-custom.html +0 -112
  70. package/components/icons/demo/icon-size-override.js +0 -24
  71. package/components/icons/demo/icon.html +0 -52
  72. package/components/inputs/demo/input-checkbox.html +0 -118
  73. package/components/inputs/demo/input-color-palette.js +0 -67
  74. package/components/inputs/demo/input-color.html +0 -110
  75. package/components/inputs/demo/input-date-range.html +0 -114
  76. package/components/inputs/demo/input-date-time-range.html +0 -128
  77. package/components/inputs/demo/input-date-time.html +0 -100
  78. package/components/inputs/demo/input-date.html +0 -81
  79. package/components/inputs/demo/input-group.html +0 -56
  80. package/components/inputs/demo/input-number.html +0 -136
  81. package/components/inputs/demo/input-percent.html +0 -99
  82. package/components/inputs/demo/input-radio-label-test.js +0 -45
  83. package/components/inputs/demo/input-radio-solo-test.js +0 -47
  84. package/components/inputs/demo/input-radio.html +0 -119
  85. package/components/inputs/demo/input-search.html +0 -75
  86. package/components/inputs/demo/input-select-test.js +0 -60
  87. package/components/inputs/demo/input-select.html +0 -45
  88. package/components/inputs/demo/input-text.html +0 -163
  89. package/components/inputs/demo/input-textarea.html +0 -124
  90. package/components/inputs/demo/input-time-range.html +0 -121
  91. package/components/inputs/demo/input-time.html +0 -95
  92. package/components/link/demo/link.html +0 -111
  93. package/components/list/demo/demo-list-nav.js +0 -170
  94. package/components/list/demo/demo-list-nested-iterations-helper.js +0 -168
  95. package/components/list/demo/demo-list-nested-lazy-load.js +0 -133
  96. package/components/list/demo/demo-list-nested.js +0 -291
  97. package/components/list/demo/demo-list.js +0 -241
  98. package/components/list/demo/list-color.html +0 -423
  99. package/components/list/demo/list-demo-scenarios.js +0 -380
  100. package/components/list/demo/list-drag-and-drop-position.js +0 -102
  101. package/components/list/demo/list-drag-and-drop.html +0 -82
  102. package/components/list/demo/list-expand-collapse.html +0 -136
  103. package/components/list/demo/list-item-actions.html +0 -371
  104. package/components/list/demo/list-item-custom.js +0 -204
  105. package/components/list/demo/list-item-layouts.html +0 -331
  106. package/components/list/demo/list-item-scroll.html +0 -122
  107. package/components/list/demo/list-layout.html +0 -575
  108. package/components/list/demo/list-nav.html +0 -110
  109. package/components/list/demo/list-nested.html +0 -270
  110. package/components/list/demo/list-selection.html +0 -301
  111. package/components/list/demo/list.html +0 -319
  112. package/components/loading-spinner/demo/loading-spinner-override.js +0 -34
  113. package/components/loading-spinner/demo/loading-spinner.html +0 -63
  114. package/components/menu/demo/checkbox-menu.html +0 -52
  115. package/components/menu/demo/custom-menu-item.js +0 -37
  116. package/components/menu/demo/custom-view.js +0 -63
  117. package/components/menu/demo/menu.html +0 -211
  118. package/components/menu/demo/radio-menu.html +0 -52
  119. package/components/meter/demo/meter.html +0 -115
  120. package/components/more-less/demo/more-less-test.js +0 -67
  121. package/components/more-less/demo/more-less.html +0 -71
  122. package/components/object-property-list/demo/object-property-list.html +0 -99
  123. package/components/offscreen/demo/offscreen-demo.js +0 -16
  124. package/components/offscreen/demo/offscreen.html +0 -44
  125. package/components/overflow-group/demo/demo-overflow-group.js +0 -29
  126. package/components/overflow-group/demo/overflow-group.html +0 -110
  127. package/components/paging/demo/pager-load-more.html +0 -120
  128. package/components/popover/demo/popover.html +0 -309
  129. package/components/progress/demo/progress.html +0 -104
  130. package/components/scroll-wrapper/demo/scroll-wrapper-test.js +0 -108
  131. package/components/scroll-wrapper/demo/scroll-wrapper.html +0 -52
  132. package/components/selection/demo/demo-selection.js +0 -35
  133. package/components/selection/demo/selection.html +0 -198
  134. package/components/skeleton/demo/skeleton-group-nested-test.js +0 -71
  135. package/components/skeleton/demo/skeleton-group-test-wrapper.js +0 -18
  136. package/components/skeleton/demo/skeleton-group-test.js +0 -91
  137. package/components/skeleton/demo/skeleton-mixin.html +0 -78
  138. package/components/skeleton/demo/skeleton-test-box.js +0 -34
  139. package/components/skeleton/demo/skeleton-test-container.js +0 -45
  140. package/components/skeleton/demo/skeleton-test-heading.js +0 -44
  141. package/components/skeleton/demo/skeleton-test-link.js +0 -47
  142. package/components/skeleton/demo/skeleton-test-paragraph.js +0 -54
  143. package/components/skeleton/demo/skeleton-test-stack.js +0 -38
  144. package/components/skeleton/demo/skeleton-test-width.js +0 -20
  145. package/components/sorting/demo/sort.html +0 -37
  146. package/components/status-indicator/demo/status-indicator.html +0 -99
  147. package/components/switch/demo/switch.html +0 -95
  148. package/components/table/demo/table-test.js +0 -271
  149. package/components/table/demo/table.html +0 -107
  150. package/components/tabs/demo/tab-custom.js +0 -39
  151. package/components/tabs/demo/tabs-array.js +0 -43
  152. package/components/tabs/demo/tabs.html +0 -558
  153. package/components/tag-list/demo/tag-list.html +0 -117
  154. package/components/tooltip/demo/tooltip.html +0 -275
  155. package/components/typography/demo/typography.html +0 -93
  156. package/components/view-switcher/demo/demo-table-view.js +0 -41
  157. package/components/view-switcher/demo/view-switcher.html +0 -71
  158. package/directives/animate/demo/animate-test.js +0 -98
  159. package/directives/animate/demo/index.html +0 -23
  160. package/helpers/demo/announce-test.js +0 -37
  161. package/helpers/demo/announce.html +0 -19
  162. package/helpers/demo/dismissible-test.js +0 -66
  163. package/helpers/demo/dismissible.html +0 -38
  164. package/helpers/demo/gestures.html +0 -58
  165. package/helpers/demo/prism.html +0 -694
  166. package/helpers/demo/template-tags.html +0 -118
  167. package/mixins/arrow-keys/demo/arrow-keys-mixin.html +0 -29
  168. package/mixins/arrow-keys/demo/arrow-keys-test.js +0 -38
  169. package/mixins/async-container/demo/async-container.html +0 -109
  170. package/mixins/async-container/demo/async-container.js +0 -27
  171. package/mixins/async-container/demo/async-item.js +0 -80
  172. package/mixins/labelled/demo/labelled-mixin.html +0 -90
  173. package/mixins/localize/demo/localize-mixin-greeting.js +0 -39
  174. package/mixins/localize/demo/localize-mixin-mission.js +0 -25
  175. package/mixins/localize/demo/localize-mixin.html +0 -28
  176. package/templates/primary-secondary/demo/form.html +0 -55
  177. package/templates/primary-secondary/demo/index.html +0 -27
  178. package/templates/primary-secondary/demo/integration.html +0 -457
  179. package/templates/primary-secondary/demo/overflow-hidden.html +0 -22
  180. package/templates/primary-secondary/demo/width-type-normal.html +0 -26
package/components/dropdown/demo/dropdown-positioning.html DELETED
@@ -1,127 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
5
- <meta charset="UTF-8">
6
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../demo/demo-page.js';
9
- import '../../button/button.js';
10
- import '../../button/button-subtle.js';
11
- import '../../dialog/dialog.js';
12
- import '../dropdown.js';
13
- import '../dropdown-content.js';
14
- import '../../table/demo/table-test.js';
15
- </script>
16
- </head>
17
- <body unresolved>
18
-
19
- <d2l-demo-page page-title="d2l-dropdown (positioning)">
20
-
21
- <h2>Dropdown (in a scrollable container)</h2>
22
- <d2l-demo-snippet>
23
- <template>
24
- <div style="height: 250px; overflow: scroll;">
25
- <p>Gabion warp American Main gunwalls cutlass gally cable gibbet jib keel. Trysail chantey swing the lead hempen halter hang the jib chase Jack Tar furl galleon scurvy. Brig splice the main brace provost pink rutters tender heave to Shiver me timbers belaying pin Brethren of the Coast.</p>
26
- <d2l-dropdown>
27
- <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
28
- <d2l-dropdown-content max-width="400">
29
- <a href="https://youtu.be/9ze87zQFSak">Google</a>
30
- <p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
31
- <a href="http://www.desire2learn.com">D2L</a>
32
- </d2l-dropdown-content>
33
- </d2l-dropdown>
34
- <p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
35
- <p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
36
- <p>Hardtack hang the jib haul wind booty pillage spike hearties Pirate Round tack yard. Piracy fire ship trysail stern scurvy blow the man down skysail salmagundi lee grog blossom. Hands gabion ho schooner lad ballast keel mutiny square-rigged haul wind.</p>
37
- </div>
38
- </template>
39
- </d2l-demo-snippet>
40
-
41
- <h2>Dropdown (in a table with sticky headers)</h2>
42
-
43
- <d2l-demo-snippet>
44
- <template>
45
- <d2l-test-table type="default" sticky-headers sticky-controls></d2l-test-table>
46
- </template>
47
- </d2l-demo-snippet>
48
-
49
- <h2>Dropdown (in another dropdown)</h2>
50
-
51
- <d2l-demo-snippet>
52
- <template>
53
- <d2l-dropdown>
54
- <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
55
- <d2l-dropdown-content max-width="400">
56
- <p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign.</p>
57
- <d2l-dropdown>
58
- <d2l-button-subtle class="d2l-dropdown-opener">Open Nested!</d2l-button-subtle>
59
- <d2l-dropdown-content max-width="600" align="start">
60
- <a href="https://youtu.be/9ze87zQFSak">Google</a>
61
- <p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
62
- <a href="http://www.desire2learn.com">D2L</a>
63
- </d2l-dropdown-content>
64
- </d2l-dropdown>
65
- <p>Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
66
- </d2l-dropdown-content>
67
- </d2l-dropdown>
68
- </template>
69
- </d2l-demo-snippet>
70
-
71
- <h2>Dropdown (in a dialog)</h2>
72
-
73
- <d2l-demo-snippet>
74
- <template>
75
- <d2l-button id="openDialog1">Show Dialog</d2l-button>
76
- <d2l-dialog id="dialog1" title-text="Dialog Title">
77
- <div>
78
- <p>Bilge tack furl dance the hempen jig fathom weigh anchor mizzen Blimey Jack Ketch flogging. Lee galleon avast schooner long clothes scuppers pinnace bucko deadlights gibbet. Nipper brigantine Buccaneer Gold Road matey gangway booty tender killick Brethren of the Coast.</p>
79
- <d2l-dropdown>
80
- <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
81
- <d2l-dropdown-content max-width="400">
82
- <a href="https://youtu.be/9ze87zQFSak">Google</a>
83
- <p>Shrouds hulk ye run a rig pink wherry hornswaggle overhaul spike splice the main brace. Barbary Coast salmagundi Nelsons folly lanyard Sea Legs topgallant Sink me crow's nest scuttle red ensign. Handsomely swab wench hang the jib square-rigged scuppers spyglass holystone Yellow Jack splice the main brace.</p>
84
- <a href="http://www.desire2learn.com">D2L</a>
85
- </d2l-dropdown-content>
86
- </d2l-dropdown>
87
- <p>Piracy bowsprit Arr shrouds salmagundi scuttle heave down doubloon trysail Jack Ketch. Killick boom Jolly Roger Pieces of Eight crack Jennys tea cup Cat o'nine tails league Privateer topgallant lanyard. Cat o'nine tails coxswain scurvy spirits keelhaul quarterdeck matey nipper scallywag Jolly Roger.</p>
88
- <p>Clap of thunder aye Corsair Barbary Coast prow shrouds schooner keel topmast code of conduct. Matey case shot spirits Davy Jones' Locker draft schooner Brethren of the Coast barkadeer jury mast measured fer yer chains. Bilge rat run a rig gaff warp loot clipper belaying pin main sheet lanyard avast.</p>
89
- <p>Pieces of Eight lookout Letter of Marque mutiny tender spanker Jack Ketch long clothes crow's nest line. Lass draught six pounders spirits skysail jib American Main chase hulk coxswain. Run a shot across the bow galleon Cat o'nine tails brigantine reef Admiral of the Black wherry quarterdeck keelhaul coffer.</p>
90
- </div>
91
- <d2l-button slot="footer" primary data-dialog-action="ok">Click Me!</d2l-button>
92
- <d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
93
- </d2l-dialog>
94
- <script>
95
- document.querySelector('#openDialog1').addEventListener('click', () => {
96
- document.querySelector('#dialog1').opened = true;
97
- });
98
- </script>
99
- </template>
100
- </d2l-demo-snippet>
101
-
102
- <h2>Dropdown (with DOM mutation)</h2>
103
-
104
- <d2l-demo-snippet>
105
- <template>
106
- <div>
107
- <div id="mutations-above"></div>
108
- <d2l-dropdown>
109
- <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
110
- <d2l-dropdown-content max-width="400">
111
- <d2l-button-subtle id="mutations-add-above">Add to Above</d2l-button-subtle>
112
- </d2l-dropdown-content>
113
- </d2l-dropdown>
114
- </div>
115
- <script>
116
- document.querySelector('#mutations-add-above').addEventListener('click', e => {
117
- const mutationsContainer = e.target.parentNode.parentNode.parentNode.querySelector('#mutations-above');
118
- const newContent = document.createElement('p');
119
- newContent.innerText = 'Blimey brigantine gangplank booty rope\'s end lugger heave down run a rig Yellow Jack dead men tell no tales. Pirate Round scuppers spanker hogshead Davy Jone\'s Locker heave down wench fluke marooned boom. Lanyard salmagundi careen doubloon swing the lead shrouds crow\'s nest parrel gun pressgang.';
120
- mutationsContainer.appendChild(newContent);
121
- });
122
- </script>
123
- </template>
124
- </d2l-demo-snippet>
125
-
126
- </body>
127
- </html>
package/components/dropdown/demo/dropdown-tabs.html DELETED
@@ -1,87 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6
- <meta charset="UTF-8">
7
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script type="module">
9
- import '../../demo/demo-page.js';
10
- import '../../tabs/tabs.js';
11
- import '../../tabs/tab-panel.js';
12
- import '../../button/button.js';
13
- import '../../menu/menu.js';
14
- import '../../menu/menu-item.js';
15
- import '../dropdown.js';
16
- import '../dropdown-tabs.js';
17
- </script>
18
- </head>
19
-
20
- <body unresolved>
21
-
22
- <d2l-demo-page page-title="d2l-dropdown-tabs">
23
-
24
- <h2>Tabs</h2>
25
-
26
- <d2l-demo-snippet>
27
- <template>
28
- <d2l-dropdown>
29
- <button class="d2l-dropdown-opener">Open it!</button>
30
- <d2l-dropdown-tabs min-width="175" max-width="300">
31
- <d2l-tabs>
32
- <d2l-tab-panel text="first">first content</d2l-tab-panel>
33
- <d2l-tab-panel text="second">
34
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
35
- </d2l-tab-panel>
36
- <d2l-tab-panel text="third">third content</d2l-tab-panel>
37
- <d2l-tab-panel text="fourth">fourth content</d2l-tab-panel>
38
- <d2l-tab-panel text="fifth">fifth content</d2l-tab-panel>
39
- </d2l-tabs>
40
- </d2l-dropdown-tabs>
41
- </d2l-dropdown>
42
- </template>
43
- </d2l-demo-snippet>
44
-
45
- <h2>Tabs (with nested menu)</h2>
46
-
47
- <d2l-demo-snippet>
48
- <template>
49
- <d2l-dropdown>
50
- <button class="d2l-dropdown-opener">Open it!</button>
51
- <d2l-dropdown-tabs min-width="175" max-width="300">
52
- <d2l-tabs>
53
- <d2l-tab-panel text="first">first content</d2l-tab-panel>
54
- <d2l-tab-panel text="second">
55
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
56
- </d2l-tab-panel>
57
- <d2l-tab-panel text="third">
58
- <d2l-menu label="Astronomy">
59
- <d2l-menu-item text="Introduction" id="first-item"></d2l-menu-item>
60
- <d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
61
- <d2l-menu-item text="The Solar System">
62
- <d2l-menu>
63
- <d2l-menu-item text="Formation"></d2l-menu-item>
64
- <d2l-menu-item text="Modern Solar System"></d2l-menu-item>
65
- <d2l-menu-item text="Future Solar System"></d2l-menu-item>
66
- <d2l-menu-item text="The Planets"></d2l-menu-item>
67
- <d2l-menu-item text="The Sun"></d2l-menu-item>
68
- <d2l-menu-item text="Solar &amp; Lunar Eclipses"></d2l-menu-item>
69
- <d2l-menu-item text="Meteors &amp; Meteorites"></d2l-menu-item>
70
- <d2l-menu-item text="Asteroids"></d2l-menu-item>
71
- <d2l-menu-item text="Comets"></d2l-menu-item>
72
- </d2l-menu>
73
- </d2l-menu-item>
74
- </d2l-menu>
75
- </d2l-tab-panel>
76
- </d2l-tabs>
77
- </d2l-dropdown-tabs>
78
- </d2l-dropdown>
79
- </template>
80
- </d2l-demo-snippet>
81
-
82
-
83
- </d2l-demo-page>
84
-
85
- </body>
86
-
87
- </html>
package/components/dropdown/demo/dropdown.html DELETED
@@ -1,217 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
5
- <meta charset="UTF-8">
6
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../../demo/demo-page.js';
9
- import '../../button/button.js';
10
- import '../dropdown.js';
11
- import '../dropdown-content.js';
12
- </script>
13
- </head>
14
- <body unresolved>
15
-
16
- <d2l-demo-page page-title="d2l-dropdown">
17
-
18
- <h2>Generic Dropdown</h2>
19
- <d2l-demo-snippet>
20
- <template>
21
- <d2l-dropdown>
22
- <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
23
- <d2l-dropdown-content max-width="400">
24
- <a href="https://youtu.be/9ze87zQFSak">Google</a>
25
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
26
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
27
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
28
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
29
- anim id est laborum.</p>
30
- <a href="http://www.desire2learn.com">D2L</a>
31
- </d2l-dropdown-content>
32
- </d2l-dropdown>
33
- </template>
34
- </d2l-demo-snippet>
35
-
36
- <h2>Generic Dropdown With Header/Footer</h2>
37
- <d2l-demo-snippet>
38
- <template>
39
- <d2l-dropdown>
40
- <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
41
- <d2l-dropdown-content max-width="400">
42
- <div slot="header">
43
- <h3>Scrolling is Fun</h3>
44
- </div>
45
- <a href="https://youtu.be/9ze87zQFSak">Google</a>
46
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
47
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
48
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
49
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
50
- anim id est laborum.Vestibulum vel sem non orci pretium fringilla sed eget augue. Vestibulum malesuada tortor
51
- vitae odio elementum eleifend. Quisque ligula quam, ornare id malesuada ut, malesuada eleifend sem. Nulla porta
52
- in arcu quis gravida. Duis ac sagittis felis, in condimentum libero. In dolor risus, semper vel iaculis vitae,
53
- pellentesque efficitur lorem. Nunc a lacus malesuada, rhoncus risus aliquam, sodales nulla. Sed in varius elit.
54
- Duis sagittis, turpis ut vehicula elementum, velit mi tincidunt turpis, sit amet sagittis quam urna ut justo.
55
- Nunc interdum urna augue, ac pretium dui pulvinar eu. Proin vehicula placerat est, sed venenatis purus viverra
56
- eget. Suspendisse imperdiet nulla eget velit sodales, sit amet tempus metus dignissim. Sed ac luctus leo, a
57
- ornare nisl. Proin non sapien eu orci gravida aliquam. Praesent placerat auctor lacus sit amet faucibus.
58
- Suspendisse sit amet dui sed turpis vestibulum dignissim.</p>
59
- <div slot="footer">
60
- <a href="http://www.desire2learn.com">D2L</a>
61
- </div>
62
- </d2l-dropdown-content>
63
- </d2l-dropdown>
64
- </template>
65
- </d2l-demo-snippet>
66
-
67
- <h2>Dropdown with trap-focus option</h2>
68
- <d2l-demo-snippet>
69
- <template>
70
- <d2l-dropdown>
71
- <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
72
- <d2l-dropdown-content trap-focus mobile-tray="right">
73
- <div slot="header">
74
- <h3>Header</h3>
75
- </div>
76
- <d2l-button class="d2l-dropdown-opener">Focused on opening!</d2l-button>
77
- <a href="https://youtu.be/9ze87zQFSak">Google</a>
78
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloretum, velit mi tincidunt turpis, sit amet sagittis quam urna ut justo.
79
- Nunc interdum urna augue, ac pretium dui pulvinar eu. Proin vehicula placerat est, sed venenatis purus viverra
80
- eget. Suspendisse imperdiet nulla eget velit sodales, sit amet tempus metus dignissim. Sed ac luctus leo, a
81
- ornare nisl. Proin non sapien eu orci gravida aliquam. Praesent placerat auctor lacus sit amet faucibus.
82
- Suspendisse sit amet dui sed turpis vestibulum dignissim.</p>
83
- <div slot="footer">
84
- <a href="http://www.desire2learn.com">D2L</a>
85
- </div>
86
- </d2l-dropdown-content>
87
- </d2l-dropdown>
88
- </template>
89
- </d2l-demo-snippet>
90
-
91
- <h2>Constrained Height</h2>
92
- <d2l-demo-snippet>
93
- <template>
94
- <d2l-dropdown>
95
- <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
96
- <d2l-dropdown-content max-width="800" max-height="300">
97
- <div slot="header">
98
- Scrolling is fun!
99
- </div>
100
- <a href="https://youtu.be/9ze87zQFSak">Google</a>
101
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
102
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
103
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
104
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
105
- anim id est laborum.Vestibulum vel sem non orci pretium fringilla sed eget augue. Vestibulum malesuada tortor
106
- vitae odio elementum eleifend.</p>
107
- <p>Quisque ligula quam, ornare id malesuada ut, malesuada eleifend sem. Nulla porta
108
- in arcu quis gravida. Duis ac sagittis felis, in condimentum libero. In dolor risus, semper vel iaculis vitae,
109
- pellentesque efficitur lorem. Nunc a lacus malesuada, rhoncus risus aliquam, sodales nulla. Sed in varius elit.
110
- Duis sagittis, turpis ut vehicula elementum, velit mi tincidunt turpis, sit amet sagittis quam urna ut justo.
111
- Nunc interdum urna augue, ac pretium dui pulvinar eu.</p>
112
- <p>Proin vehicula placerat est, sed venenatis purus viverra
113
- eget. Suspendisse imperdiet nulla eget velit sodales, sit amet tempus metus dignissim. Sed ac luctus leo, a
114
- ornare nisl. Proin non sapien eu orci gravida aliquam. Praesent placerat auctor lacus sit amet faucibus.
115
- Suspendisse sit amet dui sed turpis vestibulum dignissim.</p>
116
- </d2l-dropdown-content>
117
- </d2l-dropdown>
118
- </template>
119
- </d2l-demo-snippet>
120
-
121
-
122
- <h2>Mobile Tray Style - Right</h2>
123
- <d2l-demo-snippet>
124
- <template>
125
- <d2l-dropdown>
126
- <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
127
- <d2l-dropdown-content max-width="400" mobile-tray="right">
128
- <a href="https://youtu.be/9ze87zQFSak">Google</a>
129
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
130
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
131
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
132
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
133
- anim id est laborum.</p>
134
- <a href="http://www.desire2learn.com">D2L</a>
135
- </d2l-dropdown-content>
136
- </d2l-dropdown>
137
- </template>
138
- </d2l-demo-snippet>
139
-
140
- <h2>Mobile Tray Style - Left (No close button)</h2>
141
- <d2l-demo-snippet>
142
- <template>
143
- <d2l-dropdown>
144
- <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
145
- <d2l-dropdown-content mobile-tray="left" no-mobile-close-button>
146
- <a href="https://youtu.be/9ze87zQFSak">Google</a>
147
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
148
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
149
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
150
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
151
- anim id est laborum.</p>
152
- <a href="http://www.desire2learn.com">D2L</a>
153
- </d2l-dropdown-content>
154
- </d2l-dropdown>
155
- </template>
156
- </d2l-demo-snippet>
157
-
158
- <h2>Mobile Tray Style - Bottom</h2>
159
- <d2l-demo-snippet>
160
- <template>
161
- <d2l-dropdown>
162
- <d2l-button class="d2l-dropdown-opener">Open it!</d2l-button>
163
- <d2l-dropdown-content max-width="400" mobile-tray="bottom">
164
- <div slot="header">
165
- <h3>Scrolling is Fun</h3>
166
- </div>
167
- <a href="https://youtu.be/9ze87zQFSak">Google</a>
168
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
169
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
170
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
171
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
172
- anim id est laborumLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
173
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
174
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
175
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
176
- anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
177
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
178
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
179
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
180
- anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
181
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
182
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
183
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
184
- anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
185
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
186
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
187
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
188
- anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
189
- magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
190
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
191
- nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
192
- anim id est laborum..</p>
193
- <a href="http://www.desire2learn.com">D2L</a>
194
- <div slot="footer">
195
- Scrolling is Fun
196
- </div>
197
- </d2l-dropdown-content>
198
- </d2l-dropdown>
199
- </template>
200
- </d2l-demo-snippet>
201
-
202
- <h2>Generic Dropdown, wide opener with brief content, end align</h2>
203
- <d2l-demo-snippet>
204
- <template>
205
- <d2l-dropdown>
206
- <d2l-button class="d2l-dropdown-opener">Lorem ipsum dolor sit amet consectetur adipiscing elit</d2l-button>
207
- <d2l-dropdown-content align="end">
208
- <p>Content</p>
209
- </d2l-dropdown-content>
210
- </d2l-dropdown>
211
- </template>
212
- </d2l-demo-snippet>
213
- </d2l-demo-page>
214
-
215
- </body>
216
-
217
- </html>
package/components/empty-state/demo/empty-state.html DELETED
@@ -1,94 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
- <meta charset="UTF-8">
6
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
- <script type="module">
8
- import '../empty-state-action-button.js';
9
- import '../empty-state-action-link.js';
10
- import '../empty-state-illustrated.js';
11
- import '../empty-state-simple.js';
12
- import '../../demo/demo-page.js';
13
- </script>
14
- </head>
15
- <body unresolved>
16
-
17
- <d2l-demo-page page-title="d2l-empty-state">
18
-
19
- <h2>Empty State Simple</h2>
20
-
21
- <h5>No Action</h5>
22
- <d2l-demo-snippet>
23
- <template>
24
- <d2l-empty-state-simple description="There are no assignments to display."></d2l-empty-state-simple>
25
- </template>
26
- </d2l-demo-snippet>
27
-
28
- <h5>Empty State Action Button</h5>
29
- <d2l-demo-snippet>
30
- <template>
31
- <d2l-empty-state-simple description="There are no assignments to display.">
32
- <d2l-empty-state-action-button text="Create New Assignment"></d2l-empty-state-action-button>
33
- </d2l-empty-state-simple>
34
- </template>
35
- </d2l-demo-snippet>
36
-
37
- <h5>Empty State Action Link</h5>
38
- <d2l-demo-snippet>
39
- <template>
40
- <d2l-empty-state-simple description="There are no assignments to display.">
41
- <d2l-empty-state-action-link text="Create New Assignment" href="https://d2l.com"></d2l-empty-state-action-link>
42
- </d2l-empty-state-simple>
43
- </template>
44
- </d2l-demo-snippet>
45
-
46
- <h5>Empty State Only Button</h5>
47
- <d2l-demo-snippet>
48
- <template>
49
- <d2l-empty-state-simple description="empty state button">
50
- <d2l-empty-state-action-button text="Create New Assignment"></d2l-empty-state-action-button>
51
- </d2l-empty-state-simple>
52
- </template>
53
- </d2l-demo-snippet>
54
-
55
- <h5>Empty State Only Link</h5>
56
- <d2l-demo-snippet>
57
- <template>
58
- <d2l-empty-state-simple description="empty state link">
59
- <d2l-empty-state-action-link text="Create New Assignment" href="https://d2l.com"></d2l-empty-state-action-link>
60
- </d2l-empty-state-simple>
61
- </template>
62
- </d2l-demo-snippet>
63
-
64
- <h2>Empty State Illustrated</h2>
65
-
66
- <h5>No Action</h5>
67
- <d2l-demo-snippet>
68
- <template>
69
- <d2l-empty-state-illustrated illustration-name="fish-hook" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path."></d2l-empty-state-illustrated>
70
- </template>
71
- </d2l-demo-snippet>
72
-
73
- <h5>Empty State Action Button</h5>
74
- <d2l-demo-snippet>
75
- <template>
76
- <d2l-empty-state-illustrated illustration-name="fish-hook" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path.">
77
- <d2l-empty-state-action-button text="Create Learning Paths" primary></d2l-empty-state-action-button>
78
- </d2l-empty-state-illustrated>
79
- </template>
80
- </d2l-demo-snippet>
81
-
82
- <h5>Empty State Action Link</h5>
83
- <d2l-demo-snippet>
84
- <template>
85
- <d2l-empty-state-illustrated illustration-name="fish-hook" title-text="No Learning Paths Yet" description="Get started by clicking below to create your first learning path.">
86
- <d2l-empty-state-action-link text="Create Learning Paths" href="https://d2l.com"></d2l-empty-state-action-link>
87
- </d2l-empty-state-illustrated>
88
- </template>
89
- </d2l-demo-snippet>
90
-
91
- </d2l-demo-page>
92
-
93
- </body>
94
- </html>
package/components/expand-collapse/demo/expand-collapse-content.html DELETED
@@ -1,58 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta charset="UTF-8">
7
- <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
8
- <script type="module">
9
- import '../../button/button.js';
10
- import '../../demo/demo-page.js';
11
- import '../expand-collapse-content.js';
12
- </script>
13
- </head>
14
-
15
- <body unresolved>
16
-
17
- <d2l-demo-page page-title="d2l-expand-collapse-content">
18
-
19
- <h2>Default</h2>
20
- <d2l-demo-snippet>
21
- <template>
22
- <d2l-button primary>Toggle</d2l-button>
23
- <d2l-expand-collapse-content>
24
- <p>
25
- Yar Pirate Ipsum
26
- Crow's nest chase guns coxswain belay coffer jib Shiver me timbers tackle piracy Buccaneer. Overhaul topsail Cat o'nine
27
- tails lee wherry Sink me smartly ballast Sail ho hardtack. Bowsprit aft quarterdeck killick pirate black jack hands
28
- crimp interloper yawl.
29
- </p>
30
- <ul>
31
- <li>Coffee</li>
32
- <li>Tea</li>
33
- <li>Milk</li>
34
- </ul>
35
- <p>
36
- Me trysail gangplank Plate Fleet Sink me hang the jib lanyard parrel square-rigged stern. Gangplank chandler brigantine
37
- spyglass scurvy rope's end plunder lugger topmast trysail. Admiral of the Black cackle fruit hearties maroon bounty
38
- Blimey yo-ho-ho sutler pillage boom.
39
- </p>
40
- </d2l-expand-collapse-content>
41
- <script type="module">
42
- const button = document.querySelector('d2l-button');
43
- const section = document.querySelector('d2l-expand-collapse-content');
44
- button.addEventListener('click', () => {
45
- section.expanded = !section.expanded;
46
- button.setAttribute('expanded', section.expanded ? 'true' : 'false');
47
- });
48
- section.addEventListener('d2l-expand-collapse-content-collapse', () => console.log('collapsed'));
49
- section.addEventListener('d2l-expand-collapse-content-expand', () => console.log('expanded'));
50
- </script>
51
- </template>
52
- </d2l-demo-snippet>
53
-
54
- </d2l-demo-page>
55
-
56
- </body>
57
-
58
- </html>