@sisense/sdk-shared-ui 0.1.0 → 1.26.0

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

@@ -0,0 +1,169 @@
+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

@@ -0,0 +1,154 @@
+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

@@ -0,0 +1,129 @@
+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

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

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

@@ -0,0 +1,49 @@
+: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

@@ -0,0 +1,131 @@
+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');
+  });
+});