@eccenca/gui-elements 6.3.0 → 22.0.1

package/src/elements/DateField/_datefield.scss

@@ -1,116 +0,0 @@
-// -- Import CSS from react-datetime -------------------------------------------------
-@import "~react-datetime/css/react-datetime.css";
-
-div.rdt {
-
-    $rdt-cell-height: 1.61 * $typo-body-1-line-height * 1rem;
-
-    .mdl-textfield {
-        padding-bottom: 0;
-    }
-
-    .mdl-textfield__label:after {
-        bottom: 0;
-    }
-
-    margin-bottom: $typo-body-1-margin-bottom;
-
-    div.rdtPicker {
-        @include shadow-2dp();
-        background: $default-dropdown-bg-color;
-        color: $button-secondary-color;
-        border: none;
-        padding: 0;
-        font-size: $typo-caption-font-size;
-        width: 7 * $rdt-cell-height;
-
-        table {
-            border-collapse: collapse;
-            border-spacing: 0;
-            border: none;
-            font-size: $typo-caption-font-size;
-            width: 7 * $rdt-cell-height;
-        }
-
-        thead, tbody, tfoot {
-            tr {
-                transition: none;
-                height: auto;
-
-                &:hover {
-                    background-color: transparent;
-                }
-            }
-
-            th, td {
-                font-size: 1em;
-                text-align: center;
-                vertical-align: middle;
-                padding: 0;
-                height: $rdt-cell-height;
-                width: $rdt-cell-height;
-                line-height: 1;
-                border: none;
-                color: $button-secondary-color;
-
-                &:first-of-type,
-                &:last-of-type {
-                    padding: 0;
-                    text-align: center;
-                }
-
-            }
-
-            th.rdtNext, th.rdtPrev {
-                font-size: 2em;
-                height: 1em;
-                width: auto;
-                vertical-align: middle;
-                font-weight: 300;
-            }
-
-            td.rdtOld, td.rdtNew {
-                color: $button-secondary-color-disabled;
-            }
-
-            td.rdtToday:before {
-                border-bottom-color: $ecc-color-accent;
-            }
-
-            td.rdtActive.rdtToday:before {
-                border-bottom-color: $default-dropdown-bg-color;
-            }
-
-            td.rdtDay, td.rdtHour, td.rdtMinute, td.rdtSecond, .rdtTimeToggle {
-                &:hover, &:focus {
-                    background-color: $button-hover-color;
-                }
-            }
-
-            td.rdtActive, td.rdtActive:hover {
-                color: $ecc-color-accent-contrast;
-                background-color: $ecc-color-accent;
-            }
-        }
-
-        thead {
-            tr:first-child {
-                th {
-                    height: $rdt-cell-height;
-                    border-bottom: $data-table-dividers;
-
-                    &.rdtSwitch {
-                        height: $rdt-cell-height;
-                    }
-                }
-            }
-        }
-
-        tfoot {
-            td, td:first-of-type, td:last-of-type {
-                height: $rdt-cell-height;
-                border-top: $data-table-dividers;
-            }
-        }
-    }
-}

package/src/elements/DateField/index.js

@@ -1,7 +0,0 @@
-import DateField from './DateField';
-import DateTimefield from './DateTimefield';
-
-export default {
-    DateField,
-    DateTimefield,
-};

package/src/elements/Dialog/BaseDialog.jsx

