diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md index 1b48d2bfd0..14af6b460c 100644 --- a/CHANGELOG-1.x.md +++ b/CHANGELOG-1.x.md @@ -1,6 +1,7 @@ # 1.11.0 (2021) - [d3ea7fa](https://github.com/patternfly/patternfly-elements/commit/d3ea7facb0c36b7f3e20e2568bdc4bf2e5a5a852) feat: Graceful failure for component registry +- [](https://github.com/patternfly/patternfly-elements/commit/) fix: Accordion alignment with latest design kit - [5f88c39](https://github.com/patternfly/patternfly-elements/commit/5f88c3963f8a6c13a9aeba6e9f664678453d46ce) fix: Jump links parseInt for IE11 # 1.10.1 (2021-07-12) diff --git a/docs/demo.html b/docs/demo.html index 61e223bf2a..f2655c8f29 100644 --- a/docs/demo.html +++ b/docs/demo.html @@ -74,37 +74,36 @@

Card 3

Accordion component

- + -

Why do wizards need money if they could just create it?

+

Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?

 -

There is legislation that decides what you can conjure and what you can not. Because things that you conjure out of thin air will not last, it is illegal in the wizarding world.

+

Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.

+ + Call to action + -

Why doesn't Harry have a portrait of his parents?

+

Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?

 -

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

+

Ullamco ullamco sint ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.

 -

Why is Harry considered a half-blood if both of his parents could use magic?

+

Nostrud ad sit commodo nostrud?

 -

Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who consider themselves pure, such as the Malfoy's or other antagonists.

+

Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.

 -

Is Hogwarts the only wizarding school?

+

Reprehenderit cupidatat labore?

 -

No! It has been revealed that there are actually 11 long established and prestigious schools around the globe. These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is certain of it’s whereabouts), and Ilvermorny, right here in the United States.

- - -

Where do the main characters work as adults?

- - -

Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the joke shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the Daily Prophet.

-

Read more about the characters

+

Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.

+ + Call to action + diff --git a/elements/pfe-accordion/README.md b/elements/pfe-accordion/README.md index 602350adf5..48923fb479 100644 --- a/elements/pfe-accordion/README.md +++ b/elements/pfe-accordion/README.md @@ -117,6 +117,32 @@ Accepts a 0-based index value (integer) for the set of accordion items to collap Collapse all accordion items. +## Styling hooks + +| Theme hook | Description | Default | +| --- | --- | --- | +| `--pfe-accordion--Padding` | Applied to header and panel components | var(--pfe-theme--container-padding, 1rem) calc(var(--pfe-theme--container-padding, 1rem) * 1.5) | +| `--pfe-accordion--BorderColor` | Color of the encompassing borders | var(--pfe-theme--color--surface--border, #d2d2d2) | +| `--pfe-accordion--BorderWidth` | Width of the encompassing borders | var(--pfe-theme--surface--border-width, 1px) | +| `--pfe-accordion--accent--width` | Width of the accent mark | var(--pfe-theme--surface--border-width--active, 3px) | +| `--pfe-accordion--Width` | Maximum width for the accordion element | 100% | +| `--pfe-accordion--MaxWidth--content` | Maximum width for the content inside the accordion panel | 80ch | +| `--pfe-accordion--BoxShadow` | Box shadow on the header and panel in closed state | 0 5px 4px transparent | +| `--pfe-accordion--ZIndex` | Accordion's z-index for the stack | 3 | +| `--pfe-accordion--FontSize--header` | Font-size for the accordion header text | var(--pf-global--FontSize--xl, 1.25rem) | +| `--pfe-accordion--FontWeight--header` | Font-weight for the accordion header text | var(--pfe-theme--font-weight--normal, 400) | +| `--pfe-accordion--TextAlign` | Text alignment for the accordion header text | left | +| `--pfe-accordion--BackgroundColor` | Background color for the accordion header and panel | transparent | +| `--pfe-accordion--Color` | Text color for the accordion header and panel | var(--pfe-broadcasted--text, #3c3f42) | +| `--pfe-accordion--accent` | Left accent line color for the accordion header and panel | transparent | +| `--pfe-accordion--BackgroundColor--active` | Background color when the accordion is active (hover, focus) | var(--pfe-theme--color--surface--lighter, #f0f0f0) | +| `--pfe-accordion--Color--active` | Text color when the accordion is active (hover, focus) | var(--pfe-broadcasted--text, #3c3f42) | +| `--pfe-accordion--accent--active` | Color of the accent mark when the accordion is active (hover, focus) | var(--pfe-theme--color--ui-accent, #06c) | +| `--pfe-accordion--BackgroundColor--expanded` | Background color when the accordion is open | var(--pfe-theme--color--surface--lightest, #fff) | +| `--pfe-accordion--Color--expanded` | Text color when the accordion is open | var(--pfe-broadcasted--text, #3c3f42) | +| `--pfe-accordion--accent--expanded` | Color of the accent mark when the accordion is open | var(--pfe-theme--color--ui-accent, #06c) | +| `--pfe-accordion--BoxShadow--expanded` | Box shadow when the accordion is open | 0 5px 4px rgba(140, 140, 140, 0.35) | + ## Test npm run test diff --git a/elements/pfe-accordion/demo/demo.css b/elements/pfe-accordion/demo/demo.css index 849f5ac26c..0b61aa43a1 100644 --- a/elements/pfe-accordion/demo/demo.css +++ b/elements/pfe-accordion/demo/demo.css @@ -2,10 +2,6 @@ section { padding: 2rem; } -pfe-jump-links-nav { - --pfe-accordion__panel-container--Padding: calc(var(--pfe-theme--container-spacer, 1rem) * 1.5); -} - .dark-background { background-color: #252525; --context: dark; @@ -44,35 +40,43 @@ h2 { /* Example not using context variable */ .custom-styles { - background-color: #e00; - --pfe-broadcasted--text: pink; + background-color: rgb(108, 245, 154); + --context: saturated; + + --pfe-broadcasted--text: #444; --pfe-broadcasted--link: green; --pfe-broadcasted--link--hover: #eee; --pfe-broadcasted--link--focus: #fff; -} -.custom-styles pfe-accordion { - --pfe-accordion--accent: #fff; - --pfe-theme--color--ui-accent: #ad41ad; -} + --pfe-accordion--BackgroundColor--active: rgba(255, 255, 255, 0.5); + --pfe-accordion--accent--active: hotpink; + --pfe-accordion--Color--active: inherit; + + --pfe-accordion--accent--expanded: hotpink; + --pfe-accordion--BackgroundColor--expanded: pink; + --pfe-accordion--Color--expanded: #000; -.custom-styles pfe-accordion-header[expanded] { - --pfe-accordion--accent: #ad41ad; + --pfe-accordion--BorderColor: #fff; } -.custom-styles pfe-accordion pfe-accordion { +.custom-styles pfe-accordion-panel pfe-accordion { + --context: light; + --pfe-accordion--accent: initial; - --pfe-theme--color--ui-accent: initial; + --pfe-accordion--accent--expanded: initial; + --pfe-accordion--accent--active: initial; + --pfe-accordion--BackgroundColor--expanded: initial; + --pfe-accordion--Color--expanded: initial; + --pfe-accordion--Color--active: initial; + + --pfe-accordion--BorderColor: #fff; + --pfe-broadcasted--text: initial; --pfe-broadcasted--link: initial; --pfe-broadcasted--link--hover: initial; --pfe-broadcasted--link--focus: initial; } -.custom-styles pfe-accordion pfe-accordion-header[expanded] { - --pfe-accordion--accent: initial; -} - .custom-styles h2 { margin-top: 0; } diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html index 1c3c57f091..3891065101 100644 --- a/elements/pfe-accordion/demo/index.html +++ b/elements/pfe-accordion/demo/index.html @@ -33,6 +33,7 @@ '../../pfe-card/dist/pfe-card.umd.js', '../../pfe-cta/dist/pfe-cta.umd.js', '../../pfe-button/dist/pfe-button.umd.js', + '../../pfe-badge/dist/pfe-badge.umd.js', '../../pfe-select/dist/pfe-select.umd.js', '../../pfe-jump-links/dist/pfe-jump-links.umd.js' ]) @@ -45,7 +46,7 @@
-

<pfe-accordion>

+

<pfe-accordion>

