UXPT(4817): action burst

common/changes/pcln-design-system/UXPT-4817-action-burst_2023-07-17-17-33.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "add actionBurst component",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

packages/core/src/Animate/ActionBurst.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import PropTypes, { InferProps } from 'prop-types'
+import { withTheme } from 'styled-components'
+import { motion } from 'framer-motion'
+import { Box } from '../Box'
+import { getPaletteColor } from '../utils'
+
+const propTypes = {
+  icon: PropTypes.ReactNode,
+  children: PropTypes.ReactNode,
+}
+
+const ActionBurst: React.FC<InferProps<typeof propTypes>> = (props) => {
+  const [isActive, setIsActive] = useState(false)
+  return (
+    <Box onClick={() => setIsActive(true)}>
+      {isActive && (
+        <>
+          <motion.div
+            transition={{ duration: 0.75 }}
+            initial={{
+              color: getPaletteColor('primary.base')(props),
+              opacity: 0.2,
+              scale: 0,
+              y: -100,
+              position: 'absolute',
+            }}
+            animate={{ scale: [0, 1, 0], y: [-100, -200], rotate: [0, 240] }}
+            onAnimationComplete={() => {
+              setIsActive(false)
+            }}
+          >
+            {props.icon}
+          </motion.div>
+          <motion.div
+            transition={{ duration: 0.75 }}
+            initial={{
+              color: getPaletteColor('primary.base')(props),
+              opacity: 0.4,
+              scale: 0,
+              y: -70,
+              x: 0,
+              position: 'absolute',
+            }}
+            animate={{ scale: [0, 1, 0], y: [-70, -200], x: [0, -200], rotate: [0, 240] }}
+          >
+            {props.icon}
+          </motion.div>
+          <motion.div
+            transition={{ duration: 0.75 }}
+            initial={{
+              color: getPaletteColor('promoPrimary.base')(props),
+              opacity: 0.3,
+              scale: 0,
+              y: -80,
+              x: 0,
+              position: 'absolute',
+            }}
+            animate={{ scale: [0, 1, 0], y: [-80, -100], x: [0, 200], rotate: [0, 240] }}
+          >
+            {props.icon}
+          </motion.div>
+        </>
+      )}
+      {props.children}
+    </Box>
+  )
+}
+
+export default withTheme(ActionBurst)

packages/core/src/Animate/Animate.stories.tsx

@@ -6,6 +6,8 @@ import { userEvent, within } from '@storybook/testing-library'
 import React, { useState } from 'react'
 import { Animate, MotionVariant, MotionVariants, TransitionVariant, TransitionVariants } from '.'
 import { Box, Button, ChoiceChip, Flex, Image, Text } from '..'
+import ActionBurst from './ActionBurst'
+import { Discount } from 'pcln-icons'
 
 const meta: Meta<typeof Animate> = {
   component: Animate,
@@ -169,3 +171,13 @@ export const ComposedAnimations = () => {
     </Box>
   )
 }
+
+export const ActionBurstAnimations = () => {
+  return (
+    <Flex py={6} justifyContent='center'>
+      <ActionBurst icon={<Discount size={120} />}>
+        <Button>Click here</Button>
+      </ActionBurst>
+    </Flex>
+  )
+}