@gympass/yoga 7.123.0 → 7.124.0

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/cjs/Snackbar/web/Snackbar.js +41 -10
  2. package/cjs/Snackbar/web/Snackbar.test.js +1 -1
  3. package/esm/Snackbar/web/Snackbar.js +41 -10
  4. package/esm/Snackbar/web/Snackbar.test.js +1 -1
  5. package/package.json +2 -2
package/cjs/Snackbar/web/Snackbar.js CHANGED
@@ -84,6 +84,12 @@ const IconButtonWrapper = import_styled_components.default.div`
84
84
  display: flex;
85
85
  align-items: center;
86
86
 
87
+ background: none;
88
+ color: inherit;
89
+ border: none;
90
+ padding: 0;
91
+ outline: inherit;
92
+
87
93
  cursor: pointer;
88
94
 
89
95
  &:hover {
@@ -168,6 +174,7 @@ const Snackbar = import_react.default.forwardRef(
168
174
  onAction,
169
175
  onClose,
170
176
  hideCloseButton,
177
+ ariaLabelClose,
171
178
  theme: {
172
179
  yoga: {
173
180
  components: { snackbar }
@@ -183,6 +190,7 @@ const Snackbar = import_react.default.forwardRef(
183
190
  "onAction",
184
191
  "onClose",
185
192
  "hideCloseButton",
193
+ "ariaLabelClose",
186
194
  "theme"
187
195
  ]);
188
196
  const timeoutRef = (0, import_react.useRef)();
@@ -204,19 +212,39 @@ const Snackbar = import_react.default.forwardRef(
204
212
  ref
205
213
  }, props), {
206
214
  children: [
207
- !hideIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, { display: "flex", alignItems: "center", mr: "small", role: "img", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
208
- import_Icon.default,
215
+ !hideIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
216
+ import_Box.default,
209
217
  {
210
- as: snackbar.variant.icon[variant],
211
- fill: "secondary",
212
- width: "large",
213
- height: "large"
218
+ display: "flex",
219
+ alignItems: "center",
220
+ mr: "small",
221
+ role: "img",
222
+ "data-testid": "img",
223
+ "aria-hidden": true,
224
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
225
+ import_Icon.default,
226
+ {
227
+ as: snackbar.variant.icon[variant],
228
+ fill: "secondary",
229
+ width: "large",
230
+ height: "large"
231
+ }
232
+ )
214
233
  }
215
- ) }),
234
+ ),
216
235
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.default.Body2, { flex: 1, mr: "small", numberOfLines: 2, children: message }),
217
236
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ActionsWrapper, { children: [
218
237
  onAction && actionLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.default.Link, { onClick: onAction, secondary: true, small: true, children: actionLabel }),
219
- !hideCloseButton && onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButtonWrapper, { role: "button", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: import_yoga_icons.Close, fill: "secondary", size: "medium" }) })
238
+ !hideCloseButton && onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
239
+ IconButtonWrapper,
240
+ {
241
+ role: "button",
242
+ onClick: onClose,
243
+ "aria-label": ariaLabelClose,
244
+ as: "button",
245
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.default, { as: import_yoga_icons.Close, fill: "secondary", size: "medium" })
246
+ }
247
+ )
220
248
  ] })
221
249
  ]
222
250
  })
@@ -241,7 +269,9 @@ Snackbar.propTypes = {
241
269
  /** The style variant, it may be "success", "failure" or "info". */
242
270
  variant: (0, import_prop_types.oneOf)(["success", "failure", "info"]),
243
271
  /** Hides the close button. */
244
- hideCloseButton: import_prop_types.bool
272
+ hideCloseButton: import_prop_types.bool,
273
+ /** Custom aria label for close button. */
274
+ ariaLabelClose: import_prop_types.string
245
275
  };
246
276
  Snackbar.defaultProps = {
247
277
  open: false,
@@ -250,6 +280,7 @@ Snackbar.defaultProps = {
250
280
  hideIcon: false,
251
281
  onAction: void 0,
252
282
  variant: "success",
253
- hideCloseButton: false
283
+ hideCloseButton: false,
284
+ ariaLabelClose: void 0
254
285
  };
255
286
  var Snackbar_default = (0, import_react.memo)((0, import_styled_components.withTheme)(Snackbar));
package/cjs/Snackbar/web/Snackbar.test.js CHANGED
@@ -58,7 +58,7 @@ describe("<Snackbar />", () => {
58
58
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Snackbar, { open: true, message: "Make wellbeing universal", onClose: jest.fn() }) })
59
59
  );
60
60
  import_react2.screen.getByRole("alert");
61
- import_react2.screen.getByRole("img");
61
+ import_react2.screen.getByTestId("img");
62
62
  import_react2.screen.getByLabelText("success");
63
63
  import_react2.screen.getByText("Make wellbeing universal");
64
64
  });
package/esm/Snackbar/web/Snackbar.js CHANGED
@@ -53,6 +53,12 @@ const IconButtonWrapper = styled.div`
53
53
  display: flex;
54
54
  align-items: center;
55
55
 