@@ -60,363 +61,331 @@

+ -

Table of contents

+

Table of contents

 - -
-
-

Accordion component with history

- - -

Nested panel example

- - - - -

Panel with multiple paragraphs

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum.

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor - sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- - - - -

Panel with links & floating cards

- - -
-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + +

+

Accordion component with history

+ + +

Nested panel example

+ NEW + + + + +

Panel with multiple paragraphs

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

-
-
-

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.

-
- - -

Panel with CTA

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore - et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. -

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit - amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna - aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd - gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- Call-to-action - - -
- -
-

Accordion component with expanded index

- - -

Nested panel example

- - - - -

Panel with multiple paragraphs

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum.

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor - sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- - - - -

Panel with links

- - +

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor + sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+ + + + +

Panel with links & floating cards

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

- - -

Panel with CTA

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore - et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. -

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit - amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna - aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd - gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- Call-to-action - - -
+ Call to action + + +

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.

+ + + +

Panel with CTA

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore + et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. +

+

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit + amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna + aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd + gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+ Call-to-action + + + -
-
-

Dynamic injection

- - - -

- - -

Consetetur sadipscing elitr?

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum.

- Call-to-action - - -

Labore et dolore magna aliquyam erat?

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum.

- - -

At vero eos et accusam et justo duo dolores?

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum.

- Call-to-action - - -

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet?

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum.

- - -

Invidunt ut labore et dolore magna?

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum.

-

- - -
+
+

Accordion component with expanded index

+ + +

Nested panel example

+ + + + +

Panel with multiple paragraphs

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum.

+

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor + sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+ + + + +

Panel with links

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum.

+ + +

Panel with CTA

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore + et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. +

+

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit + amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna + aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd + gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+ Call-to-action + + +
-
-

Disclosure

- - -

This is a disclosure

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum.

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor - sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- - +
+
+

Dynamic injection

+ + + +

+ + +

Consetetur sadipscing elitr?

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum.

+ Call-to-action + + +

Labore et dolore magna aliquyam erat?

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum.

+ + +

At vero eos et accusam et justo duo dolores?

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum.

+ Call-to-action + + +

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet?

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum.

+ + +

Invidunt ut labore et dolore magna?

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum.

+

+ + +
- - -

Not a disclosure because disclosure=false

- - -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum.

-

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor - sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore - magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut - labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores - et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- - -
-
- - +
+

Disclosure

+ + +

This is a disclosure

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum.

+

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor + sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+ + - -

Custom saturated background


- - -

Why do wizards need money if they could just create it?

- - -

There is legislation that decides what you can conjure and what you can not. Because things that you conjure - out of thin air will not last, it is illegal in the wizarding world.

- - -

Why doesn't Harry have a portrait of his parents?

- - -

The characters in the portraits are not actually ghosts. They mainly are there just to repeat - common phrases or serve as a general representation of the individual they depict. - A portrait of his parents would not be of much help to Harry.

- - -

Why is Harry considered a half-blood if both of his parents could use magic?

- - -

Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who consider - themselves pure, such as the Malfoy's or other antagonists.

- - -

Is Hogwarts the only wizarding school?

- - -

No! It has been revealed that there are actually 11 long established and prestigious schools around the - globe. These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is certain - of it’s whereabouts), and Ilvermorny, right here in the United States.

- - -

Where do the main characters work as adults?

- - -

Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the joke - shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the Daily - Prophet.

-

Read more about the characters -

- - - + + +

Not a disclosure because disclosure=false

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum.

+

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor + sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore + magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores + et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+ + +
- -

Custom styles

- - -

Why do wizards need money if they could just create it?

- - - + +

Custom saturated background


+ -

Why do wizards need money if they could just create it?

+

Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?

 -

There is legislation that decides what you can conjure and what you can not. Because things that you - conjure out of thin air will not last, it is illegal in the wizarding world.

+

Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.

+ + Call to action + -

Why doesn't Harry have a portrait of his parents?

+

Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?

 -

The characters in the portraits are not actually ghosts. They mainly are there just to - repeat common phrases or serve as a general representation of the individual - they depict. A portrait of his parents would not be of much help to Harry.

+

Ullamco ullamco sint ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.

 -

Why is Harry considered a half-blood if both of his parents could use magic?

+

Nostrud ad sit commodo nostrud?

 -

Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who - consider themselves pure, such as the Malfoy's or other antagonists.

+

Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.

 -

Is Hogwarts the only wizarding school?

+

Reprehenderit cupidatat labore?

 -

No! It has been revealed that there are actually 11 long established and prestigious schools around the - globe. These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is - certain of it’s whereabouts), and Ilvermorny, right here in the United States.

+

Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.

+ + Call to action + + + + + +

Custom styles

+ -

Where do the main characters work as adults?

+

Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?

 -

Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the - joke shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the - Daily Prophet.

-

Read more about the - characters

+ + +

Laboris sunt qui dolor consectetur excepteur in aliqua ipsum?

+ + +

Culpa adipisicing sunt dolor ullamco dolor duis in ad commodo.

+ + Call to action + + + +

Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?

+ + +

Ullamco ullamco sint ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.

+ + +

Nostrud ad sit commodo nostrud?

+ + +

Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.

+ + +

Reprehenderit cupidatat labore?

+ + +

Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.

+ + Call to action + + + + + +

Anim est tempor fugiat pariatur laborum deserunt ex mollit aliquip?

+ + +

Ullamco ullamco sint ex id magna elit deserunt dolore nostrud eu et dolore est Lorem. Esse laborum do ut consectetur occaecat proident et nostrud ut nostrud veniam officia Lorem.

+ + +

Nostrud ad sit commodo nostrud?

+ + +

Nisi veniam tempor reprehenderit laboris amet laborum et do ut. Veniam eiusmod aliquip ullamco quis esse laborum Lorem exercitation consequat.

+ + +

Reprehenderit cupidatat labore?

+ + +

Magna incididunt aliquip consectetur dolor adipisicing amet cillum officia nostrud. Elit exercitation voluptate aute nostrud.

+ + Call to action + - - -

Why doesn't Harry have a portrait of his parents?

- - -

The characters in the portraits are not actually ghosts. They mainly are there just to repeat - common phrases or serve as a general representation of the individual they depict. - A portrait of his parents would not be of much help to Harry.

- - -

Why is Harry considered a half-blood if both of his parents could use magic?

- - -

Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who consider - themselves pure, such as the Malfoy's or other antagonists.

- - -

Is Hogwarts the only wizarding school?

- - -

No! It has been revealed that there are actually 11 long established and prestigious schools around the - globe. These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is certain - of it’s whereabouts), and Ilvermorny, right here in the United States.

- - -

Where do the main characters work as adults?

- - -

Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the joke - shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the Daily - Prophet.

-

Read more about the characters -

- - - + - -

Form test for ShadyCSS

- - - -

Header

- - -

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

- - - +
+

Form test for ShadyCSS

+
+ + +

Header

+ + +

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

+ + +
+
+ - - - - - - - - diff --git a/elements/pfe-accordion/test/old-test/pfe-accordion_react_test.html b/elements/pfe-accordion/test/old-test/pfe-accordion_react_test.html deleted file mode 100644 index beeb33f20c..0000000000 --- a/elements/pfe-accordion/test/old-test/pfe-accordion_react_test.html +++ /dev/null @@ -1,78 +0,0 @@ - - - - - - - - - - - - - - -
- - - diff --git a/elements/pfe-accordion/test/old-test/pfe-accordion_test.html b/elements/pfe-accordion/test/old-test/pfe-accordion_test.html deleted file mode 100644 index 6e3f3c3c90..0000000000 --- a/elements/pfe-accordion/test/old-test/pfe-accordion_test.html +++ /dev/null @@ -1,65 +0,0 @@ - - - - - - - - - - - - -

Why do wizards need money if they could just create it?

- - -

There is legislation that decides what you can conjure and what you can not. Because things that you conjure out of thin air will not last, it is illegal in the wizarding world.

- - -

Why doesn't Harry have a portrait of his parents?

- - -

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

- - -

Why is Harry considered a half-blood if both of his parents could use magic?

- - -

Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who consider themselves pure, such as the Malfoy's or other antagonists.

- - -

Is Hogwarts the only wizarding school?

- - -

