Style updates #1
Conversation
| import React, { Fragment } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import './styles.css'; |
There was a problem hiding this comment.
Create an issue for styled components
|
|
||
| const CountBadge = ({ | ||
| children, | ||
| hideCount, |
| size, | ||
| }) => { | ||
| const count = | ||
| children > 99 ? ( |
There was a problem hiding this comment.
Magic numbers. Replace with const maxDisplayableCount = 99;
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| transform: translate(55%, -55%); |
There was a problem hiding this comment.
I feel that this relies on the outer element having a position relative which doesn't encapsulate this component - it creates a dependency on the outside world rather than being atomic.
Options:
- Don't support
is--attached - Find parent and bind to position using
getBoundingClientRect.
Obviously option 2 will have a impact on performance, so should consider looking at stifling re-renders.
For now, let's remove this feature and open an issue to investigate and add.
| transform: translate(55%, -55%); | ||
| } | ||
|
|
||
| .CountBadge::after { |
There was a problem hiding this comment.
Can we leave some more comments in the CSS as to what the intent of the pseudo class is.
| /* font-family: 'Montserrat', sans-serif; | ||
| line-height: 1.5; | ||
| font-weight: 800; | ||
| font-weight: 800; */ |
| line-height: 2.5rem; | ||
| font-weight: 400; | ||
| text-transform: uppercase; | ||
| letter-spacing: 1px; |
| @@ -1,6 +1,8 @@ | |||
| @import url('https://fonts.googleapis.com/css?family=Raleway:200,400,600|Source+Code+Pro&display=swap'); | |||
There was a problem hiding this comment.
Check this, are we using 600 or 700? I think we need 700.
This PR updates some of the early styles in the library, also bumped Storybook version to latest.
Fonts updated to Raleway
Blockquote styles updated
Link styles updated
Added count badge component