Skip to content
This repository has been archived by the owner on Apr 27, 2022. It is now read-only.

Commit

Permalink
Merge pull request #147 from klarna/add-default-name-to-form-components
Browse files Browse the repository at this point in the history 
Add default name to form components
  • Loading branch information
@Nevon
Nevon authored Nov 22, 2016
2 parents 3e498cc + 53493ae commit a19f997
Show file tree
Hide file tree
Showing 24 changed files with 208 additions and 177 deletions.
1 change: 0 additions & 1 deletion BoxSelector/example.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ export default {
Controlled: (
<BoxSelector
onChange={(key) => console.log('You selected', key)}
name='installments2'
value='installments_24'
focus='installments_6'
options={options}
Expand Down
6 changes: 4 additions & 2 deletions BoxSelector/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import compose from 'ramda/src/compose'
import {
overridable,
themeable,
uncontrolled
uncontrolled,
uniqueName
} from '@klarna/higher-order-components'

const baseClass = 'box-selector'
Expand Down Expand Up @@ -310,5 +311,6 @@ export default compose(
labelColor: customizations.color_text
}
})),
overridable(defaultStyles)
overridable(defaultStyles),
uniqueName
)(BoxSelector)
78 changes: 58 additions & 20 deletions Dropdown/example.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,52 +22,57 @@ export default {
Regular: <Dropdown
label='Lorem ipsum'
options={options}
/>,
/>,

Controlled: <Dropdown
name='dropdown-lorem-ipsum'
label='Lorem ipsum'
options={options}
focus
value='lorem'
/>,
/>,

'With name': <Dropdown
label='Lorem ipsum'
name='dolor-sit-amet'
options={options}
/>,

'With fake focus': <Dropdown
focus='fake'
label='Lorem ipsum'
options={options}
/>,
/>,

Loading: <Dropdown
label='Wait...'
loading
options={options}
/>,
/>,

Disabled: <Dropdown
disabled
label='Disabled'
options={options}
/>,
/>,

'Exclude Mouseflow': <Dropdown
mouseflowExclude
label='Disabled'
value='lorem'
options={options}
/>,
/>,

'With error': <Dropdown
label='Something went wrong'
error
options={options}
/>,
/>,

'With warning': <Dropdown
label='Something is incorect'
warning
options={options}
/>
/>
}
},

