Card component #571
Card component #571
Conversation
…to the Card component
|
|
||
| const store = configureStore(); | ||
|
|
||
| // TODO: There is a problem when loading this stories twice |
There was a problem hiding this comment.
Can you describe the problem?
There was a problem hiding this comment.
storybook breaks in the browser. And the console shows an error stack trace that starts with:
Uncaught TypeError: Converting circular structure to JSON
Something in the Protein Viewer is mutating the original data, probably the way we use d3. This is not an issue in the website because data always gets calculated from the API payload, so basically starts with new data every time it gets into a protein viewer. But in the story, it reuses the same variable, so the mutations persist.
Or at least that's my suspicion, I'm thinking we can use the same way we import the data for skylign, and that might solve the storybook issue. A better, but more time-consuming fix will be checking the components themselves to make their methods unmutable.
There was a problem hiding this comment.
Mhh, writing it in the old storybook format did the trick. I'm guessing that way it doesn't try to reuse the same variables.
| <div | ||
| className={css( | ||
| 'card-tag', | ||
| `tag-${category === 'focus' ? 'focus' : 'blog'}`, | ||
| )} | ||
| > | ||
| <Tooltip | ||
| title={`View all ${ | ||
| category === 'focus' ? 'Protein focus' : 'Blog articles' | ||
| }`} | ||
| > | ||
| <Link | ||
| href={`${BLOG_ROOT}/categories/${category}/`} | ||
| target="_blank" | ||
| className={css('white-link')} | ||
| > | ||
| {category === 'focus' ? 'Protein focus' : 'Blog'} | ||
| </Link> | ||
| </Tooltip> | ||
| </div> |
There was a problem hiding this comment.
Slightly overlaps with the card's title, e.g.
There was a problem hiding this comment.
Solving it by the power of :has()
There was a problem hiding this comment.
Label overflows out of container if no background image is used, e.g.
| <Tooltip | ||
| title={`${data.metadata.source_organism.fullName} (Tax ID: ${data.metadata.source_organism.taxId})`} | ||
| > | ||
| {data.metadata.source_organism.fullName} |
There was a problem hiding this comment.
Could be a link to the organism.
Co-authored-by: Matthias Blum <[email protected]>
Co-authored-by: Matthias Blum <[email protected]>
3 Co-authored-by: Matthias Blum <[email protected]>
In this PR there is a new simple component:
<Card>This replaces all uses of direct html+css to create cards, by using the new component, to standardize and centralize all multiple CSS definitions of cards in a single component.
It also includes storybook stories to exemplify the different usages of Cards: from the raw usage of the component to the ones specific to endpoints in the table view.
Also, remove files in the About and Help section that were not in use.
Plus TS migrations wherever possible. e.g. Info Banner, BlogEntries, About/InterProScan