ItemGroup: add "complex layouts" story

WordPress · Sep 9, 2021 · 9f94495 · 9f94495
1 parent 30744d0
commit 9f94495
Showing 1 changed file with 90 additions and 2 deletions.
diff --git a/packages/components/src/item-group/stories/index.js b/packages/components/src/item-group/stories/index.js
@@ -6,14 +6,22 @@
 import { boolean, select } from '@storybook/addon-knobs';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
+import { typography } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import { ItemGroup, Item } from '..';
-import { Flyout } from '../../flyout';
 import Button from '../../button';
+import { FlexItem, FlexBlock } from '../../flex';
+import { Flyout } from '../../flyout';
+import { HStack } from '../../h-stack';
+import Icon from '../../icon';
+import { Text } from '../../text';
+import { Truncate } from '../../truncate';
+import { ZStack } from '../../z-stack';
 
 export default {
 	component: ItemGroup,
@@ -97,4 +105,84 @@ export const dropdown = () => (
 		</ItemGroup>
 	</Flyout>
 );
+
+export const SimpleColorSwatch = ( { color, style } ) => (
+	<div
+		style={ {
+			...style,
+			borderRadius: '50%',
+			border: '1px solid #ddd',
+			width: '24px',
+			height: '24px',
+			backgroundColor: color,
+		} }
+	/>
+);
+
+export const complexLayouts = () => {
+	const colors = [
+		{
+			color: '#00A19D',
+			id: 'teal',
+		},
+		{
+			color: '#FFF8E5',
+			id: 'cream',
+		},
+		{
+			color: '#FFB344',
+			id: 'yellow',
+		},
+		{
+			color: '#E05D5D',
+			id: 'red',
+		},
+	];
+
+	return (
+		<ItemGroup isBordered isSeparated style={ { width: '250px' } }>
+			<Item isAction onClick={ () => alert( 'Color palette' ) }>
+				<HStack>
+					<FlexBlock>
+						<ZStack isLayered={ false } offset={ -8 }>
+							{ colors.map( ( { color, id } ) => (
+								<SimpleColorSwatch key={ id } color={ color } />
+							) ) }
+						</ZStack>
+					</FlexBlock>
+					<FlexItem as={ Text } variant="muted">
+						23 colors
+					</FlexItem>
+				</HStack>
+			</Item>
+
+			<Item isAction onClick={ () => alert( 'Single color setting' ) }>
+				<HStack justify="flex-start">
+					<FlexItem
+						as={ SimpleColorSwatch }
+						color="#22577A"
+						style={ { flexShrink: 0 } }
+					/>
+					<FlexItem as={ Truncate }>
+						Single color setting with very long description
+					</FlexItem>
+				</HStack>
+			</Item>
+
+			<Item
+				isAction
+				onClick={ () => alert( 'Single typography setting' ) }
+			>
+				<HStack justify="flex-start">
+					<FlexItem>
+						<Icon icon={ typography } size={ 24 } />
+					</FlexItem>
+					<FlexItem as={ Truncate }>
+						Single typography setting
+					</FlexItem>
+				</HStack>
+			</Item>
+		</ItemGroup>
+	);
+};
 /* eslint-enable no-alert */