@digicat/components - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

index.d.ts

@@ -8,7 +8,2 @@ declare module '@digicat/components' {
   interface InputProps {
-    label: string
-    id: string
-    error?: string
-    type?: string
-    monetary?: bool
   }
@@ -15,0 +10,0 @@

lib/Button/Button.js

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

lib/Card/Card.js

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

lib/Input/Input.js

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

lib/TextArea/TextArea.js

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

package.json

 {
   "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"
+  }
 }

src/Button/Button.js

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

src/Card/Card.js

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

src/Input/Input.js

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

src/TextArea/TextArea.js

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

No alert changes

Worsened metrics

Total package byte prevSize

22771

-56.83%

Number of package files

31

-11.43%

Lines of code

480

-43.93%

No dependency changes