interface updates

Compr0mzd · Jun 12, 2023 · f1cb661 · f1cb661
1 parent 7e29f74
commit f1cb661
Show file tree

Hide file tree

Showing 70 changed files with 987 additions and 1,810 deletions.
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -3,13 +3,13 @@ import styled, { css } from 'styled-components';
 
 import { SQUARE_CSS } from '../../styles';
 import { Size, ThemeMode } from '../../types';
-import { getAccentColorValues, getThemedColor } from '../../utils/colorUtils';
+import { getAccentColorValues, getTextAndBgColors, getThemedColor } from '../../utils/colorUtils';
 import Icons from '../Icons';
 import Typography, { TypographyWeight } from '../Typography';
 
 import { FULL_RADIUS, SIZE_STYLES } from './Avatar.constants';
 import { AvatarProps } from './Avatar.types';
-import { getAvatarColors, stripEmojis } from './Avatar.utils';
+import { stripEmojis } from './Avatar.utils';
 
 const AvatarContainer = styled.div<{
   $active: boolean;
@@ -121,7 +121,7 @@ const Avatar: React.FC<AvatarProps> = ({
   style,
   onClick = undefined
 }) => {
-  const [avatarColorName, avatarSecondaryColor] = getAvatarColors(color, disabled, label, forceTheme);
+  const [avatarColorName, avatarSecondaryColor] = getTextAndBgColors(color, disabled, label, forceTheme);
   const [badgePrimaryColor] = getAccentColorValues(badgeColor, forceTheme);
 
   const { avatarSize, borderRadius, borderWidth, iconSize, typographySize } = SIZE_STYLES[size];

diff --git a/src/components/Avatar/Avatar.types.ts b/src/components/Avatar/Avatar.types.ts
@@ -40,6 +40,7 @@ interface BaseAvatarProps {
 }
 
 export type AvatarProps = RequireOnlyOne<BaseAvatarProps, 'label' | 'icon'>;
+export type AvatarComponent = React.ReactElement<AvatarProps>;
 
 export type SizeStyles = {
   // Avatar width and height value

diff --git a/src/components/Avatar/Avatar.utils.tsx b/src/components/Avatar/Avatar.utils.tsx
@@ -1,16 +1,4 @@
-import { ThemeMode } from '../../types';
-import {
-  AccentColor,
-  ACCENT_COLOR_VALUES,
-  Color,
-  getAccentColorValues,
-  getThemedColor,
-  stringToColor,
-  TextColor,
-  TEXT_COLOR_VALUES
-} from '../../utils/colorUtils';
 import { Icon } from '../Icons';
-import { TypographyProps } from '../Typography';
 
 /**
  * Takes a potentially undefined label and icon
@@ -21,38 +9,6 @@ import { TypographyProps } from '../Typography';
 export const getAvatarIconOrLabel = (label: string | undefined, icon: Icon | undefined) =>
   icon ? { icon: icon } : { label: label ?? '' };
 
-/**
- * Returns the main avatar color and the background color
- * @param {Color | undefined} color
- * @param {boolean | undefined} disabled
- * @param {string | undefined} label
- * @param {ThemeMode | undefined} forceTheme
- */
-export const getAvatarColors = (
-  color?: Color,
-  disabled?: boolean,
-  label?: string,
-  forceTheme?: ThemeMode
-): [TypographyProps['color'], string] => {
-  if (disabled) {
-    const avatarColor = 'secondary';
-    const secondaryColor = 'var(--bg-overlay-secondary)';
-    const themedSecondaryColor = getThemedColor(secondaryColor, forceTheme);
-    return [avatarColor, themedSecondaryColor];
-  }
-
-  const isAccentColor = Object.keys(ACCENT_COLOR_VALUES).includes(color || '');
-  const isTextColor = Object.keys(TEXT_COLOR_VALUES).includes(color || '');
-
-  const [, secondaryColor, avatarColor] =
-    color && isAccentColor
-      ? getAccentColorValues(color as AccentColor, forceTheme)
-      : color && isTextColor
-      ? [undefined, TEXT_COLOR_VALUES[color as TextColor], 'var(--bg-overlay-tertiary)' as Color]
-      : stringToColor(label ?? '', forceTheme);
-  return [avatarColor, secondaryColor];
-};
-
 /**
  * Strips emojis from a string by removing all non-ASCII characters
  * @param {string} str - Text with emojis

diff --git a/src/components/Avatar/index.ts b/src/components/Avatar/index.ts
@@ -1,3 +1,3 @@
 export { default } from './Avatar';
-export { AvatarProps } from './Avatar.types';
+export { AvatarComponent, AvatarProps } from './Avatar.types';
 export { getAvatarIconOrLabel } from './Avatar.utils';
diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
@@ -1,14 +1,15 @@
-import styled from "styled-components";
+import React from 'react';
+import styled from 'styled-components';
 
-import { Size, ThemeMode } from "../../types";
-import { getAccentColorValues, getThemedColor } from "../../utils/colorUtils";
-import Divider, { DividerType } from "../Divider";
-import Icons, { Icon } from "../Icons";
-import IconText from "../IconText";
-import Typography, { TypographySize } from "../Typography";
+import { Size, ThemeMode } from '../../types';
+import { getAccentColorValues, getThemedColor } from '../../utils/colorUtils';
+import Divider, { DividerType } from '../Divider';
+import Icons, { Icon } from '../Icons';
+import IconText from '../IconText';
+import Typography, { TypographySize } from '../Typography';
 
-import { BANNER_HEIGHT } from "./Banner.constants";
-import { BannerProps } from "./Banner.types";
+import { BANNER_HEIGHT } from './Banner.constants';
+import { BannerProps } from './Banner.types';
 
 const BannerContainer = styled.div<{ $color: string }>`
   display: flex;
@@ -32,8 +33,7 @@ const BannerHeader = styled.div`
 const IconOverlay = styled.div<{ $forceTheme?: ThemeMode }>`
   padding: 4px;
   border-radius: 20px;
-  background: ${(props) =>
-    getThemedColor("var(--bg-overlay-primary)", props.$forceTheme)};
+  background: ${(props) => getThemedColor('var(--bg-overlay-primary)', props.$forceTheme)};
 `;
 
 const ActionButtons = styled.div`
@@ -42,14 +42,7 @@ const ActionButtons = styled.div`
   gap: 12px;
 `;
 
-export default function Banner({
-  label,
-  color = "blue",
-  ctas,
-  icon,
-  forceTheme,
-  onClose,
-}: BannerProps) {
+export default function Banner({ label, color = 'blue', ctas, icon, forceTheme, onClose }: BannerProps) {
   const primaryColor = getAccentColorValues(color)[0];
 
   return (
@@ -68,31 +61,19 @@ export default function Banner({
         {ctas?.map((cta, index) => (
           <>
             <IconText
-              color="secondary"
+              color='secondary'
               key={label}
               size={Size.SMALL}
               onClick={cta.onClick}
               label={cta.label}
               forceTheme={forceTheme}
             />
             {(index < ctas.length - 1 || !!onClose) && (
-              <Divider
-                height="16px"
-                type={DividerType.VERTICAL}
-                forceTheme={forceTheme}
-                color="primary"
-              />
+              <Divider height='16px' type={DividerType.VERTICAL} forceTheme={forceTheme} color='primary' />
             )}
           </>
         ))}
-        {!!onClose && (
-          <IconText
-            startIcon={Icon.Close}
-            onClick={onClose}
-            color="secondary"
-            forceTheme={forceTheme}
-          />
-        )}
+        {!!onClose && <IconText startIcon={Icon.Close} onClick={onClose} color='secondary' forceTheme={forceTheme} />}
       </ActionButtons>
     </BannerContainer>
   );

diff --git a/src/components/Button/IconButton/IconButton.constants.ts b/src/components/Button/IconButton/IconButton.constants.ts
@@ -1,36 +1,3 @@
-import { HTMLMotionProps } from 'framer-motion';
-
-import { ThemeMode, Type } from '../../../types';
-import { IconColor, IconProps } from '../../Icons';
-import { TooltipLabelProps } from '../../Tooltip';
-import { ButtonSize } from '../Button.constants';
-
-export type IconButtonType = Type;
-
-export interface IconButtonProps {
-  /** Icon name */
-  icon: IconProps['icon'];
-  /** On button click */
-  onClick: (e: React.MouseEvent) => void | Promise<void>;
-  active?: boolean;
-  animationProps?: HTMLMotionProps<'div'>;
-  /** Overrides default icon color */
-  iconColor?: IconColor;
-  /** Indicator for e2e tests */
-  dataTest?: string;
-  /** Disable button */
-  disabled?: boolean;
-  filled?: boolean;
-  floatRight?: boolean;
-  forceTheme?: ThemeMode;
-  fullHeight?: boolean;
-  id?: string;
-  /** Icon button size */
-  size?: ButtonSize;
-  tooltip?: TooltipLabelProps | string;
-  type?: IconButtonType;
-}
-
 export const BUTTON_SIZE_BORDER_RADIUS = {
   small: 8,
   medium: 10,

diff --git a/src/components/Button/IconButton/IconButton.styles.ts b/src/components/Button/IconButton/IconButton.styles.ts
@@ -1,10 +1,10 @@
 import { css } from 'styled-components';
 
-import { ThemeMode, Type } from '../../../types';
+import { FilledVariant, ThemeMode, Type } from '../../../types';
 import { getThemedColor } from '../../../utils/colorUtils';
-import { TERTIARY_BUTTON_CSS } from '../Button.styles';
+import { BUTTON_TYPE_CONTAINER_CSS, TERTIARY_BUTTON_CSS } from '../Button.styles';
 
-import { IconButtonType } from './IconButton.constants';
+import { IconButtonType } from './IconButton.types';
 
 export const GHOST_ICON_BUTTON_CSS = ({
   $type,
@@ -28,3 +28,6 @@ export const GHOST_ICON_BUTTON_CSS = ({
     }
   `}
 `;
+
+export const ICON_BUTTON_VARIANT_CSS = ({ $variant }: { $variant: FilledVariant }) =>
+  $variant === FilledVariant.FILLED ? BUTTON_TYPE_CONTAINER_CSS : GHOST_ICON_BUTTON_CSS;
diff --git a/src/components/Button/IconButton/IconButton.tsx b/src/components/Button/IconButton/IconButton.tsx
@@ -1,20 +1,19 @@
 import { motion } from 'framer-motion';
 import * as React from 'react';
-import { isMobile } from 'react-device-detect';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import { SIZE_HEIGHT } from '../../../constants';
 import { SQUARE_CSS } from '../../../styles';
-import { Size, ThemeMode, Type } from '../../../types';
+import { FilledVariant, Size, ThemeMode, Type } from '../../../types';
 import Icons, { IconColor } from '../../Icons';
 import KeyCodeSequence from '../../KeyCodeSequence';
 import Tooltip from '../../Tooltip';
 import { TooltipContent, TooltipTrigger } from '../../Tooltip/Tooltip';
 import { BUTTON_ICON_SIZE, BUTTON_TYPE_COLOR } from '../Button.constants';
-import { BUTTON_TYPE_CONTAINER_CSS } from '../Button.styles';
 
-import { BUTTON_SIZE_BORDER_RADIUS, IconButtonProps, IconButtonType } from './IconButton.constants';
-import { GHOST_ICON_BUTTON_CSS } from './IconButton.styles';
+import { BUTTON_SIZE_BORDER_RADIUS } from './IconButton.constants';
+import { ICON_BUTTON_VARIANT_CSS } from './IconButton.styles';
+import { IconButtonProps, IconButtonType } from './IconButton.types';
 
 const TooltipWithShortcut = styled.div`
   display: flex;
@@ -24,12 +23,11 @@ const TooltipWithShortcut = styled.div`
 
 const IconButtonContainer = styled.div<{
   $borderRadius: number;
-  $floatRight: boolean;
+  $disabled: boolean;
   $size: number;
   $type: IconButtonType;
-  $filled: boolean;
+  $variant: FilledVariant;
   $forceTheme?: ThemeMode;
-  $fullHeight?: boolean;
 }>`
   box-sizing: border-box;
   background: transparent;
@@ -39,51 +37,29 @@ const IconButtonContainer = styled.div<{
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: ${(props) => props.$borderRadius}px;
+  border-radius: ${({ $borderRadius }) => $borderRadius}px;
 
-  ${(props) => (props.$filled ? BUTTON_TYPE_CONTAINER_CSS : GHOST_ICON_BUTTON_CSS)}
+  ${({ $disabled }) => $disabled && 'cursor: default;'}
 
-  ${(props) => (props.$floatRight ? 'margin-left: auto;' : '')}
-  ${(props) =>
-    !!props.$fullHeight
-      ? css`
-          aspect-ratio: 1;
-          height: 100%;
-        `
-      : SQUARE_CSS}
-
-  ${isMobile &&
-  css`
-    transition: background 0.2s;
-
-    &:active,
-    &.active {
-      transition: background 0s;
-    }
-  `}
-
-  &.disabled {
-    cursor: default;
-  }
+  ${ICON_BUTTON_VARIANT_CSS}
+  ${SQUARE_CSS}
 `;
 
 function IconButton(
   {
-    iconColor,
+    animationProps,
+    className,
+    dataTest,
+    disabled = false,
+    forceTheme,
+    icon,
+    id,
     size = Size.MEDIUM,
+    style,
     tooltip = '',
     type = Type.PRIMARY,
-    active = false,
-    filled = false,
-    floatRight = false,
-    icon,
-    id,
-    disabled = false,
-    onClick,
-    dataTest,
-    forceTheme,
-    fullHeight,
-    animationProps
+    variant = FilledVariant.FILLED,
+    onClick
   }: IconButtonProps,
   ref: React.ForwardedRef<HTMLDivElement | null>
 ) {
@@ -101,29 +77,38 @@ function IconButton(
   };
 
   const renderIcon = () => {
-    const defaultColor = filled ? BUTTON_TYPE_COLOR[type] : (type as IconColor);
-    const color = disabled ? 'disabled' : iconColor ?? defaultColor;
+    const customColor = typeof icon === 'string' ? undefined : icon.props.color;
+    const defaultColor = variant === FilledVariant.FILLED ? BUTTON_TYPE_COLOR[type] : (type as IconColor);
+    const color = disabled ? 'disabled' : customColor ?? defaultColor;
     const iconSize = BUTTON_ICON_SIZE[size];
-    return <Icons size={iconSize} icon={icon} color={color} forceTheme={forceTheme} />;
+    return typeof icon === 'string' ? (
+      <Icons size={iconSize} icon={icon} color={color} forceTheme={forceTheme} />
+    ) : (
+      React.cloneElement(icon, {
+        color,
+        forceTheme,
+        size: icon.props.size ?? iconSize
+      })
+    );
   };
 
   return (
     <Tooltip>
       <TooltipContent>{!disabled ? renderTooltipContent() : ''}</TooltipContent>
       <TooltipTrigger>
         <IconButtonContainer
+          className={className}
+          data-test={dataTest}
           id={id}
           ref={ref}
+          style={style}
           onClick={disabled ? undefined : onClick}
-          data-test={dataTest}
           $borderRadius={borderRadius}
-          $floatRight={floatRight}
-          $fullHeight={fullHeight}
+          $disabled={disabled}
           $size={buttonSize}
           $type={type}
-          $filled={filled}
+          $variant={variant}
           $forceTheme={forceTheme}
-          className={`${active ? 'active' : ''} ${disabled ? 'disabled' : ''}`}
         >
           {animationProps ? <motion.div {...animationProps}>{renderIcon()}</motion.div> : renderIcon()}
         </IconButtonContainer>