New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@storybook/design-system

Package Overview
Dependencies
Maintainers
11
Versions
510
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/design-system - npm Package Compare versions

Comparing version

0.0.7
to
0.0.8

dist/components/AvatarList.js
dist/components/AvatarList.stories.js
dist/components/Radio.js
dist/components/Radio.stories.js
dist/components/Select.js
dist/components/Select.stories.js
dist/components/Spinner.js
dist/components/Spinner.stories.js
dist/components/StoryLinkWrapper.js
dist/components/Textarea.js
dist/components/Textarea.stories.js

29

CHANGELOG.md

@@ -0,1 +1,30 @@

# v0.0.8 (Fri May 17 2019)
#### ⚠️ Pushed to master
- Upgrade addon-docs to 5.2.0-alpha.9 ([@michael@lab80.co](https://github.com/michael@lab80.co))
- Clean and Qa ([@domyen](https://github.com/domyen))
- Minor tweak ([@domyen](https://github.com/domyen))
- Add more form components && spinner && allow prettier to work its magic ([@domyen](https://github.com/domyen))
- Add StoryLinkWrapper for Storybook testing purposes ([@domyen](https://github.com/domyen))
- Remove explicit SVG fills because they're not necessary with currentColor ([@domyen](https://github.com/domyen))
- Prefer named exports ([@domyen](https://github.com/domyen))
- Add AvatarList ([@domyen](https://github.com/domyen))
- Update Badge with more states ([@domyen](https://github.com/domyen))
- Refactor Icon ([@domyen](https://github.com/domyen))
- New icon ([@domyen](https://github.com/domyen))
- Update DS colors ([@domyen](https://github.com/domyen))
- Use the correct font-weight globally ([@domyen](https://github.com/domyen))
- Improve tooltip shadows ([@domyen](https://github.com/domyen))
- Upgrade storybook docs ([@michael@lab80.co](https://github.com/michael@lab80.co))
- Improve avatar & badge docs slightly ([@michael@lab80.co](https://github.com/michael@lab80.co))
- Upgrade addon-docs to alpha.7 ([@michael@lab80.co](https://github.com/michael@lab80.co))
#### Authors: 2
- [@michael@lab80.co](https://github.com/michael@lab80.co)
- [@domyen](https://github.com/domyen)
---
# v0.0.7 (Tue May 14 2019)

@@ -2,0 +31,0 @@

25

dist/components/Avatar.js

@@ -72,3 +72,3 @@ "use strict";

function _templateObject5() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n "]);

@@ -83,3 +83,3 @@ _templateObject5 = function _templateObject5() {

function _templateObject4() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", "px;\n width: ", "px;\n line-height: ", "px;\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", "px;\n width: ", "px;\n line-height: ", "px;\n "]);

@@ -94,3 +94,3 @@ _templateObject4 = function _templateObject4() {

function _templateObject3() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", "px;\n width: ", "px;\n line-height: ", "px;\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", "px;\n width: ", "px;\n line-height: ", "px;\n "]);

@@ -105,3 +105,3 @@ _templateObject3 = function _templateObject3() {

function _templateObject2() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", "px;\n width: ", "px;\n line-height: ", "px;\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: ", "px;\n width: ", "px;\n line-height: ", "px;\n "]);

@@ -130,16 +130,15 @@ _templateObject2 = function _templateObject2() {

tiny: 16
}; // prettier-ignore
};
exports.sizes = sizes;
var Image = _styledComponents["default"].div(_templateObject(), function (props) {
return !props.loading ? "transparent" : _styles.color.light;
return !props.loading ? 'transparent' : _styles.color.light;
}, sizes.medium, sizes.medium, sizes.medium, function (props) {
return props.size === "tiny" && (0, _styledComponents.css)(_templateObject2(), sizes.tiny, sizes.tiny, sizes.tiny);
return props.size === 'tiny' && (0, _styledComponents.css)(_templateObject2(), sizes.tiny, sizes.tiny, sizes.tiny);
}, function (props) {
return props.size === "small" && (0, _styledComponents.css)(_templateObject3(), sizes.small, sizes.small, sizes.small);
return props.size === 'small' && (0, _styledComponents.css)(_templateObject3(), sizes.small, sizes.small, sizes.small);
}, function (props) {
return props.size === "large" && (0, _styledComponents.css)(_templateObject4(), sizes.large, sizes.large, sizes.large);
return props.size === 'large' && (0, _styledComponents.css)(_templateObject4(), sizes.large, sizes.large, sizes.large);
}, function (props) {
return !props.src && (0, _styledComponents.css)(_templateObject5(), !props.loading && "#37D5D3");
return !props.src && (0, _styledComponents.css)(_templateObject5(), !props.loading && '#37D5D3');
}, _styles.color.medium, _animation.glow); // prettier-ignore

@@ -155,3 +154,7 @@

});
/**
* The `Avatar` component is where all your avatars come to play.
*/
function Avatar(_ref) {

@@ -158,0 +161,0 @@ var loading = _ref.loading,

55

dist/components/Badge.js

@@ -18,2 +18,4 @@ "use strict";

var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));

@@ -23,4 +25,24 @@

function _templateObject6() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n background: ", ";\n "]);
_templateObject6 = function _templateObject6() {
return data;
};
return data;
}
function _templateObject5() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n background: ", ";\n "]);
_templateObject5 = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n background: ", ";\n svg path {\n fill: ", ";\n }\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n background: ", ";\n "]);

@@ -35,3 +57,3 @@ _templateObject4 = function _templateObject4() {

function _templateObject3() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n background: ", ";\n svg path {\n fill: ", ";\n }\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n background: ", ";\n "]);

@@ -46,3 +68,3 @@ _templateObject3 = function _templateObject3() {

function _templateObject2() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n background: ", ";\n svg path {\n fill: ", ";\n }\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n background: ", ";\n "]);

@@ -57,3 +79,3 @@ _templateObject2 = function _templateObject2() {

function _templateObject() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-block;\n vertical-align: top;\n font-size: 11px;\n line-height: 12px;\n padding: 4px 12px;\n border-radius: 3em;\n\n svg {\n height: 12px;\n width: 12px;\n margin-right: 4px;\n margin-top: -2px;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-block;\n vertical-align: top;\n font-size: 11px;\n line-height: 12px;\n padding: 4px 12px;\n border-radius: 3em;\n font-weight: ", ";\n\n svg {\n height: 12px;\n width: 12px;\n margin-right: 4px;\n margin-top: -2px;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"]);

@@ -67,13 +89,28 @@ _templateObject = function _templateObject() {

var BadgeWrapper = _styledComponents["default"].div(_templateObject(), function (props) {
return props.status === 'positive' && (0, _styledComponents.css)(_templateObject2(), _styles.color.positive, _styles.background.positive, _styles.color.positive);
var BadgeWrapper = _styledComponents["default"].div(_templateObject(), _styles.typography.weight.bold, function (props) {
return props.status === 'positive' && (0, _styledComponents.css)(_templateObject2(), _styles.color.positive, _styles.background.positive);
}, function (props) {
return props.status === 'negative' && (0, _styledComponents.css)(_templateObject3(), _styles.color.negative, _styles.background.negative, _styles.color.negative);
return props.status === 'negative' && (0, _styledComponents.css)(_templateObject3(), _styles.color.negative, _styles.background.negative);
}, function (props) {
return props.status === 'neutral' && (0, _styledComponents.css)(_templateObject4(), _styles.color.dark, _styles.color.mediumlight, _styles.color.dark);
return props.status === 'warning' && (0, _styledComponents.css)(_templateObject4(), _styles.color.warning, _styles.background.warning);
}, function (props) {
return props.status === 'error' && (0, _styledComponents.css)(_templateObject5(), _styles.color.lightest, _styles.color.negative);
}, function (props) {
return props.status === 'neutral' && (0, _styledComponents.css)(_templateObject6(), _styles.color.dark, _styles.color.mediumlight);
});
/**
* **Badges?!** We don't need no stinkin' badges!!
*/
function Badge(_ref) {
var props = (0, _extends2["default"])({}, _ref);
return _react["default"].createElement(BadgeWrapper, props);
}
}
Badge.propTypes = {
status: _propTypes["default"].oneOf(['positive', 'negative', 'neutral', 'error', 'warning'])
};
Badge.defaultProps = {
status: 'neutral'
};

36

dist/components/Badge.stories.js

@@ -11,3 +11,7 @@ "use strict";

(0, _react2.storiesOf)('Design System|Badge', module).add('all badges', function () {
var _Icon = require("./Icon");
(0, _react2.storiesOf)('Design System|Badge', module).addParameters({
component: _Badge.Badge
}).add('all badges', function () {
return _react["default"].createElement("div", null, _react["default"].createElement(_Badge.Badge, {

@@ -19,11 +23,24 @@ status: "positive"

status: "neutral"
}, "Neutral"));
}, "Neutral"), _react["default"].createElement(_Badge.Badge, {
status: "error"
}, "Error"), _react["default"].createElement(_Badge.Badge, {
status: "warning"
}, "Warning"), _react["default"].createElement(_Badge.Badge, {
status: "positive"
}, _react["default"].createElement(_Icon.Icon, {
icon: "facehappy",
inline: true
}), "with icon"));
}).add('positive', function () {
return _react["default"].createElement(_Badge.Badge, {
status: "positive"
}, "Accepted");
}, "Positive");
}).add('negative', function () {
return _react["default"].createElement(_Badge.Badge, {
status: "negative"
}, "Denied");
}, "Negative");
}).add('warning', function () {
return _react["default"].createElement(_Badge.Badge, {
status: "warning"
}, "Warning");
}).add('neutral', function () {

@@ -33,2 +50,13 @@ return _react["default"].createElement(_Badge.Badge, {

}, "Neutral");
}).add('error', function () {
return _react["default"].createElement(_Badge.Badge, {
status: "error"
}, "Error");
}).add('with icon', function () {
return _react["default"].createElement(_Badge.Badge, {
status: "warning"
}, _react["default"].createElement(_Icon.Icon, {
icon: "check",
inline: true
}), "with icon");
});

67

dist/components/Button.js

@@ -31,3 +31,3 @@ "use strict";

function _templateObject27() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n\n svg path { fill: ", "; }\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n "]);

@@ -42,3 +42,3 @@ _templateObject27 = function _templateObject27() {

function _templateObject26() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: ", " 0 0 0 1px inset;\n \t\tcolor: ", ";\n\n svg path { fill: ", "; }\n\n &:hover {\n box-shadow: ", " 0 0 0 1px inset;\n background: transparent;\n }\n\n &:active {\n background: ", ";\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n svg path { fill: ", "; }\n }\n &:focus { box-shadow: ", " 0 0 0 1px inset, ", " 0 1px 9px 2px; }\n &:focus:hover { box-shadow: ", " 0 0 0 1px inset, ", " 0 8px 18px 0px;}\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n\n &:hover {\n box-shadow: ", " 0 0 0 1px inset;\n background: transparent;\n }\n\n &:active {\n background: ", ";\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n }\n &:focus {\n box-shadow: ", " 0 0 0 1px inset,\n ", " 0 1px 9px 2px;\n }\n &:focus:hover {\n box-shadow: ", " 0 0 0 1px inset,\n ", " 0 8px 18px 0px;\n }\n "]);

@@ -53,3 +53,3 @@ _templateObject26 = function _templateObject26() {

function _templateObject25() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: ", " 0 0 0 1px inset;\n \t\tcolor: ", ";\n\n svg path { fill: ", "; }\n\n &:hover {\n box-shadow: ", " 0 0 0 1px inset;\n background: transparent;\n }\n\n &:active {\n background: ", ";\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n svg path { fill: ", "; }\n }\n &:focus { box-shadow: ", " 0 0 0 1px inset, ", " 0 1px 9px 2px; }\n &:focus:hover { box-shadow: ", " 0 0 0 1px inset, ", " 0 8px 18px 0px;}\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n\n &:hover {\n box-shadow: ", " 0 0 0 1px inset;\n background: transparent;\n }\n\n &:active {\n background: ", ";\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n }\n &:focus {\n box-shadow: ", " 0 0 0 1px inset, ", " 0 1px 9px 2px;\n }\n &:focus:hover {\n box-shadow: ", " 0 0 0 1px inset, ", " 0 8px 18px 0px;\n }\n "]);

@@ -64,3 +64,3 @@ _templateObject25 = function _templateObject25() {

function _templateObject24() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover { box-shadow: ", " 0 0 0 1px inset; }\n\n &:active {\n background: ", ";\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n }\n &:focus { box-shadow: ", " 0 0 0 1px inset, ", " 0 1px 9px 2px; }\n &:focus:hover { box-shadow: ", " 0 0 0 1px inset, ", " 0 8px 18px 0px;}\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover {\n box-shadow: ", " 0 0 0 1px inset;\n }\n\n &:active {\n background: ", ";\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n }\n &:focus {\n box-shadow: ", " 0 0 0 1px inset, ", " 0 1px 9px 2px;\n }\n &:focus:hover {\n box-shadow: ", " 0 0 0 1px inset, ", " 0 8px 18px 0px;\n }\n "]);

@@ -75,3 +75,3 @@ _templateObject24 = function _templateObject24() {

function _templateObject23() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: ", " 0 0 0 1px inset;\n\t\tcolor: ", ";\n background: transparent;\n\n svg path { fill: ", "; }\n\n ", ";\n\n ", ";\n\n ", ";\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n background: transparent;\n\n ", ";\n\n ", ";\n\n ", ";\n "]);

@@ -86,3 +86,3 @@ _templateObject23 = function _templateObject23() {

function _templateObject22() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover {\n background: transparent;\n box-shadow: ", " 0 0 0 1px inset;\n }\n &:focus { box-shadow: ", " 0 0 0 1px inset, ", " 0 1px 9px 2px; }\n &:focus:hover { box-shadow: ", " 0 0 0 1px inset, ", " 0 8px 18px 0px;}\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover {\n background: transparent;\n box-shadow: ", " 0 0 0 1px inset;\n }\n &:focus {\n box-shadow: ", " 0 0 0 1px inset, ", " 0 1px 9px 2px;\n }\n &:focus:hover {\n box-shadow: ", " 0 0 0 1px inset, ", " 0 8px 18px 0px;\n }\n "]);

@@ -97,3 +97,3 @@ _templateObject22 = function _templateObject22() {

function _templateObject21() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: transparent;\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n svg path { fill: ", "; }\n\n ", "\n\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: transparent;\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n\n ", "\n "]);

@@ -108,3 +108,3 @@ _templateObject21 = function _templateObject21() {

function _templateObject20() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover { background: ", "; }\n &:active { box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset; }\n &:focus { box-shadow: ", " 0 1px 9px 2px; }\n &:focus:hover { box-shadow: ", " 0 8px 18px 0px;}\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover {\n background: ", ";\n }\n &:active {\n box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;\n }\n &:focus {\n box-shadow: ", " 0 1px 9px 2px;\n }\n &:focus:hover {\n box-shadow: ", " 0 8px 18px 0px;\n }\n "]);

@@ -119,3 +119,3 @@ _templateObject20 = function _templateObject20() {

function _templateObject19() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n color: ", ";\n svg path { fill: ", "; }\n\n ", "\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n color: ", ";\n\n ", "\n "]);

@@ -130,3 +130,3 @@ _templateObject19 = function _templateObject19() {

function _templateObject18() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover {\n background: transparent;\n box-shadow: ", " 0 0 0 1px inset;\n }\n &:active {\n box-shadow: ", " 0 0 0 3em inset;\n color: ", ";\n }\n &:focus { box-shadow: ", " 0 0 0 3em inset, ", " 0 1px 9px 2px; }\n &:focus:hover { box-shadow: ", " 0 0 0 3em inset, ", " 0 8px 18px 0px;}\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover {\n background: transparent;\n box-shadow: ", " 0 0 0 1px inset;\n }\n &:active {\n box-shadow: ", " 0 0 0 3em inset;\n color: ", ";\n }\n &:focus {\n box-shadow: ", " 0 0 0 3em inset,\n ", " 0 1px 9px 2px;\n }\n &:focus:hover {\n box-shadow: ", " 0 0 0 3em inset,\n ", " 0 8px 18px 0px;\n }\n "]);

@@ -141,3 +141,3 @@ _templateObject18 = function _templateObject18() {

function _templateObject17() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: transparent;\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n svg path { fill: ", "; }\n\n ", "\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: transparent;\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n\n ", "\n "]);

@@ -152,3 +152,3 @@ _templateObject17 = function _templateObject17() {

function _templateObject16() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover { background: ", "; }\n &:active { box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset; }\n &:focus { box-shadow: ", " 0 1px 9px 2px; }\n &:focus:hover { box-shadow: ", " 0 8px 18px 0px;}\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover {\n background: ", ";\n }\n &:active {\n box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;\n }\n &:focus {\n box-shadow: ", " 0 1px 9px 2px;\n }\n &:focus:hover {\n box-shadow: ", " 0 8px 18px 0px;\n }\n "]);

@@ -163,3 +163,3 @@ _templateObject16 = function _templateObject16() {

function _templateObject15() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n color: ", ";\n svg path { fill: ", "; }\n\n ", "\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n color: ", ";\n\n ", "\n "]);

@@ -174,3 +174,3 @@ _templateObject15 = function _templateObject15() {

function _templateObject14() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover {\n background: transparent;\n box-shadow: ", " 0 0 0 1px inset;\n }\n &:active {\n box-shadow: ", " 0 0 0 3em inset;\n color: ", ";\n }\n &:focus { box-shadow: ", " 0 0 0 3em inset, ", " 0 1px 9px 2px; }\n &:focus:hover { box-shadow: ", " 0 0 0 3em inset, ", " 0 8px 18px 0px;}\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover {\n background: transparent;\n box-shadow: ", " 0 0 0 1px inset;\n }\n &:active {\n box-shadow: ", " 0 0 0 3em inset;\n color: ", ";\n }\n &:focus {\n box-shadow: ", " 0 0 0 3em inset, ", " 0 1px 9px 2px;\n }\n &:focus:hover {\n box-shadow: ", " 0 0 0 3em inset, ", " 0 8px 18px 0px;\n }\n "]);

@@ -185,3 +185,3 @@ _templateObject14 = function _templateObject14() {

function _templateObject13() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: transparent;\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n svg path { fill: ", "; }\n\n ", "\n\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: transparent;\n box-shadow: ", " 0 0 0 1px inset;\n color: ", ";\n\n ", "\n "]);

@@ -196,3 +196,3 @@ _templateObject13 = function _templateObject13() {

function _templateObject12() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover { background: ", ";}\n &:active { box-shadow: rgba(0,0,0,.1) 0 0 0 3em inset; }\n &:focus { box-shadow: ", " 0 1px 9px 2px; }\n &:focus:hover { box-shadow: ", " 0 8px 18px 0px;}\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover {\n background: ", ";\n }\n &:active {\n box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 3em inset;\n }\n &:focus {\n box-shadow: ", " 0 1px 9px 2px;\n }\n &:focus:hover {\n box-shadow: ", " 0 8px 18px 0px;\n }\n "]);

@@ -207,3 +207,3 @@ _templateObject12 = function _templateObject12() {

function _templateObject11() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n color: ", ";\n svg path { fill: ", "; }\n\n ", "\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n background: ", ";\n color: ", ";\n\n ", "\n "]);

@@ -218,3 +218,3 @@ _templateObject11 = function _templateObject11() {

function _templateObject10() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n \t\tpadding: 12px;\n \t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n padding: 12px;\n "]);

@@ -229,3 +229,3 @@ _templateObject10 = function _templateObject10() {

function _templateObject9() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n \t\tpadding: 7px;\n \t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n padding: 7px;\n "]);

@@ -240,3 +240,3 @@ _templateObject9 = function _templateObject9() {

function _templateObject8() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n svg {\n display: block;\n margin: 0;\n }\n ", "\n\n ", "\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n svg {\n display: block;\n margin: 0;\n }\n ", "\n\n ", "\n "]);

@@ -251,3 +251,3 @@ _templateObject8 = function _templateObject8() {

function _templateObject7() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: progress !important;\n opacity: .7;\n\n ", " {\n transition: transform 700ms ", ";\n transform: translate3d(0, -50%,0);\n opacity: 1;\n }\n\n ", " {\n transform: scale3d(0,0,1) translate3d(0,-100%,0);\n opacity: 0;\n }\n\n &:hover {\n transform: none;\n }\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: progress !important;\n opacity: 0.7;\n\n ", " {\n transition: transform 700ms ", ";\n transform: translate3d(0, -50%, 0);\n opacity: 1;\n }\n\n ", " {\n transform: scale3d(0, 0, 1) translate3d(0, -100%, 0);\n opacity: 0;\n }\n\n &:hover {\n transform: none;\n }\n "]);

@@ -262,3 +262,3 @@ _templateObject7 = function _templateObject7() {

function _templateObject6() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: default !important;\n\t\tpointer-events: none;\n &:hover {\n transform: none;\n }\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: default !important;\n pointer-events: none;\n &:hover {\n transform: none;\n }\n "]);

@@ -273,3 +273,3 @@ _templateObject6 = function _templateObject6() {

function _templateObject5() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: not-allowed !important;\n\t\topacity: .5;\n &:hover {\n transform: none;\n }\n\t"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: not-allowed !important;\n opacity: 0.5;\n &:hover {\n transform: none;\n }\n "]);

@@ -284,3 +284,3 @@ _templateObject5 = function _templateObject5() {

function _templateObject4() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover {\n transform: translate3d(0,-2px,0);\n box-shadow: rgba(0,0,0,.2) 0 2px 6px 0;\n }\n\n &:active {\n transform: translate3d(0,0,0);\n }\n\n &:focus {\n box-shadow: ", " 0 1px 9px 2px;\n }\n\n &:focus:hover {\n box-shadow: ", " 0 8px 18px 0px;\n }\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n &:hover {\n transform: translate3d(0, -2px, 0);\n box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;\n }\n\n &:active {\n transform: translate3d(0, 0, 0);\n }\n\n &:focus {\n box-shadow: ", " 0 1px 9px 2px;\n }\n\n &:focus:hover {\n box-shadow: ", " 0 8px 18px 0px;\n }\n "]);

@@ -326,5 +326,4 @@ _templateObject4 = function _templateObject4() {

var Loading = _styledComponents["default"].span(_templateObject2()); // prettier-ignore
var Loading = _styledComponents["default"].span(_templateObject2());
var ButtonWrapper = _styledComponents["default"].button(_templateObject3(), function (props) {

@@ -355,17 +354,17 @@ return props.small ? '8px 16px' : '13px 20px';

}, function (props) {
return props.primary && (0, _styledComponents.css)(_templateObject11(), _styles.color.primary, _styles.color.lightest, _styles.color.lightest, !props.loading && (0, _styledComponents.css)(_templateObject12(), (0, _polished.darken)(0.05, _styles.color.primary), (0, _polished.rgba)(_styles.color.primary, 0.4), (0, _polished.rgba)(_styles.color.primary, 0.2)));
return props.primary && (0, _styledComponents.css)(_templateObject11(), _styles.color.primary, _styles.color.lightest, !props.loading && (0, _styledComponents.css)(_templateObject12(), (0, _polished.darken)(0.05, _styles.color.primary), (0, _polished.rgba)(_styles.color.primary, 0.4), (0, _polished.rgba)(_styles.color.primary, 0.2)));
}, function (props) {
return props.primary && props.active && (0, _styledComponents.css)(_templateObject13(), _styles.color.primary, _styles.color.primary, _styles.color.primary, !props.loading && (0, _styledComponents.css)(_templateObject14(), _styles.color.primary, _styles.color.primary, _styles.color.lightest, _styles.color.primary, (0, _polished.rgba)(_styles.color.primary, 0.4), _styles.color.primary, (0, _polished.rgba)(_styles.color.primary, 0.2)));
return props.primary && props.active && (0, _styledComponents.css)(_templateObject13(), _styles.color.primary, _styles.color.primary, !props.loading && (0, _styledComponents.css)(_templateObject14(), _styles.color.primary, _styles.color.primary, _styles.color.lightest, _styles.color.primary, (0, _polished.rgba)(_styles.color.primary, 0.4), _styles.color.primary, (0, _polished.rgba)(_styles.color.primary, 0.2)));
}, function (props) {
return props.secondary && (0, _styledComponents.css)(_templateObject15(), _styles.color.secondary, _styles.color.lightest, _styles.color.lightest, !props.loading && (0, _styledComponents.css)(_templateObject16(), (0, _polished.darken)(0.05, _styles.color.secondary), (0, _polished.rgba)(_styles.color.secondary, 0.4), (0, _polished.rgba)(_styles.color.secondary, 0.2)));
return props.secondary && (0, _styledComponents.css)(_templateObject15(), _styles.color.secondary, _styles.color.lightest, !props.loading && (0, _styledComponents.css)(_templateObject16(), (0, _polished.darken)(0.05, _styles.color.secondary), (0, _polished.rgba)(_styles.color.secondary, 0.4), (0, _polished.rgba)(_styles.color.secondary, 0.2)));
}, function (props) {
return props.secondary && props.active && (0, _styledComponents.css)(_templateObject17(), _styles.color.secondary, _styles.color.secondary, _styles.color.secondary, !props.loading && (0, _styledComponents.css)(_templateObject18(), _styles.color.secondary, _styles.color.secondary, _styles.color.lightest, _styles.color.secondary, (0, _polished.rgba)(_styles.color.secondary, 0.4), _styles.color.secondary, (0, _polished.rgba)(_styles.color.secondary, 0.2)));
return props.secondary && props.active && (0, _styledComponents.css)(_templateObject17(), _styles.color.secondary, _styles.color.secondary, !props.loading && (0, _styledComponents.css)(_templateObject18(), _styles.color.secondary, _styles.color.secondary, _styles.color.lightest, _styles.color.secondary, (0, _polished.rgba)(_styles.color.secondary, 0.4), _styles.color.secondary, (0, _polished.rgba)(_styles.color.secondary, 0.2)));
}, function (props) {
return props.tertiary && (0, _styledComponents.css)(_templateObject19(), _styles.color.tertiary, _styles.color.darkest, _styles.color.darkest, !props.loading && (0, _styledComponents.css)(_templateObject20(), (0, _polished.darken)(0.05, _styles.color.secondary), (0, _polished.rgba)(_styles.color.secondary, 0.4), (0, _polished.rgba)(_styles.color.secondary, 0.2)));
return props.tertiary && (0, _styledComponents.css)(_templateObject19(), _styles.color.tertiary, _styles.color.darkest, !props.loading && (0, _styledComponents.css)(_templateObject20(), (0, _polished.darken)(0.05, _styles.color.secondary), (0, _polished.rgba)(_styles.color.secondary, 0.4), (0, _polished.rgba)(_styles.color.secondary, 0.2)));
}, function (props) {
return props.tertiary && props.active && (0, _styledComponents.css)(_templateObject21(), _styles.color.medium, _styles.color.darkest, _styles.color.tertiary, !props.loading && (0, _styledComponents.css)(_templateObject22(), _styles.color.medium, _styles.color.medium, (0, _polished.rgba)(_styles.color.tertiary, 0.4), _styles.color.medium, (0, _polished.rgba)(_styles.color.tertiary, 0.2)));
return props.tertiary && props.active && (0, _styledComponents.css)(_templateObject21(), _styles.color.medium, _styles.color.darkest, !props.loading && (0, _styledComponents.css)(_templateObject22(), _styles.color.medium, _styles.color.medium, (0, _polished.rgba)(_styles.color.tertiary, 0.4), _styles.color.medium, (0, _polished.rgba)(_styles.color.tertiary, 0.2)));
}, function (props) {
return props.outline && (0, _styledComponents.css)(_templateObject23(), _styles.color.medium, _styles.color.dark, _styles.color.dark, !props.loading && (0, _styledComponents.css)(_templateObject24(), _styles.color.mediumdark, _styles.color.medium, _styles.color.medium, _styles.color.darkest, _styles.color.medium, (0, _polished.rgba)(_styles.color.primary, 0.4), _styles.color.medium, (0, _polished.rgba)(_styles.color.primary, 0.2)), props.primary && (0, _styledComponents.css)(_templateObject25(), _styles.color.primary, _styles.color.primary, _styles.color.primary, _styles.color.primary, _styles.color.primary, _styles.color.primary, _styles.color.lightest, _styles.color.lightest, _styles.color.primary, (0, _polished.rgba)(_styles.color.primary, 0.4), _styles.color.primary, (0, _polished.rgba)(_styles.color.primary, 0.2)), props.secondary && (0, _styledComponents.css)(_templateObject26(), _styles.color.secondary, _styles.color.secondary, _styles.color.secondary, _styles.color.secondary, _styles.color.secondary, _styles.color.secondary, _styles.color.lightest, _styles.color.lightest, _styles.color.secondary, (0, _polished.rgba)(_styles.color.secondary, 0.4), _styles.color.secondary, (0, _polished.rgba)(_styles.color.secondary, 0.2)));
return props.outline && (0, _styledComponents.css)(_templateObject23(), _styles.color.medium, _styles.color.dark, !props.loading && (0, _styledComponents.css)(_templateObject24(), _styles.color.mediumdark, _styles.color.medium, _styles.color.medium, _styles.color.darkest, _styles.color.medium, (0, _polished.rgba)(_styles.color.primary, 0.4), _styles.color.medium, (0, _polished.rgba)(_styles.color.primary, 0.2)), props.primary && (0, _styledComponents.css)(_templateObject25(), _styles.color.primary, _styles.color.primary, _styles.color.primary, _styles.color.primary, _styles.color.primary, _styles.color.lightest, _styles.color.primary, (0, _polished.rgba)(_styles.color.primary, 0.4), _styles.color.primary, (0, _polished.rgba)(_styles.color.primary, 0.2)), props.secondary && (0, _styledComponents.css)(_templateObject26(), _styles.color.secondary, _styles.color.secondary, _styles.color.secondary, _styles.color.secondary, _styles.color.secondary, _styles.color.lightest, _styles.color.secondary, (0, _polished.rgba)(_styles.color.secondary, 0.4), _styles.color.secondary, (0, _polished.rgba)(_styles.color.secondary, 0.2)));
}, function (props) {
return props.outline && props.active && (0, _styledComponents.css)(_templateObject27(), _styles.color.medium, _styles.color.medium, _styles.color.darkest, _styles.color.darkest);
return props.outline && props.active && (0, _styledComponents.css)(_templateObject27(), _styles.color.medium, _styles.color.medium, _styles.color.darkest);
});

@@ -372,0 +371,0 @@

11

dist/components/Checkbox.js

@@ -25,3 +25,3 @@ "use strict";

function _templateObject4() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0 .6em 0 0;\n visibility: hidden;\n\n & + ", " {\n display: inline-block;\n vertical-align: text-top;\n line-height: 1.2;\n\n &:before,\n &:after {\n position: absolute;\n top: 0;\n left: 0;\n height: 14px;\n width: 14px;\n content: '';\n display: block;\n }\n\n &:before {\n border-radius: 4px;\n }\n\n &:after {\n border-radius: 3px;\n }\n }\n\n & + ", ":before { box-shadow: ", " 0 0 0 1px inset; }\n\n &:checked + ", ":before { box-shadow: ", " 0 0 0 1px inset; }\n\n\t& + ", ":after {\n transition: all 150ms ease-out;\n transform: scale3d(0,0,1);\n\n height: 10px;\n margin-left: 2px;\n margin-top: 2px;\n width: 10px;\n\n opacity: 0;\n }\n\n\t&:checked + ", ":after {\n transform: scale3d(1,1,1);\n background: ", ";\n opacity: 1;\n }\n"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: 0 0.6em 0 0;\n visibility: hidden;\n\n & + ", " {\n display: inline-block;\n vertical-align: text-top;\n line-height: 1.2;\n\n &:before,\n &:after {\n position: absolute;\n top: 0;\n left: 0;\n height: 14px;\n width: 14px;\n content: '';\n display: block;\n }\n\n &:before {\n border-radius: 4px;\n }\n\n &:after {\n border-radius: 3px;\n }\n }\n\n & + ", ":before {\n box-shadow: ", " 0 0 0 1px inset;\n }\n\n &:checked + ", ":before {\n box-shadow: ", " 0 0 0 1px inset;\n }\n\n & + ", ":after {\n transition: all 150ms ease-out;\n transform: scale3d(0, 0, 1);\n\n height: 10px;\n margin-left: 2px;\n margin-top: 2px;\n width: 10px;\n\n opacity: 0;\n }\n\n &:checked + ", ":after {\n transform: scale3d(1, 1, 1);\n background: ", ";\n opacity: 1;\n }\n"]);

@@ -56,3 +56,3 @@ _templateObject4 = function _templateObject4() {

function _templateObject() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n font-size: ", "px;\n font-weight: ", ";\n min-height: 1em;\n\tposition: relative;\n"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n cursor: pointer;\n font-size: ", "px;\n font-weight: ", ";\n min-height: 1em;\n position: relative;\n"]);

@@ -66,11 +66,8 @@ _templateObject = function _templateObject() {

// prettier-ignore
var Label = _styledComponents["default"].label(_templateObject(), _styles.typography.size.s2, _styles.typography.weight.bold); // prettier-ignore
var Label = _styledComponents["default"].label(_templateObject(), _styles.typography.size.s2, _styles.typography.weight.bold);
var Error = _styledComponents["default"].span(_templateObject2(), _styles.typography.weight.regular, _styles.color.negative);
var LabelText = _styledComponents["default"].span(_templateObject3()); // prettier-ignore
var LabelText = _styledComponents["default"].span(_templateObject3());
var Input = _styledComponents["default"].input.attrs({

@@ -77,0 +74,0 @@ type: 'checkbox'

2

dist/components/Checkbox.stories.js

@@ -14,3 +14,3 @@ "use strict";

var onChange = (0, _addonActions.action)('change');
(0, _react2.storiesOf)('Design System|Checkbox', module).add('all checkboxes', function () {
(0, _react2.storiesOf)('Design System|forms/Checkbox', module).add('all checkboxes', function () {
return _react["default"].createElement("form", null, _react["default"].createElement(_Checkbox.Checkbox, {

@@ -17,0 +17,0 @@ onChange: onChange

24

dist/components/Icon.js

@@ -22,8 +22,6 @@ "use strict";

var _styles = require("./shared/styles");
var _icons = require("./shared/icons");
function _templateObject2() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n fill: ", ";\n"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n fill: currentColor;\n"]);

@@ -38,3 +36,3 @@ _templateObject2 = function _templateObject2() {

function _templateObject() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-block;\n vertical-align: middle;\n"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: ", ";\n vertical-align: middle;\n\n shape-rendering: inherit;\n transform: translate3d(0, 0, 0);\n"]);

@@ -48,13 +46,17 @@ _templateObject = function _templateObject() {

var Svg = _styledComponents["default"].svg(_templateObject());
var Svg = _styledComponents["default"].svg(_templateObject(), function (props) {
return props.block ? 'block' : 'inline-block';
});
var Path = _styledComponents["default"].path(_templateObject2(), _styles.color.darkest);
var Path = _styledComponents["default"].path(_templateObject2());
function Icon(_ref) {
var icon = _ref.icon,
props = (0, _objectWithoutProperties2["default"])(_ref, ["icon"]);
block = _ref.block,
props = (0, _objectWithoutProperties2["default"])(_ref, ["icon", "block"]);
return _react["default"].createElement(Svg, (0, _extends2["default"])({
viewBox: "0 0 1024 1024",
width: "20px",
height: "20px"
height: "20px",
block: block
}, props), _react["default"].createElement(Path, {

@@ -66,3 +68,7 @@ d: _icons.icons[icon]

Icon.propTypes = {
icon: _propTypes["default"].string.isRequired
icon: _propTypes["default"].string.isRequired,
block: _propTypes["default"].bool
};
Icon.defaultProps = {
block: false
};

15

dist/components/Icon.stories.js

@@ -9,3 +9,3 @@ "use strict";

var _react = _interopRequireDefault(require("react"));
var _react = _interopRequireWildcard(require("react"));

@@ -69,3 +69,3 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));

(0, _react2.storiesOf)('Design System|Icon', module).add('labels', function () {
return _react["default"].createElement(List, null, Object.keys(_icons.icons).map(function (key) {
return _react["default"].createElement(_react.Fragment, null, "There are ", Object.keys(_icons.icons).length, " icons", _react["default"].createElement(List, null, Object.keys(_icons.icons).map(function (key) {
return _react["default"].createElement(Item, {

@@ -76,3 +76,3 @@ key: key

}), _react["default"].createElement(Meta, null, key));
}));
})));
}).add('no labels', function () {

@@ -87,2 +87,11 @@ return _react["default"].createElement(List, null, Object.keys(_icons.icons).map(function (key) {

}));
}).add('inline', function () {
return _react["default"].createElement(_react.Fragment, null, "this is an inline ", _react["default"].createElement(_Icon.Icon, {
icon: "facehappy"
}), " icon (default)");
}).add('block', function () {
return _react["default"].createElement(_react.Fragment, null, "this is a block ", _react["default"].createElement(_Icon.Icon, {
icon: "facehappy",
block: true
}), " icon");
});

140

dist/components/index.js

@@ -16,6 +16,2 @@ "use strict";

WithTooltip: true,
TooltipMessage: true,
TooltipNote: true,
TooltipLinkList: true,
Modal: true,
WithModal: true

@@ -29,26 +25,2 @@ };

});
Object.defineProperty(exports, "TooltipMessage", {
enumerable: true,
get: function get() {
return _TooltipMessage["default"];
}
});
Object.defineProperty(exports, "TooltipNote", {
enumerable: true,
get: function get() {
return _TooltipNote["default"];
}
});
Object.defineProperty(exports, "TooltipLinkList", {
enumerable: true,
get: function get() {
return _TooltipLinkList["default"];
}
});
Object.defineProperty(exports, "Modal", {
enumerable: true,
get: function get() {
return _Modal["default"];
}
});
Object.defineProperty(exports, "WithModal", {

@@ -91,2 +63,15 @@ enumerable: true,

var _AvatarList = require("./AvatarList");
Object.keys(_AvatarList).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _AvatarList[key];
}
});
});
var _Badge = require("./Badge");

@@ -157,2 +142,28 @@

var _Input = require("./Input");
Object.keys(_Input).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _Input[key];
}
});
});
var _Textarea = require("./Textarea");
Object.keys(_Textarea).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _Textarea[key];
}
});
});
var _Checkbox = require("./Checkbox");

@@ -171,5 +182,5 @@

var _Input = require("./Input");
var _Radio = require("./Radio");
Object.keys(_Input).forEach(function (key) {
Object.keys(_Radio).forEach(function (key) {
if (key === "default" || key === "__esModule") return;

@@ -180,3 +191,3 @@ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;

get: function get() {
return _Input[key];
return _Radio[key];
}

@@ -186,12 +197,69 @@ });

var _WithTooltip = _interopRequireDefault(require("./tooltip/WithTooltip"));
var _Select = require("./Select");
var _TooltipMessage = _interopRequireDefault(require("./tooltip/TooltipMessage"));
Object.keys(_Select).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _Select[key];
}
});
});
var _TooltipNote = _interopRequireDefault(require("./tooltip/TooltipNote"));
var _TooltipMessage = require("./tooltip/TooltipMessage");
var _TooltipLinkList = _interopRequireDefault(require("./tooltip/TooltipLinkList"));
Object.keys(_TooltipMessage).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _TooltipMessage[key];
}
});
});
var _Modal = _interopRequireDefault(require("./modal/Modal"));
var _TooltipNote = require("./tooltip/TooltipNote");
Object.keys(_TooltipNote).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _TooltipNote[key];
}
});
});
var _TooltipLinkList = require("./tooltip/TooltipLinkList");
Object.keys(_TooltipLinkList).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _TooltipLinkList[key];
}
});
});
var _WithTooltip = _interopRequireDefault(require("./tooltip/WithTooltip"));
var _Modal = require("./modal/Modal");
Object.keys(_Modal).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _Modal[key];
}
});
});
var _WithModal = _interopRequireDefault(require("./modal/WithModal"));

2

dist/components/Input.stories.js

@@ -14,3 +14,3 @@ "use strict";

var onChange = (0, _addonActions.action)('change');
(0, _react2.storiesOf)('Design System|Input', module).add('all inputs', function () {
(0, _react2.storiesOf)('Design System|forms/Input', module).add('all inputs', function () {
return _react["default"].createElement("form", {

@@ -17,0 +17,0 @@ style: {

46

dist/components/Link.js

@@ -10,3 +10,3 @@ "use strict";

});
exports["default"] = Link;
exports.Link = Link;

@@ -90,3 +90,3 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

function _templateObject5() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n svg path {\n fill: ", ";\n }\n\n &:hover {\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n\n &:active {\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n "]);

@@ -111,3 +111,3 @@ _templateObject5 = function _templateObject5() {

function _templateObject3() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n svg path {\n fill: ", ";\n }\n\n &:hover {\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n\n &:active {\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n "]);

@@ -122,3 +122,3 @@ _templateObject3 = function _templateObject3() {

function _templateObject2() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n svg path {\n fill: ", ";\n }\n\n &:hover {\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n\n &:active {\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n "]);

@@ -133,3 +133,3 @@ _templateObject2 = function _templateObject2() {

function _templateObject() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-block;\n transition: all 150ms ease-out;\n text-decoration: none;\n\n color: ", ";\n svg path {\n fill: ", ";\n }\n\n &:hover,\n &:focus {\n cursor: pointer;\n transform: translate3d(0, -1px, 0);\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n &:active {\n transform: translate3d(0, 0, 0);\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n\n svg {\n display: inline-block;\n height: 1em;\n width: 1em;\n vertical-align: text-top;\n position: relative;\n bottom: -0.125em;\n margin-right: 0.4em;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-block;\n transition: all 150ms ease-out;\n text-decoration: none;\n\n color: ", ";\n\n &:hover,\n &:focus {\n cursor: pointer;\n transform: translate3d(0, -1px, 0);\n color: ", ";\n }\n &:active {\n transform: translate3d(0, 0, 0);\n color: ", ";\n }\n\n svg {\n display: inline-block;\n height: 1em;\n width: 1em;\n vertical-align: text-top;\n position: relative;\n bottom: -0.125em;\n margin-right: 0.4em;\n }\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n\n ", ";\n"]);

@@ -143,10 +143,10 @@ _templateObject = function _templateObject() {

var linkStyles = (0, _styledComponents.css)(_templateObject(), _styles.color.secondary, _styles.color.secondary, (0, _polished.darken)(0.07, _styles.color.secondary), (0, _polished.darken)(0.07, _styles.color.secondary), (0, _polished.darken)(0.1, _styles.color.secondary), (0, _polished.darken)(0.1, _styles.color.secondary), function (props) {
return props.secondary && (0, _styledComponents.css)(_templateObject2(), _styles.color.mediumdark, _styles.color.mediumdark, _styles.color.dark, _styles.color.dark, _styles.color.darker, _styles.color.darker);
var linkStyles = (0, _styledComponents.css)(_templateObject(), _styles.color.secondary, (0, _polished.darken)(0.07, _styles.color.secondary), (0, _polished.darken)(0.1, _styles.color.secondary), function (props) {
return props.secondary && (0, _styledComponents.css)(_templateObject2(), _styles.color.mediumdark, _styles.color.dark, _styles.color.darker);
}, function (props) {
return props.tertiary && (0, _styledComponents.css)(_templateObject3(), _styles.color.dark, _styles.color.dark, _styles.color.darkest, _styles.color.darkest, _styles.color.mediumdark, _styles.color.mediumdark);
return props.tertiary && (0, _styledComponents.css)(_templateObject3(), _styles.color.dark, _styles.color.darkest, _styles.color.mediumdark);
}, function (props) {
return props.nochrome && (0, _styledComponents.css)(_templateObject4());
}, function (props) {
return props.inverse && (0, _styledComponents.css)(_templateObject5(), _styles.color.lightest, _styles.color.lightest, _styles.color.lighter, _styles.color.lighter, _styles.color.light, _styles.color.light);
return props.inverse && (0, _styledComponents.css)(_templateObject5(), _styles.color.lightest, _styles.color.lighter, _styles.color.light);
}, function (props) {

@@ -162,16 +162,13 @@ return props.isButton && (0, _styledComponents.css)(_templateObject6());

var LinkWrapper = _styledComponents["default"].a(_templateObject10(), linkStyles); // const LinkGatsby = styled(GatsbyLink)`
// ${linkStyles};
// `;
var LinkA = _styledComponents["default"].a(_templateObject10(), linkStyles);
var LinkButton = _styledComponents["default"].button(_templateObject11(), linkStyles);
function Link(_ref) {
var isGatsby = _ref.isGatsby,
isButton = _ref.isButton,
var isButton = _ref.isButton,
withArrow = _ref.withArrow,
containsIcon = _ref.containsIcon,
LinkWrapper = _ref.LinkWrapper,
children = _ref.children,
props = (0, _objectWithoutProperties2["default"])(_ref, ["isGatsby", "isButton", "withArrow", "containsIcon", "children"]);
props = (0, _objectWithoutProperties2["default"])(_ref, ["isButton", "withArrow", "containsIcon", "LinkWrapper", "children"]);

@@ -183,6 +180,7 @@ var content = _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(LinkInner, {

icon: "arrowright"
}))); // if (isGatsby) {
// return <LinkGatsby {...props}>{content}</LinkGatsby>;
// }
})));
if (LinkWrapper) {
return _react["default"].createElement(LinkWrapper, props, content);
}

@@ -193,3 +191,3 @@ if (isButton) {

return _react["default"].createElement(LinkWrapper, props, content);
return _react["default"].createElement(LinkA, props, content);
}

@@ -199,13 +197,13 @@

isButton: _propTypes["default"].bool,
isGatsby: _propTypes["default"].bool,
children: _propTypes["default"].node,
withArrow: _propTypes["default"].bool,
containsIcon: _propTypes["default"].bool
containsIcon: _propTypes["default"].bool,
LinkWrapper: _propTypes["default"].func
};
Link.defaultProps = {
isButton: false,
isGatsby: false,
children: null,
withArrow: false,
containsIcon: false
containsIcon: false,
LinkWrapper: undefined
};

48

dist/components/Link.stories.js

@@ -13,31 +13,32 @@ "use strict";

var _Link = _interopRequireDefault(require("./Link"));
var _Link = require("./Link");
var _StoryLinkWrapper = require("./StoryLinkWrapper");
var onLinkClick = (0, _addonActions.action)('onLinkClick');
(0, _react2.storiesOf)('Design System|Link', module).add('all', function () {
return _react["default"].createElement("div", null, _react["default"].createElement(_Link["default"], {
href: "http://google.com"
}, "Default"), _react["default"].createElement("br", null), _react["default"].createElement(_Link["default"], {
return _react["default"].createElement("div", null, _react["default"].createElement(_Link.Link, {
href: "https://learnstorybook.com"
}, "Default"), _react["default"].createElement("br", null), _react["default"].createElement(_Link.Link, {
secondary: true,
href: "http://google.com"
}, "Secondary"), _react["default"].createElement("br", null), _react["default"].createElement(_Link["default"], {
href: "https://learnstorybook.com"
}, "Secondary"), _react["default"].createElement("br", null), _react["default"].createElement(_Link.Link, {
tertiary: true,
href: "http://google.com"
}, "tertiary"), _react["default"].createElement("br", null), _react["default"].createElement(_Link["default"], {
href: "https://learnstorybook.com"
}, "tertiary"), _react["default"].createElement("br", null), _react["default"].createElement(_Link.Link, {
nochrome: true,
href: "http://google.com"
}, "nochrome"), _react["default"].createElement("br", null), _react["default"].createElement(_Link["default"], {
href: "http://google.com"
href: "https://learnstorybook.com"
}, "nochrome"), _react["default"].createElement("br", null), _react["default"].createElement(_Link.Link, {
href: "https://learnstorybook.com"
}, _react["default"].createElement(_Icon.Icon, {
icon: "discord"
}), "With icon in front"), _react["default"].createElement("br", null), _react["default"].createElement(_Link["default"], {
}), "With icon in front"), _react["default"].createElement("br", null), _react["default"].createElement(_Link.Link, {
containsIcon: true,
isGatsby: true,
to: "http://google.com"
to: "https://learnstorybook.com"
}, _react["default"].createElement(_Icon.Icon, {
icon: "sidebar"
})), _react["default"].createElement("br", null), _react["default"].createElement(_Link["default"], {
})), _react["default"].createElement("br", null), _react["default"].createElement(_Link.Link, {
containsIcon: true,
withArrow: true,
href: "http://google.com"
href: "https://learnstorybook.com"
}, "With arrow behind"), _react["default"].createElement("br", null), _react["default"].createElement("span", {

@@ -47,13 +48,12 @@ style: {

}
}, _react["default"].createElement(_Link["default"], {
}, _react["default"].createElement(_Link.Link, {
inverse: true,
href: "http://google.com"
}, "Inverted colors")), _react["default"].createElement("br", null), _react["default"].createElement(_Link["default"], {
href: "https://learnstorybook.com"
}, "Inverted colors")), _react["default"].createElement("br", null), _react["default"].createElement(_Link.Link, {
isButton: true,
onClick: onLinkClick
}, "is actually a button"), _react["default"].createElement("br", null), _react["default"].createElement(_Link["default"], {
primary: 1,
isGatsby: true,
to: "/gatsby"
}, "is a GatsbyLink"));
}, "is actually a button"), _react["default"].createElement("br", null), _react["default"].createElement(_Link.Link, {
LinkWrapper: _StoryLinkWrapper.StoryLinkWrapper,
href: "http://storybook.js.org"
}, "has a LinkWrapper like GatsbyLink or NextLink"));
});

4

dist/components/ListItem.js

@@ -185,4 +185,4 @@ "use strict";

href: null,
LinkWrapper: null,
onClick: null
LinkWrapper: undefined,
onClick: undefined
};

2

dist/components/modal/Modal.js

@@ -10,3 +10,3 @@ "use strict";

});
exports["default"] = Modal;
exports.Modal = Modal;

@@ -13,0 +13,0 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

10

dist/components/modal/Modal.stories.js

@@ -18,6 +18,6 @@ "use strict";

var _Modal = require("./Modal");
var _Button = require("../Button");
var _Modal = _interopRequireDefault(require("./Modal"));
var actions = {

@@ -37,3 +37,3 @@ onClose: (0, _addonActions.action)('onClose')

}).add('visible short', function () {
return _react["default"].createElement(_Modal["default"], (0, _extends2["default"])({
return _react["default"].createElement(_Modal.Modal, (0, _extends2["default"])({
isOpen: true

@@ -55,3 +55,3 @@ }, actions), function (_ref) {

}).add('visible tall', function () {
return _react["default"].createElement(_Modal["default"], (0, _extends2["default"])({
return _react["default"].createElement(_Modal.Modal, (0, _extends2["default"])({
isOpen: true

@@ -73,3 +73,3 @@ }, actions), function (_ref2) {

}).add('not visible', function () {
return _react["default"].createElement(_Modal["default"], (0, _extends2["default"])({
return _react["default"].createElement(_Modal.Modal, (0, _extends2["default"])({
isOpen: false

@@ -76,0 +76,0 @@ }, actions), function (_ref3) {

6

dist/components/modal/WithModal.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

@@ -18,3 +16,3 @@

var _Modal = _interopRequireDefault(require("./Modal"));
var _Modal = require("./Modal");

@@ -31,3 +29,3 @@ function WithModal(_ref) {

onClose: onClose
})), _react["default"].createElement(_Modal["default"], {
})), _react["default"].createElement(_Modal.Modal, {
isOpen: isOpen,

@@ -34,0 +32,0 @@ onClose: onClose

2

dist/components/shared/global.js

@@ -17,3 +17,3 @@ "use strict";

function _templateObject2() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n @import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800');\n\n body {\n ", "\n\n margin: 0;\n overflow-y: auto;\n overflow-x: hidden;\n }\n"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n @import url('https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,900');\n\n body {\n ", "\n\n margin: 0;\n overflow-y: auto;\n overflow-x: hidden;\n }\n"]);

@@ -20,0 +20,0 @@ _templateObject2 = function _templateObject2() {

5

dist/components/shared/styles.js

@@ -56,6 +56,7 @@ "use strict";

darkest: '#333333',
border: 'rgba(0,0,0,.05)',
border: 'rgba(0,0,0,.1)',
// Status
positive: '#66BF3C',
negative: '#FF4400'
negative: '#FF4400',
warning: '#E69D00'
};

@@ -62,0 +63,0 @@ exports.color = color;

4

dist/components/tooltip/Tooltip.js

@@ -10,3 +10,3 @@ "use strict";

});
exports["default"] = Tooltip;
exports.Tooltip = Tooltip;

@@ -28,3 +28,3 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

function _templateObject4() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-bottom: ", "px;\n margin-top: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n background-image: linear-gradient(\n -1deg,\n rgba(248, 248, 248, 0.97) 0%,\n rgba(255, 255, 255, 0.97) 100%\n );\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n font-size: ", "px;\n "]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n margin-bottom: ", "px;\n margin-top: ", "px;\n margin-left: ", "px;\n margin-right: ", "px;\n\n background-image: linear-gradient(\n -1deg,\n rgba(248, 248, 248, 0.97) 0%,\n rgba(255, 255, 255, 0.97) 100%\n );\n filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.05)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1));\n border-radius: 4px;\n font-size: ", "px;\n "]);

@@ -31,0 +31,0 @@ _templateObject4 = function _templateObject4() {

12

dist/components/tooltip/Tooltip.stories.js

@@ -15,3 +15,3 @@ "use strict";

var _Tooltip = _interopRequireDefault(require("./Tooltip"));
var _Tooltip = require("./Tooltip");

@@ -40,7 +40,7 @@ function _templateObject() {

(0, _react2.storiesOf)('Design System|tooltip/Tooltip', module).add('basic, default', function () {
return _react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({
return _react["default"].createElement(_Tooltip.Tooltip, (0, _extends2["default"])({
hasChrome: true
}, mockPopperProps), _react["default"].createElement(Content, null, "Text"));
}).add('basic, default, bottom', function () {
return _react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({
return _react["default"].createElement(_Tooltip.Tooltip, (0, _extends2["default"])({
hasChrome: true,

@@ -50,3 +50,3 @@ placement: "bottom"

}).add('basic, default, left', function () {
return _react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({
return _react["default"].createElement(_Tooltip.Tooltip, (0, _extends2["default"])({
hasChrome: true,

@@ -56,7 +56,7 @@ placement: "left"

}).add('basic, default, right', function () {
return _react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({
return _react["default"].createElement(_Tooltip.Tooltip, (0, _extends2["default"])({
placement: "right"
}, mockPopperProps), _react["default"].createElement(Content, null, "Text"));
}).add('no chrome', function () {
return _react["default"].createElement(_Tooltip["default"], mockPopperProps, _react["default"].createElement(Content, null, "Text"));
return _react["default"].createElement(_Tooltip.Tooltip, mockPopperProps, _react["default"].createElement(Content, null, "Text"));
});

13

dist/components/tooltip/TooltipLinkList.js

@@ -8,3 +8,3 @@ "use strict";

});
exports["default"] = void 0;
exports.TooltipLinkList = TooltipLinkList;

@@ -45,4 +45,3 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

active = _ref2.active,
isGatsby = _ref2.isGatsby,
props = (0, _objectWithoutProperties2["default"])(_ref2, ["title", "href", "onClick", "active", "isGatsby"]);
props = (0, _objectWithoutProperties2["default"])(_ref2, ["title", "href", "onClick", "active"]);
return _react["default"].createElement(_ListItem.ListItem

@@ -56,3 +55,3 @@ /* eslint-disable react/no-array-index-key */

href: href,
LinkWrapper: isGatsby ? LinkWrapper : null
LinkWrapper: LinkWrapper || null
}, props));

@@ -69,8 +68,6 @@ }));

}).isRequired).isRequired,
LinkWrapper: _propTypes["default"].shape()
LinkWrapper: _propTypes["default"].func
};
TooltipLinkList.defaultProps = {
LinkWrapper: _ListItem.ListItem.defaultProps.LinkWrapper
};
var _default = TooltipLinkList;
exports["default"] = _default;
};

15

dist/components/tooltip/TooltipLinkList.stories.js

@@ -18,11 +18,12 @@ "use strict";

var _TooltipLinkList = _interopRequireDefault(require("./TooltipLinkList"));
var _TooltipLinkList = require("./TooltipLinkList");
// import StoryLinkWrapper from '../../lib/StoryLinkWrapper';
var _StoryLinkWrapper = require("../StoryLinkWrapper");
var links = [{
title: 'Link',
href: 'http://google.com'
href: 'https://learnstorybook.com'
}, {
title: 'Link',
href: 'http://google.com'
href: 'https://learnstorybook.com'
}, {

@@ -45,3 +46,3 @@ title: 'callback',

}).add('links', function () {
return _react["default"].createElement(_TooltipLinkList["default"], {
return _react["default"].createElement(_TooltipLinkList.TooltipLinkList, {
links: links.slice(0, 2),

@@ -51,6 +52,6 @@ LinkWrapper: null

}).add('links and callback', function () {
return _react["default"].createElement(_TooltipLinkList["default"], {
return _react["default"].createElement(_TooltipLinkList.TooltipLinkList, {
links: links,
LinkWrapper: null
LinkWrapper: _StoryLinkWrapper.StoryLinkWrapper
});
});

10

dist/components/tooltip/TooltipMessage.js

@@ -8,3 +8,3 @@ "use strict";

});
exports["default"] = void 0;
exports.TooltipMessage = TooltipMessage;

@@ -25,3 +25,3 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _Link = _interopRequireDefault(require("../Link"));
var _Link = require("../Link");

@@ -95,3 +95,3 @@ function _templateObject5() {

other = (0, _objectWithoutProperties2["default"])(_ref2, ["title"]);
return _react["default"].createElement(_Link["default"], (0, _extends2["default"])({}, other, {
return _react["default"].createElement(_Link.Link, (0, _extends2["default"])({}, other, {
key: linkTitle

@@ -113,4 +113,2 @@ }), linkTitle);

links: null
};
var _default = TooltipMessage;
exports["default"] = _default;
};

10

dist/components/tooltip/TooltipMessage.stories.js

@@ -11,3 +11,3 @@ "use strict";

var _TooltipMessage = _interopRequireDefault(require("./TooltipMessage"));
var _TooltipMessage = require("./TooltipMessage");

@@ -26,3 +26,3 @@ (0, _react2.storiesOf)('Design System|tooltip/TooltipMessage', module).addDecorator(function (storyFn) {

}).add('default', function () {
return _react["default"].createElement(_TooltipMessage["default"], {
return _react["default"].createElement(_TooltipMessage.TooltipMessage, {
title: "Lorem ipsum dolor sit",

@@ -32,3 +32,3 @@ desc: "Amet consectatur vestibulum concet durum politu coret weirom"

}).add('with link', function () {
return _react["default"].createElement(_TooltipMessage["default"], {
return _react["default"].createElement(_TooltipMessage.TooltipMessage, {
title: "Lorem ipsum dolor sit",

@@ -42,3 +42,3 @@ desc: "Amet consectatur vestibulum concet durum politu coret weirom",

}).add('with links', function () {
return _react["default"].createElement(_TooltipMessage["default"], {
return _react["default"].createElement(_TooltipMessage.TooltipMessage, {
title: "Lorem ipsum dolor sit",

@@ -55,5 +55,5 @@ desc: "Amet consectatur vestibulum concet durum politu coret weirom",

}).add('minimal message', function () {
return _react["default"].createElement(_TooltipMessage["default"], {
return _react["default"].createElement(_TooltipMessage.TooltipMessage, {
desc: "Amet consectatur vestibulum concet durum politu coret weirom"
});
});

2

dist/components/tooltip/TooltipNote.js

@@ -8,3 +8,3 @@ "use strict";

});
exports["default"] = TooltipNote;
exports.TooltipNote = TooltipNote;

@@ -11,0 +11,0 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

4

dist/components/tooltip/TooltipNote.stories.js

@@ -11,3 +11,3 @@ "use strict";

var _TooltipNote = _interopRequireDefault(require("./TooltipNote"));
var _TooltipNote = require("./TooltipNote");

@@ -27,5 +27,5 @@ (0, _react2.storiesOf)('Design System|tooltip/TooltipNote', module).addDecorator(function (storyFn) {

}).add('default', function () {
return _react["default"].createElement(_TooltipNote["default"], {
return _react["default"].createElement(_TooltipNote.TooltipNote, {
note: "Lorem ipsum dolor"
});
});

5

dist/components/tooltip/WithTooltip.js

@@ -26,3 +26,3 @@ "use strict";

var _Tooltip = _interopRequireDefault(require("./Tooltip"));
var _Tooltip = require("./Tooltip");

@@ -50,3 +50,2 @@ function _templateObject2() {

// A target that doesn't speak popper
// prettier-ignore
var TargetContainer = _styledComponents["default"].div(_templateObject(), function (props) {

@@ -85,3 +84,3 @@ return props.mode === 'hover' ? 'default' : 'pointer';

tooltipPlacement = _ref2.placement;
return _react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({
return _react["default"].createElement(_Tooltip.Tooltip, (0, _extends2["default"])({
hasChrome: hasChrome,

@@ -88,0 +87,0 @@ placement: tooltipPlacement,

8

dist/components/tooltip/WithTooltip.stories.js

@@ -15,3 +15,3 @@ "use strict";

var _TooltipMessage = _interopRequireDefault(require("./TooltipMessage"));
var _TooltipMessage = require("./TooltipMessage");

@@ -41,3 +41,3 @@ var _WithTooltip = _interopRequireDefault(require("./WithTooltip"));

function _templateObject2() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 500px;\n height: 500px;\n overflow-y: scroll;\n background: #eee;\n position: relative;\n"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 500px;\n height: 500px;\n background: pink;\n position: relative;\n"]);

@@ -52,3 +52,3 @@ _templateObject2 = function _templateObject2() {

function _templateObject() {
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: 300px;\n"]);
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: 300px;\n background: purple;\n overflow-y: scroll;\n"]);

@@ -72,3 +72,3 @@ _templateObject = function _templateObject() {

var onHide = _ref.onHide;
return _react["default"].createElement(_TooltipMessage["default"], {
return _react["default"].createElement(_TooltipMessage.TooltipMessage, {
title: "Lorem ipsum dolor sit",

@@ -75,0 +75,0 @@ desc: "Amet consectatur vestibulum concet durum politu coret weirom",

16

package.json
{
"name": "@storybook/design-system",
"version": "0.0.7",
"version": "0.0.8",
"description": "Storybook design system",

@@ -70,9 +70,9 @@ "repository": {

"@babel/preset-react": "^7.0.0",
"@storybook/addon-a11y": "^5.2.0-alpha.5",
"@storybook/addon-actions": "^5.2.0-alpha.5",
"@storybook/addon-docs": "^5.2.0-alpha.5",
"@storybook/addon-knobs": "^5.2.0-alpha.5",
"@storybook/addon-storysource": "^5.2.0-alpha.5",
"@storybook/addons": "^5.2.0-alpha.5",
"@storybook/react": "^5.2.0-alpha.5",
"@storybook/addon-a11y": "^5.2.0-alpha.9",
"@storybook/addon-actions": "^5.2.0-alpha.9",
"@storybook/addon-docs": "^5.2.0-alpha.9",
"@storybook/addon-knobs": "^5.2.0-alpha.9",
"@storybook/addon-storysource": "^5.2.0-alpha.9",
"@storybook/addons": "^5.2.0-alpha.9",
"@storybook/react": "^5.2.0-alpha.9",
"auto": "^4.14.0",

@@ -79,0 +79,0 @@ "babel-eslint": "^10.0.1",

dist/components/shared/icons.js

Sorry, the diff of this file is too big to display