updated usage tab for setting block

packages/assets/css/src/scss/_components/_setting-block/_elements/_build-body.scss

@@ -16,6 +16,14 @@
 		@include block($block) {
 			@include element(body) {
 				flex: 1;
+				display: flex;
+				flex-direction: column;
+				gap: $spacing-2xl;
+
+				@include media(max-width, sm) {
+					gap: $spacing-lg;
+				}
+
 				p {
 					&:first-child {
 						margin-top: 0;

packages/assets/css/src/scss/_components/_setting-block/_elements/_build-option.scss

@@ -0,0 +1,29 @@
+@use "sass:map";
+
+@use "../../../_utils/utils" as *;
+
+/// Build body content
+///
+/// @type block
+/// @author WPMU DEV
+///
+/// @param {String} $block - Main block name
+@mixin build-option($block) {
+	// DIR: Left to right.
+	// THEME: None.
+	@include sui-class($rtl: false, $theme: null) {
+		// Block wrapper.
+		@include block($block) {
+			@include element(option-title) {
+				font-size: $font-size-default;
+				font-weight: $font-weight-md;
+				margin: 0 0 $spacing-sm 0;
+			}
+
+			@include element(option-description) {
+				font-size: $font-size-default;
+				margin: 0 0 $spacing-md 0;
+			}
+		}
+	}
+}

packages/assets/css/src/scss/_components/_setting-block/_elements/_elements.scss

@@ -2,3 +2,4 @@
 @forward "./build-info";
 @forward "./build-body";
 @forward "./build-header";
+@forward "./build-option";

packages/assets/css/src/scss/_components/_setting-block/_setting-block.scss

@@ -5,6 +5,7 @@
 @include sui-setting-block--element.build-content(setting-block);
 @include sui-setting-block--element.build-info(setting-block);
 @include sui-setting-block--element.build-header(setting-block);
+@include sui-setting-block--element.build-option(setting-block);
 
 @include sui-setting-block--modifier.state-pro(setting-block);
 @include sui-setting-block--modifier.state-fluid(setting-block);

packages/ui/setting-block/src/elements/setting-block-option.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+
+import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
+import { useStyles } from "@wpmudev/sui-hooks"
+
+import { SettingBlockOptionProps } from "../setting-block.types"
+
+export const SettingBlockOption: React.FC<SettingBlockOptionProps> = ({
+	title,
+	description,
+	className,
+	children,
+	actions,
+	_htmlProps,
+	_style = {},
+}) => {
+	const { suiInlineClassname } = useStyles(_style, className)
+
+	// Define class name based on various conditions
+	const classNames = generateCN(
+		"sui-setting-block__option",
+		{},
+		suiInlineClassname,
+	)
+
+	return (
+		<div className={classNames}>
+			<div className="sui-setting-block__option-header">
+				{!!title && (
+					<h6 className="sui-setting-block__option-title">{title}</h6>
+				)}
+				{!!description && (
+					<p className="sui-setting-block__option-description">{description}</p>
+				)}
+			</div>
+			{!!children && (
+				<div className="sui-setting-block__option-body">{children}</div>
+			)}
+		</div>
+	)
+}

packages/ui/setting-block/src/index.ts

@@ -1,4 +1,7 @@
 // export components
 export { SettingBlock } from "./setting-block"
+
+export { SettingBlockOption } from "./elements/setting-block-option"
+
 // export types
 export type { SettingBlockProps } from "./setting-block.types"

packages/ui/setting-block/src/setting-block.types.ts

@@ -1,6 +1,41 @@
 import React, { HTMLProps } from "react"
 import { SuiHTMLAttributes, SuiStyleType } from "@wpmudev/sui-utils"
 
+/**
+ * Defines the props for a SettingBlock component.
+ */
+interface SettingBlockOptionProps
+	extends SuiStyleType,
+		SuiHTMLAttributes<HTMLProps<HTMLDivElement>> {
+	/**
+	 * The title of the setting block option.
+	 * This prop is required and should be a string.
+	 */
+	title?: React.ReactNode
+
+	/**
+	 * An optional description for the setting block.
+	 * It can be a string.
+	 */
+	description?: React.ReactNode
+
+	/**
+	 * Body content of the block option
+	 */
+	children?: React.ReactNode
+
+	/**
+	 * An optional CSS class name to apply custom styling to the SettingBlock.
+	 * Should be a string.
+	 */
+	className?: string
+
+	/**
+	 * Setting block actions
+	 */
+	actions?: React.ReactNode
+}
+
 /**
  * Defines the props for a SettingBlock component.
  */
@@ -53,4 +88,4 @@ interface SettingBlockProps
 	overflowHidden?: boolean
 }
 
-export type { SettingBlockProps }
+export type { SettingBlockProps, SettingBlockOptionProps }

packages/ui/setting-block/stories/setting-block.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 
 // Import required component
-import { SettingBlock as SuiSettingBlock } from "../src"
+import { SettingBlock as SuiSettingBlock, SettingBlockOption } from "../src"
 
 // Import documentation main page
 import docs from "./setting-block.mdx"
@@ -24,7 +24,21 @@ const SettingBlock = ({ ...props }) => {
 		<div className="sui-layout sui-layout--horizontal sui-layout--vertical">
 			<div className="sui-layout__content">
 				<div style={{ backgroundColor: "white" }}>
-					<SuiSettingBlock {...props}>Controls</SuiSettingBlock>
+					<SuiSettingBlock {...props}>
+						<SettingBlockOption
+							title="Optional block title"
+							description="Setting block optional description"
+						>
+							Body content here
+						</SettingBlockOption>
+
+						<SettingBlockOption
+							title="Optional block title"
+							description="Setting block optional description"
+						>
+							Body content here
+						</SettingBlockOption>
+					</SuiSettingBlock>
 				</div>
 			</div>
 		</div>

packages/ui/setting-block/stories/tabs/TabUsage.mdx

@@ -1,41 +1,100 @@
-import { Section, Row, Col } from "@wpmudev/sui-docs"
+import { Section, Row, Col, List } from "@wpmudev/sui-docs"
 
 import Anatomy from "../images/anatomy.svg"
-import Spacings from "../images/spacings.svg"
+import SpacingMainWrap from "../images/spacing-main-wrap.svg"
+import SpacingBlockBody from "../images/spacing-block-body.svg"
+import SettingBlockBody from "../images/setting-block-body.svg"
+import SettingBlockOption from "../images/setting-block-option.svg"
+import LayoutVariation from "../images/layout-variation.svg"
+import HeaderWidth from "../images/header-width.svg"
 import Types from "../images/types.svg"
 import Examples from "../images/examples.svg"
 
 <Section title="Anatomy" style={{ paddingTop: 20 }}>
 	<img src={Anatomy} alt="Setting Block Anatomy" style={{ marginBottom: 20 }} />
-	<h3>1. Block title</h3>
+	<h3>1. Setting block header</h3>
 	<p>
-		The left column is for setting block the title and description. It gives a
-		glance of the setting block to users.
+		The setting block header includes a title and a brief description to summarize its purpose.
 	</p>
 
-    <h3>2. Block Option</h3>
-    <p>
-    	Box body is a flexible area where the main content can be inserted. It may include list, table or any type of content that is available for settings.
-    </p>
+	<h3>2. Setting block body</h3>
+	<p>
+		The setting block body is designed to display setting options. It accommodates multiple options within a single settings block, providing a structured area to organize and present them clearly.
+	</p>
+</Section>
 
+<Section title="Setting block body" style={{ paddingTop: 20 }}>
+	<p>The setting block body is designed to display setting options. It accommodates multiple options within a single settings block, providing a structured area to organize and present them clearly.</p>
+	<img
+		src={SettingBlockBody}
+		alt="Setting Block Body"
+		style={{ marginBottom: 20 }}
+	/>
 </Section>
 
-<Section title="Spacings" style={{ paddingTop: 20 }}>
+<Section title="Setting block option" style={{ paddingTop: 20 }}>
+	<p>The Setting Block Option is a component designed to display individual setting options. It is divided into two sections: Setting block option header and Setting block option body</p>
+	<img
+		src={SettingBlockOption}
+		alt="Setting Block Option"
+		style={{ marginBottom: 20 }}
+	/>
+
+	<p>
+	<strong>1. Setting block option header</strong>
+	<List>
+		<span label="Includes a title and an optional description to provide context or details about the setting." />
+		<span label="It is a boolean property, making it optional and configurable based on design needs." />
+	</List>
+	</p>
+
+	<p>
+	<strong>2. Setting block option body</strong>
+	<List>
+		<span label="This is the main area where setting components or elements are displayed." />
+		<span label="This section supports full customization and layout flexibility, including the use of utilities such as margins, borders, columns, and more." />
+	</List>
+	</p>
+</Section>
+
+<Section title="Layout variation" style={{ paddingTop: 20 }}>
 	<img
-		src={Spacings}
-		alt="Setting Block Anatomy"
+		src={LayoutVariation}
+		alt="Layout variation"
 		style={{ marginBottom: 20 }}
 	/>
 </Section>
 
 <Section title="Types" style={{ paddingTop: 20 }}>
-	<img src={Types} alt="Setting Block Types" style={{ marginBottom: 20 }} />
+	<img
+		src={Types}
+		alt="Types"
+		style={{ marginBottom: 20 }}
+	/>
+</Section>
+
+<Section title="Setting block header width for default layout" style={{ paddingTop: 20 }}>
+	<p>The Setting Block Header is designed to occupy 30% of the available width to ensure responsive content management. However, to prevent the header from shrinking excessively, a minimum width of 240px is enforced. This ensures readability and maintains a consistent layout across various screen sizes.</p>
+	<img
+		src={HeaderWidth}
+		alt="Header Width"
+		style={{ marginBottom: 20 }}
+	/>
 </Section>
 
-<Section title="Examples" style={{ paddingTop: 20 }}>
+<Section title="Spacings" style={{ paddingTop: 20 }}>
+	<h3>Setting block main wrap</h3>
+	<img
+		src={SpacingMainWrap}
+		alt="Spacing Wrap"
+		style={{ marginBottom: 20 }}
+	/>
+
+	<h3>Setting block body</h3>
 	<img
-		src={Examples}
-		alt="Setting Block Examples"
+		src={SpacingBlockBody}
+		alt="Spacing Block Body"
 		style={{ marginBottom: 20 }}
 	/>
 </Section>
+