@sproutsocial/seeds-react-content-block 0.5.3 → 0.5.14

package/src/__tests__/content-block.test.tsx

@@ -1,280 +0,0 @@
-import React, { useState } from "react";
-import {
-  render,
-  screen,
-  fireEvent,
-} from "@sproutsocial/seeds-react-testing-library";
-import ContentBlock from "../ContentBlock";
-
-describe("ContentBlock Features", () => {
-  test("renders title and subtitle with correct semantic elements", () => {
-    render(
-      <ContentBlock
-        title="Test Title"
-        subtitle="Test Subtitle"
-        titleAs="h1"
-        subtitleAs="h2"
-      >
-        Content
-      </ContentBlock>
-    );
-
-    const titleElement = screen.getByText("Test Title");
-    const subtitleElement = screen.getByText("Test Subtitle");
-
-    expect(titleElement.tagName).toBe("H1");
-    expect(subtitleElement.tagName).toBe("H2");
-  });
-
-  test("renders without subtitle when not provided", () => {
-    render(
-      <ContentBlock title="Test Title" titleAs="h1">
-        Content
-      </ContentBlock>
-    );
-
-    expect(screen.getByText("Test Title")).toBeInTheDocument();
-    expect(screen.queryByText("Test Subtitle")).not.toBeInTheDocument();
-  });
-
-  test("renders content when not loading", () => {
-    render(
-      <ContentBlock
-        title="Test Title"
-        subtitle="Test Subtitle"
-        titleAs="h2"
-        subtitleAs="h3"
-        isLoading={false}
-      >
-        <div>Loaded Content</div>
-      </ContentBlock>
-    );
-    expect(screen.getByText("Loaded Content")).toBeInTheDocument();
-  });
-
-  test("renders loader when loading", () => {
-    render(
-      <ContentBlock
-        title="Test Title"
-        subtitle="Test Subtitle"
-        titleAs="h2"
-        subtitleAs="h3"
-        isLoading={true}
-      >
-        <div>Loaded Content</div>
-      </ContentBlock>
-    );
-
-    expect(
-      screen.getByDataQaLabel({
-        loader: "",
-      })
-    ).toBeInTheDocument();
-  });
-});
-
-describe("ContentBlock Footer", () => {
-  test("renders footerContent when provided", () => {
-    render(
-      <ContentBlock title="Title" footerContent={<span>Footer text</span>}>
-        Content
-      </ContentBlock>
-    );
-    expect(screen.getByText("Footer text")).toBeInTheDocument();
-  });
-
-  test("renders footerActions when provided", () => {
-    render(
-      <ContentBlock
-        title="Title"
-        footerActions={<button>Footer action</button>}
-      >
-        Content
-      </ContentBlock>
-    );
-    expect(screen.getByText("Footer action")).toBeInTheDocument();
-  });
-
-  test("renders both footerContent and footerActions together", () => {
-    render(
-      <ContentBlock
-        title="Title"
-        footerContent={<span>Footer text</span>}
-        footerActions={<button>Footer action</button>}
-      >
-        Content
-      </ContentBlock>
-    );
-    expect(screen.getByText("Footer text")).toBeInTheDocument();
-    expect(screen.getByText("Footer action")).toBeInTheDocument();
-  });
-
-  test("does not render footer when neither prop is provided", () => {
-    render(<ContentBlock title="Title">Content</ContentBlock>);
-    expect(screen.queryByText("Footer text")).not.toBeInTheDocument();
-  });
-
-  test("collapsible footer is visible when open and hidden when collapsed", () => {
-    render(
-      <ContentBlock
-        title="Title"
-        isCollapsible
-        footerContent={<span>Footer text</span>}
-      >
-        Content
-      </ContentBlock>
-    );
-
-    expect(screen.getByText("Footer text")).toBeInTheDocument();
-
-    fireEvent.click(screen.getByRole("button"));
-    expect(screen.queryByText("Footer text")).not.toBeInTheDocument();
-  });
-});
-
-describe("ContentBlock Collapsible", () => {
-  test("does not render chevron when not collapsible", () => {
-    render(
-      <ContentBlock title="Title" subtitle="Subtitle">
-        Content
-      </ContentBlock>
-    );
-
-    expect(screen.queryByRole("button")).not.toBeInTheDocument();
-  });
-
-  test("renders chevron icon when collapsible", () => {
-    render(
-      <ContentBlock title="Title" subtitle="Subtitle" isCollapsible>
-        Content
-      </ContentBlock>
-    );
-
-    const trigger = screen.getByRole("button");
-    expect(trigger).toBeInTheDocument();
-  });
-
-  test("defaults to open when collapsible", () => {
-    render(
-      <ContentBlock title="Title" subtitle="Subtitle" isCollapsible>
-        Visible Content
-      </ContentBlock>
-    );
-
-    const trigger = screen.getByRole("button");
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
-    expect(screen.getByText("Visible Content")).toBeInTheDocument();
-  });
-
-  test("can default to closed", () => {
-    render(
-      <ContentBlock
-        title="Title"
-        subtitle="Subtitle"
-        isCollapsible
-        defaultOpen={false}
-      >
-        Hidden Content
-      </ContentBlock>
-    );
-
-    const trigger = screen.getByRole("button");
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-  });
-
-  test("toggles content on trigger click", () => {
-    render(
-      <ContentBlock title="Title" subtitle="Subtitle" isCollapsible>
-        Toggle Content
-      </ContentBlock>
-    );
-
-    const trigger = screen.getByRole("button");
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
-
-    fireEvent.click(trigger);
-    expect(trigger).toHaveAttribute("aria-expanded", "false");
-
-    fireEvent.click(trigger);
-    expect(trigger).toHaveAttribute("aria-expanded", "true");
-  });
-
-  test("controlled mode respects isOpen prop", () => {
-    const ControlledContentBlock = () => {
-      const [open, setOpen] = useState(false);
-      return (
-        <>
-          <button onClick={() => setOpen(!open)}>External Toggle</button>
-          <ContentBlock
-            title="Title"
-            subtitle="Subtitle"
-            isCollapsible
-            isOpen={open}
-            onOpenChange={setOpen}
-          >
-            Controlled Content
-          </ContentBlock>
-        </>
-      );
-    };
-
-    render(<ControlledContentBlock />);
-
-    const trigger = screen.getByRole("button", { name: /External Toggle/i });
-    const collapsibleTrigger = screen
-      .getAllByRole("button")
-      .find((btn) => btn.getAttribute("aria-expanded") !== null);
-
-    expect(collapsibleTrigger).toHaveAttribute("aria-expanded", "false");
-
-    fireEvent.click(trigger);
-    expect(collapsibleTrigger).toHaveAttribute("aria-expanded", "true");
-  });
-
-  test("headerActions render alongside trigger and do not toggle collapse", () => {
-    const actionClick = jest.fn();
-
-    render(
-      <ContentBlock
-        title="Title"
-        subtitle="Subtitle"
-        isCollapsible
-        headerActions={<button onClick={actionClick}>Action</button>}
-      >
-        Content
-      </ContentBlock>
-    );
-
-    const actionButton = screen.getByText("Action");
-    expect(actionButton).toBeInTheDocument();
-
-    const collapsibleTrigger = screen
-      .getAllByRole("button")
-      .find((btn) => btn.getAttribute("aria-expanded") !== null);
-    expect(collapsibleTrigger).toHaveAttribute("aria-expanded", "true");
-
-    fireEvent.click(actionButton);
-    expect(actionClick).toHaveBeenCalledTimes(1);
-    // Collapse state should not change from clicking the action
-    expect(collapsibleTrigger).toHaveAttribute("aria-expanded", "true");
-  });
-
-  test("calls onOpenChange when toggled", () => {
-    const onOpenChange = jest.fn();
-
-    render(
-      <ContentBlock
-        title="Title"
-        subtitle="Subtitle"
-        isCollapsible
-        onOpenChange={onOpenChange}
-      >
-        Content
-      </ContentBlock>
-    );
-
-    const trigger = screen.getByRole("button");
-    fireEvent.click(trigger);
-    expect(onOpenChange).toHaveBeenCalledWith(false);
-  });
-});

package/src/index.ts

@@ -1,6 +0,0 @@
-import ContentBlock from "./ContentBlock";
-
-export type { ContentBlockProps } from "./ContentBlock";
-
-export default ContentBlock;
-export { ContentBlock };

package/src/styled.d.ts

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

@@ -1,19 +0,0 @@
-import styled from "styled-components";
-import { Box } from "@sproutsocial/seeds-react-box";
-
-export const ContentBlockContent = styled(Box)`
-  padding: ${({ theme }) => theme.space[400]};
-`;
-
-export const FooterContainer = styled.div`
-  box-sizing: border-box;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding: ${({ theme }) => theme.space[400]};
-  border-top: ${({ theme }) => theme.borderWidths[500]} solid
-    ${({ theme }) => theme.colors.container.border.base};
-  border-bottom-left-radius: ${({ theme }) => theme.radii.outer};
-  border-bottom-right-radius: ${({ theme }) => theme.radii.outer};
-`;

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "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

@@ -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,
-}));