Fix multiline items

src/components/PropertyGroup/PropertyGroup.css

@@ -1,30 +1,71 @@
 @import '../../marketplace.css';
 
+:root {
+  --lineHeight: 24px;
+  --lineThroughTop: calc(var(--lineHeight) - 7px);
+  --lineThroughBottom: calc(var(--lineHeight) - 6px);
+  --lineHeightMobile: 20px;
+  --lineThroughTopMobile: calc(var(--lineHeightMobile) - 5px);
+  --lineThroughBottomMobile: calc(var(--lineHeightMobile) - 4px);
+}
+
 .root {
   margin: 0;
 }
 
 .twoColumns {
   @media (--viewportMedium) {
-    columns: 2;
+    column-count: 2;
   }
 }
 
 .item {
+  display: flex;
+  padding: 2px 0;
+
+  @media (--viewportMedium) {
+    padding: 4px 0;
+  }
+}
+
+.itemSelected {
+  padding: 2px 0;
   display: flex;
   align-items: center;
 
   /* Fix broken multi-column layout in Chrome */
   page-break-inside: avoid;
+
+  @media (--viewportMedium) {
+    padding: 4px 0;
+  }
 }
 
-.check {
+.checkIcon {
   margin: 1px 8px -1px 0;
 }
 
+.hidden {
+  visibility: hidden;
+}
+
+.marketplaceFill {
+  fill: var(--marketplaceColor);
+}
+
+.iconWrapper {
+  display: inline-flex;
+  align-content: center;
+}
+
+.textWrapper {
+  display: inline-block;
+}
+
 .selectedText,
 .notSelectedText {
   @apply --marketplaceBodyFontStyles;
+  line-height: var(--lineHeight);
   margin: 0;
 }
 
@@ -35,15 +76,21 @@
 .notSelectedText {
   color: var(--matterColorNegative);
   position: relative;
-  margin-left: 17px;
-}
 
-/* line-through */
-.notSelectedText::after {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 58%;
-  content: '';
-  border-bottom: solid 1px var(--matterColorNegative);
+  /* line-through */
+  background-image: linear-gradient(
+    transparent var(--lineThroughTopMobile),
+    var(--matterColorNegative) var(--lineThroughTopMobile),
+    var(--matterColorNegative) var(--lineThroughBottomMobile),
+    transparent var(--lineThroughBottomMobile)
+  );
+
+  @media (--viewportMedium) {
+    background-image: linear-gradient(
+      transparent var(--lineThroughTop),
+      var(--matterColorNegative) var(--lineThroughTop),
+      var(--matterColorNegative) var(--lineThroughBottom),
+      transparent var(--lineThroughBottom)
+    );
+  }
 }

src/components/PropertyGroup/PropertyGroup.example.js

@@ -14,6 +14,7 @@ const exampleOptions = [
 export const WithSomeSelected = {
   component: PropertyGroup,
   props: {
+    id: 'amenities',
     options: exampleOptions,
     selectedOptions: ['towels', 'bathroom', 'barbeque'],
     twoColumns: true,

src/components/PropertyGroup/PropertyGroup.js

@@ -16,41 +16,56 @@ import css from './PropertyGroup.css';
 const checkSelected = (options, selectedOptions) => {
   return options.map(option => ({
     text: option.text,
+    value: option.value,
     isSelected: includes(selectedOptions, option.value),
   }));
 };
 
-const iconCheck = (
-  <svg width="9" height="9" xmlns="http://www.w3.org/2000/svg" className={css.check}>
-    <path
-      d="M2.636621 7.7824771L.3573694 5.6447948c-.4764924-.4739011-.4764924-1.2418639 0-1.7181952.4777142-.473901 1.251098-.473901 1.7288122 0l1.260291 1.1254783L6.1721653.505847C6.565577-.0373166 7.326743-.1636902 7.8777637.227582c.5473554.3912721.6731983 1.150729.2797866 1.6951076L4.4924979 7.631801c-.2199195.306213-.5803433.5067096-.9920816.5067096-.3225487 0-.6328797-.1263736-.8637952-.3560334z"
-      fill="#C0392B"
-      fillRule="evenodd"
-    />
-  </svg>
-);
+const IconCheck = props => {
+  const isVisible = props.isVisible;
+  const classes = isVisible ? css.checkIcon : classNames(css.checkIcon, css.hidden);
+
+  return (
+    <svg width="9" height="9" xmlns="http://www.w3.org/2000/svg" className={classes}>
+      <path
+        className={css.marketplaceFill}
+        d="M2.636621 7.7824771L.3573694 5.6447948c-.4764924-.4739011-.4764924-1.2418639 0-1.7181952.4777142-.473901 1.251098-.473901 1.7288122 0l1.260291 1.1254783L6.1721653.505847C6.565577-.0373166 7.326743-.1636902 7.8777637.227582c.5473554.3912721.6731983 1.150729.2797866 1.6951076L4.4924979 7.631801c-.2199195.306213-.5803433.5067096-.9920816.5067096-.3225487 0-.6328797-.1263736-.8637952-.3560334z"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
 
 const SelectedItem = props => {
-  const text = props.text;
+  const { text } = props;
   return (
-    <li className={css.item}>
-      {iconCheck}
-      <span className={css.selectedText}>{text}</span>
+    <li className={css.itemSelected}>
+      <div className={css.iconWrapper}>
+        <IconCheck isVisible={true} />
+      </div>
+      <div className={css.textWrapper}>
+        <span className={css.selectedText}>{text}</span>
+      </div>
     </li>
   );
 };
 
 const NotSelectedItem = props => {
-  const text = props.text;
+  const { text } = props;
   return (
     <li className={css.item}>
-      <span className={css.notSelectedText}>{text}</span>
+      <div className={css.iconWrapper}>
+        <IconCheck isVisible={false} />
+      </div>
+      <div className={css.textWrapper}>
+        <span className={css.notSelectedText}>{text}</span>
+      </div>
     </li>
   );
 };
 
 const PropertyGroup = props => {
-  const { rootClassName, className, options, selectedOptions, twoColumns } = props;
+  const { rootClassName, className, id, options, selectedOptions, twoColumns } = props;
   const classes = classNames(rootClassName || css.root, className);
   const listClasses = twoColumns ? classNames(classes, css.twoColumns) : classes;
 
@@ -61,9 +76,9 @@ const PropertyGroup = props => {
       {checked.map(
         option =>
           option.isSelected ? (
-            <SelectedItem text={option.text} />
+            <SelectedItem key={`${id}.${option.value}`} text={option.text} />
           ) : (
-            <NotSelectedItem text={option.text} />
+            <NotSelectedItem key={`${id}.${option.value}`} text={option.text} />
           )
       )}
     </ul>
@@ -81,6 +96,7 @@ const { arrayOf, bool, node, shape, string } = PropTypes;
 PropertyGroup.propTypes = {
   rootClassName: string,
   className: string,
+  id: string.isRequired,
   options: arrayOf(
     shape({
       value: string.isRequired,