@sproutsocial/seeds-react-message 1.0.0

package/src/Message.tsx

@@ -0,0 +1,177 @@
+import * as React from "react";
+import Avatar, { type TypeAvatarProps } from "@sproutsocial/seeds-react-avatar";
+import Button, { type TypeButtonProps } from "@sproutsocial/seeds-react-button";
+import Checkbox, {
+  type TypeCheckboxProps,
+} from "@sproutsocial/seeds-react-checkbox";
+import Container, {
+  MessageBody as StyledMessageBody,
+  MessageFooter as StyledMessageFooter,
+  MessageHeader as StyledMessageHeader,
+  MessageMeta as StyledMessageMeta,
+} from "./styles";
+import { MESSAGE_DENSITIES } from "./constants";
+import type { EnumDensities, TypeMessageProps } from "./MessageTypes";
+
+const avatarSizeMap = (density: EnumDensities) => {
+  switch (density) {
+    case MESSAGE_DENSITIES.LARGE:
+      return "40px";
+
+    case MESSAGE_DENSITIES.COMPACT:
+      return "20px";
+
+    case MESSAGE_DENSITIES.CONDENSED:
+      return "24px";
+
+    case MESSAGE_DENSITIES.SMALL:
+    default:
+      return "32px";
+  }
+};
+
+const MessageContext = React.createContext<{
+  density: EnumDensities;
+  borderColor: TypeMessageProps["borderColor"];
+  bg?: TypeMessageProps["bg"];
+  indentContent?: boolean;
+}>({
+  density: MESSAGE_DENSITIES.SMALL,
+  borderColor: "container.border.base",
+  bg: "container.background.base",
+  indentContent: true,
+});
+
+const Message = ({
+  children,
+  density = MESSAGE_DENSITIES.SMALL,
+  borderColor = "container.border.base",
+  bg = "container.background.base",
+  indentContent = true,
+  innerRef,
+  qa,
+  ...rest
+}: TypeMessageProps) => {
+  return (
+    <MessageContext.Provider
+      value={{
+        density,
+        borderColor,
+        indentContent,
+      }}
+    >
+      <Container
+        borderColor={borderColor}
+        bg={bg}
+        ref={innerRef}
+        tabIndex={0}
+        {...qa}
+        {...rest}
+      >
+        {children}
+      </Container>
+    </MessageContext.Provider>
+  );
+};
+
+const MessageBody = (props: TypeMessageProps) => (
+  <MessageContext.Consumer>
+    {({ density, borderColor, indentContent }) => (
+      <StyledMessageBody
+        data-qa-message-body
+        density={density}
+        borderColor={borderColor}
+        indentContent={indentContent}
+        {...props}
+      />
+    )}
+  </MessageContext.Consumer>
+);
+
+MessageBody.displayName = "Message.Body";
+Message.Body = MessageBody;
+
+const MessageHeader = (props: TypeMessageProps) => (
+  <MessageContext.Consumer>
+    {({ density, borderColor }) => (
+      <StyledMessageHeader
+        density={density}
+        borderColor={borderColor}
+        {...props}
+      />
+    )}
+  </MessageContext.Consumer>
+);
+
+MessageHeader.displayName = "Message.Header";
+Message.Header = MessageHeader;
+
+const MessageFooter = (props: TypeMessageProps) => (
+  <MessageContext.Consumer>
+    {({ density, borderColor, indentContent }) => (
+      <StyledMessageFooter
+        density={density}
+        borderColor={borderColor}
+        indentContent={indentContent}
+        {...props}
+      />
+    )}
+  </MessageContext.Consumer>
+);
+
+MessageFooter.displayName = "Message.Footer";
+Message.Footer = MessageFooter;
+
+const MessageMeta = (props: TypeMessageProps) => (
+  <MessageContext.Consumer>
+    {({ density, borderColor, indentContent }) => (
+      <StyledMessageMeta
+        density={density}
+        borderColor={borderColor}
+        indentContent={indentContent}
+        {...props}
+      />
+    )}
+  </MessageContext.Consumer>
+);
+
+MessageMeta.displayName = "Message.Meta";
+Message.Meta = MessageMeta;
+
+const MessageButton = (props: TypeButtonProps) => (
+  <Button {...props} appearance={props.appearance || "pill"} />
+);
+
+MessageButton.displayName = "Message.Button";
+Message.Button = MessageButton;
+
+const MessageAvatar = (props: TypeAvatarProps) => (
+  <MessageContext.Consumer>
+    {({ density }) => <Avatar size={avatarSizeMap(density)} {...props} />}
+  </MessageContext.Consumer>
+);
+
+MessageAvatar.displayName = "Message.Avatar";
+Message.Avatar = MessageAvatar;
+
+const MessageCheckbox = (props: TypeCheckboxProps) => (
+  <MessageContext.Consumer>
+    {({ density }) => (
+      <Checkbox
+        appearance="pill"
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - `density` is not a valid prop for `Checkbox`
+        density={density} // @ts-notes - not sure what's intended here so address during refactor
+        {...props}
+      />
+    )}
+  </MessageContext.Consumer>
+);
+
+MessageCheckbox.displayName = "Message.Checkbox";
+Message.Checkbox = MessageCheckbox;
+
+Message.Context = MessageContext;
+Message.DENSITIES = MESSAGE_DENSITIES;
+
+export default Message;

