🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

@digicat/components

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@digicat/components - npm Package Compare versions

Comparing version

to
0.0.8

@@ -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