Single col Choices & fix textfield highlighting (#964)

* Add key to highglighted words to prevent errors

* Add prop for single col mobile Choice

* fix color variable

* Remove beta version

* only allow initial optionsPerRow

* Update snapshots

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nukleus",
-  "version": "15.1.2",
+  "version": "15.1.3",
   "description": "Shared components repo for kununu projects",
   "main": "dist/components/index.js",
   "repository": {

src/components/Choice/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 import {queryParamsToObject} from 'utils/params';
 import ThemeContext from 'utils/themeContext';
@@ -46,6 +47,7 @@ export default class Choice extends React.Component {
     ]),
     reference: PropTypes.func,
     requiredLabel: PropTypes.string,
+    mobileSingleCol: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -67,6 +69,7 @@ export default class Choice extends React.Component {
     query: {},
     reference: () => {},
     requiredLabel: '',
+    mobileSingleCol: false,
   };
 
   state = {
@@ -174,6 +177,7 @@ export default class Choice extends React.Component {
       optionsPerRow,
       reference,
       requiredLabel,
+      mobileSingleCol,
     } = this.props;
     const {checked} = this.state;
 
@@ -189,7 +193,9 @@ export default class Choice extends React.Component {
 
           return (
             <div
-              className={theme('formGroup')}
+              className={classnames(theme('formGroup'), {
+                [theme('mobileSingleCol')]: mobileSingleCol,
+              })}
               id={`${name}-container`}
             >
 

src/components/Choice/index.scss

@@ -184,10 +184,41 @@
   }
 }
 
+.mobileSingleCol .choiceContainer.choiceFlexible,
+.mobileSingleCol .choiceContainer {
+  @media (max-width: 480px) {
+    display: flex;
+
+    @supports(display: grid) {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-auto-rows: 1fr;
+      border: 0;
+    }
+
+    .choiceButton label {
+      border: 1px solid $blue;
+      border-top: 0;
+      border-radius: 0;
+    }
+
+    .choiceButton:first-child label {
+      border-top: 1px solid $blue;
+      border-top-right-radius: $border-radius-base;
+      border-top-left-radius: $border-radius-base;
+    }
+
+    .choiceButton:last-child label{
+      border-bottom-right-radius: $border-radius-base;
+      border-bottom-left-radius: $border-radius-base;
+    }
+  }
+}
+
 @mixin options-per-row($count) {
   [data-options-per-row='#{$count}'] {
     display: flex;
-    
+
     @supports(display: grid) {
       display: grid;
       grid-template-columns: 1fr 1fr;
@@ -257,4 +288,4 @@
 @include options-per-row(4);
 @include options-per-row(5);
 @include options-per-row(6);
-@include options-per-row(7);
+@include options-per-row(7);

src/components/TextField/index.jsx

@@ -308,13 +308,13 @@ export default class TextField extends React.Component {
       onHighlight,
     } = this.props;
 
-    return userInputArray.map((part) => {
+    return userInputArray.map((part, index) => {
       if (highlightList[part.toLowerCase()]) {
         onHighlight();
         return (
           <span
             className={styles.highlighted}
-            key={part}
+            key={`${part}-${index}`} // eslint-disable-line react/no-array-index-key
           >
             {part}
           </span>

src/components/TextField/index.scss

@@ -77,7 +77,6 @@
 
 .textFieldLabelFlex {
   display: flex;
-
 
   span:last-child {
     display: flex;

tests/__snapshots__/Choice.test.jsx.snap

@@ -1164,6 +1164,7 @@ exports[`Renders an error if errors prop is set 1`] = `
   isRequired={false}
   label={null}
   labelHidden={false}
+  mobileSingleCol={false}
   name="test"
   onBlur={[Function]}
   onChange={[Function]}

tests/__snapshots__/TextField.test.jsx.snap

@@ -147,14 +147,14 @@ exports[`Badwords should highlight correctly 1`] = `
          
         <span
           className="highlighted"
-          key="bad"
+          key="bad-6"
         >
           bad
         </span>
          
         <span
           className="highlighted"
-          key="words"
+          key="words-8"
         >
           words
         </span>

utils/theming.js

@@ -1,6 +1,6 @@
-export default theme => {
-  return (...names) => names
+const theming = theme => (...names) => names
   .map(name => theme[name] || name)
   .filter(x => x)
-  .join(" ");
-}
+  .join(' ');
+
+export default theming;