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

package/CHANGELOG.md

@@ -1,317 +0,0 @@
-# @sproutsocial/seeds-react-content-block
-
-## 0.5.2
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.4
-- @sproutsocial/seeds-react-content-header@0.2.10
-
-## 0.5.1
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.3
-- @sproutsocial/seeds-react-content-header@0.2.9
-
-## 0.5.0
-
-### Minor Changes
-
-- eb6937d: Add optional `footerContent` and `footerActions` props for a styled footer area below the content, and `flushLayout` boolean prop to set content area padding to 0
-
-### Patch Changes
-
-- Updated dependencies [eb6937d]
-  - @sproutsocial/seeds-react-content-header@0.2.8
-
-## 0.4.1
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.2
-- @sproutsocial/seeds-react-content-header@0.2.7
-
-## 0.4.0
-
-### Minor Changes
-
-- 43380e5: Subtitle is now an optional prop
-
-## 0.3.7
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@2.0.1
-- @sproutsocial/seeds-react-content-header@0.2.6
-
-## 0.3.6
-
-### Patch Changes
-
-- Updated dependencies [4ba8720]
-- Updated dependencies [df9d751]
-  - @sproutsocial/seeds-react-theme@3.6.2
-  - @sproutsocial/seeds-react-button@2.0.0
-  - @sproutsocial/seeds-react-box@1.1.16
-  - @sproutsocial/seeds-react-container@0.3.10
-  - @sproutsocial/seeds-react-loader@1.0.16
-  - @sproutsocial/seeds-react-content-header@0.2.5
-
-## 0.3.5
-
-### Patch Changes
-
-- Updated dependencies [1f9a473]
-  - @sproutsocial/seeds-react-theme@3.6.1
-  - @sproutsocial/seeds-react-box@1.1.15
-  - @sproutsocial/seeds-react-container@0.3.9
-  - @sproutsocial/seeds-react-loader@1.0.15
-  - @sproutsocial/seeds-react-content-header@0.2.4
-  - @sproutsocial/seeds-react-button@1.4.3
-
-## 0.3.4
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.4.2
-- @sproutsocial/seeds-react-content-header@0.2.3
-
-## 0.3.3
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-button@1.4.1
-- @sproutsocial/seeds-react-content-header@0.2.2
-
-## 0.3.2
-
-### Patch Changes
-
-- Updated dependencies [7d54d67]
-  - @sproutsocial/seeds-react-button@1.4.0
-
-## 0.3.1
-
-### Patch Changes
-
-- Updated dependencies [17d4f12]
-  - @sproutsocial/seeds-react-theme@3.6.0
-  - @sproutsocial/seeds-react-box@1.1.14
-  - @sproutsocial/seeds-react-container@0.3.8
-  - @sproutsocial/seeds-react-loader@1.0.14
-  - @sproutsocial/seeds-react-content-header@0.2.1
-  - @sproutsocial/seeds-react-button@1.3.20
-
-## 0.3.0
-
-### Minor Changes
-
-- 5bb63e1: ContentBlock now uses ContentHeader/CollapsibleContentHeader internally and supports optional collapsible behavior via isCollapsible prop.
-
-### Patch Changes
-
-- Updated dependencies [5bb63e1]
-- Updated dependencies [5bb63e1]
-  - @sproutsocial/seeds-react-content-header@0.2.0
-  - @sproutsocial/seeds-react-container@0.3.7
-  - @sproutsocial/seeds-react-button@1.3.19
-  - @sproutsocial/seeds-react-loader@1.0.13
-
-## 0.2.13
-
-### Patch Changes
-
-- Updated dependencies [118e300]
-  - @sproutsocial/seeds-react-theme@3.5.1
-  - @sproutsocial/seeds-react-box@1.1.13
-  - @sproutsocial/seeds-react-container@0.3.6
-  - @sproutsocial/seeds-react-icon@2.2.4
-  - @sproutsocial/seeds-react-loader@1.0.12
-  - @sproutsocial/seeds-react-button@1.3.18
-
-## 0.2.12
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-icon@2.2.3
-- @sproutsocial/seeds-react-button@1.3.17
-
-## 0.2.11
-
-### Patch Changes
-
-- Updated dependencies [131db40]
-  - @sproutsocial/seeds-react-icon@2.2.2
-  - @sproutsocial/seeds-react-button@1.3.16
-
-## 0.2.10
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-icon@2.2.1
-- @sproutsocial/seeds-react-button@1.3.15
-
-## 0.2.9
-
-### Patch Changes
-
-- Updated dependencies [db6ce39]
-- Updated dependencies [20bb01b]
-- Updated dependencies [c7f2c70]
-  - @sproutsocial/seeds-react-theme@3.5.0
-  - @sproutsocial/seeds-react-icon@2.2.0
-  - @sproutsocial/seeds-react-box@1.1.12
-  - @sproutsocial/seeds-react-container@0.3.5
-  - @sproutsocial/seeds-react-loader@1.0.11
-  - @sproutsocial/seeds-react-button@1.3.14
-
-## 0.2.8
-
-### Patch Changes
-
-- Updated dependencies [29ced53]
-  - @sproutsocial/seeds-react-text@1.4.0
-
-## 0.2.7
-
-### Patch Changes
-
-- Updated dependencies [7716e16]
-  - @sproutsocial/seeds-react-theme@3.4.0
-  - @sproutsocial/seeds-react-box@1.1.11
-  - @sproutsocial/seeds-react-container@0.3.4
-  - @sproutsocial/seeds-react-icon@2.1.2
-  - @sproutsocial/seeds-react-loader@1.0.10
-  - @sproutsocial/seeds-react-button@1.3.13
-
-## 0.2.6
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.2
-- @sproutsocial/seeds-react-box@1.1.10
-- @sproutsocial/seeds-react-container@0.3.3
-- @sproutsocial/seeds-react-icon@2.1.1
-- @sproutsocial/seeds-react-loader@1.0.9
-- @sproutsocial/seeds-react-button@1.3.12
-
-## 0.2.5
-
-### Patch Changes
-
-- Updated dependencies [b147e07]
-  - @sproutsocial/seeds-react-icon@2.1.0
-  - @sproutsocial/seeds-react-button@1.3.11
-
-## 0.2.4
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-theme@3.3.1
-- @sproutsocial/seeds-react-box@1.1.9
-- @sproutsocial/seeds-react-container@0.3.2
-- @sproutsocial/seeds-react-icon@2.0.5
-- @sproutsocial/seeds-react-loader@1.0.8
-- @sproutsocial/seeds-react-button@1.3.10
-
-## 0.2.3
-
-### Patch Changes
-
-- Updated dependencies [750d1ea]
-  - @sproutsocial/seeds-react-theme@3.3.0
-  - @sproutsocial/seeds-react-button@1.3.9
-  - @sproutsocial/seeds-react-loader@1.0.7
-  - @sproutsocial/seeds-react-box@1.1.8
-  - @sproutsocial/seeds-react-container@0.3.1
-  - @sproutsocial/seeds-react-icon@2.0.4
-
-## 0.2.2
-
-### Patch Changes
-
-- e056fd7: Update ContentBlock to use children prop instead of content
-
-## 0.2.1
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-icon@2.0.3
-- @sproutsocial/seeds-react-button@1.3.8
-
-## 0.2.0
-
-### Minor Changes
-
-- e2f6976: Refactor ContentBlock to use the shared Container component from seeds-react-container instead of custom styles. This improves consistency across components and simplifies the codebase. Also removes unused type exports from seeds-react-container.
-
-### Patch Changes
-
-- Updated dependencies [e2f6976]
-  - @sproutsocial/seeds-react-container@0.3.0
-
-## 0.1.0
-
-### Minor Changes
-
-- 1de0863: **Breaking Changes**
-
-  `@sproutsocial/seeds-react-container` has been simplified to a basic styled container component. It now only provides border, background, and border-radius styling as a wrapper around Box, accepting all Box props.
-
-  The previous Container component functionality (with title, subtitle, loading states, and header actions) has been moved to a new package: `@sproutsocial/seeds-react-content-block`.
-
-  **Migration**
-
-  If you were using the old Container component with `title`, `subtitle`, `isLoading`, or `headerActions` props, switch to `@sproutsocial/seeds-react-content-block`:
-
-  ```tsx
-  // Before
-  import { Container } from "@sproutsocial/seeds-react-container";
-
-  // After
-  import { ContentBlock } from "@sproutsocial/seeds-react-content-block";
-  ```
-
-## 0.1.4
-
-### Patch Changes
-
-- @sproutsocial/seeds-react-icon@2.0.2
-- @sproutsocial/seeds-react-button@1.3.7
-
-## 0.1.3
-
-### Patch Changes
-
-- Updated dependencies [fa7579a]
-  - @sproutsocial/seeds-react-theme@3.2.1
-  - @sproutsocial/seeds-react-box@1.1.7
-  - @sproutsocial/seeds-react-icon@2.0.1
-  - @sproutsocial/seeds-react-loader@1.0.6
-  - @sproutsocial/seeds-react-button@1.3.6
-
-## 0.1.2
-
-### Patch Changes
-
-- Updated dependencies [40248a0]
-  - @sproutsocial/seeds-react-icon@2.0.0
-  - @sproutsocial/seeds-react-button@1.3.5
-
-## 0.1.1
-
-### Patch Changes
-
-- Updated dependencies [8f6ba8d]
-  - @sproutsocial/seeds-react-theme@3.2.0
-  - @sproutsocial/seeds-react-box@1.1.6
-  - @sproutsocial/seeds-react-icon@1.1.8
-  - @sproutsocial/seeds-react-loader@1.0.5
-  - @sproutsocial/seeds-react-button@1.3.4
-
-## 0.1.0
-
-### Minor Changes
-
-- 5f6fee3: Created new component called Container that accepts a title, subtitle, header action, and can display a loading state"

