Merge branch 'main' into feature/labeled-field

.github/workflows/node-ci-lint.yml

@@ -0,0 +1,73 @@
+# This reusable workflow is executed to run linting checks for the project
+name: Run lint for the project
+
+on:
+  workflow_call:
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [20.x]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install & cache node_modules
+        uses: Khan/actions@shared-node-cache-v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Get All Changed Files
+        uses: Khan/actions@get-changed-files-v2
+        id: changed
+
+      - id: js-ts-files
+        name: Find .js, .ts changed files
+        uses: Khan/actions@filter-files-v1
+        with:
+          changed-files: ${{ steps.changed.outputs.files }}
+          extensions: '.js,.jsx,.ts,.tsx'
+
+      - id: eslint-reset
+        uses: Khan/actions@filter-files-v1
+        name: Files that would trigger a full eslint run
+        with:
+          changed-files: ${{ steps.changed.outputs.files }}
+          files: '.eslintrc.js,yarn.lock,.eslintignore'
+
+      - id: typecheck-reset
+        uses: Khan/actions@filter-files-v1
+        name: Files that would trigger a typecheck run
+        with:
+          changed-files: ${{ steps.changed.outputs.files }}
+          files: '.yarn.lock'
+
+      # Linting / type checking
+      - name: Eslint
+        uses: Khan/actions@full-or-limited-v0
+        with:
+          full-trigger: ${{ steps.eslint-reset.outputs.filtered }}
+          full: yarn lint:ci .
+          limited-trigger: ${{ steps.js-ts-files.outputs.filtered }}
+          limited: yarn lint:ci {}
+
+      - name: Typecheck
+        if: always() # always run this check until we update the eslint config
+        # if: steps.js-ts-files.outputs.filtered != '[]' || steps.typecheck-reset.outputs.filtered != '[]'
+        run: yarn typecheck
+
+      - name: Build .js bundles
+        run: yarn build
+
+      - name: Build .d.ts types
+        run: yarn build:types
+
+      - name: Check package.json files
+        run: node utils/publish/pre-publish-check-ci.js

.github/workflows/node-ci-pr.yml

@@ -65,99 +65,14 @@ jobs:
   lint:
     name: Lint
     needs: prime_cache_primary
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        node-version: [20.x]
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: Install & cache node_modules
-        uses: Khan/actions@shared-node-cache-v2
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: Get All Changed Files
-        uses: Khan/actions@get-changed-files-v2
-        id: changed
-
-      - id: js-ts-files
-        name: Find .js, .ts changed files
-        uses: Khan/actions@filter-files-v1
-        with:
-          changed-files: ${{ steps.changed.outputs.files }}
-          extensions: '.js,.jsx,.ts,.tsx'
-
-      - id: eslint-reset
-        uses: Khan/actions@filter-files-v1
-        name: Files that would trigger a full eslint run
-        with:
-          changed-files: ${{ steps.changed.outputs.files }}
-          files: '.eslintrc.js,yarn.lock,.eslintignore'
-
-      - id: typecheck-reset
-        uses: Khan/actions@filter-files-v1
-        name: Files that would trigger a typecheck run
-        with:
-          changed-files: ${{ steps.changed.outputs.files }}
-          files: '.yarn.lock'
-
-      # Linting / type checking
-      - name: Eslint
-        uses: Khan/actions@full-or-limited-v0
-        with:
-          full-trigger: ${{ steps.eslint-reset.outputs.filtered }}
-          full: yarn lint:ci .
-          limited-trigger: ${{ steps.js-ts-files.outputs.filtered }}
-          limited: yarn lint:ci {}
-
-      - name: Typecheck
-        if: always() # always run this check until we update the eslint config
-        # if: steps.js-ts-files.outputs.filtered != '[]' || steps.typecheck-reset.outputs.filtered != '[]'
-        run: yarn typecheck
-
-      - name: Build .js bundles
-        run: yarn build
-
-      - name: Build .d.ts types
-        run: yarn build:types
-
-      - name: Check package.json files
-        run: node utils/publish/pre-publish-check-ci.js
+    uses: ./.github/workflows/node-ci-lint.yml
 
   test:
     name: Test
     needs: prime_cache_primary
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        node-version: [20.x]
-        shard: ["1/2", "2/2"]
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: Install & cache node_modules
-        uses: Khan/actions@shared-node-cache-v2
-        with:
-          node-version: ${{ matrix.node-version }}
-      # Testing and coverage
-      - name: Run jest tests with coverage
-        run: yarn coverage:ci --shard ${{ matrix.shard }}
-      - name: Upload Coverage
-        uses: codecov/codecov-action@v4
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          files: ./coverage/coverage-final.json
+    uses: ./.github/workflows/node-ci-test.yml
+    secrets:
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
 
   check_builds:
     name: Check build sizes

.github/workflows/node-ci-push.yml

@@ -11,8 +11,9 @@ on:
 #   1. Prime caches for primary configuration (ubuntu on node 14).
 #      This way the next two jobs can run in parallel but rely on this primed
 #      cache.
