@occmundial/occ-atomic 3.0.0-beta.50 → 3.0.0-beta.52

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # [3.0.0-beta.52](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.51...v3.0.0-beta.52) (2024-09-03)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * Add cursor pointer to bottom links ([93eb978](https://github.com/occmundial/occ-atomic/commit/93eb9787735c7846c35ae797f71a3b515cc0913e))
7
+
8
+ # [3.0.0-beta.51](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.50...v3.0.0-beta.51) (2024-09-03)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * Add margin zero to grid and add padding top for modal when img top ([cd5416c](https://github.com/occmundial/occ-atomic/commit/cd5416c2ce4fbf1000afd51938c2a24f56999eee))
14
+
1
15
  # [3.0.0-beta.50](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.49...v3.0.0-beta.50) (2024-09-03)
2
16
 
3
17
 
@@ -136,7 +136,7 @@ Footer.propTypes = {
136
136
 
137
137
  /** Footer list className. */
138
138
  listClassName: _propTypes["default"].string,
139
- isFluid: _propTypes["default"]["boolean"],
139
+ isFluid: _propTypes["default"].bool,
140
140
 
141
141
  /** Custom component to render at the top of the footer, commonly used for brand logo */
142
142
  topElement: _propTypes["default"].node,
@@ -145,7 +145,7 @@ Footer.propTypes = {
145
145
  bottomLinksClassName: _propTypes["default"].string,
146
146
 
147
147
  /** Flag to display an horizontal line between sections */
148
- sectionDivider: _propTypes["default"]["boolean"]
148
+ sectionDivider: _propTypes["default"].bool
149
149
  };
150
150
  Footer.defaultProps = {
151
151
  bottomLinks: [],
@@ -4,79 +4,141 @@ exports[`Footer matches the snapshot 1`] = `ShallowWrapper {}`;
4
4
 
5
5
  exports[`Footer styles matches the snapshot 1`] = `
6
6
  Object {
7
- "bottomWrap": Object {
8
- "borderTop": "1px solid #dddddd",
9
- "paddingTop": 24,
7
+ "auxContainer": Object {
8
+ "@media (min-width: 992px)": Object {
9
+ "flexDirection": "row",
10
+ "gap": "64px",
11
+ },
12
+ "alignItems": "center",
13
+ "display": "flex",
14
+ "flexDirection": "column",
15
+ "gap": "24px",
16
+ "justifyContent": "center",
10
17
  },
11
- "buttonMobile": Object {
12
- "marginTop": 16,
18
+ "badgesContainer": Object {
19
+ "@media (min-width: 576px)": Object {
20
+ "flexDirection": "row",
21
+ },
22
+ "display": "flex",
23
+ "flexDirection": "column",
24
+ "gap": "16px",
13
25
  },
14
- "column": Object {
15
- "paddingBottom": 16,
26
+ "bottomContainer": Object {
27
+ "@media (min-width: 768px)": Object {
28
+ "rowGap": "24px",
29
+ },
30
+ "display": "flex",
31
+ "flexDirection": "column",
32
+ "rowGap": "16px",
16
33
  },
17
- "footer": Object {
34
+ "bottomLinksContainer": Object {
35
+ "@media (min-width: 768px)": Object {
36
+ "alignItems": "stretch",
37
+ "flexDirection": "row",
38
+ },
39
+ "columnGap": "24px",
40
+ "display": "flex",
41
+ "flexDirection": "column",
42
+ "justifyContent": "center",
43
+ "rowGap": "16px",
44
+ },
45
+ "bottomSection": Object {
46
+ "display": "flex",
47
+ "flexDirection": "column",
48
+ "rowGap": "40px",
49
+ },
50
+ "column": Object {
51
+ "@media (min-width: 576px)": Object {
52
+ "columnGap": "16px",
53
+ "flexDirection": "row",
54
+ "rowGap": "40px",
55
+ },
18
56
  "@media (min-width: 992px)": Object {
19
- "padding": Array [
20
- 32,
21
- 0,
22
- 32,
23
- ],
57
+ "columnGap": "24px",
58
+ "rowGap": 0,
24
59
  },
25
- "backgroundColor": "#f5f5f8",
60
+ "display": "flex",
61
+ "flexDirection": "column",
62
+ "flexWrap": "wrap",
63
+ },
64
+ "copyright": Object {
65
+ "& > p": Object {
66
+ "margin": 0,
67
+ },
68
+ "color": "#5A5D7B",
69
+ "font": "300 16px/1.5 'OccText', sans-serif",
70
+ },
71
+ "divider": Object {
72
+ "borderTop": "1px solid #EDEDF1",
73
+ },
74
+ "footer": Object {
75
+ "backgroundColor": "#fff",
76
+ "borderTop": "1px solid #EDEDF1",
26
77
  "padding": Array [
27
- 24,
78
+ "40px",
28
79
  0,
29
- 32,
30
80
  ],
31
81
  },
32
- "footerWithoutColumns": Object {
82
+ "footerContainer": Object {
83
+ "@media (min-width: 576px)": Object {
84
+ "rowGap": "40px",
85
+ },
33
86
  "@media (min-width: 992px)": Object {
34
- "padding": Array [
35
- 0,
36
- 0,
37
- 32,
38
- ],
87
+ "rowGap": "48px",
39
88
  },
40
- "backgroundColor": "#f5f5f8",
41
- "padding": Array [
42
- 0,
43
- 0,
44
- 32,
45
- ],
89
+ "display": "flex",
90
+ "flexDirection": "column",
91
+ "rowGap": "24px",
46
92
  },
47
93
  "link": Object {
48
- "&:hover, &:focus, &:active": Object {
49
- "color": "#777777",
94
+ "&:focus-visible": Object {
95
+ "borderRadius": "4px",
96
+ "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
97
+ "color": "#080D39",
98
+ "outline": 0,
99
+ },
100
+ "&:hover": Object {
101
+ "color": "#080D39",
50
102
  },
51
- "color": "#777777",
52
- "cursor": "pointer",
103
+ "color": "#5A5D7B",
104
+ "font": "300 16px/1.5 'OccText', sans-serif",
53
105
  "textDecoration": "none",
106
+ "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
54
107
  },
55
- "list": Object {
56
- "&:not(:first-child)": Object {
57
- "marginLeft": 16,
108
+ "linkDivider": Object {
109
+ "@media (min-width: 768px)": Object {
110
+ "display": "block",
58
111
  },
112
+ "alignSelf": "stretch",
113
+ "backgroundColor": "#6C6F89",
114
+ "display": "none",
115
+ "margin": Array [
116
+ "2px",
117
+ 0,
118
+ ],
119
+ "width": 1,
59
120
  },
60
- "listElement": Object {
61
- "&:first-child": Object {
62
- "paddingLeft": 0,
121
+ "listContainer": Object {
122
+ "@media (min-width: 576px)": Object {
123
+ "flexBasis": "calc(50% - 16px)",
63
124
  },
64
- "&:not(:last-child)": Object {
65
- "&::after": Object {
66
- "content": "\\"|\\"",
67
- "position": "absolute",
68
- "right": -2,
69
- },
125
+ "@media (min-width: 992px)": Object {
126
+ "flexBasis": "calc(25% - 24px)",
70
127
  },
71
- "display": "inline-block",
72
- "paddingLeft": 16,
73
- "paddingRight": 16,
74
- "position": "relative",
128
+ "flexBasis": "100%",
75
129
  },
76
- "mobileListElement": Object {
130
+ "listElement": Object {
131
+ "@media (min-width: 768px)": Object {
132
+ "display": "inline-block",
133
+ "position": "relative",
134
+ },
77
135
  "display": "block",
78
- "paddingBottom": 8,
79
- "paddingLeft": 0,
136
+ "textAlign": "center",
137
+ },
138
+ "socialMediaContainer": Object {
139
+ "columnGap": "4px",
140
+ "direction": "row",
141
+ "display": "flex",
80
142
  },
81
143
  }
82
144
  `;
@@ -56,6 +56,7 @@ var _default = {
56
56
  font: (0, _styles.parseFontValue)(_fonts["default"]['body-regular']),
57
57
  color: _colors["default"].text.corp.secondary,
58
58
  textDecoration: 'none',
59
+ cursor: 'pointer',
59
60
  transition: 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s',
60
61
  '&:hover': {
61
62
  color: _colors["default"].text.corp.primary
@@ -32,7 +32,7 @@ var _default = (_conFluid$con$Media = {
32
32
  },
33
33
  con: {
34
34
  width: _grid["default"].full,
35
- margin: 'auto',
35
+ margin: '0 auto',
36
36
  padding: [0, _spacing["default"]['size-3']]
37
37
  }
38
38
  }, _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
@@ -202,7 +202,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
202
202
  className: classes.imgTop
203
203
  }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
204
204
  tag: "div",
205
- className: "".concat(classes.contentChild).concat(!title && !onClose ? " ".concat(classes.noHeader) : '').concat(!mainBtn ? " ".concat(classes.noFooter) : '')
205
+ className: "".concat(classes.contentChild).concat(!title && !onClose ? " ".concat(classes.noHeader) : '').concat(!mainBtn ? " ".concat(classes.noFooter) : '').concat(imgTop && imgTop.img ? " ".concat(classes.imgTopPadding) : '')
206
206
  }, children)), mainBtn && /*#__PURE__*/_react["default"].createElement("div", {
207
207
  className: "".concat(classes.footer).concat(footerBorder ? " ".concat(classes.footerBorder) : '')
208
208
  }, secBtn && /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
@@ -169,6 +169,9 @@ Object {
169
169
  "objectFit": "cover",
170
170
  "width": "100%",
171
171
  },
172
+ "imgTopPadding": Object {
173
+ "paddingTop": "24px",
174
+ },
172
175
  "lg": Object {
173
176
  "width": 820,
174
177
  },
@@ -258,6 +258,9 @@ var _default = {
258
258
  }, "@media screen and (min-width:".concat(_grid["default"].sm, "px)"), {
259
259
  top: _spacing["default"].medium,
260
260
  right: _spacing["default"].medium
261
- })
261
+ }),
262
+ imgTopPadding: {
263
+ paddingTop: _spacing2["default"]['size-5']
264
+ }
262
265
  };
263
266
  exports["default"] = _default;
@@ -115,10 +115,6 @@ Object {
115
115
  "color": "#664a0e",
116
116
  },
117
117
  "maxWidth": Object {
118
- "margin": Array [
119
- 0,
120
- "auto",
121
- ],
122
118
  "maxWidth": "1200px",
123
119
  },
124
120
  "noBorderRadius": Object {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@occmundial/occ-atomic",
3
- "version": "3.0.0-beta.50",
3
+ "version": "3.0.0-beta.52",
4
4
  "description": "Collection of shareable styled React components for OCC applications.",
5
5
  "homepage": "http://occmundial.github.io/occ-atomic",
6
6
  "main": "build/index.js",