package/jest.config.js

@@ -1,9 +0,0 @@
-const baseConfig = require("@sproutsocial/seeds-testing");
-
-/** * @type {import('jest').Config} */
-const config = {
-  ...baseConfig,
-  displayName: "seeds-react-content-block",
-};
-
-module.exports = config;

package/src/ContentBlock.stories.tsx

@@ -1,189 +0,0 @@
-import React, { useState } from "react";
-import ContentBlock from "./ContentBlock";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Text } from "@sproutsocial/seeds-react-text";
-import { Box } from "@sproutsocial/seeds-react-box";
-import { Button } from "@sproutsocial/seeds-react-button";
-import { Icon } from "@sproutsocial/seeds-react-icon";
-
-const meta: Meta<typeof ContentBlock> = {
-  title: "Components/ContentBlock",
-  component: ContentBlock,
-  args: {
-    title: "Volume Breakdown - Outbound",
-    subtitle: "View a breakdown of your outbound volume.",
-    children: (
-      <Text.SmallBodyCopy>
-        Here is some content inside the content block.
-      </Text.SmallBodyCopy>
-    ),
-    isLoading: false,
-    headerActions: null,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ContentBlock>;
-
-export const Default: Story = {
-  render: (args) => <ContentBlock {...args} />,
-};
-
-export const WithoutSubtitle: Story = {
-  render: (args) => <ContentBlock {...args} subtitle={undefined} />,
-};
-
-export const WithHeaderActions: Story = {
-  render: (args) => (
-    <ContentBlock
-      {...args}
-      headerActions={
-        <Button size="small">
-          <Icon name="face-frown-open-solid" />
-        </Button>
-      }
-    />
-  ),
-};
-
-export const LoadingState: Story = {
-  render: (args) => <ContentBlock {...args} isLoading={true} />,
-};
-
-export const WithContentStyles: Story = {
-  render: (args) => (
-    <ContentBlock {...args} contentProps={{ p: 0, py: 400, bg: "blue.300" }} />
-  ),
-};
-
-export const WithFooter: Story = {
-  render: (args) => (
-    <ContentBlock
-      {...args}
-      footerContent={
-        <Text.SmallBodyCopy>Footer description text</Text.SmallBodyCopy>
-      }
-      footerActions={
-        <Button
-          href="https://app.sproutsocial.com/dashboard/"
-          appearance="secondary"
-        >
-          See profile performance
-        </Button>
-      }
-    />
-  ),
-};
-
-export const WithFlushContent: Story = {
-  render: (args) => (
-    <ContentBlock
-      {...args}
-      flushLayout
-      footerContent={
-        <Text.SmallBodyCopy>Footer description text</Text.SmallBodyCopy>
-      }
-    >
-      <Box p={400}>Impressions</Box>
-      <Box p={400} borderTop={500} borderColor="container.border.base">
-        Engagements
-      </Box>
-      <Box p={400} borderTop={500} borderColor="container.border.base">
-        Followers Gained
-      </Box>
-    </ContentBlock>
-  ),
-};
-
-export const Collapsible: Story = {
-  render: (args) => (
-    <ContentBlock {...args} isCollapsible>
-      <Text.SmallBodyCopy>
-        This content can be collapsed and expanded by clicking the header.
-      </Text.SmallBodyCopy>
-    </ContentBlock>
-  ),
-};
-
-export const CollapsibleDefaultClosed: Story = {
-  name: "Collapsible (Default Closed)",
-  render: (args) => (
-    <ContentBlock {...args} isCollapsible defaultOpen={false}>
-      <Text.SmallBodyCopy>
-        This content starts collapsed and can be expanded by clicking the
-        header.
-      </Text.SmallBodyCopy>
-    </ContentBlock>
-  ),
-};
-
-export const CollapsibleWithHeaderActions: Story = {
-  name: "Collapsible with Header Actions",
-  render: (args) => (
-    <ContentBlock
-      {...args}
-      isCollapsible
-      headerActions={
-        <Button size="small">
-          <Icon name="face-frown-open-solid" />
-        </Button>
-      }
-    >
-      <Text.SmallBodyCopy>
-        The header actions are independent from the collapse trigger. Clicking
-        the action button does not toggle the content.
-      </Text.SmallBodyCopy>
-    </ContentBlock>
-  ),
-};
-
-export const CollapsibleWithFooter: Story = {
-  name: "Collapsible with Footer",
-  render: (args) => (
-    <ContentBlock
-      {...args}
-      isCollapsible
-      footerContent={
-        <Text.SmallBodyCopy>Footer description text</Text.SmallBodyCopy>
-      }
-      footerActions={
-        <Button
-          href="https://app.sproutsocial.com/dashboard/"
-          appearance="secondary"
-        >
-          See profile performance
-        </Button>
-      }
-    >
-      <Text.SmallBodyCopy>
-        The footer collapses along with the content.
-      </Text.SmallBodyCopy>
-    </ContentBlock>
-  ),
-};
-
-export const CollapsibleControlled: Story = {
-  name: "Collapsible (Controlled)",
-  render: (args) => {
-    const [isOpen, setIsOpen] = useState(true);
-    return (
-      <>
-        <Button onClick={() => setIsOpen(!isOpen)} mb={400}>
-          {isOpen ? "Close" : "Open"} externally
-        </Button>
-        <ContentBlock
-          {...args}
-          isCollapsible
-          isOpen={isOpen}
-          onOpenChange={setIsOpen}
-        >
-          <Text.SmallBodyCopy>
-            This content block is controlled externally. Use the button above or
-            click the header to toggle.
-          </Text.SmallBodyCopy>
-        </ContentBlock>
-      </>
-    );
-  },
-};

package/src/ContentBlock.tsx

@@ -1,198 +0,0 @@
-import React, { useState } from "react";
-import { Box } from "@sproutsocial/seeds-react-box";
-import { Loader } from "@sproutsocial/seeds-react-loader";
-import { Collapsible } from "@sproutsocial/seeds-react-collapsible";
-import {
-  ContentHeader,
-  CollapsibleContentHeader,
-} from "@sproutsocial/seeds-react-content-header";
-import { Container } from "@sproutsocial/seeds-react-container";
-import { FooterContainer } from "./styles";
-
-interface ContentBlockBaseProps {
-  title: string;
-  subtitle?: string;
-  titleAs?: "h1" | "h2" | "h3" | "h4";
-  subtitleAs?: "h2" | "h3" | "h4" | "h5" | "p";
-  isLoading?: boolean;
-  children: React.ReactNode;
-  headerActions?: React.ReactNode;
-  contentProps?: React.ComponentProps<typeof Box>;
-  /** Sets content area padding to 0 */
-  flushLayout?: boolean;
-  /** Left slot of the footer area */
-  footerContent?: React.ReactNode;
-  /** Right slot of the footer area */
-  footerActions?: React.ReactNode;
-}
-
-type StaticContentBlockProps = ContentBlockBaseProps & {
-  isCollapsible?: false;
-  isOpen?: never;
-  defaultOpen?: never;
-  onOpenChange?: never;
-};
-
-type CollapsibleContentBlockProps = ContentBlockBaseProps & {
-  /** Enables collapse/expand behavior on the content area */
-  isCollapsible: true;
-  /** Controlled open state. When provided, the component is in controlled mode. */
-  isOpen?: boolean;
-  /** Initial open state for uncontrolled mode. Defaults to true. */
-  defaultOpen?: boolean;
-  /** Called when the open state changes */
-  onOpenChange?: (open: boolean) => void;
-};
-
-export type ContentBlockProps =
-  | StaticContentBlockProps
-  | CollapsibleContentBlockProps;
-
-const ContentArea = ({
-  isLoading,
-  children,
-  contentProps,
-  flushLayout,
-  hasFooter,
-}: Pick<
-  ContentBlockBaseProps,
-  "isLoading" | "children" | "contentProps" | "flushLayout"
-> & { hasFooter?: boolean }) => (
-  <Box
-    p={flushLayout ? 0 : 400}
-    {...contentProps}
-    borderBottomLeftRadius={hasFooter ? undefined : "outer"}
-    borderBottomRightRadius={hasFooter ? undefined : "outer"}
-  >
-    {isLoading ? (
-      <Box my={400}>
-        <Loader delay={false} />
-      </Box>
-    ) : (
-      children
-    )}
-  </Box>
-);
-
-const ContentFooter = ({
-  footerContent,
-  footerActions,
-}: {
-  footerContent?: React.ReactNode;
-  footerActions?: React.ReactNode;
-}) => (
-  <FooterContainer>
-    {footerContent && <span>{footerContent}</span>}
-    {footerActions && <span>{footerActions}</span>}
-  </FooterContainer>
-);
-
-const CollapsibleContentBlock = ({
-  title,
-  subtitle,
-  titleAs = "h2",
-  subtitleAs = "h3",
-  children,
-  isLoading,
-  headerActions,
-  contentProps,
-  flushLayout,
-  footerContent,
-  footerActions,
-  isOpen: controlledIsOpen,
-  defaultOpen = true,
-  onOpenChange,
-}: Omit<CollapsibleContentBlockProps, "isCollapsible">) => {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const open = controlledIsOpen !== undefined ? controlledIsOpen : internalOpen;
-  const hasFooter = !!(footerContent || footerActions);
-
-  const handleOpenChange = (newOpen: boolean) => {
-    if (controlledIsOpen === undefined) {
-      setInternalOpen(newOpen);
-    }
-    onOpenChange?.(newOpen);
-  };
-
-  return (
-    <Collapsible isOpen={open} onOpenChange={handleOpenChange}>
-      <Container as="section">
-        <CollapsibleContentHeader
-          title={title}
-          subtitle={subtitle}
-          headingLevel={titleAs}
-          subtitleAs={subtitleAs}
-          headerActions={headerActions}
-          trigger={Collapsible.Trigger}
-          triggerPosition="left"
-        />
-        <Collapsible.Panel>
-          <ContentArea
-            isLoading={isLoading}
-            contentProps={contentProps}
-            flushLayout={flushLayout}
-            hasFooter={hasFooter}
-          >
-            {children}
-          </ContentArea>
-          {hasFooter && (
-            <ContentFooter
-              footerContent={footerContent}
-              footerActions={footerActions}
-            />
-          )}
-        </Collapsible.Panel>
-      </Container>
-    </Collapsible>
-  );
-};
-
-const ContentBlock = ({ isCollapsible, ...props }: ContentBlockProps) => {
-  if (isCollapsible) {
-    return <CollapsibleContentBlock {...props} />;
-  }
-
-  const {
-    title,
-    subtitle,
-    titleAs = "h2",
-    subtitleAs = "h3",
-    children,
-    isLoading,
-    headerActions,
-    contentProps,
-    flushLayout,
-    footerContent,
-    footerActions,
-  } = props;
-
-  const hasFooter = !!(footerContent || footerActions);
-
-  return (
-    <Container as="section">
-      <ContentHeader
-        title={title}
-        subtitle={subtitle}
-        headingLevel={titleAs}
-        subtitleAs={subtitleAs}
-        headerActions={headerActions}
-      />
-      <ContentArea
-        isLoading={isLoading}
-        contentProps={contentProps}
-        flushLayout={flushLayout}
-        hasFooter={hasFooter}
-      >
-        {children}
-      </ContentArea>
-      {hasFooter && (
-        <ContentFooter
-          footerContent={footerContent}
-          footerActions={footerActions}
-        />
-      )}
-    </Container>
-  );
-};
-
-export default ContentBlock;