chore: card documentation

README.md

@@ -74,6 +74,7 @@
 - chore: improve tabs ([ffb87c9](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/ffb87c9))
 - chore: increase video size ([7ecccdf](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/7ecccdf))
 - chore: manually sort entities by creation time ([65142d8](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/65142d8))
+- chore: more documentation ([3a02314](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/3a02314))
 - chore: more repo chores ([1f4c46f](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/1f4c46f))
 - chore: new card designs and challenged status ([80b71c2](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/80b71c2))
 - chore: normalize form behavior and implement evidence module ([b035c76](https://github.com/Proof-Of-Humanity/proof-of-humanity-web/commit/b035c76))

components/alert.stories.js

@@ -19,7 +19,7 @@ const metadata = {
       },
     },
     title: {
-      type: "object",
+      type: "string",
       description: "The alert's title.",
       table: {
         type: {
@@ -28,7 +28,7 @@ const metadata = {
       },
     },
     children: {
-      type: "object",
+      type: "string",
       description: "The alert's content.",
       table: {
         type: {

components/button.stories.js

@@ -56,7 +56,7 @@ const metadata = {
       },
     },
     children: {
-      type: { name: "object", required: true },
+      type: { name: "string", required: true },
       description: "The button's content.",
       table: {
         type: {

components/card.stories.js

@@ -0,0 +1,132 @@
+import Card from "./card";
+
+const metadata = {
+  title: "Components/Card",
+  component: Card,
+  argTypes: {
+    active: {
+      type: "boolean",
+      description:
+        "Whether the card should render as active or not. Useful for when cards are used as radio buttons or checkboxes.",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    variant: {
+      type: "string",
+      description: "The card's theme variant.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+      defaultValue: "primary",
+      control: {
+        type: "radio",
+        options: ["primary", "muted"],
+      },
+    },
+    header: {
+      type: "string",
+      description: "The header content.",
+      table: {
+        type: {
+          summary: "react-renderable",
+        },
+      },
+    },
+    headerSx: {
+      type: "object",
+      description: "The header's Theme UI sx prop.",
+      table: {
+        type: {
+          summary: "object",
+        },
+      },
+    },
+    mainSx: {
+      type: "object",
+      description: "The main body area's Theme UI sx prop.",
+      table: {
+        type: {
+          summary: "object",
+        },
+      },
+    },
+    children: {
+      type: "string",
+      description: "The main body area's content.",
+      table: {
+        type: {
+          summary: "react-renderable",
+        },
+      },
+    },
+    footer: {
+      type: "string",
+      description: "The footer content.",
+      table: {
+        type: {
+          summary: "react-renderable",
+        },
+      },
+    },
+    footerSx: {
+      type: "object",
+      description: "The footer's Theme UI sx prop.",
+      table: {
+        type: {
+          summary: "object",
+        },
+      },
+    },
+    sx: {
+      type: "object",
+      description: "Theme UI sx prop.",
+      table: {
+        type: {
+          summary: "object",
+        },
+      },
+    },
+    onClick: {
+      type: "function",
+      description: "The button's onClick handler.",
+      table: {
+        type: {
+          summary: "function",
+        },
+      },
+    },
+    "...rest": {
+      type: "object",
+      description: "The card's additional props.",
+      table: {
+        type: {
+          summary: "object",
+        },
+      },
+      control: null,
+    },
+  },
+};
+export default metadata;
+
+function Template(args) {
+  return <Card {...args} />;
+}
+
+export const Primary = Template.bind();
+Primary.args = {
+  header: "Header",
+  children: "Body",
+  footer: "Footer",
+};
+
+export const Muted = Template.bind();
+Muted.args = {
+  variant: "muted",
+  children: "Body",
+};