@justfixnyc/component-library 0.29.1 → 0.29.2

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 (6) hide show
  1. package/dist/src/assets/index.css +10 -3
  2. package/dist/src/assets/index.es.css +10 -3
  3. package/dist/src/index.es.js +10 -4
  4. package/dist/src/index.js +10 -4
  5. package/dist/typings/buttons/Button.d.ts +2 -2
  6. package/package.json +1 -1
package/dist/src/assets/index.css CHANGED
@@ -34,7 +34,7 @@
34
34
  font-family: "Degular", Arial, Helvetica, sans-serif;
35
35
  font-style: normal;
36
36
  font-weight: 500;
37
- font-size: 18px;
37
+ font-size: 1.13rem;
38
38
  line-height: 120%;
39
39
  text-align: center;
40
40
  letter-spacing: 0.54px;
@@ -55,6 +55,12 @@
55
55
  transition: all 0.1s linear;
56
56
  transform: translateX(0rem);
57
57
  }
58
+ .jfcl-button:focus-visible {
59
+ outline-style: solid;
60
+ outline-offset: 2px;
61
+ outline-width: 2px;
62
+ outline-color: #5188ff;
63
+ }
58
64
  .jfcl-button:disabled {
59
65
  cursor: inherit;
60
66
  }
@@ -183,12 +189,13 @@
183
189
  padding-left: calc(12px + 0.75rem);
184
190
  position: relative;
185
191
  width: fit-content;
192
+ min-width: 10rem;
186
193
  border-radius: 0.25rem;
187
194
  overflow: hidden;
188
195
  font-family: "Degular", Arial, Helvetica, sans-serif;
189
196
  font-style: normal;
190
197
  font-weight: 500;
191
- font-size: 18px;
198
+ font-size: 1.13rem;
192
199
  line-height: 120%;
193
200
  text-align: center;
194
201
  letter-spacing: 0.54px;
@@ -239,7 +246,7 @@
239
246
  }
240
247
  .jf-alert.jfcl-variant-secondary {
241
248
  background-color: #faf8f4;
242
- border: 1px solid #9a9898;
249
+ border: 1px solid #676565;
243
250
  color: #242323;
244
251
  }
245
252
  .jf-alert.jfcl-variant-secondary .jf-alert__btn {
package/dist/src/assets/index.es.css CHANGED
@@ -34,7 +34,7 @@
34
34
  font-family: "Degular", Arial, Helvetica, sans-serif;
35
35
  font-style: normal;
36
36
  font-weight: 500;
37
- font-size: 18px;
37
+ font-size: 1.13rem;
38
38
  line-height: 120%;
39
39
  text-align: center;
40
40
  letter-spacing: 0.54px;
@@ -55,6 +55,12 @@
55
55
  transition: all 0.1s linear;
56
56
  transform: translateX(0rem);
57
57
  }
58
+ .jfcl-button:focus-visible {
59
+ outline-style: solid;
60
+ outline-offset: 2px;
61
+ outline-width: 2px;
62
+ outline-color: #5188ff;
63
+ }
58
64
  .jfcl-button:disabled {
59
65
  cursor: inherit;
60
66
  }
@@ -183,12 +189,13 @@
183
189
  padding-left: calc(12px + 0.75rem);
184
190
  position: relative;
185
191
  width: fit-content;
192
+ min-width: 10rem;
186
193
  border-radius: 0.25rem;
187
194
  overflow: hidden;
188
195
  font-family: "Degular", Arial, Helvetica, sans-serif;
189
196
  font-style: normal;
190
197
  font-weight: 500;
191
- font-size: 18px;
198
+ font-size: 1.13rem;
192
199
  line-height: 120%;
193
200
  text-align: center;
194
201
  letter-spacing: 0.54px;
@@ -239,7 +246,7 @@
239
246
  }
240
247
  .jf-alert.jfcl-variant-secondary {
241
248
  background-color: #faf8f4;
242
- border: 1px solid #9a9898;
249
+ border: 1px solid #676565;
243
250
  color: #242323;
244
251
  }
245
252
  .jf-alert.jfcl-variant-secondary .jf-alert__btn {
package/dist/src/index.es.js CHANGED
@@ -11,25 +11,31 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
11
11
  variant = 'primary',
12
12
  size = 'large',
13
13
  loading,
14
- labelIcon,
14
+ labelIcon: ButtonIcon,
15
15
  iconOnRight,
16
16
  iconOnly,
17
17
  ...props
18
18
  } = _ref;
19
19
  const buttonClassNames = classNames('jfcl-button', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), "".concat(loading ? 'jfcl-is-loading' : ''), "".concat(iconOnly ? 'jfcl-btn-icon-only' : ''));