package/src/MessageTypes.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
+import { MESSAGE_DENSITIES } from "./constants";
+
+type TypeQaProps = object;
+
+/* @ts-notes - this is a little hack to get the values of the const object,
+   but this should be updated to use an enum instead during the refactor */
+type TypeDensityKeys = keyof typeof MESSAGE_DENSITIES;
+export type EnumDensities = (typeof MESSAGE_DENSITIES)[TypeDensityKeys];
+
+export interface TypeMessageProps extends TypeBoxProps {
+  /** Condensed, small, or large. */
+  density?: EnumDensities;
+  children: React.ReactNode;
+  innerRef?: React.Ref<HTMLDivElement>;
+  borderColor?: string;
+  // seeds borderColor tokens (enum when flow types are available)
+  bg?: string;
+  // seeds color tokens (enum when flow types are available)
+  indentContent?: boolean;
+  qa?: TypeQaProps;
+}

package/src/__tests__/Message.typetest.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import Message from "../Message";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function MessageTypes() {
+  return (
+    <>
+      <Message density="condensed" bg="container.background.base">
+        <Message.Header>
+          <Box display="flex" alignItems="center">
+            <Message.Avatar mr={350} appearance="leaf" name="Chase McCoy" />
+            Attribution
+          </Box>
+          <Box>
+            <Message.Checkbox
+              id="message-checkbox"
+              ariaLabel="Message Checkbox"
+              onChange={jest.fn()}
+            />
+          </Box>
+        </Message.Header>
+        <Message.Body>Message Content</Message.Body>
+        <Message.Footer>
+          <>
+            <Box>
+              <Message.Button>
+                <Icon name="comments-outline" mr={200} />
+                button with text
+              </Message.Button>
+            </Box>
+            <Box>
+              <Message.Button aria-label="Heart Icon Example">
+                <Icon name="heart-outline" />
+              </Message.Button>
+              <Message.Button aria-label="Tag Icon Example">
+                <Icon name="tag-outline" />
+              </Message.Button>
+              <Message.Button aria-label="Reply Icon Example">
+                <Icon name="reply-outline" />
+              </Message.Button>
+              <Message.Button aria-label="Check Icon Example">
+                <Icon name="circle-check-outline" />
+              </Message.Button>
+            </Box>
+          </>
+        </Message.Footer>
+      </Message>
+      {/* @ts-expect-error - test that missing required props is rejected */}
+      <Message />
+    </>
+  );
+}
+
+render(<MessageTypes />);

package/src/__tests__/features.test.tsx

@@ -0,0 +1,10 @@
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import { defaultStory as defaultMessageStory } from "../Message.stories";
+
+describe("Message", () => {
+  it("should render properly", async () => {
+    const { container, runA11yCheck } = render(defaultMessageStory({}));
+    expect(container).toBeTruthy();
+    await runA11yCheck();
+  });
+});

package/src/constants.ts

@@ -0,0 +1,7 @@
+export const MESSAGE_DENSITIES = {
+  COMPACT: "compact",
+  // Compact is deprecated. New applications should use condensed instead.
+  CONDENSED: "condensed",
+  SMALL: "small",
+  LARGE: "large",
+} as const;

package/src/index.ts

@@ -0,0 +1,6 @@
+import Message from "./Message";
+
+export default Message;
+export { Message };
+export * from "./MessageTypes";
+export * from "./constants";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/styles.ts

