sqtracker/client/components/Text.js at master · Frikeer/sqtracker · GitHub

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React from "react";
import styled from "styled-components";
import {
  space,
  background,
  color,
  flexbox,
  typography,
  border,
  position,
  layout,
} from "styled-system";
import styledCss from "@styled-system/css";
import Box from "./Box";

const StyledText = styled.p(
  space,
  layout,
  background,
  flexbox,
  color,
  typography,
  border,
  position,
  ({ _css }) =>
    styledCss({
      ..._css,
    })
);

const Text = ({
  children,
  fref,
  icon: Icon,
  iconSize = 20,
  iconColor = "grey",
  my,
  mt,
  mb,
  mx,
  ml,
  mr,
  iconTextWrapperProps,
  iconWrapperProps,
  ...rest
}) =>
  Icon ? (
    <Box
      display="inline-flex"
      alignItems="flex-start"
      verticalAlign="bottom"
      my={my}
      mt={mt}
      mb={mb}
      mx={mx}
      ml={ml}
      mr={mr}
      {...iconTextWrapperProps}
    >
      <Box
        color={iconColor}
        width={`${iconSize}px`}
        height={`${iconSize}px`}
        flexShrink={0}
        mr={2}
        position="relative"
        _css={{
          svg: {
            position: "absolute",
            top: 0,
            left: 0,
          },
        }}
        {...iconWrapperProps}
      >
        <Icon size={iconSize} />
      </Box>
      <StyledText ref={fref} lineHeight={1.25} {...rest}>
        {children}
      </StyledText>
    </Box>
  ) : (
    <StyledText
      ref={fref}
      my={my}
      mt={mt}
      mb={mb}
      mx={mx}
      ml={ml}
      mr={mr}
      {...rest}
    >
      {children}
    </StyledText>
  );

export default React.forwardRef((props, ref) => <Text fref={ref} {...props} />);