@veeqo/ui 0.0.1 → 0.0.3

package/src/components/DimensionsInput/DimensionsInput.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DimensionsInput } from './DimensionsInput';
+
+test('Renders correctly', () => {
+  const { container } = render(
+    <DimensionsInput
+      handleChangeHeight={() => {}}
+      height="12"
+      handleChangeWidth={() => {}}
+      width="15"
+      handleChangeLength={() => {}}
+      length="15"
+    />,
+  );
+  expect(container).toMatchSnapshot();
+});
+
+describe('DimensionsInput component', () => {
+  const handleChangeHeight = jest.fn();
+  const handleChangeWidth = jest.fn();
+  const handleChangeLength = jest.fn();
+  it('renders correctly', async () => {
+    render(
+      <DimensionsInput
+        handleChangeHeight={handleChangeHeight}
+        height="12"
+        handleChangeWidth={handleChangeWidth}
+        width="15"
+        handleChangeLength={handleChangeLength}
+        length="15"
+        label="Package dimensions test"
+        hint="Specify package dimensions"
+        unit="cm"
+      />,
+    );
+    // Check if it renders with label
+    expect(screen.getByText('Package dimensions test')).toBeInTheDocument();
+    // Check if it renders with hint
+    expect(screen.getByText('Specify package dimensions')).toBeInTheDocument();
+    // Check if unit button renders
+    expect(screen.getByText('cm')).toBeInTheDocument();
+
+    const lengthInput = screen.getByPlaceholderText('L') as HTMLInputElement;
+    const widthInput = screen.getByPlaceholderText('W') as HTMLInputElement;
+    const heightInput = screen.getByPlaceholderText('H') as HTMLInputElement;
+
+    expect(lengthInput.value).toBe('15');
+    expect(widthInput.value).toBe('15');
+    expect(heightInput.value).toBe('12');
+
+    fireEvent.change(lengthInput, { target: { value: '25' } });
+    expect(handleChangeLength).toHaveBeenCalledWith('25');
+
+    fireEvent.change(widthInput, { target: { value: '20' } });
+    expect(handleChangeWidth).toHaveBeenCalledWith('20');
+
+    fireEvent.change(heightInput, { target: { value: '17' } });
+    expect(handleChangeHeight).toHaveBeenCalledWith('17');
+  });
+
+  it('shows an error', async () => {
+    render(
+      <DimensionsInput
+        label="Dimensions"
+        handleChangeHeight={handleChangeHeight}
+        height="12"
+        handleChangeWidth={handleChangeWidth}
+        width="15"
+        handleChangeLength={handleChangeLength}
+        length="15"
+        error="Package dimensions test error"
+      />,
+    );
+    expect(screen.getByText('Package dimensions test error')).toBeInTheDocument();
+  });
+
+  it('shows placeholder dimension values when no values are entered', async () => {
+    render(
+      <DimensionsInput
+        handleChangeHeight={handleChangeHeight}
+        height=""
+        handleChangeWidth={handleChangeWidth}
+        width=""
+        handleChangeLength={handleChangeLength}
+        length=""
+      />,
+    );
+    const lengthInput = screen.getByPlaceholderText('L') as HTMLInputElement;
+    const widthInput = screen.getByPlaceholderText('W') as HTMLInputElement;
+    const heightInput = screen.getByPlaceholderText('H') as HTMLInputElement;
+
+    expect(lengthInput.value).toBe('');
+    expect(widthInput.value).toBe('');
+    expect(heightInput.value).toBe('');
+  });
+});

package/src/components/DimensionsInput/DimensionsInput.tsx

