@khanacademy/wonder-blocks-typography - npm Package Compare versions

Comparing version 1.1.6 to 1.1.7

components/body-monospace.md

@@ -8,4 +8,3 @@ One example of using the `BodyMonospace` typography component is to create a `Code` component for rendering pre-formatted code blocks.
 
-const code = (
-`const things = {
+const code = (`const things = {
     areTested\: "This is my new Code element with my code.",
@@ -12,0 +11,0 @@ };`

dist/es/index.js

@@ -171,7 +171,9 @@ import { StyleSheet } from 'aphrodite';
 };
-var LatoFamily = "Lato, sans-serif";
+var SansFamily = 'Lato, "Noto Sans", sans-serif'; // TODO(kevinb): Use Minion Pro here
+
+var SerifFamily = '"Noto Serif", serif';
 var InconsolataFamily = "Inconsolata, monospace";
 var styles = StyleSheet.create({
   Title: _objectSpread({}, common, (_objectSpread2 = {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Black
@@ -186,3 +188,3 @@ }, _defineProperty(_objectSpread2, desktop, {
   Tagline: _objectSpread({}, common, {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Regular,
@@ -193,3 +195,3 @@ fontSize: 20,
   HeadingLarge: _objectSpread({}, common, (_objectSpread3 = {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Bold
@@ -204,3 +206,3 @@ }, _defineProperty(_objectSpread3, desktop, {
   HeadingMedium: _objectSpread({}, common, (_objectSpread4 = {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Bold
@@ -215,3 +217,3 @@ }, _defineProperty(_objectSpread4, desktop, {
   HeadingSmall: _objectSpread({}, common, {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Bold,
@@ -222,3 +224,3 @@ fontSize: 20,
   HeadingXSmall: _objectSpread({}, common, {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Bold,
@@ -231,3 +233,3 @@ fontSize: 12,
   BodySerifBlock: _objectSpread({}, common, {
-    fontFamily: "serif",
+    fontFamily: SerifFamily,
     fontWeight: Regular,
@@ -238,3 +240,3 @@ fontSize: 22,
   BodySerif: _objectSpread({}, common, {
-    fontFamily: "serif",
+    fontFamily: SerifFamily,
     fontWeight: Regular,
@@ -251,3 +253,3 @@ fontSize: 18,
   Body: _objectSpread({}, common, {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Regular,
@@ -258,3 +260,3 @@ fontSize: 16,
   LabelLarge: _objectSpread({}, common, {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Bold,
@@ -265,3 +267,3 @@ fontSize: 16,
   LabelMedium: _objectSpread({}, common, {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Regular,
@@ -272,3 +274,3 @@ fontSize: 16,
   LabelSmall: _objectSpread({}, common, {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Regular,
@@ -279,3 +281,3 @@ fontSize: 14,
   LabelXSmall: _objectSpread({}, common, {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Regular,
@@ -286,3 +288,3 @@ fontSize: 12,
   Caption: _objectSpread({}, common, {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Regular,
@@ -293,3 +295,3 @@ fontSize: 14,
   Footnote: _objectSpread({}, common, {
-    fontFamily: LatoFamily,
+    fontFamily: SansFamily,
     fontWeight: Regular,
@@ -296,0 +298,0 @@ fontSize: 12,

docs.md

 ```js
-const {View} = require("@khanacademy/wonder-blocks-core");
+import {View} from "@khanacademy/wonder-blocks-core";
+import {
+    Title,
+    HeadingLarge,
+    HeadingMedium,
+    HeadingSmall,
+    HeadingXSmall,
+    BodySerifBlock,
+    BodySerif,
+    BodyMonospace,
+    Body,
+    LabelLarge,
+    LabelMedium,
+    LabelSmall,
+    LabelXSmall,
+    Tagline,
+    Caption,
+    Footnote
+} from "@khanacademy/wonder-blocks-typography";
 
@@ -30,5 +48,7 @@ // NOTE(mdr): I added an `id` attribute to each of these tags, to ensure that
 ```js
-const Color = require("@khanacademy/wonder-blocks-color").default;
-const {StyleSheet} = require("aphrodite");
+import {StyleSheet} from "aphrodite";
 
+import Color from "@khanacademy/wonder-blocks-color";
+import {Title} from "@khanacademy/wonder-blocks-typography";
+
 const styles = StyleSheet.create({
@@ -49,3 +69,138 @@ blueText: {
 ```js
+import {Title} from "@khanacademy/wonder-blocks-typography";
+
 <Title aria-label="Accessible Title">Title</Title>
 ```
+
+## Lato is use for Latin and Cyrillic languages
+
+```js
+import {View} from "@khanacademy/wonder-blocks-core";
+import {
+    Title,
+    HeadingLarge,
+    HeadingMedium,
+    HeadingSmall,
+    HeadingXSmall,
+    BodySerifBlock,
+    BodySerif,
+    BodyMonospace,
+    Body,
+    LabelLarge,
+    LabelMedium,
+    LabelSmall,
+    LabelXSmall,
+    Tagline,
+    Caption,
+    Footnote
+} from "@khanacademy/wonder-blocks-typography";
+
+<View>
+    <Title>Привет</Title>
+    <HeadingLarge>Привет</HeadingLarge>
+    <HeadingMedium>Привет</HeadingMedium>
+    <HeadingSmall>Привет</HeadingSmall>
+    <HeadingXSmall>Привет</HeadingXSmall>
+    <BodySerifBlock>Привет</BodySerifBlock>
+    <BodySerif>Привет</BodySerif>
+    <BodyMonospace>Привет</BodyMonospace>
+    <Body>Привет</Body>
+    <LabelLarge>Привет</LabelLarge>
+    <LabelMedium>Привет</LabelMedium>
+    <LabelSmall>Привет</LabelSmall>
+    <LabelXSmall>Привет</LabelXSmall>
+    <Tagline>Привет</Tagline>
+    <Caption>Привет</Caption>
+    <Footnote>Привет</Footnote>
+</View>
+```
+
+## Noto for non-Latin languages
+
+```js
+import {View} from "@khanacademy/wonder-blocks-core";
+import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
+import {
+    Title,
+    HeadingLarge,
+    HeadingMedium,
+    HeadingSmall,
+    HeadingXSmall,
+    BodySerifBlock,
+    BodySerif,
+    BodyMonospace,
+    Body,
+    LabelLarge,
+    LabelMedium,
+    LabelSmall,
+    LabelXSmall,
+    Tagline,
+    Caption,
+    Footnote
+} from "@khanacademy/wonder-blocks-typography";
+
+const languages = {
+    arabic: { text: "مرحبا", dir: "rtl" },
+    armenian: { text: "Բարեւ" },
+    greek: { text: "γεια σας" },
+    hebrew: { text: "שלום", dir: "rtl" }
+};
+
+class LanguageSelector extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            selectedValue: "arabic"
+        };
+    }
+
+    renderTypography() {
+        const {text, dir} = this.props.languages[this.state.selectedValue];
+
+        return (
+            <React.Fragment>
+                <Title dir={dir}>{text}</Title>
+                <HeadingLarge dir={dir}>{text}</HeadingLarge>
+                <HeadingMedium dir={dir}>{text}</HeadingMedium>
+                <HeadingSmall dir={dir}>{text}</HeadingSmall>
+                <HeadingXSmall dir={dir}>{text}</HeadingXSmall>
+                <BodySerifBlock dir={dir}>{text}</BodySerifBlock>
+                <BodySerif dir={dir}>{text}</BodySerif>
+                <BodyMonospace dir={dir}>{text}</BodyMonospace>
+                <Body dir={dir}>{text}</Body>
+                <LabelLarge dir={dir}>{text}</LabelLarge>
+                <LabelMedium dir={dir}>{text}</LabelMedium>
+                <LabelSmall dir={dir}>{text}</LabelSmall>
+                <LabelXSmall dir={dir}>{text}</LabelXSmall>
+                <Tagline dir={dir}>{text}</Tagline>
+                <Caption dir={dir}>{text}</Caption>
+                <Footnote dir={dir}>{text}</Footnote>
+            </React.Fragment>
+        );
+    }
+
+    render() {
+        return (
+            <React.Fragment>
+                <SingleSelect
+                    aria-labelledby="language-selector"
+                    id="unique-language-selector"
+                    placeholder="Select language"
+                    onChange={(selectedValue) => this.setState({selectedValue})}
+                    selectedValue={this.state.selectedValue}
+                >
+                    {Object.keys(this.props.languages).map((item, key) => (
+                        <OptionItem label={item} value={item} key={key} />
+                    ))}
+                </SingleSelect>
+
+                {this.renderTypography()}
+            </React.Fragment>
+        );
+    }
+}
+
+<View>
+    <LanguageSelector languages={languages} />
+</View>
+```

generated-snapshot.test.js

@@ -11,23 +11,27 @@ // This file is auto-generated by gen-snapshot-tests.js
 jest.mock("react-dom");
-import BodyMonospace from "./components/body-monospace.js";
-import BodySerifBlock from "./components/body-serif-block.js";
-import BodySerif from "./components/body-serif.js";
-import Body from "./components/body.js";
-import Caption from "./components/caption.js";
-import Footnote from "./components/footnote.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 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 Title from "./components/title.js";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {
+    Title,
+    HeadingLarge,
+    HeadingMedium,
+    HeadingSmall,
+    HeadingXSmall,
+    BodySerifBlock,
+    BodySerif,
+    BodyMonospace,
+    Body,
+    LabelLarge,
+    LabelMedium,
+    LabelSmall,
+    LabelXSmall,
+    Tagline,
+    Caption,
+    Footnote,
+} from "@khanacademy/wonder-blocks-typography";
+import {StyleSheet} from "aphrodite";
+import Color from "@khanacademy/wonder-blocks-color";
+import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 
 describe("wonder-blocks-typography", () => {
     it("example 1", () => {
-        const {View} = require("@khanacademy/wonder-blocks-core");
-
         // NOTE(mdr): I added an `id` attribute to each of these tags, to ensure that
@@ -71,6 +75,4 @@ //     they all pass the `id` attribute correctly. This fact will be saved in
     });
+
     it("example 2", () => {
-        const Color = require("@khanacademy/wonder-blocks-color").default;
-        const {StyleSheet} = require("aphrodite");
-
         const styles = StyleSheet.create({
@@ -81,3 +83,2 @@ blueText: {
         });
-
         const example = <Title style={styles.blueText}>Blue Title</Title>;
@@ -87,2 +88,3 @@ const tree = renderer.create(example).toJSON();
     });
+
     it("example 3", () => {
@@ -93,5 +95,127 @@ const example = <Title aria-label="Accessible Title">Title</Title>;
     });
+
     it("example 4", () => {
+        const example = (
+            <View>
+                <Title>Привет</Title>
+                <HeadingLarge>Привет</HeadingLarge>
+                <HeadingMedium>Привет</HeadingMedium>
+                <HeadingSmall>Привет</HeadingSmall>
+                <HeadingXSmall>Привет</HeadingXSmall>
+                <BodySerifBlock>Привет</BodySerifBlock>
+                <BodySerif>Привет</BodySerif>
+                <BodyMonospace>Привет</BodyMonospace>
+                <Body>Привет</Body>
+                <LabelLarge>Привет</LabelLarge>
+                <LabelMedium>Привет</LabelMedium>
+                <LabelSmall>Привет</LabelSmall>
+                <LabelXSmall>Привет</LabelXSmall>
+                <Tagline>Привет</Tagline>
+                <Caption>Привет</Caption>
+                <Footnote>Привет</Footnote>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 5", () => {
+        const languages = {
+            arabic: {
+                text: "مرحبا",
+                dir: "rtl",
+            },
+            armenian: {
+                text: "Բարեւ",
+            },
+            greek: {
+                text: "γεια σας",
+            },
+            hebrew: {
+                text: "שלום",
+                dir: "rtl",
+            },
+        };
+
+        class LanguageSelector extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    selectedValue: "arabic",
+                };
+            }
+
+            renderTypography() {
+                const {text, dir} = this.props.languages[
+                    this.state.selectedValue
+                ];
+                return (
+                    <React.Fragment>
+                        <Title dir={dir}>{text}</Title>
+                        <HeadingLarge dir={dir}>{text}</HeadingLarge>
+                        <HeadingMedium dir={dir}>{text}</HeadingMedium>
+                        <HeadingSmall dir={dir}>{text}</HeadingSmall>
+                        <HeadingXSmall dir={dir}>{text}</HeadingXSmall>
+                        <BodySerifBlock dir={dir}>{text}</BodySerifBlock>
+                        <BodySerif dir={dir}>{text}</BodySerif>
+                        <BodyMonospace dir={dir}>{text}</BodyMonospace>
+                        <Body dir={dir}>{text}</Body>
+                        <LabelLarge dir={dir}>{text}</LabelLarge>
+                        <LabelMedium dir={dir}>{text}</LabelMedium>
+                        <LabelSmall dir={dir}>{text}</LabelSmall>
+                        <LabelXSmall dir={dir}>{text}</LabelXSmall>
+                        <Tagline dir={dir}>{text}</Tagline>
+                        <Caption dir={dir}>{text}</Caption>
+                        <Footnote dir={dir}>{text}</Footnote>
+                    </React.Fragment>
+                );
+            }
+
+            render() {
+                return (
+                    <React.Fragment>
+                        <SingleSelect
+                            aria-labelledby="language-selector"
+                            id="unique-language-selector"
+                            placeholder="Select language"
+                            onChange={(selectedValue) =>
+                                this.setState({
+                                    selectedValue,
+                                })
+                            }
+                            selectedValue={this.state.selectedValue}
+                        >
+                            {Object.keys(this.props.languages).map(
+                                (item, key) => (
+                                    <OptionItem
+                                        label={item}
+                                        value={item}
+                                        key={key}
+                                    />
+                                ),
+                            )}
+                        </SingleSelect>
+
+                        {this.renderTypography()}
+                    </React.Fragment>
+                );
+            }
+        }
+
+        const example = (
+            <View>
+                <LanguageSelector languages={languages} />
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 6", () => {
         const Code = ({children}) => (
-            <BodyMonospace style={{whiteSpace: "pre"}}>
+            <BodyMonospace
+                style={{
+                    whiteSpace: "pre",
+                }}
+            >
                 {children}
@@ -102,5 +226,4 @@ </BodyMonospace>
         const code = `const things = {
-            areTested\: "This is my new Code element with my code.",
-        };`;
-
+    areTested\: "This is my new Code element with my code.",
+};`;
         const example = <Code>{code}</Code>;
