@spothero/ui 15.10.8 → 16.0.0-beta.0

package/styles/v1/components/Modal/ModalContent.jsx

@@ -1,126 +0,0 @@
-import isFunction from 'lodash/isFunction';
-import isString from 'lodash/isString';
-import isUndefined from 'lodash/isUndefined';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {document, window} from 'ssr-window';
-import DOMUtils from '@spothero/utils/dom';
-
-export default class ModalContent extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** The elements to display as children. */
-        children: PropTypes.node,
-        /** Removes the padding of the content and makes it flush with the edges. */
-        noPadding: PropTypes.bool,
-        /** Sets a maximum height on the content. */
-        maxHeight: PropTypes.oneOfType([
-            PropTypes.number,
-            PropTypes.oneOf(['auto']),
-        ]),
-        /** Sets content area height. */
-        contentAreaHeight: PropTypes.oneOfType([
-            PropTypes.number,
-            PropTypes.func,
-        ]),
-        /** HTML markup to set as the content. Useful for rendering server side HTML responses inside of the component. */
-        html: PropTypes.string,
-        /** On all but the smallest breakpoints, the padding to add around the containing modal wrapper if the content height were to exceed 100% window height, effectively showing more of the shim. */
-        verticalModalPadding: PropTypes.number,
-    };
-    static defaultProps = {
-        maxHeight: 'auto',
-        verticalModalPadding: 32,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {children, html} = props;
-
-        if (children && html) {
-            // eslint-disable-next-line no-console
-            console.error(
-                'Passing children or html props is exclusive. You may only use one at a time.'
-            );
-        }
-    }
-
-    componentDidMount() {
-        window.addEventListener('resize', this._onWindowResize);
-
-        this._resizeTimeout = window.setTimeout(() => {
-            this._onWindowResize();
-        }, 0);
-    }
-
-    componentWillUnmount() {
-        window.clearTimeout(this._resizeTimeout);
-        window.removeEventListener('resize', this._onWindowResize);
-    }
-
-    _onWindowResize = evt => {
-        const {maxHeight, contentAreaHeight, verticalModalPadding} = this.props;
-        const windowWidth = window.innerWidth || document.body.clientWidth;
-        let calculatedMax = maxHeight;
-
-        if (isString(calculatedMax) && calculatedMax === 'auto') {
-            const modalWrapperEl = DOMUtils.parent(
-                this._container,
-                '.Modal-wrapper'
-            );
-            const titleEl = modalWrapperEl.querySelector('.Modal-title');
-            const finalContentAreaHeight = isUndefined(contentAreaHeight)
-                ? DOMUtils.height(modalWrapperEl, true, false) -
-                  DOMUtils.height(titleEl)
-                : isFunction(contentAreaHeight)
-                ? contentAreaHeight()
-                : contentAreaHeight;
-
-            calculatedMax =
-                windowWidth < 768
-                    ? finalContentAreaHeight
-                    : finalContentAreaHeight - verticalModalPadding - 24; // 24 is margin-bottom
-        }
-
-        this._container.style.maxHeight = `${calculatedMax}px`;
-    };
-
-    render() {
-        const {
-            className,
-            noPadding,
-            contentAreaHeight,
-            children,
-            html,
-        } = this.props;
-        const content = html ? (
-            <div dangerouslySetInnerHTML={{__html: html}} />
-        ) : (
-            children
-        );
-        const classes = classNames(
-            'Modal-content',
-            {'Modal-content-flush': noPadding},
-            {'Modal-content-with-height': !isUndefined(contentAreaHeight)},
-            className
-        );
-
-        if (html && children) {
-            return null;
-        }
-
-        return (
-            <div
-                ref={node => {
-                    this._container = node;
-                }}
-                className={classes}
-            >
-                <div className="Modal-content-wrapper">{content}</div>
-            </div>
-        );
-    }
-}

package/styles/v1/components/Modal/ModalFooter.jsx

@@ -1,53 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export default class ModalFooter extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the component. */
-        className: PropTypes.string,
-        /** The elements to display as children. */
-        children: PropTypes.node,
-        /** Removes the padding of the content and makes it flush with the edges. */
-        noPadding: PropTypes.bool,
-        /** HTML markup to set as the content. Useful for rendering server side HTML responses inside of the component. */
-        html: PropTypes.string,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {children, html} = props;
-
-        if (children && html) {
-            throw new Error(
-                'Passing children or html props is exclusive. You may only use one at a time.'
-            );
-        }
-    }
-
-    render() {
-        const {className, noPadding, children, html} = this.props;
-        const content = html ? (
-            <div dangerouslySetInnerHTML={{__html: html}} />
-        ) : (
-            children
-        );
-        const classes = classNames(
-            'Modal-footer',
-            {'Modal-footer-flush': noPadding},
-            className
-        );
-
-        return (
-            <div
-                ref={node => {
-                    this._container = node;
-                }}
-                className={classes}
-            >
-                {content}
-            </div>
-        );
-    }
-}

package/styles/v1/components/Modal/_Modal.scss

