Merge branch 'master' of https://github.com/yldio/joyent-portal
This commit is contained in:
JUDIT GRESKOVITS
commit
4866b3585f
@ -11,7 +11,7 @@ const {
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
remcalc,
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
@ -19,23 +19,37 @@ const {
|
||||
} = composers;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
default: styled,
|
||||
css
|
||||
} = Styled;
|
||||
|
||||
const successBakcground = css`
|
||||
background-color: ${colors.brandSecondary};
|
||||
background-image: url("./input-confirm.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 98% 20px;
|
||||
`;
|
||||
|
||||
const defaultBackground = css`
|
||||
background-color: ${colors.brandSecondary};
|
||||
`;
|
||||
|
||||
const Label = styled.label`
|
||||
color: ${props => props.error ? colors.alert : colors.fonts.regular}
|
||||
`;
|
||||
|
||||
const InputField = styled.input`
|
||||
background: ${colors.brandSecondary};
|
||||
${baseBox()};
|
||||
|
||||
${props => props.success ? successBakcground : defaultBackground }
|
||||
|
||||
border-color: ${props => props.error ? colors.alert : 'auto'}
|
||||
color: ${props => props.error ? colors.alert : colors.fonts.semibold}
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
padding: ${remcalc('15 18')};
|
||||
visibility: visible;
|
||||
width: 100%;
|
||||
${baseBox()};
|
||||
border-color: ${props => props.error ? colors.alert : ''};
|
||||
|
||||
&:focus {
|
||||
border-color: ${boxes.border.checked};
|
||||
@ -71,6 +85,7 @@ const Input = ({
|
||||
selectionDirection,
|
||||
spellCheck,
|
||||
style,
|
||||
success,
|
||||
tabIndex,
|
||||
type,
|
||||
value
|
||||
@ -106,6 +121,7 @@ const Input = ({
|
||||
required={required}
|
||||
selectionDirection={selectionDirection}
|
||||
spellCheck={spellCheck}
|
||||
success={success}
|
||||
tabIndex={tabIndex}
|
||||
type={type}
|
||||
value={value}
|
||||
@ -137,6 +153,7 @@ Input.propTypes = {
|
||||
selectionDirection: React.PropTypes.string,
|
||||
spellCheck: React.PropTypes.bool,
|
||||
style: React.PropTypes.object,
|
||||
success: React.PropTypes.bool,
|
||||
tabIndex: React.PropTypes.string,
|
||||
type: React.PropTypes.string,
|
||||
value: React.PropTypes.string
|
||||
|
||||
@ -28,8 +28,15 @@ storiesOf('Input', module)
|
||||
<Base>
|
||||
<Input
|
||||
error="Somethings missing"
|
||||
placeholder="There was an error"
|
||||
value="alexw/makeusproud.com"
|
||||
/>
|
||||
</Base>
|
||||
))
|
||||
.add('Success', () => (
|
||||
<Base>
|
||||
<Input
|
||||
success
|
||||
value="alexw@makeusproud.com"
|
||||
/>
|
||||
</Base>
|
||||
));
|
||||
@ -6,15 +6,18 @@ const {
|
||||
|
||||
const Tabs = require('./');
|
||||
const Tab = require('./tab');
|
||||
const Base = require('../base');
|
||||
|
||||
storiesOf('Tabs', module)
|
||||
.add('Default', () => (
|
||||
<Tabs name='my-tab-group'>
|
||||
<Tab title='Containers'>
|
||||
<h1>Containers</h1>
|
||||
</Tab>
|
||||
<Tab title='Users'>
|
||||
<h1>User</h1>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
<Base>
|
||||
<Tabs name='my-tab-group'>
|
||||
<Tab title='Your Dashboard'>
|
||||
<h1>Containers</h1>
|
||||
</Tab>
|
||||
<Tab title='YLD'>
|
||||
<h1>User</h1>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</Base>
|
||||
));
|
||||
@ -10,7 +10,8 @@ const {
|
||||
} = composers;
|
||||
|
||||
const {
|
||||
boxes
|
||||
boxes,
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
@ -44,9 +45,8 @@ const StyledRadio = styled.input`
|
||||
|
||||
&:checked {
|
||||
& + .${classNames.label} {
|
||||
background: #FAFAFA;
|
||||
background: ${colors.brandInactive};
|
||||
border-bottom-width: 0;
|
||||
padding-bottom: ${remcalc(11)};
|
||||
|
||||
${moveZ({
|
||||
amount: 1
|
||||
@ -60,16 +60,12 @@ const StyledRadio = styled.input`
|
||||
`;
|
||||
|
||||
const StyledLabel = styled.label`
|
||||
background: #F2F2F2;
|
||||
border: ${boxes.border.unchecked};
|
||||
color: #646464;
|
||||
background: transparent;
|
||||
border: 1px solid #D8D8D8;
|
||||
display: inline-block;
|
||||
font-size: ${remcalc(20)};
|
||||
left: 1px;
|
||||
margin-left: -1px;
|
||||
margin-bottom: 0;
|
||||
padding: ${remcalc(10)};
|
||||
position: relative;
|
||||
padding: ${remcalc('12 25')};
|
||||
margin-right: 0.5rem;
|
||||
vertical-align: bottom;
|
||||
`;
|
||||
|
||||
@ -82,14 +78,15 @@ const StyledPanel = styled.div`
|
||||
`;
|
||||
|
||||
const StyledContent = styled.div`
|
||||
background: #FAFAFA;
|
||||
background: ${colors.brandInactive};
|
||||
border: ${boxes.border.unchecked};
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 -1px 26px 0 rgba(0, 0, 0, 0.2);
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: ${remcalc(16)};
|
||||
margin-top: ${remcalc(-9)};
|
||||
padding: ${remcalc('0 20')};
|
||||
padding: ${remcalc('20 25')};
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
|
||||
@ -83,6 +83,13 @@ const StyledInput1 = styled.input`
|
||||
}
|
||||
`;
|
||||
|
||||
/*
|
||||
TODO: Remove !important - it is used to overirde a global style
|
||||
*/
|
||||
const StyledLabel = styled.label`
|
||||
margin-bottom: 0 !important;
|
||||
`;
|
||||
|
||||
const Toggle = ({
|
||||
checked,
|
||||
className,
|
||||
@ -120,13 +127,13 @@ const Toggle = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<label
|
||||
<StyledLabel
|
||||
htmlFor={customProps.id}
|
||||
key={index}
|
||||
>
|
||||
{InputVarients[`input_${index}`]}
|
||||
<StyledText>{option.label}</StyledText>
|
||||
</label>
|
||||
</StyledLabel>
|
||||
);
|
||||
})}
|
||||
</StyledDiv>
|
||||
|
||||
@ -4,27 +4,34 @@ const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Base = require('../base');
|
||||
const Toggle = require('./');
|
||||
|
||||
storiesOf('Toggle', module)
|
||||
.add('default', () => (
|
||||
<Toggle checked />
|
||||
<Base>
|
||||
<Toggle checked />
|
||||
</Base>
|
||||
))
|
||||
.add('checked', () => (
|
||||
<Toggle
|
||||
defaultChecked
|
||||
options={[
|
||||
{
|
||||
label: 'Topology',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
label: 'List',
|
||||
checked: false
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<Base>
|
||||
<Toggle
|
||||
defaultChecked
|
||||
options={[
|
||||
{
|
||||
label: 'Topology',
|
||||
checked: true
|
||||
},
|
||||
{
|
||||
label: 'List',
|
||||
checked: false
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</Base>
|
||||
))
|
||||
.add('no props', () => (
|
||||
<Toggle />
|
||||
<Base>
|
||||
<Toggle />
|
||||
</Base>
|
||||
));
|
||||
24
ui/src/shared/assets/input-confirm.svg
Normal file
24
ui/src/shared/assets/input-confirm.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icon: confirmation</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<circle id="path-1" cx="9" cy="9" r="9"></circle>
|
||||
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="18" height="18" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
</defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="ui-components-revised" transform="translate(-1145.000000, -1341.000000)">
|
||||
<g id="single-field-line" transform="translate(801.000000, 45.000000)">
|
||||
<g id="text-field-+-confirmation" transform="translate(0.000000, 1254.000000)">
|
||||
<g id="icon:-confirmation" transform="translate(344.000000, 42.000000)">
|
||||
<use id="Oval" stroke="#00AF66" mask="url(#mask-2)" stroke-width="4" xlink:href="#path-1"></use>
|
||||
<polygon id="tick" fill="#00AF66" points="12.017 5.00007 8.121 10.33607 6.634 8.22707 5 9.37907 8.091 13.76807 13.632 6.17907"></polygon>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Loading…
Reference in New Issue
Block a user