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

package/src/elements/Alert/Error.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Alert from './Alert';
-
-const Error = props => {
-    const { children, ...otherProps } = props;
-
-    return (
-        <Alert type="error" {...otherProps}>
-            {children}
-        </Alert>
-    );
-};
-
-// define property types
-Error.propTypes = {
-    children: PropTypes.node.isRequired,
-};
-
-Error.displayName = 'Error';
-
-export default Error;

package/src/elements/Alert/Info.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Alert from './Alert';
-
-const Info = props => {
-    const { children, ...otherProps } = props;
-
-    return (
-        <Alert type="info" {...otherProps}>
-            {children}
-        </Alert>
-    );
-};
-
-Info.propTypes = {
-    children: PropTypes.node.isRequired,
-};
-
-Info.displayName = 'Info';
-
-export default Info;

package/src/elements/Alert/Success.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Alert from './Alert';
-
-const Success = props => {
-    const { children, ...otherProps } = props;
-
-    return (
-        <Alert type="success" {...otherProps}>
-            {children}
-        </Alert>
-    );
-};
-
-Success.propTypes = {
-    children: PropTypes.node.isRequired,
-};
-Success.displayName = 'Success';
-
-export default Success;

package/src/elements/Alert/Warning.jsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Alert from './Alert';
-
-const Warning = props => {
-    const { children, ...otherProps } = props;
-
-    return (
-        <Alert type="warning" {...otherProps}>
-            {children}
-        </Alert>
-    );
-};
-Warning.propTypes = {
-    children: PropTypes.node.isRequired,
-};
-Warning.displayName = 'Warning';
-
-export default Warning;

package/src/elements/Alert/_alert.scss

