@roo-ui/components - npm Package Compare versions

Comparing version 0.11.1 to 0.12.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+<a name="0.12.0"></a>
+# [0.12.0](https://github.com/hooroo/roo-ui/compare/v0.11.1...v0.12.0) (2018-05-14)
+
+
+### Features
+
+* add alert component ([#31](https://github.com/hooroo/roo-ui/issues/31)) ([08afef1](https://github.com/hooroo/roo-ui/commit/08afef1))
+
+
+
+
 <a name="0.11.1"></a>
@@ -8,0 +19,0 @@ ## [0.11.1](https://github.com/hooroo/roo-ui/compare/v0.11.0...v0.11.1) (2018-05-14)

dist/BackgroundImage/BackgroundImage.js

@@ -5,4 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _templateObject = _taggedTemplateLiteral(['\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-image: url(', ');\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  background-position: center;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-image: url(', ');\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']);
-
 var _styledComponents = require('styled-components');
@@ -24,5 +22,5 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var BackgroundImage = (0, _styledComponents2['default'])(_cleanTag2['default'].div)(_templateObject, function (props) {
+var BackgroundImage = (0, _styledComponents2['default'])(_cleanTag2['default'].div).withConfig({
+  displayName: 'BackgroundImage'
+})(['background-position:center;background-size:cover;background-repeat:no-repeat;background-image:url(', ');', ' ', ' ', ' ', ' ', ' ', ''], function (props) {
   return props.src;
@@ -29,0 +27,0 @@ }, _styledSystem.height, _styledSystem.width, _styledSystem.space, _styledSystem.backgroundSize, _styledSystem.backgroundPosition, _styledSystem.backgroundRepeat);

dist/Box/Box.js

@@ -5,4 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _templateObject = _taggedTemplateLiteral(['\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', ';\n  ', ';\n'], ['\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', ';\n  ', ';\n']);
-
 var _styledComponents = require('styled-components');
@@ -20,8 +18,8 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Box = (0, _styledComponents2['default'])(_cleanTag2['default']).withConfig({
+  displayName: 'Box'
+})(['', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ';', ';'], _styledSystem.space, _styledSystem.width, _styledSystem.height, _styledSystem.color, _styledSystem.textAlign, _styledSystem.boxShadow, _styledSystem.borderRadius, _styledSystem.borders, _styledSystem.borderColor);
 
-var Box = (0, _styledComponents2['default'])(_cleanTag2['default'])(_templateObject, _styledSystem.space, _styledSystem.width, _styledSystem.height, _styledSystem.color, _styledSystem.textAlign, _styledSystem.boxShadow, _styledSystem.borderRadius, _styledSystem.borders, _styledSystem.borderColor);
-
 Box.propTypes = Object.assign({}, _styledSystem.space.propTypes, _styledSystem.width.propTypes, _styledSystem.height.propTypes, _styledSystem.color.propTypes, _styledSystem.textAlign.propTypes, _styledSystem.boxShadow.propTypes, _styledSystem.borderRadius.propTypes, _styledSystem.borders.propTypes, _styledSystem.borderColor.propTypes);
 
 exports['default'] = Box;

dist/Button/Button.js

@@ -5,6 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: inline-block;\n  margin: 0;\n  padding: ', ' ', ';\n  font-size: ', ';\n  font-weight: ', ';\n  letter-spacing: ', ';\n  line-height: ', ';\n  text-align: center;\n  text-decoration: none;\n  text-transform: uppercase;\n  border: ', ';\n  border-color: transparent;\n  border-radius: ', ';\n  outline: 0;\n  transition: background-color ', ';\n  cursor: pointer;\n  appearance: none;\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover:not(:disabled) {\n    background-color: ', ';\n  }\n\n  &:focus {\n    box-shadow: ', ';\n  }\n\n  &:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  ', '\n\n  ', '\n'], ['\n  display: inline-block;\n  margin: 0;\n  padding: ', ' ', ';\n  font-size: ', ';\n  font-weight: ', ';\n  letter-spacing: ', ';\n  line-height: ', ';\n  text-align: center;\n  text-decoration: none;\n  text-transform: uppercase;\n  border: ', ';\n  border-color: transparent;\n  border-radius: ', ';\n  outline: 0;\n  transition: background-color ', ';\n  cursor: pointer;\n  appearance: none;\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  &:hover:not(:disabled) {\n    background-color: ', ';\n  }\n\n  &:focus {\n    box-shadow: ', ';\n  }\n\n  &:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n  }\n\n  ', '\n\n  ', '\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    border-radius: ', ';\n  '], ['\n    border-radius: ', ';\n  ']),
-    _templateObject3 = _taggedTemplateLiteral(['\n    width: 100%;\n  '], ['\n    width: 100%;\n  ']);
-
 var _styledComponents = require('styled-components');
@@ -28,4 +24,2 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var getBackground = function getBackground(props) {
@@ -35,8 +29,10 @@ return (0, _styledSystem.color)(props).backgroundColor || (0, _styledSystem.buttonStyle)(props).backgroundColor;
 
-var Button = (0, _styledComponents2['default'])(_cleanTag2['default'].button)(_templateObject, (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.6'), (0, _styledSystem.themeGet)('fontSizes.base'), (0, _styledSystem.themeGet)('fontWeights.bold'), (0, _styledSystem.themeGet)('letterSpacings.wide'), (0, _styledSystem.themeGet)('lineHeights.normal'), (0, _styledSystem.themeGet)('borders.2'), (0, _styledSystem.themeGet)('radii.default'), (0, _styledSystem.themeGet)('transitions.default'), _styledSystem.buttonStyle, _styledSystem.space, _styledSystem.color, _styledSystem.boxShadow, function (props) {
+var Button = (0, _styledComponents2['default'])(_cleanTag2['default'].button).withConfig({
+  displayName: 'Button'
+})(['display:inline-block;margin:0;padding:', ' ', ';font-size:', ';font-weight:', ';letter-spacing:', ';line-height:', ';text-align:center;text-decoration:none;text-transform:uppercase;border:', ';border-color:transparent;border-radius:', ';outline:0;transition:background-color ', ';cursor:pointer;appearance:none;', ' ', ' ', ' ', ' &:hover:not(:disabled){background-color:', ';}&:focus{box-shadow:', ';}&:disabled{opacity:0.7;cursor:not-allowed;}', ' ', ''], (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.6'), (0, _styledSystem.themeGet)('fontSizes.base'), (0, _styledSystem.themeGet)('fontWeights.bold'), (0, _styledSystem.themeGet)('letterSpacings.wide'), (0, _styledSystem.themeGet)('lineHeights.normal'), (0, _styledSystem.themeGet)('borders.2'), (0, _styledSystem.themeGet)('radii.default'), (0, _styledSystem.themeGet)('transitions.default'), _styledSystem.buttonStyle, _styledSystem.space, _styledSystem.color, _styledSystem.boxShadow, function (props) {
   return (0, _polished.darken)(0.1, getBackground(props));
 }, (0, _styledSystem.themeGet)('shadows.focus'), function (props) {
-  return props.rounded && (0, _styledComponents.css)(_templateObject2, (0, _styledSystem.themeGet)('radii.rounded'));
+  return props.rounded && (0, _styledComponents.css)(['border-radius:', ';'], (0, _styledSystem.themeGet)('radii.rounded'));
 }, function (props) {
-  return props.block && (0, _styledComponents.css)(_templateObject3);
+  return props.block && (0, _styledComponents.css)(['width:100%;']);
 });
@@ -43,0 +39,0 @@

dist/Container/Container.js

@@ -5,4 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _templateObject = _taggedTemplateLiteral(['\n  margin-left: auto;\n  margin-right: auto;\n\n  ', '\n'], ['\n  margin-left: auto;\n  margin-right: auto;\n\n  ', '\n']);
-
 var _styledComponents = require('styled-components');
@@ -20,6 +18,6 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Container = (0, _styledComponents2['default'])(_cleanTag2['default']).withConfig({
+  displayName: 'Container'
+})(['margin-left:auto;margin-right:auto;', ''], _styledSystem.maxWidth);
 
-var Container = (0, _styledComponents2['default'])(_cleanTag2['default'])(_templateObject, _styledSystem.maxWidth);
-
 Container.propTypes = Object.assign({}, _styledSystem.maxWidth.propTypes);
@@ -26,0 +24,0 @@

dist/Flex/Flex.js

@@ -5,4 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', ';\n'], ['\n  display: flex;\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', ';\n']);
-
 var _styledComponents = require('styled-components');
@@ -20,8 +18,8 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Flex = (0, _styledComponents2['default'])(_cleanTag2['default']).withConfig({
+  displayName: 'Flex'
+})(['display:flex;', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ';'], _styledSystem.space, _styledSystem.width, _styledSystem.height, _styledSystem.color, _styledSystem.alignItems, _styledSystem.justifyContent, _styledSystem.flexWrap, _styledSystem.flexDirection);
 
-var Flex = (0, _styledComponents2['default'])(_cleanTag2['default'])(_templateObject, _styledSystem.space, _styledSystem.width, _styledSystem.height, _styledSystem.color, _styledSystem.alignItems, _styledSystem.justifyContent, _styledSystem.flexWrap, _styledSystem.flexDirection);
-
 Flex.propTypes = Object.assign({}, _styledSystem.space.propTypes, _styledSystem.width.propTypes, _styledSystem.height.propTypes, _styledSystem.color.propTypes, _styledSystem.alignItems.propTypes, _styledSystem.justifyContent.propTypes, _styledSystem.flexWrap.propTypes, _styledSystem.flexDirection.propTypes);
 
 exports['default'] = Flex;

dist/Heading/Heading.test.js

@@ -44,16 +44,2 @@ var _react = require('react');
 
-  describe('<Heading.h1 />', function () {
-    beforeEach(function () {
-      wrapper = (0, _testUtils.shallowWithTheme)(_react2['default'].createElement(
-        _2['default'].h1,
-        null,
-        'Hello world'
-      ), _themes.qantas);
-    });
-
-    it('renders correctly', function () {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-
   describe('<Heading.h2 />', function () {
@@ -60,0 +46,0 @@ beforeEach(function () {

dist/Icon/Icon.js

@@ -7,4 +7,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _templateObject = _taggedTemplateLiteral(['\n  flex: none;\n  ', '\n  ', ';\n'], ['\n  flex: none;\n  ', '\n  ', ';\n']);
-
 var _react = require('react');
@@ -34,4 +32,2 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -74,3 +70,5 @@
 
-var Icon = (0, _styledComponents2['default'])(Base)(_templateObject, _styledSystem.space, _styledSystem.color);
+var Icon = (0, _styledComponents2['default'])(Base).withConfig({
+  displayName: 'Icon'
+})(['flex:none;', ' ', ';'], _styledSystem.space, _styledSystem.color);
 
@@ -77,0 +75,0 @@ Icon.propTypes = Object.assign({}, Base.propTypes, _styledSystem.color.propTypes, _styledSystem.space.propTypes);

dist/Icon/Icon.story.js

@@ -1,3 +0,2 @@
-var _templateObject = _taggedTemplateLiteral(['\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));\n'], ['\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  font-family: monospace;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n'], ['\n  font-family: monospace;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n']);
+var _templateObject = _taggedTemplateLiteral(['\n  font-family: monospace;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n'], ['\n  font-family: monospace;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n']);
 
@@ -47,5 +46,7 @@ var _styledComponents = require('styled-components');
 
-var Grid = _styledComponents2['default'].div(_templateObject);
+var Grid = _styledComponents2['default'].div.withConfig({
+  displayName: 'Iconstory__Grid'
+})(['display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));']);
 
-var Caption = _.Text.extend(_templateObject2);
+var Caption = _.Text.extend(_templateObject);
 
@@ -52,0 +53,0 @@ var renderIcons = function renderIcons(group) {

dist/Image/Image.js

@@ -5,5 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: block;\n  max-width: 100%;\n  height: auto;\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  ', '\n'], ['\n  display: block;\n  max-width: 100%;\n  height: auto;\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  ', '\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    display: inline-block;\n  '], ['\n    display: inline-block;\n  ']);
-
 var _propTypes = require('prop-types');
@@ -25,6 +22,6 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Image = (0, _styledComponents2['default'])(_cleanTag2['default'].img)(_templateObject, _styledSystem.space, _styledSystem.size, _styledSystem.height, _styledSystem.width, function (props) {
-  return props.inline && (0, _styledComponents.css)(_templateObject2);
+var Image = (0, _styledComponents2['default'])(_cleanTag2['default'].img).withConfig({
+  displayName: 'Image'
+})(['display:block;max-width:100%;height:auto;', ' ', ' ', ' ', ' ', ''], _styledSystem.space, _styledSystem.size, _styledSystem.height, _styledSystem.width, function (props) {
+  return props.inline && (0, _styledComponents.css)(['display:inline-block;']);
 });
@@ -31,0 +28,0 @@

dist/index.js

@@ -174,2 +174,28 @@ Object.defineProperty(exports, "__esModule", {
 
+var _NakedButton = require('./NakedButton');
+
+Object.defineProperty(exports, 'NakedButton', {
+  enumerable: true,
+  get: function () {
+    function get() {
+      return _interopRequireDefault(_NakedButton)['default'];
+    }
+
+    return get;
+  }()
+});
+
+var _Alert = require('./Alert');
+
+Object.defineProperty(exports, 'Alert', {
+  enumerable: true,
+  get: function () {
+    function get() {
+      return _interopRequireDefault(_Alert)['default'];
+    }
+
+    return get;
+  }()
+});
+
 var _BlockLink = require('./BlockLink');
@@ -176,0 +202,0 @@

dist/Input/Input.js

@@ -5,5 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: block;\n  width: 100%;\n  margin: 0;\n  margin-bottom: ', ';\n  padding: ', ' ', ';\n  font-size: ', ';\n  line-height: ', ';\n  color: ', ';\n  border: ', ';\n  border-color: ', ';\n  outline: 0;\n  transition: border-color ', ';\n  appearance: none;\n\n  &:focus {\n    border-color: ', ';\n  }\n\n  ::placeholder {\n    color: ', ';\n  }\n\n  ::-ms-clear {\n    display: none;\n  }\n\n  ', '\n\n  ', ';\n'], ['\n  display: block;\n  width: 100%;\n  margin: 0;\n  margin-bottom: ', ';\n  padding: ', ' ', ';\n  font-size: ', ';\n  line-height: ', ';\n  color: ', ';\n  border: ', ';\n  border-color: ', ';\n  outline: 0;\n  transition: border-color ', ';\n  appearance: none;\n\n  &:focus {\n    border-color: ', ';\n  }\n\n  ::placeholder {\n    color: ', ';\n  }\n\n  ::-ms-clear {\n    display: none;\n  }\n\n  ', '\n\n  ', ';\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    border-color: ', ';\n  '], ['\n    border-color: ', ';\n  ']);
-
 var _propTypes = require('prop-types');
@@ -25,6 +22,6 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Input = (0, _styledComponents2['default'])(_cleanTag2['default'])(_templateObject, (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.4'), (0, _styledSystem.themeGet)('fontSizes.base'), (0, _styledSystem.themeGet)('lineHeights.normal'), (0, _styledSystem.themeGet)('colors.grey.0'), (0, _styledSystem.themeGet)('borders.2'), (0, _styledSystem.themeGet)('colors.grey.2'), (0, _styledSystem.themeGet)('transitions.default'), (0, _styledSystem.themeGet)('colors.brand.secondary'), (0, _styledSystem.themeGet)('colors.grey.1'), function (props) {
-  return props.error && (0, _styledComponents.css)(_templateObject2, (0, _styledSystem.themeGet)('colors.ui.error'));
+var Input = (0, _styledComponents2['default'])(_cleanTag2['default']).withConfig({
+  displayName: 'Input'
+})(['display:block;width:100%;margin:0;margin-bottom:', ';padding:', ' ', ';font-size:', ';line-height:', ';color:', ';border:', ';border-color:', ';outline:0;transition:border-color ', ';appearance:none;&:focus{border-color:', ';}::placeholder{color:', ';}::-ms-clear{display:none;}', ' ', ';'], (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('space.4'), (0, _styledSystem.themeGet)('fontSizes.base'), (0, _styledSystem.themeGet)('lineHeights.normal'), (0, _styledSystem.themeGet)('colors.grey.0'), (0, _styledSystem.themeGet)('borders.2'), (0, _styledSystem.themeGet)('colors.grey.2'), (0, _styledSystem.themeGet)('transitions.default'), (0, _styledSystem.themeGet)('colors.brand.secondary'), (0, _styledSystem.themeGet)('colors.grey.1'), function (props) {
+  return props.error && (0, _styledComponents.css)(['border-color:', ';'], (0, _styledSystem.themeGet)('colors.ui.error'));
 }, _styledSystem.space);
@@ -31,0 +28,0 @@

dist/Label/Label.js

@@ -5,4 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: block;\n  width: 100%;\n  margin: 0;\n  margin-bottom: ', ';\n\n  ', '\n\n  ', '\n  ', '\n'], ['\n  display: block;\n  width: 100%;\n  margin: 0;\n  margin-bottom: ', ';\n\n  ', '\n\n  ', '\n  ', '\n']);
-
 var _propTypes = require('prop-types');
@@ -26,5 +24,5 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Label = (0, _styledComponents2['default'])(_cleanTag2['default'].label)(_templateObject, (0, _styledSystem.themeGet)('space.3'), function (props) {
+var Label = (0, _styledComponents2['default'])(_cleanTag2['default'].label).withConfig({
+  displayName: 'Label'
+})(['display:block;width:100%;margin:0;margin-bottom:', ';', ' ', ' ', ''], (0, _styledSystem.themeGet)('space.3'), function (props) {
   return props.hidden && (0, _polished.hideVisually)();
@@ -31,0 +29,0 @@ }, _styledSystem.textStyle, _styledSystem.space);

dist/Link/Link.js

@@ -5,6 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _templateObject = _taggedTemplateLiteral(['\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-block;\n  color: ', ';\n\n  &:hover {\n    color: ', ';\n  }\n\n  &:focus {\n    outline: ', ' ', ';\n  }\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  ', '\n\n  ', '\n'], ['\n  cursor: pointer;\n  text-decoration: none;\n  display: inline-block;\n  color: ', ';\n\n  &:hover {\n    color: ', ';\n  }\n\n  &:focus {\n    outline: ', ' ', ';\n  }\n\n  ', '\n  ', '\n  ', '\n  ', '\n\n  ', '\n\n  ', '\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n    &, &:hover {\n      text-decoration: underline;\n      color: inherit;\n    }\n  '], ['\n    &, &:hover {\n      text-decoration: underline;\n      color: inherit;\n    }\n  ']),
-    _templateObject3 = _taggedTemplateLiteral(['\n    ', '\n  '], ['\n    ', '\n  ']);
-
 var _propTypes = require('prop-types');
@@ -28,8 +24,8 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Link = (0, _styledComponents2['default'])(_cleanTag2['default'].a)(_templateObject, (0, _styledSystem.themeGet)('colors.ui.link'), (0, _styledSystem.themeGet)('colors.ui.linkHover'), (0, _styledSystem.themeGet)('borders.2'), (0, _styledSystem.themeGet)('colors.brand.secondary'), _styledSystem.color, _styledSystem.hover, _styledSystem.fontWeight, _styledSystem.space, function (props) {
-  return props.inline && (0, _styledComponents.css)(_templateObject2);
+var Link = (0, _styledComponents2['default'])(_cleanTag2['default'].a).withConfig({
+  displayName: 'Link'
+})(['cursor:pointer;text-decoration:none;display:inline-block;color:', ';&:hover{color:', ';}&:focus{outline:', ' ', ';}', ' ', ' ', ' ', ' ', ' ', ''], (0, _styledSystem.themeGet)('colors.ui.link'), (0, _styledSystem.themeGet)('colors.ui.linkHover'), (0, _styledSystem.themeGet)('borders.2'), (0, _styledSystem.themeGet)('colors.brand.secondary'), _styledSystem.color, _styledSystem.hover, _styledSystem.fontWeight, _styledSystem.space, function (props) {
+  return props.inline && (0, _styledComponents.css)(['&,&:hover{text-decoration:underline;color:inherit;}']);
 }, function (props) {
-  return props.hidden && (0, _styledComponents.css)(_templateObject3, (0, _polished.hideVisually)());
+  return props.hidden && (0, _styledComponents.css)(['', ''], (0, _polished.hideVisually)());
 });
@@ -36,0 +32,0 @@

dist/OutlineButton/OutlineButton.js

@@ -17,2 +17,4 @@ Object.defineProperty(exports, "__esModule", {
 
-exports['default'] = _.Button.extend(_templateObject, getBackground, getBackground, getBackground, getBackground);
+var OutlineButton = _.Button.extend(_templateObject, getBackground, getBackground, getBackground, getBackground);
+
+exports['default'] = OutlineButton;

dist/Text/Text.js

@@ -5,4 +5,2 @@ Object.defineProperty(exports, "__esModule", {
 
-var _templateObject = _taggedTemplateLiteral(['\n  margin: 0;\n  margin-bottom: ', ';\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  margin: 0;\n  margin-bottom: ', ';\n\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']);
-
 var _styledComponents = require('styled-components');
@@ -20,6 +18,6 @@
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Text = (0, _styledComponents2['default'])(_cleanTag2['default'].p).withConfig({
+  displayName: 'Text'
+})(['margin:0;margin-bottom:', ';', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ''], (0, _styledSystem.themeGet)('space.2'), _styledSystem.textStyle, _styledSystem.color, _styledSystem.fontSize, _styledSystem.fontWeight, _styledSystem.letterSpacing, _styledSystem.lineHeight, _styledSystem.space, _styledSystem.textAlign);
 
-var Text = (0, _styledComponents2['default'])(_cleanTag2['default'].p)(_templateObject, (0, _styledSystem.themeGet)('space.2'), _styledSystem.textStyle, _styledSystem.color, _styledSystem.fontSize, _styledSystem.fontWeight, _styledSystem.letterSpacing, _styledSystem.lineHeight, _styledSystem.space, _styledSystem.textAlign);
-
 Text.propTypes = Object.assign({}, _styledSystem.textStyle.propTypes, _styledSystem.color.propTypes, _styledSystem.fontSize.propTypes, _styledSystem.fontWeight.propTypes, _styledSystem.letterSpacing.propTypes, _styledSystem.lineHeight.propTypes, _styledSystem.space.propTypes, _styledSystem.textAlign.propTypes);
@@ -26,0 +24,0 @@

package.json

 {
   "name": "@roo-ui/components",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "main": "dist/index.js",
@@ -15,3 +15,3 @@ "publishConfig": {
     "@roo-ui/test-utils": "^0.7.0",
-    "@roo-ui/themes": "^0.9.3"
+    "@roo-ui/themes": "^0.12.0"
   },
@@ -18,0 +18,0 @@ "peerDependencies": {

src/Heading/Heading.test.js

@@ -28,12 +28,2 @@ import React from 'react';
 
-  describe('<Heading.h1 />', () => {
-    beforeEach(() => {
-      wrapper = shallowWithTheme(<Heading.h1>Hello world</Heading.h1>, theme);
-    });
-
-    it('renders correctly', () => {
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-
   describe('<Heading.h2 />', () => {
@@ -40,0 +30,0 @@ beforeEach(() => {

src/index.js

@@ -14,2 +14,4 @@ export { default as BackgroundImage } from './BackgroundImage';
 export { default as ExternalLink } from './ExternalLink';
+export { default as NakedButton } from './NakedButton';
+export { default as Alert } from './Alert';
 export { default as BlockLink } from './BlockLink';
@@ -16,0 +18,0 @@ export { default as OutlineButton } from './OutlineButton';

src/OutlineButton/OutlineButton.js

@@ -7,3 +7,3 @@ import { color, buttonStyle } from 'styled-system';
 
-export default Button.extend`
+const OutlineButton = Button.extend`
   background-color: transparent;
@@ -22,1 +22,3 @@ border-color: ${getBackground};
 `;
+
+export default OutlineButton;

No alert changes

Improved metrics

Total package byte prevSize

158907

8.72%

Number of package files

194

11.49%

Lines of code

3230

17.93%

No dependency changes