vcc-ui
Version:
VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.
421 lines (403 loc) • 16.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TypeScaleDisplay = exports.Card = exports.Divider = exports.Grid = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@storybook/react");
var _ = require("../../");
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 _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 Grid = function Grid(_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? 10 : _ref$size,
_ref$offset = _ref.offset,
offset = _ref$offset === void 0 ? 0 : _ref$offset,
_ref$hide = _ref.hide,
hide = _ref$hide === void 0 ? false : _ref$hide,
props = _objectWithoutProperties(_ref, ["size", "offset", "hide"]);
return _react.default.createElement(_.Block, _extends({}, props, {
extend: {
position: 'relative',
':before': {
display: 'block',
content: "''",
position: 'absolute',
opacity: hide ? 0 : 0.2,
pointerEvents: 'none',
top: "".concat(offset, "px"),
left: 0,
right: 0,
bottom: 0,
backgroundSize: "100% ".concat(size, "px"),
backgroundImage: 'linear-gradient(to right, green 1px, transparent 1px), linear-gradient(to bottom, green 1px, transparent 1px)'
}
}
}));
};
exports.Grid = Grid;
var LotsOfText = function LotsOfText(_ref2) {
var baseline = _ref2.baseline,
title = _ref2.title;
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_.Block, null, _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "peary"
}, title), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", _react.default.createElement("br", null), "Same line of text", _react.default.createElement("br", null), "still going on."), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "cook"
}, "cook"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "ride"
}, "This is a quote"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "hillary"
}, "I am a sub-heading"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", _react.default.createElement("br", null), "Same line of text", _react.default.createElement("br", null), "still going on."), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "peary"
}, "peary"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", _react.default.createElement("br", null), "Same line of text", _react.default.createElement("br", null), "still going on."), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "hillary"
}, "hillary"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "armstrong"
}, "armstrong"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", _react.default.createElement("br", null), "Same line of text", _react.default.createElement("br", null), "still going on."), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "peary"
}, "peary"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "cook"
}, "cook"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "amundsen"
}, "amundsen"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "ootah"
}, "ootah"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "hillary"
}, "hillary"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "columbus"
}, "columbus"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "amundsen"
}, "amundsen")), _react.default.createElement(_.Block, {
extend: {
width: '20px'
}
}), _react.default.createElement(_.Block, null, _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", _react.default.createElement("br", null), "Same line of text", _react.default.createElement("br", null), "still going on."), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", _react.default.createElement("br", null), "Same line of text", _react.default.createElement("br", null), "still going on."), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "armstrong"
}, "One small step for man"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "peary"
}, "Peary"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "amundsen"
}, "amundsen"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "peary"
}, "peary"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "cook"
}, "cook"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Same line of text", _react.default.createElement("br", null), "still going on."), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "hillary"
}, "hillary"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "ootah"
}, "ootah"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", _react.default.createElement("br", null), "Same line of text", _react.default.createElement("br", null), "still going on."), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "cook"
}, "cook"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "ootah"
}, "ootah"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "hillary"
}, "hillary"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "columbus"
}, "columbus"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), _react.default.createElement(_.Text, {
alignBaseline: baseline,
variant: "amundsen"
}, "amundsen")));
};
var Divider = function Divider() {
return _react.default.createElement(_.Block, {
extend: function extend(_ref3) {
var theme = _ref3.theme;
return {
width: 104,
height: 4,
margin: '0 auto',
'&:before': {
content: "''",
display: 'block',
width: '100%',
height: 2,
top: 1,
background: theme.color.ornament.border
}
};
}
});
};
exports.Divider = Divider;
var Card = function Card(_ref4) {
var children = _ref4.children,
title = _ref4.title,
subTitle = _ref4.subTitle;
return _react.default.createElement(_.Flex, null, _react.default.createElement(_.Flex, {
extend: function extend(_ref5) {
var theme = _ref5.theme;
return {
background: theme.color.background.secondary,
borderRadius: '16px'
};
}
}, _react.default.createElement(_.Spacer, {
size: 4
}), _react.default.createElement(_.Text, {
variant: "ootah"
}, title), _react.default.createElement(_.Spacer, {
size: 1
}), _react.default.createElement(_.Text, {
variant: "bates"
}, subTitle), _react.default.createElement(_.Spacer, {
size: 1
}), _react.default.createElement(Divider, null), _react.default.createElement(_.Spacer, {
size: 3
}), children, _react.default.createElement(_.Spacer, {
size: 4
})), _react.default.createElement(_.Spacer, {
size: 2
}));
};
exports.Card = Card;
var TypeScaleDisplay = function TypeScaleDisplay() {
return _react.default.createElement(_.Flex, null, _react.default.createElement(Card, {
title: "Headings",
subTitle: "3 separate styles, no variants"
}, _react.default.createElement(_.Text, {
variant: "peary"
}, "Peary"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(_.Text, {
variant: "cook"
}, "Cook"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(_.Text, {
variant: "ootah"
}, "Ootah")), _react.default.createElement(Card, {
title: "Sub-heading",
subTitle: "1 style with 2 variants"
}, _react.default.createElement(_.Text, {
variant: "hillary"
}, "Hillary - standard"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(_.Text, {
variant: "hillary",
subStyle: "inline-link",
href: "#"
}, "Hillary - Inline link"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(_.Text, {
variant: "hillary",
subStyle: "emphasis"
}, "Hillary - Emphasis")), _react.default.createElement(Card, {
title: "Body copy",
subTitle: "1 style with 2 variants"
}, _react.default.createElement(_.Text, null, "Columbus - Standard"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(_.Text, {
subStyle: "inline-link",
href: "#"
}, "Columbus - Inline link"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(_.Text, {
subStyle: "emphasis"
}, "Columbus - Emphasis")), _react.default.createElement(Card, {
title: "Micro copy",
subTitle: "1 style with 2 variants"
}, _react.default.createElement(_.Text, {
variant: "bates"
}, "Bates - Standard"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(_.Text, {
variant: "bates",
subStyle: "inline-link",
href: "#"
}, "Bates - Inline link"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(_.Text, {
variant: "bates",
subStyle: "emphasis"
}, "Bates - Emphasis")), _react.default.createElement(Card, {
title: "Button",
subTitle: "1 style with 1 variant"
}, _react.default.createElement(_.Text, {
variant: "amundsen"
}, "Amundsen")), _react.default.createElement(_.Spacer, {
size: 4
}), _react.default.createElement(_.Text, {
variant: "ootah"
}, "Outliers"), _react.default.createElement(_.Spacer, {
size: 1
}), _react.default.createElement(_.Text, {
variant: "bates"
}, "Useful type styles that sit outside the standard set"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(Card, {
title: "Quote",
subTitle: "3 separate styles, no variants"
}, _react.default.createElement(_.Text, {
variant: "armstrong"
}, "Armstrong"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(_.Text, {
variant: "jemison"
}, "Jemison"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(_.Text, {
variant: "ride"
}, "Ride")));
};
exports.TypeScaleDisplay = TypeScaleDisplay;
(0, _react2.storiesOf)('Typography/Text', module).add('Default', function () {
return _react.default.createElement(Grid, {
size: 4,
hide: 1
}, _react.default.createElement(_.Flex, {
extend: {
width: 375,
textAlign: 'center',
padding: 40
}
}, _react.default.createElement(_.Text, {
variant: "cook"
}, "Mobile Type Styles"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(_.Text, null, "Mobile type styles, sub-styles and vertical rhythm\u2014to be used across Volvo\u2019s digital ecosystem.", _react.default.createElement("br", null), _react.default.createElement("br", null), "Breakpoint group A / 0 - 479px"), _react.default.createElement(_.Spacer, {
size: 3
}), _react.default.createElement(Divider, null), _react.default.createElement(_.Spacer, {
size: 4
}), _react.default.createElement(_.Text, {
variant: "ootah"
}, "Standard set"), _react.default.createElement(_.Spacer, {
size: 1
}), _react.default.createElement(_.Text, {
variant: "bates"
}, "Harmonious type styles most commonly used"), _react.default.createElement(_.Spacer, {
size: 2
}), _react.default.createElement(TypeScaleDisplay, null)));
}).add('Baseline', function () {
return _react.default.createElement(Grid, {
size: 4,
hide: 0
}, _react.default.createElement(_.Block, {
extend: {
display: 'flex'
}
}, _react.default.createElement(LotsOfText, {
baseline: true,
title: "With Baseline"
}), _react.default.createElement(_.Block, {
extend: {
width: '100px'
}
}), _react.default.createElement(LotsOfText, {
baseline: false,
title: "Without Baseline"
})));
}).add('As combinations', function () {
return _react.default.createElement(Grid, {
size: 4,
hide: 0
}, _react.default.createElement(_.Text, {
as: "a",
variant: "hillary",
subStyle: "inline-link",
href: "#"
}, "This is a ", _react.default.createElement("br", null), "blockquote"), _react.default.createElement(_.Text, {
as: "h5",
variant: "peary"
}, "This is a ", _react.default.createElement("br", null), "blockquote"));
}).add('Nested styles and baselines', function () {
return _react.default.createElement(Grid, {
size: 4,
hide: 0
}, _react.default.createElement(_.Text, null, "Dooby ", _react.default.createElement(_.Text, {
subStyle: "inline-link"
}, "scooby"), " doo, ", _react.default.createElement("br", null), "where are you?"), _react.default.createElement(_.Text, {
variant: "jemison"
}, "I am", _react.default.createElement("br", null), "Armstrong"), _react.default.createElement(_.Block, {
extend: function extend(_ref6) {
var theme = _ref6.theme;
return {
background: theme.color.brand.primary
};
}
}, "This is a block"), _react.default.createElement(_.Text, null, "Dooby", ' ', _react.default.createElement(_.Text, {
subStyle: "inline-link",
extend: function extend(_ref7) {
var theme = _ref7.theme;
return {
background: theme.color.brand.primary
};
}
}, "scooby"), ' ', "doo, ", _react.default.createElement("br", null), "where are you?"));
});