design-system-simplefi
Version:
Design System for SimpleFi Applications
71 lines • 5.37 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from 'react';
import styled from 'styled-components';
import { typography } from '../../src/theme/typography';
var List = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n font-family: \"Nunito Sans\",-apple-system,\".SFNSText-Regular\",\"San Francisco\",BlinkMacSystemFont,\"Segoe UI\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;\n margin: 0;\n font-size: 14px;\n line-height: 20px;\n display: flex;\n flex-direction: column;\n"], ["\n font-family: \"Nunito Sans\",-apple-system,\".SFNSText-Regular\",\"San Francisco\",BlinkMacSystemFont,\"Segoe UI\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;\n margin: 0;\n font-size: 14px;\n line-height: 20px;\n display: flex;\n flex-direction: column;\n"])));
var ListHeading = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-bottom: 20px;\n font-weight: 700;\n color: rgba(51,51,51,0.6);\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n padding-bottom: 20px;\n font-weight: 700;\n color: rgba(51,51,51,0.6);\n"])));
var ListName = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 0 0 35%;\n"], ["\n flex: 0 0 35%;\n"])));
var ListSample = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n"], ["\n flex: 1;\n"])));
var Item = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n margin-bottom: 30px;\n"], ["\n display: flex;\n align-items: flex-start;\n margin-bottom: 30px;\n"])));
var ItemDescription = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n flex: 0 0 35%;\n line-height: 20px;\n"], ["\n flex: 0 0 35%;\n line-height: 20px;\n"])));
var ItemTitle = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-weight: 700;\n color: #333333;\n word-break: break;\n"], ["\n font-weight: 700;\n color: #333333;\n word-break: break;\n"])));
var ItemSubtitle = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: rgba(51,51,51,0.8);\n"], ["\n color: rgba(51,51,51,0.8);\n"])));
;
var SampleText = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n flex: 1;\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"], ["\n flex: 1;\n font-family: ", ";\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
var fontFamily = _a.fontFamily;
return fontFamily;
}, function (_a) {
var fontWeight = _a.fontWeight;
return fontWeight;
}, function (_a) {
var fontSize = _a.fontSize;
return fontSize;
}, function (_a) {
var lineHeight = _a.lineHeight;
return lineHeight;
});
;
export var FontItem = function (_a) {
var title = _a.title, subtitle = _a.subtitle, _b = _a.fontFamily, fontFamily = _b === void 0 ? typography.family.base : _b, _c = _a.fontWeight, fontWeight = _c === void 0 ? typography.weight.regular : _c, _d = _a.fontSize, fontSize = _d === void 0 ? typography.size.lg : _d, _e = _a.lineHeight, lineHeight = _e === void 0 ? typography.lineHeight.lg : _e, sampleText = _a.sampleText;
return (React.createElement(Item, null,
React.createElement(ItemDescription, null,
React.createElement(ItemTitle, null, title),
React.createElement(ItemSubtitle, null, subtitle)),
React.createElement(SampleText, { fontFamily: fontFamily, fontWeight: fontWeight, fontSize: fontSize, lineHeight: lineHeight }, sampleText)));
};
/* TODO: migrate to `./components` */
export var FontPalette = function (_a) {
var children = _a.children, props = __rest(_a, ["children"]);
return (React.createElement(List, __assign({}, props),
React.createElement(ListHeading, null,
React.createElement(ListName, null, "Name"),
React.createElement(ListSample, null, "Sample")),
children));
};
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
//# sourceMappingURL=FontPalette.js.map