Socket
Socket
Sign inDemoInstall

@hig/typography

Package Overview
Dependencies
Maintainers
7
Versions
255
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hig/typography - npm Package Compare versions

Comparing version 0.2.0-alpha.fbb1eed0 to 1.0.0

CHANGELOG.md

1302

build/index.es.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { css } from 'emotion';
import ThemeContext from '@hig/theme-context';
var _VALID_COLORS = Object.freeze(["hig-white", "hig-cool-gray-70", "hig-blue-50", "hig-green-good", "hig-yellow-warning", "hig-red-alert"]);
var AVAILABLE_ALIGNMENTS = Object.freeze(["center", "justify", "left", "right"]);
var AVAILABLE_FONT_WEIGHTS = Object.freeze([300, 400, 500, 600, 700, "bold", // same as 700
"normal" // same as 400
]);
var AVAILABLE_VARIANTS = Object.freeze(["body", "caption", "h1", "h2", "h3"]);
var _VALID_SIZES = Object.freeze(["small", "medium", "large"]);
function stylesheet(props, themeData) {
var fontWeight = props.fontWeight,
align = props.align;
var _VALID_TYPES = Object.freeze(["h1", "h2", "h3", "text",
// Types below intended to be deprecated
"sub1", "sub2", "body", "bold", "disabled", "caption"]);
var variant = props.variant || "body";
return {
typography: {
color: themeData["typography." + variant + ".color"],
display: "block",
fontFamily: themeData["typography." + variant + ".fontFamily"],
fontSize: themeData["typography." + variant + ".fontSize"],
fontWeight: fontWeight || themeData["typography." + variant + ".fontWeight"],
lineHeight: themeData["typography." + variant + ".lineHeight"],
margin: 0,
textAlign: align || "initial"
}
};
}
var _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; };
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

