@khanacademy/wonder-blocks-typography 1.1.25

package/src/components/label-small.js

@@ -0,0 +1,26 @@
+// @flow
+import * as React from "react";
+import {Text} from "@khanacademy/wonder-blocks-core";
+
+import styles from "../util/styles.js";
+
+import type {Props} from "../util/types.js";
+
+type DefaultProps = {|
+    tag: $PropertyType<Props, "tag">,
+|};
+
+export default class LabelSmall extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        tag: "span",
+    };
+
+    render(): React.Node {
+        const {style, children, ...otherProps} = this.props;
+        return (
+            <Text {...otherProps} style={[styles.LabelSmall, style]}>
+                {children}
+            </Text>
+        );
+    }
+}

package/src/components/label-xsmall.js

@@ -0,0 +1,26 @@
+// @flow
+import * as React from "react";
+import {Text} from "@khanacademy/wonder-blocks-core";
+
+import styles from "../util/styles.js";
+
+import type {Props} from "../util/types.js";
+
+type DefaultProps = {|
+    tag: $PropertyType<Props, "tag">,
+|};
+
+export default class LabelXSmall extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        tag: "span",
+    };
+
+    render(): React.Node {
+        const {style, children, ...otherProps} = this.props;
+        return (
+            <Text {...otherProps} style={[styles.LabelXSmall, style]}>
+                {children}
+            </Text>
+        );
+    }
+}

package/src/components/tagline.js

@@ -0,0 +1,26 @@
+// @flow
+import * as React from "react";
+import {Text} from "@khanacademy/wonder-blocks-core";
+
+import styles from "../util/styles.js";
+
+import type {Props} from "../util/types.js";
+
+type DefaultProps = {|
+    tag: $PropertyType<Props, "tag">,
+|};
+
+export default class Tagline extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        tag: "span",
+    };
+
+    render(): React.Node {
+        const {style, children, ...otherProps} = this.props;
+        return (
+            <Text {...otherProps} style={[styles.Tagline, style]}>
+                {children}
+            </Text>
+        );
+    }
+}

package/src/components/title.js

@@ -0,0 +1,28 @@
+// @flow
+import * as React from "react";
+import {Text} from "@khanacademy/wonder-blocks-core";
+
+import styles from "../util/styles.js";
+
+import type {Props} from "../util/types.js";
+
+type DefaultProps = {|
+    tag: $PropertyType<Props, "tag">,
+|};
+
+// TODO(alex): Once style prop validation works, if all of the style prop flow
+//             types are the same then switch to using functional components.
+export default class Title extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        tag: "h1",
+    };
+
+    render(): React.Node {
+        const {style, children, ...otherProps} = this.props;
+        return (
+            <Text {...otherProps} style={[styles.Title, style]}>
+                {children}
+            </Text>
+        );
+    }
+}

package/src/index.js

@@ -0,0 +1,78 @@
+// @flow
+import styles from "./util/styles.js";
+
+import Title from "./components/title.js";
+import HeadingLarge from "./components/heading-large.js";
+import HeadingMedium from "./components/heading-medium.js";
+import HeadingSmall from "./components/heading-small.js";
+import HeadingXSmall from "./components/heading-xsmall.js";
+import BodySerifBlock from "./components/body-serif-block.js";
+import BodySerif from "./components/body-serif.js";
+import BodyMonospace from "./components/body-monospace.js";
+import Body from "./components/body.js";
+import LabelLarge from "./components/label-large.js";
+import LabelMedium from "./components/label-medium.js";
+import LabelSmall from "./components/label-small.js";
+import LabelXSmall from "./components/label-xsmall.js";
+import Tagline from "./components/tagline.js";
+import Caption from "./components/caption.js";
+import Footnote from "./components/footnote.js";
+
+/**
+ * Typography components for headings or titles.
+ */
+export type Heading =
+    | typeof Title
+    | typeof HeadingLarge
+    | typeof HeadingMedium
+    | typeof HeadingSmall
+    | typeof HeadingXSmall;
+
+/**
+ * Typography components for representing body text.
+ */
+export type BodyText =
+    | typeof Body
+    | typeof BodySerif
+    | typeof BodySerifBlock
+    | typeof BodyMonospace;
+
+/**
+ * Typography components for labels.
+ */
+export type Label =
+    | typeof LabelLarge
+    | typeof LabelMedium
+    | typeof LabelSmall
+    | typeof LabelXSmall;
+
+/**
+ * All typography components.
+ */
+export type Typography =
+    | Heading
+    | BodyText
+    | Label
+    | typeof Tagline
+    | typeof Caption
+    | typeof Footnote;
+
+export {
+    Title,
+    HeadingLarge,
+    HeadingMedium,
+    HeadingSmall,
+    HeadingXSmall,
+    BodySerifBlock,
+    BodySerif,
+    BodyMonospace,
+    Body,
+    LabelLarge,
+    LabelMedium,
+    LabelSmall,
+    LabelXSmall,
+    Tagline,
+    Caption,
+    Footnote,
+    styles,
+};

