@sproutsocial/seeds-react-badge 1.0.5 → 2.0.0

package/src/__tests__/features.test.tsx

@@ -1,94 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

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

package/src/styles.ts

@@ -1,36 +0,0 @@
-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

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

package/tsup.config.ts

@@ -1,12 +0,0 @@
-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,
-}));