@auth0/cosmos - npm Package Compare versions

Comparing version 0.16.2 to 0.17.0

_helpers/avatar-url.js

@@ -10,3 +10,3 @@ 'use strict';
 var initialsAvatar = function initialsAvatar(initials) {
-  return encodeURIComponent('https://cdn.auth0.com/avatars/' + initials + '.png');
+  return initials ? encodeURIComponent('https://cdn.auth0.com/avatars/' + initials.toLowerCase() + '.png') : '404';
 };
@@ -18,9 +18,7 @@
 
-function avatarUrl(image, email, initials) {
-  var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 480;
+function avatarUrl(email, initials) {
+  var size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 480;
 
-  if (image) return image;
-
   var hash = md5(email.toLowerCase());
-  return urlTemplate(hash, initials.toLowerCase(), size);
+  return urlTemplate(hash, initials, size);
 }

atoms/avatar/avatar.js

@@ -10,2 +10,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _templateObject = _taggedTemplateLiteral(['\n  min-width: ', ';\n  width: ', ';\n  height: ', ';\n  background-color: ', ';\n  border: ', ';\n  border-radius: ', ';\n\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n\n  /* This allows to pass an SVG tag to the image prop and it will render correctly. This is not needed. We can remove this if we change the "image" prop to only accept a string */\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n\n  ', ' {\n    line-height: 0;\n    /* Try to remove line-height and set display: inline-flex; */\n  }\n'], ['\n  min-width: ', ';\n  width: ', ';\n  height: ', ';\n  background-color: ', ';\n  border: ', ';\n  border-radius: ', ';\n\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n\n  /* This allows to pass an SVG tag to the image prop and it will render correctly. This is not needed. We can remove this if we change the "image" prop to only accept a string */\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n\n  ', ' {\n    line-height: 0;\n    /* Try to remove line-height and set display: inline-flex; */\n  }\n']);
@@ -45,2 +47,10 @@
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var PLACEHOLDERS = {
@@ -60,34 +70,106 @@ USER: 'https://cdn.auth0.com/website/cosmos/avatar-user-default.svg',
 
-var getImageForAvatar = function getImageForAvatar(props) {
-  if (props.icon) return _react2.default.createElement(_icon2.default, { name: props.icon, size: iconSizes[props.size] });
-  if (props.email && props.initials) return _react2.default.createElement(_cosmos.Image, {
-    width: '100%',
-    height: '100%',
-    fit: 'cover',
-    source: (0, _avatarUrl2.default)(props.image, props.email, props.initials)
-  });
-  if (typeof props.image === 'string') {
-    return _react2.default.createElement(_cosmos.Image, { width: '100%', height: '100%', fit: 'cover', source: props.image });
-  }
+var sources = {
+  image: 'image',
+  fallback: 'fallback',
+  gravatar: 'gravatar',
+  icon: 'icon'
+};
 
-  if (!props.image) return _react2.default.createElement(_cosmos.Image, {
+var imageForAvatar = function imageForAvatar(source, handleError) {
+  if (_react2.default.isValidElement(source)) return source;
+
+  return _react2.default.createElement(_cosmos.Image, {
     width: '100%',
     height: '100%',
     fit: 'cover',
-    source: props.type === 'user' ? PLACEHOLDERS.USER : PLACEHOLDERS.RESOURCE
+    src: source,
+    onError: function onError(event) {
+      event.target.src = null;
+      event.target.onError = undefined;
+      handleError(event);
+    }
   });
-
-  return props.image;
 };
 
-var Avatar = function Avatar(props) {
-  var image = getImageForAvatar(props);
+var getImageForAvatar = function getImageForAvatar(props, source, onError) {
+  var errorHandler = function errorHandler(_ref) {
+    var discard = _ref.discard;
+    return function (event) {
+      return onError(discard, event);
+    };
+  };
 
-  return _react2.default.createElement(
-    Avatar.Element,
-    _extends({ type: props.type, size: props.size }, (0, _automationAttribute2.default)('avatar'), props),
-    image
-  );
+  switch (source) {
+    case sources.icon:
+      return _react2.default.createElement(_icon2.default, { name: props.icon, size: iconSizes[props.size] });
+    case sources.gravatar:
+      return imageForAvatar((0, _avatarUrl2.default)(props.email, props.initials), errorHandler({ discard: sources.gravatar }));
+    case sources.image:
+      return imageForAvatar(props.image, errorHandler({ discard: sources.image }));
+    default:
+      return imageForAvatar(props.type === 'user' ? PLACEHOLDERS.USER : PLACEHOLDERS.RESOURCE, onError);
+  }
 };
 
+var Avatar = function (_React$Component) {
+  _inherits(Avatar, _React$Component);
+
+  function Avatar(props) {
+    _classCallCheck(this, Avatar);
+
+    var _this = _possibleConstructorReturn(this, (Avatar.__proto__ || Object.getPrototypeOf(Avatar)).call(this, props));
+
+    _this.state = { imageErrored: false, gravatarErrored: false };
+    _this.discardSource = _this.discardSource.bind(_this);
+    return _this;
+  }
+
+  _createClass(Avatar, [{
+    key: 'discardSource',
+    value: function discardSource(source) {
+      var stateKey = source + 'Errored';
+      this.setState(_defineProperty({}, stateKey, true));
+    }
+  }, {
+    key: 'getSource',
+    value: function getSource() {
+      var _state = this.state,
+          imageErrored = _state.imageErrored,
+          gravatarErrored = _state.gravatarErrored;
+      var _props = this.props,
+          email = _props.email,
+          initials = _props.initials,
+          icon = _props.icon,
+          image = _props.image;
+
+
+      if (icon) return sources.icon;
+      if (imageErrored && gravatarErrored) return sources.fallback;
+      if (imageErrored || !image) {
+        if (email || initials) return sources.gravatar;
+        return sources.fallback;
+      }
+
+      return sources.image;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var source = this.getSource();
+      var image = getImageForAvatar(this.props, this.getSource(), this.discardSource);
+
+      return _react2.default.createElement(
+        Avatar.Element,
+        _extends({
+          type: this.props.type,
+          size: this.props.size
+        }, (0, _automationAttribute2.default)('avatar'), this.props),
+        image
+      );
+    }
+  }]);
+
+  return Avatar;
+}(_react2.default.Component);
+
 Avatar.Element = _styled2.default.span(_templateObject, function (props) {
@@ -94,0 +176,0 @@ return _cosmosTokens.misc.avatar[props.size];

atoms/checkbox/checkbox.js

@@ -11,3 +11,3 @@ 'use strict';
 var _templateObject = _taggedTemplateLiteral([''], ['']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  ', ';\n\n  display: flex;\n  position: relative;\n  cursor: pointer;\n  margin-bottom: 0;\n  font-weight: ', ';\n  padding-left: ', ';\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  pointer-events: ', ';\n\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  ', ' {\n    opacity: ', ';\n  }\n\n  ', ' {\n    position: absolute;\n    top: 0;\n    left: 0;\n    transform: translateY(20%);\n    height: 16px;\n    width: 16px;\n    background-color: ', ';\n    border: 1px solid\n      ', ';\n    box-shadow: inset 0 1px 2px 0\n      ', ';\n    border-radius: 2px;\n  }\n\n  &:hover input ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ';\n  }\n\n  input:checked ~ ', ' {\n    background-color: ', ';\n    border: 1px solid ', ';\n  }\n\n  input:focus ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ', 0 0 0 2px ', ';\n  }\n\n  ', ':after {\n    content: \'\';\n    position: absolute;\n    display: none;\n  }\n\n  input:checked ~ ', ':after {\n    display: block;\n  }\n\n  ', ':after {\n    box-sizing: content-box;\n    width: 4px;\n    height: 8px;\n    border: solid ', ';\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg) translate(-50%, -50%);\n    left: 20%;\n    top: 50%;\n  }\n'], ['\n  ', ';\n\n  display: flex;\n  position: relative;\n  cursor: pointer;\n  margin-bottom: 0;\n  font-weight: ', ';\n  padding-left: ', ';\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  pointer-events: ', ';\n\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  ', ' {\n    opacity: ', ';\n  }\n\n  ', ' {\n    position: absolute;\n    top: 0;\n    left: 0;\n    transform: translateY(20%);\n    height: 16px;\n    width: 16px;\n    background-color: ', ';\n    border: 1px solid\n      ', ';\n    box-shadow: inset 0 1px 2px 0\n      ', ';\n    border-radius: 2px;\n  }\n\n  &:hover input ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ';\n  }\n\n  input:checked ~ ', ' {\n    background-color: ', ';\n    border: 1px solid ', ';\n  }\n\n  input:focus ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ', 0 0 0 2px ', ';\n  }\n\n  ', ':after {\n    content: \'\';\n    position: absolute;\n    display: none;\n  }\n\n  input:checked ~ ', ':after {\n    display: block;\n  }\n\n  ', ':after {\n    box-sizing: content-box;\n    width: 4px;\n    height: 8px;\n    border: solid ', ';\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg) translate(-50%, -50%);\n    left: 20%;\n    top: 50%;\n  }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  ', ';\n\n  display: flex;\n  position: relative;\n  cursor: pointer;\n  margin-bottom: 0;\n  font-weight: ', ';\n  padding-left: ', ';\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  pointer-events: ', ';\n\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  ', ' {\n    opacity: ', ';\n  }\n\n  ', ' {\n    position: absolute;\n    top: 0;\n    left: 0;\n    transform: translateY(20%);\n    height: 16px;\n    width: 16px;\n    opacity: ', ';\n    background-color: ', ';\n    border: 1px solid ', ';\n    box-shadow: inset 0 1px 2px 0 ', ';\n    border-radius: 2px;\n  }\n\n  &:hover input ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ';\n  }\n\n  input:checked ~ ', ' {\n    background-color: ', ';\n    border: 1px solid ', ';\n  }\n\n  input:focus ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ', 0 0 0 2px ', ';\n  }\n\n  ', ':after {\n    content: \'\';\n    position: absolute;\n    display: none;\n  }\n\n  input:checked ~ ', ':after {\n    display: block;\n  }\n\n  ', ':after {\n    box-sizing: content-box;\n    width: 4px;\n    height: 8px;\n    border: solid ', ';\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg) translate(-50%, -50%);\n    left: 20%;\n    top: 50%;\n  }\n'], ['\n  ', ';\n\n  display: flex;\n  position: relative;\n  cursor: pointer;\n  margin-bottom: 0;\n  font-weight: ', ';\n  padding-left: ', ';\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  vertical-align: middle;\n  pointer-events: ', ';\n\n  input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  ', ' {\n    opacity: ', ';\n  }\n\n  ', ' {\n    position: absolute;\n    top: 0;\n    left: 0;\n    transform: translateY(20%);\n    height: 16px;\n    width: 16px;\n    opacity: ', ';\n    background-color: ', ';\n    border: 1px solid ', ';\n    box-shadow: inset 0 1px 2px 0 ', ';\n    border-radius: 2px;\n  }\n\n  &:hover input ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ';\n  }\n\n  input:checked ~ ', ' {\n    background-color: ', ';\n    border: 1px solid ', ';\n  }\n\n  input:focus ~ ', ' {\n    box-shadow: inset 0 1px 4px 0 ', ', 0 0 0 2px ', ';\n  }\n\n  ', ':after {\n    content: \'\';\n    position: absolute;\n    display: none;\n  }\n\n  input:checked ~ ', ':after {\n    display: block;\n  }\n\n  ', ':after {\n    box-sizing: content-box;\n    width: 4px;\n    height: 8px;\n    border: solid ', ';\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg) translate(-50%, -50%);\n    left: 20%;\n    top: 50%;\n  }\n']),
     _templateObject3 = _taggedTemplateLiteral(['\n  ', ' {\n    display: ', ';\n    ', ';\n\n    &:last-child {\n      margin: 0;\n    }\n  }\n'], ['\n  ', ' {\n    display: ', ';\n    ', ';\n\n    &:last-child {\n      margin: 0;\n    }\n  }\n']);
@@ -37,2 +37,6 @@
 
+var _form = require('../../molecules/form');
+
+var _form2 = _interopRequireDefault(_form);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,12 +58,18 @@
     _extends({ readOnly: props.readOnly }, (0, _automationAttribute2.default)('checkbox')),
-    _react2.default.createElement('input', _extends({
-      type: 'checkbox',
-      name: props.name,
-      value: props.value,
-      checked: props.checked,
-      defaultChecked: props.defaultChecked,
-      onChange: props.onChange,
-      id: props.id,
-      readOnly: true
-    }, (0, _automationAttribute2.default)('checkbox.input'))),
+    _react2.default.createElement(
+      _form2.default.Field.ContextConsumer,
+      null,
+      function (context) {
+        return _react2.default.createElement('input', _extends({
+          id: props.id || context.formFieldId,
+          type: 'checkbox',
+          name: props.name,
+          value: props.value,
+          checked: props.checked,
+          defaultChecked: props.defaultChecked,
+          onChange: props.onChange,
+          readOnly: true
+        }, (0, _automationAttribute2.default)('checkbox.input')));
+      }
+    ),
     _react2.default.createElement(CheckMark, null),
@@ -79,8 +89,4 @@ _react2.default.createElement(
 }, CheckMark, function (props) {
-  return props.readOnly ? _cosmosTokens.colors.radio.backgroundDisabled : _cosmosTokens.colors.radio.background;
-}, function (props) {
-  return props.readOnly ? _cosmosTokens.colors.radio.borderDisabled : _cosmosTokens.colors.radio.border;
-}, function (props) {
-  return props.readOnly ? _cosmosTokens.colors.radio.shadowDisabled : _cosmosTokens.colors.radio.shadow;
-}, CheckMark, _cosmosTokens.colors.radio.shadow, CheckMark, _cosmosTokens.colors.radio.backgroundSelected, _cosmosTokens.colors.radio.borderSelected, CheckMark, _cosmosTokens.colors.radio.shadow, _cosmosTokens.colors.base.blue, CheckMark, CheckMark, CheckMark, _cosmosTokens.colors.base.white);
+  return props.readOnly ? 0.5 : null;
+}, _cosmosTokens.colors.radio.background, _cosmosTokens.colors.radio.border, _cosmosTokens.colors.radio.shadow, CheckMark, _cosmosTokens.colors.radio.shadow, CheckMark, _cosmosTokens.colors.radio.backgroundSelected, _cosmosTokens.colors.radio.borderSelected, CheckMark, _cosmosTokens.colors.radio.shadow, _cosmosTokens.colors.base.blue, CheckMark, CheckMark, CheckMark, _cosmosTokens.colors.base.white);
 
@@ -87,0 +93,0 @@ Checkbox.Element = _styled2.default.div(_templateObject3, Checkbox.Option, function (props) {

atoms/checkbox/checkbox.story.js

@@ -21,3 +21,3 @@ 'use strict';
       _cosmos.Checkbox,
-      { name: 'one', value: 'one' },
+      { name: 'one', value: 'one', readOnly: true },
       'Option 1'
@@ -24,0 +24,0 @@ ),

atoms/heading/heading.js

@@ -63,3 +63,3 @@ 'use strict';
   size: _propTypes2.default.oneOf([1, 2, 3, 4]),
-  children: _propTypes2.default.string
+  children: _propTypes2.default.node
 };
@@ -66,0 +66,0 @@

atoms/image/image.js

@@ -27,2 +27,4 @@ 'use strict';
 
+var _customValidations = require('../../_helpers/custom-validations');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -40,3 +42,6 @@
 var Image = function Image(props) {
-  return _react2.default.createElement(Image.Element, _extends({ src: props.source, alt: props.alt }, (0, _automationAttribute2.default)('image'), props));
+  return _react2.default.createElement(Image.Element, _extends({
+    src: props.src || props.source,
+    alt: props.alt
+  }, (0, _automationAttribute2.default)('image'), props));
 };
@@ -55,4 +60,6 @@
 Image.propTypes = {
+  /** @depreacted:src URL of the image */
+  source: _propTypes2.default.string,
   /** URL of the image */
-  source: _propTypes2.default.string.isRequired,
+  src: _propTypes2.default.string,
   /** Alt text is mandatory, please read the accessibility section */
@@ -67,3 +74,8 @@ alt: _propTypes2.default.string,
   /** Sets the image width to auto */
-  disableResponsive: _propTypes2.default.bool
+  disableResponsive: _propTypes2.default.bool,
+
+  /** deprecate source prop */
+  _source: function _source(props) {
+    return (0, _customValidations.deprecate)(props, { name: 'source', replacement: 'src' });
+  }
 };
@@ -70,0 +82,0 @@

atoms/radio/radio.js

@@ -32,2 +32,6 @@ 'use strict';
 
+var _form = require('../../molecules/form');
+
+var _form2 = _interopRequireDefault(_form);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -69,3 +73,14 @@
     { readOnly: props.readOnly },
-    _react2.default.createElement('input', _extends({}, (0, _automationAttribute2.default)('radio.option'), { type: 'radio', readOnly: true }, props)),
+    _react2.default.createElement(
+      _form2.default.Field.ContextConsumer,
+      null,
+      function (context) {
+        return _react2.default.createElement('input', _extends({
+          id: props.id || context.formFieldId
+        }, (0, _automationAttribute2.default)('radio.option'), {
+          type: 'radio',
+          readOnly: true
+        }, props));
+      }
+    ),
     _react2.default.createElement(CheckMark, null),
@@ -72,0 +87,0 @@ _react2.default.createElement(

atoms/select/select.js

@@ -37,2 +37,6 @@ 'use strict';
 
+var _form = require('../../molecules/form');
+
+var _form2 = _interopRequireDefault(_form);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -97,10 +101,16 @@
     _react2.default.createElement(
-      Select.Element,
-      _extends({}, props, (0, _automationAttribute2.default)('select')),
-      _react2.default.createElement(
-        'option',
-        _extends({ disabled: true, hidden: true, value: PLACEHOLDER_VALUE }, (0, _automationAttribute2.default)('select.option')),
-        props.placeholder
-      ),
-      options.map(renderOption)
+      _form2.default.Field.ContextConsumer,
+      null,
+      function (context) {
+        return _react2.default.createElement(
+          Select.Element,
+          _extends({ id: props.id || context.formFieldId }, (0, _automationAttribute2.default)('select'), props),
+          _react2.default.createElement(
+            'option',
+            _extends({ disabled: true, hidden: true, value: PLACEHOLDER_VALUE }, (0, _automationAttribute2.default)('select.option')),
+            props.placeholder
+          ),
+          options.map(renderOption)
+        );
+      }
     )
@@ -107,0 +117,0 @@ );

atoms/switch/switch.js

@@ -19,3 +19,3 @@ 'use strict';
     _templateObject5 = _taggedTemplateLiteral(['\n          &:active {\n            &:before {\n              width: 30px;\n              left: ', ';\n            }\n          }\n        '], ['\n          &:active {\n            &:before {\n              width: 30px;\n              left: ', ';\n            }\n          }\n        ']),
-    _templateObject6 = _taggedTemplateLiteral(['\n  height: var(--switch-height);\n\n  span {\n    display: block;\n    font-size: ', ';\n    font-weight: ', ';\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    color: ', ';\n\n    margin-left: ', ';\n    margin-right: ', ';\n\n    /* \n    In order to make the switch always the same width\n    we are setting a fixed height and overlapping the switch labels\n    */\n    height: var(--switch-height);\n    line-height: var(--switch-height);\n\n    &:last-child {\n      /* Moves the second label up to overlap the first */\n      margin-top: calc(var(--switch-height) * -1);\n    }\n\n    &[aria-hidden=\'true\'] {\n      visibility: hidden;\n    }\n    /* if the label is empty, then remove the node so it doesn\'t create a margin */\n    &:empty {\n      display: none;\n    }\n  }\n'], ['\n  height: var(--switch-height);\n\n  span {\n    display: block;\n    font-size: ', ';\n    font-weight: ', ';\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    color: ', ';\n\n    margin-left: ', ';\n    margin-right: ', ';\n\n    /* \n    In order to make the switch always the same width\n    we are setting a fixed height and overlapping the switch labels\n    */\n    height: var(--switch-height);\n    line-height: var(--switch-height);\n\n    &:last-child {\n      /* Moves the second label up to overlap the first */\n      margin-top: calc(var(--switch-height) * -1);\n    }\n\n    &[aria-hidden=\'true\'] {\n      visibility: hidden;\n    }\n    /* if the label is empty, then remove the node so it doesn\'t create a margin */\n    &:empty {\n      display: none;\n    }\n  }\n']);
+    _templateObject6 = _taggedTemplateLiteral(['\n  height: var(--switch-height);\n\n  span {\n    display: block;\n    font-size: ', ';\n    font-weight: ', ';\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    color: ', ';\n\n    margin-left: ', ';\n    margin-right: ', ';\n\n    /*\n    In order to make the switch always the same width\n    we are setting a fixed height and overlapping the switch labels\n    */\n    height: var(--switch-height);\n    line-height: var(--switch-height);\n\n    &:last-child {\n      /* Moves the second label up to overlap the first */\n      margin-top: calc(var(--switch-height) * -1);\n    }\n\n    &[aria-hidden=\'true\'] {\n      visibility: hidden;\n    }\n    /* if the label is empty, then remove the node so it doesn\'t create a margin */\n    &:empty {\n      display: none;\n    }\n  }\n'], ['\n  height: var(--switch-height);\n\n  span {\n    display: block;\n    font-size: ', ';\n    font-weight: ', ';\n    letter-spacing: 1px;\n    text-transform: uppercase;\n    color: ', ';\n\n    margin-left: ', ';\n    margin-right: ', ';\n\n    /*\n    In order to make the switch always the same width\n    we are setting a fixed height and overlapping the switch labels\n    */\n    height: var(--switch-height);\n    line-height: var(--switch-height);\n\n    &:last-child {\n      /* Moves the second label up to overlap the first */\n      margin-top: calc(var(--switch-height) * -1);\n    }\n\n    &[aria-hidden=\'true\'] {\n      visibility: hidden;\n    }\n    /* if the label is empty, then remove the node so it doesn\'t create a margin */\n    &:empty {\n      display: none;\n    }\n  }\n']);
 
@@ -38,4 +38,10 @@ var _react = require('react');
 
+var _customValidations = require('../../_helpers/custom-validations');
+
 var _cosmosTokens = require('@auth0/cosmos-tokens');
 
+var _form = require('../../molecules/form');
+
+var _form2 = _interopRequireDefault(_form);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -73,3 +79,4 @@
       this.setState(function (currentState) {
-        if (_this2.props.onToggle) _this2.props.onToggle(!currentState.on);
+        if (_this2.props.onChange) _this2.props.onChange(!currentState.on);else if (_this2.props.onToggle) _this2.props.onToggle(!currentState.on);
+
         return { on: !currentState.on };
@@ -86,2 +93,4 @@ });
     value: function render() {
+      var _this3 = this;
+
       var _props$accessibleLabe = _slicedToArray(this.props.accessibleLabels, 2),
@@ -91,3 +100,14 @@ onLabel = _props$accessibleLabe[0],
 
-      var checkbox = _react2.default.createElement(Checkbox, { type: 'checkbox', checked: this.state.on, readOnly: true, id: this.props.id });
+      var checkbox = _react2.default.createElement(
+        _form2.default.Field.ContextConsumer,
+        null,
+        function (context) {
+          return _react2.default.createElement(Checkbox, {
+            type: 'checkbox',
+            checked: _this3.state.on,
+            readOnly: true,
+            id: _this3.props.id || context.formFieldId
+          });
+        }
+      );
 
@@ -175,4 +195,6 @@ var elements = _react2.default.createElement(
 Switch.propTypes = {
-  /** Function called on toggle */
+  /** @deprecatede:onChange Function called on toggle */
   onToggle: _propTypes2.default.func,
+  /** Function called when value changes */
+  onChange: _propTypes2.default.func,
   /** State of the toggle */
@@ -187,3 +209,8 @@ on: _propTypes2.default.bool,
   /** Label on left side */
-  labelPosition: _propTypes2.default.oneOf(['right', 'left'])
+  labelPosition: _propTypes2.default.oneOf(['right', 'left']),
+
+  /** deprecations */
+  _onToggle: function _onToggle(props) {
+    return (0, _customValidations.deprecate)(props, { name: 'onToggle', replacement: 'onChange' });
+  }
 };
@@ -193,2 +220,3 @@
   onToggle: null,
+  onChange: null,
   on: false,
@@ -195,0 +223,0 @@ accessibleLabels: ['Enabled', 'Disabled'],

atoms/switch/switch.md

@@ -8,3 +8,3 @@ ```meta
 ```jsx
-<Switch {props} onToggle={value => console.log(value)} />
+<Switch {props} onChange={value => console.log(value)} />
 ```
@@ -16,6 +16,6 @@
 
-`onToggle` should always be provided for handling changes in the value.
+`onChange` should always be provided for handling changes in the value.
 
 ```js
-<Switch onToggle={value => console.log(value)} />
+<Switch onChange={value => console.log(value)} />
 ```
@@ -28,3 +28,3 @@
 ```js
-<Switch on onToggle={value => console.log(value)} />
+<Switch on onChange={value => console.log(value)} />
 ```
@@ -49,6 +49,6 @@
 <Stack align="space-between">
-  <Switch accessibleLabels={['ON', 'OFF']} onToggle={value => console.log(value)} />
+  <Switch accessibleLabels={['ON', 'OFF']} onChange={value => console.log(value)} />
   <Switch
     accessibleLabels={['ON', 'OFF']}
-    onToggle={value => console.log(value)}
+    onChange={value => console.log(value)}
     labelPosition="left"
@@ -62,3 +62,3 @@ />
 ```js
-<Switch hideAccessibleLabels onToggle={() => {}} />
+<Switch hideAccessibleLabels onChange={() => {}} />
 ```

atoms/switch/switch.story.js

@@ -19,3 +19,3 @@ 'use strict';
     { title: 'Switch' },
-    _react2.default.createElement(_cosmos.Switch, { onToggle: function onToggle(value) {
+    _react2.default.createElement(_cosmos.Switch, { onChange: function onChange(value) {
         return console.log(value);
@@ -30,3 +30,3 @@ } })
     { title: 'Switch' },
-    _react2.default.createElement(_cosmos.Switch, { onToggle: function onToggle(value) {
+    _react2.default.createElement(_cosmos.Switch, { onChange: function onChange(value) {
         return console.log(value);
@@ -41,3 +41,3 @@ }, labelPosition: 'left' })
     { title: 'Switch' },
-    _react2.default.createElement(_cosmos.Switch, { on: true, onToggle: function onToggle(value) {
+    _react2.default.createElement(_cosmos.Switch, { on: true, onChange: function onChange(value) {
         return console.log(value);
@@ -61,5 +61,5 @@ } })
     { title: 'Switch' },
-    _react2.default.createElement(_cosmos.Switch, { accessibleLabels: [], onToggle: function onToggle() {} }),
-    _react2.default.createElement(_cosmos.Switch, { accessibleLabels: ['ON', 'OFF'], onToggle: function onToggle() {} }),
-    _react2.default.createElement(_cosmos.Switch, { on: true, accessibleLabels: ['ON', 'OFF'], onToggle: function onToggle() {} })
+    _react2.default.createElement(_cosmos.Switch, { accessibleLabels: [], onChange: function onChange() {} }),
+    _react2.default.createElement(_cosmos.Switch, { accessibleLabels: ['ON', 'OFF'], onChange: function onChange() {} }),
+    _react2.default.createElement(_cosmos.Switch, { on: true, accessibleLabels: ['ON', 'OFF'], onChange: function onChange() {} })
   );
@@ -72,4 +72,4 @@ });
     { title: 'Switch' },
-    _react2.default.createElement(_cosmos.Switch, { hideAccessibleLabels: true, onToggle: function onToggle() {} })
+    _react2.default.createElement(_cosmos.Switch, { hideAccessibleLabels: true, onChange: function onChange() {} })
   );
 });

atoms/text-input/text-input.js

@@ -38,2 +38,6 @@ 'use strict';
 
+var _form = require('../../molecules/form');
+
+var _form2 = _interopRequireDefault(_form);
+
 var _actionShape = require('../../_helpers/action-shape');
@@ -73,8 +77,22 @@
 
-  var Input = _react2.default.createElement(TextInput.Element, _extends({}, (0, _automationAttribute2.default)('text-input'), {
-    defaultValue: defaultValue,
-    placeholder: placeholder,
-    readOnly: readOnly
-  }, restOfTheProps));
+  /*
+    the input element can get it's id from multiple sources
+    1. the user might provide it on the element
+    2. if this element is part of a form field, the field will pass one
+     the user's id takes preference over the field's
+  */
 
+  var Input = _react2.default.createElement(
+    _form2.default.Field.ContextConsumer,
+    null,
+    function (context) {
+      return _react2.default.createElement(TextInput.Element, _extends({}, (0, _automationAttribute2.default)('text-input'), {
+        id: props.id || context.formFieldId,
+        defaultValue: defaultValue,
+        placeholder: placeholder,
+        readOnly: readOnly
+      }, restOfTheProps));
+    }
+  );
+
   if (!props.actions.length) return Input;else {
@@ -81,0 +99,0 @@ /* Input is not a component, just JSX, hence wrapper in {} */

atoms/textarea/textarea.js

@@ -35,2 +35,6 @@ 'use strict';
 
+var _form = require('../../molecules/form');
+
+var _form2 = _interopRequireDefault(_form);
+
 var _inputWithActions = require('../_input-with-actions');
@@ -47,3 +51,12 @@
 var TextArea = function TextArea(props) {
-  var Input = _react2.default.createElement(TextArea.Element, _extends({ rows: props.length }, props, (0, _automationAttribute2.default)('text-area')));
+  var Input = _react2.default.createElement(
+    _form2.default.Field.ContextConsumer,
+    null,
+    function (context) {
+      return _react2.default.createElement(TextArea.Element, _extends({
+        rows: props.length,
+        id: props.id || context.formFieldId
+      }, props, (0, _automationAttribute2.default)('text-area')));
+    }
+  );
 
@@ -50,0 +63,0 @@ if (!props.actions.length) return Input;else {

components.js

@@ -178,23 +178,23 @@ 'use strict';
 
-var _appLayout = require('./molecules/_app-layout');
+var _appLayout = require('./layouts/_app-layout');
 
 var _appLayout2 = _interopRequireDefault(_appLayout);
 
-var _columnLayout = require('./molecules/_column-layout');
+var _columnLayout = require('./layouts/column-layout');
 
 var _columnLayout2 = _interopRequireDefault(_columnLayout);
 
-var _rowLayout = require('./molecules/_row-layout');
+var _rowLayout = require('./layouts/row-layout');
 
 var _rowLayout2 = _interopRequireDefault(_rowLayout);
 
-var _galleryLayout = require('./molecules/_gallery-layout');
+var _galleryLayout = require('./layouts/gallery-layout');
 
 var _galleryLayout2 = _interopRequireDefault(_galleryLayout);
 
-var _pageLayout = require('./molecules/_page-layout');
+var _pageLayout = require('./layouts/page-layout');
 
 var _pageLayout2 = _interopRequireDefault(_pageLayout);
 
-var _stackLayout = require('./molecules/_stack-layout');
+var _stackLayout = require('./layouts/stack-layout');
 
@@ -201,0 +201,0 @@ var _stackLayout2 = _interopRequireDefault(_stackLayout);

meta/changelog.json

 {
-  "changelog": "# Changelog\n\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/). Currently, this project is using an `0.x` versioning system to indicate its preview status. As such, it does _not_ currently adhere to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). Once we reach production readiness, we will follow semver beginning with our `1.0` release. In the meantime, please read this changelog for information on breaking changes!\n\n## 0.16.2 [February 13, 2019]\n\n### Fixed\n\n- Tooltip: Use Popper.js' position fixed mode. [#1501]\n- Sidebar: Fix styles not changing when selected link prop changed. [#1500]\n\n## 0.16.1 [February 7, 2019]\n\n### Fixed\n\n- Sidebar: Fix sidebar linkgroup item colored when open but no subitems selected [#1498]\n- Tooltip: Apply z-index back to Tooltip Element [#1497]\n- Dialog: Revert Composable actions for Tabs in Dialog [#1496]\n- Icon: Fixed typo in icon ‘brand-weibo’ [#1495]\n\n## 0.16.0 [February 7, 2019]\n\n### Added\n\n- Docs: Start migration guide [#1490]\n- Dialog: Composable actions for Dialog + Tabs [#1458]\n\n### Fixed\n\n- Sidebar: Fixed selected color for Link group and added basic stories [#1493]\n- Select: Allow using empty string as a value [#1483]\n- Checkbox: Fix onClick event firing twice [#1473]\n- ResourceList: Add check for onItemClick [#1491]\n- ResourceList: Fix Item body width validator [#1481][#1482]\n- Layouts: Update gutter sizes prop-type [#1480]\n- Table: Fix story image source [#1479]\n\n### Internal\n\n- Remove sketch files [#1485]\n\n## 0.15.1 [January 31, 2019]\n\n### Fixed\n\n- Layouts: Fix rendering undefined/null children nodes. [#1470]\n\n## 0.15.0 [January 30, 2019]\n\n### Added\n\n- PageHeader: Support buttons as actions in Page Header [#1429]\n\n### Fixed\n\n- Checkbox: Fix case when label is too long [#1462][#1466]\n- Tooltip: Make it accessible [#1372]\n- Tooltip: Fix popper.js warning in console [#1448][#1450]\n- Switch: Make it have a consistent width [#1449]\n- Docs: Add prop replacement right next to deprecated prop [#1435]\n\n### Internal\n\n- Base for Tokens v2 [#1431]\n- Add event handler tests for molecules [#1459]\n- Add replacement to deprecation warning (in dev console) [#1434]\n- Adds new sizes for gutters [#1464]\n\n## 0.14.1 [January 29, 2019]\n\n### Fixed\n\n- Tabs, List: Fixed list bullets appearing in apps that use Styleguide along Cosmos.\n\n## 0.14.0 [January 17, 2019]\n\n### Added\n\n- Tooltip: Use react-popper instead of a custom solution [#1371]\n\n### Fixed\n\n- ResourceList: Fix item being undefined on onClick and onItemClick, fix onItemClick being fired on action onClick [#1443]\n\n## 0.13.0 [January 14, 2019]\n\n### Added\n\n- Form.Field: Implement new API based on RFC [#1287]\n- Release proces: add quick guide [#1397]\n- Testing: Test event handlers [#1311]\n- Added missing icons [#1406]\n\n### Fixed\n\n- IE 11 fix: Use insertBefore instead of prepend in global style injection [#1412]\n- Form.Label: Replaces the default value to be an empty string [#1411]\n- Sidebar: Add object branch presence check [#1420][#1423]\n- Page Header: Fixed link hover and added stories [#1409]\n- Radio: Fix onChange callback firing twice [#1403]\n- Icon: Re-uploaded user-add icon [#1428]\n- Pager: Do not enforce totals [#1404]\n\n### Internal\n\n- Adds StackLayout [#1363]\n\n## 0.12.2 [January 9, 2019]\n\n### Fixed\n\n- Icon: Add “application” icon. [#1401]\n- Alternate implementation for uniqueId: This improves snapshot testing experience by removing random hashes from components attributes. [#1374] (Warning: You may need to update some snapshots and remove any uniqueId mock.)\n- Breadcrumb: Fix automation attribute naming. [#1309] (Warning: You may need to update some tests.)\n\n**Breadcrumb change**\n\nWe have renamed the Breadcrumb.Link automation attribute from this:\n`<a data-cosmos-key=\"link\">clicky</a>`\nto this:\n`<a data-cosmos-key=\"breadcrumb.link\">clicky</a>`\n\nPlease update your tests (if any) accordingly.\n\n**UniqueId helper change**\n\nIn the past, we used to randomly generate an id for some attributes that were required to link components.\nNow we're using a global counter, which will lead to improve snapshot testing since each test is run in an isolated environment, and then each test run will have a fresh and pure start.\n\nIf you were using a mock for `uniqueId` as a workaround:\n\n```js\njest.mock('../../../core/components/_helpers/uniqueId', () => () => 'abcdef1234')\n```\n\nPlease, remove it since is no longer needed.\n\n## 0.12.1 [January 8, 2019]\n\n### Fixed\n\n- Radio: Fixed rendering of label [#1393]\n\n## 0.12.0 [January 7, 2019]\n\n### Added\n\n- Testing: Custom prop tests [#1308][#1312]\n- ResourceList: Adds a prop to set the width to the resource list body [#1314]\n- Image: Images are now responsive by default [#1244]\n- Image: Added fit properties to scale images to a container proportionally [#1244]\n- Avatar: Images in avatar fit to cover the container. This allows to display portrait and landscape images inside the avatar. [#1244]\n- (Internal) Layouts: Row, Gallery, Columns and Page [#1282]\n\n### Fixed\n\n- Icon: Fixed chevron up not facing up [#1391]\n- Tabs: Quick aria labels fix [#1375]\n- Tooltip: Adds z-index to tooltips [#1369]\n- Security upgrades [#1387]\n\n### Changed\n\n- Move actions API to Input [#1281]\n\n## 0.11.0 [December 18, 2018]\n\n### Added\n\n- Sortable Resource List [#1098]\n- Integration tests for Tabs [#1278]\n\n### Fixed\n\n- Implement attrs to styled API [#1263]\n- Make Tabs accessible [#1264]\n- Examples: react + react-dom should have same version [#1284]\n- Tooltip: Fix wrapping for long text [#1262]\n- Fix dialog [#1260]\n- Fix react router dom dependency [#1300]\n- Fix Resource List columns [#1192]\n- Fix docs links [#1280]\n- Fix version switcher [#1256]\n- Fix button action onClick handler not including the item [#1276]\n\n- Internal: Clean up code for masked TextInput [#1283]\n- Internal: Add module to all stories [#1288]\n\n### Changed\n\n- Internal: Massive find and replace for styled [#1249]\n- Remove line height declaration on tables [#1286]\n- Replace extend with styled [#1279]\n- Remove pointer events from icon [#1298]\n- Changes the Page Header from grid to flex [#1285]\n\n## 0.10.1 [December 11, 2018]\n\n### Fixed\n\n- Fixes dialog not catching pointer events [#1260]\n\n## 0.10.0 [December 11, 2018]\n\n### Added\n\n- Switch: Add support for label position by @m4tr1k + alignment fixes [#1171]\n- Styling: Add styled-components-with-helpers [#1208]\n- Styling: Add styled-margin [#1248]\n\n### Fixed\n\n- Responsive PageHeader [#1138]\n- Fix FormGroup warning when only one child is passed [#1221]\n- Select arrow icon color fix [#1220]\n- Switch.onToggle stopPropagation of event [#1233]\n- Added stories around page header [#1230]\n- Updates dropbox icon [#1240]\n- Upgrade to latest 3.x styled-components [#1241]\n- Removes space when the switch label is empty [#1234]\n- Removes pointer events on the overlay component [#1243]\n- Fixed accordions in Contribution guide [#1246]\n- Manage PoC: Fix Security issue and fix error on example when opening Applications [#1253]\n\n## 0.9.3 [December 4, 2018]\n\n### Fixed\n\n- Fix callHandler is not defined issue in ResourceList [#1210]\n- Improved examples in Pagination toolbar docs [#1207]\n- Fix appearance of select in Firefox [#1143]\n\n### Changed\n\n- Docs: Make it easier to add a guide [#1201]\n- Docs: Hidden placeholder for layout + overriding guides [#1202]\n\n## 0.9.2 [December 3, 2018]\n\n### Fixed\n\n- Form Actions: Change the role of secondary actions to `button` [#1172]\n- Button: Fix alignment issues in `Button` with href [#1178]\n\n### Changed\n\n- Resource List: Added support for `Button` as `actions` in items (soft deprecation) [#1133]\n- Internal: Migrate components to dotElement syntax [#1080]: What we did was to migrate all internal subcomponent names. The benefit of this is that we don’t have to export multiple components but only the `Component` and you have all internal subcomponents for free. We kept exporting `StyledComponent`s as `Component.Element`'s aliases so we don’t break any of your apps. **These aliases will be supported until Cosmos 1.0.**\n\n## 0.9.1 [November 29, 2018]\n\n### Fixed\n\n- Global styles: Set the global line height to `1.6`. [#1176]\n\n## 0.9.0 [November 29, 2018]\n\n### Added\n\n- Table: Add support for truncating table cell text [#1011]\n- Icons: Add social icons [#1146]\n\n### Fixed\n\n- Dialog: Making dialog responsive and accessible [#1102]\n- Examples: Fix warnings in Manage POC by @jvelezpo [#1135]\n- Remove out of sync prop-types to typescript declarations module [#1136]\n\n## 0.8.1 [November 22, 2018]\n\n### Fixed\n\n- Icons: Fix indexing of names [ae43a6]\n\n## 0.8.0 [November 22, 2018]\n\nShoutout to all the hacktoberfest contributions we received!\n\n### Fixed\n\n- Accessibility: Fix focus styles for Tabs [#1055]\n- Accessibility: Made checkbox, radio and switch accessible with a keyboard via @DCzajkowski [#1029]\n- Accessibility: Makes the list HTML semantically correct [#1028]\n- Accessibility: Make tabs accessible by @jvelezpo [#1052]\n- Alert: Match styles of close button with styleguide by @mrewers [#1031]\n- Avatar: Batch of fixes and enhancements! [#985]\n- Button: Fix vertical alignment in button and it's uses [#947]\n- Button: Fix margins for Safari [#1020]\n- Pagination: Fix selected state for pagination button [#1061]\n- Pagination toolbar: Hide toolbar if there are zero items by @astanciu [#1051]\n- Table: Make the field prop optional [#1088]\n- Table: Table columns can not be passed as a variable by @sanketsingh24 [#1035]\n- Docs: Fix typo in contribution guide by @Gotham13121997 [#1022]\n- Docs: Improve readme with material from docs website by @Tranquilled [#1039]\n- Docs: Fix `Form.Radio` example by @jvelezpo [#1032]\n- Docs: Make experimental notice permanent via @lopno [#1030]\n- Docs: Fix sidebar scrolling in Firefox by @fer22f [#1027]\n- Examples: Match names from manage dashboard by @rkhoriander [#1034]\n- Examples: Fix typo in webpack-hello example by @radlinskii [#964]\n\n### Added\n\n- Table: Add width prop to Table Header [#1053]\n- Select: Add disabled + disabled options + groups by @rakhi2104 [#1067]\n- Icons: Improve precision for svg optimisation [#1095]\n- Icons: Added UI icons (policy, ip address, email, database, block) [#1122]\n- Icons: Added UI icons (add user, usage, search, chevron up, arrow up, arrow down)\n- Docs: Adds system guidelines [#1079]\n\n## 0.7.2 [October 24, 2018]\n\n### Fixed\n\n- Fix compatibility issue with `cosmos-fonts` [#1015]\n\n## 0.7.1 [October 23, 2018]\n\n### Added\n\n- Add LICENSE file: MIT [#1011]\n\n## 0.7.0 [October 23, 2018]\n\n### Added\n\n- Component: New `Spinner` variants (small, medium, large) [#939]\n- Component: Introduce loading state for `Table` [#978]\n- Icons: Added undo icon [#968]\n- Icons: Added more icon [#984]\n- Docs: Add example for `actions` in `Table` [#982]\n\n### Changed\n\n- (Breaking 💥) Move fonts to a different package [#991]\n\n### Fixed\n\n- Icons: Fixed lock fill icon [#968]\n\n### Added\n\n- Components: Add support for icons in Alerts [#919]\n- Components: Add placeholder for `Select` [#934]\n- Icons: Add missing icons for manage [#953]\n- Documentation: Add option to switch between versions [#945]\n\n## 0.6.0 [September 28, 2018]\n\n### Added\n\n- Components: Add support for icons in Alerts [#919]\n- Components: Add placeholder for `Select` [#934]\n- Icons: Add missing icons for manage [#953]\n- Documentation: Add option to switch between versions [#945]\n\n### Fixed\n\n- `Alert` doesn't break with no children/text [#930]\n- Enforced `Icon` size to fix icon vertical alignment [#931]\n\n## 0.5.2 [September 11, 2018]\n\n### Changed\n\n- Make `description` optional in `PageHeader` [#885]\n- Support `target` in link for `EmptyState` and `AvatarBlock` [#771]\n\n### Fixed\n\n- Fix vertical alignment of actions inside `Input` [#866]\n- Fix selected tab color for `Tabs` [#886]\n- Fix margin for single button in `ButtonGroup` [#905]\n\n## 0.5.1 [September 3, 2018]\n\n### Added\n\n- Component: Danger Zone (experimental) [#847]\n\n### Fixed\n\n- Table: Add support for a Table that isn't sortable + improve documentation [#865]\n- Docs: Fix production version + implement cache busting [#876]\n\n## 0.5.0 [August 30, 2018]\n\n### Added\n\n- Testing: Adding support for attributes for automation [#850]\n\n### Changed\n\n- Manage Example: Update Page Header usage [#822]\n- Pagination toolbar: disable buttons on edge pages & hide on one page [#845]\n- Docs: Add deprecated tag in prop table [#852]\n\n### Fixed\n\n- Table: Improve interactivity of rows [#830]\n- Website: Fix nav version in navigation [#834]\n- Page Header: Fixed learn more arrow icon on hover [#844]\n\n## 0.4.0 [August 17, 2018]\n\n### Added\n\n- Style and documenation improvements for `Pagination` [#750]\n- Add automatic sorting for `Table` [#758]\n- Support free texts in Page Header, Empty State and Alert [#782]\n\n### Changed\n\n- Primary action handler is now optional in `Form` [#790]\n\n### Fixed\n\n- Fixed styles for `Breadcrumbs` [#773]\n- Fixed background color for loading states in `Button` [#777]\n- Fixed border color for input to match Manage [#786]\n- Fixed alignment for `AvatarBlock` with link [#810]\n- Fixed issues with global styles and resets in styleguide [#814]\n\n## 0.3.3 [August 7, 2018]\n\n### Added\n\n- Add support for multiple links in `Breadcrumbs` [#695]\n- Added click handler props to ResourceList and Table [#735]\n- Add document playground for folks to report issues [#738]\n- Add support for `size` prop to `TextInput` [#739]\n\n### Changed\n\n- **Unstable**: Style improvements to `Pagination` [#741]\n- Bring manage PoC closer to real manage [#745]\n\n### Fixed\n\n- Pass `Form` actions through to underlying `Button` [#718]\n- Fix `Button` appearance with url prop [#728]\n- Fix wrapping for long text in Button [#751]\n- **BREAKING**: Fix state updates inside `Tabs` (end support for uncontrolled state) [#754]\n\n## 0.3.2 [July 25, 2018]\n\n### Fixed\n\n- Fix deployment tooling [#726]\n\n## 0.3.1 [July 25, 2018]\n\n### Added\n\n- Add `Checkbox` component [#612]\n- Add support for disabling actions in `ResourceListItem` [#647]\n- `Avatar` now accepts an `<svg>` for its image prop [#650]\n- Support `<Button/>` in dialog actions [#660]\n- Alerts can now be dismissed [#688]\n- Support text in `loading` + `success` state for `Button` [#714]\n- Add option to disable global styles [#719]\n- Add documentation for using `styled` [#629]\n- **Unstable**: Pagination component base [#666]\n- Add documentation for contributing components [#638]\n\n### Changed\n\n- **BREAKING**: Use color name instead of hex codes for `Icon` [#684]\n- **DEPRECATED**: Replace input `error` prop with `hasError` [#690]\n- Rename clients to applications in manage PoC [#636]\n- Change `Overlay` to be a hidden component [#693]\n- Make the sidebar foldable in documentation [#686]\n\n### Fixed\n\n- Update PoC link in docs [#646]\n- Default `<input>` to `type=text` [#691]\n- Fix `styled` export [#701]\n- Fix form layouts leaking into each other [#716]\n\n## 0.3.0 [June 25, 2018]\n\n### Added\n\n- **Unstable**: Added `Badge` component. [#548]\n- **Unstable**: Added `Tag` component. [#549]\n- **Unstable**: Added `AvatarBlock` component. [#561]\n- `Tooltip` now supports new `left` and `right` values for the `position` prop. [#576]\n- `Stack` now supports a `space-between` value for its `align` prop, resulting in behavior similar to the flexbox property of the same name. [#591]\n- `Tabs` may now optionally operate as a controlled component via new `selected` and `onSelect` props. [#585]\n- Cosmos now exports its copy of [styled-components](https://github.com/styled-components/styled-components) to avoid conflicts where consumers would use their own copy. [#614, #610]\n- Added TypeScript definitions for all components. (Thanks @jcenturion!) [#632]\n\n### Changed\n\n- **BREAKING**: Actions have now been standardized across the library. Any actions which previously expected a `text` property now expect a `label` property instead. [#559]\n- **BREAKING**: `Thumbnail` has been removed, and its functionality has been merged with `Avatar` for simplicity. [#561]\n- **BREAKING**: `Form` now supports only a single destructive action via the `destructiveAction` prop, which replaces the previous `destructiveActions` prop that accepted an array of actions. [#601]\n- **BREAKING**: React `16.x` is now referenced as a peer dependency to avoid conflicts. [#604]\n- Reorganized code, making docs and examples independent from the core library. [#575, #607]\n- `PageHeader` will now render a secondary action even if there is no primary action specified. [#590]\n- Switched to [nps](https://github.com/kentcdodds/nps) to manage scripts that had previously been in `package.json`. [#615]\n- Replaced placeholder screenshot for `Dialog` with a real working example. [#620]\n\n### Fixed\n\n- Fixed issue with `Radio.Group` resulting from filtering children by type. [#581]\n- Fixed various PropTypes validation warnings. [#582]\n- Fixed issue where sidebar groups would not display as open even when a child was marked as `selected`. [#583]\n- Fixed issue where the search in the documentation sidebar would throw an error in response to certain user input. [#593]\n- Fixed issue where form inputs would lose their styling when surrounded by container elements [#619]\n- Fixed issue where the preview in the documentation sandbox was not being correctly updated in response to user input in the props table [#637]\n- Fixed misalignment of tooltips on `Buttons`. [#617]\n\n## 0.2.3 [May 31, 2018]\n\n### Fixed\n\n- Fixed problem where fonts are not loading [#571]\n\n## 0.2.2 [May 29, 2018]\n\n### Added\n\n- Added `Radio` component to Forms [#511]\n- Added `Label` component [#544]\n- Added support for custom Form fields [#530]\n- Added prop to make tooltips visible by default [#562]\n\n### Changed\n\n- **BREAKING** `method` has been renamed to `handler` for all components that accept actions as a prop [#551]\n\n  ```jsx\n  <Form.Actions primaryAction={{ label: 'Save Changes', handler: () => {} }} />\n  ```\n\n- Documentation improvements for `EmptyState` and `Alert` [#491] + [#534]\n\n### Fixed\n\n- Added missing id to Switch for accessibility [#558]\n- Fixed path for tokens in helpers [#564]\n\n## 0.2.1 [May 8, 2018]\n\n### Changed\n\n- New information on defaults and required fields in docs [#533]\n\n### Fixed\n\n- Fixed persistent warning in `Form.Actions` [#529]\n\n## 0.2.0 [April 26, 2018]\n\n### Added\n\n- **Unstable**: New `ResourceList` component. [#504]\n- **Unstable**: New `Table` component. [#519]\n\n### Changed\n\n- Expanded routes in Manage proof of concept to permit additional pages to be added. [#503]\n\n### Fixed\n\n- `Tabs` component now ignores `null` children instead of throwing an error. [#518]\n- Fixed incorrect layout of \"Learn More\" link in `EmptyState`. [#514]\n\n## 0.1.1 [April 12, 2018]\n\n### Changed\n\n- **BREAKING** Make cosmos babel preset an optional dependency [#497]\n  The babel preset is no longer available in `@auth0/cosmos/babel`, use `@auth0/babel-preset-cosmos` instead\n- An improved client list for manage proof of concept [#441]\n- Better naming + urls [#493] and permalinks for docs[#492]\n\n## 0.1.0 [April 4, 2018]\n\n### Added\n\n- New `cta` appearance for `Button`, to be used for primary calls to action. [#425]\n- New \"link mode\" for `Button`. Passing an `href` prop to `Button` will cause it to render as an `<a>` instead of a `<button>`. [#425]\n- **Unstable**: New `Avatar` and `Thumbnail` components. [#398]\n- **Unstable**: New `Text` component for styled text. [#392]\n\n### Changed\n\n- **BREAKING:** Colliding Boolean props governing appearance of `Button` were replaced with an `appearance` enum. [#400]\n- **BREAKING:** `line-height: 1.6` has been moved from global reset to a scope specific to cosmos components\n"
+  "changelog": "# Changelog\n\nAll notable changes to this project will be documented in this file.\n\nThe format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/). Currently, this project is using an `0.x` versioning system to indicate its preview status. As such, it does _not_ currently adhere to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). Once we reach production readiness, we will follow semver beginning with our `1.0` release. In the meantime, please read this changelog for information on breaking changes!\n\n## 0.17.0 [February 19, 2019]\n\n### Added\n- Docs: Display Layouts section [#1510] [#1511]\n- PageHeader: Support passing React nodes as `title`. [#1518].\n- Avatar: Add image resolution failover. [#1515]\n- Docs: New authoring guide. [#1513]\n- Docs: Document build pipeline. [#1514]\n\n### Fixed\n- Form.Field: Automatically add id to fields. [#1439]\n- Checkbox: Improve `readOnly` visual state. [#1517]\n\n### Changed\n- Image: Rename `source` to `src` (via soft deprecation) [#1505]\n- Switch: Rename `onToggle` to `onChange` (via soft deprecation) [#1506]\n\n\n## 0.16.2 [February 13, 2019]\n\n### Fixed\n\n- Tooltip: Use Popper.js' position fixed mode. [#1501]\n- Sidebar: Fix styles not changing when selected link prop changed. [#1500]\n\n## 0.16.1 [February 7, 2019]\n\n### Fixed\n\n- Sidebar: Fix sidebar linkgroup item colored when open but no subitems selected [#1498]\n- Tooltip: Apply z-index back to Tooltip Element [#1497]\n- Dialog: Revert Composable actions for Tabs in Dialog [#1496]\n- Icon: Fixed typo in icon ‘brand-weibo’ [#1495]\n\n## 0.16.0 [February 7, 2019]\n\n### Added\n\n- Docs: Start migration guide [#1490]\n- Dialog: Composable actions for Dialog + Tabs [#1458]\n\n### Fixed\n\n- Sidebar: Fixed selected color for Link group and added basic stories [#1493]\n- Select: Allow using empty string as a value [#1483]\n- Checkbox: Fix onClick event firing twice [#1473]\n- ResourceList: Add check for onItemClick [#1491]\n- ResourceList: Fix Item body width validator [#1481][#1482]\n- Layouts: Update gutter sizes prop-type [#1480]\n- Table: Fix story image source [#1479]\n\n### Internal\n\n- Remove sketch files [#1485]\n\n## 0.15.1 [January 31, 2019]\n\n### Fixed\n\n- Layouts: Fix rendering undefined/null children nodes. [#1470]\n\n## 0.15.0 [January 30, 2019]\n\n### Added\n\n- PageHeader: Support buttons as actions in Page Header [#1429]\n\n### Fixed\n\n- Checkbox: Fix case when label is too long [#1462][#1466]\n- Tooltip: Make it accessible [#1372]\n- Tooltip: Fix popper.js warning in console [#1448][#1450]\n- Switch: Make it have a consistent width [#1449]\n- Docs: Add prop replacement right next to deprecated prop [#1435]\n\n### Internal\n\n- Base for Tokens v2 [#1431]\n- Add event handler tests for molecules [#1459]\n- Add replacement to deprecation warning (in dev console) [#1434]\n- Adds new sizes for gutters [#1464]\n\n## 0.14.1 [January 29, 2019]\n\n### Fixed\n\n- Tabs, List: Fixed list bullets appearing in apps that use Styleguide along Cosmos.\n\n## 0.14.0 [January 17, 2019]\n\n### Added\n\n- Tooltip: Use react-popper instead of a custom solution [#1371]\n\n### Fixed\n\n- ResourceList: Fix item being undefined on onClick and onItemClick, fix onItemClick being fired on action onClick [#1443]\n\n## 0.13.0 [January 14, 2019]\n\n### Added\n\n- Form.Field: Implement new API based on RFC [#1287]\n- Release proces: add quick guide [#1397]\n- Testing: Test event handlers [#1311]\n- Added missing icons [#1406]\n\n### Fixed\n\n- IE 11 fix: Use insertBefore instead of prepend in global style injection [#1412]\n- Form.Label: Replaces the default value to be an empty string [#1411]\n- Sidebar: Add object branch presence check [#1420][#1423]\n- Page Header: Fixed link hover and added stories [#1409]\n- Radio: Fix onChange callback firing twice [#1403]\n- Icon: Re-uploaded user-add icon [#1428]\n- Pager: Do not enforce totals [#1404]\n\n### Internal\n\n- Adds StackLayout [#1363]\n\n## 0.12.2 [January 9, 2019]\n\n### Fixed\n\n- Icon: Add “application” icon. [#1401]\n- Alternate implementation for uniqueId: This improves snapshot testing experience by removing random hashes from components attributes. [#1374] (Warning: You may need to update some snapshots and remove any uniqueId mock.)\n- Breadcrumb: Fix automation attribute naming. [#1309] (Warning: You may need to update some tests.)\n\n**Breadcrumb change**\n\nWe have renamed the Breadcrumb.Link automation attribute from this:\n`<a data-cosmos-key=\"link\">clicky</a>`\nto this:\n`<a data-cosmos-key=\"breadcrumb.link\">clicky</a>`\n\nPlease update your tests (if any) accordingly.\n\n**UniqueId helper change**\n\nIn the past, we used to randomly generate an id for some attributes that were required to link components.\nNow we're using a global counter, which will lead to improve snapshot testing since each test is run in an isolated environment, and then each test run will have a fresh and pure start.\n\nIf you were using a mock for `uniqueId` as a workaround:\n\n```js\njest.mock('../../../core/components/_helpers/uniqueId', () => () => 'abcdef1234')\n```\n\nPlease, remove it since is no longer needed.\n\n## 0.12.1 [January 8, 2019]\n\n### Fixed\n\n- Radio: Fixed rendering of label [#1393]\n\n## 0.12.0 [January 7, 2019]\n\n### Added\n\n- Testing: Custom prop tests [#1308][#1312]\n- ResourceList: Adds a prop to set the width to the resource list body [#1314]\n- Image: Images are now responsive by default [#1244]\n- Image: Added fit properties to scale images to a container proportionally [#1244]\n- Avatar: Images in avatar fit to cover the container. This allows to display portrait and landscape images inside the avatar. [#1244]\n- (Internal) Layouts: Row, Gallery, Columns and Page [#1282]\n\n### Fixed\n\n- Icon: Fixed chevron up not facing up [#1391]\n- Tabs: Quick aria labels fix [#1375]\n- Tooltip: Adds z-index to tooltips [#1369]\n- Security upgrades [#1387]\n\n### Changed\n\n- Move actions API to Input [#1281]\n\n## 0.11.0 [December 18, 2018]\n\n### Added\n\n- Sortable Resource List [#1098]\n- Integration tests for Tabs [#1278]\n\n### Fixed\n\n- Implement attrs to styled API [#1263]\n- Make Tabs accessible [#1264]\n- Examples: react + react-dom should have same version [#1284]\n- Tooltip: Fix wrapping for long text [#1262]\n- Fix dialog [#1260]\n- Fix react router dom dependency [#1300]\n- Fix Resource List columns [#1192]\n- Fix docs links [#1280]\n- Fix version switcher [#1256]\n- Fix button action onClick handler not including the item [#1276]\n\n- Internal: Clean up code for masked TextInput [#1283]\n- Internal: Add module to all stories [#1288]\n\n### Changed\n\n- Internal: Massive find and replace for styled [#1249]\n- Remove line height declaration on tables [#1286]\n- Replace extend with styled [#1279]\n- Remove pointer events from icon [#1298]\n- Changes the Page Header from grid to flex [#1285]\n\n## 0.10.1 [December 11, 2018]\n\n### Fixed\n\n- Fixes dialog not catching pointer events [#1260]\n\n## 0.10.0 [December 11, 2018]\n\n### Added\n\n- Switch: Add support for label position by @m4tr1k + alignment fixes [#1171]\n- Styling: Add styled-components-with-helpers [#1208]\n- Styling: Add styled-margin [#1248]\n\n### Fixed\n\n- Responsive PageHeader [#1138]\n- Fix FormGroup warning when only one child is passed [#1221]\n- Select arrow icon color fix [#1220]\n- Switch.onToggle stopPropagation of event [#1233]\n- Added stories around page header [#1230]\n- Updates dropbox icon [#1240]\n- Upgrade to latest 3.x styled-components [#1241]\n- Removes space when the switch label is empty [#1234]\n- Removes pointer events on the overlay component [#1243]\n- Fixed accordions in Contribution guide [#1246]\n- Manage PoC: Fix Security issue and fix error on example when opening Applications [#1253]\n\n## 0.9.3 [December 4, 2018]\n\n### Fixed\n\n- Fix callHandler is not defined issue in ResourceList [#1210]\n- Improved examples in Pagination toolbar docs [#1207]\n- Fix appearance of select in Firefox [#1143]\n\n### Changed\n\n- Docs: Make it easier to add a guide [#1201]\n- Docs: Hidden placeholder for layout + overriding guides [#1202]\n\n## 0.9.2 [December 3, 2018]\n\n### Fixed\n\n- Form Actions: Change the role of secondary actions to `button` [#1172]\n- Button: Fix alignment issues in `Button` with href [#1178]\n\n### Changed\n\n- Resource List: Added support for `Button` as `actions` in items (soft deprecation) [#1133]\n- Internal: Migrate components to dotElement syntax [#1080]: What we did was to migrate all internal subcomponent names. The benefit of this is that we don’t have to export multiple components but only the `Component` and you have all internal subcomponents for free. We kept exporting `StyledComponent`s as `Component.Element`'s aliases so we don’t break any of your apps. **These aliases will be supported until Cosmos 1.0.**\n\n## 0.9.1 [November 29, 2018]\n\n### Fixed\n\n- Global styles: Set the global line height to `1.6`. [#1176]\n\n## 0.9.0 [November 29, 2018]\n\n### Added\n\n- Table: Add support for truncating table cell text [#1011]\n- Icons: Add social icons [#1146]\n\n### Fixed\n\n- Dialog: Making dialog responsive and accessible [#1102]\n- Examples: Fix warnings in Manage POC by @jvelezpo [#1135]\n- Remove out of sync prop-types to typescript declarations module [#1136]\n\n## 0.8.1 [November 22, 2018]\n\n### Fixed\n\n- Icons: Fix indexing of names [ae43a6]\n\n## 0.8.0 [November 22, 2018]\n\nShoutout to all the hacktoberfest contributions we received!\n\n### Fixed\n\n- Accessibility: Fix focus styles for Tabs [#1055]\n- Accessibility: Made checkbox, radio and switch accessible with a keyboard via @DCzajkowski [#1029]\n- Accessibility: Makes the list HTML semantically correct [#1028]\n- Accessibility: Make tabs accessible by @jvelezpo [#1052]\n- Alert: Match styles of close button with styleguide by @mrewers [#1031]\n- Avatar: Batch of fixes and enhancements! [#985]\n- Button: Fix vertical alignment in button and it's uses [#947]\n- Button: Fix margins for Safari [#1020]\n- Pagination: Fix selected state for pagination button [#1061]\n- Pagination toolbar: Hide toolbar if there are zero items by @astanciu [#1051]\n- Table: Make the field prop optional [#1088]\n- Table: Table columns can not be passed as a variable by @sanketsingh24 [#1035]\n- Docs: Fix typo in contribution guide by @Gotham13121997 [#1022]\n- Docs: Improve readme with material from docs website by @Tranquilled [#1039]\n- Docs: Fix `Form.Radio` example by @jvelezpo [#1032]\n- Docs: Make experimental notice permanent via @lopno [#1030]\n- Docs: Fix sidebar scrolling in Firefox by @fer22f [#1027]\n- Examples: Match names from manage dashboard by @rkhoriander [#1034]\n- Examples: Fix typo in webpack-hello example by @radlinskii [#964]\n\n### Added\n\n- Table: Add width prop to Table Header [#1053]\n- Select: Add disabled + disabled options + groups by @rakhi2104 [#1067]\n- Icons: Improve precision for svg optimisation [#1095]\n- Icons: Added UI icons (policy, ip address, email, database, block) [#1122]\n- Icons: Added UI icons (add user, usage, search, chevron up, arrow up, arrow down)\n- Docs: Adds system guidelines [#1079]\n\n## 0.7.2 [October 24, 2018]\n\n### Fixed\n\n- Fix compatibility issue with `cosmos-fonts` [#1015]\n\n## 0.7.1 [October 23, 2018]\n\n### Added\n\n- Add LICENSE file: MIT [#1011]\n\n## 0.7.0 [October 23, 2018]\n\n### Added\n\n- Component: New `Spinner` variants (small, medium, large) [#939]\n- Component: Introduce loading state for `Table` [#978]\n- Icons: Added undo icon [#968]\n- Icons: Added more icon [#984]\n- Docs: Add example for `actions` in `Table` [#982]\n\n### Changed\n\n- (Breaking 💥) Move fonts to a different package [#991]\n\n### Fixed\n\n- Icons: Fixed lock fill icon [#968]\n\n### Added\n\n- Components: Add support for icons in Alerts [#919]\n- Components: Add placeholder for `Select` [#934]\n- Icons: Add missing icons for manage [#953]\n- Documentation: Add option to switch between versions [#945]\n\n## 0.6.0 [September 28, 2018]\n\n### Added\n\n- Components: Add support for icons in Alerts [#919]\n- Components: Add placeholder for `Select` [#934]\n- Icons: Add missing icons for manage [#953]\n- Documentation: Add option to switch between versions [#945]\n\n### Fixed\n\n- `Alert` doesn't break with no children/text [#930]\n- Enforced `Icon` size to fix icon vertical alignment [#931]\n\n## 0.5.2 [September 11, 2018]\n\n### Changed\n\n- Make `description` optional in `PageHeader` [#885]\n- Support `target` in link for `EmptyState` and `AvatarBlock` [#771]\n\n### Fixed\n\n- Fix vertical alignment of actions inside `Input` [#866]\n- Fix selected tab color for `Tabs` [#886]\n- Fix margin for single button in `ButtonGroup` [#905]\n\n## 0.5.1 [September 3, 2018]\n\n### Added\n\n- Component: Danger Zone (experimental) [#847]\n\n### Fixed\n\n- Table: Add support for a Table that isn't sortable + improve documentation [#865]\n- Docs: Fix production version + implement cache busting [#876]\n\n## 0.5.0 [August 30, 2018]\n\n### Added\n\n- Testing: Adding support for attributes for automation [#850]\n\n### Changed\n\n- Manage Example: Update Page Header usage [#822]\n- Pagination toolbar: disable buttons on edge pages & hide on one page [#845]\n- Docs: Add deprecated tag in prop table [#852]\n\n### Fixed\n\n- Table: Improve interactivity of rows [#830]\n- Website: Fix nav version in navigation [#834]\n- Page Header: Fixed learn more arrow icon on hover [#844]\n\n## 0.4.0 [August 17, 2018]\n\n### Added\n\n- Style and documenation improvements for `Pagination` [#750]\n- Add automatic sorting for `Table` [#758]\n- Support free texts in Page Header, Empty State and Alert [#782]\n\n### Changed\n\n- Primary action handler is now optional in `Form` [#790]\n\n### Fixed\n\n- Fixed styles for `Breadcrumbs` [#773]\n- Fixed background color for loading states in `Button` [#777]\n- Fixed border color for input to match Manage [#786]\n- Fixed alignment for `AvatarBlock` with link [#810]\n- Fixed issues with global styles and resets in styleguide [#814]\n\n## 0.3.3 [August 7, 2018]\n\n### Added\n\n- Add support for multiple links in `Breadcrumbs` [#695]\n- Added click handler props to ResourceList and Table [#735]\n- Add document playground for folks to report issues [#738]\n- Add support for `size` prop to `TextInput` [#739]\n\n### Changed\n\n- **Unstable**: Style improvements to `Pagination` [#741]\n- Bring manage PoC closer to real manage [#745]\n\n### Fixed\n\n- Pass `Form` actions through to underlying `Button` [#718]\n- Fix `Button` appearance with url prop [#728]\n- Fix wrapping for long text in Button [#751]\n- **BREAKING**: Fix state updates inside `Tabs` (end support for uncontrolled state) [#754]\n\n## 0.3.2 [July 25, 2018]\n\n### Fixed\n\n- Fix deployment tooling [#726]\n\n## 0.3.1 [July 25, 2018]\n\n### Added\n\n- Add `Checkbox` component [#612]\n- Add support for disabling actions in `ResourceListItem` [#647]\n- `Avatar` now accepts an `<svg>` for its image prop [#650]\n- Support `<Button/>` in dialog actions [#660]\n- Alerts can now be dismissed [#688]\n- Support text in `loading` + `success` state for `Button` [#714]\n- Add option to disable global styles [#719]\n- Add documentation for using `styled` [#629]\n- **Unstable**: Pagination component base [#666]\n- Add documentation for contributing components [#638]\n\n### Changed\n\n- **BREAKING**: Use color name instead of hex codes for `Icon` [#684]\n- **DEPRECATED**: Replace input `error` prop with `hasError` [#690]\n- Rename clients to applications in manage PoC [#636]\n- Change `Overlay` to be a hidden component [#693]\n- Make the sidebar foldable in documentation [#686]\n\n### Fixed\n\n- Update PoC link in docs [#646]\n- Default `<input>` to `type=text` [#691]\n- Fix `styled` export [#701]\n- Fix form layouts leaking into each other [#716]\n\n## 0.3.0 [June 25, 2018]\n\n### Added\n\n- **Unstable**: Added `Badge` component. [#548]\n- **Unstable**: Added `Tag` component. [#549]\n- **Unstable**: Added `AvatarBlock` component. [#561]\n- `Tooltip` now supports new `left` and `right` values for the `position` prop. [#576]\n- `Stack` now supports a `space-between` value for its `align` prop, resulting in behavior similar to the flexbox property of the same name. [#591]\n- `Tabs` may now optionally operate as a controlled component via new `selected` and `onSelect` props. [#585]\n- Cosmos now exports its copy of [styled-components](https://github.com/styled-components/styled-components) to avoid conflicts where consumers would use their own copy. [#614, #610]\n- Added TypeScript definitions for all components. (Thanks @jcenturion!) [#632]\n\n### Changed\n\n- **BREAKING**: Actions have now been standardized across the library. Any actions which previously expected a `text` property now expect a `label` property instead. [#559]\n- **BREAKING**: `Thumbnail` has been removed, and its functionality has been merged with `Avatar` for simplicity. [#561]\n- **BREAKING**: `Form` now supports only a single destructive action via the `destructiveAction` prop, which replaces the previous `destructiveActions` prop that accepted an array of actions. [#601]\n- **BREAKING**: React `16.x` is now referenced as a peer dependency to avoid conflicts. [#604]\n- Reorganized code, making docs and examples independent from the core library. [#575, #607]\n- `PageHeader` will now render a secondary action even if there is no primary action specified. [#590]\n- Switched to [nps](https://github.com/kentcdodds/nps) to manage scripts that had previously been in `package.json`. [#615]\n- Replaced placeholder screenshot for `Dialog` with a real working example. [#620]\n\n### Fixed\n\n- Fixed issue with `Radio.Group` resulting from filtering children by type. [#581]\n- Fixed various PropTypes validation warnings. [#582]\n- Fixed issue where sidebar groups would not display as open even when a child was marked as `selected`. [#583]\n- Fixed issue where the search in the documentation sidebar would throw an error in response to certain user input. [#593]\n- Fixed issue where form inputs would lose their styling when surrounded by container elements [#619]\n- Fixed issue where the preview in the documentation sandbox was not being correctly updated in response to user input in the props table [#637]\n- Fixed misalignment of tooltips on `Buttons`. [#617]\n\n## 0.2.3 [May 31, 2018]\n\n### Fixed\n\n- Fixed problem where fonts are not loading [#571]\n\n## 0.2.2 [May 29, 2018]\n\n### Added\n\n- Added `Radio` component to Forms [#511]\n- Added `Label` component [#544]\n- Added support for custom Form fields [#530]\n- Added prop to make tooltips visible by default [#562]\n\n### Changed\n\n- **BREAKING** `method` has been renamed to `handler` for all components that accept actions as a prop [#551]\n\n  ```jsx\n  <Form.Actions primaryAction={{ label: 'Save Changes', handler: () => {} }} />\n  ```\n\n- Documentation improvements for `EmptyState` and `Alert` [#491] + [#534]\n\n### Fixed\n\n- Added missing id to Switch for accessibility [#558]\n- Fixed path for tokens in helpers [#564]\n\n## 0.2.1 [May 8, 2018]\n\n### Changed\n\n- New information on defaults and required fields in docs [#533]\n\n### Fixed\n\n- Fixed persistent warning in `Form.Actions` [#529]\n\n## 0.2.0 [April 26, 2018]\n\n### Added\n\n- **Unstable**: New `ResourceList` component. [#504]\n- **Unstable**: New `Table` component. [#519]\n\n### Changed\n\n- Expanded routes in Manage proof of concept to permit additional pages to be added. [#503]\n\n### Fixed\n\n- `Tabs` component now ignores `null` children instead of throwing an error. [#518]\n- Fixed incorrect layout of \"Learn More\" link in `EmptyState`. [#514]\n\n## 0.1.1 [April 12, 2018]\n\n### Changed\n\n- **BREAKING** Make cosmos babel preset an optional dependency [#497]\n  The babel preset is no longer available in `@auth0/cosmos/babel`, use `@auth0/babel-preset-cosmos` instead\n- An improved client list for manage proof of concept [#441]\n- Better naming + urls [#493] and permalinks for docs[#492]\n\n## 0.1.0 [April 4, 2018]\n\n### Added\n\n- New `cta` appearance for `Button`, to be used for primary calls to action. [#425]\n- New \"link mode\" for `Button`. Passing an `href` prop to `Button` will cause it to render as an `<a>` instead of a `<button>`. [#425]\n- **Unstable**: New `Avatar` and `Thumbnail` components. [#398]\n- **Unstable**: New `Text` component for styled text. [#392]\n\n### Changed\n\n- **BREAKING:** Colliding Boolean props governing appearance of `Button` were replaced with an `appearance` enum. [#400]\n- **BREAKING:** `line-height: 1.6` has been moved from global reset to a scope specific to cosmos components\n"
 }

molecules/form/field/field.js

@@ -79,2 +79,31 @@ 'use strict';
 
+var _React$createContext = _react2.default.createContext({}),
+    Provider = _React$createContext.Provider,
+    Consumer = _React$createContext.Consumer;
+
+var FieldInput = function FieldInput(props) {
+  var Component = props.Component,
+      fieldProps = _objectWithoutProperties(props, ['Component']);
+  /*
+    old API
+    we proxy through all the props to the input element
+  */
+
+
+  if (Component) return _react2.default.createElement(Component, fieldProps);
+
+  /*
+    New API
+    We create a context around the field to pass the field id
+  */
+  var children = fieldProps.children,
+      id = fieldProps.id;
+
+  return _react2.default.createElement(
+    Provider,
+    { value: { formFieldId: id } },
+    children
+  );
+};
+
 var Field = function Field(props) {
@@ -85,3 +114,4 @@ /* Get unique id for label */
   var error = props.error,
-      fieldProps = _objectWithoutProperties(props, ['error']);
+      htmlFor = props.htmlFor,
+      fieldProps = _objectWithoutProperties(props, ['error', 'htmlFor']);
 
@@ -100,3 +130,3 @@ return _react2.default.createElement(
             _label2.default,
-            { htmlFor: id },
+            { htmlFor: htmlFor || id },
             props.label
@@ -108,3 +138,7 @@ )
           { layout: context.layout },
-          props.fieldComponent ? _react2.default.createElement(props.fieldComponent, _extends({ id: id, hasError: error ? true : false }, fieldProps)) : props.children,
+          _react2.default.createElement(FieldInput, _extends({
+            Component: props.fieldComponent,
+            id: id,
+            hasError: error ? true : false
+          }, fieldProps)),
           props.error ? _react2.default.createElement(
@@ -174,2 +208,4 @@ _error2.default,
 
+Field.ContextConsumer = Consumer;
+Field.Error = _error2.default;
 exports.default = Field;

molecules/form/field/field.md

@@ -13,3 +13,3 @@ ```meta
 <Form>
-  <Form.Field {props}>
+  <Form.Field {props} defaults={{label: "Field label"}}>
     <TextInput placeholder="Enter some text" />
@@ -48,4 +48,5 @@ </Form.Field>
           <Select
+            value="1"
             options={[
-              { text: 'First option', value: '1', defaultSelected: true },
+              { text: 'First option', value: '1' },
               { text: 'Second option', value: '2' },
@@ -55,2 +56,3 @@ { text: 'Third option', value: '3' },
             ]}
+            onChange={e => console.log(e)}
           />
@@ -154,3 +156,3 @@ </Form.Field>
   >
-    <TextInput type="text" placeholder="Enter something" defaultValue="auth0.com" hasError={true} />
+    <TextInput type="text" hasError={true} placeholder="Enter something" defaultValue="auth0.com" />
   </Form.Field>
@@ -174,2 +176,3 @@ </Form>
         options={[{ text: 'centimetres', value: 'cm' }, { text: 'inches', value: 'in' }]}
+        onChange={e => console.log(e)}
       />
@@ -184,2 +187,12 @@ <Button appearance="primary" onClick={e => console.log(e)}>
 
+You can even use bring your own input field. Remember to care of the error state and accessibility though!
+
+```js
+<Form>
+  <Form.Field htmlFor="bring-your-own" label="Custom Field" error="Please attach a file">
+    <input type="text" id="bring-your-own" placeholder="Enter something" />
+  </Form.Field>
+</Form>
+```
+
 ### Old API
@@ -195,2 +208,3 @@
     placeholder="Enter something"
+    error="There's something wrong in the neighbourhood"
     actions={[
@@ -197,0 +211,0 @@ { icon: 'copy', label: 'Copy URL', handler: e => console.log(e) },

molecules/form/field/stories/field.story.js

@@ -15,3 +15,3 @@ 'use strict';
 
-(0, _react3.storiesOf)('Form').add('all the fields', function () {
+(0, _react3.storiesOf)('Form', module).add('all the fields', function () {
   return _react2.default.createElement(
@@ -41,3 +41,7 @@ _storyHelpers.Example,
         _react2.default.createElement(_cosmos.Select, {
-          options: [{ text: 'First option', value: '1', defaultSelected: true }, { text: 'Second option', value: '2' }, { text: 'Third option', value: '3' }, { text: 'Fourth option', value: '4' }]
+          value: 1,
+          options: [{ text: 'First option', value: '1' }, { text: 'Second option', value: '2' }, { text: 'Third option', value: '3' }, { text: 'Fourth option', value: '4' }],
+          onChange: function onChange(event) {
+            return console.log(event);
+          }
         })
@@ -88,4 +92,4 @@ ),
         _cosmos.Form.Field,
-        { label: 'Custom field' },
-        _react2.default.createElement('input', { type: 'date' })
+        { htmlFor: 'bring-your-own-id', label: 'Custom field' },
+        _react2.default.createElement('input', { id: 'bring-your-own-id', type: 'date' })
       ),
@@ -100,3 +104,7 @@ _react2.default.createElement(
           _react2.default.createElement(_cosmos.Select, {
-            options: [{ text: 'centimetres', value: 'cm' }, { text: 'inches', value: 'in' }]
+            value: 'cm',
+            options: [{ text: 'centimetres', value: 'cm' }, { text: 'inches', value: 'in' }],
+            onChange: function onChange(event) {
+              return console.log(event);
+            }
           }),
@@ -103,0 +111,0 @@ _react2.default.createElement(_cosmos.Button, { appearance: 'link', icon: 'copy', label: 'Copy value', onClick: function onClick(e) {

molecules/form/field/stories/select-field.story.js

@@ -26,3 +26,7 @@ 'use strict';
         _react2.default.createElement(_cosmos.Select, {
-          options: [{ text: 'First option', value: '1', defaultSelected: true }, { text: 'Second option', value: '2' }, { text: 'Third option', value: '3' }, { text: 'Fourth option', value: '4' }]
+          value: 1,
+          options: [{ text: 'First option', value: '1' }, { text: 'Second option', value: '2' }, { text: 'Third option', value: '3' }, { text: 'Fourth option', value: '4' }],
+          onChange: function onChange(event) {
+            return console.log(event);
+          }
         })
@@ -46,3 +50,7 @@ )
           hasError: true,
-          options: [{ text: 'First option', value: '1', defaultSelected: true }, { text: 'Second option', value: '2' }, { text: 'Third option', value: '3' }, { text: 'Fourth option', value: '4' }]
+          value: 1,
+          options: [{ text: 'First option', value: '1' }, { text: 'Second option', value: '2' }, { text: 'Third option', value: '3' }, { text: 'Fourth option', value: '4' }],
+          onChange: function onChange(event) {
+            return console.log(event);
+          }
         })
@@ -64,3 +72,7 @@ )
         error: 'Everything is broken',
-        options: [{ text: 'First option', value: '1', defaultSelected: true }, { text: 'Second option', value: '2' }, { text: 'Third option', value: '3' }, { text: 'Fourth option', value: '4' }]
+        value: 1,
+        options: [{ text: 'First option', value: '1' }, { text: 'Second option', value: '2' }, { text: 'Third option', value: '3' }, { text: 'Fourth option', value: '4' }],
+        onChange: function onChange(event) {
+          return console.log(event);
+        }
       })
@@ -67,0 +79,0 @@ )

molecules/form/form.js

@@ -70,2 +70,3 @@ 'use strict';
 };
+Form.Field.ContextConsumer = _field2.default.ContextConsumer;
 Form.TextInput = function (props) {
@@ -72,0 +73,0 @@ return _react2.default.createElement(_field2.default, _extends({}, props, { fieldComponent: _textInput2.default }));

molecules/form/form.md

@@ -51,4 +51,5 @@ ```meta
           <Select
+            value={1}
             options={[
-              { text: 'First option', value: '1', defaultSelected: true },
+              { text: 'First option', value: '1' },
               { text: 'Second option', value: '2' },
@@ -58,2 +59,3 @@ { text: 'Third option', value: '3' },
             ]}
+            onChange={event => console.log(event)}
           />
@@ -60,0 +62,0 @@ </Form.Field>

molecules/page-header/page-header.js

@@ -110,3 +110,3 @@ 'use strict';
   /** Page title of the section */
-  title: _propTypes2.default.string.isRequired,
+  title: _propTypes2.default.node.isRequired,
   /** Description to give more information to the user */
@@ -113,0 +113,0 @@ description: _propTypes2.default.oneOfType([_propTypes2.default.shape({

molecules/page-header/page-header.story.js

@@ -187,2 +187,30 @@ 'use strict';
   );
+});
+
+(0, _react3.storiesOf)('Page Header', module).add('with dynamic title', function () {
+  return _react2.default.createElement(
+    _storyHelpers.Example,
+    { title: 'default' },
+    _react2.default.createElement(_cosmos.PageHeader, {
+      title: _react2.default.createElement(
+        _react2.default.Fragment,
+        null,
+        'Hooks ',
+        _react2.default.createElement(
+          _cosmos.Badge,
+          { appearance: 'information' },
+          'BETA'
+        )
+      ),
+      description: {
+        text: 'Setup a mobile, web or IoT application to use Auth0 for Authentication.',
+        learnMore: '/clients'
+      },
+      primaryAction: _react2.default.createElement(
+        _cosmos.Button,
+        { icon: 'plus', onClick: function onClick() {} },
+        'Create Client'
+      )
+    })
+  );
 });

package.json

 {
   "name": "@auth0/cosmos",
   "description": "Component library for Auth0 Design System",
-  "version": "0.16.2",
+  "version": "0.17.0",
   "repository": "auth0/cosmos",
@@ -12,3 +12,3 @@ "main": "index.js",
   "dependencies": {
-    "@auth0/cosmos-tokens": "0.16.2",
+    "@auth0/cosmos-tokens": "0.17.0",
     "md5": "^2.2.1",
@@ -15,0 +15,0 @@ "prop-types": "15.6.1",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1415745

increased by0.72%

Lines of code

25978

increased by1.12%

Dependency changes

• + Added@auth0/cosmos-tokens@0.17.0(transitive)

• - Removed@auth0/cosmos-tokens@0.16.2(transitive)

• Updated@auth0/cosmos-tokens@0.17.0