@@ -0,0 +1,63 @@
+import React, { FC } from 'react';
+
+import { InputGroup } from '../InputGroup';
+import { ComponentSize } from '../types';
+import { withLabels } from '../../hoc';
+
+import { Container, Row, TextField, Button } from './styled';
+
+import { DimensionsProps } from './types';
+import { CrossIcon } from '../../tempIcons/CrossIcon';
+import { theme } from '../../theme';
+
+export const DimensionsInput: FC<DimensionsProps> = withLabels(
+  ({
+    size = ComponentSize.base,
+    handleChangeHeight,
+    handleChangeWidth,
+    handleChangeLength,
+    className,
+    height,
+    width,
+    length,
+    unit,
+    ...rest
+  }: DimensionsProps) => (
+    <Container className={className}>
+      <Row>
+        <TextField
+          onChange={handleChangeLength}
+          size={size}
+          name="length"
+          type="number"
+          placeholder="L"
+          value={length}
+          {...rest}
+        />
+        <CrossIcon height={theme.sizes.base} width={theme.sizes.base} />
+        <TextField
+          onChange={handleChangeWidth}
+          size={size}
+          name="width"
+          type="number"
+          placeholder="W"
+          value={width}
+          {...rest}
+        />
+        <CrossIcon height={theme.sizes.base} width={theme.sizes.base} />
+        <InputGroup>
+          <TextField
+            onChange={handleChangeHeight}
+            size={size}
+            name="height"
+            type="number"
+            placeholder="H"
+            value={height}
+            {...rest}
+          />
+          <Button size={size}>{unit}</Button>
+        </InputGroup>
+      </Row>
+    </Container>
+  ),
+);

package/src/components/DimensionsInput/__snapshots__/DimensionsInput.test.tsx.snap

