@sisense/sdk-shared-ui 1.27.1 → 1.29.0

package/src/lib/DEPRECATED_Button/DEPRECATED_Button.module.scss

@@ -1,57 +0,0 @@
-@import '../styles/style_styleguide_react/fonts';
-@import '../styles/style_styleguide_react/colors';
-
-@mixin sharedButtonText {
-  padding: 5px 20px;
-}
-
-:global(.sis-scope) {
-  :global(.btn--dark) {
-    :global(.btn__text) {
-      @include sharedButtonText;
-    }
-  }
-
-  :global(.btn--gray) {
-    background: $buttonCancel;
-
-    &:disabled {
-      background: $buttonCancel;
-      opacity: 1;
-
-      &:hover {
-        background: $buttonCancelHovered;
-      }
-
-      :global(.app-icon),
-      :global(.btn__text) {
-        opacity: 0.4;
-      }
-    }
-  }
-
-  .sharedComponentsButton {
-    line-height: $lineHeightMedium;
-  }
-
-  .sharedComponentsButtonText {
-    @include sharedButtonText;
-  }
-
-  :global(.btn).btnSecondary {
-    border: 1px solid $wizardFore;
-    background-color: $buttonSecondary;
-
-    &:hover {
-      background-color: $buttonSecondaryHovered;
-    }
-
-    &:disabled {
-      background-color: $buttonSecondary;
-
-      &:hover {
-        background-color: $buttonSecondary;
-      }
-    }
-  }
-}

package/src/lib/DEPRECATED_Button/DEPRECATED_Button.stories.tsx

@@ -1,169 +0,0 @@
-import React from 'react';
-
-import { DEPRECATED_Button } from './DEPRECATED_Button';
-
-export default {
-  title: 'DEPRECATED/Button',
-};
-
-export const Primary = () => (
-  <div
-    style={{
-      display: 'inline-flex',
-      justifyContent: 'space-between',
-      height: '175px',
-      padding: '20px 50px',
-      flexDirection: 'column',
-    }}
-  >
-    <>
-      <DEPRECATED_Button text={'normal!'} />
-      <DEPRECATED_Button text={'hover!'} style={{ backgroundColor: '#f2b900' }} />
-      <DEPRECATED_Button text={'disable!'} disabled />
-    </>
-  </div>
-);
-
-export const PrimaryWithIcon = () => (
-  <div
-    style={{
-      display: 'inline-flex',
-      justifyContent: 'space-between',
-      height: '175px',
-      padding: '20px 50px',
-      flexDirection: 'column',
-    }}
-  >
-    <>
-      <DEPRECATED_Button text={'normal!'} iconName="general-plus" />
-      <DEPRECATED_Button
-        text={'hover!'}
-        iconName="general-plus"
-        style={{ backgroundColor: '#f2b900' }}
-      />
-      <DEPRECATED_Button text={'disable!'} iconName="general-plus" disabled />
-    </>
-  </div>
-);
-
-export const Secondary = () => (
-  <div
-    style={{
-      display: 'inline-flex',
-      justifyContent: 'space-between',
-      height: '175px',
-      padding: '20px 50px',
-      flexDirection: 'column',
-    }}
-  >
-    <>
-      <DEPRECATED_Button text={'normal!'} secondary />
-      <DEPRECATED_Button text={'hover!'} secondary style={{ backgroundColor: '#F4F4F8' }} />
-      <DEPRECATED_Button text={'disable!'} secondary disabled />
-    </>
-  </div>
-);
-
-export const SecondaryWithIcon = () => (
-  <div
-    style={{
-      display: 'inline-flex',
-      justifyContent: 'space-between',
-      height: '175px',
-      padding: '20px 50px',
-      flexDirection: 'column',
-    }}
-  >
-    <>
-      <DEPRECATED_Button text={'normal!'} iconName="general-plus" secondary />
-      <DEPRECATED_Button
-        text={'hover!'}
-        iconName="general-plus"
-        secondary
-        style={{ backgroundColor: '#F4F4F8' }}
-      />
-      <DEPRECATED_Button text={'disable!'} iconName="general-plus" secondary disabled />
-    </>
-  </div>
-);
-
-export const Cancel = () => (
-  <div
-    style={{
-      display: 'inline-flex',
-      justifyContent: 'space-between',
-      height: '175px',
-      padding: '20px 50px',
-      flexDirection: 'column',
-    }}
-  >
-    <>
-      <DEPRECATED_Button text={'normal!'} gray />
-      <DEPRECATED_Button text={'hover!'} style={{ backgroundColor: '#D1D1D7' }} />
-      <DEPRECATED_Button text={'disable!'} gray disabled />
-    </>
-  </div>
-);
-
-export const CancelWithIcon = () => (
-  <div
-    style={{
-      display: 'inline-flex',
-      justifyContent: 'space-between',
-      height: '175px',
-      padding: '20px 50px',
-      flexDirection: 'column',
-    }}
-  >
-    <>
-      <DEPRECATED_Button text={'normal!'} iconName="general-plus" gray />
-      <DEPRECATED_Button
-        text={'hover!'}
-        iconName="general-plus"
-        style={{ backgroundColor: '#D1D1D7' }}
-      />
-      <DEPRECATED_Button text={'disable!'} iconName="general-plus" gray disabled />
-    </>
-  </div>
-);
-
-export const Text = () => (
-  <div
-    style={{
-      display: 'inline-flex',
-      justifyContent: 'space-between',
-      height: '175px',
-      padding: '20px 50px',
-      flexDirection: 'column',
-    }}
-  >
-    <>
-      <DEPRECATED_Button text={'normal!'} dark />
-      <DEPRECATED_Button text={'hover!'} style={{ backgroundColor: '#f4f4f8' }} dark />
-      <DEPRECATED_Button text={'disable!'} disabled dark />
-    </>
-  </div>
-);
-
-export const TextWithIcon = () => (
-  <div
-    style={{
-      display: 'inline-flex',
-      justifyContent: 'space-between',
-      height: '175px',
-      padding: '20px 50px',
-      flexDirection: 'column',
-    }}
-  >
-    <>
-      <DEPRECATED_Button text={'normal!'} dark iconName={'general-edit'} />
-      <DEPRECATED_Button
-        text={'hover!'}
-        style={{ backgroundColor: '#f4f4f8' }}
-        iconName={'general-edit'}
-        dark
-      />
-      <DEPRECATED_Button text={'disable!'} iconName={'general-edit'} disabled dark />
-    </>
-  </div>
-);

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');
-  });
-});