Add contribution graph stories (#1191)

* add stories * fix name * Create smart-plums-nail.md
primer · Feb 28, 2025 · 7ae4324 · 7ae4324
1 parent 4266174
commit 7ae4324
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 1 deletion.
diff --git a/.changeset/smart-plums-nail.md b/.changeset/smart-plums-nail.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Add contribution graph stories
diff --git a/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx b/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
@@ -789,7 +789,7 @@ export const Treeview = () => {
   return (
     <Table.Container>
       <h1 className="sr-only" id="treeViewItem">
-        Tooltip
+        Treeview
       </h1>
       <DataTable
         aria-labelledby="treeViewItem"
@@ -831,3 +831,56 @@ export const Treeview = () => {
     </Table.Container>
   )
 }
+
+export const ContributionGraph = () => {
+  const data = getTokensByName(colorTokens, 'contribution').map(token => {
+    return {
+      id: token.name,
+      ...token,
+    }
+  })
+  return (
+    <Table.Container>
+      <h1 className="sr-only" id="contribution">
+        Contribution graph
+      </h1>
+      <DataTable
+        aria-labelledby="contribution"
+        data={data}
+        columns={[
+          {
+            header: 'Sample',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return (
+                <ColorTokenSwatch
+                  bgColor={row.name.includes('bgColor') || row.name.includes('iconColor') ? row.name : undefined}
+                  textColor={row.name.includes('fgColor') ? row.name : undefined}
+                  shadowColor={row.name.includes('shadow') ? row.name : undefined}
+                  borderColor={row.name.includes('borderColor') ? row.name : undefined}
+                />
+              )
+            },
+          },
+          {
+            header: 'Token',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.name} copyClipboard cssVar />
+            },
+          },
+          {
+            header: 'Output value',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <p>{row.value}</p>
+            },
+          },
+        ]}
+      />
+    </Table.Container>
+  )
+}