@eccenca/gui-elements 6.3.0 → 22.0.1

package/src/legacy-replacements/Checkbox/Checkbox.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import Checkbox from "../../components/Checkbox/Checkbox";
+
+const extendedOnChangeBoolean = (onChangeFn: any, event: any) => {
+    if (typeof onChangeFn === "function") {
+        onChangeFn({
+            event,
+            name: event.target.name,
+            value: event.target.checked,
+            rawValue: event.target.value,
+        });
+    }
+};
+
+export function CheckboxReplacement ({
+    children = null,
+    checked = false,
+    className = null,
+    disabled = false,
+    label = null,
+    onChange,
+    ...otherProps
+}: any) {
+    if (process.env.NODE_ENV === 'development') {
+        const debugMsg = ["This checkbox element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (Checkbox)."];
+        if (typeof otherProps.ripple !== "undefined") {
+            debugMsg.push("Checkbox 'ripple' property is not supported on legacy replacement element.");
+            delete otherProps.ripple;
+        }
+        if (typeof otherProps.hideLabel !== "undefined") {
+            debugMsg.push("Checkbox 'hideLabel' property is not supported on legacy replacement element.");
+            delete otherProps.hideLabel;
+        }
+        debugMsg.forEach(element => console.debug(element));
+    }
+    if (typeof otherProps.ripple !== "undefined") {
+        delete otherProps.ripple;
+    }
+    if (typeof otherProps.hideLabel !== "undefined") {
+        delete otherProps.hideLabel;
+    }
+    return (
+        <Checkbox
+            {...otherProps}
+            className={className}
+            disabled={disabled}
+            checked={checked}
+            onChange={extendedOnChangeBoolean.bind(null, onChange)}
+        >
+            {label}
+            {children}
+        </Checkbox>
+    );
+}

package/src/legacy-replacements/Radio/RadioButton.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import RadioButton from "../../components/RadioButton/RadioButton";
+
+export function RadioButtonReplacement ({
+    children,
+    label,
+    ...otherProps
+}: any) {
+    if (process.env.NODE_ENV === 'development') {
+        const debugMsg = ["This radio element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard element (RadioButton)."];
+        if (typeof otherProps.ripple !== "undefined") {
+            debugMsg.push("Radio 'ripple' property is not supported on legacy replacement element.");
+            delete otherProps.ripple;
+        }
+        if (typeof otherProps.hideLabel !== "undefined") {
+            debugMsg.push("Radio 'hideLabel' property is not supported on legacy replacement element.");
+            delete otherProps.hideLabel;
+        }
+        if (typeof label !== "undefined") {
+            debugMsg.push("Radio 'label' property is not supported exactly like at the legacy element.");
+        }
+        debugMsg.forEach(element => console.debug(element));
+    }
+    if (typeof otherProps.ripple !== "undefined") {
+        delete otherProps.ripple;
+    }
+    if (typeof otherProps.hideLabel !== "undefined") {
+        delete otherProps.hideLabel;
+    }
+    return (
+        <RadioButton
+            {...otherProps}
+        >
+            {label}
+            {children}
+        </RadioButton>
+    );
+}

