orcs-design-system 2.0.77 → 2.0.78

package/es/components/DatePicker/index.js

@@ -90,7 +90,15 @@ var defaultProps = {
 var DatePickerContainer = styled.div.withConfig({
   displayName: "DatePicker__DatePickerContainer",
   componentId: "sc-15292wq-0"
-})([".SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:auto;background:none;}.DateRangePickerInput_arrow_svg path{fill:", ";}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:1.4rem;z-index:1;transition:", ";background:", ";color:", ";height:40px;width:110px;padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DayPickerKeyboardShortcuts_panel{color:", ";}.CalendarDay__default{transition:", ";}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:", ";border:1px solid ", ";}.DayPickerKeyboardShortcuts_show__bottomRight{border-radius:0 0 3px 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__topRight{border-radius:0 3px 0 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__bottomRight:before,.DayPickerKeyboardShortcuts_show__topRight:before{border-right:33px solid ", ";transition:", ";}.DayPickerKeyboardShortcuts_show__bottomRight:hover:before,.DayPickerKeyboardShortcuts_show__topRight:hover:before{border-right:33px solid ", ";}.CalendarDay__selected_span,.CalendarDay__hovered_span,.CalendarDay__hovered_span:active{background:", ";border:1px solid ", ";color:", ";}.CalendarDay__hovered_span:hover,.CalendarDay__default:hover{background:", ";border:1px double ", ";color:", ";}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:", ";border:1px solid ", ";}.DateInput_fang{margin-top:1px;}"], themeGet("colors.greyLight"), themeGet("transition.transitionDefault"), themeGet("colors.white"), themeGet("colors.greyDarkest"), themeGet("radii.2"), themeGet("colors.black30"), themeGet("colors.primary"), themeGet("shadows.thinOutline"), themeGet("colors.primary30"), themeGet("colors.primary"), themeGet("shadows.thinOutline"), themeGet("colors.primary30"), themeGet("colors.primary"), themeGet("colors.greyDarkest"), themeGet("transition.transitionDefault"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("transition.transitionDefault"), themeGet("colors.primaryDark"), themeGet("colors.primaryLight"), themeGet("colors.primaryLight"), themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.primaryDarker"), themeGet("colors.primaryDarker"));
+})([".SingleDatePickerInput,.DateRangePickerInput{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;border:0;border-radius:0;background:transparent;}.SingleDatePickerInput__withBorder,.DateRangePickerInput__withBorder{border:none;border-radius:0;}.DateInput{width:auto;background:none;}.DateRangePickerInput_arrow_svg path{fill:", ";}.SingleDatePicker_picker,.DateRangePicker_picker{background:none;z-index:", ";}.DateInput_input{display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;box-shadow:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;font-size:1.4rem;z-index:1;transition:", ";background:", ";color:", ";height:", ";width:", ";padding:5px 12px 6px 12px;border-radius:", ";border:1px solid ", ";&:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", " ", ";border:1px solid ", ";}}.DateInput_input__focused{outline:0;box-shadow:", " ", ";border:1px solid ", ";}.DayPickerKeyboardShortcuts_panel{color:", ";}.CalendarDay__default{transition:", ";}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:", ";border:1px solid ", ";}.DayPickerKeyboardShortcuts_show__bottomRight{border-radius:0 0 3px 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__topRight{border-radius:0 3px 0 0;overflow:hidden;}.DayPickerKeyboardShortcuts_show__bottomRight:before,.DayPickerKeyboardShortcuts_show__topRight:before{border-right:33px solid ", ";transition:", ";}.DayPickerKeyboardShortcuts_show__bottomRight:hover:before,.DayPickerKeyboardShortcuts_show__topRight:hover:before{border-right:33px solid ", ";}.CalendarDay__selected_span,.CalendarDay__hovered_span,.CalendarDay__hovered_span:active{background:", ";border:1px solid ", ";color:", ";}.CalendarDay__hovered_span:hover,.CalendarDay__default:hover{background:", ";border:1px double ", ";color:", ";}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:", ";border:1px solid ", ";}.DateInput_fang{margin-top:1px;z-index:", ";}"], themeGet("colors.greyLight"), function (props) {
+  return props.zIndex ? props.zIndex : "1";
+}, themeGet("transition.transitionDefault"), themeGet("colors.white"), themeGet("colors.greyDarkest"), function (props) {
+  return props.height ? props.height : "40px";
+}, function (props) {
+  return props.width ? props.width : "110px";
+}, themeGet("radii.2"), themeGet("colors.black30"), themeGet("colors.primary"), themeGet("shadows.thinOutline"), themeGet("colors.primary30"), themeGet("colors.primary"), themeGet("shadows.thinOutline"), themeGet("colors.primary30"), themeGet("colors.primary"), themeGet("colors.greyDarkest"), themeGet("transition.transitionDefault"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("transition.transitionDefault"), themeGet("colors.primaryDark"), themeGet("colors.primaryLight"), themeGet("colors.primaryLight"), themeGet("colors.white"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.primaryDarker"), themeGet("colors.primaryDarker"), function (props) {
+  return props.zIndex ? props.zIndex + 1 : "2";
+});
 /**
  *
  * Datepicker uses airbnb's react datepicker under the hood. This is just a wrapper to override styles, the only props you need to specify is either single or range. For all functionality and additional required props refer to documentation here: <https://github.com/airbnb/react-dates>
@@ -113,9 +121,16 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           single = _this$props.single,
           range = _this$props.range,
-          pickerProps = _objectWithoutProperties(_this$props, ["single", "range"]);
+          width = _this$props.width,
+          height = _this$props.height,
+          zIndex = _this$props.zIndex,
+          pickerProps = _objectWithoutProperties(_this$props, ["single", "range", "width", "height", "zIndex"]);
 
-      return /*#__PURE__*/React.createElement(DatePickerContainer, null, single ? /*#__PURE__*/React.createElement(SingleDatePicker, pickerProps) : range ? /*#__PURE__*/React.createElement(DateRangePicker, pickerProps) : null);
+      return /*#__PURE__*/React.createElement(DatePickerContainer, {
+        width: width,
+        height: height,
+        zIndex: zIndex
+      }, single ? /*#__PURE__*/React.createElement(SingleDatePicker, pickerProps) : range ? /*#__PURE__*/React.createElement(DateRangePicker, pickerProps) : null);
     }
   }]);
 
