interpolate Box component into oneColor as children

src/client/modules/color/components/Color/index.jsx

@@ -42,15 +42,22 @@ const Color = ({
       {selectedColor && (
         <OneColor
           id={selectedColor.get('id')}
-          username={selectedColor.get('username')}
-          starNum={selectedColor.get('star')}
           value={selectedColor.get('color')}
-          starred={liked.get(selectedId)}
-          onCopy={onCopy}
-          onLike={onLikeLocal}
-          onDownload={onDownload}
           onShare={onShare}
-        />
+          onDownload={onDownload}
+        >
+          <Box
+            vertical={isVertical}
+            starred={liked.get(selectedId)}
+            id={selectedColor.get('id')}
+            username={selectedColor.get('username')}
+            starNum={selectedColor.get('star')}
+            value={selectedColor.get('color')}
+            onClickLike={onLikeLocal}
+            onClickText={onCopy}
+            showUsername
+          />
+        </OneColor>
       )}
       <div className={style.text}>
         {!loading && colorNotFound && (

src/client/modules/color/components/OneColor/index.jsx

@@ -1,36 +1,13 @@
 import PropTypes from 'prop-types';
-import Box from '../Box';
 import style from './style.sass';
-import useLayoutContext from '../../../../../hooks/useLayoutContext';
 import useTranslationContext from '../../../../../hooks/useTranslationContext';
 
-const OneColor = ({
-  starred,
-  id,
-  value,
-  starNum,
-  username,
-  onLike,
-  onCopy,
-  onShare,
-  onDownload,
-}) => {
-  const [isVertical] = useLayoutContext();
+const OneColor = ({ id, value, children, onShare, onDownload }) => {
   const [language] = useTranslationContext();
   return (
     <div className={style.center}>
       <div>
-        <Box
-          vertical={isVertical}
-          starred={starred}
-          id={id}
-          username={username}
-          starNum={starNum}
-          value={value}
-          onClickLike={onLike}
-          onClickText={onCopy}
-          showUsername
-        />
+        {children}
         <div className={style.center}>
           <button
             onClick={() => onDownload(id, value)}
@@ -75,13 +52,9 @@ const OneColor = ({
 };
 
 OneColor.propTypes = {
-  starred: PropTypes.bool,
   id: PropTypes.string.isRequired,
-  username: PropTypes.string,
-  starNum: PropTypes.number,
   value: PropTypes.string.isRequired,
-  onLike: PropTypes.func.isRequired,
-  onCopy: PropTypes.func.isRequired,
+  children: PropTypes.element.isRequired,
   onShare: PropTypes.func.isRequired,
   onDownload: PropTypes.func.isRequired,
 };

src/client/modules/color/components/OneColor/index.spec.jsx

@@ -1,36 +1,29 @@
 import { render, fireEvent } from 'test-utils';
-import Box from '.';
+import OneColorWrapper from '.';
 import { boxInfo } from '../../../../../testing/dataMock';
 
 describe('render properly', () => {
-  const likeCb = jest.fn();
   const shareCb = jest.fn();
   const downloadCb = jest.fn();
 
   test('render properly with click', () => {
-    const { container, getByText } = render(
-      <Box
+    const { getByText } = render(
+      <OneColorWrapper
         id={boxInfo.id}
-        username={boxInfo.username}
         value={boxInfo.color}
-        starNum={boxInfo.star}
-        starred
-        onLike={likeCb}
-        onCopy={jest.fn()}
         onShare={shareCb}
         onDownload={downloadCb}
-      />
+      >
+        <div />
+      </OneColorWrapper>
     );
 
-    fireEvent.click(getByText('Red Heart'));
     fireEvent.click(getByText('Download'));
     fireEvent.click(getByText('E-Mail'));
     fireEvent.click(getByText('FaceBook'));
     fireEvent.click(getByText('Twitter'));
-    fireEvent.click(container.querySelector('ul'));
 
-    expect(likeCb).toBeCalled();
-    expect(shareCb).toBeCalled();
-    expect(downloadCb).toBeCalled();
+    expect(shareCb).toBeCalledTimes(3);
+    expect(downloadCb).toBeCalledTimes(1);
   });
 });