@@ -107,0 +230,0 @@ const tree = renderer.create(example).toJSON();

package.json

 {
   "name": "@khanacademy/wonder-blocks-typography",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "design": "v2",
@@ -18,3 +18,3 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-core": "^2.4.0"
+    "@khanacademy/wonder-blocks-core": "^2.4.1"
   },
@@ -26,5 +26,5 @@ "peerDependencies": {
   "devDependencies": {
-    "@khanacademy/wonder-blocks-color": "^1.1.6",
+    "@khanacademy/wonder-blocks-color": "^1.1.7",
     "wb-dev-build-settings": "^0.0.2"
   }
 }

util/styles.js

@@ -15,3 +15,5 @@ // @flow
 
-const LatoFamily = "Lato, sans-serif";
+const SansFamily = 'Lato, "Noto Sans", sans-serif';
+// TODO(kevinb): Use Minion Pro here
+const SerifFamily = '"Noto Serif", serif';
 const InconsolataFamily = "Inconsolata, monospace";
@@ -22,3 +24,3 @@
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Black,
@@ -36,3 +38,3 @@ [desktop]: {
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Regular,
@@ -44,3 +46,3 @@ fontSize: 20,
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Bold,
@@ -58,3 +60,3 @@ [desktop]: {
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Bold,
@@ -72,3 +74,3 @@ [desktop]: {
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Bold,
@@ -80,3 +82,3 @@ fontSize: 20,
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Bold,
@@ -89,5 +91,4 @@ fontSize: 12,
     BodySerifBlock: {
-        // TODO(alex): Use Minion Pro here
         ...common,
-        fontFamily: "serif",
+        fontFamily: SerifFamily,
         fontWeight: Regular,
@@ -98,5 +99,4 @@ fontSize: 22,
     BodySerif: {
-        // TODO(alex): Use Minion Pro here
         ...common,
-        fontFamily: "serif",
+        fontFamily: SerifFamily,
         fontWeight: Regular,
@@ -115,3 +115,3 @@ fontSize: 18,
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Regular,
@@ -123,3 +123,3 @@ fontSize: 16,
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Bold,
@@ -131,3 +131,3 @@ fontSize: 16,
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Regular,
@@ -139,3 +139,3 @@ fontSize: 16,
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Regular,
@@ -147,3 +147,3 @@ fontSize: 14,
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Regular,
@@ -155,3 +155,3 @@ fontSize: 12,
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Regular,
@@ -163,3 +163,3 @@ fontSize: 14,
         ...common,
-        fontFamily: LatoFamily,
+        fontFamily: SansFamily,
         fontWeight: Regular,
@@ -166,0 +166,0 @@ fontSize: 12,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

165374

increased by18.51%

Lines of code

2399

increased by5.22%

Dependency changes

• Updated@khanacademy/wonder-blocks-core@^2.4.1