Added full layout example

wpmudev · Jan 1, 2025 · 5ce6d1b · 5ce6d1b
1 parent 51bed4a
commit 5ce6d1b
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 2 deletions.
diff --git a/packages/assets/css/src/scss/_utils/_tokens.scss b/packages/assets/css/src/scss/_utils/_tokens.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 26 Dec 2024 13:45:21 GMT
+// Generated on Tue, 31 Dec 2024 06:13:16 GMT
 
 $accordion-border-radius-sm: 10px;
 $advanced-banner-background: linear-gradient(90deg, #222 0%, #383323 48.96%, #514524 100%);

diff --git a/packages/ui/setting-block/src/setting-block.types.ts b/packages/ui/setting-block/src/setting-block.types.ts
@@ -83,7 +83,7 @@ interface SettingBlockProps
 	actions?: React.ReactNode
 
 	/**
-	 * Setting block actions
+	 * Applies a style to hide overflowing content.
 	 */
 	overflowHidden?: boolean
 }

diff --git a/packages/ui/setting-block/stories/tabs/TabCode.mdx b/packages/ui/setting-block/stories/tabs/TabCode.mdx
@@ -50,6 +50,18 @@ import { Section, Row, Col, Table, List, Code, Tag, PackageInstallGuide, PropSec
     		Optional description for the option
     	</PropSection>
 
+		<PropSection title="isPro" type="boolean">
+    		Indicates whether this setting block is for Pro users.
+    	</PropSection>
+
+		<PropSection title="isFluid" type="boolean">
+    		Set this to true if you want to use the full width layout variation
+    	</PropSection>
+
+		<PropSection title="overflowHidden" type="boolean">
+    		 Applies a style to hide overflowing content
+    	</PropSection>
+
         <PropSection title="children" type="React Node">
     		The body content of the option
     	</PropSection>

diff --git a/packages/ui/setting-block/stories/tabs/TabExamples.mdx b/packages/ui/setting-block/stories/tabs/TabExamples.mdx
@@ -48,6 +48,17 @@ export const proExample = dedent`
     </SettingBlock>
 `
 
+export const fullLayout = dedent`
+    <SettingBlock
+        title="Title"
+        description="Block IP addresses that send POST requests with empty Referer and User-Agent headers."
+        isFluid={true}
+    >
+        Body content here. This section contains valuable information designed to keep you informed and engaged. Take your time to read through and discover everything it offers. 
+        Explore additional insights below to enrich your understanding further.
+    </SettingBlock>
+`
+
 <Section style={{ paddingTop: 30 }}>
 	<p>Below is a general example of the Setting Block component</p>
 	<Preview wrapper={true}>
@@ -78,6 +89,29 @@ export const proExample = dedent`
 	<Snippet language="js">{generalExample}</Snippet>
 </Section>
 
+
+<Section title="Full Layout" style={{ paddingTop: 30 }}>
+	<p>
+		An example with a full layout setting block
+	</p>
+	<Preview wrapper={true}>
+		<div style={{ background: "#f1f1f1", padding: 25 }}>
+			<div style={{ background: "white" }}>
+				<SettingBlock
+					title="Title"
+					description="Block IP addresses that send POST requests with empty Referer and User-Agent headers."
+					isFluid={true}
+				>
+					Body content here. This section contains valuable information designed to keep you informed and engaged. Take your time to read through and discover everything it offers. 
+    				Explore additional insights below to enrich your understanding further.
+				</SettingBlock>
+			</div>
+		</div>
+	</Preview>
+	<Snippet language="js">{proExample}</Snippet>
+</Section>
+
+
 <Section title="Pro variation" style={{ paddingTop: 30 }}>
 	<p>
 		Set the prop <Code small={true}>isPro=\{true\}</Code> to change the variation to the Pro variation