-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
added immersive and regular modals #39
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,8 @@ | ||
{ | ||
"extends": "curology", | ||
"globals": { | ||
"document": false, | ||
}, | ||
"overrides": [ | ||
{ | ||
"files": ["test.js"], | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
# ImmersiveModal | ||
### Usage | ||
|
||
```jsx | ||
import React from 'react'; | ||
|
||
import { ImmersiveModal, Button } from 'radiance-ui'; | ||
|
||
const HeaderImage = () => ( | ||
<div> | ||
This is a placeholder for an optional header image. | ||
</div> | ||
); | ||
|
||
class DefaultImmersiveModal extends React.Component { | ||
state = { | ||
defaultIsOpen: false, | ||
headerIsOpen: false, | ||
}; | ||
|
||
onOpenDefaultModal = () => this.setState({ defaultIsOpen: true }); | ||
|
||
onOpenHeaderModal = () => this.setState({ headerIsOpen: true }); | ||
|
||
onClose = () => this.setState({ | ||
defaultIsOpen: false, | ||
headerIsOpen: false, | ||
}); | ||
|
||
render() { | ||
const { defaultIsOpen, headerIsOpen } = this.state; | ||
|
||
return ( | ||
<div> | ||
<Button onClick={this.onOpenDefaultModal}>Open ImmersiveModal</Button> | ||
{defaultIsOpen && ( | ||
<ImmersiveModal onClose={this.onClose}> | ||
<ImmersiveModal.Title>This is styled with ImmersiveModalTitle</ImmersiveModal.Title> | ||
<ImmersiveModal.Body>This is styled with ImmersiveModalBody.</ImmersiveModal.Body> | ||
<ImmersiveModal.Footer> | ||
This is styled with ImmersiveModalFooter. It gives us a padding to separate | ||
from the body. | ||
<Button.Container> | ||
<Button onClick={this.onClose}>Close ImmersiveModal</Button> | ||
</Button.Container> | ||
</ImmersiveModal.Footer> | ||
</ImmersiveModal> | ||
)} | ||
|
||
<Button onClick={this.onOpenHeaderModal}>Open ImmersiveModal with Header</Button> | ||
{headerIsOpen && ( | ||
<ImmersiveModal | ||
onClose={this.onClose} | ||
header={<HeaderImage />} | ||
> | ||
<ImmersiveModal.Title>This is styled with ImmersiveModalTitle</ImmersiveModal.Title> | ||
<ImmersiveModal.Body>This is styled with ImmersiveModalBody.</ImmersiveModal.Body> | ||
<ImmersiveModal.Footer> | ||
This is styled with ImmersiveModalFooter. It gives us a padding to separate | ||
from the body. | ||
<Button.Container> | ||
<Button onClick={this.onClose}>Close ImmersiveModal</Button> | ||
</Button.Container> | ||
</ImmersiveModal.Footer> | ||
</ImmersiveModal> | ||
)} | ||
</div> | ||
); | ||
} | ||
} | ||
``` | ||
|
||
<!-- STORY --> | ||
|
||
### Proptypes | ||
| prop | propType | required | default | description | | ||
|----------|--------------------|----------|---------|------------------------------------------------------------------------------------------------------------------------------| | ||
| onClose | func | no | () => {} | function is that executed when either the close icon is clicked or any part of the page outside the modal is clicked | | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. function that is* |
||
| canBeClosed | bool | no | true | If false, the close icon does not render and the onClose function does not execute | | ||
| children | node | yes | - | node that will render when the modal is visible | | ||
| header | node | no | - | node that will render at the top of the modal and without padding, most commonly used for images | | ||
|
||
### Notes | ||
|
||
Available subcomponents through dot notation: | ||
|
||
`<ImmersiveModal.Title>` | ||
`<ImmersiveModal.Body>` | ||
`<ImmersiveModal.Footer>` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
# Modal | ||
### Usage | ||
|
||
```jsx | ||
import React from 'react'; | ||
|
||
import { Modal, Button } from 'radiance-ui'; | ||
|
||
class DefaultModal extends React.Component { | ||
state = { | ||
isOpen: false, | ||
}; | ||
|
||
onOpenModal = () => this.setState({ isOpen: true }); | ||
|
||
onClose = () => this.setState({ isOpen: false }); | ||
|
||
render() { | ||
const { isOpen } = this.state; | ||
|
||
return ( | ||
<div> | ||
<Button onClick={this.onOpenModal}>Open Modal</Button> | ||
<Modal isOpen={isOpen} onClose={this.onClose}> | ||
<Modal.ContentContainer> | ||
<Modal.Title>This is styled with ModalTitle</Modal.Title> | ||
<Modal.Body>This is styled with ModalBody.</Modal.Body> | ||
<Modal.Footer> | ||
This is styled with ModalFooter. It gives us a padding to separate | ||
from the body. | ||
<Button.Container> | ||
<Button onClick={this.onClose}>Close Modal</Button> | ||
</Button.Container> | ||
</Modal.Footer> | ||
</Modal.ContentContainer> | ||
</Modal> | ||
<br /> | ||
</div> | ||
); | ||
} | ||
} | ||
``` | ||
|
||
<!-- STORY --> | ||
|
||
### Proptypes | ||
| prop | propType | required | default | description | | ||
|----------|--------------------|----------|---------|------------------------------------------------------------------------------------------------------------------------------| | ||
| onClose | func | no | () => {} | Function is that executed when the close icon is clicked | | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. function that is* |
||
| isOpen | bool | no | false | Determines if the modal is open (visible) | | ||
| canBeClosed | bool | no | true | If false, the close icon does not render | | ||
| className | string | no | '' | Class name that will be passed to the modal | | ||
| children | node | no | '' | Node that will render when the modal is open | | ||
|
||
### Notes | ||
|
||
Available subcomponents through dot notation: | ||
|
||
`<Modal.ContentContainer>` | ||
`<Modal.Title>` | ||
`<Modal.Body>` | ||
`<Modal.Footer>` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import throwOnUndefinedProperty from '../../utils/throwOnUndefinedProperty'; | ||
|
||
const keycodes = throwOnUndefinedProperty({ | ||
backspace: 8, | ||
enter: 13, | ||
escape: 27, | ||
space: 32, | ||
h: 104, // used for hugpacks | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. We can strip out the ones we don't need. Probably only need |
||
c: 99, // used for scan-ship cleanser/moisturizer | ||
}); | ||
|
||
export default keycodes; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
import PropTypes from 'prop-types'; | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
|
||
import OffClickWrapper from '../offClickWrapper'; | ||
import CloseIcon from '../../svgs/icons/close-icon.svg'; | ||
import { | ||
ModalContainer, | ||
Overlay, | ||
CloseIconContainer, | ||
CopyContainer, | ||
Title, | ||
Body, | ||
Footer, | ||
} from './style'; | ||
|
||
class ImmersiveModal extends React.Component { | ||
static propTypes = { | ||
children: PropTypes.node.isRequired, | ||
canBeClosed: PropTypes.bool, | ||
onClose: PropTypes.func, | ||
header: PropTypes.node, | ||
}; | ||
|
||
static defaultProps = { | ||
canBeClosed: true, | ||
onClose: () => {}, | ||
}; | ||
|
||
static Title = Title; | ||
|
||
static Body = Body; | ||
|
||
static Footer = Footer; | ||
|
||
constructor(props) { | ||
super(props); | ||
|
||
this.htmlNode = document.querySelector('html'); | ||
this.domNode = | ||
document.querySelector('#reactPortalSection') || document.body; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. just curious what happens if query selector is null. It seems from the code that it's not a hard fast requirement to have a node for the react portal There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Portals: https://reactjs.org/docs/portals.html The domNode here is the container for the portal. If we don't pass it a node, it definitely breaks (blank screen, console error). So in this case, if the query selector is null, we need to have a default node (doc.body) to set as the container for the portal so the page doesn't break entirely. |
||
} | ||
|
||
componentDidMount() { | ||
this.htmlNode.classList.add('no-scroll'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. just wanted to check if There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Confirmed -- just checked in radiance, gatsby, and main app and it's the same in all three. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🙌 |
||
} | ||
|
||
componentWillUnmount() { | ||
this.htmlNode.classList.remove('no-scroll'); | ||
} | ||
|
||
onOffClick = () => { | ||
const { canBeClosed, onClose } = this.props; | ||
if (canBeClosed) { | ||
onClose(); | ||
} | ||
}; | ||
|
||
render() { | ||
const { | ||
children, canBeClosed, onClose, header, | ||
} = this.props; | ||
return ReactDOM.createPortal( | ||
<Overlay> | ||
<ModalContainer> | ||
<OffClickWrapper onOffClick={this.onOffClick}> | ||
{canBeClosed && ( | ||
<CloseIconContainer onClick={onClose}> | ||
<CloseIcon /> | ||
</CloseIconContainer> | ||
)} | ||
{header} | ||
<CopyContainer>{children}</CopyContainer> | ||
</OffClickWrapper> | ||
</ModalContainer> | ||
</Overlay>, | ||
this.domNode | ||
); | ||
} | ||
} | ||
|
||
export default ImmersiveModal; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
import styled from 'react-emotion'; | ||
|
||
import Typography from '../typography'; | ||
import { | ||
ANIMATION, | ||
BREAKPOINTS, | ||
COLORS, | ||
MEDIA_QUERIES, | ||
SPACING, | ||
Z_SCALE, | ||
} from '../../constants'; | ||
|
||
export const Overlay = styled.div` | ||
background-color: ${COLORS.overlay}; | ||
bottom: 0; | ||
left: 0; | ||
position: fixed; | ||
right: 0; | ||
top: 0; | ||
z-index: ${Z_SCALE.modal}; | ||
overflow-y: auto; | ||
`; | ||
|
||
export const ModalContainer = styled.div` | ||
background-color: ${COLORS.white}; | ||
height: 100vh; | ||
margin: 0 auto; | ||
max-width: ${BREAKPOINTS.sm}px; | ||
overflow-y: auto; | ||
position: relative; | ||
width: 100%; | ||
|
||
${MEDIA_QUERIES.smUp} { | ||
height: auto; | ||
margin-bottom: ${SPACING.base}; | ||
margin-top: ${SPACING.base}; | ||
} | ||
`; | ||
|
||
export const CloseIconContainer = styled.div` | ||
cursor: pointer; | ||
position: absolute; | ||
right: ${SPACING.small}; | ||
top: ${SPACING.small}; | ||
transform: scale(1, 1); | ||
transition: all ${ANIMATION.defaultTiming}; | ||
z-index: 2000; | ||
padding: ${SPACING.small}; | ||
background-color: ${COLORS.white}; | ||
border-radius: 50%; | ||
|
||
&:hover { | ||
transform: scale(1.1, 1.1); | ||
} | ||
`; | ||
|
||
export const CopyContainer = styled.div` | ||
padding: ${SPACING.medium} ${SPACING.base}; | ||
|
||
${MEDIA_QUERIES.mdUp} { | ||
padding: ${SPACING.large} ${SPACING.medium}; | ||
} | ||
`; | ||
|
||
export const Title = styled(Typography.Title)` | ||
margin-bottom: ${SPACING.small}; | ||
text-align: left; | ||
`; | ||
|
||
export const Body = styled.div` | ||
color: ${COLORS.purple80}; | ||
text-align: left; | ||
|
||
&:not(:last-child) { | ||
margin-bottom: ${SPACING.base}; | ||
} | ||
|
||
p > a { | ||
text-transform: none; | ||
} | ||
`; | ||
|
||
export const Footer = styled.div` | ||
margin-bottom: ${SPACING.xsmall}; | ||
`; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import React from 'react'; | ||
import { shallow } from 'enzyme'; | ||
|
||
import ImmersiveModal from './index'; | ||
|
||
const childComponent = <div />; | ||
|
||
describe('<ImmersiveModal />', () => { | ||
describe('ImmersiveModal closure', () => { | ||
it('invokes the onClose prop', () => { | ||
const spy = jest.fn(); | ||
const wrapper = shallow( | ||
<ImmersiveModal onClose={spy}> | ||
{childComponent} | ||
</ImmersiveModal> | ||
); | ||
|
||
wrapper.instance().onOffClick(); | ||
|
||
expect(spy).toHaveBeenCalled(); | ||
}); | ||
}); | ||
}); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,11 @@ | ||
export { default as Accordion } from './accordion'; | ||
export { default as Alert } from './alert'; | ||
export { default as Button, RoundButton } from './button'; | ||
export { default as Container } from './container'; | ||
export { default as RadioButton } from './radioButton'; | ||
export { default as Checkbox } from './checkbox'; | ||
export { default as Chip } from './chip'; | ||
export { default as Container } from './container'; | ||
export { default as ImmersiveModal } from './immersiveModal'; | ||
export { default as Modal } from './modal'; | ||
export { default as OffClickWrapper } from './offClickWrapper'; | ||
export { default as RadioButton } from './radioButton'; | ||
export { default as Typography, style as TYPOGRAPHY_STYLE } from './typography'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
probably want to update the text to say "This is styled with
ImmersiveModal.Title
". Similar comment for the rest of the file