From c3b5d5f206c3dcbdfb80d9da19bfd080b0e3e2d5 Mon Sep 17 00:00:00 2001 From: delianides Date: Tue, 4 Apr 2017 14:40:27 -0400 Subject: [PATCH] added fontStyle, fontWeight, textAlign --- src/helpers/__tests__/typography.js | 37 +++++++++++++++++++++++++++ src/helpers/typography.js | 34 ++++++++++++++++++++++++ src/helpers/util/modifiers/weights.js | 12 +++++++++ 3 files changed, 83 insertions(+) create mode 100644 src/helpers/__tests__/typography.js create mode 100644 src/helpers/typography.js create mode 100644 src/helpers/util/modifiers/weights.js diff --git a/src/helpers/__tests__/typography.js b/src/helpers/__tests__/typography.js new file mode 100644 index 0000000..aff9ed2 --- /dev/null +++ b/src/helpers/__tests__/typography.js @@ -0,0 +1,37 @@ +import { fontStyle, fontWeight, textAlign } from "../typography"; + +it("can set the font style to normal", () => { + expect(fontStyle.normal.resolve()).toEqual({ fontStyle: "normal" }); +}); + +it("can set the font style to italic", () => { + expect(fontStyle.italic.resolve()).toEqual({ fontStyle: "italic" }); +}); + +it("can set the font style to oblique", () => { + expect(fontStyle.oblique.resolve()).toEqual({ fontStyle: "oblique" }); +}); + +it("can set fontWeight rules", () => { + [ + ["bold", "700"], + ["thin", "100"], + ["heavy", "900"], + ["extrabold", "800"], + ["none", "normal"], + ].forEach(([name, weight]) => { + expect(fontWeight[name].resolve()).toEqual({ fontWeight: weight }); + }); +}); + +it("can set text to center align", () => { + expect(textAlign.center.resolve()).toEqual({ textAlign: "center" }); +}); + +it("can set text to left align", () => { + expect(textAlign.left.resolve()).toEqual({ textAlign: "left" }); +}); + +it("can set text to right align", () => { + expect(textAlign.right.resolve()).toEqual({ textAlign: "right" }); +}); diff --git a/src/helpers/typography.js b/src/helpers/typography.js new file mode 100644 index 0000000..338c91a --- /dev/null +++ b/src/helpers/typography.js @@ -0,0 +1,34 @@ +//@flow +import Style from "further"; + +import combine from "./util/combine"; +import createHelpers from "./util/createHelpers"; +import weights from "./util/modifiers/weights"; + +const fromValue = (name: string): { name: string, reducer: Function } => ({ + reducer: () => name, + name, +}); + +const fontStyle = createHelpers( + { + property: "fontStyle", + style: Style.empty(), + }, + ["normal", "italic", "oblique"].map(fromValue), +).reduce(combine, Style.empty()); + +const fontWeight = createHelpers( + { property: "fontWeight", style: Style.empty() }, + weights, +).reduce(combine, Style.empty()); + +const textAlign = createHelpers( + { + property: "textAlign", + style: Style.empty(), + }, + ["auto", "left", "right", "center", "justify"].map(fromValue), +).reduce(combine, Style.empty()); + +export { fontStyle, fontWeight, textAlign }; diff --git a/src/helpers/util/modifiers/weights.js b/src/helpers/util/modifiers/weights.js new file mode 100644 index 0000000..95037d2 --- /dev/null +++ b/src/helpers/util/modifiers/weights.js @@ -0,0 +1,12 @@ +export default [ + { name: "none", reducer: () => "normal" }, + { name: "thin", reducer: () => "100" }, + { name: "extralight", reducer: () => "200" }, + { name: "light", reducer: () => "300" }, + { name: "normal", reducer: () => "400" }, + { name: "medium", reducer: () => "500" }, + { name: "semibold", reducer: () => "600" }, + { name: "bold", reducer: () => "700" }, + { name: "extrabold", reducer: () => "800" }, + { name: "heavy", reducer: () => "900" }, +];