Create v6 HelpBox with Styled System

UpgradeGuide.md

@@ -9,6 +9,8 @@
   - Check your sizes, standalone props have been replaced by the `size` prop, such as `size=medium` instead of `medium`.
 - `Checkbox`
   - The old `theme` prop functionality has been replaced by the [global theme object](https://faithlife.github.io/styled-ui/#/theme) and Styled System props.
+- `HelpBox`
+  - The old `theme` prop functionality has been replaced by the [global theme object](https://faithlife.github.io/styled-ui/#/theme) and Styled System props.
 - `Modal`
   - Subcomponents have been renamed, `ModalContent` has been replaced by `Modal.Content`, etc.
 - `Radio`

catalog/help-box/documentation-v6.md

@@ -0,0 +1,11 @@
+For the next major version of Styled UI, the HelpBox component has been rebuilt to use Styled System's theme and variant APIs.
+
+You can opt in to the new API now by importing `{ HelpBox } from '@faithlife/styled-ui/v6'`. When v6 is released, the `/v6` entrypoint will continue to be supported with a deprecation warning until v7 is released.
+
+This documentation is automatically generated from jsdoc comments.
+
+```react
+noSource: true
+---
+<DocgenTable component={HelpBox} />
+```

catalog/help-box/variations-v6.md

@@ -0,0 +1,63 @@
+For the next major version of Styled UI, the HelpBox component has been rebuilt to use Styled System's theme and variant APIs.
+
+You can opt in to the new API now by importing `{ HelpBox } from '@faithlife/styled-ui/v6'`. When v6 is released, the `/v6` entrypoint will continue to be supported with a deprecation warning until v7 is released.
+
+## Colors and Their Meaning
+
+```react
+showSource: true
+---
+<Stack spacing={3}>
+	<HelpBox variant="primary" handleClose={() => true}>
+		<HelpBox.Body>This is a helpful alert.</HelpBox.Body>
+		<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer>
+	</HelpBox>
+	<HelpBox variant="danger" handleClose={() => true}>
+		<HelpBox.Body>This is an error alert.</HelpBox.Body>
+		<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer>
+	</HelpBox>
+	<HelpBox variant="success" handleClose={() => true}>
+		<HelpBox.Body>This is a successful alert.</HelpBox.Body>
+		<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer>
+	</HelpBox>
+	<HelpBox variant="warning" handleClose={() => true}>
+		<HelpBox.Body>This is a cautious alert.</HelpBox.Body>
+		<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer>
+	</HelpBox>
+	<HelpBox variant="minor" handleClose={() => true}>
+		<HelpBox.Body>This is a minor alert.</HelpBox.Body>
+		<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer>
+	</HelpBox>
+</Stack>
+```
+
+## Variations
+
+```react
+showSource: true
+---
+<Stack spacing={3}>
+	<HelpBox showLightBulb handleClose={() => true}>This is an alert with a light bulb.</HelpBox>
+	<HelpBox hideIcon handleClose={() => true}>This alert has its icon hidden.</HelpBox>
+	<HelpBox showRightIcon>This alert is showing its icon on both sides.</HelpBox>
+	<HelpBox stacked handleClose={() => true}>
+		<HelpBox.Body>This alert's contents are stacked.</HelpBox.Body>
+		<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer>
+	</HelpBox>
+	<HelpBox>
+		<HelpBox.Body>This alert doesn't handle closing.</HelpBox.Body>
+		<HelpBox.Footer><Button variant="primary" size="small">CTA</Button></HelpBox.Footer>
+	</HelpBox>
+</Stack>
+```
+
+## Large Alerts
+
+```react
+showSource: true
+---
+<Stack spacing={3}>
+	<HelpBox large handleClose={() => true}>This is a large alert.</HelpBox>
+	<HelpBox showLightBulb large handleClose={() => true}>This is a large alert with a light bulb.</HelpBox>
+</Stack>
+```

catalog/index.js

@@ -72,6 +72,7 @@ import {
 	SegmentedButtonGroup,
 	Checkbox as V6Checkbox,
 	Dropdown as V6Dropdown,
+	HelpBox as V6HelpBox,
 	Modal as V6Modal,
 	Radio as V6Radio,
 	SimpleToast as V6SimpleToast,
@@ -586,6 +587,22 @@ const pages = [
 				content: pageLoader(() => import('./help-box/documentation.md')),
 				imports: { HelpBox, DocgenTable },
 			},
+			{
+				path: '/help-box/variations-v6',
+				title: 'v6 Help Box Variations',
+				content: pageLoader(() => import('./help-box/variations-v6.md')),
+				imports: {
+					HelpBox: V6HelpBox,
+					Button: V6Button,
+					Stack,
+				},
+			},
+			{
+				path: '/help-box/documentation-v6',
+				title: 'v6 Help Box Documentation',
+				content: pageLoader(() => import('./help-box/documentation-v6.md')),
+				imports: { HelpBox: V6HelpBox, DocgenTable },
+			},
 		],
 	},
 	textInputPages,

components/help-box/component.jsx

@@ -6,8 +6,9 @@ import {
 	CorrectCircle as CircleCheck,
 	WarningCircle as Info,
 } from '../icons/12px';
-import { applyVariations } from '../utils';
 import * as Styled from './styled';
+import { getVariation } from '../utils';
+import { DefaultThemeProvider } from '../DefaultThemeProvider';
 
 /** Rectangular box containing tips on how to use our products */
 export function HelpBox({
@@ -16,65 +17,61 @@ export function HelpBox({
 	hideIcon,
 	showRightIcon,
 	stacked,
-	className,
-	theme,
 	handleClose,
+	variant,
+	primary,
+	success,
+	danger,
+	warning,
+	minor,
 	...helpBoxProps
 }) {
-	const { component: HelpBoxVariation, filteredProps } = applyVariations(
-		Styled.HelpBox,
-		Styled.variationMap,
-		helpBoxProps,
-	);
+	const selectedVariant =
+		getVariation(variant, { primary, success, danger, warning, minor }) ?? undefined;
 
 	return (
-		<HelpBoxVariation
-			className={className}
-			theme={theme}
-			success={helpBoxProps.success}
-			danger={helpBoxProps.danger}
-			warning={helpBoxProps.warning}
-			minor={helpBoxProps.minor}
-			stacked={stacked}
-			hasIcon={(!hideIcon && !helpBoxProps.minor) || showLightBulb}
-			{...filteredProps}
-		>
-			{(showLightBulb && <Styled.BulbIcon />) ||
-				(!hideIcon && (
-					<Styled.IconDiv>
-						{helpBoxProps.danger ? (
-							<Exclamation />
-						) : helpBoxProps.success ? (
-							<CircleCheck />
-						) : helpBoxProps.minor ? null : (
-							<Info />
-						)}
-					</Styled.IconDiv>
-				))}
-			<Styled.HelpBoxContent>{children}</Styled.HelpBoxContent>
-			{(handleClose && (
-				<Styled.CloseButton onClick={handleClose}>
-					<Close />
-				</Styled.CloseButton>
-			)) ||
-				(showRightIcon && (
-					<Styled.RightIconDiv>
-						{helpBoxProps.danger ? (
-							<Exclamation />
-						) : helpBoxProps.success ? (
-							<CircleCheck />
-						) : helpBoxProps.minor ? null : (
-							<Info />
-						)}
-					</Styled.RightIconDiv>
-				))}
-		</HelpBoxVariation>
+		<DefaultThemeProvider>
+			<Styled.HelpBox
+				variant={selectedVariant}
+				stacked={stacked}
+				hasIcon={(!hideIcon && !(selectedVariant === 'minor')) || showLightBulb}
+				{...helpBoxProps}
+			>
+				{(showLightBulb && <Styled.BulbIcon />) ||
+					(!hideIcon && (
+						<Styled.IconDiv>
+							{selectedVariant === 'danger' ? (
+								<Exclamation />
+							) : selectedVariant === 'success' ? (
+								<CircleCheck />
+							) : selectedVariant === 'minor' ? null : (
+								<Info />
+							)}
+						</Styled.IconDiv>
+					))}
+				<Styled.HelpBoxContent>{children}</Styled.HelpBoxContent>
+				{(handleClose && (
+					<Styled.CloseButton onClick={handleClose}>
+						<Close />
+					</Styled.CloseButton>
+				)) ||
+					(showRightIcon && (
+						<Styled.RightIconDiv>
+							{selectedVariant === 'danger' ? (
+								<Exclamation />
+							) : selectedVariant === 'success' ? (
+								<CircleCheck />
+							) : selectedVariant === 'minor' ? null : (
+								<Info />
+							)}
+						</Styled.RightIconDiv>
+					))}
+			</Styled.HelpBox>
+		</DefaultThemeProvider>
 	);
 }
 
 HelpBox.propTypes = {
-	/** See the docs for how to override styles properly.  */
-	className: PropTypes.string,
 	children: PropTypes.node.isRequired,
 	/** The light bulb will override the other icon. */
 	showLightBulb: PropTypes.bool,
@@ -84,22 +81,19 @@ HelpBox.propTypes = {
 	showRightIcon: PropTypes.bool,
 	/** Stacking will happen automatically on small viewports. */
 	stacked: PropTypes.bool,
-	/** Blue theme is the default.
-	 * The icons are colored by foregroundColor. */
-	theme: PropTypes.shape({
-		foregroundColor: PropTypes.string,
-		backgroundColor: PropTypes.string,
-		closeIconColor: PropTypes.string,
-	}),
-	/** Green theme */
+	/** Specifies the color variant (defaults to `primary`). */
+	variant: PropTypes.oneOf(['primary', 'success', 'danger', 'warning', 'minor']),
+	/** Shortcut for setting `variant` to `primary` (the blue theme). */
+	primary: PropTypes.bool,
+	/** Shortcut for setting `variant` to `success` (the green theme). */
 	success: PropTypes.bool,
-	/** Red theme */
+	/** Shortcut for setting `variant` to `danger` (the red theme). */
 	danger: PropTypes.bool,
-	/** Yellow theme */
+	/** Shortcut for setting `variant` to `warning` (the yellow theme). */
 	warning: PropTypes.bool,
-	/** Gray theme */
+	/** Shortcut for setting `variant` to `minor` (the gray theme). */
 	minor: PropTypes.bool,
-	/** Height will be 230px */
+	/** Sets height to `230px`. */
 	large: PropTypes.bool,
 	/** If not handled, there will be no close icon. */
 	handleClose: PropTypes.func,

components/help-box/index.js

@@ -1 +1,2 @@
+export { HelpBox as LegacyHelpBox } from './legacy-component';
 export { HelpBox } from './component';

components/help-box/legacy-component.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+	X as Close,
+	ErrorCircle as Exclamation,
+	CorrectCircle as CircleCheck,
+	WarningCircle as Info,
+} from '../icons/12px';
+import { applyVariations } from '../utils';
+import * as Styled from './legacy-styled';
+
+/** Rectangular box containing tips on how to use our products */
+export function HelpBox({
+	children,
+	showLightBulb,
+	hideIcon,
+	showRightIcon,
+	stacked,
+	className,
+	theme,
+	handleClose,
+	...helpBoxProps
+}) {
+	const { component: HelpBoxVariation, filteredProps } = applyVariations(
+		Styled.HelpBox,
+		Styled.variationMap,
+		helpBoxProps,
+	);
+
+	return (
+		<HelpBoxVariation
+			className={className}
+			theme={theme}
+			success={helpBoxProps.success}
+			danger={helpBoxProps.danger}
+			warning={helpBoxProps.warning}
+			minor={helpBoxProps.minor}
+			stacked={stacked}
+			hasIcon={(!hideIcon && !helpBoxProps.minor) || showLightBulb}
+			{...filteredProps}
+		>
+			{(showLightBulb && <Styled.BulbIcon />) ||
+				(!hideIcon && (
+					<Styled.IconDiv>
+						{helpBoxProps.danger ? (
+							<Exclamation />
+						) : helpBoxProps.success ? (
+							<CircleCheck />
+						) : helpBoxProps.minor ? null : (
+							<Info />
+						)}
+					</Styled.IconDiv>
+				))}
+			<Styled.HelpBoxContent>{children}</Styled.HelpBoxContent>
+			{(handleClose && (
+				<Styled.CloseButton onClick={handleClose}>
+					<Close />
+				</Styled.CloseButton>
+			)) ||
+				(showRightIcon && (
+					<Styled.RightIconDiv>
+						{helpBoxProps.danger ? (
+							<Exclamation />
+						) : helpBoxProps.success ? (
+							<CircleCheck />
+						) : helpBoxProps.minor ? null : (
+							<Info />
+						)}
+					</Styled.RightIconDiv>
+				))}
+		</HelpBoxVariation>
+	);
+}
+
+HelpBox.propTypes = {
+	/** See the docs for how to override styles properly.  */
+	className: PropTypes.string,
+	children: PropTypes.node.isRequired,
+	/** The light bulb will override the other icon. */
+	showLightBulb: PropTypes.bool,
+	/** Hides the left icon. */
+	hideIcon: PropTypes.bool,
+	/** This icon will not show if closing is handled. */
+	showRightIcon: PropTypes.bool,
+	/** Stacking will happen automatically on small viewports. */
+	stacked: PropTypes.bool,
+	/** Blue theme is the default.
+	 * The icons are colored by foregroundColor. */
+	theme: PropTypes.shape({
+		foregroundColor: PropTypes.string,
+		backgroundColor: PropTypes.string,
+		closeIconColor: PropTypes.string,
+	}),
+	/** Green theme */
+	success: PropTypes.bool,
+	/** Red theme */
+	danger: PropTypes.bool,
+	/** Yellow theme */
+	warning: PropTypes.bool,
+	/** Gray theme */
+	minor: PropTypes.bool,
+	/** Height will be 230px */
+	large: PropTypes.bool,
+	/** If not handled, there will be no close icon. */
+	handleClose: PropTypes.func,
+};
+
+HelpBox.Body = Styled.HelpBoxBody;
+
+HelpBox.Footer = Styled.HelpBoxFooter;