diff --git a/README.md b/README.md index 22d15bb..dc5fa6e 100644 --- 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 = () => ( - + Content ); @@ -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) => ( - - - This is the cookie info - - -); -``` - ### 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 diff --git a/__tests__/index.test.js b/__tests__/index.test.js index d807cb3..1d159d7 100644 --- 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 index ab0c461..f80e114 100644 --- a/src/Base/Base.test.tsx +++ b/src/Base/Base.test.tsx @@ -9,7 +9,6 @@ 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() }); @@ -17,7 +16,7 @@ describe("Base", () => { it("renders correctly", () => { const tree = shallow( - +
Foo
, @@ -29,13 +28,7 @@ describe("Base", () => { it("renders correctly without header", () => { const tree = shallow( - +
Foo
, @@ -47,13 +40,7 @@ describe("Base", () => { it("renders with drawer open", () => { const tree = shallow( - +
Foo
, @@ -65,7 +52,7 @@ describe("Base", () => { it("click on title", () => { const tree = shallow( - +
Foo
, @@ -79,7 +66,7 @@ describe("Base", () => { it("click on menu icon if open changes state", () => { const tree = shallow( - +
Foo
, @@ -93,7 +80,7 @@ describe("Base", () => { it("click on menu icon if closed changes state", () => { const tree = shallow( - +
Foo
, @@ -103,19 +90,4 @@ describe("Base", () => { expect(tree).toMatchSnapshot(); }); - - it("call function when cookie is accepted", () => { - const tree = shallow( - - - -
Foo
- -
, - ); - - tree.find(CookieInfo).find(Button).simulate("click"); - - expect(tree).toMatchSnapshot(); - }); }); diff --git a/src/Base/Base.tsx b/src/Base/Base.tsx index 742b587..8929dd3 100644 --- a/src/Base/Base.tsx +++ b/src/Base/Base.tsx @@ -1,6 +1,6 @@ import React from "react"; -import Cookie from "../CookieInfo/Cookie"; import BaseBranch from "./BaseBranch"; + type WithBaseProps = { title: string; menuOpen?: boolean; @@ -8,14 +8,12 @@ type WithBaseProps = { 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 index 0e40867..2a83cb4 100644 --- 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 = ({ menuData, isHeaderFixed, onClick, - cookieInfoOpen, handleDrawerOpen, handleDrawerClose, - onCookieInfoAccept, redirectTo, rightContent, hasHeader = true, @@ -85,17 +76,12 @@ const BaseBranch: React.SFC = ({ onClick={onClick} isOpen={open} isFixed={isHeaderFixed} - isCookieInfoOpen={cookieInfoOpen} > {rightContent || null} )} -
+
{hasHeader && ( = ({ > {React.Children.map(children, (child) => React.cloneElement(child as any, { - isOpen: cookieInfoOpen, - onAccept: onCookieInfoAccept, ...rest, }), )} @@ -125,7 +109,6 @@ const BaseBranch: React.SFC = ({ 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 deleted file mode 100644 index 78ddbb7..0000000 --- a/src/CookieInfo/Cookie.test.ts +++ /dev/null @@ -1,31 +0,0 @@ -import Cookie from "./Cookie"; - -describe("CookieInfo/Cookie", () => { - const COOKIE_VALUE = "foocookiefoo"; - - it("gets undefined cookie", () => { - const returnValue = Cookie.getCookie(); - - expect(returnValue).toBe(undefined); - }); - - it("gets predefined cookie", () => { - document.cookie = `cookie_concent=${COOKIE_VALUE}`; - - const returnValue = Cookie.getCookie(); - - expect(returnValue).toBe(true); - }); - - it("sets cookie", () => { - Cookie.setCookie(COOKIE_VALUE); - - expect(document.cookie).toBe(`cookie_concent=${COOKIE_VALUE}`); - }); - - it("gets cookie value correctly", () => { - const returnValue = Cookie.getCookie(); - - expect(returnValue).toBe(COOKIE_VALUE); - }); -}); diff --git a/src/CookieInfo/Cookie.tsx b/src/CookieInfo/Cookie.tsx deleted file mode 100644 index fc58c18..0000000 --- a/src/CookieInfo/Cookie.tsx +++ /dev/null @@ -1,29 +0,0 @@ -class Cookie { - private value: any; - - constructor() { - this.value = undefined; - } - getCookie() { - if (this.value !== undefined) { - return this.value; - } - const value = `; ${document.cookie}`; - const parts = value.split("; cookie_concent="); - if (parts.length < 2) { - return undefined; - } - const concentValue = parts.pop()?.split(";").shift() !== "false"; - - this.value = concentValue; - return concentValue; - } - - setCookie(value: any) { - this.value = value; - const exdate = new Date(); - exdate.setDate(exdate.getDate() + 365); - document.cookie = `cookie_concent=${value};expires=${exdate.toUTCString()};path=/`; - } -} -export default new Cookie(); diff --git a/src/CookieInfo/CookieInfo.test.tsx b/src/CookieInfo/CookieInfo.test.tsx deleted file mode 100644 index 0a7fb26..0000000 --- a/src/CookieInfo/CookieInfo.test.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react"; -import Enzyme, { shallow } from "enzyme"; -import Adapter from "enzyme-adapter-react-16"; -import { Button } from "@material-ui/core"; - -import CookieInfo from "."; - -Enzyme.configure({ adapter: new Adapter() }); - -describe("Component Info", () => { - it("renders correctly", () => { - const tree = shallow(Foo); - - expect(tree).toMatchSnapshot(); - }); - - it("click away", () => { - const mockCallBack = jest.fn(); - - const cookieInfo = shallow( - - Foo - , - ); - - cookieInfo.find(Button).simulate("click"); - - expect(mockCallBack).toHaveBeenCalled(); - }); -}); diff --git a/src/CookieInfo/CookieInfo.tsx b/src/CookieInfo/CookieInfo.tsx deleted file mode 100644 index 3fe4668..0000000 --- a/src/CookieInfo/CookieInfo.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from "react"; -import classNames from "classnames"; -import { Button, withStyles } from "@material-ui/core"; -import Cookie from "./Cookie"; - -const styles = (theme: any) => ({ - root: { - position: "fixed", - top: 0, - left: 0, - right: 0, - zIndex: 3000, - display: "flex", - backgroundColor: theme.palette.secondary.main, - paddingTop: theme.spacing(), - paddingBottom: theme.spacing(), - paddingLeft: theme.spacing(3), - paddingRight: theme.spacing(3), - transform: "translate(0, -100%)", - opacity: 0, - transition: "transform 0.25s, opacity 0s 0.25s", - }, - rootActive: { - transform: "translate(0, 0)", - opacity: 1, - }, - content: { - display: "flex", - flex: 1, - opacity: 1, - alignItems: "center", - }, - button: { - float: "right", - }, -}); - -type CookieInfoProps = { - isOpen?: boolean; - onAccept?: (...args: any[]) => any; - buttonText?: string; - classes: { - [key: string]: string; - }; -}; - -class CookieInfo extends React.Component { - constructor(props: CookieInfoProps) { - super(props); - this.handleClick = this.handleClick.bind(this); - } - handleClick() { - const { onAccept } = this.props; - if (onAccept) { - onAccept(); - } - Cookie.setCookie(true); - } - render() { - const { isOpen, buttonText, classes, children } = this.props; - const className = classNames({ - [classes.root]: true, - [classes.rootActive]: isOpen, - }); - return ( -
-
{children}
- - -
- ); - } -} - -export default withStyles(styles as any)(CookieInfo); diff --git a/src/CookieInfo/__snapshots__/CookieInfo.test.tsx.snap b/src/CookieInfo/__snapshots__/CookieInfo.test.tsx.snap deleted file mode 100644 index 0a286e0..0000000 --- a/src/CookieInfo/__snapshots__/CookieInfo.test.tsx.snap +++ /dev/null @@ -1,17 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Component Info renders correctly 1`] = ` - - Foo - -`; diff --git a/src/CookieInfo/index.ts b/src/CookieInfo/index.ts deleted file mode 100644 index 947e0f2..0000000 --- a/src/CookieInfo/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import CookieInfo from "./CookieInfo"; - -export default CookieInfo; diff --git a/src/Header/Header.test.tsx b/src/Header/Header.test.tsx index 750f193..591d301 100644 --- a/src/Header/Header.test.tsx +++ b/src/Header/Header.test.tsx @@ -9,21 +9,6 @@ it("renders correctly", () => { isOpen title="Header" isFixed - isCookieInfoOpen - onDrawerOpen={() => {}} - onClick={() => {}} - />, - ); - - expect(tree).toMatchSnapshot(); -}); - -it("renders correctly with closed", () => { - const tree = shallow( -
{}} onClick={() => {}} />, diff --git a/src/Header/Header.tsx b/src/Header/Header.tsx index 8606b4b..3cdf190 100644 --- a/src/Header/Header.tsx +++ b/src/Header/Header.tsx @@ -16,15 +16,13 @@ const styles = (theme: any) => ({ width: "100%", }, appBar: { + position: "relative", transition: theme.transitions.create(["margin", "width"], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), transform: "translate(0, 0)", }, - appBarWithCookieInfo: { - transform: `translate(0, ${theme.spacing(6)}px)`, - }, appBarShift: { width: `calc(100% - ${drawerWidth}px)`, transition: theme.transitions.create(["margin", "width"], { @@ -55,7 +53,6 @@ type HeaderProps = { isOpen?: boolean; title: string; isFixed?: boolean; - isCookieInfoOpen?: boolean; onDrawerOpen: (...args: any[]) => any; onClick: (...args: any[]) => any; classes: { @@ -68,7 +65,6 @@ const Header: React.SFC = ({ isOpen, isFixed = false, onDrawerOpen, - isCookieInfoOpen = false, onClick, children, classes, @@ -77,7 +73,6 @@ const Header: React.SFC = ({ @@ -110,4 +105,4 @@ Header.defaultProps = { isOpen: false, }; -export default withStyles(styles)(Header); +export default withStyles(styles as any)(Header); diff --git a/src/app.ts b/src/app.ts index 3dd9a91..97c2872 100644 --- a/src/app.ts +++ b/src/app.ts @@ -3,7 +3,6 @@ export { default as AppContainer } from "./AppContainer"; export { default as BackButton } from "./BackButton"; export { default as Base } from "./Base"; export { default as Confirm } from "./Confirm"; -export { default as CookieInfo } from "./CookieInfo"; export { default as Drawer } from "./Drawer"; export { default as Snackbar } from "./Snackbar"; export { default as Form } from "./Form"; diff --git a/src/tests/Container.tsx b/src/tests/Container.tsx index 64305d3..e9194d4 100644 --- a/src/tests/Container.tsx +++ b/src/tests/Container.tsx @@ -1,11 +1,9 @@ import React from "react"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; -import Typography from "@material-ui/core/Typography"; import indigo from "@material-ui/core/colors/indigo"; import amber from "@material-ui/core/colors/amber"; import AppContainer from "../AppContainer"; import NoMatch from "../NoMatch"; -import CookieInfo from "../CookieInfo"; import Page from "./pages"; import General from "./General"; import List from "./pages/list"; @@ -66,10 +64,6 @@ const Container = () => ( render={(props) => ( - - - This is the cookie info - )} /> diff --git a/src/tests/General.tsx b/src/tests/General.tsx index 40d3878..ec4aa58 100644 --- a/src/tests/General.tsx +++ b/src/tests/General.tsx @@ -1,6 +1,5 @@ import React, { Fragment } from "react"; import { Typography, Button } from "@material-ui/core"; -import CookieInfo from "../CookieInfo"; import Confirm from "../Confirm"; type GeneralState = { @@ -26,10 +25,6 @@ class General extends React.Component<{}, GeneralState> { const { dialogOpen } = this.state; return ( - - This is the cookie info - - Confirm { const classes = useStyles(); return ( - +
{children}
);