@cleartrip/ct-design-button 4.0.0-TEST.1 → 4.1.0-SNAPSHOT-native-main.1

package/src/style.ts

@@ -0,0 +1,293 @@
+import { Theme } from '@cleartrip/ct-design-theme';
+import { TypographyVariant } from '@cleartrip/ct-design-typography';
+import { ButtonColorType, ButtonSizeType, ButtonVariantType } from './type';
+import { ButtonColor, ButtonSize, ButtonVariant } from './constants';
+
+export const getButtonSizeStyles = (theme: Theme, size: ButtonSizeType) => {
+  switch (size) {
+    case ButtonSize.SMALL: {
+      return {
+        height: theme.size[8],
+        paddingTop: theme.spacing[1],
+        paddingBottom: theme.spacing[1],
+      };
+    }
+    case ButtonSize.MEDIUM: {
+      return {
+        height: theme.size[10],
+        paddingTop: theme.spacing[2],
+        paddingBottom: theme.spacing[2],
+      };
+    }
+    case ButtonSize.LARGE: {
+      return {
+        height: theme.size[12],
+        paddingTop: theme.spacing[3],
+        paddingBottom: theme.spacing[3],
+      };
+    }
+    default: {
+      return {
+        height: theme.size[10],
+        paddingTop: theme.spacing[2],
+        paddingBottom: theme.spacing[2],
+      };
+    }
+  }
+};
+
+export const getButtonVariantStyles = (theme: Theme, variant: ButtonVariantType, disabled: boolean) => {
+  if (disabled) {
+    return {
+      borderWidth: theme.border.width.none,
+    };
+  }
+  switch (variant) {
+    case ButtonVariant.OUTLINE: {
+      return {
+        borderWidth: theme.border.width.sm,
+        borderStyle: theme.border.style.solid,
+      };
+    }
+    case ButtonVariant.CONTAINED:
+    case ButtonVariant.BARE: {
+      return {
+        borderWidth: theme.border.width.none,
+      };
+    }
+    default: {
+      return {
+        borderWidth: theme.border.width.none,
+      };
+    }
+  }
+};
+
+export const getContainedButtonColorStyles = (theme: Theme, color: ButtonColorType, disabled: boolean) => {
+  if (disabled) {
+    return {
+      backgroundColor: theme.color.button.containedDisabledBg,
+    };
+  }
+
+  switch (color) {
+    case ButtonColor.PRIMARY: {
+      return {
+        backgroundColor: theme.color.button.containedPrimaryBg,
+      };
+    }
+    case ButtonColor.SECONDARY: {
+      return {
+        backgroundColor: theme.color.button.containedSecondaryBg,
+      };
+    }
+    case ButtonColor.TERTIARY: {
+      return {
+        backgroundColor: theme.color.button.containedTertiaryBg,
+      };
+    }
+    default: {
+      return {
+        backgroundColor: theme.color.button.containedPrimaryBg,
+      };
+    }
+  }
+};
+
+export const getOutlinedButtonColorStyles = (theme: Theme, color: ButtonColorType, disabled: boolean) => {
+  if (disabled) {
+    return {
+      backgroundColor: theme.color.button.outlinedDisabledBg,
+    };
+  }
+
+  switch (color) {
+    case ButtonColor.PRIMARY: {
+      return {
+        backgroundColor: theme.color.button.outlinedPrimaryBg,
+        borderColor: theme.color.button.outlinedPrimaryBorder,
+      };
+    }
+    case ButtonColor.SECONDARY: {
+      return {
+        backgroundColor: theme.color.button.outlinedSecondaryBg,
+        borderColor: theme.color.button.outlinedSecondaryBorder,
+      };
+    }
+    case ButtonColor.TERTIARY: {
+      return {
+        backgroundColor: theme.color.button.outlinedTertiaryBg,
+        borderColor: theme.color.button.outlinedTertiaryBorder,
+      };
+    }
+    case ButtonColor.NEUTRAL: {
+      return {
+        backgroundColor: theme.color.button.outlinedNeutralBg,
+        borderColor: theme.color.button.outlinedNeutralBorder,
+      };
+    }
+    default: {
+      return {
+        backgroundColor: theme.color.button.outlinedPrimaryBg,
+        borderColor: theme.color.button.outlinedPrimaryBorder,
+      };
+    }
+  }
+};
+
+export const getButtonVariantColorStyles = (
+  theme: Theme,
+  color: ButtonColorType,
+  variant: ButtonVariantType,
+  disabled: boolean,
+  _isHover: boolean,
+) => {
+  switch (variant) {
+    case ButtonVariant.CONTAINED: {
+      return getContainedButtonColorStyles(theme, color, disabled);
+    }
+    case ButtonVariant.OUTLINE:
+    case ButtonVariant.BARE: {
+      return getOutlinedButtonColorStyles(theme, color, disabled);
+    }
+    default: {
+      return getContainedButtonColorStyles(theme, color, disabled);
+    }
+  }
+};
+
+export const getContainedButtonLabelColor = (color: ButtonColorType, disabled: boolean, theme: Theme) => {
+  if (disabled) {
+    return theme.color.button.containedDisabledLabel;
+  }
+
+  switch (color) {
+    case ButtonColor.PRIMARY: {
+      return theme.color.button.containedPrimaryLabel;
+    }
+    case ButtonColor.SECONDARY: {
+      return theme.color.button.containedSecondaryLabel;
+    }
+    case ButtonColor.TERTIARY: {
+      return theme.color.button.containedTertiaryLabel;
+    }
+    default: {
+      return theme.color.button.containedPrimaryLabel;
+    }
+  }
+};
+
+export const getOutlinedButtonLabelColor = (color: ButtonColorType, disabled: boolean, theme: Theme) => {
+  if (disabled) {
+    return theme.color.button.outlinedDisabledLabel;
+  }
+
+  switch (color) {
+    case ButtonColor.PRIMARY: {
+      return theme.color.button.outlinedPrimaryLabel;
+    }
+    case ButtonColor.SECONDARY: {
+      return theme.color.button.outlinedSecondaryLabel;
+    }
+    case ButtonColor.TERTIARY: {
+      return theme.color.button.outlinedTertiaryLabel;
+    }
+    case ButtonColor.NEUTRAL: {
+      return theme.color.button.outlinedNeutralLabel;
+    }
+    default: {
+      return theme.color.button.outlinedPrimaryLabel;
+    }
+  }
+};
+
+export const getButtonVariantLabelColor = (
+  variant: ButtonVariantType,
+  color: ButtonColorType,
+  disabled: boolean,
+  theme: Theme,
+  loading: boolean,
+) => {
+  switch (variant) {
+    case ButtonVariant.CONTAINED: {
+      return getContainedButtonLabelColor(color, disabled || loading, theme);
+    }
+    case ButtonVariant.OUTLINE: {
+      return getOutlinedButtonLabelColor(color, disabled || loading, theme);
+    }
+    case ButtonVariant.BARE: {
+      return getOutlinedButtonLabelColor(color, disabled, theme);
+    }
+    default: {
+      return getContainedButtonLabelColor(color, disabled || loading, theme);
+    }
+  }
+};
+
+export const getTypographyVariant = (size: ButtonSizeType) => {
+  switch (size) {
+    case ButtonSize.SMALL: {
+      return TypographyVariant.HM4;
+    }
+    case ButtonSize.MEDIUM: {
+      return TypographyVariant.HM4;
+    }
+    case ButtonSize.LARGE: {
+      return TypographyVariant.HM3;
+    }
+    default: {
+      return TypographyVariant.HM4;
+    }
+  }
+};
+
+export const getDefaultButtonStyles = (disabled: boolean) => {
+  if (disabled) {
+    return {
+      // cursor: 'not-allowed',
+    };
+  } else {
+    return {
+      // cursor: 'pointer',
+    };
+  }
+};
+
+export const getButtonStyles = ({
+  theme,
+  size,
+  variant,
+  color,
+  disabled,
+  isFullWidth,
+  loading,
+  isHover,
+}: {
+  theme: Theme;
+  size: ButtonSizeType;
+  variant: ButtonVariantType;
+  color: ButtonColorType;
+  disabled: boolean;
+  isFullWidth: boolean;
+  loading: boolean;
+  isHover: boolean;
+}) => {
+  return {
+    ...getButtonSizeStyles(theme, size),
+    ...getButtonVariantStyles(theme, variant, disabled || loading),
+    ...getButtonVariantColorStyles(theme, color, variant, disabled || loading, isHover),
+    ...getDefaultButtonStyles(disabled || loading),
+    minWidth: (isFullWidth ? '100%' : 'auto') as unknown as number,
+  };
+};
+
+export const getSpinnerDimmension = (size: ButtonSizeType, theme: Theme) => {
+  switch (size) {
+    case 'large':
+      return theme.size[5];
+    case 'medium':
+      return theme.size[4];
+    default:
+      return theme.size[3];
+  }
+};

