Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vcc-ui

Package Overview
Dependencies
Maintainers
12
Versions
211
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vcc-ui - npm Package Compare versions

Comparing version 1.0.0-rc.1 to 1.0.0-rc.2

es/components/radio/index.js
es/components/radio/stories.js
es/components/radio/test.js
lib/components/radio/index.js
lib/components/radio/stories.js
lib/components/radio/test.js

2

CHANGELOG.md
[1.0.0]
- Allow NavItem text to span multiple lines
- Changed onToggle (deprecated) to onChange for `<Toggle>` component to streamline form API's
- Add TabNavItem hover, focus and active color

@@ -4,0 +6,0 @@ - Removed `<Footer>` component

10

es/components/arrow/stories.js

@@ -7,20 +7,20 @@ import React from "react";

import { Block } from "../block";
storiesOf("Arrow", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
storiesOf("Images & Icons/Arrow", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
return React.createElement(Block, null, React.createElement(Arrow, {
color: "red",
size: "24",
size: 12,
direction: "right"
}), React.createElement(Arrow, {
color: "green",
size: "24",
size: 24,
direction: "left"
}), React.createElement(Arrow, {
color: "blue",
size: "24",
size: 48,
direction: "up"
}), React.createElement(Arrow, {
color: "black",
size: "24",
size: 96,
direction: "down"
}));
});

25

es/components/block/stories.js

@@ -1,3 +0,1 @@

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React from "react";

@@ -8,3 +6,5 @@ import { storiesOf } from "@storybook/react";

