buoy-text - npm Package Compare versions

Comparing version 5.0.0-alpha.1 to 5.0.0-styledv4.0

dist/components/Bold.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  ", "\n"], ["\n  ", "\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  font-weight: ", ";\n"], ["\n  font-weight: ", ";\n"]);
 
@@ -15,4 +15,8 @@ var _styledComponents = require("styled-components");
 
+var _buoyTheme = require("buoy-theme");
+
 var _Paragraph = require("./Paragraph");
 
+var _Paragraph2 = _interopRequireDefault(_Paragraph);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,12 +26,10 @@
 
-var Bold = _styledComponents2.default.strong.withConfig({
-  displayName: "Bold",
-  componentId: "sc-17rvegc-0"
-})(_templateObject, _Paragraph.ParagraphStyle);
+var Bold = (0, _styledComponents2.default)(_Paragraph2.default).attrs({ as: "strong" })(_templateObject, function (props) {
+  return props.extraBold ? _buoyTheme.fontWeight.medium : _buoyTheme.fontWeight.regular;
+});
 
 Bold.defaultProps = {
-  weight: 'regular',
-  fontSize: "bodyMain"
+  extraBold: false
 };
 
 exports.default = Bold;

dist/components/Heading.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  margin: ", ";\n  ", ";\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n"], ["\n  font-family: ", ";\n  color: ", ";\n  margin: ", ";\n  ", ";\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  color: ", ";\n  ", "\n  text-align: ", ";\n  line-height: 1.3;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n"], ["\n  font-family: ", ";\n  color: ", ";\n  ", "\n  text-align: ", ";\n  line-height: 1.3;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n"]);
 
@@ -20,7 +20,7 @@ var _styledComponents = require("styled-components");
 }, function (props) {
-  return props.margin;
+  return props.margin && "margin: " + props.margin + ";";
 }, function (props) {
-  return props.textAlign && "text-align: " + props.textAlign;
+  return props.alignLeft ? "left" : "center";
 });
 
 exports.default = Heading;

dist/components/HeadingOne.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  ", ";\n  font-weight: ", ";\n  letter-spacing: -0.2px;\n  ", ";\n  line-height: 1;\n"], ["\n  ", ";\n  font-weight: ", ";\n  letter-spacing: -0.2px;\n  ", ";\n  line-height: 1;\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  ", ";\n  font-weight: ", ";\n  letter-spacing: 0;\n  ", ";\n"], ["\n  ", ";\n  font-weight: ", ";\n  letter-spacing: 0;\n  ", ";\n"]);
 
@@ -31,6 +31,6 @@ var _styledComponents = require("styled-components");
 HeadingOne.defaultProps = {
-  color: "neutralDark",
-  margin: 0
+  color: "neutralDarkest",
+  alignLeft: false
 };
 
 exports.default = HeadingOne;

dist/components/HeadingThree.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  ", "\n  font-weight: ", ";\n  ", ";\n  ", ";\n  line-height: 1.3;\n"], ["\n  ", "\n  font-weight: ", ";\n  ", ";\n  ", ";\n  line-height: 1.3;\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  ", "\n  font-weight: ", ";\n  ", ";\n"], ["\n  ", "\n  font-weight: ", ";\n  ", ";\n"]);
 
@@ -32,11 +32,10 @@ var _styledComponents = require("styled-components");
   return props.theme.fonts.weight[props.weight];
-}, _Heading2.default, (0, _buoyTheme.responsive)('letter-spacing', '-0.2px', '-0.2px', '-0.2px', '0.2px'));
+}, _Heading2.default);
 
 HeadingThree.defaultProps = {
   color: "neutralDarkest",
-  fontSize: "h3",
-  weight: "light",
-  margin: 0
+  fontSize: "bodyMain",
+  weight: "medium"
 };
 
 exports.default = HeadingThree;

dist/components/HeadingTwo.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  ", ";\n  font-weight: ", ";\n  letter-spacing: -0.2px;\n  ", ";\n  ", ";\n  line-height: 1.3;\n"], ["\n  ", ";\n  font-weight: ", ";\n  letter-spacing: -0.2px;\n  ", ";\n  ", ";\n  line-height: 1.3;\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  ", ";\n  font-weight: ", ";\n  letter-spacing: 0;\n  ", ";\n  ", ";\n"], ["\n  ", ";\n  font-weight: ", ";\n  letter-spacing: 0;\n  ", ";\n  ", ";\n"]);
 
