Add new component mapping

Author: TylerJDev

src/configs/components.js

@@ -0,0 +1,48 @@
+const components = {
+    Button: 'button',
+    IconButton: 'button',
+    Link: 'a',
+    Spinner: 'svg',
+    Octicon: 'svg',
+    ToggleSwitch: 'button',
+    Radio: 'input',
+    TextInput: {
+        Action: 'button',
+        self: 'input',
+    }, 
+    Select: {
+        Option: 'option', 
+        self: 'select',
+     },
+    UnderlineNav: {
+      Link: 'a',
+      self: 'nav',
+    },
+    TabNav: {
+        Link: 'a',
+        self: 'nav',
+    },
+      SubNav: {
+        Link: 'a',
+        self: 'nav',
+    },
+}
+
+const flattenComponents = (componentObj) => {
+    let result = {};
+
+    Object.keys(componentObj).forEach((key) => {
+        if (typeof componentObj[key] === 'object') {
+            const test = Object.keys(componentObj[key]).forEach((item) => {
+                result = { ...result, [`${key}${item !== 'self' ? `.${item}` : ''}`]: componentObj[key][item] };        
+            });
+        } else {
+            result = {...result, [key]: componentObj[key]}
+        }
+    });
+
+    return result;
+}
+
+
+exports.components = flattenComponents(components);

src/configs/recommended.js

@@ -15,11 +15,7 @@ module.exports = {
   },
   settings: {
     'jsx-a11y': {
-      components: {
-        Button: 'button',
-        IconButton: 'button',
-        Link: 'a'
-      }
+      components: require('./components')
     }
   }
 }