@justfixnyc/component-library 0.28.0 → 0.29.1

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 +79 -30
  2. package/dist/src/assets/index.es.css +79 -30
  3. package/dist/src/index.es.js +22 -21
  4. package/dist/src/index.js +22 -21
  5. package/dist/typings/buttons/Button.d.ts +1 -0
  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: 18px;
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,11 @@
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;
56
- }
57
58
  .jfcl-button:disabled {
58
59
  cursor: inherit;
59
- box-shadow: none;
60
60
  }
61
61
  .jfcl-button:disabled.is-primary {
62
62
  background-color: GREY_400;
@@ -65,30 +65,44 @@
65
65
  .jfcl-button:disabled.is-secondary {
66
66
  background-color: #f2f2f2;
67
67
  }
68
- .jfcl-button:focus {
69
- box-shadow: none;
70
- border: 1px solid #efe9dc;
68
+ .jfcl-button:hover {
69
+ box-shadow: 4px 5px 0px 0px #c5ccd1;
70
+ }
71
+ .jfcl-button:active {
72
+ box-shadow: 0px -4px 0px 0px #c5ccd1;
71
73
  }
72
74
  .jfcl-button .jfcl-button__label {
73
75
  display: flex;
74
76
  }
75
77
  .jfcl-button .jfcl-button__icon {
76
78
  margin-right: 10px;
77
- width: 16px;
78
- height: 16px;
79
+ width: 1em;
80
+ height: 1em;
79
81
  }
80
82
  .jfcl-button .jfcl-button__icon.jfcl-button__icon_right {
81
83
  margin-right: 0;
82
84
  margin-left: 10px;
83
85
  order: 2;
84
86
  }
87
+ .jfcl-button.jfcl-btn-icon-only {
88
+ width: 4.125rem;
89
+ height: 4.125rem;
90
+ }
91
+ .jfcl-button.jfcl-btn-icon-only .jfcl-button__icon {
92
+ margin-right: 0;
93
+ }
85
94
  .jfcl-button.jfcl-size-small {
86
95
  padding: 12px 32px;
87
96
  }
97
+ .jfcl-button.jfcl-size-small.jfcl-btn-icon-only {
98
+ padding: 0;
99
+ width: 2.875rem;
100
+ height: 2.875rem;
101
+ }
88
102
  .jfcl-button.jfcl-variant-primary {
89
103
  color: #faf8f4;
90
104
  background-color: #242323;
91
- border-color: #faf8f4;
105
+ border-color: transparent;
92
106
  }
93
107
  .jfcl-button.jfcl-variant-primary:disabled {
94
108
  color: #242323;
@@ -97,6 +111,15 @@
97
111
  .jfcl-button.jfcl-variant-primary.jfcl-is-loading {
98
112
  background-color: #676565;
99
113
  }
114
+ .jfcl-button.jfcl-variant-primary.jfcl-is-loading .jfcl-button__icon {
115
+ display: block;
116
+ animation: spin 500ms infinite linear;
117
+ position: relative;
118
+ border: 2px solid #ffffff;
119
+ border-radius: 1em;
120
+ border-right-color: transparent;
121
+ border-top-color: transparent;
122
+ }
100
123
  .jfcl-button.jfcl-variant-secondary {
101
124
  color: #242323;
102
125
  background-color: #faf8f4;
@@ -105,21 +128,21 @@
105
128
  .jfcl-button.jfcl-variant-secondary:disabled {
106
129
  background-color: #f2f2f2;
107
130
  }
131
+ .jfcl-button.jfcl-variant-secondary.jfcl-is-loading .jfcl-button__icon {
132
+ display: block;
133
+ animation: spin 500ms infinite linear;
134
+ position: relative;
135
+ border: 2px solid #242323;
136
+ border-radius: 1em;
137
+ border-right-color: transparent;
138
+ border-top-color: transparent;
139
+ }
108
140
  .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
141
  color: #242323;
116
142
  background: none;
117
143
  border: none;
118
144
  box-shadow: none;
119
145
  }
120
- .jfcl-button.jfcl-variant-text .jfcl-button__text {
121
- border-bottom: 1px solid;
122
- }
123
146
  .jfcl-button.jfcl-variant-text:disabled {
124
147
  cursor: inherit;
125
148
  color: #676565;
@@ -127,6 +150,32 @@
127
150
  .jfcl-button.jfcl-variant-text:disabled .jfcl-button__text {
128
151
  border-bottom: none;
129
152
  }
153
+ .jfcl-button.jfcl-variant-text:hover {
154
+ background-color: #efe9dc;
155
+ }
156
+ .jfcl-button.jfcl-variant-text.jfcl-is-loading {
157
+ background-color: #efe9dc;
158
+ }
159
+ .jfcl-button.jfcl-variant-text.jfcl-is-loading .jfcl-button__icon {
160
+ display: block;
161
+ animation: spin 500ms infinite linear;
162
+ position: relative;
163
+ border: 2px solid #242323;
164
+ border-radius: 1em;
165
+ border-right-color: transparent;
166
+ border-top-color: transparent;
167
+ }
168
+ .jfcl-button.jfcl-variant-text:active {
169
+ background-color: rgba(239, 233, 220, 0.8);
170
+ }
171
+ @keyframes spin {
172
+ from {
173
+ transform: rotate(0deg);
174
+ }
175
+ to {
176
+ transform: rotate(360deg);
177
+ }
178
+ }
130
179
  .jf-alert {
131
180
  display: flex;
132
181
  align-items: center;
@@ -142,6 +191,7 @@
142
191
  font-size: 18px;
143
192
  line-height: 120%;
144
193
  text-align: center;
194
+ letter-spacing: 0.54px;
145
195
  }
146
196
  .jf-alert .jf-alert__content {
147
197
  display: flex;
@@ -186,7 +236,6 @@
186
236
  }
187
237
  .jf-alert.jfcl-variant-primary .jf-alert__btn {
188
238
  color: #faf8f4;
189
- border-color: #faf8f4;
190
239
  }
191
240
  .jf-alert.jfcl-variant-secondary {
192
241
  background-color: #faf8f4;
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: 18px;
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,11 @@
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;
56
- }
57
58
  .jfcl-button:disabled {
58
59
  cursor: inherit;
59
- box-shadow: none;
60
60
  }
61
61
  .jfcl-button:disabled.is-primary {
62
62
  background-color: GREY_400;
@@ -65,30 +65,44 @@
65
65
  .jfcl-button:disabled.is-secondary {
66
66
  background-color: #f2f2f2;
67
67
  }
68
- .jfcl-button:focus {
69
- box-shadow: none;
70
- border: 1px solid #efe9dc;
68
+ .jfcl-button:hover {
69
+ box-shadow: 4px 5px 0px 0px #c5ccd1;
70
+ }
71
+ .jfcl-button:active {
72
+ box-shadow: 0px -4px 0px 0px #c5ccd1;
71
73
  }
72
74
  .jfcl-button .jfcl-button__label {
73
75
  display: flex;
74
76
  }
75
77
  .jfcl-button .jfcl-button__icon {
76
78
  margin-right: 10px;
77
- width: 16px;
78
- height: 16px;
79
+ width: 1em;
80
+ height: 1em;
79
81
  }
80
82
  .jfcl-button .jfcl-button__icon.jfcl-button__icon_right {
81
83
  margin-right: 0;
82
84
  margin-left: 10px;
83
85
  order: 2;
84
86
  }
87
+ .jfcl-button.jfcl-btn-icon-only {
88
+ width: 4.125rem;
89
+ height: 4.125rem;
90
+ }
91
+ .jfcl-button.jfcl-btn-icon-only .jfcl-button__icon {
92
+ margin-right: 0;
93
+ }
85
94
  .jfcl-button.jfcl-size-small {
86
95
  padding: 12px 32px;
87
96
  }
97
+ .jfcl-button.jfcl-size-small.jfcl-btn-icon-only {
98
+ padding: 0;
99
+ width: 2.875rem;
100
+ height: 2.875rem;
101
+ }
88
102
  .jfcl-button.jfcl-variant-primary {
89
103
  color: #faf8f4;
90
104
  background-color: #242323;
91
- border-color: #faf8f4;
105
+ border-color: transparent;
92
106
  }
93
107
  .jfcl-button.jfcl-variant-primary:disabled {
94
108
  color: #242323;
@@ -97,6 +111,15 @@
97
111
  .jfcl-button.jfcl-variant-primary.jfcl-is-loading {
98
112
  background-color: #676565;
99
113
  }
114
+ .jfcl-button.jfcl-variant-primary.jfcl-is-loading .jfcl-button__icon {
115
+ display: block;
116
+ animation: spin 500ms infinite linear;
117
+ position: relative;
118
+ border: 2px solid #ffffff;
119
+ border-radius: 1em;
120
+ border-right-color: transparent;
121
+ border-top-color: transparent;
122
+ }
100
123
  .jfcl-button.jfcl-variant-secondary {
101
124
  color: #242323;
102
125
  background-color: #faf8f4;
@@ -105,21 +128,21 @@
105
128
  .jfcl-button.jfcl-variant-secondary:disabled {
106
129
  background-color: #f2f2f2;
107
130
  }
131
+ .jfcl-button.jfcl-variant-secondary.jfcl-is-loading .jfcl-button__icon {
132
+ display: block;
133
+ animation: spin 500ms infinite linear;
134
+ position: relative;
135
+ border: 2px solid #242323;
136
+ border-radius: 1em;
137
+ border-right-color: transparent;
138
+ border-top-color: transparent;
139
+ }
108
140
  .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
141
  color: #242323;
116
142
  background: none;
117
143
  border: none;
118
144
  box-shadow: none;
119
145
  }
120
- .jfcl-button.jfcl-variant-text .jfcl-button__text {
121
- border-bottom: 1px solid;
122
- }
123
146
  .jfcl-button.jfcl-variant-text:disabled {
124
147
  cursor: inherit;
125
148
  color: #676565;
@@ -127,6 +150,32 @@
127
150
  .jfcl-button.jfcl-variant-text:disabled .jfcl-button__text {
128
151
  border-bottom: none;
129
152
  }
153
+ .jfcl-button.jfcl-variant-text:hover {
154
+ background-color: #efe9dc;
155
+ }
156
+ .jfcl-button.jfcl-variant-text.jfcl-is-loading {
157
+ background-color: #efe9dc;
158
+ }
159
+ .jfcl-button.jfcl-variant-text.jfcl-is-loading .jfcl-button__icon {
160
+ display: block;
161
+ animation: spin 500ms infinite linear;
162
+ position: relative;
163
+ border: 2px solid #242323;
164
+ border-radius: 1em;
165
+ border-right-color: transparent;
166
+ border-top-color: transparent;
167
+ }
168
+ .jfcl-button.jfcl-variant-text:active {
169
+ background-color: rgba(239, 233, 220, 0.8);
170
+ }
171
+ @keyframes spin {
172
+ from {
173
+ transform: rotate(0deg);
174
+ }
175
+ to {
176
+ transform: rotate(360deg);
177
+ }
178
+ }
130
179
  .jf-alert {
131
180
  display: flex;
132
181
  align-items: center;
@@ -142,6 +191,7 @@
142
191
  font-size: 18px;
143
192
  line-height: 120%;
144
193
  text-align: center;
194
+ letter-spacing: 0.54px;
145
195
  }
146
196
  .jf-alert .jf-alert__content {
147
197
  display: flex;
@@ -186,7 +236,6 @@
186
236
  }
187
237
  .jf-alert.jfcl-variant-primary .jf-alert__btn {
188
238
  color: #faf8f4;
189
- border-color: #faf8f4;
190
239
  }
191
240
  .jf-alert.jfcl-variant-secondary {
192
241
  background-color: #faf8f4;
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
  */
@@ -30,9 +13,10 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
30
13
  loading,
31
14
  labelIcon,
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' : ''));
37
21
  return /*#__PURE__*/React.createElement("button", _extends({
38
22
  ref: ref,
@@ -41,16 +25,33 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
41
25
  "data-testid": "jfcl-button"
42
26
  }, props), /*#__PURE__*/React.createElement("div", {
43
27
  className: "jfcl-button__label"
44
- }, loading && variant != 'text' ? /*#__PURE__*/React.createElement("span", {
28
+ }, loading && /*#__PURE__*/React.createElement("span", {
45
29
  className: iconClassNames
46
- }, /*#__PURE__*/React.createElement(IconLoading$1, null)) : null, !loading && labelIcon ? /*#__PURE__*/React.createElement("span", {
30
+ }), !loading && labelIcon ? /*#__PURE__*/React.createElement("span", {
47
31
  className: iconClassNames
48
- }, labelIcon) : null, /*#__PURE__*/React.createElement("span", {
32
+ }, labelIcon) : null, !iconOnly && /*#__PURE__*/React.createElement("span", {
49
33
  className: "jfcl-button__text"
50
34
  }, labelText)));
51
35
  });
52
36
  Button.displayName = 'Button';
53
37
 
38
+ const IconLoading = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
39
+ ref: ref
40
+ }, props, {
41
+ width: "16",
42
+ height: "16",
43
+ viewBox: "0 0 16 16",
44
+ fill: "none",
45
+ xmlns: "http://www.w3.org/2000/svg"
46
+ }), /*#__PURE__*/React.createElement("path", {
47
+ fill: "currentcolor",
48
+ fillRule: "evenodd",
49
+ clipRule: "evenodd",
50
+ 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"
51
+ })));
52
+ IconLoading.displayName = 'IconLoading';
53
+ var IconLoading$1 = IconLoading;
54
+
54
55
  const IconHamburger$2 = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement("svg", _extends({
55
56
  ref: ref
56
57
  }, 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
  */
@@ -40,9 +23,10 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
40
23
  loading,
41
24
  labelIcon,
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' : ''));
47
31
  return /*#__PURE__*/React__default["default"].createElement("button", _extends__default["default"]({
48
32
  ref: ref,
@@ -51,16 +35,33 @@ const Button = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =>
51
35
  "data-testid": "jfcl-button"
52
36
  }, props), /*#__PURE__*/React__default["default"].createElement("div", {
53
37
  className: "jfcl-button__label"
54
- }, loading && variant != 'text' ? /*#__PURE__*/React__default["default"].createElement("span", {
38
+ }, loading && /*#__PURE__*/React__default["default"].createElement("span", {
55
39
  className: iconClassNames
56
- }, /*#__PURE__*/React__default["default"].createElement(IconLoading$1, null)) : null, !loading && labelIcon ? /*#__PURE__*/React__default["default"].createElement("span", {
40
+ }), !loading && labelIcon ? /*#__PURE__*/React__default["default"].createElement("span", {
57
41
  className: iconClassNames
58
- }, labelIcon) : null, /*#__PURE__*/React__default["default"].createElement("span", {
42
+ }, labelIcon) : null, !iconOnly && /*#__PURE__*/React__default["default"].createElement("span", {
59
43
  className: "jfcl-button__text"
60
44
  }, labelText)));
61
45
  });
62
46
  Button.displayName = 'Button';
63
47
 
48
+ const IconLoading = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
49
+ ref: ref
50
+ }, props, {
51
+ width: "16",
52
+ height: "16",
53
+ viewBox: "0 0 16 16",
54
+ fill: "none",
55
+ xmlns: "http://www.w3.org/2000/svg"
56
+ }), /*#__PURE__*/React__default["default"].createElement("path", {
57
+ fill: "currentcolor",
58
+ fillRule: "evenodd",
59
+ clipRule: "evenodd",
60
+ 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"
61
+ })));
62
+ IconLoading.displayName = 'IconLoading';
63
+ var IconLoading$1 = IconLoading;
64
+
64
65
  const IconHamburger$2 = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React__default["default"].createElement("svg", _extends__default["default"]({
65
66
  ref: ref
66
67
  }, props, {
package/dist/typings/buttons/Button.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
7
7
  loading?: boolean;
8
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.28.0",
5
+ "version": "0.29.1",
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",