Skip to content

Commit 7ae4324

Browse files
authored
Add contribution graph stories (#1191)
* add stories * fix name * Create smart-plums-nail.md
1 parent 4266174 commit 7ae4324

File tree

2 files changed

+59
-1
lines changed

2 files changed

+59
-1
lines changed

.changeset/smart-plums-nail.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/primitives": patch
3+
---
4+
5+
Add contribution graph stories

docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -789,7 +789,7 @@ export const Treeview = () => {
789789
return (
790790
<Table.Container>
791791
<h1 className="sr-only" id="treeViewItem">
792-
Tooltip
792+
Treeview
793793
</h1>
794794
<DataTable
795795
aria-labelledby="treeViewItem"
@@ -831,3 +831,56 @@ export const Treeview = () => {
831831
</Table.Container>
832832
)
833833
}
834+
835+
export const ContributionGraph = () => {
836+
const data = getTokensByName(colorTokens, 'contribution').map(token => {
837+
return {
838+
id: token.name,
839+
...token,
840+
}
841+
})
842+
return (
843+
<Table.Container>
844+
<h1 className="sr-only" id="contribution">
845+
Contribution graph
846+
</h1>
847+
<DataTable
848+
aria-labelledby="contribution"
849+
data={data}
850+
columns={[
851+
{
852+
header: 'Sample',
853+
field: 'name',
854+
rowHeader: true,
855+
renderCell: row => {
856+
return (
857+
<ColorTokenSwatch
858+
bgColor={row.name.includes('bgColor') || row.name.includes('iconColor') ? row.name : undefined}
859+
textColor={row.name.includes('fgColor') ? row.name : undefined}
860+
shadowColor={row.name.includes('shadow') ? row.name : undefined}
861+
borderColor={row.name.includes('borderColor') ? row.name : undefined}
862+
/>
863+
)
864+
},
865+
},
866+
{
867+
header: 'Token',
868+
field: 'name',
869+
rowHeader: true,
870+
renderCell: row => {
871+
return <InlineCode value={row.name} copyClipboard cssVar />
872+
},
873+
},
874+
{
875+
header: 'Output value',
876+
field: 'value',
877+
rowHeader: true,
878+
renderCell: row => {
879+
return <p>{row.value}</p>
880+
},
881+
},
882+
]}
883+
/>
884+
</Table.Container>
885+
)
886+
}

0 commit comments

Comments
 (0)