@@ -27,691 +48,132 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function Typography() {
_classCallCheck(this, Typography);
var _ref;
return _possibleConstructorReturn(this, (Typography.__proto__ || Object.getPrototypeOf(Typography)).apply(this, arguments));
}
var _temp, _this, _ret;
_createClass(Typography, [{
key: "render",
value: function render() {
var _cx;
_classCallCheck(this, Typography);
var classes = cx("hig__typography", (_cx = {}, _defineProperty(_cx, "hig__typography__" + this.props.type, this.props.type), _defineProperty(_cx, "hig__typography--" + this.props.color, this.props.color), _defineProperty(_cx, "hig__typography--" + this.props.size, this.props.size), _defineProperty(_cx, "hig__typography--bold", this.props.bold), _defineProperty(_cx, "hig__typography--disabled", this.props.disabled), _cx));
/**
* N.B.: The intent is to apply opacity to the color. Typography components currently only render text, so
* applying opacity should have no side effects. If this component ever wraps styled content, we should reconsider
* this mechanism, because opacity in children nodes can be magnified by this parent node.
*/
var customStyles = typeof this.props.opacity === "number" ? { opacity: this.props.opacity } : {};
return React.createElement(
"span",
{ className: classes, style: customStyles },
this.props.text
);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
}]);
return Typography;
}(Component);
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Typography.__proto__ || Object.getPrototypeOf(Typography)).call.apply(_ref, [this].concat(args))), _this), _this.elementType = function () {
var _this$props = _this.props,
elementType = _this$props.elementType,
variant = _this$props.variant;
Typography.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES),
/**
* Indicates the initial Typography style
*/
type: PropTypes.oneOf(_VALID_TYPES).isRequired,
/**
* Text to render styled based on provided type
*/
text: PropTypes.string.isRequired
};
Typography.__docgenInfo = {
"description": "",
"displayName": "Typography",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
},
"type": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_TYPES"
},
"required": true,
"description": "Indicates the initial Typography style"
},
"text": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to render styled based on provided type"
}
}
};
if (elementType) {
return elementType;
}
var _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; };
var _createClass$1 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var H1 = function (_React$PureComponent) {
_inherits$1(H1, _React$PureComponent);
function H1() {
_classCallCheck$1(this, H1);
return _possibleConstructorReturn$1(this, (H1.__proto__ || Object.getPrototypeOf(H1)).apply(this, arguments));
return ["h1", "h2", "h3"].includes(variant) ? variant : "p";
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass$1(H1, [{
_createClass(Typography, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties(_props, ["children"]);
var _this2 = this;
return React.createElement(Typography, _extends({ type: "h1", text: children }, remainingProps));
}
}]);
return H1;
}(React.PureComponent);
H1.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
H1.__docgenInfo = {
"description": "",
"displayName": "H1",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$1 = 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; };
var _createClass$2 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var H2 = function (_React$PureComponent) {
_inherits$2(H2, _React$PureComponent);
function H2() {
_classCallCheck$2(this, H2);
return _possibleConstructorReturn$2(this, (H2.__proto__ || Object.getPrototypeOf(H2)).apply(this, arguments));
}
_createClass$2(H2, [{
key: "render",
value: function render() {
var _props = this.props,
align = _props.align,
children = _props.children,
remainingProps = _objectWithoutProperties$1(_props, ["children"]);
fontWeight = _props.fontWeight,
variant = _props.variant,
elementType = _props.elementType,
otherProps = _objectWithoutProperties(_props, ["align", "children", "fontWeight", "variant", "elementType"]);
return React.createElement(Typography, _extends$1({ type: "h2", text: children }, remainingProps));
}
}]);
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref2) {
var resolvedRoles = _ref2.resolvedRoles;
return H2;
}(React.PureComponent);
var styles = stylesheet({ align: align, fontWeight: fontWeight, variant: variant }, resolvedRoles);
H2.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
H2.__docgenInfo = {
"description": "",
"displayName": "H2",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var ElementType = _this2.elementType();
var _extends$2 = 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; };
var _createClass$3 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$3(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$3(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var H3 = function (_React$PureComponent) {
_inherits$3(H3, _React$PureComponent);
function H3() {
_classCallCheck$3(this, H3);
return _possibleConstructorReturn$3(this, (H3.__proto__ || Object.getPrototypeOf(H3)).apply(this, arguments));
}
_createClass$3(H3, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$2(_props, ["children"]);
return React.createElement(Typography, _extends$2({ type: "h3", text: children }, remainingProps));
return React.createElement(
ElementType,
_extends({ className: css(styles.typography) }, otherProps),
children
);
}
);
}
}]);
return H3;
}(React.PureComponent);
return Typography;
}(Component);
H3.propTypes = {
Typography.propTypes = {
/**
* Whether to render bold text
* Sets the horizontal alignment of the text
*/
bold: PropTypes.bool,
align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS),
/**
* Text to show inside the typography
* Enables specifying the semantic element to be rendered by the component
* If this prop is not provided, the semantic element will default to matching the variant (e.g. if the component
* variant is h1, the element will be `<h1>`) or if there is no semantic element matching the variant, it
* will default to `<p>`. You can provide elementType as a string, like "figcaption", or as a function, like
* `({children}) => (<figcaption>{children}</figcaption>)`.
*/
children: PropTypes.string.isRequired,
elementType: PropTypes.node,
/**
* Colors the text with one of the supported HIG colors
* Text to render
*/
color: PropTypes.oneOf(_VALID_COLORS),
children: PropTypes.node,
/**
* Whether to show text as disabled
* Specifies the weight (or boldness) of the font
*/
disabled: PropTypes.bool,
fontWeight: PropTypes.oneOf(AVAILABLE_FONT_WEIGHTS),
/**
* An opacity value to modify the color, between 0.0 and 1.0
* Indicates the initial Typography style
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
};
H3.__docgenInfo = {
Typography.__docgenInfo = {
"description": "",
"displayName": "H3",
"displayName": "Typography",
"props": {
"bold": {
"align": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
"value": "AVAILABLE_ALIGNMENTS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
"description": "Sets the horizontal alignment of the text"
},
"disabled": {
"elementType": {
"type": {
"name": "bool"
"name": "node"
},
"required": false,
"description": "Whether to show text as disabled"
"description": "Enables specifying the semantic element to be rendered by the component\nIf this prop is not provided, the semantic element will default to matching the variant (e.g. if the component\nvariant is h1, the element will be `<h1>`) or if there is no semantic element matching the variant, it\nwill default to `<p>`. You can provide elementType as a string, like \"figcaption\", or as a function, like\n`({children}) => (<figcaption>{children}</figcaption>)`."
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$3 = 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; };
var _createClass$4 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$3(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$4(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$4(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$4(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Text = function (_React$PureComponent) {
_inherits$4(Text, _React$PureComponent);
function Text() {
_classCallCheck$4(this, Text);
return _possibleConstructorReturn$4(this, (Text.__proto__ || Object.getPrototypeOf(Text)).apply(this, arguments));
}
_createClass$4(Text, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$3(_props, ["children"]);
return React.createElement(Typography, _extends$3({ type: "text", text: children }, remainingProps));
}
}]);
return Text;
}(React.PureComponent);
Text.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Text.__docgenInfo = {
"description": "",
"displayName": "Text",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
"name": "node"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
"description": "Text to render"
},
"disabled": {
"fontWeight": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
"value": "AVAILABLE_FONT_WEIGHTS"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$4 = 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; };
var _createClass$5 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$4(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$5(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$5(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$5(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Body = function (_React$PureComponent) {
_inherits$5(Body, _React$PureComponent);
function Body() {
_classCallCheck$5(this, Body);
return _possibleConstructorReturn$5(this, (Body.__proto__ || Object.getPrototypeOf(Body)).apply(this, arguments));
}
_createClass$5(Body, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$4(_props, ["children"]);
return React.createElement(Typography, _extends$4({ type: "body", text: children }, remainingProps));
}
}]);
return Body;
}(React.PureComponent);
Body.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Body.__docgenInfo = {
"description": "",
"displayName": "Body",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
"description": "Specifies the weight (or boldness) of the font"
},
"children": {
"variant": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
"value": "AVAILABLE_VARIANTS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
"description": "Indicates the initial Typography style"
}

@@ -721,573 +183,3 @@ }

var _extends$5 = 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; };
var _createClass$6 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$5(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$6(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$6(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$6(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Bold = function (_React$PureComponent) {
_inherits$6(Bold, _React$PureComponent);
function Bold() {
_classCallCheck$6(this, Bold);
return _possibleConstructorReturn$6(this, (Bold.__proto__ || Object.getPrototypeOf(Bold)).apply(this, arguments));
}
_createClass$6(Bold, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$5(_props, ["children"]);
return React.createElement(Typography, _extends$5({ type: "bold", text: children }, remainingProps));
}
}]);
return Bold;
}(React.PureComponent);
Bold.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Bold.__docgenInfo = {
"description": "",
"displayName": "Bold",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$6 = 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; };
var _createClass$7 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$6(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$7(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$7(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$7(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Caption = function (_React$PureComponent) {
_inherits$7(Caption, _React$PureComponent);
function Caption() {
_classCallCheck$7(this, Caption);
return _possibleConstructorReturn$7(this, (Caption.__proto__ || Object.getPrototypeOf(Caption)).apply(this, arguments));
}
_createClass$7(Caption, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$6(_props, ["children"]);
return React.createElement(Typography, _extends$6({ type: "caption", text: children }, remainingProps));
}
}]);
return Caption;
}(React.PureComponent);
Caption.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Caption.__docgenInfo = {
"description": "",
"displayName": "Caption",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$7 = 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; };
var _createClass$8 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$7(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$8(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$8(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$8(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Disabled = function (_React$PureComponent) {
_inherits$8(Disabled, _React$PureComponent);
function Disabled() {
_classCallCheck$8(this, Disabled);
return _possibleConstructorReturn$8(this, (Disabled.__proto__ || Object.getPrototypeOf(Disabled)).apply(this, arguments));
}
_createClass$8(Disabled, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$7(_props, ["children"]);
return React.createElement(Typography, _extends$7({ type: "disabled", text: children }, remainingProps));
}
}]);
return Disabled;
}(React.PureComponent);
Disabled.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Disabled.__docgenInfo = {
"description": "",
"displayName": "Disabled",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$8 = 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; };
var _createClass$9 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$8(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$9(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$9(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$9(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Sub1 = function (_React$PureComponent) {
_inherits$9(Sub1, _React$PureComponent);
function Sub1() {
_classCallCheck$9(this, Sub1);
return _possibleConstructorReturn$9(this, (Sub1.__proto__ || Object.getPrototypeOf(Sub1)).apply(this, arguments));
}
_createClass$9(Sub1, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$8(_props, ["children"]);
return React.createElement(Typography, _extends$8({ type: "sub1", text: children }, remainingProps));
}
}]);
return Sub1;
}(React.PureComponent);
Sub1.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Sub1.__docgenInfo = {
"description": "",
"displayName": "Sub1",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$9 = 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; };
var _createClass$10 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$9(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$10(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$10(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$10(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Sub2 = function (_React$PureComponent) {
_inherits$10(Sub2, _React$PureComponent);
function Sub2() {
_classCallCheck$10(this, Sub2);
return _possibleConstructorReturn$10(this, (Sub2.__proto__ || Object.getPrototypeOf(Sub2)).apply(this, arguments));
}
_createClass$10(Sub2, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$9(_props, ["children"]);
return React.createElement(Typography, _extends$9({ type: "sub2", text: children }, remainingProps));
}
}]);
return Sub2;
}(React.PureComponent);
Sub2.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Sub2.__docgenInfo = {
"description": "",
"displayName": "Sub2",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
export default Typography;
export { H1, H2, H3, Text, Body, Bold, Caption, Disabled, Sub1, Sub2 };
export { AVAILABLE_ALIGNMENTS, AVAILABLE_FONT_WEIGHTS, AVAILABLE_VARIANTS };

1313

build/index.js

@@ -10,15 +10,36 @@ 'use strict';

var PropTypes = _interopDefault(require('prop-types'));
var cx = _interopDefault(require('classnames'));
var emotion = require('emotion');
var ThemeContext = _interopDefault(require('@hig/theme-context'));
var _VALID_COLORS = Object.freeze(["hig-white", "hig-cool-gray-70", "hig-blue-50", "hig-green-good", "hig-yellow-warning", "hig-red-alert"]);
var AVAILABLE_ALIGNMENTS = Object.freeze(["center", "justify", "left", "right"]);
var AVAILABLE_FONT_WEIGHTS = Object.freeze([300, 400, 500, 600, 700, "bold", // same as 700
"normal" // same as 400
]);
var AVAILABLE_VARIANTS = Object.freeze(["body", "caption", "h1", "h2", "h3"]);
var _VALID_SIZES = Object.freeze(["small", "medium", "large"]);
function stylesheet(props, themeData) {
var fontWeight = props.fontWeight,
align = props.align;
var _VALID_TYPES = Object.freeze(["h1", "h2", "h3", "text",
// Types below intended to be deprecated
"sub1", "sub2", "body", "bold", "disabled", "caption"]);
var variant = props.variant || "body";
return {
typography: {
color: themeData["typography." + variant + ".color"],
display: "block",
fontFamily: themeData["typography." + variant + ".fontFamily"],
fontSize: themeData["typography." + variant + ".fontSize"],
fontWeight: fontWeight || themeData["typography." + variant + ".fontWeight"],
lineHeight: themeData["typography." + variant + ".lineHeight"],
margin: 0,
textAlign: align || "initial"
}
};
}
var _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; };
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
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(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

@@ -35,691 +56,132 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function Typography() {
_classCallCheck(this, Typography);
var _ref;
return _possibleConstructorReturn(this, (Typography.__proto__ || Object.getPrototypeOf(Typography)).apply(this, arguments));
}
var _temp, _this, _ret;
_createClass(Typography, [{
key: "render",
value: function render() {
var _cx;
_classCallCheck(this, Typography);
var classes = cx("hig__typography", (_cx = {}, _defineProperty(_cx, "hig__typography__" + this.props.type, this.props.type), _defineProperty(_cx, "hig__typography--" + this.props.color, this.props.color), _defineProperty(_cx, "hig__typography--" + this.props.size, this.props.size), _defineProperty(_cx, "hig__typography--bold", this.props.bold), _defineProperty(_cx, "hig__typography--disabled", this.props.disabled), _cx));
/**
* N.B.: The intent is to apply opacity to the color. Typography components currently only render text, so
* applying opacity should have no side effects. If this component ever wraps styled content, we should reconsider
* this mechanism, because opacity in children nodes can be magnified by this parent node.
*/
var customStyles = typeof this.props.opacity === "number" ? { opacity: this.props.opacity } : {};
return React__default.createElement(
"span",
{ className: classes, style: customStyles },
this.props.text
);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
}]);
return Typography;
}(React.Component);
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Typography.__proto__ || Object.getPrototypeOf(Typography)).call.apply(_ref, [this].concat(args))), _this), _this.elementType = function () {
var _this$props = _this.props,
elementType = _this$props.elementType,
variant = _this$props.variant;
Typography.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES),
/**
* Indicates the initial Typography style
*/
type: PropTypes.oneOf(_VALID_TYPES).isRequired,
/**
* Text to render styled based on provided type
*/
text: PropTypes.string.isRequired
};
Typography.__docgenInfo = {
"description": "",
"displayName": "Typography",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
},
"type": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_TYPES"
},
"required": true,
"description": "Indicates the initial Typography style"
},
"text": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to render styled based on provided type"
}
}
};
if (elementType) {
return elementType;
}
var _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; };
var _createClass$1 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var H1 = function (_React$PureComponent) {
_inherits$1(H1, _React$PureComponent);
function H1() {
_classCallCheck$1(this, H1);
return _possibleConstructorReturn$1(this, (H1.__proto__ || Object.getPrototypeOf(H1)).apply(this, arguments));
return ["h1", "h2", "h3"].includes(variant) ? variant : "p";
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass$1(H1, [{
_createClass(Typography, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties(_props, ["children"]);
var _this2 = this;
return React__default.createElement(Typography, _extends({ type: "h1", text: children }, remainingProps));
}
}]);
return H1;
}(React__default.PureComponent);
H1.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
H1.__docgenInfo = {
"description": "",
"displayName": "H1",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$1 = 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; };
var _createClass$2 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var H2 = function (_React$PureComponent) {
_inherits$2(H2, _React$PureComponent);
function H2() {
_classCallCheck$2(this, H2);
return _possibleConstructorReturn$2(this, (H2.__proto__ || Object.getPrototypeOf(H2)).apply(this, arguments));
}
_createClass$2(H2, [{
key: "render",
value: function render() {
var _props = this.props,
align = _props.align,
children = _props.children,
remainingProps = _objectWithoutProperties$1(_props, ["children"]);
fontWeight = _props.fontWeight,
variant = _props.variant,
elementType = _props.elementType,
otherProps = _objectWithoutProperties(_props, ["align", "children", "fontWeight", "variant", "elementType"]);
return React__default.createElement(Typography, _extends$1({ type: "h2", text: children }, remainingProps));
}
}]);
return React__default.createElement(
ThemeContext.Consumer,
null,
function (_ref2) {
var resolvedRoles = _ref2.resolvedRoles;
return H2;
}(React__default.PureComponent);
var styles = stylesheet({ align: align, fontWeight: fontWeight, variant: variant }, resolvedRoles);
H2.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
H2.__docgenInfo = {
"description": "",
"displayName": "H2",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var ElementType = _this2.elementType();
var _extends$2 = 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; };
var _createClass$3 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$3(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$3(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var H3 = function (_React$PureComponent) {
_inherits$3(H3, _React$PureComponent);
function H3() {
_classCallCheck$3(this, H3);
return _possibleConstructorReturn$3(this, (H3.__proto__ || Object.getPrototypeOf(H3)).apply(this, arguments));
}
_createClass$3(H3, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$2(_props, ["children"]);
return React__default.createElement(Typography, _extends$2({ type: "h3", text: children }, remainingProps));
return React__default.createElement(
ElementType,
_extends({ className: emotion.css(styles.typography) }, otherProps),
children
);
}
);
}
}]);
return H3;
}(React__default.PureComponent);
return Typography;
}(React.Component);
H3.propTypes = {
Typography.propTypes = {
/**
* Whether to render bold text
* Sets the horizontal alignment of the text
*/
bold: PropTypes.bool,
align: PropTypes.oneOf(AVAILABLE_ALIGNMENTS),
/**
* Text to show inside the typography
* Enables specifying the semantic element to be rendered by the component
* If this prop is not provided, the semantic element will default to matching the variant (e.g. if the component
* variant is h1, the element will be `<h1>`) or if there is no semantic element matching the variant, it
* will default to `<p>`. You can provide elementType as a string, like "figcaption", or as a function, like
* `({children}) => (<figcaption>{children}</figcaption>)`.
*/
children: PropTypes.string.isRequired,
elementType: PropTypes.node,
/**
* Colors the text with one of the supported HIG colors
* Text to render
*/
color: PropTypes.oneOf(_VALID_COLORS),
children: PropTypes.node,
/**
* Whether to show text as disabled
* Specifies the weight (or boldness) of the font
*/
disabled: PropTypes.bool,
fontWeight: PropTypes.oneOf(AVAILABLE_FONT_WEIGHTS),
/**
* An opacity value to modify the color, between 0.0 and 1.0
* Indicates the initial Typography style
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
variant: PropTypes.oneOf(AVAILABLE_VARIANTS)
};
H3.__docgenInfo = {
Typography.__docgenInfo = {
"description": "",
"displayName": "H3",
"displayName": "Typography",
"props": {
"bold": {
"align": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
"value": "AVAILABLE_ALIGNMENTS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
"description": "Sets the horizontal alignment of the text"
},
"disabled": {
"elementType": {
"type": {
"name": "bool"
"name": "node"
},
"required": false,
"description": "Whether to show text as disabled"
"description": "Enables specifying the semantic element to be rendered by the component\nIf this prop is not provided, the semantic element will default to matching the variant (e.g. if the component\nvariant is h1, the element will be `<h1>`) or if there is no semantic element matching the variant, it\nwill default to `<p>`. You can provide elementType as a string, like \"figcaption\", or as a function, like\n`({children}) => (<figcaption>{children}</figcaption>)`."
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$3 = 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; };
var _createClass$4 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$3(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$4(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$4(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$4(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Text = function (_React$PureComponent) {
_inherits$4(Text, _React$PureComponent);
function Text() {
_classCallCheck$4(this, Text);
return _possibleConstructorReturn$4(this, (Text.__proto__ || Object.getPrototypeOf(Text)).apply(this, arguments));
}
_createClass$4(Text, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$3(_props, ["children"]);
return React__default.createElement(Typography, _extends$3({ type: "text", text: children }, remainingProps));
}
}]);
return Text;
}(React__default.PureComponent);
Text.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Text.__docgenInfo = {
"description": "",
"displayName": "Text",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
"name": "node"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
"description": "Text to render"
},
"disabled": {
"fontWeight": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
"value": "AVAILABLE_FONT_WEIGHTS"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$4 = 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; };
var _createClass$5 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$4(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$5(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$5(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$5(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Body = function (_React$PureComponent) {
_inherits$5(Body, _React$PureComponent);
function Body() {
_classCallCheck$5(this, Body);
return _possibleConstructorReturn$5(this, (Body.__proto__ || Object.getPrototypeOf(Body)).apply(this, arguments));
}
_createClass$5(Body, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$4(_props, ["children"]);
return React__default.createElement(Typography, _extends$4({ type: "body", text: children }, remainingProps));
}
}]);
return Body;
}(React__default.PureComponent);
Body.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Body.__docgenInfo = {
"description": "",
"displayName": "Body",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
"description": "Specifies the weight (or boldness) of the font"
},
"children": {
"variant": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
"value": "AVAILABLE_VARIANTS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
"description": "Indicates the initial Typography style"
}

@@ -729,582 +191,5 @@ }

var _extends$5 = 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; };
var _createClass$6 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$5(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$6(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$6(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$6(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Bold = function (_React$PureComponent) {
_inherits$6(Bold, _React$PureComponent);
function Bold() {
_classCallCheck$6(this, Bold);
return _possibleConstructorReturn$6(this, (Bold.__proto__ || Object.getPrototypeOf(Bold)).apply(this, arguments));
}
_createClass$6(Bold, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$5(_props, ["children"]);
return React__default.createElement(Typography, _extends$5({ type: "bold", text: children }, remainingProps));
}
}]);
return Bold;
}(React__default.PureComponent);
Bold.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Bold.__docgenInfo = {
"description": "",
"displayName": "Bold",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$6 = 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; };
var _createClass$7 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$6(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$7(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$7(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$7(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Caption = function (_React$PureComponent) {
_inherits$7(Caption, _React$PureComponent);
function Caption() {
_classCallCheck$7(this, Caption);
return _possibleConstructorReturn$7(this, (Caption.__proto__ || Object.getPrototypeOf(Caption)).apply(this, arguments));
}
_createClass$7(Caption, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$6(_props, ["children"]);
return React__default.createElement(Typography, _extends$6({ type: "caption", text: children }, remainingProps));
}
}]);
return Caption;
}(React__default.PureComponent);
Caption.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Caption.__docgenInfo = {
"description": "",
"displayName": "Caption",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$7 = 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; };
var _createClass$8 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$7(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$8(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$8(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$8(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Disabled = function (_React$PureComponent) {
_inherits$8(Disabled, _React$PureComponent);
function Disabled() {
_classCallCheck$8(this, Disabled);
return _possibleConstructorReturn$8(this, (Disabled.__proto__ || Object.getPrototypeOf(Disabled)).apply(this, arguments));
}
_createClass$8(Disabled, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$7(_props, ["children"]);
return React__default.createElement(Typography, _extends$7({ type: "disabled", text: children }, remainingProps));
}
}]);
return Disabled;
}(React__default.PureComponent);
Disabled.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Disabled.__docgenInfo = {
"description": "",
"displayName": "Disabled",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$8 = 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; };
var _createClass$9 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$8(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$9(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$9(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$9(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Sub1 = function (_React$PureComponent) {
_inherits$9(Sub1, _React$PureComponent);
function Sub1() {
_classCallCheck$9(this, Sub1);
return _possibleConstructorReturn$9(this, (Sub1.__proto__ || Object.getPrototypeOf(Sub1)).apply(this, arguments));
}
_createClass$9(Sub1, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$8(_props, ["children"]);
return React__default.createElement(Typography, _extends$8({ type: "sub1", text: children }, remainingProps));
}
}]);
return Sub1;
}(React__default.PureComponent);
Sub1.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Sub1.__docgenInfo = {
"description": "",
"displayName": "Sub1",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
var _extends$9 = 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; };
var _createClass$10 = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _objectWithoutProperties$9(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck$10(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn$10(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits$10(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Sub2 = function (_React$PureComponent) {
_inherits$10(Sub2, _React$PureComponent);
function Sub2() {
_classCallCheck$10(this, Sub2);
return _possibleConstructorReturn$10(this, (Sub2.__proto__ || Object.getPrototypeOf(Sub2)).apply(this, arguments));
}
_createClass$10(Sub2, [{
key: "render",
value: function render() {
var _props = this.props,
children = _props.children,
remainingProps = _objectWithoutProperties$9(_props, ["children"]);
return React__default.createElement(Typography, _extends$9({ type: "sub2", text: children }, remainingProps));
}
}]);
return Sub2;
}(React__default.PureComponent);
Sub2.propTypes = {
/**
* Whether to render bold text
*/
bold: PropTypes.bool,
/**
* Text to show inside the typography
*/
children: PropTypes.string.isRequired,
/**
* Colors the text with one of the supported HIG colors
*/
color: PropTypes.oneOf(_VALID_COLORS),
/**
* Whether to show text as disabled
*/
disabled: PropTypes.bool,
/**
* An opacity value to modify the color, between 0.0 and 1.0
*/
opacity: PropTypes.number,
/**
* Sizes the text with one of the supported modifiers
*/
size: PropTypes.oneOf(_VALID_SIZES)
};
Sub2.__docgenInfo = {
"description": "",
"displayName": "Sub2",
"props": {
"bold": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to render bold text"
},
"children": {
"type": {
"name": "string"
},
"required": true,
"description": "Text to show inside the typography"
},
"color": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_COLORS"
},
"required": false,
"description": "Colors the text with one of the supported HIG colors"
},
"disabled": {
"type": {
"name": "bool"
},
"required": false,
"description": "Whether to show text as disabled"
},
"opacity": {
"type": {
"name": "number"
},
"required": false,
"description": "An opacity value to modify the color, between 0.0 and 1.0"
},
"size": {
"type": {
"name": "enum",
"computed": true,
"value": "_VALID_SIZES"
},
"required": false,
"description": "Sizes the text with one of the supported modifiers"
}
}
};
exports.default = Typography;
exports.H1 = H1;
exports.H2 = H2;
exports.H3 = H3;
exports.Text = Text;
exports.Body = Body;
exports.Bold = Bold;
exports.Caption = Caption;
exports.Disabled = Disabled;
exports.Sub1 = Sub1;
exports.Sub2 = Sub2;
exports.AVAILABLE_ALIGNMENTS = AVAILABLE_ALIGNMENTS;
exports.AVAILABLE_FONT_WEIGHTS = AVAILABLE_FONT_WEIGHTS;
exports.AVAILABLE_VARIANTS = AVAILABLE_VARIANTS;

