Open accordion when media is print (#1363)

* Adjust CSS so rule isn't overwritten

* test chromatic media print

* add story for check media print

* update testing settings

packages/storybook/stories/va-accordion-uswds.stories.jsx

@@ -351,4 +351,33 @@ Internationalization.args = {
 export const ManyAccordions = ManyItemsTemplate.bind(null);
 ManyAccordions.args = {
   ...defaultArgs,
-};
+};
+
+
+const PrintTemplate = args => (
+  <va-accordion {...args}>
+    <va-accordion-item id="first" header="First Item">
+        <p>
+          This story is for the Design System Team to be able to test the 
+          accordion items being opened when the page they're on is being printed.
+        </p>
+    </va-accordion-item>
+    <va-accordion-item id="second" header="Second Item">
+        <p>
+          Accordion items will always open when being printed.
+        </p>
+    </va-accordion-item>
+  </va-accordion>
+);
+
+// todo: after upgrading to storybook 8 we can hide this story from the sidebar: https://storybook.js.org/docs/writing-stories/tags
+export const PrintAccordion = PrintTemplate.bind(null);
+PrintAccordion.args = {
+  ...defaultArgs,
+};
+PrintAccordion.parameters = { 
+  chromatic: {
+    media: 'print'
+  },
+
+}

packages/web-components/src/components/va-accordion/va-accordion-item.scss

@@ -64,15 +64,15 @@ button {
   max-width: 64ex;
 }
 
+:host(:not([open])) #content,
+:host([open='false']) #content {
+  display: none;
+}
+
 /* overrides hidden attribute on #content */
 @media print {
   :host(:not([open])) #content,
   :host([open='false']) #content {
     display: block;
   }
-}
-
-:host(:not([open])) #content,
-:host([open='false']) #content {
-  display: none;
-}
+}

packages/web-components/stencil.config.ts

@@ -54,6 +54,7 @@ export const config: Config = {
     }
   ],
   testing: {
+    browserArgs: ['--no-sandbox', '--disable-setuid-sandbox'],
     moduleNameMapper: {
       '^.+.(svg)$': 'jest-transformer-svg',
     },