thetaz25 / courner Goto Github PK

Add Prop hasError (bool)
Component border will be colored red when hasError is true

The component should have the following features:

• Display a label
• Display some descriptive text
• Display some error text

Following concepts need to be introduced:

• Breakpoints (Mobile, Tablet, Desktop)

Behaviour like in https://codepen.io/chriscoyier/full/AvYQdv :

• On Desktop and Larger sizes, have the label and the input on the same row, Label is right-aligned.
• On Tablet sizes, the label and the input are on the same row, Label is left-aligned.
• On Phone sizes, Label and Input are on the same column, Label is above the input.
• Descriptive Text will be shown below the input (optionally)
• Error Text will be shown below the descriptive text (optionally)
• Optionally the error text can also be displayed instead of the descriptive text

What component is missing?
A dedicated component that will center its content.
A switch for "expand to full size" which sets width and height to 100% would be nice.

After the development of the first components, I do have a more clearer idea on how to tackle styling.

Provide longer, or complex style definitions via mixins and functions in SCSS.

Specifics:

• transition property in "fast", "medium" and "slow", that accepts the properties that should be included as well as the timing definition.
• Color rework, prepare everything for design tokens as far as it can get
• Convencience-methods for colors (e.g. border-color(<DESIGN-TOKEN>) )
• Convencience-methods for more complex css selectors (as needed)

ToDo's:

• Add eslint with a prexisting config for react projects (e.g. AirBnB)
• Add stylelint, most probably use the provided rules from the demo page

• Update CanIUse Database
• Update package dependencies

See: https://github.com/storybookjs/storybook-deployer

What example are you missing?
I want a Example Login Screen that shows usage of input components with layout components. Example should include inputs for user + password, checkbox for "remember me", link to "forgot password" and button to do the login.

Design/Style

• The input fields should be located centralized.
• The input fields should be contained on a paper component with elevation.
• There is a title (h1) that introduces the user with a messages to log in.
• The title's variant can be changed with controls
• Input for username with errortext can be changed via controls
• Input for password with errortext can be changed via controls
• Checkbox for remember me is included
• Link for "Forgot Password" is displayed (no linking)
• Button for "Register" and "Login", Login is primary (no actions)

Added Value
First example, usage of different inputs with some data display components together with some layouting

Missing Components to fulfil

• InputWrapper Component (see #5 )
• Center Component (TBD)

Features:

• Elevation (needs to be implemented)
• Has Courner
• Can have border
• Interactive optional