@@ -1,262 +0,0 @@
-html {
-    &.Modal-open {
-        @extend %disable-scrolling;
-    }
-}
-
-.Modal {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: $z-index-modal;
-    opacity: 0;
-
-    &.Modal-inline {
-        height: 100%;
-        width: 100%;
-    }
-
-    &.Modal-no-shim {
-        opacity: 1;
-    }
-}
-
-.Modal-animated {
-    transition: opacity $animation;
-}
-
-.Modal-showing {
-    opacity: 1;
-
-    .Modal-container {
-        opacity: 1;
-    }
-}
-
-.Modal-shim {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto;
-    height: 100%;
-    width: 100%;
-    background-color: rgba($color-fuel, 0.9);
-
-    .Modal-inline & {
-        position: absolute;
-    }
-}
-
-.Modal-wrapper {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    padding: 16px;
-
-    &::before {
-        content: "";
-        display: inline-block;
-        height: 100%;
-        vertical-align: middle;
-        letter-spacing: -0.25em;
-    }
-
-    .Modal-inline & {
-        position: absolute;
-    }
-
-    .Modal-no-shim & {
-        pointer-events: none;
-    }
-
-    @include breakpoint($breakpoint-md) {
-        padding: 0;
-    }
-}
-
-.Modal-wrapper-full {
-    padding: 0;
-
-    @include breakpoint($breakpoint-sm) {
-        padding: 16px;
-    }
-}
-
-.Modal-container {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    vertical-align: middle;
-    background-color: $color-white;
-    text-align: left;
-    opacity: 0;
-    border-radius: 4px;
-
-    @include breakpoint($breakpoint-md) {
-        height: auto;
-        max-width: calc(100% - 32px);
-    }
-
-    .Modal-wrapper-full & {
-        border-radius: initial;
-        height: 100%;
-
-        @include breakpoint($breakpoint-sm) {
-            height: auto;
-        }
-    }
-}
-
-.Modal-container-animated {
-    transition: opacity $animation;
-}
-
-.Modal-container-showing {
-    opacity: 1;
-    pointer-events: auto;
-
-    .Modal-no-shim & {
-        box-shadow: 2px 4px 8px 0 rgba($color-fuel, 0.1);
-    }
-}
-
-.Modal-container-extra-slim {
-    @include breakpoint($breakpoint-md) {
-        width: 300px;
-    }
-}
-
-.Modal-container-slim {
-    @include breakpoint($breakpoint-md) {
-        width: 400px;
-    }
-}
-
-.Modal-container-normal {
-    @include breakpoint($breakpoint-md) {
-        width: 550px;
-    }
-}
-
-.Modal-container-wide {
-    @include breakpoint($breakpoint-md) {
-        width: 700px;
-    }
-}
-
-.Modal-container-extra-wide {
-    @include breakpoint($breakpoint-md) {
-        width: 900px;
-    }
-}
-
-.Modal-container-custom {
-    @include breakpoint(max-width $breakpoint-md) {
-        width: 100% !important; // stylelint-disable-line declaration-no-important
-    }
-}
-
-.Modal-title {
-    position: relative;
-    padding: 12px 35px 0;
-
-    h1 {
-        font-size: 18px;
-        margin: 0;
-        font-weight: $font-weight-semi-bold;
-        text-align: center;
-    }
-
-    @include breakpoint($breakpoint-md) {
-        padding: 30px 35px 0;
-
-        h1 {
-            font-size: 24px;
-        }
-    }
-}
-
-.Modal-ctas {
-    position: absolute;
-    top: 12px;
-    left: 0;
-    width: 100%;
-    z-index: $z-index-fore;
-
-    .Button {
-        padding: 0;
-    }
-
-    .Icon {
-        width: 14px;
-        fill: $color-fuel;
-    }
-
-    @include breakpoint($breakpoint-md) {
-        top: 14px;
-
-        .Icon {
-            width: 16px;
-        }
-    }
-}
-
-.Modal-close {
-    position: absolute;
-    top: 0;
-    right: 14px;
-}
-
-.Modal-back {
-    position: absolute;
-    top: 0;
-    left: 12px;
-}
-
-.Modal-content {
-    position: relative;
-    overflow: auto;
-    margin-bottom: 16px;
-    padding: 12px 16px 0;
-    transition: height $animation;
-
-    @include breakpoint($breakpoint-md) {
-        margin-bottom: 24px;
-        padding: 30px 48px 0;
-    }
-}
-
-.Modal-content-with-height {
-    margin: 16px 0;
-    padding: 0 16px;
-    transition: height $animation;
-
-    @include breakpoint($breakpoint-md) {
-        margin: 24px 0;
-        padding: 0 48px;
-    }
-}
-
-.Modal-content-flush {
-    padding: 0;
-}
-
-.Modal-footer {
-    position: relative;
-    margin-bottom: 16px;
-    padding: 0 16px;
-
-    @include breakpoint($breakpoint-md) {
-        margin-bottom: 24px;
-        padding: 0 48px;
-    }
-}
-
-.Modal-footer-flush {
-    padding: 0;
-}

package/styles/v1/components/Modal/index.js

@@ -1,3 +0,0 @@
-export Modal from './Modal';
-export ModalContent from './ModalContent';
-export ModalFooter from './ModalFooter';