stepHeading.tsx 991 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. import styled from '@emotion/styled';
  2. import {motion} from 'framer-motion';
  3. import space from 'sentry/styles/space';
  4. import testableTransition from 'sentry/utils/testableTransition';
  5. const StepHeading = styled(motion.h2)<{step: number}>`
  6. margin-left: calc(-${space(2)} - 30px);
  7. position: relative;
  8. display: inline-grid;
  9. grid-template-columns: max-content auto;
  10. gap: ${space(2)};
  11. align-items: center;
  12. &:before {
  13. content: '${p => p.step}';
  14. display: flex;
  15. align-items: center;
  16. justify-content: center;
  17. width: 30px;
  18. height: 30px;
  19. background-color: ${p => p.theme.yellow300};
  20. border-radius: 50%;
  21. color: ${p => p.theme.textColor};
  22. font-size: 1rem;
  23. }
  24. `;
  25. StepHeading.defaultProps = {
  26. variants: {
  27. initial: {clipPath: 'inset(0% 100% 0% 0%)', opacity: 1},
  28. animate: {clipPath: 'inset(0% 0% 0% 0%)', opacity: 1},
  29. exit: {opacity: 0},
  30. },
  31. transition: testableTransition({
  32. duration: 0.3,
  33. }),
  34. };
  35. export default StepHeading;