@sproutsocial/seeds-react-accordion 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-accordion",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Seeds React Accordion",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -22,9 +22,9 @@
     "@sproutsocial/seeds-react-theme": "^3.2.1",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
     "@sproutsocial/seeds-react-box": "1.1.7",
-    "@sproutsocial/seeds-react-button": "1.3.7",
-    "@sproutsocial/seeds-react-icon": "2.0.2",
-    "@sproutsocial/seeds-react-menu": "1.7.1"
+    "@sproutsocial/seeds-react-button": "1.3.8",
+    "@sproutsocial/seeds-react-icon": "2.0.3",
+    "@sproutsocial/seeds-react-menu": "1.7.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/Accordion.stories.tsx

@@ -8,6 +8,7 @@ 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";
+import styled from "styled-components";
 
 export default {
   title: "Components/Accordion",
@@ -215,6 +216,13 @@ export const Styleable = {
     return (
       <Accordion
         triggerPosition="left"
+        triggerIcon={
+          <Icon
+            className="triggerIcon"
+            name="chevron-down-outline"
+            color="red.500"
+          />
+        }
         defaultValue={["section-1"]}
         styled={false}
       >
@@ -226,6 +234,18 @@ export const Styleable = {
             color="red.500"
             fontWeight="bold"
             fontSize={900}
+            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} typeScale={600}>
             We don't really know where this goes - and I'm not sure we really
@@ -278,6 +298,53 @@ export const Styleable = {
   },
 };
 
+const StyledTrigger = styled(AccordionTrigger)`
+  background-color: blue;
+  &:hover {
+    background-color: green;
+  }
+`;
+
+export const UsingStyledTrigger: StoryFn<typeof Accordion> = (args) => {
+  return (
+    <Accordion {...args}>
+      <AccordionItem value="section-1">
+        <StyledTrigger
+          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">
+            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 Single = {
   args: {
     defaultValue: ["section-1"],

package/src/AccordionTrigger.tsx

@@ -99,6 +99,8 @@ export const AccordionTrigger = ({
     }).filter(([_, value]) => value != null)
   );
 
+  const shouldRenderActionsBlock = Boolean(overflowMenu || validatedActions);
+
   // Render overflow menu from config
   const renderedOverflowMenu = overflowMenu && (
     <ActionMenu
@@ -107,7 +109,11 @@ export const AccordionTrigger = ({
           aria-label={overflowMenu["aria-label"]}
           appearance="unstyled"
         >
-          <Icon name="ellipsis-horizontal-outline" aria-hidden="true" />
+          <Icon
+            name="ellipsis-horizontal-outline"
+            aria-hidden="true"
+            color={color}
+          />
         </MenuToggleButton>
       }
     >
@@ -123,8 +129,13 @@ export const AccordionTrigger = ({
                 {...menuItemProps}
               >
                 {iconName ? (
-                  <Box display="flex" alignItems="center" gap="300">
-                    <Icon name={iconName} />
+                  <Box
+                    display="flex"
+                    alignItems="center"
+                    gap="300"
+                    color={color}
+                  >
+                    <Icon name={iconName} color={color} />
                     {children}
                   </Box>
                 ) : (
@@ -148,14 +159,14 @@ export const AccordionTrigger = ({
             onClick={action.onClick}
             aria-label={action["aria-label"]}
           >
-            <Icon name={action.iconName} aria-hidden="true" />
+            <Icon name={action.iconName} color={color} aria-hidden="true" />
           </Button>
         ))}
       </Box>
     );
 
   return (
-    <TriggerContainer data-styled={styled} {...triggerProps}>
+    <TriggerContainer data-styled={styled} $styled={styled} {...triggerProps}>
       <StyledRadixAccordionTrigger data-styled={styled} {...spacingProps}>
         {triggerPosition === "right" ? (
           <StyledAccordionArea>
@@ -181,10 +192,12 @@ export const AccordionTrigger = ({
           </StyledAccordionArea>
         )}
       </StyledRadixAccordionTrigger>
-      <Box mr={300} display="flex">
-        {renderedOverflowMenu}
-        {renderedRelatedActions}
-      </Box>
+      {shouldRenderActionsBlock && (
+        <Box mr={300} display="flex">
+          {renderedOverflowMenu}
+          {renderedRelatedActions}
+        </Box>
+      )}
     </TriggerContainer>
   );
 };

package/src/styles.ts

@@ -8,6 +8,7 @@ import {
   LAYOUT,
   TYPOGRAPHY,
 } from "@sproutsocial/seeds-react-system-props";
+import { focusRing } from "@sproutsocial/seeds-react-mixins";
 import { type TypeAccordionSystemProps } from "./AccordionTypes";
 
 interface StyledAccordionProps extends TypeAccordionSystemProps {
@@ -51,7 +52,6 @@ export const StyledRadixAccordionTrigger = styled(
   ${({ theme }) => theme.typography[200]};
 
   .triggerIcon {
-    color: ${({ theme }) => theme.colors.icon.base};
     transition: transform 300ms ease-in-out;
   }
 
@@ -65,6 +65,10 @@ export const StyledRadixAccordionTrigger = styled(
     padding: ${({ theme }) => theme.space[400]};
   }
 
+  &:focus {
+    ${focusRing}
+  }
+
   ${COMMON}
 `;
 
@@ -138,15 +142,14 @@ export const TriggerContainer = styled.div<StyledAccordionProps>`
   display: flex;
   align-items: center;
 
-  &[data-styled="true"] {
-    border-top: ${({ theme }) =>
-      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
-    border-left: ${({ theme }) =>
-      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
-    border-right: ${({ theme }) =>
-      `${theme.borderWidths[500]} solid ${theme.colors.container.border.base}`};
-    background: ${({ theme }) => theme.colors.container.background.base};
-  }
+  ${({ $styled, theme }) =>
+    $styled &&
+    `
+    border-top: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};
+    border-left: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};
+    border-right: ${theme.borderWidths[500]} solid ${theme.colors.container.border.base};
+    background: ${theme.colors.container.background.base};
+  `}
 
   .accordion-item[data-state="open"] &[data-styled="true"] {
     border-bottom: ${({ theme }) =>