Remove cookie info element

react-backoffice · Jul 17, 2020 · df03648 · df03648
1 parent 68fe661
commit df03648
Show file tree

Hide file tree

Showing 17 changed files with 31 additions and 335 deletions.
diff --git a/README.md b/README.md
@@ -97,13 +97,12 @@ Children are rendered as content.
 - `rightContent?: node`, React element that is rendered on the right side of the header
 - `isHeaderFixed?: boolean`, Is header fixed?, default `true`
 - `hasHeader?: boolean`, Is header included, default `true`
-- `hasCookieInfo?: boolean`, Is there a cookieinfo in the project, default: `false`
 
 ```javascript
 import { Base } from "backoffice";
 
 const base = () => (
-  <Base title="Foobar" menuData={[]} hasCookieInfo>
+  <Base title="Foobar" menuData={[]}>
     Content
   </Base>
 );
@@ -152,29 +151,6 @@ const confirm = ({ isOpen, onConfirm }) => (
 );
 ```
 
-### CookieInfo
-
-Asks the user if they want to obey the fact that you are using cookies. Sets a cookie with the name `cookie_concent` and the value of `true` if the user accepts. Otherwise set to `false`.
-If you use CookieInfo please make sure to set the attribute `hasCookieInfo` to `Base`.
-
-Children are used as content.
-
-- `buttonText: string`, text to display on the button
-- Internal: `isOpen: boolean`, state of the cookieInfo, handled by `Base`, default `false`
-- Internal: `onAccept: function`, when accepted, provided by `Base`
-
-```javascript
-import { Base, CookieInfo } from "backoffice";
-
-const page = (props) => (
-  <Base hasCookieInfo {...props}>
-    <CookieInfo buttonText="Accept" isOpen={isOpen}>
-      This is the cookie info
-    </CookieInfo>
-  </Base>
-);
-```
-
 ### Dashboard
 
 Dashboard-like overview page
@@ -322,7 +298,6 @@ Header element, used by `Base` component.
 - `isOpen?: boolean`, is sidebar opened?, default `false`
 - `title: string`, title to show next to menu icon
 - `isFixed: boolean`, should the header be fixed when scrolling?
-- `isCookieInfoOpen: boolean`, is the cookie info bar visible?
 - `onDrawerOpen: function`, called when menu is toggled
 - `onClick: function`, click on title
 - `children?: Elements`, content which is shown on the right hand side of the header
