Merge announcer-pt1 into announcer-combobox

.changeset/config.json

@@ -1,7 +1,7 @@
 {
-  "$schema": "https://unpkg.com/@changesets/config@1.6.2/schema.json",
+  "$schema": "https://unpkg.com/@changesets/config@2/schema.json",
   "changelog": "@changesets/cli/changelog",
-  "commit": false,
+  "commit": ["@changesets/cli/commit", { "skipCI": false }],
   "linked": [],
   "access": "public",
   "baseBranch": "main",
@@ -10,4 +10,4 @@
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "updateInternalDependents": "always"
   }
-}
+}

.storybook/components/component-info.tsx → __docs__/components/component-info.tsx

@@ -1,31 +1,26 @@
 import * as React from "react";
 
+import githubLogo from "@phosphor-icons/core/fill/github-logo-fill.svg";
 import Button from "@khanacademy/wonder-blocks-button";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {Caption} from "@khanacademy/wonder-blocks-typography";
-import githubLogo from "@phosphor-icons/core/fill/github-logo-fill.svg";
 
 type Props = {
     /**
      * The package name.
      */
-    name: string,
+    name: string;
     /**
      * The latest stable version.
      */
-    version: string
+    version: string;
 };
 
 /**
  * An internal component that displays the package name and version. It also
  * includes a link to the Github repo.
  */