package/src/legacy-replacements/TextField/TextField.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import FieldItem from "../../components/Form/FieldItem";
+import TextField from "../../components/TextField/TextField";
+import TextArea from "../../components/TextField/TextArea";
+import IconButton from "../../components/Icon/IconButton";
+
+const extendedOnChange = (onChangeFn: any, event: any) => {
+    if (typeof onChangeFn === "function") {
+        onChangeFn({
+            event,
+            name: event.target.name,
+            value: event.target.value,
+            rawValue: event.target.value,
+        });
+    }
+};
+
+export function TextFieldReplacement ({
+    className,
+    disabled = false,
+    error,
+    inputClassName,
+    label,
+    multiline = false,
+    onChange,
+    onClearValue,
+    // reducedSize = false,
+    required = false,
+    stretch = true,
+    value,
+    ...otherProps
+}: any) {
+    if (process.env.NODE_ENV === 'development') {
+        const debugMsg = ["This textfield element is a adhoc replacement for a legacy element. Usage is deprecated, please use a standard elements (FieldItem, TextField, TextArea)."];
+        if (typeof otherProps.reducedSize !== "undefined") {
+            debugMsg.push("TextField 'reducedSize' property is currently not supported on legacy replacement element.");
+            delete otherProps.reducedSize;
+        }
+        debugMsg.forEach(element => console.debug(element));
+    }
+    if (typeof otherProps.reducedSize !== "undefined") {
+        delete otherProps.reducedSize;
+    }
+
+    const InputElement = !!multiline ? TextArea : TextField;
+
+    const fieldProperties = {
+        className: className,
+        messageText: error,
+        labelAttributes: !!label ? { text: label } : {},
+    }
+
+    const inputProperties: {[key: string]: any } = {
+        className: inputClassName,
+        fullWidth: stretch,
+        value: value,
+        required: required,
+        onChange: extendedOnChange.bind(null, onChange),
+    }
+
+    if (!!multiline) {
+        delete inputProperties.fullWidth;
+    }
+
+    if (multiline === false && !!onClearValue && !!value) {
+        inputProperties['rightElement'] = (
+            <IconButton
+                data-test-id={otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`}
+                name="operation-clear"
+                onClick={onClearValue}
+            />
+        );
+    }
+
+    const sharedProperties = {
+        hasStateDanger: !!error ? true : false,
+        disabled: disabled,
+    };
+
+    return !!error || !!label ? (
+        <FieldItem
+            {...sharedProperties}
+            {...fieldProperties}
+        >
+            <InputElement {...otherProps} {...sharedProperties} {...inputProperties} />
+        </FieldItem>
+    ) : (
+        <InputElement {...otherProps} {...inputProperties} />
+    );
+}

package/src/test/setupTests.js

@@ -0,0 +1,2 @@
+import "regenerator-runtime/runtime";
+

package/.cached-fonts

@@ -1 +0,0 @@
-3.0.1|2.137

package/Ruleset.md

@@ -1,93 +0,0 @@
-## CSS Theming
-
-This part describes how we use and produce the style sheets for DW3.
-
-### Pre-Compiler
-
-* we use **pure** Sass with SCSS syntax
-* pre-compiling is done by grunt tasks
-* Sass: http://sass-lang.com/
-* SCSS: http://www.sitepoint.com/whats-difference-sass-scss/
-
-### Framework Abstraction
-
-* we use our own abstraction layout that can include SCSS modules from one or
-  more other front end frameworks, e.g. Twitter Bootstrap or  Zurb Foundation.
-  Advantages are:
-  * we can use our own variable names
-  * we can use our own naming conventions for CSS classes and elements
-  * we can mix existing frameworks (and exchange parts later)
-  * we can add own components without touching any framework stuff
-
-### Theme vs. Skin
-
-* we do not mix theme layout (position, size, margins, borders, sizes, weight),
-  skin layout (font-faces, color schemes) and pictograms (icon fonts)
-
-### Core vs. Components
-
-* we provide styles for global GUI elements in core layout
-* component authors need to provide layout of unique component elements in their
-  own component SCSS as part of the component
-* all core components are provided as single modules to simplify re-use
-
-### Definition Rules
-
-* all rules are done for CSS classes, not HTML element tags
-* typography for bigger text blocks is encapsulated as core module
-
-### Naming Conventions
-
-* we use BEM naming conventions (Block - Element - Modifier) for css classes,
-  adding a prefix to differ between core and component classes
-* we don't use abbrevations for block and element names, .e.g. ``button``, not
-  ``btn``
-* we use nouns for blocks and elements, and adjectives for modifiers
-* Syntax: {prefix-core-component}-{component-module-name}-{block-name}__{element-name}--{modifier-name}
-* Prefixes for core and component: ``g`` and ``c``
-* Name of "global core application module": ``elds``
-* Exceptions:
-  * class name for GUI element states, eg. "is selected": .is-{attribute-name}
-  * class name for small layout helpers, eg. "bold font weight": .u-{layouthelper-name}
-* Examples:
-  * Button element: ``g-elds-button``
-  * Large button: ``g-elds-button--large``
-  * Button symbol: ``g-elds-button__symbol``
-  * element state: ``is-selected``
-  * bold font weight: ``u-boldfontweight``
-* Links:
-  * BEM: http://bem.info/method/definitions/
-  * http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
-
-### Code Conventions
-
-* we use code formating rules from Idomatic CSS
-* https://github.com/necolas/idiomatic-css/blob/master/README.md
-
-### Dev Rules
-
-* we use multi class patter in templates:
-  ``<button class="g-elds-button g-elds-button--large">Label</button>``
-
-In SCSS this means:
-
-````
-.g-elds-button {
-    /* global button rules */
-    font-size: 1em;
-    
-    // states
-    
-    &:hover {
-    }
-    
-    &.is-selected {
-    }
-}
-
-.g-elds-button--large {
-    font-size: 2em;
-}
-````
-
-

package/additionalLicenses.yml

@@ -1,21 +0,0 @@
-'@eccenca/gui-elements':
-  description: GUI Elements
-  language: javascript
-  dependencies:
-    # Not imported using npm
-    - name: material-design-icons
-      version: 3.0.1
-      url: https://github.com/google/material-design-icons
-      spdx: Apache-2.0
-      licenses:
-        - name: Apache 2.0
-          url: https://raw.githubusercontent.com/google/material-design-icons/3.0.1/LICENSE
-    # Not imported using npm because it is very big
-    - name: roboto
-      version: '2.137'
-      url: https://github.com/google/roboto
-      spdx: Apache-2.0
-      licenses:
-        - name: Apache 2.0
-          url: https://raw.githubusercontent.com/google/roboto/v2.137/LICENSE
-      downloadUrl: https://github.com/google/roboto/archive/v2.137.zip

package/buildConfig.js

@@ -1,25 +0,0 @@
-const path = require('path');
-
-module.exports = {
-    testEntryPoint: path.join(__dirname, 'test', 'index.jsx'),
-    webpackConfig: {
-        common: {
-            context: path.resolve(__dirname),
-        },
-        debug: {
-            entry: './ui-test/ui-test.jsx',
-            output: {
-                filename: 'component.min.js',
-            },
-        },
-        production: {
-            entry: './index.js',
-            output: {
-                path: path.join(__dirname, 'es5'),
-                filename: 'component.js',
-                libraryTarget: 'commonjs2',
-            },
-        },
-    },
-    lintingFiles: ['./src/**/*', './test/**/*', './ui-test/**/*', './index.js'],
-};