No! It has been revealed that there are actually 11 long established and prestigious schools around the globe. These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is certain of it’s whereabouts), and Ilvermorny, right here in the United States.

- - -

Where do the main characters work as adults?

- - -

Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the joke shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the Daily Prophet.

-

Read more about the characters

- - - - - -

Header

- - - Panel - - - - - -

Header

- - - Panel - - - - - - diff --git a/elements/pfe-accordion/test/old-test/pfe-accordion_test.js b/elements/pfe-accordion/test/old-test/pfe-accordion_test.js deleted file mode 100644 index c5dde1f142..0000000000 --- a/elements/pfe-accordion/test/old-test/pfe-accordion_test.js +++ /dev/null @@ -1,226 +0,0 @@ -suite('', () => { - test('it should add the proper attributes to the accordion, headers, and panels', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const header = pfeAccordion.querySelector('pfe-accordion-header'); - const panel = pfeAccordion.querySelector('pfe-accordion-panel'); - - assert.isTrue(header.hasAttribute('aria-controls')); - assert.isTrue(panel.hasAttribute('aria-labelledby')); - assert.equal(panel.getAttribute('role'), 'region'); - // assert.equal(header.pfeId, panel.getAttribute('aria-labelledby')); - // assert.equal(panel.pfeId, header.getAttribute('aria-controls')); - }); - - test('it should expand a panel when a header is selected', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const header = pfeAccordion.querySelector('pfe-accordion-header'); - const panel = pfeAccordion.querySelector('pfe-accordion-panel'); - - header.click(); - - assert.equal('true', header.getAttribute('aria-expanded')); - assert.isTrue(panel.hasAttribute('expanded')); - assert.isTrue(header.expanded); - assert.isTrue(panel.expanded); - - // reset - header.click(); - }); - - test('it should collapse a panel when an already expanded header is selected', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const header = pfeAccordion.querySelector('pfe-accordion-header'); - const panel = pfeAccordion.querySelector('pfe-accordion-panel'); - - // expand the first panel - header.click(); - - // close it - header.click(); - - assert.equal(header.getAttribute('aria-expanded'), "false"); - assert.isNotTrue(panel.hasAttribute('expanded')); - assert.isNotTrue(header.expanded); - assert.isNotTrue(panel.expanded); - }); - - test('it should use the ids that are provided instead of generating new ones', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const firstHeader = pfeAccordion.querySelector('pfe-accordion-header'); - const firstPanel = pfeAccordion.querySelector('pfe-accordion-panel'); - - assert.equal(firstHeader.id, "header1"); - assert.equal(firstPanel.id, "panel1"); - }); - - test('it should toggle a panel when toggle is called', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const secondHeader = pfeAccordion.querySelector('pfe-accordion-header:nth-of-type(2)'); - const secondPanel = pfeAccordion.querySelector('pfe-accordion-panel:nth-of-type(2)'); - - pfeAccordion.toggle(1); - - assert.isTrue(secondHeader.expanded); - assert.isTrue(secondPanel.expanded); - assert.equal('true', secondHeader.getAttribute('aria-expanded')); - assert.isTrue(secondPanel.hasAttribute('expanded')); - - pfeAccordion.toggle(1); - - assert.isNotTrue(secondHeader.expanded); - assert.isNotTrue(secondPanel.expanded); - assert.equal('false', secondHeader.getAttribute('aria-expanded')); - assert.isNotTrue(secondPanel.hasAttribute('expanded')); - }); - - test('it should expand a panel when expand is called', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const secondHeader = pfeAccordion.querySelector('pfe-accordion-header:nth-of-type(2)'); - const secondPanel = pfeAccordion.querySelector('pfe-accordion-panel:nth-of-type(2)'); - - pfeAccordion.expand(1); - pfeAccordion.collapse(1); - - assert.isNotTrue(secondHeader.expanded); - assert.isNotTrue(secondPanel.expanded); - assert.equal('false', secondHeader.getAttribute('aria-expanded')); - assert.isNotTrue(secondPanel.hasAttribute('expanded')); - }); - - test('it should collapse a panel when collapse is called', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const secondHeader = pfeAccordion.querySelector('pfe-accordion-header:nth-of-type(2)'); - const secondPanel = pfeAccordion.querySelector('pfe-accordion-panel:nth-of-type(2)'); - - pfeAccordion.expand(1); - - - assert.isTrue(secondHeader.expanded); - assert.isTrue(secondPanel.expanded); - assert.equal('true', secondHeader.getAttribute('aria-expanded')); - assert.isTrue(secondPanel.hasAttribute('expanded')); - - pfeAccordion.collapseAll(); - }); - - test('it should expand all panels when expandAll is called', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const headers = [...pfeAccordion.querySelectorAll('pfe-accordion-header')]; - const panels = [...pfeAccordion.querySelectorAll('pfe-accordion-panel')]; - - pfeAccordion.expandAll(); - - headers.forEach(header => { - assert.isTrue(header.expanded); - assert.isTrue(header.hasAttribute('aria-expanded')); - }); - - panels.forEach(panel => { - assert.isTrue(panel.expanded); - assert.isTrue(panel.hasAttribute('expanded')); - }); - - pfeAccordion.collapseAll(); - }); - - test('it should collapse all panels when collapseAll is called', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const headers = [...pfeAccordion.querySelectorAll('pfe-accordion-header')]; - const panels = [...pfeAccordion.querySelectorAll('pfe-accordion-panel')]; - - pfeAccordion.expandAll(); - pfeAccordion.collapseAll(); - - headers.forEach(header => { - assert.isNotTrue(header.expanded); - assert.equal('false', header.getAttribute('aria-expanded')); - }); - - panels.forEach(panel => { - assert.isNotTrue(panel.expanded); - assert.isNotTrue(panel.hasAttribute('expanded')); - }); - }); - - test('it should fire a pfe-accordion-change event when a header is clicked', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const header = pfeAccordion.querySelector('pfe-accordion-header'); - const handlerSpy = sinon.spy(); - - document.addEventListener('pfe-accordion:change', handlerSpy); - - header.click(); - - const [event] = handlerSpy.getCall(0).args; - - sinon.assert.calledOnce(handlerSpy); - assert.isTrue(event.detail.expanded); - - // reset - document.removeEventListener('pfe-accordion:change', handlerSpy); - header.click(); - }); - - test.skip('it should add a warning in the console if a pfe-accordion-header lightdom is not a heading level tag', () => { - const spy = sinon.spy(console, 'warn'); - - document.body.innerHTML += ` - - - Bad Header - - - Lorem ipsum dolor sit amet, consectetur adipisicing 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. - - `; - - sinon.assert.calledWith(spy, '[pfe-accordion-header#bad-header-element]", "The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)'); - // We need to restore the session spy session to prevent infinite loop issue introduced in this PR - // https://github.com/patternfly/patternfly-elements/pull/1475 - spy.restore(); - }); - - test("it should not render as a disclosure if the pfe-disclosure attribute is set to false and there is only one header", done => { - const pfeAccordion = document.querySelector("#dont-disclosure-me"); - const header = pfeAccordion.querySelector("pfe-accordion-header"); - const panel = pfeAccordion.querySelector("pfe-accordion-panel"); - - flush(() => { - assert.equal(header.getAttribute("disclosure"), "false"); - assert.equal(panel.getAttribute("disclosure"), "false"); - done(); - }); - }); - - test('it should properly initialize any dynamically added headers and panels', done => { - const pfeAccordion = document.querySelector('#dynamic'); - const documentFragment = document.createDocumentFragment(); - - const newHeader = document.createElement("pfe-accordion-header"); - newHeader.id = "newHeader"; - newHeader.innerHTML = `

New Header

`; - - const newPanel = document.createElement("pfe-accordion-panel"); - newPanel.id = "newPanel"; - newPanel.innerHTML = `New Panel`; - - documentFragment.appendChild(newHeader); - documentFragment.appendChild(newPanel); - - pfeAccordion.appendChild(documentFragment); - - flush(() => { - const newHeaderElement = document.querySelector("#newHeader"); - const newPanelElement = document.querySelector("#newPanel"); - - assert.isTrue(newHeaderElement.hasAttribute("aria-controls")); - assert.equal(newHeaderElement.getAttribute("aria-controls"), newPanelElement.id); - - assert.equal(newPanelElement.getAttribute("role"), "region"); - assert.isTrue(newPanelElement.hasAttribute("aria-labelledby")); - assert.equal(newPanelElement.getAttribute("aria-labelledby"), newHeaderElement.id); - - done(); - }); - }); -}); \ No newline at end of file diff --git a/elements/pfe-accordion/test/old-test/pfe-accordion_vue_test.html b/elements/pfe-accordion/test/old-test/pfe-accordion_vue_test.html deleted file mode 100644 index 64dd18b852..0000000000 --- a/elements/pfe-accordion/test/old-test/pfe-accordion_vue_test.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - - - - - -
- - - - diff --git a/elements/pfe-accordion/test/pfe-accordion.spec.js b/elements/pfe-accordion/test/pfe-accordion.spec.js new file mode 100644 index 0000000000..4a80de75fc --- /dev/null +++ b/elements/pfe-accordion/test/pfe-accordion.spec.js @@ -0,0 +1,406 @@ +// Import testing helpers. For more information check out: +// https://open-wc.org/docs/testing/helpers/ +import { assert, elementUpdated, oneEvent } from '@open-wc/testing/index-no-side-effects.js'; +import { spy, assert as sinonAssert } from 'sinon'; + +// Import our custom fixture wrapper. This allows us to run tests +// in React and Vue as well as a normal fixture. +import { createFixture } from '../../../test/utils/create-fixture.js'; + +// Import the element we're testing. +import '../dist/pfe-accordion'; + +// One element, defined here, is used +// in multiple tests. It's torn down and recreated each time. +const testElement = ` + + +

Consetetur sadipscing elitr?

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

+ + +

Labore et dolore magna aliquyam erat?

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

+ + +

Incididunt in Lorem voluptate eiusmod dolor?

+ + +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

+ + + `; + +describe("", () => { + it('should upgrade pfe-accordion', async () => { + const pfeAccordion = await createFixture(testElement); + assert.instanceOf(pfeAccordion, customElements.get("pfe-accordion"), 'pfe-accordion should be an instance of PfeAccordion'); + }); + + it('should expand a panel when a header is selected', async () => { + const pfeAccordion = await createFixture(testElement); + const header = pfeAccordion.querySelector("pfe-accordion-header"); + const panel = pfeAccordion.querySelector("pfe-accordion-panel"); + + header.click(); + + assert.isTrue(header.button.getAttribute('aria-expanded') == "true"); + assert.equal(true, header.expanded); + assert.isTrue(panel.hasAttribute('expanded')); + assert.isTrue(panel.expanded); + }); + + it('should collapse a panel when an already expanded header is selected', async () => { + const pfeAccordion = await createFixture(testElement); + const header = pfeAccordion.querySelector("pfe-accordion-header"); + const panel = pfeAccordion.querySelector("pfe-accordion-panel"); + + // expand the first panel + header.click(); + + // close it + header.click(); + + assert.isTrue(header.button.getAttribute('aria-expanded') == "false"); + assert.equal(false, header.expanded); + assert.isFalse(panel.hasAttribute('expanded')); + assert.isFalse(panel.expanded); + }); + + it('should randomly generate ids for aria use', async () => { + const pfeAccordion = await createFixture(testElement); + const header = pfeAccordion.querySelector("pfe-accordion-header:nth-of-type(2)"); + const panel = pfeAccordion.querySelector("pfe-accordion-panel:nth-of-type(2)"); + + assert.match(header.id, /pfe-/); + assert.match(panel.id, /pfe-/); + }); + + it('should use the ids that are provided instead of generating new ones', async () => { + const pfeAccordion = await createFixture(testElement); + const header = pfeAccordion.querySelector("pfe-accordion-header"); + const panel = pfeAccordion.querySelector("pfe-accordion-panel"); + + assert.equal(header.id, "header1"); + assert.equal(panel.id, "panel1"); + }); + + /* API TESTS */ + it('should toggle a panel when toggle is called', async () => { + const pfeAccordion = await createFixture(testElement); + const secondHeader = pfeAccordion.querySelector("pfe-accordion-header:nth-of-type(2)"); + const secondPanel = pfeAccordion.querySelector("pfe-accordion-panel:nth-of-type(2)"); + + pfeAccordion.toggle(1); + + assert.isTrue(secondHeader.button.getAttribute('aria-expanded') == "true"); + assert.equal(true, secondHeader.expanded); + assert.isTrue(secondPanel.hasAttribute('expanded')); + assert.isTrue(secondPanel.expanded); + + pfeAccordion.toggle(1); + + assert.isTrue(secondHeader.button.getAttribute('aria-expanded') == "false"); + assert.equal(false, secondHeader.expanded); + assert.isFalse(secondPanel.hasAttribute('expanded')); + assert.isFalse(secondPanel.expanded); + }); + + it('should expand a panel when expand is called', async () => { + const pfeAccordion = await createFixture(testElement); + const secondHeader = pfeAccordion.querySelector('pfe-accordion-header:nth-of-type(2)'); + const secondPanel = pfeAccordion.querySelector('pfe-accordion-panel:nth-of-type(2)'); + + pfeAccordion.expand(1); + + assert.isTrue(secondHeader.button.getAttribute('aria-expanded') == "true"); + assert.equal(true, secondHeader.expanded); + assert.isTrue(secondPanel.hasAttribute('expanded')); + assert.isTrue(secondPanel.expanded); + }); + + it('should collapse a panel when collapse is called', async () => { + const pfeAccordion = await createFixture(testElement); + const secondHeader = pfeAccordion.querySelector('pfe-accordion-header:nth-of-type(2)'); + const secondPanel = pfeAccordion.querySelector('pfe-accordion-panel:nth-of-type(2)'); + + pfeAccordion.expand(1); + pfeAccordion.collapse(1); + + assert.isTrue(secondHeader.button.getAttribute('aria-expanded') == "false"); + assert.equal(false, secondHeader.expanded); + assert.isFalse(secondPanel.hasAttribute('expanded')); + assert.isFalse(secondPanel.expanded); + }); + + it('should expand all panels when expandAll is called', async () => { + const pfeAccordion = await createFixture(testElement); + const headers = [...pfeAccordion.querySelectorAll('pfe-accordion-header')]; + const panels = [...pfeAccordion.querySelectorAll('pfe-accordion-panel')]; + + pfeAccordion.expandAll(); + + headers.forEach(header => { + assert.isTrue(header.button.getAttribute('aria-expanded') == "true"); + assert.equal(true, header.expanded); + }); + + panels.forEach(panel => { + assert.isTrue(panel.hasAttribute('expanded')); + assert.isTrue(panel.expanded); + }); + }); + + it('should collapse all panels when collapseAll is called', async () => { + const pfeAccordion = await createFixture(testElement); + const headers = [...pfeAccordion.querySelectorAll('pfe-accordion-header')]; + const panels = [...pfeAccordion.querySelectorAll('pfe-accordion-panel')]; + + pfeAccordion.expandAll(); + pfeAccordion.collapseAll(); + + headers.forEach(header => { + assert.isTrue(header.button.getAttribute('aria-expanded') == "false"); + assert.equal(false, header.expanded); + }); + + panels.forEach(panel => { + assert.isFalse(panel.hasAttribute('expanded')); + assert.isFalse(panel.expanded); + }); + }); + + /* EVENT TESTS */ + it('should fire a pfe-accordion:change event when a header is clicked', async () => { + const pfeAccordion = await createFixture(testElement); + const header = pfeAccordion.querySelector('pfe-accordion-header'); + // const panel = pfeAccordion.querySelector('pfe-accordion-panel'); + + setTimeout(() => header.click(), 100); + + const { detail } = await oneEvent(pfeAccordion, "pfe-accordion:change"); + + assert.deepEqual(detail, { + expanded: true, + // toggle: header, + // panel: panel + }); + }); + + /* CONSOLE VALIDATION */ + it('should add a warning in the console if a pfe-accordion-header lightdom is not a heading level tag', async () => { + const spyWarn = spy(console, 'warn'); + const pfeAccordion = await createFixture(` + + + Bad Header + + + Lorem ipsum dolor sit amet, consectetur adipisicing 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. + + `); + + sinonAssert.calledWith(spyWarn, "[pfe-accordion-header#bad-header-element]", "Header should contain at least 1 heading tag for correct semantics."); + }); + + /* ATTRIBUTE TESTS */ + it('should open the items listed in the expanded-index attribute', async () => { + const pfeAccordion = await createFixture(testElement); + const headers = pfeAccordion._allHeaders(); + pfeAccordion.setAttribute("expanded-index", "2,3"); + + // Wait until the animation is complete + await oneEvent(pfeAccordion, "transitionend"); + + [2,3].forEach(idx => { + const header = headers[idx - 1]; + assert.isTrue(header.expanded); + assert.isTrue(header.hasAttribute("expanded")); + + const panel = pfeAccordion._panelForHeader(header); + assert.isTrue(panel.expanded); + assert.isTrue(panel.hasAttribute("expanded")); + }); + }); + + /* DISCLOSURE TESTS */ + it('should render as disclosure if there is only one header in an accordion', async () => { + const pfeAccordion = await createFixture(` + + +

Header

+ + + Panel + + `); + + const headers = [...pfeAccordion.querySelectorAll('pfe-accordion-header')]; + const panels = [...pfeAccordion.querySelectorAll('pfe-accordion-panel')]; + + assert.equal(headers.length, 1); + assert.equal(panels.length, 1); + + await elementUpdated(pfeAccordion); + + assert.equal(headers[0].getAttribute('disclosure'), 'true'); + assert.equal(panels[0].getAttribute('disclosure'), 'true'); + }); + + it("should not render as a disclosure if the disclosure attribute is set to false and there is only one header", async () => { + const pfeAccordion = await createFixture(` + + +

Header

+ + + Panel + + `); + + const header = pfeAccordion.querySelector("pfe-accordion-header"); + const panel = pfeAccordion.querySelector("pfe-accordion-panel"); + + await elementUpdated(pfeAccordion); + + assert.equal(header.getAttribute("disclosure"), "false"); + assert.equal(panel.getAttribute("disclosure"), "false"); + }); + + it("should switch from an accordion to a disclosure if the disclosure attribute switches from false to true", async () => { + const pfeAccordion = await createFixture(testElement); + pfeAccordion.setAttribute("disclosure", "false"); + + const header = pfeAccordion.querySelector("pfe-accordion-header"); + const panel = pfeAccordion.querySelector("pfe-accordion-panel"); + + pfeAccordion.setAttribute("disclosure", "true"); + + await elementUpdated(pfeAccordion); + + assert.equal(header.getAttribute("disclosure"), "true"); + assert.equal(panel.getAttribute("disclosure"), "true"); + }); + + it("should switch to a disclosure if an accordion loses children and only one header is left", async () => { + const pfeAccordion = await createFixture(testElement); + + const elementsToRemove = [...pfeAccordion.querySelectorAll("pfe-accordion-header:not(:first-of-type), pfe-accordion-panel:not(:first-of-type)")]; + elementsToRemove.forEach(element => pfeAccordion.removeChild(element)); + + await elementUpdated(pfeAccordion); + + const header = pfeAccordion.querySelector("pfe-accordion-header"); + const panel = pfeAccordion.querySelector("pfe-accordion-panel"); + + assert.equal(pfeAccordion.getAttribute("disclosure"), "true"); + assert.equal(header.getAttribute("disclosure"), "true"); + assert.equal(panel.getAttribute("disclosure"), "true"); + }); + + it("should switch to an accordion from a disclosure if the accordion gains more than one header", async () => { + const pfeAccordion = await createFixture(` + + +

Header

+ + Panel + `); + const fragment = document.createDocumentFragment(); + + assert.equal(pfeAccordion.getAttribute("disclosure"), "true"); + + const newHeader = document.createElement("pfe-accordion-header"); + newHeader.innerHTML = `

New Header

`; + + const newPanel = document.createElement("pfe-accordion-panel"); + newPanel.innerHTML = `New Panel`; + + fragment.appendChild(newHeader); + fragment.appendChild(newPanel); + + pfeAccordion.appendChild(fragment); + + await elementUpdated(pfeAccordion); + + assert.isTrue(pfeAccordion.getAttribute("disclosure") == "false"); + }); + + it('should properly initialize any dynamically added headers and panels', async () => { + const pfeAccordion = await createFixture(testElement); + const documentFragment = document.createDocumentFragment(); + + const newHeader = document.createElement("pfe-accordion-header"); + newHeader.id = "newHeader"; + newHeader.innerHTML = `

New Header

`; + + const newPanel = document.createElement("pfe-accordion-panel"); + newPanel.id = "newPanel"; + newPanel.innerHTML = `New Panel`; + + documentFragment.appendChild(newHeader); + documentFragment.appendChild(newPanel); + + pfeAccordion.appendChild(documentFragment); + + await elementUpdated(pfeAccordion); + + const newHeaderElement = document.querySelector("#newHeader"); + const newPanelElement = document.querySelector("#newPanel"); + + assert.isTrue(newHeaderElement.hasAttribute("id")); + assert.equal(newHeaderElement.getAttribute("aria-controls"), newPanelElement.getAttribute("id")); + + assert.equal(newPanelElement.getAttribute("role"), "region"); + assert.isTrue(newPanelElement.hasAttribute("id")); + assert.equal(newPanelElement.getAttribute("aria-labelledby"), newHeaderElement.getAttribute("id")); + }); + + // @TODO: Write the following tests + + // Validate that the is-navigation attribute triggers spacebar events to open the accordion + // Validate that the is-navigation attribute turns off the up/down arrow functionality + // Validate that the is-direct-link attribute on an accordion header acts like a link on click + // Validate that the is-direct-link attribute throws a warning if it doesn't contain a link + // -> pfe-accordion-header: This component expects to find a link in the light DOM due to the "is-direct-link" attribute +}); + +describe("", () => { + it('should upgrade pfe-accordion-header', async () => { + const pfeAccordion = await createFixture(testElement); + const header = pfeAccordion.querySelector("pfe-accordion-header"); + assert.instanceOf(header, customElements.get("pfe-accordion-header"), 'pfe-accordion-header should be an instance of PfeAccordionHeader'); + }); + + it('should add the proper attributes to the headers', async () => { + const pfeAccordion = await createFixture(testElement); + const header = pfeAccordion.querySelector("pfe-accordion-header"); + const panel = pfeAccordion.querySelector("pfe-accordion-panel"); + + assert.isTrue(header.hasAttribute('aria-controls')); + assert.equal(header.id, panel.getAttribute('aria-labelledby')); + }); +}); + +describe("", () => { + it('should upgrade pfe-accordion-panel', async () => { + const pfeAccordion = await createFixture(testElement); + const panel = pfeAccordion.querySelector("pfe-accordion-panel"); + + assert.instanceOf(panel, customElements.get("pfe-accordion-panel"), 'pfe-accordion-panel should be an instance of PfeAccordionPanel'); + }); + + it('should add the proper attributes to the panels', async () => { + const pfeAccordion = await createFixture(testElement); + const header = pfeAccordion.querySelector("pfe-accordion-header"); + const panel = pfeAccordion.querySelector("pfe-accordion-panel"); + + assert.isTrue(panel.hasAttribute('aria-labelledby')); + assert.equal(panel.getAttribute('role'), 'region'); + assert.equal(panel.id, header.getAttribute('aria-controls')); + }); +}); diff --git a/elements/pfe-accordion/test/pfe-accordion_e2e.js b/elements/pfe-accordion/test/pfe-accordion_e2e.js deleted file mode 100644 index 32d908f112..0000000000 --- a/elements/pfe-accordion/test/pfe-accordion_e2e.js +++ /dev/null @@ -1,46 +0,0 @@ -const element = require("../package.json").pfelement.elementName; -let windowSize; - -describe(element, () => { - before(() => { - // Capture window size - windowSize = browser.getWindowSize(); - - browser.url(`/elements/${element}/demo/index_e2e.html`); - - browser.setWindowSize(1200, 1000); - }); - - after(function() { - browser.setWindowSize(windowSize.width, windowSize.height); - }); - - if (browser.capabilities.browserName !== "IE") { - ["light", "dark", "saturated"].forEach(context => { - it(`should take a screenshot and compare for ${context} context`, () => { - if (context !== "light") { - let color = "darker"; - if (context === "saturated") color = "accent"; - - browser.execute(function (color, element) { - var wrapper = document.querySelector("#wrapper"); - wrapper.className = wrapper.className.replace(/(surface--[a-zA-Z]+)/g, `surface--${color}`); - Promise.all([customElements.whenDefined(element)]).then(function () { - document.querySelectorAll(element).forEach(function (accordion) { - accordion.resetContext(); - }); - }); - }, color, element); - } - - browser.saveFullPageScreen(`${element}--${context}`, {}); - expect(browser.checkFullPageScreen(`${element}--${context}`, {})).toBeLessThan(2.7); - }); - }); - } else { - it(`should take a screenshot and compare`, () => { - browser.saveFullPageScreen(element, {}); - expect(browser.checkFullPageScreen(element, {})).toBeLessThan(2.7); - }); - } -}); \ No newline at end of file diff --git a/elements/pfe-accordion/test/pfe-accordion_react_test.html b/elements/pfe-accordion/test/pfe-accordion_react_test.html deleted file mode 100644 index 0fa0cf9a8f..0000000000 --- a/elements/pfe-accordion/test/pfe-accordion_react_test.html +++ /dev/null @@ -1,105 +0,0 @@ - - - - - - - - - - - - - - - - -
- - - - diff --git a/elements/pfe-accordion/test/pfe-accordion_test.html b/elements/pfe-accordion/test/pfe-accordion_test.html deleted file mode 100644 index 27f0fc1a20..0000000000 --- a/elements/pfe-accordion/test/pfe-accordion_test.html +++ /dev/null @@ -1,144 +0,0 @@ - - - - - - - - - - - - - - -

Why do wizards need money if they could just create it?

- - -

There is legislation that decides what you can conjure and what you can not. Because things that you conjure - out of thin air will not last, it is illegal in the wizarding world.

- - -

Why doesn't Harry have a portrait of his parents?

- - -

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or - serve as a general representation of the individual they depict. A portrait of his parents would not be of much - help to Harry.

- - -

Why is Harry considered a half-blood if both of his parents could use magic?

- - -

Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who consider - themselves pure, such as the Malfoy's or other antagonists.

- - -

Is Hogwarts the only wizarding school?

- - -

No! It has been revealed that there are actually 11 long established and prestigious schools around the globe. - These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is certain of it’s - whereabouts), and Ilvermorny, right here in the United States.

- - -

Where do the main characters work as adults?

- - -

Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the joke - shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the Daily - Prophet.

-

Read more about the characters -

- - - - - -

Header

- - - Panel - - - - - -

Header

- - - Panel - - - - - -

Header

- - - Panel - - -

Header

- - - Panel - - - - - -

Header

- - - Panel - - - - - -

Why do wizards need money if they could just create it?

- - -

There is legislation that decides what you can conjure and what you can not. Because things that you conjure - out of thin air will not last, it is illegal in the wizarding world.

- - -

Why doesn't Harry have a portrait of his parents?

- - -

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or - serve as a general representation of the individual they depict. A portrait of his parents would not be of much - help to Harry.

- - -

Why is Harry considered a half-blood if both of his parents could use magic?

- - -

Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who consider - themselves pure, such as the Malfoy's or other antagonists.

- - -

Is Hogwarts the only wizarding school?

- - -

No! It has been revealed that there are actually 11 long established and prestigious schools around the globe. - These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is certain of it’s - whereabouts), and Ilvermorny, right here in the United States.

- - -

Where do the main characters work as adults?

- - -

Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the joke - shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the Daily - Prophet.

-

Read more about the characters -

- - - - - - - diff --git a/elements/pfe-accordion/test/pfe-accordion_test.js b/elements/pfe-accordion/test/pfe-accordion_test.js deleted file mode 100644 index 152eb59cc5..0000000000 --- a/elements/pfe-accordion/test/pfe-accordion_test.js +++ /dev/null @@ -1,336 +0,0 @@ -suite('', () => { - test('it should upgrade pfe-accordion', () => { - assert.instanceOf(document.querySelector('pfe-accordion'), customElements.get("pfe-accordion"), 'pfe-accordion should be an instance of PfeAccordion'); - }); - - test('it should upgrade pfe-accordion-header', () => { - assert.instanceOf(document.querySelector('pfe-accordion-header'), customElements.get("pfe-accordion-header"), 'pfe-accordion-header should be an instance of PfeAccordionHeader'); - }); - - test('it should upgrade pfe-accordion-panel', () => { - assert.instanceOf(document.querySelector('pfe-accordion-panel'), customElements.get("pfe-accordion-panel"), 'pfe-accordion-panel should be an instance of PfeAccordionPanel'); - }); - - test('it should add the proper attributes to the accordion, headers, and panels', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const header = pfeAccordion.querySelector('pfe-accordion-header'); - const panel = pfeAccordion.querySelector('pfe-accordion-panel'); - - assert.isTrue(header.hasAttribute('aria-controls')); - assert.isTrue(panel.hasAttribute('aria-labelledby')); - assert.equal(panel.getAttribute('role'), 'region'); - assert.equal(header.id, panel.getAttribute('aria-labelledby')); - assert.equal(panel.id, header.getAttribute('aria-controls')); - }); - - test('it should expand a panel when a header is selected', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const header = pfeAccordion.querySelector('pfe-accordion-header'); - const panel = pfeAccordion.querySelector('pfe-accordion-panel'); - - header.click(); - - assert.isTrue(header.getAttribute('aria-expanded') == "true"); - assert.equal(true, header.expanded); - assert.isTrue(panel.hasAttribute('expanded')); - assert.isTrue(panel.expanded); - - // reset - header.click(); - }); - - test('it should collapse a panel when an already expanded header is selected', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const header = pfeAccordion.querySelector('pfe-accordion-header'); - const panel = pfeAccordion.querySelector('pfe-accordion-panel'); - - // expand the first panel - header.click(); - - // close it - header.click(); - - assert.isTrue(header.getAttribute('aria-expanded') == "false"); - assert.equal(false, header.expanded); - assert.isFalse(panel.hasAttribute('expanded')); - assert.isFalse(panel.expanded); - }); - - test('it should use the ids that are provided instead of generating new ones', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const firstHeader = pfeAccordion.querySelector('pfe-accordion-header'); - const firstPanel = pfeAccordion.querySelector('pfe-accordion-panel'); - - assert.equal(firstHeader.id, "header1"); - assert.equal(firstPanel.id, "panel1"); - }); - - /* API TESTS */ - test('it should toggle a panel when toggle is called', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const secondHeader = pfeAccordion.querySelector('pfe-accordion-header:nth-of-type(2)'); - const secondPanel = pfeAccordion.querySelector('pfe-accordion-panel:nth-of-type(2)'); - - pfeAccordion.toggle(1); - - assert.isTrue(secondHeader.getAttribute('aria-expanded') == "true"); - assert.equal(true, secondHeader.expanded); - assert.isTrue(secondPanel.hasAttribute('expanded')); - assert.isTrue(secondPanel.expanded); - - pfeAccordion.toggle(1); - - assert.isTrue(secondHeader.getAttribute('aria-expanded') == "false"); - assert.equal(false, secondHeader.expanded); - assert.isFalse(secondPanel.hasAttribute('expanded')); - assert.isFalse(secondPanel.expanded); - }); - - test('it should expand a panel when expand is called', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const secondHeader = pfeAccordion.querySelector('pfe-accordion-header:nth-of-type(2)'); - const secondPanel = pfeAccordion.querySelector('pfe-accordion-panel:nth-of-type(2)'); - - pfeAccordion.expand(1); - pfeAccordion.collapse(1); - - assert.isTrue(secondHeader.getAttribute('aria-expanded') == "false"); - assert.equal(false, secondHeader.expanded); - assert.isFalse(secondPanel.hasAttribute('expanded')); - assert.isFalse(secondPanel.expanded); - }); - - test('it should collapse a panel when collapse is called', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const secondHeader = pfeAccordion.querySelector('pfe-accordion-header:nth-of-type(2)'); - const secondPanel = pfeAccordion.querySelector('pfe-accordion-panel:nth-of-type(2)'); - - pfeAccordion.expand(1); - - - assert.isTrue(secondHeader.getAttribute('aria-expanded') == "true"); - assert.equal(true, secondHeader.expanded); - assert.isTrue(secondPanel.hasAttribute('expanded')); - assert.isTrue(secondPanel.expanded); - - pfeAccordion.collapseAll(); - }); - - test('it should expand all panels when expandAll is called', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const headers = [...pfeAccordion.querySelectorAll('pfe-accordion-header')]; - const panels = [...pfeAccordion.querySelectorAll('pfe-accordion-panel')]; - - pfeAccordion.expandAll(); - - headers.forEach(header => { - assert.isTrue(header.getAttribute('aria-expanded') == "true"); - assert.equal(true, header.expanded); - }); - - panels.forEach(panel => { - assert.isTrue(panel.hasAttribute('expanded')); - assert.isTrue(panel.expanded); - }); - - pfeAccordion.collapseAll(); - }); - - test('it should collapse all panels when collapseAll is called', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const headers = [...pfeAccordion.querySelectorAll('pfe-accordion-header')]; - const panels = [...pfeAccordion.querySelectorAll('pfe-accordion-panel')]; - - pfeAccordion.expandAll(); - pfeAccordion.collapseAll(); - - headers.forEach(header => { - assert.isTrue(header.getAttribute('aria-expanded') == "false"); - assert.equal(false, header.expanded); - }); - - panels.forEach(panel => { - assert.isFalse(panel.hasAttribute('expanded')); - assert.isFalse(panel.expanded); - }); - }); - - /* EVENT TESTS */ - test('it should fire a pfe-accordion-change event when a header is clicked', () => { - const pfeAccordion = document.querySelector('pfe-accordion'); - const header = pfeAccordion.querySelector('pfe-accordion-header'); - const handlerSpy = sinon.spy(); - - document.addEventListener('pfe-accordion:change', handlerSpy); - - header.click(); - - const [event] = handlerSpy.getCall(0).args; - - sinon.assert.calledOnce(handlerSpy); - assert.isTrue(event.detail.expanded); - - // reset - document.removeEventListener('pfe-accordion:change', handlerSpy); - header.click(); - }); - - /* CONSOLE VALIDATION */ - test.skip('it should add a warning in the console if a pfe-accordion-header lightdom is not a heading level tag', () => { - const spy = sinon.spy(console, 'warn'); - - document.body.innerHTML += ` - - - Bad Header - - - Lorem ipsum dolor sit amet, consectetur adipisicing 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. - - `; - - sinon.assert.calledWith(spy, '[pfe-accordion-header#bad-header-element]", "The first child in the light DOM must be a Header level tag (h1, h2, h3, h4, h5, or h6)'); - // We need to restore the session spy session to prevent infinite loop issue introduced in this PR - // https://github.com/patternfly/patternfly-elements/pull/1475 - spy.restore(); - }); - - /* ATTRIBUTE TESTS */ - test('it should open the items listed in the expanded-index attribute', done => { - const pfeAccordion = document.querySelector('#expanded-index'); - - Promise.all([customElements.whenDefined("pfe-accordion")]).then(() => { - const values = pfeAccordion.getAttribute("expanded-index"); - const indexes = values.split(",").map(item => parseInt(item.trim(), 10)); - - // Validate that the expanded-index has 2 values, 2 and 3 - assert.include(indexes, 2); - assert.include(indexes, 3); - - const headers = [...pfeAccordion.querySelectorAll('pfe-accordion-header')]; - const panels = [...pfeAccordion.querySelectorAll('pfe-accordion-panel')]; - - indexes.forEach(function(idx) { - assert.isTrue(headers[idx - 1].hasAttribute("expanded")); - assert.isTrue(panels[idx - 1].hasAttribute("expanded")); - }); - }); - - done(); - }); - - /* DISCLOSURE TESTS */ - test('it should render as disclosure if there is only one header in an accordion', () => { - const pfeAccordion = document.querySelector('#dynamic'); - const headers = [...pfeAccordion.querySelectorAll('pfe-accordion-header')]; - const panels = [...pfeAccordion.querySelectorAll('pfe-accordion-panel')]; - - assert.isTrue(headers.length == 1); - assert.isTrue(panels.length == 1); - - headers.forEach(header => { - assert.equal(header.getAttribute('disclosure'), 'true'); - }); - - panels.forEach(panel => { - assert.equal(panel.getAttribute('disclosure'), 'true'); - }); - }); - - test("it should not render as a disclosure if the disclosure attribute is set to false and there is only one header", done => { - const pfeAccordion = document.querySelector("#dont-disclosure-me"); - const header = pfeAccordion.querySelector("pfe-accordion-header"); - const panel = pfeAccordion.querySelector("pfe-accordion-panel"); - - flush(() => { - assert.equal(header.getAttribute("disclosure"), "false"); - assert.equal(panel.getAttribute("disclosure"), "false"); - done(); - }); - }); - - test("it should switch from an accordion to a disclosure if the disclosure attribute switches from false to true", () => { - const pfeAccordion = document.querySelector("#dont-disclosure-me"); - const header = pfeAccordion.querySelector("pfe-accordion-header"); - const panel = pfeAccordion.querySelector("pfe-accordion-panel"); - - pfeAccordion.setAttribute("disclosure", "true"); - - assert.equal(header.getAttribute("disclosure"), "true"); - assert.equal(panel.getAttribute("disclosure"), "true"); - }); - - test("it should switch to a disclosure if an accordion loses children and only one header is left", done => { - const pfeAccordion = document.querySelector("#should-become-a-disclosure"); - - const elementsToRemove = [...pfeAccordion.querySelectorAll("pfe-accordion-header:not(:first-of-type), pfe-accordion-panel:not(:first-of-type)")]; - elementsToRemove.forEach(element => pfeAccordion.removeChild(element)); - - flush(() => { - const header = pfeAccordion.querySelector("pfe-accordion-header"); - const panel = pfeAccordion.querySelector("pfe-accordion-panel"); - - assert.equal(pfeAccordion.getAttribute("disclosure"), "true"); - assert.equal(header.getAttribute("disclosure"), "true"); - assert.equal(panel.getAttribute("disclosure"), "true"); - done(); - }); - }); - - test("it should switch to an accordion from a disclosure if the accordion gains more than one header", done => { - const pfeAccordion = document.querySelector("#should-switch-to-accordion"); - const fragment = document.createDocumentFragment(); - - assert.equal(pfeAccordion.getAttribute("disclosure"), "true"); - - const newHeader = document.createElement("pfe-accordion-header"); - newHeader.innerHTML = `

New Header

`; - - const newPanel = document.createElement("pfe-accordion-panel"); - newPanel.innerHTML = `New Panel`; - - fragment.appendChild(newHeader); - fragment.appendChild(newPanel); - - pfeAccordion.appendChild(fragment); - - flush(() => { - assert.isTrue(pfeAccordion.getAttribute("disclosure") == "false"); - done(); - }); - }); - - test('it should properly initialize any dynamically added headers and panels', done => { - const pfeAccordion = document.querySelector('#dynamic'); - const documentFragment = document.createDocumentFragment(); - - const newHeader = document.createElement("pfe-accordion-header"); - newHeader.id = "newHeader"; - newHeader.innerHTML = `

New Header

`; - - const newPanel = document.createElement("pfe-accordion-panel"); - newPanel.id = "newPanel"; - newPanel.innerHTML = `New Panel`; - - documentFragment.appendChild(newHeader); - documentFragment.appendChild(newPanel); - - pfeAccordion.appendChild(documentFragment); - - flush(() => { - const newHeaderElement = document.querySelector("#newHeader"); - const newPanelElement = document.querySelector("#newPanel"); - - assert.isTrue(newHeaderElement.hasAttribute("id")); - assert.isTrue(newHeaderElement.hasAttribute("aria-controls")); - assert.equal(newHeaderElement.getAttribute("aria-controls"), newPanelElement.getAttribute("id")); - - assert.equal(newPanelElement.getAttribute("role"), "region"); - assert.isTrue(newPanelElement.hasAttribute("id")); - assert.isTrue(newPanelElement.hasAttribute("aria-labelledby")); - assert.equal(newPanelElement.getAttribute("aria-labelledby"), newHeaderElement.getAttribute("id")); - - done(); - }); - }); -}); \ No newline at end of file diff --git a/elements/pfe-accordion/test/pfe-accordion_vue_test.html b/elements/pfe-accordion/test/pfe-accordion_vue_test.html deleted file mode 100644 index 4bcd33558a..0000000000 --- a/elements/pfe-accordion/test/pfe-accordion_vue_test.html +++ /dev/null @@ -1,103 +0,0 @@ - - - - - - - - - - - - - -
- - - - - diff --git a/elements/pfe-badge/src/pfe-badge.scss b/elements/pfe-badge/src/pfe-badge.scss index 7bca587106..2e99be96ea 100644 --- a/elements/pfe-badge/src/pfe-badge.scss +++ b/elements/pfe-badge/src/pfe-badge.scss @@ -32,6 +32,7 @@ span { min-width: pfe-local(MinWidth); padding-left: pfe-local(PaddingLeft); padding-right: pfe-local(PaddingRight); + vertical-align: middle; } @each $state in (moderate, important, critical, success, info) { diff --git a/elements/pfe-icon/src/pfe-icon.html b/elements/pfe-icon/src/pfe-icon.html index 7b952e66b0..eee52099c8 100644 --- a/elements/pfe-icon/src/pfe-icon.html +++ b/elements/pfe-icon/src/pfe-icon.html @@ -1,7 +1,7 @@
- + diff --git a/elements/pfe-icon/src/pfe-icon.scss b/elements/pfe-icon/src/pfe-icon.scss index d61f78597d..b063591592 100644 --- a/elements/pfe-icon/src/pfe-icon.scss +++ b/elements/pfe-icon/src/pfe-icon.scss @@ -36,9 +36,19 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, ( // Current variable for upd max-width: pfe-local(size, $fallback: $desired-size); max-height: pfe-local(size, $fallback: $desired-size); + @include browser-query(ie11) { + width: $desired-size !important; + height: $desired-size !important; + } + svg { width: pfe-local(size, $fallback: $desired-size); height: pfe-local(size, $fallback: $desired-size); + + @include browser-query(ie11) { + width: $desired-size !important; + height: $desired-size !important; + } } } @@ -50,16 +60,27 @@ $LOCAL-VARIABLES: map-deep-merge($LOCAL-VARIABLES, ( // Current variable for upd // Content-box model supports sizing while preserving aspect ratio (despite layout) box-sizing: content-box !important; + width: fit-content !important; height: fit-content !important; line-height: 0; max-width: pfe-local(size); max-height: pfe-local(size); + + @include browser-query(ie11) { + width: pfe-fetch(size) !important; + height: pfe-fetch(size) !important; + } svg { width: pfe-local(size); height: pfe-local(size); + + @include browser-query(ie11) { + width: pfe-fetch(size) !important; + height: pfe-fetch(size) !important; + } } } diff --git a/elements/pfe-jump-links/src/pfe-jump-links-nav.scss b/elements/pfe-jump-links/src/pfe-jump-links-nav.scss index c5ef85eec6..ef59a29b7a 100644 --- a/elements/pfe-jump-links/src/pfe-jump-links-nav.scss +++ b/elements/pfe-jump-links/src/pfe-jump-links-nav.scss @@ -236,7 +236,7 @@ pfe-accordion-panel[expanded], pfe-accordion-panel.animating { --pfe-accordion--accent: transparent; --pfe-accordion--BorderColor: transparent; - --pfe-accordion--BorderColor--accent: transparent; + --pfe-accordion--accent: transparent; --pfe-accordion--BorderTopWidth: 0; --pfe-accordion--BorderBottomWidth: 0; --pfe-accordion--panel-container--Padding: 0 0 0 calc(var(--pfe-accordion__base--Padding,var(--pfe-theme--container-spacer,1rem)) * 1.5); diff --git a/elements/pfe-sass/mixins/_components.scss b/elements/pfe-sass/mixins/_components.scss index 6dcee5aa5a..14c4e18051 100644 --- a/elements/pfe-sass/mixins/_components.scss +++ b/elements/pfe-sass/mixins/_components.scss @@ -209,8 +209,7 @@ /// Accordion chevrons /// =========================================================================== -@mixin pfe-chevron($state: open, $position: after, $size: .4em, $offset: $size) { - +@mixin pfe-chevron($state: open, $position: after, $size: .4em, $offset: $size, $width: .1em) { content: ""; position: absolute; top: calc(#{pfe-var(container-spacer)} + #{$offset}); @@ -221,9 +220,9 @@ width: $size; transition: transform 0.15s; @if $state == open { - border-width: .1em .1em 0 0; + border-width: $width $width 0 0; border-bottom: 0; - transform: rotate(-45deg); + transform: rotate(135deg); top: calc(#{pfe-var(container-spacer)} + #{$offset}); @if $position == before { left: calc(#{pfe-var(container-spacer)} * 1.3125); // 21px @@ -235,8 +234,8 @@ } } @else { - border-width: 0 .1em .1em 0; - transform: rotate(45deg); + border-width: 0 $width $width 0; + transform: rotate(-45deg); @if $position == before { left: calc(#{pfe-var(container-spacer)} * 1.3125); transform: rotate(-45deg); diff --git a/elements/pfe-sass/mixins/_containers.scss b/elements/pfe-sass/mixins/_containers.scss index 45688f278a..b8fb82bc00 100644 --- a/elements/pfe-sass/mixins/_containers.scss +++ b/elements/pfe-sass/mixins/_containers.scss @@ -25,47 +25,95 @@ } } +// Note: This works best with the padding set on the container and the container nested +// below the application of the collapsible mixin @mixin pfe-collapsible($state: closed) { + @if $state != closed { - display: block; - position: relative; opacity: 1; + height: auto; } @else { - display: none; - overflow: hidden; + display: block; + position: relative; + transition: height pfe-var(animation-speed) pfe-var(animation-timing); will-change: height; - border-color: transparent; - opacity: 0; + overflow-y: clip; + height: 0; } } /// Custom focus ring -@mixin focus-ring() { +@mixin focus-ring( + $offset: 0, + $pseudo: after, + $color: pfe-var(link) +) { outline: none; + position: relative; - &::after { + // Focus uses a pseudo-element because it needs to overflow the container, outline also does not support border-radius settings + &::#{$pseudo} { position: absolute; content: ""; - top: 0; - left: 0; - width: calc(100% - #{pfe-var(surface--border-width--heavy)}); - height: calc(100% - #{pfe-var(surface--border-width--heavy)}); - border-radius: pfe-var(surface--border-radius); - border: 2px pfe-var(surface--border-style) pfe-var(link); + top: $offset; + left: $offset; + width: calc(100% + #{pfe-var(ui--border-width--active)}); + height: calc(100% + #{pfe-var(ui--border-width--active)}); + border-radius: pfe-var(ui--border-radius); + border: pfe-var(ui--border-width--md) pfe-var(ui--border-style) transparent; + @include browser-query(ie11) { + height: 100%; + } + } + + &:focus::#{$pseudo} { + border-color: $color; + } + + // Remove the focus indicator on mouse-focus for browsers + // that do support :focus-visible + &:focus:not(:focus-visible)::#{$pseudo} { + border: unset; } } /// Accent bar styles -@mixin accent-bar($direction: horizontal) { +@mixin accent-bar( + $direction: horizontal, + $offset: ( + top: 0, + left: 0 + ), + $thickness: pfe-var(surface--border-width--heavy), + $color: transparent +) { + $vertical: ""; + $horizontal: ""; + position: absolute; content: ""; - top: 0; - left: 0; + @each $direction, $size in $offset { + #{$direction}: $size; + @if $direction == "top" or $direction == "bottom" { + @if $vertical != "" { + $vertical: "#{$vertical} - #{$size}"; + } @else { + $vertical: "#{$size}"; + } + } @else { + @if $horizontal != "" { + $horizontal: "#{$horizontal} - #{$size)}"; + } @else { + $horizontal: "#{$size}"; + } + } + } + background-color: $color; @if $direction != horizontal { - width: pfe-var(surface--border-width--heavy); - height: 100%; - } else { - height: pfe-var(surface--border-width--heavy); - width: 100%; + width: calc(#{$thickness} - #{$horizontal}); + height: calc(100% - #{$vertical}); + } @else { + width: calc(100% - #{$vertical}); + height: calc(#{$thickness} - #{$horizontal}); } } diff --git a/test/index.html b/test/index.html index e741e5bc86..30b3579ec1 100644 --- a/test/index.html +++ b/test/index.html @@ -9,7 +9,6 @@