@storybook/design-system - npm Package Compare versions

Comparing version 5.1.27 to 5.1.28-canary.568712e.0

dist/components/header/Header.js

@@ -63,3 +63,3 @@ "use strict";
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  transform: scale(0.84);\n  ", ";\n  .github-btn {\n    font: bold 14px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    height: auto;\n    .gh-btn,\n    .gh-count {\n      padding: 4px 8px;\n    }\n  }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  transform: scale(0.84);\n  margin-left: -10px;\n  margin-right: -10px;\n\n  ", ";\n  .github-btn {\n    font: bold 14px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;\n    height: auto;\n    .gh-btn,\n    .gh-count {\n      padding: 4px 8px;\n    }\n  }\n"]);
 
@@ -66,0 +66,0 @@ _templateObject = function _templateObject() {

dist/components/index.js

@@ -185,2 +185,15 @@ "use strict";
 
+var _FormErrorState = require("./FormErrorState");
+
+Object.keys(_FormErrorState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FormErrorState[key];
+    }
+  });
+});
+
 var _Input = require("./Input");
@@ -187,0 +200,0 @@

dist/components/Input.js

@@ -10,4 +10,6 @@ "use strict";
 });
-exports.Input = Input;
+exports.Input = exports.PureInput = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -19,3 +21,3 @@
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -32,14 +34,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _templateObject21() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: table-row;\n\n    ", ", ", " {\n      display: table-cell;\n    }\n\n    ", " {\n      width: 1px;\n      padding-right: 20px;\n      vertical-align: middle;\n    }\n\n    ", " {\n      width: auto;\n    }\n\n  "]);
+var _Link = require("./Link");
 
-  _templateObject21 = function _templateObject21() {
-    return data;
-  };
+var _WithTooltip = _interopRequireDefault(require("./tooltip/WithTooltip"));
 
-  return data;
-}
+var _TooltipMessage = require("./tooltip/TooltipMessage");
 
 function _templateObject20() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  right: 0;\n  min-width: 45px;\n  top: 50%;\n  transform: translateY(-50%);\n  font-weight: bold;\n  font-size: 11px;\n"]);
 
