added tutorial tool, still need to integrate with metadatatool

2 files changed, 172 insertions, 177 deletions

diff --git a/packages/components/src/components/Button/Button.tsx b/packages/components/src/components/Button/Button.tsx
index a91c74a4c..4a63afac2 100644
--- a/packages/components/src/components/Button/Button.tsx
+++ b/packages/components/src/components/Button/Button.tsx
@@ -1,195 +1,190 @@
-import { Tooltip } from '@mui/material'
-import React from 'react'
-import { Alignment, IGlobalProps, Placement, Type , getFormLabelSize } from '../../global'
-import { Colors, Size } from '../../global/globalEnums'
-import { getFontSize, getHeight, isDark } from '../../global/globalUtils'
-import { IconButton } from '../IconButton'
-import './Button.scss'
+import { Tooltip } from '@mui/material';
+import React from 'react';
+import { Alignment, IGlobalProps, Placement, Type, getFormLabelSize } from '../../global';
+import { Colors, Size } from '../../global/globalEnums';
+import { getFontSize, getHeight } from '../../global/globalUtils';
+import { IconButton } from '../IconButton';
+import './Button.scss';
+import { infoState } from '../../../../../src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState';
 
 export interface IButtonProps extends IGlobalProps {
-  onClick?: (event: React.MouseEvent) => void
-  onDoubleClick?: (event: React.MouseEvent) => void
-  type?: Type
-  active?: boolean
+    onClick?: (event: React.MouseEvent) => void;
+    onDoubleClick?: (event: React.MouseEvent) => void;
+    type?: Type;
+    active?: boolean;
 
-  // Content
-  text?: string
-  icon?: JSX.Element | string
+    // Content
+    text?: string;
+    icon?: JSX.Element | string;
 
-  // Additional stylization
-  iconPlacement?: Placement
-  color?: string
-  colorPicker?: string,
-  uppercase?: boolean,
-  align?: Alignment 
+    // Additional stylization
+    iconPlacement?: Placement;
+    color?: string;
+    colorPicker?: string;
+    uppercase?: boolean;
+    align?: Alignment;
+    filter?: string;
+    targetState?: infoState
 }
 
 export const Button = (props: IButtonProps) => {
-  const {
-    text,
-    icon,
-    onClick,
-    onDoubleClick,
-    onPointerDown,
-    active,
-    height,
-    inactive,
-    type = Type.PRIM,
-    label,
-    uppercase = false,
-    iconPlacement = 'right',
-    size = Size.SMALL,
-    color = Colors.MEDIUM_BLUE,
-    background,
-    style,
-    tooltip,
-    tooltipPlacement = 'top',
-    colorPicker,
-    formLabel,
-    formLabelPlacement,
-    fillWidth,
-    align = fillWidth ? 'flex-start' : 'center'
-  } = props
+    const {
+        text,
+        icon,
+        onClick,
+        onDoubleClick,
+        onPointerDown,
+        active,
+        height,
+        inactive,
+        type = Type.PRIM,
+        filter,
+        uppercase = false,
+        iconPlacement = 'right',
+        size = Size.SMALL,
+        color = Colors.MEDIUM_BLUE,
+        background,
+        style,
+        tooltip,
+        tooltipPlacement = 'top',
+        colorPicker,
+        formLabel,
+        formLabelPlacement,
+        fillWidth,
+        align = fillWidth ? 'flex-start' : 'center',
+    } = props;
 
-  if (!text) {
-    return <IconButton {...props}/>
-  }
-
-  /**
-   * Pointer down
-   * @param e
-   */
-  const handlePointerDown = (e: React.PointerEvent) => {
-    
-    if (!inactive && onPointerDown) {
-      e.stopPropagation();
-      e.preventDefault();
-      onPointerDown(e)
+    if (!text) {
+        return <IconButton {...props} />;
     }
-  }
 
-  /**
-   * In the event that there is a single click
-   * @param e
-   */
-  const handleClick = (e: React.MouseEvent) => {
-    if (!inactive && onClick) {
-      e.stopPropagation();
-      e.preventDefault();
-      onClick(e)
-    } 
-  }
+    /**
+     * Pointer down
+     * @param e
+     */
+    const handlePointerDown = (e: React.PointerEvent) => {
+        if (!inactive && onPointerDown) {
+            e.stopPropagation();
+            e.preventDefault();
+            onPointerDown(e);
+        }
+    };
 
-  /**
-   * Double click
-   * @param e
-   */
-  const handleDoubleClick = (e: React.MouseEvent) => {
-    if (!inactive && onDoubleClick){
-      e.stopPropagation();
-      e.preventDefault();
-      onDoubleClick(e)
-    } 
-  }
+    /**
+     * In the event that there is a single click
+     * @param e
+     */
+    const handleClick = (e: React.MouseEvent) => {
+        if (!inactive && onClick) {
+            e.stopPropagation();
+            e.preventDefault();
+            onClick(e);
+        }
+    };
 
-  const getBorderColor = (): Colors | string | undefined => {
-    switch(type){
-      case Type.PRIM:
-        return undefined;
-      case Type.SEC:
-        if (colorPicker) return colorPicker;
-        return color;
-      case Type.TERT:
-        if (colorPicker) return colorPicker;
-        if (active) return color;
-        else return color;
-    }
-  }
+    /**
+     * Double click
+     * @param e
+     */
+    const handleDoubleClick = (e: React.MouseEvent) => {
+        if (!inactive && onDoubleClick) {
+            e.stopPropagation();
+            e.preventDefault();
+            onDoubleClick(e);
+        }
+    };
 
-  const getColor = (): Colors | string | undefined => {
-    if (color && background) return color;
-    switch(type){
-      case Type.PRIM:
-        if (colorPicker) return colorPicker
-        return color;
-      case Type.SEC:
-        if (colorPicker) return colorPicker
-        return color;
-      case Type.TERT:
-        if (colorPicker) {
-          if (isDark(colorPicker)) return Colors.WHITE;
-          else return Colors.BLACK
+    const getBorderColor = (): Colors | string | undefined => {
+        switch (type) {
+            case Type.PRIM:
+                return undefined;
+            case Type.SEC:
+                if (colorPicker) return colorPicker;
+                return color;
+            case Type.TERT:
+                return color;
         }
-        if (isDark(color)) return Colors.WHITE;
-        else return Colors.BLACK
-    }
-  }
+    };
 
-  const getBackground = (): Colors | string | undefined => {
-    if (background) return background;
-    switch(type) {
-      case Type.PRIM:
-        if (colorPicker) return colorPicker
-        return color;
-      case Type.SEC:
-        if (colorPicker) return colorPicker
-        return color;
-      case Type.TERT:
-        if (colorPicker) return colorPicker
-        else return color
-    }
-  }
+    const getColor = (): Colors | string | undefined => {
+        if (color && background) return color;
+        switch (type) {
+            case Type.PRIM:
+            case Type.SEC:
+                if (colorPicker) return colorPicker;
+                return color;
+            case Type.TERT:
+                return '';
+        }
+    };
 
-  const defaultProperties: React.CSSProperties = {
-    height: getHeight(height, size),
-    minHeight: getHeight(height, size),
-    width: fillWidth ? '100%' : 'fit-content',
-    justifyContent: align ? align : undefined,
-    padding: fillWidth && align === 'center' ? 0 : undefined,
-    fontWeight: 500,
-    fontSize: getFontSize(size),
-    fontFamily: 'sans-serif',
-    textTransform: uppercase ? 'uppercase' : undefined,
-    borderColor: getBorderColor(),
-    color: getColor(),
-  }
+    const getBackground = (): Colors | string | undefined => {
+        if (background) return background;
+        switch (type) {
+            case Type.PRIM:
+            case Type.SEC:
+                if (colorPicker) return colorPicker;
+                return color;
+            case Type.TERT:
+        }
+    };
 
-  const backgroundProperties: React.CSSProperties = {
-    background: getBackground()
-  }
+    const defaultProperties: React.CSSProperties = {
+        height: getHeight(height, size),
+        minHeight: getHeight(height, size),
+        width: fillWidth ? '100%' : 'fit-content',
+        justifyContent: align ? align : undefined,
+        padding: fillWidth && align === 'center' ? 0 : undefined,
+        fontWeight: 500,
+        fontSize: getFontSize(size),
+        fontFamily: 'sans-serif',
+        textTransform: uppercase ? 'uppercase' : undefined,
+        borderColor: getBorderColor(),
+        color: getColor(),
+    };
 
-  const button: JSX.Element = (
-    <Tooltip disableInteractive={true} arrow={true} placement={tooltipPlacement} title={tooltip}>
-      <div
-        className={`button-container ${type} ${active && 'active'} ${inactive && 'inactive'}`}
-        onClick={handleClick}
-        onDoubleClick={handleDoubleClick}
-        onPointerDown={handlePointerDown}
-        style={{...defaultProperties, ...style}}
-      >
-        <div className={`button-content`} 
-          style={{justifyContent: align}}
-        >
-          {iconPlacement == 'left' && icon ? <div className={`icon`} style={{
-            fontSize: getFontSize(size, true)
-          }}>{icon}</div> : null}
-          {text}
-          {iconPlacement == 'right' && icon ? <div className={`icon`} style={{
-            fontSize: getFontSize(size, true)
-          }}>{icon}</div> : null}
-        </div>
-        <div className={`background ${active && 'active'}`} style={backgroundProperties}/>
-      </div>
-    </Tooltip>
-  )
+    const backgroundProperties: React.CSSProperties = {
+        background: getBackground(),
+        filter,
+    };
 
-  return (
-    formLabel ? 
-      <div className={`form-wrapper ${formLabelPlacement}`} style={{ width: fillWidth ? '100%' : undefined}}>
-        <div className={'formLabel'} style={{fontSize: getFormLabelSize(size)}}>{formLabel}</div>
-        {button}
-      </div>
-    :
-      button
-  )
-}
+    const button: JSX.Element = (
+        <Tooltip disableInteractive={true} arrow={true} placement={tooltipPlacement} title={tooltip}>
+            <div className={`button-container ${type} ${active && 'active'} ${inactive && 'inactive'}`} onClick={handleClick} onDoubleClick={handleDoubleClick} onPointerDown={handlePointerDown} style={{ ...defaultProperties, ...style }}>
+                <div className="button-content" style={{ justifyContent: align }}>
+                    {iconPlacement == 'left' && icon ? (
+                        <div
+                            className="icon"
+                            style={{
+                                fontSize: getFontSize(size, true),
+                            }}>
+                            {icon}
+                        </div>
+                    ) : null}
+                    {text}
+                    {iconPlacement == 'right' && icon ? (
+                        <div
+                            className="icon"
+                            style={{
+                                fontSize: getFontSize(size, true),
+                            }}>
+                            {icon}
+                        </div>
+                    ) : null}
+                </div>
+                <div className={`background ${active && 'active'}`} style={backgroundProperties} />
+            </div>
+        </Tooltip>
+    );
+
+    return formLabel ? (
+        <div className={`form-wrapper ${formLabelPlacement}`} style={{ width: fillWidth ? '100%' : undefined }}>
+            <div className="formLabel" style={{ fontSize: getFormLabelSize(size) }}>
+                {formLabel}
+            </div>
+            {button}
+        </div>
+    ) : (
+        button
+    );
+};
\ No newline at end of file
diff --git a/packages/components/src/components/Dropdown/Dropdown.tsx b/packages/components/src/components/Dropdown/Dropdown.tsx
index b9b6f01b8..b3456a598 100644
--- a/packages/components/src/components/Dropdown/Dropdown.tsx
+++ b/packages/components/src/components/Dropdown/Dropdown.tsx
@@ -151,7 +151,7 @@ export const Dropdown = (props: IDropdownProps) => {
                 placement={placement}
                 tooltip={tooltip}
                 tooltipPlacement={tooltipPlacement}
-                trigger={PopupTrigger.CLICK}
+                trigger={PopupTrigger.HOVER}
                 isOpen={active}
                 setOpen={setActiveChanged}
                 size={size}