Add spin pulse documentation

sippy-platform · Jan 30, 2024 · 788c436 · 788c436
1 parent 5174cd6
commit 788c436
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 13 deletions.
diff --git a/docs/src/app/Usage.tsx b/docs/src/app/Usage.tsx
@@ -4,7 +4,7 @@ import { Button, Card, Sheet, Stack, Table, Typography } from '@mui/joy';
 
 import Code from '@/design/components/Code';
 
-import ValkyrieIcon, { viArrowsRotateRight, viHeart, viMessageSmile, viSpinnerThird } from '@sippy-platform/valkyrie';
+import ValkyrieIcon, { viArrowsRotateRight, viHeart, viMessageSmile, viSpinner, viSpinnerThird } from '@sippy-platform/valkyrie';
 
 export default function Usage() {
   const [rotate, setRotate] = useState(false);
@@ -41,6 +41,14 @@ export default function Usage() {
               <Code>spin</Code>
             </Stack>
           </Sheet>
+          <Sheet sx={{ p: 1, minWidth: 120, textAlign: 'center', borderRadius: 'sm' }} variant="outlined">
+            <Stack spacing={1}>
+              <Typography fontSize={32}>
+                <ValkyrieIcon icon={viSpinner} spin="pulse" />
+              </Typography>
+              <Code>spin="pulse"</Code>
+            </Stack>
+          </Sheet>
           <Sheet sx={{ p: 1, minWidth: 120, textAlign: 'center', borderRadius: 'sm' }} variant="outlined">
             <Stack spacing={1}>
               <Typography fontSize={32}>
@@ -55,8 +63,8 @@ export default function Usage() {
           <thead>
             <tr>
               <th style={{ width: '25%' }}>Property name</th>
-              <th style={{ width: '25%' }}>Default</th>
-              <th style={{ width: '50%' }}>Description</th>
+              <th style={{ width: '15%' }}>Default</th>
+              <th style={{ width: '60%' }}>Description</th>
             </tr>
           </thead>
           <tbody>
@@ -87,6 +95,15 @@ export default function Usage() {
               </td>
               <td>Number of times the animation is repeated.</td>
             </tr>
+            <tr>
+              <td>
+                <Code>--vi-animation-pulse-steps</Code>
+              </td>
+              <td>
+                <Code>8</Code>
+              </td>
+              <td>Number of steps when the spin property is set to <Code>pulse</Code>.</td>
+            </tr>
           </tbody>
         </Table>
       </Card>
@@ -167,8 +184,8 @@ export default function Usage() {
           <thead>
             <tr>
               <th style={{ width: '25%' }}>Property name</th>
-              <th style={{ width: '25%' }}>Default</th>
-              <th style={{ width: '50%' }}>Description</th>
+              <th style={{ width: '15%' }}>Default</th>
+              <th style={{ width: '60%' }}>Description</th>
             </tr>
           </thead>
           <tbody>
@@ -271,8 +288,8 @@ export default function Usage() {
           <thead>
             <tr>
               <th style={{ width: '25%' }}>Property name</th>
-              <th style={{ width: '25%' }}>Default</th>
-              <th style={{ width: '50%' }}>Description</th>
+              <th style={{ width: '15%' }}>Default</th>
+              <th style={{ width: '60%' }}>Description</th>
             </tr>
           </thead>
           <tbody>

diff --git a/src/ValkyrieIcon.tsx b/src/ValkyrieIcon.tsx
@@ -6,7 +6,7 @@ interface ValkyrieProps {
   icon: IValkyrieIcon;
   rotate?: 0 | 90 | 180 | 270 | false;
   flip?: true | "x" | "y" | false;
-  spin?: boolean;
+  spin?: boolean | "pulse";
   beat?: boolean;
 }
 
@@ -68,29 +68,35 @@ export default function ValkyrieIcon({
       animation-name: ${spinAnimation};
       animation-timing-function: var(--vi-animation-timing-function, linear);
       animation-duration: var(--vi-animation-duration, 2s);
-      animation-iteration-count: var(--vi-animation-iteration-coun, infinite);
+      animation-iteration-count: var(--vi-animation-iteration-count, infinite);
     }
   `;
 
+  const spinPulseClass = css`
+    svg {
+      --vi-animation-timing-function: steps(var(--vi-animation-pulse-steps, 8));
+      --vi-animation-duration: 1s;
+    }
+  `
+
   const beatClass = css `
     svg {
       animation-name: ${beatAnimation};
       animation-timing-function: var(--vi-animation-timing-function, ease-in-out);
       animation-duration: var(--vi-animation-duration, 1s);
-      animation-iteration-count: var(--vi-animation-iteration-coun, infinite);
+      animation-iteration-count: var(--vi-animation-iteration-count, infinite);
     }
   `;
 
-  console.log(beat);
-
   return (
     <span
       {...props}
       className={cx({
         [viClass]: true,
         [rotateClass]: rotate !== null && rotate !== undefined,
         [flipClass]: !!flip,
-        [spinClass]: spin,
+        [spinClass]: !!spin,
+        [spinPulseClass]: spin === 'pulse',
         [beatClass]: beat
       })}
     >