@justfixnyc/component-library 0.29.0 → 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 +87 -31
  2. package/dist/src/assets/index.es.css +87 -31
  3. package/dist/src/index.es.js +30 -23
  4. package/dist/src/index.js +30 -23
  5. package/dist/typings/buttons/Button.d.ts +3 -2
  6. package/package.json +3 -6
package/dist/src/assets/index.css CHANGED
@@ -22,14 +22,22 @@
22
22
  font-style: normal;
23
23
  src: url("./Degular_Display-Medium-ca624b2b.woff2") format("woff2"), url("./Degular_Display-Medium-669217c9.woff") format("woff");
24
24
  }
25
+ @keyframes spin {
26
+ from {
27
+ transform: rotate(0deg);
28
+ }
29
+ to {
30
+ transform: rotate(360deg);
31
+ }
32
+ }
25
33
  .jfcl-button {
26
- font-family: "Suisse Int'l Mono";
27
- font-size: 14px;
34
+ font-family: "Degular", Arial, Helvetica, sans-serif;
28
35
  font-style: normal;
29
- font-weight: 400;
30
- line-height: 115%; /* 16.1px */
31
- letter-spacing: 0.42px;
32
- text-transform: uppercase;
36
+ font-weight: 500;
37
+ font-size: 1.13rem;
38
+ line-height: 120%;
39
+ text-align: center;
40
+ letter-spacing: 0.54px;
33
41
  cursor: pointer;
34
42
  user-select: none;
35
43
  height: fit-content;
@@ -44,19 +52,17 @@
44
52
  padding: 22px 32px;
45
53
  border: 1px solid;
46
54
  border-radius: 100px;
47
- box-shadow: 4px 4px 0px #d4d5d0;
48
55
  transition: all 0.1s linear;
49
56
  transform: translateX(0rem);
50
57
  }