@@ -54,3 +52,3 @@ _templateObject20 = function _templateObject20() {
 function _templateObject19() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      ", " {\n          box-shadow: ", " 0 0 0 1px inset;\n          &:focus { box-shadow: ", " 0 0 0 1px inset !important;  }\n      }\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 170px;\n"]);
 
@@ -65,3 +63,3 @@ _templateObject19 = function _templateObject19() {
 function _templateObject18() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      ", " {\n        opacity: 0;\n      }\n      ", ":hover + ", ",\n      ", ":focus + ", " {\n        transform: translate3d(0%, -100%, 0);\n        opacity: 1;\n        padding: .25em 1.25em .25em .5em;\n      }\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n"]);
 
@@ -76,3 +74,3 @@ _templateObject18 = function _templateObject18() {
 function _templateObject17() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      ", " {\n        opacity: 0;\n        transform: translate3d(100%, -50%, 0);\n      }\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: table-row;\n\n    ", ", ", " {\n      display: table-cell;\n    }\n\n    ", " {\n      width: 1px;\n      padding-right: 20px;\n      vertical-align: middle;\n    }\n\n    ", " {\n      width: auto;\n    }\n\n  "]);
 
@@ -87,3 +85,3 @@ _templateObject17 = function _templateObject17() {
 function _templateObject16() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n    ", " {\n      color: ", ";\n      background: none;\n      transform: translate3d(0%, -50%, 0);\n      opacity: 1;\n      padding: .25em 1.25em .25em .5em;\n    }\n\n    ", ":hover + ", ",\n    ", ":focus + ", " {\n      opacity: 0;\n      transform: translate3d(100%, -50%, 0);\n      padding: 0;\n    }\n\n    ", "\n\n    ", "\n\n    ", ";\n\n    svg {\n      animation: ", " 700ms ease-out;\n      path { fill: ", "; }\n    }\n  "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n"]);
 
@@ -98,3 +96,3 @@ _templateObject16 = function _templateObject16() {
 function _templateObject15() {
-  var data = (0, _taggedTemplateLiteral2["default"])([" padding-left: 1.75em; "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n      ", " {\n          box-shadow: ", " 0 0 0 1px inset;\n          &:focus { box-shadow: ", " 0 0 0 1px inset !important;  }\n      }\n    "]);
 
@@ -109,3 +107,3 @@ _templateObject15 = function _templateObject15() {
 function _templateObject14() {
-  var data = (0, _taggedTemplateLiteral2["default"])([" padding-left: 2.4em; "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    ", ";\n\n    svg {\n      animation: ", " 700ms ease-out;\n      path { fill: ", "; }\n    }\n  "]);
 
@@ -120,3 +118,3 @@ _templateObject14 = function _templateObject14() {
 function _templateObject13() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n    > svg {\n      transition: all 150ms ease-out;\n      position: absolute;\n      top: 50%;\n      height: 1em;\n      width: 1em;\n  \t\tfont-size: ", "em;\n  \t\tmargin-top: -.5em;\n  \t\tz-index: 1;\n\n      background: transparent;\n\n      path {\n        transition: all 150ms ease-out;\n        fill: ", ";\n      }\n    }\n\n    ", ":focus + svg path {\n      fill: ", ";\n    }\n\n    ", " {\n      padding-left: 2.75em;\n\n      ", ";\n      ", ";\n    }\n    > svg { left: ", "em; }\n\n  "]);
+  var data = (0, _taggedTemplateLiteral2["default"])([" padding-left: 1.75em; "]);
 
@@ -131,3 +129,3 @@ _templateObject13 = function _templateObject13() {
 function _templateObject12() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      top: -4px;\n      right: auto;\n      left: 0;\n      border-radius: ", "px;\n      padding: 6px;\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])([" padding-left: 2.4em; "]);
 
@@ -142,3 +140,3 @@ _templateObject12 = function _templateObject12() {
 function _templateObject11() {
-  var data = (0, _taggedTemplateLiteral2["default"])([" right: 0; "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    > svg {\n      transition: all 150ms ease-out;\n      position: absolute;\n      top: 50%;\n      height: 0.75em;\n      width: 0.75em;\n  \t\tfont-size: ", "em;\n      margin-top: -.375em;\n  \t\tz-index: 1;\n\n      background: transparent;\n\n      path {\n        transition: all 150ms ease-out;\n        fill: ", ";\n      }\n    }\n\n    ", ":focus + svg path {\n      fill: ", ";\n    }\n\n    ", " {\n      padding-left: 2.45em;\n\n      ", ";\n      ", ";\n    }\n    > svg { left: ", "em; }\n\n  "]);
 
@@ -153,3 +151,3 @@ _templateObject11 = function _templateObject11() {
 function _templateObject10() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      font-size: ", "px;\n      line-height: 16px;\n      font-family: ", ";\n      border-radius: 2px;\n      background: rgba(0,0,0,.05);\n      padding: 3px 6px;\n\n      &:focus { box-shadow: ", " 0 0 0 1px inset; }\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    ", " {\n      padding-right: 3.8em;\n    }\n  "]);
 
@@ -164,3 +162,3 @@ _templateObject10 = function _templateObject10() {
 function _templateObject9() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      font-size: ", "px;\n      line-height: 16px;\n      padding: .5em 1em; //28\n      border-radius: 3em;\n      background: transparent;\n\n      box-shadow: ", " 0 0 0 1px inset;\n\n      &:focus { box-shadow: ", " 0 0 0 1px inset; }\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n      font-size: ", "px;\n      line-height: 16px;\n      font-family: ", ";\n      border-radius: 2px;\n      background: rgba(0,0,0,.05);\n      padding: 3px 6px;\n\n      &:focus { box-shadow: ", " 0 0 0 1px inset; }\n    "]);
 
@@ -175,3 +173,3 @@ _templateObject9 = function _templateObject9() {
 function _templateObject8() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      padding: 0;\n      border: none;\n      box-shadow: none;\n      background: none;\n\n      &:focus { box-shadow: none !important; }\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n      font-size: ", "px;\n      line-height: 16px;\n      padding: .5em 1em; //28\n      border-radius: 3em;\n      background: transparent;\n\n      box-shadow: ", " 0 0 0 1px inset;\n\n      &:focus { box-shadow: ", " 0 0 0 1px inset; }\n    "]);
 
@@ -186,3 +184,3 @@ _templateObject8 = function _templateObject8() {
 function _templateObject7() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n      box-shadow: ", " 0 0 0 1px inset;\n\n      &:focus { box-shadow: ", " 0 0 0 1px inset; }\n    "]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n      padding: 0;\n      border: none;\n      box-shadow: none;\n      background: none;\n\n      &:focus { box-shadow: none !important; }\n    "]);
 
@@ -197,3 +195,3 @@ _templateObject7 = function _templateObject7() {
 function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n  position: relative;\n  vertical-align: top;\n  width: 100%;\n\n  ", " {\n    background: ", ";\n    border-radius: 0;\n    color: ", ";\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: 20px;\n    padding: .715em 1em; //40\n\n    &:focus { box-shadow: ", " 0 0 0 1px inset; }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n\n  ", " {\n    position: absolute;\n    top: 50%;\n    right: 1px;\n    margin-left: 1px;\n    transform: translate3d(100%, -50%, 0);\n    transition: all 200ms ease-out;\n    font-family: ", " ;\n    font-size: ", "px;\n    line-height: 1em;\n    opacity: 0;\n    pointer-events: none;\n\n    background: ", ";\n    color: ", ";\n\n    ", "\n    ", "\n  }\n\n  ", "\n\n  ", "\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n      box-shadow: ", " 0 0 0 1px inset;\n\n      &:focus { box-shadow: ", " 0 0 0 1px inset; }\n    "]);
 
@@ -208,3 +206,3 @@ _templateObject6 = function _templateObject6() {
 function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  right: 0;\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-block;\n  position: relative;\n  vertical-align: top;\n  width: 100%;\n\n  ", " {\n    background: ", ";\n    border-radius: 4px;\n    color: ", ";\n    font-family: ", ";\n    font-size: ", "px;\n    line-height: 20px;\n    padding: .715em 1em; //40\n\n    &:focus { box-shadow: ", " 0 0 0 1px inset; }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"]);
 
@@ -273,10 +271,6 @@ _templateObject5 = function _templateObject5() {
 
-var InputText = _styledComponents["default"].input.attrs({
-  type: 'text'
-})(_templateObject4(), _styles.color.mediumdark, _styles.typography.weight.bold, _styles.color.lightest);
+var InputEl = _styledComponents["default"].input(_templateObject4(), _styles.color.mediumdark, _styles.typography.weight.bold, _styles.color.lightest); // prettier-ignore
 
-var Error = _styledComponents["default"].div(_templateObject5()); // prettier-ignore
 
-
-var InputWrapper = _styledComponents["default"].div(_templateObject6(), InputText, _styles.color.lightest, _styles.color.darkest, function (props) {
+var InputWrapper = _styledComponents["default"].div(_templateObject5(), InputEl, _styles.color.lightest, _styles.color.darkest, function (props) {
   return props.appearance === 'code' && _styles.typography.type.code;
@@ -286,29 +280,28 @@ }, function (props) {
 }, _styles.color.primary, function (props) {
-  return props.appearance === 'secondary' && (0, _styledComponents.css)(_templateObject7(), _styles.color.mediumlight, _styles.color.secondary);
+  return props.appearance === 'secondary' && (0, _styledComponents.css)(_templateObject6(), _styles.color.mediumlight, _styles.color.secondary);
 }, function (props) {
-  return props.appearance === 'tertiary' && (0, _styledComponents.css)(_templateObject8());
+  return props.appearance === 'tertiary' && (0, _styledComponents.css)(_templateObject7());
 }, function (props) {
-  return props.appearance === 'pill' && (0, _styledComponents.css)(_templateObject9(), _styles.typography.size.s1, _styles.color.medium, _styles.color.secondary);
+  return props.appearance === 'pill' && (0, _styledComponents.css)(_templateObject8(), _styles.typography.size.s1, _styles.color.medium, _styles.color.secondary);
 }, function (props) {
-  return props.appearance === 'code' && (0, _styledComponents.css)(_templateObject10(), _styles.typography.size.s2 - 1, _styles.typography.type.code, _styles.color.secondary);
-}, Error, function (props) {
-  return props.appearance === 'code' ? _styles.typography.type.code : _styles.typography.type.primary;
-}, _styles.typography.size.s1, function (props) {
-  return props.appearance !== 'tertiary' && 'rgba(255,255,255,.9)';
-}, _styles.color.negative, function (props) {
-  return props.appearance === 'tertiary' && (0, _styledComponents.css)(_templateObject11());
+  return props.appearance === 'code' && (0, _styledComponents.css)(_templateObject9(), _styles.typography.size.s2 - 1, _styles.typography.type.code, _styles.color.secondary);
 }, function (props) {
-  return props.appearance === 'code' && (0, _styledComponents.css)(_templateObject12(), _styles.spacing.borderRadius.small);
+  return props.startingType === 'password' && (0, _styledComponents.css)(_templateObject10(), InputEl);
 }, function (props) {
-  return props.icon && (0, _styledComponents.css)(_templateObject13(), props.appearance === 'pill' ? 0.75 : 1, _styles.color.mediumdark, InputText, _styles.color.darker, InputText, props.appearance === 'pill' && (0, _styledComponents.css)(_templateObject14()), props.appearance === 'tertiary' && (0, _styledComponents.css)(_templateObject15()), props.appearance === 'tertiary' ? 0 : 0.8);
+  return props.icon && (0, _styledComponents.css)(_templateObject11(), props.appearance === 'pill' ? 0.75 : 1, _styles.color.mediumdark, InputEl, _styles.color.darker, InputEl, props.appearance === 'pill' && (0, _styledComponents.css)(_templateObject12()), props.appearance === 'tertiary' && (0, _styledComponents.css)(_templateObject13()), props.appearance === 'tertiary' ? 0 : 0.8);
 }, function (props) {
-  return props.error && (0, _styledComponents.css)(_templateObject16(), Error, _styles.color.negative, InputText, Error, InputText, Error, props.focused && (0, _styledComponents.css)(_templateObject17(), Error), props.appearance === 'code' && (0, _styledComponents.css)(_templateObject18(), Error, InputText, Error, InputText, Error), props.appearance !== 'tertiary' && (0, _styledComponents.css)(_templateObject19(), InputText, _styles.color.negative, _styles.color.negative), _animation.jiggle, _styles.color.negative);
+  return props.error && (0, _styledComponents.css)(_templateObject14(), props.appearance !== 'tertiary' && (0, _styledComponents.css)(_templateObject15(), InputEl, _styles.color.negative, _styles.color.negative), _animation.jiggle, _styles.color.negative);
 }); // prettier-ignore
 
 
-var InputContainer = _styledComponents["default"].div(_templateObject20(), function (props) {
-  return props.orientation === 'horizontal' && (0, _styledComponents.css)(_templateObject21(), LabelWrapper, InputWrapper, LabelWrapper, InputWrapper);
+var InputContainer = _styledComponents["default"].div(_templateObject16(), function (props) {
+  return props.orientation === 'horizontal' && (0, _styledComponents.css)(_templateObject17(), LabelWrapper, InputWrapper, LabelWrapper, InputWrapper);
 });
 
-function Input(_ref) {
+var ErrorTooltip = (0, _styledComponents["default"])(_WithTooltip["default"])(_templateObject18());
+var ErrorTooltipMessage = (0, _styledComponents["default"])(_TooltipMessage.TooltipMessage)(_templateObject19());
+
+var Action = _styledComponents["default"].div(_templateObject20());
+
+var PureInput = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var id = _ref.id,
@@ -323,7 +316,10 @@ value = _ref.value,
       className = _ref.className,
-      focused = _ref.focused,
       lastErrorValue = _ref.lastErrorValue,
-      props = (0, _objectWithoutProperties2["default"])(_ref, ["id", "value", "label", "hideLabel", "orientation", "icon", "error", "appearance", "className", "focused", "lastErrorValue"]);
+      startingType = _ref.startingType,
+      type = _ref.type,
+      onActionClick = _ref.onActionClick,
+      suppressErrorMessage = _ref.suppressErrorMessage,
+      props = (0, _objectWithoutProperties2["default"])(_ref, ["id", "value", "label", "hideLabel", "orientation", "icon", "error", "appearance", "className", "lastErrorValue", "startingType", "type", "onActionClick", "suppressErrorMessage"]);
   var errorId = "".concat(id, "-error");
-  var errorMessage = error;
+  var errorMessage = typeof error === 'function' ? error(value) : error;
 
@@ -336,2 +332,13 @@ if (lastErrorValue) {
 
+  var inputEl = /*#__PURE__*/_react["default"].createElement(InputEl, (0, _extends2["default"])({
+    id: id // Pass the ref to the actual input element so it can be controlled
+    // externally.
+    ,
+    ref: ref,
+    value: value,
+    type: type,
+    "aria-describedby": errorId,
+    "aria-invalid": !!error
+  }, props));
+
   return /*#__PURE__*/_react["default"].createElement(InputContainer, {
@@ -347,20 +354,27 @@ orientation: orientation,
     error: errorMessage,
-    "data-error": error,
+    "data-error": errorMessage,
     icon: icon,
     appearance: appearance,
-    focused: focused
+    startingType: startingType
   }, icon && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
     icon: icon,
     "aria-hidden": true
-  }), /*#__PURE__*/_react["default"].createElement(InputText, (0, _extends2["default"])({
-    id: id,
-    value: value,
-    "aria-describedby": errorId,
-    "aria-invalid": !!error
-  }, props)), /*#__PURE__*/_react["default"].createElement(Error, {
-    id: errorId
-  }, error)));
-}
-
-Input.propTypes = {
+  }), /*#__PURE__*/_react["default"].createElement(ErrorTooltip, {
+    tabIndex: -1,
+    placement: "right",
+    trigger: "none",
+    startOpen: true,
+    tagName: "div",
+    hasChrome: !!errorMessage && !suppressErrorMessage,
+    tooltip: errorMessage && !suppressErrorMessage && /*#__PURE__*/_react["default"].createElement(ErrorTooltipMessage, {
+      desc: errorMessage
+    })
+  }, inputEl), startingType === 'password' && /*#__PURE__*/_react["default"].createElement(Action, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
+    isButton: true,
+    tertiary: true,
+    onClick: onActionClick
+  }, type === 'password' ? 'Show' : 'Hide'))));
+});
+exports.PureInput = PureInput;
+PureInput.propTypes = {
   id: _propTypes["default"].string.isRequired,
@@ -373,8 +387,11 @@ value: _propTypes["default"].string,
   icon: _propTypes["default"].string,
-  error: _propTypes["default"].string,
+  error: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  suppressErrorMessage: _propTypes["default"].bool,
   className: _propTypes["default"].string,
-  focused: _propTypes["default"].bool,
-  lastErrorValue: _propTypes["default"].string
+  lastErrorValue: _propTypes["default"].string,
+  startingType: _propTypes["default"].string,
+  type: _propTypes["default"].string,
+  onActionClick: _propTypes["default"].func
 };
-Input.defaultProps = {
+PureInput.defaultProps = {
   value: '',
@@ -386,5 +403,54 @@ appearance: 'default',
   error: null,
+  suppressErrorMessage: false,
   className: null,
-  focused: false,
-  lastErrorValue: null
+  lastErrorValue: null,
+  startingType: 'text',
+  type: 'text',
+  onActionClick: null
+};
+var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var startingType = _ref2.type,
+      startFocused = _ref2.startFocused,
+      rest = (0, _objectWithoutProperties2["default"])(_ref2, ["type", "startFocused"]);
+
+  var _useState = (0, _react.useState)(startingType),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      type = _useState2[0],
+      setType = _useState2[1];
+
+  var togglePasswordType = (0, _react.useCallback)(function (event) {
+    // Make sure this does not submit a form
+    event.preventDefault();
+
+    if (type === 'password') {
+      setType('text');
+      return;
+    }
+
+    setType('password');
+  }, [type, setType]); // Outside refs take precedence
+
+  var inputRef = ref || (0, _react.useRef)();
+  var didFocusOnStart = (0, _react.useRef)(false);
+  (0, _react.useEffect)(function () {
+    if (inputRef && inputRef.current && startFocused && !didFocusOnStart.current) {
+      inputRef.current.focus();
+      didFocusOnStart.current = true;
+    }
+  }, [inputRef, inputRef.current, didFocusOnStart, didFocusOnStart.current]);
+  return /*#__PURE__*/_react["default"].createElement(PureInput, (0, _extends2["default"])({
+    ref: inputRef,
+    startingType: startingType,
+    type: type,
+    onActionClick: togglePasswordType
+  }, rest));
+});
+exports.Input = Input;
+Input.propTypes = {
+  startFocused: _propTypes["default"].bool,
+  type: _propTypes["default"].string
+};
+Input.defaultProps = {
+  startFocused: false,
+  type: 'text'
 };

dist/components/Link.js

@@ -14,4 +14,2 @@ "use strict";
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -23,4 +21,2 @@
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -34,6 +30,2 @@
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _templateObject10() {
@@ -157,7 +149,11 @@ var data = (0, _taggedTemplateLiteral2["default"])(["\n  background: none;\n  border: none;\n  padding: 0;\n  font: inherit;\n  cursor: pointer;\n  outline: inherit;\n"]);
 
-var LinkButton = _styledComponents["default"].button(_templateObject10()); // The main purpose of this component is to strip certain props that get passed
+var LinkButton = _styledComponents["default"].button(_templateObject10());
+/**
+ * Links can contains text and/or icons. Be careful using only icons, you must provide a text alternative via aria-label for accessibility.
+ */
+
+
+// The main purpose of this component is to strip certain props that get passed
 // down to the styled component, so that we don't end up passing them to a
 // tag which would throw warnings for non-standard props.
-
-
 var LinkComponentPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
@@ -172,32 +168,22 @@ var containsIcon = _ref.containsIcon,
       rest = (0, _objectWithoutProperties2["default"])(_ref, ["containsIcon", "inverse", "isButton", "LinkWrapper", "nochrome", "secondary", "tertiary"]);
+
   // Use the UnstyledLink here to avoid duplicating styles and creating
   // specificity conflicts by first rendering the StyledLink higher up the chain
   // and then re-rendering it through the 'as' prop.
-  var LinkComponent = isButton ? LinkButton : LinkWrapper || UnstyledLink;
-  return /*#__PURE__*/_react["default"].createElement(LinkComponent, rest);
+
+  /* eslint no-else-return: ["error", { allowElseIf: true }] */
+  if (isButton) {
+    return /*#__PURE__*/_react["default"].createElement(LinkButton, (0, _extends2["default"])({}, rest, {
+      ref: ref
+    }));
+  } else if (LinkWrapper) {
+    return /*#__PURE__*/_react["default"].createElement(LinkWrapper, (0, _extends2["default"])({}, rest, {
+      ref: ref
+    }));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(UnstyledLink, (0, _extends2["default"])({}, rest, {
+    ref: ref
+  }));
 });
-var linkStyleProps = {
-  containsIcon: _propTypes["default"].bool,
-  inverse: _propTypes["default"].bool,
-  isButton: _propTypes["default"].bool,
-  LinkWrapper: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].object]),
-  nochrome: _propTypes["default"].bool,
-  secondary: _propTypes["default"].bool,
-  tertiary: _propTypes["default"].bool
-};
-var linkStyleDefaultProps = {
-  isButton: false,
-  containsIcon: false,
-  LinkWrapper: undefined,
-  inverse: false,
-  nochrome: false,
-  secondary: false,
-  tertiary: false
-};
-LinkComponentPicker.propTypes = _objectSpread({}, linkStyleProps);
-LinkComponentPicker.defaultProps = _objectSpread({}, linkStyleDefaultProps);
-/**
- * Links can contains text and/or icons. Be careful using only icons, you must provide a text alternative via aria-label for accessibility.
- */
-
 var Link = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
@@ -220,9 +206,10 @@ var children = _ref2.children,
 exports.Link = Link;
-Link.propTypes = _objectSpread({
-  children: _propTypes["default"].node,
-  withArrow: _propTypes["default"].bool
-}, linkStyleProps);
-Link.defaultProps = _objectSpread({
-  children: null,
-  withArrow: false
-}, linkStyleDefaultProps);
+Link.defaultProps = {
+  withArrow: false,
+  isButton: false,
+  containsIcon: false,
+  secondary: false,
+  tertiary: false,
+  nochrome: false,
+  inverse: false
+};

dist/components/tooltip/Tooltip.js

@@ -57,3 +57,3 @@ "use strict";
 function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  border-style: solid;\n\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  margin-right: ", "px;\n  margin-left: ", "px;\n\n  bottom: ", "px;\n  top: ", "px;\n  right: ", "px;\n  left: ", "px;\n\n  border-bottom-width: ", "px;\n  border-top-width: ", "px;\n  border-right-width: ", "px;\n  border-left-width: ", "px;\n\n  border-top-color: ", ";\n  border-bottom-color: ", ";\n  border-left-color: ", ";\n  border-right-color: ", ";\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  border-style: solid;\n  /**\n   * Rather than choosing whether or not to render this component in the\n   * render function, the visibility is controlled here. The tooltip library\n   * positions this strangely in some cases if we let the render function\n   * handle this logic.\n   */\n  display: ", ";\n\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  margin-right: ", "px;\n  margin-left: ", "px;\n\n  bottom: ", "px;\n  top: ", "px;\n  right: ", "px;\n  left: ", "px;\n\n  border-bottom-width: ", "px;\n  border-top-width: ", "px;\n  border-right-width: ", "px;\n  border-left-width: ", "px;\n\n  border-top-color: ", ";\n  border-bottom-color: ", ";\n  border-left-color: ", ";\n  border-right-color: ", ";\n"]);
 
@@ -76,3 +76,5 @@ _templateObject = function _templateObject() {
 
-var Arrow = _styledComponents["default"].div(_templateObject(), ifPlacementEquals('top', '0', ArrowSpacing), ifPlacementEquals('bottom', '0', ArrowSpacing), ifPlacementEquals('left', '0', ArrowSpacing), ifPlacementEquals('right', '0', ArrowSpacing), ifPlacementEquals('top', ArrowSpacing * -1, 'auto'), ifPlacementEquals('bottom', ArrowSpacing * -1, 'auto'), ifPlacementEquals('left', ArrowSpacing * -1, 'auto'), ifPlacementEquals('right', ArrowSpacing * -1, 'auto'), ifPlacementEquals('top', '0', ArrowSpacing), ifPlacementEquals('bottom', '0', ArrowSpacing), ifPlacementEquals('left', '0', ArrowSpacing), ifPlacementEquals('right', '0', ArrowSpacing), ifPlacementEquals('top', 'white', 'transparent'), ifPlacementEquals('bottom', 'white', 'transparent'), ifPlacementEquals('left', 'white', 'transparent'), ifPlacementEquals('right', 'white', 'transparent'));
+var Arrow = _styledComponents["default"].div(_templateObject(), function (props) {
+  return props.isVisible ? 'block' : 'none';
+}, ifPlacementEquals('top', '0', ArrowSpacing), ifPlacementEquals('bottom', '0', ArrowSpacing), ifPlacementEquals('left', '0', ArrowSpacing), ifPlacementEquals('right', '0', ArrowSpacing), ifPlacementEquals('top', ArrowSpacing * -1, 'auto'), ifPlacementEquals('bottom', ArrowSpacing * -1, 'auto'), ifPlacementEquals('left', ArrowSpacing * -1, 'auto'), ifPlacementEquals('right', ArrowSpacing * -1, 'auto'), ifPlacementEquals('top', '0', ArrowSpacing), ifPlacementEquals('bottom', '0', ArrowSpacing), ifPlacementEquals('left', '0', ArrowSpacing), ifPlacementEquals('right', '0', ArrowSpacing), ifPlacementEquals('top', 'white', 'transparent'), ifPlacementEquals('bottom', 'white', 'transparent'), ifPlacementEquals('left', 'white', 'transparent'), ifPlacementEquals('right', 'white', 'transparent'));
 
@@ -99,3 +101,4 @@ var TooltipWrapper = _styledComponents["default"].div(_templateObject2(), function (props) {
     ref: tooltipRef
-  }, props), hasChrome && /*#__PURE__*/_react["default"].createElement(Arrow, (0, _extends2["default"])({
+  }, props), /*#__PURE__*/_react["default"].createElement(Arrow, (0, _extends2["default"])({
+    isVisible: hasChrome,
     "data-placement": placement,
@@ -107,3 +110,3 @@ ref: arrowRef
 Tooltip.propTypes = {
-  children: _propTypes["default"].node.isRequired,
+  children: _propTypes["default"].node,
   hasChrome: _propTypes["default"].bool,
@@ -120,2 +123,3 @@
 Tooltip.defaultProps = {
+  children: undefined,
   hasChrome: true,
@@ -122,0 +126,0 @@ placement: 'top',

dist/components/tooltip/WithTooltip.js

@@ -68,7 +68,8 @@ "use strict";
 var AsComponent = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var tagName = _ref.tagName,
+  var tabIndex = _ref.tabIndex,
+      tagName = _ref.tagName,
       onClick = _ref.onClick,
       onMouseEnter = _ref.onMouseEnter,
       onMouseLeave = _ref.onMouseLeave,
-      props = (0, _objectWithoutProperties2["default"])(_ref, ["tagName", "onClick", "onMouseEnter", "onMouseLeave"]);
+      props = (0, _objectWithoutProperties2["default"])(_ref, ["tabIndex", "tagName", "onClick", "onMouseEnter", "onMouseLeave"]);
   var Component = tagName || ButtonContainer;
@@ -100,3 +101,3 @@
   if (tagName) {
-    asProps.tabIndex = 0;
+    asProps.tabIndex = tabIndex || 0;
     asProps.onKeyDown = onKeyDown;
@@ -109,2 +110,3 @@ }
 AsComponent.propTypes = {
+  tabIndex: _propTypes["default"].number,
   tagName: _propTypes["default"].string,
@@ -116,2 +118,3 @@ onClick: _propTypes["default"].func,
 AsComponent.defaultProps = {
+  tabIndex: undefined,
   tagName: undefined,
@@ -211,3 +214,3 @@ onClick: undefined,
   hasChrome: _propTypes["default"].bool,
-  tooltip: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]).isRequired,
+  tooltip: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   children: _propTypes["default"].node.isRequired,
@@ -223,2 +226,3 @@ startOpen: _propTypes["default"].bool,
   modifiers: {},
+  tooltip: undefined,
   hasChrome: true,
@@ -225,0 +229,0 @@ startOpen: false,

package.json

 {
   "name": "@storybook/design-system",
-  "version": "5.1.27",
+  "version": "5.1.28-canary.568712e.0",
   "description": "Storybook design system",
@@ -5,0 +5,0 @@ "repository": {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

421217

increased by3.69%

Number of package files

53

increased by6%

Lines of code

5510

increased by7.55%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes