compact accordion and card (#66)

* feat: add compact compact accordion variant

* v0.5.5

* Consolidate colors

* Move font to 5

* WIP

* v0.5.6

* Fix styles

* v0.5.7

* Add className to card body

* v0.5.8

* fix padding

* v0.5.9

* Make variant optional

* v0.5.10

* Add compact card

* Add card story

* Compact card sizing

* v0.5.11

* Change colors

* v0.5.12

* Add datatag support

* v0.5.13

* data-testid support

* data-testid support

* v0.5.14

Author: mikeldking

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.4",
+  "version": "0.5.14",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -122,6 +122,7 @@
     "@react-stately/utils": "^3.2.0",
     "@react-stately/virtualizer": "^3.1.5",
     "@react-types/shared": "^3.5.0",
+    "@storybook/addon-measure": "^6.5.10",
     "@types/react-transition-group": "^4.4.5",
     "clsx": "^1.1.1",
     "react-transition-group": "^4.4.5",

src/accordion/Accordion.tsx

@@ -1,26 +1,40 @@
 import React, { useState, ReactNode } from 'react';
 import { css } from '@emotion/core';
-import { Heading, Text } from '../content';
+import { Heading } from '../content';
 import { Icon, ArrowIosDownwardOutline } from '../icon';
 import { classNames } from '../utils/classNames';
 import theme from '../theme';
 
 export interface AccordionProps {
   children: ReactNode;
+  /**
+   * The variant of the accordion (e.g. sizing)
+   * @default "default"
+   */
+  variant?: 'default' | 'compact';
 }
 
 /**
  * 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, variant = 'default' }: AccordionProps) {
   return (
     <div
-      className="ac-accordion"
+      className={`ac-accordion ac-accordion--${variant}`}
       role="region"
       css={css`
-        background-color: ${theme.components.accordion.backgroundColor};
+      
         --accordion-animation-duration: ${theme.animation.global.duration}ms;
+        &.ac-accordion--default {
+          --accordion-padding-top: ${theme.spacing.padding16}px;
+          --accordion-padding-side: ${theme.spacing.padding16}px;
+          --accordion-font-size: ${theme.typography.sizes.large.fontSize}px;
+        }
+        &.ac-accordion--compact {
+          --accordion-padding-top: ${theme.spacing.padding8}px;
+          --accordion-padding-side: ${theme.spacing.padding16}px;
+          --accordion-font-size: ${theme.typography.sizes.medium.fontSize}px;
       `}
     >
       {children}
@@ -56,11 +70,11 @@ export function AccordionItem(props: AccordionItemProps) {
         flex-direction: row;
       `}
     >
-      <Text textSize="large">{title}</Text>
+      <span className="ac-accordion-item__title">{title}</span>
       {titleExtra}
     </div>
   ) : (
-    <Text textSize="large">{title}</Text>
+    <span className="ac-accordion-item__title">{title}</span>
   );
 
   return (
@@ -82,7 +96,7 @@ export function AccordionItem(props: AccordionItemProps) {
           id={headerId}
           css={css`
             cursor: pointer;
-            padding: 16px 16px;
+            padding: var(--accordion-padding-top) var(--accordion-padding-side);
             display: block;
             width: 100%;
             display: flex;
@@ -95,13 +109,17 @@ export function AccordionItem(props: AccordionItemProps) {
             border: 0;
             text-align: start;
             color: ${theme.textColors.white90};
-            border-bottom: 1px solid ${theme.colors.dividerColor};
+            border-bottom: 1px solid ${theme.components.accordion.borderColor};
             /* remove outline - TODO might need to give a visual cue that this area is in focus */
             outline: none;
+            background-color: ${theme.components.accordion.backgroundColor};
             transition: background-color 0.2s ease-in-out;
             &:hover {
               background-color: ${theme.colors.hoverBgColor};
             }
+            .ac-accordion-item__title {
+              font-size: var(--accordion-font-size);
+            }
           `}
           onClick={() => {
             setIsOpen(!isOpen);

src/button/ButtonGroup.tsx

@@ -5,6 +5,7 @@ import React, {
   cloneElement,
   ReactNode,
   HTMLAttributes,
+  ReactElement,
 } from 'react';
 import theme from '../theme';
 import { ButtonProps } from './Button';
@@ -42,7 +43,7 @@ export function ButtonGroup({ children, size, ...divProps }: ButtonGroupProps) {
     >
       {Children.map(children, child => {
         if (isValidElement(child)) {
-          return cloneElement(child, {
+          return cloneElement(child as ReactElement<ButtonProps>, {
             size,
           });
         }

src/card/Card.tsx

@@ -6,6 +6,7 @@ import theme from '../theme';
 import { cardCSS, headerCSS, collapsibleCardCSS } from './styles';
 import { classNames } from '../utils';
 import { useId } from '@react-aria/utils';
+import { CardVariant } from './types';
 
 const headerTitleWrapCSS = css`
   flex: 1 1 auto;
@@ -28,24 +29,31 @@ const bodyCSS = css`
   padding: ${theme.spacing.padding16}px;
 `;
 
-export type CardProps = {
+export interface CardBaseProps {
   title?: string;
   subTitle?: string;
+  variant?: CardVariant;
   children: ReactNode;
   style?: CSSProperties;
   bodyStyle?: CSSProperties;
   extra?: ReactNode; // Extra controls on the header
   className?: string;
   titleExtra?: ReactNode;
+  id?: string;
+}
+
+interface CollapsibleCardProps {
   collapsible?: boolean;
   defaultOpen?: boolean;
   onToggle?: (open: boolean) => void;
-  id?: string;
-};
+}
+
+export interface CardProps extends CardBaseProps, CollapsibleCardProps {}
 
 export function Card({
   title,
   subTitle,
+  variant = 'default',
   children,
   style,
   bodyStyle,
@@ -60,8 +68,10 @@ export function Card({
   const idPrefix = useId(id);
   const contentId = `${idPrefix}-content`,
     headerId = `${idPrefix}-heading`;
+  const titleSize = variant === 'default' ? 'xlarge' : 'large';
+  const subTitleSize = variant === 'default' ? 'medium' : 'xsmall';
   const defaultTitle = (
-    <Text textSize="xlarge" elementType="h3" weight="heavy">
+    <Text textSize={titleSize} elementType="h3" weight="heavy">
       {title}
     </Text>
   );
@@ -76,14 +86,15 @@ export function Card({
     );
   const subTitleEl =
     subTitle != null ? (
-      <Text textSize="medium" elementType="h4" color="white70">
+      <Text textSize={subTitleSize} elementType="h4" color="white70">
         {subTitle}
       </Text>
     ) : (
       undefined
     );
+  const titleClassName = `ac-card__title-wrap ac-card__title-wrap--${variant}`;
   const titleComponent = collapsible ? (
-    <div css={headerTitleWrapCSS}>
+    <div css={headerTitleWrapCSS} className={titleClassName}>
       <CollapsibleCardTitle
         isOpen={isOpen}
         onOpen={() => setIsOpen(!isOpen)}
@@ -95,7 +106,7 @@ export function Card({
       />
     </div>
   ) : (
-    <div css={headerTitleWrapCSS}>
+    <div css={headerTitleWrapCSS} className={titleClassName}>
       {titleEl}
       {subTitleEl}
     </div>
@@ -104,7 +115,7 @@ export function Card({
     <section
       css={collapsible ? collapsibleCardCSS : cardCSS}
       style={style}
-      className={classNames('ac-card', className, {
+      className={classNames('ac-card', `ac-card--${variant}`, className, {
         'is-open': isOpen,
       })}
     >
@@ -116,9 +127,10 @@ export function Card({
         css={css(
           bodyCSS,
           css`
-            ${!isOpen && `display: none;`}
+            ${!isOpen && `display: none !important;`}
           `
         )}
+        className="ac-card__body"
         style={bodyStyle}
         id={contentId}
         aria-labelledby={headerId}

src/card/TabbedCard.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, HTMLProps } from 'react';
+import React from 'react';
+import { CardBaseProps } from './Card';
 import { css } from '@emotion/core';
 import { Text } from '../content';
 import { cardCSS, headerCSS } from './styles';
@@ -11,26 +12,20 @@ const tabbedCardCSS = css`
   }
 `;
 
-export interface TabbedCardProps extends HTMLProps<HTMLElement> {
-  title?: string;
-  children: ReactNode;
-  extra?: ReactNode; // Extra controls on the header
-}
+export interface TabbedCardProps extends CardBaseProps {}
 
 export function TabbedCard(props: TabbedCardProps) {
-  const { title, children, extra, ...restProps } = props;
+  const { title, children, extra, variant = 'default', ...restProps } = props;
   const hasTitle = title != null;
   return (
     <section
       css={css(cardCSS, tabbedCardCSS)}
-      className="ac-card ac-card--tabbed"
+      className={`ac-card ac-card--${variant} ac-card--tabbed`}
       data-has-title={hasTitle}
       {...restProps}
     >
       {hasTitle ? (
-        <header
-          css={headerCSS({ bordered: false, height: 60, collapsible: false })}
-        >
+        <header css={headerCSS({ bordered: false, collapsible: false })}>
           <Text textSize="xlarge" elementType="h3" weight="heavy">
             {title}
           </Text>

src/card/styles.ts

@@ -1,45 +1,51 @@
 import { css } from '@emotion/core';
 import theme from '../theme';
-const cardHeaderHeight = 68;
 
 export const cardCSS = css`
   display: flex;
   flex-direction: column;
-  background-color: ${theme.components.card.bgColor};
+  background-color: ${theme.components.card.backgroundColor};
   color: ${theme.textColors.white90};
   border-radius: 8px;
-  border: 1px solid ${theme.colors.dividerColor};
+  border: 1px solid ${theme.components.card.borderColor};
   overflow: hidden;
+  /* variant variables */
+  &.ac-card--default {
+    --card-header-height: 68px;
+  }
+  &.ac-card--compact {
+    --card-header-height: 46px;
+  }
 `;
 
 const headerBorderCSS = css`
-  border-bottom: 1px solid ${theme.colors.gray500};
+  border-bottom: 1px solid ${theme.components.card.borderColor};
 `;
 
 export const headerCSS = ({
   bordered,
   collapsible,
-  height = cardHeaderHeight,
 }: {
   bordered: boolean;
   collapsible: boolean;
-  height?: number;
-}) => css`
-  display: flex;
-  flex-direction: row;
-  flex: none;
-  justify-content: space-between;
-  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 : ''}
-`;
+}) => {
+  return css`
+    display: flex;
+    flex-direction: row;
+    flex: none;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 16px;
+    height: var(--card-header-height);
+    transition: background-color 0.2s ease-in-out;
+    &:hover {
+      background-color: ${collapsible
+        ? theme.colors.hoverBgColor
+        : 'transparent'};
+    }
+    ${bordered ? headerBorderCSS : ''}
+  `;
+};
 
 export const collapsibleCardCSS = css`
   ${cardCSS}
@@ -66,9 +72,10 @@ export const collapsibleCardCSS = css`
       transform: rotate(0deg);
     }
   }
-  /* shrink the height to the card title so the body is hidden*/
+  /* shrink the height to the card title so the body is hidden */
   &:not(.is-open) {
-    height: ${cardHeaderHeight}px !important;
+    height: var(--card-header-height) !important;
+    overflow: hidden;
   }
 
   --collapsible-card-animation-duration: ${theme.animation.global.duration}ms;

src/card/types.ts

@@ -0,0 +1 @@
+export type CardVariant = 'default' | 'compact';

src/search/CompactSearchField.tsx

@@ -37,6 +37,7 @@ export function CompactSearchField(props: CompactSearchFieldProps) {
         border-radius: ${theme.rounding.rounding4}px;
         overflow: hidden;
         transition: all 0.2s ease-in-out;
+        background-color: ${theme.components.textField.backgroundColor};
         & > .ac-button {
           flex: none;
           border: none;