feat: mobile -> select option for concepts

Author: anton-karlovskiy

src/components/ConceptOptionList/ConceptOptionListItem/index.js

@@ -19,7 +19,7 @@ import React from 'react';
 import styles from './style.module.css';
 
 const ConceptOptionListItem = ({ value, caption, checked, selectOption }) => (
-  <div className={styles['flex']}>
+  <div className={styles['flex-container']}>
     <input
       checked={checked}
       onChange={selectOption}

src/components/ConceptOptionList/ConceptOptionListItem/style.module.css

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-.flex {
+.flex-container {
   display: flex;
   align-items: center;
   margin: 16px 0;

src/components/ConceptOptionList/index.js

@@ -18,20 +18,39 @@ import React from 'react';
 
 import ConceptOptionListItem from './ConceptOptionListItem';
 import { reactLoadingPatterns } from 'utils/data/concepts';
+import styles from './style.module.css';
 
-const ConceptOptionList = ({ selectedOptionId, selectOption, className }) => (
-  <div className={className}>
-    {reactLoadingPatterns.map(reactLoadingPattern => {
-      const checked = reactLoadingPattern.id === selectedOptionId;
-      return (
-        <ConceptOptionListItem
-          checked={checked}
-          selectOption={selectOption}
-          key={reactLoadingPattern.id}
-          value={reactLoadingPattern.id}
-          caption={reactLoadingPattern.optionName} />
-      );
-    })}
+const ConceptOptionList = ({ selectedOptionId, selectOption }) => (
+  <div className={styles['flex-container']}>
+    <h3 className={styles['title']}>
+      <strong>Category</strong>
+    </h3>
+    <select
+      className={styles['mobile']}
+      onChange={selectOption}>
+      {reactLoadingPatterns.map(reactLoadingPattern => {
+        return (
+          <option
+            key={reactLoadingPattern.id}
+            value={reactLoadingPattern.id}>
+            {reactLoadingPattern.optionName}
+          </option>
+        );
+      })}
+    </select>
+    <div className={styles['desktop']}>
+      {reactLoadingPatterns.map(reactLoadingPattern => {
+        const checked = reactLoadingPattern.id === selectedOptionId;
+        return (
+          <ConceptOptionListItem
+            checked={checked}
+            selectOption={selectOption}
+            key={reactLoadingPattern.id}
+            value={reactLoadingPattern.id}
+            caption={reactLoadingPattern.optionName} />
+        );
+      })}
+    </div>
   </div>
 );
 

src/components/ConceptOptionList/style.module.css

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.flex-container {
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  margin: 12px 8px;
+}
+
+.desktop {
+  display: none;
+}
+
+@media screen and (min-width: 1200px) {
+  .flex-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .mobile {
+    display: none;
+  }
+
+  .desktop {
+    display: block;
+  }
+}

src/containers/ReactLoadingPatterns/index.js

@@ -45,9 +45,8 @@ const ReactLoadingPatterns = () => {
   return (
     <div className={styles['root']}>
       <h2>React Loading Patterns</h2>
-      <div className={styles['flex']}>
+      <div className={styles['flex-container']}>
         <ConceptOptionList
-          className={styles['concept-option-list']}
           selectOption={selectPatternHandler}
           selectedOptionId={selectedPatternId} />
         <CodeArea

src/containers/ReactLoadingPatterns/style.module.css

@@ -1,5 +1,5 @@
 
-.flex {
+.flex-container {
   display: flex;
   flex-direction: column;
 }
@@ -13,28 +13,14 @@
   flex-grow: 1;
 }
 
-.concept-option-list {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.concept-option-list div {
-  flex: 0 0 240px;
-}
-
 @media screen and (min-width: 1200px) {
-  .flex {
+  .flex-container {
     flex-direction: row-reverse;
   }
-
-  .concept-option-list {
-    display: unset;
-    flex: 0 0 260px;
-  }
 }
 
 @media only screen and (max-width: 600px) {
-  .root{
+  .root {
     margin: 0 4px;
   }
 }