From f382d4430a4ea3b2cac79e310fa63e341b62ffff Mon Sep 17 00:00:00 2001
From: Michael Haglund <michael.haglund@life.church>
Date: Sun, 2 Jun 2019 11:20:49 -0500
Subject: [PATCH] feat(Added class selectors): Added class based selectors and
 updated build

---
 package.json                    |  6 ++----
 rollup.config.js                |  7 -------
 src/react-draftable.esm.js.flow |  2 --
 src/styles.css                  | 15 ++++++---------
 src/toolbar/index.js            |  3 ++-
 src/toolbarButton/index.js      |  3 ++-
 src/toolbarGroup/index.js       |  5 +++--
 7 files changed, 15 insertions(+), 26 deletions(-)
 delete mode 100644 src/react-draftable.esm.js.flow

diff --git a/package.json b/package.json
index 7b64822..c023281 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,11 @@
   "module": "dist/react-draftable.esm.js",
   "browser": "dist/react-draftable.umd.js",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "scripts": {
     "build": "yarn clean && yarn build:rollup",
-    "build:rollup": "BABEL_ENV=production rollup -c --no-treeshake",
+    "build:rollup": "BABEL_ENV=production rollup -c",
     "clean": "rimraf dist",
     "commit": "git-cz",
     "flow": "flow",
@@ -83,7 +82,6 @@
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^10.0.0",
-    "rollup-plugin-copy": "^2.0.1",
     "rollup-plugin-css-only": "^1.0.0",
     "rollup-plugin-multi-entry": "^2.1.0",
     "rollup-plugin-node-globals": "^1.4.0",
diff --git a/rollup.config.js b/rollup.config.js
index cdee8f9..83b2736 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -3,7 +3,6 @@ import commonjs from 'rollup-plugin-commonjs';
 import babel from 'rollup-plugin-babel';
 import css from 'rollup-plugin-css-only';
 import autoExternal from 'rollup-plugin-auto-external';
-import copy from 'rollup-plugin-copy';
 import pkg from './package.json';
 
 const commonPlugins = [
@@ -11,12 +10,6 @@ const commonPlugins = [
   autoExternal(),
   resolve(),
   css({ output: 'dist/react-draftable.css' }),
-  copy({
-    targets: [
-      'src/react-draftable.esm.js.flow',
-    ],
-    outputFolder: 'dist',
-  }),
 ];
 
 export default [
diff --git a/src/react-draftable.esm.js.flow b/src/react-draftable.esm.js.flow
deleted file mode 100644
index 2a08ffe..0000000
--- a/src/react-draftable.esm.js.flow
+++ /dev/null
@@ -1,2 +0,0 @@
-// @flow
-import * as Draftable from '../src'; /* eslint-disable-line */
diff --git a/src/styles.css b/src/styles.css
index e74379b..54e1488 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -6,34 +6,31 @@
     line-height: 1.25;
 }
 
-.Toolbar-root {
+.toolbar {
     display: flex;
     margin: 14px 0;
 }
 
-.ToolbarGroup-root {
+.toolbarGroup {
     display: flex;
-}
-
-.ToolbarGroup-root {
     margin: 0 12px;
 }
 
-.ToolbarGroup-root:first-of-type {
+.toolbarGroup:first-of-type {
     margin-left: 0;
 }
 
-.ToolbarGroup-root:last-of-type {
+.toolbarGroup:last-of-type {
     margin-right: 0;
 }
 
-.ToolbarButton-root {
+.toolbarButton {
     border: none;
     background: none;
     margin: 0 4px;
     padding: 0;
 }
 
-.ToolbarButton-root:first-of-type {
+.toolbarButton:first-of-type {
     margin-left: 0;
 }
diff --git a/src/toolbar/index.js b/src/toolbar/index.js
index 7cc53d4..33f1df5 100644
--- a/src/toolbar/index.js
+++ b/src/toolbar/index.js
@@ -26,11 +26,12 @@ export const defaultToolbarConfig:ToolbarConfigType = {
 export default ({ editorState, toolbarConfig, onChange }:ToolbarProps) => {
   const handleToggle = item => onChange(item);
   return (
-    <div data-testid='toolbar' className='Toolbar-root'>
+    <div data-testid='toolbar' className='toolbar'>
       {
         toolbarConfig.groups.map(group => (
           <ToolbarGroup
             key={group}
+            name={group}
             items={toolbarConfig[group]}
             onChange={handleToggle}
             editorState={editorState}
diff --git a/src/toolbarButton/index.js b/src/toolbarButton/index.js
index 7aa6ae4..d63e7d4 100644
--- a/src/toolbarButton/index.js
+++ b/src/toolbarButton/index.js
@@ -38,9 +38,10 @@ export default ({ item, active, onChange }:ToolbarButtonProps) => {
   };
 
   const iconColor = active ? '#404041' : '#9F9FA0';
+  const buttonType = item.type === 'style' ? item.style : 'custom';
 
   return (
-    <button data-testid={`toolbarButton-${item.type === 'style' ? item.style : 'custom'}`} type='button' className='ToolbarButton-root' onClick={handleToggle}>
+    <button data-testid={`toolbarButton-${buttonType}`} type='button' className={`toolbarButton toolbarButton-${buttonType}`} onClick={handleToggle}>
       <Icon color={iconColor} />
     </button>
   );
diff --git a/src/toolbarGroup/index.js b/src/toolbarGroup/index.js
index 8d4bc55..4c3b55e 100644
--- a/src/toolbarGroup/index.js
+++ b/src/toolbarGroup/index.js
@@ -4,19 +4,20 @@ import { EditorState } from 'draft-js';
 import ToolbarButton, { type ToolbarButtonType } from '../toolbarButton';
 
 type ToolbarGroupProps = {
+  name: string,
   items: Array<ToolbarButtonType>,
   onChange: (ToolbarButtonType) => void,
   editorState: EditorState,
 };
 
 export default ({
-  items, onChange, editorState,
+  name, items, onChange, editorState,
 }:ToolbarGroupProps) => {
   const handleToggle = item => onChange(item);
   const inlineStyles = editorState.getCurrentInlineStyle();
 
   return (
-    <div data-testid='toolbarGroup' className='ToolbarGroup-root'>
+    <div data-testid='toolbarGroup' className={`toolbarGroup toolbarGroup-${name}`}>
       {
         items.map((item) => {
           const active = item.type === 'style' && inlineStyles.has(item.style);