Adding custom animation example to Bento stories

packages/react/src/Bento/Bento.features.stories.module.css

@@ -43,3 +43,75 @@
   height: auto;
   width: 100%;
 }
+
+.CustomVisual__item {
+  position: relative;
+  overflow: hidden;
+}
+
+.CustomElement {
+  --custom-border-width: 4px;
+
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 100px;
+  margin-top: var(--brand-Bento-content-padding-spacious);
+
+  color: white;
+  border-radius: var(--brand-borderRadius-full);
+  z-index: 0;
+  box-shadow: 0px 0px 120px 48px rgb(87 0 189 / 49%), 0px 0px 100px 190px rgb(87 0 189 / 16%);
+
+  &::before {
+    position: absolute;
+    content: '';
+    top: calc(-1 * var(--custom-border-width) + 5px);
+    left: calc(-1 * var(--custom-border-width) + 5px);
+    z-index: -1;
+    width: calc(100% + var(--custom-border-width) * 2 - 10px);
+    height: calc(100% + var(--custom-border-width) * 2 - 10px);
+    background: var(--brand-color-canvas-default);
+    border-radius: var(--brand-borderRadius-full);
+    z-index: 0;
+  }
+
+  &::after {
+    position: absolute;
+    content: '';
+    top: calc(-1 * var(--custom-border-width));
+    left: calc(-1 * var(--custom-border-width));
+    z-index: -1;
+    width: calc(100% + var(--custom-border-width) * 2);
+    height: calc(100% + var(--custom-border-width) * 2);
+    background: radial-gradient(circle at top left, #096bde, #0dff50, #8e47fe, #7c3ffe, #140fff);
+
+    border-radius: var(--brand-borderRadius-full);
+    animation: moveGradient 6s linear infinite;
+    z-index: -1;
+  }
+}
+
+.CustomElement--start {
+  margin-inline-start: var(--brand-Bento-content-padding-spacious);
+}
+
+.CustomElement__icon {
+  position: relative;
+  z-index: 2;
+  display: flex;
+}
+
+@keyframes moveGradient {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+  0.01% {
+    transform: rotate(0deg);
+  }
+}

packages/react/src/Bento/Bento.features.stories.module.css.d.ts

@@ -7,6 +7,11 @@ declare const styles: {
   readonly "Mixed3__customColumns": string;
   readonly "bentoImageBg": string;
   readonly "Mixed3__image": string;
+  readonly "CustomVisual__item": string;
+  readonly "CustomElement": string;
+  readonly "moveGradient": string;
+  readonly "CustomElement--start": string;
+  readonly "CustomElement__icon": string;
 };
 export = styles;
 

packages/react/src/Bento/Bento.features.stories.tsx

@@ -26,6 +26,7 @@ import mixed2GradientBg from '../fixtures/images/bento/mixed-2-gradient-bg.png'
 
 import styles from './Bento.features.stories.module.css'
 import clsx from 'clsx'
+import {CopilotIcon, ZapIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Components/Bento/features',
@@ -587,3 +588,78 @@ Mixed3.decorators = [
     </ThemeProvider>
   ),
 ]
+
+type CustomElementProps = {
+  icon: 'copilot' | 'zap'
+  align?: 'start' | 'center'
+}
+
+const CustomElement = ({icon = 'copilot', align = 'start'}: CustomElementProps) => (
+  <div className={clsx(styles.CustomElement, styles[`CustomElement--${align}`])}>
+    <span className={clsx(styles['CustomElement__icon'])}>
+      {icon === 'zap' && <ZapIcon size={48} />}
+      {icon === 'copilot' && <CopilotIcon size={48} />}
+    </span>
+  </div>
+)
+
+export const CustomVisual: StoryFn<typeof Bento> = () => (
+  <Bento>
+    <Bento.Item
+      columnSpan={{
+        xsmall: 12,
+        medium: 6,
+      }}
+      rowSpan={{xsmall: 4, large: 5}}
+      bgColor="default"
+      className={styles.CustomVisual__item}
+    >
+      <Bento.Visual>
+        <CustomElement icon="zap" />
+      </Bento.Visual>
+      <Bento.Content padding="spacious" verticalAlign="end">
+        <Bento.Heading as="h3" size="display">
+          75%
+        </Bento.Heading>
+        <Bento.Heading as="h4" size="6" weight="medium" variant="muted">
+          Faster builds
+        </Bento.Heading>
+      </Bento.Content>
+    </Bento.Item>
+    <Bento.Item
+      columnSpan={{
+        xsmall: 12,
+        medium: 6,
+      }}
+      rowSpan={{xsmall: 4, large: 5}}
+      bgColor="default"
+      className={styles.CustomVisual__item}
+    >
+      <Bento.Visual horizontalAlign="center">
+        <CustomElement icon="copilot" align="center" />
+      </Bento.Visual>
+      <Bento.Content padding="spacious" horizontalAlign="center" verticalAlign="end">
+        <Bento.Heading as="h3" size="display">
+          55%
+        </Bento.Heading>
+        <Bento.Heading as="h4" size="6" weight="medium" variant="muted">
+          Faster coding
+        </Bento.Heading>
+      </Bento.Content>
+    </Bento.Item>
+  </Bento>
+)
+
+CustomVisual.decorators = [
+  Story => (
+    <ThemeProvider colorMode="dark">
+      <Box backgroundColor="subtle" paddingBlockStart="spacious" paddingBlockEnd="spacious" borderRadius="large">
+        <Grid>
+          <Grid.Column>
+            <Story />
+          </Grid.Column>
+        </Grid>
+      </Box>
+    </ThemeProvider>
+  ),
+]

packages/react/src/Bento/Bento.module.css

@@ -59,6 +59,8 @@
   align-items: flex-start;
   height: 100%;
   color: var(--brand-color-text-default);
+  position: relative;
+  z-index: 1;
 }
 
 .Bento__Content-icon {