@khanacademy/wonder-blocks-typography 1.1.25

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Khan Academy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/es/index.js

@@ -0,0 +1,460 @@
+import _extends from '@babel/runtime/helpers/extends';
+import { StyleSheet } from 'aphrodite';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
+import { Component, createElement } from 'react';
+import { Text } from '@khanacademy/wonder-blocks-core';
+
+const Regular = 400;
+const Bold = 700;
+const Black = 900;
+const mobile = "@media (max-width: 1023px)";
+const desktop = "@media (min-width: 1024px)";
+const common = {
+  display: "block"
+};
+const SansFamily = 'Lato, "Noto Sans", sans-serif'; // TODO(kevinb): Use Minion Pro here
+
+const SerifFamily = '"Noto Serif", serif';
+const InconsolataFamily = "Inconsolata, monospace";
+const styles = StyleSheet.create({
+  Title: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Black,
+    [desktop]: {
+      fontSize: 36,
+      lineHeight: "40px"
+    },
+    [mobile]: {
+      fontSize: 28,
+      lineHeight: "32px"
+    }
+  }),
+  Tagline: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Regular,
+    fontSize: 20,
+    lineHeight: "24px"
+  }),
+  HeadingLarge: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Bold,
+    [desktop]: {
+      fontSize: 28,
+      lineHeight: "32px"
+    },
+    [mobile]: {
+      fontSize: 24,
+      lineHeight: "28px"
+    }
+  }),
+  HeadingMedium: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Bold,
+    [desktop]: {
+      fontSize: 24,
+      lineHeight: "28px"
+    },
+    [mobile]: {
+      fontSize: 22,
+      lineHeight: "26px"
+    }
+  }),
+  HeadingSmall: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: "24px"
+  }),
+  HeadingXSmall: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Bold,
+    fontSize: 12,
+    lineHeight: "16px",
+    letterSpacing: 0.6,
+    textTransform: "uppercase"
+  }),
+  BodySerifBlock: _extends({}, common, {
+    fontFamily: SerifFamily,
+    fontWeight: Regular,
+    fontSize: 22,
+    lineHeight: "28px"
+  }),
+  BodySerif: _extends({}, common, {
+    fontFamily: SerifFamily,
+    fontWeight: Regular,
+    fontSize: 18,
+    lineHeight: "22px"
+  }),
+  BodyMonospace: _extends({}, common, {
+    fontFamily: InconsolataFamily,
+    fontWeight: Regular,
+    fontSize: 17,
+    lineHeight: "22px"
+  }),
+  Body: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Regular,
+    fontSize: 16,
+    lineHeight: "22px"
+  }),
+  LabelLarge: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: "20px"
+  }),
+  LabelMedium: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Regular,
+    fontSize: 16,
+    lineHeight: "20px"
+  }),
+  LabelSmall: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Regular,
+    fontSize: 14,
+    lineHeight: "18px"
+  }),
+  LabelXSmall: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Regular,
+    fontSize: 12,
+    lineHeight: "16px"
+  }),
+  Caption: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Regular,
+    fontSize: 14,
+    lineHeight: "20px"
+  }),
+  Footnote: _extends({}, common, {
+    fontFamily: SansFamily,
+    fontWeight: Regular,
+    fontSize: 12,
+    lineHeight: "18px"
+  })
+});
+
+const _excluded = ["style", "children"];
+// TODO(alex): Once style prop validation works, if all of the style prop flow
+//             types are the same then switch to using functional components.
+class Title extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.Title, style]
+    }), children);
+  }
+
+}
+Title.defaultProps = {
+  tag: "h1"
+};
+
+const _excluded$1 = ["style", "children"];
+class HeadingLarge extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.HeadingLarge, style]
+    }), children);
+  }
+
+}
+HeadingLarge.defaultProps = {
+  tag: "h2"
+};
+
+const _excluded$2 = ["style", "children"];
+class HeadingMedium extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$2);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.HeadingMedium, style]
+    }), children);
+  }
+
+}
+HeadingMedium.defaultProps = {
+  tag: "h3"
+};
+
+const _excluded$3 = ["style", "children"];
+class HeadingSmall extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.HeadingSmall, style]
+    }), children);
+  }
+
+}
+HeadingSmall.defaultProps = {
+  tag: "h4"
+};
+
+const _excluded$4 = ["style", "children"];
+class HeadingXSmall extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$4);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.HeadingXSmall, style]
+    }), children);
+  }
+
+}
+HeadingXSmall.defaultProps = {
+  tag: "h4"
+};
+
+const _excluded$5 = ["style", "children"];
+class BodySerifBlock extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.BodySerifBlock, style]
+    }), children);
+  }
+
+}
+BodySerifBlock.defaultProps = {
+  tag: "span"
+};
+
+const _excluded$6 = ["style", "children"];
+class BodySerif extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$6);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.BodySerif, style]
+    }), children);
+  }
+
+}
+BodySerif.defaultProps = {
+  tag: "span"
+};
+
+const _excluded$7 = ["style", "children"];
+class BodyMonospace extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$7);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.BodyMonospace, style]
+    }), children);
+  }
+
+}
+BodyMonospace.defaultProps = {
+  tag: "span"
+};
+
+const _excluded$8 = ["style", "children"];
+class Body extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$8);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.Body, style]
+    }), children);
+  }
+
+}
+Body.defaultProps = {
+  tag: "span"
+};
+
+const _excluded$9 = ["style", "children"];
+class LabelLarge extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$9);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.LabelLarge, style]
+    }), children);
+  }
+
+}
+LabelLarge.defaultProps = {
+  tag: "span"
+};
+
+const _excluded$a = ["style", "children"];
+class LabelMedium extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$a);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.LabelMedium, style]
+    }), children);
+  }
+
+}
+LabelMedium.defaultProps = {
+  tag: "span"
+};
+
+const _excluded$b = ["style", "children"];
+class LabelSmall extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$b);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.LabelSmall, style]
+    }), children);
+  }
+
+}
+LabelSmall.defaultProps = {
+  tag: "span"
+};
+
+const _excluded$c = ["style", "children"];
+class LabelXSmall extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$c);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.LabelXSmall, style]
+    }), children);
+  }
+
+}
+LabelXSmall.defaultProps = {
+  tag: "span"
+};
+
+const _excluded$d = ["style", "children"];
+class Tagline extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$d);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.Tagline, style]
+    }), children);
+  }
+
+}
+Tagline.defaultProps = {
+  tag: "span"
+};
+
+const _excluded$e = ["style", "children"];
+class Caption extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$e);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.Caption, style]
+    }), children);
+  }
+
+}
+Caption.defaultProps = {
+  tag: "span"
+};
+
+const _excluded$f = ["style", "children"];
+class Footnote extends Component {
+  render() {
+    const _this$props = this.props,
+          {
+      style,
+      children
+    } = _this$props,
+          otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$f);
+
+    return /*#__PURE__*/createElement(Text, _extends({}, otherProps, {
+      style: [styles.Footnote, style]
+    }), children);
+  }
+
+}
+Footnote.defaultProps = {
+  tag: "span"
+};
+
+export { Body, BodyMonospace, BodySerif, BodySerifBlock, Caption, Footnote, HeadingLarge, HeadingMedium, HeadingSmall, HeadingXSmall, LabelLarge, LabelMedium, LabelSmall, LabelXSmall, Tagline, Title, styles };