@eccenca/gui-elements 23.0.0 → 23.1.0-rc.2

package/src/components/Typography/index.ts

@@ -0,0 +1,25 @@
+import Highlighter, { HighlighterProps } from "./Highlighter";
+import { extractSearchWords, matchesAllWords, createMultiWordRegex } from "./Highlighter";
+import HtmlContentBlock, { HtmlContentBlockProps } from "./HtmlContentBlock";
+import OverflowText, { OverflowTextProps } from "./OverflowText";
+import WhiteSpaceContainer, { WhiteSpaceContainerProps } from "./WhiteSpaceContainer";
+
+export type {
+    HighlighterProps,
+    HtmlContentBlockProps,
+    OverflowTextProps,
+    WhiteSpaceContainerProps
+};
+
+export {
+    Highlighter,
+    HtmlContentBlock,
+    OverflowText,
+    WhiteSpaceContainer,
+};
+
+export const HighlighterFunctions = {
+    extractSearchWords,
+    matchesAllWords,
+    createMultiWordRegex,
+};

package/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { loremIpsum } from "react-lorem-ipsum";
+import { WhiteSpaceContainer as WhiteSpaceContainerElement } from "../../../index";
+
+const whiteSpaceSizeOptions = {
+    control: "select",
+    options: {
+        "not set": undefined,
+        "tiny": "tiny",
+        "small": "small",
+        "regular": "regular",
+        "large": "large",
+        "xlarge": "xlarge"
+    }
+}
+
+export default {
+    title: "Components/Typography",
+    component: WhiteSpaceContainerElement,
+    argTypes: {
+        children: { control: "none" },
+        marginTop: {...whiteSpaceSizeOptions},
+        marginRight: {...whiteSpaceSizeOptions},
+        marginBottom: {...whiteSpaceSizeOptions},
+        marginLeft: {...whiteSpaceSizeOptions},
+        paddingTop: {...whiteSpaceSizeOptions},
+        paddingRight: {...whiteSpaceSizeOptions},
+        paddingBottom: {...whiteSpaceSizeOptions},
+        paddingLeft: {...whiteSpaceSizeOptions},
+    },
+} as ComponentMeta<typeof WhiteSpaceContainerElement>;
+
+const Template: ComponentStory<typeof WhiteSpaceContainerElement> = (args) => (
+    <WhiteSpaceContainerElement {...args} style={{background: "#eee"}}/>
+);
+
+const testContent = loremIpsum({
+    p: 2,
+    avgSentencesPerParagraph: 4,
+    random: false
+}).toString()
+
+export const WhiteSpaceContainer = Template.bind({});
+WhiteSpaceContainer.args = {
+    children: [
+        <p>{ testContent }</p>,
+        <p><strong>{ testContent.replaceAll(" ", "") }</strong></p>,
+        <p>{ testContent }</p>
+    ],
+    paddingTop: "tiny",
+    paddingRight: "small",
+    paddingBottom: "regular",
+    paddingLeft: "large",
+}

package/src/components/Typography/typography.scss

@@ -205,7 +205,7 @@ table {
 .#{$eccgui}-typography__overflowtext--passdown * {
     overflow: hidden;
     text-overflow: ellipsis;
-    word-wrap: normal;
+    overflow-wrap: normal;
     white-space: nowrap;
     // display: inherit;
     max-width: 100%;
@@ -254,7 +254,8 @@ table {
 }
 
 .#{$eccgui}-typography--forcelinebreak {
-    word-break: break-all;
+    word-break: normal;
+    overflow-wrap: anywhere;
 }
 
 .#{$eccgui}-typography--preventlinebreak {

package/src/components/Workspace/WorkspaceContent.tsx