Expand All @@ -80,30 +85,63 @@ import Fieldset from '@klarna/ui/Fieldset'`,
examples: {
'Two fields': <Fieldset>
<Dropdown
left size='1/2' name='dropdown-given-name' label='Given name' options={options} />
left size='1/2'
label='Given name'
options={options}
/>
<Dropdown
right size='1/2' name='dropdown-last-name' label='Middle name' options={options} />
right size='1/2'
label='Middle name'
options={options}
/>
</Fieldset>,

Many: <Fieldset>
<Dropdown
top left size='1/2' name='many-given-name' label='Given name' options={options} />
top left size='1/2'
label='Given name'
options={options}
/>
<Dropdown
center size='1/4' name='many-middle-name' label='Middle name' options={options} />
center size='1/4'
label='Middle name'
options={options}
/>
<Dropdown
top right size='1/4' name='many-last-name' label='Last name' options={options} />
top right size='1/4'
label='Last name'
options={options}
/>
<Dropdown
left square size='1/5' name='many-number' label='Number' options={options} />
left square size='1/5'
label='Number'
options={options}
/>
<Dropdown
right square size='4/5' name='many-street-address' label='Street Address' options={options} />
right square size='4/5'
label='Street Address'
options={options}
/>
<Dropdown
left square size='1/3' name='many-pokemon' label='Your favorite pokémon' options={options} />
left square size='1/3'
label='Your favorite pokémon'
options={options}
/>
<Dropdown
right square size='2/3' name='many-android-iphone' label='Android or iPhone: please explain' options={options} />
right square size='2/3'
label='Android or iPhone: please explain'
options={options}
/>
<Dropdown
left bottom size='2/5' name='many-date-of-birth' label='Date of Birth' options={options} />
left bottom size='2/5'
label='Date of Birth'
options={options}
/>
<Dropdown
right bottom size='3/5' name='many-mobile-phone-number' label='Mobile phone number' options={options} />
right bottom size='3/5'
label='Mobile phone number'
options={options}
/>
</Fieldset>
}
}
Expand Down
6 changes: 4 additions & 2 deletions Dropdown/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import compose from 'ramda/src/compose'
import {
overridable,
themeable,
uncontrolled
uncontrolled,
uniqueName
} from '@klarna/higher-order-components'

const baseClass = 'dropdown'
Expand Down Expand Up @@ -254,5 +255,6 @@ export default compose(
selectedColor: customizations.color_text
}
})),
overridable(defaultStyles)
overridable(defaultStyles),
uniqueName
)(Dropdown)
6 changes: 4 additions & 2 deletions Field/PinCode/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import compose from 'ramda/src/compose'
import {
overridable,
themeable,
uncontrolled
uncontrolled,
uniqueName
} from '@klarna/higher-order-components'

const baseClass = 'field-code'
Expand Down Expand Up @@ -106,5 +107,6 @@ export default compose(
inputColor: customizations.color_text
}
})),
overridable(defaultStyles)
overridable(defaultStyles),
uniqueName
)(PinCode)
37 changes: 19 additions & 18 deletions Field/example.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,15 @@ export default {
Regular: <Field label='Enter your email' />,

Controlled: <Field
name='field-controlled'
label='Enter your email'
value='[email protected]'
focus
/>,
/>,

Big: <Field label='Enter your email' big />,

'With name': <Field name='email' label='Enter your email' />,

'With fake focus': <Field label='Enter your email' focus='fake' />,

Disabled: <Field disabled label='Address' defaultValue='16, Corn street' />,
Expand All @@ -35,22 +36,21 @@ export default {
mouseflowExclude
label='Address'
defaultValue='16, Corn street'
/>,
/>,

'With error': <Field label='Invalid email' error defaultValue='invalid@' />,

'With warning': <Field
label='Are you sure the domain is exanple?'
warning
defaultValue='[email protected]'
/>,
/>,

'With customizations': <Field
name='with-customizations'
customize={{ borderColor: '#3500C8', borderColorSelected: '#3500C8', borderRadius: '15px', inputColor: 'green', labelColor: 'red' }}
label='Favorite color'
defaultValue='Purple'
/>
/>
}
},

Expand All @@ -67,7 +67,8 @@ import ReactMaskedInput from 'react-maskedinput'`,
Input={ReactMaskedInput}
mask='1111 1111 1111 1111'
placeholder=' '
/>,
/>,

code: `<Field
label='Credit card number'
Input={ReactMaskedInput}
Expand Down Expand Up @@ -164,20 +165,20 @@ import Fieldset from '@klarna/ui/Fieldset'`,

examples: {
'Two fields': <Fieldset margins>
<Field left size='1/2' name='two-given-name' label='Given name' />
<Field right size='1/2' name='two-middle-name' label='Middle name' />
<Field left size='1/2' label='Given name' />
<Field right size='1/2' label='Middle name' />
</Fieldset>,

Many: <Fieldset margins>
<Field top left size='1/2' name='many-given-name' label='Given name' />
<Field center size='1/4' name='many-middle-name' label='Middle name' />
<Field top right size='1/4' name='many-last-name' label='Last name' />
<Field left square size='1/5' name='many-number' label='Number' />
<Field right square size='4/5' name='many-street-address' label='Street Address' />
<Field left square size='1/3' name='many-pokemon' label='Your favorite pokémon' />
<Field right square size='2/3' name='many-android-iphone' label='Android or iPhone: please explain' />
<Field left bottom size='2/5' name='many-date-of-birth' label='Date of Birth' />
<Field right bottom size='3/5' name='many-mobile-phone-number' label='Mobile phone number' />
<Field top left size='1/2' label='Given name' />
<Field center size='1/4' label='Middle name' />
<Field top right size='1/4' label='Last name' />
<Field left square size='1/5' label='Number' />
<Field right square size='4/5' label='Street Address' />
<Field left square size='1/3' label='Your favorite pokémon' />
<Field right square size='2/3' label='Android or iPhone: please explain' />
<Field left bottom size='2/5' label='Date of Birth' />
<Field right bottom size='3/5' label='Mobile phone number' />
</Fieldset>
}
},
Expand Down
6 changes: 4 additions & 2 deletions Field/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ import compose from 'ramda/src/compose'
import {
overridable,
themeable,
uncontrolled
uncontrolled,
uniqueName
} from '@klarna/higher-order-components'

export PinCode from './PinCode'
Expand Down Expand Up @@ -282,5 +283,6 @@ export default compose(
inputColor: customizations.color_text
}
})),
overridable(defaultStyles)
overridable(defaultStyles),
uniqueName
)(Field)
Loading

0 comments on commit a19f997

Please sign in to comment.