From a218ed730fb3a791e59f9ec3ee2104ba83476786 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 9 Sep 2021 16:12:57 +0200
Subject: [PATCH 1/2] ItemGroup: add "complex layouts" story

---
 .../src/item-group/stories/index.js           | 92 ++++++++++++++++++-
 1 file changed, 90 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/item-group/stories/index.js b/packages/components/src/item-group/stories/index.js
index 7e3ee2746d2751..429480b902bf18 100644
--- 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 */

From 10d56360cf544815472fae29c75ec8751fbc3207 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Mon, 13 Sep 2021 16:27:07 +0200
Subject: [PATCH 2/2] Change color sswatch border to 20% of 000000

---
 packages/components/src/item-group/stories/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/item-group/stories/index.js b/packages/components/src/item-group/stories/index.js
index 429480b902bf18..30fb1a02150aac 100644
--- a/packages/components/src/item-group/stories/index.js
+++ b/packages/components/src/item-group/stories/index.js
@@ -111,7 +111,7 @@ export const SimpleColorSwatch = ( { color, style } ) => (
 		style={ {
 			...style,
 			borderRadius: '50%',
-			border: '1px solid #ddd',
+			border: '1px solid rgba(0, 0, 0, 0.2)',
 			width: '24px',
 			height: '24px',
 			backgroundColor: color,