@@ -1,93 +0,0 @@
-/**
- * Copyright 2015 eccenca GmbH. All Rights Reserved.
- *
- * @author Michael Haschke
- */
-
-.mdl-alert {
-    border-radius: $button-border-radius;
-
-    a {
-        color: inherit;
-        font-weight: bold;
-    }
-
-    &.mdl-alert--spacing {
-        margin: $typo-body-1-margin-bottom 0;
-
-        &:first-child {
-            margin-top: 0;
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    &.mdl-alert--border {
-        border-style: solid;
-        border-width: 1px;
-    }
-
-    &.mdl-alert--success {
-        color: to_color($ecc-color-success-text);
-        background-color: to_color($ecc-color-success-background);
-        border-color: darken(to_color($ecc-color-success-background), 5%);
-    }
-
-    &.mdl-alert--info {
-        color: to_color($ecc-color-info-text);
-        background-color: to_color($ecc-color-info-background);
-        border-color: darken(to_color($ecc-color-info-background), 5%);
-    }
-
-    &.mdl-alert--warning {
-        color: to_color($ecc-color-warning-text);
-        background-color: to_color($ecc-color-warning-background);
-        border-color: darken(to_color($ecc-color-warning-background), 5%);
-    }
-
-    &.mdl-alert--danger {
-        color: to_color($ecc-color-danger-text);
-        background-color: to_color($ecc-color-danger-background);
-        border-color: darken(to_color($ecc-color-danger-background), 5%);
-    }
-
-    &.mdl-alert--dismissable {
-
-        position: relative;
-
-        .mdl-alert__dismiss {
-            position: absolute;
-            top: 0;
-            right: 0;
-
-            .mdl-button {
-                opacity: 0.5;
-
-                &:focus, &:hover {
-                    background-color: transparent;
-                    opacity: 1;
-                }
-            }
-        }
-    }
-}
-
-.mdl-alert__content {
-    padding: $ecc-size-block-whitespace/4 $ecc-size-block-whitespace/2;
-
-    & > *:last-child {
-        margin-bottom: 0;
-    }
-
-    .mdl-alert--dismissable & {
-        padding-right: calc(#{$button-icon-size} + #{$ecc-size-block-whitespace/2});
-    }
-
-    .mdl-alert--reducedheight & {
-        max-height: 50vh;
-        overflow: auto;
-    }
-
-}

package/src/elements/Alert/index.js

@@ -1,13 +0,0 @@
-import Alert from './Alert';
-import Error from './Error';
-import Info from './Info';
-import Success from './Success';
-import Warning from './Warning';
-
-export default {
-    Alert,
-    Error,
-    Info,
-    Success,
-    Warning,
-};

package/src/elements/AutoCompleteBox/AutoCompleteBox.jsx

@@ -1,149 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import _ from 'lodash';
-import Highlighter from 'react-highlight-words';
-import cx from 'classnames';
-import SelectBox from '../SelectBox/SelectBox';
-
-const Highlight = props => {
-    const { textToHighlight, searchWord } = props;
-
-    if (!_.isString(textToHighlight) || _.isEmpty(textToHighlight)) {
-        return false;
-    }
-
-    if (!_.isString(searchWord) || _.isEmpty(searchWord)) {
-        return <span>{textToHighlight}</span>;
-    }
-
-    return (
-        <Highlighter
-            textToHighlight={textToHighlight}
-            searchWords={[searchWord]}
-            autoEscape={true}
-        />
-    );
-};
-
-class AutoCompleteBox extends Component {
-    static propTypes = {
-        /**
-         * pass Textfield user input to parent component (e.g. to update options)
-         */
-        handleValueChange: PropTypes.func, // query which returns options
-        /**
-         * Insert a custom className to element
-         */
-        className: PropTypes.string,
-        /**
-         * Allow to manipulate inserted user input string before using it
-         */
-        inputRestriction: PropTypes.func,
-        /**
-         * Define if the label is shown in option's dropdown
-         */
-        showLabel: PropTypes.bool,
-        /**
-         * Define if the value is shown in option's dropdown
-         */
-        showValue: PropTypes.bool,
-        /**
-         * Define if the description is shown in option's dropdown
-         */
-        showDescription: PropTypes.bool,
-        // rest will be validated by `SelectBox`
-    };
-
-    static defaultProps = {
-        showLabel: true,
-        showValue: true,
-        showDescription: true,
-    };
-
-    /**
-     * @param props
-     */
-    constructor(props) {
-        super(props);
-        this.displayName = 'AutoCompleteBox';
-        this.handleInputChange = this.handleInputChange.bind(this);
-
-        this.currentInputValue = '';
-    }
-
-    optionRender = option => {
-        const { showLabel, showValue, showDescription } = this.props;
-        const { label, value, description } = option;
-        const escapedInput = this.currentInputValue.replace(/[?*|$]/g, '\\$0');
-        // only show value entry if it is not same as label and is allowed to show
-        const optionValue = (value !== label) && showValue && (
-            <code key="autoCompleteValue" className="Select-option__value">
-                <Highlight
-                    textToHighlight={value}
-                    searchWord={escapedInput}
-                />
-            </code>
-        );
-
-        const optionDescription = description && showDescription && (
-            <span
-                key="autoCompleteDescription"
-                className="Select-option__description"
-            >
-                <Highlight
-                    textToHighlight={description}
-                    searchWord={escapedInput}
-                />
-            </span>
-        );
-
-        const optionLabel = label && showLabel && (
-            <strong key="autoCompleteLabel" className="Select-option__label">
-                <Highlight
-                    textToHighlight={label}
-                    searchWord={escapedInput}
-                />
-            </strong>
-        );
-
-        return [
-            optionLabel,
-            optionValue,
-            optionDescription,
-        ];
-    };
-
-    // will only be triggered when the user type something in textfield
-    handleInputChange(inputValue) {
-        if (_.isFunction(this.props.inputRestriction)) {
-            inputValue = this.props.inputRestriction(inputValue);
-        }
-        const inputValueCleaned = inputValue.replace(/\$/g, '');
-        // check if value really changed
-        if (!_.isEqual(inputValueCleaned, this.currentInputValue)) {
-            this.currentInputValue = _.clone(inputValueCleaned);
-            // directly pass the current value to parent component (e.g. to update external options)
-            if (_.isFunction(this.props.handleValueChange)) {
-                this.props.handleValueChange(inputValueCleaned);
-            }
-        }
-        return inputValueCleaned;
-    }
-
-    render() {
-        const {
-            showLabel, showValue, showDescription, ...props
-        } = this.props;
-        return (
-            <SelectBox
-                {...props}
-                className={cx(this.props.className, 'Select--AutoComplete')}
-                onInputChange={this.handleInputChange}
-                searchable
-                optionRenderer={this.optionRender}
-            />
-        );
-    }
-}
-
-export default AutoCompleteBox;

package/src/elements/AutoCompleteBox/_autocomplete.scss

@@ -1,33 +0,0 @@
-.Select--AutoComplete {
-
-    .Select-option__label,
-    .Select-option__value,
-    .Select-option__description {
-        display: block;
-        white-space: nowrap;
-        max-width: 100%;
-        width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        line-height: 1/$ecc-size-type-levelratio * $ecc-size-typo-base-lineheight;
-    }
-
-    .Select-option__label {
-        font-size: $typo-body-1-font-size;
-        font-weight: 500;
-    }
-
-    .Select-option__value {
-        font-family: "Roboto Mono", monospace;
-        font-size: $ecc-size-typo-caption;
-        direction: rtl;
-        text-align: left;
-    }
-
-    .Select-option__description {
-        font-size: $ecc-size-typo-caption;
-        overflow-wrap: break-word;
-        white-space: normal;
-    }
-
-}

package/src/elements/Breadcrumbs/BreadcrumbItem.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-
-// BreadcrumbItem component
-const BreadcrumbItem = props => {
-    const { children, className, ...otherProps } = props;
-
-    let crumbType = otherProps.onClick ? 'button' : 'span';
-    crumbType = otherProps.href ? 'a' : crumbType;
-
-    const crumbButton = React.createElement(
-        crumbType,
-        {
-            className: 'ecc-breadcrumbs__button',
-            ...otherProps,
-        },
-        children
-    );
-
-    return (
-        <li className={cx('ecc-breadcrumbs__item', className)}>
-            {crumbButton}
-        </li>
-    );
-};
-BreadcrumbItem.propTypes = {
-    /**
-     additional CSS class name
-     */
-    className: PropTypes.string,
-};
-
-export default BreadcrumbItem;

package/src/elements/Breadcrumbs/BreadcrumbList.jsx

@@ -1,56 +0,0 @@
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-/**
- The are two simple React elements to create breadcrumb navigation.
-
- ```js
- import {
-    BreadcrumbList,
-    BreadcrumbItem,
-} from '@eccenca/gui-elements';
-
- class Page extends React.Component {
-    // template rendering
-    render() {
-        return (
-            <BreadcrumbList
-                className={'my-own-class'}
-            >
-                <BreadcrumbItem
-                    onClick={function(){}} // (optional) function, breadcrumb is rendered as HTML button element
-                >
-                    Button
-                </BreadcrumbItem>
-                <BreadcrumbItem
-                    href="#" // (optional) string, breadcrumb is rendered as HTML link anchor
-                >
-                    Link
-                </BreadcrumbItem>
-                <BreadcrumbItem>
-                    Span
-                </BreadcrumbItem>
-            </BreadcrumbList>
-        )
-    },
-    // ....
-};
- ```
- */
-// BreadcrumbList component
-const BreadcrumbList = props => {
-    const { children, className, ...otherProps } = props;
-
-    return (
-        <ol className={cx('ecc-breadcrumbs', className)} {...otherProps}>
-            {children}
-        </ol>
-    );
-};
-BreadcrumbList.propTypes = {
-    /**
-     additional CSS class name
-     */
-    className: PropTypes.string,
-};
-export default BreadcrumbList;

package/src/elements/Breadcrumbs/_breadcrumbs.scss

@@ -1,47 +0,0 @@
-.ecc-breadcrumbs {
-    @include typo-caption();
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-    flex-wrap: wrap;
-}
-
-.ecc-breadcrumbs__item {
-    padding: 0;
-    margin: 0;
-    display: inline-block;
-    opacity: 0.61;
-
-    &:after {
-        display: inline-block;
-        content: '>';
-    }
-
-    &:last-child {
-        opacity: 1;
-        font-weight: bolder;
-
-        &:after {
-            display: none;
-        }
-    }
-}
-
-.ecc-breadcrumbs__button {
-    display: inline-block;
-    border: 0;
-    margin: 0;
-    padding: $ecc-size-inline-whitespace / 2 $ecc-size-inline-whitespace;
-    font: inherit;
-    background-color: transparent;
-    color: inherit;
-    outline: none;
-    text-decoration: none;
-
-    &:not(span) {
-        cursor: pointer;
-    }
-}

package/src/elements/Breadcrumbs/index.js

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

package/src/elements/Button/AffirmativeButton.jsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import Button from './Button';
-import ProgressButton from './ProgressButton';
-
-/**
-Use the `<AffirmativeButton />` element for all buttons that trigger affirmative actions, e.g. confirming "Save data."
-For more information read the [GUI spec about button usage](https://confluence.brox.de/display/ECCGMBH/GUI+Specifications#GUISpecifications-Buttons).
-It is possible to combine it with `<Button />` parameters like `disabled`, `raised`, `iconName` and `ripple`.
-
-```js
-import {AffirmativeButton} from '@eccenca/gui-elements';
-
-const Page = React.createClass({
-    // template rendering
-    render() {
-        return (
-            <AffirmativeButton>
-                Affirmative action
-            </AffirmativeButton>
-        )
-    },
-    // ....
-});
-```
-*/
-
-const AffirmativeButton = props => {
-    // split 'normal' props from button content
-    const { children, ...otherProps } = props;
-    const useProgressButton = typeof otherProps.progress !== 'undefined';
-    // remove unused propTypes from button
-    if (!useProgressButton) {
-        delete otherProps.progress;
-    }
-
-    if (__DEBUG__ && typeof otherProps.accent !== 'undefined') {
-        console.warn(
-            'Do not use <AffirmativeButton/> with accent property.'
-        ); // eslint-disable-line no-console
-    }
-
-    if (__DEBUG__ && typeof otherProps.colored !== 'undefined') {
-        console.warn(
-            'Do not use <AffirmativeButton/> with colored property.'
-        ); // eslint-disable-line no-console
-    }
-
-    if (__DEBUG__ && typeof otherProps.dismissive !== 'undefined') {
-        console.warn(
-            'Do not use <AffirmativeButton/> with dismissive property.'
-        ); // eslint-disable-line no-console
-    }
-
-    if (__DEBUG__ && typeof otherProps.disruptive !== 'undefined') {
-        console.warn(
-            'Do not use <AffirmativeButton/> with disruptive property.'
-        ); // eslint-disable-line no-console
-    }
-
-    // render button
-    return useProgressButton ? (
-        <ProgressButton {...otherProps} affirmative>
-            {children}
-        </ProgressButton>
-    ) : (
-        <Button {...otherProps} affirmative>
-            {children}
-        </Button>
-    );
-};
-AffirmativeButton.displayName = 'AffirmativeButton';
-
-export default AffirmativeButton;