@sproutsocial/seeds-react-accordion 0.1.0

package/src/Accordion.stories.tsx

@@ -0,0 +1,563 @@
+import React from "react";
+import { type StoryFn, type Meta } from "@storybook/react";
+import { Accordion } from "./Accordion";
+import { AccordionTrigger } from "./AccordionTrigger";
+import { AccordionContent } from "./AccordionContent";
+import { AccordionItem } from "./AccordionItem";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Token } from "@sproutsocial/seeds-react-token";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+
+export default {
+  title: "Components/Accordion",
+  component: Accordion,
+} as Meta<typeof Accordion>;
+
+export const Default = {
+  args: {
+    defaultValue: ["section-1"],
+    styled: true,
+  },
+  render: (args: any) => {
+    return (
+      <Accordion {...args}>
+        <AccordionItem value="section-1">
+          <AccordionTrigger title="Paint with Bob" />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+            <Text.SmallBodyCopy as="p">
+              A tree needs to be your friend if you're going to paint him. It's
+              amazing what you can do with a little love in your heart. If there
+              are two big trees, eventually there will be a little tree. Think
+              about a cloud. Just float around and be there.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const Configurable = {
+  args: {
+    defaultValue: ["section-1"],
+    triggerPosition: "left",
+    triggerIcon: <Icon className="triggerIcon" name="caret-down-solid" />,
+    styled: true,
+  },
+  render: (args: any) => {
+    return (
+      <Accordion {...args}>
+        <AccordionItem value="section-1">
+          <AccordionTrigger title="Paint with Bob" />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+            <Text.SmallBodyCopy as="p">
+              A tree needs to be your friend if you're going to paint him. It's
+              amazing what you can do with a little love in your heart. If there
+              are two big trees, eventually there will be a little tree. Think
+              about a cloud. Just float around and be there.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const RelatedActions = {
+  args: {
+    defaultValue: ["section-1"],
+    triggerPosition: "left",
+    styled: true,
+  },
+  render: (args: any) => (
+    <Box p={300} width="100%" height="100%" bg="app.background.base">
+      <Accordion {...args}>
+        <AccordionItem value="section-1">
+          <AccordionTrigger
+            title="Paint with Bob"
+            overflowMenu={{
+              items: [
+                {
+                  id: "edit",
+                  iconName: "pencil-to-square-outline",
+                  children: "Edit",
+                  onClick: () => alert("Edit clicked"),
+                },
+                {
+                  id: "share",
+                  iconName: "arrow-up-from-bracket-outline",
+                  children: "Share",
+                  onClick: () => alert("Share clicked"),
+                },
+                {
+                  id: "archive",
+                  iconName: "folder-outline",
+                  children: "Archive",
+                  onClick: () => alert("Archive clicked"),
+                },
+                {
+                  id: "delete",
+                  iconName: "trash-outline",
+                  children: "Delete",
+                  onClick: () => alert("Delete clicked"),
+                },
+              ],
+            }}
+            relatedActions={[
+              {
+                iconName: "heart-outline",
+                onClick: () => alert("Like clicked"),
+                "aria-label": "Like",
+              },
+              {
+                iconName: "alarm-clock",
+                onClick: () => alert("Set alarm"),
+                "aria-label": "Set alarm",
+              },
+            ]}
+          />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+            <Text.SmallBodyCopy as="p">
+              A tree needs to be your friend if you're going to paint him. It's
+              amazing what you can do with a little love in your heart. If there
+              are two big trees, eventually there will be a little tree. Think
+              about a cloud. Just float around and be there.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="section-2">
+          <AccordionTrigger
+            title="Learn with Bob"
+            relatedActions={[
+              {
+                iconName: "alarm-clock",
+                onClick: () => alert("hello"),
+                "aria-label": "Set alarm",
+              },
+            ]}
+            rightSlot={
+              <Box ml={300}>
+                <Token mr={200} closeable={false}>
+                  Happy
+                </Token>
+                <Token closeable={false}>Trees</Token>
+              </Box>
+            }
+          />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+            <Text.SmallBodyCopy as="p">
+              A tree needs to be your friend if you're going to paint him. It's
+              amazing what you can do with a little love in your heart. If there
+              are two big trees, eventually there will be a little tree. Think
+              about a cloud. Just float around and be there.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="section-3">
+          <AccordionTrigger title="Laugh with Bob" />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+            <Text.SmallBodyCopy as="p">
+              A tree needs to be your friend if you're going to paint him. It's
+              amazing what you can do with a little love in your heart. If there
+              are two big trees, eventually there will be a little tree. Think
+              about a cloud. Just float around and be there.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </Box>
+  ),
+};
+
+export const Styleable = {
+  render: () => {
+    return (
+      <Accordion
+        triggerPosition="left"
+        defaultValue={["section-1"]}
+        styled={false}
+      >
+        <AccordionItem value="section-1">
+          <AccordionTrigger
+            title="Paint with Bob"
+            bg="blue.100"
+            p={400}
+            color="red.500"
+            fontWeight="bold"
+            fontSize={400}
+          />
+          <AccordionContent bg="blue.300" p={400}>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+            <Text.SmallBodyCopy as="p">
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="section-2">
+          <AccordionTrigger
+            bg="red.300"
+            p={400}
+            title="Learn with Bob"
+            relatedActions={[
+              {
+                iconName: "alarm-clock",
+                onClick: () => alert("hello"),
+                "aria-label": "Set alarm",
+              },
+              {
+                iconName: "ellipsis-horizontal-outline",
+                onClick: () => alert("goodbye"),
+                "aria-label": "More options",
+              },
+            ]}
+          />
+          <AccordionContent bg="blue.300" p={400}>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+            <Text.SmallBodyCopy as="p">
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+  },
+};
+
+export const Single = {
+  args: {
+    defaultValue: ["section-1"],
+    type: "single",
+    styled: true,
+  },
+  render: (args: any) => (
+    <Box p={300} width="100%" height="100%" bg="app.background.base">
+      <Accordion {...args}>
+        <AccordionItem value="section-1">
+          <AccordionTrigger
+            title="Paint with Bob"
+            relatedActions={[
+              {
+                iconName: "alarm-clock",
+                onClick: () => alert("hello"),
+                "aria-label": "Set alarm",
+              },
+              {
+                iconName: "ellipsis-horizontal-outline",
+                onClick: () => alert("goodbye"),
+                "aria-label": "More options",
+              },
+            ]}
+          />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+            <Text.SmallBodyCopy as="p">
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="section-2">
+          <AccordionTrigger
+            title="Learn with Bob"
+            relatedActions={[
+              {
+                iconName: "alarm-clock",
+                onClick: () => alert("hello"),
+                "aria-label": "Set alarm",
+              },
+              {
+                iconName: "ellipsis-horizontal-outline",
+                onClick: () => alert("goodbye"),
+                "aria-label": "More options",
+              },
+            ]}
+            rightSlot={
+              <Box ml={300}>
+                <Token mr={200} closeable={false}>
+                  Happy
+                </Token>
+                <Token closeable={false}>Trees</Token>
+              </Box>
+            }
+          />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+            <Text.SmallBodyCopy as="p">
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="section-3">
+          <AccordionTrigger title="Laugh with Bob" />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p" mb={400}>
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+            <Text.SmallBodyCopy as="p">
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world. We don't need any guidelines or formats. All we need to do
+              is just let it flow right out of us. Use absolutely no pressure.
+              Just like an angel's wing. In your imagination you can go anywhere
+              you want. Every time you practice, you learn more.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </Box>
+  ),
+};
+
+export const RenderTest = {
+  args: {
+    defaultValue: ["section-1"],
+    styled: true,
+  },
+  render: (args: any) => {
+    return (
+      <>
+        <Box mb={500}>
+          <Accordion {...args}>
+            <AccordionItem value="section-1">
+              <AccordionTrigger title="Paint with Bob" />
+              <AccordionContent>
+                <Text.SmallBodyCopy as="p" mb={400}>
+                  We don't really know where this goes - and I'm not sure we
+                  really care. Paint anything you want on the canvas. Create
+                  your own world. We don't need any guidelines or formats. All
+                  we need to do is just let it flow right out of us. Use
+                  absolutely no pressure. Just like an angel's wing. In your
+                  imagination you can go anywhere you want. Every time you
+                  practice, you learn more.
+                </Text.SmallBodyCopy>
+                <Text.SmallBodyCopy as="p">
+                  We don't really know where this goes - and I'm not sure we
+                  really care. Paint anything you want on the canvas. Create
+                  your own world. We don't need any guidelines or formats. All
+                  we need to do is just let it flow right out of us. Use
+                  absolutely no pressure. Just like an angel's wing. In your
+                  imagination you can go anywhere you want. Every time you
+                  practice, you learn more.
+                </Text.SmallBodyCopy>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </Box>
+
+        <Accordion
+          triggerPosition="left"
+          defaultValue={["section-1"]}
+          styled={false}
+        >
+          <AccordionItem value="section-1">
+            <AccordionTrigger title="Paint with Bob" bg="red.300" p={400} />
+            <AccordionContent bg="blue.300" p={400}>
+              <Text.SmallBodyCopy as="p" mb={400}>
+                We don't really know where this goes - and I'm not sure we
+                really care. Paint anything you want on the canvas. Create your
+                own world. We don't need any guidelines or formats. All we need
+                to do is just let it flow right out of us. Use absolutely no
+                pressure. Just like an angel's wing. In your imagination you can
+                go anywhere you want. Every time you practice, you learn more.
+              </Text.SmallBodyCopy>
+              <Text.SmallBodyCopy as="p">
+                We don't really know where this goes - and I'm not sure we
+                really care. Paint anything you want on the canvas. Create your
+                own world. We don't need any guidelines or formats. All we need
+                to do is just let it flow right out of us. Use absolutely no
+                pressure. Just like an angel's wing. In your imagination you can
+                go anywhere you want. Every time you practice, you learn more.
+              </Text.SmallBodyCopy>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="section-2">
+            <AccordionTrigger
+              bg="red.300"
+              p={400}
+              title="Learn with Bob"
+              relatedActions={[
+                {
+                  iconName: "alarm-clock",
+                  onClick: () => alert("hello"),
+                  "aria-label": "Set alarm",
+                },
+                {
+                  iconName: "ellipsis-horizontal-outline",
+                  onClick: () => alert("goodbye"),
+                  "aria-label": "More options",
+                },
+              ]}
+            />
+            <AccordionContent bg="blue.300" p={400}>
+              <Text.SmallBodyCopy as="p" mb={400}>
+                We don't really know where this goes - and I'm not sure we
+                really care. Paint anything you want on the canvas. Create your
+                own world. We don't need any guidelines or formats. All we need
+                to do is just let it flow right out of us. Use absolutely no
+                pressure. Just like an angel's wing. In your imagination you can
+                go anywhere you want. Every time you practice, you learn more.
+              </Text.SmallBodyCopy>
+              <Text.SmallBodyCopy as="p">
+                We don't really know where this goes - and I'm not sure we
+                really care. Paint anything you want on the canvas. Create your
+                own world. We don't need any guidelines or formats. All we need
+                to do is just let it flow right out of us. Use absolutely no
+                pressure. Just like an angel's wing. In your imagination you can
+                go anywhere you want. Every time you practice, you learn more.
+              </Text.SmallBodyCopy>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </>
+    );
+  },
+};
+
+export const OverflowMenu = {
+  name: "Overflow Menu",
+  args: {
+    defaultValue: ["section-1"],
+    styled: true,
+  },
+  render: (args: any) => (
+    <Box p={300} width="100%" height="100%" bg="app.background.base">
+      <Accordion {...args}>
+        <AccordionItem value="section-1">
+          <AccordionTrigger
+            title="Paint with Bob"
+            overflowMenu={{
+              items: [
+                {
+                  id: "edit",
+                  iconName: "pencil-to-square-outline",
+                  children: "Edit",
+                  onClick: () => alert("Edit clicked"),
+                },
+                {
+                  id: "duplicate",
+                  iconName: "plus-outline",
+                  children: "Duplicate",
+                  onClick: () => alert("Duplicate clicked"),
+                },
+                {
+                  id: "delete",
+                  iconName: "trash-outline",
+                  children: "Delete",
+                  onClick: () => alert("Delete clicked"),
+                },
+              ],
+              "aria-label": "More options for Paint with Bob",
+            }}
+            relatedActions={[
+              {
+                iconName: "alarm-clock",
+                onClick: () => alert("Set alarm"),
+                "aria-label": "Set alarm",
+              },
+            ]}
+          />
+          <AccordionContent>
+            <Text.SmallBodyCopy as="p">
+              We don't really know where this goes - and I'm not sure we really
+              care. Paint anything you want on the canvas. Create your own
+              world.
+            </Text.SmallBodyCopy>
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </Box>
+  ),
+};

package/src/Accordion.tsx

@@ -0,0 +1,63 @@
+import React, { createContext, type ReactElement } from "react";
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { type TypeAccordionProps } from "./AccordionTypes";
+
+export const AccordionContext = createContext<{
+  triggerIcon: ReactElement | null;
+  triggerPosition: string;
+  styled: boolean;
+}>({
+  triggerIcon: null,
+  triggerPosition: "",
+  styled: false,
+});
+
+export const Accordion = ({
+  children,
+  collapsible,
+  defaultValue = ["item-0"],
+  triggerPosition = "right",
+  triggerIcon = <Icon className="triggerIcon" name="chevron-down-outline" />,
+  type = "multiple",
+  styled = true,
+}: TypeAccordionProps) => {
+  if (type === "single") {
+    return (
+      <RadixAccordion.Root
+        type="single"
+        defaultValue={
+          Array.isArray(defaultValue) ? defaultValue[0] : defaultValue
+        }
+        collapsible={collapsible}
+      >
+        <AccordionContext.Provider
+          value={{
+            triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,
+            triggerPosition,
+            styled,
+          }}
+        >
+          {children}
+        </AccordionContext.Provider>
+      </RadixAccordion.Root>
+    );
+  }
+
+  return (
+    <RadixAccordion.Root
+      type="multiple"
+      defaultValue={Array.isArray(defaultValue) ? defaultValue : [defaultValue]}
+    >
+      <AccordionContext.Provider
+        value={{
+          triggerIcon: React.isValidElement(triggerIcon) ? triggerIcon : null,
+          triggerPosition,
+          styled,
+        }}
+      >
+        {children}
+      </AccordionContext.Provider>
+    </RadixAccordion.Root>
+  );
+};

package/src/AccordionContent.tsx

@@ -0,0 +1,23 @@
+import { StyledRadixAccordionContent, ContentContainer } from "./styles";
+import { type TypeAccordionSystemProps } from "./AccordionTypes";
+import { AccordionContext } from "./Accordion";
+import { useContext } from "react";
+
+interface TypeAccordionContentProps extends TypeAccordionSystemProps {
+  children?: React.ReactNode;
+}
+
+export const AccordionContent = ({
+  children,
+  ...rest
+}: TypeAccordionContentProps) => {
+  const { styled } = useContext(AccordionContext);
+
+  return (
+    <StyledRadixAccordionContent data-styled={styled}>
+      <ContentContainer data-styled={styled} {...rest}>
+        {children}
+      </ContentContainer>
+    </StyledRadixAccordionContent>
+  );
+};

package/src/AccordionItem.tsx

@@ -0,0 +1,11 @@
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import { type TypeAccordionItemProps } from "./AccordionTypes";
+import { StyledAccordionItem } from "./styles";
+
+export const AccordionItem = ({ children, value }: TypeAccordionItemProps) => {
+  return (
+    <StyledAccordionItem className="accordion-item" value={value}>
+      {children}
+    </StyledAccordionItem>
+  );
+};