@sproutsocial/seeds-react-badge 1.0.0

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@sproutsocial/seeds-react-badge",
+  "version": "1.0.0",
+  "description": "Seeds React Badge",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-box": "*",
+    "@sproutsocial/seeds-react-icon": "*",
+    "@styled-system/theme-get": "^5.1.2"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@types/styled-system": "^5.1.15"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Badge.stories.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+// import Numeral from "@src/Numeral";
+// import Stack from "@src/Stack";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { Badge, type TypeBadgeProps } from "./";
+import { Box } from "@sproutsocial/seeds-react-box";
+
+export default {
+  title: "Components/Badge",
+  component: Badge,
+  argTypes: {
+    badgeColor: {
+      options: [
+        "green",
+        "purple",
+        "yellow",
+        "orange",
+        "red",
+        "magenta",
+        "pink",
+        "aqua",
+        "teal",
+        "neutral",
+      ],
+      control: { type: "select" },
+    },
+  },
+  args: {
+    badgeColor: "green",
+  },
+};
+
+export const ConfigurableBadge = (args: TypeBadgeProps) => (
+  <Badge {...args}>I'm a badge</Badge>
+);
+
+ConfigurableBadge.story = {
+  name: "Configurable badge",
+};
+
+export const permutations = () => (
+  // <Stack space={450}>
+  <Box>
+    <Box display="flex" alignItems="center">
+      <Badge badgeColor="green">Badge</Badge>
+      <Badge>Badge</Badge>
+      <Badge badgeColor="purple">Badge</Badge>
+      <Badge badgeColor="yellow">Badge</Badge>
+      <Badge badgeColor="orange">Badge</Badge>
+      <Badge badgeColor="red">Badge</Badge>
+      <Badge badgeColor="magenta">Badge</Badge>
+      <Badge badgeColor="pink">Badge</Badge>
+      <Badge badgeColor="aqua">Badge</Badge>
+      <Badge badgeColor="teal">Badge</Badge>
+      <Badge badgeColor="neutral" iconName="atom-outline">
+        Badge
+      </Badge>
+      <Badge
+        size="small"
+        type="default"
+        bg="chartreuse"
+        color="crimson"
+        p={500}
+      >
+        Radical overrides!
+      </Badge>
+    </Box>
+    <Box display="flex" alignItems="center">
+      <Badge size="large" type="secondary" iconName="sparkle-outline">
+        Supports legacy types
+      </Badge>
+      <Badge size="large">
+        {/* <Numeral fontWeight="bold" number={1569241} /> */}
+        <Text ml={200}>and children!</Text>
+      </Badge>
+    </Box>
+  </Box>
+  // </Stack>
+);
+
+permutations.story = {
+  name: "Permutations",
+};

package/src/Badge.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import Box from "@sproutsocial/seeds-react-box";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Container from "./styles";
+import type { TypeBadgeProps } from "./BadgeTypes";
+
+const Badge = ({
+  children,
+  text,
+  iconName,
+  type,
+  tip,
+  size = "small",
+  badgeColor = "blue",
+  color,
+  ...rest
+}: TypeBadgeProps) => {
+  if (children && text) {
+    throw new Error(
+      "can't use both `children` and `text` props. Text is deprecated, consider using children."
+    );
+  }
+
+  return (
+    <Container
+      // size previously included default, which currently maps to small.  Once consumers have updated this can be simplified.
+      size={size === "default" ? "large" : size}
+      badgeColor={badgeColor}
+      data-tip={tip}
+      data-qa-badge={text || ""}
+      data-qa-badge-type={type}
+      data-qa-badge-tip={tip || ""}
+      type={type}
+      // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      color={color}
+      {...rest}
+    >
+      <Box display="flex" alignItems="center" justifyContent="center">
+        {iconName ? (
+          <Icon
+            mr={200}
+            name={iconName}
+            size={size === "small" ? "mini" : "small"}
+            aria-hidden
+          />
+        ) : null}
+        {children || text}
+      </Box>
+    </Container>
+  );
+};
+
+export default Badge;

package/src/BadgeTypes.ts

