@digicat/components
Advanced tools
@@ -8,7 +8,2 @@ declare module '@digicat/components' { | ||
interface InputProps { | ||
label: string | ||
id: string | ||
error?: string | ||
type?: string | ||
monetary?: bool | ||
} | ||
@@ -15,0 +10,0 @@ |
@@ -31,9 +31,8 @@ "use strict"; | ||
componentId: "o0w38a-0" | ||
})(["border:", ";background-color:", ";color:", ";text-transform:uppercase;font-weight:600;min-width:", ";height:45px;cursor:", ";"], function (_ref) { | ||
})(["border:", ";border-radius:5px;background-color:", ";color:", ";text-transform:uppercase;font-weight:600;min-width:", ";height:45px;cursor:pointer;&:disabled{cursor:default;background-color:", " color:#6b7882;}"], function (_ref) { | ||
var variant = _ref.variant; | ||
return variant === 'outlined' ? "1px solid ".concat(black) : 'none'; | ||
}, function (_ref2) { | ||
var variant = _ref2.variant, | ||
disabled = _ref2.disabled; | ||
return disabled && grey || variant === 'outlined' && white || variant === 'text' && white || black; | ||
var variant = _ref2.variant; | ||
return variant === 'outlined' && white || variant === 'text' && white || black; | ||
}, function (_ref3) { | ||
@@ -46,4 +45,4 @@ var variant = _ref3.variant; | ||
}, function (_ref5) { | ||
var disabled = _ref5.disabled; | ||
return disabled ? 'default' : 'pointer'; | ||
var variant = _ref5.variant; | ||
return variant === 'outlined' || variant === 'text' ? 'white' : '#f0f0f0'; | ||
}); | ||
@@ -50,0 +49,0 @@ |
@@ -22,3 +22,4 @@ "use strict"; | ||
var black = _colors["default"].black; | ||
var black = _colors["default"].black, | ||
grey = _colors["default"].grey; | ||
@@ -43,3 +44,3 @@ var Text = _styledComponents["default"].div.withConfig({ | ||
componentId: "sc-1yeraju-3" | ||
})(["display:flex;flex-flow:column nowrap;margin:2rem;&:hover{box-shadow:10px 10px 4px rgba(0,0,0,0.25);}padding:10px;margin-bottom:1rem;border:1px solid ", ";box-sizing:border-box;width:240px;height:240px;cursor:pointer;"], black); | ||
})(["display:flex;flex-flow:column nowrap;margin:2rem;&:hover{box-shadow:10px 10px 4px rgba(0,0,0,0.25);}padding:10px;margin-bottom:1rem;border:2px solid ", ";border-radius:5px;box-sizing:border-box;width:240px;height:240px;cursor:pointer;"], grey); | ||
@@ -46,0 +47,0 @@ var Card = function Card(_ref) { |
@@ -18,80 +18,14 @@ "use strict"; | ||
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
var errorRed = _colors["default"].errorRed, | ||
black = _colors["default"].black; | ||
grey = _colors["default"].grey; | ||
var Wrapper = _styledComponents["default"].div.withConfig({ | ||
displayName: "Input__Wrapper", | ||
componentId: "sc-1ktwgy8-0" | ||
})(["margin-bottom:20px;display:flex;font-family:'Open Sans',sans-serif;min-height:60px;"]); | ||
var InputWrapper = _styledComponents["default"].div.withConfig({ | ||
displayName: "Input__InputWrapper", | ||
componentId: "sc-1ktwgy8-1" | ||
})(["width:", ";display:flex;flex-direction:column;"], function (_ref) { | ||
var type = _ref.type; | ||
return type === 'date' ? '15%' : '80%'; | ||
}); | ||
var Label = _styledComponents["default"].label.withConfig({ | ||
displayName: "Input__Label", | ||
componentId: "sc-1ktwgy8-2" | ||
})(["width:20%;max-width:20%;text-transform:uppercase;overflow-wrap:break-word;font-weight:600;"]); | ||
var StyledInput = _styledComponents["default"].input.withConfig({ | ||
displayName: "Input__StyledInput", | ||
componentId: "sc-1ktwgy8-3" | ||
})(["border:1px solid ", ";height:30px;padding:5px;"], black); | ||
componentId: "sc-1ktwgy8-0" | ||
})(["border:1px solid ", ";border-radius:5px;height:30px;padding:5px;min-width:350px;"], grey); | ||
var Currency = _styledComponents["default"].span.withConfig({ | ||
displayName: "Input__Currency", | ||
componentId: "sc-1ktwgy8-4" | ||
})(["margin-left:5px;"]); | ||
var ErrorMessage = _styledComponents["default"].p.withConfig({ | ||
displayName: "Input__ErrorMessage", | ||
componentId: "sc-1ktwgy8-5" | ||
})(["color:", ";display:block;height:18px;margin:2px 0;font-size:12px;"], errorRed); | ||
var MonetaryInput = function MonetaryInput(_ref2) { | ||
var id = _ref2.id, | ||
rest = _objectWithoutProperties(_ref2, ["id"]); | ||
return /*#__PURE__*/_react["default"].createElement("div", { | ||
style: { | ||
display: 'flex', | ||
flexDirection: 'row', | ||
alignItems: 'center' | ||
} | ||
}, /*#__PURE__*/_react["default"].createElement(StyledInput, _extends({ | ||
id: id, | ||
type: "number" | ||
}, rest)), /*#__PURE__*/_react["default"].createElement(Currency, null, "GBP")); | ||
var Input = function Input(props) { | ||
return /*#__PURE__*/_react["default"].createElement(StyledInput, props); | ||
}; | ||
var Input = function Input(_ref3) { | ||
var label = _ref3.label, | ||
id = _ref3.id, | ||
monetary = _ref3.monetary, | ||
type = _ref3.type, | ||
error = _ref3.error, | ||
rest = _objectWithoutProperties(_ref3, ["label", "id", "monetary", "type", "error"]); | ||
return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(Label, { | ||
htmlFor: id | ||
}, label), /*#__PURE__*/_react["default"].createElement(InputWrapper, { | ||
type: type | ||
}, monetary ? /*#__PURE__*/_react["default"].createElement(MonetaryInput, _extends({ | ||
id: id | ||
}, rest)) : /*#__PURE__*/_react["default"].createElement(StyledInput, _extends({ | ||
id: id, | ||
type: type | ||
}, rest)), error && /*#__PURE__*/_react["default"].createElement(ErrorMessage, null, error))); | ||
}; | ||
Input.defaultProps = { | ||
@@ -103,9 +37,7 @@ type: 'text', | ||
Input.propTypes = { | ||
label: _propTypes.PropTypes.string.isRequired, | ||
id: _propTypes.PropTypes.string.isRequired, | ||
error: _propTypes.PropTypes.string, | ||
type: _propTypes.PropTypes.string, | ||
monetary: _propTypes.PropTypes.bool | ||
type: _propTypes.PropTypes.string | ||
}; | ||
var _default = Input; | ||
exports["default"] = _default; |
@@ -18,65 +18,15 @@ "use strict"; | ||
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } | ||
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } | ||
var errorRed = _colors["default"].errorRed, | ||
black = _colors["default"].black; | ||
grey = _colors["default"].grey; | ||
var Wrapper = _styledComponents["default"].div.withConfig({ | ||
displayName: "TextArea__Wrapper", | ||
componentId: "sc-1qemw5e-0" | ||
})(["margin-bottom:20px;display:flex;font-family:'Open Sans',sans-serif;min-height:60px;"]); | ||
var AreaWrapper = _styledComponents["default"].div.withConfig({ | ||
displayName: "TextArea__AreaWrapper", | ||
componentId: "sc-1qemw5e-1" | ||
})(["width:80%;display:flex;flex-direction:column;"]); | ||
var Label = _styledComponents["default"].label.withConfig({ | ||
displayName: "TextArea__Label", | ||
componentId: "sc-1qemw5e-2" | ||
})(["width:20%;max-width:20%;text-transform:uppercase;overflow-wrap:break-word;font-weight:600;"]); | ||
var StyledTextArea = _styledComponents["default"].textarea.withConfig({ | ||
displayName: "TextArea__StyledTextArea", | ||
componentId: "sc-1qemw5e-3" | ||
})(["border:1px solid ", ";padding:10px;"], black); | ||
componentId: "sc-1qemw5e-0" | ||
})(["border:1px solid ", ";padding:10px;border-radius:5px;"], grey); | ||
var Currency = _styledComponents["default"].span.withConfig({ | ||
displayName: "TextArea__Currency", | ||
componentId: "sc-1qemw5e-4" | ||
})(["margin-left:5px;"]); | ||
var ErrorMessage = _styledComponents["default"].p.withConfig({ | ||
displayName: "TextArea__ErrorMessage", | ||
componentId: "sc-1qemw5e-5" | ||
})(["color:", ";display:block;height:18px;margin:2px 0;font-size:12px;"], errorRed); | ||
var TextArea = function TextArea(_ref) { | ||
var label = _ref.label, | ||
id = _ref.id, | ||
error = _ref.error, | ||
rest = _objectWithoutProperties(_ref, ["label", "id", "error"]); | ||
return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(Label, { | ||
htmlFor: id | ||
}, label), /*#__PURE__*/_react["default"].createElement(AreaWrapper, null, /*#__PURE__*/_react["default"].createElement(StyledTextArea, _extends({ | ||
id: id, | ||
rows: 15, | ||
cols: 100 | ||
}, rest)), error && /*#__PURE__*/_react["default"].createElement(ErrorMessage, null, error))); | ||
var TextArea = function TextArea(props) { | ||
return /*#__PURE__*/_react["default"].createElement(StyledTextArea, props); | ||
}; | ||
TextArea.defaultProps = { | ||
error: '' | ||
}; | ||
TextArea.propTypes = { | ||
label: _propTypes.PropTypes.string.isRequired, | ||
id: _propTypes.PropTypes.string.isRequired, | ||
error: _propTypes.PropTypes.string | ||
}; | ||
var _default = TextArea; | ||
exports["default"] = _default; |
{ | ||
"name": "@digicat/components", | ||
"version": "0.0.7", | ||
"version": "0.0.8", | ||
"description": "React components for Digital Catapult projects.", | ||
@@ -25,4 +25,3 @@ "license": "Apache-2.0", | ||
"react-test-renderer": "^17.0.1" | ||
}, | ||
"gitHead": "6bd3ce1e8a762e1599a80f14866612b1bd96dab5" | ||
} | ||
} |
@@ -12,4 +12,4 @@ import React from 'react' | ||
variant === 'outlined' ? `1px solid ${black}` : 'none'}; | ||
background-color: ${({ variant, disabled }) => | ||
(disabled && grey) || | ||
border-radius: 5px; | ||
background-color: ${({ variant }) => | ||
(variant === 'outlined' && white) || | ||
@@ -24,3 +24,9 @@ (variant === 'text' && white) || | ||
height: 45px; | ||
cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')}; | ||
cursor: pointer; | ||
&: disabled { | ||
cursor: default; | ||
background-color: ${({ variant }) => | ||
variant === 'outlined' || variant === 'text' ? 'white' : '#f0f0f0'} | ||
color: #6b7882; | ||
} | ||
` | ||
@@ -27,0 +33,0 @@ |
@@ -7,3 +7,3 @@ import React from 'react' | ||
const { black } = colors | ||
const { black, grey } = colors | ||
@@ -42,3 +42,4 @@ const Text = styled.div` | ||
border: 1px solid ${black}; | ||
border: 2px solid ${grey}; | ||
border-radius: 5px; | ||
box-sizing: border-box; | ||
@@ -45,0 +46,0 @@ |
@@ -7,64 +7,14 @@ import React from 'react' | ||
const { errorRed, black } = colors | ||
const { errorRed, grey } = colors | ||
const Wrapper = styled.div` | ||
margin-bottom: 20px; | ||
display: flex; | ||
font-family: 'Open Sans', sans-serif; | ||
min-height: 60px; | ||
` | ||
const InputWrapper = styled.div` | ||
width: ${({ type }) => (type === 'date' ? '15%' : '80%')}; | ||
display: flex; | ||
flex-direction: column; | ||
` | ||
const Label = styled.label` | ||
width: 20%; | ||
max-width: 20%; | ||
text-transform: uppercase; | ||
overflow-wrap: break-word; | ||
font-weight: 600; | ||
` | ||
const StyledInput = styled.input` | ||
border: 1px solid ${black}; | ||
border: 1px solid ${grey}; | ||
border-radius: 5px; | ||
height: 30px; | ||
padding: 5px; | ||
min-width: 350px; | ||
` | ||
const Currency = styled.span` | ||
margin-left: 5px; | ||
` | ||
const Input = props => <StyledInput {...props} /> | ||
const ErrorMessage = styled.p` | ||
color: ${errorRed}; | ||
display: block; | ||
height: 18px; | ||
margin: 2px 0; | ||
font-size: 12px; | ||
` | ||
const MonetaryInput = ({ id, ...rest }) => ( | ||
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}> | ||
<StyledInput id={id} type="number" {...rest} /> | ||
<Currency>GBP</Currency> | ||
</div> | ||
) | ||
const Input = ({ label, id, monetary, type, error, ...rest }) => ( | ||
<Wrapper> | ||
<Label htmlFor={id}>{label}</Label> | ||
<InputWrapper type={type}> | ||
{monetary ? ( | ||
<MonetaryInput id={id} {...rest} /> | ||
) : ( | ||
<StyledInput id={id} type={type} {...rest} /> | ||
)} | ||
{error && <ErrorMessage>{error}</ErrorMessage>} | ||
</InputWrapper> | ||
</Wrapper> | ||
) | ||
Input.defaultProps = { | ||
@@ -77,9 +27,7 @@ type: 'text', | ||
Input.propTypes = { | ||
label: PropTypes.string.isRequired, | ||
id: PropTypes.string.isRequired, | ||
error: PropTypes.string, | ||
type: PropTypes.string, | ||
monetary: PropTypes.bool | ||
type: PropTypes.string | ||
} | ||
export default Input |
@@ -7,62 +7,12 @@ import React from 'react' | ||
const { errorRed, black } = colors | ||
const { errorRed, grey } = colors | ||
const Wrapper = styled.div` | ||
margin-bottom: 20px; | ||
display: flex; | ||
font-family: 'Open Sans', sans-serif; | ||
min-height: 60px; | ||
` | ||
const AreaWrapper = styled.div` | ||
width: 80%; | ||
display: flex; | ||
flex-direction: column; | ||
` | ||
const Label = styled.label` | ||
width: 20%; | ||
max-width: 20%; | ||
text-transform: uppercase; | ||
overflow-wrap: break-word; | ||
font-weight: 600; | ||
` | ||
const StyledTextArea = styled.textarea` | ||
border: 1px solid ${black}; | ||
border: 1px solid ${grey}; | ||
padding: 10px; | ||
border-radius: 5px; | ||
` | ||
const Currency = styled.span` | ||
margin-left: 5px; | ||
` | ||
const TextArea = props => <StyledTextArea {...props} /> | ||
const ErrorMessage = styled.p` | ||
color: ${errorRed}; | ||
display: block; | ||
height: 18px; | ||
margin: 2px 0; | ||
font-size: 12px; | ||
` | ||
const TextArea = ({ label, id, error, ...rest }) => ( | ||
<Wrapper> | ||
<Label htmlFor={id}>{label}</Label> | ||
<AreaWrapper> | ||
<StyledTextArea id={id} rows={15} cols={100} {...rest} /> | ||
{error && <ErrorMessage>{error}</ErrorMessage>} | ||
</AreaWrapper> | ||
</Wrapper> | ||
) | ||
TextArea.defaultProps = { | ||
error: '' | ||
} | ||
TextArea.propTypes = { | ||
label: PropTypes.string.isRequired, | ||
id: PropTypes.string.isRequired, | ||
error: PropTypes.string | ||
} | ||
export default TextArea |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
22771
-56.83%31
-11.43%480
-43.93%