@bigbinary/neetoui-rn 0.0.15 → 0.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/lib/components/{Typography/Typography.js → Typography.js} +11 -7
  2. package/lib/components/index.js +1 -8
  3. package/lib/theme/index.js +25 -10
  4. package/package.json +1 -1
  5. package/lib/components/Typography/Body.js +0 -42
  6. package/lib/components/Typography/Caption1.js +0 -42
  7. package/lib/components/Typography/Caption2.js +0 -42
  8. package/lib/components/Typography/LargeTitle.js +0 -42
  9. package/lib/components/Typography/Title1.js +0 -42
  10. package/lib/components/Typography/Title2.js +0 -42
package/lib/components/{Typography/Typography.js → Typography.js} RENAMED
@@ -7,21 +7,21 @@ import {
7
7
  typography,
8
8
  color,
9
9
  textStyle,
10
+ position,
10
11
  } from "styled-system";
11
12
  import propTypes from "@styled-system/prop-types";
12
13
  import PropTypes from "prop-types";
13
14
 
14
15
  export const Text = styled.Text`
16
+ ${textStyle}
15
17
  ${space}
16
18
  ${layout}
17
19
  ${flexbox}
18
20
  ${typography}
19
21
  ${color}
20
- ${textStyle}
22
+ ${position}
21
23
  `;
22
24
 
