@kiwicom/balkan-ui - npm Package Compare versions

Comparing version 0.0.0-rc5 to 0.1.0-final

.storybook/addons.js

 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
 
 import "@storybook/addon-actions/register";
-import "@storybook/addon-links/register";
+import "@storybook/addon-links/register";
+import "@storybook/addon-knobs/register";

.storybook/config.js

@@ -9,5 +9,6 @@ /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
 function loadStories() {
-  requireAll(require.context("../stories", true, /\.js$/));
+  const req = require.context("../src", true, /.stories.js$/);
+  req.keys().forEach(req);
 }
 
 configure(loadStories, module);

es/Button/index.js

 import _JSXStyle from "styled-jsx/style";
 import * as React from "react";
+import IconWrapper from "./IconWrapper";
+import { colors, fontSizes } from "../constants";
 
-const Button = ({ title, onClick }) => React.createElement(
+const fontColors = {
+  primary: colors.white.normal,
+  secondary: colors.ink.normal
+};
+
+const bgColors = {
+  primary: colors.teal.normal,
+  secondary: colors.cloud.normal
+};
+
+const paddings = {
+  normal: "12px 16px",
+  large: "14px 28px",
+  small: "8px 12px"
+};
+
+const Button = props => React.createElement(
   "button",
-  { onClick: onClick, className: "jsx-305221935"
+  { onClick: props.onClick, disabled: props.isDisabled, className: _JSXStyle.dynamic([["2895249007", [props.isDisabled ? "0.3" : "1", props.isDisabled ? "default" : "pointer", bgColors[props.type], fontColors[props.type], paddings[props.size], props.Icon ? "40px" : "", fontSizes[props.size]]]])
   },
-  title,
+  props.Icon && React.createElement(IconWrapper, { Icon: props.Icon, size: props.size, type: props.type }),
+  props.title,
   React.createElement(_JSXStyle, {
-    styleId: "305221935",
-    css: "button.jsx-305221935{background-color:dodgerblue;color:white;border:none;border-radius:3px;padding:10px;font-size:16px;}"
+    styleId: "2895249007",
+    css: `button.__jsx-style-dynamic-selector{opacity:${props.isDisabled ? "0.3" : "1"};cursor:${props.isDisabled ? "default" : "pointer"};background-color:${bgColors[props.type]};color:${fontColors[props.type]};border:none;border-radius:3px;font-weight:500;padding:${paddings[props.size]};padding-left:${props.Icon ? "40px" : ""};font-size:${fontSizes[props.size]};position:relative;}`,
+    dynamic: [props.isDisabled ? "0.3" : "1", props.isDisabled ? "default" : "pointer", bgColors[props.type], fontColors[props.type], paddings[props.size], props.Icon ? "40px" : "", fontSizes[props.size]]
   })
@@ -13,0 +33,0 @@ );

es/constants.js

@@ -6,28 +6,56 @@ // eslint-disable import/prefer-default-export
 export const colors = {
-  white: "#fff",
-  alabaster: "#f5f7f9",
-  silver: "#e8edf1",
-  casper: "#bac7d5",
-  polo: "#7f91a8",
-  shuttle: "#46515e",
-  smoke: "#171b1e",
-  green: "#127f22",
-  harp: "#e7f3e8",
-  orange: "#e73c04",
-  sand: "#fcf1cd",
-  red: "#d21c1c",
-  linen: "#fae8e8",
-  azure: "#10709f",
-  sky: "#e0f6ff",
-  teal: "#00a991",
-  niagara: "#009c85",
-  gold: "#ffd700"
+  white: {
+    normal: "#fff"
+  },
+  cloud: {
+    light: "#f5f7f9",
+    normal: "#e8edf1"
+  },
+  teal: {
+    light: "#9cdad3",
+    normal: "#00a991",
+    dark: "#00826f"
+  },
+  green: {
+    light: "#e7f3e8",
+    normal: "#127f22",
+    dark: "#065d12"
+  },
+  red: {
+    light: "#fae8e8",
+    normal: "#d21c1c",
+    dark: "#650808"
+  },
+  ink: {
+    lighter: "#bac7d5",
+    light: "#7f91a8",
+    normal: "#46515e",
+    dark: "#171b1e"
+  },
+  orange: {
+    light: "#fcf1cd",
+    normal: "#f9971e",
+    dark: "#a93610"
+  },
+  blue: {
+    light: "#e0f6ff",
+    normal: "#10709f",
+    dark: "#07405c"
+  }
 };
 
 export const fontColors = {
-  primary: colors.shuttle,
-  secondary: colors.polo,
-  attention: colors.smoke,
-  error: colors.red,
-  input: colors.casper
+  primary: colors.ink.normal,
+  secondary: colors.ink.light,
+  attention: colors.ink.dark,
+  error: colors.red.normal,
+  input: colors.ink.lighter,
+  active: colors.teal.normal,
+  help: colors.blue.normal
+};
+
+export const fontSizes = {
+  small: "12px",
+  normal: "14px",
+  large: "16px"
 };

es/Container/Header.js

@@ -5,6 +5,6 @@ import _JSXStyle from "styled-jsx/style";
 
-const Header = ({ title, description }) => React.createElement(
+const Header = ({ icon, title, description }) => React.createElement(
   "div",
   {
-    className: "jsx-2238908931" + " " + "header"
+    className: "jsx-452278183" + " " + "header"
   },
@@ -14,7 +14,14 @@ React.createElement(
     {
-      className: "jsx-2238908931"
+      className: "jsx-452278183"
     },
+    icon && React.createElement(
+      "span",
+      {
+        className: "jsx-452278183" + " " + "icon"
+      },
+      icon
+    ),
     React.createElement(
       Typography,
-      null,
+      { size: "header" },
       title
@@ -29,4 +36,4 @@ )
   React.createElement(_JSXStyle, {
-    styleId: "2238908931",
-    css: ".header.jsx-2238908931{margin-bottom:1em;}h3.jsx-2238908931{font-size:22px;font-weight:500;line-height:1.18;margin-top:0;margin-bottom:7px;}"
+    styleId: "452278183",
+    css: ".header.jsx-452278183{margin-bottom:1em;}.icon.jsx-452278183{margin-right:8px;}h3.jsx-452278183{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:500;line-height:1.18;margin-top:0;margin-bottom:7px;}"
   })
@@ -33,0 +40,0 @@ );

es/Container/Section.js

 import _JSXStyle from "styled-jsx/style";
 import * as React from "react";
+import { colors } from "../constants";
 
+const paddings = {
+  basic: "28px",
+  compact: "16px 28px 17px;"
+};
+
 const Section = props => React.createElement(
   "div",
   {
-    className: "jsx-2867660521" + " " + "section"
+    className: _JSXStyle.dynamic([["604873122", [paddings[props.type || "basic"], colors.white.normal, colors.cloud.normal]]]) + " " + "section"
   },
   props.children,
   React.createElement(_JSXStyle, {
-    styleId: "2867660521",
-    css: ".section.jsx-2867660521{padding:28px;border-radius:3px;background-color:#fff;border:solid 1px #e8edf1;}"
+    styleId: "604873122",
+    css: `.section.__jsx-style-dynamic-selector{padding:${paddings[props.type || "basic"]};border-radius:3px;background-color:${colors.white.normal};border:solid 1px ${colors.cloud.normal};}`,
+    dynamic: [paddings[props.type || "basic"], colors.white.normal, colors.cloud.normal]
   })
@@ -17,5 +24,6 @@ );
 Section.defaultProps = {
-  children: null
+  children: null,
+  type: "basic"
 };
 
 export default Section;

es/index.js

@@ -8,2 +8,4 @@ export { default as Button } from "./Button";
 export { default as Select } from "./Select";
+export { default as SystemMessage } from "./SystemMessage";
+export { default as FieldFeedback } from "./FieldFeedback";
 export { default as Typography } from "./Typography";

es/InputText/index.js

 import _JSXStyle from "styled-jsx/style";
 import * as React from "react";
 import Label from "../Input/Label";
-import MaybeError from "../Input/MaybeError";
+import FieldFeedback from "../FieldFeedback";
 
@@ -15,3 +15,3 @@ const InputText = props => React.createElement(
   ),
-  React.createElement(MaybeError, { error: props.error }),
+  React.createElement(FieldFeedback, { error: props.error, help: props.help }),
   React.createElement(_JSXStyle, {
@@ -18,0 +18,0 @@ styleId: "4214301766",

es/InputTextarea/index.js

 import _JSXStyle from "styled-jsx/style";
 import * as React from "react";
 import Label from "../Input/Label";
-import MaybeError from "../Input/MaybeError";
+import FieldFeedback from "../FieldFeedback";
 
@@ -19,3 +19,3 @@ const InputTextarea = props => React.createElement(
   ),
-  React.createElement(MaybeError, { error: props.error }),
+  React.createElement(FieldFeedback, { error: props.error, help: props.help }),
   React.createElement(_JSXStyle, {
@@ -22,0 +22,0 @@ styleId: "1224277831",

es/Select/index.js

@@ -8,2 +8,3 @@ import _JSXStyle from "styled-jsx/style";
 import { fontColors } from "../constants";
+import FieldFeedback from "../FieldFeedback";
 
@@ -29,11 +30,3 @@ const WHITE_COLOR = "white";
       this.props.onChange(e);
-    }, this.feedbackLine = () => this.props.error && React.createElement(
-      "div",
-      null,
-      React.createElement(
-        Typography,
-        { size: "small", type: "error" },
-        this.props.error
-      )
-    ), this.renderOption = ({ value, label, disabled, visible = true }) => {
+    }, this.renderOption = ({ value, label, disabled, visible = true }) => {
       if (visible) {
@@ -51,3 +44,3 @@ return React.createElement(
   render() {
-    const { disabled, label, options, error, placeholder, required = true } = this.props;
+    const { disabled, label, options, error, help, placeholder, required = true } = this.props;
     const { value } = this.state;
@@ -100,3 +93,3 @@ return React.createElement(
       ),
-      this.feedbackLine(),
+      React.createElement(FieldFeedback, { error: error, help: help }),
       React.createElement(_JSXStyle, {
@@ -103,0 +96,0 @@ styleId: style.__scopedHash,

es/Typography/index.js

@@ -5,8 +5,7 @@ import _JSXStyle from "styled-jsx/style";
 
-const UNIT = "px";
-
 const sizes = {
-  large: `16${UNIT}`,
-  small: `12${UNIT}`,
-  normal: `14${UNIT}`
+  small: "12px",
+  normal: "14px",
+  large: "16px",
+  header: "22px"
 };
@@ -16,2 +15,3 @@
   bold: "font-weight: bold;",
+  medium: "font-weight: 500;",
   normal: ""
@@ -23,9 +23,9 @@ };
   {
-    className: _JSXStyle.dynamic([["731550466", [props.size && sizes[props.size] || "inherit", fontColors[props.type || "primary"], additionalVariants[props.variant || "normal"]]]]) + " " + "typography"
+    className: _JSXStyle.dynamic([["1112443529", [sizes[props.size || "normal"], fontColors[props.type || "primary"], additionalVariants[props.variant || "normal"]]]])
   },
   props.children,
   React.createElement(_JSXStyle, {
-    styleId: "731550466",
-    css: `.typography.__jsx-style-dynamic-selector{font-family:Roboto,-apple-system,sans-serif;font-size:${props.size && sizes[props.size] || "inherit"};color:${fontColors[props.type || "primary"]};${additionalVariants[props.variant || "normal"]};}`,
-    dynamic: [props.size && sizes[props.size] || "inherit", fontColors[props.type || "primary"], additionalVariants[props.variant || "normal"]]
+    styleId: "1112443529",
+    css: `span.__jsx-style-dynamic-selector{font-family:Roboto,-apple-system,sans-serif;font-size:${sizes[props.size || "normal"]};color:${fontColors[props.type || "primary"]};${additionalVariants[props.variant || "normal"]};}`,
+    dynamic: [sizes[props.size || "normal"], fontColors[props.type || "primary"], additionalVariants[props.variant || "normal"]]
   })
@@ -32,0 +32,0 @@ );

lib/Button/index.js

@@ -15,2 +15,8 @@ "use strict";
 
+var _IconWrapper = require("./IconWrapper");
+
+var _IconWrapper2 = _interopRequireDefault(_IconWrapper);
+
+var _constants = require("../constants");
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -20,16 +26,34 @@
 
-var Button = function Button(_ref) {
-  var title = _ref.title,
-      onClick = _ref.onClick;
+var fontColors = {
+  primary: _constants.colors.white.normal,
+  secondary: _constants.colors.ink.normal
+};
+
+
+var bgColors = {
+  primary: _constants.colors.teal.normal,
+  secondary: _constants.colors.cloud.normal
+};
+
+var paddings = {
+  normal: "12px 16px",
+  large: "14px 28px",
+  small: "8px 12px"
+};
+
+var Button = function Button(props) {
   return React.createElement(
     "button",
-    { onClick: onClick, className: "jsx-305221935"
+    { onClick: props.onClick, disabled: props.isDisabled, className: _style2.default.dynamic([["2895249007", [props.isDisabled ? "0.3" : "1", props.isDisabled ? "default" : "pointer", bgColors[props.type], fontColors[props.type], paddings[props.size], props.Icon ? "40px" : "", _constants.fontSizes[props.size]]]])
     },
-    title,
+    props.Icon && React.createElement(_IconWrapper2.default, { Icon: props.Icon, size: props.size, type: props.type }),
+    props.title,
     React.createElement(_style2.default, {
-      styleId: "305221935",
-      css: "button.jsx-305221935{background-color:dodgerblue;color:white;border:none;border-radius:3px;padding:10px;font-size:16px;}"
+      styleId: "2895249007",
+      css: "button.__jsx-style-dynamic-selector{opacity:" + (props.isDisabled ? "0.3" : "1") + ";cursor:" + (props.isDisabled ? "default" : "pointer") + ";background-color:" + bgColors[props.type] + ";color:" + fontColors[props.type] + ";border:none;border-radius:3px;font-weight:500;padding:" + paddings[props.size] + ";padding-left:" + (props.Icon ? "40px" : "") + ";font-size:" + _constants.fontSizes[props.size] + ";position:relative;}",
+      dynamic: [props.isDisabled ? "0.3" : "1", props.isDisabled ? "default" : "pointer", bgColors[props.type], fontColors[props.type], paddings[props.size], props.Icon ? "40px" : "", _constants.fontSizes[props.size]]
     })
   );
 };
+
 exports.default = Button;

lib/constants.js

@@ -11,28 +11,56 @@ "use strict";
 var colors = exports.colors = {
-  white: "#fff",
-  alabaster: "#f5f7f9",
-  silver: "#e8edf1",
-  casper: "#bac7d5",
-  polo: "#7f91a8",
-  shuttle: "#46515e",
-  smoke: "#171b1e",
-  green: "#127f22",
-  harp: "#e7f3e8",
-  orange: "#e73c04",
-  sand: "#fcf1cd",
-  red: "#d21c1c",
-  linen: "#fae8e8",
-  azure: "#10709f",
-  sky: "#e0f6ff",
-  teal: "#00a991",
-  niagara: "#009c85",
-  gold: "#ffd700"
+  white: {
+    normal: "#fff"
+  },
+  cloud: {
+    light: "#f5f7f9",
+    normal: "#e8edf1"
+  },
+  teal: {
+    light: "#9cdad3",
+    normal: "#00a991",
+    dark: "#00826f"
+  },
+  green: {
+    light: "#e7f3e8",
+    normal: "#127f22",
+    dark: "#065d12"
+  },
+  red: {
+    light: "#fae8e8",
+    normal: "#d21c1c",
+    dark: "#650808"
+  },
+  ink: {
+    lighter: "#bac7d5",
+    light: "#7f91a8",
+    normal: "#46515e",
+    dark: "#171b1e"
+  },
+  orange: {
+    light: "#fcf1cd",
+    normal: "#f9971e",
+    dark: "#a93610"
+  },
+  blue: {
+    light: "#e0f6ff",
+    normal: "#10709f",
+    dark: "#07405c"
+  }
 };
 
 var fontColors = exports.fontColors = {
-  primary: colors.shuttle,
-  secondary: colors.polo,
-  attention: colors.smoke,
-  error: colors.red,
-  input: colors.casper
+  primary: colors.ink.normal,
+  secondary: colors.ink.light,
+  attention: colors.ink.dark,
+  error: colors.red.normal,
+  input: colors.ink.lighter,
+  active: colors.teal.normal,
+  help: colors.blue.normal
+};
+
+var fontSizes = exports.fontSizes = {
+  small: "12px",
+  normal: "14px",
+  large: "16px"
 };

lib/Container/Header.js

@@ -24,3 +24,4 @@ "use strict";
 var Header = function Header(_ref) {
-  var title = _ref.title,
+  var icon = _ref.icon,
+      title = _ref.title,
       description = _ref.description;
@@ -30,3 +31,3 @@ return React.createElement(
     {
-      className: "jsx-2238908931" + " " + "header"
+      className: "jsx-452278183" + " " + "header"
     },
@@ -36,7 +37,14 @@ React.createElement(
       {
-        className: "jsx-2238908931"
+        className: "jsx-452278183"
       },
+      icon && React.createElement(
+        "span",
+        {
+          className: "jsx-452278183" + " " + "icon"
+        },
+        icon
+      ),
       React.createElement(
         _Typography2.default,
-        null,
+        { size: "header" },
         title
@@ -51,4 +59,4 @@ )
     React.createElement(_style2.default, {
-      styleId: "2238908931",
-      css: ".header.jsx-2238908931{margin-bottom:1em;}h3.jsx-2238908931{font-size:22px;font-weight:500;line-height:1.18;margin-top:0;margin-bottom:7px;}"
+      styleId: "452278183",
+      css: ".header.jsx-452278183{margin-bottom:1em;}.icon.jsx-452278183{margin-right:8px;}h3.jsx-452278183{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:500;line-height:1.18;margin-top:0;margin-bottom:7px;}"
     })
@@ -55,0 +63,0 @@ );

lib/Container/Section.js

@@ -15,2 +15,4 @@ "use strict";
 
+var _constants = require("../constants");
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -20,2 +22,7 @@
 
+var paddings = {
+  basic: "28px",
+  compact: "16px 28px 17px;"
+};
+
 var Section = function Section(props) {
@@ -25,8 +32,9 @@ return React.createElement(
     {
-      className: "jsx-2867660521" + " " + "section"
+      className: _style2.default.dynamic([["604873122", [paddings[props.type || "basic"], _constants.colors.white.normal, _constants.colors.cloud.normal]]]) + " " + "section"
     },
     props.children,
     React.createElement(_style2.default, {
-      styleId: "2867660521",
-      css: ".section.jsx-2867660521{padding:28px;border-radius:3px;background-color:#fff;border:solid 1px #e8edf1;}"
+      styleId: "604873122",
+      css: ".section.__jsx-style-dynamic-selector{padding:" + paddings[props.type || "basic"] + ";border-radius:3px;background-color:" + _constants.colors.white.normal + ";border:solid 1px " + _constants.colors.cloud.normal + ";}",
+      dynamic: [paddings[props.type || "basic"], _constants.colors.white.normal, _constants.colors.cloud.normal]
     })
@@ -37,5 +45,6 @@ );
 Section.defaultProps = {
-  children: null
+  children: null,
+  type: "basic"
 };
 
 exports.default = Section;

lib/index.js

@@ -70,2 +70,20 @@ "use strict";
 
+var _SystemMessage = require("./SystemMessage");
+
+Object.defineProperty(exports, "SystemMessage", {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_SystemMessage).default;
+  }
+});
+
+var _FieldFeedback = require("./FieldFeedback");
+
+Object.defineProperty(exports, "FieldFeedback", {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_FieldFeedback).default;
+  }
+});
+
 var _Typography = require("./Typography");
@@ -72,0 +90,0 @@

lib/InputText/index.js

@@ -19,5 +19,5 @@ "use strict";
 
-var _MaybeError = require("../Input/MaybeError");
+var _FieldFeedback = require("../FieldFeedback");
 
-var _MaybeError2 = _interopRequireDefault(_MaybeError);
+var _FieldFeedback2 = _interopRequireDefault(_FieldFeedback);
 
@@ -38,3 +38,3 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
     ),
-    React.createElement(_MaybeError2.default, { error: props.error }),
+    React.createElement(_FieldFeedback2.default, { error: props.error, help: props.help }),
     React.createElement(_style2.default, {
@@ -41,0 +41,0 @@ styleId: "4214301766",

lib/InputTextarea/index.js

@@ -19,5 +19,5 @@ "use strict";
 
-var _MaybeError = require("../Input/MaybeError");
+var _FieldFeedback = require("../FieldFeedback");
 
-var _MaybeError2 = _interopRequireDefault(_MaybeError);
+var _FieldFeedback2 = _interopRequireDefault(_FieldFeedback);
 
@@ -42,3 +42,3 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
     ),
-    React.createElement(_MaybeError2.default, { error: props.error }),
+    React.createElement(_FieldFeedback2.default, { error: props.error, help: props.help }),
     React.createElement(_style2.default, {
@@ -45,0 +45,0 @@ styleId: "1224277831",

lib/Select/index.js

@@ -31,2 +31,6 @@ "use strict";
 
+var _FieldFeedback = require("../FieldFeedback");
+
+var _FieldFeedback2 = _interopRequireDefault(_FieldFeedback);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
@@ -72,12 +76,2 @@
       _this.props.onChange(e);
-    }, _this.feedbackLine = function () {
-      return _this.props.error && React.createElement(
-        "div",
-        null,
-        React.createElement(
-          _Typography2.default,
-          { size: "small", type: "error" },
-          _this.props.error
-        )
-      );
     }, _this.renderOption = function (_ref2) {
@@ -109,2 +103,3 @@ var value = _ref2.value,
           error = _props.error,
+          help = _props.help,
           placeholder = _props.placeholder,
@@ -161,3 +156,3 @@ _props$required = _props.required,
         ),
-        this.feedbackLine(),
+        React.createElement(_FieldFeedback2.default, { error: error, help: help }),
         React.createElement(_style2.default, {
@@ -164,0 +159,0 @@ styleId: style.__scopedHash,

lib/Typography/index.js

@@ -21,8 +21,7 @@ "use strict";
 
-var UNIT = "px";
-
 var sizes = {
-  large: "16" + UNIT,
-  small: "12" + UNIT,
-  normal: "14" + UNIT
+  small: "12px",
+  normal: "14px",
+  large: "16px",
+  header: "22px"
 };
@@ -32,2 +31,3 @@
   bold: "font-weight: bold;",
+  medium: "font-weight: 500;",
   normal: ""
@@ -40,9 +40,9 @@ };
     {
-      className: _style2.default.dynamic([["731550466", [props.size && sizes[props.size] || "inherit", _constants.fontColors[props.type || "primary"], additionalVariants[props.variant || "normal"]]]]) + " " + "typography"
+      className: _style2.default.dynamic([["1112443529", [sizes[props.size || "normal"], _constants.fontColors[props.type || "primary"], additionalVariants[props.variant || "normal"]]]])
     },
     props.children,
     React.createElement(_style2.default, {
-      styleId: "731550466",
-      css: ".typography.__jsx-style-dynamic-selector{font-family:Roboto,-apple-system,sans-serif;font-size:" + (props.size && sizes[props.size] || "inherit") + ";color:" + _constants.fontColors[props.type || "primary"] + ";" + additionalVariants[props.variant || "normal"] + ";}",
-      dynamic: [props.size && sizes[props.size] || "inherit", _constants.fontColors[props.type || "primary"], additionalVariants[props.variant || "normal"]]
+      styleId: "1112443529",
+      css: "span.__jsx-style-dynamic-selector{font-family:Roboto,-apple-system,sans-serif;font-size:" + sizes[props.size || "normal"] + ";color:" + _constants.fontColors[props.type || "primary"] + ";" + additionalVariants[props.variant || "normal"] + ";}",
+      dynamic: [sizes[props.size || "normal"], _constants.fontColors[props.type || "primary"], additionalVariants[props.variant || "normal"]]
     })
@@ -49,0 +49,0 @@ );

package.json

 {
   "name": "@kiwicom/balkan-ui",
-  "version": "0.0.0-rc5",
+  "version": "0.1.0-final",
   "scripts": {
@@ -8,5 +8,4 @@ "storybook": "start-storybook -p 6007 -c .storybook",
     "build:lib": "babel --out-dir lib --ignore *.stories.js,*.test.js src",
-    "build:flow": "flow-copy-source -v -i '**/*.stories.js,**/*.test.js' src lib",
-    "build:module":
-      "babel --presets react --plugins styled-jsx/babel,transform-class-properties --no-babelrc --out-dir es --ignore *.stories.js,*.test.js src",
+    "build:flow": "flow-copy-source -v -i '**/*.?(stories|test).js' src lib",
+    "build:module": "babel --presets react --plugins styled-jsx/babel,transform-class-properties --no-babelrc --out-dir es --ignore *.stories.js,*.test.js src",
     "clean": "rimraf lib es",
@@ -16,3 +15,8 @@ "prepare": "npm run build",
   },
-  "keywords": ["blkn", "ui", "library", "component"],
+  "keywords": [
+    "blkn",
+    "ui",
+    "library",
+    "component"
+  ],
   "main": "lib/index.js",
@@ -30,3 +34,5 @@ "module": "es/index.js",
   "devDependencies": {
+    "@kiwicom/icons": "^0.0.1-rc2",
     "@storybook/addon-actions": "^3.3.14",
+    "@storybook/addon-knobs": "^3.3.14",
     "@storybook/react": "^3.3.13",
@@ -48,4 +54,5 @@ "babel-cli": "^6.26.0",
     "prettier": "^1.10.2",
+    "react-storybook-addon-chapters": "2.1.3",
     "rimraf": "^2.6.2"
   }
 }

readme.md

 # BLKN Specific components
 
-Table of Contents:
-
-* [Requirements](#requirements)
-* [How to Develop](#how-to-develop)
-* [How to Test](#how-to-test)
-
-## Requirements
-
-* [Node 8.9+](https://nodejs.org/en/)
-* [Yarn](https://yarnpkg.com/en/)
-
-## How to develop
-
-For local development you can use:
-
-* `yarn storybook`
-
-In case you want to develop in your current project:
-
-* `yarn add @kiwicom/balkan-ui`
-* `yarn watch` in this folder
-* `yarn link` in this folder
-* `yarn link @kiwicom/balkan-ui` in the project where you want to use this project
-
-See [Yarn Link](https://yarnpkg.com/lang/en/docs/cli/link/) documentation for more information.
-
-## How to test
-
-This project uses [Yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/). Please run `yarn test-ci` from the root folder. By doing this we can enforce the same rules across all projects.
+This package is now deprecated. Please see https://www.npmjs.com/package/@kiwicom/orbit-components.

src/Button/index.js

 // @flow
 import * as React from "react";
+import IconWrapper from "./IconWrapper";
+import { colors, fontSizes } from "../constants";
 
@@ -7,15 +9,41 @@ type Props = {
   onClick: (e: SyntheticEvent<HTMLButtonElement>) => void,
+  isDisabled?: boolean,
+  type: "primary" | "secondary",
+  size: "normal" | "large" | "small",
+  Icon?: React.ComponentType<*>,
 };
 
-const Button = ({ title, onClick }: Props) => (
-  <button onClick={onClick}>
-    {title}
+const fontColors = {
+  primary: colors.white.normal,
+  secondary: colors.ink.normal,
+};
+
+const bgColors = {
+  primary: colors.teal.normal,
+  secondary: colors.cloud.normal,
+};
+
+const paddings = {
+  normal: "12px 16px",
+  large: "14px 28px",
+  small: "8px 12px",
+};
+
+const Button = (props: Props) => (
+  <button onClick={props.onClick} disabled={props.isDisabled}>
+    {props.Icon && <IconWrapper Icon={props.Icon} size={props.size} type={props.type} />}
+    {props.title}
     <style jsx>{`
       button {
-        background-color: dodgerblue;
-        color: white;
+        opacity: ${props.isDisabled ? "0.3" : "1"}
+        cursor: ${props.isDisabled ? "default" : "pointer"}
+        background-color: ${bgColors[props.type]}
+        color: ${fontColors[props.type]}
         border: none;
         border-radius: 3px;
-        padding: 10px;
-        font-size: 16px;
+        font-weight: 500;
+        padding: ${paddings[props.size]};
+        padding-left: ${props.Icon ? "40px" : ""}
+        font-size: ${fontSizes[props.size]}
+        position: relative;
       }
@@ -22,0 +50,0 @@ `}</style>

src/constants.js

@@ -6,28 +6,56 @@ // eslint-disable import/prefer-default-export
 export const colors = {
-  white: "#fff",
-  alabaster: "#f5f7f9",
-  silver: "#e8edf1",
-  casper: "#bac7d5",
-  polo: "#7f91a8",
-  shuttle: "#46515e",
-  smoke: "#171b1e",
-  green: "#127f22",
-  harp: "#e7f3e8",
-  orange: "#e73c04",
-  sand: "#fcf1cd",
-  red: "#d21c1c",
-  linen: "#fae8e8",
-  azure: "#10709f",
-  sky: "#e0f6ff",
-  teal: "#00a991",
-  niagara: "#009c85",
-  gold: "#ffd700",
+  white: {
+    normal: "#fff",
+  },
+  cloud: {
+    light: "#f5f7f9",
+    normal: "#e8edf1",
+  },
+  teal: {
+    light: "#9cdad3",
+    normal: "#00a991",
+    dark: "#00826f",
+  },
+  green: {
+    light: "#e7f3e8",
+    normal: "#127f22",
+    dark: "#065d12",
+  },
+  red: {
+    light: "#fae8e8",
+    normal: "#d21c1c",
+    dark: "#650808",
+  },
+  ink: {
+    lighter: "#bac7d5",
+    light: "#7f91a8",
+    normal: "#46515e",
+    dark: "#171b1e",
+  },
+  orange: {
+    light: "#fcf1cd",
+    normal: "#f9971e",
+    dark: "#a93610",
+  },
+  blue: {
+    light: "#e0f6ff",
+    normal: "#10709f",
+    dark: "#07405c",
+  },
 };
 
 export const fontColors = {
-  primary: colors.shuttle,
-  secondary: colors.polo,
-  attention: colors.smoke,
-  error: colors.red,
-  input: colors.casper,
+  primary: colors.ink.normal,
+  secondary: colors.ink.light,
+  attention: colors.ink.dark,
+  error: colors.red.normal,
+  input: colors.ink.lighter,
+  active: colors.teal.normal,
+  help: colors.blue.normal,
 };
+
+export const fontSizes = {
+  small: "12px",
+  normal: "14px",
+  large: "16px",
+};

src/Container/Header.js

@@ -7,2 +7,3 @@ // @flow
 type Props = {
+  icon?: React.Node,
   title: string,
@@ -12,6 +13,7 @@ description?: string,
 
-const Header = ({ title, description }: Props) => (
+const Header = ({ icon, title, description }: Props) => (
   <div className="header">
     <h3>
-      <Typography>{title}</Typography>
+      {icon && <span className="icon">{icon}</span>}
+      <Typography size="header">{title}</Typography>
     </h3>
@@ -23,4 +25,8 @@ {description && <Typography>{description}</Typography>}
       }
+      .icon {
+        margin-right: 8px;
+      }
       h3 {
-        font-size: 22px;
+        display: flex;
+        align-items: center;
         font-weight: 500;
@@ -27,0 +33,0 @@ line-height: 1.18;

src/Container/Section.js

 // @flow
 
 import * as React from "react";
+import { colors } from "../constants";
 
+const paddings = {
+  basic: "28px",
+  compact: "16px 28px 17px;",
+};
+
 type Props = {
   children?: React.Node,
+  type?: $Keys<typeof paddings>,
 };
@@ -14,6 +21,6 @@
       .section {
-        padding: 28px;
+        padding: ${paddings[props.type || "basic"]};
         border-radius: 3px;
-        background-color: #fff;
-        border: solid 1px #e8edf1;
+        background-color: ${colors.white.normal};
+        border: solid 1px ${colors.cloud.normal};
       }
@@ -26,4 +33,5 @@ `}</style>
   children: null,
+  type: "basic",
 };
 
 export default Section;

src/index.js

@@ -10,2 +10,4 @@ // @flow
 export { default as Select } from "./Select";
+export { default as SystemMessage } from "./SystemMessage";
+export { default as FieldFeedback } from "./FieldFeedback";
 export { default as Typography } from "./Typography";

src/InputText/index.js

 // @flow
 import * as React from "react";
 import Label from "../Input/Label";
-import MaybeError from "../Input/MaybeError";
+import FieldFeedback from "../FieldFeedback";
 
@@ -11,2 +11,3 @@ type Props = {
   error?: string,
+  help?: string,
 };
@@ -19,3 +20,3 @@
     </Label>
-    <MaybeError error={props.error} />
+    <FieldFeedback error={props.error} help={props.help} />
     <style jsx>{`
@@ -22,0 +23,0 @@ input {

src/InputTextarea/index.js

 // @flow
 import * as React from "react";
 import Label from "../Input/Label";
-import MaybeError from "../Input/MaybeError";
+import FieldFeedback from "../FieldFeedback";
 
@@ -11,2 +11,3 @@ type Props = {
   error?: string,
+  help?: string,
 };
@@ -19,3 +20,3 @@
     </Label>
-    <MaybeError error={props.error} />
+    <FieldFeedback error={props.error} help={props.help} />
     <style jsx>{`
@@ -22,0 +23,0 @@ textarea {

src/Select/index.js

 // @flow
+
 import * as React from "react";
@@ -8,2 +9,3 @@ import css from "styled-jsx/css";
 import { fontColors } from "../constants";
+import FieldFeedback from "../FieldFeedback";
 
@@ -16,3 +18,3 @@ const WHITE_COLOR = "white";
 type Option = {
-  value: string,
+  value: string | number,
   label?: string,
@@ -25,5 +27,6 @@ disabled?: boolean,
   error?: string,
+  help?: string,
   label?: string,
   onChange: (SyntheticInputEvent<HTMLSelectElement>) => any,
-  options: Array<Option>,
+  options: Array<any>,
   placeholder?: string,
@@ -85,10 +88,2 @@ required?: boolean,
   };
-  feedbackLine = () =>
-    this.props.error && (
-      <div>
-        <Typography size="small" type="error">
-          {this.props.error}
-        </Typography>
-      </div>
-    );
   renderOption = ({ value, label, disabled, visible = true }: Option) => {
@@ -105,3 +100,3 @@ if (visible) {
   render() {
-    const { disabled, label, options, error, placeholder, required = true } = this.props;
+    const { disabled, label, options, error, help, placeholder, required = true } = this.props;
     const { value } = this.state;
@@ -136,3 +131,3 @@ return (
         </label>
-        {this.feedbackLine()}
+        <FieldFeedback error={error} help={help} />
         <style jsx>{style}</style>
@@ -139,0 +134,0 @@ </div>

src/Typography/index.js

@@ -6,8 +6,7 @@ // @flow
 
-const UNIT = "px";
-
 const sizes = {
-  large: `16${UNIT}`,
-  small: `12${UNIT}`,
-  normal: `14${UNIT}`,
+  small: "12px",
+  normal: "14px",
+  large: "16px",
+  header: "22px",
 };
@@ -17,2 +16,3 @@
   bold: "font-weight: bold;",
+  medium: "font-weight: 500;",
   normal: "",
@@ -22,5 +22,5 @@ };
 type Props = {
-  size?: "large" | "small" | "normal",
-  type?: "primary" | "secondary" | "attention" | "error" | "input",
-  variant?: "bold" | "normal",
+  size?: $Keys<typeof sizes>,
+  type?: "primary" | "secondary" | "attention" | "error" | "input" | "active" | "help",
+  variant?: "bold" | "normal" | "medium",
   children: React.Node,
@@ -30,8 +30,8 @@ };
 const Typography = (props: Props) => (
-  <span className="typography">
+  <span>
     {props.children}
     <style jsx>{`
-      .typography {
+      span {
         font-family: Roboto, -apple-system, sans-serif;
-        font-size: ${(props.size && sizes[props.size]) || "inherit"};
+        font-size: ${sizes[props.size || "normal"]};
         color: ${fontColors[props.type || "primary"]};
@@ -38,0 +38,0 @@ ${additionalVariants[props.variant || "normal"]};

New alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of package files

97

increased by32.88%

Lines of code

2685

increased by73.11%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

111086

decreased by-71.47%

Dev dependency count

21

increased by16.67%

Number of medium maintenance alerts

1

increased byInfinity%

Number of lines in readme file

4

decreased by-87.5%

No dependency changes