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
d2iq · Dec 15, 2022 · 5a3e31e · 5a3e31e
1 parent 74d355c
commit 5a3e31e
Show file tree

Hide file tree

Showing 10 changed files with 45 additions and 19 deletions.
diff --git 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,15 +17,18 @@ const Accordion = ({
   "data-cy": dataCy = "accordion",
   children,
   initialExpandedItems,
-  onChange
+  onChange,
+  className
 }: AccordionProps) => {
   return (
     <AccordionProvider
       allowMultipleExpanded={allowMultipleExpanded}
       initialExpandedItems={initialExpandedItems}
       onChange={onChange}
     >
-      <Stack data-cy={dataCy}>{children}</Stack>
+      <Stack className={className} data-cy={dataCy}>
+        {children}
+      </Stack>
     </AccordionProvider>
   );
 };

diff --git 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}
       </div>

diff --git 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<HTMLDivElement>(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
@@ -27,6 +27,7 @@ export interface AccordionItemTitleProps {
    * Priority of the heading. Numbers map to <h1> through <h6>
    */
   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 = ({
     >
       <HeadingTag
         id={accordionItemContext?.headingId || ""}
-        className={cx(headingReset, textWeight("medium"))}
+        className={cx(headingReset, textWeight("medium"), className)}
         data-cy={`${dataCy}-heading`}
       >
         <ResetButton

diff --git a/packages/accordion/components/AccordionItemTitleInteractive.tsx b/packages/accordion/components/AccordionItemTitleInteractive.tsx
@@ -26,7 +26,8 @@ const AccordionItemTitleInteractive = ({
   children,
   "data-cy": dataCy,
   disabled,
-  headingLevel
+  headingLevel,
+  className
 }: Omit<AccordionItemTitleProps, "children"> & {
   children: (renderProps: RenderProps) => React.ReactNode;
 }) => {
@@ -53,7 +54,7 @@ const AccordionItemTitleInteractive = ({
   const getHeading = (label: string) => (
     <HeadingTag
       id={accordionItemContext?.headingId}
-      className={cx(headingReset, textWeight("medium"))}
+      className={cx(headingReset, textWeight("medium"), className)}
       data-cy={`${dataCy}-heading`}
     >
       {label}

diff --git 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,15 +17,18 @@ const Accordion = ({
   "data-cy": dataCy = "accordion",
   children,
   expandedItems = [],
-  onChange
+  onChange,
+  className
 }: AccordionProps) => {
   return (
     <AccordionProvider
       allowMultipleExpanded={allowMultipleExpanded}
       controlledExpandedItems={expandedItems}
       onChange={onChange}
     >
-      <Stack data-cy={dataCy}>{children}</Stack>
+      <Stack className={className} data-cy={dataCy}>
+        {children}
+      </Stack>
     </AccordionProvider>
   );
 };

diff --git a/packages/breadcrumb/components/Breadcrumb.tsx b/packages/breadcrumb/components/Breadcrumb.tsx
@@ -11,22 +11,23 @@ import {
 } from "../../shared/styles/styleUtils";
 
 export interface BreadcrumbProps {
+  className?: string;
   children?: React.ReactNode | string;
 }
 
 function intersperse<A>(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 = <Icon shape={SystemIcons.CaretRight} size="xs" />;
   const crumbsArr = intersperse(
     React.Children.toArray(children),
     breadcrumbSeparator
   );
 
   return (
-    <nav className={cx(flex({ align: "center", wrap: "wrap" }))}>
+    <nav className={cx(flex({ align: "center", wrap: "wrap" }), className)}>
       {crumbsArr.map((crumb, i) => (
         <div
           key={`breadcrumb-wrapper-${i}`}

diff --git a/packages/card/components/LinkCard.tsx b/packages/card/components/LinkCard.tsx
@@ -18,11 +18,12 @@ const LinkCard = ({
   linkDescription,
   url,
   children,
+  className,
   ...other
 }: ButtonCardProps & LinkProps) => {
   return (
     <Card
-      className={cx(buttonCard, cardWithLink)}
+      className={cx(buttonCard, cardWithLink, className)}
       data-cy="linkCard"
       {...other}
     >

diff --git a/packages/link/components/Link.tsx b/packages/link/components/Link.tsx
@@ -1,10 +1,11 @@
 import React from "react";
+import { cx } from "@emotion/css";
 import ResetLink from "./ResetLink";
 import { ExpandedLinkProps } from "../types";
 import { defaultLink } from "../style";
 
 const Link = ({ children, className, ...other }: ExpandedLinkProps) => (
-  <ResetLink className={defaultLink} {...other}>
+  <ResetLink className={cx(defaultLink, className)} {...other}>
     {children}
   </ResetLink>
 );

diff --git a/packages/tabs/components/Tabs.tsx b/packages/tabs/components/Tabs.tsx
@@ -81,12 +81,14 @@ export interface TabsProps {
   selectedIndex?: number;
   onSelect?: (tabIndex: number) => void;
   direction?: TabDirection;
+  className?: string;
 }
 
 const Tabs = ({
   children,
   selectedIndex,
   onSelect,
+  className,
   direction = defaultTabDirection
 }: TabsProps) => {
   const { tabs, tabsContent } = (
@@ -131,10 +133,14 @@ const Tabs = ({
 
   return (
     <ReactTabs
-      className={cx("react-tabs", {
-        [fullHeightTabs]: Boolean(tabsContent.length),
-        [getTabLayout(direction)]: Boolean(direction)
-      })}
+      className={cx(
+        "react-tabs",
+        {
+          [fullHeightTabs]: Boolean(tabsContent.length),
+          [getTabLayout(direction)]: Boolean(direction)
+        },
+        className
+      )}
       selectedIndex={selectedIndex}
       // react-tabs needs this function but we have a linting rule which forbids
       // empty arrow functions, so I disable this rule for this line