@@ -31,6 +31,6 @@ var _styledComponents = require("styled-components");
 HeadingTwo.defaultProps = {
-  color: "neutralDark",
-  margin: 0
+  color: "neutralDarkest",
+  margin: "0 0 24px 0"
 };
 
 exports.default = HeadingTwo;

dist/components/Label.js

@@ -20,3 +20,3 @@ "use strict";
 
-var Label = _styledComponents2.default.label.withConfig({
+var Label = _styledComponents2.default.h2.withConfig({
   displayName: "Label",
@@ -23,0 +23,0 @@ componentId: "sc-1d1qswm-0"

dist/components/Link.js

@@ -8,6 +8,10 @@ "use strict";
 
-var _templateObject = _taggedTemplateLiteral(["\n  ", "\n  text-decoration: ", ";\n  cursor: pointer;\n  display: ", ";\n"], ["\n  ", "\n  text-decoration: ", ";\n  cursor: pointer;\n  display: ", ";\n"]),
+var _templateObject = _taggedTemplateLiteral(["\n  text-decoration: ", ";\n  cursor: pointer;\n  display: ", ";\n"], ["\n  text-decoration: ", ";\n  cursor: pointer;\n  display: ", ";\n"]),
     _templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"], ["\n  ", "\n"]),
     _templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  background: none;\n  border: none;\n  padding: 0;\n"], ["\n  ", "\n  background: none;\n  border: none;\n  padding: 0;\n"]);
 
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
 var _styledComponents = require("styled-components");
@@ -19,2 +23,4 @@
 
+var _Paragraph2 = _interopRequireDefault(_Paragraph);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,3 +31,3 @@
 // font weight, size, color, etc. come from Paragraph
-var LinkStyles = (0, _styledComponents.css)(_templateObject, _Paragraph.ParagraphStyle, function (props) {
+var LinkStyles = (0, _styledComponents.css)(_templateObject, function (props) {
   return props.underline ? "underline" : "none";
@@ -34,7 +40,7 @@ }, function (props) {
   color: "primary",
-  underline: true,
-  fontSize: "bodyMain"
+  underline: true
 };
 
-var Link = _styledComponents2.default.a.attrs({
+var Link = (0, _styledComponents2.default)(_Paragraph2.default).attrs({
+  as: "a",
   tabIndex: function tabIndex(props) {
@@ -45,6 +51,3 @@ return props.tabIndex || "0";
 
-var ButtonLink = _styledComponents2.default.button.withConfig({
-  displayName: "Link__ButtonLink",
-  componentId: "tb88tb-0"
-})(_templateObject3, LinkStyles);
+var ButtonLink = (0, _styledComponents2.default)(_Paragraph2.default).attrs({ as: "button" })(_templateObject3, LinkStyles);
 
@@ -51,0 +54,0 @@ ButtonLink.defaultProps = defaultProps;

dist/components/Paragraph.js

@@ -6,6 +6,5 @@ "use strict";
 });
-exports.default = exports.ParagraphStyle = undefined;
+exports.default = undefined;
 
-var _templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  ", "\n  font-weight: ", ";\n  line-height: 1.3;\n  letter-spacing: 0.2px;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: ", ";\n  margin: ", ";\n  ", ";\n  ", "\n"], ["\n  font-family: ", ";\n  ", "\n  font-weight: ", ";\n  line-height: 1.3;\n  letter-spacing: 0.2px;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: ", ";\n  margin: ", ";\n  ", ";\n  ", "\n"]),
-    _templateObject2 = _taggedTemplateLiteral(["\n  ", "\n"], ["\n  ", "\n"]);
+var _templateObject = _taggedTemplateLiteral(["\n  font-family: ", ";\n  ", "\n  font-weight: ", ";\n  line-height: 1.44;\n  letter-spacing: 0.2px;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  font-family: ", ";\n  ", "\n  font-weight: ", ";\n  line-height: 1.44;\n  letter-spacing: 0.2px;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  color: ", ";\n  ", "\n  ", "\n  ", "\n"]);
 
@@ -22,3 +21,6 @@ var _styledComponents = require("styled-components");
 
-var ParagraphStyle = exports.ParagraphStyle = (0, _styledComponents.css)(_templateObject, _buoyTheme.fontFamily, function (props) {
+var Paragraph = _styledComponents2.default.p.withConfig({
+  displayName: "Paragraph",
+  componentId: "sc-1o4587f-0"
+})(_templateObject, _buoyTheme.fontFamily, function (props) {
   return (0, _buoyTheme.fontSize)(props.fontSize)(props);
@@ -30,5 +32,5 @@ }, function (props) {
 }, function (props) {
-  return props.margin;
+  return props.margin && "margin: " + props.margin + ";";
 }, function (props) {
-  return props.textAlign && "text-align: " + props.textAlign;
+  return props.center && "text-align: center;";
 }, function (props) {
@@ -38,14 +40,8 @@ return (0, _buoyTheme.responsive)("max-width", props.maxWidth, props.maxWidth, props.maxWidth, _buoyTheme.breakpoints["sm"] + "px");
 
-var Paragraph = _styledComponents2.default.p.withConfig({
-  displayName: "Paragraph",
-  componentId: "sc-1o4587f-0"
-})(_templateObject2, ParagraphStyle);
-
 Paragraph.defaultProps = {
   color: "neutralDarkest",
   fontSize: "bodyMain",
-  weight: "light",
-  margin: "0"
+  weight: "light"
 };
 
 exports.default = Paragraph;

package.json

 {
   "name": "buoy-text",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-styledv4.0",
   "description": "Basic Buoy text styles",
@@ -12,3 +12,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "buoy-theme": "^5.0.0-alpha.0"
+    "buoy-theme": "^5.0.0-styledv4.0"
   },
@@ -18,5 +18,5 @@ "peerDependencies": {
     "react-dom": ">=15.4.2",
-    "styled-components": ">=3.2.6"
+    "styled-components": ">=4.3.2"
   },
-  "gitHead": "5d29a8969cc112f6dca2f36c899022dcccac6e70"
+  "gitHead": "9414cc6e3d6cd4b61f5198ad766a03d783f5cb60"
 }

src/components/Bold.js

 import styled from "styled-components"
-import { ParagraphStyle } from "./Paragraph"
+import { fontWeight } from "buoy-theme"
+import Paragraph from "./Paragraph"
 
-
-const Bold = styled.strong`
-  ${ParagraphStyle}
+const Bold = styled(Paragraph).attrs({ as: "strong" })`
+  font-weight: ${props => props.extraBold ? fontWeight.medium : fontWeight.regular};
 `
 
 Bold.defaultProps = {
-  weight: 'regular',
-  fontSize: "bodyMain"
+  extraBold: false,
 }
 
-
 export { Bold as default }

src/components/Heading.js

 import { css } from "styled-components"
-import { fontFamily } from "buoy-theme"
+import { fontWeight, fontFamily } from "buoy-theme"
 
@@ -7,4 +7,5 @@ const Heading = css`
   color: ${props => props.theme.colors[props.color]};
-  margin: ${props => props.margin};
-  ${props => props.textAlign && `text-align: ${props.textAlign}`};
+  ${props => props.margin && `margin: ${props.margin};`}
+  text-align: ${props => props.alignLeft ? "left":"center"};
+  line-height: 1.3;
   -webkit-font-smoothing: antialiased;
@@ -11,0 +12,0 @@ -moz-osx-font-smoothing: grayscale;

src/components/HeadingOne.js

 import styled from "styled-components"
-import { fontSize, fontWeight } from "buoy-theme"
+import { fontSize, fontWeight, responsive } from "buoy-theme"
 import Heading from "./Heading"
@@ -8,12 +8,11 @@
   font-weight: ${fontWeight.light};
-  letter-spacing: -0.2px;
+  letter-spacing: 0;
   ${Heading};
-  line-height: 1;
 `
 
 HeadingOne.defaultProps = {
-  color: "neutralDark",
-  margin: 0,
+  color: "neutralDarkest",
+  alignLeft: false
 }
 
 export { HeadingOne as default }

src/components/HeadingThree.js

 import styled from "styled-components"
-import { fontSize, responsive } from "buoy-theme"
+import { fontSize, fontWeight } from "buoy-theme"
 import Heading from "./Heading"
@@ -9,4 +9,2 @@
   ${Heading};
-  ${ responsive('letter-spacing', '-0.2px', '-0.2px', '-0.2px', '0.2px') };
-  line-height: 1.3;
 `
@@ -16,7 +14,6 @@
   color: "neutralDarkest",
-  fontSize: "h3",
-  weight: "light",
-  margin: 0
+  fontSize: "bodyMain",
+  weight: "medium"
 }
 
 export { HeadingThree as default }

src/components/HeadingTwo.js

@@ -8,13 +8,12 @@ import styled from "styled-components"
   font-weight: ${fontWeight.light};
-  letter-spacing: -0.2px;
+  letter-spacing: 0;
   ${responsive("max-width", "600px", "600px", "600px", "340px")};
   ${Heading};
-  line-height: 1.3;
 `
 
 HeadingTwo.defaultProps = {
-  color: "neutralDark",
-  margin: 0
+  color: "neutralDarkest",
+  margin: "0 0 24px 0"
 }
 
 export { HeadingTwo as default }

src/components/Label.js

 import styled from "styled-components"
 import { fontSize, fontWeight, fontFamily } from "buoy-theme"
 
-const Label = styled.label`
+const Label = styled.h2`
   font-family: ${fontFamily};
@@ -6,0 +6,0 @@ ${fontSize("label")};

src/components/Link.js

@@ -0,7 +1,7 @@
+import React from "react"
 import styled, { css } from "styled-components"
-import { ParagraphStyle } from "./Paragraph"
+import Paragraph from "./Paragraph"
 
 // font weight, size, color, etc. come from Paragraph
 const LinkStyles = css`
-  ${ ParagraphStyle }
   text-decoration: ${props => (props.underline ? "underline" : "none")};
@@ -15,6 +15,6 @@ cursor: pointer;
   underline: true,
-  fontSize: "bodyMain"
 }
 
-const Link = styled.a.attrs({
+const Link = styled(Paragraph).attrs({
+  as: "a",
   tabIndex: props => props.tabIndex || "0",
@@ -25,3 +25,3 @@ })`
 
-const ButtonLink = styled.button`
+const ButtonLink = styled(Paragraph).attrs({ as: "button" })`
   ${LinkStyles}
@@ -28,0 +28,0 @@ background: none;

src/components/Paragraph.js

@@ -1,10 +0,9 @@
-import styled, {css} from "styled-components"
-import { fontFamily, fontSize, responsive, breakpoints } from "buoy-theme"
+import styled from "styled-components"
+import { fontFamily, fontWeight, fontSize, responsive, breakpoints } from "buoy-theme"
 
-
-export const ParagraphStyle = css`
+const Paragraph = styled.p`
   font-family: ${fontFamily};
   ${props => fontSize(props.fontSize)(props)}
   font-weight: ${props => props.theme.fonts.weight[props.weight]};
-  line-height: 1.3;
+  line-height: 1.44;
   letter-spacing: 0.2px;
@@ -14,4 +13,4 @@ -webkit-font-smoothing: antialiased;
   color: ${props => props.theme.colors[props.color]};
-  margin: ${props => props.margin};
-  ${props => props.textAlign && `text-align: ${props.textAlign}`};
+  ${props => props.margin && `margin: ${props.margin};`}
+  ${props => props.center && `text-align: center;`}
   ${props =>
@@ -27,13 +26,8 @@ responsive(
 
-const Paragraph = styled.p`
-  ${ParagraphStyle}
-`
-
 Paragraph.defaultProps = {
   color: "neutralDarkest",
   fontSize: "bodyMain",
-  weight: "light",
-  margin: "0",
+  weight: "light"
 }
 
 export { Paragraph as default }

stories.js

@@ -35,3 +35,3 @@ import React from "react"
     <HeadingOne
-      textAlign={text("Text align", "left")}
+      alignLeft={boolean("Left align", false)}
       color={select("Color", neutralAndPrimaryColors, "black")}
@@ -44,3 +44,3 @@ >
     <HeadingTwo
-      textAlign={text("Text align", "left")}
+      alignLeft={boolean("Left align", false)}
       color={select("Color", neutralAndPrimaryColors, "black")}
@@ -53,3 +53,3 @@ >
     <HeadingThree
-      textAlign={text("Text align", "left")}
+      alignLeft={boolean("Left align", false)}
       weight={select("Weight", fontWeights, "light")}
@@ -64,3 +64,2 @@ fontSize={select("Size", fontSizes, "h3")}
     <Paragraph
-      textAlign={text("Text align", "left")}
       color={select("Color", neutralAndPrimaryColors, "black")}
@@ -76,3 +75,2 @@ weight={select("Weight", fontWeights, "light")}
     <Link
-      textAlign={text("Text align", "left")}
       href={text("Link", buoyLink)}
@@ -97,7 +95,5 @@ underline={boolean("Underline", true)}
   .add("Bold", () => (
-    <Bold 
-      weight={select("Weight", fontWeights, "regular")}>
+    <Bold extraBold={boolean("Extra bold", false)}>
       {text("Text", "This text is bold")}
     </Bold>
-  ))
-  
+  ))

No alert changes

Improved metrics

Total package byte prevSize

24004

increased by5.3%

Number of package files

23

increased by4.55%

Lines of code

521

increased by0.58%

Dependency changes

• Updatedbuoy-theme@^5.0.0-styledv4.0