@nolwenture/formik-jsonschema-form 1.0.0-beta.42 → 1.0.0-beta.44

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 (5) hide show
  1. package/dist/cjs/FormView/components/Field.js +1 -12
  2. package/dist/cjs/FormView/templates/ObjectFieldTemplate/styledComponents.js +21 -12
  3. package/dist/esm/FormView/components/Field.js +1 -12
  4. package/dist/esm/FormView/templates/ObjectFieldTemplate/styledComponents.js +21 -12
  5. package/package.json +1 -1
package/dist/cjs/FormView/components/Field.js CHANGED
@@ -15,54 +15,45 @@ exports.FieldWrapper = styled_components_1.default.div `
15
15
  width: min(100%, 70rem);
16
16
  `;
17
17
  exports.FieldTitle = styled_components_1.default.label `
18
- break-before: avoid;
19
18
  color: ${(props) => props.theme.color.text.default};
20
19
  display: inline-block;
21
20
  font-family: ${(props) => props.theme.typography.fontFamily.heading};
22
- font-size: ${(props) => props.theme.typography.size.base};
21
+ font-size: ${(props) => props.theme.typography.size.small};
23
22
  font-weight: ${(props) => props.theme.typography.weight.bold};
24
23
  margin: ${(props) => `${props.theme.spacing.xs} 0`};
25
24
  width: 100%;
26
25
  `;
27
26
  exports.FieldDescription = styled_components_1.default.div `
28
- break-before: avoid;
29
27
  color: ${(props) => props.theme.color.text.default};
30
28
  font-family: ${(props) => props.theme.typography.fontFamily.base};
31
29
  font-weight: ${(props) => props.theme.typography.weight.normal};
32
30
  font-style: italic;
33
31
  font-size: ${(props) => props.theme.typography.size.small};
34
32
  margin-bottom: ${(props) => props.theme.spacing.s};
35
- max-width: 66ch;
36
33
  `;
37
34
  exports.StringFieldValue = styled_components_1.default.div `
38
- break-before: avoid;
39
35
  color: ${(props) => props.theme.color.text.default};
40
36
  font-family: ${(props) => props.theme.typography.fontFamily.base};
41
37
  font-size: ${(props) => props.theme.typography.size.small};
42
38
  margin-bottom: ${(props) => props.theme.spacing.l};
43
- max-width: 66ch;
44
39
  padding-left: ${(props) => props.theme.spacing.l};
45
40
  white-space: pre-line;
46
41
  `;
47
42
  exports.TextAreaValue = styled_components_1.default.div `
48
- break-before: avoid;
49
43
  color: ${(props) => props.theme.color.text.default};
50
44
  font-family: ${(props) => props.theme.typography.fontFamily.base};
51
45
  font-size: ${(props) => props.theme.typography.size.small};
52
46
  margin-bottom: ${(props) => props.theme.spacing.l};
53
- max-width: 66ch;
54
47
  padding-left: ${(props) => props.theme.spacing.l};
55
48
  white-space: pre-line;
56
49
  `;
57
50
  exports.ArrayFieldItem = styled_components_1.default.div `
58
- break-before: avoid;
59
51
  color: ${(props) => props.theme.color.text.default};
60
52
  font-family: ${(props) => props.theme.typography.fontFamily.base};
61
53
  font-size: ${(props) => props.theme.typography.size.small};
62
54
  padding-left: ${(props) => props.theme.spacing.l};
63
55
  `;
64
56
  exports.EJSFieldValue = styled_components_1.default.div `
65
- break-before: avoid;
66
57
  color: ${(props) => props.theme.color.text.default};
67
58
  font-family: ${(props) => props.theme.typography.fontFamily.base};
68
59
  font-size: ${(props) => props.theme.typography.size.small};
@@ -102,13 +93,11 @@ const NotSelectedCircle = styled_components_1.default.span `
102
93
  flex: 0 0 1rem;
103
94
  `;
104
95
  exports.BooleanFieldWrapper = styled_components_1.default.div `
105
- break-before: avoid;
106
96
  font-family: ${(props) => props.theme.typography.fontFamily.base};
107
97
  font-size: ${(props) => props.theme.typography.size.small};
108
98
  padding-left: ${(props) => props.theme.spacing.l};
109
99
  `;
110
100
  exports.MultipleChoiceFieldWrapper = styled_components_1.default.div `
111
- break-before: avoid;
112
101
  font-size: ${(props) => props.theme.typography.size.small};
