@scality/core-ui 0.115.0

package/src/lib/components/selectv2/selectv2.test.tsx

@@ -0,0 +1,277 @@
+import { Select, Option } from '../selectv2/Selectv2.component';
+import React, { useState } from 'react';
+import { render as testingRender } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Icon } from '../icon/Icon.component';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+const render = (...args) => {
+  return testingRender(
+    <QueryClientProvider client={new QueryClient()}>
+      {args}
+    </QueryClientProvider>,
+  );
+};
+
+const generateOptionsData = (n: number) =>
+  Array.from(new Array(n), (_, index) => ({
+    label: `Item ${index}`,
+    value: index.toString(),
+    'data-testid': `option${index}`,
+  }));
+
+const generateOptions = (n: number) => {
+  return generateOptionsData(n).map((o, i) => (
+    <Option key={i} value={o.value} {...o}>
+      {o.label}
+    </Option>
+  ));
+};
+
+const SelectWrapper = (props) => {
+  const [value, setValue] = useState(null);
+  return (
+    <Select value={value} onChange={(value) => setValue(value)} {...props}>
+      {props.children}
+    </Select>
+  );
+};
+
+const variants = ['default', 'rounded'];
+const optionsWithScrollSearchBar = generateOptions(10); // more than 8 options should display searchbar + scrollbar
+
+const simpleOptions = generateOptions(4); // less than 5 options should not displays any scroll/search bar
+
+const SelectReset = (props) => {
+  const [value, setValue] = useState('default');
+
+  const handleChange = (value) => {
+    setValue(value);
+  };
+  return (
+    <>
+      <button onClick={() => setValue('')}>reset</button>
+      <Select value={value} onChange={handleChange} {...props}>
+        {props.children}
+      </Select>
+    </>
+  );
+};
+
+describe('SelectV2', () => {
+  const toBeClose = (container) => {
+    expect(container.getElementsByClassName('sc-select__option').length).toBe(
+      0,
+    );
+  };
+
+  const toBeOpenWith = (container, optionsLength: number) => {
+    expect(container.getElementsByClassName('sc-select__option').length).toBe(
+      optionsLength,
+    );
+  };
+
+  const toggleSelect = (container) => {
+    userEvent.click(container.querySelector('.sc-select__control'));
+  };
+
+  test.each(variants)(
+    'should open select on click/Enter/ArrowDown',
+    (variant) => {
+      const { container } = render(
+        <SelectWrapper variant={variant}>{simpleOptions}</SelectWrapper>,
+      );
+      // should open on click
+      toBeClose(container);
+      toggleSelect(container); // open
+
+      toBeOpenWith(container, simpleOptions.length);
+      toggleSelect(container); // close
+
+      userEvent.tab(); // remove focus
+
+      // should open with Enter/ArrowDown
+      ['Enter', 'ArrowDown'].forEach((key) => {
+        // should open on arrow down
+        toBeClose(container);
+        userEvent.tab(); // focus
+
+        userEvent.keyboard(`{${key}}`);
+        toBeOpenWith(container, simpleOptions.length);
+        toggleSelect(container); // close select
+
+        toBeClose(container);
+        userEvent.tab(); // remove focus
+      });
+    },
+  );
+  test.each(variants)('should display custom placeholder', (variant) => {
+    const placeholder = 'My placeholder...';
+    const { container } = render(
+      <SelectWrapper variant={variant} placeholder={placeholder}>
+        {simpleOptions}
+      </SelectWrapper>,
+    );
+    expect(
+      container.querySelector('.sc-select__placeholder'),
+    ).toHaveTextContent(placeholder);
+  });
+  test.each(variants)('should display default value', (variant) => {
+    const options = [
+      {
+        value: 0,
+        label: 'Label 0',
+      },
+    ];
+    const { container } = render(
+      <Select variant={variant} defaultValue={options[0]} options={options} />,
+    );
+    expect(container.querySelector('.sc-select__placeholder')).toBeNull();
+    expect(
+      container.querySelector('.sc-select__single-value'),
+    ).toHaveTextContent('Label 0');
+  });
+  test.each(variants)('select should be disabled', (variant) => {
+    const { container } = render(
+      <Select variant={variant} disabled defaultValue="0">
+        <Option value="0">{'Label 0'}</Option>
+      </Select>,
+    );
+    expect(container.querySelector('input')).toBeDisabled();
+  });
+  test.each(variants)('should display no options', (variant) => {
+    const { container } = render(<Select variant={variant} />);
+    toggleSelect(container, variant);
+    expect(
+      container.querySelector('.sc-select__menu-notice--no-options'),
+    ).toHaveTextContent('No options');
+  });
+  test.each(variants)(
+    'should display a search bar if more than 8 options',
+    (variant) => {
+      const { container } = render(
+        <SelectWrapper variant={variant}>
+          {optionsWithScrollSearchBar}
+        </SelectWrapper>,
+      );
+      expect(container.querySelector('.sc-select__input')).not.toBeNull();
+    },
+  );
+  test.each(variants)('should display option', (variant) => {
+    const { container, getByTestId } = render(
+      <Select variant={variant}>
+        <Option data-testid="disabledOption" value="0" disabled>
+          Label 1
+        </Option>
+        <Option
+          data-testid="option2"
+          value="1"
+          icon={<Icon name="Deletion-marker" />}
+        >
+          Label 2
+        </Option>
+      </Select>,
+    );
+    toggleSelect(container);
+    expect(getByTestId('disabledOption')).toHaveAttribute(
+      'aria-disabled',
+      'true',
+    );
+    const icon = getByTestId('option2').querySelector('i');
+    expect(icon).not.toBeNull();
+    expect(icon).toHaveAttribute('aria-label', 'Deletion-marker ');
+  });
+  test.each(variants)(
+    '<Option/> component should throw if outside <Select/>',
+    () => {
+      // mock console.error to not display error message on throw
+      jest.spyOn(console, 'error');
+      console.error.mockImplementation(() => {});
+      expect(() => render(<Option />)).toThrowError();
+      console.error.mockRestore(); // restore console.error
+    },
+  );
+  test.each(variants)('should highlight text on search', (variant) => {
+    const { container, getByTestId } = render(
+      <SelectWrapper variant={variant}>
+        {optionsWithScrollSearchBar}
+      </SelectWrapper>,
+    );
+    toggleSelect(container);
+    userEvent.type(container.querySelector('input'), 'Ite');
+    const firstOption = getByTestId('option0');
+    expect(firstOption).toHaveClass('sc-select__option--is-focused');
+    expect(
+      container.querySelector('.sc-highlighted-matching-text'),
+    ).toHaveTextContent('Ite');
+  });
+  test.each(variants)('should select/unselect option', (variant) => {
+    const { container, getByTestId } = render(
+      <SelectWrapper variant={variant}>{simpleOptions}</SelectWrapper>,
+    );
+    // select option
+    toggleSelect(container); // open select
+
+    toBeOpenWith(container, simpleOptions.length);
+    userEvent.click(getByTestId('option0'));
+    toBeClose(container); // selecting an option should close select
+
+    // unselect option
+    toggleSelect(container); // reopen select
+
+    expect(getByTestId('option0')).toHaveClass(
+      'sc-select__option--is-selected',
+    );
+    // should be focused on the selected option
+    expect(getByTestId('option0')).toHaveAttribute('aria-selected', 'true');
+    userEvent.click(getByTestId('option1')); // click on another option
+
+    toBeClose(container); // selecting an option should close select
+
+    toggleSelect(container); // reopen select
+
+    expect(getByTestId('option1')).toHaveClass(
+      'sc-select__option--is-selected',
+    );
+    expect(getByTestId('option1')).toHaveAttribute('aria-selected', 'true');
+    expect(getByTestId('option0')).not.toHaveClass(
+      'sc-select__option--is-selected',
+    );
+    expect(getByTestId('option0')).not.toHaveAttribute('aria-selected', 'true');
+  });
+  test.each(variants)('should focus on keyDown/keyUp', (variant) => {
+    const { container, getByTestId } = render(
+      <SelectWrapper variant={variant}>{simpleOptions}</SelectWrapper>,
+    );
+    toggleSelect(container);
+    userEvent.keyboard('{ArrowDown}');
+    expect(getByTestId('option0')).not.toHaveClass(
+      'sc-select__option--is-focused',
+    );
+    expect(getByTestId('option1')).toHaveClass('sc-select__option--is-focused');
+    userEvent.keyboard('{ArrowUp}');
+    expect(getByTestId('option0')).toHaveClass('sc-select__option--is-focused');
+    expect(getByTestId('option1')).not.toHaveClass(
+      'sc-select__option--is-focused',
+    );
+  });
+  test.each(variants)('should be able to reset the value', (variant) => {
+    const { container } = render(
+      <SelectReset variant={variant}>{simpleOptions}</SelectReset>,
+    );
+    userEvent.click(container.querySelector('button'));
+    expect(
+      container.querySelector('.sc-select__placeholder'),
+    ).toHaveTextContent('Select...');
+  });
+
+  it('should not trigger onChange when defaultValue is empty string', () => {
+    const onChange = jest.fn();
+    render(
+      <Select value={''} onChange={onChange}>
+        <Option value="test">test</Option>
+      </Select>,
+    );
+    expect(onChange).toBeCalledTimes(0);
+  });
+});

