diff --git a/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js b/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..49c58c1e817fc408f85f2c2ac580f5d54dca26fb
--- /dev/null
+++ b/wax-prosemirror-components/src/components/findAndReplace/ExandedFindAndReplaceComponent.js
@@ -0,0 +1,95 @@
+/* eslint react/prop-types: 0 */
+
+import React from 'react';
+import styled from 'styled-components';
+import { grid, th } from '@pubsweet/ui-toolkit';
+import Icon from '../../helpers/Icon';
+
+const Wrapper = styled.div`
+ font-size: 15px;
+ width: 400px;
+ height: 300px;
+ background: ${th('colorBackgroundHue')};
+ border-radius: 1.03093% / 8%;
+ box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px 0px,
+ rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;
+ transform: rotate(0deg);
+ transform-origin: 50% 50% 0px;
+ padding: ${grid(2)};
+`;
+
+const FindTitle = styled.span`
+ font-size: 16px;
+ color: #4b5871;
+`;
+
+const TitleContainer = styled.div`
+ display: flex;
+ flex-direction: row;
+`;
+
+const StyledIcon = styled(Icon)`
+ height: 24px;
+ width: 24px;
+ cursor: pointer;
+`;
+
+const CloseWrapper = styled.div`
+ margin-left: auto;
+ border-left: 1px solid #e0e2e7;
+`;
+
+const SearchInput = styled.input`
+ font-size: 15px;
+ font-weight: 400;
+ border-radius: 2px;
+ border: none;
+ padding: ${grid(1)};
+ width: 73%;
+ box-shadow: inset 0 0 0 1px rgba(27, 43, 75, 0.28);
+ ::placeholder {
+ color: #d8dae0;
+ }
+ &:focus {
+ outline: none;
+ }
+`;
+
+const ReplaceInput = styled.input`
+ font-size: 15px;
+ font-weight: 400;
+ border-radius: 2px;
+ border: none;
+ padding: ${grid(1)};
+ width: 73%;
+ box-shadow: inset 0 0 0 1px rgba(27, 43, 75, 0.28);
+ ::placeholder {
+ color: #d8dae0;
+ }
+ &:focus {
+ outline: none;
+ }
+`;
+
+const ExandedFindAndReplaceComponent = ({ close }) => {
+ const closeFind = () => {
+ close();
+ };
+
+ return (
+ <Wrapper>
+ <TitleContainer>
+ <FindTitle> Find & Replace </FindTitle>
+ <CloseWrapper onClick={closeFind}>
+ <StyledIcon name="close" />
+ </CloseWrapper>
+ </TitleContainer>
+ <div>Find</div>
+ <SearchInput type="text" placeholder="Something is this doc" />
+ <div>Replace with</div>
+ <ReplaceInput type="text" placeholder="Replace phrase" />
+ </Wrapper>
+ );
+};
+
+export default ExandedFindAndReplaceComponent;
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js
index 9d4c0bc6dd5ceafc791473865a50215f924e2572..ec6c74c089ad34b0034334377cd0a613e45ed000 100644
--- a/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js
@@ -1,87 +1,23 @@
/* eslint react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import styled from 'styled-components';
import { grid, th } from '@pubsweet/ui-toolkit';
import Icon from '../../helpers/Icon';
-
-const Wrapper = styled.div`
- width: 400px;
- background: ${th('colorBackgroundHue')};
- border-radius: 1.03093% / 8%;
- box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px 0px,
- rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;
- transform: rotate(0deg);
- transform-origin: 50% 50% 0px;
- padding: ${grid(2)};
-`;
-
-const SingleRow = styled.div`
- display: flex;
- flex-direction: row;
-`;
-
-const SearchInput = styled.input`
- font-size: 15px;
- font-weight: 400;
- border-radius: 2px;
- border: none;
- padding: ${grid(1)};
- width: 73%;
- box-shadow: inset 0 0 0 1px rgba(27, 43, 75, 0.28);
- ::placeholder {
- color: #d8dae0;
- }
- &:focus {
- outline: none;
- }
-`;
-
-const StyledIcon = styled(Icon)`
- height: 24px;
- width: 24px;
- cursor: pointer;
-`;
-
-const CloseWrapper = styled.div`
- border-left: 1px solid #e0e2e7;
- margin-left: 1%;
-`;
-
-const ExpandedWrapper = styled.div``;
+import FindComponent from './FindComponent';
+import ExandedFindAndReplaceComponent from './ExandedFindAndReplaceComponent';
const FindAndReplaceComponent = ({ close }) => {
- const onChange = () => {};
-
- const closeFind = () => {
- close();
- };
+ const [isExpanded, setExpanded] = useState(false);
- const showExpanded = () => {
- console.log('expanded');
+ const expand = () => {
+ setExpanded(!isExpanded);
};
- return (
- <Wrapper>
- <SingleRow>
- <SearchInput
- type="text"
- placeholder="Find"
- value=""
- onChange={onChange}
- />
- <StyledIcon name="navigatePrevious" />
- <StyledIcon name="navigateNext" />
-
- <ExpandedWrapper onClick={showExpanded}>
- <StyledIcon name="more" />
- </ExpandedWrapper>
-
- <CloseWrapper onClick={closeFind}>
- <StyledIcon name="close" />
- </CloseWrapper>
- </SingleRow>
- </Wrapper>
+ return isExpanded ? (
+ <ExandedFindAndReplaceComponent close={close} />
+ ) : (
+ <FindComponent close={close} expand={expand} />
);
};
diff --git a/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..d0bba955e99ac6c39513b4e3ff9dca9ea92f7803
--- /dev/null
+++ b/wax-prosemirror-components/src/components/findAndReplace/FindComponent.js
@@ -0,0 +1,89 @@
+/* eslint react/prop-types: 0 */
+
+import React from 'react';
+import styled from 'styled-components';
+import { grid, th } from '@pubsweet/ui-toolkit';
+import Icon from '../../helpers/Icon';
+
+const Wrapper = styled.div`
+ width: 400px;
+ background: ${th('colorBackgroundHue')};
+ border-radius: 1.03093% / 8%;
+ box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px 0px,
+ rgba(9, 30, 66, 0.31) 0px 0px 1px 0px;
+ transform: rotate(0deg);
+ transform-origin: 50% 50% 0px;
+ padding: ${grid(2)};
+`;
+
+const SingleRow = styled.div`
+ display: flex;
+ flex-direction: row;
+`;
+
+const SearchInput = styled.input`
+ font-size: 15px;
+ font-weight: 400;
+ border-radius: 2px;
+ border: none;
+ padding: ${grid(1)};
+ width: 73%;
+ box-shadow: inset 0 0 0 1px rgba(27, 43, 75, 0.28);
+ ::placeholder {
+ color: #d8dae0;
+ }
+ &:focus {
+ outline: none;
+ }
+`;
+
+const StyledIcon = styled(Icon)`
+ height: 24px;
+ width: 24px;
+ cursor: pointer;
+`;
+
+const CloseWrapper = styled.div`
+ border-left: 1px solid #e0e2e7;
+ margin-left: 1%;
+`;
+
+const ExpandedWrapper = styled.div``;
+
+const FindComponent = ({ close, expand }) => {
+ const onChange = () => {};
+
+ const closeFind = () => {
+ close();
+ };
+
+ const showExpanded = () => {
+ console.log('expanded');
+ expand();
+ };
+
+ return (
+ <Wrapper>
+ <SingleRow>
+ <SearchInput
+ type="text"
+ placeholder="Find"
+ value=""
+ onChange={onChange}
+ />
+ <StyledIcon name="navigatePrevious" />
+ <StyledIcon name="navigateNext" />
+
+ <ExpandedWrapper onClick={showExpanded}>
+ <StyledIcon name="more" />
+ </ExpandedWrapper>
+
+ <CloseWrapper onClick={closeFind}>
+ <StyledIcon name="close" />
+ </CloseWrapper>
+ </SingleRow>
+ </Wrapper>
+ );
+};
+
+export default FindComponent;