add simple animated AI poc

cultureamp · Feb 6, 2025 · 95a9664 · 95a9664
1 parent 538d1b9
commit 95a9664
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 1 deletion.
diff --git a/packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.stories.tsx b/packages/components/src/Tile/MultiActionTile/_docs/MultiActionTile.stories.tsx
@@ -60,3 +60,31 @@ export const SecondaryAction: Story = {
     },
   },
 }
+
+export const AiTile: Story = {
+  args: {
+    aiProps: {
+      isAi: true,
+    },
+  },
+}
+
+export const AiLoadingTile: Story = {
+  render: ({ aiProps, primaryAction: _, ...otherProps }) => {
+    const [isAiLoading, setIsAiLoading] = React.useState(false)
+
+    return (
+      <MultiActionTile
+        primaryAction={{ onClick: () => setIsAiLoading(!isAiLoading), label: 'Perform AI action' }}
+        aiProps={{ isLoading: isAiLoading, isAi: aiProps?.isAi }}
+        {...otherProps}
+      />
+    )
+  },
+  args: {
+    aiProps: {
+      isAi: true,
+      isLoading: true,
+    },
+  },
+}
diff --git a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.module.scss b/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.module.scss
@@ -153,3 +153,55 @@ $tilePaddingTop: $spacing-xl;
   margin-top: $spacing-sm;
   height: $spacing-xl;
 }
+
+.isAi {
+  --gradient-shadow: linear-gradient(
+    45deg,
+    #fb0094,
+    #0000ff,
+    #00ff00,
+    #ffff00,
+    #ff0000,
+    #fb0094,
+    #0000ff,
+    #00ff00,
+    #ffff00,
+    #ff0000
+  );
+}
+
+.isAi.isLoading {
+  position: relative;
+  border-color: transparent;
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    background: var(--gradient-shadow);
+    background-size: 400%;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    z-index: -1;
+    border-radius: calc(var(--border-solid-border-radius) + 1px);
+    animation: pulse 20s linear infinite;
+  }
+
+  &:after {
+    filter: blur(20px);
+  }
+
+  @keyframes pulse {
+    0% {
+      background-position: 0 0;
+    }
+    50% {
+      background-position: 300% 0;
+    }
+    100% {
+      background-position: 0 0;
+    }
+  }
+}
diff --git a/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx b/packages/components/src/Tile/subcomponents/GenericTile/GenericTile.tsx
@@ -22,6 +22,10 @@ export type GenericTileProps = {
   title: React.ReactNode
   titleTag?: AllowedHeadingTags
   metadata?: string
+  aiProps?: {
+    isAi?: boolean
+    isLoading?: boolean
+  }
   information?: TileInformation | React.ReactNode
   /** Provides accessible label for the title's info button @default "View more information: [title]" */
   infoButtonLabel?: string
@@ -48,6 +52,7 @@ export const GenericTile = ({
   variant = 'default',
   footer,
   classNameOverride,
+  aiProps,
   ...restProps
 }: GenericTileProps): JSX.Element => {
   const [isFlipped, setIsFlipped] = useState<boolean | undefined>()
@@ -158,7 +163,14 @@ export const GenericTile = ({
 
   return (
     <div className={classnames(styles.root, classNameOverride)} {...restProps}>
-      <div className={classnames(styles.tile, isFlipped && styles.isFlipped)}>
+      <div
+        className={classnames(
+          styles.tile,
+          isFlipped && styles.isFlipped,
+          aiProps?.isAi && styles.isAi,
+          aiProps?.isLoading && styles.isLoading,
+        )}
+      >
         <>
           {renderFront()}
           {renderBack()}

diff --git a/packages/components/src/Well/Well.module.scss b/packages/components/src/Well/Well.module.scss
@@ -104,3 +104,55 @@
   --border-color: transparent;
   --border-style: none;
 }
+
+.isAi {
+  --gradient-shadow: linear-gradient(
+    45deg,
+    #fb0094,
+    #0000ff,
+    #00ff00,
+    #ffff00,
+    #ff0000,
+    #fb0094,
+    #0000ff,
+    #00ff00,
+    #ffff00,
+    #ff0000
+  );
+}
+
+.isAi.isLoading {
+  position: relative;
+  border-color: transparent;
+  border-width: 1px;
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    background: var(--gradient-shadow);
+    background-size: 400%;
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+    z-index: -1;
+    border-radius: calc(var(--border-solid-border-radius) + 1px);
+    animation: pulse 20s linear infinite;
+  }
+
+  &:after {
+    filter: blur(20px);
+  }
+
+  @keyframes pulse {
+    0% {
+      background-position: 0 0;
+    }
+    50% {
+      background-position: 300% 0;
+    }
+    100% {
+      background-position: 0 0;
+    }
+  }
+}
diff --git a/packages/components/src/Well/Well.tsx b/packages/components/src/Well/Well.tsx
@@ -13,6 +13,10 @@ export type WellProps = {
   /** @default `solid` */
   borderStyle?: WellBorderStyleType
   noMargin?: boolean
+  aiProps?: {
+    isAi?: boolean
+    isLoading?: boolean
+  }
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>
 
 /**
@@ -25,6 +29,7 @@ export const Well = ({
   color = 'white',
   borderStyle = 'solid',
   noMargin = false,
+  aiProps,
   classNameOverride,
   ...restProps
 }: WellProps): JSX.Element => (
@@ -35,6 +40,8 @@ export const Well = ({
       styles[color],
       variant && styles[variant],
       noMargin && styles.noMargin,
+      aiProps?.isAi && styles.isAi,
+      aiProps?.isLoading && styles.isLoading,
       classNameOverride,
     )}
     {...restProps}

diff --git a/packages/components/src/Well/_docs/Well.stories.tsx b/packages/components/src/Well/_docs/Well.stories.tsx
@@ -114,3 +114,20 @@ export const NoMargin: Story = {
     </div>
   ),
 }
+
+export const AiSummary: Story = {
+  args: {
+    aiProps: {
+      isAi: true,
+    },
+  },
+}
+
+export const AiSummaryLoading: Story = {
+  args: {
+    aiProps: {
+      isAi: true,
+      isLoading: true,
+    },
+  },
+}