Add story for Table component #1001
Conversation
- Also add backgrounds to stories
Codecov Report
@@ Coverage Diff @@
## master #1001 +/- ##
=======================================
Coverage 52.58% 52.58%
=======================================
Files 142 142
Lines 3564 3564
Branches 168 168
=======================================
Hits 1874 1874
Misses 1623 1623
Partials 67 67
Flags with carried forward coverage won't be shown. Click here to find out more.
Continue to review full report at Codecov.
|
|
Readied this PR for review, will convert it to Storybook Controls if we start using it. |
|
@Coteh Control seems good. Let's do it! |
|
@byliuyang I think what I'll do is merge this in as-is, then make a separate PR for Controls and convert all existing stories to use Controls in that PR. What do you think? |
There was a problem hiding this comment.
Hi @Coteh , thank you so much for working on this PR. Can you add a screenshot so that reviewers know how does the page look like?
| rows={new Array(number('Number of rows', 2)) | ||
| .fill(0) | ||
| .map((_, i) => headers.map((_, j) => `data ${i}-${j}`))} |
There was a problem hiding this comment.
I am confused by what's going on here. Can you explain what's going on or extract the logic using helper functions?
There was a problem hiding this comment.
I am simply allowing the table to have the number of rows user specifies within the storybook. I can make it into a helper function if that makes it easier to understand.
| export const parameters = { | ||
| backgrounds: { | ||
| default: 'short', | ||
| values: [ | ||
| { | ||
| name: 'white', | ||
| value: '#fff' | ||
| }, | ||
| { | ||
| name: 'short', | ||
| value: '#fafafa' | ||
| } | ||
| ] | ||
| } | ||
| }; |
There was a problem hiding this comment.
These are the parameters for storybook backgrounds https://storybook.js.org/docs/react/essentials/backgrounds
|
@byliuyang Screenshot added |
Addresses the
Tablestory in #954.Leaving in Draft until these items are done:
This PR also adds Storybook Backgrounds, as I wanted to add the color #fafafa, which is being used underneath the Favourite short links table in the homepage, as a background colour for the canvas. This will make the
Tablecomponent stand out better. I also set #fafafa as the default background colour for story canvases.