21

package.json
{
"name": "@hig/typography",
"version": "0.2.0-alpha.fbb1eed0",
"version": "1.0.0",
"description": "HIG Typography components",

@@ -17,3 +17,2 @@ "author": "Autodesk Inc.",

"module": "build/index.es.js",
"style": "build/index.css",
"files": [

@@ -23,11 +22,13 @@ "build/*"

"dependencies": {
"classnames": "^2.2.5",
"@hig/theme-context": "^1.0.1",
"emotion": "^10.0.0",
"prop-types": "^15.6.1"
},
"devDependencies": {
"@hig/babel-preset": "0.2.0-alpha.fbb1eed0",
"@hig/eslint-config": "0.2.0-alpha.fbb1eed0",
"@hig/scripts": "0.2.0-alpha.fbb1eed0",
"@hig/semantic-release-config": "0.2.0-alpha.fbb1eed0",
"@hig/styles": "^0.1.1"
"@hig/babel-preset": "^0.1.1",
"@hig/eslint-config": "^0.1.0",
"@hig/jest-preset": "^0.1.0",
"@hig/scripts": "^0.1.2",
"@hig/semantic-release-config": "^0.1.0",
"@hig/styles": "^0.3.0"
},

@@ -40,2 +41,3 @@ "peerDependencies": {

"lint": "hig-scripts-lint",
"test": "hig-scripts-test",
"release": "hig-scripts-release"

@@ -46,2 +48,5 @@ },

},
"jest": {
"preset": "@hig/jest-preset"
},
"release": {

@@ -48,0 +53,0 @@ "extends": "@hig/semantic-release-config"

8

README.md

@@ -10,3 +10,3 @@ # Typography

```
yarn add @hig/typography
yarn add @hig/typography @hig/fonts
```

@@ -17,4 +17,4 @@

```
import { Text } from '@hig/typography';
import '@hig/typography/build/index.css';
import Typography from '@hig/typography';
import "@hig/fonts/build/ArtifaktElement.css";
```

@@ -25,3 +25,3 @@

```jsx
<Text>Artifakt Element is the preferred font.</Text>
<Typography>Artifakt Element is the preferred font.</Typography>
```
build/index.css

Sorry, the diff of this file is not supported yet

build/index.es.css

Sorry, the diff of this file is not supported yet

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