From 03a32d7f7b96786badf735b3f62676497df8a00a Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Tue, 15 Oct 2024 11:52:25 -0600 Subject: [PATCH 1/2] feat: sizing, arrow position for accordion --- src/accordion/Accordion.tsx | 91 +++++++++++++++++++++----------- src/accordion/context.ts | 23 ++++++++ stories/Accordion.stories.tsx | 99 ++++++++++++++++++++++++----------- 3 files changed, 151 insertions(+), 62 deletions(-) create mode 100644 src/accordion/context.ts diff --git a/src/accordion/Accordion.tsx b/src/accordion/Accordion.tsx index 53a61c5..4d838e8 100644 --- a/src/accordion/Accordion.tsx +++ b/src/accordion/Accordion.tsx @@ -4,14 +4,23 @@ import { Heading } from '../content'; import { Icon, ArrowIosDownwardOutline } from '../icon'; import { classNames } from '../utils/classNames'; import theme from '../theme'; +import { Flex } from '../layout'; +import { AccordionContext, useAccordionContext } from './context'; export interface AccordionProps { children: ReactNode; + size?: 'M' | 'L'; + arrowPosition?: 'start' | 'end'; } +const sizeMap: Record, string> = { + M: 'medium', + L: 'large', +}; + const accordionItemCSS = css` cursor: pointer; - height: 40px; + height: var(--ac-accordion-item-height); padding: 0 var(--accordion-padding-side); display: block; width: 100%; @@ -37,27 +46,31 @@ const accordionItemCSS = css` * Accordion component for having collapsible sections * @see https://www.w3.org/TR/wai-aria-practices-1.1/#accordion */ -export function Accordion({ children }: AccordionProps) { +export function Accordion({ children, ...props }: AccordionProps) { return ( -
+
- {children} -
+ .ac-accordion-item:not(:last-of-type) { + .ac-accordion-itemContent { + border-bottom: 1px solid var(--ac-global-border-color-dark); + } + } + `} + > + {children} +
+ ); } @@ -93,6 +106,8 @@ export function AccordionItem(props: AccordionItemProps) { children, extra, } = props; + const { arrowPosition = 'end', size = 'M' } = useAccordionContext(); + const sizeVariant = sizeMap[size]; const [isOpen, setIsOpen] = useState(defaultIsOpen); const contentId = `${id}-content`, headerId = `${id}-heading`; @@ -121,6 +136,7 @@ export function AccordionItem(props: AccordionItemProps) {
- {titleEl} + + {arrowPosition === 'start' && } + {titleEl} +
{extra && {extra}} - } - className="ac-accordion-itemIndicator" - css={css` - transition: transform ease var(--accordion-animation-duration); - transform: rotate(0deg); - `} - aria-hidden={true} - /> + {arrowPosition === 'end' && }
@@ -195,3 +212,17 @@ function StopEventPropagation(props: PropsWithChildren) {
); } + +function ArrowIcon() { + return ( + } + className="ac-accordion-itemIndicator" + css={css` + transition: transform ease var(--accordion-animation-duration); + transform: rotate(0deg); + `} + aria-hidden={true} + /> + ); +} diff --git a/src/accordion/context.ts b/src/accordion/context.ts new file mode 100644 index 0000000..8eaa3d6 --- /dev/null +++ b/src/accordion/context.ts @@ -0,0 +1,23 @@ +import { createContext, useContext } from 'react'; +import { AccordionProps } from './Accordion'; + +interface AccordionContextType { + /** + * The position of the arrow icon in the accordion item + * @default 'end' + */ + arrowPosition?: AccordionProps['arrowPosition']; + /** + * The size of the accordion item + * @default 'M' + */ + size?: AccordionProps['size']; +} +export const AccordionContext = createContext({ + arrowPosition: 'end', + size: 'M', +}); + +export function useAccordionContext(): AccordionContextType { + return useContext(AccordionContext); +} diff --git a/stories/Accordion.stories.tsx b/stories/Accordion.stories.tsx index 3bbd0d3..c8350b7 100644 --- a/stories/Accordion.stories.tsx +++ b/stories/Accordion.stories.tsx @@ -10,6 +10,7 @@ import { Text, Button, View, + Flex, } from '../src'; import InfoTip from './components/InfoTip'; import { ThemeSplitView } from './components/ThemeSplitView'; @@ -40,38 +41,72 @@ export default meta; const Template: Story = args => { const content = ( - - - Description of predictions} - extra={ - - } - id="predictions" - > - - - 100} - id="features" - > - - - - - - - + + + + Description of predictions} + extra={ + + } + id="predictions" + > + + + 100} + id="features" + > + + + + + + + + + + Description of predictions} + extra={ + + } + id="predictions" + > + + + 100} + id="features" + > + + + + + + + + ); return {content}; }; From 95ef19f2de419e31a38f98833b18a3196995c1cf Mon Sep 17 00:00:00 2001 From: Mikyo King Date: Tue, 15 Oct 2024 11:57:55 -0600 Subject: [PATCH 2/2] cleanup --- src/accordion/Accordion.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/accordion/Accordion.tsx b/src/accordion/Accordion.tsx index 4d838e8..b51c632 100644 --- a/src/accordion/Accordion.tsx +++ b/src/accordion/Accordion.tsx @@ -4,7 +4,6 @@ import { Heading } from '../content'; import { Icon, ArrowIosDownwardOutline } from '../icon'; import { classNames } from '../utils/classNames'; import theme from '../theme'; -import { Flex } from '../layout'; import { AccordionContext, useAccordionContext } from './context'; export interface AccordionProps { @@ -165,10 +164,10 @@ export function AccordionItem(props: AccordionItemProps) { aria-controls={contentId} aria-expanded={isOpen} > - + {arrowPosition === 'start' && } {titleEl} - +
); } + +const flexRowCSS = css` + display: flex; + flex-direction: row; + align-items: center; + gap: var(--ac-global-dimension-static-size-100); +`; + +function FlexRow(props: PropsWithChildren) { + return
{props.children}
; +}