51
- .jfcl-button:hover {
52
- box-shadow: 0px 4px 0px #d4d5d0;
53
- }
54
- .jfcl-button:active {
55
- box-shadow: 0px -4px 0px 0px #d4d5d0;
58
+ .jfcl-button:focus-visible {
59
+ outline-style: solid;
60
+ outline-offset: 2px;
61
+ outline-width: 2px;
62
+ outline-color: #5188ff;
56
63
  }
57
64
  .jfcl-button:disabled {
58
65
  cursor: inherit;
59
- box-shadow: none;
60
66
  }
61
67
  .jfcl-button:disabled.is-primary {
62
68
  background-color: GREY_400;
@@ -65,30 +71,44 @@
65
71
  .jfcl-button:disabled.is-secondary {
66
72
  background-color: #f2f2f2;
67
73
  }
68
- .jfcl-button:focus {
69
- box-shadow: none;
70
- border: 1px solid #efe9dc;
74
+ .jfcl-button:hover {
75
+ box-shadow: 4px 5px 0px 0px #c5ccd1;
76
+ }
77
+ .jfcl-button:active {
78
+ box-shadow: 0px -4px 0px 0px #c5ccd1;
71
79
  }
72
80
  .jfcl-button .jfcl-button__label {
73
81
  display: flex;
74
82
  }
75
83
  .jfcl-button .jfcl-button__icon {
76
84
  margin-right: 10px;
77
- width: 16px;
78
- height: 16px;
85
+ width: 1em;
86
+ height: 1em;
79
87
  }
80
88
  .jfcl-button .jfcl-button__icon.jfcl-button__icon_right {
81
89
  margin-right: 0;
82
90
  margin-left: 10px;
83
91
  order: 2;
84
92
  }
93
+ .jfcl-button.jfcl-btn-icon-only {
94
+ width: 4.125rem;
95
+ height: 4.125rem;
96
+ }
97
+ .jfcl-button.jfcl-btn-icon-only .jfcl-button__icon {
98
+ margin-right: 0;
99
+ }
85
100
  .jfcl-button.jfcl-size-small {
86
101
  padding: 12px 32px;
87
102
  }
103
+ .jfcl-button.jfcl-size-small.jfcl-btn-icon-only {
104
+ padding: 0;
105
+ width: 2.875rem;
106
+ height: 2.875rem;
107
+ }
88
108
  .jfcl-button.jfcl-variant-primary {
89
109
  color: #faf8f4;
90
110
  background-color: #242323;
91
- border-color: #faf8f4;
111
+ border-color: transparent;
92
112
  }
93
113
  .jfcl-button.jfcl-variant-primary:disabled {
94
114
  color: #242323;
@@ -97,6 +117,15 @@
97
117
  .jfcl-button.jfcl-variant-primary.jfcl-is-loading {
98
118
  background-color: #676565;
99
119
  }
120
+ .jfcl-button.jfcl-variant-primary.jfcl-is-loading .jfcl-button__icon {
121
+ display: block;
122
+ animation: spin 500ms infinite linear;
123
+ position: relative;
124
+ border: 2px solid #ffffff;
125
+ border-radius: 1em;
126
+ border-right-color: transparent;
127
+ border-top-color: transparent;
128
+ }
100
129
  .jfcl-button.jfcl-variant-secondary {
101
130
  color: #242323;
102
131
  background-color: #faf8f4;
@@ -105,21 +134,21 @@
105
134
  .jfcl-button.jfcl-variant-secondary:disabled {
106
135
  background-color: #f2f2f2;
107
136
  }
137
+ .jfcl-button.jfcl-variant-secondary.jfcl-is-loading .jfcl-button__icon {
138
+ display: block;
139
+ animation: spin 500ms infinite linear;
140
+ position: relative;
141
+ border: 2px solid #242323;
142
+ border-radius: 1em;
143
+ border-right-color: transparent;
144
+ border-top-color: transparent;
145
+ }
108
146
  .jfcl-button.jfcl-variant-text {
109
- font-family: "Degular", Arial, Helvetica, sans-serif;
110
- font-style: normal;
111
- font-weight: 500;
112
- font-size: 18px;
113
- line-height: 120%;
114
- text-align: center;
115
147
  color: #242323;
116
148
  background: none;
117
149
  border: none;
118
150
  box-shadow: none;
119
151
  }
120
- .jfcl-button.jfcl-variant-text .jfcl-button__text {
121
- border-bottom: 1px solid;
122
- }
123
152
  .jfcl-button.jfcl-variant-text:disabled {
124
153
  cursor: inherit;
125
154
  color: #676565;
@@ -127,6 +156,32 @@
127
156
  .jfcl-button.jfcl-variant-text:disabled .jfcl-button__text {
128
157
  border-bottom: none;
129
158
  }
159
+ .jfcl-button.jfcl-variant-text:hover {
160
+ background-color: #efe9dc;
161
+ }
162
+ .jfcl-button.jfcl-variant-text.jfcl-is-loading {
163
+ background-color: #efe9dc;
164
+ }
165
+ .jfcl-button.jfcl-variant-text.jfcl-is-loading .jfcl-button__icon {
166
+ display: block;
167
+ animation: spin 500ms infinite linear;
168
+ position: relative;
169
+ border: 2px solid #242323;
170
+ border-radius: 1em;
171
+ border-right-color: transparent;
172
+ border-top-color: transparent;
173
+ }
174
+ .jfcl-button.jfcl-variant-text:active {
175
+ background-color: rgba(239, 233, 220, 0.8);
176
+ }
177
+ @keyframes spin {
178
+ from {
179
+ transform: rotate(0deg);
180
+ }
181
+ to {
182
+ transform: rotate(360deg);
183
+ }
184
+ }
130
185
  .jf-alert {
131
186
  display: flex;
132
187
  align-items: center;
@@ -134,14 +189,16 @@
134
189
  padding-left: calc(12px + 0.75rem);
135
190
  position: relative;
136
191
  width: fit-content;
192
+ min-width: 10rem;
137
193
  border-radius: 0.25rem;
138
194
  overflow: hidden;
139
195
  font-family: "Degular", Arial, Helvetica, sans-serif;
140
196
  font-style: normal;
141
197
  font-weight: 500;
142
- font-size: 18px;
198
+ font-size: 1.13rem;
143
199
  line-height: 120%;
144
200
  text-align: center;
201
+ letter-spacing: 0.54px;
145
202
  }
146
203
  .jf-alert .jf-alert__content {
147
204
  display: flex;
@@ -186,11 +243,10 @@
186
243
  }
187
244
  .jf-alert.jfcl-variant-primary .jf-alert__btn {
188
245
  color: #faf8f4;
189
- border-color: #faf8f4;
190
246
  }
191
247
  .jf-alert.jfcl-variant-secondary {
192
248
  background-color: #faf8f4;
193
- border: 1px solid #9a9898;
249
+ border: 1px solid #676565;
194
250
  color: #242323;
195
251
  }
196
252
  .jf-alert.jfcl-variant-secondary .jf-alert__btn {
package/dist/src/assets/index.es.css CHANGED
@@ -22,14 +22,22 @@
22
22
  font-style: normal;
23
23
  src: url("./Degular_Display-Medium-ca624b2b.woff2") format("woff2"), url("./Degular_Display-Medium-669217c9.woff") format("woff");
24
24
  }
25
+ @keyframes spin {
26
+ from {
27
+ transform: rotate(0deg);
28
+ }
29
+ to {
30
+ transform: rotate(360deg);
31
+ }
32
+ }
25
33
  .jfcl-button {
26
- font-family: "Suisse Int'l Mono";
27
- font-size: 14px;
34
+ font-family: "Degular", Arial, Helvetica, sans-serif;
28
35
  font-style: normal;
29
- font-weight: 400;
30
- line-height: 115%; /* 16.1px */
31
- letter-spacing: 0.42px;
32
- text-transform: uppercase;
36
+ font-weight: 500;
37
+ font-size: 1.13rem;
38
+ line-height: 120%;
39
+ text-align: center;
40
+ letter-spacing: 0.54px;
33
41
  cursor: pointer;
34
42
  user-select: none;
35
43
  height: fit-content;
@@ -44,19 +52,17 @@
44
52
  padding: 22px 32px;
45
53
  border: 1px solid;
46
54
  border-radius: 100px;
47
- box-shadow: 4px 4px 0px #d4d5d0;
48
55
  transition: all 0.1s linear;
49
56
  transform: translateX(0rem);
50
57
  }
51
- .jfcl-button:hover {
52
- box-shadow: 0px 4px 0px #d4d5d0;
53
- }
54
- .jfcl-button:active {
55
- box-shadow: 0px -4px 0px 0px #d4d5d0;
58
+ .jfcl-button:focus-visible {
59
+ outline-style: solid;
60
+ outline-offset: 2px;
61
+ outline-width: 2px;
62
+ outline-color: #5188ff;
56
63
  }
57
64
  .jfcl-button:disabled {
58
65
  cursor: inherit;
59
- box-shadow: none;
60
66
  }
61
67
  .jfcl-button:disabled.is-primary {
62
68
  background-color: GREY_400;
@@ -65,30 +71,44 @@
65
71
  .jfcl-button:disabled.is-secondary {
66
72
  background-color: #f2f2f2;
67
73
  }
68
- .jfcl-button:focus {
69
- box-shadow: none;
70
- border: 1px solid #efe9dc;
74
+ .jfcl-button:hover {
75
+ box-shadow: 4px 5px 0px 0px #c5ccd1;
76
+ }
77
+ .jfcl-button:active {
78
+ box-shadow: 0px -4px 0px 0px #c5ccd1;
71
79
  }
72
80
  .jfcl-button .jfcl-button__label {
73
81
  display: flex;
74
82
  }
75
83
  .jfcl-button .jfcl-button__icon {
76
84
  margin-right: 10px;
77
- width: 16px;
78
- height: 16px;
85
+ width: 1em;
86
+ height: 1em;
79
87
  }
80
88
  .jfcl-button .jfcl-button__icon.jfcl-button__icon_right {
81
89
  margin-right: 0;
82
90
  margin-left: 10px;
83
91
  order: 2;
84
92
  }
93
+ .jfcl-button.jfcl-btn-icon-only {
94
+ width: 4.125rem;
95
+ height: 4.125rem;
96
+ }
97
+ .jfcl-button.jfcl-btn-icon-only .jfcl-button__icon {
98
+ margin-right: 0;
99
+ }
85
100
  .jfcl-button.jfcl-size-small {
86
101
  padding: 12px 32px;
87
102
  }
103
+ .jfcl-button.jfcl-size-small.jfcl-btn-icon-only {
104
+ padding: 0;
105
+ width: 2.875rem;
106
+ height: 2.875rem;
107
+ }
88
108
  .jfcl-button.jfcl-variant-primary {
89
109
  color: #faf8f4;
90
110
  background-color: #242323;
91
- border-color: #faf8f4;
111
+ border-color: transparent;
92
112
  }
93
113
  .jfcl-button.jfcl-variant-primary:disabled {
94
114
  color: #242323;
@@ -97,6 +117,15 @@
97
117
  .jfcl-button.jfcl-variant-primary.jfcl-is-loading {
98
118
  background-color: #676565;
99
119
  }
120
+ .jfcl-button.jfcl-variant-primary.jfcl-is-loading .jfcl-button__icon {
121
+ display: block;
122
+ animation: spin 500ms infinite linear;
123
+ position: relative;
124
+ border: 2px solid #ffffff;
125
+ border-radius: 1em;
126
+ border-right-color: transparent;
127
+ border-top-color: transparent;
128
+ }
100
129
  .jfcl-button.jfcl-variant-secondary {
101
130
  color: #242323;
102
131
  background-color: #faf8f4;
@@ -105,21 +134,21 @@
105
134
  .jfcl-button.jfcl-variant-secondary:disabled {
106
135
  background-color: #f2f2f2;
107
136
  }
137
+ .jfcl-button.jfcl-variant-secondary.jfcl-is-loading .jfcl-button__icon {
138
+ display: block;
139
+ animation: spin 500ms infinite linear;
140
+ position: relative;
141
+ border: 2px solid #242323;
142
+ border-radius: 1em;
143
+ border-right-color: transparent;
144
+ border-top-color: transparent;
145
+ }
108
146
  .jfcl-button.jfcl-variant-text {
109
- font-family: "Degular", Arial, Helvetica, sans-serif;
110
- font-style: normal;
111
- font-weight: 500;
112
- font-size: 18px;
113
- line-height: 120%;
114
- text-align: center;
115
147
  color: #242323;
116
148
  background: none;
117
149
  border: none;
118
150
  box-shadow: none;
119
151
  }
120
- .jfcl-button.jfcl-variant-text .jfcl-button__text {
121
- border-bottom: 1px solid;
122
- }
123
152
  .jfcl-button.jfcl-variant-text:disabled {
124
153
  cursor: inherit;
125
154
  color: #676565;
@@ -127,6 +156,32 @@
127
156
  .jfcl-button.jfcl-variant-text:disabled .jfcl-button__text {
128
157
  border-bottom: none;
129
158
  }
159
+ .jfcl-button.jfcl-variant-text:hover {
160
+ background-color: #efe9dc;
161
+ }
162
+ .jfcl-button.jfcl-variant-text.jfcl-is-loading {
163
+ background-color: #efe9dc;
164
+ }
165
+ .jfcl-button.jfcl-variant-text.jfcl-is-loading .jfcl-button__icon {
166
+ display: block;
167
+ animation: spin 500ms infinite linear;
168
+ position: relative;
169
+ border: 2px solid #242323;
170
+ border-radius: 1em;
171
+ border-right-color: transparent;
172
+ border-top-color: transparent;
173
+ }
174
+ .jfcl-button.jfcl-variant-text:active {
175
+ background-color: rgba(239, 233, 220, 0.8);
176
+ }
177
+ @keyframes spin {
178
+ from {
179
+ transform: rotate(0deg);
180
+ }
181
+ to {
182
+ transform: rotate(360deg);
183
+ }
184
+ }
130
185
  .jf-alert {
131
186
  display: flex;
132
187
  align-items: center;
@@ -134,14 +189,16 @@
134
189
  padding-left: calc(12px + 0.75rem);
135
190
  position: relative;
136
191
  width: fit-content;
192
+ min-width: 10rem;
137
193
  border-radius: 0.25rem;
138
194
  overflow: hidden;
139
195
  font-family: "Degular", Arial, Helvetica, sans-serif;
140
196
  font-style: normal;
141
197
  font-weight: 500;
142
- font-size: 18px;
198
+ font-size: 1.13rem;
143
199
  line-height: 120%;
144
200
  text-align: center;
201
+ letter-spacing: 0.54px;
145
202
  }
146
203
  .jf-alert .jf-alert__content {
147
204
  display: flex;
@@ -186,11 +243,10 @@
186
243
  }
187
244
  .jf-alert.jfcl-variant-primary .jf-alert__btn {
188
245
  color: #faf8f4;
189
- border-color: #faf8f4;
190
246
  }
191
247
  .jf-alert.jfcl-variant-secondary {
192
248
  background-color: #faf8f4;
193
- border: 1px solid #9a9898;
249
+ border: 1px solid #676565;
194
250
  color: #242323;
195
251
  }
196
252
  .jf-alert.jfcl-variant-secondary .jf-alert__btn {
package/dist/src/index.es.js CHANGED
@@ -2,23 +2,6 @@ import _extends from '@babel/runtime/helpers/extends';
2
2
  import React, { forwardRef } from 'react';
3
3
  import classNames from 'classnames';
4
4
 
5
- const IconLoading = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
6
- ref: ref
7
- }, props, {
8
- width: "16",
9
- height: "16",
10
- viewBox: "0 0 16 16",
11
- fill: "none",
12
- xmlns: "http://www.w3.org/2000/svg"
13
- }), /*#__PURE__*/React.createElement("path", {
14
- fill: "currentcolor",
15
- fillRule: "evenodd",
16
- clipRule: "evenodd",
17
- d: "M8.04665 0.42435V1.72792C8.04665 2.29372 7.19133 2.29372 7.19133 1.72792V0.42435C7.19133 -0.14145 8.04665 -0.14145 8.04665 0.42435ZM9.26952 1.94354L9.71551 0.718589C9.90902 0.186994 10.7127 0.479531 10.5192 1.01113L10.0734 2.23608C9.87992 2.76768 9.0762 2.47514 9.26952 1.94354ZM11.1489 2.85706L11.9868 1.8585C12.3504 1.42499 13.0056 1.97491 12.642 2.40824L11.8041 3.4068C11.4405 3.84031 10.7851 3.29039 11.1489 2.85706ZM12.6023 4.35811L13.7313 3.70633C14.2213 3.42343 14.649 4.16422 14.1589 4.44712L13.03 5.09891C12.54 5.38181 12.1123 4.64101 12.6023 4.35811ZM13.4548 6.26585L14.7385 6.03945C15.2956 5.94118 15.4442 6.78365 14.8871 6.88191L13.6034 7.10812C13.0461 7.20639 12.8975 6.36412 13.4548 6.26585ZM13.6034 8.35008L14.8871 8.57629C15.4442 8.67456 15.2956 9.51702 14.7385 9.41875L13.4548 9.19236C12.8975 9.09409 13.0461 8.25182 13.6034 8.35008ZM13.03 10.3593L14.1589 11.0111C14.649 11.294 14.2213 12.0348 13.7313 11.7519L12.6023 11.1001C12.1123 10.8172 12.54 10.0764 13.03 10.3593ZM11.8041 12.0514L12.642 13.05C13.0056 13.4833 12.3504 14.0332 11.9868 13.5997L11.1489 12.6011C10.7851 12.1678 11.4405 11.6179 11.8041 12.0514ZM10.0734 13.2221L10.5192 14.4471C10.7127 14.9787 9.90902 15.2712 9.71551 14.7396L9.26952 13.5147C9.0762 12.9831 9.87992 12.6905 10.0734 13.2221ZM8.04665 13.7303V15.0339C8.04665 15.5997 7.19133 15.5997 7.19133 15.0339V13.7303C7.19133 13.1645 8.04665 13.1645 8.04665 13.7303ZM4.71875 14.4471L5.16455 13.2221C5.35806 12.6905 6.16178 12.9831 5.96846 13.5147L5.52247 14.7396C5.32896 15.2712 4.52523 14.9787 4.71875 14.4471ZM0.350902 8.57629L1.63463 8.35008C2.19192 8.25182 2.34046 9.09409 1.78316 9.19236L0.499438 9.41875C-0.0576685 9.51702 -0.206205 8.67456 0.350902 8.57629ZM0.499438 6.03945L1.78316 6.26585C2.34046 6.36412 2.19192 7.20639 1.63463 7.10812L0.350902 6.88191C-0.206205 6.78365 -0.0576685 5.94118 0.499438 6.03945ZM1.50669 3.70633L2.63564 4.35811C3.12566 4.64101 2.69801 5.38181 2.20799 5.09891L1.07903 4.44712C0.589014 4.16422 1.01667 3.42343 1.50669 3.70633ZM3.25114 1.8585L4.08907 2.85706C4.45285 3.29039 3.79748 3.84031 3.43389 3.4068L2.59596 2.40824C2.23236 1.97491 2.88755 1.42499 3.25114 1.8585ZM5.52247 0.718589L5.96846 1.94354C6.16178 2.47514 5.35806 2.76768 5.16455 2.23608L4.71875 1.01113C4.52523 0.479531 5.32896 0.186994 5.52247 0.718589Z"
18
- })));
19
- IconLoading.displayName = 'IconLoading';
20
- var IconLoading$1 = IconLoading;
21
-
22
5
  /**
23
6
  * Accepts all `ButtonHTMLAttributes`
24
7
  */
@@ -28,29 +11,53 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
28
11
  variant = 'primary',
29
12
  size = 'large',
30
13
  loading,
31
- labelIcon,
14
+ labelIcon: ButtonIcon,
32
15
  iconOnRight,
16
+ iconOnly,
33
17
  ...props
34
18
  } = _ref;
35
- const buttonClassNames = classNames('jfcl-button', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), "".concat(loading ? 'jfcl-is-loading' : ''));
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' : ''));
36
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
+ }
37
25
  return /*#__PURE__*/React.createElement("button", _extends({
38
26
  ref: ref,
39
27
  type: "button",
40
28
  className: buttonClassNames,
41
29
  "data-testid": "jfcl-button"
42
- }, props), /*#__PURE__*/React.createElement("div", {
30
+ }, arias, props), /*#__PURE__*/React.createElement("div", {
43
31
  className: "jfcl-button__label"
44
- }, loading && variant != 'text' ? /*#__PURE__*/React.createElement("span", {
32
+ }, loading && /*#__PURE__*/React.createElement("span", {
45
33
  className: iconClassNames
46
- }, /*#__PURE__*/React.createElement(IconLoading$1, null)) : null, !loading && labelIcon ? /*#__PURE__*/React.createElement("span", {
34
+ }), !loading && ButtonIcon ? /*#__PURE__*/React.createElement("span", {
47
35
  className: iconClassNames
48
- }, labelIcon) : null, /*#__PURE__*/React.createElement("span", {
36
+ }, /*#__PURE__*/React.createElement(ButtonIcon, {
37
+ "aria-hidden": "true"
38
+ })) : null, !iconOnly && /*#__PURE__*/React.createElement("span", {
49
39
  className: "jfcl-button__text"
50
40
  }, labelText)));
51
41
  });
52
42
  Button.displayName = 'Button';
53
43
 
44
+ const IconLoading = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
45
+ ref: ref
46
+ }, props, {
47
+ width: "16",
48
+ height: "16",
49
+ viewBox: "0 0 16 16",
50
+ fill: "none",
51
+ xmlns: "http://www.w3.org/2000/svg"
52
+ }), /*#__PURE__*/React.createElement("path", {
53
+ fill: "currentcolor",
54
+ fillRule: "evenodd",
55
+ clipRule: "evenodd",
56
+ d: "M8.04665 0.42435V1.72792C8.04665 2.29372 7.19133 2.29372 7.19133 1.72792V0.42435C7.19133 -0.14145 8.04665 -0.14145 8.04665 0.42435ZM9.26952 1.94354L9.71551 0.718589C9.90902 0.186994 10.7127 0.479531 10.5192 1.01113L10.0734 2.23608C9.87992 2.76768 9.0762 2.47514 9.26952 1.94354ZM11.1489 2.85706L11.9868 1.8585C12.3504 1.42499 13.0056 1.97491 12.642 2.40824L11.8041 3.4068C11.4405 3.84031 10.7851 3.29039 11.1489 2.85706ZM12.6023 4.35811L13.7313 3.70633C14.2213 3.42343 14.649 4.16422 14.1589 4.44712L13.03 5.09891C12.54 5.38181 12.1123 4.64101 12.6023 4.35811ZM13.4548 6.26585L14.7385 6.03945C15.2956 5.94118 15.4442 6.78365 14.8871 6.88191L13.6034 7.10812C13.0461 7.20639 12.8975 6.36412 13.4548 6.26585ZM13.6034 8.35008L14.8871 8.57629C15.4442 8.67456 15.2956 9.51702 14.7385 9.41875L13.4548 9.19236C12.8975 9.09409 13.0461 8.25182 13.6034 8.35008ZM13.03 10.3593L14.1589 11.0111C14.649 11.294 14.2213 12.0348 13.7313 11.7519L12.6023 11.1001C12.1123 10.8172 12.54 10.0764 13.03 10.3593ZM11.8041 12.0514L12.642 13.05C13.0056 13.4833 12.3504 14.0332 11.9868 13.5997L11.1489 12.6011C10.7851 12.1678 11.4405 11.6179 11.8041 12.0514ZM10.0734 13.2221L10.5192 14.4471C10.7127 14.9787 9.90902 15.2712 9.71551 14.7396L9.26952 13.5147C9.0762 12.9831 9.87992 12.6905 10.0734 13.2221ZM8.04665 13.7303V15.0339C8.04665 15.5997 7.19133 15.5997 7.19133 15.0339V13.7303C7.19133 13.1645 8.04665 13.1645 8.04665 13.7303ZM4.71875 14.4471L5.16455 13.2221C5.35806 12.6905 6.16178 12.9831 5.96846 13.5147L5.52247 14.7396C5.32896 15.2712 4.52523 14.9787 4.71875 14.4471ZM0.350902 8.57629L1.63463 8.35008C2.19192 8.25182 2.34046 9.09409 1.78316 9.19236L0.499438 9.41875C-0.0576685 9.51702 -0.206205 8.67456 0.350902 8.57629ZM0.499438 6.03945L1.78316 6.26585C2.34046 6.36412 2.19192 7.20639 1.63463 7.10812L0.350902 6.88191C-0.206205 6.78365 -0.0576685 5.94118 0.499438 6.03945ZM1.50669 3.70633L2.63564 4.35811C3.12566 4.64101 2.69801 5.38181 2.20799 5.09891L1.07903 4.44712C0.589014 4.16422 1.01667 3.42343 1.50669 3.70633ZM3.25114 1.8585L4.08907 2.85706C4.45285 3.29039 3.79748 3.84031 3.43389 3.4068L2.59596 2.40824C2.23236 1.97491 2.88755 1.42499 3.25114 1.8585ZM5.52247 0.718589L5.96846 1.94354C6.16178 2.47514 5.35806 2.76768 5.16455 2.23608L4.71875 1.01113C4.52523 0.479531 5.32896 0.186994 5.52247 0.718589Z"
57
+ })));
58
+ IconLoading.displayName = 'IconLoading';
59
+ var IconLoading$1 = IconLoading;
60
+
54
61
  const IconHamburger$2 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
55
62
  ref: ref
56
63
  }, props, {
package/dist/src/index.js CHANGED
@@ -12,23 +12,6 @@ var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
12
12
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
13
13
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
14
14
 
15
- const IconLoading = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
16
- ref: ref
17
- }, props, {
18
- width: "16",
19
- height: "16",
20
- viewBox: "0 0 16 16",
21
- fill: "none",
22
- xmlns: "http://www.w3.org/2000/svg"
23
- }), /*#__PURE__*/React__default["default"].createElement("path", {
24
- fill: "currentcolor",
25
- fillRule: "evenodd",
26
- clipRule: "evenodd",
27
- d: "M8.04665 0.42435V1.72792C8.04665 2.29372 7.19133 2.29372 7.19133 1.72792V0.42435C7.19133 -0.14145 8.04665 -0.14145 8.04665 0.42435ZM9.26952 1.94354L9.71551 0.718589C9.90902 0.186994 10.7127 0.479531 10.5192 1.01113L10.0734 2.23608C9.87992 2.76768 9.0762 2.47514 9.26952 1.94354ZM11.1489 2.85706L11.9868 1.8585C12.3504 1.42499 13.0056 1.97491 12.642 2.40824L11.8041 3.4068C11.4405 3.84031 10.7851 3.29039 11.1489 2.85706ZM12.6023 4.35811L13.7313 3.70633C14.2213 3.42343 14.649 4.16422 14.1589 4.44712L13.03 5.09891C12.54 5.38181 12.1123 4.64101 12.6023 4.35811ZM13.4548 6.26585L14.7385 6.03945C15.2956 5.94118 15.4442 6.78365 14.8871 6.88191L13.6034 7.10812C13.0461 7.20639 12.8975 6.36412 13.4548 6.26585ZM13.6034 8.35008L14.8871 8.57629C15.4442 8.67456 15.2956 9.51702 14.7385 9.41875L13.4548 9.19236C12.8975 9.09409 13.0461 8.25182 13.6034 8.35008ZM13.03 10.3593L14.1589 11.0111C14.649 11.294 14.2213 12.0348 13.7313 11.7519L12.6023 11.1001C12.1123 10.8172 12.54 10.0764 13.03 10.3593ZM11.8041 12.0514L12.642 13.05C13.0056 13.4833 12.3504 14.0332 11.9868 13.5997L11.1489 12.6011C10.7851 12.1678 11.4405 11.6179 11.8041 12.0514ZM10.0734 13.2221L10.5192 14.4471C10.7127 14.9787 9.90902 15.2712 9.71551 14.7396L9.26952 13.5147C9.0762 12.9831 9.87992 12.6905 10.0734 13.2221ZM8.04665 13.7303V15.0339C8.04665 15.5997 7.19133 15.5997 7.19133 15.0339V13.7303C7.19133 13.1645 8.04665 13.1645 8.04665 13.7303ZM4.71875 14.4471L5.16455 13.2221C5.35806 12.6905 6.16178 12.9831 5.96846 13.5147L5.52247 14.7396C5.32896 15.2712 4.52523 14.9787 4.71875 14.4471ZM0.350902 8.57629L1.63463 8.35008C2.19192 8.25182 2.34046 9.09409 1.78316 9.19236L0.499438 9.41875C-0.0576685 9.51702 -0.206205 8.67456 0.350902 8.57629ZM0.499438 6.03945L1.78316 6.26585C2.34046 6.36412 2.19192 7.20639 1.63463 7.10812L0.350902 6.88191C-0.206205 6.78365 -0.0576685 5.94118 0.499438 6.03945ZM1.50669 3.70633L2.63564 4.35811C3.12566 4.64101 2.69801 5.38181 2.20799 5.09891L1.07903 4.44712C0.589014 4.16422 1.01667 3.42343 1.50669 3.70633ZM3.25114 1.8585L4.08907 2.85706C4.45285 3.29039 3.79748 3.84031 3.43389 3.4068L2.59596 2.40824C2.23236 1.97491 2.88755 1.42499 3.25114 1.8585ZM5.52247 0.718589L5.96846 1.94354C6.16178 2.47514 5.35806 2.76768 5.16455 2.23608L4.71875 1.01113C4.52523 0.479531 5.32896 0.186994 5.52247 0.718589Z"
28
- })));
29
- IconLoading.displayName = 'IconLoading';
30
- var IconLoading$1 = IconLoading;
31
-
32
15
  /**
33
16
  * Accepts all `ButtonHTMLAttributes`
34
17
  */
