Skip to content

Commit

Permalink
Merge pull request #243 from rdjpalmer/refactor-modal
Browse files Browse the repository at this point in the history 
Refactor modal `<Window />` component to be more flexible
  • Loading branch information
@rdjpalmer
rdjpalmer authored Apr 19, 2017
2 parents 04f00ab + f1c984a commit f9d3186
Show file tree
Hide file tree
Showing 6 changed files with 125 additions and 225 deletions.
137 changes: 12 additions & 125 deletions components/Modal/Modal.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { withKnobs, boolean } from '@kadira/storybook-addon-knobs';
import ModalAnimator from './ModalAnimator';
import Window from './Window';
import WithActionBar from './WithActionBar';
import Window, { WindowTitle } from './Window';
import WithCross from './WithCross';
import m from '../../globals/modifiers.css';

Expand All @@ -12,46 +11,11 @@ stories.addDecorator(withKnobs);

stories
.add('Default `<Window />` pairing', () => (
<ModalAnimator active={ boolean('active', false) } onClose={ action('Closing') }>
<Window>
<p className={ [m.fontRegular, m.fgGreyDarker, m.mt0, m.mb0].join(' ') }>
{
'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
' libero sodales.'
}
</p>
</Window>
</ModalAnimator>
))
.add('Dark `<Window />` pairing', () => (
<ModalAnimator active={ boolean('active', false) } onClose={ action('Closing') }>
<Window variant="dark">
<p className={ [m.fontRegular, m.fgWhite, m.mt0, m.mb0].join(' ') }>
{
'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
' libero sodales.'
}
</p>
</Window>
</ModalAnimator>
))
.add('Default `<WithCross />` pairing', () => (
<ModalAnimator active={ boolean('active', false) } onClose={ action('Closing') }>
<WithCross onClose={ action('Closing') }>
<ModalAnimator active={ boolean('active', true) } onClose={ action('Closing') }>
<Window
header={ <WindowTitle>Modal heading</WindowTitle> }
footer={ <button>Cancel</button> }
>
<p className={ [m.fontRegular, m.fgGreyDarker, m.mt0, m.mb0].join(' ') }>
{
'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
Expand All @@ -78,26 +42,7 @@ stories
' libero sodales.'
}
</p>
</WithCross>
</ModalAnimator>
))
.add('Dark `<WithCross />` pairing', () => (
<ModalAnimator active={ boolean('active', false) } onClose={ action('Closing') }>
<WithCross variant="dark" onClose={ action('Closing') }>
<p className={ [m.fontRegular, m.fgWhite, m.mt0, m.mb0].join(' ') }>
{
'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
' libero sodales.'
}
</p>
<p className={ [m.fontRegular, m.fgWhite, m.mtl, m.mb0].join(' ') }>
<p className={ [m.fontRegular, m.fgGreyDarker, m.mtl, m.mb0].join(' ') }>
{
'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
Expand All @@ -110,18 +55,12 @@ stories
' libero sodales.'
}
</p>
</WithCross>
</Window>
</ModalAnimator>
))
.add('Default `<WithActionBar />` pairing', () => (
<ModalAnimator active={ boolean('active', false) } onClose={ action('Closing') }>
<WithActionBar
actions={ (
<div>
<button onClick={ action('actioning....') }>Action</button>
</div>
) }
>
.add('Default `<WithCross />` pairing', () => (
<ModalAnimator active={ boolean('active', true) } onClose={ action('Closing') }>
<WithCross onClose={ action('Closing') }>
<p className={ [m.fontRegular, m.fgGreyDarker, m.mt0, m.mb0].join(' ') }>
{
'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
Expand All @@ -148,58 +87,6 @@ stories
' libero sodales.'
}
</p>
<p className={ [m.fontRegular, m.fgGreyDarker, m.mtl, m.mb0].join(' ') }>
{
'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
' libero sodales.'
}
</p>
<p className={ [m.fontRegular, m.fgGreyDarker, m.mtl, m.mb0].join(' ') }>
{
'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
' libero sodales.'
}
</p>
<p className={ [m.fontRegular, m.fgGreyDarker, m.mtl, m.mb0].join(' ') }>
{
'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
' libero sodales.'
}
</p>
<p className={ [m.fontRegular, m.fgGreyDarker, m.mtl, m.mb0].join(' ') }>
{
'Aliquam consequat consequat pharetra. Proin sagittis quis ipsum maximus laoreet.' +
' Maecenas condimentum nisl vel lectus vehicula dapibus. Nunc suscipit suscipit leo,' +
' at molestie nibh ultrices quis. Integer mattis enim est, eget interdum magna' +
' facilisis sed. Pellentesque vehicula eget ligula in dapibus. In vel neque sed' +
' lacus sollicitudin viverra. Vestibulum lacinia quam dictum finibus tristique.' +
' Cras vel eros id dolor posuere tempor nec id lectus. Pellentesque eleifend neque' +
' diam, eget luctus diam volutpat nec. In arcu nisl, semper sed pellentesque ut,' +
' vulputate vel ante. Nulla iaculis ligula sit amet nulla sollicitudin, in iaculis' +
' libero sodales.'
}
</p>
</WithActionBar>
</WithCross>
</ModalAnimator>
));
85 changes: 76 additions & 9 deletions components/Modal/Window.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:root {
--modal-window-marginal-height: 4.5rem;
}

.light {
background-color: var(--color-white);
color: var(--color-greyDark);
Expand All @@ -21,25 +25,88 @@
z-index: var(--z-modal);
}

.header {
position: absolute;
top: 0;
width: 100%;
border-top: 0;
border-left: 0;
border-right: 0;
height: var(--modal-window-marginal-height);
}

.body {
width: 100%;
height: 100%;
padding: var(--size-large);
overflow-x: hidden;
overflow-y: auto;
}

.hasHeader .body,
.hasFooter .body {
max-height: calc(100% - var(--modal-window-marginal-height));
}

.hasHeader .body {
margin-top: var(--modal-window-marginal-height);
}

.hasFooter .body {
margin-bottom: var(--modal-window-marginal-height);
}

.hasHeader.hasFooter .body {
max-height: calc(100% - (var(--modal-window-marginal-height) * 2));
}

.footer {
position: absolute;
bottom: 0;
width: 100%;
border-bottom: 0;
border-left: 0;
border-right: 0;
height: var(--modal-window-marginal-height);
}

.title {
padding-top: var(--size-sm-i);
padding-bottom: var(--size-sm-i);
display: inline-block;
color: currentColor;
composes: fontRegular from '../../globals/typography.css';
font-weight: var(--fontweight-demi);
}

@media(--modal-lg) {
.root {
width: 94vw;
max-height: 94vh;
max-width: 37.5rem;
height: auto;
left: 50%;
top: 50%;
bottom: auto;
transform: translate3d(-50%, -50%, 0);
border-radius: 4px;
}
}

.body {
width: 100%;
height: 100%;
max-height: 94vh;
padding: var(--size-large);
overflow-x: hidden;
overflow-y: scroll;
.header {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

.footer {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}

.hasHeader .body,
.hasFooter .body {
max-height: calc(94vh - var(--modal-window-marginal-height));
}

.hasHeader.hasFooter .body {
max-height: calc(94vh - (var(--modal-window-marginal-height) * 2));
}
}
42 changes: 37 additions & 5 deletions components/Modal/Window.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
import React, { Component, PropTypes } from 'react';
import cx from 'classnames';

import Panel, { PANEL_CONTEXT } from '../Panel/Panel';
import css from './Window.css';

export const WINDOW_VARIANT = {
LIGHT: 'light',
DARK: 'dark',
};

export const WINDOW_VARIANT_TO_PANEL_CONTEXT = {
[WINDOW_VARIANT.LIGHT]: PANEL_CONTEXT.DEFAULT,
[WINDOW_VARIANT.DARK]: PANEL_CONTEXT.BLACKOUT,
};

export const WindowTitle = ({ className, children, ...rest }) => (
<span { ...rest } className={ cx(css.title, className) }>
{ children }
</span>
);

WindowTitle.propTypes = {
className: PropTypes.string,
children: PropTypes.node,
};

/**
* TODO: Figure out react-motion compatible focus trap
*/
Expand Down Expand Up @@ -49,21 +66,36 @@ export default class Window extends Component {
} = this.props;

return (
<div { ...rest } className={ cx(css.root, css[variant], className) }>
<div
{ ...rest }
className={ cx(
css.root,
css[variant],
header ? css.hasHeader : null,
footer ? css.hasFooter : null,
className
) }
>
{ header && (
<div className={ cx(css.header, classNames.header) }>
<Panel
context={ WINDOW_VARIANT_TO_PANEL_CONTEXT[variant] }
className={ cx(css.header, classNames.header) }
>
{ header }
</div>
</Panel>
) }
{ body && (
<div className={ cx(css.body, classNames.body) }>
{ body }
</div>
) }
{ footer && (
<div className={ cx(css.footer, classNames.footer) }>
<Panel
context={ WINDOW_VARIANT_TO_PANEL_CONTEXT[variant] }
className={ cx(css.footer, classNames.footer) }
>
{ footer }
</div>
</Panel>
) }
</div>
);
Expand Down
15 changes: 0 additions & 15 deletions components/Modal/WithActionBar.css
View file

This file was deleted.

Loading

0 comments on commit f9d3186

Please sign in to comment.