20
20
  const iconClassNames = classNames('jfcl-button__icon', "".concat(iconOnRight ? 'jfcl-button__icon_right' : ''));
21
+ const arias = {};
22
+ if (iconOnly) {
23
+ arias['aria-label'] = labelText;
24
+ }
21
25
  return /*#__PURE__*/React.createElement("button", _extends({
22
26
  ref: ref,
23
27
  type: "button",
24
28
  className: buttonClassNames,
25
29
  "data-testid": "jfcl-button"
26
- }, props), /*#__PURE__*/React.createElement("div", {
30
+ }, arias, props), /*#__PURE__*/React.createElement("div", {
27
31
  className: "jfcl-button__label"
28
32
  }, loading && /*#__PURE__*/React.createElement("span", {
29
33
  className: iconClassNames
30
- }), !loading && labelIcon ? /*#__PURE__*/React.createElement("span", {
34
+ }), !loading && ButtonIcon ? /*#__PURE__*/React.createElement("span", {
31
35
  className: iconClassNames
32
- }, labelIcon) : null, !iconOnly && /*#__PURE__*/React.createElement("span", {
36
+ }, /*#__PURE__*/React.createElement(ButtonIcon, {
37
+ "aria-hidden": "true"
38
+ })) : null, !iconOnly && /*#__PURE__*/React.createElement("span", {
33
39
  className: "jfcl-button__text"
34
40
  }, labelText)));
35
41
  });
package/dist/src/index.js CHANGED
@@ -21,25 +21,31 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
21
21
  variant = 'primary',
22
22
  size = 'large',
23
23
  loading,
24
- labelIcon,
24
+ labelIcon: ButtonIcon,
25
25
  iconOnRight,
26
26
  iconOnly,
27
27
  ...props
28
28
  } = _ref;
29
29
  const buttonClassNames = classNames__default["default"]('jfcl-button', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), "".concat(loading ? 'jfcl-is-loading' : ''), "".concat(iconOnly ? 'jfcl-btn-icon-only' : ''));
30
30
  const iconClassNames = classNames__default["default"]('jfcl-button__icon', "".concat(iconOnRight ? 'jfcl-button__icon_right' : ''));
31
+ const arias = {};
32
+ if (iconOnly) {
33
+ arias['aria-label'] = labelText;
34
+ }
31
35
  return /*#__PURE__*/React__default["default"].createElement("button", _extends__default["default"]({
32
36
  ref: ref,
33
37
  type: "button",
34
38
  className: buttonClassNames,
35
39
  "data-testid": "jfcl-button"
36
- }, props), /*#__PURE__*/React__default["default"].createElement("div", {
40
+ }, arias, props), /*#__PURE__*/React__default["default"].createElement("div", {
37
41
  className: "jfcl-button__label"
38
42
  }, loading && /*#__PURE__*/React__default["default"].createElement("span", {
39
43
  className: iconClassNames
40
- }), !loading && labelIcon ? /*#__PURE__*/React__default["default"].createElement("span", {
44
+ }), !loading && ButtonIcon ? /*#__PURE__*/React__default["default"].createElement("span", {
41
45
  className: iconClassNames
42
- }, labelIcon) : null, !iconOnly && /*#__PURE__*/React__default["default"].createElement("span", {
46
+ }, /*#__PURE__*/React__default["default"].createElement(ButtonIcon, {
47
+ "aria-hidden": "true"
48
+ })) : null, !iconOnly && /*#__PURE__*/React__default["default"].createElement("span", {
43
49
  className: "jfcl-button__text"
44
50
  }, labelText)));
45
51
  });
package/dist/typings/buttons/Button.d.ts CHANGED
@@ -1,11 +1,11 @@
1
- import React, { ReactNode } from 'react';
1
+ import React from 'react';
2
2
  import './styles.scss';
3
3
  export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
4
4
  labelText: string;
5
+ labelIcon?: React.ElementType;
5
6
  variant?: 'primary' | 'secondary' | 'text';
6
7
  size?: 'small' | 'large';
7
8
  loading?: boolean;
8
- labelIcon?: ReactNode;
9
9
  iconOnRight?: boolean;
10
10
  iconOnly?: boolean;
11
11
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@justfixnyc/component-library",
3
3
  "description": "JustFix Component Library",
4
4
  "license": "MIT",
5
- "version": "0.29.1",
5
+ "version": "0.29.2",
6
6
  "main": "dist/src/index.js",
7
7
  "module": "dist/src/index.es.js",
8
8
  "files": [