Skip to content

Commit

Permalink
Merge pull request #52 from shubham-thakare/develop
Browse files Browse the repository at this point in the history
Add Date Picker on BMC Screen.
  • Loading branch information
shubham-thakare authored Sep 29, 2022
2 parents 363a28e + d524c98 commit 8f22689
Show file tree
Hide file tree
Showing 16 changed files with 587 additions and 191 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"@testing-library/user-event": "7.2.1",
"html-to-image": "0.1.1",
"react": "16.13.1",
"react-datepicker": "4.8.0",
"react-dom": "16.13.1",
"react-joyride": "2.2.1",
"react-scripts": "3.4.1",
Expand Down
7 changes: 4 additions & 3 deletions src/components/DocContainer/styles/DocContainer.style.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,11 @@ export const DocContainerWrapper = styled.div`
opacity: 0;
transition: 0.1s ease-in-out;
z-index: 10;
background: var(--white-color);
background: var(--black-color);
color: var(--white-color);
& svg {
color: inherit;
color: var(--white-color);
}
}
Expand Down Expand Up @@ -91,6 +92,6 @@ export const DocContainerWrapper = styled.div`
& .add-option:hover,
& .add-edit:hover,
& .full-screen-option:hover {
color: var(--link-hover-color);
color: var(--white-color);
}
`;
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ exports[`DocContainer Component To match snapshot of DocContainer 1`] = `
className="empty-state"
>
<div
className="DocContainerstyle__DocContainerWrapper-sc-106t2xe-1 AKFyq empty-state"
className="DocContainerstyle__DocContainerWrapper-sc-106t2xe-1 ekwiTr empty-state"
>
<Blueprint3.Icon
className="edit-option"
Expand Down Expand Up @@ -230,12 +230,21 @@ exports[`DocContainer Component To match snapshot of DocContainer 1`] = `
key=".0"
>
<div
className="Notestyle__NoteWrapper-sc-2z8c2g-0 hYtmWh undefined print-item"
className="Notestyle__NoteWrapper-sc-2z8c2g-0 fVKaaY undefined print-item"
color="white"
>
<Notestyle__NoteMenuIcon
className="note-menu-icon"
color="white"
>
<div
className="Notestyle__NoteMenuIcon-sc-2z8c2g-3 brUUKT note-menu-icon"
color="white"
/>
</Notestyle__NoteMenuIcon>
<Notestyle__NoteTitle>
<span
className="Notestyle__NoteTitle-sc-2z8c2g-1 gNJdcF"
className="Notestyle__NoteTitle-sc-2z8c2g-1 hYcKCw"
>
Test note 1
</span>
Expand Down Expand Up @@ -279,19 +288,19 @@ exports[`DocContainer Component To match snapshot of DocContainer 1`] = `
"background": "red",
"color": "white",
"description": "Test description",
"key": 1587534693846,
"key": 1664452530471,
"title": "Test note 2",
}
}
key="1587534693846"
key="1664452530471"
>
<Blueprint3.Popover
boundary="scrollParent"
captureDismiss={false}
content={
<NoteMenu
activeKey="keyPartners"
noteKey={1587534693846}
noteKey={1664452530471}
/>
}
defaultIsOpen={false}
Expand Down Expand Up @@ -337,12 +346,21 @@ exports[`DocContainer Component To match snapshot of DocContainer 1`] = `
key=".0"
>
<div
className="Notestyle__NoteWrapper-sc-2z8c2g-0 hYtmWh undefined print-item"
className="Notestyle__NoteWrapper-sc-2z8c2g-0 fVKaaY undefined print-item"
color="white"
>
<Notestyle__NoteMenuIcon
className="note-menu-icon"
color="white"
>
<div
className="Notestyle__NoteMenuIcon-sc-2z8c2g-3 brUUKT note-menu-icon"
color="white"
/>
</Notestyle__NoteMenuIcon>
<Notestyle__NoteTitle>
<span
className="Notestyle__NoteTitle-sc-2z8c2g-1 gNJdcF"
className="Notestyle__NoteTitle-sc-2z8c2g-1 hYcKCw"
>
Test note 2
</span>
Expand Down Expand Up @@ -386,19 +404,19 @@ exports[`DocContainer Component To match snapshot of DocContainer 1`] = `
"background": undefined,
"color": "white",
"description": "Test description",
"key": 1587534693847,
"key": 1664452530472,
"title": "",
}
}
key="1587534693847"
key="1664452530472"
>
<Blueprint3.Popover
boundary="scrollParent"
captureDismiss={false}
content={
<NoteMenu
activeKey="keyPartners"
noteKey={1587534693847}
noteKey={1664452530472}
/>
}
defaultIsOpen={false}
Expand Down Expand Up @@ -443,9 +461,18 @@ exports[`DocContainer Component To match snapshot of DocContainer 1`] = `
key=".0"
>
<div
className="Notestyle__NoteWrapper-sc-2z8c2g-0 hiIQbo undefined print-item"
className="Notestyle__NoteWrapper-sc-2z8c2g-0 kQFybJ undefined print-item"
color="white"
>
<Notestyle__NoteMenuIcon
className="note-menu-icon"
color="white"
>
<div
className="Notestyle__NoteMenuIcon-sc-2z8c2g-3 brUUKT note-menu-icon"
color="white"
/>
</Notestyle__NoteMenuIcon>
<Notestyle__NoteDescription>
<span
className="Notestyle__NoteDescription-sc-2z8c2g-2 ilDHHe"
Expand Down Expand Up @@ -485,19 +512,19 @@ exports[`DocContainer Component To match snapshot of DocContainer 1`] = `
"background": "red",
"color": "white",
"description": "",
"key": 1587534693848,
"key": 1664452530473,
"title": "Test note 2",
}
}
key="1587534693848"
key="1664452530473"
>
<Blueprint3.Popover
boundary="scrollParent"
captureDismiss={false}
content={
<NoteMenu
activeKey="keyPartners"
noteKey={1587534693848}
noteKey={1664452530473}
/>
}
defaultIsOpen={false}
Expand Down Expand Up @@ -543,12 +570,21 @@ exports[`DocContainer Component To match snapshot of DocContainer 1`] = `
key=".0"
>
<div
className="Notestyle__NoteWrapper-sc-2z8c2g-0 hYtmWh undefined print-item"
className="Notestyle__NoteWrapper-sc-2z8c2g-0 fVKaaY undefined print-item"
color="white"
>
<Notestyle__NoteMenuIcon
className="note-menu-icon"
color="white"
>
<div
className="Notestyle__NoteMenuIcon-sc-2z8c2g-3 brUUKT note-menu-icon"
color="white"
/>
</Notestyle__NoteMenuIcon>
<Notestyle__NoteTitle>
<span
className="Notestyle__NoteTitle-sc-2z8c2g-1 gNJdcF"
className="Notestyle__NoteTitle-sc-2z8c2g-1 hYcKCw"
>
Test note 2
</span>
Expand Down
11 changes: 10 additions & 1 deletion src/components/Note/Note.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,12 @@ import {
PopoverPosition,
PopoverInteractionKind,
} from '@blueprintjs/core';
import { NoteWrapper, NoteTitle, NoteDescription } from './styles/Note.style';
import {
NoteWrapper,
NoteTitle,
NoteDescription,
NoteMenuIcon,
} from './styles/Note.style';
import { trimString, AppContext } from '../../utils';
import { DELETE_NOTE, EDIT_NOTE } from '../../actions';
import cmsData from '../../cms';
Expand Down Expand Up @@ -54,6 +59,10 @@ const Note = ({ item, activeKey, ...props }) => {
{...props}
className={`${props.className} print-item`}
>
<NoteMenuIcon
color={item.color}
className="note-menu-icon"
></NoteMenuIcon>
{item.title && item.title.length > 0 && (
<NoteTitle>{item.title}</NoteTitle>
)}
Expand Down
39 changes: 39 additions & 0 deletions src/components/Note/styles/Note.style.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,17 @@ export const NoteWrapper = styled.div`
props.bgColor ? props.bgColor : 'var(--app-background-color)'};
color: ${(props) => props.color};
box-shadow: var(--elevation-2);
cursor: pointer;
${animateFadeIn}
&:hover .note-menu-icon {
opacity: 1;
}
`;

export const NoteTitle = styled.span`
padding: 5px;
padding-right: 15px;
font-weight: bold;
user-select: text;
`;
Expand All @@ -51,3 +57,36 @@ export const NoteDescription = styled.span`
padding: 5px;
user-select: text;
`;

export const NoteMenuIcon = styled.div`
& {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
right: 5px;
top: 5px;
cursor: pointer;
background-color: ${(props) => props.color};
opacity: 0;
}
&:before, &:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
right: 0px;
top: 0px;
border-radius: inherit;
background-color: ${(props) => props.color};
}
&:before {
top: 5px;
}
&:after {
top: 10px;
}
`;
13 changes: 11 additions & 2 deletions src/components/Note/test/__snapshots__/Note.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,21 @@ exports[`Note Component To match snapshot of Note 1`] = `
key=".0"
>
<div
className="Notestyle__NoteWrapper-sc-2z8c2g-0 hYtmWh undefined print-item"
className="Notestyle__NoteWrapper-sc-2z8c2g-0 fVKaaY undefined print-item"
color="white"
>
<Notestyle__NoteMenuIcon
className="note-menu-icon"
color="white"
>
<div
className="Notestyle__NoteMenuIcon-sc-2z8c2g-3 brUUKT note-menu-icon"
color="white"
/>
</Notestyle__NoteMenuIcon>
<Notestyle__NoteTitle>
<span
className="Notestyle__NoteTitle-sc-2z8c2g-1 gNJdcF"
className="Notestyle__NoteTitle-sc-2z8c2g-1 hYcKCw"
>
Test note 1
</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -139,12 +139,16 @@ exports[`Dialog Component To match snapshot of NoteDialog 1`] = `
class="bp3-popover-target full-width"
>
<div
class="Notestyle__NoteWrapper-sc-2z8c2g-0 eyrKAX no-animation print-item"
class="Notestyle__NoteWrapper-sc-2z8c2g-0 gRsqMu no-animation print-item"
color="#000000"
style="max-width: 300px; max-height: 60px;"
>
<div
class="Notestyle__NoteMenuIcon-sc-2z8c2g-3 jzzqmT note-menu-icon"
color="#000000"
/>
<span
class="Notestyle__NoteTitle-sc-2z8c2g-1 gNJdcF"
class="Notestyle__NoteTitle-sc-2z8c2g-1 hYcKCw"
>
Note Title Preview
</span>
Expand Down Expand Up @@ -302,12 +306,16 @@ exports[`Dialog Component To match snapshot of NoteDialog 1`] = `
class="bp3-popover-target full-width"
>
<div
class="Notestyle__NoteWrapper-sc-2z8c2g-0 eyrKAX no-animation print-item"
class="Notestyle__NoteWrapper-sc-2z8c2g-0 gRsqMu no-animation print-item"
color="#000000"
style="max-width: 300px; max-height: 60px;"
>
<div
class="Notestyle__NoteMenuIcon-sc-2z8c2g-3 jzzqmT note-menu-icon"
color="#000000"
/>
<span
class="Notestyle__NoteTitle-sc-2z8c2g-1 gNJdcF"
class="Notestyle__NoteTitle-sc-2z8c2g-1 hYcKCw"
>
Note Title Preview
</span>
Expand Down Expand Up @@ -694,7 +702,7 @@ exports[`Dialog Component To match snapshot of NoteDialog 1`] = `
}
>
<div
className="Notestyle__NoteWrapper-sc-2z8c2g-0 eyrKAX no-animation print-item"
className="Notestyle__NoteWrapper-sc-2z8c2g-0 gRsqMu no-animation print-item"
color="#000000"
style={
Object {
Expand All @@ -703,9 +711,18 @@ exports[`Dialog Component To match snapshot of NoteDialog 1`] = `
}
}
>
<Notestyle__NoteMenuIcon
className="note-menu-icon"
color="#000000"
>
<div
className="Notestyle__NoteMenuIcon-sc-2z8c2g-3 jzzqmT note-menu-icon"
color="#000000"
/>
</Notestyle__NoteMenuIcon>
<Notestyle__NoteTitle>
<span
className="Notestyle__NoteTitle-sc-2z8c2g-1 gNJdcF"
className="Notestyle__NoteTitle-sc-2z8c2g-1 hYcKCw"
>
Note Title Preview
</span>
Expand Down
2 changes: 1 addition & 1 deletion src/mock/mockData.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const mockState = {
},
title: 'Business Model Canvas Title',
version: '1.0.0',
date: '13 Apr, 2020',
date: new Date(),
noteTitle: 'Test title',
noteDescription: 'Test description',
noteBackgroundColor: '#f5f8fa',
Expand Down
4 changes: 2 additions & 2 deletions src/reducer/reducer.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ export const appState = {
version: '1.0.0',
},
title: '',
version: '',
date: '',
version: 'v1.0',
date: new Date(),
noteTitle: '',
noteDescription: '',
noteBackgroundColor: '#f5f8fa',
Expand Down
Loading

0 comments on commit 8f22689

Please sign in to comment.