@eccenca/gui-elements 25.1.0-rc.1 → 25.1.0-rc.3

package/dist/types/extensions/codemirror/CodeMirror.d.ts

@@ -4,7 +4,15 @@ import { EditorView, Rect } from "@codemirror/view";
 import { IntentTypes } from "../../common/Intent";
 import { TestableComponent } from "../../components/interfaces";
 import { SupportedCodeEditorModes } from "./hooks/useCodemirrorModeExtension.hooks";
-export interface CodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">, TestableComponent {
+interface EditorAppearance {
+    /**
+     * If enabled the code editor won't show numbers before each line.
+     */
+    preventLineNumbers?: boolean;
+    /** Long lines are wrapped and displayed on multiple lines */
+    wrapLines?: boolean;
+}
+export interface CodeEditorProps extends EditorAppearance, Omit<React.HTMLAttributes<HTMLDivElement>, "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">, TestableComponent {
     setEditorView?: (editor: EditorView | undefined) => void;
     /**
      * `name` attribute of connected textarea element.
@@ -55,18 +63,12 @@ export interface CodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      * Default value used first when the editor is instanciated.
      */
     defaultValue?: string;
-    /**
-     * If enabled the code editor won't show numbers before each line.
-     */
-    preventLineNumbers?: boolean;
     /** Set read-only mode. Default: false */
     readOnly?: boolean;
     /** Optional height of the component */
     height?: number | string;
-    /** Long lines are wrapped and displayed on multiple lines */
-    wrapLines?: boolean;
     /**
-     * Add properties to the `div` used as warpper element.
+     * Add properties to the `div` used as wrapper element.
      * @deprecated (v26) You can now use all properties directly on `CodeEditor`.
      */
     outerDivAttributes?: Omit<React.HTMLAttributes<HTMLDivElement>, "id" | "data-test-id" | "data-testid" | "translate" | "onChange" | "onKeyDown" | "onMouseDown" | "onScroll">;
@@ -137,6 +139,7 @@ export interface CodeEditorProps extends Omit<React.HTMLAttributes<HTMLDivElemen
  * Includes a code editor, currently we use CodeMirror library as base.
  */
 export declare const CodeEditor: {
-    ({ className, onChange, onSelection, onMouseDown, onFocusChange, onKeyDown, onCursorChange, name, id, mode, preventLineNumbers, defaultValue, readOnly, shouldHaveMinimalSetup, wrapLines, onScroll, setEditorView, supportCodeFolding, shouldHighlightActiveLine, outerDivAttributes, tabIntentSize, tabIntentStyle, placeholder, additionalExtensions, tabForceSpaceForModes, enableTab, height, useLinting, autoFocus, disabled, intent, useToolbar, translate, ...otherCodeEditorProps }: CodeEditorProps): React.JSX.Element;
+    ({ className, onChange, onSelection, onMouseDown, onFocusChange, onKeyDown, onCursorChange, name, id, mode, preventLineNumbers, wrapLines, defaultValue, readOnly, shouldHaveMinimalSetup, onScroll, setEditorView, supportCodeFolding, shouldHighlightActiveLine, outerDivAttributes, tabIntentSize, tabIntentStyle, placeholder, additionalExtensions, tabForceSpaceForModes, enableTab, height, useLinting, autoFocus, disabled, intent, useToolbar, translate, ...otherCodeEditorProps }: CodeEditorProps): React.JSX.Element;
     supportedModes: ("html" | "markdown" | "python" | "sparql" | "turtle" | "xml" | "yaml" | "jinja2" | "json" | "ntriples" | "mathematica" | "sql" | "javascript")[];
 };
+export {};

package/dist/types/extensions/codemirror/toolbars/EditorAppearanceConfigMenu.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { ContextMenuProps } from "../../../components";
+export interface EditorAppearanceConfigMenuProps {
+    /** Object containing a `true`/`false` value for each property */
+    config: {
+        [s: string]: boolean;
+    };
+    /** Object containing `true` for each property that cannot be changed by user */
+    configLocked?: {
+        [s: string]: boolean | undefined;
+    };
+    /** Handler that returns a translation for each config property key */
+    configPropertyTranslate?: (key: string) => string | false;
+    /** Handler to update config after user changes */
+    setConfig: React.Dispatch<React.SetStateAction<{
+        [s: string]: boolean;
+    }>>;
+    /** Additional properties used for the included `ContextMenu` */
+    contextMenuProps?: ContextMenuProps;
+}
+/**
+ * Returns a simple context menu that provides switches to control the editor appearance.
+ */
+export declare function EditorAppearanceConfigMenu({ config, configLocked, configPropertyTranslate, setConfig, contextMenuProps, }: EditorAppearanceConfigMenuProps): React.JSX.Element;

package/dist/types/extensions/codemirror/toolbars/markdown.toolbar.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { EditorView } from "codemirror";
+import { EditorAppearanceConfigMenu } from "./EditorAppearanceConfigMenu";
 interface MarkdownToolbarProps {
     view?: EditorView;
     togglePreviewStatus: () => void;
@@ -7,6 +8,7 @@ interface MarkdownToolbarProps {
     translate: (key: string) => string | false;
     disabled?: boolean;
     readonly?: boolean;
+    configMenu?: React.ReactElement<typeof EditorAppearanceConfigMenu>;
 }
 export declare const MarkdownToolbar: React.FC<MarkdownToolbarProps>;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "25.1.0-rc.1",
+    "version": "25.1.0-rc.3",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/_shame.scss

@@ -1,31 +1,13 @@
 // Add stuff to test fast and dirty.
 // This file should not contain any styles.
 
-.#{$prefix}--assistive-text,
-.#{$prefix}--visually-hidden {
-    /*
-        TODO: move to better place, originally from ~@carbon/styles/scss/css--helpers
-        but we cannot use it directly because of other included rules there.
-    */
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    visibility: inherit;
-    border: 0;
-}
-
 /*
     WORKAROUND: thinner scrollbars
 */
 
 * {
-    scrollbar-width: thin;
     scrollbar-color: #bbb transparent;
+    scrollbar-width: thin;
 
     &::-webkit-scrollbar {
         width: 0.25rem;
@@ -38,19 +20,3 @@
         border-radius: 0.125rem;
     }
 }
-
-/*
-    CHANGE: default focus behaviour
-*/
-
-:focus,
-input:focus-visible,
-textarea:focus-visible {
-    outline: none;
-    outline-offset: 0;
-}
-
-:focus-visible {
-    outline: eccgui-color-rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
-    outline-offset: 1px;
-}

package/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -130,7 +130,7 @@ export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
                         name={translate("noteLabel")}
                         id={"sticky-note-input"}
                         mode="markdown"
-                        preventLineNumbers
+                        useToolbar
                         onChange={(value) => {
                             refNote.current = value;
                         }}

package/src/common/index.ts

@@ -3,7 +3,7 @@ import { decode } from "he";
 import { invisibleZeroWidthCharacters } from "./utils/characters";
 import { colorCalculateDistance } from "./utils/colorCalculateDistance";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
-import { getEnabledColorsFromPalette, textToColorHash } from "./utils/colorHash";
+import { getEnabledColorPropertiesFromPalette, getEnabledColorsFromPalette, textToColorHash } from "./utils/colorHash";
 import getColorConfiguration from "./utils/getColorConfiguration";
 import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
@@ -22,6 +22,7 @@ export const utils = {
     setGlobalVar,
     getScrollParent,
     getEnabledColorsFromPalette,
+    getEnabledColorPropertiesFromPalette,
     textToColorHash,
     reduceToText,
     decodeHtmlEntities: decode,

package/src/common/scss/_accessibility-defaults.scss

@@ -0,0 +1,101 @@
+.#{$prefix}--assistive-text,
+.#{$prefix}--visually-hidden {
+    /*
+        originally from ~@carbon/styles/scss/css--helpers
+        but we cannot use it directly because of other included rules there.
+    */
+    position: absolute;
+    visibility: inherit;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip-path: rect(0, 0, 0, 0);
+}
+
+/*
+    default focus indicator
+*/
+
+:root {
+    --#{$eccgui}-a11y-outline-color: #{eccgui-color-var("layout", "magenta", "900")};
+    --#{$eccgui}-a11y-outline-style: solid;
+    --#{$eccgui}-a11y-outline-width: #{0.25 * $eccgui-size-block-whitespace};
+
+    // shift outline min 2px inside element to have a minimum 2px outline even with hidden overflow
+    --#{$eccgui}-a11y-outline-offset: min(calc(var(--#{$eccgui}-a11y-outline-width) * -0.5), -2px);
+}
+
+@keyframes outline-bounce {
+    0% {
+        outline-width: calc(var(--#{$eccgui}-a11y-outline-width) * 0.5);
+        outline-color: var(--#{$eccgui}-a11y-outline-color);
+        outline-offset: var(--#{$eccgui}-a11y-outline-offset);
+    }
+
+    33.3% {
+        outline-color: var(--#{$eccgui}-a11y-outline-color);
+        outline-offset: calc(var(--#{$eccgui}-a11y-outline-width));
+    }
+
+    66.6% {
+        outline-color: currentcolor;
+        outline-offset: calc(var(--#{$eccgui}-a11y-outline-width) * -2);
+    }
+
+    100% {
+        outline-width: var(--#{$eccgui}-a11y-outline-width);
+        outline-color: var(--#{$eccgui}-a11y-outline-color);
+        outline-offset: var(--#{$eccgui}-a11y-outline-offset);
+    }
+}
+
+@mixin focus-by-keyboard-static {
+    // strong visual focus indication for keyboard devices
+
+    outline: var(--#{$eccgui}-a11y-outline-color) var(--#{$eccgui}-a11y-outline-style)
+        var(--#{$eccgui}-a11y-outline-width);
+    outline-offset: var(--#{$eccgui}-a11y-outline-offset);
+}
+
+@mixin focus-by-keyboard-animation {
+    @media (prefers-reduced-motion: no-preference) {
+        animation: outline-bounce 0.5s;
+    }
+}
+
+.#{$eccgui}-a11y-focus-by-keyboard-animated {
+    @include focus-by-keyboard-static;
+    @include focus-by-keyboard-animation;
+}
+
+.#{$eccgui}-a11y-focus-by-keyboard-static {
+    @include focus-by-keyboard-static;
+
+    animation: none;
+}
+
+@mixin focus-by-pointer {
+    // limited visual focus indication for pointer devices
+
+    outline: transparent none 0;
+    outline-offset: 0;
+}
+
+.#{$eccgui}-a11y-focus-by-pointer {
+    @include focus-by-pointer;
+}
+
+*[tabindex]:not([tabindex^="-"]):focus-visible,
+:focus-visible {
+    @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
+}
+
+input:focus:not(:focus-visible),
+textarea:focus:not(:focus-visible),
+:focus:not(:focus-visible) {
+    @extend .#{$eccgui}-a11y-focus-by-pointer;
+}

package/src/common/utils/CssCustomProperties.ts

@@ -28,7 +28,7 @@ export default class CssCustomProperties {
 
     // Methods
 
-    customProperties = (props: getCustomPropertiesProps = {}): string[][] | Record<string, string> => {
+    customProperties = (props: getCustomPropertiesProps = {}): [string, string][] | Record<string, string> => {
         // FIXME:
         // in case of performance issues results should get saved at least into intern variables
         // other cache strategies could be also tested
@@ -104,7 +104,9 @@ export default class CssCustomProperties {
             });
     };
 
-    static listCustomProperties = (props: getCustomPropertiesProps = {}): string[][] | Record<string, string> => {
+    static listCustomProperties = (
+        props: getCustomPropertiesProps = {}
+    ): [string, string][] | Record<string, string> => {
         const { removeDashPrefix = true, returnObject = true, filterName = () => true, ...filterProps } = props;
 
         const customProperties = CssCustomProperties.listLocalCssStyleRuleProperties({
@@ -123,6 +125,6 @@ export default class CssCustomProperties {
 
         return returnObject
             ? (Object.fromEntries(customProperties) as Record<string, string>)
-            : (customProperties as string[][]);
+            : (customProperties as [string, string][]);
     };
 }

package/src/common/utils/colorHash.ts

@@ -6,10 +6,10 @@ import { colorCalculateDistance } from "./colorCalculateDistance";
 import CssCustomProperties from "./CssCustomProperties";
 
 type ColorOrFalse = Color | false;
-type ColorWeight = 100 | 300 | 500 | 700 | 900;
-type PaletteGroup = "identity" | "semantic" | "layout" | "extra";
+export type ColorWeight = 100 | 300 | 500 | 700 | 900;
+export type PaletteGroup = "identity" | "semantic" | "layout" | "extra";
 
-interface getEnabledColorsProps {
+export interface getEnabledColorsProps {
     /** Specify the palette groups used to define the set of colors. */
     includePaletteGroup?: PaletteGroup[];
     /** Use only some weights of a color tint. */
@@ -21,20 +21,43 @@ interface getEnabledColorsProps {
 }
 
 const getEnabledColorsFromPaletteCache = new Map<string, Color[]>();
+const getEnabledColorPropertiesFromPaletteCache = new Map<string, [string, string][]>();
 
-export function getEnabledColorsFromPalette({
+export function getEnabledColorsFromPalette(props: getEnabledColorsProps): Color[] {
+    const configId = JSON.stringify({
+        includePaletteGroup: props.includePaletteGroup,
+        includeColorWeight: props.includeColorWeight,
+    });
+
+    if (getEnabledColorsFromPaletteCache.has(configId)) {
+        return getEnabledColorsFromPaletteCache.get(configId)!;
+    }
+
+    const colorPropertiesFromPalette = Object.values(getEnabledColorPropertiesFromPalette(props));
+
+    getEnabledColorsFromPaletteCache.set(
+        configId,
+        colorPropertiesFromPalette.map((color) => {
+            return Color(color[1]);
+        })
+    );
+
+    return getEnabledColorsFromPaletteCache.get(configId)!;
+}
+
+export function getEnabledColorPropertiesFromPalette({
     includePaletteGroup = ["layout"],
     includeColorWeight = [100, 300, 500, 700, 900],
-    // TODO (planned for later): includeMixedColors = false,
+    // (planned for later): includeMixedColors = false,
     minimalColorDistance = COLORMINDISTANCE,
-}: getEnabledColorsProps): Color[] {
+}: getEnabledColorsProps): [string, string][] {
     const configId = JSON.stringify({
         includePaletteGroup,
         includeColorWeight,
     });
 
-    if (getEnabledColorsFromPaletteCache.has(configId)) {
-        return getEnabledColorsFromPaletteCache.get(configId)!;
+    if (getEnabledColorPropertiesFromPaletteCache.has(configId)) {
+        return getEnabledColorPropertiesFromPaletteCache.get(configId)!;
     }
 
     const colorsFromPalette = new CssCustomProperties({
@@ -50,18 +73,18 @@ export function getEnabledColorsFromPalette({
             const weight = parseInt(tint[2], 10) as ColorWeight;
             return includePaletteGroup.includes(group) && includeColorWeight.includes(weight);
         },
-        removeDashPrefix: false,
+        removeDashPrefix: true,
         returnObject: true,
     }).customProperties();
 
-    const colorsFromPaletteValues = Object.values(colorsFromPalette) as string[];
+    const colorsFromPaletteValues = Object.entries(colorsFromPalette) as [string, string][];
 
     const colorsFromPaletteWithEnoughDistance =
         minimalColorDistance > 0
-            ? colorsFromPaletteValues.reduce((enoughDistance: string[], color: string) => {
+            ? colorsFromPaletteValues.reduce((enoughDistance: [string, string][], color: [string, string]) => {
                   if (enoughDistance.includes(color)) {
                       return enoughDistance.filter((checkColor) => {
-                          const distance = colorCalculateDistance({ color1: color, color2: checkColor });
+                          const distance = colorCalculateDistance({ color1: color[1], color2: checkColor[1] });
                           return checkColor === color || (distance && minimalColorDistance <= distance);
                       });
                   } else {
@@ -70,14 +93,9 @@ export function getEnabledColorsFromPalette({
               }, colorsFromPaletteValues)
             : colorsFromPaletteValues;
 
-    getEnabledColorsFromPaletteCache.set(
-        configId,
-        colorsFromPaletteWithEnoughDistance.map((color: string) => {
-            return Color(color);
-        })
-    );
+    getEnabledColorPropertiesFromPaletteCache.set(configId, colorsFromPaletteWithEnoughDistance);
 
-    return getEnabledColorsFromPaletteCache.get(configId)!;
+    return getEnabledColorPropertiesFromPaletteCache.get(configId)!;
 }
 
 function getColorcode(text: string): ColorOrFalse {
@@ -148,7 +166,7 @@ export function textToColorHash({
 }
 
 function stringToIntegerHash(inputString: string): number {
-    /* this function is idempotend, meaning it retrieves the same result for the same input
+    /* this function is idempotent, meaning it retrieves the same result for the same input
     no matter how many times it's called */
     // Convert the string to a hash code
     let hashCode = 0;

package/src/components/Application/_header.scss

@@ -190,15 +190,27 @@ a.#{$prefix}--header__menu-item:active {
 }
 
 // $shell-header-focus
-.#{$prefix}--header__action:focus,
-.#{$prefix}--header__action.#{$prefix}--btn--icon-only:focus,
-.#{$prefix}--header__action.#{$prefix}--btn--primary:focus,
-a.#{$prefix}--header__name:focus,
-a.#{$prefix}--header__menu-item:focus {
-    outline: 1px dotted $shell-header-focus;
-    outline-offset: -1px;
-    border: none;
-    box-shadow: none;
+.#{$prefix}--header__action,
+.#{$prefix}--header__action.#{$prefix}--btn--icon-only,
+.#{$prefix}--header__action.#{$prefix}--btn--primary,
+a.#{$prefix}--header__name,
+a.#{$prefix}--header__menu-item {
+    &:focus {
+        @extend .#{$eccgui}-a11y-focus-by-pointer;
+
+        border: none;
+        box-shadow: none;
+    }
+
+    &,
+    .#{$prefix}--popover--open & {
+        &:focus-visible {
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
+
+            border: none;
+            box-shadow: none;
+        }
+    }
 }
 .#{$prefix}--header__menu-title[aria-expanded="true"] {
     color: $shell-header-focus;

package/src/components/Application/_sidebar.scss

@@ -28,3 +28,9 @@ $ui-02: $eccgui-color-workspace-background !default;
     padding: $eccgui-size-block-whitespace calc(0.5 * (#{mini-units(8)} - 30px));
     transition: none;
 }
+
+.#{$eccgui}-application__menu__toggler.cds--header__action {
+    &:focus-visible {
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-animated;
+    }
+}

package/src/components/Application/_toolbar.scss

@@ -51,18 +51,18 @@ $shell-panel-focus: $shell-header-focus !default;
 .#{$eccgui}-application__toolbar__panel-backdrop--onleave,
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     position: fixed;
-    inset: mini-units(8) 0 0 0;
+    inset: mini-units(8) 0 0;
 }
 
 .#{$eccgui}-application__toolbar__panel-backdrop--onoutsideclick {
     top: 0;
 }
 
-// add rules for own class identiiers
+// add rules for own class identifiers
 
 .#{$eccgui}-application__toolbar {
-    flex-basis: auto;
     flex-grow: 0;
+    flex-basis: auto;
 
     .#{$prefix}--popover--bottom-right .#{$prefix}--popover-content {
         // for some reason the original calculation still moves out the tooltip

package/src/components/AutoSuggestion/AutoSuggestion.scss

@@ -39,7 +39,9 @@
     }
 
     &:has(.cm-editor.cm-focused) {
-        box-shadow: input-transition-shadow($input-shadow-color-focus, true), $input-box-shadow-focus;
+        --#{$eccgui}-a11y-outline-color: #{$eccgui-color-accent};
+
+        @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
     }
 
     .cm-editor {

package/src/components/Checkbox/checkbox.scss

@@ -47,7 +47,7 @@ $switch-checked-background-color-disabled: eccgui-color-rgba(
         }
 
         input:focus ~ .#{$ns}-control-indicator {
-            outline-offset: 0;
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
         }
 
         input:disabled ~ .#{$ns}-control-indicator,
@@ -72,6 +72,14 @@ $switch-checked-background-color-disabled: eccgui-color-rgba(
             background-image: url("~@carbon/icons/svg/32/checkbox--indeterminate.svg");
         }
     }
+
+    &.#{$ns}-switch {
+        --#{$eccgui}-a11y-outline-offset: 1px;
+
+        input:focus ~ .#{$ns}-control-indicator {
+            @extend .#{$eccgui}-a11y-focus-by-keyboard-static;
+        }
+    }
 }
 
 .#{$ns}-control-indicator + *,

package/src/components/ColorField/ColorField.stories.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { getEnabledColorsProps } from "../../common/utils/colorHash";
+import textFieldTest from "../TextField/stories/TextField.stories";
+
+import { ColorField, ColorFieldProps } from "./ColorField";
+
+export default {
+    title: "Forms/ColorField",
+    component: ColorField,
+    argTypes: {
+        ...textFieldTest.argTypes,
+    },
+} as Meta<typeof ColorField>;
+
+const Template: StoryFn<typeof ColorField> = (args) => <ColorField {...args}></ColorField>;
+
+export const Default = Template.bind({});
+Default.args = {
+    onChange: (e) => {
+        alert(e.target.value);
+    },
+};
+
+export const NoPalettePresets = Template.bind({});
+NoPalettePresets.args = {
+    ...Default.args,
+    allowCustomColor: true,
+    colorPresets: [],
+};
+
+type TemplateColorHashProps = { stringForColorHashValue: string } & Pick<
+    ColorFieldProps,
+    "onChange" | "allowCustomColor"
+> &
+    Pick<getEnabledColorsProps, "includeColorWeight" | "includePaletteGroup">;
+
+const TemplateColorHash: StoryFn<TemplateColorHashProps> = (args: TemplateColorHashProps) => (
+    <ColorField
+        allowCustomColor={args.allowCustomColor}
+        colorPresets={ColorField.listColorPalettePresets({
+            includeColorWeight: args.includeColorWeight,
+            includePaletteGroup: args.includePaletteGroup,
+        })}
+        value={ColorField.calculateColorHashValue(args.stringForColorHashValue, {
+            allowCustomColor: args.allowCustomColor,
+            includeColorWeight: args.includeColorWeight,
+            includePaletteGroup: args.includePaletteGroup,
+        })}
+    />
+);
+
+/**
+ * Component provides a helper function to calculate a color hash from a text,
+ * that can be used as `value` or `defaultValue`.
+ *
+ * ```
+ * <ColorField value={ColorField.calculateColorHashValue("MyText")} />
+ * ```
+ *
+ * You can add `options` to set the config for the color palette filters.
+ * The same default values like on `ColorField` are used for them.
+ */
+export const ColorHashValue = TemplateColorHash.bind({});
+ColorHashValue.args = {
+    ...Default.args,
+    allowCustomColor: true,
+    includeColorWeight: [300, 500, 700],
+    includePaletteGroup: ["layout", "extra"],
+    stringForColorHashValue: "My text that will used to create a color hash as initial value.",
+};