All files / src/components/elements/Expand Expand.tsx

0% Statements 0/4
0% Branches 0/8
0% Functions 0/2
0% Lines 0/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 35 36 37 38 39 40 41 42 43 44                                                                                       
import * as React from "react";
import { Box, Pill, Text } from "rimble-ui";
import { baseColors } from "../../../themes";
 
export interface ExpandProps {
  expandButtonText?: string;
  contractButtonText?: string;
}
export const Expand: React.FunctionComponent<ExpandProps> = (props) => {
  const [isOpen, setOpen] = React.useState(false);
 
  return (
    <Box my={2}>
      {isOpen && <>{props.children}</>}
      <button
        onClick={() => setOpen(!isOpen)}
        style={{
          backgroundColor: baseColors.white,
          border: "none",
          cursor: "pointer",
          padding: "0",
          position: "relative",
          outline: "none",
          width: "100%",
        }}
      >
        <Box borderTop={1} position="absolute" top="50%" width="100%" />
        <Pill color="primary" cursor="pointer" height={3} px={2}>
          <Text.span
            fontSize={0}
            fontWeight={3}
            letterSpacing={1}
            style={{
              textTransform: "uppercase",
            }}
          >
            {isOpen ? props.contractButtonText || "Less" : props.expandButtonText || "More"}
          </Text.span>
        </Pill>
      </button>
    </Box>
  );
};