File tree Expand file tree Collapse file tree 2 files changed +59
-1
lines changed
docs/storybook/stories/Color/Patterns Expand file tree Collapse file tree 2 files changed +59
-1
lines changed Original file line number Diff line number Diff line change
1
+ ---
2
+ " @primer/primitives " : patch
3
+ ---
4
+
5
+ Add contribution graph stories
Original file line number Diff line number Diff line change @@ -789,7 +789,7 @@ export const Treeview = () => {
789
789
return (
790
790
< Table . Container >
791
791
< h1 className = "sr-only" id = "treeViewItem" >
792
- Tooltip
792
+ Treeview
793
793
</ h1 >
794
794
< DataTable
795
795
aria-labelledby = "treeViewItem"
@@ -831,3 +831,56 @@ export const Treeview = () => {
831
831
</ Table . Container >
832
832
)
833
833
}
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
+ }
You can’t perform that action at this time.
0 commit comments