@sproutsocial/racine 7.4.2 → 7.6.0-beta-avatar.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 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__/Avatar/index.js

@@ -1,7 +1,11 @@
 // @flow
 import * as React from "react";
 import { useState, useCallback, useMemo, memo } from "react";
-import styled from "styled-components";
+import styled, { css, type StyledComponent } from "styled-components";
+import classnames from "classnames";
+
+import type { TypeTheme } from "../types/theme.flow";
+
 import Box from "../Box";
 import Image from "../Image";
 import Text from "../Text";
@@ -13,11 +17,24 @@ export type TypeProps = {
   name: string,
   /** URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials */
   src?: string,
+  type?: "neutral" | "purple" | "green" | "blue" | "yellow" | "red" | "orange",
+  variant?: "dark" | "light",
+  bg?: string,
+  color?: string,
   size?: string,
 };
 
 const AvatarText = styled(({ fontSize, ...rest }) => <Text {...rest} />)`
   font-size: ${(props) => props.fontSize}px;
+  color: ${(props) => props.color}px;
+`;
+const Container: StyledComponent<any, TypeTheme, *> = styled(Box)`
+  ${({ theme, type, variant, bg }) => css`
+    color: ${theme.colors[type][variant === "dark" ? "200" : "900"]};
+    background: ${bg
+      ? bg
+      : theme.colors[type][variant === "dark" ? "900" : "200"]};
+  `}
 `;
 
 const getInitials = (name: string, fallback: string = "?"): string => {
@@ -34,7 +51,11 @@ export const Avatar = ({
   appearance = "circle",
   name,
   src,
+  variant = "light",
+  type = "neutral",
   size = "40px",
+  bg,
+  color,
   ...rest
 }: TypeProps) => {
   const [imageFailedLoading, setImageFailedLoading] = useState(false);
@@ -48,7 +69,8 @@ export const Avatar = ({
   const fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
 
   return (
-    <Box
+    <Container
+      className={classnames(variant)}
       size={size}
       overflow="hidden"
       borderRadius={appearance === "leaf" ? "40% 0 40% 0" : "50%"}
@@ -58,13 +80,20 @@ export const Avatar = ({
       justifyContent="center"
       alignItems="center"
       title={name}
-      bg="neutral.200"
+      bg={bg}
+      variant={variant}
+      type={type}
       data-qa-user-avatar={name}
       // $FlowIssue - upgrade v0.112.0
       {...rest}
     >
       {!src || imageFailedLoading ? (
-        <AvatarText lineHeight={size} fontWeight="semibold" fontSize={fontSize}>
+        <AvatarText
+          lineHeight={size}
+          fontWeight="semibold"
+          fontSize={fontSize}
+          color={color}
+        >
           {initials}
         </AvatarText>
       ) : (
@@ -77,7 +106,7 @@ export const Avatar = ({
           m={0}
         />
       )}
-    </Box>
+    </Container>
   );
 };
 

package/__flow__/Avatar/index.stories.js

@@ -11,6 +11,35 @@ defaultStory.story = {
   name: "Default",
 };
 
+export const customColors = () => (
+  <Avatar name="Joe Smith" bg="purple.500" color="red.200" />
+);
+
+customColors.story = {
+  name: "Override colors",
+};
+
+export const withVariants = () => (
+  <div display="inline-block">
+    <Avatar mt={5} name="Kent C. Dodds" type="neutral" variant="dark" />
+    <Avatar mt={5} name="Kent C. Dodds" type="neutral" variant="light" />
+    <Avatar mt={5} name="Kent C. Dodds" type="green" variant="dark" />
+    <Avatar mt={5} name="Kent C. Dodds" type="green" variant="light" />
+    <Avatar mt={5} name="Kent C. Dodds" type="purple" variant="dark" />
+    <Avatar mt={5} name="Kent C. Dodds" type="purple" variant="light" />
+    <Avatar mt={5} name="Kent C. Dodds" type="red" variant="light" />
+    <Avatar mt={5} name="Kent C. Dodds" type="red" variant="dark" />
+    <Avatar mt={5} name="Kent C. Dodds" type="yellow" variant="light" />
+    <Avatar mt={5} name="Kent C. Dodds" type="yellow" variant="dark" />
+    <Avatar mt={5} name="Kent C. Dodds" type="blue" variant="light" />
+    <Avatar mt={5} name="Kent C. Dodds" type="blue" variant="dark" />
+  </div>
+);
+
+withVariants.story = {
+  name: "With color types",
+};
+
 export const withImage = () => (
   <Avatar name="Kent C. Dodds" src="https://github.com/kentcdodds.png" />
 );

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/commonjs/Avatar/index.js

@@ -5,7 +5,9 @@ exports.default = exports.Avatar = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
 
 var _Box = _interopRequireDefault(require("../Box"));
 
@@ -31,8 +33,20 @@ var AvatarText = (0, _styledComponents.default)(function (_ref) {
 }).withConfig({
   displayName: "Avatar__AvatarText",
   componentId: "yx873f-0"
-})(["font-size:", "px;"], function (props) {
+})(["font-size:", "px;color:", "px;"], function (props) {
   return props.fontSize;
+}, function (props) {
+  return props.color;
+});
+var Container = (0, _styledComponents.default)(_Box.default).withConfig({
+  displayName: "Avatar__Container",
+  componentId: "yx873f-1"
+})(["", ""], function (_ref2) {
+  var theme = _ref2.theme,
+      type = _ref2.type,
+      variant = _ref2.variant,
+      bg = _ref2.bg;
+  return (0, _styledComponents.css)(["color:", ";background:", ";"], theme.colors[type][variant === "dark" ? "200" : "900"], bg ? bg : theme.colors[type][variant === "dark" ? "900" : "200"]);
 });
 
 var getInitials = function getInitials(name, fallback) {
@@ -48,14 +62,20 @@ var getInitials = function getInitials(name, fallback) {
   .join("");
 };
 
-var Avatar = function Avatar(_ref2) {
-  var _ref2$appearance = _ref2.appearance,
-      appearance = _ref2$appearance === void 0 ? "circle" : _ref2$appearance,
-      name = _ref2.name,
-      src = _ref2.src,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? "40px" : _ref2$size,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["appearance", "name", "src", "size"]);
+var Avatar = function Avatar(_ref3) {
+  var _ref3$appearance = _ref3.appearance,
+      appearance = _ref3$appearance === void 0 ? "circle" : _ref3$appearance,
+      name = _ref3.name,
+      src = _ref3.src,
+      _ref3$variant = _ref3.variant,
+      variant = _ref3$variant === void 0 ? "light" : _ref3$variant,
+      _ref3$type = _ref3.type,
+      type = _ref3$type === void 0 ? "neutral" : _ref3$type,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? "40px" : _ref3$size,
+      bg = _ref3.bg,
+      color = _ref3.color,
+      rest = _objectWithoutPropertiesLoose(_ref3, ["appearance", "name", "src", "variant", "type", "size", "bg", "color"]);
 
   var _useState = (0, React.useState)(false),
       imageFailedLoading = _useState[0],
@@ -69,7 +89,8 @@ var Avatar = function Avatar(_ref2) {
   }, [setImageFailedLoading]); // Font size for initials is half the size of the avatar, rounded down.
 
   var fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
-  return /*#__PURE__*/React.createElement(_Box.default, _extends({
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    className: (0, _classnames.default)(variant),
     size: size,
     overflow: "hidden",
     borderRadius: appearance === "leaf" ? "40% 0 40% 0" : "50%",
@@ -79,13 +100,16 @@ var Avatar = function Avatar(_ref2) {
     justifyContent: "center",
     alignItems: "center",
     title: name,
-    bg: "neutral.200",
+    bg: bg,
+    variant: variant,
+    type: type,
     "data-qa-user-avatar": name // $FlowIssue - upgrade v0.112.0
 
   }, rest), !src || imageFailedLoading ? /*#__PURE__*/React.createElement(AvatarText, {
     lineHeight: size,
     fontWeight: "semibold",
-    fontSize: fontSize
+    fontSize: fontSize,
+    color: color
   }, initials) : /*#__PURE__*/React.createElement(_Image.default, {
     alt: name,
     width: "auto",

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/lib/Avatar/index.js

@@ -4,7 +4,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import * as React from "react";
 import { useState, useCallback, useMemo, memo } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import classnames from "classnames";
 import Box from "../Box";
 import Image from "../Image";
 import Text from "../Text";
@@ -16,8 +17,20 @@ var AvatarText = styled(function (_ref) {
 }).withConfig({
   displayName: "Avatar__AvatarText",
   componentId: "yx873f-0"
-})(["font-size:", "px;"], function (props) {
+})(["font-size:", "px;color:", "px;"], function (props) {
   return props.fontSize;
+}, function (props) {
+  return props.color;
+});
+var Container = styled(Box).withConfig({
+  displayName: "Avatar__Container",
+  componentId: "yx873f-1"
+})(["", ""], function (_ref2) {
+  var theme = _ref2.theme,
+      type = _ref2.type,
+      variant = _ref2.variant,
+      bg = _ref2.bg;
+  return css(["color:", ";background:", ";"], theme.colors[type][variant === "dark" ? "200" : "900"], bg ? bg : theme.colors[type][variant === "dark" ? "900" : "200"]);
 });
 
 var getInitials = function getInitials(name, fallback) {
@@ -33,14 +46,20 @@ var getInitials = function getInitials(name, fallback) {
   .join("");
 };
 
-export var Avatar = function Avatar(_ref2) {
-  var _ref2$appearance = _ref2.appearance,
-      appearance = _ref2$appearance === void 0 ? "circle" : _ref2$appearance,
-      name = _ref2.name,
-      src = _ref2.src,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? "40px" : _ref2$size,
-      rest = _objectWithoutPropertiesLoose(_ref2, ["appearance", "name", "src", "size"]);
+export var Avatar = function Avatar(_ref3) {
+  var _ref3$appearance = _ref3.appearance,
+      appearance = _ref3$appearance === void 0 ? "circle" : _ref3$appearance,
+      name = _ref3.name,
+      src = _ref3.src,
+      _ref3$variant = _ref3.variant,
+      variant = _ref3$variant === void 0 ? "light" : _ref3$variant,
+      _ref3$type = _ref3.type,
+      type = _ref3$type === void 0 ? "neutral" : _ref3$type,
+      _ref3$size = _ref3.size,
+      size = _ref3$size === void 0 ? "40px" : _ref3$size,
+      bg = _ref3.bg,
+      color = _ref3.color,
+      rest = _objectWithoutPropertiesLoose(_ref3, ["appearance", "name", "src", "variant", "type", "size", "bg", "color"]);
 
   var _useState = useState(false),
       imageFailedLoading = _useState[0],
@@ -54,7 +73,8 @@ export var Avatar = function Avatar(_ref2) {
   }, [setImageFailedLoading]); // Font size for initials is half the size of the avatar, rounded down.
 
   var fontSize = Math.floor(Number(size.replace("px", "")) * 0.4);
-  return /*#__PURE__*/React.createElement(Box, _extends({
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    className: classnames(variant),
     size: size,
     overflow: "hidden",
     borderRadius: appearance === "leaf" ? "40% 0 40% 0" : "50%",
@@ -64,13 +84,16 @@ export var Avatar = function Avatar(_ref2) {
     justifyContent: "center",
     alignItems: "center",
     title: name,
-    bg: "neutral.200",
+    bg: bg,
+    variant: variant,
+    type: type,
     "data-qa-user-avatar": name // $FlowIssue - upgrade v0.112.0
 
   }, rest), !src || imageFailedLoading ? /*#__PURE__*/React.createElement(AvatarText, {
     lineHeight: size,
     fontWeight: "semibold",
-    fontSize: fontSize
+    fontSize: fontSize,
+    color: color
   }, initials) : /*#__PURE__*/React.createElement(Image, {
     alt: name,
     width: "auto",

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/package.json

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