Merge branch 'main' into add-prefill-pattern-components

department-of-veterans-affairs · Oct 22, 2024 · ded3688 · ded3688
2 parents f71a2d2 + d86b902
commit ded3688
Show file tree

Hide file tree

Showing 27 changed files with 374 additions and 177 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -34,4 +34,4 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           onlyChanged: true
           workingDir: packages/storybook
-          skip: "dependabot/**"
+          skip: 'dependabot/**'
diff --git a/README.md b/README.md
@@ -5,8 +5,8 @@
 
 This is a monorepo containing two main packages:
 
-- `react-components`
 - `web-components`
+- `react-components`
 
 The `core` package is for bundling the two main packages into one for publishing. The `storybook` package is for the combined story files from each `*-components` package.
 The `design-system-dashboard-cli` package is used to gather metrics on design system usage.
@@ -78,36 +78,37 @@ Releases will occur no less often than at the beginning of each sprint (every ot
 # Running Build via Storybook
 
 1. `cd packages/web-components/`
-    1. `yarn install`
-    2. `yarn build`
-    3. `yarn build-bindings` (build React bindings)
-    4. `yarn watch:stencil` (optional)
+   1. `yarn install`
+   2. `yarn build`
+   3. `yarn build-bindings` (build React bindings)
+   4. `yarn watch:stencil` (optional)
 2. `cd ../react-components/`
-    1. `yarn install`
-    2. `yarn build`
+   1. `yarn install`
+   2. `yarn build`
 3. `cd ../core/`
-    1. `yarn install`
-    2. `yarn build`
+   1. `yarn install`
+   2. `yarn build`
 4. `cd ../storybook/`
-    1. `yarn install`
-    2. `yarn storybook`
+   1. `yarn install`
+   2. `yarn storybook`
 
 This will allow you to run Storybook locally to view all components
 
 # Stencil Dev Server for Testing IE11
 
 1. Update `stencil.config.ts` line 16 to `buildEs5: true,`
-    1. [More information on buildEs5 in Stencil](https://stenciljs.com/docs/config#buildes5)
-    2. Stencil Dev Server is run in `dev` mode
+   1. [More information on buildEs5 in Stencil](https://stenciljs.com/docs/config#buildes5)
+   2. Stencil Dev Server is run in `dev` mode
 2. Within `component-library/packages/web-components/src/index.html` Web Components can be added inside of the `<body>` tag for testing
-    1. Example:
-
-    ```
-    <body>
-        <va-progress-bar label="Add a label here" percent={35}></va-progress-bar>
-        <va-segmented-progress-bar current={2} total={6}></va-segmented-progress-bar>
-    </body>
-    ```
+
+   1. Example:
+
+   ```
+   <body>
+       <va-progress-bar label="Add a label here" percent={35}></va-progress-bar>
+       <va-segmented-progress-bar current={2} total={6}></va-segmented-progress-bar>
+   </body>
+   ```
 
 3. Run `yarn serve` inside `packages/web-components/` to start the Stencil Dev Server
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@department-of-veterans-affairs/component-library",
   "description": "VA.gov component library. Includes React and web components.",
-  "version": "47.0.0",
+  "version": "47.1.0",
   "license": "MIT",
   "scripts": {
     "build": "webpack"

diff --git a/packages/css-library/dist/stylesheets/utilities.css b/packages/css-library/dist/stylesheets/utilities.css
diff --git a/packages/css-library/dist/tokens/css/variables.css b/packages/css-library/dist/tokens/css/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 01 Oct 2024 21:23:29 GMT
+ * Generated on Fri, 04 Oct 2024 19:27:10 GMT
  */
 
 :root {

diff --git a/packages/css-library/dist/tokens/scss/variables.scss b/packages/css-library/dist/tokens/scss/variables.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 01 Oct 2024 21:23:29 GMT
+// Generated on Fri, 04 Oct 2024 19:27:10 GMT
 
 $xsmall-screen: 320px;
 $small-screen: 481px;

diff --git a/packages/css-library/package.json b/packages/css-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/css-library",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "description": "Department of Veterans Affairs stylesheets, tokens, and utilities",
   "packageManager": "[email protected]",
   "files": [

diff --git a/packages/css-library/src/tokens/margin.scss b/packages/css-library/src/tokens/margin.scss
@@ -42,6 +42,6 @@ $tokens-margin-x: map-collect(
   $tokens-margin,
   $tokens-negative-margin,
   (
-    auto: -1px,
+    auto: auto,
   )
 );
diff --git a/packages/css-library/src/utilities/font.scss b/packages/css-library/src/utilities/font.scss
@@ -4,7 +4,7 @@
 
 $u-font-family: (
   font-family: (
-    base: 'vads-u-font-',
+    base: 'vads-u-font-family-',
     modifiers: null,
     values: map-collect($tokens-font-family),
     settings: $font-settings,

diff --git a/packages/storybook/stories/va-accordion-uswds.stories.jsx b/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'
+  },
+
+}
diff --git a/packages/storybook/stories/va-file-input-uswds.stories.jsx b/packages/storybook/stories/va-file-input-uswds.stories.jsx
@@ -16,6 +16,14 @@ export default {
       page: () => <StoryDocs storyDefault={Default} data={fileInputDocs} />,
     },
   },
+  argTypes: {
+    // hide the uploadMessage prop from the properties table in storybook
+    uploadMessage: {
+      table: {
+        disable: true
+      }
+    }
+  }
 };
 
 const defaultArgs = {