feat: Add Section component (#863)

BrunoQuaresma · web-flow · commit abf6934ebba1 · 2022-04-05T14:01:21.000-03:00
* feat: Add Section component

* fix: add Section.Action example
diff --git a/site/src/components/Section/Action.tsx b/site/src/components/Section/Action.tsx
@@ -0,0 +1,17 @@
+import { makeStyles } from "@material-ui/core/styles"
+import React from "react"
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    marginTop: theme.spacing(3),
+  },
+}))
+
+/**
+ * SectionAction is a content box that call to actions should be placed
+ * within
+ */
+export const SectionAction: React.FC = ({ children }) => {
+  const styles = useStyles()
+  return <div className={styles.root}>{children}</div>
+}
diff --git a/site/src/components/Section/SectionView.stories.tsx b/site/src/components/Section/SectionView.stories.tsx
@@ -0,0 +1,37 @@
+import Button from "@material-ui/core/Button"
+import TextField from "@material-ui/core/TextField"
+import { Story } from "@storybook/react"
+import React from "react"
+import { Section, SectionProps } from "./"
+
+export default {
+  title: "Page/Section",
+  component: Section,
+  argTypes: {
+    title: { type: "string" },
+    description: { type: "string" },
+    children: { control: { disable: true } },
+  },
+}
+
+const Template: Story<SectionProps> = (args: SectionProps) => <Section {...args} />
+
+export const Example = Template.bind({})
+Example.args = {
+  title: "User Settings",
+  description: "Add your personal info",
+  children: (
+    <>
+      <form style={{ display: "grid", gridAutoFlow: "row", gap: 12 }}>
+        <TextField label="Name" variant="filled" fullWidth />
+        <TextField label="Email" variant="filled" fullWidth />
+      </form>
+
+      <Section.Action>
+        <Button variant="contained" color="primary">
+          Submit
+        </Button>
+      </Section.Action>
+    </>
+  ),
+}
diff --git a/site/src/components/Section/index.tsx b/site/src/components/Section/index.tsx
@@ -0,0 +1,73 @@
+import { makeStyles } from "@material-ui/core/styles"
+import { fade } from "@material-ui/core/styles/colorManipulator"
+import Typography from "@material-ui/core/Typography"
+import React from "react"
+import { SectionAction } from "./Action"
+
+type SectionLayout = "fixed" | "fluid"
+
+export interface SectionProps {
+  title?: React.ReactNode | string
+  description?: React.ReactNode
+  toolbar?: React.ReactNode
+  alert?: React.ReactNode
+  layout?: SectionLayout
+  children?: React.ReactNode
+}
+
+type SectionFC = React.FC<SectionProps> & { Action: typeof SectionAction }
+
+export const Section: SectionFC = ({ title, description, toolbar, alert, children, layout = "fixed" }) => {
+  const styles = useStyles({ layout })
+  return (
+    <div className={styles.root}>
+      <div className={styles.inner}>
+        {(title || description) && (
+          <div className={styles.header}>
+            <div>
+              {title && <Typography variant="h4">{title}</Typography>}
+              {description && typeof description === "string" && (
+                <Typography className={styles.description}>{description}</Typography>
+              )}
+              {description && typeof description !== "string" && (
+                <div className={styles.description}>{description}</div>
+              )}
+            </div>
+            {toolbar && <div>{toolbar}</div>}
+          </div>
+        )}
+        {alert && <div className={styles.alert}>{alert}</div>}
+        {children}
+      </div>
+    </div>
+  )
+}
+
+// Sub-components
+Section.Action = SectionAction
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: `0px 18px 12px 6px ${fade(theme.palette.common.black, 0.02)}`,
+    marginBottom: theme.spacing(1),
+    padding: theme.spacing(6),
+  },
+  inner: ({ layout }: { layout: SectionLayout }) => ({
+    maxWidth: layout === "fluid" ? "100%" : 500,
+  }),
+  alert: {
+    marginBottom: theme.spacing(1),
+  },
+  header: {
+    marginBottom: theme.spacing(4),
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+  },
+  description: {
+    color: theme.palette.text.secondary,
+    fontSize: 16,
+    marginTop: theme.spacing(2),
+  },
+}))
