All files / app/pages/stacking/components stacking-form-step.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { Title } from '@components/title';
import { Box, Flex, FlexProps, Button, ButtonProps, Stack } from '@stacks/ui';
import { ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core';
import React, { FC } from 'react';
 
interface StackingFormStepProps extends FlexProps {
  title: string;
}
 
export const StackingStep: FC<StackingFormStepProps> = props => {
  const { title, children, ...rest } = props;
  return (
    <Flex flexDirection="column" mt="extra-loose" {...rest}>
      <Title fontSize="24px" mt="extra-tight" mr="tight">
        {title}
      </Title>
      <Box>{children}</Box>
    </Flex>
  );
};
 
export const StackingStepDescription: FC = ({ children }) => (
  <Stack display="block" textStyle="body.large" spacing="base">
    {children}
  </Stack>
);
 
export const StackingStepAction: ForwardRefExoticComponentWithAs<ButtonProps, 'button'> =
  forwardRefWithAs(({ children, ...props }, ref) => (
    <Button size="md" mt="loose" ref={ref} {...props}>
      {children}
    </Button>
  ));