Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: Khan/wonder-blocks
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: @khanacademy/wonder-blocks-pill@3.0.5
Choose a base ref
...
head repository: Khan/wonder-blocks
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref
Loading
Showing with 2,909 additions and 742 deletions.
  1. +122 −0 __docs__/wonder-blocks-cell/detail-cell-variants.stories.tsx
  2. +125 −0 __docs__/wonder-blocks-cell/detail-cell.stories.tsx
  3. +62 −58 __docs__/wonder-blocks-dropdown/multi-select.stories.tsx
  4. +68 −67 __docs__/wonder-blocks-dropdown/single-select.stories.tsx
  5. +50 −2 __docs__/wonder-blocks-form/_overview_.mdx
  6. +0 −34 __docs__/wonder-blocks-form/accessibility.mdx
  7. +1 −1 __docs__/wonder-blocks-form/accessibility.stories.tsx
  8. +73 −1 __docs__/wonder-blocks-form/labeled-text-field.stories.tsx
  9. +12 −11 __docs__/wonder-blocks-form/text-area-variants.stories.tsx
  10. +93 −102 __docs__/wonder-blocks-form/text-area.stories.tsx
  11. +12 −11 __docs__/wonder-blocks-form/text-field-variants.stories.tsx
  12. +146 −359 __docs__/wonder-blocks-form/text-field.stories.tsx
  13. +108 −0 __docs__/wonder-blocks-labeled-field/accessibility.mdx
  14. +56 −0 __docs__/wonder-blocks-labeled-field/labeled-field.argtypes.ts
  15. +627 −0 __docs__/wonder-blocks-labeled-field/labeled-field.stories.tsx
  16. +12 −11 __docs__/wonder-blocks-search-field/search-field-variants.stories.tsx
  17. +31 −33 __docs__/wonder-blocks-search-field/search-field.stories.tsx
  18. +7 −0 packages/wonder-blocks-birthday-picker/CHANGELOG.md
  19. +2 −2 packages/wonder-blocks-birthday-picker/package.json
  20. +7 −0 packages/wonder-blocks-dropdown/CHANGELOG.md
  21. +2 −2 packages/wonder-blocks-dropdown/package.json
  22. +100 −0 packages/wonder-blocks-dropdown/src/components/__tests__/multi-select.test.tsx
  23. +2 −0 packages/wonder-blocks-dropdown/src/components/multi-select.tsx
  24. +7 −0 packages/wonder-blocks-form/CHANGELOG.md
  25. +1 −1 packages/wonder-blocks-form/package.json
  26. +57 −15 packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
  27. +53 −15 packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
  28. +1 −0 packages/wonder-blocks-form/src/components/text-area.tsx
  29. +1 −0 packages/wonder-blocks-form/src/components/text-field.tsx
  30. +6 −8 packages/wonder-blocks-form/src/hooks/use-field-validation.ts
  31. +25 −0 packages/wonder-blocks-labeled-field/CHANGELOG.md
  32. +3 −3 packages/wonder-blocks-labeled-field/package.json
  33. +714 −0 packages/wonder-blocks-labeled-field/src/components/__tests__/labeled-field.test.tsx
  34. +311 −3 packages/wonder-blocks-labeled-field/src/components/labeled-field.tsx
  35. +1 −1 packages/wonder-blocks-labeled-field/src/index.ts
  36. +1 −0 packages/wonder-blocks-labeled-field/tsconfig-build.json
  37. +8 −0 packages/wonder-blocks-search-field/CHANGELOG.md
  38. +2 −2 packages/wonder-blocks-search-field/package.json
122 changes: 122 additions & 0 deletions __docs__/wonder-blocks-cell/detail-cell-variants.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
import * as React from "react";
import {StyleSheet} from "aphrodite";
import type {Meta, StoryObj} from "@storybook/react";

import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
import {spacing} from "@khanacademy/wonder-blocks-tokens";
import {DetailCell} from "@khanacademy/wonder-blocks-cell";
import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
import {LabelSmall} from "@khanacademy/wonder-blocks-typography";

/**
* The following stories are used to generate the pseudo states for the
* DetailCell component. This is only used for visual testing in Chromatic.
*/
export default {
title: "Packages / Cell / DetailCell / All Variants",
parameters: {
docs: {
autodocs: false,
},
backgrounds: {
default: "offWhite",
},
},
} as Meta;

type StoryComponentType = StoryObj<typeof DetailCell>;

const states = [
{
label: "Default",
props: {},
},
{
label: "Disabled",
props: {disabled: true},
},
{
label: "Active",
props: {active: true},
},
];

