From 071a41311d6b13a4a71862feab331e4e456ca377 Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Sat, 12 Oct 2024 17:39:01 -0600 Subject: [PATCH] restyle --- src/accordion/Accordion.tsx | 39 ++++++++++++++++++++++++++--------- stories/Accordion.stories.tsx | 37 +++++++++++++++++++++++++++++++-- 2 files changed, 64 insertions(+), 12 deletions(-) diff --git a/src/accordion/Accordion.tsx b/src/accordion/Accordion.tsx index 8a1eb39a..54dc31de 100644 --- 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,15 +147,25 @@ export function AccordionItem(props: AccordionItemProps) { aria-expanded={isOpen} > {titleEl} - } - className="ac-accordion-itemIndicator" +
+ > + {extra} + } + className="ac-accordion-itemIndicator" + css={css` + transition: transform ease var(--accordion-animation-duration); + transform: rotate(0deg); + `} + aria-hidden={true} + /> +
( -

+ 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 -

+ ); export default meta; @@ -68,3 +70,34 @@ const Template: Story = 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 ( + + + Description of predictions} + id="predictions" + extra={ + + } + > + + + 100} + id="features" + > + + + + + + + + ); +}