113
102
  label {
114
103
  align-items: start;
package/dist/cjs/FormView/templates/ObjectFieldTemplate/styledComponents.js CHANGED
@@ -6,27 +6,36 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ObjectFieldTemplateDescription = exports.ObjectFieldTemplateTitle = exports.ObjectFieldTemplateWrapper = void 0;
7
7
  exports.getComponents = getComponents;
8
8
  const styled_components_1 = __importDefault(require("styled-components"));
9
- exports.ObjectFieldTemplateWrapper = styled_components_1.default.div ``;
9
+ exports.ObjectFieldTemplateWrapper = styled_components_1.default.div `
10
+ &[data-fjsf-level="1"] {
11
+ margin-bottom: ${(props) => props.theme.spacing.xxl};
12
+ }
13
+ `;
10
14
  exports.ObjectFieldTemplateTitle = styled_components_1.default.div `
11
- break-before: avoid;
12
15
  color: ${(props) => props.theme.color.text.default};
13
- font-family: ${(props) => props.theme.typography.fontFamily.heading};
16
+ font-family: ${(props) => props.theme.typography.fontFamily.base};
14
17
  font-size: ${(props) => props.theme.typography.size.base};
15
- font-weight: ${(props) => props.theme.typography.weight.bold};
18
+ font-weight: ${(props) => props.theme.typography.weight.medium};
16
19
  margin: ${(props) => `${props.theme.spacing.s} 0`};
17
20
 
18
- /* ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level] > & {
19
- font-size: ${(props) => props.theme.typography.size.h4};
20
- } */
21
- ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="0"] > & {
22
- font-size: ${(props) => props.theme.typography.size.h1};
21
+ ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level] > & {
22
+ font-size: ${(props) => props.theme.typography.size.base};
23
+
23
24
  }
24
- /* ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
25
+ ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="0"] > & {
26
+ font-family: ${(props) => props.theme.typography.fontFamily.heading};
25
27
  font-size: ${(props) => props.theme.typography.size.h2};
28
+ font-weight: ${(props) => props.theme.typography.weight.bold};
29
+ margin-bottom: ${(props) => props.theme.spacing.l};
30
+ }
31
+ ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
32
+ font-size: ${(props) => props.theme.typography.size.h4};
33
+ font-weight: ${(props) => props.theme.typography.weight.medium};
26
34
  }
27
35
  ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="2"] > & {
28
- font-size: ${(props) => props.theme.typography.size.h3};
29
- } */
36
+ font-size: ${(props) => props.theme.typography.size.large};
37
+ font-weight: ${(props) => props.theme.typography.weight.medium};
38
+ }
30
39
  `;
31
40
  exports.ObjectFieldTemplateDescription = undefined;
32
41
  function getComponents(components) {
package/dist/esm/FormView/components/Field.js CHANGED
@@ -9,54 +9,45 @@ export const FieldWrapper = styled.div `
9
9
  width: min(100%, 70rem);
10
10
  `;
11
11
  export const FieldTitle = styled.label `
12
- break-before: avoid;
13
12
  color: ${(props) => props.theme.color.text.default};
14
13
  display: inline-block;
15
14
  font-family: ${(props) => props.theme.typography.fontFamily.heading};
16
- font-size: ${(props) => props.theme.typography.size.base};
15
+ font-size: ${(props) => props.theme.typography.size.small};
17
16
  font-weight: ${(props) => props.theme.typography.weight.bold};
18
17
  margin: ${(props) => `${props.theme.spacing.xs} 0`};
19
18
  width: 100%;
20
19
  `;
21
20
  export const FieldDescription = styled.div `
22
- break-before: avoid;
23
21
  color: ${(props) => props.theme.color.text.default};
24
22
  font-family: ${(props) => props.theme.typography.fontFamily.base};
25
23
  font-weight: ${(props) => props.theme.typography.weight.normal};
26
24
  font-style: italic;
27
25
  font-size: ${(props) => props.theme.typography.size.small};
28
26
  margin-bottom: ${(props) => props.theme.spacing.s};
29
- max-width: 66ch;
30
27
  `;
31
28
  export const StringFieldValue = styled.div `
32
- break-before: avoid;
33
29
  color: ${(props) => props.theme.color.text.default};
34
30
  font-family: ${(props) => props.theme.typography.fontFamily.base};
35
31
  font-size: ${(props) => props.theme.typography.size.small};
36
32
  margin-bottom: ${(props) => props.theme.spacing.l};
37
- max-width: 66ch;
38
33
  padding-left: ${(props) => props.theme.spacing.l};
39
34
  white-space: pre-line;
40
35
  `;
41
36
  export const TextAreaValue = styled.div `
42
- break-before: avoid;
43
37
  color: ${(props) => props.theme.color.text.default};
44
38
  font-family: ${(props) => props.theme.typography.fontFamily.base};
45
39
  font-size: ${(props) => props.theme.typography.size.small};
46
40
  margin-bottom: ${(props) => props.theme.spacing.l};
47
- max-width: 66ch;
48
41
  padding-left: ${(props) => props.theme.spacing.l};
49
42
  white-space: pre-line;
50
43
  `;
51
44
  export const ArrayFieldItem = styled.div `
52
- break-before: avoid;
53
45
  color: ${(props) => props.theme.color.text.default};
54
46
  font-family: ${(props) => props.theme.typography.fontFamily.base};
55
47
  font-size: ${(props) => props.theme.typography.size.small};
56
48
  padding-left: ${(props) => props.theme.spacing.l};
57
49
  `;
58
50
  export const EJSFieldValue = styled.div `
59
- break-before: avoid;
60
51
  color: ${(props) => props.theme.color.text.default};
61
52
  font-family: ${(props) => props.theme.typography.fontFamily.base};
62
53
  font-size: ${(props) => props.theme.typography.size.small};
@@ -96,13 +87,11 @@ const NotSelectedCircle = styled.span `
96
87
  flex: 0 0 1rem;
97
88
  `;
98
89
  export const BooleanFieldWrapper = styled.div `
99
- break-before: avoid;
100
90
  font-family: ${(props) => props.theme.typography.fontFamily.base};
101
91
  font-size: ${(props) => props.theme.typography.size.small};
102
92
  padding-left: ${(props) => props.theme.spacing.l};
103
93
  `;
104
94
  export const MultipleChoiceFieldWrapper = styled.div `
105
- break-before: avoid;
106
95
  font-size: ${(props) => props.theme.typography.size.small};
107
96
  label {
108
97
  align-items: start;
package/dist/esm/FormView/templates/ObjectFieldTemplate/styledComponents.js CHANGED
@@ -1,25 +1,34 @@
1
1
  import styled from "styled-components";
2
- export const ObjectFieldTemplateWrapper = styled.div ``;
2
+ export const ObjectFieldTemplateWrapper = styled.div `
3
+ &[data-fjsf-level="1"] {
4
+ margin-bottom: ${(props) => props.theme.spacing.xxl};
5
+ }
6
+ `;
3
7
  export const ObjectFieldTemplateTitle = styled.div `
4
- break-before: avoid;
5
8
  color: ${(props) => props.theme.color.text.default};
6
- font-family: ${(props) => props.theme.typography.fontFamily.heading};
9
+ font-family: ${(props) => props.theme.typography.fontFamily.base};
7
10
  font-size: ${(props) => props.theme.typography.size.base};
8
- font-weight: ${(props) => props.theme.typography.weight.bold};
11
+ font-weight: ${(props) => props.theme.typography.weight.medium};
9
12
  margin: ${(props) => `${props.theme.spacing.s} 0`};
10
13
 
11
- /* ${ObjectFieldTemplateWrapper}[data-fjsf-level] > & {
12
- font-size: ${(props) => props.theme.typography.size.h4};
13
- } */
14
- ${ObjectFieldTemplateWrapper}[data-fjsf-level="0"] > & {
15
- font-size: ${(props) => props.theme.typography.size.h1};
14
+ ${ObjectFieldTemplateWrapper}[data-fjsf-level] > & {
15
+ font-size: ${(props) => props.theme.typography.size.base};
16
+
16
17
  }
17
- /* ${ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
18
+ ${ObjectFieldTemplateWrapper}[data-fjsf-level="0"] > & {
19
+ font-family: ${(props) => props.theme.typography.fontFamily.heading};
18
20
  font-size: ${(props) => props.theme.typography.size.h2};
21
+ font-weight: ${(props) => props.theme.typography.weight.bold};
22
+ margin-bottom: ${(props) => props.theme.spacing.l};
23
+ }
24
+ ${ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
25
+ font-size: ${(props) => props.theme.typography.size.h4};
26
+ font-weight: ${(props) => props.theme.typography.weight.medium};
19
27
  }
20
28
  ${ObjectFieldTemplateWrapper}[data-fjsf-level="2"] > & {
21
- font-size: ${(props) => props.theme.typography.size.h3};
22
- } */
29
+ font-size: ${(props) => props.theme.typography.size.large};
30
+ font-weight: ${(props) => props.theme.typography.weight.medium};
31
+ }
23
32
  `;
24
33
  export const ObjectFieldTemplateDescription = undefined;
25
34
  export function getComponents(components) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nolwenture/formik-jsonschema-form",
3
- "version": "1.0.0-beta.42",
3
+ "version": "1.0.0-beta.44",
4
4
  "description": "Formik form generation from json schema",
5
5
  "author": "anttivikman <antti.vikman@nolwenture.com>",
6
6
  "contributors": [