const defaultProps = {
title: "Title for article item",
subtitle1: "Subtitle 1 for article item",
subtitle2: "Subtitle 2 for article item",
leftAccessory: (
<PhosphorIcon icon={IconMappings.playCircle} size="medium" />
),
rightAccessory: <PhosphorIcon icon={IconMappings.caretRight} />,
};

const States = (props: {label: string} & PropsFor<typeof DetailCell>) => {
return (
<View>
<View style={[styles.scenarios]}>
{states.map((scenario) => {
return (
<View style={styles.scenario} key={scenario.label}>
<LabelSmall>
{props.label} ({scenario.label})
</LabelSmall>
<DetailCell {...props} {...scenario.props} />
</View>
);
})}
</View>
</View>
);
};

const AllVariants = () => (
<View style={{gap: spacing.large_24}}>
<States label="Default" {...defaultProps} />
<States label="Clickable" {...defaultProps} onClick={() => {}} />
<States label="Link" {...defaultProps} href="/" />
</View>
);

export const Default: StoryComponentType = {
render: AllVariants,
};

export const Hover: StoryComponentType = {
render: AllVariants,
parameters: {pseudo: {hover: true}},
};

export const Focus: StoryComponentType = {
render: AllVariants,
parameters: {pseudo: {focusVisible: true}},
};

export const HoverFocus: StoryComponentType = {
name: "Hover + Focus",
render: AllVariants,
parameters: {pseudo: {hover: true, focusVisible: true}},
};

export const Active: StoryComponentType = {
render: AllVariants,
parameters: {pseudo: {active: true}},
};

const styles = StyleSheet.create({
statesContainer: {
padding: spacing.medium_16,
},
scenarios: {
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: spacing.xxxLarge_64,
flexWrap: "wrap",
},
scenario: {
gap: spacing.small_12,
overflow: "hidden",
},
});
125 changes: 125 additions & 0 deletions __docs__/wonder-blocks-cell/detail-cell.stories.tsx
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@ import packageConfig from "../../packages/wonder-blocks-cell/package.json";
import ComponentInfo from "../components/component-info";
import DetailCellArgTypes from "./detail-cell.argtypes";
import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
import {LabelSmall} from "@khanacademy/wonder-blocks-typography";

export default {
title: "Packages / Cell / DetailCell",
@@ -344,6 +345,130 @@ export const DetailCellsAsListItems: StoryComponentType = {
},
};

export const Scenarios = () => {
const longText =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ";
const longTextWithNoWordBreak =
"Loremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua";

const defaultProps = {
title: "Title for article item",
subtitle1: "Subtitle 1 for article item",
subtitle2: "Subtitle 2 for article item",
leftAccessory: (
<PhosphorIcon icon={IconMappings.playCircle} size="medium" />
),
rightAccessory: <PhosphorIcon icon={IconMappings.caretRight} />,
};

const scenarios = [
{
label: "Default",
props: defaultProps,
},
{
label: "No Icons",
props: {
...defaultProps,
leftAccessory: undefined,
rightAccessory: undefined,
},
},
{
label: "Left Icon Only",
props: {
...defaultProps,
rightAccessory: undefined,
},
},
{
label: "Right Icon Only",
props: {
...defaultProps,
leftAccessory: undefined,
},
},
{
label: "No Subtitles",
props: {
...defaultProps,
subtitle1: undefined,
subtitle2: undefined,
},
},
{
label: "Subtitle 1 only",
props: {
...defaultProps,
subtitle2: undefined,
},
},
{
label: "Subtitle 2 only",
props: {
...defaultProps,
subtitle1: undefined,
},
},
{
label: "Title only",
props: {
title: defaultProps.title,
},
},
{
label: "Long Text",
props: {
...defaultProps,
title: longText,
subtitle1: longText,
subtitle2: longText,
},
},
{
label: "Long Text No Word Break",
props: {
...defaultProps,
title: longTextWithNoWordBreak,
subtitle1: longTextWithNoWordBreak,
subtitle2: longTextWithNoWordBreak,
},
},
{
label: "Long Text (no icons)",
props: {
...defaultProps,
title: longText,
subtitle1: longText,
subtitle2: longText,
leftAccessory: undefined,
rightAccessory: undefined,
},
},
{
label: "Long Text No Word Break (no icons)",
props: {
...defaultProps,
title: longTextWithNoWordBreak,
subtitle1: longTextWithNoWordBreak,
subtitle2: longTextWithNoWordBreak,
leftAccessory: undefined,
rightAccessory: undefined,
},
},
];
return (
<View style={{gap: spacing.large_24}}>
{scenarios.map((scenario) => (
<>
<LabelSmall>{scenario.label}</LabelSmall>
<DetailCell {...scenario.props} />
</>
))}
</View>
);
};

const styles = StyleSheet.create({
example: {
backgroundColor: color.offWhite,
Loading