fixed patterns and maybe hover states

LinKCoding · LinKCoding · commit c12c6b324270 · 2025-02-21T15:13:53.000-05:00
diff --git a/packages/gamut/src/Card/elements.tsx b/packages/gamut/src/Card/elements.tsx
@@ -3,10 +3,11 @@ import { Background ,
   Colors,
 } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
+import { useEffect, useState } from 'react';
 
 import { Anchor } from '../Anchor';
 import { Box } from '../Box';
-import { cardAnchorVariants, cardVariants, hoverState, shadowVariants } from './styles';
+import { cardAnchorVariants, cardVariants, hoverState, patternHoverState, shadowVariants } from './styles';
 import { CardAnchorProps, CardWrapperProps } from './types';
 
 export const AnchorWrapper = styled(Anchor)<CardAnchorProps>(
@@ -25,39 +26,57 @@ export const StaticCardWrapper = styled(Background)<CardWrapperProps>(
   hoverState
 );
 
+export const PatternWrapper = styled(Box)(
+  patternHoverState
+)
+
 export const CardWrapper: React.FC<CardWrapperProps> = ({
   children,
   variant='default',
   shadow ='none',
   isInteractive=false,
   pattern: Pattern = CheckerDense,
+  // isHovering,
   ...rest
 }) => {
-  console.log('pattern is', Pattern);
-  console.log('shadow is', shadow);
   const CardWrapper = variant === 'default' ? DynamicCardWrapper : StaticCardWrapper;
+
+  const [isHovering, setIsHovering] = useState(false);
+  const handleMouseOver = () => {
+    setTimeout(() => {
+      setIsHovering(true);
+    }, 100);
+  }
+  const handleMouseLeave = () => {
+    setTimeout(() => {
+      setIsHovering(false);
+    }, 100);
+  }
+
+  const hasPattern = shadow === 'patternLeft' || shadow === 'patternRight'
+  const showPattern = hasPattern && (isInteractive && !isHovering);
   return (
-    <CardWrapper
-      bg={variant !== 'default' ? variant as Colors : 'white'}
-      variant={variant}
-      shadow={shadow}
-      isInteractive={isInteractive}
-      position='relative'
-      zIndex={1}
-      {...rest}
-    >
-      { (shadow === 'patternLeft' || shadow === 'patternRight') &&
+    <Box dimensions={1} position='relative' onMouseOver={handleMouseOver}
+    onMouseLeave={handleMouseLeave}>
+      { showPattern &&
         <Pattern
           dimensions={1}
           position="absolute"
           top=".5rem"
           left={shadow === 'patternLeft' ? '-0.5rem' : undefined}
           right={shadow === 'patternRight' ? '-0.5rem' : undefined}
-          // zIndex={-1}
         />
       }
-      {children}
-    </CardWrapper>
+      <CardWrapper
+        bg={variant !== 'default' ? variant as Colors : 'white'}
+        variant={variant}
+        shadow={shadow}
+        isInteractive={isInteractive}
+        {...rest}
+      >
+        {children}
+      </CardWrapper>
+    </Box>
   );
 };
 
diff --git a/packages/gamut/src/Card/index.tsx b/packages/gamut/src/Card/index.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 
 import { AnchorWrapper, CardWrapper } from './elements';
 import { CardProps  } from './types';
-import { CheckerDense } from '@codecademy/gamut-patterns';
 
 // export interface CardProps {
 //   variant?: 'navy' | 'white' | 'hyper' | 'yellow' | 'beige';
@@ -16,11 +15,8 @@ export const Card: React.FC<CardProps> = ({
   shadow ='none',
   pattern,
 }) => {
-//   const CardContent = <CardWrapper variant={variant} shadow={shadow} isInteractive={Boolean(href)} pattern={Pattern} >
-//   {children}
-// </CardWrapper>
-  console.log(shadow)
   const isInteractive = Boolean(href);
+
   if(isInteractive) {
     return (
       <AnchorWrapper
@@ -29,7 +25,7 @@ export const Card: React.FC<CardProps> = ({
         onClick={onClick}
         hoverState={shadow === 'patternRight' ? 'hoverRight' : 'default'}
       >
-         <CardWrapper variant={variant} shadow={shadow} isInteractive={isInteractive} pattern={pattern}>
+         <CardWrapper variant={variant} shadow={shadow} isInteractive={isInteractive} pattern={pattern} >
           {children}
         </CardWrapper>
       </AnchorWrapper>
diff --git a/packages/gamut/src/Card/styles.tsx b/packages/gamut/src/Card/styles.tsx
@@ -51,12 +51,20 @@ export const shadowVariants = variant({
 export const hoverState = states({
   isInteractive: {
     '&:hover': {
-      transition: 'box-shadow 200ms ease, ',
-      boxShadow: `0px 0px 0px ${theme.colors['shadow-primary']}`,
+      transition: 'box-shadow 200ms ease',
+      boxShadow: `0px 0px ${theme.colors['shadow-primary']}`,
     },
   },
 })
 
+export const patternHoverState = states({
+  hidePattern: {
+    [ButtonSelectors.HOVER]: {
+      display: 'none'
+    }
+  }
+})
+
 export const cardAnchorVariants = variant({
   prop: 'hoverState',
   base: {
@@ -74,7 +82,7 @@ export const cardAnchorVariants = variant({
     },
     hoverRight: {
       [ButtonSelectors.HOVER]: {
-        transform: 'translate(4px, 4px)',
+        transform: 'translate(-4px, -4px)',
         boxShadow: `8px 8px 0 ${theme.colors['shadow-primary']}`,
         transition: 'box-shadow 200ms ease, transform 200ms ease',
       },
diff --git a/packages/gamut/src/Card/types.tsx b/packages/gamut/src/Card/types.tsx
@@ -10,6 +10,7 @@ export interface CardWrapperProps
   StyleProps<typeof hoverState>,
   WithChildrenProp {
     pattern?: React.ComponentType<PatternProps>;
+    isHovering?: boolean;
   }
 
 export interface CardProps extends CardWrapperProps {
diff --git a/packages/styleguide/src/lib/Atoms/Card/Card.mdx b/packages/styleguide/src/lib/Atoms/Card/Card.mdx
@@ -23,11 +23,6 @@ export const parameters = {
 
 <ComponentHeader {...parameters} />
 
-#### PatternLeft
-Setting `shadow = "patternLeft"` will apply a pattern bottom and left sides of the Card. By default, the pattern used is `CheckerDense`, but you can pass in a different pattern using the `pattern` prop.
-
-<Canvas of={CardStories.ShadowPatternLeft} />
-
 ## Usage
 
 Use Card to present different types of information in a visually appealing way.
@@ -37,7 +32,7 @@ Use Card to present different types of information in a visually appealing way.
 ### Backgrounds
 
 #### Default
-When a Card is not provided a `variant`, i.e. it uses the `'default'` variant and it will use the `'background'` color token — this color token is <LinkTo id="Foundations/ColorMode">ColorMode</LinkTo> responsive.
+When a Card's `variant` prop isn't set, or it's set to `'default'` it will use the `'background'` color token — this color token is <LinkTo id="Foundations/ColorMode">ColorMode</LinkTo> responsive.
 
 <Canvas of={CardStories.Dynamic} />
 
@@ -65,46 +60,22 @@ Setting `shadow = "outline"` will apply a shadow to the bottom and left sides of
 
 <Canvas of={CardStories.ShadowOutline} />
 
+#### PatternLeft
+Setting `shadow = "patternLeft"` will apply a pattern bottom and left sides of the Card. By default, the pattern used is `CheckerDense`, but you can pass in a different pattern using the `pattern` prop.
 
+<Canvas of={CardStories.ShadowPatternLeft} />
 
 #### PatternRight
+Setting `shadow = "patternRight"` works like `"patternLeft"` but applies the pattern to the bottom and right sides of the Card. You may also change the `pattern` used.
 
-<Canvas of={CardStories.Navy} />
-
-### Hyper
-
-<Canvas of={CardStories.Hyper} />
-
-### Beige
+<Canvas of={CardStories.ShadowPatternRight} />
 
-<Canvas of={CardStories.Beige} />
+### As a link
+Cards can be used as links by providing an `href` prop. These Cards can also accept an `onClick` prop that accepts a function. Stylistically, these Cards will have a hover effect that adds a shadow to the card.
 
-## Shadow variants
 
-### Small
+<Canvas of={CardStories.CardLink} />
 
-<Canvas of={CardStories.PatternLeftShadow} />
-
-### Medium
-
-<Canvas of={CardStories.PatternRightShadow} />
-
-### Outline
-
-The outline color will inherit the color of the card.
-
-<Canvas of={CardStories.OutlineShadow} />
-<Canvas of={CardStories.OutlineShadowColor} />
-
-## As link
-
-<Canvas of={CardStories.Link} />
-
-## ColorMode as default
-
-Card elements respond to the current <LinkTo id="Foundations/ColorMode">ColorMode</LinkTo> they are used in. Note that their background color will match the background of their context and secondary colors are used for their hover effect. As these are not the typical inverse effects we utilize in color mode, please check with your design team before use.
-
-<Canvas of={CardStories.Dynamic} />
 
 ## Playground
 
diff --git a/packages/styleguide/src/lib/Atoms/Card/Card.stories.tsx b/packages/styleguide/src/lib/Atoms/Card/Card.stories.tsx
@@ -195,6 +195,90 @@ export const ShadowPatternLeft: Story = {
   ),
 }
 
+export const ShadowPatternRight: Story = {
+  render: () => (
+    <FlexBox column>
+      <FlexBox p={24} border={1}>
+        <Box flexGrow={1}>
+          <Card shadow="patternRight">
+            Default with patternRight
+          </Card>
+        </Box>
+      </FlexBox>
+      <FlexBox row gap={16} p={24} border={1}>
+        <Box flexGrow={1}>
+          <Card variant="white" shadow="patternRight">
+            White with patternRight
+          </Card>
+        </Box>
+        <Box flexGrow={1}>
+          <Card variant="yellow" shadow="patternRight">
+            Yellow with patternRight
+          </Card>
+        </Box>
+        <Box flexGrow={1}>
+          <Card variant="beige" shadow="patternRight">
+            Beige with patternRight
+          </Card>
+        </Box>
+      </FlexBox>
+      <Background bg="navy">
+        <FlexBox row gap={16} p={24} border={1}>
+          <Box flexGrow={1}>
+            <Card variant="navy" shadow="patternRight">
+              Navy with patternRight
+            </Card>
+          </Box>
+          <Box flexGrow={1}>
+            <Card variant="hyper" shadow="patternRight">
+              Hyper with patternRight
+            </Card>
+          </Box>
+        </FlexBox>
+      </Background>
+    </FlexBox>
+  ),
+}
+
+export const CardLink: Story = {
+  render: () => (
+    <FlexBox column>
+      <FlexBox row gap={16} p={24} border={1}>
+        <Box flexGrow={1}>
+          <Card variant="white" shadow="none" href="/">
+            White with patternRight
+          </Card>
+        </Box>
+        <Box flexGrow={1}>
+          <Card variant="yellow" shadow="patternLeft" href="/">
+            Yellow with patternRight
+          </Card>
+        </Box>
+        <Box flexGrow={1}>
+          <Card variant="beige" shadow="outline" href="/">
+            Beige with patternRight
+          </Card>
+        </Box>
+      </FlexBox>
+      <Background bg="navy">
+        <FlexBox row gap={16} p={24} border={1}>
+          <Box flexGrow={1}>
+            <Card variant="navy" shadow="patternLeft" href="/">
+              Navy with patternRight
+            </Card>
+          </Box>
+          <Box flexGrow={1}>
+            <Card variant="hyper" shadow="patternRight" href="/">
+              Hyper with patternRight
+            </Card>
+          </Box>
+        </FlexBox>
+      </Background>
+    </FlexBox>
+  ),
+}
+
+
 export const Yellow: Story = {
   args: {
     variant: 'yellow',

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ export interface CardWrapperProps`
`10`	`10`	`StyleProps<typeof hoverState>,`
`11`	`11`	`WithChildrenProp {`
`12`	`12`	`pattern?: React.ComponentType<PatternProps>;`
	`13`	`+ isHovering?: boolean;`
`13`	`14`	`}`
`14`	`15`
`15`	`16`	`export interface CardProps extends CardWrapperProps {`