@@ -157,6 +172,12 @@ DatePicker.propTypes = _objectSpread({
   /** Date format */
   displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
+  /** For specifying width of input (specify units) */
+  width: PropTypes.string,
+
+  /** For specifying height of input (specify units) */
+  height: PropTypes.string,
+
   /**
    * Should not be visible
    * @ignore
@@ -608,6 +629,20 @@ DatePicker.__docgenInfo = {
       },
       "required": false,
       "description": "Input focused state"
+    },
+    "width": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "For specifying width of input (specify units)"
+    },
+    "height": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "For specifying height of input (specify units)"
     }
   },
   "composes": ["lodash/omit"]

package/es/components/Select/index.js

@@ -40,9 +40,11 @@ var Label = styled("label").withConfig({
   componentId: "bfi43f-1"
 })(function (props) {
   return css({
+    display: "block",
     color: props.inverted ? "white" : "greyDarkest",
-    fontWeight: "2",
-    fontSize: "1"
+    fontSize: "1",
+    fontWeight: props.bold ? "2" : "1",
+    mb: "xs"
   });
 });
 /**
@@ -108,7 +110,6 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
       return _objectSpread(_objectSpread({}, provided), {}, {
         opacity: state.isDisabled ? 0.7 : 1,
         color: props.inverted ? themeGet("colors.greyLighter") : themeGet("colors.grey")(props),
-        marginTop: props.label ? themeGet("space.s")(props) : "0",
         fontSize: themeGet("fontSizes.1")(props)
       });
     },
@@ -206,6 +207,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     "data-testid": props["data-testid"]
   }, SelectStyles), props.label && /*#__PURE__*/React.createElement(Label, {
     inverted: props.inverted,
+    bold: props.bold,
     htmlFor: props.inputId
   }, props.label), props.selectType === "createable" ? /*#__PURE__*/React.createElement(ReactCreateableSelect, _extends({
     ref: ref,
@@ -234,6 +236,9 @@ Select.propTypes = {
   /** Specifies the label for the `Select` */
   label: PropTypes.string,
 
+  /** Makes label bold */
+  bold: PropTypes.bool,
+
   /** Specifies the ID for the rendered Select box. If you use the label prop label will automatically point to this ID. */
   inputId: PropTypes.string,
 
@@ -329,6 +334,13 @@ Select.__docgenInfo = {
       "required": false,
       "description": "Specifies the label for the `Select`"
     },
+    "bold": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Makes label bold"
+    },
     "inputId": {
       "type": {
         "name": "string"

package/es/components/TextInput/index.js

@@ -74,7 +74,9 @@ var NumberInput = styled(NumberFormat).attrs(function (props) {
 var Label = styled.label.withConfig({
   displayName: "TextInput__Label",
   componentId: "shde0o-3"
-})(["display:block;z-index:2;text-align:left;font-size:1.4rem;transition:", ";padding-right:", ";margin-bottom:", ";color:", ";", ";", ";"], themeGet("transition.transitionDefault"), function (props) {
+})(["display:block;z-index:2;text-align:left;font-size:", ";font-weight:", ";transition:", ";padding-right:", ";margin-bottom:", ";color:", ";", ";", ";"], themeGet("fontSizes.1"), function (props) {
+  return props.bold ? themeGet("fontWeights.2") : themeGet("fontWeights.1");
+}, themeGet("transition.transitionDefault"), function (props) {
   return props.floating && props.iconRight ? "40px" : "12px";
 }, function (props) {
   return props.floating ? 0 : themeGet("space.xs");
@@ -93,6 +95,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var inverted = props.inverted,
       floating = props.floating,
       id = props.id,
+      bold = props.bold,
       label = props.label,
       invalid = props.invalid,
       valid = props.valid,
@@ -118,6 +121,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     inverted: inverted,
     invalid: invalid,
     valid: valid,
+    bold: bold,
     htmlFor: id,
     mandatory: mandatory
   }, label) : null, numberProps ? /*#__PURE__*/React.createElement(NumberInput, _extends({
@@ -130,6 +134,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     floating: floating,
     invalid: invalid,
     valid: valid,
+    bold: bold,
     htmlFor: id,
     mandatory: mandatory,
     iconRight: iconRight,
@@ -159,6 +164,9 @@ TextInput.propTypes = {
   /** Specifies the text for the label. */
   label: PropTypes.string,
 
+  /** Makes label text bold */
+  bold: PropTypes.bool,
+
   /** Specifies the helper/example text for the placeholder. */
   placeholder: PropTypes.string,
 
@@ -217,6 +225,13 @@ TextInput.__docgenInfo = {
       "required": false,
       "description": "Specifies the text for the label."
     },
+    "bold": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Makes label text bold"
+    },
     "placeholder": {
       "type": {
         "name": "string"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "2.0.77",
+  "version": "2.0.78",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",