@@ -0,0 +1,30 @@
+import type { TypeIconName } from "@sproutsocial/seeds-react-icon";
+import type {
+  TypeSystemCommonProps,
+  TypeStyledComponentsCommonProps,
+} from "@sproutsocial/seeds-react-system-props";
+import { badgeColors } from "./constants";
+
+export type TypeBadgeColor = keyof typeof badgeColors;
+
+export interface TypeBaseBadgeProps
+  extends Omit<
+      React.ComponentPropsWithoutRef<"span">,
+      keyof TypeSystemCommonProps
+    >,
+    TypeSystemCommonProps,
+    TypeStyledComponentsCommonProps {}
+
+export interface TypeBadgeProps extends TypeBaseBadgeProps {
+  children?: React.ReactNode;
+  /** DEPRECATED: Use children instead of text */
+  text?: React.ReactNode;
+  /** Size default is deprecated in favor of small and large */
+  size?: "small" | "large" | "default";
+  badgeColor?: TypeBadgeColor;
+  iconName?: TypeIconName;
+  /** DEPRECATED: Possibly only used for testing. Refrain from using at all if possible. (optional) */
+  tip?: React.ReactNode;
+  /** DEPRECATED: The legacy method of choosing a theme. Use badgeColor instead. (optional) */
+  type?: string;
+}

package/src/__tests__/features.test.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import Badge from "../Badge";
+
+describe("Badge...", () => {
+  it("...should render with default props", () => {
+    render(<Badge>Test</Badge>);
+    expect(screen.getByText("Test")).toBeInTheDocument();
+    expect(screen.getByText("Test").closest("span")).toHaveStyleRule(
+      "padding",
+      "0px 4px"
+    );
+    expect(screen.getByText("Test").closest("span")).toHaveStyleRule(
+      "background",
+      "#deebfe"
+    );
+  });
+
+  it("...should render with correct size styling", () => {
+    render(<Badge size="large">Test</Badge>);
+    expect(screen.getByText("Test").closest("span")).toHaveStyleRule(
+      "padding",
+      "8px"
+    );
+  });
+
+  it("...should render with legacy type", () => {
+    render(<Badge type="secondary">Test</Badge>);
+    expect(screen.getByText("Test")).toBeInTheDocument();
+    expect(screen.getByText("Test").closest("span")).toHaveStyleRule(
+      "color",
+      "#364141"
+    );
+    expect(screen.getByText("Test").closest("span")).toHaveStyleRule(
+      "background",
+      "#fdefcd"
+    );
+  });
+
+  it("...should render with a badge color", () => {
+    render(<Badge badgeColor="purple">Test</Badge>);
+    expect(screen.getByText("Test")).toBeInTheDocument();
+    expect(screen.getByText("Test").closest("span")).toHaveStyleRule(
+      "background",
+      "#eaeaf9"
+    );
+  });
+
+  it("...should render with an icon", () => {
+    const { container } = render(
+      <Badge iconName="sparkle-outline">Test</Badge>
+    );
+    expect(container.querySelector("svg")).toBeTruthy();
+  });
+  it("...should fail with invalid iconName", () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    render(<Badge iconName="someinvalidname123">Test</Badge>);
+  });
+  it("should render with suggestion type", () => {
+    render(<Badge text="Test" type="suggestion" />);
+    expect(screen.getByText("Test")).toBeInTheDocument();
+    expect(
+      screen.getByDataQaLabel({ "badge-type": "suggestion" })
+    ).toBeTruthy();
+  });
+
+  it("...should render with tooltip class", () => {
+    render(<Badge tip="test tip">Test</Badge>);
+    expect(screen.getByText("Test")).toBeInTheDocument();
+    expect(screen.getByDataQaLabel({ "badge-tip": "test tip" })).toBeTruthy();
+  });
+
+  it("...should allow overriding qa props", () => {
+    render(
+      <Badge
+        data-qa-badge="text-override"
+        data-qa-badge-type="type-override"
+        data-qa-badge-tip="tip-override"
+        type="suggestion"
+        tip="tip"
+      >
+        Text
+      </Badge>
+    );
+    expect(screen.getByDataQaLabel({ badge: "text-override" })).toBeTruthy();
+    expect(
+      screen.getByDataQaLabel({ "badge-type": "type-override" })
+    ).toBeTruthy();
+    expect(
+      screen.getByDataQaLabel({ "badge-tip": "tip-override" })
+    ).toBeTruthy();
+  });
+});

