Styleguide Update #8
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Jmartin/header-menu
Merge pull request #2 from E2E-Squad/styleguide
…/ImageContainer # Conflicts: # components/Atoms/Button/Button.md # components/Atoms/Button/Button.module.scss # pages/index.tsx
loichu
commented
Feb 4, 2022
| color: red; | ||
| @import "styles/variables"; | ||
| @import "styles/atoms/buttons"; | ||
| .btn { |
There was a problem hiding this comment.
Should use a pointer cursor
| import styles from './Button.module.scss'; | ||
| import style from "./Button.module.scss"; | ||
|
|
||
| interface types { |
There was a problem hiding this comment.
Should take an onClick event
| rank="6H" | ||
| location="Lausanne" | ||
| > | ||
| <svg |
There was a problem hiding this comment.
Should make an Icon atom component
Closed
Closed
Closed
Closed
Jmartin/imageContainer-integration
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Atoms
Button
Available in 2 versions:
Image Container
Contains an image and can be shaped (
Square,Circle,Rectangle) and sized (Small,Medium,Large,Big) using enum properties (ShapeandSize. It is responsive out-of-the-box unless you choose to make itAdaptivesized in which case it will fill the parent. It is then parent's responsibility to be responsive. The image automatically covers the container in any case.Message
Message contained in a box.
Molecules
ChatCard
Similar to
Messageexcepts it also takes a pseudo which will be displayed on the left of a default image on top of the message. By default the message is a left message (.chat-card-container) but it can also be a right message (chat-card-container--right).Nav
It takes an array of link objects and makes it a list of links.
UserCard
Exists in 2 versions:
main-user-card)main-user-card--full)It displays a user with a default profile picture, a pseudo and a rating (
react-stars). There is also a warning icon on the top right but it doesnt do anything yet nor serve any purpose. In full mode it also displays a location, a rank and a button "Notifier".Organism
Header
Displays a menu with a default app icon and default user avatar. It takes The user path and the title as well a styleClass as parameters.