import { Block } from "./";
storiesOf("Block", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Basic", function () {
storiesOf("Core/Block", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
return React.createElement(Block, null, "This is a block");
}).addWithJSX("With Extend", function () {
return React.createElement(Block, {

@@ -16,21 +16,2 @@ extend: object("extend", {

}, "This is a block");
}).addWithJSX("Responsive", function () {
return React.createElement(Block, {
extend: function extend(_ref) {
var _ref2;
var theme = _ref.theme;
return _ref2 = {
color: "white",
background: "red",
padding: "10px"
}, _defineProperty(_ref2, theme.breakpoints.fromM, {
background: "green",
padding: "20px"
}), _defineProperty(_ref2, theme.breakpoints.fromL, {
background: "blue",
padding: "30px"
}), _ref2;
}
}, "Hello Responsive Block");
});

13

es/components/box/stories.js
import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs/react";
import { object, withKnobs } from "@storybook/addon-knobs/react";
import { withStyleAndTheme } from "../../../stories/decorators";

@@ -8,5 +8,6 @@ import { Box } from "./";

border: "1px solid grey",
padding: 20
padding: 20,
margin: 5
};
storiesOf("Box", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Basic", function () {
storiesOf("Core/Box", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
return React.createElement(Box, null, React.createElement(Box, {

@@ -17,7 +18,7 @@ extend: boxStyle

}, "World"));
}).addWithJSX("Row direction", function () {
}).addWithJSX("Row", function () {
return React.createElement(Box, {
extend: {
extend: object("extend", {
flexDirection: "row"
}
})
}, React.createElement(Box, {

@@ -24,0 +25,0 @@ extend: boxStyle

6

es/components/button/index.js

@@ -77,3 +77,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

transitionProperty: "background, fill, stroke, color, border-color",
fontFamily: "Volvo Novum Regular, sans-serif",
fontFamily: theme.fontTypes.NOVUM,
fontWeight: 400,
position: "relative",

@@ -119,2 +120,3 @@ ":focus": {

style: {
border: "1px solid transparent",
fill: color,

@@ -194,3 +196,3 @@ color: color,

margin: "0 auto",
top: 14
top: 10
}

@@ -197,0 +199,0 @@ }, React.createElement(Spinner, {

488

es/components/button/stories.js

@@ -1,447 +0,53 @@

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import { withStyleAndTheme } from "../../../stories/decorators";
import { select, withKnobs } from "@storybook/addon-knobs";
import { withStyleAndTheme, withDarkBackground } from "../../../stories/decorators";
import { Button } from "./";
import { Block } from "../block";
var ButtonGroup = function ButtonGroup(_ref) {
var children = _ref.children,
props = _objectWithoutProperties(_ref, ["children"]);
return React.createElement(Block, _extends({}, props, {
extend: _objectSpread({
display: "flex",
alignItems: "center"
}, props.extend)
}), children.map(function (child, i) {
return React.createElement(Block, {
key: i,
extend: {
marginRight: "10px"
}
}, child);
}));
var variant = {
label: "Variant",
options: {
default: "default",
outline: "outline",
text: "text"
},
default: "default"
};
var ButtonGroupLabel = function ButtonGroupLabel(_ref2) {
var children = _ref2.children,
props = _objectWithoutProperties(_ref2, ["children"]);
return React.createElement(Block, _extends({}, props, {
extend: _objectSpread({
fontSize: "12px",
width: "100px",
textAlign: "right",
paddingRight: "20px"
}, props.extend)
}), children);
var arrow = {
label: "Arrow",
options: {
none: false,
right: "right",
left: "left",
up: "up",
down: "down"
},
default: false
};
storiesOf("Button", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Intent / Variant", function () {
return React.createElement(React.Fragment, null, React.createElement(ButtonGroup, null, React.createElement(ButtonGroupLabel, null, "Primary:"), React.createElement(Button, {
intent: "primary",
variant: "default"
}, "Default"), React.createElement(Button, {
intent: "primary",
variant: "outline"
}, "Outline"), React.createElement(Button, {
intent: "primary",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
padding: "10px 0",
background: "#000",
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, {
extend: {
color: "#fff"
}
}, "Primary Light:"), React.createElement(Button, {
intent: "primary-light",
variant: "default"
}, "Default"), React.createElement(Button, {
intent: "primary-light",
variant: "outline"
}, "Outline"), React.createElement(Button, {
intent: "primary-light",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, null, "Secondary:"), React.createElement(Button, {
intent: "secondary",
variant: "default"
}, "Default"), React.createElement(Button, {
intent: "secondary",
variant: "outline"
}, "Outline"), React.createElement(Button, {
intent: "secondary",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, null, "Destructive:"), React.createElement(Button, {
intent: "destructive",
variant: "default"
}, "Default"), React.createElement(Button, {
intent: "destructive",
variant: "outline"
}, "Outline"), React.createElement(Button, {
intent: "destructive",
variant: "text"
}, "Text")));
}).addWithJSX("Loading", function () {
return React.createElement(React.Fragment, null, React.createElement(ButtonGroup, null, React.createElement(ButtonGroupLabel, null, "Primary:"), React.createElement(Button, {
loading: true,
intent: "primary",
variant: "default"
}, "Default"), React.createElement(Button, {
loading: true,
intent: "primary",
variant: "outline"
}, "Outline"), React.createElement(Button, {
loading: true,
intent: "primary",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
padding: "10px 0",
background: "#000",
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, {
extend: {
color: "#fff"
}
}, "Primary Light:"), React.createElement(Button, {
loading: true,
intent: "primary-light",
variant: "default"
}, "Default"), React.createElement(Button, {
loading: true,
intent: "primary-light",
variant: "outline"
}, "Outline"), React.createElement(Button, {
loading: true,
intent: "primary-light",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, null, "Secondary:"), React.createElement(Button, {
loading: true,
intent: "secondary",
variant: "default"
}, "Default"), React.createElement(Button, {
loading: true,
intent: "secondary",
variant: "outline"
}, "Outline"), React.createElement(Button, {
loading: true,
intent: "secondary",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, null, "Destructive:"), React.createElement(Button, {
loading: true,
intent: "destructive",
variant: "default"
}, "Default"), React.createElement(Button, {
loading: true,
intent: "destructive",
variant: "outline"
}, "Outline"), React.createElement(Button, {
loading: true,
intent: "destructive",
variant: "text"
}, "Text")));
}).addWithJSX("Disabled", function () {
return React.createElement(React.Fragment, null, React.createElement(ButtonGroup, null, React.createElement(ButtonGroupLabel, null, "Primary:"), React.createElement(Button, {
disabled: true,
intent: "primary",
variant: "default"
}, "Default"), React.createElement(Button, {
disabled: true,
intent: "primary",
variant: "outline"
}, "Outline"), React.createElement(Button, {
disabled: true,
intent: "primary",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
padding: "10px 0",
background: "#000",
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, {
extend: {
color: "#fff"
}
}, "Primary Light:"), React.createElement(Button, {
disabled: true,
intent: "primary-light",
variant: "default"
}, "Default"), React.createElement(Button, {
disabled: true,
intent: "primary-light",
variant: "outline"
}, "Outline"), React.createElement(Button, {
disabled: true,
intent: "primary-light",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, null, "Secondary:"), React.createElement(Button, {
disabled: true,
intent: "secondary",
variant: "default"
}, "Default"), React.createElement(Button, {
disabled: true,
intent: "secondary",
variant: "outline"
}, "Outline"), React.createElement(Button, {
disabled: true,
intent: "secondary",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, null, "Destructive:"), React.createElement(Button, {
disabled: true,
intent: "destructive",
variant: "default"
}, "Default"), React.createElement(Button, {
disabled: true,
intent: "destructive",
variant: "outline"
}, "Outline"), React.createElement(Button, {
disabled: true,
intent: "destructive",
variant: "text"
}, "Text")));
}).addWithJSX("With Arrow", function () {
return React.createElement(React.Fragment, null, React.createElement(ButtonGroup, null, React.createElement(ButtonGroupLabel, null, "Primary:"), React.createElement(Button, {
arrow: "right",
intent: "primary",
variant: "default"
}, "Default"), React.createElement(Button, {
arrow: "right",
intent: "primary",
variant: "outline"
}, "Outline"), React.createElement(Button, {
arrow: "right",
intent: "primary",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
padding: "10px 0",
background: "#000",
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, {
extend: {
color: "#fff"
}
}, "Primary Light:"), React.createElement(Button, {
arrow: "up",
intent: "primary-light",
variant: "default"
}, "Default"), React.createElement(Button, {
arrow: "up",
intent: "primary-light",
variant: "outline"
}, "Outline"), React.createElement(Button, {
arrow: "up",
intent: "primary-light",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, null, "Secondary:"), React.createElement(Button, {
arrow: "left",
intent: "secondary",
variant: "default"
}, "Default"), React.createElement(Button, {
arrow: "left",
intent: "secondary",
variant: "outline"
}, "Outline"), React.createElement(Button, {
arrow: "left",
intent: "secondary",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, null, "Destructive:"), React.createElement(Button, {
arrow: "down",
intent: "destructive",
variant: "default"
}, "Default"), React.createElement(Button, {
arrow: "down",
intent: "destructive",
variant: "outline"
}, "Outline"), React.createElement(Button, {
arrow: "down",
intent: "destructive",
variant: "text"
}, "Text")));
}).addWithJSX("With Icon (after)", function () {
return React.createElement(React.Fragment, null, React.createElement(ButtonGroup, null, React.createElement(ButtonGroupLabel, null, "Primary:"), React.createElement(Button, {
iconAfter: "search",
intent: "primary",
variant: "default"
}, "Default"), React.createElement(Button, {
iconAfter: "search",
intent: "primary",
variant: "outline"
}, "Outline"), React.createElement(Button, {
iconAfter: "search",
intent: "primary",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
padding: "10px 0",
background: "#000",
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, {
extend: {
color: "#fff"
}
}, "Primary Light:"), React.createElement(Button, {
iconAfter: "search",
intent: "primary-light",
variant: "default"
}, "Default"), React.createElement(Button, {
iconAfter: "search",
intent: "primary-light",
variant: "outline"
}, "Outline"), React.createElement(Button, {
iconAfter: "search",
intent: "primary-light",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, null, "Secondary:"), React.createElement(Button, {
iconAfter: "search",
intent: "secondary",
variant: "default"
}, "Default"), React.createElement(Button, {
iconAfter: "search",
intent: "secondary",
variant: "outline"
}, "Outline"), React.createElement(Button, {
iconAfter: "search",
intent: "secondary",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, null, "Destructive:"), React.createElement(Button, {
iconAfter: "search",
intent: "destructive",
variant: "default"
}, "Default"), React.createElement(Button, {
iconAfter: "search",
intent: "destructive",
variant: "outline"
}, "Outline"), React.createElement(Button, {
iconAfter: "search",
intent: "destructive",
variant: "text"
}, "Text")));
}).addWithJSX("With Icon (before)", function () {
return React.createElement(React.Fragment, null, React.createElement(ButtonGroup, null, React.createElement(ButtonGroupLabel, null, "Primary:"), React.createElement(Button, {
iconBefore: "search",
intent: "primary",
variant: "default"
}, "Default"), React.createElement(Button, {
iconBefore: "search",
intent: "primary",
variant: "outline"
}, "Outline"), React.createElement(Button, {
iconBefore: "search",
intent: "primary",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
padding: "10px 0",
background: "#000",
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, {
extend: {
color: "#fff"
}
}, "Primary Light:"), React.createElement(Button, {
iconBefore: "search",
intent: "primary-light",
variant: "default"
}, "Default"), React.createElement(Button, {
iconBefore: "search",
intent: "primary-light",
variant: "outline"
}, "Outline"), React.createElement(Button, {
iconBefore: "search",
intent: "primary-light",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, null, "Secondary:"), React.createElement(Button, {
iconBefore: "search",
intent: "secondary",
variant: "default"
}, "Default"), React.createElement(Button, {
iconBefore: "search",
intent: "secondary",
variant: "outline"
}, "Outline"), React.createElement(Button, {
iconBefore: "search",
intent: "secondary",
variant: "text"
}, "Text")), React.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, React.createElement(ButtonGroupLabel, null, "Destructive:"), React.createElement(Button, {
iconBefore: "search",
intent: "destructive",
variant: "default"
}, "Default"), React.createElement(Button, {
iconBefore: "search",
intent: "destructive",
variant: "outline"
}, "Outline"), React.createElement(Button, {
iconBefore: "search",
intent: "destructive",
variant: "text"
}, "Text")));
storiesOf("Actions/Button", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Primary", function () {
return React.createElement(Button, {
variant: select(variant.label, variant.options, variant.default),
arrow: select(arrow.label, arrow.options, arrow.default),
intent: "primary"
}, "Hello World");
});
storiesOf("Actions/Button", module).addDecorator(withKnobs).addDecorator(withDarkBackground).addDecorator(withStyleAndTheme).addWithJSX("On Dark", function () {
return React.createElement(Button, {
variant: select(variant.label, variant.options, variant.default),
arrow: select(arrow.label, arrow.options, arrow.default),
intent: "primary-light"
}, "Hello World");
});
storiesOf("Actions/Button", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Secondary", function () {
return React.createElement(Button, {
variant: select(variant.label, variant.options, variant.default),
arrow: select(arrow.label, arrow.options, arrow.default),
intent: "secondary"
}, "Hello World");
});
storiesOf("Actions/Button", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Destructive", function () {
return React.createElement(Button, {
variant: select(variant.label, variant.options, variant.default),
arrow: select(arrow.label, arrow.options, arrow.default),
intent: "destructive"
}, "Destroy Planet");
});

21

es/components/button/test.js

@@ -7,3 +7,2 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

import { Button } from ".";
import { BREAKPOINTS } from "../../constants/breakpoints";
import createSnapshot from "../../test/create-snapshot";

@@ -29,22 +28,2 @@ import volvoTheme from "../../themes/volvo";

});
it("renders <Button /> correctly with theme and media queries", function () {
var _button;
var theme = _objectSpread({}, volvoTheme, {
styles: {
button: {
button: (_button = {}, _defineProperty(_button, BREAKPOINTS.onS, {
background: "blue"
}), _defineProperty(_button, BREAKPOINTS.onM, {
background: "orange"
}), _defineProperty(_button, BREAKPOINTS.onL, {
background: "magenta"
}), _button)
}
}
});
var snapshot = createSnapshot(React.createElement(Button, null, helloLabel), theme);
expect(snapshot).toMatchSnapshot();
});
});

29

es/components/checkbox/index.js
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from "react";
import { bool, func } from "prop-types";
import { useFela } from "react-fela";

@@ -12,6 +13,4 @@ import { Block } from "../block";

boxSizing: "border-box",
background: "white",
borderWidth: 1,
borderStyle: "solid",
borderColor: theme.colors.grey7,
appearance: "none",

@@ -27,2 +26,18 @@ width: 20,

cursor: "pointer",
outline: 0,
borderColor: theme.colors.inputBorder,
background: theme.colors.inputBackground,
":focus": {
borderColor: theme.colors.inputBorderFocus
},
"[disabled]": {
cursor: "not-allowed",
borderColor: theme.colors.inputDisabledBorder,
":checked": {
":before": {
borderRight: "2px solid ".concat(theme.colors.inputDisabledControl),
borderBottom: "2px solid ".concat(theme.colors.inputDisabledControl)
}
}
},
":checked": {

@@ -37,4 +52,4 @@ ":before": {

position: "absolute",
borderRight: "2px solid ".concat(theme.colors.primary),
borderBottom: "2px solid ".concat(theme.colors.primary)
borderRight: "2px solid ".concat(theme.colors.inputControl),
borderBottom: "2px solid ".concat(theme.colors.inputControl)
}

@@ -54,2 +69,6 @@ }

}));
}
}
Checkbox.propTypes = {
onChange: func.isRequired,
checked: bool.isRequired
};

71

es/components/checkbox/stories.js

@@ -13,16 +13,73 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

import { withStyleAndTheme } from "../../../stories/decorators";
import { Box } from "../box";
import { Inline } from "../inline";
import { Checkbox } from ".";
storiesOf("Checkbox", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
storiesOf("Forms/Checkbox", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
function CheckboxWithValue() {
var _useState = useState(true),
_useState2 = _slicedToArray(_useState, 2),
checked = _useState2[0],
setChecked = _useState2[1];
apple = _useState2[0],
toggleApple = _useState2[1];
return React.createElement(Checkbox, {
checked: checked,
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
banana = _useState4[0],
toggleBanana = _useState4[1];
var _useState5 = useState(true),
_useState6 = _slicedToArray(_useState5, 2),
cherrie = _useState6[0],
toggleCherrie = _useState6[1];
return React.createElement(Box, {
extend: {
flexDirection: "row"
}
}, React.createElement(Box, {
as: "label",
extend: {
flexDirection: "row",
marginRight: "10px"
}
}, React.createElement(Checkbox, {
checked: apple,
onChange: function onChange() {
return setChecked(!checked);
return toggleApple(!apple);
}
});
}), React.createElement(Inline, {
extend: {
marginLeft: "5px"
}
}, "Apple")), React.createElement(Box, {
as: "label",
extend: {
flexDirection: "row",
marginRight: "10px"
}
}, React.createElement(Checkbox, {
checked: banana,
onChange: function onChange() {
return toggleBanana(!banana);
}
}), React.createElement(Inline, {
extend: {
marginLeft: "5px"
}
}, "Banana")), React.createElement(Box, {
as: "label",
extend: {
flexDirection: "row",
marginRight: "10px"
}
}, React.createElement(Checkbox, {
disabled: true,
checked: cherrie,
onChange: function onChange() {
return toggleCherrie(!cherrie);
}
}), React.createElement(Inline, {
extend: {
marginLeft: "5px"
}
}, "Cherrie")));
}

@@ -29,0 +86,0 @@

16

es/components/checkbox/test.js
import React from "react";
import { Checkbox } from ".";
import createSnapshot from "../../test/create-snapshot";
var onChange = function onChange() {};
describe("<Checkbox /> snapshot tests", function () {
it("renders <Checkbox /> correctly with default props", function () {
var snapshot = createSnapshot(React.createElement(Checkbox, null));
expect(snapshot).toMatchSnapshot();
});
it("renders <Checkbox /> correctly with checked prop", function () {
var snapshot = createSnapshot(React.createElement(Checkbox, {
checked: true
onChange: onChange
}));
expect(snapshot).toMatchSnapshot();
});
it("renders <Checkbox /> without overriding styles", function () {
it("renders <Checkbox /> correctly with checked prop", function () {
var snapshot = createSnapshot(React.createElement(Checkbox, {
extend: {
display: "none"
}
checked: true,
onChange: onChange
}));

@@ -21,0 +19,0 @@ expect(snapshot).toMatchSnapshot();

11

es/components/click/index.js

@@ -41,3 +41,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

extend: [{
boxSizing: "border-box"
boxSizing: "border-box",
color: "#000",
fontSize: "12px",
fontFamily: "sans-serif"
}, as === "button" ? buttonResetStyle : linkResetStyle, extend]

@@ -47,2 +50,8 @@ }), children);

Click.propTypes = {
/** Any valid React element, function, or a string specifying a name for an HTML element */
as: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
/** An object containing valid CSS style declarations */
extend: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.array]),
/** A JSX node */

@@ -49,0 +58,0 @@ children: PropTypes.node,

19

es/components/click/stories.js

@@ -6,3 +6,3 @@ import React from "react";

import { Click } from "./";
storiesOf("Click", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("unstyled", function () {
storiesOf("Core/Click", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
return React.createElement(Click, {

@@ -13,2 +13,19 @@ onClick: function onClick() {

}, "This is a clickable unstyled button");
}).addWithJSX("With Extend", function () {
return React.createElement(Click, {
extend: {
display: "inline-block",
padding: "16px 24px",
color: "hotpink",
background: "#f1f1f1",
fontSize: 14,
transition: "all 0.2s ease-in-out 0s",
":hover": {
transform: "rotate(2deg) scale(1.1)",
background: "lightblue",
color: "#fff"
}
},
href: "https://www.volvocars.com/"
}, "Custom Style Button");
});

9

es/components/icon/index.js

@@ -256,3 +256,4 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

var IconType = function IconType(_ref17) {
var type = _ref17.type,
var _ref17$type = _ref17.type,
type = _ref17$type === void 0 ? "s" : _ref17$type,
props = _objectWithoutProperties(_ref17, ["type"]);

@@ -318,6 +319,2 @@

};
var defaultProps = {
size: "s"
};
Icon.propTypes = propTypes;
Icon.defaultProps = defaultProps;
Icon.propTypes = propTypes;

22

es/components/icon/stories.js
import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import { ICONS } from "../../constants/icons";
import { withStyleAndTheme } from "../../../stories/decorators";
import { Block } from "../block";
import { Icon } from "./";
storiesOf("Icon", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("basic", function () {
storiesOf("Images & Icons/Icon", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("basic", function () {
return React.createElement(Icon, {
type: "facebook"
});
}).addWithJSX("list of icons", function () {
return React.createElement(Block, {
extend: {
display: "flex"
}
}, ICONS.map(function (icon) {
return React.createElement(Block, {
key: icon,
extend: {
padding: "20px",
textAlign: "center"
}
}, React.createElement(Icon, {
color: "navy",
size: "l",
type: icon
}), React.createElement(Block, null, icon));
}));
});

14

es/components/inline/stories.js
import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs/react";
import { object, withKnobs } from "@storybook/addon-knobs/react";
import { withStyleAndTheme } from "../../../stories/decorators";
import { Inline } from "../../index";
storiesOf("Inline", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("basic", function () {
return React.createElement(Inline, null, "This is an ", React.createElement(Inline, {
extend: {
color: "red"
}
}, "inline"), " component");
storiesOf("Core/Inline", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("With Extend", function () {
return React.createElement(React.Fragment, null, "This is an", " ", React.createElement(Inline, {
extend: object("extend", {
color: "hotpink"
})
}, "inline"), " ", "component");
});

3

es/components/link/index.js

@@ -27,3 +27,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

whiteSpace: "nowrap",
fontFamily: "Volvo Novum Regular, sans-serif",
fontFamily: theme.fontTypes.NOVUM,
fontWeight: 400,
fontSize: 15,

@@ -30,0 +31,0 @@ textDecoration: "none",

20

es/components/link/stories.js

@@ -6,28 +6,14 @@ import React from "react";

import { Link } from "./";
storiesOf("Link", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("With Text", function () {
storiesOf("Actions/Link", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("With Arrow", function () {
return React.createElement(Link, {
href: "http://www.volvocars.com/"
}, "This is a link component");
}).addWithJSX("With Arrow (right)", function () {
return React.createElement(Link, {
href: "http://www.volvocars.com/",
arrow: "right"
}, "This is a link component");
}).addWithJSX("With arrow (left)", function () {
return React.createElement(Link, {
href: "http://www.volvocars.com/",
arrow: "left"
}, "This is a link component");
});
storiesOf("Link", module).addDecorator(withKnobs).addDecorator(withDarkBackground).addDecorator(withStyleAndTheme).addWithJSX("Dark: With Text", function () {
storiesOf("Actions/Link", module).addDecorator(withKnobs).addDecorator(withDarkBackground).addDecorator(withStyleAndTheme).addWithJSX("On Dark With Arrow", function () {
return React.createElement(Link, {
href: "http://www.volvocars.com/",
intent: "primary-light"
}, "This is a link component");
}).addWithJSX("Dark: With Arrow (up)", function () {
return React.createElement(Link, {
href: "http://www.volvocars.com/",
intent: "primary-light",
arrow: "up"
arrow: "right"
}, "This is a link component");
});

6

es/components/loading-bar/stories.js
import React from "react";
import { storiesOf } from "@storybook/react";
import { object, withKnobs, boolean, number } from "@storybook/addon-knobs/react";
import { withKnobs, boolean, number } from "@storybook/addon-knobs/react";
import { withStyleAndTheme } from "../../../stories/decorators";
import { ThemeProvider } from "../../theme-provider";
import volvoTheme from "../../themes/volvo";
import { LoadingBar } from "./";

@@ -24,3 +22,3 @@ import { Block } from "../block";

storiesOf("LoadingBar", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
storiesOf("Feedback Indicators/LoadingBar", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
return React.createElement(Container, null, React.createElement(LoadingBar, {

@@ -27,0 +25,0 @@ isLoading: boolean("isLoading", true),

5

es/components/logo/index.js

@@ -47,5 +47,2 @@ import React from "react";

altText: PropTypes.string
}; // Logo.defaultProps = {
// type: LOGO_TYPES.SQUARE,
// altText: "Volvo logo"
// };
};

2

es/components/logo/stories.js

@@ -7,3 +7,3 @@ import React from "react";

import { Logo } from "./";
storiesOf("Logo", module).addDecorator(withKnobs).addDecorator(withDarkBackground).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
storiesOf("Images & Icons/Logo", module).addDecorator(withKnobs).addDecorator(withDarkBackground).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
return React.createElement(FelaTheme, null, function (_ref) {

@@ -10,0 +10,0 @@ var logoTypes = _ref.logoTypes;

6

es/components/nav-item/index.js

@@ -27,6 +27,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

padding: "18px 0",
height: 20,
minHeight: 20,
alignItems: "center",
textAlign: "left",
boxSizing: "content-box",
fontFamily: "Volvo Novum Light, sans-serif",
fontFamily: theme.fontTypes.NOVUM,
fontWeight: 200,
letterSpacing: 0.3,

@@ -33,0 +35,0 @@ borderBottomWidth: 1,

78

es/components/nav-item/stories.js

@@ -1,14 +0,7 @@

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React from "react";
import { FelaTheme } from "react-fela";
import { storiesOf } from "@storybook/react";
import { withKnobs } from "@storybook/addon-knobs";
import { BREAKPOINTS } from "../../constants/breakpoints";
import { withStyleAndTheme } from "../../../stories/decorators";
import { NavItem } from "./";
import { Block } from "../block";
import { Nav } from "../nav";
import { Logo } from "../logo";
storiesOf("NavItem", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
storiesOf("Navigation/NavItem", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
return React.createElement(NavItem, null, "Build & Price");

@@ -28,65 +21,8 @@ }).addWithJSX("isActive", function () {

}, "Cars");
}).addWithJSX("In Navigation", function () {
var _ref, _ref2, _ref4;
return React.createElement(Nav, {
sticky: true
}, React.createElement(Block, {
extend: (_ref = {
display: "flex"
}, _defineProperty(_ref, BREAKPOINTS.untilL, {
flexDirection: "column",
position: "fixed",
width: "100%",
bottom: "0",
background: "#fff",
top: "0"
}), _defineProperty(_ref, BREAKPOINTS.onL, {
alignItems: "center",
padding: "0 20px"
}), _ref)
}, React.createElement(Block, {
extend: (_ref2 = {}, _defineProperty(_ref2, BREAKPOINTS.untilL, {
padding: "0 20px"
}), _defineProperty(_ref2, BREAKPOINTS.onL, {
display: "flex",
flex: 1,
alignItems: "center"
}), _ref2)
}, React.createElement(NavItem, {
dropdown: true
}, "Cars"), React.createElement(NavItem, {
dropdown: true,
isActive: true
}, "Shopping Tools"), React.createElement(NavItem, {
dropdown: true
}, "Own")), React.createElement(Block, {
extend: _defineProperty({}, BREAKPOINTS.untilL, {
padding: "12px",
borderBottom: "1px solid #e9e9e9",
order: "-1",
textAlign: "center",
height: "50px"
})
}, React.createElement(FelaTheme, null, function (theme) {
return React.createElement(Logo, {
type: theme.logoTypes[Object.keys(theme.logoTypes)[0]]
});
})), React.createElement(Block, {
extend: (_ref4 = {}, _defineProperty(_ref4, BREAKPOINTS.untilL, {
padding: "0 20px"
}), _defineProperty(_ref4, BREAKPOINTS.onL, {
flex: 1,
display: "flex",
alignItems: "center",
justifyContent: "flex-end"
}), _ref4)
}, React.createElement(NavItem, {
href: "#1"
}, "Inventory"), React.createElement(NavItem, {
isActive: true,
href: "#2"
}, "Build & Price"), React.createElement(NavItem, {
href: "#3"
}, "Find A Dealer"))));
}).addWithJSX("With long label", function () {
return React.createElement(NavItem, null, "Find A Dealer And Text That Might Span Two Rows");
}).addWithJSX("isDropdown with long label", function () {
return React.createElement(NavItem, {
isDropdown: true
}, "Find A Dealer And Text That Might Span Two Rows");
});

2

es/components/nav/stories.js

@@ -9,3 +9,3 @@ import React from "react";

import { Logo } from "../logo";
storiesOf("Nav", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
storiesOf("Navigation/Nav", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
return React.createElement(Block, null, React.createElement(Nav, null, React.createElement(Block, {

@@ -12,0 +12,0 @@ extend: {

192

es/components/select-input/index.js

@@ -1,97 +0,127 @@

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React, { Component } from "react";
import { object, func, string, array, bool } from "prop-types";
import React from "react";
import { withTheme } from "react-fela";
import { useFela } from "react-fela";
import { func, string, array, bool } from "prop-types";
import { Block } from "../block";
import { isTouchDevice } from "../../helpers";
import { styles } from "./styles";
import { PureSelect } from "./pure-select";
import { CustomSelect } from "./custom-select";
import { getThemeStyle } from "../../get-theme-style";
var SelectInputComponent =
/*#__PURE__*/
function (_Component) {
_inherits(SelectInputComponent, _Component);
var arrowColor = function arrowColor(_ref) {
var theme = _ref.theme,
disabled = _ref.disabled;
return disabled ? theme.colors.inputDisabledControl : theme.colors.inputControl;
};
function SelectInputComponent() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, SelectInputComponent);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
var styles = function styles(_ref2) {
var disabled = _ref2.disabled,
theme = _ref2.theme;
return {
appearance: "none",
color: "#333",
background: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 13 6' fill='".concat(encodeURIComponent(arrowColor({
theme: theme,
disabled: disabled
})), "' %3E %3Cpath d='M6.49987275 4.13397441L11.78483479.5 12.5 1.37426775 6.49986464 5.5.5 1.3743604l.7151756-.87426061z'%3E %3C/path%3E %3C/svg%3E\") no-repeat right 18px center"),
backgroundSize: "15px 15px",
userSelect: "none",
overflow: "hidden",
margin: "0",
padding: "18px 18px",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
width: "100%",
boxSizing: "border-box",
borderRadius: 0,
border: "1px solid #f0f0f0",
display: "block",
fontSize: 15,
fontFamily: "Volvo Novum Regular, sans-serif",
"[disabled]": {
color: "#f0f0f0",
":hover": {
border: "1px solid #f0f0f0"
}
},
"& option[disabled]": {
color: "#aaa"
},
":invalid": {
color: "#aaa"
},
":focus:invalid": {
color: "#aaa"
},
"::-ms-expand": {
display: "none"
},
"::-ms-value": {
background: "none",
color: "#333"
},
":valid": {
color: "#333"
},
"& option": {
color: "#333"
},
":hover": {
border: "1px solid #e1e1e1"
},
":-moz-focusring": {
color: "transparent",
textShadow: "0 0 0 #000"
},
outline: 0,
borderColor: theme.colors.inputBorder,
backgroundColor: theme.colors.inputBackground,
cursor: disabled ? "not-allowed" : "pointer",
":focus": {
borderColor: theme.colors.inputBorderFocus
}
};
};
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SelectInputComponent)).call.apply(_getPrototypeOf2, [this].concat(args)));
var SelectInputComponent = function SelectInputComponent(_ref3) {
var _ref3$as = _ref3.as,
as = _ref3$as === void 0 ? "select" : _ref3$as,
value = _ref3.value,
placeholder = _ref3.placeholder,
disabled = _ref3.disabled,
options = _ref3.options,
props = _objectWithoutProperties(_ref3, ["as", "value", "placeholder", "disabled", "options"]);
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
isPureSelectHidden: false
});
var _useFela = useFela(),
theme = _useFela.theme;
return _this;
}
return React.createElement(Block, _extends({
as: as,
extend: [styles, getThemeStyle("selectInput", theme, {
disabled: disabled
})],
value: value || placeholder && "",
required: true,
disabled: disabled
}, props), placeholder && React.createElement(Block, {
as: "option",
value: "",
disabled: true,
hidden: true
}, placeholder), options.map(function (option) {
return React.createElement("option", {
key: option.value,
value: option.value,
disabled: option.disabled
}, option.label);
}));
};
_createClass(SelectInputComponent, [{
key: "componentDidMount",
value: function componentDidMount() {
this.setState({
isPureSelectHidden: !isTouchDevice()
});
}
}, {
key: "render",
value: function render() {
var isPureSelectHidden = this.state.isPureSelectHidden;
var _this$props = this.props,
value = _this$props.value,
options = _this$props.options,
theme = _this$props.theme,
onChange = _this$props.onChange,
disabled = _this$props.disabled;
return React.createElement(Block, {
as: "div",
extend: styles.container
}, React.createElement(CustomSelect, {
theme: theme,
value: value,
onChange: onChange,
options: options,
isDisabled: disabled
}), !isPureSelectHidden && React.createElement(PureSelect, {
value: value,
onChange: onChange,
options: options,
disabled: disabled
}));
}
}]);
return SelectInputComponent;
}(Component);
var propTypes = {
onChange: func.isRequired,
theme: object,
options: array.isRequired,
placeholder: string,
value: string,

@@ -98,0 +128,0 @@ disabled: bool

189

es/components/select-input/stories.js

@@ -23,7 +23,6 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

import { storiesOf } from "@storybook/react";
import { object, withKnobs } from "@storybook/addon-knobs";
import { ThemeProvider } from "../../theme-provider";
import { withKnobs } from "@storybook/addon-knobs";
import { withStyleAndTheme } from "../../../stories/decorators";
import { SelectInput } from "./";
storiesOf("SelectInput", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("basic class component", function () {
storiesOf("Forms/SelectInput", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
var Example =

@@ -77,5 +76,5 @@ /*#__PURE__*/

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleChange", function (value) {
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleChange", function (e) {
_this.setState({
value: value
value: e.target.value
});

@@ -102,3 +101,3 @@ });

return React.createElement(Example, null);
}).addWithJSX("with theme", function () {
}).addWithJSX("Disabled", function () {
var Example =

@@ -127,6 +126,2 @@ /*#__PURE__*/

}, {
value: "c30",
label: "Volvo C30",
disabled: true
}, {
value: "c70",

@@ -153,5 +148,5 @@ label: "Volvo C70"

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "handleChange", function (value) {
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "handleChange", function (e) {
_this2.setState({
value: value
value: e.target.value
});

@@ -169,68 +164,3 @@ });

options: this.state.options,
onChange: this.handleChange
});
}
}]);
return Example;
}(React.Component);
var defaultThemeValue = {
selectInput: {
width: "50%"
},
selectInputValue: {
textAlign: "center",
fontSize: "17px",
background: "#fafafa"
},
selectInputOption: {
":hover": {
backgroundColor: "lightgrey"
}
},
selectInputOptions: {
background: "#fbfbfb"
}
};
var themePropsConfig = object("", defaultThemeValue);
return React.createElement(ThemeProvider, {
theme: themePropsConfig
}, React.createElement(Example, null));
}).addWithJSX("disabled", function () {
var Example =
/*#__PURE__*/
function (_React$Component3) {
_inherits(Example, _React$Component3);
function Example() {
var _getPrototypeOf4;
var _this3;
_classCallCheck(this, Example);
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
_this3 = _possibleConstructorReturn(this, (_getPrototypeOf4 = _getPrototypeOf(Example)).call.apply(_getPrototypeOf4, [this].concat(args)));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "state", {
options: [{
value: "Bilmodell",
label: "Bilmodell"
}],
value: "Bilmodell"
});
return _this3;
}
_createClass(Example, [{
key: "render",
value: function render() {
return React.createElement(SelectInput, {
value: this.state.value,
options: this.state.options,
onChange: this.handleChange,
disabled: true

@@ -245,105 +175,2 @@ });

return React.createElement(Example, null);
}).addWithJSX("multiple with open", function () {
var Example =
/*#__PURE__*/
function (_React$Component4) {
_inherits(Example, _React$Component4);
function Example(props) {
var _this4;
_classCallCheck(this, Example);
_this4 = _possibleConstructorReturn(this, _getPrototypeOf(Example).call(this, props));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this4)), "state", {
options: [{
value: "bilmodell",
label: "Bilmodell"
}, {
value: "c30",
label: "Volvo C30",
disabled: true
}, {
value: "c70",
label: "Volvo C70"
}, {
value: "c90",
label: "Volvo C90"
}, {
value: "c40",
label: "Volvo S40"
}, {
value: "s60",
label: "Volvo S60"
}, {
value: "s80",
label: "Volvo S80"
}, {
value: "s90",
label: "Volvo S90"
}],
value1: "bilmodell",
value2: "bilmodell"
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this4)), "handleChange1", function (value) {
_this4.setState({
value1: value
});
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this4)), "handleChange2", function (value) {
_this4.setState({
value2: value
});
});
_this4.select1 = React.createRef();
_this4.select2 = React.createRef();
return _this4;
}
_createClass(Example, [{
key: "componentDidMount",
value: function componentDidMount() {
// used to open the top select input and test that the options cover the other input.
if (this.select1.current) {
var svg = this.select1.current.querySelector("svg"); // parentElement is not present in svg on IE11
if (svg.parentElement) {
svg.parentElement.click();
} else {
svg.parentNode.click();
}
}
}
}, {
key: "render",
value: function render() {
return React.createElement("div", null, React.createElement("div", {
ref: this.select1,
style: {
marginBottom: "120px"
}
}, React.createElement(SelectInput, {
ref: this.select1,
value: this.state.value1,
options: this.state.options,
onChange: this.handleChange1
})), React.createElement("div", {
ref: this.select2
}, React.createElement(SelectInput, {
ref: this.select2,
value: this.state.value2,
options: this.state.options,
onChange: this.handleChange2
})));
}
}]);
return Example;
}(React.Component);
return React.createElement(Example, null);
});

3

es/components/select-input/test.js

@@ -41,2 +41,5 @@ import React from "react";

var theme = {
colors: {
primary: "pink"
},
selectInput: {

@@ -43,0 +46,0 @@ border: "1px solid #000"

52

es/components/slider/index.js

@@ -32,2 +32,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

var KEY_DOWN = 40;
var THUMB_WIDTH = 40;
var THUMB_HEIGHT = 40;

@@ -37,3 +39,4 @@ var thumbStyle = function thumbStyle(_ref) {

isDragging = _ref.isDragging,
theme = _ref.theme;
theme = _ref.theme,
disabled = _ref.disabled;
return {

@@ -43,12 +46,14 @@ position: "absolute",

left: left,
width: 40,
height: 40,
borderWidth: 1,
borderStyle: "solid",
borderColor: theme.colors.grey5,
background: theme.colors.white,
cursor: "ew-resize",
width: THUMB_WIDTH,
height: THUMB_HEIGHT,
border: "1px solid " + theme.colors.inputBorder,
background: theme.colors.inputBackground,
cursor: disabled ? "not-allowed" : "ew-resize",
display: "flex",
alignItems: "center",
justifyContent: "center",
outline: 0,
":focus": {
borderColor: theme.colors.inputBorderFocus
},
extend: {

@@ -188,4 +193,3 @@ condition: !isDragging,

var thumbWidth = _this.getElementWidth(_this.thumbRef.current);
var thumbWidth = THUMB_WIDTH;
var newPositionLeft = position - trackLeft - thumbWidth / 2;

@@ -220,5 +224,3 @@ var isMax = newPositionLeft >= trackWidth - thumbWidth;

var thumbWidth = _this.getElementWidth(_this.thumbRef.current);
var leftPos = currentStep * (trackWidth - thumbWidth) / (steps - 1);
var leftPos = currentStep * (trackWidth - THUMB_WIDTH) / (steps - 1);
return currentLeft ? currentLeft : Math.round(leftPos);

@@ -366,3 +368,4 @@ });

maxValue = _this$props4.maxValue,
theme = _this$props4.theme;
theme = _this$props4.theme,
disabled = _this$props4.disabled;
var value = this.getCurrentValue();

@@ -373,3 +376,4 @@ var left = this.getLeftPositionFromCurrentStep();

left: left,
theme: theme
theme: theme,
disabled: disabled
};

@@ -384,2 +388,3 @@ return React.createElement(Click, {

"aria-orientation": "horizontal",
disabled: disabled,
onMouseDown: function onMouseDown() {

@@ -413,6 +418,6 @@ return _this3.handleDragStart();

}, React.createElement(Arrow, {
color: theme.colors.primary,
color: theme.colors[disabled ? "inputDisabledControl" : "inputControl"],
direction: "left"
}), React.createElement(Arrow, {
color: theme.colors.primary,
color: theme.colors[disabled ? "inputDisabledControl" : "inputControl"],
direction: "right"

@@ -443,11 +448,16 @@ }));

borderStyle: "solid",
borderColor: theme.colors.grey5,
background: theme.colors.white
borderColor: theme.colors.inputBorder,
background: theme.colors.inputBackground,
cursor: this.props.disabled ? "not-allwoed" : "pointer"
}, getThemeStyle("sliderTrack", theme)],
innerRef: this.trackRef,
onMouseDown: function onMouseDown(e) {
return _this4.handleMouseDown(e);
if (!_this4.props.disabled) {
_this4.handleMouseDown(e);
}
},
onMouseUp: function onMouseUp() {
return _this4.handleMouseUp();
if (!_this4.props.disabled) {
_this4.handleMouseUp();
}
}

@@ -454,0 +464,0 @@ }), typeof this.state.currentStep !== "undefined" && this.renderThumb());

16

es/components/slider/stories.js

@@ -6,3 +6,3 @@ import React from "react";

import { Slider } from "./";
storiesOf("Slider", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("5 Steps", function () {
storiesOf("Forms/Slider", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("5 Steps", function () {
return React.createElement(Slider, {

@@ -13,3 +13,3 @@ onChange: function onChange(value) {

},
initialValue: 3,
initialValue: 1,
step: 1,

@@ -28,2 +28,14 @@ minValue: 1,

});
}).addWithJSX("Disabled", function () {
return React.createElement(Slider, {
disabled: true,
onChange: function onChange(value) {
// eslint-disable-next-line no-console
console.log(value);
},
initialValue: 3,
step: 1,
minValue: 1,
maxValue: 5
});
});

2

es/components/spinner/stories.js

@@ -7,3 +7,3 @@ import React from "react";

import { Block } from "../block";
storiesOf("Spinner", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Basic", function () {
storiesOf("Feedback Indicators/Spinner", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Basic", function () {
return React.createElement(Spinner, null);

@@ -10,0 +10,0 @@ }).addWithJSX("Multiple", function () {

9

es/components/spinner/test.js

@@ -5,10 +5,9 @@ import React from "react";

describe("<Spinner /> snapshot tests", function () {
var defaultProps = {
size: 14,
color: "green"
};
it("should render <Spinner /> component correctly", function () {
var snapshot = createSnapshot(React.createElement(Spinner, defaultProps));
var snapshot = createSnapshot(React.createElement(Spinner, {
size: 14,
color: "green"
}));
expect(snapshot).toMatchSnapshot();
});
});

9

es/components/tab-nav-item/index.js

@@ -22,6 +22,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

hasLineTransition = _ref.hasLineTransition,
_ref$theme$colors = _ref.theme.colors,
_ref$theme = _ref.theme,
_ref$theme$colors = _ref$theme.colors,
grey1 = _ref$theme$colors.grey1,
primary = _ref$theme$colors.primary,
white = _ref$theme$colors.white;
white = _ref$theme$colors.white,
fontTypes = _ref$theme.fontTypes;
return {

@@ -34,3 +36,4 @@ display: "inline-flex",

textAlign: "left",
fontFamily: "Volvo Novum Light, sans-serif",
fontFamily: fontTypes.NOVUM,
fontWeight: 200,
letterSpacing: 0.3,

@@ -37,0 +40,0 @@ marginRight: 20,

35

es/components/tab-nav-item/stories.js

@@ -1,10 +0,4 @@

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React from "react";
import { storiesOf } from "@storybook/react";
import { object, withKnobs } from "@storybook/addon-knobs";
import { ThemeProvider } from "../../theme-provider";
import { BREAKPOINTS } from "../../constants/breakpoints";
import { withKnobs } from "@storybook/addon-knobs";
import { withStyleAndTheme } from "../../../stories/decorators";

@@ -14,4 +8,3 @@ import { TabNavItem } from "./";

import { Block } from "../block";
import volvoTheme from "../../themes/volvo";
storiesOf("TabNavItem", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("basic", function () {
storiesOf("Navigation/TabNavItem", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("basic", function () {
return React.createElement(TabNavItem, null, "Build & Price");

@@ -45,25 +38,3 @@ }).addWithJSX("isActive", function () {

}
}, React.createElement(TabNavItem, null, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, {
dropdown: true
}, "Hybrid")));
}).addWithJSX("with theme", function () {
var defaultValue = _objectSpread({}, volvoTheme, {
styles: {
tabNavItem: _defineProperty({
color: "#fefefe",
backgroundColor: "pink",
padding: "10px"
}, BREAKPOINTS.fromM, {
padding: "20px"
})
}
});
var defaultThemeConfig = object("Custom theme", defaultValue);
return React.createElement(ThemeProvider, {
theme: defaultThemeConfig
}, React.createElement(TabNavItem, {
dropdown: true,
isActive: true
}, "Help"));
}, React.createElement(TabNavItem, null, "Crossover/Wagon"), React.createElement(TabNavItem, null, "Sedan"), React.createElement(TabNavItem, null, "Hybrid")));
});

2

es/components/tab-nav/stories.js

@@ -22,3 +22,3 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

import volvoTheme from "../../themes/volvo";
storiesOf("TabNav", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("default (textAlign: center)", function () {
storiesOf("Navigation/TabNav", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("default (textAlign: center)", function () {
return React.createElement(Block, null, React.createElement(TabNav, null, React.createElement(TabNavItem, {

@@ -25,0 +25,0 @@ isActive: true

4

es/components/tab-nav/styles.js

@@ -46,2 +46,3 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

white = _ref2$theme$colors.white,
fontTypes = _ref2$theme.fontTypes,
reverseOut = _ref2.reverseOut,

@@ -53,3 +54,4 @@ _ref2$showBackButtonO = _ref2.showBackButtonOn,

padding: "17px 20px",
fontFamily: "Volvo Novum Light, sans-serif",
fontFamily: fontTypes.NOVUM,
fontWeight: 200,
whiteSpace: "nowrap",

@@ -56,0 +58,0 @@ flexShrink: "0",

18

es/components/text-input/index.js

@@ -24,7 +24,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

return {
fontFamily: "Volvo Novum Regular, sans-serif",
fontFamily: theme.fontTypes.NOVUM,
fontWeight: 400,
borderWidth: 1,
borderStyle: "solid",
borderColor: theme.colors.grey7,
color: theme.colors.grey1,
boxSizing: "border-box",

@@ -39,4 +38,15 @@ display: "block",

outline: 0,
borderColor: theme.colors.inputBorder,
color: theme.colors.inputText,
background: theme.colors.inputBackground,
":focus": {
borderColor: theme.colors.primaryLight
borderColor: theme.colors.inputBorderFocus
},
"::placeholder": {
color: theme.colors.inputPlaceholder
},
"[disabled]": {
cursor: "not-allowed",
color: theme.colors.inputDisabledText,
borderColor: theme.colors.inputBorderDisabled
}

@@ -43,0 +53,0 @@ };

19

es/components/text-input/stories.js

@@ -19,3 +19,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

};
storiesOf("TextInput", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
storiesOf("Forms/TextInput", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
function TextInputWithValue() {

@@ -36,2 +36,19 @@ var _useState = useState(""),

return React.createElement(TextInputWithValue, null);
}).addWithJSX("Disabled", function () {
function TextInputWithValue() {
var _useState3 = useState("This is some input"),
_useState4 = _slicedToArray(_useState3, 2),
value = _useState4[0],
setValue = _useState4[1];
return React.createElement(TextInput, _extends({
disabled: true,
value: value,
onChange: function onChange(e) {
return setValue(e.target.value);
}
}, textInputProps));
}
return React.createElement(TextInputWithValue, null);
});

22

es/components/text-input/test.js

@@ -9,3 +9,2 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

import { TextInput, TEXT_INPUT_TYPES } from ".";
import { BREAKPOINTS } from "../../constants/breakpoints";
import volvoTheme from "../../themes/volvo";

@@ -15,3 +14,4 @@ import createSnapshot from "../../test/create-snapshot";

var textInputProps = {
onChange: function onChange() {}
onChange: function onChange() {},
value: ""
};

@@ -40,20 +40,2 @@ it("renders <TextInput /> component correctly with default props", function () {

});
it("renders <TextInput /> component correctly with theme and media queries", function () {
var _textInput;
var theme = _objectSpread({}, volvoTheme, {
styles: {
textInput: (_textInput = {}, _defineProperty(_textInput, BREAKPOINTS.onS, {
background: "blue"
}), _defineProperty(_textInput, BREAKPOINTS.onM, {
background: "orange"
}), _defineProperty(_textInput, BREAKPOINTS.onL, {
background: "magenta"
}), _textInput)
}
});
var snapshot = createSnapshot(React.createElement(TextInput, textInputProps), theme);
expect(snapshot).toMatchSnapshot();
});
it("verifies the correct and supported input text types", function () {

@@ -60,0 +42,0 @@ expect(TEXT_INPUT_TYPES.PASSWORD).toEqual("password");

71

es/components/toggle/index.js

@@ -0,2 +1,9 @@

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
import React from "react";
import { bool, func } from "prop-types";
import { useFela } from "react-fela";

@@ -14,16 +21,21 @@ import { Inline } from "../inline";

};
var inputStyle = {
appearance: "none",
display: "none"
var inputStyle = function inputStyle(_ref) {
var theme = _ref.theme;
return {
appearance: "none",
":focus + span": {
borderColor: theme.colors.inputBorderFocus
}
};
};
var backgroundStyle = function backgroundStyle(_ref) {
var checked = _ref.checked,
theme = _ref.theme;
var backgroundStyle = function backgroundStyle(_ref2) {
var checked = _ref2.checked,
theme = _ref2.theme,
disabled = _ref2.disabled;
return {
cursor: "pointer",
position: "absolute",
borderWidth: 1,
borderStyle: "solid",
borderColor: theme.colors.grey7,
borderRadius: 45,

@@ -34,2 +46,9 @@ top: 0,

bottom: 0,
outline: 0,
borderColor: theme.colors.inputBorder,
background: theme.colors.inputBackground,
cursor: disabled ? "not-allowed" : "pointer",
":focus": {
borderColor: theme.colors.inputBorderFocus
},
"::after": {

@@ -42,3 +61,3 @@ content: "''",

height: 17,
background: theme.colors.primary,
background: disabled ? theme.colors.inputDisabledControl : theme.colors.inputControl,
borderRadius: "50%",

@@ -51,6 +70,7 @@ transition: "transform 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)",

export function Toggle(_ref2) {
var id = _ref2.id,
checked = _ref2.checked,
onToggle = _ref2.onToggle;
export function Toggle(_ref3) {
var checked = _ref3.checked,
disabled = _ref3.disabled,
onChange = _ref3.onChange,
props = _objectWithoutProperties(_ref3, ["checked", "disabled", "onChange"]);

@@ -62,18 +82,23 @@ var _useFela = useFela(),

as: "label",
extend: rootStyle,
"data-cypress-id": id
}, React.createElement(Inline, {
extend: rootStyle
}, React.createElement(Inline, _extends({
as: "input",
type: "checkbox",
extend: inputStyle,
id: id,
name: id,
extend: inputStyle({
theme: theme
}),
checked: checked,
onChange: onToggle
}), React.createElement(Inline, {
onChange: onChange,
disabled: disabled
}, props)), React.createElement(Inline, {
extend: backgroundStyle({
checked: checked,
theme: theme
theme: theme,
disabled: disabled
})
}));
}
}
Toggle.propTypes = {
onChange: func.isRequired,
checked: bool.isRequired
};

51

es/components/toggle/stories.js

@@ -26,3 +26,3 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

import { Toggle } from "./";
storiesOf("Toggle", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
storiesOf("Forms/Toggle", module).addDecorator(withKnobs).addDecorator(withStyleAndTheme).addWithJSX("Default", function () {
var TogglingToggle =

@@ -60,3 +60,3 @@ /*#__PURE__*/

checked: this.state.checked,
onToggle: function onToggle() {
onChange: function onChange() {
return _this2.setState({

@@ -74,2 +74,49 @@ checked: !_this2.state.checked

return React.createElement(TogglingToggle, null);
}).addWithJSX("Disabled", function () {
var TogglingToggle =
/*#__PURE__*/
function (_Component2) {
_inherits(TogglingToggle, _Component2);
function TogglingToggle() {
var _getPrototypeOf3;
var _this3;
_classCallCheck(this, TogglingToggle);
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
_this3 = _possibleConstructorReturn(this, (_getPrototypeOf3 = _getPrototypeOf(TogglingToggle)).call.apply(_getPrototypeOf3, [this].concat(args)));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "state", {
checked: false
});
return _this3;
}
_createClass(TogglingToggle, [{
key: "render",
value: function render() {
var _this4 = this;
return React.createElement(Toggle, {
disabled: true,
checked: this.state.checked,
onChange: function onChange() {
return _this4.setState({
checked: !_this4.state.checked
});
}
});
}
}]);
return TogglingToggle;
}(Component);
return React.createElement(TogglingToggle, null);
});

13

es/components/toggle/test.js

@@ -9,5 +9,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

import createSnapshot from "../../test/create-snapshot";
var onChange = function onChange() {};
describe("<Toggle /> snapshot tests", function () {
it("default props", function () {
var snapshot = createSnapshot(React.createElement(Toggle, null));
var snapshot = createSnapshot(React.createElement(Toggle, {
onChange: onChange
}));
expect(snapshot).toMatchSnapshot();

@@ -17,2 +22,3 @@ });

var snapshot = createSnapshot(React.createElement(Toggle, {
onChange: onChange,
checked: true

@@ -23,3 +29,5 @@ }));

it("RTL default props", function () {
var snapshot = createSnapshot(React.createElement(Toggle, null), _objectSpread({}, volvoTheme, {
var snapshot = createSnapshot(React.createElement(Toggle, {
onChange: onChange
}), _objectSpread({}, volvoTheme, {
direction: "rtl"

@@ -31,2 +39,3 @@ }));

var snapshot = createSnapshot(React.createElement(Toggle, {
onChange: onChange,
checked: true

@@ -33,0 +42,0 @@ }), _objectSpread({}, volvoTheme, {

9

es/index.js

@@ -1,2 +0,1 @@

import "core-js/es6/array";
export { Block } from "./components/block";

@@ -19,2 +18,3 @@ export { Inline } from "./components/inline";

export { Checkbox } from "./components/checkbox";
export { Radio } from "./components/radio";
export { SelectInput } from "./components/select-input";

@@ -25,7 +25,2 @@ export { StyleProvider } from "./style-provider";

export { getStyles } from "./get-styles";
export { ConfigContext } from "./config-context";
export { COLORS } from "./constants/colors";
export { BREAKPOINTS } from "./constants/breakpoints";
export { FONTS } from "./constants/fonts";
export { ICONS } from "./constants/icons";
export { loadFonts, loadThemeFonts } from "./load-fonts";
export { loadThemeFonts } from "./load-fonts";

34

es/load-fonts.js

@@ -1,20 +0,1 @@

import { FONTS } from "./constants/fonts";
var prefixWithPath = function prefixWithPath(fonts, path) {
return fonts.map(function (font) {
return path + font;
});
};
export var loadFonts = function loadFonts(_ref, renderer) {
var fonts = _ref.fonts,
_ref$pathPrefix = _ref.pathPrefix,
pathPrefix = _ref$pathPrefix === void 0 ? "/" : _ref$pathPrefix,
fontDisplay = _ref.fontDisplay;
fonts.forEach(function (font) {
renderer.renderFont(font, prefixWithPath(FONTS[font], pathPrefix), {
fontDisplay: fontDisplay || "swap"
});
});
};
/**

@@ -34,12 +15,11 @@ *

*/
export var loadThemeFonts = function loadThemeFonts(_ref2) {
var renderer = _ref2.renderer,
fontsConfig = _ref2.fontsConfig;
fontsConfig.forEach(function (_ref3) {
var family = _ref3.family,
files = _ref3.files,
config = _ref3.config;
export var loadThemeFonts = function loadThemeFonts(_ref) {
var renderer = _ref.renderer,
fontsConfig = _ref.fontsConfig;
fontsConfig.forEach(function (_ref2) {
var family = _ref2.family,
files = _ref2.files,
config = _ref2.config;
renderer.renderFont(family, files, config);
});
};

9

es/story-wrapper.js

@@ -9,3 +9,2 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

import { styleRenderer } from "./style-renderer";
import { loadFonts } from "./load-fonts";
import volvoTheme from "./themes/volvo";

@@ -15,7 +14,2 @@ import polestarTheme from "./themes/polestar";

var renderer = styleRenderer();
loadFonts({
fonts: ["Volvo Sans Light", "Volvo Sans Regular", "Volvo Sans Medium", "Volvo Sans Bold", "Volvo Sans Super", "Volvo Novum Light", "Volvo Novum Light Italic", "Volvo Novum Semi Light", "Volvo Novum Semi Light Italic", "Volvo Novum Regular", "Volvo Novum Italic", "Volvo Novum Medium", "Volvo Novum Medium Italic", "Volvo Novum Bold", "Volvo Novum Bold Italic", "Volvo Serif Regular", "Volvo Serif Italic", "Volvo Serif Bold", "Volvo Serif Bold Italic", "Volvo Broad"],
pathPrefix: "/static/",
fontDisplay: "block"
}, renderer);
var themes = {

@@ -29,3 +23,3 @@ volvo: volvoTheme,

var children = _ref.children;
var theme = select("Theme", Object.keys(themes), defaultTheme);
var theme = select("theme", Object.keys(themes), defaultTheme);
var rtl = boolean("rtl", false);

@@ -37,2 +31,3 @@ var dir = rtl ? "rtl" : "ltr";

logoImagesPath: "/static/vcc-ui/images/",
fontsPath: "/static/vcc-ui/fonts/",
direction: dir

@@ -39,0 +34,0 @@ })

56

es/style-renderer.js

@@ -0,1 +1,3 @@

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

@@ -20,2 +22,3 @@

import rtl from "fela-plugin-rtl";
import hexToRgba from "hex-to-rgba";
import { deprecate } from "./deprecate";

@@ -30,4 +33,55 @@ export function styleRenderer() {

return createRenderer(_objectSpread({}, options, {
plugins: _toConsumableArray(webPreset).concat([rtl(isRtl ? "rtl" : "ltr")], _toConsumableArray(options.plugins || [])).filter(Boolean)
plugins: _toConsumableArray(webPreset).concat([themeFontsPlugin, hexToRgbaPlugin, rtl(isRtl ? "rtl" : "ltr")], _toConsumableArray(options.plugins || [])).filter(Boolean)
}));
}
function themeFontsPlugin(style, type, renderer, props) {
var fonts = props.theme && props.theme.fonts || [];
var fontsPath = props.theme && props.theme.fontsPath || "";
var _loop = function _loop(property) {
var value = style[property]; // TODO: maybe we wanna cache already rendered fonts
// but no high prio as Fela does that as well
if (property === "fontFamily") {
var usedFonts = fonts.filter(function (font) {
return font.fontFamily === value;
});
if (usedFonts.length > 0) {
usedFonts.forEach(function (_ref2) {
var fontFamily = _ref2.fontFamily,
src = _ref2.src,
fontProps = _objectWithoutProperties(_ref2, ["fontFamily", "src"]);
return renderer.renderFont(fontFamily, src.map(function (file) {
return fontsPath + file;
}), fontProps);
});
}
} else if (_typeof(value) === "object" && !Array.isArray(value)) {
themeFontsPlugin(value, type, renderer, props);
}
};
for (var property in style) {
_loop(property);
}
return style;
} // TODO: move to fela repo as an official plugin
function hexToRgbaPlugin(style) {
for (var property in style) {
var value = style[property];
if (typeof value === "string" && value.indexOf("#") === 0 && value.length === 9) {
style[property] = hexToRgba(value);
} else if (_typeof(value) === "object" && !Array.isArray(value)) {
hexToRgbaPlugin(value);
}
}
return style;
}

11

es/styleguide/provider.js

@@ -26,11 +26,4 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

import { RendererProvider } from "react-fela";
import { styleRenderer } from "../style-renderer";
import { loadFonts } from "../index";
import { ThemeProvider } from "../theme-provider";
import volvoTheme from "../themes/volvo";
var clientRenderer = styleRenderer();
loadFonts({
fonts: ["Volvo Sans Light", "Volvo Sans Regular", "Volvo Sans Medium", "Volvo Sans Bold", "Volvo Sans Super", "Volvo Novum Light", "Volvo Novum Light Italic", "Volvo Novum Semi Light", "Volvo Novum Semi Light Italic", "Volvo Novum Regular", "Volvo Novum Italic", "Volvo Novum Medium", "Volvo Novum Medium Italic", "Volvo Novum Bold", "Volvo Novum Bold Italic", "Volvo Serif Regular", "Volvo Serif Italic", "Volvo Serif Bold", "Volvo Serif Bold Italic", "Volvo Broad"],
pathPrefix: "/"
}, clientRenderer);

@@ -59,5 +52,3 @@ var theme = _objectSpread({}, volvoTheme, {

return React.createElement(RendererProvider, {
renderer: clientRenderer
}, React.createElement(ThemeProvider, {
return React.createElement(RendererProvider, null, React.createElement(ThemeProvider, {
theme: theme

@@ -64,0 +55,0 @@ }, this.props.children));

3

es/test/create-snapshot.js

@@ -35,3 +35,4 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

var baseTheme = _objectSpread({}, volvoTheme, {
logoImagesPath: "/logo/testpath/"
logoImagesPath: "/logo/testpath/",
fontsPath: "/fonts/testpath/"
});

@@ -38,0 +39,0 @@

3

es/themes/polestar.js

@@ -29,4 +29,3 @@ // NOTE: For now this is just a hard copy of the volvo theme

white: "#FFFFFF",
primary: "#007bcd",
primaryLight: "#008ae6",
primary: "#D3BC8D",
// TODO: eventually deprecate later

@@ -33,0 +32,0 @@ red: "#c42121",

140

es/themes/volvo.js

@@ -38,3 +38,26 @@ import { deprecateObjectProperty } from "../deprecate";

primaryBlue: "#007bcd",
primaryBlueLight: "#008ae6"
primaryBlueLight: "#008ae6",
// Input Styles
get inputBorder() {
return this.grey7;
},
get inputBorderFocus() {
return this.grey5;
},
get inputPlaceholder() {
return this.grey6;
},
get inputControl() {
return this.primaryLight;
},
inputText: "#222",
inputDisabledText: "#ccc",
inputDisabledControl: "#ccc",
inputDisabledBorder: "#f1f1f1",
inputBackground: "#fff"
};

@@ -94,23 +117,94 @@ deprecateObjectProperty(colors, "blue", 'Named colors like "blue" are deprecated. Use "primary" instead.');

var icons = ["account", "email", "search", "globe", "facebook", "twitter", "youtube", "linkedin", "instagram", "pinterest", "youku", "vkontakte", "wechat", "weibo"];
var fonts = {
"Volvo Sans Light": ["vcc-ui/fonts/volvo-sans/light/volvo-sans-light.woff", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.eot", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.svg", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.ttf"],
"Volvo Sans Medium": ["vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.woff", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.eot", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.svg", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.ttf"],
"Volvo Sans Regular": ["vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.woff", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.eot", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.svg", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.ttf"],
"Volvo Sans Bold": ["vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.woff", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.eot", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.svg", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.ttf"],
"Volvo Sans Super": ["vcc-ui/fonts/volvo-sans/super/volvo-sans-super.woff", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.eot", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.svg", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.ttf"],
"Volvo Broad": ["vcc-ui/fonts/volvo-broad/volvo-broad.woff", "vcc-ui/fonts/volvo-broad/volvo-broad.eot", "vcc-ui/fonts/volvo-broad/volvo-broad.svg", "vcc-ui/fonts/volvo-broad/volvo-broad.ttf"],
"Volvo Novum Light": ["vcc-ui/fonts/volvo-novum/volvo-novum-light.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-light.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-light.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-light.svg"],
"Volvo Novum Light Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.svg"],
"Volvo Novum Semi Light": ["vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.svg"],
"Volvo Novum Semi Light Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.svg"],
"Volvo Novum Regular": ["vcc-ui/fonts/volvo-novum/volvo-novum-regular.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.svg"],
"Volvo Novum Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.svg"],
"Volvo Novum Medium": ["vcc-ui/fonts/volvo-novum/volvo-novum-medium.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.svg"],
"Volvo Novum Medium Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.svg"],
"Volvo Novum Bold": ["vcc-ui/fonts/volvo-novum/volvo-novum-bold.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.svg"],
"Volvo Novum Bold Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.svg"],
"Volvo Serif Regular": ["vcc-ui/fonts/volvo-serif/volvo-serif-regular.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-regular.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-regular.svg"],
"Volvo Serif Italic": ["vcc-ui/fonts/volvo-serif/volvo-serif-italic.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-italic.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-italic.svg"],
"Volvo Serif Bold": ["vcc-ui/fonts/volvo-serif/volvo-serif-bold.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-bold.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-bold.svg"],
"Volvo Serif Bold Italic": ["vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.svg"]
var fonts = [{
fontFamily: "Volvo Sans",
fontWeight: 200,
src: ["volvo-sans/light/volvo-sans-light.woff", "volvo-sans/light/volvo-sans-light.eot", "volvo-sans/light/volvo-sans-light.svg", "volvo-sans/light/volvo-sans-light.ttf"]
}, {
fontFamily: "Volvo Sans",
fontWeight: 400,
src: ["volvo-sans/regular/volvo-sans-regular.woff", "volvo-sans/regular/volvo-sans-regular.eot", "volvo-sans/regular/volvo-sans-regular.svg", "volvo-sans/regular/volvo-sans-regular.ttf"]
}, {
fontFamily: "Volvo Sans",
fontWeight: 500,
src: ["volvo-sans/medium/volvo-sans-medium.woff", "volvo-sans/medium/volvo-sans-medium.eot", "volvo-sans/medium/volvo-sans-medium.svg", "volvo-sans/medium/volvo-sans-medium.ttf"]
}, {
fontFamily: "Volvo Sans",
fontWeight: 700,
src: ["volvo-sans/bold/volvo-sans-bold.woff", "volvo-sans/bold/volvo-sans-bold.eot", "volvo-sans/bold/volvo-sans-bold.svg", "volvo-sans/bold/volvo-sans-bold.ttf"]
}, {
fontFamily: "Volvo Sans",
fontWeight: 900,
src: ["volvo-sans/super/volvo-sans-super.woff", "volvo-sans/super/volvo-sans-super.eot", "volvo-sans/super/volvo-sans-super.svg", "volvo-sans/super/volvo-sans-super.ttf"]
}, {
fontFamily: "Volvo Broad",
src: ["volvo-broad/volvo-broad.woff", "volvo-broad/volvo-broad.eot", "volvo-broad/volvo-broad.svg", "volvo-broad/volvo-broad.ttf"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 200,
src: ["volvo-novum/volvo-novum-light.woff2", "volvo-novum/volvo-novum-light.woff", "volvo-novum/volvo-novum-light.eot", "volvo-novum/volvo-novum-light.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 200,
fontStyle: "italic",
src: ["volvo-novum/volvo-novum-light.woff2", "volvo-novum/volvo-novum-light.woff", "volvo-novum/volvo-novum-light.eot", "volvo-novum/volvo-novum-light.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 300,
src: ["volvo-novum/volvo-novum-semi-light.woff2", "volvo-novum/volvo-novum-semi-light.woff", "volvo-novum/volvo-novum-semi-light.eot", "volvo-novum/volvo-novum-semi-light.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 300,
fontStyle: "italic",
src: ["volvo-novum/volvo-novum-semi-light-italic.woff2", "volvo-novum/volvo-novum-semi-light-italic.woff", "volvo-novum/volvo-novum-semi-light-italic.eot", "volvo-novum/volvo-novum-semi-light-italic.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 400,
src: ["volvo-novum/volvo-novum-regular.woff2", "volvo-novum/volvo-novum-regular.woff", "volvo-novum/volvo-novum-regular.eot", "volvo-novum/volvo-novum-regular.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 400,
fontStyle: "italic",
src: ["volvo-novum/volvo-novum-italic.woff2", "volvo-novum/volvo-novum-italic.woff", "volvo-novum/volvo-novum-italic.eot", "volvo-novum/volvo-novum-italic.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 500,
src: ["volvo-novum/volvo-novum-medium.woff2", "volvo-novum/volvo-novum-medium.woff", "volvo-novum/volvo-novum-medium.eot", "volvo-novum/volvo-novum-medium.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 500,
fontStyle: "italic",
src: ["volvo-novum/volvo-novum-medium-italic.woff2", "volvo-novum/volvo-novum-medium-italic.woff", "volvo-novum/volvo-novum-medium-italic.eot", "volvo-novum/volvo-novum-medium-italic.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 700,
src: ["volvo-novum/volvo-novum-bold.woff2", "volvo-novum/volvo-novum-bold.woff", "volvo-novum/volvo-novum-bold.eot", "volvo-novum/volvo-novum-bold.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 700,
fontStyle: "italic",
src: ["volvo-novum/volvo-novum-bold-italic.woff2", "volvo-novum/volvo-novum-bold-italic.woff", "volvo-novum/volvo-novum-bold-italic.eot", "volvo-novum/volvo-novum-bold-italic.svg"]
}, {
fontFamily: "Volvo Serif",
fontWeight: 400,
src: ["volvo-serif/volvo-serif-regular.woff", "volvo-serif/volvo-serif-regular.eot", "volvo-serif/volvo-serif-regular.svg"]
}, {
fontFamily: "Volvo Serif",
fontWeight: 400,
fontStyle: "italic",
src: ["volvo-serif/volvo-serif-italic.woff", "volvo-serif/volvo-serif-italic.eot", "volvo-serif/volvo-serif-italic.svg"]
}, {
fontFamily: "Volvo Serif",
fontWeight: 700,
src: ["volvo-serif/volvo-serif-bold.woff", "volvo-serif/volvo-serif-bold.eot", "volvo-serif/volvo-serif-bold.svg"]
}, {
fontFamily: "Volvo Serif",
fontWeight: 700,
fontStyle: "italic",
src: ["volvo-serif/volvo-serif-bold-italic.woff", "volvo-serif/volvo-serif-bold-italic.eot", "volvo-serif/volvo-serif-bold-italic.svg"]
}];
var fontTypes = {
SANS: "Volvo Sans",
BROAD: "Volvo Broad",
NOVUM: "Volvo Novum",
SERIF: "Volvo Serif"
};

@@ -137,2 +231,4 @@ var logoImages = {

fonts: fonts,
fontsPath: "/",
fontTypes: fontTypes,
logoImages: logoImages,

@@ -139,0 +235,0 @@ logoImagesPath: "/",

10

lib/components/arrow/stories.js

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

(0, _react2.storiesOf)("Arrow", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
(0, _react2.storiesOf)("Images & Icons/Arrow", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
return _react.default.createElement(_block.Block, null, _react.default.createElement(_.Arrow, {
color: "red",
size: "24",
size: 12,
direction: "right"
}), _react.default.createElement(_.Arrow, {
color: "green",
size: "24",
size: 24,
direction: "left"
}), _react.default.createElement(_.Arrow, {
color: "blue",
size: "24",
size: 48,
direction: "up"
}), _react.default.createElement(_.Arrow, {
color: "black",
size: "24",
size: 96,
direction: "down"
}));
});

25

lib/components/block/stories.js

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
(0, _react2.storiesOf)("Block", module).addDecorator(_react3.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Basic", function () {
(0, _react2.storiesOf)("Core/Block", module).addDecorator(_react3.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
return _react.default.createElement(_.Block, null, "This is a block");
}).addWithJSX("With Extend", function () {
return _react.default.createElement(_.Block, {

@@ -25,21 +25,2 @@ extend: (0, _react3.object)("extend", {

}, "This is a block");
}).addWithJSX("Responsive", function () {
return _react.default.createElement(_.Block, {
extend: function extend(_ref) {
var _ref2;
var theme = _ref.theme;
return _ref2 = {
color: "white",
background: "red",
padding: "10px"
}, _defineProperty(_ref2, theme.breakpoints.fromM, {
background: "green",
padding: "20px"
}), _defineProperty(_ref2, theme.breakpoints.fromL, {
background: "blue",
padding: "30px"
}), _ref2;
}
}, "Hello Responsive Block");
});

11

lib/components/box/stories.js

@@ -17,5 +17,6 @@ "use strict";

border: "1px solid grey",
padding: 20
padding: 20,
margin: 5
};
(0, _react2.storiesOf)("Box", module).addDecorator(_react3.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Basic", function () {
(0, _react2.storiesOf)("Core/Box", module).addDecorator(_react3.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
return _react.default.createElement(_.Box, null, _react.default.createElement(_.Box, {

@@ -26,7 +27,7 @@ extend: boxStyle

}, "World"));
}).addWithJSX("Row direction", function () {
}).addWithJSX("Row", function () {
return _react.default.createElement(_.Box, {
extend: {
extend: (0, _react3.object)("extend", {
flexDirection: "row"
}
})
}, _react.default.createElement(_.Box, {

@@ -33,0 +34,0 @@ extend: boxStyle

6

lib/components/button/index.js

@@ -95,3 +95,4 @@ "use strict";

transitionProperty: "background, fill, stroke, color, border-color",
fontFamily: "Volvo Novum Regular, sans-serif",
fontFamily: theme.fontTypes.NOVUM,
fontWeight: 400,
position: "relative",

@@ -137,2 +138,3 @@ ":focus": {

style: {
border: "1px solid transparent",
fill: color,

@@ -212,3 +214,3 @@ color: color,

margin: "0 auto",
top: 14
top: 10
}

@@ -215,0 +217,0 @@ }, _react.default.createElement(_spinner.Spinner, {

484

lib/components/button/stories.js

@@ -13,445 +13,51 @@ "use strict";

var _block = require("../block");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var ButtonGroup = function ButtonGroup(_ref) {
var children = _ref.children,
props = _objectWithoutProperties(_ref, ["children"]);
return _react.default.createElement(_block.Block, _extends({}, props, {
extend: _objectSpread({
display: "flex",
alignItems: "center"
}, props.extend)
}), children.map(function (child, i) {
return _react.default.createElement(_block.Block, {
key: i,
extend: {
marginRight: "10px"
}
}, child);
}));
var variant = {
label: "Variant",
options: {
default: "default",
outline: "outline",
text: "text"
},
default: "default"
};
var ButtonGroupLabel = function ButtonGroupLabel(_ref2) {
var children = _ref2.children,
props = _objectWithoutProperties(_ref2, ["children"]);
return _react.default.createElement(_block.Block, _extends({}, props, {
extend: _objectSpread({
fontSize: "12px",
width: "100px",
textAlign: "right",
paddingRight: "20px"
}, props.extend)
}), children);
var arrow = {
label: "Arrow",
options: {
none: false,
right: "right",
left: "left",
up: "up",
down: "down"
},
default: false
};
(0, _react2.storiesOf)("Button", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Intent / Variant", function () {
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(ButtonGroup, null, _react.default.createElement(ButtonGroupLabel, null, "Primary:"), _react.default.createElement(_.Button, {
intent: "primary",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
intent: "primary",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
intent: "primary",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
padding: "10px 0",
background: "#000",
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, {
extend: {
color: "#fff"
}
}, "Primary Light:"), _react.default.createElement(_.Button, {
intent: "primary-light",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
intent: "primary-light",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
intent: "primary-light",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, null, "Secondary:"), _react.default.createElement(_.Button, {
intent: "secondary",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
intent: "secondary",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
intent: "secondary",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, null, "Destructive:"), _react.default.createElement(_.Button, {
intent: "destructive",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
intent: "destructive",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
intent: "destructive",
variant: "text"
}, "Text")));
}).addWithJSX("Loading", function () {
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(ButtonGroup, null, _react.default.createElement(ButtonGroupLabel, null, "Primary:"), _react.default.createElement(_.Button, {
loading: true,
intent: "primary",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
loading: true,
intent: "primary",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
loading: true,
intent: "primary",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
padding: "10px 0",
background: "#000",
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, {
extend: {
color: "#fff"
}
}, "Primary Light:"), _react.default.createElement(_.Button, {
loading: true,
intent: "primary-light",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
loading: true,
intent: "primary-light",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
loading: true,
intent: "primary-light",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, null, "Secondary:"), _react.default.createElement(_.Button, {
loading: true,
intent: "secondary",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
loading: true,
intent: "secondary",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
loading: true,
intent: "secondary",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, null, "Destructive:"), _react.default.createElement(_.Button, {
loading: true,
intent: "destructive",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
loading: true,
intent: "destructive",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
loading: true,
intent: "destructive",
variant: "text"
}, "Text")));
}).addWithJSX("Disabled", function () {
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(ButtonGroup, null, _react.default.createElement(ButtonGroupLabel, null, "Primary:"), _react.default.createElement(_.Button, {
disabled: true,
intent: "primary",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
disabled: true,
intent: "primary",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
disabled: true,
intent: "primary",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
padding: "10px 0",
background: "#000",
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, {
extend: {
color: "#fff"
}
}, "Primary Light:"), _react.default.createElement(_.Button, {
disabled: true,
intent: "primary-light",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
disabled: true,
intent: "primary-light",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
disabled: true,
intent: "primary-light",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, null, "Secondary:"), _react.default.createElement(_.Button, {
disabled: true,
intent: "secondary",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
disabled: true,
intent: "secondary",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
disabled: true,
intent: "secondary",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, null, "Destructive:"), _react.default.createElement(_.Button, {
disabled: true,
intent: "destructive",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
disabled: true,
intent: "destructive",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
disabled: true,
intent: "destructive",
variant: "text"
}, "Text")));
}).addWithJSX("With Arrow", function () {
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(ButtonGroup, null, _react.default.createElement(ButtonGroupLabel, null, "Primary:"), _react.default.createElement(_.Button, {
arrow: "right",
intent: "primary",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
arrow: "right",
intent: "primary",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
arrow: "right",
intent: "primary",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
padding: "10px 0",
background: "#000",
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, {
extend: {
color: "#fff"
}
}, "Primary Light:"), _react.default.createElement(_.Button, {
arrow: "up",
intent: "primary-light",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
arrow: "up",
intent: "primary-light",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
arrow: "up",
intent: "primary-light",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, null, "Secondary:"), _react.default.createElement(_.Button, {
arrow: "left",
intent: "secondary",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
arrow: "left",
intent: "secondary",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
arrow: "left",
intent: "secondary",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, null, "Destructive:"), _react.default.createElement(_.Button, {
arrow: "down",
intent: "destructive",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
arrow: "down",
intent: "destructive",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
arrow: "down",
intent: "destructive",
variant: "text"
}, "Text")));
}).addWithJSX("With Icon (after)", function () {
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(ButtonGroup, null, _react.default.createElement(ButtonGroupLabel, null, "Primary:"), _react.default.createElement(_.Button, {
iconAfter: "search",
intent: "primary",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
iconAfter: "search",
intent: "primary",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
iconAfter: "search",
intent: "primary",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
padding: "10px 0",
background: "#000",
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, {
extend: {
color: "#fff"
}
}, "Primary Light:"), _react.default.createElement(_.Button, {
iconAfter: "search",
intent: "primary-light",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
iconAfter: "search",
intent: "primary-light",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
iconAfter: "search",
intent: "primary-light",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, null, "Secondary:"), _react.default.createElement(_.Button, {
iconAfter: "search",
intent: "secondary",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
iconAfter: "search",
intent: "secondary",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
iconAfter: "search",
intent: "secondary",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, null, "Destructive:"), _react.default.createElement(_.Button, {
iconAfter: "search",
intent: "destructive",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
iconAfter: "search",
intent: "destructive",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
iconAfter: "search",
intent: "destructive",
variant: "text"
}, "Text")));
}).addWithJSX("With Icon (before)", function () {
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(ButtonGroup, null, _react.default.createElement(ButtonGroupLabel, null, "Primary:"), _react.default.createElement(_.Button, {
iconBefore: "search",
intent: "primary",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
iconBefore: "search",
intent: "primary",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
iconBefore: "search",
intent: "primary",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
padding: "10px 0",
background: "#000",
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, {
extend: {
color: "#fff"
}
}, "Primary Light:"), _react.default.createElement(_.Button, {
iconBefore: "search",
intent: "primary-light",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
iconBefore: "search",
intent: "primary-light",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
iconBefore: "search",
intent: "primary-light",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, null, "Secondary:"), _react.default.createElement(_.Button, {
iconBefore: "search",
intent: "secondary",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
iconBefore: "search",
intent: "secondary",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
iconBefore: "search",
intent: "secondary",
variant: "text"
}, "Text")), _react.default.createElement(ButtonGroup, {
extend: {
marginTop: "10px"
}
}, _react.default.createElement(ButtonGroupLabel, null, "Destructive:"), _react.default.createElement(_.Button, {
iconBefore: "search",
intent: "destructive",
variant: "default"
}, "Default"), _react.default.createElement(_.Button, {
iconBefore: "search",
intent: "destructive",
variant: "outline"
}, "Outline"), _react.default.createElement(_.Button, {
iconBefore: "search",
intent: "destructive",
variant: "text"
}, "Text")));
(0, _react2.storiesOf)("Actions/Button", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Primary", function () {
return _react.default.createElement(_.Button, {
variant: (0, _addonKnobs.select)(variant.label, variant.options, variant.default),
arrow: (0, _addonKnobs.select)(arrow.label, arrow.options, arrow.default),
intent: "primary"
}, "Hello World");
});
(0, _react2.storiesOf)("Actions/Button", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withDarkBackground).addDecorator(_decorators.withStyleAndTheme).addWithJSX("On Dark", function () {
return _react.default.createElement(_.Button, {
variant: (0, _addonKnobs.select)(variant.label, variant.options, variant.default),
arrow: (0, _addonKnobs.select)(arrow.label, arrow.options, arrow.default),
intent: "primary-light"
}, "Hello World");
});
(0, _react2.storiesOf)("Actions/Button", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Secondary", function () {
return _react.default.createElement(_.Button, {
variant: (0, _addonKnobs.select)(variant.label, variant.options, variant.default),
arrow: (0, _addonKnobs.select)(arrow.label, arrow.options, arrow.default),
intent: "secondary"
}, "Hello World");
});
(0, _react2.storiesOf)("Actions/Button", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Destructive", function () {
return _react.default.createElement(_.Button, {
variant: (0, _addonKnobs.select)(variant.label, variant.options, variant.default),
arrow: (0, _addonKnobs.select)(arrow.label, arrow.options, arrow.default),
intent: "destructive"
}, "Destroy Planet");
});

22

lib/components/button/test.js

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

var _breakpoints = require("../../constants/breakpoints");
var _createSnapshot = _interopRequireDefault(require("../../test/create-snapshot"));

@@ -38,22 +36,2 @@

});
it("renders <Button /> correctly with theme and media queries", function () {
var _button;
var theme = _objectSpread({}, _volvo.default, {
styles: {
button: {
button: (_button = {}, _defineProperty(_button, _breakpoints.BREAKPOINTS.onS, {
background: "blue"
}), _defineProperty(_button, _breakpoints.BREAKPOINTS.onM, {
background: "orange"
}), _defineProperty(_button, _breakpoints.BREAKPOINTS.onL, {
background: "magenta"
}), _button)
}
}
});
var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Button, null, helloLabel), theme);
expect(snapshot).toMatchSnapshot();
});
});

31

lib/components/checkbox/index.js

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

var _propTypes = require("prop-types");
var _reactFela = require("react-fela");

@@ -25,6 +27,4 @@

boxSizing: "border-box",
background: "white",
borderWidth: 1,
borderStyle: "solid",
borderColor: theme.colors.grey7,
appearance: "none",

@@ -40,2 +40,18 @@ width: 20,

cursor: "pointer",
outline: 0,
borderColor: theme.colors.inputBorder,
background: theme.colors.inputBackground,
":focus": {
borderColor: theme.colors.inputBorderFocus
},
"[disabled]": {
cursor: "not-allowed",
borderColor: theme.colors.inputDisabledBorder,
":checked": {
":before": {
borderRight: "2px solid ".concat(theme.colors.inputDisabledControl),
borderBottom: "2px solid ".concat(theme.colors.inputDisabledControl)
}
}
},
":checked": {

@@ -50,4 +66,4 @@ ":before": {

position: "absolute",
borderRight: "2px solid ".concat(theme.colors.primary),
borderBottom: "2px solid ".concat(theme.colors.primary)
borderRight: "2px solid ".concat(theme.colors.inputControl),
borderBottom: "2px solid ".concat(theme.colors.inputControl)
}

@@ -67,2 +83,7 @@ }

}));
}
}
Checkbox.propTypes = {
onChange: _propTypes.func.isRequired,
checked: _propTypes.bool.isRequired
};

73

lib/components/checkbox/stories.js

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

var _box = require("../box");
var _inline = require("../inline");
var _ = require(".");

@@ -24,15 +28,70 @@

(0, _react2.storiesOf)("Checkbox", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
(0, _react2.storiesOf)("Forms/Checkbox", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
function CheckboxWithValue() {
var _useState = (0, _react.useState)(true),
_useState2 = _slicedToArray(_useState, 2),
checked = _useState2[0],
setChecked = _useState2[1];
apple = _useState2[0],
toggleApple = _useState2[1];
return _react.default.createElement(_.Checkbox, {
checked: checked,
var _useState3 = (0, _react.useState)(false),
_useState4 = _slicedToArray(_useState3, 2),
banana = _useState4[0],
toggleBanana = _useState4[1];
var _useState5 = (0, _react.useState)(true),
_useState6 = _slicedToArray(_useState5, 2),
cherrie = _useState6[0],
toggleCherrie = _useState6[1];
return _react.default.createElement(_box.Box, {
extend: {
flexDirection: "row"
}
}, _react.default.createElement(_box.Box, {
as: "label",
extend: {
flexDirection: "row",
marginRight: "10px"
}
}, _react.default.createElement(_.Checkbox, {
checked: apple,
onChange: function onChange() {
return setChecked(!checked);
return toggleApple(!apple);
}
});
}), _react.default.createElement(_inline.Inline, {
extend: {
marginLeft: "5px"
}
}, "Apple")), _react.default.createElement(_box.Box, {
as: "label",
extend: {
flexDirection: "row",
marginRight: "10px"
}
}, _react.default.createElement(_.Checkbox, {
checked: banana,
onChange: function onChange() {
return toggleBanana(!banana);
}
}), _react.default.createElement(_inline.Inline, {
extend: {
marginLeft: "5px"
}
}, "Banana")), _react.default.createElement(_box.Box, {
as: "label",
extend: {
flexDirection: "row",
marginRight: "10px"
}
}, _react.default.createElement(_.Checkbox, {
disabled: true,
checked: cherrie,
onChange: function onChange() {
return toggleCherrie(!cherrie);
}
}), _react.default.createElement(_inline.Inline, {
extend: {
marginLeft: "5px"
}
}, "Cherrie")));
}

@@ -39,0 +98,0 @@

15

lib/components/checkbox/test.js

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

var onChange = function onChange() {};
describe("<Checkbox /> snapshot tests", function () {
it("renders <Checkbox /> correctly with default props", function () {
var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Checkbox, null));
expect(snapshot).toMatchSnapshot();
});
it("renders <Checkbox /> correctly with checked prop", function () {
var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Checkbox, {
checked: true
onChange: onChange
}));
expect(snapshot).toMatchSnapshot();
});
it("renders <Checkbox /> without overriding styles", function () {
it("renders <Checkbox /> correctly with checked prop", function () {
var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Checkbox, {
extend: {
display: "none"
}
checked: true,
onChange: onChange
}));

@@ -29,0 +26,0 @@ expect(snapshot).toMatchSnapshot();

11

lib/components/click/index.js

@@ -54,3 +54,6 @@ "use strict";

extend: [{
boxSizing: "border-box"
boxSizing: "border-box",
color: "#000",
fontSize: "12px",
fontFamily: "sans-serif"
}, as === "button" ? buttonResetStyle : linkResetStyle, extend]

@@ -61,2 +64,8 @@ }), children);

Click.propTypes = {
/** Any valid React element, function, or a string specifying a name for an HTML element */
as: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element, _propTypes.default.func]),
/** An object containing valid CSS style declarations */
extend: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func, _propTypes.default.array]),
/** A JSX node */

@@ -63,0 +72,0 @@ children: _propTypes.default.node,

19

lib/components/click/stories.js

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

(0, _react2.storiesOf)("Click", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("unstyled", function () {
(0, _react2.storiesOf)("Core/Click", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
return _react.default.createElement(_.Click, {

@@ -22,2 +22,19 @@ onClick: function onClick() {

}, "This is a clickable unstyled button");
}).addWithJSX("With Extend", function () {
return _react.default.createElement(_.Click, {
extend: {
display: "inline-block",
padding: "16px 24px",
color: "hotpink",
background: "#f1f1f1",
fontSize: 14,
transition: "all 0.2s ease-in-out 0s",
":hover": {
transform: "rotate(2deg) scale(1.1)",
background: "lightblue",
color: "#fff"
}
},
href: "https://www.volvocars.com/"
}, "Custom Style Button");
});

9

lib/components/icon/index.js

@@ -268,3 +268,4 @@ "use strict";

var IconType = function IconType(_ref17) {
var type = _ref17.type,
var _ref17$type = _ref17.type,
type = _ref17$type === void 0 ? "s" : _ref17$type,
props = _objectWithoutProperties(_ref17, ["type"]);

@@ -330,6 +331,2 @@

};
var defaultProps = {
size: "s"
};
Icon.propTypes = propTypes;
Icon.defaultProps = defaultProps;
Icon.propTypes = propTypes;

24

lib/components/icon/stories.js

@@ -9,8 +9,4 @@ "use strict";

var _icons = require("../../constants/icons");
var _decorators = require("../../../stories/decorators");
var _block = require("../block");
var _ = require("./");

@@ -20,24 +16,6 @@

(0, _react2.storiesOf)("Icon", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("basic", function () {
(0, _react2.storiesOf)("Images & Icons/Icon", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("basic", function () {
return _react.default.createElement(_.Icon, {
type: "facebook"
});
}).addWithJSX("list of icons", function () {
return _react.default.createElement(_block.Block, {
extend: {
display: "flex"
}
}, _icons.ICONS.map(function (icon) {
return _react.default.createElement(_block.Block, {
key: icon,
extend: {
padding: "20px",
textAlign: "center"
}
}, _react.default.createElement(_.Icon, {
color: "navy",
size: "l",
type: icon
}), _react.default.createElement(_block.Block, null, icon));
}));
});

12

lib/components/inline/stories.js

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

(0, _react2.storiesOf)("Inline", module).addDecorator(_react3.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("basic", function () {
return _react.default.createElement(_index.Inline, null, "This is an ", _react.default.createElement(_index.Inline, {
extend: {
color: "red"
}
}, "inline"), " component");
(0, _react2.storiesOf)("Core/Inline", module).addDecorator(_react3.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("With Extend", function () {
return _react.default.createElement(_react.default.Fragment, null, "This is an", " ", _react.default.createElement(_index.Inline, {
extend: (0, _react3.object)("extend", {
color: "hotpink"
})
}, "inline"), " ", "component");
});

3

lib/components/link/index.js

@@ -43,3 +43,4 @@ "use strict";

whiteSpace: "nowrap",
fontFamily: "Volvo Novum Regular, sans-serif",
fontFamily: theme.fontTypes.NOVUM,
fontWeight: 400,
fontSize: 15,

@@ -46,0 +47,0 @@ textDecoration: "none",

20

lib/components/link/stories.js

@@ -15,28 +15,14 @@ "use strict";

(0, _react2.storiesOf)("Link", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("With Text", function () {
(0, _react2.storiesOf)("Actions/Link", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("With Arrow", function () {
return _react.default.createElement(_.Link, {
href: "http://www.volvocars.com/"
}, "This is a link component");
}).addWithJSX("With Arrow (right)", function () {
return _react.default.createElement(_.Link, {
href: "http://www.volvocars.com/",
arrow: "right"
}, "This is a link component");
}).addWithJSX("With arrow (left)", function () {
return _react.default.createElement(_.Link, {
href: "http://www.volvocars.com/",
arrow: "left"
}, "This is a link component");
});
(0, _react2.storiesOf)("Link", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withDarkBackground).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Dark: With Text", function () {
(0, _react2.storiesOf)("Actions/Link", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withDarkBackground).addDecorator(_decorators.withStyleAndTheme).addWithJSX("On Dark With Arrow", function () {
return _react.default.createElement(_.Link, {
href: "http://www.volvocars.com/",
intent: "primary-light"
}, "This is a link component");
}).addWithJSX("Dark: With Arrow (up)", function () {
return _react.default.createElement(_.Link, {
href: "http://www.volvocars.com/",
intent: "primary-light",
arrow: "up"
arrow: "right"
}, "This is a link component");
});

6

lib/components/loading-bar/stories.js

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

var _themeProvider = require("../../theme-provider");
var _volvo = _interopRequireDefault(require("../../themes/volvo"));
var _ = require("./");

@@ -36,3 +32,3 @@

(0, _react2.storiesOf)("LoadingBar", module).addDecorator(_react3.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
(0, _react2.storiesOf)("Feedback Indicators/LoadingBar", module).addDecorator(_react3.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
return _react.default.createElement(Container, null, _react.default.createElement(_.LoadingBar, {

@@ -39,0 +35,0 @@ isLoading: (0, _react3.boolean)("isLoading", true),

5

lib/components/logo/index.js

@@ -63,5 +63,2 @@ "use strict";

altText: _propTypes.default.string
}; // Logo.defaultProps = {
// type: LOGO_TYPES.SQUARE,
// altText: "Volvo logo"
// };
};

2

lib/components/logo/stories.js

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

(0, _react2.storiesOf)("Logo", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withDarkBackground).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
(0, _react2.storiesOf)("Images & Icons/Logo", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withDarkBackground).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
return _react.default.createElement(_reactFela.FelaTheme, null, function (_ref) {

@@ -20,0 +20,0 @@ var logoTypes = _ref.logoTypes;

6

lib/components/nav-item/index.js

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

padding: "18px 0",
height: 20,
minHeight: 20,
alignItems: "center",
textAlign: "left",
boxSizing: "content-box",
fontFamily: "Volvo Novum Light, sans-serif",
fontFamily: theme.fontTypes.NOVUM,
fontWeight: 200,
letterSpacing: 0.3,

@@ -48,0 +50,0 @@ borderBottomWidth: 1,

83

lib/components/nav-item/stories.js

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

var _reactFela = require("react-fela");
var _react2 = require("@storybook/react");

@@ -12,4 +10,2 @@

var _breakpoints = require("../../constants/breakpoints");
var _decorators = require("../../../stories/decorators");

@@ -19,13 +15,5 @@

var _block = require("../block");
var _nav = require("../nav");
var _logo = require("../logo");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
(0, _react2.storiesOf)("NavItem", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
(0, _react2.storiesOf)("Navigation/NavItem", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
return _react.default.createElement(_.NavItem, null, "Build & Price");

@@ -45,65 +33,8 @@ }).addWithJSX("isActive", function () {

}, "Cars");
}).addWithJSX("In Navigation", function () {
var _ref, _ref2, _ref4;
return _react.default.createElement(_nav.Nav, {
sticky: true
}, _react.default.createElement(_block.Block, {
extend: (_ref = {
display: "flex"
}, _defineProperty(_ref, _breakpoints.BREAKPOINTS.untilL, {
flexDirection: "column",
position: "fixed",
width: "100%",
bottom: "0",
background: "#fff",
top: "0"
}), _defineProperty(_ref, _breakpoints.BREAKPOINTS.onL, {
alignItems: "center",
padding: "0 20px"
}), _ref)
}, _react.default.createElement(_block.Block, {
extend: (_ref2 = {}, _defineProperty(_ref2, _breakpoints.BREAKPOINTS.untilL, {
padding: "0 20px"
}), _defineProperty(_ref2, _breakpoints.BREAKPOINTS.onL, {
display: "flex",
flex: 1,
alignItems: "center"
}), _ref2)
}, _react.default.createElement(_.NavItem, {
dropdown: true
}, "Cars"), _react.default.createElement(_.NavItem, {
dropdown: true,
isActive: true
}, "Shopping Tools"), _react.default.createElement(_.NavItem, {
dropdown: true
}, "Own")), _react.default.createElement(_block.Block, {
extend: _defineProperty({}, _breakpoints.BREAKPOINTS.untilL, {
padding: "12px",
borderBottom: "1px solid #e9e9e9",
order: "-1",
textAlign: "center",
height: "50px"
})
}, _react.default.createElement(_reactFela.FelaTheme, null, function (theme) {
return _react.default.createElement(_logo.Logo, {
type: theme.logoTypes[Object.keys(theme.logoTypes)[0]]
});
})), _react.default.createElement(_block.Block, {
extend: (_ref4 = {}, _defineProperty(_ref4, _breakpoints.BREAKPOINTS.untilL, {
padding: "0 20px"
}), _defineProperty(_ref4, _breakpoints.BREAKPOINTS.onL, {
flex: 1,
display: "flex",
alignItems: "center",
justifyContent: "flex-end"
}), _ref4)
}, _react.default.createElement(_.NavItem, {
href: "#1"
}, "Inventory"), _react.default.createElement(_.NavItem, {
isActive: true,
href: "#2"
}, "Build & Price"), _react.default.createElement(_.NavItem, {
href: "#3"
}, "Find A Dealer"))));
}).addWithJSX("With long label", function () {
return _react.default.createElement(_.NavItem, null, "Find A Dealer And Text That Might Span Two Rows");
}).addWithJSX("isDropdown with long label", function () {
return _react.default.createElement(_.NavItem, {
isDropdown: true
}, "Find A Dealer And Text That Might Span Two Rows");
});

2

lib/components/nav/stories.js

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

(0, _react2.storiesOf)("Nav", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
(0, _react2.storiesOf)("Navigation/Nav", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
return _react.default.createElement(_block.Block, null, _react.default.createElement(_.Nav, null, _react.default.createElement(_block.Block, {

@@ -24,0 +24,0 @@ extend: {

198

lib/components/select-input/index.js

@@ -8,107 +8,133 @@ "use strict";

var _react = _interopRequireWildcard(require("react"));
var _react = _interopRequireDefault(require("react"));
var _reactFela = require("react-fela");
var _propTypes = require("prop-types");
var _reactFela = require("react-fela");
var _block = require("../block");
var _helpers = require("../../helpers");
var _getThemeStyle = require("../../get-theme-style");
var _styles = require("./styles");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _pureSelect = require("./pure-select");
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var _customSelect = require("./custom-select");
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
var arrowColor = function arrowColor(_ref) {
var theme = _ref.theme,
disabled = _ref.disabled;
return disabled ? theme.colors.inputDisabledControl : theme.colors.inputControl;
};
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var SelectInputComponent =
/*#__PURE__*/
function (_Component) {
_inherits(SelectInputComponent, _Component);
function SelectInputComponent() {
var _getPrototypeOf2;
var _this;
_classCallCheck(this, SelectInputComponent);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
var styles = function styles(_ref2) {
var disabled = _ref2.disabled,
theme = _ref2.theme;
return {
appearance: "none",
color: "#333",
background: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 13 6' fill='".concat(encodeURIComponent(arrowColor({
theme: theme,
disabled: disabled
})), "' %3E %3Cpath d='M6.49987275 4.13397441L11.78483479.5 12.5 1.37426775 6.49986464 5.5.5 1.3743604l.7151756-.87426061z'%3E %3C/path%3E %3C/svg%3E\") no-repeat right 18px center"),
backgroundSize: "15px 15px",
userSelect: "none",
overflow: "hidden",
margin: "0",
padding: "18px 18px",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
width: "100%",
boxSizing: "border-box",
borderRadius: 0,
border: "1px solid #f0f0f0",
display: "block",
fontSize: 15,
fontFamily: "Volvo Novum Regular, sans-serif",
"[disabled]": {
color: "#f0f0f0",
":hover": {
border: "1px solid #f0f0f0"
}
},
"& option[disabled]": {
color: "#aaa"
},
":invalid": {
color: "#aaa"
},
":focus:invalid": {
color: "#aaa"
},
"::-ms-expand": {
display: "none"
},
"::-ms-value": {
background: "none",
color: "#333"
},
":valid": {
color: "#333"
},
"& option": {
color: "#333"
},
":hover": {
border: "1px solid #e1e1e1"
},
":-moz-focusring": {
color: "transparent",
textShadow: "0 0 0 #000"
},
outline: 0,
borderColor: theme.colors.inputBorder,
backgroundColor: theme.colors.inputBackground,
cursor: disabled ? "not-allowed" : "pointer",
":focus": {
borderColor: theme.colors.inputBorderFocus
}
};
};
_this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(SelectInputComponent)).call.apply(_getPrototypeOf2, [this].concat(args)));
var SelectInputComponent = function SelectInputComponent(_ref3) {
var _ref3$as = _ref3.as,
as = _ref3$as === void 0 ? "select" : _ref3$as,
value = _ref3.value,
placeholder = _ref3.placeholder,
disabled = _ref3.disabled,
options = _ref3.options,
props = _objectWithoutProperties(_ref3, ["as", "value", "placeholder", "disabled", "options"]);
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
isPureSelectHidden: false
});
var _useFela = (0, _reactFela.useFela)(),
theme = _useFela.theme;
return _this;
}
return _react.default.createElement(_block.Block, _extends({
as: as,
extend: [styles, (0, _getThemeStyle.getThemeStyle)("selectInput", theme, {
disabled: disabled
})],
value: value || placeholder && "",
required: true,
disabled: disabled
}, props), placeholder && _react.default.createElement(_block.Block, {
as: "option",
value: "",
disabled: true,
hidden: true
}, placeholder), options.map(function (option) {
return _react.default.createElement("option", {
key: option.value,
value: option.value,
disabled: option.disabled
}, option.label);
}));
};
_createClass(SelectInputComponent, [{
key: "componentDidMount",
value: function componentDidMount() {
this.setState({
isPureSelectHidden: !(0, _helpers.isTouchDevice)()
});
}
}, {
key: "render",
value: function render() {
var isPureSelectHidden = this.state.isPureSelectHidden;
var _this$props = this.props,
value = _this$props.value,
options = _this$props.options,
theme = _this$props.theme,
onChange = _this$props.onChange,
disabled = _this$props.disabled;
return _react.default.createElement(_block.Block, {
as: "div",
extend: _styles.styles.container
}, _react.default.createElement(_customSelect.CustomSelect, {
theme: theme,
value: value,
onChange: onChange,
options: options,
isDisabled: disabled
}), !isPureSelectHidden && _react.default.createElement(_pureSelect.PureSelect, {
value: value,
onChange: onChange,
options: options,
disabled: disabled
}));
}
}]);
return SelectInputComponent;
}(_react.Component);
var propTypes = {
onChange: _propTypes.func.isRequired,
theme: _propTypes.object,
options: _propTypes.array.isRequired,
placeholder: _propTypes.string,
value: _propTypes.string,

@@ -115,0 +141,0 @@ disabled: _propTypes.bool

188

lib/components/select-input/stories.js

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

var _themeProvider = require("../../theme-provider");
var _decorators = require("../../../stories/decorators");

@@ -38,3 +36,3 @@

(0, _react2.storiesOf)("SelectInput", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("basic class component", function () {
(0, _react2.storiesOf)("Forms/SelectInput", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
var Example =

@@ -88,5 +86,5 @@ /*#__PURE__*/

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleChange", function (value) {
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleChange", function (e) {
_this.setState({
value: value
value: e.target.value
});

@@ -113,3 +111,3 @@ });

return _react.default.createElement(Example, null);
}).addWithJSX("with theme", function () {
}).addWithJSX("Disabled", function () {
var Example =

@@ -138,6 +136,2 @@ /*#__PURE__*/

}, {
value: "c30",
label: "Volvo C30",
disabled: true
}, {
value: "c70",

@@ -164,5 +158,5 @@ label: "Volvo C70"

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "handleChange", function (value) {
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this2)), "handleChange", function (e) {
_this2.setState({
value: value
value: e.target.value
});

@@ -180,68 +174,3 @@ });

options: this.state.options,
onChange: this.handleChange
});
}
}]);
return Example;
}(_react.default.Component);
var defaultThemeValue = {
selectInput: {
width: "50%"
},
selectInputValue: {
textAlign: "center",
fontSize: "17px",
background: "#fafafa"
},
selectInputOption: {
":hover": {
backgroundColor: "lightgrey"
}
},
selectInputOptions: {
background: "#fbfbfb"
}
};
var themePropsConfig = (0, _addonKnobs.object)("", defaultThemeValue);
return _react.default.createElement(_themeProvider.ThemeProvider, {
theme: themePropsConfig
}, _react.default.createElement(Example, null));
}).addWithJSX("disabled", function () {
var Example =
/*#__PURE__*/
function (_React$Component3) {
_inherits(Example, _React$Component3);
function Example() {
var _getPrototypeOf4;
var _this3;
_classCallCheck(this, Example);
for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
args[_key3] = arguments[_key3];
}
_this3 = _possibleConstructorReturn(this, (_getPrototypeOf4 = _getPrototypeOf(Example)).call.apply(_getPrototypeOf4, [this].concat(args)));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "state", {
options: [{
value: "Bilmodell",
label: "Bilmodell"
}],
value: "Bilmodell"
});
return _this3;
}
_createClass(Example, [{
key: "render",
value: function render() {
return _react.default.createElement(_.SelectInput, {
value: this.state.value,
options: this.state.options,
onChange: this.handleChange,
disabled: true

@@ -256,105 +185,2 @@ });

return _react.default.createElement(Example, null);
}).addWithJSX("multiple with open", function () {
var Example =
/*#__PURE__*/
function (_React$Component4) {
_inherits(Example, _React$Component4);
function Example(props) {
var _this4;
_classCallCheck(this, Example);
_this4 = _possibleConstructorReturn(this, _getPrototypeOf(Example).call(this, props));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this4)), "state", {
options: [{
value: "bilmodell",
label: "Bilmodell"
}, {
value: "c30",
label: "Volvo C30",
disabled: true
}, {
value: "c70",
label: "Volvo C70"
}, {
value: "c90",
label: "Volvo C90"
}, {
value: "c40",
label: "Volvo S40"
}, {
value: "s60",
label: "Volvo S60"
}, {
value: "s80",
label: "Volvo S80"
}, {
value: "s90",
label: "Volvo S90"
}],
value1: "bilmodell",
value2: "bilmodell"
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this4)), "handleChange1", function (value) {
_this4.setState({
value1: value
});
});
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this4)), "handleChange2", function (value) {
_this4.setState({
value2: value
});
});
_this4.select1 = _react.default.createRef();
_this4.select2 = _react.default.createRef();
return _this4;
}
_createClass(Example, [{
key: "componentDidMount",
value: function componentDidMount() {
// used to open the top select input and test that the options cover the other input.
if (this.select1.current) {
var svg = this.select1.current.querySelector("svg"); // parentElement is not present in svg on IE11
if (svg.parentElement) {
svg.parentElement.click();
} else {
svg.parentNode.click();
}
}
}
}, {
key: "render",
value: function render() {
return _react.default.createElement("div", null, _react.default.createElement("div", {
ref: this.select1,
style: {
marginBottom: "120px"
}
}, _react.default.createElement(_.SelectInput, {
ref: this.select1,
value: this.state.value1,
options: this.state.options,
onChange: this.handleChange1
})), _react.default.createElement("div", {
ref: this.select2
}, _react.default.createElement(_.SelectInput, {
ref: this.select2,
value: this.state.value2,
options: this.state.options,
onChange: this.handleChange2
})));
}
}]);
return Example;
}(_react.default.Component);
return _react.default.createElement(Example, null);
});

3

lib/components/select-input/test.js

@@ -48,2 +48,5 @@ "use strict";

var theme = {
colors: {
primary: "pink"
},
selectInput: {

@@ -50,0 +53,0 @@ border: "1px solid #000"

52

lib/components/slider/index.js

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

var KEY_DOWN = 40;
var THUMB_WIDTH = 40;
var THUMB_HEIGHT = 40;

@@ -55,3 +57,4 @@ var thumbStyle = function thumbStyle(_ref) {

isDragging = _ref.isDragging,
theme = _ref.theme;
theme = _ref.theme,
disabled = _ref.disabled;
return {

@@ -61,12 +64,14 @@ position: "absolute",

left: left,
width: 40,
height: 40,
borderWidth: 1,
borderStyle: "solid",
borderColor: theme.colors.grey5,
background: theme.colors.white,
cursor: "ew-resize",
width: THUMB_WIDTH,
height: THUMB_HEIGHT,
border: "1px solid " + theme.colors.inputBorder,
background: theme.colors.inputBackground,
cursor: disabled ? "not-allowed" : "ew-resize",
display: "flex",
alignItems: "center",
justifyContent: "center",
outline: 0,
":focus": {
borderColor: theme.colors.inputBorderFocus
},
extend: {

@@ -206,4 +211,3 @@ condition: !isDragging,

var thumbWidth = _this.getElementWidth(_this.thumbRef.current);
var thumbWidth = THUMB_WIDTH;
var newPositionLeft = position - trackLeft - thumbWidth / 2;

@@ -238,5 +242,3 @@ var isMax = newPositionLeft >= trackWidth - thumbWidth;

var thumbWidth = _this.getElementWidth(_this.thumbRef.current);
var leftPos = currentStep * (trackWidth - thumbWidth) / (steps - 1);
var leftPos = currentStep * (trackWidth - THUMB_WIDTH) / (steps - 1);
return currentLeft ? currentLeft : Math.round(leftPos);

@@ -384,3 +386,4 @@ });

maxValue = _this$props4.maxValue,
theme = _this$props4.theme;
theme = _this$props4.theme,
disabled = _this$props4.disabled;
var value = this.getCurrentValue();

@@ -391,3 +394,4 @@ var left = this.getLeftPositionFromCurrentStep();

left: left,
theme: theme
theme: theme,
disabled: disabled
};

@@ -402,2 +406,3 @@ return _react.default.createElement(_click.Click, {

"aria-orientation": "horizontal",
disabled: disabled,
onMouseDown: function onMouseDown() {

@@ -431,6 +436,6 @@ return _this3.handleDragStart();

}, _react.default.createElement(_arrow.Arrow, {
color: theme.colors.primary,
color: theme.colors[disabled ? "inputDisabledControl" : "inputControl"],
direction: "left"
}), _react.default.createElement(_arrow.Arrow, {
color: theme.colors.primary,
color: theme.colors[disabled ? "inputDisabledControl" : "inputControl"],
direction: "right"

@@ -461,11 +466,16 @@ }));

borderStyle: "solid",
borderColor: theme.colors.grey5,
background: theme.colors.white
borderColor: theme.colors.inputBorder,
background: theme.colors.inputBackground,
cursor: this.props.disabled ? "not-allwoed" : "pointer"
}, (0, _getThemeStyle.getThemeStyle)("sliderTrack", theme)],
innerRef: this.trackRef,
onMouseDown: function onMouseDown(e) {
return _this4.handleMouseDown(e);
if (!_this4.props.disabled) {
_this4.handleMouseDown(e);
}
},
onMouseUp: function onMouseUp() {
return _this4.handleMouseUp();
if (!_this4.props.disabled) {
_this4.handleMouseUp();
}
}

@@ -472,0 +482,0 @@ }), typeof this.state.currentStep !== "undefined" && this.renderThumb());

16

lib/components/slider/stories.js

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

(0, _react2.storiesOf)("Slider", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("5 Steps", function () {
(0, _react2.storiesOf)("Forms/Slider", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("5 Steps", function () {
return _react.default.createElement(_.Slider, {

@@ -22,3 +22,3 @@ onChange: function onChange(value) {

},
initialValue: 3,
initialValue: 1,
step: 1,

@@ -37,2 +37,14 @@ minValue: 1,

});
}).addWithJSX("Disabled", function () {
return _react.default.createElement(_.Slider, {
disabled: true,
onChange: function onChange(value) {
// eslint-disable-next-line no-console
console.log(value);
},
initialValue: 3,
step: 1,
minValue: 1,
maxValue: 5
});
});

2

lib/components/spinner/stories.js

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

(0, _react2.storiesOf)("Spinner", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Basic", function () {
(0, _react2.storiesOf)("Feedback Indicators/Spinner", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Basic", function () {
return _react.default.createElement(_.Spinner, null);

@@ -20,0 +20,0 @@ }).addWithJSX("Multiple", function () {

9

lib/components/spinner/test.js

@@ -12,10 +12,9 @@ "use strict";

describe("<Spinner /> snapshot tests", function () {
var defaultProps = {
size: 14,
color: "green"
};
it("should render <Spinner /> component correctly", function () {
var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Spinner, defaultProps));
var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Spinner, {
size: 14,
color: "green"
}));
expect(snapshot).toMatchSnapshot();
});
});

9

lib/components/tab-nav-item/index.js

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

hasLineTransition = _ref.hasLineTransition,
_ref$theme$colors = _ref.theme.colors,
_ref$theme = _ref.theme,
_ref$theme$colors = _ref$theme.colors,
grey1 = _ref$theme$colors.grey1,
primary = _ref$theme$colors.primary,
white = _ref$theme$colors.white;
white = _ref$theme$colors.white,
fontTypes = _ref$theme.fontTypes;
return {

@@ -50,3 +52,4 @@ display: "inline-flex",

textAlign: "left",
fontFamily: "Volvo Novum Light, sans-serif",
fontFamily: fontTypes.NOVUM,
fontWeight: 200,
letterSpacing: 0.3,

@@ -53,0 +56,0 @@ marginRight: 20,

36

lib/components/tab-nav-item/stories.js

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

var _themeProvider = require("../../theme-provider");
var _breakpoints = require("../../constants/breakpoints");
var _decorators = require("../../../stories/decorators");

@@ -22,11 +18,5 @@

var _volvo = _interopRequireDefault(require("../../themes/volvo"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
(0, _react2.storiesOf)("TabNavItem", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("basic", function () {
(0, _react2.storiesOf)("Navigation/TabNavItem", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("basic", function () {
return _react.default.createElement(_.TabNavItem, null, "Build & Price");

@@ -60,25 +50,3 @@ }).addWithJSX("isActive", function () {

}
}, _react.default.createElement(_.TabNavItem, null, "Crossover/Wagon"), _react.default.createElement(_.TabNavItem, null, "Sedan"), _react.default.createElement(_.TabNavItem, {
dropdown: true
}, "Hybrid")));
}).addWithJSX("with theme", function () {
var defaultValue = _objectSpread({}, _volvo.default, {
styles: {
tabNavItem: _defineProperty({
color: "#fefefe",
backgroundColor: "pink",
padding: "10px"
}, _breakpoints.BREAKPOINTS.fromM, {
padding: "20px"
})
}
});
var defaultThemeConfig = (0, _addonKnobs.object)("Custom theme", defaultValue);
return _react.default.createElement(_themeProvider.ThemeProvider, {
theme: defaultThemeConfig
}, _react.default.createElement(_.TabNavItem, {
dropdown: true,
isActive: true
}, "Help"));
}, _react.default.createElement(_.TabNavItem, null, "Crossover/Wagon"), _react.default.createElement(_.TabNavItem, null, "Sedan"), _react.default.createElement(_.TabNavItem, null, "Hybrid")));
});

2

lib/components/tab-nav/stories.js

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

(0, _react2.storiesOf)("TabNav", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("default (textAlign: center)", function () {
(0, _react2.storiesOf)("Navigation/TabNav", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("default (textAlign: center)", function () {
return _react.default.createElement(_block.Block, null, _react.default.createElement(_.TabNav, null, _react.default.createElement(_tabNavItem.TabNavItem, {

@@ -40,0 +40,0 @@ isActive: true

4

lib/components/tab-nav/styles.js

@@ -53,2 +53,3 @@ "use strict";

white = _ref2$theme$colors.white,
fontTypes = _ref2$theme.fontTypes,
reverseOut = _ref2.reverseOut,

@@ -60,3 +61,4 @@ _ref2$showBackButtonO = _ref2.showBackButtonOn,

padding: "17px 20px",
fontFamily: "Volvo Novum Light, sans-serif",
fontFamily: fontTypes.NOVUM,
fontWeight: 200,
whiteSpace: "nowrap",

@@ -63,0 +65,0 @@ flexShrink: "0",

18

lib/components/text-input/index.js

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

return {
fontFamily: "Volvo Novum Regular, sans-serif",
fontFamily: theme.fontTypes.NOVUM,
fontWeight: 400,
borderWidth: 1,
borderStyle: "solid",
borderColor: theme.colors.grey7,
color: theme.colors.grey1,
boxSizing: "border-box",

@@ -55,4 +54,15 @@ display: "block",

outline: 0,
borderColor: theme.colors.inputBorder,
color: theme.colors.inputText,
background: theme.colors.inputBackground,
":focus": {
borderColor: theme.colors.primaryLight
borderColor: theme.colors.inputBorderFocus
},
"::placeholder": {
color: theme.colors.inputPlaceholder
},
"[disabled]": {
cursor: "not-allowed",
color: theme.colors.inputDisabledText,
borderColor: theme.colors.inputBorderDisabled
}

@@ -59,0 +69,0 @@ };

19

lib/components/text-input/stories.js

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

};
(0, _react2.storiesOf)("TextInput", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
(0, _react2.storiesOf)("Forms/TextInput", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
function TextInputWithValue() {

@@ -45,2 +45,19 @@ var _useState = (0, _react.useState)(""),

return _react.default.createElement(TextInputWithValue, null);
}).addWithJSX("Disabled", function () {
function TextInputWithValue() {
var _useState3 = (0, _react.useState)("This is some input"),
_useState4 = _slicedToArray(_useState3, 2),
value = _useState4[0],
setValue = _useState4[1];
return _react.default.createElement(_.TextInput, _extends({
disabled: true,
value: value,
onChange: function onChange(e) {
return setValue(e.target.value);
}
}, textInputProps));
}
return _react.default.createElement(TextInputWithValue, null);
});

23

lib/components/text-input/test.js

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

var _breakpoints = require("../../constants/breakpoints");
var _volvo = _interopRequireDefault(require("../../themes/volvo"));

@@ -24,3 +22,4 @@

var textInputProps = {
onChange: function onChange() {}
onChange: function onChange() {},
value: ""
};

@@ -49,20 +48,2 @@ it("renders <TextInput /> component correctly with default props", function () {

});
it("renders <TextInput /> component correctly with theme and media queries", function () {
var _textInput;
var theme = _objectSpread({}, _volvo.default, {
styles: {
textInput: (_textInput = {}, _defineProperty(_textInput, _breakpoints.BREAKPOINTS.onS, {
background: "blue"
}), _defineProperty(_textInput, _breakpoints.BREAKPOINTS.onM, {
background: "orange"
}), _defineProperty(_textInput, _breakpoints.BREAKPOINTS.onL, {
background: "magenta"
}), _textInput)
}
});
var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.TextInput, textInputProps), theme);
expect(snapshot).toMatchSnapshot();
});
it("verifies the correct and supported input text types", function () {

@@ -69,0 +50,0 @@ expect(_.TEXT_INPUT_TYPES.PASSWORD).toEqual("password");

73

lib/components/toggle/index.js

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

var _propTypes = require("prop-types");
var _reactFela = require("react-fela");

@@ -17,2 +19,8 @@

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var rootStyle = {

@@ -28,16 +36,21 @@ width: 40,

};
var inputStyle = {
appearance: "none",
display: "none"
var inputStyle = function inputStyle(_ref) {
var theme = _ref.theme;
return {
appearance: "none",
":focus + span": {
borderColor: theme.colors.inputBorderFocus
}
};
};
var backgroundStyle = function backgroundStyle(_ref) {
var checked = _ref.checked,
theme = _ref.theme;
var backgroundStyle = function backgroundStyle(_ref2) {
var checked = _ref2.checked,
theme = _ref2.theme,
disabled = _ref2.disabled;
return {
cursor: "pointer",
position: "absolute",
borderWidth: 1,
borderStyle: "solid",
borderColor: theme.colors.grey7,
borderRadius: 45,

@@ -48,2 +61,9 @@ top: 0,

bottom: 0,
outline: 0,
borderColor: theme.colors.inputBorder,
background: theme.colors.inputBackground,
cursor: disabled ? "not-allowed" : "pointer",
":focus": {
borderColor: theme.colors.inputBorderFocus
},
"::after": {

@@ -56,3 +76,3 @@ content: "''",

height: 17,
background: theme.colors.primary,
background: disabled ? theme.colors.inputDisabledControl : theme.colors.inputControl,
borderRadius: "50%",

@@ -65,6 +85,7 @@ transition: "transform 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)",

function Toggle(_ref2) {
var id = _ref2.id,
checked = _ref2.checked,
onToggle = _ref2.onToggle;
function Toggle(_ref3) {
var checked = _ref3.checked,
disabled = _ref3.disabled,
onChange = _ref3.onChange,
props = _objectWithoutProperties(_ref3, ["checked", "disabled", "onChange"]);

@@ -76,18 +97,24 @@ var _useFela = (0, _reactFela.useFela)(),

as: "label",
extend: rootStyle,
"data-cypress-id": id
}, _react.default.createElement(_inline.Inline, {
extend: rootStyle
}, _react.default.createElement(_inline.Inline, _extends({
as: "input",
type: "checkbox",
extend: inputStyle,
id: id,
name: id,
extend: inputStyle({
theme: theme
}),
checked: checked,
onChange: onToggle
}), _react.default.createElement(_inline.Inline, {
onChange: onChange,
disabled: disabled
}, props)), _react.default.createElement(_inline.Inline, {
extend: backgroundStyle({
checked: checked,
theme: theme
theme: theme,
disabled: disabled
})
}));
}
}
Toggle.propTypes = {
onChange: _propTypes.func.isRequired,
checked: _propTypes.bool.isRequired
};

51

lib/components/toggle/stories.js

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

(0, _react2.storiesOf)("Toggle", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
(0, _react2.storiesOf)("Forms/Toggle", module).addDecorator(_addonKnobs.withKnobs).addDecorator(_decorators.withStyleAndTheme).addWithJSX("Default", function () {
var TogglingToggle =

@@ -69,3 +69,3 @@ /*#__PURE__*/

checked: this.state.checked,
onToggle: function onToggle() {
onChange: function onChange() {
return _this2.setState({

@@ -83,2 +83,49 @@ checked: !_this2.state.checked

return _react.default.createElement(TogglingToggle, null);
}).addWithJSX("Disabled", function () {
var TogglingToggle =
/*#__PURE__*/
function (_Component2) {
_inherits(TogglingToggle, _Component2);
function TogglingToggle() {
var _getPrototypeOf3;
var _this3;
_classCallCheck(this, TogglingToggle);
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
_this3 = _possibleConstructorReturn(this, (_getPrototypeOf3 = _getPrototypeOf(TogglingToggle)).call.apply(_getPrototypeOf3, [this].concat(args)));
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this3)), "state", {
checked: false
});
return _this3;
}
_createClass(TogglingToggle, [{
key: "render",
value: function render() {
var _this4 = this;
return _react.default.createElement(_.Toggle, {
disabled: true,
checked: this.state.checked,
onChange: function onChange() {
return _this4.setState({
checked: !_this4.state.checked
});
}
});
}
}]);
return TogglingToggle;
}(_react.Component);
return _react.default.createElement(TogglingToggle, null);
});

12

lib/components/toggle/test.js

@@ -17,5 +17,9 @@ "use strict";

var onChange = function onChange() {};
describe("<Toggle /> snapshot tests", function () {
it("default props", function () {
var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Toggle, null));
var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Toggle, {
onChange: onChange
}));
expect(snapshot).toMatchSnapshot();

@@ -25,2 +29,3 @@ });

var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Toggle, {
onChange: onChange,
checked: true

@@ -31,3 +36,5 @@ }));

it("RTL default props", function () {
var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Toggle, null), _objectSpread({}, _volvo.default, {
var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Toggle, {
onChange: onChange
}), _objectSpread({}, _volvo.default, {
direction: "rtl"

@@ -39,2 +46,3 @@ }));

var snapshot = (0, _createSnapshot.default)(_react.default.createElement(_.Toggle, {
onChange: onChange,
checked: true

@@ -41,0 +49,0 @@ }), _objectSpread({}, _volvo.default, {

56

lib/index.js

@@ -114,2 +114,8 @@ "use strict";

});
Object.defineProperty(exports, "Radio", {
enumerable: true,
get: function get() {
return _radio.Radio;
}
});
Object.defineProperty(exports, "SelectInput", {

@@ -145,38 +151,2 @@ enumerable: true,

});
Object.defineProperty(exports, "ConfigContext", {
enumerable: true,
get: function get() {
return _configContext.ConfigContext;
}
});
Object.defineProperty(exports, "COLORS", {
enumerable: true,
get: function get() {
return _colors.COLORS;
}
});
Object.defineProperty(exports, "BREAKPOINTS", {
enumerable: true,
get: function get() {
return _breakpoints.BREAKPOINTS;
}
});
Object.defineProperty(exports, "FONTS", {
enumerable: true,
get: function get() {
return _fonts.FONTS;
}
});
Object.defineProperty(exports, "ICONS", {
enumerable: true,
get: function get() {
return _icons.ICONS;
}
});
Object.defineProperty(exports, "loadFonts", {
enumerable: true,
get: function get() {
return _loadFonts.loadFonts;
}
});
Object.defineProperty(exports, "loadThemeFonts", {

@@ -189,4 +159,2 @@ enumerable: true,

require("core-js/es6/array");
var _block = require("./components/block");

@@ -226,2 +194,4 @@

var _radio = require("./components/radio");
var _selectInput = require("./components/select-input");

@@ -237,12 +207,2 @@

var _configContext = require("./config-context");
var _colors = require("./constants/colors");
var _breakpoints = require("./constants/breakpoints");
var _fonts = require("./constants/fonts");
var _icons = require("./constants/icons");
var _loadFonts = require("./load-fonts");

39

lib/load-fonts.js

@@ -6,23 +6,4 @@ "use strict";

});
exports.loadThemeFonts = exports.loadFonts = void 0;
exports.loadThemeFonts = void 0;
var _fonts = require("./constants/fonts");
var prefixWithPath = function prefixWithPath(fonts, path) {
return fonts.map(function (font) {
return path + font;
});
};
var loadFonts = function loadFonts(_ref, renderer) {
var fonts = _ref.fonts,
_ref$pathPrefix = _ref.pathPrefix,
pathPrefix = _ref$pathPrefix === void 0 ? "/" : _ref$pathPrefix,
fontDisplay = _ref.fontDisplay;
fonts.forEach(function (font) {
renderer.renderFont(font, prefixWithPath(_fonts.FONTS[font], pathPrefix), {
fontDisplay: fontDisplay || "swap"
});
});
};
/**

@@ -42,13 +23,9 @@ *

*/
exports.loadFonts = loadFonts;
var loadThemeFonts = function loadThemeFonts(_ref2) {
var renderer = _ref2.renderer,
fontsConfig = _ref2.fontsConfig;
fontsConfig.forEach(function (_ref3) {
var family = _ref3.family,
files = _ref3.files,
config = _ref3.config;
var loadThemeFonts = function loadThemeFonts(_ref) {
var renderer = _ref.renderer,
fontsConfig = _ref.fontsConfig;
fontsConfig.forEach(function (_ref2) {
var family = _ref2.family,
files = _ref2.files,
config = _ref2.config;
renderer.renderFont(family, files, config);

@@ -55,0 +32,0 @@ });

10

lib/story-wrapper.js

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

var _loadFonts = require("./load-fonts");
var _volvo = _interopRequireDefault(require("./themes/volvo"));

@@ -33,7 +31,2 @@

var renderer = (0, _styleRenderer.styleRenderer)();
(0, _loadFonts.loadFonts)({
fonts: ["Volvo Sans Light", "Volvo Sans Regular", "Volvo Sans Medium", "Volvo Sans Bold", "Volvo Sans Super", "Volvo Novum Light", "Volvo Novum Light Italic", "Volvo Novum Semi Light", "Volvo Novum Semi Light Italic", "Volvo Novum Regular", "Volvo Novum Italic", "Volvo Novum Medium", "Volvo Novum Medium Italic", "Volvo Novum Bold", "Volvo Novum Bold Italic", "Volvo Serif Regular", "Volvo Serif Italic", "Volvo Serif Bold", "Volvo Serif Bold Italic", "Volvo Broad"],
pathPrefix: "/static/",
fontDisplay: "block"
}, renderer);
var themes = {

@@ -48,3 +41,3 @@ volvo: _volvo.default,

var children = _ref.children;
var theme = (0, _addonKnobs.select)("Theme", Object.keys(themes), defaultTheme);
var theme = (0, _addonKnobs.select)("theme", Object.keys(themes), defaultTheme);
var rtl = (0, _addonKnobs.boolean)("rtl", false);

@@ -56,2 +49,3 @@ var dir = rtl ? "rtl" : "ltr";

logoImagesPath: "/static/vcc-ui/images/",
fontsPath: "/static/vcc-ui/fonts/",
direction: dir

@@ -58,0 +52,0 @@ })

57

lib/style-renderer.js

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

var _hexToRgba = _interopRequireDefault(require("hex-to-rgba"));
var _deprecate = require("./deprecate");

@@ -19,2 +21,4 @@

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

@@ -44,4 +48,55 @@

return (0, _fela.createRenderer)(_objectSpread({}, options, {
plugins: _toConsumableArray(_felaPresetWeb.default).concat([(0, _felaPluginRtl.default)(isRtl ? "rtl" : "ltr")], _toConsumableArray(options.plugins || [])).filter(Boolean)
plugins: _toConsumableArray(_felaPresetWeb.default).concat([themeFontsPlugin, hexToRgbaPlugin, (0, _felaPluginRtl.default)(isRtl ? "rtl" : "ltr")], _toConsumableArray(options.plugins || [])).filter(Boolean)
}));
}
function themeFontsPlugin(style, type, renderer, props) {
var fonts = props.theme && props.theme.fonts || [];
var fontsPath = props.theme && props.theme.fontsPath || "";
var _loop = function _loop(property) {
var value = style[property]; // TODO: maybe we wanna cache already rendered fonts
// but no high prio as Fela does that as well
if (property === "fontFamily") {
var usedFonts = fonts.filter(function (font) {
return font.fontFamily === value;
});
if (usedFonts.length > 0) {
usedFonts.forEach(function (_ref2) {
var fontFamily = _ref2.fontFamily,
src = _ref2.src,
fontProps = _objectWithoutProperties(_ref2, ["fontFamily", "src"]);
return renderer.renderFont(fontFamily, src.map(function (file) {
return fontsPath + file;
}), fontProps);
});
}
} else if (_typeof(value) === "object" && !Array.isArray(value)) {
themeFontsPlugin(value, type, renderer, props);
}
};
for (var property in style) {
_loop(property);
}
return style;
} // TODO: move to fela repo as an official plugin
function hexToRgbaPlugin(style) {
for (var property in style) {
var value = style[property];
if (typeof value === "string" && value.indexOf("#") === 0 && value.length === 9) {
style[property] = (0, _hexToRgba.default)(value);
} else if (_typeof(value) === "object" && !Array.isArray(value)) {
hexToRgbaPlugin(value);
}
}
return style;
}

14

lib/styleguide/provider.js

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

var _styleRenderer = require("../style-renderer");
var _index = require("../index");
var _themeProvider = require("../theme-provider");

@@ -49,8 +45,2 @@

var clientRenderer = (0, _styleRenderer.styleRenderer)();
(0, _index.loadFonts)({
fonts: ["Volvo Sans Light", "Volvo Sans Regular", "Volvo Sans Medium", "Volvo Sans Bold", "Volvo Sans Super", "Volvo Novum Light", "Volvo Novum Light Italic", "Volvo Novum Semi Light", "Volvo Novum Semi Light Italic", "Volvo Novum Regular", "Volvo Novum Italic", "Volvo Novum Medium", "Volvo Novum Medium Italic", "Volvo Novum Bold", "Volvo Novum Bold Italic", "Volvo Serif Regular", "Volvo Serif Italic", "Volvo Serif Bold", "Volvo Serif Bold Italic", "Volvo Broad"],
pathPrefix: "/"
}, clientRenderer);
var theme = _objectSpread({}, _volvo.default, {

@@ -78,5 +68,3 @@ logoImagesPath: "/vcc-ui/images/"

return _react.default.createElement(_reactFela.RendererProvider, {
renderer: clientRenderer
}, _react.default.createElement(_themeProvider.ThemeProvider, {
return _react.default.createElement(_reactFela.RendererProvider, null, _react.default.createElement(_themeProvider.ThemeProvider, {
theme: theme

@@ -83,0 +71,0 @@ }, this.props.children));

3

lib/test/create-snapshot.js

@@ -50,3 +50,4 @@ "use strict";

var baseTheme = _objectSpread({}, _volvo.default, {
logoImagesPath: "/logo/testpath/"
logoImagesPath: "/logo/testpath/",
fontsPath: "/fonts/testpath/"
});

@@ -53,0 +54,0 @@

3

lib/themes/polestar.js

@@ -37,4 +37,3 @@ "use strict";

white: "#FFFFFF",
primary: "#007bcd",
primaryLight: "#008ae6",
primary: "#D3BC8D",
// TODO: eventually deprecate later

@@ -41,0 +40,0 @@ red: "#c42121",

140

lib/themes/volvo.js

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

primaryBlue: "#007bcd",
primaryBlueLight: "#008ae6"
primaryBlueLight: "#008ae6",
// Input Styles
get inputBorder() {
return this.grey7;
},
get inputBorderFocus() {
return this.grey5;
},
get inputPlaceholder() {
return this.grey6;
},
get inputControl() {
return this.primaryLight;
},
inputText: "#222",
inputDisabledText: "#ccc",
inputDisabledControl: "#ccc",
inputDisabledBorder: "#f1f1f1",
inputBackground: "#fff"
};

@@ -101,23 +124,94 @@ (0, _deprecate.deprecateObjectProperty)(colors, "blue", 'Named colors like "blue" are deprecated. Use "primary" instead.');

var icons = ["account", "email", "search", "globe", "facebook", "twitter", "youtube", "linkedin", "instagram", "pinterest", "youku", "vkontakte", "wechat", "weibo"];
var fonts = {
"Volvo Sans Light": ["vcc-ui/fonts/volvo-sans/light/volvo-sans-light.woff", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.eot", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.svg", "vcc-ui/fonts/volvo-sans/light/volvo-sans-light.ttf"],
"Volvo Sans Medium": ["vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.woff", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.eot", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.svg", "vcc-ui/fonts/volvo-sans/medium/volvo-sans-medium.ttf"],
"Volvo Sans Regular": ["vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.woff", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.eot", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.svg", "vcc-ui/fonts/volvo-sans/regular/volvo-sans-regular.ttf"],
"Volvo Sans Bold": ["vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.woff", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.eot", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.svg", "vcc-ui/fonts/volvo-sans/bold/volvo-sans-bold.ttf"],
"Volvo Sans Super": ["vcc-ui/fonts/volvo-sans/super/volvo-sans-super.woff", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.eot", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.svg", "vcc-ui/fonts/volvo-sans/super/volvo-sans-super.ttf"],
"Volvo Broad": ["vcc-ui/fonts/volvo-broad/volvo-broad.woff", "vcc-ui/fonts/volvo-broad/volvo-broad.eot", "vcc-ui/fonts/volvo-broad/volvo-broad.svg", "vcc-ui/fonts/volvo-broad/volvo-broad.ttf"],
"Volvo Novum Light": ["vcc-ui/fonts/volvo-novum/volvo-novum-light.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-light.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-light.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-light.svg"],
"Volvo Novum Light Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-light-italic.svg"],
"Volvo Novum Semi Light": ["vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light.svg"],
"Volvo Novum Semi Light Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-semi-light-italic.svg"],
"Volvo Novum Regular": ["vcc-ui/fonts/volvo-novum/volvo-novum-regular.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-regular.svg"],
"Volvo Novum Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-italic.svg"],
"Volvo Novum Medium": ["vcc-ui/fonts/volvo-novum/volvo-novum-medium.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-medium.svg"],
"Volvo Novum Medium Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-medium-italic.svg"],
"Volvo Novum Bold": ["vcc-ui/fonts/volvo-novum/volvo-novum-bold.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-bold.svg"],
"Volvo Novum Bold Italic": ["vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.woff2", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.woff", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.eot", "vcc-ui/fonts/volvo-novum/volvo-novum-bold-italic.svg"],
"Volvo Serif Regular": ["vcc-ui/fonts/volvo-serif/volvo-serif-regular.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-regular.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-regular.svg"],
"Volvo Serif Italic": ["vcc-ui/fonts/volvo-serif/volvo-serif-italic.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-italic.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-italic.svg"],
"Volvo Serif Bold": ["vcc-ui/fonts/volvo-serif/volvo-serif-bold.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-bold.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-bold.svg"],
"Volvo Serif Bold Italic": ["vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.woff", "vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.eot", "vcc-ui/fonts/volvo-serif/volvo-serif-bold-italic.svg"]
var fonts = [{
fontFamily: "Volvo Sans",
fontWeight: 200,
src: ["volvo-sans/light/volvo-sans-light.woff", "volvo-sans/light/volvo-sans-light.eot", "volvo-sans/light/volvo-sans-light.svg", "volvo-sans/light/volvo-sans-light.ttf"]
}, {
fontFamily: "Volvo Sans",
fontWeight: 400,
src: ["volvo-sans/regular/volvo-sans-regular.woff", "volvo-sans/regular/volvo-sans-regular.eot", "volvo-sans/regular/volvo-sans-regular.svg", "volvo-sans/regular/volvo-sans-regular.ttf"]
}, {
fontFamily: "Volvo Sans",
fontWeight: 500,
src: ["volvo-sans/medium/volvo-sans-medium.woff", "volvo-sans/medium/volvo-sans-medium.eot", "volvo-sans/medium/volvo-sans-medium.svg", "volvo-sans/medium/volvo-sans-medium.ttf"]
}, {
fontFamily: "Volvo Sans",
fontWeight: 700,
src: ["volvo-sans/bold/volvo-sans-bold.woff", "volvo-sans/bold/volvo-sans-bold.eot", "volvo-sans/bold/volvo-sans-bold.svg", "volvo-sans/bold/volvo-sans-bold.ttf"]
}, {
fontFamily: "Volvo Sans",
fontWeight: 900,
src: ["volvo-sans/super/volvo-sans-super.woff", "volvo-sans/super/volvo-sans-super.eot", "volvo-sans/super/volvo-sans-super.svg", "volvo-sans/super/volvo-sans-super.ttf"]
}, {
fontFamily: "Volvo Broad",
src: ["volvo-broad/volvo-broad.woff", "volvo-broad/volvo-broad.eot", "volvo-broad/volvo-broad.svg", "volvo-broad/volvo-broad.ttf"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 200,
src: ["volvo-novum/volvo-novum-light.woff2", "volvo-novum/volvo-novum-light.woff", "volvo-novum/volvo-novum-light.eot", "volvo-novum/volvo-novum-light.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 200,
fontStyle: "italic",
src: ["volvo-novum/volvo-novum-light.woff2", "volvo-novum/volvo-novum-light.woff", "volvo-novum/volvo-novum-light.eot", "volvo-novum/volvo-novum-light.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 300,
src: ["volvo-novum/volvo-novum-semi-light.woff2", "volvo-novum/volvo-novum-semi-light.woff", "volvo-novum/volvo-novum-semi-light.eot", "volvo-novum/volvo-novum-semi-light.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 300,
fontStyle: "italic",
src: ["volvo-novum/volvo-novum-semi-light-italic.woff2", "volvo-novum/volvo-novum-semi-light-italic.woff", "volvo-novum/volvo-novum-semi-light-italic.eot", "volvo-novum/volvo-novum-semi-light-italic.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 400,
src: ["volvo-novum/volvo-novum-regular.woff2", "volvo-novum/volvo-novum-regular.woff", "volvo-novum/volvo-novum-regular.eot", "volvo-novum/volvo-novum-regular.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 400,
fontStyle: "italic",
src: ["volvo-novum/volvo-novum-italic.woff2", "volvo-novum/volvo-novum-italic.woff", "volvo-novum/volvo-novum-italic.eot", "volvo-novum/volvo-novum-italic.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 500,
src: ["volvo-novum/volvo-novum-medium.woff2", "volvo-novum/volvo-novum-medium.woff", "volvo-novum/volvo-novum-medium.eot", "volvo-novum/volvo-novum-medium.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 500,
fontStyle: "italic",
src: ["volvo-novum/volvo-novum-medium-italic.woff2", "volvo-novum/volvo-novum-medium-italic.woff", "volvo-novum/volvo-novum-medium-italic.eot", "volvo-novum/volvo-novum-medium-italic.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 700,
src: ["volvo-novum/volvo-novum-bold.woff2", "volvo-novum/volvo-novum-bold.woff", "volvo-novum/volvo-novum-bold.eot", "volvo-novum/volvo-novum-bold.svg"]
}, {
fontFamily: "Volvo Novum",
fontWeight: 700,
fontStyle: "italic",
src: ["volvo-novum/volvo-novum-bold-italic.woff2", "volvo-novum/volvo-novum-bold-italic.woff", "volvo-novum/volvo-novum-bold-italic.eot", "volvo-novum/volvo-novum-bold-italic.svg"]
}, {
fontFamily: "Volvo Serif",
fontWeight: 400,
src: ["volvo-serif/volvo-serif-regular.woff", "volvo-serif/volvo-serif-regular.eot", "volvo-serif/volvo-serif-regular.svg"]
}, {
fontFamily: "Volvo Serif",
fontWeight: 400,
fontStyle: "italic",
src: ["volvo-serif/volvo-serif-italic.woff", "volvo-serif/volvo-serif-italic.eot", "volvo-serif/volvo-serif-italic.svg"]
}, {
fontFamily: "Volvo Serif",
fontWeight: 700,
src: ["volvo-serif/volvo-serif-bold.woff", "volvo-serif/volvo-serif-bold.eot", "volvo-serif/volvo-serif-bold.svg"]
}, {
fontFamily: "Volvo Serif",
fontWeight: 700,
fontStyle: "italic",
src: ["volvo-serif/volvo-serif-bold-italic.woff", "volvo-serif/volvo-serif-bold-italic.eot", "volvo-serif/volvo-serif-bold-italic.svg"]
}];
var fontTypes = {
SANS: "Volvo Sans",
BROAD: "Volvo Broad",
NOVUM: "Volvo Novum",
SERIF: "Volvo Serif"
};

@@ -144,2 +238,4 @@ var logoImages = {

fonts: fonts,
fontsPath: "/",
fontTypes: fontTypes,
logoImages: logoImages,

@@ -146,0 +242,0 @@ logoImagesPath: "/",

17

package.json
{
"name": "vcc-ui",
"version": "1.0.0-rc.1",
"version": "1.0.0-rc.2",
"license": "LicenseRef-LICENSE",

@@ -35,2 +35,3 @@ "main": "lib/index.js",

"fela-preset-web": "^10.2.1",
"hex-to-rgba": "^1.0.2",
"react-fela": "^10.2.1"

@@ -51,8 +52,8 @@ },

"@babel/preset-react": "^7.0.0",
"@storybook/addon-actions": "^5.0.0",
"@storybook/addon-backgrounds": "^5.0.0",
"@storybook/addon-knobs": "^5.0.0",
"@storybook/addon-viewport": "^5.0.0",
"@storybook/cli": "^5.0.0",
"@storybook/react": "^5.0.0",
"@storybook/addon-actions": "^5.0.6",
"@storybook/addon-backgrounds": "^5.0.6",
"@storybook/addon-knobs": "^5.0.6",
"@storybook/addon-viewport": "^5.0.6",
"@storybook/cli": "^5.0.6",
"@storybook/react": "^5.0.6",
"babel-core": "^7.0.0-bridge.0",

@@ -82,3 +83,3 @@ "babel-eslint": "^9.0.0",

"serve": "^10.0.0",
"storybook-addon-jsx": "^6.0.0",
"storybook-addon-jsx": "^7.1.0",
"webpack": "^4.23.1",

@@ -85,0 +86,0 @@ "webpack-blocks": "^1.0.0"

assets/.DS_Store
es/components/select-input/custom-select.js
es/components/select-input/pure-select.js
es/components/select-input/styles.js
es/config-context.js
es/constants/breakpoints.js
es/constants/colors.js
es/constants/fonts.js
es/constants/icons.js
lib/components/select-input/custom-select.js
lib/components/select-input/pure-select.js
lib/components/select-input/styles.js
lib/config-context.js
lib/constants/breakpoints.js
lib/constants/colors.js
lib/constants/fonts.js
lib/constants/icons.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc