From 5a3e31e39f244b0439165e5a804897de04579a24 Mon Sep 17 00:00:00 2001 From: David Taing Date: Fri, 16 Dec 2022 02:38:17 +1100 Subject: [PATCH] Dtaing/feat/custom navigation class names (#909) * feat: add className prop to Breadcrumb to allow custom style overrides * feat: add className prop to LinkCard to allow custom style overrides * feat: add className prop to Link to allow custom style overrides * feat: add className prop to Tab to allow custom style overrides * feat: add className prop to Accordion components to allow custom style overrides. Add className prop to the following components: - Accordion - AccordionItem - AccordionItemContent - AccordionItemTitle - StatelessAccordion - AccordionItemTitleInteractive --- packages/accordion/components/Accordion.tsx | 8 ++++++-- packages/accordion/components/AccordionItem.tsx | 5 ++++- .../accordion/components/AccordionItemContent.tsx | 7 +++++-- .../accordion/components/AccordionItemTitle.tsx | 6 ++++-- .../components/AccordionItemTitleInteractive.tsx | 5 +++-- .../accordion/components/StatelessAccordion.tsx | 8 ++++++-- packages/breadcrumb/components/Breadcrumb.tsx | 5 +++-- packages/card/components/LinkCard.tsx | 3 ++- packages/link/components/Link.tsx | 3 ++- packages/tabs/components/Tabs.tsx | 14 ++++++++++---- 10 files changed, 45 insertions(+), 19 deletions(-) diff --git a/packages/accordion/components/Accordion.tsx b/packages/accordion/components/Accordion.tsx index c27c34c93..dee0f768b 100644 --- a/packages/accordion/components/Accordion.tsx +++ b/packages/accordion/components/Accordion.tsx @@ -8,6 +8,7 @@ interface AccordionProps extends AccordionBaseProps { * An array of open accordion panel IDs */ initialExpandedItems?: string[]; + className?: string; children: React.ReactNode | React.ReactNode[]; } @@ -16,7 +17,8 @@ const Accordion = ({ "data-cy": dataCy = "accordion", children, initialExpandedItems, - onChange + onChange, + className }: AccordionProps) => { return ( - {children} + + {children} + ); }; diff --git a/packages/accordion/components/AccordionItem.tsx b/packages/accordion/components/AccordionItem.tsx index 1ef5aa3f7..9c347b762 100644 --- a/packages/accordion/components/AccordionItem.tsx +++ b/packages/accordion/components/AccordionItem.tsx @@ -12,13 +12,15 @@ export interface AccordionItemProps { * A custom ID for the accordion panel */ id?: string; + className?: string; children?: React.ReactNode; } const AccordionItem = ({ children, "data-cy": dataCy = "accordionItem", - id = nextId("accordionItem-") + id = nextId("accordionItem-"), + className }: AccordionItemProps) => { const accordionContext = React.useContext(AccordionContext); const isExpanded = accordionContext?.expandedItems.includes(id); @@ -32,6 +34,7 @@ const AccordionItem = ({ data-cy={[dataCy, ...(isExpanded ? [`${dataCy}.expanded`] : [])].join( " " )} + className={className} > {children} diff --git a/packages/accordion/components/AccordionItemContent.tsx b/packages/accordion/components/AccordionItemContent.tsx index e216dffb8..a7a716cdb 100644 --- a/packages/accordion/components/AccordionItemContent.tsx +++ b/packages/accordion/components/AccordionItemContent.tsx @@ -19,13 +19,15 @@ interface AccordionItemContentProps { * the amount of space between the border and the content */ paddingSize?: SpaceSize; + className?: string; children: React.ReactNode; } const AccordionItemContent = ({ children, "data-cy": dataCy = "accordionItemContent", - paddingSize = "m" + paddingSize = "m", + className }: AccordionItemContentProps) => { const contentRef = React.useRef(null); const accordionItemContext = React.useContext(AccordionItemContext); @@ -56,7 +58,8 @@ const AccordionItemContent = ({ accordionItemContent, { [visuallyHidden]: !accordionItemContext?.isExpanded - } + }, + className )} ref={contentRef} hidden={!accordionItemContext?.isExpanded} diff --git a/packages/accordion/components/AccordionItemTitle.tsx b/packages/accordion/components/AccordionItemTitle.tsx index 88a9fab20..fd2858cab 100644 --- a/packages/accordion/components/AccordionItemTitle.tsx +++ b/packages/accordion/components/AccordionItemTitle.tsx @@ -27,6 +27,7 @@ export interface AccordionItemTitleProps { * Priority of the heading. Numbers map to

through

*/ headingLevel?: HeadingLevel; + className?: string; children: React.ReactNode; } @@ -35,7 +36,8 @@ const AccordionItemTitle = ({ children, "data-cy": dataCy = "accordionItemTitle", disabled, - headingLevel = 3 + headingLevel = 3, + className }: AccordionItemTitleProps) => { const HeadingTag: keyof React.ReactHTML = `h${headingLevel}` as | "h2" @@ -69,7 +71,7 @@ const AccordionItemTitle = ({ > & { children: (renderProps: RenderProps) => React.ReactNode; }) => { @@ -53,7 +54,7 @@ const AccordionItemTitleInteractive = ({ const getHeading = (label: string) => ( {label} diff --git a/packages/accordion/components/StatelessAccordion.tsx b/packages/accordion/components/StatelessAccordion.tsx index c9264b2d7..aaa162f59 100644 --- a/packages/accordion/components/StatelessAccordion.tsx +++ b/packages/accordion/components/StatelessAccordion.tsx @@ -8,6 +8,7 @@ interface AccordionProps extends AccordionBaseProps { * An array of open accordion panel IDs */ expandedItems?: string[]; + className?: string; children: React.ReactNode; } @@ -16,7 +17,8 @@ const Accordion = ({ "data-cy": dataCy = "accordion", children, expandedItems = [], - onChange + onChange, + className }: AccordionProps) => { return ( - {children} + + {children} + ); }; diff --git a/packages/breadcrumb/components/Breadcrumb.tsx b/packages/breadcrumb/components/Breadcrumb.tsx index ff2095efa..e112c6619 100644 --- a/packages/breadcrumb/components/Breadcrumb.tsx +++ b/packages/breadcrumb/components/Breadcrumb.tsx @@ -11,6 +11,7 @@ import { } from "../../shared/styles/styleUtils"; export interface BreadcrumbProps { + className?: string; children?: React.ReactNode | string; } @@ -18,7 +19,7 @@ function intersperse(list: A[], sep: JSX.Element) { return Array.prototype.concat(...list.map(e => [sep, e])).slice(1); } -const Breadcrumb = ({ children }: BreadcrumbProps) => { +const Breadcrumb = ({ className, children }: BreadcrumbProps) => { const breadcrumbSeparator = ; const crumbsArr = intersperse( React.Children.toArray(children), @@ -26,7 +27,7 @@ const Breadcrumb = ({ children }: BreadcrumbProps) => { ); return ( -