Skip to content
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

Merged
merged 2 commits into from
Jan 10, 2021

Conversation

DorShakedMonday
Copy link
Contributor

@DorShakedMonday DorShakedMonday commented Jan 7, 2021

Description:

  • Add new component - Banner
  • Fix plop file for component
  • Make dropdown story better by including options creation in the story
  • Used plop (npm run plop) to create a new component. This command will create a folder for your component and will update index.js file
  • PR has description
  • New component is functional and using React Hooks.
  • Component defines PropTypes
  • There is Readme for the component, which explains the main aspects of how to use it

Style

  • Styles are added to NewComponent.scss file inside of the NewComponent folder
  • CSS selectors are named using BEM convention
  • Design is compatible with Monday Design System

Storybook

  • Stories were added to /src/NewComponent/stories/NewComponent.stories.js file
  • Stories include sandbox story with knobs for each property
  • Stories include all flows of using the component
  • Component passed Accessibility Plugin checks

Tests

  • Tests are compliant with TESTING_README.md instructions

* Fix plop file for component
* Make dropdown story better by including options creation in the story
Copy link
Contributor

@orrgottlieb orrgottlieb left a 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!

plop/component/component-js.txt Show resolved Hide resolved
/**
* sub title value
*/
subtitle: PropTypes.string
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add default

Copy link
Contributor Author

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,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add default please

Copy link
Contributor Author

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,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

add default please

Copy link
Contributor Author

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,
Copy link
Contributor

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already exists =]

}

&.image-position__left {
grid-template-areas:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

css grid is life!

margin: 0;
grid-area: title;
height: 26px;
font-size: 18px;
Copy link
Contributor

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

width: content-box;
max-width: 782px;
display: -webkit-box;
-webkit-line-clamp: 3;
Copy link
Contributor

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

grid-area: image;
width: 100px;
height: 100px;
border-radius: 16px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@@ -0,0 +1,6 @@
export const IMAGE_POSITIONS = Object.freeze({
Copy link
Contributor

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
@orrgottlieb orrgottlieb merged commit d4d3da2 into mondaycom:master Jan 10, 2021
talkor pushed a commit that referenced this pull request Feb 13, 2024
…indicator

amitha/feature/icon-text-color-indicator
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants