diff --git a/src/components/FieldCheckbox/FieldCheckbox.css b/src/components/FieldCheckbox/FieldCheckbox.css
new file mode 100644
index 00000000..d03b9882
--- /dev/null
+++ b/src/components/FieldCheckbox/FieldCheckbox.css
@@ -0,0 +1,56 @@
+@import '../../marketplace.css';
+
+.root {
+ position: relative;
+}
+
+.input {
+ position: absolute;
+ opacity: 0;
+ height: 0;
+ width: 0;
+
+ /* Highlight the borders if the checkbox is hovered, focused or checked */
+ &:hover + label .box,
+ &:focus + label .box,
+ &:checked + label .box {
+ stroke: var(--marketplaceColor);
+ }
+
+ /* Display the "check" when checked */
+ &:checked + label .checked {
+ display: inline;
+ }
+
+ /* Hightlight the text on hover and focus */
+ &:focus + label .text,
+ &:hover + label .text {
+ color: var(--matterColorDark);
+ }
+}
+
+.label {
+ display: flex;
+ align-items: center;
+ padding: 0;
+}
+
+.checkbox {
+ margin-right: 12px;
+}
+
+.checked {
+ display: none;
+ fill: var(--marketplaceColor);
+}
+
+.box {
+ stroke: var(--matterColorAnti);
+}
+
+.text {
+ @apply --marketplaceListingAttributeFontStyles;
+ color: var(--matterColor);
+ margin-top: -1px;
+ margin-bottom: 1px;
+}
diff --git a/src/components/FieldCheckbox/FieldCheckbox.example.js b/src/components/FieldCheckbox/FieldCheckbox.example.js
new file mode 100644
index 00000000..6a11c31a
--- /dev/null
+++ b/src/components/FieldCheckbox/FieldCheckbox.example.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { reduxForm, propTypes as formPropTypes } from 'redux-form';
+import { Button } from '../../components';
+import FieldCheckbox from './FieldCheckbox';
+
+const formName = 'Styleguide.FieldCheckbox.Form';
+
+const FormComponent = props => {
+ const { form, handleSubmit, invalid, pristine, submitting } = props;
+
+ const submitDisabled = invalid || pristine || submitting;
+
+ return (
+
+ );
+};
+
+FormComponent.propTypes = formPropTypes;
+
+const Form = reduxForm({
+ form: formName,
+})(FormComponent);
+
+export const Checkbox = {
+ component: Form,
+ props: {
+ onSubmit: values => {
+ console.log('Submit values of FieldCheckbox: ', values);
+ },
+ },
+ group: 'inputs',
+};
diff --git a/src/components/FieldCheckbox/FieldCheckbox.js b/src/components/FieldCheckbox/FieldCheckbox.js
new file mode 100644
index 00000000..16daa3b6
--- /dev/null
+++ b/src/components/FieldCheckbox/FieldCheckbox.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Field } from 'redux-form';
+
+import css from './FieldCheckbox.css';
+
+const IconCheckbox = props => {
+ const svgClasses = classNames(props.className, css.checkbox);
+
+ return (
+
+ );
+};
+
+IconCheckbox.defaultProps = { className: null };
+
+const { node, string } = PropTypes;
+
+IconCheckbox.propTypes = { className: string };
+
+const FieldCheckbox = props => {
+ const { rootClassName, className, svgClassName, id, name, text } = props;
+
+ const classes = classNames(rootClassName || css.root, className);
+
+ return (
+
+
+
+
+ );
+};
+
+FieldCheckbox.defaultProps = {
+ className: null,
+ rootClassName: null,
+ svgClassName: null,
+ text: null,
+};
+
+FieldCheckbox.propTypes = {
+ className: string,
+ rootClassName: string,
+ svgClassName: string,
+ id: string.isRequired,
+ name: string.isRequired,
+ text: node,
+};
+
+export default FieldCheckbox;
diff --git a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.css b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.css
new file mode 100644
index 00000000..0550ae37
--- /dev/null
+++ b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.css
@@ -0,0 +1,28 @@
+@import '../../marketplace.css';
+
+.root {
+ margin: 0;
+ padding: 0;
+ border: none;
+}
+
+.list {
+ margin: 0;
+}
+
+.twoColumns {
+ @media (--viewportMedium) {
+ columns: 2;
+ }
+}
+
+.item {
+ padding: 2px 0;
+
+ /* Fix broken multi-column layout in Chrome */
+ page-break-inside: avoid;
+
+ @media (--viewportMedium) {
+ padding: 4px 0;
+ }
+}
diff --git a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.example.js b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.example.js
new file mode 100644
index 00000000..149da2bf
--- /dev/null
+++ b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.example.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { reduxForm, propTypes as formPropTypes } from 'redux-form';
+import { Button } from '../../components';
+import FieldGroupCheckbox from './FieldGroupCheckbox';
+
+const formName = 'Styleguide.FieldGroupCheckboxForm';
+
+const legend = Amenities
;
+
+const componentProps = {
+ id: `${formName}.amenities`,
+ legend: legend,
+ options: [
+ {
+ name: 'towels',
+ text: 'Towels',
+ },
+ {
+ name: 'bathroom',
+ text: 'Bathfoom',
+ },
+ {
+ name: 'swimming_pool',
+ text: 'Swimming pool',
+ },
+ {
+ name: 'own_drinks',
+ text: 'Own drinks allowed',
+ },
+ {
+ name: 'jacuzzi',
+ text: 'Jacuzzi',
+ },
+ {
+ name: 'audiovisual_entertainment',
+ text: 'Audiovisual entertainment',
+ },
+ {
+ name: 'barbeque',
+ text: 'Barbeque',
+ },
+ {
+ name: 'own_food_allowed',
+ text: 'Own food allowed',
+ },
+ ],
+ twoColumns: true,
+};
+
+const FormComponent = props => {
+ const { handleSubmit, invalid, pristine, submitting } = props;
+
+ const submitDisabled = invalid || pristine || submitting;
+
+ return (
+
+ );
+};
+
+FormComponent.propTypes = formPropTypes;
+
+const Form = reduxForm({
+ form: formName,
+})(FormComponent);
+
+export const WithTwoColumns = {
+ component: Form,
+ props: {
+ onSubmit: values => {
+ console.log('Submit values: ', values);
+ },
+ },
+ group: 'inputs',
+};
diff --git a/src/components/FieldGroupCheckbox/FieldGroupCheckbox.js b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.js
new file mode 100644
index 00000000..60310cad
--- /dev/null
+++ b/src/components/FieldGroupCheckbox/FieldGroupCheckbox.js
@@ -0,0 +1,60 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { FieldCheckbox } from '../../components';
+import css from './FieldGroupCheckbox.css';
+
+class FieldGroupCheckbox extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { selected: [] };
+ }
+
+ render() {
+ const { rootClassName, className, id, legend, options, twoColumns } = this.props;
+ const classes = classNames(rootClassName || css.root, className);
+ const listClasses = twoColumns ? classNames(css.list, css.twoColumns) : css.list;
+
+ return (
+
+ );
+ }
+}
+
+FieldGroupCheckbox.defaultProps = {
+ rootClassName: null,
+ className: null,
+ legend: null,
+ twoColumns: false,
+};
+
+const { arrayOf, bool, node, shape, string } = PropTypes;
+
+FieldGroupCheckbox.propTypes = {
+ rootClassName: string,
+ className: string,
+ id: string.isRequired,
+ legend: node,
+ options: arrayOf(
+ shape({
+ name: string.isRequired,
+ text: node.isRequired,
+ })
+ ).isRequired,
+ twoColumns: bool,
+};
+
+export default FieldGroupCheckbox;
diff --git a/src/components/SelectSingleFilter/SelectSingleFilter.css b/src/components/SelectSingleFilter/SelectSingleFilter.css
index ca9ced04..c50c95c3 100644
--- a/src/components/SelectSingleFilter/SelectSingleFilter.css
+++ b/src/components/SelectSingleFilter/SelectSingleFilter.css
@@ -75,7 +75,7 @@
}
.menuItem {
- @apply --marketplaceSearchFilterOptionFontStyles;
+ @apply --marketplaceListingAttributeFontStyles;
color: var(--matterColor);
/* Layout */
diff --git a/src/components/index.js b/src/components/index.js
index 98955b6a..504b743b 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -27,9 +27,11 @@ export { default as EditListingWizard } from './EditListingWizard/EditListingWiz
export { default as ExpandingTextarea } from './ExpandingTextarea/ExpandingTextarea';
export { default as ExternalLink } from './ExternalLink/ExternalLink';
export { default as FilterPanel } from './FilterPanel/FilterPanel';
+export { default as FieldCheckbox } from './FieldCheckbox/FieldCheckbox';
export {
default as FieldCustomAttributeSelect,
} from './FieldCustomAttributeSelect/FieldCustomAttributeSelect';
+export { default as FieldGroupCheckbox } from './FieldGroupCheckbox/FieldGroupCheckbox';
export { default as FieldReviewRating } from './FieldReviewRating/FieldReviewRating';
export { default as Footer } from './Footer/Footer';
export { default as Form } from './Form/Form';
diff --git a/src/examples.js b/src/examples.js
index 5f705ca7..8d0e6e50 100644
--- a/src/examples.js
+++ b/src/examples.js
@@ -9,6 +9,8 @@ import * as CurrencyInputField from './components/CurrencyInputField/CurrencyInp
import * as DateRangeInputField from './components/DateRangeInputField/DateRangeInputField.example';
import * as EditListingWizard from './components/EditListingWizard/EditListingWizard.example';
import * as ExpandingTextarea from './components/ExpandingTextarea/ExpandingTextarea.example';
+import * as FieldCheckbox from './components/FieldCheckbox/FieldCheckbox.example';
+import * as FieldGroupCheckbox from './components/FieldGroupCheckbox/FieldGroupCheckbox.example';
import * as FieldReviewRating from './components/FieldReviewRating/FieldReviewRating.example';
import * as Footer from './components/Footer/Footer.example';
import * as IconBannedUser from './components/IconBannedUser/IconBannedUser.example';
@@ -88,6 +90,8 @@ export {
EmailVerificationForm,
EnquiryForm,
ExpandingTextarea,
+ FieldCheckbox,
+ FieldGroupCheckbox,
FieldReviewRating,
Footer,
IconBannedUser,
diff --git a/src/marketplaceFonts.css b/src/marketplaceFonts.css
index b0b5deae..3e10ae9d 100644
--- a/src/marketplaceFonts.css
+++ b/src/marketplaceFonts.css
@@ -262,17 +262,11 @@
}
}
- --marketplaceSearchFilterOptionFontStyles {
+ --marketplaceListingAttributeFontStyles {
font-family: 'sofiapro', Helvetica, Arial, sans-serif;
- font-weight: var(--fontWeightSemiBold);
- font-size: 13px;
- line-height: 18px;
-
- @media (--viewportMedium) {
- font-weight: var(--fontWeightMedium);
- font-size: 18px;
- line-height: 32px;
- }
+ font-weight: var(--fontWeightMedium);
+ font-size: 18px;
+ line-height: 32px;
}
/* ================ Tabbed navigation font styles ================ */