restyle

Arize-ai · Oct 12, 2024 · 071a413 · 071a413
1 parent 59fbe0a
commit 071a413
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 12 deletions.
diff --git a/src/accordion/Accordion.tsx b/src/accordion/Accordion.tsx
@@ -11,7 +11,8 @@ export interface AccordionProps {
 
 const accordionItemCSS = css`
   cursor: pointer;
-  padding: var(--accordion-padding-top) var(--accordion-padding-side);
+  height: 40px;
+  padding: 0 var(--accordion-padding-side);
   display: block;
   width: 100%;
   display: flex;
@@ -48,12 +49,16 @@ export function Accordion({ children }: AccordionProps) {
       role="region"
       css={css`
         --accordion-animation-duration: ${theme.animation.global.duration}ms;
-
         &.ac-accordion--default {
           --accordion-padding-top: var(--ac-global-dimension-static-size-100);
           --accordion-padding-side: var(--ac-global-dimension-static-size-200);
           --accordion-font-size: ${theme.typography.sizes.medium.fontSize}px;
         }
+        .ac-accordion-item:not(:last-of-type) {
+          .ac-accordion-itemContent {
+            border-bottom: 1px solid var(--ac-global-border-color-dark);
+          }
+        }
       `}
     >
       {children}
@@ -77,6 +82,10 @@ export interface AccordionItemProps {
    * Callback function for when the collapsed state changes
    */
   onChange?: (isOpen: boolean) => void;
+  /**
+   * An extra element to show on the right hand side
+   */
+  extra?: ReactNode;
 }
 
 export function AccordionItem(props: AccordionItemProps) {
@@ -87,6 +96,7 @@ export function AccordionItem(props: AccordionItemProps) {
     defaultIsOpen = true,
     onChange,
     children,
+    extra,
   } = props;
   const [isOpen, setIsOpen] = useState(defaultIsOpen);
   const contentId = `${id}-content`,
@@ -137,23 +147,32 @@ export function AccordionItem(props: AccordionItemProps) {
           aria-expanded={isOpen}
         >
           {titleEl}
-          <Icon
-            svg={<ArrowIosDownwardOutline />}
-            className="ac-accordion-itemIndicator"
+          <div
             css={css`
-              transition: transform ease var(--accordion-animation-duration);
-              transform: rotate(0deg);
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              gap: var(--ac-global-dimension-static-size-100);
             `}
-            aria-hidden={true}
-          />
+          >
+            {extra}
+            <Icon
+              svg={<ArrowIosDownwardOutline />}
+              className="ac-accordion-itemIndicator"
+              css={css`
+                transition: transform ease var(--accordion-animation-duration);
+                transform: rotate(0deg);
+              `}
+              aria-hidden={true}
+            />
+          </div>
         </button>
       </Heading>
       <div
         className="ac-accordion-itemContent"
         id={contentId}
         role="region"
         css={css`
-          border-bottom: 1px solid var(--ac-global-border-color-dark);
           display: ${isOpen ? 'block' : 'none'};
         `}
         aria-labelledby={headerId}

diff --git a/stories/Accordion.stories.tsx b/stories/Accordion.stories.tsx
@@ -7,6 +7,8 @@ import {
   AccordionItem,
   Card,
   Counter,
+  Text,
+  Button,
 } from '../src';
 import InfoTip from './components/InfoTip';
 import { ThemeSplitView } from './components/ThemeSplitView';
@@ -20,14 +22,14 @@ const meta: Meta = {
 };
 
 const AccordionContents = () => (
-  <p style={{ padding: 16, margin: 10 }}>
+  <Text>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
     non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-  </p>
+  </Text>
 );
 
 export default meta;
@@ -68,3 +70,34 @@ const Template: Story<AccordionProps> = args => {
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
+
+export function simple() {
+  return (
+    <ThemeSplitView>
+      <Accordion>
+        <AccordionItem
+          title="2 Predictions"
+          titleExtra={<InfoTip>Description of predictions</InfoTip>}
+          id="predictions"
+          extra={
+            <Button variant="default" size="compact">
+              Edit
+            </Button>
+          }
+        >
+          <AccordionContents />
+        </AccordionItem>
+        <AccordionItem
+          title="Features"
+          titleExtra={<Counter variant="light">100</Counter>}
+          id="features"
+        >
+          <AccordionContents />
+        </AccordionItem>
+        <AccordionItem title="10 Actuals" id="actuals">
+          <AccordionContents />
+        </AccordionItem>
+      </Accordion>
+    </ThemeSplitView>
+  );
+}