@eccenca/gui-elements 6.1.0 → 22.0.0-rc.6

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;

package/src/elements/Icon/canonicalicons.json

@@ -1,32 +0,0 @@
-{
-    "access_forbidden": "lock_outline",
-    "add": "add",
-    "adjust": "tune",
-    "arrow_dropdown": "arrow_drop_down",
-    "arrow_firstpage": "first_page",
-    "arrow_lastpage": "last_page",
-    "arrow_nextpage": "navigate_next",
-    "arrow_prevpage": "navigate_before",
-    "back": "arrow_back",
-    "cancel": "close",
-    "clear": "close",
-    "confirm": "check",
-    "edit": "mode_edit",
-    "expand_less": "expand_less",
-    "expand_more": "expand_more",
-    "filter": "filter_list",
-    "hide": "close",
-    "help": "help_outline",
-    "menu_more": "more_vert",
-    "remove": "delete",
-    "reset": "settings_backup_restore",
-    "save": "save",
-    "settings": "settings",
-    "sort": "swap_vert",
-    "visibility_on": "visibility",
-    "visibility_off": "visibility_off",
-
-    "__comment_deprecated__": "all canonical names below this line are deprecated",
-
-    "delete": "delete"
-}

package/src/elements/Icon/canonicaltooltips.json

@@ -1,32 +0,0 @@
-{
-    "access_forbidden": "No write access",
-    "add": "Add",
-    "adjust": "Adjust settings",
-    "arrow_dropdown": "Open",
-    "arrow_firstpage": "First page",
-    "arrow_lastpage": "Last page",
-    "arrow_nextpage": "Next page",
-    "arrow_prevpage": "Previous page",
-    "back": "Go back to last view",
-    "cancel": "Cancel",
-    "clear": "Clear value",
-    "confirm": "Confirm",
-    "edit": "Edit",
-    "expand_less": "Show less",
-    "expand_more": "Show more",
-    "filter": "Filter data",
-    "hide": "Hide",
-    "help": "Show help text",
-    "menu_more": "Open menu",
-    "remove": "Remove",
-    "reset": "Reset settings to default values",
-    "save": "Save",
-    "settings": "Administrate settings",
-    "sort": "Sort data",
-    "visibility_on": "Visibility on",
-    "visibility_off": "Visibility off",
-
-    "__comment_deprecated__": "all canonical names below this line are deprecated",
-
-    "delete": "Remove"
-}