Merge pull request #5 from newfold-labs/add/container-component

Add Container and Page components

package.json

@@ -22,8 +22,8 @@
     "build:js": "babel src --out-dir build --ignore \"src/**/*.stories.js\",\"src/**/stories.js\"",
     "build:css": "node ./scripts/build-css.js",
     "copy:package-files": "cp README.md package.json build/",
-    "watch": "npm watch:js & npm watch:css",
-    "watch:js": "npm build:js --watch",
+    "watch": "npm run watch:js & npm run watch:css",
+    "watch:js": "npm run build:js --watch",
     "watch:css": "node ./scripts/watch-css.js",
     "test": "npm test:storyshots",
     "lint": "eslint src --max-warnings=0"

scripts/watch-css.js

@@ -7,7 +7,7 @@ const { debounce } = require( "lodash" );
 
 const build = () => {
 	console.time( "CSS done" );
-	execSync( "yarn build:css" );
+	execSync( "npm run build:css" );
 	console.timeEnd( "CSS done" );
 };
 

src/components/container/index.js

@@ -0,0 +1,133 @@
+import { PropTypes } from "prop-types";
+import classNames from "classnames";
+import { forwardRef } from "@wordpress/element";
+import Title from "../../elements/title";
+
+/**
+ * @param {string} as The element to render as.
+ * @param {Object} children The children.
+ * @param {string} className The className.
+ * @param {string} title The title.
+ * @param {string} description The description.
+ * @returns {JSX.Element} The header.
+ */
+const Header = ( {
+	as: Component = "div",
+	children,
+	className = "",
+	title,
+	description,
+	...props
+} ) => (
+	<Component { ...props } className={ classNames( "nfd-container__header", className ) }>
+		{ title && <Title as="h2" className="nfd-text-2xl nfd-font-medium nfd-text-title">{ title }</Title> }
+		{ description && <p>{ description }</p> }
+		{ children }
+	</Component>
+);
+
+Header.propTypes = {
+	as: PropTypes.element,
+	children: PropTypes.node,
+	className: PropTypes.string,
+	title: PropTypes.string,
+	description: PropTypes.string,
+};
+
+/**
+ * @param {string} as The element to render as.
+ * @param {Object} children The children.
+ * @param {string} className The className.
+ * @param {string} id The id.
+ * @param {boolean} separator Whether to show a separator.
+ * @returns {JSX.Element} The block.
+ */
+const Block = ( {
+	as: Component = "div",
+	children,
+	className = "",
+	id = "",
+	separator = false,
+	...props
+} ) => (
+	<Component { ...props } id={ id } className={ classNames( "nfd-container__block", className ) }>
+		<div className={ classNames( "nfd-pb-8", separator && "nfd-border-b nfd-border-[#CBD5E1]" ) }>
+			{ children }
+		</div>
+	</Component>
+);
+
+Block.propTypes = {
+	as: PropTypes.element,
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+	id: PropTypes.string,
+	separator: PropTypes.bool,
+};
+
+/**
+ * @param {string} as The element to render as.
+ * @param {Object} children The children.
+ * @param {string} className The className.
+ * @param {string} description The description.
+ * @param {string} title The title.
+ * @returns {JSX.Element} The settings field.
+*/
+const SettingsField = ( {
+	as: Component = "div",
+	children,
+	className = "",
+	description = "",
+	title,
+	...props
+} ) => (
+	<Component { ...props } className={ classNames( "nfd-container__settings-field", className ) }>
+		<div className="nfd-col-span-1">
+			<div className="nfd-max-w-screen-sm">
+				<Title as="h3" size="4">
+					{ title }
+				</Title>
+				{ description && <div className="nfd-mt-2">{ description }</div> }
+			</div>
+		</div>
+
+		<fieldset className="nfd-min-w-0 nfd-mt-8 xl:nfd-mt-0 xl:nfd-col-span-2">
+			<legend className="nfd-sr-only">{ title }</legend>
+			<div className="st-space-y-8">
+				{ children }
+			</div>
+		</fieldset>
+	</Component>
+);
+
+SettingsField.propTypes = {
+	as: PropTypes.element,
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+	description: PropTypes.string,
+	title: PropTypes.string,
+};
+
+/**
+ * @param {string} as The element to render as.
+ * @param {Object} children The children.
+ * @param {string} className The className.
+ * @returns {JSX.Element} The container component.
+ */
+const Container = forwardRef( ( { as: Component = "div", children, className = "", ...props }, ref ) => (
+	<Component { ...props } className={ classNames( "nfd-container", className ) } ref={ ref }>
+		{ children }
+	</Component>
+) );
+
+Container.propTypes = {
+	as: PropTypes.element,
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+};
+
+Container.Header = Header;
+Container.Block = Block;
+Container.SettingsField = SettingsField;
+
+export default Container;

src/components/container/style.css

@@ -0,0 +1,34 @@
+@layer components {
+	.nfd-root {
+		.nfd-container {
+			@apply
+			nfd-bg-white
+			nfd-w-full
+			nfd-rounded-lg
+			nfd-shadow
+		}
+
+		.nfd-container__header {
+			@apply
+			nfd-p-8
+			nfd-border-b
+			nfd-border-line
+			nfd-flex
+			nfd-flex-col
+			nfd-gap-4
+		}
+
+		.nfd-container__block {
+			@apply
+			nfd-p-8
+			nfd-pb-0
+		}
+
+		.nfd-container__settings-field {
+			@apply
+			nfd-grid
+			xl:nfd-grid-cols-3
+			xl:nfd-gap-12
+		}
+	}
+}

src/components/page/index.js

@@ -0,0 +1,17 @@
+import { PropTypes } from "prop-types";
+import classNames from "classnames";
+import { forwardRef } from "@wordpress/element";
+
+const Page = forwardRef( ( { as: Component = "div", children, className = "", ...props }, ref ) => (
+	<Component { ...props } className={ classNames( "nfd-page", className ) } ref={ ref }>
+		{ children }
+	</Component>
+) );
+
+Page.propTypes = {
+	as: PropTypes.element,
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+};
+
+export default Page;

src/components/page/style.css

@@ -0,0 +1,10 @@
+@layer components {
+	.nfd-root {
+		.nfd-page {
+			@apply
+			nfd-flex
+			nfd-flex-col
+			nfd-gap-8
+		}
+	}
+}

src/index.js

@@ -24,10 +24,12 @@ export { default as AutocompleteField } from "./components/autocomplete-field";
 export { default as Card } from "./components/card";
 export { default as CheckboxGroup } from "./components/checkbox-group";
 export { default as ChildrenLimiter } from "./components/children-limiter";
+export { default as Container } from "./components/container";
 export { default as FeatureUpsell } from "./components/feature-upsell";
 export { default as FileImport } from "./components/file-import";
 export { default as Modal } from "./components/modal";
 export { default as Notifications } from "./components/notifications";
+export { default as Page } from "./components/page";
 export { default as RadioGroup } from "./components/radio-group";
 export { default as Root } from "./components/root";
 export { default as SelectField } from "./components/select-field";

src/presets/index.js

@@ -1 +1 @@
-export { default as TAILWINDCSS_PRESET } from "./tailwindcss";
+export { default as TAILWINDCSS_PRESET } from "./tailwindcss";