@arcteryx/components-typography - npm Package Compare versions

Comparing version 1.27.10 to 1.28.0

__tests__/components-typography.test.js

@@ -11,2 +11,6 @@ import React from "react";
   });
+  it("Renders Standard H1 with custom color prop", () => {
+    const { container } = render(<H1 color="#cc0">Testing H1</H1>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
   it("Renders Campaign H1 with correct with children and styles", () => {
@@ -25,2 +29,6 @@ const { container } = render(<H1 large>Testing H1</H1>);
   });
+  it("Renders H2 with custom color prop", () => {
+    const { container } = render(<H2 color="#cc0">Testing H2</H2>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
   it("Renders Campaign H2 with correct with children and styles", () => {
@@ -35,2 +43,6 @@ const { container } = render(<H2 large>Testing H2</H2>);
   });
+  it("Renders H3 with custom color prop", () => {
+    const { container } = render(<H3 color="#cc0">Testing H3</H3>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
   it("Renders Campaign H3 with correct with children and styles", () => {
@@ -44,2 +56,6 @@ const { container } = render(<H3 large>Testing H3</H3>);
   });
+  it("Renders H4 with custom color prop", () => {
+    const { container } = render(<H4 color="#cc0">Testing H4</H4>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
   it("Renders Campaign H4 with correct with children and styles", () => {
@@ -54,2 +70,6 @@ const { container } = render(<H4 large>Testing H4</H4>);
   });
+  it("Renders Standard P with correct color prop with children and styles", () => {
+    const { container } = render(<P color="#c00">Testing P</P>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
 
@@ -60,2 +80,7 @@ it("Renders Standard Blockquote with correct with children and styles", () => {
   });
+
+  it("Renders Standard Blockquote with correct color prop with children and styles", () => {
+    const { container } = render(<Blockquote color="#c00">Testing Blockquote</Blockquote>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [1.28.0](http://bitbucket.org/arcteryx/arcteryx-js-helpers/compare/@arcteryx/components-typography@1.27.10...@arcteryx/components-typography@1.28.0) (2020-02-07)
+
+
+### Features
+
+* Add color prop to typography components ([d2a5950](http://bitbucket.org/arcteryx/arcteryx-js-helpers/commits/d2a59502a19ab667ab4a0b05eccb17657fcc6911))
+
+
+
+
+
 ## 1.27.10 (2020-02-06)
@@ -8,0 +19,0 @@

dist/cjs/index.js

@@ -22,3 +22,3 @@ 'use strict';
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-bottom: 0.5em;\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-bottom: 0.5em;\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -51,2 +51,4 @@ _templateObject = function _templateObject() {
 }, function (props) {
+  return props.color;
+}, function (props) {
   return props.large ? "1.0em" : "1.1em";
@@ -56,7 +58,8 @@ });
   large: false,
-  loud: false
+  loud: false,
+  color: "#000"
 };
 
 function _templateObject$1() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -77,9 +80,12 @@ _templateObject$1 = function _templateObject() {
   return props.large ? "1em" : "1.1em";
+}, function (props) {
+  return props.color;
 });
 H2.defaultProps = {
-  large: false
+  large: false,
+  color: "#000"
 };
 
 function _templateObject$2() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: \"red\";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -95,2 +101,4 @@ _templateObject$2 = function _templateObject() {
 }, function (props) {
+  return props.color;
+}, function (props) {
   return props.large ? "18px" : "16px";
@@ -103,7 +111,8 @@ }, function (props) {
 H3.defaultProps = {
-  large: false
+  large: false,
+  color: "#000"
 };
 
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: \"red\";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -119,2 +128,4 @@ _templateObject$3 = function _templateObject() {
 }, function (props) {
+  return props.color;
+}, function (props) {
   return props.large ? "16px" : "15px";
@@ -127,7 +138,8 @@ }, function (props) {
 H4.defaultProps = {
-  large: false
+  large: false,
+  color: "#000"
 };
 
 function _templateObject$4() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 55 Roman\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.5em;\n  margin: 0 0 1em 0;\n  max-width: 650px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 55 Roman\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.5em;\n  margin: 0 0 1em 0;\n  max-width: 650px;\n  color: ", ";\n"]);
 
@@ -140,9 +152,12 @@ _templateObject$4 = function _templateObject() {
 }
-var P = styled.p(_templateObject$4());
+var P = styled.p(_templateObject$4(), function (props) {
+  return props.color;
+});
 P.defaultProps = {
-  large: false
+  large: false,
+  color: "#000"
 };
 
 function _templateObject$5() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"AvenirLTW01-55Oblique\", arial, sans-serif;\n  font-size: 16px;\n  font-style: italic;\n  line-height: 1.4em;\n  padding: 15px;\n  margin: 0;\n  max-width: 650px;\n  align-self: center;\n  background: url(\"https://images.arcteryx.com/misc/quotation-marks-left.png\") no-repeat;\n  background-size: 46px;\n  margin-bottom: 1em;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: \"AvenirLTW01-55Oblique\", arial, sans-serif;\n  color: ", ";\n  font-size: 16px;\n  font-style: italic;\n  line-height: 1.4em;\n  padding: 15px;\n  margin: 0;\n  max-width: 650px;\n  align-self: center;\n  background: url(\"https://images.arcteryx.com/misc/quotation-marks-left.png\") no-repeat;\n  background-size: 46px;\n  margin-bottom: 1em;\n"]);
 
@@ -155,5 +170,8 @@ _templateObject$5 = function _templateObject() {
 }
-var Blockquote = styled.blockquote(_templateObject$5());
+var Blockquote = styled.blockquote(_templateObject$5(), function (props) {
+  return props.color;
+});
 Blockquote.defaultProps = {
-  large: false
+  large: false,
+  color: "#000"
 };
@@ -160,0 +178,0 @@

dist/es/index.js

@@ -16,3 +16,3 @@ import styled from 'styled-components';
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-bottom: 0.5em;\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-bottom: 0.5em;\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -45,2 +45,4 @@ _templateObject = function _templateObject() {
 }, function (props) {
+  return props.color;
+}, function (props) {
   return props.large ? "1.0em" : "1.1em";
@@ -50,7 +52,8 @@ });
   large: false,
-  loud: false
+  loud: false,
+  color: "#000"
 };
 
 function _templateObject$1() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -71,9 +74,12 @@ _templateObject$1 = function _templateObject() {
   return props.large ? "1em" : "1.1em";
+}, function (props) {
+  return props.color;
 });
 H2.defaultProps = {
-  large: false
+  large: false,
+  color: "#000"
 };
 
 function _templateObject$2() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: \"red\";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -89,2 +95,4 @@ _templateObject$2 = function _templateObject() {
 }, function (props) {
+  return props.color;
+}, function (props) {
   return props.large ? "18px" : "16px";
@@ -97,7 +105,8 @@ }, function (props) {
 H3.defaultProps = {
-  large: false
+  large: false,
+  color: "#000"
 };
 
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: \"red\";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -113,2 +122,4 @@ _templateObject$3 = function _templateObject() {
 }, function (props) {
+  return props.color;
+}, function (props) {
   return props.large ? "16px" : "15px";
@@ -121,7 +132,8 @@ }, function (props) {
 H4.defaultProps = {
-  large: false
+  large: false,
+  color: "#000"
 };
 
 function _templateObject$4() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 55 Roman\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.5em;\n  margin: 0 0 1em 0;\n  max-width: 650px;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 55 Roman\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.5em;\n  margin: 0 0 1em 0;\n  max-width: 650px;\n  color: ", ";\n"]);
 
@@ -134,9 +146,12 @@ _templateObject$4 = function _templateObject() {
 }
-var P = styled.p(_templateObject$4());
+var P = styled.p(_templateObject$4(), function (props) {
+  return props.color;
+});
 P.defaultProps = {
-  large: false
+  large: false,
+  color: "#000"
 };
 
 function _templateObject$5() {
-  var data = _taggedTemplateLiteral(["\n  font-family: \"AvenirLTW01-55Oblique\", arial, sans-serif;\n  font-size: 16px;\n  font-style: italic;\n  line-height: 1.4em;\n  padding: 15px;\n  margin: 0;\n  max-width: 650px;\n  align-self: center;\n  background: url(\"https://images.arcteryx.com/misc/quotation-marks-left.png\") no-repeat;\n  background-size: 46px;\n  margin-bottom: 1em;\n"]);
+  var data = _taggedTemplateLiteral(["\n  font-family: \"AvenirLTW01-55Oblique\", arial, sans-serif;\n  color: ", ";\n  font-size: 16px;\n  font-style: italic;\n  line-height: 1.4em;\n  padding: 15px;\n  margin: 0;\n  max-width: 650px;\n  align-self: center;\n  background: url(\"https://images.arcteryx.com/misc/quotation-marks-left.png\") no-repeat;\n  background-size: 46px;\n  margin-bottom: 1em;\n"]);
 
@@ -149,5 +164,8 @@ _templateObject$5 = function _templateObject() {
 }
-var Blockquote = styled.blockquote(_templateObject$5());
+var Blockquote = styled.blockquote(_templateObject$5(), function (props) {
+  return props.color;
+});
 Blockquote.defaultProps = {
-  large: false
+  large: false,
+  color: "#000"
 };
@@ -154,0 +172,0 @@

dist/umd/index.js

@@ -22,3 +22,3 @@ (function (global, factory) {
   function _templateObject() {
-    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-bottom: 0.5em;\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  margin-bottom: 0.5em;\n  color: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -51,2 +51,4 @@ _templateObject = function _templateObject() {
   }, function (props) {
+    return props.color;
+  }, function (props) {
     return props.large ? "1.0em" : "1.1em";
@@ -56,7 +58,8 @@ });
     large: false,
-    loud: false
+    loud: false,
+    color: "#000"
   };
 
   function _templateObject$1() {
-    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -77,9 +80,12 @@ _templateObject$1 = function _templateObject() {
     return props.large ? "1em" : "1.1em";
+  }, function (props) {
+    return props.color;
   });
   H2.defaultProps = {
-    large: false
+    large: false,
+    color: "#000"
   };
 
   function _templateObject$2() {
-    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: \"red\";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -95,2 +101,4 @@ _templateObject$2 = function _templateObject() {
   }, function (props) {
+    return props.color;
+  }, function (props) {
     return props.large ? "18px" : "16px";
@@ -103,7 +111,8 @@ }, function (props) {
   H3.defaultProps = {
-    large: false
+    large: false,
+    color: "#000"
   };
 
   function _templateObject$3() {
-    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: \"red\";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  text-transform: uppercase;\n"]);
 
@@ -119,2 +128,4 @@ _templateObject$3 = function _templateObject() {
   }, function (props) {
+    return props.color;
+  }, function (props) {
     return props.large ? "16px" : "15px";
@@ -127,7 +138,8 @@ }, function (props) {
   H4.defaultProps = {
-    large: false
+    large: false,
+    color: "#000"
   };
 
   function _templateObject$4() {
-    var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 55 Roman\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.5em;\n  margin: 0 0 1em 0;\n  max-width: 650px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-family: \"Avenir LT W01 55 Roman\", arial, sans-serif;\n  font-size: 15px;\n  line-height: 1.5em;\n  margin: 0 0 1em 0;\n  max-width: 650px;\n  color: ", ";\n"]);
 
@@ -140,9 +152,12 @@ _templateObject$4 = function _templateObject() {
   }
-  var P = styled.p(_templateObject$4());
+  var P = styled.p(_templateObject$4(), function (props) {
+    return props.color;
+  });
   P.defaultProps = {
-    large: false
+    large: false,
+    color: "#000"
   };
 
   function _templateObject$5() {
-    var data = _taggedTemplateLiteral(["\n  font-family: \"AvenirLTW01-55Oblique\", arial, sans-serif;\n  font-size: 16px;\n  font-style: italic;\n  line-height: 1.4em;\n  padding: 15px;\n  margin: 0;\n  max-width: 650px;\n  align-self: center;\n  background: url(\"https://images.arcteryx.com/misc/quotation-marks-left.png\") no-repeat;\n  background-size: 46px;\n  margin-bottom: 1em;\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-family: \"AvenirLTW01-55Oblique\", arial, sans-serif;\n  color: ", ";\n  font-size: 16px;\n  font-style: italic;\n  line-height: 1.4em;\n  padding: 15px;\n  margin: 0;\n  max-width: 650px;\n  align-self: center;\n  background: url(\"https://images.arcteryx.com/misc/quotation-marks-left.png\") no-repeat;\n  background-size: 46px;\n  margin-bottom: 1em;\n"]);
 
@@ -155,5 +170,8 @@ _templateObject$5 = function _templateObject() {
   }
-  var Blockquote = styled.blockquote(_templateObject$5());
+  var Blockquote = styled.blockquote(_templateObject$5(), function (props) {
+    return props.color;
+  });
   Blockquote.defaultProps = {
-    large: false
+    large: false,
+    color: "#000"
   };
@@ -160,0 +178,0 @@

package.json

 {
   "name": "@arcteryx/components-typography",
-  "version": "1.27.10",
+  "version": "1.28.0",
   "description": "Arcteryx Typography",
@@ -14,3 +14,3 @@ "main": "src/index.js",
   "license": "ISC",
-  "gitHead": "bcadc88e6f77aa08bfd74c70316a78bf5518d7f7"
+  "gitHead": "11f12213a56553a03e54b56b3937dfb5eb7e9b44"
 }

README.md

 # `components-typography`
 
-> TODO: description
+Standard typography components for H1, H2, H3, H4, p, and blockquote elements.
 
@@ -8,5 +8,8 @@ ## Usage
 ```
-const componentsTypography = require('@arcteryx/components-typography');
+import {H1} from "@arcteryx/components-typography";
 
-// TODO: DEMONSTRATE API
+const LoudRedHeading = () => (
+    <H1 loud color="#ff0000">
+);
+
 ```

src/components/blockquote.js

@@ -5,2 +5,3 @@ import styled from "styled-components";
   font-family: "AvenirLTW01-55Oblique", arial, sans-serif;
+  color: ${props => props.color};
   font-size: 16px;
@@ -20,3 +21,4 @@ font-style: italic;
   large: false,
+  color: "#000",
 };
 export default Blockquote;

src/components/headings/h1.js

@@ -19,2 +19,3 @@ import styled from "styled-components";
   margin-bottom: 0.5em;
+  color: ${props => props.color};
   line-height: ${props => (props.large ? "1.0em" : "1.1em")};
@@ -27,3 +28,4 @@ text-transform: uppercase;
   loud: false,
+  color: "#000",
 };
 export default H1;

src/components/headings/h2.js

@@ -9,2 +9,3 @@ import styled from "styled-components";
   line-height: ${props => (props.large ? "1em" : "1.1em")};
+  color: ${props => props.color};
   text-transform: uppercase;
@@ -15,3 +16,4 @@ `;
   large: false,
+  color: "#000",
 };
 export default H2;

src/components/headings/h3.js

@@ -6,3 +6,3 @@ import styled from "styled-components";
     props.large ? `"Avenir LT W01 95 Black", arial, sans-serif` : `"Avenir LT W01 85 Heavy", arial, sans-serif`};
-  color: "red";
+  color: ${props => props.color};
   font-size: ${props => (props.large ? "18px" : "16px")};
@@ -16,3 +16,4 @@ font-weight: ${props => (props.large ? "700" : "normal")};
   large: false,
+  color: "#000",
 };
 export default H3;

src/components/headings/h4.js

@@ -6,3 +6,3 @@ import styled from "styled-components";
     props.large ? `"Avenir LT W01 95 Black", arial, sans-serif` : `"Avenir LT W01 85 Heavy", arial, sans-serif`};
-  color: "red";
+  color: ${props => props.color};
   font-size: ${props => (props.large ? "16px" : "15px")};
@@ -16,3 +16,4 @@ font-weight: ${props => (props.large ? "700" : "normal")};
   large: false,
+  color: "#000",
 };
 export default H4;

src/components/p.js

@@ -9,2 +9,3 @@ import styled from "styled-components";
   max-width: 650px;
+  color: ${props => props.color};
 `;
@@ -14,3 +15,4 @@
   large: false,
+  color: "#000",
 };
 export default P;

src/Typography.stories.js

@@ -20,3 +20,3 @@ import React from "react";
     <H2>h2 - Avenir LT Pro 85 Black (18px/1.1em)</H2>
-    <H3>h3 - Avenir LT Pro 85 Black (15px/1.1em)</H3>
+    <H3 color="#000">h3 - Avenir LT Pro 85 Black (15px/1.1em)</H3>
 
@@ -23,0 +23,0 @@ <span className="sb-context">PARAGRAPH COPY</span>

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

150691

increased by7.66%

Lines of code

1182

increased by8.04%

Number of lines in readme file

15

increased by25%

No dependency changes