@@ -0,0 +1,303 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders correctly 1`] = `
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c5 > * {
+  margin-left: 0;
+  margin-right: 0;
+  box-shadow: none;
+}
+
+.c5 > *:not(:last-child) {
+  border-right-width: 0 !important;
+}
+
+.c5 > *:focus,
+.c5 > *:active {
+  z-index: 5;
+  border-right-width: 1px !important;
+}
+
+.c5 > *:focus + *,
+.c5 > *:active + * {
+  border-left-width: 0 !important;
+}
+
+.c5 > *:not(:first-child):not(:last-child) {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.c5 > *:first-child {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.c5 > *:last-child {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.c3 {
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0 12px;
+  border-radius: 4px;
+  border: 1px solid #959fa8;
+  color: #1b2126;
+  height: 40px;
+  font-size: 14px;
+}
+
+.c3 {
+  --outline-size: 4px;
+}
+
+.c3:focus {
+  border-color: #0079d1;
+  box-shadow: 0 0 0 var(--outline-size) #80bce8;
+  outline: 0;
+}
+
+.c3:invalid {
+  border-color: #eb5757;
+  box-shadow: 0 0 0 var(--outline-size) #f7bcbc;
+}
+
+.c3:disabled {
+  box-shadow: none;
+  background-color: #f2f3f5;
+  border-color: #959fa8;
+  color: #637381;
+}
+
+.c3::-webkit-outer-spin-button,
+.c3::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.c3[type='number'] {
+  -moz-appearance: textfield;
+  width: 8ch;
+  text-align: right;
+}
+
+.c6 {
+  position: relative;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-weight: 400;
+  border: 1px solid;
+  background-color: transparent;
+  white-space: nowrap;
+  --outline-width: 4px;
+  height: 40px;
+  padding-left: 8px;
+  padding-right: 8px;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.c6:hover {
+  cursor: pointer;
+}
+
+.c6:disabled {
+  pointer-events: none;
+  cursor: unset !important;
+}
+
+.c6 > span {
+  position: relative;
+  top: -1px;
+}
+
+.c7 {
+  border-color: #CDD1D5;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
+  color: #0079D1;
+}
+
+.c7:hover {
+  background-color: #FAFAFB;
+}
+
+.c7:active {
+  background-color: #FAFAFB;
+  border-color: #0079D1;
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+}
+
+.c7:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+  outline: 0;
+}
+
+.c7:disabled {
+  box-shadow: none !important;
+  background-color: #DFE3E8 !important;
+  border-color: #DFE3E8 !important;
+  color: #637381 !important;
+}
+
+.c0 {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  position: relative;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.c4 {
+  width: 52px;
+  margin: 0;
+  padding: 0 6px;
+}
+
+.c4.c4.c4 {
+  text-align: left;
+  border-color: #959FA8;
+}
+
+.c8 {
+  padding: 0 6px;
+  border-color: #959FA8;
+}
+
+<div>
+  <div
+    class="c0 c1"
+  >
+    <div
+      class="c0 c2"
+    >
+      <input
+        class="c3 c4"
+        id="test-id"
+        name="length"
+        placeholder="L"
+        spellcheck="false"
+        type="number"
+        value="15"
+      />
+      <svg
+        fill="none"
+        height="1rem"
+        role="presentation"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M19 6.51071L17.4893 5L11.5 10.9893L5.51071 5L4 6.51071L9.98929 12.5L4 18.4893L5.51071 20L11.5 14.0107L17.4893 20L19 18.4893L13.0107 12.5L19 6.51071Z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+      <input
+        class="c3 c4"
+        id="test-id"
+        name="width"
+        placeholder="W"
+        spellcheck="false"
+        type="number"
+        value="15"
+      />
+      <svg
+        fill="none"
+        height="1rem"
+        role="presentation"
+        viewBox="0 0 24 24"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M19 6.51071L17.4893 5L11.5 10.9893L5.51071 5L4 6.51071L9.98929 12.5L4 18.4893L5.51071 20L11.5 14.0107L17.4893 20L19 18.4893L13.0107 12.5L19 6.51071Z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+      <div
+        class="c5"
+      >
+        <input
+          class="c3 c4"
+          id="test-id"
+          name="height"
+          placeholder="H"
+          spellcheck="false"
+          type="number"
+          value="12"
+        />
+        <button
+          class="c6 c7 c8"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/DimensionsInput/index.ts

@@ -0,0 +1 @@
+export { DimensionsInput } from './DimensionsInput';

package/src/components/DimensionsInput/styled.ts

@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+
+import { Text } from '../Text';
+import { TextField } from '../TextField';
+import { Button } from '../Button';
+import { BaseContainer } from '../BaseContainer';
+import { theme } from '../../theme';
+
+const Container = styled(BaseContainer)`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`;
+
+const Row = styled(BaseContainer)`
+  display: flex;
+  align-items: center;
+  margin-top: 4px;
+`;
+
+const StyledTextField = styled(TextField)`
+  width: 52px;
+  margin: 0;
+  padding: 0 6px;
+
+  &&& {
+    text-align: left;
+    border-color: ${theme.colors.neutral.ink.lightest};
+  }
+`;
+
+const StyledButton = styled(Button)`
+  padding: 0 6px;
+  border-color: ${theme.colors.neutral.ink.lightest};
+`;
+
+const Label = styled(Text)``;
+
+const Error = styled.span`
+  display: block;
+  font-family: ${theme.text.error.fontFamily};
+  font-size: ${theme.text.error.fontSize};
+  font-weight: ${theme.text.error.fontWeight};
+  line-height: ${theme.text.error.lineHeight};
+  color: ${theme.text.error.color};
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(${theme.sizes[2]} * -1);
+    width: 2px;
+    background-color: ${theme.colors.secondary.red.base};
+  }
+`;
+
+const Hint = styled.span`
+  display: block;
+  font-family: ${theme.fontFamily};
+  font-size: ${theme.sizes[3]};
+  line-height: ${theme.sizes[4]};
+  color: ${theme.colors.neutral.ink.light};
+`;
+
+export { Container, Row, Error, Hint, StyledTextField as TextField, StyledButton as Button, Label };

package/src/components/DimensionsInput/types.ts

@@ -0,0 +1,16 @@
+import { ComponentSize } from '../types';
+
+export interface DimensionsProps {
+  size?: ComponentSize;
+  handleChangeHeight: (value: string) => void;
+  handleChangeWidth: (value: string) => void;
+  handleChangeLength: (value: string) => void;
+  label?: string;
+  hint?: string;
+  error?: string;
+  height: string;
+  width: string;
+  length: string;
+  unit?: string;
+  className?: string;
+}

package/src/components/FilterTag/FilterTag.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { FilterTag } from '.';
+
+const meta = {
+  title: 'Components/UI/FilterTag',
+  component: FilterTag,
+  tags: ['autodocs'],
+} satisfies Meta<typeof FilterTag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'warehouse',
+    text: 'All',
+  },
+};
+
+export const WithContent: Story = {
+  args: {
+    label: 'Warehouse',
+    text: 'All',
+    content: (
+      <div>
+        <p>Some content</p>
+      </div>
+    ),
+  },
+};

package/src/components/FilterTag/FilterTag.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { FilterTag } from '.';
+
+describe('FilterTag', () => {
+  test('it renders correctly', () => {
+    const { container } = render(<FilterTag label="test-label" text="test-text" />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/FilterTag/FilterTag.tsx

@@ -0,0 +1,111 @@
+import React, { MouseEventHandler, useCallback } from 'react';
+import { useDropdown } from '../../hooks';
+
+import { colors } from '../../theme/modules/colors';
+
+import { FilterTagProps } from './types';
+
+import {
+  Container,
+  Text,
+  Dropdown,
+  GroupLabel,
+  MainIcon,
+  CrossIcon,
+  Content,
+  Header,
+} from './styled';
+import { buildClassnames } from '../../utils/buildClassnames';
+
+export interface ClassNamesReturnPayload {
+  filterTagDropdown?: string;
+  container?: string;
+  cross?: string;
+}
+
+const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({
+  filterTagDropdown: prefix ? `${prefix}-filter-tag-dropdown` : undefined,
+  container: prefix ? `${prefix}-container` : undefined,
+  cross: prefix ? `${prefix}-cross` : undefined,
+});
+
+export const FilterTag = ({
+  className,
+  e2eClassName,
+  label,
+  text,
+  iconSlot,
+  fill = colors.secondary.blue.base,
+  content,
+  footer,
+  onClickAway,
+  onClick,
+  shouldCloseOnClickAway = true,
+}: FilterTagProps) => {
+  const classNames = generateClassNames(className);
+  const e2eClassNames = generateClassNames(e2eClassName);
+  const { shouldShowDropdown, toggleShouldShowDropdown, closeDropdown } = useDropdown();
+
+  const handleClick: MouseEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      toggleShouldShowDropdown();
+      if (onClickAway && shouldShowDropdown) onClickAway(event as any);
+    },
+    [toggleShouldShowDropdown, onClickAway, shouldShowDropdown],
+  );
+
+  const handleClickAway = useCallback(
+    (event: any) => {
+      // Escape hatch to apply custom behavior when clicked away
+      if (onClickAway) onClickAway(event, closeDropdown);
+
+      // Default clickAway behavior (closes the dropdown)
+      if (shouldCloseOnClickAway) closeDropdown();
+    },
+    [closeDropdown, onClickAway, shouldCloseOnClickAway],
+  );
+
+  const shouldShowSimple = !content;
+
+  return shouldShowSimple ? (
+    <Container
+      className={buildClassnames([classNames?.container, e2eClassNames?.container])}
+      onClick={onClick}
+    >
+      {label && <GroupLabel variant="subheadingSmallBold">{`${label}:`}</GroupLabel>}
+      <Text>{text}</Text>
+      <CrossIcon
+        className={buildClassnames([classNames?.cross, e2eClassNames?.cross])}
+        name="cross"
+        size="base"
+        color={colors.neutral.ink.base}
+      />
+    </Container>
+  ) : (
+    <Dropdown
+      className={classNames.filterTagDropdown}
+      shouldShowDropdown={shouldShowDropdown}
+      onClickAway={handleClickAway}
+      cta={
+        <Container className={classNames.container} onClick={handleClick}>
+          {label && <GroupLabel variant="subheadingSmallBold">{`${label}:`}</GroupLabel>}
+          <Text>{text}</Text>
+          <MainIcon
+            color={colors.neutral.ink.base}
+            name="downArrow"
+            shouldShow={shouldShowDropdown}
+          />
+        </Container>
+      }
+    >
+      <Content>
+        <Header color={fill}>
+          {iconSlot}
+          <Text variant="headingTable">{label}</Text>
+        </Header>
+        {content}
+        {footer}
+      </Content>
+    </Dropdown>
+  );
+};