@noctuatech/uswds 1.3.3 → 1.3.5
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/package.json +5 -5
- package/src/lib/accordion/{accordion.test.ts → accordion.element.test.ts} +28 -31
- package/src/lib/accordion/accordion.element.ts +9 -7
- package/src/lib/alert/{alert.test.ts → alert.element.test.ts} +5 -6
- package/src/lib/alert/alert.element.ts +6 -4
- package/src/lib/breadcrumbs/breadcrumb/breadcrumb.element.ts +10 -10
- package/src/lib/breadcrumbs/breadcrumbs.element.test.ts +23 -0
- package/src/lib/button/button.element.test.ts +15 -0
- package/src/lib/button/button.element.ts +37 -42
- package/src/lib/button-group/button-group.element.test.ts +13 -0
- package/src/lib/card/{card.test.ts → card.element.test.ts} +12 -12
- package/src/lib/checkbox/{checkbox.test.ts → checkbox.element.test.ts} +15 -17
- package/src/lib/checkbox/checkbox.element.ts +32 -32
- package/src/lib/checkbox/checkbox.stories.ts +17 -33
- package/src/lib/collection/collection-item/collection-item.element.test.ts +15 -0
- package/src/lib/collection/collection.element.test.ts +13 -0
- package/src/lib/combo-box/{combo-box.test.ts → combo-box.element.test.ts} +64 -93
- package/src/lib/config/config.element.test.ts +13 -0
- package/src/lib/description/description.element.test.ts +13 -0
- package/src/lib/file-input/file-input-preview/file-input-preview.element.test.ts +93 -0
- package/src/lib/file-input/file-input-preview/file-input-preview.element.ts +15 -13
- package/src/lib/file-input/file-input.element.test.ts +73 -0
- package/src/lib/file-input/file-input.element.ts +10 -20
- package/src/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.ts +20 -20
- package/src/lib/in-page-nav/{in-page-nav.test.ts → in-page-nav.element.test.ts} +18 -21
- package/src/lib/input/input.element.ts +56 -37
- package/src/lib/input-mask/input-mask.element.ts +1 -1
- package/src/lib/input-mask/input-mask.stories.ts +2 -0
- package/src/lib/link/link.element.ts +18 -25
- package/src/lib/modal/modal-close/modal-close.element.test.ts +13 -0
- package/src/lib/modal/modal-heading/modal-heading.element.test.ts +15 -0
- package/src/lib/modal/modal.element.test.ts +23 -0
- package/src/lib/pagination/pagination-item/pagination-item.element.ts +9 -6
- package/src/lib/pagination/pagination-no/pagination-no.element.ts +17 -17
- package/src/lib/pagination/pagination.element.test.ts +13 -0
- package/src/lib/process-list/{process-list.test.ts → process-list.element.test.ts} +19 -12
- package/src/lib/radio/radio-option/radio-option.element.test.ts +20 -0
- package/src/lib/radio/radio.element.test.ts +121 -0
- package/src/lib/range-slider/range-slider.element.test.ts +57 -0
- package/src/lib/range-slider/range-slider.element.ts +48 -33
- package/src/lib/search/search.element.test.ts +71 -0
- package/src/lib/select/{select.test.ts → select.element.test.ts} +23 -26
- package/src/lib/select/select.element.ts +35 -32
- package/src/lib/side-nav/{side-nav.test.ts → side-nav.element.test.ts} +13 -23
- package/src/lib/step-indicator/step/step.element.ts +16 -16
- package/src/lib/step-indicator/{step-indicator.test.ts → step-indicator.element.test.ts} +6 -6
- package/src/lib/summary-box/summary-box.element.test.ts +13 -0
- package/src/lib/tag/tag.element.test.ts +13 -0
- package/src/lib/textarea/{textarea.test.ts → textarea.element.test.ts} +13 -13
- package/src/lib/textarea/textarea.element.ts +22 -19
- package/target/lib/accordion/accordion.element.js +4 -2
- package/target/lib/accordion/accordion.element.js.map +1 -1
- package/target/lib/accordion/accordion.element.test.d.ts +1 -0
- package/target/lib/accordion/{accordion.test.js → accordion.element.test.js} +19 -19
- package/target/lib/accordion/accordion.element.test.js.map +1 -0
- package/target/lib/alert/alert.element.js +4 -2
- package/target/lib/alert/alert.element.js.map +1 -1
- package/target/lib/alert/alert.element.test.d.ts +1 -0
- package/target/lib/alert/{alert.test.js → alert.element.test.js} +5 -5
- package/target/lib/alert/alert.element.test.js.map +1 -0
- package/target/lib/breadcrumbs/breadcrumb/breadcrumb.element.d.ts +1 -1
- package/target/lib/breadcrumbs/breadcrumb/breadcrumb.element.js +6 -6
- package/target/lib/breadcrumbs/breadcrumbs.element.test.d.ts +2 -0
- package/target/lib/breadcrumbs/{breadcrumbs.test.js → breadcrumbs.element.test.js} +6 -6
- package/target/lib/breadcrumbs/breadcrumbs.element.test.js.map +1 -0
- package/target/lib/button/button.element.d.ts +3 -3
- package/target/lib/button/button.element.js +17 -23
- package/target/lib/button/button.element.js.map +1 -1
- package/target/lib/button/button.element.test.d.ts +1 -0
- package/target/lib/button/button.element.test.js +12 -0
- package/target/lib/button/button.element.test.js.map +1 -0
- package/target/lib/button-group/button-group.element.test.d.ts +1 -0
- package/target/lib/button-group/button-group.element.test.js +9 -0
- package/target/lib/button-group/button-group.element.test.js.map +1 -0
- package/target/lib/card/card.element.test.d.ts +6 -0
- package/target/lib/card/{card.test.js → card.element.test.js} +10 -10
- package/target/lib/card/card.element.test.js.map +1 -0
- package/target/lib/checkbox/checkbox.element.d.ts +4 -3
- package/target/lib/checkbox/checkbox.element.js +24 -23
- package/target/lib/checkbox/checkbox.element.js.map +1 -1
- package/target/lib/checkbox/checkbox.element.test.d.ts +1 -0
- package/target/lib/checkbox/{checkbox.test.js → checkbox.element.test.js} +13 -12
- package/target/lib/checkbox/checkbox.element.test.js.map +1 -0
- package/target/lib/checkbox/checkbox.stories.d.ts +2 -2
- package/target/lib/checkbox/checkbox.stories.js +6 -6
- package/target/lib/checkbox/checkbox.stories.js.map +1 -1
- package/target/lib/collection/collection-item/collection-item.element.test.d.ts +1 -0
- package/target/lib/collection/collection-item/collection-item.element.test.js +9 -0
- package/target/lib/collection/collection-item/collection-item.element.test.js.map +1 -0
- package/target/lib/collection/collection.element.test.d.ts +1 -0
- package/target/lib/collection/collection.element.test.js +9 -0
- package/target/lib/collection/collection.element.test.js.map +1 -0
- package/target/lib/combo-box/combo-box.element.test.d.ts +3 -0
- package/target/lib/combo-box/{combo-box.test.js → combo-box.element.test.js} +60 -60
- package/target/lib/combo-box/combo-box.element.test.js.map +1 -0
- package/target/lib/config/config.element.test.d.ts +1 -0
- package/target/lib/config/config.element.test.js +9 -0
- package/target/lib/config/config.element.test.js.map +1 -0
- package/target/lib/description/description.element.test.d.ts +1 -0
- package/target/lib/description/description.element.test.js +9 -0
- package/target/lib/description/description.element.test.js.map +1 -0
- package/target/lib/file-input/file-input-preview/file-input-preview.element.js +12 -10
- package/target/lib/file-input/file-input-preview/file-input-preview.element.js.map +1 -1
- package/target/lib/file-input/file-input-preview/file-input-preview.element.test.d.ts +2 -0
- package/target/lib/file-input/file-input-preview/{file-input-preview.test.js → file-input-preview.element.test.js} +24 -24
- package/target/lib/file-input/file-input-preview/file-input-preview.element.test.js.map +1 -0
- package/target/lib/file-input/file-input.element.js +5 -6
- package/target/lib/file-input/file-input.element.js.map +1 -1
- package/target/lib/file-input/file-input.element.test.d.ts +1 -0
- package/target/lib/file-input/{file-input.test.js → file-input.element.test.js} +16 -16
- package/target/lib/file-input/file-input.element.test.js.map +1 -0
- package/target/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.d.ts +2 -3
- package/target/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.js +15 -13
- package/target/lib/in-page-nav/in-page-nav-item/in-page-nav-item.element.js.map +1 -1
- package/target/lib/in-page-nav/in-page-nav.element.test.d.ts +2 -0
- package/target/lib/in-page-nav/{in-page-nav.test.js → in-page-nav.element.test.js} +6 -6
- package/target/lib/in-page-nav/in-page-nav.element.test.js.map +1 -0
- package/target/lib/input/input.element.d.ts +4 -5
- package/target/lib/input/input.element.js +55 -127
- package/target/lib/input/input.element.js.map +1 -1
- package/target/lib/input/{input.test.js → input.element.test.js} +6 -26
- package/target/lib/input/input.element.test.js.map +1 -0
- package/target/lib/input-mask/input-mask.element.d.ts +1 -1
- package/target/lib/input-mask/input-mask.element.js +1 -1
- package/target/lib/input-mask/input-mask.element.js.map +1 -1
- package/target/lib/input-mask/{input-mask.test.js → input-mask.element.test.js} +1 -1
- package/target/lib/input-mask/input-mask.element.test.js.map +1 -0
- package/target/lib/input-mask/input-mask.stories.js +1 -1
- package/target/lib/input-mask/input-mask.stories.js.map +1 -1
- package/target/lib/link/link.element.d.ts +3 -5
- package/target/lib/link/link.element.js +14 -26
- package/target/lib/link/link.element.js.map +1 -1
- package/target/lib/modal/modal-close/modal-close.element.test.d.ts +1 -0
- package/target/lib/modal/modal-close/modal-close.element.test.js +9 -0
- package/target/lib/modal/modal-close/modal-close.element.test.js.map +1 -0
- package/target/lib/modal/modal-heading/modal-heading.element.test.d.ts +1 -0
- package/target/lib/modal/modal-heading/modal-heading.element.test.js +9 -0
- package/target/lib/modal/modal-heading/modal-heading.element.test.js.map +1 -0
- package/target/lib/modal/modal.element.test.d.ts +3 -0
- package/target/lib/modal/modal.element.test.js +11 -0
- package/target/lib/modal/modal.element.test.js.map +1 -0
- package/target/lib/pagination/pagination-item/pagination-item.element.d.ts +1 -1
- package/target/lib/pagination/pagination-item/pagination-item.element.js +3 -3
- package/target/lib/pagination/pagination-item/pagination-item.element.js.map +1 -1
- package/target/lib/pagination/pagination-no/pagination-no.element.d.ts +2 -3
- package/target/lib/pagination/pagination-no/pagination-no.element.js +10 -8
- package/target/lib/pagination/pagination-no/pagination-no.element.js.map +1 -1
- package/target/lib/pagination/pagination.element.test.d.ts +1 -0
- package/target/lib/pagination/pagination.element.test.js +9 -0
- package/target/lib/pagination/pagination.element.test.js.map +1 -0
- package/target/lib/process-list/process-list.element.test.d.ts +2 -0
- package/target/lib/process-list/{process-list.test.js → process-list.element.test.js} +6 -6
- package/target/lib/process-list/process-list.element.test.js.map +1 -0
- package/target/lib/radio/radio-option/radio-option.element.test.d.ts +2 -0
- package/target/lib/radio/radio-option/radio-option.element.test.js +11 -0
- package/target/lib/radio/radio-option/radio-option.element.test.js.map +1 -0
- package/target/lib/radio/radio.element.test.d.ts +2 -0
- package/target/lib/radio/{radio.test.js → radio.element.test.js} +19 -28
- package/target/lib/radio/radio.element.test.js.map +1 -0
- package/target/lib/range-slider/range-slider.element.d.ts +4 -2
- package/target/lib/range-slider/range-slider.element.js +34 -29
- package/target/lib/range-slider/range-slider.element.js.map +1 -1
- package/target/lib/range-slider/range-slider.element.test.d.ts +1 -0
- package/target/lib/range-slider/range-slider.element.test.js +26 -0
- package/target/lib/range-slider/range-slider.element.test.js.map +1 -0
- package/target/lib/search/search.element.test.d.ts +3 -0
- package/target/lib/search/search.element.test.js +52 -0
- package/target/lib/search/search.element.test.js.map +1 -0
- package/target/lib/select/select.element.d.ts +5 -4
- package/target/lib/select/select.element.js +28 -27
- package/target/lib/select/select.element.js.map +1 -1
- package/target/lib/select/select.element.test.d.ts +2 -0
- package/target/lib/select/{select.test.js → select.element.test.js} +23 -27
- package/target/lib/select/select.element.test.js.map +1 -0
- package/target/lib/services/{icon.service.test.js → icon.service.element.test.js} +1 -1
- package/target/lib/services/icon.service.element.test.js.map +1 -0
- package/target/lib/side-nav/side-nav.element.test.d.ts +3 -0
- package/target/lib/side-nav/{side-nav.test.js → side-nav.element.test.js} +11 -11
- package/target/lib/side-nav/side-nav.element.test.js.map +1 -0
- package/target/lib/step-indicator/step/step.element.d.ts +2 -2
- package/target/lib/step-indicator/step/step.element.js +8 -8
- package/target/lib/step-indicator/step-indicator.element.test.d.ts +2 -0
- package/target/lib/step-indicator/{step-indicator.test.js → step-indicator.element.test.js} +6 -6
- package/target/lib/step-indicator/step-indicator.element.test.js.map +1 -0
- package/target/lib/summary-box/summary-box.element.test.d.ts +1 -0
- package/target/lib/summary-box/summary-box.element.test.js +9 -0
- package/target/lib/summary-box/summary-box.element.test.js.map +1 -0
- package/target/lib/tag/tag.element.test.d.ts +1 -0
- package/target/lib/tag/tag.element.test.js +9 -0
- package/target/lib/tag/tag.element.test.js.map +1 -0
- package/target/lib/textarea/textarea.element.d.ts +2 -2
- package/target/lib/textarea/textarea.element.js +19 -24
- package/target/lib/textarea/textarea.element.js.map +1 -1
- package/target/lib/textarea/textarea.element.test.d.ts +1 -0
- package/target/lib/textarea/{textarea.test.js → textarea.element.test.js} +14 -14
- package/target/lib/textarea/textarea.element.test.js.map +1 -0
- package/src/lib/breadcrumbs/breadcrumbs.test.ts +0 -21
- package/src/lib/button/button.test.ts +0 -17
- package/src/lib/button-group/button-group.test.ts +0 -15
- package/src/lib/collection/collection-item/collection-item.test.ts +0 -15
- package/src/lib/collection/collection.test.ts +0 -15
- package/src/lib/config/config.test.ts +0 -15
- package/src/lib/description/description.test.ts +0 -15
- package/src/lib/file-input/file-input-preview/file-input-preview.test.ts +0 -95
- package/src/lib/file-input/file-input.test.ts +0 -79
- package/src/lib/modal/modal-close/modal-close.test.ts +0 -15
- package/src/lib/modal/modal-heading/modal-heading.test.ts +0 -15
- package/src/lib/modal/modal.test.ts +0 -25
- package/src/lib/pagination/pagination.test.ts +0 -15
- package/src/lib/radio/radio-option/radio-option.test.ts +0 -20
- package/src/lib/radio/radio.test.ts +0 -174
- package/src/lib/range-slider/range-slider.test.ts +0 -52
- package/src/lib/search/search.test.ts +0 -81
- package/src/lib/summary-box/summary-box.test.ts +0 -15
- package/src/lib/tag/tag.test.ts +0 -15
- package/target/lib/accordion/accordion.test.d.ts +0 -1
- package/target/lib/accordion/accordion.test.js.map +0 -1
- package/target/lib/alert/alert.test.d.ts +0 -1
- package/target/lib/alert/alert.test.js.map +0 -1
- package/target/lib/breadcrumbs/breadcrumbs.test.d.ts +0 -2
- package/target/lib/breadcrumbs/breadcrumbs.test.js.map +0 -1
- package/target/lib/button/button.test.d.ts +0 -1
- package/target/lib/button/button.test.js +0 -12
- package/target/lib/button/button.test.js.map +0 -1
- package/target/lib/button-group/button-group.test.d.ts +0 -1
- package/target/lib/button-group/button-group.test.js +0 -9
- package/target/lib/button-group/button-group.test.js.map +0 -1
- package/target/lib/card/card.test.d.ts +0 -6
- package/target/lib/card/card.test.js.map +0 -1
- package/target/lib/checkbox/checkbox.test.d.ts +0 -1
- package/target/lib/checkbox/checkbox.test.js.map +0 -1
- package/target/lib/collection/collection-item/collection-item.test.d.ts +0 -1
- package/target/lib/collection/collection-item/collection-item.test.js +0 -9
- package/target/lib/collection/collection-item/collection-item.test.js.map +0 -1
- package/target/lib/collection/collection.test.d.ts +0 -1
- package/target/lib/collection/collection.test.js +0 -9
- package/target/lib/collection/collection.test.js.map +0 -1
- package/target/lib/combo-box/combo-box.test.d.ts +0 -3
- package/target/lib/combo-box/combo-box.test.js.map +0 -1
- package/target/lib/config/config.test.d.ts +0 -1
- package/target/lib/config/config.test.js +0 -9
- package/target/lib/config/config.test.js.map +0 -1
- package/target/lib/description/description.test.d.ts +0 -1
- package/target/lib/description/description.test.js +0 -9
- package/target/lib/description/description.test.js.map +0 -1
- package/target/lib/file-input/file-input-preview/file-input-preview.test.d.ts +0 -2
- package/target/lib/file-input/file-input-preview/file-input-preview.test.js.map +0 -1
- package/target/lib/file-input/file-input.test.d.ts +0 -1
- package/target/lib/file-input/file-input.test.js.map +0 -1
- package/target/lib/in-page-nav/in-page-nav.test.d.ts +0 -2
- package/target/lib/in-page-nav/in-page-nav.test.js.map +0 -1
- package/target/lib/input/input.test.js.map +0 -1
- package/target/lib/input-mask/input-mask.test.js.map +0 -1
- package/target/lib/modal/modal-close/modal-close.test.d.ts +0 -1
- package/target/lib/modal/modal-close/modal-close.test.js +0 -9
- package/target/lib/modal/modal-close/modal-close.test.js.map +0 -1
- package/target/lib/modal/modal-heading/modal-heading.test.d.ts +0 -1
- package/target/lib/modal/modal-heading/modal-heading.test.js +0 -9
- package/target/lib/modal/modal-heading/modal-heading.test.js.map +0 -1
- package/target/lib/modal/modal.test.d.ts +0 -3
- package/target/lib/modal/modal.test.js +0 -11
- package/target/lib/modal/modal.test.js.map +0 -1
- package/target/lib/pagination/pagination.test.d.ts +0 -1
- package/target/lib/pagination/pagination.test.js +0 -9
- package/target/lib/pagination/pagination.test.js.map +0 -1
- package/target/lib/process-list/process-list.test.d.ts +0 -2
- package/target/lib/process-list/process-list.test.js.map +0 -1
- package/target/lib/radio/radio-option/radio-option.test.d.ts +0 -2
- package/target/lib/radio/radio-option/radio-option.test.js +0 -11
- package/target/lib/radio/radio-option/radio-option.test.js.map +0 -1
- package/target/lib/radio/radio.test.d.ts +0 -2
- package/target/lib/radio/radio.test.js.map +0 -1
- package/target/lib/range-slider/range-slider.test.d.ts +0 -1
- package/target/lib/range-slider/range-slider.test.js +0 -25
- package/target/lib/range-slider/range-slider.test.js.map +0 -1
- package/target/lib/search/search.test.d.ts +0 -3
- package/target/lib/search/search.test.js +0 -52
- package/target/lib/search/search.test.js.map +0 -1
- package/target/lib/select/select.test.d.ts +0 -2
- package/target/lib/select/select.test.js.map +0 -1
- package/target/lib/services/icon.service.test.js.map +0 -1
- package/target/lib/side-nav/side-nav.test.d.ts +0 -3
- package/target/lib/side-nav/side-nav.test.js.map +0 -1
- package/target/lib/step-indicator/step-indicator.test.d.ts +0 -2
- package/target/lib/step-indicator/step-indicator.test.js.map +0 -1
- package/target/lib/summary-box/summary-box.test.d.ts +0 -1
- package/target/lib/summary-box/summary-box.test.js +0 -9
- package/target/lib/summary-box/summary-box.test.js.map +0 -1
- package/target/lib/tag/tag.test.d.ts +0 -1
- package/target/lib/tag/tag.test.js +0 -9
- package/target/lib/tag/tag.test.js.map +0 -1
- package/target/lib/textarea/textarea.test.d.ts +0 -1
- package/target/lib/textarea/textarea.test.js.map +0 -1
- /package/src/lib/input/{input.test.ts → input.element.test.ts} +0 -0
- /package/src/lib/input-mask/{input-mask.test.ts → input-mask.element.test.ts} +0 -0
- /package/src/lib/services/{icon.service.test.ts → icon.service.element.test.ts} +0 -0
- /package/target/lib/input/{input.test.d.ts → input.element.test.d.ts} +0 -0
- /package/target/lib/input-mask/{input-mask.test.d.ts → input-mask.element.test.d.ts} +0 -0
- /package/target/lib/services/{icon.service.test.d.ts → icon.service.element.test.d.ts} +0 -0
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { assert, fixture, html } from
|
|
3
|
-
import { screen } from
|
|
4
|
-
import { userEvent } from
|
|
5
|
-
describe(
|
|
6
|
-
it(
|
|
1
|
+
import './accordion.element.js';
|
|
2
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
3
|
+
import { screen } from '@testing-library/dom';
|
|
4
|
+
import { userEvent } from '@testing-library/user-event';
|
|
5
|
+
describe('usa-accordion', () => {
|
|
6
|
+
it('should be accessible', async () => {
|
|
7
7
|
const accordion = await fixture(html `<usa-accordion id="first" name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</div></usa-accordion>`);
|
|
8
8
|
return assert.isAccessible(accordion);
|
|
9
9
|
});
|
|
10
|
-
it(
|
|
10
|
+
it('should toggle the open state when clicked', async () => {
|
|
11
11
|
const accordion = await fixture(html `<usa-accordion id="first" name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</div></usa-accordion>`);
|
|
12
|
-
const heading = await screen.findByRole(
|
|
13
|
-
const content = accordion.querySelector(
|
|
12
|
+
const heading = await screen.findByRole('heading');
|
|
13
|
+
const content = accordion.querySelector('.content');
|
|
14
14
|
await userEvent.click(heading);
|
|
15
15
|
assert.isTrue(content?.checkVisibility());
|
|
16
16
|
});
|
|
17
|
-
it(
|
|
17
|
+
it('should toggle the open state when clicked', async () => {
|
|
18
18
|
const accordion = await fixture(html `<usa-accordion id="first" name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.</div></usa-accordion>`);
|
|
19
|
-
const heading = await screen.findByRole(
|
|
20
|
-
const content = accordion.querySelector(
|
|
19
|
+
const heading = await screen.findByRole('heading');
|
|
20
|
+
const content = accordion.querySelector('.content');
|
|
21
21
|
assert.isFalse(content?.checkVisibility());
|
|
22
22
|
await userEvent.click(heading);
|
|
23
23
|
assert.isTrue(content.checkVisibility());
|
|
24
24
|
});
|
|
25
|
-
it(
|
|
25
|
+
it('should only allow a single accordion in a group to be open', async () => {
|
|
26
26
|
const el = await fixture(html `<section><usa-accordion name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Content for First</div></usa-accordion><usa-accordion name="ammendment"><h4 slot="heading">Second Ammendment</h4><div class="content">Content for Second</div></usa-accordion><usa-accordion name="ammendment"><h4 slot="heading">Third Ammendment</h4><div class="content">Content for Third</div></usa-accordion></section>`);
|
|
27
|
-
const headings = el.querySelectorAll(
|
|
28
|
-
const content = Array.from(el.querySelectorAll(
|
|
27
|
+
const headings = el.querySelectorAll('h4');
|
|
28
|
+
const content = Array.from(el.querySelectorAll('.content'));
|
|
29
29
|
await userEvent.click(headings[0]);
|
|
30
30
|
assert.deepEqual(content.map((el) => el.checkVisibility()), [true, false, false]);
|
|
31
31
|
await userEvent.click(headings[1]);
|
|
@@ -33,10 +33,10 @@ describe("usa-accordion", () => {
|
|
|
33
33
|
await userEvent.click(headings[2]);
|
|
34
34
|
assert.deepEqual(content.map((el) => el.checkVisibility()), [false, false, true]);
|
|
35
35
|
});
|
|
36
|
-
it(
|
|
36
|
+
it('should not close accordion not in the same group', async () => {
|
|
37
37
|
const el = await fixture(html `<section><usa-accordion name="ammendment"><h4 slot="heading">First Ammendment</h4><div class="content">Content for First</div></usa-accordion><usa-accordion name="ammendment"><h4 slot="heading">Second Ammendment</h4><div class="content">Content for Second</div></usa-accordion><usa-accordion name="different"><h4 slot="heading">Third Ammendment</h4><div class="content">Content for Third</div></usa-accordion></section>`);
|
|
38
|
-
const headings = el.querySelectorAll(
|
|
39
|
-
const content = Array.from(el.querySelectorAll(
|
|
38
|
+
const headings = el.querySelectorAll('h4');
|
|
39
|
+
const content = Array.from(el.querySelectorAll('.content'));
|
|
40
40
|
await userEvent.click(headings[0]);
|
|
41
41
|
assert.deepEqual(content.map((el) => el.checkVisibility()), [true, false, false]);
|
|
42
42
|
await userEvent.click(headings[1]);
|
|
@@ -45,4 +45,4 @@ describe("usa-accordion", () => {
|
|
|
45
45
|
assert.deepEqual(content.map((el) => el.checkVisibility()), [false, true, true]);
|
|
46
46
|
});
|
|
47
47
|
});
|
|
48
|
-
//# sourceMappingURL=accordion.test.js.map
|
|
48
|
+
//# sourceMappingURL=accordion.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"accordion.element.test.js","sourceRoot":"","sources":["../../../src/lib/accordion/accordion.element.test.ts"],"names":[],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@ let USAAlertElement = (() => {
|
|
|
12
12
|
},
|
|
13
13
|
shadowDom: [
|
|
14
14
|
css `:host{display:block;border-left:.5rem solid #adadad;padding:1rem 1.2rem;color:#1b1b1b;margin-bottom:1rem}:host([type=info]){border-left-color:#00bde3;background-color:#e7f6f8}:host([type=warning]){background-color:#faf3d1;border-left-color:#ffbe2e}:host([type=success]){background-color:#ecf3ec;border-left-color:#00a91c}:host([type=error]){background-color:#f4e3db;border-left-color:#d54309}:host([type=emergency]){background-color:#9c3d10;border-left-color:#9c3d10;color:#fff}:host([type=emergency]) ::slotted(*){color:#fff}.alert-heading{display:grid;grid-template-columns:auto 1fr;align-items:center}usa-icon{margin:-.28rem .75rem 0 0}#heading::slotted(*){font-size:1.33rem;line-height:.9;margin-top:0;margin-bottom:.5rem}`,
|
|
15
|
-
html `<div class="alert-heading"><j-props><usa-icon
|
|
15
|
+
html `<div class="alert-heading"><j-bind props="icon"><usa-icon></usa-icon></j-bind><div><slot id="heading" name="heading"></slot></div><div class="spacer"></div><div><slot></slot></div></div>`,
|
|
16
16
|
],
|
|
17
17
|
})];
|
|
18
18
|
let _classDescriptor;
|
|
@@ -30,7 +30,9 @@ let USAAlertElement = (() => {
|
|
|
30
30
|
static {
|
|
31
31
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
32
32
|
_type_decorators = [attr(), observe()];
|
|
33
|
-
_icon_decorators = [bind(
|
|
33
|
+
_icon_decorators = [bind({
|
|
34
|
+
compute: (i) => USA_ALERT_CONFIG[i.type].icon,
|
|
35
|
+
})];
|
|
34
36
|
__esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
|
|
35
37
|
__esDecorate(this, null, _icon_decorators, { kind: "accessor", name: "icon", static: false, private: false, access: { has: obj => "icon" in obj, get: obj => obj.icon, set: (obj, value) => { obj.icon = value; } }, metadata: _metadata }, _icon_initializers, _icon_extraInitializers);
|
|
36
38
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"alert.element.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAS,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAqB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;IA0F/B,eAAe;4BAlF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;KAgBH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;;;;+BAAnB,SAAQ,WAAW;;;;gCAC7C,IAAI,EAAE,EACN,OAAO,EAAE;gCAGT,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"alert.element.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAS,MAAM,gBAAgB,CAAC;AAEjE,OAAO,EAAqB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;IA0F/B,eAAe;4BAlF3B,OAAO,CAAC;YACP,OAAO,EAAE,WAAW;YACpB,aAAa,EAAE;gBACb,IAAI,EAAE,MAAM;gBACZ,cAAc,EAAE,IAAI;aACrB;YACD,SAAS,EAAE;gBACT,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuDF;gBACD,IAAI,CAAA;;;;;;;;;;;;;;;;KAgBH;aACF;SACF,CAAC;;;;sBACmC,WAAW;;;;;;;+BAAnB,SAAQ,WAAW;;;;gCAC7C,IAAI,EAAE,EACN,OAAO,EAAE;gCAGT,IAAI,CAAC;oBACJ,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI;iBAC9C,CAAC;YAJF,iKAAS,IAAI,6BAAJ,IAAI,mFAAwB;YAKrC,iKAAS,IAAI,6BAAJ,IAAI,mFAAmB;YARlC,6KASC;;;YATY,uDAAe;;QAG1B,qEAA8B,MAAM,EAAC;QAArC,IAAS,IAAI,0CAAwB;QAArC,IAAS,IAAI,gDAAwB;QAKrC,wHAAyB,MAAM,GAAC;QAAhC,IAAS,IAAI,0CAAmB;QAAhC,IAAS,IAAI,gDAAmB;;;;;;;;SARrB,eAAe"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './alert.element.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { assert, fixture, html } from
|
|
3
|
-
import { USA_ALERT_TYPES } from
|
|
4
|
-
describe(
|
|
1
|
+
import './alert.element.js';
|
|
2
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
3
|
+
import { USA_ALERT_TYPES } from './alert-types.js';
|
|
4
|
+
describe('usa-alert', () => {
|
|
5
5
|
for (const alert of USA_ALERT_TYPES) {
|
|
6
6
|
it(`should be accessible: ${alert}`, async () => {
|
|
7
7
|
const form = await fixture(html `<usa-alert type="${alert}"><h3 slot="heading">Status</h3>Lorem ipsum dolor sit amet, <usa-link href="#">consectetur adipiscing</usa-link> elit, sed do eiusmod.</usa-alert>`);
|
|
@@ -9,4 +9,4 @@ describe("usa-alert", () => {
|
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
//# sourceMappingURL=alert.test.js.map
|
|
12
|
+
//# sourceMappingURL=alert.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"alert.element.test.js","sourceRoot":"","sources":["../../../src/lib/alert/alert.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,KAAK,MAAM,KAAK,IAAI,eAAe,EAAE,CAAC;QACpC,EAAE,CAAC,yBAAyB,KAAK,EAAE,EAAE,KAAK,IAAI,EAAE;YAC9C,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,IAAI,CAAA;0BACX,KAAK;;;;;;OAMxB,CAAC,CAAC;YAEH,OAAO,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC,CAAC,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
-
import { attr, css, element, html } from
|
|
3
|
-
import { bind } from
|
|
2
|
+
import { attr, css, element, html } from '@joist/element';
|
|
3
|
+
import { bind } from '@joist/templating';
|
|
4
4
|
let USABreadcrumbElement = (() => {
|
|
5
5
|
let _classDecorators = [element({
|
|
6
|
-
tagName:
|
|
6
|
+
tagName: 'usa-breadcrumb',
|
|
7
7
|
shadowDom: [
|
|
8
8
|
css `:host{position:relative;right:auto;display:inline;max-width:unset;padding-right:1.5rem}:host(:last-child) usa-icon{display:none}a[href]{color:#005ea2;display:inline;text-decoration:underline}usa-icon{height:1rem;width:1.5rem;position:absolute;top:.075rem}`,
|
|
9
|
-
html `<j-props
|
|
9
|
+
html `<j-bind props="href"><a><slot></slot></a></j-bind><usa-icon icon="navigate_next"></usa-icon>`,
|
|
10
10
|
],
|
|
11
11
|
})];
|
|
12
12
|
let _classDescriptor;
|
|
@@ -32,10 +32,10 @@ let USABreadcrumbElement = (() => {
|
|
|
32
32
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
33
33
|
__runInitializers(_classThis, _classExtraInitializers);
|
|
34
34
|
}
|
|
35
|
-
#href_accessor_storage = __runInitializers(this, _href_initializers,
|
|
35
|
+
#href_accessor_storage = __runInitializers(this, _href_initializers, '');
|
|
36
36
|
get href() { return this.#href_accessor_storage; }
|
|
37
37
|
set href(value) { this.#href_accessor_storage = value; }
|
|
38
|
-
#role_accessor_storage = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _role_initializers,
|
|
38
|
+
#role_accessor_storage = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _role_initializers, 'listitem'));
|
|
39
39
|
get role() { return this.#role_accessor_storage; }
|
|
40
40
|
set role(value) { this.#role_accessor_storage = value; }
|
|
41
41
|
constructor() {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { assert, fixture, html } from
|
|
4
|
-
describe(
|
|
5
|
-
it(
|
|
1
|
+
import './breadcrumbs.element.js';
|
|
2
|
+
import './breadcrumb/breadcrumb.element.js';
|
|
3
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
4
|
+
describe('usa-breadcrumbs', () => {
|
|
5
|
+
it('should be accessible', async () => {
|
|
6
6
|
const breadcrumbs = await fixture(html `<usa-breadcrumbs><usa-breadcrumb href="/">Home</usa-breadcrumb><usa-breadcrumb href="/">Federal Contracting</usa-breadcrumb><usa-breadcrumb href="/">Contracting assistance programs</usa-breadcrumb><usa-breadcrumb>Economically disadvantaged women-owned small business federal contracting program</usa-breadcrumb></usa-breadcrumbs>`);
|
|
7
7
|
return assert.isAccessible(breadcrumbs);
|
|
8
8
|
});
|
|
9
9
|
});
|
|
10
|
-
//# sourceMappingURL=breadcrumbs.test.js.map
|
|
10
|
+
//# sourceMappingURL=breadcrumbs.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breadcrumbs.element.test.js","sourceRoot":"","sources":["../../../src/lib/breadcrumbs/breadcrumbs.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oCAAoC,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,WAAW,GAAG,MAAM,OAAO,CAAwB,IAAI,CAAA;;;;;;;;;KAS5D,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import '@joist/templating/define.js';
|
|
2
2
|
declare global {
|
|
3
3
|
interface HTMLElementTagNameMap {
|
|
4
|
-
|
|
4
|
+
'usa-button': USAButtonElement;
|
|
5
5
|
}
|
|
6
6
|
}
|
|
7
7
|
export declare const BUTTON_VARIANTS: readonly ["primary", "secondary", "cool", "warm", "outline"];
|
|
@@ -9,7 +9,7 @@ export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
|
|
|
9
9
|
export declare class USAButtonElement extends HTMLElement {
|
|
10
10
|
#private;
|
|
11
11
|
static formAssociated: boolean;
|
|
12
|
-
accessor type:
|
|
12
|
+
accessor type: 'button' | 'submit' | 'reset';
|
|
13
13
|
accessor disabled: boolean;
|
|
14
14
|
accessor variant: ButtonVariant;
|
|
15
15
|
accessor value: string;
|
|
@@ -1,24 +1,18 @@
|
|
|
1
1
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
-
import
|
|
3
|
-
import { attr, css, element, html, listen } from
|
|
4
|
-
import { bind } from
|
|
5
|
-
export const BUTTON_VARIANTS = [
|
|
6
|
-
"primary",
|
|
7
|
-
"secondary",
|
|
8
|
-
"cool",
|
|
9
|
-
"warm",
|
|
10
|
-
"outline",
|
|
11
|
-
];
|
|
2
|
+
import '@joist/templating/define.js';
|
|
3
|
+
import { attr, css, element, html, listen } from '@joist/element';
|
|
4
|
+
import { bind } from '@joist/templating';
|
|
5
|
+
export const BUTTON_VARIANTS = ['primary', 'secondary', 'cool', 'warm', 'outline'];
|
|
12
6
|
let USAButtonElement = (() => {
|
|
13
7
|
let _classDecorators = [element({
|
|
14
|
-
tagName:
|
|
8
|
+
tagName: 'usa-button',
|
|
15
9
|
shadowDomOpts: {
|
|
16
|
-
mode:
|
|
10
|
+
mode: 'open',
|
|
17
11
|
delegatesFocus: true,
|
|
18
12
|
},
|
|
19
13
|
shadowDom: [
|
|
20
14
|
css `:host{display:inline-block;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem;overflow:hidden}a,button{box-sizing:border-box;font-size:1.06rem;line-height:.9;color:#fff;background-color:#005ea2;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-items:center;border:0;cursor:pointer;-moz-column-gap:0.5rem;column-gap:.5rem;display:inline-flex;font-weight:700;justify-content:center;padding:.75rem 1.25rem;text-align:center;text-decoration:none;width:100%;height:100%;cursor:pointer}@media all and (min-width:30em){:host{width:auto}}:is(button,a):visited{color:#fff}:is(button,a):hover{color:#fff;background-color:#1a4480;border-bottom:0;text-decoration:none}:is(button,a):active{color:#fff;background-color:#162e51}:is(button,a):not([disabled]):focus{outline-offset:0.25rem}:is(button,a):disabled{color:#454545;background-color:#c9c9c9;cursor:not-allowed;opacity:1}:is(button,a):disabled:active,:is(button,a):disabled:focus,:is(button,a):disabled:hover{color:#454545;background-color:#c9c9c9}:is(button,a):focus{outline:.25rem solid #2491ff;outline-offset:0}:host([variant=secondary]) :is(button,a){color:#fff;background-color:#d83933}:host([variant=secondary]) :is(button,a):hover{background-color:#b50909}:host([variant=secondary]) :is(button,a):active{background-color:#8b0a03}:host([variant=cool]) :is(button,a){color:#1b1b1b;background-color:#00bde3}:host([variant=cool]) :is(button,a):hover{background-color:#28a0cb}:host([variant=cool]) :is(button,a):active{color:#fff;background-color:#07648d}:host([variant=warm]) :is(button,a){color:#1b1b1b;background-color:#fa9441}:host([variant=warm]) :is(button,a):hover{color:#fff;background-color:#c05600}:host([variant=warm]) :is(button,a):active{color:#fff;background-color:#775540}:host([variant=outline]) :is(button,a){background-color:transparent;box-shadow:inset 0 0 0 2px #005ea2;color:#005ea2}:host([variant=outline]) :is(button,a):hover{box-shadow:inset 0 0 0 2px #1a4480;color:#1a4480}:host([variant=outline]) :is(button,a):active{box-shadow:inset 0 0 0 2px #162e51;color:#162e51}`,
|
|
21
|
-
html `<j-if bind="href"><template><j-props><a part="link"
|
|
15
|
+
html `<j-if bind="href"><template><j-bind props="href,target"><a part="link"><slot></slot></a></j-bind></template><template else><j-bind props="value,type,disabled"><button tabindex="0" part="button"><slot></slot></button></j-bind></template></j-if>`,
|
|
22
16
|
],
|
|
23
17
|
})];
|
|
24
18
|
let _classDescriptor;
|
|
@@ -55,7 +49,7 @@ let USAButtonElement = (() => {
|
|
|
55
49
|
_value_decorators = [attr(), bind()];
|
|
56
50
|
_href_decorators = [attr(), bind()];
|
|
57
51
|
_target_decorators = [attr(), bind()];
|
|
58
|
-
_onInternalClick_decorators = [listen(
|
|
52
|
+
_onInternalClick_decorators = [listen('click')];
|
|
59
53
|
__esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
|
|
60
54
|
__esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
|
|
61
55
|
__esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
|
|
@@ -68,22 +62,22 @@ let USAButtonElement = (() => {
|
|
|
68
62
|
if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
|
|
69
63
|
}
|
|
70
64
|
static formAssociated = true;
|
|
71
|
-
#type_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _type_initializers,
|
|
65
|
+
#type_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _type_initializers, 'button'));
|
|
72
66
|
get type() { return this.#type_accessor_storage; }
|
|
73
67
|
set type(value) { this.#type_accessor_storage = value; }
|
|
74
68
|
#disabled_accessor_storage = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _disabled_initializers, false));
|
|
75
69
|
get disabled() { return this.#disabled_accessor_storage; }
|
|
76
70
|
set disabled(value) { this.#disabled_accessor_storage = value; }
|
|
77
|
-
#variant_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _variant_initializers,
|
|
71
|
+
#variant_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _variant_initializers, 'primary'));
|
|
78
72
|
get variant() { return this.#variant_accessor_storage; }
|
|
79
73
|
set variant(value) { this.#variant_accessor_storage = value; }
|
|
80
|
-
#value_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _value_initializers,
|
|
74
|
+
#value_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _value_initializers, ''));
|
|
81
75
|
get value() { return this.#value_accessor_storage; }
|
|
82
76
|
set value(value) { this.#value_accessor_storage = value; }
|
|
83
|
-
#href_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _href_initializers,
|
|
77
|
+
#href_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _href_initializers, ''));
|
|
84
78
|
get href() { return this.#href_accessor_storage; }
|
|
85
79
|
set href(value) { this.#href_accessor_storage = value; }
|
|
86
|
-
#target_accessor_storage = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _target_initializers,
|
|
80
|
+
#target_accessor_storage = (__runInitializers(this, _href_extraInitializers), __runInitializers(this, _target_initializers, ''));
|
|
87
81
|
get target() { return this.#target_accessor_storage; }
|
|
88
82
|
set target(value) { this.#target_accessor_storage = value; }
|
|
89
83
|
#tabIndex_accessor_storage = (__runInitializers(this, _target_extraInitializers), 0);
|
|
@@ -96,17 +90,17 @@ let USAButtonElement = (() => {
|
|
|
96
90
|
#handleForm() {
|
|
97
91
|
const { form } = this.#internals;
|
|
98
92
|
if (form) {
|
|
99
|
-
if (this.type ===
|
|
93
|
+
if (this.type === 'submit') {
|
|
100
94
|
this.#submit(form);
|
|
101
95
|
}
|
|
102
|
-
else if (this.type ===
|
|
96
|
+
else if (this.type === 'reset') {
|
|
103
97
|
form.reset();
|
|
104
98
|
}
|
|
105
99
|
}
|
|
106
100
|
}
|
|
107
101
|
#submit(form) {
|
|
108
|
-
const btn = document.createElement(
|
|
109
|
-
btn.type =
|
|
102
|
+
const btn = document.createElement('button');
|
|
103
|
+
btn.type = 'submit';
|
|
110
104
|
form.append(btn);
|
|
111
105
|
btn.click();
|
|
112
106
|
btn.remove();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.element.js","sourceRoot":"","sources":["../../../src/lib/button/button.element.ts"],"names":[],"mappings":";AAAA,OAAO,6BAA6B,CAAC;AAErC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAQzC,MAAM,CAAC,MAAM,eAAe,GAAG
|
|
1
|
+
{"version":3,"file":"button.element.js","sourceRoot":"","sources":["../../../src/lib/button/button.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './button.element.js';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import './button.element.js';
|
|
2
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
3
|
+
import { BUTTON_VARIANTS } from './button.element.js';
|
|
4
|
+
describe('usa-button', () => {
|
|
5
|
+
for (const variant of BUTTON_VARIANTS) {
|
|
6
|
+
it('should be accessible', async () => {
|
|
7
|
+
const button = await fixture(html `<usa-button variant="${variant}">Hello World</usa-button>`);
|
|
8
|
+
return assert.isAccessible(button);
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
//# sourceMappingURL=button.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.element.test.js","sourceRoot":"","sources":["../../../src/lib/button/button.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,eAAe,EAAyB,MAAM,qBAAqB,CAAC;AAE7E,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,KAAK,MAAM,OAAO,IAAI,eAAe,EAAE,CAAC;QACtC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;YACpC,MAAM,MAAM,GAAG,MAAM,OAAO,CAAmB,IAAI,CAAA,wBAAwB,OAAO,4BAA4B,CAAC,CAAC;YAEhH,OAAO,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACrC,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './button-group.element.js';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import './button-group.element.js';
|
|
2
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
3
|
+
describe('usa-button-group', () => {
|
|
4
|
+
it('should be accessible', async () => {
|
|
5
|
+
const buttonGroup = await fixture(html `<usa-button-group>Hello World</usa-button-group>`);
|
|
6
|
+
return assert.isAccessible(buttonGroup);
|
|
7
|
+
});
|
|
8
|
+
});
|
|
9
|
+
//# sourceMappingURL=button-group.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button-group.element.test.js","sourceRoot":"","sources":["../../../src/lib/button-group/button-group.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,WAAW,GAAG,MAAM,OAAO,CAAwB,IAAI,CAAA,oDAAoD,CAAC,CAAC;QAEnH,OAAO,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;IAC1C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { assert, fixture, html } from
|
|
8
|
-
describe(
|
|
9
|
-
it(
|
|
1
|
+
import './card.element.js';
|
|
2
|
+
import './card-body/card-body.element.js';
|
|
3
|
+
import './card-footer/card-footer.element.js';
|
|
4
|
+
import './card-group/card-group.element.js';
|
|
5
|
+
import './card-header/card-header.element.js';
|
|
6
|
+
import './card-media/card-media.element.js';
|
|
7
|
+
import { assert, fixture, html } from '@open-wc/testing';
|
|
8
|
+
describe('usa-card', () => {
|
|
9
|
+
it('should be accessible', async () => {
|
|
10
10
|
const card = await fixture(html `<usa-card-group><usa-card><usa-card-media><img alt="A placeholder image"></usa-card-media><usa-card-header>Card with media</usa-card-header><usa-card-body>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae.</usa-card-body><usa-card-footer><usa-button>Visit Florida Keys</usa-button></usa-card-footer></usa-card></usa-card-group>`);
|
|
11
11
|
return assert.isAccessible(card);
|
|
12
12
|
});
|
|
13
13
|
});
|
|
14
|
-
//# sourceMappingURL=card.test.js.map
|
|
14
|
+
//# sourceMappingURL=card.element.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.element.test.js","sourceRoot":"","sources":["../../../src/lib/card/card.element.test.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,kCAAkC,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAC5C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,oCAAoC,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAIzD,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;IACxB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,IAAI,GAAG,MAAM,OAAO,CAAiB,IAAI,CAAA;;;;;;;;;;;;;;;;;;;KAmB9C,CAAC,CAAC;QAEH,OAAO,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import '@joist/templating/define.js';
|
|
1
2
|
declare global {
|
|
2
3
|
interface HTMLElementTagNameMap {
|
|
3
|
-
|
|
4
|
+
'usa-checkbox': USACheckboxElement;
|
|
4
5
|
}
|
|
5
6
|
}
|
|
6
7
|
export declare class USACheckboxElement extends HTMLElement {
|
|
@@ -12,6 +13,6 @@ export declare class USACheckboxElement extends HTMLElement {
|
|
|
12
13
|
accessor required: boolean;
|
|
13
14
|
accessor disabled: boolean;
|
|
14
15
|
accessor tiled: boolean;
|
|
15
|
-
|
|
16
|
-
onCheckboxChange(): void;
|
|
16
|
+
onChange(): void;
|
|
17
|
+
onCheckboxChange(e: Event): void;
|
|
17
18
|
}
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import { __esDecorate, __runInitializers } from "tslib";
|
|
2
|
-
import
|
|
2
|
+
import '@joist/templating/define.js';
|
|
3
|
+
import { attr, css, element, html, listen, query } from '@joist/element';
|
|
4
|
+
import { bind } from '@joist/templating';
|
|
5
|
+
import { effect } from '@joist/observable';
|
|
3
6
|
let USACheckboxElement = (() => {
|
|
4
7
|
let _classDecorators = [element({
|
|
5
|
-
tagName:
|
|
8
|
+
tagName: 'usa-checkbox',
|
|
6
9
|
shadowDom: [
|
|
7
|
-
css `*{box-sizing:border-box}:host{display:inline-block;max-width:30rem;position:relative}:host([tiled]) label{background-color:#fff;border:2px solid #5c5c5c;border-radius:.25rem;color:#1b1b1b;padding:.75rem 1rem .75rem .75rem}label{display:inline-flex;cursor:pointer;font-size:1.06rem;line-height:1.3;width:100%}.checkbox{background:#fff;box-shadow:0 0 0 2px #1b1b1b;display:flex;align-items:center;justify-content:center;height:1.25rem;min-width:1.25rem;max-width:1.25rem;border-radius:2px;position:relative;margin-right:.75rem}input:disabled+.checkbox{background-color:#fff;box-shadow:0 0 0 2px #757575}input:disabled:is(:checked)+.checkbox{background-color:#757575;box-shadow:0 0 0 2px #757575}:host([disabled]) label{color:#757575;cursor:not-allowed}input:checked+.checkbox{background-color:#005ea2;box-shadow:0 0 0 2px #005ea2}input:checked+.checkbox::after{content:
|
|
8
|
-
html `<label><input type="checkbox" tabindex="0"><div class="checkbox" part="checkbox"></div><div class="title" part="title"><slot></slot></div></label>`,
|
|
10
|
+
css `*{box-sizing:border-box}:host{display:inline-block;max-width:30rem;position:relative}:host([tiled]) label{background-color:#fff;border:2px solid #5c5c5c;border-radius:.25rem;color:#1b1b1b;padding:.75rem 1rem .75rem .75rem}label{display:inline-flex;cursor:pointer;font-size:1.06rem;line-height:1.3;width:100%}.checkbox{background:#fff;box-shadow:0 0 0 2px #1b1b1b;display:flex;align-items:center;justify-content:center;height:1.25rem;min-width:1.25rem;max-width:1.25rem;border-radius:2px;position:relative;margin-right:.75rem}input:disabled+.checkbox{background-color:#fff;box-shadow:0 0 0 2px #757575}input:disabled:is(:checked)+.checkbox{background-color:#757575;box-shadow:0 0 0 2px #757575}:host([disabled]) label{color:#757575;cursor:not-allowed}input:checked+.checkbox{background-color:#005ea2;box-shadow:0 0 0 2px #005ea2}input:checked+.checkbox::after{content:' ';display:block;height:1rem;width:.5rem;border-right:4px solid #fff;border-bottom:4px solid #fff;transform:rotate(45deg) scale(.65)}input{position:absolute}input:focus+.checkbox{outline:.25rem solid #2491ff;outline-offset:0.25rem}.description{display:block;font-size:.93rem;margin-top:.5rem}.break{flex-basis:100%;height:0}:host([tiled]) label:has(input:checked){background-color:rgba(0,94,162,.1);border-color:#005ea2}:host([tiled]) label:has(input:checked:is(:disabled)){background-color:#fff;border-color:#757575}`,
|
|
11
|
+
html `<label><j-bind props="checked,required,disabled" target="input"><input type="checkbox" tabindex="0"><div class="checkbox" part="checkbox"></div></j-bind><div class="title" part="title"><slot></slot></div></label>`,
|
|
9
12
|
],
|
|
10
13
|
})];
|
|
11
14
|
let _classDescriptor;
|
|
@@ -31,26 +34,29 @@ let USACheckboxElement = (() => {
|
|
|
31
34
|
let _tiled_decorators;
|
|
32
35
|
let _tiled_initializers = [];
|
|
33
36
|
let _tiled_extraInitializers = [];
|
|
37
|
+
let _onChange_decorators;
|
|
34
38
|
let _onCheckboxChange_decorators;
|
|
35
39
|
var USACheckboxElement = class extends _classSuper {
|
|
36
40
|
static { _classThis = this; }
|
|
37
41
|
static {
|
|
38
42
|
const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
|
|
39
|
-
_checked_decorators = [attr()];
|
|
40
|
-
_name_decorators = [attr()];
|
|
41
|
-
_value_decorators = [attr()];
|
|
42
|
-
_required_decorators = [attr()];
|
|
43
|
-
_disabled_decorators = [attr()];
|
|
43
|
+
_checked_decorators = [attr(), bind()];
|
|
44
|
+
_name_decorators = [attr(), bind()];
|
|
45
|
+
_value_decorators = [attr(), bind()];
|
|
46
|
+
_required_decorators = [attr(), bind()];
|
|
47
|
+
_disabled_decorators = [attr(), bind()];
|
|
44
48
|
_tiled_decorators = [attr({
|
|
45
49
|
observed: false,
|
|
46
50
|
})];
|
|
47
|
-
|
|
51
|
+
_onChange_decorators = [effect()];
|
|
52
|
+
_onCheckboxChange_decorators = [listen('change', 'input[type=checkbox]')];
|
|
48
53
|
__esDecorate(this, null, _checked_decorators, { kind: "accessor", name: "checked", static: false, private: false, access: { has: obj => "checked" in obj, get: obj => obj.checked, set: (obj, value) => { obj.checked = value; } }, metadata: _metadata }, _checked_initializers, _checked_extraInitializers);
|
|
49
54
|
__esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
|
|
50
55
|
__esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
|
|
51
56
|
__esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
|
|
52
57
|
__esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
|
|
53
58
|
__esDecorate(this, null, _tiled_decorators, { kind: "accessor", name: "tiled", static: false, private: false, access: { has: obj => "tiled" in obj, get: obj => obj.tiled, set: (obj, value) => { obj.tiled = value; } }, metadata: _metadata }, _tiled_initializers, _tiled_extraInitializers);
|
|
59
|
+
__esDecorate(this, null, _onChange_decorators, { kind: "method", name: "onChange", static: false, private: false, access: { has: obj => "onChange" in obj, get: obj => obj.onChange }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
54
60
|
__esDecorate(this, null, _onCheckboxChange_decorators, { kind: "method", name: "onCheckboxChange", static: false, private: false, access: { has: obj => "onCheckboxChange" in obj, get: obj => obj.onCheckboxChange }, metadata: _metadata }, null, _instanceExtraInitializers);
|
|
55
61
|
__esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
|
|
56
62
|
USACheckboxElement = _classThis = _classDescriptor.value;
|
|
@@ -60,10 +66,10 @@ let USACheckboxElement = (() => {
|
|
|
60
66
|
#checked_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _checked_initializers, false));
|
|
61
67
|
get checked() { return this.#checked_accessor_storage; }
|
|
62
68
|
set checked(value) { this.#checked_accessor_storage = value; }
|
|
63
|
-
#name_accessor_storage = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _name_initializers,
|
|
69
|
+
#name_accessor_storage = (__runInitializers(this, _checked_extraInitializers), __runInitializers(this, _name_initializers, ''));
|
|
64
70
|
get name() { return this.#name_accessor_storage; }
|
|
65
71
|
set name(value) { this.#name_accessor_storage = value; }
|
|
66
|
-
#value_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers,
|
|
72
|
+
#value_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _value_initializers, ''));
|
|
67
73
|
get value() { return this.#value_accessor_storage; }
|
|
68
74
|
set value(value) { this.#value_accessor_storage = value; }
|
|
69
75
|
#required_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _required_initializers, false));
|
|
@@ -75,26 +81,21 @@ let USACheckboxElement = (() => {
|
|
|
75
81
|
#tiled_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _tiled_initializers, false));
|
|
76
82
|
get tiled() { return this.#tiled_accessor_storage; }
|
|
77
83
|
set tiled(value) { this.#tiled_accessor_storage = value; }
|
|
78
|
-
#checkbox = (__runInitializers(this, _tiled_extraInitializers), query(
|
|
84
|
+
#checkbox = (__runInitializers(this, _tiled_extraInitializers), query('input'));
|
|
79
85
|
#internals = this.attachInternals();
|
|
80
|
-
|
|
81
|
-
this.#checkbox({
|
|
82
|
-
checked: this.checked,
|
|
83
|
-
name: this.name,
|
|
84
|
-
disabled: this.disabled,
|
|
85
|
-
required: this.required,
|
|
86
|
-
});
|
|
86
|
+
onChange() {
|
|
87
87
|
this.#syncFormState();
|
|
88
88
|
}
|
|
89
|
-
onCheckboxChange() {
|
|
89
|
+
onCheckboxChange(e) {
|
|
90
|
+
e.stopPropagation();
|
|
90
91
|
const checkbox = this.#checkbox();
|
|
91
92
|
this.checked = checkbox.checked;
|
|
92
|
-
this
|
|
93
|
+
this.dispatchEvent(new Event('change', { bubbles: true }));
|
|
93
94
|
}
|
|
94
95
|
#syncFormState() {
|
|
95
96
|
const checkbox = this.#checkbox();
|
|
96
97
|
this.#internals.setValidity({});
|
|
97
|
-
this.#internals.setFormValue(
|
|
98
|
+
this.#internals.setFormValue(this.checked ? this.value : null);
|
|
98
99
|
if (checkbox.validationMessage) {
|
|
99
100
|
this.#internals.setValidity({ customError: true }, checkbox.validationMessage, checkbox);
|
|
100
101
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.element.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.element.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"checkbox.element.js","sourceRoot":"","sources":["../../../src/lib/checkbox/checkbox.element.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './checkbox.element.js';
|