From 3d1d910bd2033f9633d666c6ff83740154f1d1f5 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Thu, 27 Feb 2025 16:17:51 -0800
Subject: [PATCH 1/3] add stories

---
 .../Color/Patterns/AllPatterns.stories.tsx    | 55 ++++++++++++++++++-
 1 file changed, 54 insertions(+), 1 deletion(-)

diff --git a/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx b/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
index c2210f476..4999a1896 100644
--- 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 ContributionGraphic = () => {
+  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>
+  )
+}

From 180e10c94381b3cd121e5658d26a7bb38548a266 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Thu, 27 Feb 2025 16:23:52 -0800
Subject: [PATCH 2/3] fix name

---
 docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx b/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
index 4999a1896..ce8ea9aeb 100644
--- a/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
+++ b/docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx
@@ -832,7 +832,7 @@ export const Treeview = () => {
   )
 }
 
-export const ContributionGraphic = () => {
+export const ContributionGraph = () => {
   const data = getTokensByName(colorTokens, 'contribution').map(token => {
     return {
       id: token.name,

From b4f8ca23ca299808b7622b53e82251070a6f8d43 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Thu, 27 Feb 2025 16:44:17 -0800
Subject: [PATCH 3/3] Create smart-plums-nail.md

---
 .changeset/smart-plums-nail.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/smart-plums-nail.md

diff --git a/.changeset/smart-plums-nail.md b/.changeset/smart-plums-nail.md
new file mode 100644
index 000000000..993082090
--- /dev/null
+++ b/.changeset/smart-plums-nail.md
@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Add contribution graph stories