23
- // @component-group Typography Components
24
-
25
25
  /**
26
26
  * Typography component is a primitive text component which is built on top of styled-system.
27
27
  *
@@ -37,9 +37,13 @@ export const Text = styled.Text`
37
37
  * </ul>
38
38
  *
39
39
  * <div class="screenshots">
40
- * <img src="screenshots/typography-all.png" />
41
- * <img src="screenshots/typography-colors.png" />
42
- * <img src="screenshots/typography-fonts.png" />
40
+ * <img src="screenshots/typography/fontsizes.png" />
41
+ * <img src="screenshots/typography/textstyles.png" />
42
+ * </div>
43
+ *
44
+ * <div class="screenshots">
45
+ * <img src="screenshots/typography/fontsizes.png" />
46
+ * <img src="screenshots/typography/textstyles.png" />
43
47
  * </div>
44
48
  *
45
49
  * ## Usage
@@ -76,5 +80,5 @@ Typography.propTypes = {
76
80
  };
77
81
 
78
82
  Typography.defaultProps = {
79
- color: "font.primary",
83
+ textStyle: "defaultTextStyle",
80
84
  };
package/lib/components/index.js CHANGED
@@ -1,10 +1,3 @@
1
1
  export { Button } from "./Button";
2
2
  export { Container } from "./Container";
3
-
4
- export { Typography } from "./Typography/Typography";
5
- export { LargeTitle } from "./Typography/LargeTitle";
6
- export { Title1 } from "./Typography/Title1";
7
- export { Title2 } from "./Typography/Title2";
8
- export { Body } from "./Typography/Body";
9
- export { Caption1 } from "./Typography/Caption1";
10
- export { Caption2 } from "./Typography/Caption2";
3
+ export { Typography } from "./Typography";
package/lib/theme/index.js CHANGED
@@ -55,15 +55,12 @@ const baseTheme = {
55
55
  },
56
56
  lineHeights: [24],
57
57
  fontSizes: {
58
- largeTitle: 32,
59
- title1: 24,
60
- title2: 18,
61
- title3: 18,
62
- headline: 14,
63
- body: 14,
64
- callout: 12,
65
- caption1: 12,
66
- caption2: 10,
58
+ xs: 10,
59
+ s: 12,
60
+ m: 14,
61
+ l: 18,
62
+ xl: 24,
63
+ xxl: 32,
67
64
  },
68
65
  };
69
66
 
@@ -72,6 +69,24 @@ baseTheme.lineHeights.note = baseTheme.lineHeights[0] + "px";
72
69
 
73
70
  export const theme = {
74
71
  ...baseTheme,
72
+ textStyles: {
73
+ defaultTextStyle: {
74
+ color: baseTheme.colors.font.primary,
75
+ },
76
+ header: {
77
+ color: baseTheme.colors.font.primary,
78
+ fontSize: baseTheme.fontSizes.l,
79
+ fontFamily: baseTheme.fonts.inter700,
80
+ },
81
+ body: {
82
+ color: baseTheme.colors.font.primary,
83
+ fontSize: baseTheme.fontSizes.m,
84
+ },
85
+ subtext: {
86
+ color: baseTheme.colors.font.primary,
87
+ fontSize: baseTheme.fontSizes.s,
88
+ },
89
+ },
75
90
  buttons: {
76
91
  primary: {
77
92
  color: baseTheme.colors.white,
@@ -82,7 +97,7 @@ export const theme = {
82
97
  backgroundColor: baseTheme.colors.white,
83
98
  },
84
99
  disabled: {
85
- color: baseTheme.colors.white,
100
+ color: "#00FF00",
86
101
  backgroundColor: baseTheme.colors.grey,
87
102
  },
88
103
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bigbinary/neetoui-rn",
3
- "version": "0.0.15",
3
+ "version": "0.0.16",
4
4
  "main": "lib/index.js",
5
5
  "author": "BigBinary",
6
6
  "license": "MIT",
package/lib/components/Typography/Body.js DELETED
@@ -1,42 +0,0 @@
1
- import * as React from "react";
2
- import PropTypes from "prop-types";
3
-
4
- import { Typography } from "./Typography";
5
-
6
- // @component-group Typography Components
7
-
8
- /**
9
- * Body component is built on top of typography component with default font family and font size.
10
- *
11
- * ## Usage
12
- * ```js
13
- * import * as React from 'react';
14
- * import { Body, Container } from '@bigbinary/neetoui-rn';
15
- *
16
- * export default function Main() {
17
- * return (
18
- * <Container>
19
- * <Body>
20
- * This is basic example of Body
21
- * </Body>
22
- * </Container>
23
- * );
24
- * }
25
- *
26
- * ```
27
- *
28
- * @extends StyledSystems props /styled-system
29
- */
30
-
31
- export const Body = ({ children, ...rest }) => {
32
- return (
33
- <Typography fontSize="body" {...rest}>
34
- {children}
35
- </Typography>
36
- );
37
- };
38
-
39
- Body.propTypes = {
40
- ...Typography.propTypes,
41
- children: PropTypes.node.isRequired,
42
- };
package/lib/components/Typography/Caption1.js DELETED
@@ -1,42 +0,0 @@
1
- import * as React from "react";
2
- import PropTypes from "prop-types";
3
-
4
- import { Typography } from "./Typography";
5
-
6
- // @component-group Typography Components
7
-
8
- /**
9
- * Caption1 component is built on top of typography component with default font family and font size.
10
- *
11
- * ## Usage
12
- * ```js
13
- * import * as React from 'react';
14
- * import { Caption1, Container } from '@bigbinary/neetoui-rn';
15
- *
16
- * export default function Main() {
17
- * return (
18
- * <Container>
19
- * <Caption1>
20
- * This is basic example of Caption1
21
- * </Caption1>
22
- * </Container>
23
- * );
24
- * }
25
- *
26
- * ```
27
- *
28
- * @extends StyledSystems props /styled-system
29
- */
30
-
31
- export const Caption1 = ({ children, ...rest }) => {
32
- return (
33
- <Typography fontSize="caption1" {...rest}>
34
- {children}
35
- </Typography>
36
- );
37
- };
38
-
39
- Caption1.propTypes = {
40
- ...Typography.propTypes,
41
- children: PropTypes.node.isRequired,
42
- };
package/lib/components/Typography/Caption2.js DELETED
@@ -1,42 +0,0 @@
1
- import * as React from "react";
2
- import PropTypes from "prop-types";
3
-
4
- import { Typography } from "./Typography";
5
-
6
- // @component-group Typography Components
7
-
8
- /**
9
- * Caption2 component is built on top of typography component with default font family and font size.
10
- *
11
- * ## Usage
12
- * ```js
13
- * import * as React from 'react';
14
- * import { Caption2, Container } from '@bigbinary/neetoui-rn';
15
- *
16
- * export default function Main() {
17
- * return (
18
- * <Container>
19
- * <Caption2>
20
- * This is basic example of Caption2
21
- * </Caption2>
22
- * </Container>
23
- * );
24
- * }
25
- *
26
- * ```
27
- *
28
- * @extends StyledSystems props /styled-system
29
- */
30
-
31
- export const Caption2 = ({ children, ...rest }) => {
32
- return (
33
- <Typography fontSize="caption2" {...rest}>
34
- {children}
35
- </Typography>
36
- );
37
- };
38
-
39
- Caption2.propTypes = {
40
- ...Typography.propTypes,
41
- children: PropTypes.node.isRequired,
42
- };
package/lib/components/Typography/LargeTitle.js DELETED
@@ -1,42 +0,0 @@
1
- import * as React from "react";
2
- import PropTypes from "prop-types";
3
-
4
- import { Typography } from "./Typography";
5
-
6
- // @component-group Typography Components
7
-
8
- /**
9
- * LargeTitle component is built on top of typography component with default font family and font size.
10
- *
11
- * ## Usage
12
- * ```js
13
- * import * as React from 'react';
14
- * import { LargeTitle, Container } from '@bigbinary/neetoui-rn';
15
- *
16
- * export default function Main() {
17
- * return (
18
- * <Container>
19
- * <LargeTitle>
20
- * This is basic example of LargeTitle
21
- * </LargeTitle>
22
- * </Container>
23
- * );
24
- * }
25
- *
26
- * ```
27
- *
28
- * @extends StyledSystems props /styled-system
29
- */
30
-
31
- export const LargeTitle = ({ children, ...rest }) => {
32
- return (
33
- <Typography fontSize="largeTitle" {...rest}>
34
- {children}
35
- </Typography>
36
- );
37
- };
38
-
39
- LargeTitle.propTypes = {
40
- ...Typography.propTypes,
41
- children: PropTypes.node.isRequired,
42
- };
package/lib/components/Typography/Title1.js DELETED
@@ -1,42 +0,0 @@
1
- import * as React from "react";
2
- import PropTypes from "prop-types";
3
-
4
- import { Typography } from "./Typography";
5
-
6
- // @component-group Typography Components
7
-
8
- /**
9
- * Title1 component is built on top of typography component with default font family and font size.
10
- *
11
- * ## Usage
12
- * ```js
13
- * import * as React from 'react';
14
- * import { Title1, Container } from '@bigbinary/neetoui-rn';
15
- *
16
- * export default function Main() {
17
- * return (
18
- * <Container>
19
- * <Title1>
20
- * This is basic example of Title1
21
- * </Title1>
22
- * </Container>
23
- * );
24
- * }
25
- *
26
- * ```
27
- *
28
- * @extends StyledSystems props /styled-system
29
- */
30
-
31
- export const Title1 = ({ children, ...rest }) => {
32
- return (
33
- <Typography fontSize="title1" {...rest}>
34
- {children}
35
- </Typography>
36
- );
37
- };
38
-
39
- Title1.propTypes = {
40
- ...Typography.propTypes,
41
- children: PropTypes.node.isRequired,
42
- };
package/lib/components/Typography/Title2.js DELETED
@@ -1,42 +0,0 @@
1
- import * as React from "react";
2
- import PropTypes from "prop-types";
3
-
4
- import { Typography } from "./Typography";
5
-
6
- // @component-group Typography Components
7
-
8
- /**
9
- * Title2 component is built on top of typography component with default font family and font size.
10
- *
11
- * ## Usage
12
- * ```js
13
- * import * as React from 'react';
14
- * import { Title2, Container } from '@bigbinary/neetoui-rn';
15
- *
16
- * export default function Main() {
17
- * return (
18
- * <Container>
19
- * <Title2>
20
- * This is basic example of Title2
21
- * </Title2>
22
- * </Container>
23
- * );
24
- * }
25
- *
26
- * ```
27
- *
28
- * @extends StyledSystems props /styled-system
29
- */
30
-
31
- export const Title2 = ({ children, ...rest }) => {
32
- return (
33
- <Typography fontSize="title2" {...rest}>
34
- {children}
35
- </Typography>
36
- );
37
- };
38
-
39
- Title2.propTypes = {
40
- ...Typography.propTypes,
41
- children: PropTypes.node.isRequired,
42
- };