@sproutsocial/racine 7.4.2 → 7.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 7.6.0
+
+### Minor Changes
+
+- b69f92a: fix(token) hover styling for invalid tokens
+
+## 7.5.0
+
+### Minor Changes
+
+- 6700ead: This change allows consumers to specify whether or not a Link should be underlined. This work is part of our accessibility initiatives.
+
 ## 7.4.2
 
 ### Patch Changes

package/README.md

@@ -23,7 +23,7 @@
 
 ## Installation
 
-Install Racine and its peer dependencies using npm or yarn:
+Install Racine using npm or yarn:
 
 ```sh
 $ yarn add @sproutsocial/racine react styled-components
@@ -31,6 +31,23 @@ $ yarn add @sproutsocial/racine react styled-components
 $ npm install @sproutsocial/racine react styled-components
 ```
 
+You may also require specific peer dependencies when starting a new project or sandbox environment:
+
+```js
+@sproutsocial/seeds-border
+@sproutsocial/seeds-color
+@sproutsocial/seeds-depth
+@sproutsocial/seeds-motion
+@sproutsocial/seeds-networkcolor
+@sproutsocial/seeds-space
+@sproutsocial/seeds-typography
+moment
+prop-types
+react
+react-dates
+styled-components
+```
+
 Then, wrap your app's React root in Racine's `ThemeProvider` component:
 
 ```js

package/__flow__/Link/index.js

@@ -14,6 +14,7 @@ type TypeProps = {
   /** Setting this prop will cause the component to be rendered as a button instead of an anchor) */
   onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   as?: $PropertyType<TypeStyledComponentsCommonProps, "as">,
+  underline?: boolean,
   qa?: Object,
 };
 
@@ -24,6 +25,7 @@ const Link = ({
   disabled,
   onClick,
   as,
+  underline,
   qa = {},
   ...rest
 }: TypeProps) => {
@@ -45,6 +47,7 @@ const Link = ({
       aria-disabled={disabled ? disabled : undefined}
       disabled={disabled}
       onClick={onClick}
+      underline={underline}
       data-qa-link={""}
       data-qa-link-isdisabled={disabled === true}
       {...qa}

package/__flow__/Link/index.stories.js

@@ -145,3 +145,11 @@ export const differentFontSizes = () => (
 differentFontSizes.story = {
   name: "Different font sizes",
 };
+
+export const underlinedLink = () => (
+  <Link underline>{text("children", "Underlined Link")}</Link>
+);
+
+underlinedLink.story = {
+  name: "Underlined Link",
+};

package/__flow__/Link/index.test.js

@@ -99,4 +99,9 @@ describe("Racine Link", () => {
     expect(getByText("Link").type).toBeFalsy();
     expect(getByText("Link").type).not.toEqual("button");
   });
+
+  it("Can render with an underline", () => {
+    const { getByText } = render(<Link underline>Link</Link>);
+    expect(getByText("Link")).toHaveStyleRule("text-decoration", "underline");
+  });
 });

package/__flow__/Link/styles.js

@@ -11,7 +11,7 @@ const Container = styled<typeof Text, TypeTheme, any>(Text)`
   font-family: ${(props) => props.theme.fontFamily};
   transition: all ${(props) => props.theme.duration.fast}
     ${(props) => props.theme.easing.ease_inout};
-  text-decoration: none;
+  text-decoration: ${(props) => (props.underline ? "underline" : "none")};
   appearance: none;
   cursor: pointer;
   ${(props) =>

package/__flow__/Token/styles.js

@@ -57,6 +57,8 @@ const Container: StyledComponent<any, TypeTheme, *> = styled.button`
 
       &:hover {
         color: ${(props) => props.theme.colors.text.inverse};
+        border-color: ${(props) => props.theme.colors.red[900]};
+        background: ${(props) => props.theme.colors.red[900]};
       }
     `}
 

package/commonjs/Link/index.js