-const ComponentInfo: React.FC<Props> = (
-    {
-        name,
-        version,
-    },
-): React.ReactElement => {
+function ComponentInfo({name, version}: Props): React.ReactElement {
     const packageFolder = name.split("/")?.[1];
     return (
         <View
@@ -50,6 +45,6 @@ const ComponentInfo: React.FC<Props> = (
             </Button>
         </View>
     );
-};
+}
 
 export default ComponentInfo;

.storybook/components/token-table.tsx → __docs__/components/token-table.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {addStyle, View} from "@khanacademy/wonder-blocks-core";
-import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {addStyle} from "@khanacademy/wonder-blocks-core";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 const StyledTable = addStyle("table");

__docs__/wonder-blocks-accordion/accordion-section.stories.tsx

@@ -12,7 +12,7 @@ import {Strut} from "@khanacademy/wonder-blocks-layout";
 import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {HeadingSmall, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-accordion/package.json";
 
 import AccordionSectionArgtypes from "./accordion-section.argtypes";

__docs__/wonder-blocks-accordion/accordion.stories.tsx

@@ -17,7 +17,7 @@ import {
     SingleSelect,
 } from "@khanacademy/wonder-blocks-dropdown";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-accordion/package.json";
 
 import AccordionArgtypes from "./accordion.argtypes";

__docs__/wonder-blocks-banner/banner.stories.tsx

@@ -12,7 +12,7 @@ import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import Banner from "@khanacademy/wonder-blocks-banner";
 
 import BannerArgTypes from "./banner.argtypes";
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-banner/package.json";
 import crownIcon from "../wonder-blocks-icon/icons/crown.svg";
 

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

@@ -6,7 +6,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import packageConfig from "../../packages/wonder-blocks-birthday-picker/package.json";
 import BirthdayPicker from "@khanacademy/wonder-blocks-birthday-picker";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 import ArgTypes from "./birthday-picker.argtypes";
 

__docs__/wonder-blocks-breadcrumbs/breadcrumbs.stories.tsx

@@ -8,7 +8,7 @@ import {
     BreadcrumbsItem,
 } from "@khanacademy/wonder-blocks-breadcrumbs";
 import packageConfig from "../../packages/wonder-blocks-breadcrumbs/package.json";
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 import BreadcrumbsArgTypes from "./breadcrumbs.argtypes";
 

__docs__/wonder-blocks-button/button.stories.tsx

@@ -22,7 +22,7 @@ import {
 
 import Button from "@khanacademy/wonder-blocks-button";
 import packageConfig from "../../packages/wonder-blocks-button/package.json";
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 import ButtonArgTypes from "./button.argtypes";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";

__docs__/wonder-blocks-cell/compact-cell.stories.tsx

@@ -10,7 +10,7 @@ import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import packageConfig from "../../packages/wonder-blocks-cell/package.json";
 import {CompactCell} from "@khanacademy/wonder-blocks-cell";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import CompactCellArgTypes, {AccessoryMappings} from "./compact-cell.argtypes";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 

__docs__/wonder-blocks-cell/detail-cell.stories.tsx

@@ -10,7 +10,7 @@ import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {DetailCell} from "@khanacademy/wonder-blocks-cell";
 import packageConfig from "../../packages/wonder-blocks-cell/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import DetailCellArgTypes from "./detail-cell.argtypes";
 import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 

__docs__/wonder-blocks-clickable/clickable-behavior.stories.tsx

@@ -8,7 +8,7 @@ import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 import packageConfig from "../../packages/wonder-blocks-clickable/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import argTypes from "./clickable-behavior.argtypes";
 
 const ClickableBehavior = getClickableBehavior();

__docs__/wonder-blocks-clickable/clickable.stories.tsx

@@ -10,7 +10,7 @@ import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import Clickable from "@khanacademy/wonder-blocks-clickable";
 import packageConfig from "../../packages/wonder-blocks-clickable/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 import argTypes from "./clickable.argtypes";
 import Button from "@khanacademy/wonder-blocks-button";
 

__docs__/wonder-blocks-core/id.mdx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import {Meta, Story, Canvas} from "@storybook/blocks";
+import * as IdStories from "./id.stories";
+
+<Meta of={IdStories} />
+
+# Id
+
+`Id` is a component that provides an identifier to its children.
+
+It is useful for situations where the `useId` hook cannot be easily used,
+such as in class-based components.
+
+If an `id` prop is provided, that is passed through to the children;
+otherwise, a unique identifier is generated.
+
+## Usage
+
+```tsx
+import {Id} from "@khanacademy/wonder-blocks-core";
+
+<Id id={maybeId}>{(id) => <div id={id}>Hello, world!</div>}</Id>;
+```
+
+## Examples
+
+### 1. Generating an id
+
+An identifier will always be generated if an `id` prop is not provided, or the
+provided `id` property is falsy.
+
+<Canvas withSource="open" of={IdStories.GeneratedIdExample} />
+
+### 2. Passthrough an id
+
+If an `id` prop is provided and it is truthy, that value will be passed through
+to the children.
+
+<Canvas sourceState="shown" of={IdStories.PassedThroughIdExample} />

__docs__/wonder-blocks-core/id.stories.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+
+import {Meta} from "@storybook/react";
+import {View, Id} from "@khanacademy/wonder-blocks-core";
+import {Body, BodyMonospace} from "@khanacademy/wonder-blocks-typography";
+import {Strut} from "@khanacademy/wonder-blocks-layout";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
+
+export default {
+    title: "Packages / Core / Id",
+
+    parameters: {
+        chromatic: {
+            // We don't need a snapshot for this.
+            disableSnapshot: true,
+        },
+    },
+} as Meta;
+
+export const GeneratedIdExample = () => (
+    <View>
+        <Id>
+            {(id) => (
+                <View style={{flexDirection: "row"}}>
+                    <Body>Generated identifier: </Body>
+                    <Strut size={spacing.xSmall_8} />
+                    <BodyMonospace>{id}</BodyMonospace>
+                </View>
+            )}
+        </Id>
+    </View>
+);
+
+export const PassedThroughIdExample = () => (
+    <View>
+        <Id id="my-identifier">
+            {(id) => (
+                <View style={{flexDirection: "row"}}>
+                    <Body>Passed through identifier: </Body>
+                    <Strut size={spacing.xSmall_8} />
+                    <BodyMonospace>{id}</BodyMonospace>
+                </View>
+            )}
+        </Id>
+    </View>
+);

__docs__/wonder-blocks-core/initial-fallback.stories.tsx

@@ -5,7 +5,7 @@ import {Body} from "@khanacademy/wonder-blocks-typography";
 import {View, InitialFallback} from "@khanacademy/wonder-blocks-core";
 import packageConfig from "../../packages/wonder-blocks-core/package.json";
 
-import ComponentInfo from "../../.storybook/components/component-info";
+import ComponentInfo from "../components/component-info";
 
 type StoryComponentType = StoryObj<typeof InitialFallback>;