@@ -12,7 +12,7 @@ function WorkspaceContent({ children, className = '', ...restProps }: any) {
             className={`${eccgui}-workspace__content ` + className}
             fullWidth={true}
         >
-            <GridRow>
+            <GridRow dontWrapColumns={false}>
                 { children }
             </GridRow>
         </Grid>

package/src/components/index.scss

@@ -0,0 +1,5 @@
+@import "./Badge/badge";
+@import "./Depiction/depiction";
+@import "./Icon/icon";
+@import "./Tree/tree";
+@import "./Typography/typography";

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from "./Badge/Badge";
+export * from "./Depiction/Depiction";
+export * from "./Icon";
+export * from "./Tree/Tree";
+export * from "./Typography";

package/src/includes/carbon-components/_components.scss

@@ -0,0 +1,11 @@
+/*
+    FIXME:
+    it's probably not necessary to include those elements because they should be included by
+    the Carbon components itself when they are necessary as sub components. We may remove this
+    file later when we haven't experiences any problems.
+*/
+// @use "~@carbon/styles/scss/components/select/index" as select;
+// @use "~@carbon/styles/scss/components/list-box/index" as list-box;
+// @use "~@carbon/styles/scss/components/dropdown/index" as dropdown;
+
+@use "~@carbon/styles/scss/components/popover/index" as popover; // necessary for pagination

package/src/includes/carbon-components/_requisits.scss

@@ -0,0 +1,18 @@
+@use "~@carbon/styles/scss/config" with (
+    $css--body: $css--body,
+    $css--font-face: $css--font-face,
+    $css--reset: $css--reset,
+    $css--default-type: $css--default-type,
+    $prefix: $prefix,
+    $flex-grid-columns: $flex-grid-columns,
+    $use-flexbox-grid: $use-flexbox-grid
+);
+@use "~@carbon/styles/scss/utilities/_visually-hidden";
+@import "~@carbon/styles/scss/feature-flags";
+@import "~@carbon/styles/scss/colors";
+@import "~@carbon/styles/scss/theme";
+:root {
+    @include theme;
+}
+@import "~@carbon/styles/scss/spacing";
+@import "~@carbon/styles/scss/utilities/z-index";

package/src/includes/carbon-components/_variables.scss

@@ -3,6 +3,11 @@
 // Stack of Carbon variables that are necessary to use their framework
 // TODO: calculate them from own configuration variables, all unchanged variables are commented out
 
+$prefix: "cds" !default;
+
+$flex-grid-columns: 16 !default;
+$use-flexbox-grid: true !default;
+
 /// If true, includes font face mixins in `_css--font-face.scss` depending on the `css--plex` feature flag
 $css--font-face: false !default;
 
@@ -24,86 +29,78 @@ $css--default-type: false !default;
 /// Used with `css--font-face` feature flag, if true, uses Plex font families instead of Helvetica
 $css--plex: false !default;
 
-$feature-flags: (
-    ui-shell: true,
-    grid-columns-16: true,
-    // not necessary, we include 16 columns grid directly
-) !default;
-
-// Manage deprecations
-$deprecations--entry: true;
-$deprecations--reasons: ();
-$deprecations--message: "Deprecated code was found, this code will be removed before the next release of Carbon.";
+$base-font-size: $eccgui-size-typo-base !default;
+@import "~@carbon/styles/scss/utilities/convert";
 
-$carbon--base-font-size: $eccgui-size-typo-base !default;
-@import "~carbon-components/scss/globals/scss/vendor/@carbon/type/scss/vendor/@carbon/layout/convert";
-
-$caption-01: (
-    font-size: carbon--rem($eccgui-size-typo-caption),
-    line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
-) !default;
 $label-01: (
-    font-size: carbon--rem($eccgui-size-typo-caption),
+    font-size: rem($eccgui-size-typo-caption),
     line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
 ) !default;
 $helper-text-01: (
-    font-size: carbon--rem($eccgui-size-typo-caption),
+    font-size: rem($eccgui-size-typo-caption),
     line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
 ) !default;
 $body-short-01: (
-    font-size: carbon--rem($eccgui-size-typo-text),
-    line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
-) !default;
-$body-long-01: (
-    font-size: carbon--rem($eccgui-size-typo-text),
-    line-height: $eccgui-size-typo-text-lineheight,
-) !default;
-$code-01: (
-    font-family: $eccgui-font-family-monospace,
-    font-size: carbon--rem($eccgui-size-typo-caption),
+    font-size: rem($eccgui-size-typo-text),
     line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
 ) !default;
-$heading-01: (
-    font-size: carbon--rem($eccgui-size-typo-text),
-    font-weight: 600,
+$body-short-02: (
+    font-size: rem($eccgui-size-typo-subtitle),
     line-height: $eccgui-size-typo-text-lineheight,
 ) !default;
-
-$body-short-02: (
-    font-size: carbon--rem($eccgui-size-typo-subtitle),
+$body-long-01: (
+    font-size: rem($eccgui-size-typo-text),
     line-height: $eccgui-size-typo-text-lineheight,
 ) !default;
 $body-long-02: (
-    font-size: carbon--rem($eccgui-size-typo-subtitle),
+    font-size: rem($eccgui-size-typo-subtitle),
     line-height: $eccgui-size-typo-text-lineheight * $eccgui-size-type-levelratio,
 ) !default;
+$code-01: (
+    font-family: $eccgui-font-family-monospace,
+    font-size: rem($eccgui-size-typo-caption),
+    line-height: math.div($eccgui-size-typo-text-lineheight, $eccgui-size-type-levelratio),
+) !default;
 $code-02: (
     font-family: $eccgui-font-family-monospace,
-    font-size: carbon--rem($eccgui-size-typo-text),
+    font-size: rem($eccgui-size-typo-text),
+    line-height: $eccgui-size-typo-text-lineheight,
+) !default;
+$heading-01: (
+    font-size: rem($eccgui-size-typo-text),
+    font-weight: 600,
     line-height: $eccgui-size-typo-text-lineheight,
 ) !default;
 $heading-02: (
-    font-size: carbon--rem($eccgui-size-typo-subtitle),
+    font-size: rem($eccgui-size-typo-subtitle),
     font-weight: 600,
     line-height: $eccgui-size-typo-text-lineheight * $eccgui-size-type-levelratio,
 ) !default;
 
-$ui-01: transparent !default;
-$ui-02: $eccgui-color-workspace-background !default;
+$layer-01: transparent !default;
+$layer-02: $eccgui-color-workspace-background !default;
 $ui-03: $pt-divider-black !default;
-$text-01: $eccgui-color-applicationheader-text !default;
-$text-02: $eccgui-color-workspace-text !default;
-$link-01: $eccgui-color-accent !default;
-$hover-primary-text: $eccgui-color-info-text !default;
-$hover-field: $button-background-color-hover !default;
-$hover-ui: $hover-field !default;
-$visited-link: purple !default;
-$disabled-02: rgba($text-01, $eccgui-opacity-disabled) !default;
-
-$layout-04: carbon--rem(
-    $eccgui-size-block-whitespace * 2 * $eccgui-size-type-levelratio
-) !default; // regular height of text input
-$spacing-05: carbon--rem($eccgui-size-inline-whitespace) !default;
+$layer-accent-01: $ui-03 !default;
+$border-subtle-01: $ui-03 !default;
+$text-primary: $eccgui-color-applicationheader-text !default;
+$text-secondary: $eccgui-color-workspace-text !default;
+$link-primary: $eccgui-color-accent !default;
+$link-primary-hover: $eccgui-color-info-text !default;
+$link-visited: purple !default;
+$hover-ui: $button-background-color-hover !default;
+$background-hover: $hover-ui !default;
+$layer-hover-01: $hover-ui !default;
+$field-hover-01: $hover-ui !default;
+$field-hover-02: $hover-ui !default;
+$disabled-02: rgba($text-primary, $eccgui-opacity-disabled) !default;
+$text-disabled: $disabled-02 !default;
+$icon-disabled: $disabled-02 !default;
+$button-disabled: $disabled-02 !default;
+$border-disabled: $disabled-02 !default;
+$spacing-05: rem($eccgui-size-inline-whitespace) !default;
+$spacing-09: rem($eccgui-size-block-whitespace * 2 * $eccgui-size-type-levelratio) !default;
+
+$data-table-zebra-color: $layer-02 !default;
 
 // FIXME: for some unknown reasons it is not possible to set the $layer* vars here, for example they are used to color the tables
 

package/src/index.scss

@@ -22,44 +22,14 @@
 @import "~@blueprintjs/core/src/common/react-transition";
 @import "~@blueprintjs/core/src/components/icon/icon-mixins";
 @import "~@blueprintjs/core/src/components/icon/icon"; // currently necessary for $icon-classes var
-// currently not needed @import "~@blueprintjs/core/src/reset";
-// currently not needed @import "~@blueprintjs/core/src/typography";
 @import "~@blueprintjs/core/src/accessibility/focus-states";
 // load blueprintjs components
-// currently not needed @import "~@blueprintjs/core/src/components/alert/alert";
-// used in own component @import "~@blueprintjs/core/src/components/breadcrumbs/breadcrumbs";
-// used in own component @import "~@blueprintjs/core/src/components/button/button";
 @import "~@blueprintjs/core/src/components/button/button-group";
-// currently not needed @import "~@blueprintjs/core/src/components/callout/callout";
-// used in own component @import "~@blueprintjs/core/src/components/card/card";
 @import "~@blueprintjs/core/src/components/collapse/collapse";
 @import "~@blueprintjs/core/src/components/context-menu/context-menu";
-@import "~@blueprintjs/core/src/components/divider/divider";
-// used in own component @import "~@blueprintjs/core/src/components/dialog/dialog";
-// currently not needed @import "~@blueprintjs/core/src/components/drawer/drawer";
-@import "~@blueprintjs/core/src/components/editable-text/editable-text";
-// used in own component @import "~@blueprintjs/core/src/components/forms/index";
-// currently not used @import "~@blueprintjs/core/src/components/html-select/html-select";
-// currently not needed @import "~@blueprintjs/core/src/components/html-table/html-table";
-@import "~@blueprintjs/core/src/components/hotkeys/hotkeys";
-// used in own component @import "~@blueprintjs/core/src/components/menu/menu";
-@import "~@blueprintjs/core/src/components/navbar/navbar";
-@import "~@blueprintjs/core/src/components/non-ideal-state/non-ideal-state";
-// used in breadcrumbs component @import "~@blueprintjs/core/src/components/overflow-list/overflow-list";
 @import "~@blueprintjs/core/src/components/overlay/overlay";
-@import "~@blueprintjs/core/src/components/panel-stack/panel-stack";
-// used in own component @import "~@blueprintjs/core/src/components/popover/popover";
 @import "~@blueprintjs/core/src/components/portal/portal";
 @import "~@blueprintjs/core/src/components/progress-bar/progress-bar";
-@import "~@blueprintjs/core/src/components/skeleton/skeleton";
-@import "~@blueprintjs/core/src/components/slider/slider";
-// used in own component @import "~@blueprintjs/core/src/components/spinner/spinner";
-// used in own component @import @import "~@blueprintjs/core/src/components/tabs/tabs";
-// used in own component @import "~@blueprintjs/core/src/components/tag/tag";
-// used in own component @import "~@blueprintjs/core/src/components/tag-input/tag-input";
-// used in own component @import "~@blueprintjs/core/src/components/toast/toast";
-// used in own component @import "~@blueprintjs/core/src/components/tooltip/tooltip";
-// used in own component @import "~@blueprintjs/core/src/components/tree/tree";
 
 // -- Carbon Elements ----------------------------------------------------------
 
@@ -74,72 +44,15 @@
 // calculate carbon configuration
 @import "./includes/carbon-components/variables";
 // load carbon requsists
-@import "~carbon-components/scss/globals/scss/feature-flags";
-@import "~carbon-components/scss/globals/scss/vars";
-@import "~carbon-components/scss/globals/scss/colors";
-@import "~carbon-components/scss/globals/scss/theme";
-@import "~carbon-components/scss/globals/scss/mixins";
-@import "~carbon-components/scss/globals/scss/layout";
-@import "~carbon-components/scss/globals/scss/spacing";
-// currently not needed @import "~carbon-components/scss/globals/scss/typography";
-@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once";
-// currently not needed @import "~carbon-components/scss/globals/scss/css--reset";
-// currently not needed @import "~carbon-components/scss/globals/scss/css--font-face";
-// currently not needed @import "~carbon-components/scss/globals/scss/css--helpers";
-// currently not needed @import "~carbon-components/scss/globals/scss/css--body";
-// used in own component @import '~carbon-components/scss/globals/grid/grid';
+@import "./includes/carbon-components/requisits";
 // load carbon components
-// not used @import '~carbon-components/scss/components/button/button';
-@import "~carbon-components/scss/components/copy-button/copy-button";
-@import "~carbon-components/scss/components/file-uploader/file-uploader";
-// not used @import '~carbon-components/scss/components/checkbox/checkbox';
-@import "~carbon-components/scss/components/combo-box/combo-box";
-// not used @import '~carbon-components/scss/components/radio-button/radio-button';
-@import "~carbon-components/scss/components/toggle/toggle";
-@import "~carbon-components/scss/components/search/search";
-@import "~carbon-components/scss/components/select/select";
-@import "~carbon-components/scss/components/text-input/text-input";
-@import "~carbon-components/scss/components/text-area/text-area";
-@import "~carbon-components/scss/components/number-input/number-input";
-@import "~carbon-components/scss/components/form/form";
-// used in own component @import "~carbon-components/scss/components/link/link";
-@import "~carbon-components/scss/components/list-box/list-box";
-@import "~carbon-components/scss/components/list/list";
-// used in own component @import "~carbon-components/scss/components/data-table/data-table";
-// not used @import '~carbon-components/scss/components/structured-list/structured-list';
-@import "~carbon-components/scss/components/code-snippet/code-snippet";
-@import "~carbon-components/scss/components/overflow-menu/overflow-menu";
-@import "~carbon-components/scss/components/content-switcher/content-switcher";
-@import "~carbon-components/scss/components/date-picker/date-picker";
-@import "~carbon-components/scss/components/dropdown/dropdown";
-// currently not needed @import "~carbon-components/scss/components/loading/loading";
-@import "~carbon-components/scss/components/modal/modal";
-@import "~carbon-components/scss/components/multi-select/multi-select";
-// currently not needed @import '~carbon-components/scss/components/notification/inline-notification';
-// currently not needed @import '~carbon-components/scss/components/notification/toast-notification';
-// not used @import '~carbon-components/scss/components/tooltip/tooltip';
-// currently not needed @import "~carbon-components/scss/components/tabs/tabs";
-// not used @import '~carbon-components/scss/components/tag/tag';
-// used in own component @import '~carbon-components/scss/components/pagination/pagination';
-// used in own component @import "~carbon-components/scss/components/accordion/accordion";
-@import "~carbon-components/scss/components/progress-indicator/progress-indicator";
-// not used @import '~carbon-components/scss/components/breadcrumb/breadcrumb';
-@import "~carbon-components/scss/components/toolbar/toolbar";
-@import "~carbon-components/scss/components/time-picker/time-picker";
-@import "~carbon-components/scss/components/slider/slider";
-@import "~carbon-components/scss/components/tile/tile";
-@import "~carbon-components/scss/components/skeleton/skeleton";
-@import "~carbon-components/scss/components/inline-loading/inline-loading";
-// currently not needed @import '~carbon-components/scss/components/pagination-nav/pagination-nav';
-// used in own component @import '~carbon-components/scss/components/ui-shell/ui-shell'; // experimental
+@import "./includes/carbon-components/components";
 
 // == Load element styles ======================================================
 
-@import "./components/Typography/typography";
 @import "./components/Application/application";
 @import "./components/Workspace/workspace";
 @import "./components/Grid/grid";
-@import "./components/Icon/icon";
 @import "./components/Menu/menu";
 @import "./components/ContextOverlay/contextoverlay";
 @import "./components/Button/button";
@@ -172,24 +85,10 @@
 @import "./components/Select/select";
 @import "./components/HoverToggler/hovertoggler";
 @import "./components/SimpleTable/simpletable";
-@import "./components/Tree/tree";
+
+@import "./components";
 @import "./extensions/codemirror/codemirror";
 
 // == load tweaks ==============================================================
 
 @import "./shame";
-
-// == Some aftermath ===========================================================
-
-// -- Carbon Elements ----------------------------------------------------------
-
-// Cycle through all the deprecation reasons, if any exist, that have been
-// accumulated through the @import process.
-@if (length($deprecations--reasons) > 0) {
-    $deprecations--message: "";
-    @each $reason in $deprecations--reasons {
-        $deprecations--message: "#{$deprecations--message} REASON: #{$reason}";
-    }
-
-    @warn $deprecations--message;
-}

package/src/index.ts

@@ -12,11 +12,6 @@ import AutoSuggestion from "./components/AutoSuggestion/AutoSuggestion";
 import { AutoSuggestionList } from "./components/AutoSuggestion/AutoSuggestionList";
 import SingleLineCodeEditor from "./components/AutoSuggestion/SingleLineCodeEditor";
 
-import HtmlContentBlock from "./components/Typography/HtmlContentBlock";
-import OverflowText from "./components/Typography/OverflowText";
-import WhiteSpaceContainer from "./components/Typography/WhiteSpaceContainer";
-import Highlighter from "./components/Typography/Highlighter";
-
 import Grid from "./components/Grid/Grid";
 import GridRow from "./components/Grid/GridRow";
 import GridColumn from "./components/Grid/GridColumn";
@@ -28,7 +23,6 @@ import WorkspaceMain from "./components/Workspace/WorkspaceMain";
 import WorkspaceSide from "./components/Workspace/WorkspaceSide";
 import WorkspaceHeader from "./components/Workspace/WorkspaceHeader";
 
-import Icon from "./components/Icon/Icon";
 import IconButton from "./components/Icon/IconButton";
 
 import Label from "./components/Label/Label";
@@ -130,13 +124,14 @@ import InteractionGate from "./components/InteractionGate/InteractionGate";
 
 import { PropertyName, PropertyValue, PropertyValuePair, PropertyValueList } from "./components/PropertyValuePair";
 
-import * as TypographyClassNames from "./components/Typography/classnames";
 import { ProgressBar } from "./components/ProgressBar/ProgressBar";
 import List from "./components/List/List";
 
 import * as LegacyReplacements from "./legacy-replacements";
 
-import {ClassNames as IntentClassNames} from "./common/Intent";
+import * as TypographyClassNames from "./components/Typography/classnames";
+import { ClassNames as IntentClassNames } from "./common/Intent";
+
 import { openInNewTab } from "./common/utils/openInNewTab";
 import decideContrastColorValue from "./common/utils/colorDecideContrastvalue";
 
@@ -164,10 +159,6 @@ export {
     AutoSuggestion,
     AutoSuggestionList,
     SingleLineCodeEditor,
-    HtmlContentBlock,
-    OverflowText,
-    WhiteSpaceContainer,
-    Highlighter,
     Grid,
     GridRow,
     GridColumn,
@@ -194,7 +185,6 @@ export {
     TableBody,
     TableCell,
     TableHeader,
-    Icon,
     IconButton,
     Label,
     Button,
@@ -260,7 +250,7 @@ export {
     LegacyReplacements,
 };
 
-export * from "./components/Tree/Tree";
-export * from "./cmem";
-export * from "./extensions";
+export * from "./components";
 export * from "./components/interfaces";
+export * from "./extensions";
+export * from "./cmem";