@@ -24,9 +24,10 @@ var Link = function Link(_ref) {
       disabled = _ref.disabled,
       onClick = _ref.onClick,
       as = _ref.as,
+      underline = _ref.underline,
       _ref$qa = _ref.qa,
       qa = _ref$qa === void 0 ? {} : _ref$qa,
-      rest = _objectWithoutPropertiesLoose(_ref, ["href", "external", "children", "disabled", "onClick", "as", "qa"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["href", "external", "children", "disabled", "onClick", "as", "underline", "qa"]);
 
   if (!href && external) {
     console.warn("Warning: external prop cannot be set without a href declaration");
@@ -42,6 +43,7 @@ var Link = function Link(_ref) {
     "aria-disabled": disabled ? disabled : undefined,
     disabled: disabled,
     onClick: onClick,
+    underline: underline,
     "data-qa-link": "",
     "data-qa-link-isdisabled": disabled === true
   }, qa, rest), children);

package/commonjs/Link/styles.js

@@ -20,12 +20,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var Container = (0, _styledComponents.default)(_Text.default).withConfig({
   displayName: "styles__Container",
   componentId: "adcw4a-0"
-})(["border:0;font-family:", ";transition:all ", " ", ";text-decoration:none;appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", ""], function (props) {
+})(["border:0;font-family:", ";transition:all ", " ", ";text-decoration:", ";appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", ""], function (props) {
   return props.theme.fontFamily;
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
   return props.theme.easing.ease_inout;
+}, function (props) {
+  return props.underline ? "underline" : "none";
 }, function (props) {
   return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {

package/commonjs/Token/styles.js

@@ -49,7 +49,7 @@ var Container = _styledComponents.default.button.withConfig({
 }, function (props) {
   return props.disabled && (0, _styledComponents.css)(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {
-  return !props.valid && (0, _styledComponents.css)(["color:", ";border-color:", ";background:", ";&:hover{color:", ";}"], function (props) {
+  return !props.valid && (0, _styledComponents.css)(["color:", ";border-color:", ";background:", ";&:hover{color:", ";border-color:", ";background:", ";}"], function (props) {
     return props.theme.colors.text.inverse;
   }, function (props) {
     return props.theme.colors.error.color;
@@ -57,6 +57,10 @@ var Container = _styledComponents.default.button.withConfig({
     return props.theme.colors.error.color;
   }, function (props) {
     return props.theme.colors.text.inverse;
+  }, function (props) {
+    return props.theme.colors.red[900];
+  }, function (props) {
+    return props.theme.colors.red[900];
   });
 }, _systemProps.COMMON);
 

package/lib/Link/index.js

@@ -12,9 +12,10 @@ var Link = function Link(_ref) {
       disabled = _ref.disabled,
       onClick = _ref.onClick,
       as = _ref.as,
+      underline = _ref.underline,
       _ref$qa = _ref.qa,
       qa = _ref$qa === void 0 ? {} : _ref$qa,
-      rest = _objectWithoutPropertiesLoose(_ref, ["href", "external", "children", "disabled", "onClick", "as", "qa"]);
+      rest = _objectWithoutPropertiesLoose(_ref, ["href", "external", "children", "disabled", "onClick", "as", "underline", "qa"]);
 
   if (!href && external) {
     console.warn("Warning: external prop cannot be set without a href declaration");
@@ -30,6 +31,7 @@ var Link = function Link(_ref) {
     "aria-disabled": disabled ? disabled : undefined,
     disabled: disabled,
     onClick: onClick,
+    underline: underline,
     "data-qa-link": "",
     "data-qa-link-isdisabled": disabled === true
   }, qa, rest), children);

package/lib/Link/styles.js

@@ -5,12 +5,14 @@ import { TYPOGRAPHY, COMMON } from "../utils/system-props";
 var Container = styled(Text).withConfig({
   displayName: "styles__Container",
   componentId: "adcw4a-0"
-})(["border:0;font-family:", ";transition:all ", " ", ";text-decoration:none;appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", ""], function (props) {
+})(["border:0;font-family:", ";transition:all ", " ", ";text-decoration:", ";appearance:none;cursor:pointer;", " font-weight:", ";color:", ";&:hover{color:", ";text-decoration:underline;}&:active{color:", ";}&:focus{", "}&:focus:active{box-shadow:none;}", " ", " ", " ", ""], function (props) {
   return props.theme.fontFamily;
 }, function (props) {
   return props.theme.duration.fast;
 }, function (props) {
   return props.theme.easing.ease_inout;
+}, function (props) {
+  return props.underline ? "underline" : "none";
 }, function (props) {
   return props.disabled && css(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {

package/lib/Token/styles.js

@@ -37,7 +37,7 @@ var Container = styled.button.withConfig({
 }, function (props) {
   return props.disabled && css(["opacity:0.4;cursor:not-allowed;"]);
 }, function (props) {
-  return !props.valid && css(["color:", ";border-color:", ";background:", ";&:hover{color:", ";}"], function (props) {
+  return !props.valid && css(["color:", ";border-color:", ";background:", ";&:hover{color:", ";border-color:", ";background:", ";}"], function (props) {
     return props.theme.colors.text.inverse;
   }, function (props) {
     return props.theme.colors.error.color;
@@ -45,6 +45,10 @@ var Container = styled.button.withConfig({
     return props.theme.colors.error.color;
   }, function (props) {
     return props.theme.colors.text.inverse;
+  }, function (props) {
+    return props.theme.colors.red[900];
+  }, function (props) {
+    return props.theme.colors.red[900];
   });
 }, COMMON);
 export default Container;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "7.4.2",
+  "version": "7.6.0",
   "license": "MIT",
   "files": [
     "__flow__",