@justfixnyc/component-library 0.49.0 → 0.50.1

package/dist/src/assets/index.css

@@ -604,6 +604,56 @@
     transform: rotate(360deg);
   }
 }
+.jfcl-select-button {
+  display: inline-flex;
+  margin-right: 0.75rem;
+}
+.jfcl-select-button:last-of-type {
+  margin-right: 0;
+}
+.jfcl-select-button.jfcl-select-button--is-disabled .jfcl-select-button__label {
+  pointer-events: none;
+  background-color: #f2f2f2;
+  border-color: #9a9898;
+  color: #676565;
+}
+
+.jfcl-select-button__input {
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  opacity: 0;
+}
+
+.jfcl-select-button__label {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
+  border-radius: 6px;
+  border: 1px solid #9a9898;
+  background: #faf8f4;
+  padding: 0.75rem;
+  cursor: pointer;
+}
+.jfcl-select-button__label:hover {
+  border: 2px solid #242323;
+  padding: 0.6875rem;
+}
+
+.jfcl-select-button__input:checked + .jfcl-select-button__label {
+  background-color: #c6d8ff;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .jfcl-text-input {
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;

package/dist/src/assets/index.es.css

@@ -604,6 +604,56 @@
     transform: rotate(360deg);
   }
 }
+.jfcl-select-button {
+  display: inline-flex;
+  margin-right: 0.75rem;
+}
+.jfcl-select-button:last-of-type {
+  margin-right: 0;
+}
+.jfcl-select-button.jfcl-select-button--is-disabled .jfcl-select-button__label {
+  pointer-events: none;
+  background-color: #f2f2f2;
+  border-color: #9a9898;
+  color: #676565;
+}
+
+.jfcl-select-button__input {
+  position: absolute;
+  width: 0px;
+  height: 0px;
+  opacity: 0;
+}
+
+.jfcl-select-button__label {
+  font-family: "Degular", Arial, Helvetica, sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 120%;
+  letter-spacing: 0.54px;
+  border-radius: 6px;
+  border: 1px solid #9a9898;
+  background: #faf8f4;
+  padding: 0.75rem;
+  cursor: pointer;
+}
+.jfcl-select-button__label:hover {
+  border: 2px solid #242323;
+  padding: 0.6875rem;
+}
+
+.jfcl-select-button__input:checked + .jfcl-select-button__label {
+  background-color: #c6d8ff;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .jfcl-text-input {
   font-family: "Degular", Arial, Helvetica, sans-serif;
   font-style: normal;

package/dist/src/index.es.js

@@ -498,6 +498,38 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 RadioButton.displayName = 'RadioButton';
 
+/**
+ * Accepts all `InputHTMLAttributes`
+ */
+const SelectButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    className,
+    labelText,
+    disabled,
+    id,
+    ...props
+  } = _ref;
+  const SelectButtonClassNames = classNames('jfcl-select-button', {
+    ['jfcl-select-button--is-disabled']: disabled
+  }, className);
+  const generatedID = useId();
+  return /*#__PURE__*/React.createElement("div", {
+    className: SelectButtonClassNames,
+    "data-testid": "jfcl-select-button"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    ref: ref
+  }, props, {
+    id: id || generatedID,
+    className: "jfcl-select-button__input",
+    type: "radio"
+  })), /*#__PURE__*/React.createElement("label", {
+    htmlFor: id || generatedID,
+    className: "jfcl-select-button__label",
+    "data-testid": "jfcl-select-button__label"
+  }, labelText));
+});
+SelectButton.displayName = 'SelectButton';
+
 /**
  * Accepts all `InputHTMLAttributes`
  */
@@ -538,4 +570,4 @@ const TextInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 TextInput.displayName = 'TextInput';
 
-export { Alert, Button, Checkbox, Dropdown, FormGroup, Icon, Link, RadioButton, TextInput };
+export { Alert, Button, Checkbox, Dropdown, FormGroup, Icon, Link, RadioButton, SelectButton, TextInput };

package/dist/src/index.js

@@ -509,6 +509,38 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
 });
 RadioButton.displayName = 'RadioButton';
 
+/**
+ * Accepts all `InputHTMLAttributes`
+ */
+const SelectButton = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+  let {
+    className,
+    labelText,
+    disabled,
+    id,
+    ...props
+  } = _ref;
+  const SelectButtonClassNames = classNames__default["default"]('jfcl-select-button', {
+    ['jfcl-select-button--is-disabled']: disabled
+  }, className);
+  const generatedID = React.useId();
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: SelectButtonClassNames,
+    "data-testid": "jfcl-select-button"
+  }, /*#__PURE__*/React__default["default"].createElement("input", _extends__default["default"]({
+    ref: ref
+  }, props, {
+    id: id || generatedID,
+    className: "jfcl-select-button__input",
+    type: "radio"
+  })), /*#__PURE__*/React__default["default"].createElement("label", {
+    htmlFor: id || generatedID,
+    className: "jfcl-select-button__label",
+    "data-testid": "jfcl-select-button__label"
+  }, labelText));
+});
+SelectButton.displayName = 'SelectButton';
+
 /**
  * Accepts all `InputHTMLAttributes`
  */
@@ -557,4 +589,5 @@ exports.FormGroup = FormGroup;
 exports.Icon = Icon;
 exports.Link = Link;
 exports.RadioButton = RadioButton;
+exports.SelectButton = SelectButton;
 exports.TextInput = TextInput;

package/dist/typings/index.d.ts

@@ -7,4 +7,5 @@ export * from './Components/FormGroup/FormGroup';
 export * from './Components/Icon/Icon';
 export * from './Components/Link/Link';
 export * from './Components/RadioButton/RadioButton';
+export * from './Components/SelectButton/SelectButton';
 export * from './Components/TextInput/TextInput';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@justfixnyc/component-library",
   "description": "JustFix Component Library",
   "license": "MIT",
-  "version": "0.49.0",
+  "version": "0.50.1",
   "main": "dist/src/index.js",
   "module": "dist/src/index.es.js",
   "files": [