diff --git a/.github/workflows/formatting.yml b/.github/workflows/formatting.yml
new file mode 100644
index 0000000..01a25c3
--- /dev/null
+++ b/.github/workflows/formatting.yml
@@ -0,0 +1,18 @@
+name: Code formatting
+on: push
+jobs:
+ test:
+ timeout-minutes: 60
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v4
+ - uses: actions/setup-node@v4
+ with:
+ node-version: "18.x"
+ cache: "npm"
+ - name: Install dependencies
+ run: npm ci
+ - name: Run prettier JavaScript
+ run: "npm run prettier:js"
+ - name: Run prettier Markdown
+ run: "npm run prettier:md"
diff --git a/.github/workflows/ui-test.yml b/.github/workflows/ui-test.yml
index 4d13648..6884967 100644
--- a/.github/workflows/ui-test.yml
+++ b/.github/workflows/ui-test.yml
@@ -8,7 +8,8 @@ jobs:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
- node-version: '18.x'
+ node-version: "18.x"
+ cache: "npm"
- name: Install dependencies
run: npm ci
- name: Install playwright
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..ec6d3cd
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+package.json
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/.storybook/UswdsTheme.js b/.storybook/UswdsTheme.js
index 5bd0741..4b14274 100644
--- a/.storybook/UswdsTheme.js
+++ b/.storybook/UswdsTheme.js
@@ -1,10 +1,11 @@
-import { create } from '@storybook/theming/create';
+import { create } from "@storybook/theming/create";
export default create({
- base: 'light',
+ base: "light",
brandTitle: "USWDS Next",
- fontBase: '"Public Sans Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
- colorPrimary: '#4a77b4',
- colorSecondary: '#2672de',
- textColor: '#1b1b1b',
+ fontBase:
+ '"Public Sans Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+ colorPrimary: "#4a77b4",
+ colorSecondary: "#2672de",
+ textColor: "#1b1b1b",
});
diff --git a/.storybook/main.js b/.storybook/main.js
index fd14bcb..a1df4fd 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -8,7 +8,7 @@ const config = {
"@storybook/addon-links",
"@storybook/addon-essentials",
"@chromatic-com/storybook",
- "@storybook/addon-a11y"
+ "@storybook/addon-a11y",
],
framework: {
name: "@storybook/web-components-vite",
diff --git a/README.md b/README.md
index f203983..308791e 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,11 @@
# USWDS.next (aka Screaming Eagle 🦅)
> [!CAUTION]
-> Work on the next version of the Design System will happen in this repo. At the moment, any code in here is exploratory only, and in an extremely pre-alpha stage. APIs *will* change.
+> Work on the next version of the Design System will happen in this repo. At the moment, any code in here is exploratory only, and in an extremely pre-alpha stage. APIs _will_ change.
+Over the course of the next several months (and beyond), we will incrementally build the next version of the Design System. This version will introduce [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)-based implementations of Design System elements. We intend that, as we ship new components and new versions of existing components, you will be able to use them alongside older versions of USWDS.
-Over the course of the next several months (and beyond), we will incrementally build the next version of the Design System. This version will introduce [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)-based implmentations of Design System elements. We intend that, as we ship new components and new versions of existing components, you will be able to use them alongside older versions of USWDS.
-
-* [More on our decision to use Web Components](https://github.com/uswds/uswds-proposals/blob/main/decisions/0001-use-web-components.md)
+- [More on our decision to use Web Components](https://github.com/uswds/uswds-proposals/blob/main/decisions/0001-use-web-components.md)
## Guiding Principles
diff --git a/package.json b/package.json
index 85d1411..c59eda0 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
"dev": "vite",
"prettier:js": "npx prettier --check './src/components/**/*.js'",
"prettier:js:fix": "npx prettier --write './src/components/**/*.js'",
+ "prettier:md": "npx prettier --check '**/*.{md,mdx}'",
+ "prettier:md:fix": "npx prettier --write '**/*.{md,mdx}'",
"start": "npm run storybook",
"storybook:build": "storybook build",
"storybook": "storybook dev -p 8008",
diff --git a/storybook/readme.mdx b/storybook/readme.mdx
index c1f79e7..1704701 100644
--- a/storybook/readme.mdx
+++ b/storybook/readme.mdx
@@ -3,4 +3,4 @@ import Readme from "../README.md?raw";
-{ Readme }
+{Readme}
diff --git a/storybook/welcome.mdx b/storybook/welcome.mdx
index 2877d57..6338c3e 100644
--- a/storybook/welcome.mdx
+++ b/storybook/welcome.mdx
@@ -34,9 +34,9 @@ npm run start
title="Base"
subtitle="Grayscale colors"
colors={{
- White: '#FFFFFF',
- "Longer custom text": '#F3F3F3',
- Black: "#000"
+ White: "#FFFFFF",
+ "Longer custom text": "#F3F3F3",
+ Black: "#000",
}}
/>
@@ -47,13 +47,14 @@ npm run start
export const typography = {
type: {
- primary: 'Public Sans Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol',
+ primary:
+ "Public Sans Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
},
weight: {
- regular: '400',
- bold: '700',
- extrabold: '800',
- black: '900',
+ regular: "400",
+ bold: "700",
+ extrabold: "800",
+ black: "900",
},
size: {
xs1: 13,
@@ -68,7 +69,8 @@ export const typography = {
},
};
-export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+export const SampleText =
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
**Font:** Public Sans Web