feat(Disclosure): creating an Disclosure component

packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap

@@ -36,8 +36,10 @@ exports[`Gamut Exported Keys 1`] = `
   "DataTable",
   "DeprecatedToolTip",
   "Dialog",
+  "Disclosure",
   "Drawer",
   "ExpandControl",
+  "ExpandInCollapseOut",
   "FillButton",
   "FlexBox",
   "FloatingCard",

packages/gamut/src/Animation/ExpandInCollapseOut.tsx

@@ -0,0 +1,24 @@
+import { timingValues } from '@codecademy/gamut-styles';
+import { motion } from 'framer-motion';
+
+import { WithChildrenProp } from '../utils';
+
+export const ExpandInCollapseOut: React.FC<WithChildrenProp> = ({
+  children,
+}) => {
+  return (
+    <motion.div
+      initial="collapsed"
+      exit="collapsed"
+      animate="expanded"
+      style={{ overflow: 'hidden' }}
+      variants={{
+        expanded: { height: 'auto' },
+        collapsed: { height: 0 },
+      }}
+      transition={{ duration: timingValues.medium / 1000, ease: 'easeInOut' }}
+    >
+      {children}
+    </motion.div>
+  );
+};

packages/gamut/src/Animation/index.ts

@@ -1 +1,2 @@
 export * from './Rotation';
+export * from './ExpandInCollapseOut';

packages/gamut/src/Disclosure/DisclosureBody/index.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+import { Text } from '../../Typography';
+import { DisclosureBodyWrapper } from '../elements';
+import { getSpacing, renderButton } from '../helpers';
+import { DisclosureBodyProps } from '../types';
+
+export const DisclosureBody: React.FC<DisclosureBodyProps> = ({
+  body,
+  buttonType = 'TextButton',
+  buttonPlacement = 'right',
+  ctaCallback,
+  ctaText,
+  hasPanelBg = false,
+  href,
+  spacing = 'normal',
+}) => {
+  const buttonRequirements = ctaText && ctaCallback;
+
+  const getLineHeight = spacing === 'compact' ? 'title' : 'base';
+  const { verticalSpacing, horizontalSpacing } = getSpacing(spacing);
+  return (
+    <DisclosureBodyWrapper
+      column
+      hasPanelBg={hasPanelBg}
+      mb={verticalSpacing}
+      mt={4}
+      mx={horizontalSpacing}
+    >
+      <Text width="100%" lineHeight={getLineHeight}>
+        {body}
+      </Text>
+      {buttonRequirements &&
+        renderButton({
+          buttonPlacement,
+          buttonType,
+          ctaCallback,
+          ctaText,
+          href,
+        })}
+    </DisclosureBodyWrapper>
+  );
+};

packages/gamut/src/Disclosure/DisclosureButton/index.tsx

@@ -0,0 +1,97 @@
+import {
+  ArrowChevronDownIcon,
+  MiniChevronDownIcon,
+} from '@codecademy/gamut-icons';
+import * as React from 'react';
+
+import { Rotation, Text } from '../..';
+import { Box, FlexBox } from '../../Box';
+import { DisclosureButtonWrapper } from '../elements';
+import { getRotationSize, getSpacing, getTitleSize } from '../helpers';
+import { DisclosureButtonProps } from '../types';
+
+export const DisclosureButton: React.FC<DisclosureButtonProps> = ({
+  disabled = false,
+  heading,
+  headingLevel = 'h3',
+  isExpanded,
+  overline,
+  setIsExpanded,
+  spacing = 'normal',
+  subheading,
+}) => {
+  const handleClick = () => {
+    if (setIsExpanded) {
+      setIsExpanded((prev: boolean) => !prev);
+    }
+  };
+
+  const titleSize = getTitleSize(spacing);
+  const subheadingSize = spacing === 'normal' ? 'p-base' : 'p-small';
+  const rotationSize = getRotationSize(spacing);
+  const { verticalSpacing, horizontalSpacing } = getSpacing(spacing);
+
+  return (
+    <FlexBox>
+      <DisclosureButtonWrapper
+        aria-label={isExpanded ? 'Collapse Content' : 'Expand Content'}
+        aria-expanded={isExpanded}
+        onClick={handleClick}
+        width="100%"
+        variant="interface"
+        py={verticalSpacing}
+        px={horizontalSpacing}
+        disabled={disabled}
+        height="100%"
+      >
+        {overline && (
+          <Text
+            textAlign="start"
+            width="100%"
+            color="text-secondary"
+            fontFamily="accent"
+            variant="p-small"
+          >
+            {overline}
+          </Text>
+        )}
+        <FlexBox
+          flexDirection="row"
+          justifyContent="space-between"
+          columnGap={40}
+          alignItems="center"
+        >
+          <Text
+            textAlign="start"
+            as={headingLevel}
+            width="100%"
+            p={0}
+            variant={titleSize}
+            fontWeight="title"
+          >
+            {heading}
+          </Text>
+
+          <Box p={8}>
+            <Rotation
+              rotated={isExpanded}
+              height={rotationSize}
+              width={rotationSize}
+            >
+              {spacing === 'normal' ? (
+                <ArrowChevronDownIcon aria-hidden size={rotationSize} />
+              ) : (
+                <MiniChevronDownIcon aria-hidden size={rotationSize} />
+              )}
+            </Rotation>
+          </Box>
+        </FlexBox>
+        {subheading && (
+          <Text textAlign="start" width="100%" variant={subheadingSize}>
+            {subheading}
+          </Text>
+        )}
+      </DisclosureButtonWrapper>
+    </FlexBox>
+  );
+};

packages/gamut/src/Disclosure/__tests__/Disclosure.test.tsx

@@ -0,0 +1,57 @@
+import { setupRtl } from '@codecademy/gamut-tests';
+import userEvent from '@testing-library/user-event';
+
+import { Disclosure } from '..';
+
+const ctaCallback = jest.fn();
+
+const defaultProps = {
+  header: 'hi there!',
+  body: <div>This should render when expanded </div>,
+  withBackground: false,
+};
+
+const renderView = setupRtl(Disclosure, defaultProps);
+
+describe('Disclosure', () => {
+  it('renders the DisclosureBody when DisclosureButton is clicked', () => {
+    const { view } = renderView({
+      initiallyExpanded: false,
+    });
+
+    const DisclosureButton = view.getByRole('button');
+    let DisclosureBodyText = view.queryByText(
+      'This should render when expanded'
+    );
+    expect(DisclosureBodyText).toBeNull();
+    expect(DisclosureButton.getAttribute('aria-expanded')).toBe('false');
+
+    userEvent.click(DisclosureButton);
+
+    DisclosureBodyText = view.getByText('This should render when expanded');
+    expect(DisclosureButton.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('renders the body when `initiallyExpanded` is set to true', () => {
+    const { view } = renderView({
+      initiallyExpanded: true,
+    });
+
+    const DisclosureButton = view.getByRole('button');
+    view.getByText('This should render when expanded');
+
+    expect(DisclosureButton.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it("renders the DisclosureBody's button when supplied a `cta` and `ctaCallback` argument", () => {
+    const { view } = renderView({
+      initiallyExpanded: true,
+      ctaText: 'click here',
+      ctaCallback,
+    });
+
+    const CTAButton = view.getByText('click here');
+    userEvent.click(CTAButton);
+    expect(ctaCallback).toBeCalled();
+  });
+});

packages/gamut/src/Disclosure/elements.tsx

@@ -0,0 +1,115 @@
+import { states, variant } from '@codecademy/gamut-styles';
+import { StyleProps } from '@codecademy/variance';
+import styled from '@emotion/styled';
+
+import { Anchor } from '../Anchor';
+import { FlexBox } from '../Box';
+import { FillButton, StrokeButton, TextButton } from '../Button';
+
+const disclosureWrapperVariants = variant({
+  defaultVariant: 'default',
+  base: {
+    width: '100%',
+    maxHeight: 'fit-content',
+  },
+  variants: {
+    default: {
+      bg: 'background',
+    },
+    subtle: {
+      bg: 'background-selected',
+    },
+    transparent: {
+      bg: 'background-current',
+    },
+  },
+});
+
+const disclosureWrapperStates = states({
+  hasBorder: {
+    border: 1,
+  },
+});
+
+type DisclosureWrapperStateProps = StyleProps<typeof disclosureWrapperStates>;
+type DisclosureWrapperVariantProps = StyleProps<
+  typeof disclosureWrapperVariants
+>;
+export type DisclosureWrapperStyles = DisclosureWrapperStateProps &
+  DisclosureWrapperVariantProps;
+
+export const DisclosureWrapper = styled(FlexBox)<DisclosureWrapperStyles>(
+  disclosureWrapperStates,
+  disclosureWrapperVariants
+);
+
+export const DisclosureButtonWrapper = styled(Anchor)(
+  variant({
+    prop: 'isWrapper',
+    defaultVariant: 'default',
+    variants: {
+      default: {
+        bg: 'inherit',
+        '&:hover': {
+          color: 'text',
+          bg: 'background-hover',
+        },
+        '&:focus': {
+          color: 'text',
+          bg: 'background-selected',
+        },
+        '&:disabled': {
+          color: 'text-disabled',
+          bg: 'background-disabled',
+        },
+      },
+    },
+  })
+);
+
+const sharedVariants = {
+  left: {
+    alignSelf: 'flex-start',
+    justifyContent: 'left',
+  },
+  right: {
+    alignSelf: 'flex-end',
+    justifyContent: 'right',
+  },
+};
+
+export const StyledTextButton = styled(TextButton)(
+  variant({
+    prop: 'placement',
+    variants: sharedVariants,
+  })
+);
+
+export const StyledStrokeButton = styled(StrokeButton)(
+  variant({
+    prop: 'placement',
+    variants: sharedVariants,
+  })
+);
+
+export const StyledFillButton = styled(FillButton)(
+  variant({
+    prop: 'placement',
+    variants: sharedVariants,
+  })
+);
+
+export type DisclosureBodyWrapperStyles = StyleProps<
+  typeof disclosureBodyWrapperStates
+>;
+
+const disclosureBodyWrapperStates = states({
+  hasPanelBg: {
+    bg: 'background-selected',
+    p: 8,
+  },
+});
+
+export const DisclosureBodyWrapper = styled(
+  FlexBox
+)<DisclosureBodyWrapperStyles>(disclosureBodyWrapperStates);