@@ -1,161 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import classNames from 'classnames';
-import Button from '../Button/Button';
-import {
-    Card,
-    CardTitle,
-    CardMenu,
-    CardContent,
-    CardActions,
-} from '../Card';
-
-/**
- * This Component creates a customizable dialog.
- */
-const BaseDialog = props => {
-    const {
-        active,
-        className,
-        modal,
-        size,
-        buttonRow,
-        title,
-        titleCancelButton,
-        ...otherProps
-    } = props;
-
-    if (active !== true) {
-        return false;
-    }
-
-        // set classname
-    const classes = classNames(
-        'mdl-dialog',
-        {
-            'is-activated': active === true,
-            'mdl-dialog--modal': modal === true,
-            'mdl-dialog--mini': size === 'mini',
-            'mdl-dialog--large': size === 'large',
-        },
-        className
-    );
-
-        // set modal
-    let modalbg = false;
-    if (modal === true) {
-        modalbg = <div className="mdl-dialog__modalbackground" />;
-    }
-
-        // set title cancel Button
-    const cancelButton = titleCancelButton ? (
-        <CardMenu>
-            <Button
-                className="mdl-dialog__title__close-button"
-                tooltip="Close"
-                iconName="hide"
-                onClick={titleCancelButton}
-            />
-        </CardMenu>
-    ) : (
-        false
-    );
-        // set title
-    const dialogTitle = title ? (
-        <CardTitle documentLevel="h1" className="mdl-dialog__title">
-            <h1 className="mdl-card__title-text">{title}</h1>
-            {cancelButton}
-        </CardTitle>
-    ) : (
-        false
-    );
-
-        // set content
-    const content = props.children ? (
-        <CardContent className="mdl-dialog__content">
-            {props.children}
-        </CardContent>
-    ) : (
-        false
-    );
-
-        // set button main layout
-    const buttonLayout = {
-        accent: true,
-        colored: false,
-        fabSize: '',
-    };
-        // set buttons
-    const rowActions = buttonRow.reverse().map((button, idx) => {
-        const key = `Button_${_.get(button, 'key', idx)}`;
-        return (
-            <span
-                className={`mdl-dialog__actions__${idx}-button`}
-                key={key}
-            >
-                {React.cloneElement(button, buttonLayout)}
-            </span>
-        );
-    });
-
-    const actions = (
-        <CardActions className="mdl-dialog__actions">
-            {rowActions}
-        </CardActions>
-    );
-
-    let containerClass = '';
-    if (active === true) {
-        containerClass = 'mdl-dialog__container';
-    }
-
-        // return complete dialog
-    const dialog = (
-        <div className={containerClass}>
-            {modalbg}
-            <Card className={classes} shadow={6} {...otherProps}>
-                {dialogTitle}
-                {content}
-                {actions}
-            </Card>
-        </div>
-    );
-
-    return dialog;
-};
-
-// define property types
-BaseDialog.propTypes = {
-    /**
-     * Define if dialog is displayed.
-     */
-    active: PropTypes.bool.isRequired,
-    /**
-     * Custom dialog classname.
-     */
-    className: PropTypes.string,
-    /**
-     * Defines dialog as modal.
-     */
-    modal: PropTypes.bool,
-    /**
-     * Size of dialog.
-     */
-    size: PropTypes.string,
-    /**
-     * Contain buttons for action row.
-     */
-    buttonRow: PropTypes.arrayOf(PropTypes.element).isRequired,
-    /**
-     * Title of dialog.
-     */
-    title: PropTypes.node,
-    /**
-     * Add cancel button to title.
-     */
-    titleCancelButton: PropTypes.func,
-};
-BaseDialog.displayName = 'BaseDialog';
-
-export default BaseDialog;

package/src/elements/Dialog/ConfirmationDialog.jsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import BaseDialog from './BaseDialog';
-
-/**
- * This Component creates a confirmation dialog based on BaseDialog.
- */
-const ConfirmationDialog = props => {
-    const { active } = props;
-
-    if (active !== true) {
-        return false;
-    }
-
-    const buttonRow = [
-        React.cloneElement(props.cancelButton, { key: 'cancel' }),
-        React.cloneElement(props.confirmButton, { key: 'confirm' }),
-    ];
-
-        // push data with formatted buttons to base dialog
-    return (
-        <BaseDialog
-            active={props.active}
-            className={props.className}
-            modal={props.modal}
-            size={props.size}
-            title={props.title}
-            buttonRow={buttonRow}
-        >
-            {props.children}
-        </BaseDialog>
-    );
-};
-// define property types
-ConfirmationDialog.propTypes = {
-    active: PropTypes.bool.isRequired,
-    className: PropTypes.string,
-    modal: PropTypes.bool,
-    size: PropTypes.string,
-    // a Confirmation Dialog should always have two buttons per spec:
-    // https://material.google.com/components/dialogs.html#dialogs-confirmation-dialogs
-    cancelButton: PropTypes.element.isRequired,
-    confirmButton: PropTypes.element.isRequired,
-    title: PropTypes.node,
-};
-ConfirmationDialog.displayName = 'ConfirmationDialog';
-
-export default ConfirmationDialog;

