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.
399 lines (393 loc) • 14.4 kB
JavaScript
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 { storiesOf } from '@storybook/react';
import { Text, Block, Spacer, Flex } from '../../';
export 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.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)'
}
}
}));
};
var LotsOfText = function LotsOfText(_ref2) {
var baseline = _ref2.baseline,
title = _ref2.title;
return React.createElement(React.Fragment, null, React.createElement(Block, null, React.createElement(Text, {
alignBaseline: baseline,
variant: "peary"
}, title), React.createElement(Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", React.createElement("br", null), "Same line of text", React.createElement("br", null), "still going on."), React.createElement(Text, {
alignBaseline: baseline,
variant: "cook"
}, "cook"), React.createElement(Text, {
alignBaseline: baseline,
variant: "ride"
}, "This is a quote"), React.createElement(Text, {
alignBaseline: baseline,
variant: "hillary"
}, "I am a sub-heading"), React.createElement(Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", React.createElement("br", null), "Same line of text", React.createElement("br", null), "still going on."), React.createElement(Text, {
alignBaseline: baseline,
variant: "peary"
}, "peary"), React.createElement(Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), React.createElement(Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", React.createElement("br", null), "Same line of text", React.createElement("br", null), "still going on."), React.createElement(Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), React.createElement(Text, {
alignBaseline: baseline,
variant: "hillary"
}, "hillary"), React.createElement(Text, {
alignBaseline: baseline,
variant: "armstrong"
}, "armstrong"), React.createElement(Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", React.createElement("br", null), "Same line of text", React.createElement("br", null), "still going on."), React.createElement(Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), React.createElement(Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text"), React.createElement(Text, {
alignBaseline: baseline,
variant: "peary"
}, "peary"), React.createElement(Text, {
alignBaseline: baseline,
variant: "cook"
}, "cook"), React.createElement(Text, {
alignBaseline: baseline,
variant: "amundsen"
}, "amundsen"), React.createElement(Text, {
alignBaseline: baseline,
variant: "ootah"
}, "ootah"), React.createElement(Text, {
alignBaseline: baseline,
variant: "hillary"
}, "hillary"), React.createElement(Text, {
alignBaseline: baseline,
variant: "columbus"
}, "columbus"), React.createElement(Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), React.createElement(Text, {
alignBaseline: baseline,
variant: "amundsen"
}, "amundsen")), React.createElement(Block, {
extend: {
width: '20px'
}
}), React.createElement(Block, null, React.createElement(Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", React.createElement("br", null), "Same line of text", React.createElement("br", null), "still going on."), React.createElement(Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", React.createElement("br", null), "Same line of text", React.createElement("br", null), "still going on."), React.createElement(Text, {
alignBaseline: baseline,
variant: "armstrong"
}, "One small step for man"), React.createElement(Text, {
alignBaseline: baseline,
variant: "peary"
}, "Peary"), React.createElement(Text, {
alignBaseline: baseline,
variant: "amundsen"
}, "amundsen"), React.createElement(Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text"), React.createElement(Text, {
alignBaseline: baseline,
variant: "peary"
}, "peary"), React.createElement(Text, {
alignBaseline: baseline,
variant: "cook"
}, "cook"), React.createElement(Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Same line of text", React.createElement("br", null), "still going on."), React.createElement(Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), React.createElement(Text, {
alignBaseline: baseline,
variant: "hillary"
}, "hillary"), React.createElement(Text, {
alignBaseline: baseline,
variant: "ootah"
}, "ootah"), React.createElement(Text, {
alignBaseline: baseline,
variant: "columbus"
}, "Line of text", React.createElement("br", null), "Same line of text", React.createElement("br", null), "still going on."), React.createElement(Text, {
alignBaseline: baseline,
variant: "cook"
}, "cook"), React.createElement(Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), React.createElement(Text, {
alignBaseline: baseline,
variant: "ootah"
}, "ootah"), React.createElement(Text, {
alignBaseline: baseline,
variant: "hillary"
}, "hillary"), React.createElement(Text, {
alignBaseline: baseline,
variant: "columbus"
}, "columbus"), React.createElement(Text, {
alignBaseline: baseline,
variant: "bates"
}, "bates"), React.createElement(Text, {
alignBaseline: baseline,
variant: "amundsen"
}, "amundsen")));
};
export var Divider = function Divider() {
return React.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
}
};
}
});
};
export var Card = function Card(_ref4) {
var children = _ref4.children,
title = _ref4.title,
subTitle = _ref4.subTitle;
return React.createElement(Flex, null, React.createElement(Flex, {
extend: function extend(_ref5) {
var theme = _ref5.theme;
return {
background: theme.color.background.secondary,
borderRadius: '16px'
};
}
}, React.createElement(Spacer, {
size: 4
}), React.createElement(Text, {
variant: "ootah"
}, title), React.createElement(Spacer, {
size: 1
}), React.createElement(Text, {
variant: "bates"
}, subTitle), React.createElement(Spacer, {
size: 1
}), React.createElement(Divider, null), React.createElement(Spacer, {
size: 3
}), children, React.createElement(Spacer, {
size: 4
})), React.createElement(Spacer, {
size: 2
}));
};
export var TypeScaleDisplay = function TypeScaleDisplay() {
return React.createElement(Flex, null, React.createElement(Card, {
title: "Headings",
subTitle: "3 separate styles, no variants"
}, React.createElement(Text, {
variant: "peary"
}, "Peary"), React.createElement(Spacer, {
size: 2
}), React.createElement(Text, {
variant: "cook"
}, "Cook"), React.createElement(Spacer, {
size: 2
}), React.createElement(Text, {
variant: "ootah"
}, "Ootah")), React.createElement(Card, {
title: "Sub-heading",
subTitle: "1 style with 2 variants"
}, React.createElement(Text, {
variant: "hillary"
}, "Hillary - standard"), React.createElement(Spacer, {
size: 2
}), React.createElement(Text, {
variant: "hillary",
subStyle: "inline-link",
href: "#"
}, "Hillary - Inline link"), React.createElement(Spacer, {
size: 2
}), React.createElement(Text, {
variant: "hillary",
subStyle: "emphasis"
}, "Hillary - Emphasis")), React.createElement(Card, {
title: "Body copy",
subTitle: "1 style with 2 variants"
}, React.createElement(Text, null, "Columbus - Standard"), React.createElement(Spacer, {
size: 2
}), React.createElement(Text, {
subStyle: "inline-link",
href: "#"
}, "Columbus - Inline link"), React.createElement(Spacer, {
size: 2
}), React.createElement(Text, {
subStyle: "emphasis"
}, "Columbus - Emphasis")), React.createElement(Card, {
title: "Micro copy",
subTitle: "1 style with 2 variants"
}, React.createElement(Text, {
variant: "bates"
}, "Bates - Standard"), React.createElement(Spacer, {
size: 2
}), React.createElement(Text, {
variant: "bates",
subStyle: "inline-link",
href: "#"
}, "Bates - Inline link"), React.createElement(Spacer, {
size: 2
}), React.createElement(Text, {
variant: "bates",
subStyle: "emphasis"
}, "Bates - Emphasis")), React.createElement(Card, {
title: "Button",
subTitle: "1 style with 1 variant"
}, React.createElement(Text, {
variant: "amundsen"
}, "Amundsen")), React.createElement(Spacer, {
size: 4
}), React.createElement(Text, {
variant: "ootah"
}, "Outliers"), React.createElement(Spacer, {
size: 1
}), React.createElement(Text, {
variant: "bates"
}, "Useful type styles that sit outside the standard set"), React.createElement(Spacer, {
size: 2
}), React.createElement(Card, {
title: "Quote",
subTitle: "3 separate styles, no variants"
}, React.createElement(Text, {
variant: "armstrong"
}, "Armstrong"), React.createElement(Spacer, {
size: 2
}), React.createElement(Text, {
variant: "jemison"
}, "Jemison"), React.createElement(Spacer, {
size: 2
}), React.createElement(Text, {
variant: "ride"
}, "Ride")));
};
storiesOf('Typography/Text', module).add('Default', function () {
return React.createElement(Grid, {
size: 4,
hide: 1
}, React.createElement(Flex, {
extend: {
width: 375,
textAlign: 'center',
padding: 40
}
}, React.createElement(Text, {
variant: "cook"
}, "Mobile Type Styles"), React.createElement(Spacer, {
size: 2
}), React.createElement(Text, null, "Mobile type styles, sub-styles and vertical rhythm\u2014to be used across Volvo\u2019s digital ecosystem.", React.createElement("br", null), React.createElement("br", null), "Breakpoint group A / 0 - 479px"), React.createElement(Spacer, {
size: 3
}), React.createElement(Divider, null), React.createElement(Spacer, {
size: 4
}), React.createElement(Text, {
variant: "ootah"
}, "Standard set"), React.createElement(Spacer, {
size: 1
}), React.createElement(Text, {
variant: "bates"
}, "Harmonious type styles most commonly used"), React.createElement(Spacer, {
size: 2
}), React.createElement(TypeScaleDisplay, null)));
}).add('Baseline', function () {
return React.createElement(Grid, {
size: 4,
hide: 0
}, React.createElement(Block, {
extend: {
display: 'flex'
}
}, React.createElement(LotsOfText, {
baseline: true,
title: "With Baseline"
}), React.createElement(Block, {
extend: {
width: '100px'
}
}), React.createElement(LotsOfText, {
baseline: false,
title: "Without Baseline"
})));
}).add('As combinations', function () {
return React.createElement(Grid, {
size: 4,
hide: 0
}, React.createElement(Text, {
as: "a",
variant: "hillary",
subStyle: "inline-link",
href: "#"
}, "This is a ", React.createElement("br", null), "blockquote"), React.createElement(Text, {
as: "h5",
variant: "peary"
}, "This is a ", React.createElement("br", null), "blockquote"));
}).add('Nested styles and baselines', function () {
return React.createElement(Grid, {
size: 4,
hide: 0
}, React.createElement(Text, null, "Dooby ", React.createElement(Text, {
subStyle: "inline-link"
}, "scooby"), " doo, ", React.createElement("br", null), "where are you?"), React.createElement(Text, {
variant: "jemison"
}, "I am", React.createElement("br", null), "Armstrong"), React.createElement(Block, {
extend: function extend(_ref6) {
var theme = _ref6.theme;
return {
background: theme.color.brand.primary
};
}
}, "This is a block"), React.createElement(Text, null, "Dooby", ' ', React.createElement(Text, {
subStyle: "inline-link",
extend: function extend(_ref7) {
var theme = _ref7.theme;
return {
background: theme.color.brand.primary
};
}
}, "scooby"), ' ', "doo, ", React.createElement("br", null), "where are you?"));
});