-
Notifications
You must be signed in to change notification settings - Fork 315
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Add Banner component #49
feat: Add Banner component #49
Conversation
* Fix plop file for component * Make dropdown story better by including options creation in the story
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As usual, this PR is amazing - i have some small reuqests.
maybe add an optional x icon at the top right - to close the banner ?
Amazing job, thank you!
src/components/Banner/Banner.jsx
Outdated
/** | ||
* sub title value | ||
*/ | ||
subtitle: PropTypes.string |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
add default
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
/** | ||
* title value | ||
*/ | ||
title: PropTypes.string, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
add default please
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
/** | ||
* image custom style | ||
*/ | ||
imageClassName: PropTypes.string, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
add default please
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done
/** | ||
* image alt attribute | ||
*/ | ||
imageAlt: PropTypes.string, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please add a default with a default text
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Already exists =]
src/components/Banner/Banner.scss
Outdated
} | ||
|
||
&.image-position__left { | ||
grid-template-areas: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
css grid is life!
src/components/Banner/Banner.scss
Outdated
margin: 0; | ||
grid-area: title; | ||
height: 26px; | ||
font-size: 18px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i would assume that we would use our tyography - not comment to you but for design
https://style.monday.com/?path=/story/foundations-typography--typography
src/components/Banner/Banner.scss
Outdated
width: content-box; | ||
max-width: 782px; | ||
display: -webkit-box; | ||
-webkit-line-clamp: 3; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
line-clamp is life 2
src/components/Banner/Banner.scss
Outdated
grid-area: image; | ||
width: 100px; | ||
height: 100px; | ||
border-radius: 16px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we have constant for border radius
https://style.monday.com/?path=/story/foundations-global-design--rounded-corners
@@ -0,0 +1,6 @@ | |||
export const IMAGE_POSITIONS = Object.freeze({ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe on overkill ? but i'll allow it ❤️
* Add close button support * Add RTL support * Conform to styling standards
…indicator amitha/feature/icon-text-color-indicator
Description:
Style
Storybook
Tests