56
+ background: none;
57
+ color: inherit;
58
+ border: none;
59
+ padding: 0;
60
+ outline: inherit;
61
+
56
62
  cursor: pointer;
57
63
 
58
64
  &:hover {
@@ -137,6 +143,7 @@ const Snackbar = React.forwardRef(
137
143
  onAction,
138
144
  onClose,
139
145
  hideCloseButton,
146
+ ariaLabelClose,
140
147
  theme: {
141
148
  yoga: {
142
149
  components: { snackbar }
@@ -152,6 +159,7 @@ const Snackbar = React.forwardRef(
152
159
  "onAction",
153
160
  "onClose",
154
161
  "hideCloseButton",
162
+ "ariaLabelClose",
155
163
  "theme"
156
164
  ]);
157
165
  const timeoutRef = useRef();
@@ -173,19 +181,39 @@ const Snackbar = React.forwardRef(
173
181
  ref
174
182
  }, props), {
175
183
  children: [
176
- !hideIcon && /* @__PURE__ */ jsx(Box, { display: "flex", alignItems: "center", mr: "small", role: "img", children: /* @__PURE__ */ jsx(
177
- Icon,
184
+ !hideIcon && /* @__PURE__ */ jsx(
185
+ Box,
178
186
  {
179
- as: snackbar.variant.icon[variant],
180
- fill: "secondary",
181
- width: "large",
182
- height: "large"
187
+ display: "flex",
188
+ alignItems: "center",
189
+ mr: "small",
190
+ role: "img",
191
+ "data-testid": "img",
192
+ "aria-hidden": true,
193
+ children: /* @__PURE__ */ jsx(
194
+ Icon,
195
+ {
196
+ as: snackbar.variant.icon[variant],
197
+ fill: "secondary",
198
+ width: "large",
199
+ height: "large"
200
+ }
201
+ )
183
202
  }
184
- ) }),
203
+ ),
185
204
  /* @__PURE__ */ jsx(Text.Body2, { flex: 1, mr: "small", numberOfLines: 2, children: message }),
186
205
  /* @__PURE__ */ jsxs(ActionsWrapper, { children: [
187
206
  onAction && actionLabel && /* @__PURE__ */ jsx(Button.Link, { onClick: onAction, secondary: true, small: true, children: actionLabel }),
188
- !hideCloseButton && onClose && /* @__PURE__ */ jsx(IconButtonWrapper, { role: "button", onClick: onClose, children: /* @__PURE__ */ jsx(Icon, { as: Close, fill: "secondary", size: "medium" }) })
207
+ !hideCloseButton && onClose && /* @__PURE__ */ jsx(
208
+ IconButtonWrapper,
209
+ {
210
+ role: "button",
211
+ onClick: onClose,
212
+ "aria-label": ariaLabelClose,
213
+ as: "button",
214
+ children: /* @__PURE__ */ jsx(Icon, { as: Close, fill: "secondary", size: "medium" })
215
+ }
216
+ )
189
217
  ] })
190
218
  ]
191
219
  })
@@ -210,7 +238,9 @@ Snackbar.propTypes = {
210
238
  /** The style variant, it may be "success", "failure" or "info". */
211
239
  variant: oneOf(["success", "failure", "info"]),
212
240
  /** Hides the close button. */
213
- hideCloseButton: bool
241
+ hideCloseButton: bool,
242
+ /** Custom aria label for close button. */
243
+ ariaLabelClose: string
214
244
  };
215
245
  Snackbar.defaultProps = {
216
246
  open: false,
@@ -219,7 +249,8 @@ Snackbar.defaultProps = {
219
249
  hideIcon: false,
220
250
  onAction: void 0,
221
251
  variant: "success",
222
- hideCloseButton: false
252
+ hideCloseButton: false,
253
+ ariaLabelClose: void 0
223
254
  };
224
255
  var Snackbar_default = memo(withTheme(Snackbar));
225
256
  export {
package/esm/Snackbar/web/Snackbar.test.js CHANGED
@@ -41,7 +41,7 @@ var require_Snackbar_test = __commonJS({
41
41
  /* @__PURE__ */ jsx(ThemeProvider, { children: /* @__PURE__ */ jsx(Snackbar, { open: true, message: "Make wellbeing universal", onClose: jest.fn() }) })
42
42
  );
43
43
  screen.getByRole("alert");
44
- screen.getByRole("img");
44
+ screen.getByTestId("img");
45
45
  screen.getByLabelText("success");
46
46
  screen.getByText("Make wellbeing universal");
47
47
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.123.0",
3
+ "version": "7.124.0",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "types": "./typings/index.d.ts",
@@ -58,7 +58,7 @@
58
58
  "react-native": "0.72.3",
59
59
  "styled-components": "^4.4.0"
60
60
  },
61
- "gitHead": "b9d39d599fc6f84a172c716654b7bf5c53a89b65",
61
+ "gitHead": "19f2cf453d3e3925bbd6a961163da89cda3fedeb",
62
62
  "module": "./esm",
63
63
  "private": false,
64
64
  "react-native": "./cjs/index.native.js"