@sisense/sdk-shared-ui 1.27.1 → 1.28.0

package/src/lib/DEPRECATED_Button/DEPRECATED_Button.test.tsx

@@ -1,154 +0,0 @@
-import React from 'react';
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import { DEPRECATED_Button } from './DEPRECATED_Button';
-
-import '@testing-library/jest-dom';
-
-describe('Button Component', () => {
-  it('should render correctly with default props', () => {
-    render(<DEPRECATED_Button text="Click Me" />);
-
-    expect(screen.getByText('Click Me')).toBeInTheDocument();
-    expect(screen.getByRole('button')).toHaveClass('btn');
-  });
-
-  it('should apply custom className when provided as prop', () => {
-    render(<DEPRECATED_Button text="Click Me" className="custom-class" />);
-
-    expect(screen.getByRole('button')).toHaveClass('custom-class');
-  });
-
-  it('should render an DEPRECATED_Icon with correct props when provided', () => {
-    const iconName = 'icon-name';
-    const iconClassName = 'custom-icon-class';
-    const hoverSuffix = 'hover-suffix';
-
-    const { container } = render(
-      <DEPRECATED_Button
-        text="Button with Icon"
-        iconName={iconName}
-        iconClassName={iconClassName}
-        hoverSuffix={hoverSuffix}
-        disabled
-      />,
-    );
-
-    const icon = container.querySelector(`.${iconClassName}`);
-    expect(icon).toHaveClass('btn__icon');
-    expect(icon).toHaveClass(iconClassName);
-    expect(icon).toHaveAttribute('name', iconName);
-    expect(icon).toHaveAttribute('disabled');
-  });
-
-  it('should render an DEPRECATED_Icon with correct hover suffix when provided', () => {
-    const iconName = 'icon-name';
-    const iconClassName = 'custom-icon-class';
-    const hoverSuffix = 'hover-suffix';
-
-    const { container } = render(
-      <DEPRECATED_Button
-        text="Button with Icon"
-        iconName={iconName}
-        iconClassName={iconClassName}
-        hoverSuffix={hoverSuffix}
-      />,
-    );
-    let icon = container.querySelector(`.${iconClassName}`) as Element;
-    fireEvent.mouseEnter(icon);
-    icon = container.querySelector(`.${iconClassName}`) as Element;
-
-    expect(icon).toHaveClass('app-icon--icon-namehover-suffix');
-  });
-
-  it('should render a trailing DEPRECATED_Icon with correct props when trailingIconName is provided', () => {
-    const trailingIconName = 'trailing-icon';
-    const hoverSuffix = 'trailing-hover';
-
-    const { container } = render(
-      <DEPRECATED_Button
-        text="Button with Trailing Icon"
-        trailingIconName={trailingIconName}
-        hoverSuffix={hoverSuffix}
-      />,
-    );
-    const trailingIcon = container.querySelector('.app-icon.app-icon--trailing-icon.btn__icon');
-
-    expect(trailingIcon).toBeInTheDocument();
-    expect(trailingIcon).toHaveAttribute('name', trailingIconName);
-  });
-
-  it('should render only an DEPRECATED_Icon when no text is provided and passes correct props', () => {
-    const iconName = 'icon-only';
-    const { container } = render(<DEPRECATED_Button iconName={iconName} disabled />);
-
-    const button = screen.getByRole('button');
-    const icon = container.querySelector(".app-icon[class~='app-icon--icon-only']");
-
-    expect(button).toHaveClass('btn--icon');
-    expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute('name', iconName);
-    expect(icon).toHaveAttribute('disabled');
-  });
-
-  it('should render both text and DEPRECATED_Icon with proper spacing', () => {
-    const { container } = render(<DEPRECATED_Button text="Text with Icon" iconName="icon-name" />);
-
-    const button = screen.getByRole('button');
-    const icon = container.querySelector('.app-icon.app-icon--icon-name.btn__icon');
-
-    expect(icon).toBeInTheDocument();
-    expect(button).toHaveTextContent('Text with Icon');
-  });
-
-  it('should disable the button when disabled is true', () => {
-    render(<DEPRECATED_Button text="Disabled" disabled />);
-
-    const button = screen.getByRole('button');
-
-    expect(button).toBeDisabled();
-    expect(button).toHaveClass('btn--disabled');
-  });
-
-  it('should call the onClick handler when clicked', () => {
-    const handleClick = vi.fn();
-    render(<DEPRECATED_Button text="Click Me" onClick={handleClick} />);
-    const button = screen.getByRole('button');
-
-    button.click();
-
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-
-  it('should apply the correct aria-label', () => {
-    render(<DEPRECATED_Button text="Aria Test" ariaLabel="custom-label" />);
-
-    const button = screen.getByRole('button');
-
-    expect(button).toHaveAttribute('aria-label', 'custom-label');
-  });
-
-  it('should set the title when button is disabled and allowDisabledTitle is true', () => {
-    render(
-      <DEPRECATED_Button
-        title="Disabled Button Allowed"
-        disabled
-        allowDisabledTitle
-        dataTestId="button"
-      />,
-    );
-
-    const button = screen.getByTestId('button');
-
-    expect(button).toHaveAttribute('title', 'Disabled Button Allowed');
-  });
-
-  it('should not set the title when button is disabled and allowDisabledTitle is false', () => {
-    render(<DEPRECATED_Button title="Disabled Button" disabled dataTestId="button" />);
-
-    const button = screen.getByTestId('button');
-
-    expect(button).not.toHaveAttribute('title');
-  });
-});

package/src/lib/DEPRECATED_Button/DEPRECATED_Button.tsx

@@ -1,129 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import { DEPRECATED_Icon } from '../DEPRECATED_Icon';
-
-import styles from './DEPRECATED_Button.module.scss';
-
-export type ButtonProps = {
-  allowDisabledTitle?: boolean;
-  className?: string;
-  disabled?: boolean;
-  hoverSuffix?: string;
-  iconClassName?: string;
-  iconName?: string;
-  transparent?: boolean;
-  text?: string;
-  trailingIconName?: string;
-  title?: string;
-  dark?: boolean;
-  gray?: boolean;
-  secondary?: boolean;
-  dataTestId?: string;
-  ariaLabel?: React.AriaAttributes['aria-label'];
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-// Used since in sisense-styleguide repo, there is a new line between the icon span and the text span
-// The browser shows this new line as a space between the button spans and the text,
-// so we are doing it as well until the styleguide will be changed
-const SPACE = ' ';
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const DEPRECATED_Button = (props: ButtonProps) => {
-  const {
-    allowDisabledTitle,
-    className,
-    disabled,
-    hoverSuffix,
-    iconClassName,
-    iconName,
-    transparent,
-    text,
-    trailingIconName,
-    title,
-    dark,
-    gray,
-    secondary,
-    dataTestId,
-    ariaLabel = 'button',
-    ...otherProps
-  } = props;
-
-  const isIconOnlyComponent = !text;
-
-  const buttonClass = classNames(
-    'btn',
-    {
-      'btn--disabled': disabled,
-      'btn--transp': transparent,
-      'btn--dark': dark,
-      'btn--icon': isIconOnlyComponent,
-      'btn--gray': gray,
-      [styles.btnSecondary]: secondary,
-    },
-    styles.sharedComponentsButton,
-    className,
-  );
-
-  const iconClass = classNames('btn__icon', iconClassName);
-  const iconComponent = iconName && (
-    <DEPRECATED_Icon
-      className={iconClass}
-      name={iconName}
-      disabled={disabled}
-      hoverSuffix={hoverSuffix}
-    />
-  );
-
-  const textClass = classNames('btn__text', styles.sharedComponentsButtonText);
-  const textComponent = text && <span className={textClass}>{text}</span>;
-
-  const spaceComponent = iconComponent && textComponent && SPACE;
-  const trailingIconComponent = trailingIconName && (
-    <DEPRECATED_Icon
-      className={iconClass}
-      name={trailingIconName}
-      disabled={disabled}
-      hoverSuffix={hoverSuffix}
-    />
-  );
-
-  const extraProps = {
-    disabled,
-    title: title && (!disabled || allowDisabledTitle) ? title : undefined,
-    ...otherProps,
-  };
-
-  return (
-    <button {...extraProps} className={buttonClass} data-testid={dataTestId} aria-label={ariaLabel}>
-      {iconComponent}
-      {spaceComponent}
-      {textComponent}
-      {trailingIconComponent}
-    </button>
-  );
-};
-
-DEPRECATED_Button.propTypes = {
-  allowDisabledTitle: PropTypes.bool,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  hoverSuffix: PropTypes.string,
-  iconClassName: PropTypes.string,
-  iconName: PropTypes.string,
-  onClick: PropTypes.func.isRequired,
-  text: PropTypes.string,
-  title: PropTypes.string,
-  trailingIconName: PropTypes.string,
-  transparent: PropTypes.bool,
-  dark: PropTypes.bool,
-  gray: PropTypes.bool,
-};
-
-DEPRECATED_Button.defaultProps = {
-  allowDisabledTitle: false,
-};
-
-export default DEPRECATED_Button;
-export { DEPRECATED_Button }; // Named export

package/src/lib/DEPRECATED_Button/index.ts

@@ -1,4 +0,0 @@
-import DEPRECATED_Button from './DEPRECATED_Button';
-
-export default DEPRECATED_Button;
-export * from './DEPRECATED_Button';

package/src/lib/DEPRECATED_Checkbox/Checkbox.module.scss

@@ -1,49 +0,0 @@
-:global(.sis-scope) {
-  :global(.custom-checkbox__icon.app-icon) {
-    &.transparent {
-      background: transparent !important;
-      color: transparent;
-    }
-  }
-
-  :global(.custom-checkbox__input:checked + .custom-checkbox__icon) {
-    &.transparent {
-      color: #3a4356;
-    }
-  }
-
-  :global(.custom-checkbox__text) {
-    padding-left: 4px;
-  }
-}
-
-.icon {
-  margin: 0 -5px 0 0px;
-  // If there is not a onDescriptionClick, the icon will not have
-  // onClick set, and thus would not show a pointer but should.
-  cursor: pointer;
-}
-
-.disabled {
-  pointer-events: none;
-  // sis-scope uses an adjacency selector to style the span,
-  // but the optional icon is between the checkbox and text.
-  :global(.custom-checkbox__text) {
-    color: rgba(91, 99, 114, 0.4);
-  }
-
-  :global(.app-icon) {
-    opacity: 0.4;
-  }
-}
-
-.sharedComponentsInputCheckbox {
-  width: 28px;
-  height: 28px;
-  padding: 8px;
-
-  &:hover {
-    background-color: rgba(91, 99, 114, 0.1);
-    border-radius: 50%;
-  }
-}

package/src/lib/DEPRECATED_Checkbox/DEPRECATED_Checkbox.test.tsx

@@ -1,131 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-
-import { DEPRECATED_Checkbox } from './DEPRECATED_Checkbox';
-
-import '@testing-library/jest-dom';
-
-describe('DEPRECATED_Checkbox', () => {
-  it('should render the checkbox with the provided text', () => {
-    render(<DEPRECATED_Checkbox checked={false} text="Checkbox Label" onChange={vi.fn()} />);
-
-    expect(screen.getByText('Checkbox Label')).toBeInTheDocument();
-  });
-
-  it('should render as checked when the checked prop is true', () => {
-    render(<DEPRECATED_Checkbox checked={true} text="Checked Checkbox" onChange={vi.fn()} />);
-
-    const checkbox = screen.getByRole('checkbox');
-
-    expect(checkbox).toBeChecked();
-  });
-
-  it('should trigger onChange when clicked', () => {
-    const handleChange = vi.fn();
-    render(<DEPRECATED_Checkbox checked={false} onChange={handleChange} dataTestId="checkbox" />);
-
-    const checkbox = screen.getByTestId('checkbox');
-    fireEvent.click(checkbox);
-
-    expect(handleChange).toHaveBeenCalled();
-  });
-
-  it('should render the title when provided and not disabled', () => {
-    render(<DEPRECATED_Checkbox checked={false} title="Checkbox Title" onChange={vi.fn()} />);
-
-    const checkbox = screen.getByRole('checkbox');
-
-    expect(checkbox).toHaveAttribute('title', 'Checkbox Title');
-  });
-
-  it('should not render the title when disabled', () => {
-    render(
-      <DEPRECATED_Checkbox checked={false} title="Checkbox Title" disabled onChange={vi.fn()} />,
-    );
-
-    const checkbox = screen.getByRole('checkbox');
-
-    expect(checkbox).not.toHaveAttribute('title');
-  });
-
-  it('should apply the correct classes for inline and transparent props', () => {
-    const { container } = render(
-      <DEPRECATED_Checkbox
-        checked={false}
-        inline
-        transparent
-        onChange={vi.fn()}
-        className="custom-class"
-      />,
-    );
-
-    const checkboxContainer = container.querySelector(`.custom-checkbox--inline`);
-
-    expect(checkboxContainer).toHaveClass('custom-checkbox');
-    expect(checkboxContainer).toHaveClass('custom-checkbox--inline');
-    expect(checkboxContainer).toHaveClass('custom-class');
-  });
-
-  it('should call onDescriptionClick when the description is clicked', () => {
-    const handleDescriptionClick = vi.fn();
-    render(
-      <DEPRECATED_Checkbox
-        checked={false}
-        text="Clickable Description"
-        onChange={vi.fn()}
-        onDescriptionClick={handleDescriptionClick}
-      />,
-    );
-
-    fireEvent.click(screen.getByText('Clickable Description'));
-
-    expect(handleDescriptionClick).toHaveBeenCalled();
-  });
-
-  it('should render an icon if iconName is provided', () => {
-    const { container } = render(
-      <DEPRECATED_Checkbox
-        checked={false}
-        iconName="test-icon"
-        onChange={vi.fn()}
-        dataTestId="checkbox"
-      />,
-    );
-
-    const icon = container.querySelector(`.app-icon.app-icon--test-icon`);
-
-    expect(icon).toBeInTheDocument();
-    expect(icon).toHaveClass('app-icon app-icon--test-icon');
-  });
-
-  it('should call onDescriptionClick when the icon is clicked', () => {
-    const handleDescriptionClick = vi.fn();
-    const { container } = render(
-      <DEPRECATED_Checkbox
-        checked={false}
-        iconName="test-icon"
-        onChange={vi.fn()}
-        onDescriptionClick={handleDescriptionClick}
-      />,
-    );
-    const icon = container.querySelector(`.app-icon.app-icon--test-icon`);
-
-    fireEvent.click(icon as Element);
-
-    expect(handleDescriptionClick).toHaveBeenCalled();
-  });
-
-  it('should apply additional class names to the input checkbox element', () => {
-    render(
-      <DEPRECATED_Checkbox
-        checked={false}
-        inputCheckboxClassName="additional-input-class"
-        onChange={vi.fn()}
-      />,
-    );
-    const inputWrapper = screen.getByRole('checkbox').closest('div');
-
-    expect(inputWrapper).toHaveClass('additional-input-class');
-  });
-});

package/src/lib/DEPRECATED_Checkbox/DEPRECATED_Checkbox.tsx

@@ -1,103 +0,0 @@
-import React, { ChangeEvent, MouseEvent } from 'react';
-import classnames from 'classnames';
-
-import { DEPRECATED_Icon } from '../DEPRECATED_Icon';
-
-import style from './Checkbox.module.scss';
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export type DEPRECATED_CheckboxProps = {
-  checked: boolean;
-  className?: string;
-  disabled?: boolean;
-  inline?: boolean;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-
-  // The description is the icon and text. If undefined, use onChange.
-  onDescriptionClick?: () => void;
-  text?: string;
-  textClassName?: string;
-  title?: string;
-  transparent?: boolean;
-  dataTestId?: string;
-  iconName?: string;
-  inputCheckboxClassName?: string;
-};
-
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const DEPRECATED_Checkbox = (props: DEPRECATED_CheckboxProps) => {
-  const {
-    className,
-    disabled,
-    inline,
-    text,
-    textClassName,
-    title,
-    transparent,
-    dataTestId,
-    iconName,
-    onDescriptionClick,
-    inputCheckboxClassName,
-    ...otherProps
-  } = props;
-
-  const propsPassedToInput: any = { disabled, ...otherProps };
-  if (title && !disabled) {
-    // eslint-disable-next-line
-    propsPassedToInput.title = title;
-  }
-
-  const cssPrefix = 'custom-checkbox';
-
-  const containerClass = classnames(
-    cssPrefix,
-    {
-      'custom-checkbox--inline': inline,
-      [style.disabled]: disabled,
-    },
-    className,
-  );
-  const checkboxClass = classnames(`${cssPrefix}__icon`, 'app-icon app-icon--form-checkbox-mark', {
-    [style.transparent]: transparent,
-  });
-  const textClass = classnames(`${cssPrefix}__text`, textClassName);
-  const onDescriptionClickWrapper = onDescriptionClick
-    ? (e: MouseEvent) => {
-        onDescriptionClick();
-        e.preventDefault();
-      }
-    : undefined;
-
-  return (
-    <div className={containerClass}>
-      <label className={`${cssPrefix}__label`}>
-        <div className={classnames(style.sharedComponentsInputCheckbox, inputCheckboxClassName)}>
-          <input
-            type="checkbox"
-            className={`${cssPrefix}__input`}
-            data-testid={dataTestId}
-            {...propsPassedToInput}
-          />
-          <span className={checkboxClass}>
-            <svg className="app-icon__svg">
-              <use xlinkHref="#form-checkbox-mark" />
-            </svg>
-          </span>
-        </div>
-        {iconName && (
-          <DEPRECATED_Icon
-            name={iconName}
-            className={style.icon}
-            onClick={onDescriptionClickWrapper}
-          />
-        )}
-        <span className={textClass} onClick={onDescriptionClickWrapper}>
-          {text}
-        </span>
-      </label>
-    </div>
-  );
-};
-
-export default DEPRECATED_Checkbox;
-export { DEPRECATED_Checkbox };

package/src/lib/DEPRECATED_Checkbox/index.ts

@@ -1,4 +0,0 @@
-import DEPRECATED_Checkbox from './DEPRECATED_Checkbox';
-
-export default DEPRECATED_Checkbox;
-export * from './DEPRECATED_Checkbox';

package/src/lib/DEPRECATED_Icon/DEPRECATED_Icon.module.scss

@@ -1,7 +0,0 @@
-.clickable {
-  cursor: pointer;
-}
-
-.disabled {
-  pointer-events: none;
-}

package/src/lib/DEPRECATED_Icon/DEPRECATED_Icon.stories.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { DEPRECATED_Icon } from './DEPRECATED_Icon';
-
-export default {
-  title: 'DEPRECATED/Icon',
-};
-
-export const GeneralArrowDown = () => <DEPRECATED_Icon name={'general-arrow-down'} />;
-
-export const GeneralArrowDownDisabled = () => (
-  <DEPRECATED_Icon name={'general-arrow-down'} disabled />
-);
-
-export const GeneralArrowDownClickable = () => (
-  <DEPRECATED_Icon name={'general-arrow-down'} onClick={() => {}} />
-);
-
-export const GeneralViSmallWhite = () => <DEPRECATED_Icon name={'general-vi-small-white'} />;
-
-export const GeneralViSmallWhiteDisabled = () => (
-  <DEPRECATED_Icon name={'general-vi-small-white'} disabled />
-);
-
-export const GeneralViSmallWhiteClickable = () => (
-  <DEPRECATED_Icon name={'general-vi-small-white'} onClick={() => {}} />
-);