feat(PreviewTip): add preview tip

packages/gamut-styles/src/variables/timing.ts

@@ -1,11 +1,13 @@
 export const timingValues = {
   fast: 150,
   medium: 200,
+  base: 300,
   slow: 350,
 };
 
 export const timing = {
   fast: `${timingValues.fast}ms`,
   medium: `${timingValues.medium}ms`,
+  base: `${timingValues.base}ms`,
   slow: `${timingValues.slow}ms`,
 };

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

@@ -80,6 +80,7 @@ exports[`Gamut Exported Keys 1`] = `
   "Pagination",
   "Popover",
   "PopoverContainer",
+  "PreviewTip",
   "ProgressBar",
   "RadialProgress",
   "Radio",

packages/gamut/src/Button/IconButton.tsx

@@ -2,7 +2,7 @@ import { useId } from '@reach/auto-id';
 import { ComponentProps, forwardRef } from 'react';
 
 import { ButtonBaseElements } from '../ButtonBase/ButtonBase';
-import { ToolTip, ToolTipProps } from '../Tip';
+import { ToolTip, ToolTipProps } from '../Tip/ToolTip';
 import { IconComponentType } from '../utils';
 import {
   createButtonComponent,

packages/gamut/src/Button/__tests__/IconButton.test.tsx

@@ -42,8 +42,11 @@ describe('IconButton', () => {
   it('renders a tip with repetition removed', async () => {
     const { view } = renderView({});
 
-    view.getByRole('button', { name: label });
+    const button = view.getByRole('button', { name: label });
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore: We need to update the rest of the testing suite to use the correct types (which are reliant on upgrading Node)
+    expect(button).toHaveAccessibleDescription(tipText);
     expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(
       tipText
     );
@@ -81,7 +84,6 @@ describe('IconButton', () => {
     expect(view.queryByText('tooltip')).toBeNull();
 
     userEvent.hover(cta);
-
-    view.getByText(tip);
+    await view.findByText(tip);
   });
 });

packages/gamut/src/Form/elements/FormGroupLabel.tsx

@@ -5,7 +5,7 @@ import { HTMLAttributes } from 'react';
 import * as React from 'react';
 
 import { FlexBox } from '../..';
-import { InfoTip, InfoTipProps } from '../../Tip';
+import { InfoTip, InfoTipProps } from '../../Tip/InfoTip';
 import { Text } from '../../Typography/Text';
 import { formBaseStyles, formFieldTextDisabledStyles } from '../styles';
 import { BaseInputProps } from '../types';

packages/gamut/src/Form/inputs/Radio.tsx

@@ -5,7 +5,7 @@ import { forwardRef, InputHTMLAttributes, ReactNode } from 'react';
 import * as React from 'react';
 
 import { FlexBox } from '../../Box';
-import { InfoTip, InfoTipProps } from '../../Tip';
+import { InfoTip, InfoTipProps } from '../../Tip/InfoTip';
 import {
   conditionalRadioInputStyles,
   conditionalRadioLabelStyles,

packages/gamut/src/GridForm/types.ts

@@ -5,7 +5,7 @@ import { BoxProps } from '../Box';
 import { TextAreaProps } from '../Form';
 import { CheckboxPaddingProps } from '../Form/types';
 import { ColumnProps } from '../Layout';
-import { InfoTipProps } from '../Tip';
+import { InfoTipProps } from '../Tip/InfoTip';
 import { Text, TextProps } from '../Typography/Text';
 
 export interface BaseFormInputProps {

packages/gamut/src/Popover/Popover.tsx

@@ -169,15 +169,7 @@ export const Popover: React.FC<PopoverProps> = ({
         alignment={alignment}
         outline={outline ? 'outline' : 'boxShadow'}
         variant={variant}
-        widthRestricted={
-          variant === 'secondary'
-            ? alignment === 'centered'
-              ? 'centered'
-              : 'aligned'
-            : widthRestricted
-            ? 'popover'
-            : 'default'
-        }
+        widthRestricted={widthRestricted}
       >
         {beak && (
           <Beak

packages/gamut/src/Popover/elements.tsx

@@ -7,18 +7,17 @@ import * as React from 'react';
 import { WithChildrenProp } from '..';
 import { BodyPortal } from '../BodyPortal';
 import { Box } from '../Box';
-import {
-  popoverToolTipBodyAlignments,
-  toolTipWidthRestrictions,
-} from '../Tip/shared/styles';
+import { popoverToolTipBodyAlignments } from '../Tip/shared/styles';
 import {
   beakSize,
   beakVariants,
   outlineVariants,
+  patternContainerBaseStyles,
   patternVariantStyles,
   popoverStates,
   raisedDivVariants,
   transformValues,
+  widthStates,
 } from './styles';
 import { PopoverProps } from './types';
 
@@ -27,18 +26,17 @@ export type PopoverVariants = StyleProps<typeof raisedDivVariants> & {
 };
 
 export const RaisedDiv = styled.div<
-  StyleProps<typeof raisedDivVariants> &
+  StyleProps<typeof outlineVariants> &
+    StyleProps<typeof raisedDivVariants> &
     StyleProps<typeof popoverToolTipBodyAlignments> &
-    StyleProps<typeof toolTipWidthRestrictions> &
-    StyleProps<typeof outlineVariants>
+    StyleProps<typeof widthStates>
 >(
-  popoverToolTipBodyAlignments,
-  toolTipWidthRestrictions,
   outlineVariants,
-  raisedDivVariants
+  popoverToolTipBodyAlignments,
+  raisedDivVariants,
+  widthStates
 );
 
-// TO-DO -- prob should use variance compose, only needs left
 export const Beak = styled(Box)<
   StyleProps<typeof popoverStates> &
     StyleProps<typeof outlineVariants> &
@@ -49,12 +47,8 @@ export const Beak = styled(Box)<
 export const PatternContainer = styled.div(
   variant({
     base: {
-      width: '100%',
       height: '100%',
-      borderRadius: 'sm',
-      overflow: 'hidden',
-      bg: 'background',
-      position: 'absolute',
+      ...patternContainerBaseStyles,
     },
     variants: patternVariantStyles,
   })

packages/gamut/src/Popover/styles.tsx

@@ -43,6 +43,13 @@ export const outlineVariants = variant({
   },
 });
 
+export const widthStates = states({
+  widthRestricted: {
+    minWidth: '4rem',
+    maxWidth: '16rem',
+  },
+});
+
 const beakVariantsArray = [
   'below-left',
   'below-right',
@@ -88,6 +95,14 @@ export const beakSize = variant({
   },
 });
 
+export const patternContainerBaseStyles = {
+  bg: 'transparent',
+  borderRadius: 'sm',
+  overflow: 'hidden',
+  position: 'absolute',
+  width: '100%',
+} as const;
+
 const patternVariantArray = [
   'above-left',
   'above-right',

packages/gamut/src/Tip/DeprecatedToolTip/DeprecatedInlineToolTip.tsx

@@ -33,6 +33,7 @@ export const DeprecatedInlineToolTip: React.FC<DeprecatedToolTipPlacementCompone
         as="div"
         id={id}
         role="tooltip"
+        isToolTip
       >
         <TipBody
           alignment={alignment.includes('center') ? 'centered' : 'aligned'}

packages/gamut/src/Tip/PreviewTip/elements.tsx

@@ -0,0 +1,156 @@
+import { CheckerDense } from '@codecademy/gamut-patterns';
+import { css, variant } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+import { useMemo } from 'react';
+
+import { Anchor } from '../../Anchor';
+import { Box, FlexBox, GridBox } from '../../Box';
+import { ButtonSelectors } from '../../ButtonBase/ButtonBase';
+import { Shimmer } from '../../Loading/Shimmer';
+import { patternContainerBaseStyles } from '../../Popover/styles';
+import { Text } from '../../Typography';
+import { PreviewTipContent, TipPlacementComponentProps } from '../shared/types';
+import {
+  avatarColumnTemplate,
+  avatarGridTemplate,
+  defaultGridTemplate,
+  getShadowAlignment,
+} from './styles';
+
+export const PreviewTipAnchor = styled(Anchor)(
+  variant({
+    defaultVariant: 'anchor',
+    prop: 'tipType',
+    variants: {
+      anchor: {
+        textDecorationStyle: 'dotted',
+        [ButtonSelectors.HOVER]: {
+          textDecoration: 'underline',
+          textDecorationStyle: 'solid',
+        },
+      },
+      avatar: {
+        borderRadius: 'sm',
+        [ButtonSelectors.HOVER]: {
+          bg: 'background-hover',
+        },
+      },
+    },
+  })
+);
+
+const PreviewTipBodyShimmer = ({
+  avatar,
+  truncateLines = 4,
+}: Pick<PreviewTipContent, 'avatar' | 'truncateLines'>) => {
+  const lineHeight = 24;
+  const height = avatar ? lineHeight : (truncateLines as number) * lineHeight;
+  const width = avatar ? '5.5rem' : '100%';
+  return (
+    <>
+      <Shimmer height={lineHeight} width="4.5rem" />
+      <Shimmer height={height} width={width} />
+    </>
+  );
+};
+
+type PreviewTipContentsProps = Pick<TipPlacementComponentProps, 'info'> &
+  PreviewTipContent;
+
+export const PreviewTipContents: React.FC<PreviewTipContentsProps> = ({
+  avatar,
+  loading,
+  info,
+  overline,
+  truncateLines = 4,
+  username,
+}) => {
+  const gridTemplateAreas = useMemo(() => {
+    if (!avatar) return defaultGridTemplate;
+
+    let avatarGridTemplateString = '';
+
+    [info, overline, username].forEach((el) => {
+      if (el)
+        avatarGridTemplateString = avatarGridTemplateString.concat(
+          `\n`,
+          avatarGridTemplate
+        );
+    });
+
+    return avatarGridTemplateString;
+  }, [avatar, info, overline, username]);
+
+  const contents = useMemo(() => {
+    return loading ? (
+      <PreviewTipBodyShimmer avatar={avatar} truncateLines={truncateLines} />
+    ) : (
+      <>
+        {overline && (
+          <Text textColor="text-secondary" fontFamily="accent" fontSize={14}>
+            {overline}
+          </Text>
+        )}
+        {username && (
+          <Text fontWeight="bold" fontSize={16}>
+            {username}
+          </Text>
+        )}
+        <Text
+          as="p"
+          fontSize={16}
+          truncate="ellipsis"
+          truncateLines={truncateLines ?? 4}
+        >
+          {info}
+        </Text>
+      </>
+    );
+  }, [loading, avatar, info, overline, truncateLines, username]);
+
+  return (
+    <GridBox
+      gridTemplateAreas={gridTemplateAreas}
+      gridTemplateColumns={avatar ? avatarColumnTemplate : '1fr'}
+      rowGap={4}
+    >
+      {avatar && (
+        <FlexBox center aria-hidden gridArea="avatar" pr={12}>
+          <Box height={40} width={40}>
+            {avatar}
+          </Box>
+        </FlexBox>
+      )}
+      {contents}
+    </GridBox>
+  );
+};
+
+type PreviewTipShadowProps = Pick<
+  TipPlacementComponentProps,
+  'alignment' | 'zIndex'
+>;
+
+export const PreviewTipPattern = styled(Box)(
+  css({
+    height: 'calc(100% - 12px)',
+    ...patternContainerBaseStyles,
+  })
+);
+
+export const PreviewTipShadow: React.FC<PreviewTipShadowProps> = ({
+  alignment,
+  zIndex,
+}) => {
+  const shadowAlignment = getShadowAlignment(alignment);
+
+  return (
+    <PreviewTipPattern
+      aria-hidden
+      zIndex={zIndex ? zIndex - 2 : -1}
+      {...shadowAlignment}
+    >
+      <CheckerDense />
+    </PreviewTipPattern>
+  );
+};