buoy-text - npm Package Compare versions

Comparing version 2.0.0-beta.6 to 2.0.0-beta.7

dist/components/Link.js

@@ -6,6 +6,14 @@ "use strict";
 });
-exports.default = undefined;
+exports.ButtonLink = exports.default = undefined;
 
-var _templateObject = _taggedTemplateLiteral(["\n  text-decoration: ", ";\n  color: ", ";\n  cursor: pointer;\n\n  strong {\n    color: ", ";\n  }  \n"], ["\n  text-decoration: ", ";\n  color: ", ";\n  cursor: pointer;\n\n  strong {\n    color: ", ";\n  }  \n"]);
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+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");
@@ -21,15 +29,14 @@
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var Link = _Paragraph2.default.withComponent('a');
-
-var StyledLink = (0, _styledComponents2.default)(Link)(_templateObject, function (props) {
+// font weight, size, color, etc. come from Paragraph
+var LinkStyles = (0, _styledComponents.css)(_templateObject, function (props) {
   return props.underline ? "underline" : "none";
 }, function (props) {
-  return props.theme.colors[props.color];
-}, function (props) {
-  return props.theme.colors[props.color];
+  return props.block ? "block" : "inline-block";
 });
 
-StyledLink.defaultProps = {
+var defaultProps = {
   color: "primary",
@@ -39,2 +46,24 @@ underline: true
 
-exports.default = StyledLink;
+var StyledLink = (0, _styledComponents2.default)(_Paragraph2.default.withComponent('a'))(_templateObject2, LinkStyles);
+
+var ButtonLink = (0, _styledComponents2.default)(_Paragraph2.default.withComponent('button'))(_templateObject3, LinkStyles);
+
+ButtonLink.defaultProps = defaultProps;
+
+StyledLink.defaultProps = defaultProps;
+
+var Link = function Link(_ref) {
+  var props = _objectWithoutProperties(_ref, []);
+
+  return _react2.default.createElement(
+    StyledLink,
+    _extends({
+      onClick: props.onClick,
+      tabIndex: props.tabIndex || "0"
+    }, props),
+    props.children
+  );
+};
+
+exports.default = Link;
+exports.ButtonLink = ButtonLink;

dist/index.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.Bold = exports.Link = exports.Paragraph = exports.Label = exports.HeadingThree = exports.HeadingTwo = exports.HeadingOne = undefined;
+exports.Error = exports.Bold = exports.ButtonLink = exports.Link = exports.Paragraph = exports.Label = exports.HeadingThree = exports.HeadingTwo = exports.HeadingOne = undefined;
 
@@ -37,2 +37,6 @@ var _HeadingOne = require("./components/HeadingOne");
 
+var _Error = require("./components/Error");
+
+var _Error2 = _interopRequireDefault(_Error);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -46,2 +50,4 @@
 exports.Link = _Link2.default;
-exports.Bold = _Bold2.default;
+exports.ButtonLink = _Link.ButtonLink;
+exports.Bold = _Bold2.default;
+exports.Error = _Error2.default;

package.json

 {
   "name": "buoy-text",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.7",
   "description": "Basic Buoy text styles",
@@ -19,3 +19,3 @@ "main": "dist/index.js",
   },
-  "gitHead": "479b9ae1a8535568f595ddf430753a8413459777"
+  "gitHead": "22e26e95b8db87fc6ae134fe698fbbae809041a5"
 }

src/components/Link.js

@@ -1,17 +0,13 @@
-import styled from "styled-components"
+import React from "react"
+import styled, { css } from "styled-components"
 import Paragraph from "./Paragraph"
 
-const Link = Paragraph.withComponent('a')
-
-const StyledLink = styled(Link)`
+// font weight, size, color, etc. come from Paragraph
+const LinkStyles = css`
   text-decoration: ${props => props.underline ? "underline":"none"};
-  color: ${props => props.theme.colors[props.color]};
   cursor: pointer;
-
-  strong {
-    color: ${props => props.theme.colors[props.color]};
-  }  
+  display: ${props => props.block ? "block" : "inline-block"};
 `
 
-StyledLink.defaultProps = {
+const defaultProps = {
   color: "primary",
@@ -21,2 +17,27 @@ underline: true,
 
-export { StyledLink as default }
+const StyledLink = styled(Paragraph.withComponent('a'))`
+  ${LinkStyles}
+`
+
+const ButtonLink = styled(Paragraph.withComponent('button'))`
+  ${LinkStyles}
+  background: none;
+  border: none;
+  padding: 0;
+`
+
+ButtonLink.defaultProps = defaultProps
+
+StyledLink.defaultProps = defaultProps
+
+const Link = ({ ...props }) => (
+  <StyledLink
+    onClick={props.onClick}
+    tabIndex={props.tabIndex || "0"}
+    {...props}
+    >
+    {props.children}
+  </StyledLink>
+)
+
+export { Link as default, ButtonLink }

src/index.js

@@ -6,5 +6,6 @@ import HeadingOne from "./components/HeadingOne"
 import Label from "./components/Label"
-import Link from "./components/Link"
+import Link, { ButtonLink } from "./components/Link"
 import Bold from "./components/Bold"
+import Error from "./components/Error"
 
-export { HeadingOne, HeadingTwo, HeadingThree, Label, Paragraph, Link, Bold }
+export { HeadingOne, HeadingTwo, HeadingThree, Label, Paragraph, Link, ButtonLink, Bold, Error }

stories.js

 import React from "react"
 import { storiesOf } from "@storybook/react"
-import { HeadingOne, HeadingTwo, HeadingThree, Paragraph, Label, Link, Bold } from "./src"
+import { HeadingOne, HeadingTwo, HeadingThree, Paragraph, Label, Link, ButtonLink, Bold, Error } from "./src"
+import styled from "styled-components"
 
+const openAlert = e => {
+  if (e) e.preventDefault()
+  return alert("Opened")
+}
+
+const buoyLink = "https://www.buoyhealth.com"
+
+const ErrorWrapper = styled.div`
+  max-width: 400px;
+  height: 50px;
+  position: relative;
+`
+
 storiesOf("Text", module)
@@ -39,6 +53,11 @@ .add("Heading One", () => <div><HeadingOne>Centered Heading</HeadingOne><HeadingOne alignLeft={true}>Left aligned heading</HeadingOne></div>)
   .add("Link", () => <div>
-    <Link href="https://www.buoyhealth.com">A underlined example</Link> and <Link href="https://www.buoyhealth.com" 
-      underline={false}>An un-underlined example</Link> and a <Link href="https://www.buoyhealth.com" color="neutralDarkest" underline={false}>gray example</Link> 
-       and a <Link><Bold>Bold example</Bold></Link>
-      </div>)
+    <p>the link onClick only fires if the link has an href attribute</p>
+    <Link href={buoyLink}>Default Link</Link> and <Link href={buoyLink} underline={false}>no underline link</Link>
+    <Link href={buoyLink} block weight="medium" color="neutralDarkest" margin="20px">Gray mediumWeight link with margin(20px)</Link>
+    <Link href={buoyLink} onClick={openAlert} block margin="0 20px">Block Alert Link with margin(0 20px)</Link>
+    <Link onClick={openAlert} fontSize="bodySmall">bodySmall no href link</Link> and <ButtonLink onClick={openAlert} href={buoyLink}>Default Button Link</ButtonLink>
+    <ButtonLink href={buoyLink} color="neutralDarkest" underline={false} block>Block no underline gray button link</ButtonLink>
+    <ButtonLink href={buoyLink} fontSize="bodySmall" weight="medium" onClick={openAlert}>small onClick bold button link</ButtonLink>
+  </div>)
   .add("Bold text", () => <Paragraph><Bold>regular bold example</Bold> https://www.buoyhealth.com is our site and a <Bold extraBold>extra bold example</Bold> https://www.buoyhealth.com is our site</Paragraph>)
+  .add("Error", () => <ErrorWrapper><Error>Error text example</Error></ErrorWrapper>)

No alert changes

Improved metrics

Total package byte prevSize

25772

increased by23.97%

Number of package files

22

increased by10%

Lines of code

477

increased by24.22%

No dependency changes