Examples & props for the new SettingBlockOption component

wpmudev · Dec 31, 2024 · 51bed4a · 51bed4a
1 parent 0349e1e
commit 51bed4a
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 16 deletions.
diff --git a/packages/assets/css/src/scss/_components/_setting-block/_elements/_build-header.scss b/packages/assets/css/src/scss/_components/_setting-block/_elements/_build-header.scss
@@ -17,9 +17,12 @@
 			@include element(header) {
 				display: flex;
 				gap: $spacing-lg;
+				width: 30%;
+				min-width: 240px;
 
 				@include media(max-width, sm) {
 					flex-direction: column;
+					width: 100%;
 				}
 			}
 		}

diff --git a/packages/assets/css/src/scss/_components/_setting-block/_elements/_build-info.scss b/packages/assets/css/src/scss/_components/_setting-block/_elements/_build-info.scss
@@ -16,7 +16,6 @@
 		@include block($block) {
 			@include element(info) {
 				flex: 1 100%;
-				max-width: 240px;
 
 				@include media(max-width, sm) {
 					max-width: 100%;

diff --git a/packages/assets/css/src/scss/_components/_setting-block/_elements/_build-option.scss b/packages/assets/css/src/scss/_components/_setting-block/_elements/_build-option.scss
@@ -14,6 +14,13 @@
 	@include sui-class($rtl: false, $theme: null) {
 		// Block wrapper.
 		@include block($block) {
+			@include element(option-title-row) {
+				display: flex;
+				gap: $spacing-sm;
+				align-items: flex-start;
+				justify-content: flex-start;
+			}
+
 			@include element(option-title) {
 				font-size: $font-size-default;
 				font-weight: $font-weight-md;

diff --git a/packages/ui/setting-block/src/elements/setting-block-option.tsx b/packages/ui/setting-block/src/elements/setting-block-option.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { Fragment } from "react"
 
 import { _renderHTMLPropsSafely, generateCN } from "@wpmudev/sui-utils"
 import { useStyles } from "@wpmudev/sui-hooks"
@@ -24,10 +24,13 @@ export const SettingBlockOption: React.FC<SettingBlockOptionProps> = ({
 	)
 
 	return (
-		<div className={classNames}>
+		<div className={classNames} {..._renderHTMLPropsSafely(_htmlProps)}>
 			<div className="sui-setting-block__option-header">
 				{!!title && (
-					<h6 className="sui-setting-block__option-title">{title}</h6>
+					<div className="sui-setting-block__option-title-row">
+						<h6 className="sui-setting-block__option-title">{title}</h6>
+						<div className="sui-setting-block__option-actions">{actions}</div>
+					</div>
 				)}
 				{!!description && (
 					<p className="sui-setting-block__option-description">{description}</p>

diff --git a/packages/ui/setting-block/stories/setting-block.stories.tsx b/packages/ui/setting-block/stories/setting-block.stories.tsx
@@ -2,6 +2,7 @@ import React from "react"
 
 // Import required component
 import { SettingBlock as SuiSettingBlock, SettingBlockOption } from "../src"
+import { Tag } from "@wpmudev/sui-tag"
 
 // Import documentation main page
 import docs from "./setting-block.mdx"
@@ -35,6 +36,7 @@ const SettingBlock = ({ ...props }) => {
 						<SettingBlockOption
 							title="Optional block title"
 							description="Setting block optional description"
+							actions={<Tag>Tag</Tag>}
 						>
 							Body content here
 						</SettingBlockOption>

diff --git a/packages/ui/setting-block/stories/tabs/TabCode.mdx b/packages/ui/setting-block/stories/tabs/TabCode.mdx
@@ -26,4 +26,39 @@ import { Section, Row, Col, Table, List, Code, Tag, PackageInstallGuide, PropSec
 
 </Section>
 
+<Section
+	title="Sub Components"
+	contained={true}
+	style={{ paddingTop: 30, paddingBottom: 0 }}
+>
+	<p>The Accordion component offers a collection of nested subcomponents to be utilized within it. These subcomponents include:</p>
+
+    <Section title="SettingBlockOption" contained={true} style={{ paddingTop: 0, paddingLeft: 20, paddingRight: 0 }}>
+    	<p>
+    		The SettingBlockOption is a component designed to display individual setting options. and it has the following props
+    	</p>
+
+		<PropSection title="title" type="React Node">
+    		Optional title for the option
+    	</PropSection>
+
+        <PropSection title="actions" type="React Node">
+    		Optional actions to display beside the title like a tag 
+    	</PropSection>
+
+        <PropSection title="description" type="React Node">
+    		Optional description for the option
+    	</PropSection>
+
+        <PropSection title="children" type="React Node">
+    		The body content of the option
+    	</PropSection>
+
+		 <PropSection title="className" type="string">
+    		An additional css className for further styling
+    	</PropSection>
+
+    </Section>
+ </Section>
+
 <CommonPropsNotice />
diff --git a/packages/ui/setting-block/stories/tabs/TabExamples.mdx b/packages/ui/setting-block/stories/tabs/TabExamples.mdx
@@ -1,23 +1,50 @@
 import { Section, Switcher, Preview, Snippet, Code } from "@wpmudev/sui-docs"
-import { SettingBlock } from "../../src"
+import { SettingBlock, SettingBlockOption } from "../../src"
+import { Tag } from "@wpmudev/sui-tag"
 import dedent from "dedent"
 
 export const generalExample = dedent`
     <SettingBlock
-      title="Title"
-      description="Block IP addresses that send POST requests with empty Referer and User-Agent headers."
+        title="Title"
+        description="Block IP addresses that send POST requests with empty Referer and User-Agent headers."
     >
-       The Setting Block Content
+        <SettingBlockOption
+            title="Optional block title"
+            description="Setting block optional description"
+        >
+            Body content here
+        </SettingBlockOption>
+
+        <SettingBlockOption
+            title="Optional block title"
+            description="Setting block optional description"
+            actions={<Tag>Tag</Tag>}
+        >
+            Body content here
+        </SettingBlockOption>
     </SettingBlock>
 `
 
 export const proExample = dedent`
     <SettingBlock
-      isPro={true}
-      title="Title"
-      description="Block IP addresses that send POST requests with empty Referer and User-Agent headers."
+        title="Title"
+		isPro={true}
+        description="Block IP addresses that send POST requests with empty Referer and User-Agent headers."
     >
-       The Setting Block Content
+        <SettingBlockOption
+            title="Optional block title"
+            description="Setting block optional description"
+        >
+            Body content here
+        </SettingBlockOption>
+
+        <SettingBlockOption
+            title="Optional block title"
+            description="Setting block optional description"
+            actions={<Tag>Tag</Tag>}
+        >
+            Body content here
+        </SettingBlockOption>
     </SettingBlock>
 `
 
@@ -30,7 +57,20 @@ export const proExample = dedent`
 					title="Title"
 					description="Block IP addresses that send POST requests with empty Referer and User-Agent headers."
 				>
-					The Setting Block Content
+					<SettingBlockOption
+						title="Optional block title"
+						description="Setting block optional description"
+					>
+						Body content here
+					</SettingBlockOption>
+
+					<SettingBlockOption
+						title="Optional block title"
+						description="Setting block optional description"
+						actions={<Tag>Tag</Tag>}
+					>
+						Body content here
+					</SettingBlockOption>
 				</SettingBlock>
 			</div>
 		</div>
@@ -46,11 +86,24 @@ export const proExample = dedent`
 		<div style={{ background: "#f1f1f1", padding: 25 }}>
 			<div style={{ background: "white" }}>
 				<SettingBlock
-          isPro={true}
 					title="Title"
+					isPro={true}
 					description="Block IP addresses that send POST requests with empty Referer and User-Agent headers."
 				>
-					The Setting Block Content
+					<SettingBlockOption
+						title="Optional block title"
+						description="Setting block optional description"
+					>
+						Body content here
+					</SettingBlockOption>
+
+					<SettingBlockOption
+						title="Optional block title"
+						description="Setting block optional description"
+						actions={<Tag>Tag</Tag>}
+					>
+						Body content here
+					</SettingBlockOption>
 				</SettingBlock>
 			</div>
 		</div>

diff --git a/packages/ui/setting-block/stories/tabs/TabUsage.mdx b/packages/ui/setting-block/stories/tabs/TabUsage.mdx
@@ -8,7 +8,6 @@ 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 }} />