package/src/type.ts

@@ -0,0 +1,86 @@
+import type { Styles } from '@cleartrip/ct-design-types';
+import { TypographyStyleConfigProps } from '@cleartrip/ct-design-typography';
+import { INativeUIEvent } from '@cleartrip/ct-design-types';
+
+import { ButtonSize, ButtonVariant, ButtonColor } from './constants';
+
+export type ButtonSizeType = `${ButtonSize}`;
+
+export type ButtonVariantType = `${ButtonVariant}`;
+
+export type ButtonColorType = `${ButtonColor}`;
+
+export type IClickEvent = INativeUIEvent;
+
+export type IButtonProps = Partial<{
+  children: React.ReactNode;
+  /**
+   * Set the size of Button
+   * Default size will take Medium
+   */
+  size: 'small' | 'medium' | 'large';
+  /**
+   * Set the style of Button
+   * Default variant will be Contained
+   */
+  variant: 'bare' | 'contained' | 'outline';
+  /**
+   * Set the background color of button
+   * Default will be primary from theme
+   */
+  color: 'primary' | 'secondary' | 'tertiary';
+  /**
+   * Check if it should take full width of container
+   */
+  isFullWidth: boolean;
+  /**
+   * Style loading state of button
+   */
+  loading: boolean;
+  /**
+   * Set the disabled style
+   */
+  disabled: boolean;
+  /**
+   * Prefix node of button
+   */
+  prefixIcon: React.ReactNode;
+  /**
+   * Suffix node of button
+   */
+  suffixIcon: React.ReactNode;
+  /**
+   * Callback when user clicks on the button
+   */
+  onClick: (event: IClickEvent) => void;
+  /**
+   * Custom style configuration for the button
+   */
+  styleConfig?: {
+    /**
+     * Style configuration for the root container of the button.
+     */
+    root?: Styles[];
+    /**
+     * Style configuration for the container of the button.
+     */
+    container?: Styles[];
+    /**
+     * Style configuration for the typography of the button.
+     */
+    typography?: TypographyStyleConfigProps;
+
+    /**
+     * Style configuration for the container of the button icon.
+     */
+    prefixIconContainer?: Styles[];
+    /**
+     * Style configuration for the container of the button icon.
+     */
+    suffixIconContainer?: Styles[];
+  };
+  /**
+   * No hover effect. Will override hover. However, this is a whereabout to the touch sticky issue with hover. JIRA: https://cleartrip.atlassian.net/browse/UIENG-3683, Referance: https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
+   */
+  noHover?: boolean;
+}>;