@@ -0,0 +1,139 @@
+import { memo } from "react";
+import styled from "styled-components";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
+import Box from "@sproutsocial/seeds-react-box";
+import type { TypeTheme } from "@sproutsocial/seeds-react-theme";
+import type { TypeMessageProps } from "./MessageTypes";
+import { MESSAGE_DENSITIES } from "./constants";
+
+const Container = styled(Box)`
+  border-radius: ${(props) => props.theme.radii.outer};
+  border-width: ${(props) => props.theme.borderWidths[500]};
+  border-style: solid;
+  background-color: ${(props) => {
+    //@ts-ignore
+    return props.theme.colors[props.bg];
+  }};
+  &:focus {
+    ${focusRing} transition: box-shadow 0.15s;
+  }
+`;
+
+Container.displayName = "Message.Container";
+
+export const MessageHeader = memo(styled(Box)<TypeMessageProps>`
+  padding: ${(props) =>
+    props.density === MESSAGE_DENSITIES.CONDENSED
+      ? `0 0 0 ${props.theme.space[100]}`
+      : props.theme.space[300]};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom-width: ${(props) =>
+    props.density === MESSAGE_DENSITIES.CONDENSED
+      ? 0
+      : props.theme.borderWidths[500]};
+  border-bottom-style: solid;
+  border-radius: ${(props) => props.theme.radii.outer}
+    ${(props) => props.theme.radii.outer} 0 0;
+  ${(props) => props.theme.typography[200]};
+`);
+
+const getContentPadding = (props: TypeMessageProps & { theme: TypeTheme }) => {
+  if (!props.indentContent) {
+    return props.theme.space[400];
+  }
+
+  switch (props.density) {
+    case MESSAGE_DENSITIES.LARGE: {
+      // 40 px avatar + 8px(message.header) + 16px(mr)
+      return "64px";
+    }
+
+    case MESSAGE_DENSITIES.COMPACT: {
+      // 20px avatar plus space.300 margin plus space.400 margin
+      return "40px";
+    }
+
+    case MESSAGE_DENSITIES.CONDENSED: {
+      // 24px avatar plus space.200 margin plus space.350 margin
+      return "40px";
+    }
+
+    case MESSAGE_DENSITIES.SMALL:
+    default: {
+      // 32px avatar plus space.300 margin plus space.400 margin
+      return "56px";
+    }
+  }
+};
+
+const messagePadding = ({
+  density,
+  theme,
+}: {
+  density?: TypeMessageProps["density"];
+  theme: TypeTheme;
+}) => {
+  if (density === MESSAGE_DENSITIES.CONDENSED) {
+    return 0;
+  }
+
+  if (density === MESSAGE_DENSITIES.COMPACT) {
+    return theme.space[300];
+  }
+
+  return theme.space[400];
+};
+
+export const MessageBody = styled(Box)<TypeMessageProps>`
+  padding: ${messagePadding} ${messagePadding} ${messagePadding}
+    ${(props) => getContentPadding(props)};
+  font-family: ${(props) => props.theme.fontFamily};
+  ${(props) =>
+    props.density === MESSAGE_DENSITIES.COMPACT ||
+    props.density === MESSAGE_DENSITIES.CONDENSED
+      ? props.theme.typography[200]
+      : props.theme.typography[300]};
+`;
+
+export const MessageFooter = styled(Box)<TypeMessageProps>`
+  padding-bottom: ${(props) =>
+    props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300]};
+  padding-left: ${(props) => getContentPadding(props)};
+  padding-right: ${(props) =>
+    props.density === MESSAGE_DENSITIES.CONDENSED ? 0 : props.theme.space[300]};
+  border-radius: 0 0 ${(props) => props.theme.radii.outer}
+    ${(props) => props.theme.radii.outer};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: ${(props) =>
+    props.density === MESSAGE_DENSITIES.CONDENSED ? "nowrap" : "wrap"};
+`;
+
+export const MessageMeta = styled(Box)<TypeMessageProps>`
+  background: none;
+  border-width: 0;
+  border-style: none;
+  border-top-width: 1px;
+  border-top-style: solid;
+  display: block;
+  width: 100%;
+  text-align: start;
+  border-radius: 0 0 ${(props) => props.theme.radii.outer}
+    ${(props) => props.theme.radii.outer};
+  ${(props) => props.theme.typography[100]};
+  margin: ${(props) => props.theme.space[300]} 0
+    ${(props) => props.theme.space[200]};
+  padding: ${(props) => props.theme.space[200]}
+    ${(props) => props.theme.space[400]};
+  padding-left: ${(props) => getContentPadding(props)};
+  cursor: ${(props) => (props.onClick ? "pointer" : "default")};
+  color: ${(props) => props.theme.colors.text.subtext};
+  &:focus {
+    ${focusRing};
+  }
+`;
+
+export default Container;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));