package/src/util/styles.js

@@ -0,0 +1,156 @@
+// @flow
+import {StyleSheet} from "aphrodite";
+import type {StyleDeclaration} from "aphrodite";
+
+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: StyleDeclaration = StyleSheet.create({
+    Title: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Black,
+        [desktop]: {
+            fontSize: 36,
+            lineHeight: "40px",
+        },
+        [mobile]: {
+            fontSize: 28,
+            lineHeight: "32px",
+        },
+    },
+    Tagline: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Regular,
+        fontSize: 20,
+        lineHeight: "24px",
+    },
+    HeadingLarge: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Bold,
+        [desktop]: {
+            fontSize: 28,
+            lineHeight: "32px",
+        },
+        [mobile]: {
+            fontSize: 24,
+            lineHeight: "28px",
+        },
+    },
+    HeadingMedium: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Bold,
+        [desktop]: {
+            fontSize: 24,
+            lineHeight: "28px",
+        },
+        [mobile]: {
+            fontSize: 22,
+            lineHeight: "26px",
+        },
+    },
+    HeadingSmall: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Bold,
+        fontSize: 20,
+        lineHeight: "24px",
+    },
+    HeadingXSmall: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Bold,
+        fontSize: 12,
+        lineHeight: "16px",
+        letterSpacing: 0.6,
+        textTransform: "uppercase",
+    },
+    BodySerifBlock: {
+        ...common,
+        fontFamily: SerifFamily,
+        fontWeight: Regular,
+        fontSize: 22,
+        lineHeight: "28px",
+    },
+    BodySerif: {
+        ...common,
+        fontFamily: SerifFamily,
+        fontWeight: Regular,
+        fontSize: 18,
+        lineHeight: "22px",
+    },
+    BodyMonospace: {
+        ...common,
+        fontFamily: InconsolataFamily,
+        fontWeight: Regular,
+        fontSize: 17,
+        lineHeight: "22px",
+    },
+    Body: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Regular,
+        fontSize: 16,
+        lineHeight: "22px",
+    },
+    LabelLarge: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Bold,
+        fontSize: 16,
+        lineHeight: "20px",
+    },
+    LabelMedium: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Regular,
+        fontSize: 16,
+        lineHeight: "20px",
+    },
+    LabelSmall: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Regular,
+        fontSize: 14,
+        lineHeight: "18px",
+    },
+    LabelXSmall: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Regular,
+        fontSize: 12,
+        lineHeight: "16px",
+    },
+    Caption: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Regular,
+        fontSize: 14,
+        lineHeight: "20px",
+    },
+    Footnote: {
+        ...common,
+        fontFamily: SansFamily,
+        fontWeight: Regular,
+        fontSize: 12,
+        lineHeight: "18px",
+    },
+});
+
+export {styles as default};

package/src/util/types.js

@@ -0,0 +1,6 @@
+// @flow
+import * as React from "react";
+
+import {Text} from "@khanacademy/wonder-blocks-core";
+
+export type Props = React.ElementConfig<typeof Text>;