@sproutsocial/seeds-react-accordion 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-accordion",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Seeds React Accordion",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

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",
@@ -297,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
@@ -164,7 +166,7 @@ export const AccordionTrigger = ({
     );
 
   return (
-    <TriggerContainer data-styled={styled} {...triggerProps}>
+    <TriggerContainer data-styled={styled} $styled={styled} {...triggerProps}>
       <StyledRadixAccordionTrigger data-styled={styled} {...spacingProps}>
         {triggerPosition === "right" ? (
           <StyledAccordionArea>
@@ -190,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 {
@@ -64,6 +65,10 @@ export const StyledRadixAccordionTrigger = styled(
     padding: ${({ theme }) => theme.space[400]};
   }
 
+  &:focus {
+    ${focusRing}
+  }
+
   ${COMMON}
 `;
 
@@ -137,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 }) =>