package/src/__tests__/types.test.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import Badge from "../Badge";
+
+describe.skip("Badge/types", () => {
+  it("should render valid props", () => {
+    render(
+      <>
+        <Badge>Test</Badge>
+        <Badge size="large">Test</Badge>
+        <Badge type="secondary">Test</Badge>
+        <Badge badgeColor="purple">Test</Badge>
+        <Badge badgeColor="red">Test</Badge>
+        <Badge badgeColor="magenta">Test</Badge>
+        <Badge badgeColor="neutral">Test</Badge>
+        <Badge badgeColor="aqua">Test</Badge>
+        <Badge iconName="sparkle-outline">Test</Badge>;
+        <Badge text="Test" type="suggestion" />
+        <Badge tip="test tip">Test</Badge>
+        <Badge data-qa-badge="123456">Test</Badge>
+        {/* @ts-expect-error - test that invalid iconName is rejected */}
+        <Badge iconName="someinvalidname123">Test</Badge>
+        {/* @ts-expect-error - test that invalid badgeColor is rejected */}
+        <Badge badgeColor="notARealColor">Test</Badge>
+      </>
+    );
+  });
+});

package/src/constants.ts

@@ -0,0 +1,64 @@
+const defaultPurple = {
+  color: "colors.text.body",
+  background: "colors.container.background.decorative.purple",
+};
+
+const suggestion = {
+  color: "colors.text.body",
+  background: "colors.container.background.decorative.blue",
+};
+
+const passive = {
+  color: "colors.text.body",
+  background: "colors.container.background.decorative.neutral",
+};
+
+const primary = {
+  color: "colors.text.body",
+  background: "colors.container.background.decorative.blue",
+};
+
+const secondary = {
+  color: "colors.text.body",
+  background: "colors.container.background.decorative.yellow",
+};
+
+const common = {
+  color: "colors.text.inverse",
+  background: "colors.aqua.600",
+};
+
+const approval = {
+  color: "colors.text.body",
+  background: "colors.container.background.decorative.orange",
+};
+
+//Deprecated former "types"
+
+/**
+ * @deprecated Use badgeColor instead
+ */
+
+export const legacyBadgeColors = {
+  primary,
+  secondary,
+  passive,
+  common,
+  approval,
+  default: defaultPurple,
+  suggestion,
+};
+
+export const badgeColors = {
+  green: "green",
+  blue: "blue",
+  purple: "purple",
+  yellow: "yellow",
+  orange: "orange",
+  red: "red",
+  neutral: "neutral",
+  magenta: "magenta",
+  pink: "pink",
+  aqua: "aqua",
+  teal: "teal",
+} as const;

package/src/index.ts

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

package/src/styles.ts

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import { legacyBadgeColors } from "./constants";
+// @ts-ignore: no types exist for this thang
+import { themeGet } from "@styled-system/theme-get";
+
+type TypeTypeKey = keyof typeof legacyBadgeColors;
+
+const Container = styled.span<{
+  type?: TypeTypeKey;
+  badgeColor: string;
+  size: string;
+}>`
+  font-family: ${(p) => p.theme.fontFamily};
+  ${(p) =>
+    p.size === "small" ? p.theme.typography[100] : p.theme.typography[200]};
+  border-radius: 9999px;
+  line-height: 16px;
+  display: inline-block;
+  color: ${(p) =>
+    p.type
+      ? themeGet(legacyBadgeColors[p.type].color)
+      : p.theme.colors.text.body};
+  background: ${(p) =>
+    p.type
+      ? themeGet(legacyBadgeColors[p.type].background)
+      : p.theme.colors.container.background.decorative[p.badgeColor]};
+  padding: ${(p) =>
+    p.size === "small"
+      ? `${p.theme.space[0]} ${p.theme.space[200]}`
+      : `${p.theme.space[300]}`};
+  ${COMMON};
+`;
+
+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,
+}));