package/src/lib/components/sidebar/Sidebar.component.tsx

@@ -0,0 +1,217 @@
+import { useState } from 'react';
+import styled, { css } from 'styled-components';
+
+import {
+  fontSize,
+  zIndex,
+  sidebarWidth,
+  sidebarItemHeight,
+} from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+import { Button } from '../button/Button.component';
+import { Icon } from '../icon/Icon.component';
+import { spacing } from '../../spacing';
+type Item = {
+  label: string;
+  onClick: (arg0: any) => void;
+  active?: boolean;
+  icon?: JSX.Element;
+};
+type Items = Array<Item>;
+export type Props = {
+  expanded?: boolean;
+  actions: Items;
+  hoverable?: boolean;
+  onToggleClick?: () => void;
+};
+export type WrapperProps = {
+  expanded?: boolean;
+  hoverable?: boolean;
+  hovered?: boolean;
+};
+const Wrapper = styled.div<WrapperProps>`
+  flex-shrink: 0;
+  ${(props) => {
+    const { backgroundLevel1, textPrimary } = props.theme;
+    return css`
+      background-color: ${backgroundLevel1};
+      color: ${textPrimary};
+      .fas {
+        color: ${textPrimary};
+      }
+    `;
+  }}
+
+  ${(props) => {
+    if (props.expanded) {
+      return css`
+        width: auto;
+      `;
+    }
+
+    return css`
+      width: ${sidebarWidth};
+    `;
+  }}
+
+  ${(props) => {
+    const { backgroundLevel1 } = props.theme;
+
+    if (props.hoverable && props.hovered && !props.expanded) {
+      return css`
+        .sc-sidebar {
+          position: relative;
+          width: fit-content;
+          height: 100%;
+          background-color: ${backgroundLevel1};
+          z-index: ${zIndex.sidebar};
+        }
+      `;
+    }
+  }}
+`;
+const SidebarContainer = styled.div<WrapperProps>`
+  ${(props) => {
+    const { backgroundLevel1 } = props.theme;
+    return css`
+      background-color: ${backgroundLevel1};
+    `;
+  }}
+
+  ${(props) => {
+    if (
+      props.expanded ||
+      (props.hoverable && props.hovered && !props.expanded)
+    ) {
+      return css`
+        width: auto;
+      `;
+    }
+
+    return css`
+      width: ${sidebarWidth};
+    `;
+  }}
+
+  .sc-button {
+    border-radius: 0;
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    &:hover {
+      background-color: ${getThemePropSelector('highlight')};
+    }
+    height: ${sidebarItemHeight};
+    width: ${sidebarWidth};
+    padding: 0px;
+  }
+`;
+const SidebarItem = styled.div<{ active?: boolean }>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  justify-content: flex-start;
+  .fas {
+    font-size: ${fontSize.larger};
+  }
+
+  ${(props) => {
+    const { textPrimary, highlight } = props.theme;
+    return props.active
+      ? css`
+          background-color: ${highlight};
+          color: ${textPrimary};
+          cursor: default;
+        `
+      : css`
+          &:hover {
+            background-color: ${highlight};
+            color: ${textPrimary};
+          }
+          &:active {
+            background-color: ${highlight};
+            color: ${textPrimary};
+          }
+        `;
+  }}
+`;
+const MenuItemText = styled.div`
+  margin-right: ${spacing.r20};
+`;
+// selected border-right
+const MenuItemSelected = styled.div`
+  position: absolute;
+  width: 3px;
+  height: 100%;
+  right: 0;
+  background-color: ${getThemePropSelector('selectedActive')};
+`;
+const MenuItemIcon = styled.div`
+  width: ${sidebarWidth};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: ${sidebarItemHeight};
+`;
+
+function Sidebar({
+  expanded,
+  actions,
+  onToggleClick,
+  hoverable,
+  ...rest
+}: Props) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <Wrapper
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      hoverable={hoverable}
+      hovered={hovered}
+      expanded={expanded}
+    >
+      <SidebarContainer
+        expanded={expanded}
+        className="sc-sidebar"
+        hoverable={hoverable}
+        hovered={hovered}
+        {...rest}
+      >
+        {onToggleClick && (
+          <MenuItemIcon>
+            <Button
+              size="larger"
+              variant="backgroundLevel1"
+              icon={<Icon name="Lat-menu" />}
+              onClick={() => {
+                setHovered(false);
+                onToggleClick();
+              }}
+            />
+          </MenuItemIcon>
+        )}
+        {actions.map(
+          ({ active, label, onClick, icon = null, ...actionRest }, index) => {
+            return (
+              <SidebarItem
+                className="sc-sidebar-item"
+                key={index}
+                active={active}
+                title={label}
+                onClick={onClick}
+                {...actionRest}
+              >
+                {!!icon && <MenuItemIcon>{icon}</MenuItemIcon>}
+                {(expanded || (hoverable && hovered)) && (
+                  <MenuItemText>{label}</MenuItemText>
+                )}
+                {active && <MenuItemSelected />}
+              </SidebarItem>
+            );
+          },
+        )}
+      </SidebarContainer>
+    </Wrapper>
+  );
+}
+
+export { Sidebar };

package/src/lib/components/spacedbox/SpacedBox.ts

@@ -0,0 +1,116 @@
+import styled from 'styled-components';
+import { spacing } from '../../style/theme';
+type SpacingValue = 0 | 1 | 2 | 4 | 8 | 12 | 14 | 16 | 20 | 24 | 28 | 32;
+export type Props = {
+  m?: SpacingValue;
+  mt?: SpacingValue;
+  mr?: SpacingValue;
+  mb?: SpacingValue;
+  ml?: SpacingValue;
+  mx?: SpacingValue;
+  my?: SpacingValue;
+  p?: SpacingValue;
+  pt?: SpacingValue;
+  pr?: SpacingValue;
+  pb?: SpacingValue;
+  pl?: SpacingValue;
+  px?: SpacingValue;
+  py?: SpacingValue;
+};
+type PropsName =
+  | 'm'
+  | 'mt'
+  | 'mr'
+  | 'mb'
+  | 'ml'
+  | 'mx'
+  | 'my'
+  | 'p'
+  | 'pt'
+  | 'pr'
+  | 'pb'
+  | 'pl'
+  | 'px'
+  | 'py';
+type CSSField =
+  | 'margin'
+  | 'margin-top'
+  | 'margin-right'
+  | 'margin-bottom'
+  | 'margin-left'
+  | 'padding'
+  | 'padding-top'
+  | 'padding-right'
+  | 'padding-bottom'
+  | 'padding-left';
+const validValue = [0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32];
+
+const createSpacingFn =
+  (propsName: PropsName, spacingFields: Array<CSSField>) => (props: Props) => {
+    if (!props[propsName] && props[propsName] !== 0) {
+      return null;
+    }
+
+    //@ts-ignore -- this is ensured below
+    let value: SpacingValue = props[propsName];
+
+    if (!validValue.includes(value)) {
+      console.warn(
+        `'${propsName}' props should be a number in this list: ` +
+          '0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32',
+      );
+      return null;
+    }
+
+    const result = spacingFields
+      .map((param: CSSField) => `${param}: ${spacing[`sp${value}`]}`)
+      .join(';');
+    return result;
+  };
+
+const m = createSpacingFn('m', ['margin']);
+const mt = createSpacingFn('mt', ['margin-top']);
+const mr = createSpacingFn('mr', ['margin-right']);
+const mb = createSpacingFn('mb', ['margin-bottom']);
+const ml = createSpacingFn('ml', ['margin-left']);
+const mx = createSpacingFn('mx', ['margin-left', 'margin-right']);
+const my = createSpacingFn('my', ['margin-top', 'margin-bottom']);
+const p = createSpacingFn('p', ['padding']);
+const pt = createSpacingFn('pt', ['padding-top']);
+const pr = createSpacingFn('pr', ['padding-right']);
+const pb = createSpacingFn('pb', ['padding-bottom']);
+const pl = createSpacingFn('pl', ['padding-left']);
+const px = createSpacingFn('px', ['padding-left', 'padding-right']);
+const py = createSpacingFn('py', ['padding-top', 'padding-bottom']);
+
+/**
+ * @deprecated
+ * Please use Box with import { Box } from '@scality/core-ui/dist/next';
+ *
+ * Most common use cases:
+ *
+ * `<SpacedBox m={14}><Component /></SpacedBox>`
+ *
+ * `<SpacedBox as={SpanComponent}><Component /></SpacedBox>`
+ *
+ * Props : m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py
+ *
+ * Values: 0, 1, 2, 4, 8, 12, 14, 16, 20, 24, 28, 32
+ */
+const SpacedBox = styled.div`
+  ${m};
+  ${mt};
+  ${mr};
+  ${mb};
+  ${ml};
+  ${mx};
+  ${my};
+  ${p};
+  ${pt};
+  ${pr};
+  ${pb};
+  ${pl};
+  ${px};
+  ${py};
+`;
+export { SpacedBox };