Merge pull request #90 from Orfium/feature/theme-use-cleanup

fix: remove useTheme that was used only for css functions

src/components/Breadcrumb/Breadcrumb.tsx

@@ -5,7 +5,6 @@ import isEmpty from 'lodash/isEmpty';
 import uniqueId from 'lodash/uniqueId';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import useTheme from '../../hooks/useTheme';
 import { breadcrumbLinkStyles, breadcrumbStyles } from './Breadcrumb.style';
 import BreadcrumbCollapsed from './BreadcrumbCollapsed/BreadcrumbCollapsed';
 import BreadcrumbItem from './BreadcrumbItem/BreadcrumbItem';
@@ -22,9 +21,8 @@ const MAX_ITEMS_TO_SHOW_BEFORE_COLLAPSE = 1;
 
 const Breadcrumb: React.FC<Props> = props => {
   const { children, data = [] } = props;
-  const theme = useTheme();
   const passDataToRouterLink = ({ to, label }: BreadcrumbItemData) => (
-    <Link css={breadcrumbLinkStyles()(theme)} key={to} to={to}>
+    <Link css={breadcrumbLinkStyles()} key={to} to={to}>
       {label}
     </Link>
   );
@@ -78,7 +76,7 @@ const Breadcrumb: React.FC<Props> = props => {
   );
 
   return (
-    <ol aria-label="Breadcrumb" css={breadcrumbStyles()(theme)}>
+    <ol aria-label="Breadcrumb" css={breadcrumbStyles()}>
       {dataItems.map(getBreadcrumbItem)}
     </ol>
   );

src/components/Breadcrumb/BreadcrumbCollapsed/BreadcrumbCollapsed.tsx

@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/core';
 import uniqueId from 'lodash/uniqueId';
 import * as React from 'react';
-import useTheme from '../../../hooks/useTheme';
 import Separator from '../../Breadcrumb/Separator/Separator';
 import Icon from '../../Icon';
 import { optionsStyle } from '../../Menu/Menu.style';
@@ -23,19 +22,18 @@ type Props = {
 const BreadcrumbCollapsed: React.FC<Props> = props => {
   const [open, setOpen] = React.useState<boolean>(false);
   const { collapsedItems } = props;
-  const theme = useTheme();
   const expandHandler = () => {
     setOpen(prevState => !prevState);
   };
 
   const listItems = collapsedItems.map(item => (
-    <li key={uniqueId('collapsed_')} css={collapsedItemStyles()(theme)}>
+    <li key={uniqueId('collapsed_')} css={collapsedItemStyles()}>
       {item}
     </li>
   ));
 
   const collapsedItemsList = (
-    <ul style={inlineBreadcrumbWrapperStyles} css={optionsStyle({ menuPosition: 'left' })(theme)}>
+    <ul style={inlineBreadcrumbWrapperStyles} css={optionsStyle({ menuPosition: 'left' })}>
       {listItems}
     </ul>
   );
@@ -50,7 +48,7 @@ const BreadcrumbCollapsed: React.FC<Props> = props => {
       cssStyles={ClickAwayListenerStyle}
     >
       <div css={breadcrumbCollapsedWrapperStyles()}>
-        <span css={breadcrumbCollapsedStyles({ open })(theme)} onClick={expandHandler}>
+        <span css={breadcrumbCollapsedStyles({ open })} onClick={expandHandler}>
           <Icon name="dotsVertical" size={22} color={iconColor} />
         </span>
         <Separator />

src/components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.tsx

@@ -3,7 +3,6 @@ import { jsx } from '@emotion/core';
 import React from 'react';
 import Separator from 'components/Breadcrumb/Separator/Separator';
 import { breadcrumbItemStyles } from './BreadcrumbItem.style';
-import useTheme from 'hooks/useTheme';
 import BreadcrumbAdvancedItem from './BreadcrumbAdvancedItem';
 
 type Props = {
@@ -27,7 +26,6 @@ const BreadcrumbItem: React.FC<Props> = props => {
     onChangeHandler,
     lastItemLabel,
   } = props;
-  const theme = useTheme();
   const renderComponentBasedOnOptions = options ? (
     <BreadcrumbAdvancedItem
       onChangeHandler={onChangeHandler}
@@ -40,7 +38,7 @@ const BreadcrumbItem: React.FC<Props> = props => {
 
   return (
     <li>
-      <div css={breadcrumbItemStyles({ active: isLastItem })(theme)}>
+      <div css={breadcrumbItemStyles({ active: isLastItem })}>
         {renderComponentBasedOnOptions}
         <Separator isLastItem={isLastItem} />
       </div>

src/components/Breadcrumb/Separator/Separator.tsx

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import * as React from 'react';
-import useTheme from '../../../hooks/useTheme';
 import Icon from '../../Icon';
 import { separatorStyles } from './Separator.style';
 
@@ -12,11 +11,10 @@ type Props = {
 
 const Separator: React.FC<Props> = props => {
   const { isLastItem = false } = props;
-  const theme = useTheme();
   if (isLastItem) return null;
 
   return (
-    <span css={separatorStyles()(theme)}>
+    <span css={separatorStyles()}>
       <Icon name={'arrowRight'} color="lightGray700" />
     </span>
   );

src/components/Breadcrumb/__snapshots__/Breadcrumb.stories.storyshot

@@ -33,13 +33,7 @@ exports[`Storyshots Design System/Breadcrumb Advanced Breadcrumbs with options p
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -156,12 +150,7 @@ exports[`Storyshots Design System/Breadcrumb Advanced Breadcrumbs with options p
                     className="css-1ndrhvc-Button"
                   >
                     <div
-                      style={
-                        Object {
-                          "marginLeft": "0.5rem",
-                          "marginRight": "1rem",
-                        }
-                      }
+                      className="css-1sbca9g-Button"
                     >
                       <span
                         className="css-1gnbc76-Icon"
@@ -219,13 +208,7 @@ exports[`Storyshots Design System/Breadcrumb Breadcrumb showcase 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -349,12 +332,7 @@ exports[`Storyshots Design System/Breadcrumb Breadcrumb showcase 1`] = `
                       className="css-1ndrhvc-Button"
                     >
                       <div
-                        style={
-                          Object {
-                            "marginLeft": "0.5rem",
-                            "marginRight": "1rem",
-                          }
-                        }
+                        className="css-1sbca9g-Button"
                       >
                         <span
                           className="css-1gnbc76-Icon"
@@ -413,13 +391,7 @@ exports[`Storyshots Design System/Breadcrumb Simple Breadcrumbs 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -520,13 +492,7 @@ exports[`Storyshots Design System/Breadcrumb Simple Breadcrumbs with options 1`]
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={

src/components/Button/Button.tsx

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import * as React from 'react';
-import useTheme from '../../hooks/useTheme';
 import { EventProps } from '../../utils/common';
 import { generateTestDataId } from '../../utils/helpers';
 import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
@@ -40,7 +39,6 @@ const Button: React.FC<Props & TestProps & EventProps> = props => {
     onClick,
     onBlur,
   } = props;
-  const theme = useTheme();
 
   return (
     <button
@@ -53,7 +51,7 @@ const Button: React.FC<Props & TestProps & EventProps> = props => {
         disabled,
         childrenCount: React.Children.count(children),
         iconAlign,
-      })(theme)}
+      })}
       onClick={onClick}
       onBlur={onBlur}
       disabled={disabled}
@@ -67,19 +65,19 @@ const Button: React.FC<Props & TestProps & EventProps> = props => {
           disabled,
           hasChildren: Boolean(React.Children.count(children)),
           iconAlign,
-        })(theme)}
+        })}
       >
         {icon && (
           <div
-            style={iconStyle({
+            css={iconStyle({
               type,
               filled,
               size,
               icon,
               disabled,
               hasChildren: Boolean(React.Children.count(children)),
               iconAlign,
-            })(theme)}
+            })}
           >
             {icon}
           </div>

src/components/Button/__snapshots__/Button.stories.storyshot

@@ -33,13 +33,7 @@ exports[`Storyshots Design System/Button Button Colors 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -173,13 +167,7 @@ exports[`Storyshots Design System/Button Button Sizes 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -283,12 +271,7 @@ exports[`Storyshots Design System/Button Button with icon 1`] = `
       className="css-1yy8u54-Button"
     >
       <div
-        style={
-          Object {
-            "marginLeft": "1rem",
-            "marginRight": "0.5rem",
-          }
-        }
+        className="css-hy13us-Button"
       >
         <img
           height="16"
@@ -381,13 +364,7 @@ exports[`Storyshots Design System/Button Icon Button Sizes 1`] = `
     </button>
   </div>
   <div
-    style={
-      Object {
-        "display": "flex",
-        "flexDirection": "row",
-        "flexWrap": "wrap",
-      }
-    }
+    className="css-ptimel-Stack"
   >
     <div
       style={
@@ -405,12 +382,7 @@ exports[`Storyshots Design System/Button Icon Button Sizes 1`] = `
           className="css-1yy8u54-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "1rem",
-                "marginRight": "0.5rem",
-              }
-            }
+            className="css-hy13us-Button"
           >
             <img
               height="16"
@@ -438,12 +410,7 @@ exports[`Storyshots Design System/Button Icon Button Sizes 1`] = `
           className="css-1yy8u54-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "1rem",
-                "marginRight": "0.5rem",
-              }
-            }
+            className="css-hy13us-Button"
           >
             <img
               height="16"
@@ -471,12 +438,7 @@ exports[`Storyshots Design System/Button Icon Button Sizes 1`] = `
           className="css-1yy8u54-Button"
         >
           <div
-            style={
-              Object {
-                "marginLeft": "0.5rem",
-                "marginRight": "0.5rem",
-              }
-            }
+            className="css-1qy2jjj-Button"
           >
             <img
               height="16"

src/components/CheckBox/CheckBox.tsx

@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/core';
 import * as React from 'react';
 import { ChangeEvent } from 'react';
-import useTheme from '../../hooks/useTheme';
 import { generateUniqueID } from '../../utils/helpers';
 import { checkboxStyle, checkboxWrapperStyle, labelStyle, wrapperStyle } from './CheckBox.style';
 
@@ -27,7 +26,6 @@ const CheckBox: React.FC<Props> = ({
   intermediate = false,
 }) => {
   const [isChecked, setIsChecked] = React.useState(checked);
-  const theme = useTheme();
   const id = generateUniqueID();
 
   const handleInputChange = (event: ChangeEvent) => {
@@ -43,10 +41,10 @@ const CheckBox: React.FC<Props> = ({
   };
 
   return (
-    <span css={wrapperStyle({ disabled })(theme)}>
-      <span css={checkboxWrapperStyle()(theme)}>
+    <span css={wrapperStyle({ disabled })}>
+      <span css={checkboxWrapperStyle()}>
         <input
-          css={checkboxStyle({ intermediate, checked })(theme)}
+          css={checkboxStyle({ intermediate, checked })}
           id={`styled-checkbox-${id}`}
           type="checkbox"
           onChange={handleInputChange}
@@ -55,7 +53,7 @@ const CheckBox: React.FC<Props> = ({
         />
         <label htmlFor={`styled-checkbox-${id}`} />
       </span>
-      {label && <span css={labelStyle()(theme)}>{label}</span>}
+      {label && <span css={labelStyle()}>{label}</span>}
     </span>
   );
 };