fix: collapsible card fixes, titleExtra on accordion (#48)

* fix: collapsible state, titleExtra on accordion

* Remove support for node 10

* fix types

* v0.4.3

* Danger button

* v0.4.4

Author: mikeldking

.github/workflows/main.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['10.x', '12.x', '14.x']
+        node: ['12.x', '14.x']
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.2",
+  "version": "0.4.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -9,7 +9,7 @@
   ],
   "source": "src/index.tsx",
   "engines": {
-    "node": ">=10"
+    "node": ">=12"
   },
   "scripts": {
     "start": "tsdx watch",

src/accordion/Accordion.tsx

@@ -30,6 +30,10 @@ export function Accordion({ children }: AccordionProps) {
 
 export interface AccordionItemProps {
   title: string;
+  /**
+   * An extra interactive element to be displayed next to the header
+   */
+  titleExtra?: ReactNode;
   /**
    * A unique id for this part of the UI. Necessary for ally
    */
@@ -39,10 +43,26 @@ export interface AccordionItemProps {
 }
 
 export function AccordionItem(props: AccordionItemProps) {
-  const { title, id, defaultIsOpen = true, children } = props;
+  const { title, titleExtra, id, defaultIsOpen = true, children } = props;
   const [isOpen, setIsOpen] = useState(defaultIsOpen);
   const contentId = `${id}-content`,
     headerId = `${id}-heading`;
+
+  // Display the titleExtra inline
+  const titleEl = titleExtra ? (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: row;
+      `}
+    >
+      <Text textSize="large">{title}</Text>
+      {titleExtra}
+    </div>
+  ) : (
+    <Text textSize="large">{title}</Text>
+  );
+
   return (
     <div
       className={classNames('ac-accordion-item', {
@@ -85,7 +105,7 @@ export function AccordionItem(props: AccordionItemProps) {
           aria-controls={contentId}
           aria-expanded={isOpen}
         >
-          <Text textSize="large">{title}</Text>
+          {titleEl}
           <Icon
             svg={<ArrowIosDownwardOutline />}
             className="ac-accordion-itemIndicator"

src/button/Button.tsx

@@ -12,7 +12,7 @@ import { buttonCSS } from './styles';
 
 export interface ButtonProps extends BaseButtonProps {
   children?: ReactNode | string;
-  variant: 'primary' | 'default';
+  variant: 'primary' | 'default' | 'danger';
   disabled?: boolean;
   className?: string;
   onClick?: (e: SyntheticEvent<HTMLButtonElement>) => void;

src/button/styles.ts

@@ -46,6 +46,13 @@ export const buttonCSS = css`
       background-color: ${theme.components.button.defaultHoverBackgroundColor};
     }
   }
+  &[data-variant='danger'] {
+    background-color: ${theme.colors.statusDanger};
+    border-color: ${theme.components.button.dangerBorderColor};
+    &:hover:not([disabled]) {
+      background-color: ${theme.components.button.dangerHoverBackgroundColor};
+    }
+  }
   &[data-childless='false'] > i,
   & > .ac-spinner {
     margin-right: ${theme.spacing.margin4}px;

src/card/Card.tsx

@@ -8,6 +8,7 @@ import { classNames } from '../utils';
 import { useId } from '@react-aria/utils';
 
 const headerTitleWrapCSS = css`
+  flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   & > h3,
@@ -51,7 +52,7 @@ export function Card({
   extra,
   className,
   titleExtra,
-  collapsible,
+  collapsible = false,
   defaultOpen = true,
   id,
 }: CardProps) {
@@ -108,7 +109,7 @@ export function Card({
         'is-open': isOpen,
       })}
     >
-      <header css={headerCSS({ bordered: true })} id={headerId}>
+      <header css={headerCSS({ bordered: true, collapsible })} id={headerId}>
         {titleComponent}
         {extra}
       </header>

src/card/CollapsibleCardTitle.tsx

@@ -52,7 +52,7 @@ export function CollapsibleCardTitle(props: CollapsibleCardTitleProps) {
         className="ac-card-collapsible__trigger"
         css={css`
           transition: transform ease var(--collapsible-card-animation-duration);
-          transform: rotate(180deg);
+          transform: rotate(-90deg);
           margin-right: ${theme.spacing.padding8}px;
         `}
         aria-hidden={true}

src/card/TabbedCard.tsx

@@ -28,7 +28,9 @@ export function TabbedCard(props: TabbedCardProps) {
       {...restProps}
     >
       {hasTitle ? (
-        <header css={headerCSS({ bordered: false, height: 60 })}>
+        <header
+          css={headerCSS({ bordered: false, height: 60, collapsible: false })}
+        >
           <Text textSize="xlarge" elementType="h3" weight="heavy">
             {title}
           </Text>

src/card/styles.ts

@@ -18,9 +18,11 @@ const headerBorderCSS = css`
 
 export const headerCSS = ({
   bordered,
+  collapsible,
   height = cardHeaderHeight,
 }: {
   bordered: boolean;
+  collapsible: boolean;
   height?: number;
 }) => css`
   display: flex;
@@ -30,6 +32,12 @@ export const headerCSS = ({
   align-items: center;
   padding: 0 16px;
   height: ${height}px;
+  transition: background-color 0.2s ease-in-out;
+  &:hover {
+    background-color: ${collapsible
+      ? theme.colors.hoverBgColor
+      : 'transparent'};
+  }
   ${bordered ? headerBorderCSS : ''}
 `;
 
@@ -43,7 +51,6 @@ export const collapsibleCardCSS = css`
     display: flex;
     flex-direction: row;
     flex: 1 1 auto;
-    justify-content: space-between;
     align-items: center;
     appearance: none;
     background-color: inherit;

src/theme.ts

@@ -97,6 +97,8 @@ const theme = {
       primaryHoverBackgroundColor: '#5BAECC',
       defaultBorderColor: borderColors.lightGrayBorder,
       defaultHoverBackgroundColor: '#64768A',
+      dangerBorderColor: lighten(0.1, '#F85149'),
+      dangerHoverBackgroundColor: lighten(0.1, '#F85149'),
     },
   },
   typography: {