@@ -337,7 +312,6 @@ const header = ({ onDrawerOpen, onClick }) => (
     onClick={onClick}
     isOpen={false}
     isFixed
-    isCookieInfoOpen={true}
   >
     Beta
   </Header>

diff --git a/__tests__/index.test.js b/__tests__/index.test.js
@@ -1,19 +1,18 @@
-import * as Backoffice from '..'
+import * as Backoffice from "..";
 
-it('has all components', () => {
-  expect(typeof Backoffice.AddButton).toBe('function')
-  expect(typeof Backoffice.AppContainer).toBe('function')
-  expect(typeof Backoffice.BackButton).toBe('function')
-  expect(typeof Backoffice.Base).toBe('function')
-  expect(typeof Backoffice.Confirm).toBe('function')
-  expect(typeof Backoffice.CookieInfo).toBe('function')
-  expect(typeof Backoffice.Drawer).toBe('function')
-  expect(typeof Backoffice.Snackbar).toBe('function')
-  expect(typeof Backoffice.Form).toBe('function')
-  expect(typeof Backoffice.Header).toBe('function')
-  expect(typeof Backoffice.Dashboard).toBe('function')
-  expect(typeof Backoffice.Listing).toBe('function')
-  expect(typeof Backoffice.Menu).toBe('function')
-  expect(typeof Backoffice.NoMatch).toBe('function')
-  expect(typeof Backoffice.Tabs).toBe('function')
-})
+it("has all components", () => {
+  expect(typeof Backoffice.AddButton).toBe("function");
+  expect(typeof Backoffice.AppContainer).toBe("function");
+  expect(typeof Backoffice.BackButton).toBe("function");
+  expect(typeof Backoffice.Base).toBe("function");
+  expect(typeof Backoffice.Confirm).toBe("function");
+  expect(typeof Backoffice.Drawer).toBe("function");
+  expect(typeof Backoffice.Snackbar).toBe("function");
+  expect(typeof Backoffice.Form).toBe("function");
+  expect(typeof Backoffice.Header).toBe("function");
+  expect(typeof Backoffice.Dashboard).toBe("function");
+  expect(typeof Backoffice.Listing).toBe("function");
+  expect(typeof Backoffice.Menu).toBe("function");
+  expect(typeof Backoffice.NoMatch).toBe("function");
+  expect(typeof Backoffice.Tabs).toBe("function");
+});
diff --git a/src/Base/Base.test.tsx b/src/Base/Base.test.tsx
@@ -9,15 +9,14 @@ import Base from ".";
 import menuData from "../tests/data/menu";
 import Header from "../Header";
 import Drawer from "../Drawer";
-import CookieInfo from "../CookieInfo";
 
 Enzyme.configure({ adapter: new Adapter() });
 
 describe("Base", () => {
   it("renders correctly", () => {
     const tree = shallow(
       <MockRouter>
-        <Base title="Foo" menuData={menuData} hasCookieInfo menuOpen>
+        <Base title="Foo" menuData={menuData} menuOpen>
           <div>Foo</div>
         </Base>
       </MockRouter>,
@@ -29,13 +28,7 @@ describe("Base", () => {
   it("renders correctly without header", () => {
     const tree = shallow(
       <MockRouter>
-        <Base
-          title="Foo"
-          menuData={menuData}
-          hasCookieInfo
-          hasHeader={false}
-          menuOpen
-        >
+        <Base title="Foo" menuData={menuData} hasHeader={false} menuOpen>
           <div>Foo</div>
         </Base>
       </MockRouter>,
@@ -47,13 +40,7 @@ describe("Base", () => {
   it("renders with drawer open", () => {
     const tree = shallow(
       <MockRouter>
-        <Base
-          title="Foo"
-          menuData={menuData}
-          hasCookieInfo
-          hasHeader={false}
-          menuOpen
-        >
+        <Base title="Foo" menuData={menuData} hasHeader={false} menuOpen>
           <div>Foo</div>
         </Base>
       </MockRouter>,
@@ -65,7 +52,7 @@ describe("Base", () => {
   it("click on title", () => {
     const tree = shallow(
       <MockRouter>
-        <Base title="Foo" menuData={menuData} hasCookieInfo menuOpen>
+        <Base title="Foo" menuData={menuData} menuOpen>
           <div>Foo</div>
         </Base>
       </MockRouter>,
@@ -79,7 +66,7 @@ describe("Base", () => {
   it("click on menu icon if open changes state", () => {
     const tree = shallow(
       <MockRouter>
-        <Base title="Foo" menuData={menuData} hasCookieInfo menuOpen>
+        <Base title="Foo" menuData={menuData} menuOpen>
           <div>Foo</div>
         </Base>
       </MockRouter>,
@@ -93,7 +80,7 @@ describe("Base", () => {
   it("click on menu icon if closed changes state", () => {
     const tree = shallow(
       <MockRouter>
-        <Base title="Foo" menuData={menuData} hasCookieInfo menuOpen>
+        <Base title="Foo" menuData={menuData} menuOpen>
           <div>Foo</div>
         </Base>
       </MockRouter>,
@@ -103,19 +90,4 @@ describe("Base", () => {
 
     expect(tree).toMatchSnapshot();
   });
-
-  it("call function when cookie is accepted", () => {
-    const tree = shallow(
-      <MockRouter>
-        <Base title="Foo" menuData={menuData} hasCookieInfo menuOpen>
-          <CookieInfo />
-          <div>Foo</div>
-        </Base>
-      </MockRouter>,
-    );
-
-    tree.find(CookieInfo).find(Button).simulate("click");
-
-    expect(tree).toMatchSnapshot();
-  });
 });
diff --git a/src/Base/Base.tsx b/src/Base/Base.tsx
@@ -1,21 +1,19 @@
 import React from "react";
-import Cookie from "../CookieInfo/Cookie";
 import BaseBranch from "./BaseBranch";
+
 type WithBaseProps = {
   title: string;
   menuOpen?: boolean;
   menuData: object[];
   rightContent?: React.ReactNode;
   isHeaderFixed?: boolean;
   hasHeader?: boolean;
-  hasCookieInfo?: boolean;
   history?: {
     [key: string]: any;
   };
 };
 
 type WithBaseState = {
-  cookieInfoOpen: boolean | undefined;
   open: boolean | undefined;
 };
 
@@ -25,21 +23,15 @@ const withBase = (Component: any) =>
       super(props);
       this.state = {
         open: false,
-        cookieInfoOpen: false,
       };
-      if (props.hasCookieInfo && Cookie.getCookie() === undefined) {
-        Cookie.setCookie(false);
-      }
-      this.handleCookieInfoAccept = this.handleCookieInfoAccept.bind(this);
       this.handleDrawerOpen = this.handleDrawerOpen.bind(this);
       this.handleDrawerClose = this.handleDrawerClose.bind(this);
       this.redirectTo = this.redirectTo.bind(this);
       this.onClick = this.onClick.bind(this);
     }
     componentDidMount() {
-      const { hasCookieInfo, menuOpen } = this.props;
+      const { menuOpen } = this.props;
       this.setState({
-        cookieInfoOpen: hasCookieInfo && Cookie.getCookie() === false,
         open: menuOpen,
       });
     }
@@ -67,11 +59,7 @@ const withBase = (Component: any) =>
         history.push(link);
       }
     }
-    handleCookieInfoAccept() {
-      this.setState({
-        cookieInfoOpen: false,
-      });
-    }
+
     render() {
       const { rightContent } = this.props;
       return (
@@ -81,7 +69,6 @@ const withBase = (Component: any) =>
           onClick={this.onClick}
           handleDrawerOpen={this.handleDrawerOpen}
           handleDrawerClose={this.handleDrawerClose}
-          onCookieInfoAccept={this.handleCookieInfoAccept}
           redirectTo={this.redirectTo}
           rightContent={rightContent}
         />

diff --git a/src/Base/BaseBranch.tsx b/src/Base/BaseBranch.tsx
@@ -16,10 +16,6 @@ const styles = (theme: any) => ({
     minHeight: "100vh",
     transition: "0.25s",
   },
-  appFrameWithCookieInfo: {
-    marginTop: theme.spacing(6),
-    minHeight: `calc(100vh - ${theme.spacing(6)}px)`,
-  },
   content: {
     width: `calc(100vw - ${theme.spacing(3) * 2}px)`,
     flexGrow: 1,
@@ -30,7 +26,6 @@ const styles = (theme: any) => ({
       duration: theme.transitions.duration.leavingScreen,
     }),
     height: "calc(100% - 56px)",
-    marginTop: theme.spacing(8),
     marginLeft: -drawerWidth,
   },
   contentShift: {
@@ -47,11 +42,9 @@ type BaseBranchProps = {
   title: string;
   menuData: MenuDataItem[];
   isHeaderFixed?: boolean;
-  cookieInfoOpen?: boolean;
   onClick: (...args: any[]) => any;
   handleDrawerOpen: (...args: any[]) => any;
   handleDrawerClose: (...args: any[]) => any;
-  onCookieInfoAccept: (...args: any[]) => any;
   redirectTo: (...args: any[]) => any;
   rightContent?: JSX.Element;
   hasHeader: boolean;
@@ -66,10 +59,8 @@ const BaseBranch: React.SFC<BaseBranchProps> = ({
   menuData,
   isHeaderFixed,
   onClick,
-  cookieInfoOpen,
   handleDrawerOpen,
   handleDrawerClose,
-  onCookieInfoAccept,
   redirectTo,
   rightContent,
   hasHeader = true,
@@ -85,17 +76,12 @@ const BaseBranch: React.SFC<BaseBranchProps> = ({
         onClick={onClick}
         isOpen={open}
         isFixed={isHeaderFixed}
-        isCookieInfoOpen={cookieInfoOpen}
       >
         {rightContent || null}
       </Header>
     )}
 
-    <div
-      className={classNames(classes.appFrame, {
-        [classes.appFrameWithCookieInfo]: cookieInfoOpen,
-      })}
-    >
+    <div className={classNames(classes.appFrame)}>
       {hasHeader && (
         <Drawer
           onClose={handleDrawerClose}
@@ -112,8 +98,6 @@ const BaseBranch: React.SFC<BaseBranchProps> = ({
       >
         {React.Children.map(children, (child) =>
           React.cloneElement(child as any, {
-            isOpen: cookieInfoOpen,
-            onAccept: onCookieInfoAccept,
             ...rest,
           }),
         )}
@@ -125,7 +109,6 @@ const BaseBranch: React.SFC<BaseBranchProps> = ({
 BaseBranch.defaultProps = {
   open: false,
   isHeaderFixed: false,
-  cookieInfoOpen: false,
 };
 
 export default withStyles(styles as any)(BaseBranch);
diff --git a/src/CookieInfo/Cookie.test.ts b/src/CookieInfo/Cookie.test.ts
diff --git a/src/CookieInfo/Cookie.tsx b/src/CookieInfo/Cookie.tsx