package/src/elements/Dialog/_dialog.scss

@@ -1,58 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.mdl-dialog {
-    display: none;
-    box-sizing: border-box;
-    max-width: 90%;
-    z-index: 1000;
-    width: 40rem;
-
-    &.mdl-dialog--mini {
-        width: 20rem;
-    }
-
-    &.mdl-dialog--large {
-        width: 60rem;
-    }
-
-    &.is-activated {
-        display: block;
-    }
-}
-
-.mdl-dialog__container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-}
-
-.mdl-dialog__modalbackground {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: $color-primary-contrast;
-    opacity: 0.54;
-    z-index: -1;
-}
-
-.mdl-dialog__content {
-    max-height: calc(70vh - #{$typo-title-font-size} - 2 * #{$card-vertical-padding} - #{$button-height});
-    overflow: auto;
-    overflow-x: hidden;
-}
-
-.mdl-dialog__actions {
-    flex-direction: row-reverse;
-}

package/src/elements/Dialog/index.js

@@ -1,7 +0,0 @@
-import BaseDialog from './BaseDialog';
-import ConfirmationDialog from './ConfirmationDialog';
-
-export default {
-    BaseDialog,
-    ConfirmationDialog,
-};

package/src/elements/Footer/Footer.jsx

@@ -1,171 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Version from '../Version/Version';
-
-/**
-
-```js
-import {Footer} from '@eccenca/gui-elements';
-
-const Page = React.createClass({
-    // template rendering
-    render() {
-        return (
-            // all properties are optional, if one is given then a additional
-            // footer line is generated on top of the other children elements
-            <Footer
-                version="vX.Y.Z"
-                company="Company name"
-                companyUrl="https://company.example.com/"
-                workspace="Workspace title"
-                userName="User account id"
-            >
-                <!--
-                    any children elements
-                    it is recommended to use MDL sub elements for footer here
-                    @see https://getmdl.io/components/index.html#layout-section/footer
-                -->
-            </Footer>
-        )
-    },
-    // ....
-});
-```
-*/
-
-const Footer = props => {
-    const year = new Date().getFullYear();
-    const {
-        userName,
-        workspace,
-        version,
-        company,
-        companyUrl,
-        children,
-    } = props;
-
-    const infoApplication = version ? (
-        <div className="mdl-logo">
-            <Version version={version} />
-            {' '}
-&copy;
-            {year}
-        </div>
-    ) : (
-        false
-    );
-
-    const infoCompany = company && companyUrl ? (
-        <li>
-            <a href={companyUrl} target="_blank">
-                {company}
-            </a>
-        </li>
-    ) : (
-        false
-    );
-
-    const infoUser = userName ? (
-        <li>
-            {'Logged in as: '}
-            {userName}
-        </li>
-    ) : (
-        false
-    );
-
-    const infoWorkspace = workspace ? (
-        <li>
-            {'Workspace: '}
-            {workspace}
-        </li>
-    ) : (
-        false
-    );
-
-    const generatedFooterContent = (
-        infoApplication
-        || infoCompany
-        || infoWorkspace
-        || infoUser
-    ) ? (
-            <section className="mdl-mini-footer">
-                {
-                    (infoApplication || infoCompany) ? (
-                        <div className="mdl-mini-footer__left-section">
-                            {infoApplication}
-                            <ul className="mdl-mini-footer__link-list">
-                                {infoCompany}
-                            </ul>
-                        </div>
-                    ) : (
-                        false
-                    )
-                }
-                {
-                    (infoWorkspace || infoUser) ? (
-                        <div className="mdl-mini-footer__right-section">
-                            <ul className="mdl-mini-footer__link-list">
-                                {infoWorkspace}
-                                {infoUser}
-                            </ul>
-                        </div>
-                    ) : (
-                        false
-                    )
-                }
-            </section>
-        ) : (
-            false
-        );
-
-    const additionalFooterContent = children ? (
-        <section className="mdl-mini-footer">
-            {children}
-        </section>
-    ) : (
-        false
-    );
-
-    return (
-        <footer className="ecc-component-footer">
-            {generatedFooterContent}
-            {additionalFooterContent}
-        </footer>
-    );
-};
-
-Footer.propTypes = {
-    /**
-        string (optional): company name
-    */
-    company: PropTypes.string,
-    /**
-        string (optional): URL of company website
-    */
-    companyUrl: PropTypes.string,
-    /**
-        string (optional): version identifier
-    */
-    version: PropTypes.string,
-    /**
-        string (optional): idientifier of current workspace
-    */
-    workspace: PropTypes.string,
-    /**
-        string (optional): identifier of currently logged in user
-    */
-    userName: PropTypes.string,
-};
-
-Footer.defaultProps = {
-    company: '',
-    companyUrl: '',
-    version: '',
-    workspace: '',
-    userName: '',
-};
-
-Footer.displayName = 'Footer';
-
-export default Footer;

package/src/elements/Footer/_footer.scss

@@ -1,17 +0,0 @@
-.ecc-component-footer {
-    @include typo-caption();
-
-    .mdl-mini-footer {
-        padding-top: $ecc-size-block-whitespace / 4;
-        padding-bottom: $ecc-size-block-whitespace / 4;
-    }
-
-    ul, ol {
-        font-size: inherit;
-        line-height: inherit;
-    }
-
-    a {
-        color: lighten($footer-color, 25%);
-    }
-}

package/src/elements/Grid/_grid.scss

@@ -1,18 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.mdl-grid {
-
-    &.mdl-grid--centered {
-        justify-content: center;
-    }    
-}
-
-form.mdl-grid {
-
-    width: 100%;
-
-}

package/src/elements/Icon/Icon.jsx

@@ -1,97 +0,0 @@
-/* eslint camelcase: 0 */
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { includes } from 'lodash';
-import Tooltip from '../Tooltip/Tooltip';
-import ligatureCodes from './icontable.json';
-import canonicalIconNames from './canonicalicons.json';
-import canonicalTooltips from './canonicaltooltips.json';
-
-
-/**
-import {Icon} from '@eccenca/gui-elements';
-
-const Page = React.createClass({
-    // template rendering
-    render() {
-        return (
-            <Icon
-                name="cloud_download" // icon name, @see https://material.io/icons/
-                tooltip="cloudy clouds" // tooltip, some icons have fallback tooltips, set it to false if you need to prevent them
-                badge="5" // Badge, as shown in https://getmdl.io/components/index.html#badges-section
-            />
-        )
-    },
-    // ....
-});
-```
-*/
-
-const Icon = props => {
-    const { className, badge = false, ...otherProps } = props;
-
-    let { name } = otherProps;
-    delete otherProps.name;
-
-    let { tooltip } = otherProps;
-    delete otherProps.tooltip;
-
-    if (!tooltip && tooltip !== false) {
-        if (typeof canonicalTooltips[name] !== 'undefined') {
-            tooltip = canonicalTooltips[name];
-        } else if (__DEBUG__) {
-            console.warn(`Icon "${name}" has no canonical tooltip defined`);
-        }
-    }
-
-    if (typeof canonicalIconNames[name] !== 'undefined') {
-        if (name === 'delete' && __DEBUG__) {
-            console.warn(
-                'Do not use "delete" as icon name. Please use "remove" instead.'
-            );
-        }
-        name = canonicalIconNames[name];
-    } else if (__DEBUG__) {
-        console.log(
-            `%cFound usage of "${name}" as icon name. Use canonical icon names if possible.`,
-            'color: orange'
-        );
-    }
-
-    if (!includes(ligatureCodes, name)) {
-        if (__DEBUG__) {
-            console.error(`"${name}" is not a valid icon name.`);
-        }
-        name = 'error';
-    }
-
-    const classes = classNames(
-        'material-icons',
-        { 'mdl-badge mdl-badge--overlap': badge },
-        className
-    );
-
-    let icon = (
-        <i className={classes} data-badge={badge} {...otherProps}>
-            {name}
-        </i>
-    );
-
-    if (tooltip) {
-        icon = <Tooltip label={tooltip}>{icon}</Tooltip>;
-    }
-    return icon;
-};
-
-Icon.propTypes = {
-    className: PropTypes.string,
-    name: PropTypes.string.isRequired,
-    tooltip: PropTypes.oneOfType([
-        PropTypes.node,
-        PropTypes.bool,
-    ]),
-};
-Icon.displayName = 'Icon';
-
-export default Icon;