@@ -38,29 +21,53 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
38
21
  variant = 'primary',
39
22
  size = 'large',
40
23
  loading,
41
- labelIcon,
24
+ labelIcon: ButtonIcon,
42
25
  iconOnRight,
26
+ iconOnly,
43
27
  ...props
44
28
  } = _ref;
45
- const buttonClassNames = classNames__default["default"]('jfcl-button', "jfcl-variant-".concat(variant), "jfcl-size-".concat(size), "".concat(loading ? 'jfcl-is-loading' : ''));
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' : ''));
46
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
+ }
47
35
  return /*#__PURE__*/React__default["default"].createElement("button", _extends__default["default"]({
48
36
  ref: ref,
49
37
  type: "button",
50
38
  className: buttonClassNames,
51
39
  "data-testid": "jfcl-button"
52
- }, props), /*#__PURE__*/React__default["default"].createElement("div", {
40
+ }, arias, props), /*#__PURE__*/React__default["default"].createElement("div", {
53
41
  className: "jfcl-button__label"
54
- }, loading && variant != 'text' ? /*#__PURE__*/React__default["default"].createElement("span", {
42
+ }, loading && /*#__PURE__*/React__default["default"].createElement("span", {
55
43
  className: iconClassNames
56
- }, /*#__PURE__*/React__default["default"].createElement(IconLoading$1, null)) : null, !loading && labelIcon ? /*#__PURE__*/React__default["default"].createElement("span", {
44
+ }), !loading && ButtonIcon ? /*#__PURE__*/React__default["default"].createElement("span", {
57
45
  className: iconClassNames
58
- }, labelIcon) : null, /*#__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", {
59
49
  className: "jfcl-button__text"
60
50
  }, labelText)));
61
51
  });
62
52
  Button.displayName = 'Button';
63
53
 
54
+ const IconLoading = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
55
+ ref: ref
56
+ }, props, {
57
+ width: "16",
58
+ height: "16",
59
+ viewBox: "0 0 16 16",
60
+ fill: "none",
61
+ xmlns: "http://www.w3.org/2000/svg"
62
+ }), /*#__PURE__*/React__default["default"].createElement("path", {
63
+ fill: "currentcolor",
64
+ fillRule: "evenodd",
65
+ clipRule: "evenodd",
66
+ d: "M8.04665 0.42435V1.72792C8.04665 2.29372 7.19133 2.29372 7.19133 1.72792V0.42435C7.19133 -0.14145 8.04665 -0.14145 8.04665 0.42435ZM9.26952 1.94354L9.71551 0.718589C9.90902 0.186994 10.7127 0.479531 10.5192 1.01113L10.0734 2.23608C9.87992 2.76768 9.0762 2.47514 9.26952 1.94354ZM11.1489 2.85706L11.9868 1.8585C12.3504 1.42499 13.0056 1.97491 12.642 2.40824L11.8041 3.4068C11.4405 3.84031 10.7851 3.29039 11.1489 2.85706ZM12.6023 4.35811L13.7313 3.70633C14.2213 3.42343 14.649 4.16422 14.1589 4.44712L13.03 5.09891C12.54 5.38181 12.1123 4.64101 12.6023 4.35811ZM13.4548 6.26585L14.7385 6.03945C15.2956 5.94118 15.4442 6.78365 14.8871 6.88191L13.6034 7.10812C13.0461 7.20639 12.8975 6.36412 13.4548 6.26585ZM13.6034 8.35008L14.8871 8.57629C15.4442 8.67456 15.2956 9.51702 14.7385 9.41875L13.4548 9.19236C12.8975 9.09409 13.0461 8.25182 13.6034 8.35008ZM13.03 10.3593L14.1589 11.0111C14.649 11.294 14.2213 12.0348 13.7313 11.7519L12.6023 11.1001C12.1123 10.8172 12.54 10.0764 13.03 10.3593ZM11.8041 12.0514L12.642 13.05C13.0056 13.4833 12.3504 14.0332 11.9868 13.5997L11.1489 12.6011C10.7851 12.1678 11.4405 11.6179 11.8041 12.0514ZM10.0734 13.2221L10.5192 14.4471C10.7127 14.9787 9.90902 15.2712 9.71551 14.7396L9.26952 13.5147C9.0762 12.9831 9.87992 12.6905 10.0734 13.2221ZM8.04665 13.7303V15.0339C8.04665 15.5997 7.19133 15.5997 7.19133 15.0339V13.7303C7.19133 13.1645 8.04665 13.1645 8.04665 13.7303ZM4.71875 14.4471L5.16455 13.2221C5.35806 12.6905 6.16178 12.9831 5.96846 13.5147L5.52247 14.7396C5.32896 15.2712 4.52523 14.9787 4.71875 14.4471ZM0.350902 8.57629L1.63463 8.35008C2.19192 8.25182 2.34046 9.09409 1.78316 9.19236L0.499438 9.41875C-0.0576685 9.51702 -0.206205 8.67456 0.350902 8.57629ZM0.499438 6.03945L1.78316 6.26585C2.34046 6.36412 2.19192 7.20639 1.63463 7.10812L0.350902 6.88191C-0.206205 6.78365 -0.0576685 5.94118 0.499438 6.03945ZM1.50669 3.70633L2.63564 4.35811C3.12566 4.64101 2.69801 5.38181 2.20799 5.09891L1.07903 4.44712C0.589014 4.16422 1.01667 3.42343 1.50669 3.70633ZM3.25114 1.8585L4.08907 2.85706C4.45285 3.29039 3.79748 3.84031 3.43389 3.4068L2.59596 2.40824C2.23236 1.97491 2.88755 1.42499 3.25114 1.8585ZM5.52247 0.718589L5.96846 1.94354C6.16178 2.47514 5.35806 2.76768 5.16455 2.23608L4.71875 1.01113C4.52523 0.479531 5.32896 0.186994 5.52247 0.718589Z"
67
+ })));
68
+ IconLoading.displayName = 'IconLoading';
69
+ var IconLoading$1 = IconLoading;
70
+
64
71
  const IconHamburger$2 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
65
72
  ref: ref
66
73
  }, props, {
package/dist/typings/buttons/Button.d.ts CHANGED
@@ -1,12 +1,13 @@
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
+ iconOnly?: boolean;
10
11
  }
11
12
  /**
12
13
  * Accepts all `ButtonHTMLAttributes`
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.0",
5
+ "version": "0.29.2",
6
6
  "main": "dist/src/index.js",
7
7
  "module": "dist/src/index.es.js",
8
8
  "files": [
@@ -28,11 +28,7 @@
28
28
  "jackspeak": "2.1.1"
29
29
  },
30
30
  "dependencies": {
31
- "@babel/runtime": "^7.12.5",
32
- "classnames": "^2.3.2",
33
- "nanoid": "^3.1.20",
34
- "polished": "^4.1.0",
35
- "prop-types": "^15.8.1"
31
+ "@babel/runtime": "^7.12.5"
36
32
  },
37
33
  "peerDependencies": {
38
34
  "@lingui/cli": ">=2.9.1",
@@ -81,6 +77,7 @@
81
77
  "babel-loader": "^8.2.2",
82
78
  "babel-plugin-inline-react-svg": "^2.0.1",
83
79
  "bootstrap": "^4.6.0",
80
+ "classnames": "^2.3.2",
84
81
  "css-loader": "^6.10.0",
85
82
  "eslint": "^7.32.0",
86
83
  "eslint-config-prettier": "^7.2.0",