feat(slice-machine): add FieldSet component

packages/slice-machine/src/components/FieldSet/FieldSet.module.css

@@ -0,0 +1,78 @@
+.flex {
+  all: unset;
+  display: flex;
+}
+
+.column {
+  composes: flex;
+  flex-direction: column;
+}
+
+.root {
+  composes: column;
+  border-color: var(--grey6);
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  box-shadow: var(--box-shadow-1);
+  overflow-x: hidden;
+}
+
+.child {
+  box-sizing: border-box;
+  &:not(:last-child) {
+    border-bottom: inherit;
+  }
+}
+
+.row {
+  composes: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 8px;
+  padding-inline: 16px;
+}
+
+.legend {
+  composes: child row;
+  background-color: var(--grey2);
+  height: 48px;
+  order: 0;
+}
+
+.header {
+  composes: child row;
+  background-color: var(--grey2);
+  height: 72px;
+  order: 1;
+}
+
+.content {
+  composes: child column;
+  background-color: var(--grey1);
+  order: 2;
+  padding: 16px;
+}
+
+.list {
+  composes: child column;
+  height: 256px;
+  order: 2;
+}
+
+.listItem {
+  composes: row;
+  background-color: var(--grey1);
+  height: 64px;
+}
+
+.footer {
+  composes: child row;
+  background-color: var(--grey1);
+  height: calc(56px - 1px);
+  order: 3;
+}
+
+.footerText {
+  flex-grow: 1;
+}

packages/slice-machine/src/components/FieldSet/FieldSet.stories.tsx

@@ -0,0 +1,70 @@
+import { Button, ButtonGroup, IconButton, Text } from "@prismicio/editor-ui";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  FieldSet,
+  FieldSetContent,
+  FieldSetFooter,
+  FieldSetHeader,
+  FieldSetLegend,
+  FieldSetList,
+  FieldSetListItem,
+} from "./FieldSet";
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  component: FieldSet,
+  argTypes: {
+    children: { control: { disable: true } },
+  },
+} satisfies Meta<typeof FieldSet>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    children: (
+      <>
+        <FieldSetLegend />
+        <FieldSetHeader></FieldSetHeader>
+        <FieldSetContent />
+        <FieldSetList>
+          <FieldSetListItem />
+        </FieldSetList>
+        <FieldSetFooter></FieldSetFooter>
+      </>
+    ),
+  },
+} satisfies Story;
+
+export const WithContent = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <FieldSetLegend>Connected Git Repository</FieldSetLegend>
+        <FieldSetContent>
+          <ButtonGroup color="grey">
+            <Button sx={{ flexGrow: 1 }}>GitHub</Button>
+            <Button disabled sx={{ flexGrow: 1 }}>
+              Bitbucket{" "}
+              <Text color="inherit" component="span" variant="small">
+                (soon)
+              </Text>
+            </Button>
+            <Button disabled sx={{ flexGrow: 1 }}>
+              GitLab{" "}
+              <Text color="inherit" component="span" variant="small">
+                (soon)
+              </Text>
+            </Button>
+          </ButtonGroup>
+        </FieldSetContent>
+        <FieldSetFooter action={<IconButton icon="openInNew" />}>
+          Learn more about Prismic for Git
+        </FieldSetFooter>
+      </>
+    ),
+  },
+} satisfies Story;

packages/slice-machine/src/components/FieldSet/FieldSet.tsx

@@ -0,0 +1,56 @@
+import { Text } from "@prismicio/editor-ui";
+import type { FC, PropsWithChildren, ReactNode } from "react";
+
+import styles from "./FieldSet.module.css";
+
+export const FieldSet: FC<PropsWithChildren> = (props) => (
+  <div {...props} className={styles.root} />
+);
+
+export const FieldSetLegend: FC<PropsWithChildren> = ({
+  children,
+  ...otherProps
+}) => (
+  <div {...otherProps} className={styles.legend}>
+    <Text color="grey11" component="span" noWrap variant="smallBold">
+      {children}
+    </Text>
+  </div>
+);
+
+export const FieldSetHeader: FC<PropsWithChildren> = (props) => (
+  <div {...props} className={styles.header} />
+);
+
+export const FieldSetContent: FC<PropsWithChildren> = (props) => (
+  <div {...props} className={styles.content} />
+);
+
+export const FieldSetList: FC<PropsWithChildren> = (props) => (
+  <div {...props} className={styles.list} />
+);
+
+export const FieldSetListItem: FC<PropsWithChildren> = (props) => (
+  <div {...props} className={styles.listItem} />
+);
+
+type FieldSetFooterProps = PropsWithChildren<{ action?: ReactNode }>;
+
+export const FieldSetFooter: FC<FieldSetFooterProps> = ({
+  action,
+  children,
+  ...otherProps
+}) => (
+  <div {...otherProps} className={styles.footer}>
+    <Text
+      className={styles.footerText}
+      color="grey11"
+      component="span"
+      noWrap
+      variant="small"
+    >
+      {children}
+    </Text>
+    {action}
+  </div>
+);

packages/slice-machine/src/components/FieldSet/index.ts

@@ -0,0 +1,9 @@
+export {
+  FieldSet,
+  FieldSetContent,
+  FieldSetFooter,
+  FieldSetHeader,
+  FieldSetLegend,
+  FieldSetList,
+  FieldSetListItem,
+} from "./FieldSet";