-#   2. Coverage
-#   3. Chromatic autoApprove on squash commits
+#   2. Lint
+#   3. Test (with coverage)
+#   4. Chromatic autoApprove on squash commits
 #
 # For pushes directly to a branch, we assume a PR has been used with wider
 # checks, this just makes sure our coverage data is up-to-date.
@@ -35,36 +36,14 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
+  lint:
+    name: Lint
+    needs: prime_cache_primary
+    uses: ./.github/workflows/node-ci-lint.yml
 
-  coverage:
-    needs: [prime_cache_primary]
-    name: Gather coverage
-    env:
-      CI: true
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        # Use a matrix as it means we get the version info in the job name
-        # which is very helpful.
-        os: [ubuntu-latest]
-        node-version: [20.x]
-    steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    # Cache and install dependencies
-    - name: Install & cache node_modules
-      uses: Khan/actions@shared-node-cache-v2
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - name: Run Jest with coverage
-      run: yarn coverage:ci
-    - name: Upload Coverage
-      uses: codecov/codecov-action@v4
-      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        files: ./coverage/coverage-final.json
+  test:
+    name: Test
+    needs: prime_cache_primary
+    uses: ./.github/workflows/node-ci-test.yml
+    secrets:
+      CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

.github/workflows/node-ci-test.yml

@@ -0,0 +1,37 @@
+# This reusable workflow is executed to run test checks for the project
+name: Run tests for the project
+
+on:
+  workflow_call:
+    secrets:
+      CODECOV_TOKEN:
+        required: true
+
+jobs:
+  test:
+    name: Test
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [20.x]
+        shard: ["1/2", "2/2"]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install & cache node_modules
+        uses: Khan/actions@shared-node-cache-v2
+        with:
+          node-version: ${{ matrix.node-version }}
+      # Testing and coverage
+      - name: Run jest tests with coverage
+        run: yarn coverage:ci --shard ${{ matrix.shard }}
+      - name: Upload Coverage
+        uses: codecov/codecov-action@v4
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./coverage/coverage-final.json

__docs__/wonder-blocks-birthday-picker/birthday-picker.stories.tsx

@@ -32,6 +32,9 @@ const meta: Meta<typeof BirthdayPicker> = {
                 excludeDecorators: true,
             },
         },
+        viewport: {
+            defaultViewport: "large",
+        },
     },
     decorators: [(Story): React.ReactElement => <View>{Story()}</View>],
 };
@@ -172,3 +175,22 @@ export const BirthdayPickerVerticalWithError: StoryComponentType = {
         },
     },
 };
+
+export const BirthdayPickerMobile: StoryComponentType = {
+    args: {
+        onChange: (date?: string | null) => {
+            // eslint-disable-next-line no-console
+            console.log("Date selected: ", date);
+        },
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "A BirthdayPicker will reflow on small screens to stack controls rather than position them side-by-side.",
+            },
+        },
+        viewport: {
+            defaultViewport: "small",
+        },
+    },
+};

__docs__/wonder-blocks-dropdown/combobox.stories.tsx

@@ -396,3 +396,35 @@ export const AutoCompleteMultiSelect: Story = {
         },
     },
 };
+
+/**
+ * This `Combobox` is in an error state. Selecting any option will clear the
+ * error state by updating the `error` prop to `false`.
+ *
+ * **NOTE:** We internally apply the correct `aria-invalid` attribute based on
+ * the `error` prop.
+ */
+
+export const Error: Story = {
+    render: function Render(args: PropsFor<typeof Combobox>) {
+        const [error, setError] = React.useState(args.error);
+        const [value, setValue] = React.useState(args.value);
+
+        return (
+            <Combobox
+                {...args}
+                error={error}
+                value={value}
+                onChange={(newValue) => {
+                    setValue(newValue);
+                    setError(newValue !== "" ? false : true);
+                    action("onChange")(newValue);
+                }}
+            />
+        );
+    },
+    args: {
+        children: items,
+        error: true,
+    },
+};

__docs__/wonder-blocks-form/checkbox-group.stories.tsx

@@ -26,6 +26,15 @@ export default {
 
 type StoryComponentType = StoryObj<typeof CheckboxGroup>;
 
+/**
+ * `CheckboxGroup` is a component that groups multiple `Choice` components
+ * together. It is used to allow users to select multiple options from a list.
+ *
+ * Note that by using a `label` prop, the `CheckboxGroup` component will render
+ * a `legend` as the first child of the `fieldset` element. This is important to
+ * include as it ensures that Screen Readers can correctly identify and announce
+ * the group of checkboxes.
+ */
 export const Default: StoryComponentType = {
     render: (args) => {
         return (

__docs__/wonder-blocks-form/labeled-text-field.argtypes.ts

@@ -82,8 +82,22 @@ export default {
         },
     },
 
+    name: {
+        description: "Provide a name for the TextField.",
+        table: {
+            type: {
+                summary: "string",
+            },
+        },
+        control: {
+            type: "text",
+        },
+    },
+
     disabled: {
-        description: "Makes a read-only input field that cannot be focused.",
+        description: `Whether the input should be disabled. Defaults to false.
+            If the disabled prop is set to \`true\`, LabeledTextField will have disabled
+            styling and will not be interactable.`,
         table: {
             type: {
                 summary: "boolean",