@integrigo/integrigo-ui 1.6.7-c → 1.6.10-a

package/src/components/atoms/Avatar/Avatar.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Avatar } from './Avatar';
+
+const SRC =
+  'https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2';
+
+describe('<Avatar />', () => {
+  it('avatar should render', () => {
+    render(<Avatar src={SRC} alt="Jane Doe" />);
+  });
+
+  it('avatar should match snapshot', () => {
+    const { container } = render(<Avatar src={SRC} alt="Jane Doe" />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Avatar/Avatar.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+
+type AvatarProps = {
+  src: string;
+  alt: string;
+  size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
+};
+
+const sizeVariant = {
+  s: 20,
+  m: 32,
+  l: 53,
+  xl: 64,
+  xxl: 94,
+};
+
+export const Avatar: React.FC<AvatarProps> = ({ src, alt, size = 'm' }) => {
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={sizeVariant[size]}
+      height={sizeVariant[size]}
+    />
+  );
+};
+
+const Image = styled.img`
+  object-fit: cover;
+  border-radius: 50%;
+`;
+
+Image.displayName = 'Image';

package/src/components/atoms/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Avatar /> avatar should match snapshot 1`] = `
+<div>
+  <img
+    alt="Jane Doe"
+    class="sc-bdvvtL btXxWo"
+    height="32"
+    src="https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2"
+    width="32"
+  />
+</div>
+`;

package/src/components/atoms/Avatar/index.ts

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

package/src/components/atoms/Card/Card.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Card } from './Card';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Atoms/Card',
+  component: Card,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['s', 'm', 'l'],
+      defaultValue: 'l',
+    },
+  },
+} as ComponentMeta<typeof Card>;
+
+const Template: ComponentStory<typeof Card> = (args) => (
+  <Card {...args}>Content</Card>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {};
+
+export const Inversed = Template.bind({});
+Inversed.args = {
+  inverse: true,
+};

package/src/components/atoms/Card/Card.tsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+export interface CardProps {
+  inverse?: boolean;
+  size?: 's' | 'm' | 'l';
+}
+
+const sizeVariants = {
+  s: {
+    padding: 16,
+    borderRadius: 5,
+  },
+  m: {
+    padding: 16,
+    borderRadius: 16,
+  },
+  l: {
+    padding: 32,
+    borderRadius: 24,
+  },
+};
+
+export const Card = styled.div<CardProps>`
+  background-color: ${(p) =>
+    p.inverse ? 'var(--color-navy)' : 'var(--color-white)'};
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  color: ${(p) => (p.inverse ? 'var(--color-white)' : 'var(--color-navy)')};
+  padding: ${(p) => sizeVariants[p.size || 'l'].padding}px;
+  border-radius: ${(p) => sizeVariants[p.size || 'l'].borderRadius}px;
+`;
+
+Card.displayName = 'Card';

package/src/components/atoms/Card/index.ts

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

package/src/components/atoms/Chip/Chip.stories.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { Chip, ChipVariant, ChipSize } from './Chip';
+
+export default {
+  title: 'Atoms/Chip',
+  component: Chip,
+  argTypes: {
+    label: {
+      name: 'label',
+      type: {
+        name: 'string',
+        required: true,
+      },
+      defaultValue: 'Accept',
+    },
+    size: {
+      name: 'size',
+      type: {
+        name: 'string',
+        required: false,
+      },
+      control: {
+        type: 'select',
+      },
+      options: Object.keys(ChipSize),
+      defaultValue: ChipSize.xl,
+    },
+    variant: {
+      name: 'variant',
+      type: {
+        name: 'string',
+        required: false,
+      },
+      control: {
+        type: 'select',
+      },
+      options: Object.keys(ChipVariant),
+      defaultValue: ChipVariant.primary,
+    },
+    onClick: {
+      name: 'onClick',
+      type: {
+        name: 'function',
+        required: false,
+      },
+      defaultValue: null,
+    },
+  },
+} as ComponentMeta<typeof Chip>;
+
+const Template: ComponentStory<typeof Chip> = (args) => (
+  <Chip {...args} />
+);
+
+export const Basic = Template.bind({});
+
+export const Clickable = Template.bind({});
+Clickable.args = {
+  onClick: action('clicked'),
+};

package/src/components/atoms/Chip/Chip.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Chip, ChipVariant } from './Chip';
+
+describe('<Chip />', () => {
+  it('should match snapshot - basic', () => {
+    const { container } = render(<Chip label="Accept" />);
+    expect(container).toMatchSnapshot();
+  });
+  it('should match snapshot - icon', () => {
+    const { container } = render(<Chip label="Accept" variant={ChipVariant.primary} iconLeft="close" />);
+    expect(container).toMatchSnapshot();
+  });
+  it('should call onclick function', async () => {
+    const user = userEvent.setup();
+    const handleClick = jest.fn();
+    render(<Chip label="Accept" onClick={handleClick} />);
+    expect(handleClick).not.toHaveBeenCalled();
+    await user.click(screen.getByText(/Accept/));
+    expect(handleClick).toHaveBeenCalled();
+  });
+});

package/src/components/atoms/Chip/Chip.tsx

@@ -0,0 +1,233 @@
+import React, { MouseEvent, FC } from 'react';
+import styled from 'styled-components';
+import { Icon, IconType } from '../Icon';
+
+type OnClickFunctionType = (e: MouseEvent<HTMLDivElement>) => void;
+
+export interface ChipProps {
+  iconLeft?: IconType,
+  iconRight?: IconType,
+  size?: ChipSize,
+  label: string;
+  variant?: ChipVariant;
+  onClick?: OnClickFunctionType;
+}
+
+export enum ChipVariant {
+  transparent = 'transparent',
+  white = 'white',
+  primary = 'primary',
+  secondary = 'secondary',
+}
+
+export enum ChipSize {
+  xl = 'xl',
+  l = 'l',
+  m = 'm',
+  s = 's',
+}
+
+const sizeVariant = {
+  xl: {
+    iconSize: {
+      width: 25,
+      height: 25,
+    },
+    gap: '12.5px',
+    paddingY: '12.5px',
+    paddingX: '17.5px',
+    border: '2px',
+    fontSize: '20px',
+    lineHeight: '30px',
+  },
+  l: {
+    iconSize: {
+      width: 20,
+      height: 20,
+    },
+    gap: '10px',
+    paddingY: '10px',
+    paddingX: '14px',
+    border: '2px',
+    fontSize: '16px',
+    lineHeight: '24px',
+  },
+  m: {
+    iconSize: {
+      width: 15,
+      height: 15,
+    },
+    gap: '7.5px',
+    paddingY: '7.5px',
+    paddingX: '10.5px',
+    border: '2px',
+    fontSize: '12px',
+    lineHeight: '18px',
+  },
+  s: {
+    iconSize: {
+      width: 10,
+      height: 10,
+    },
+    gap: '5px',
+    paddingY: '5px',
+    paddingX: '7px',
+    border: '1.5px',
+    fontSize: '8px',
+    lineHeight: '12px',
+  },
+};
+
+const colorVariant = {
+  primary: {
+    fontColor: 'var(--shades-of-grey-0)',
+  },
+  secondary: {
+    fontColor: 'var(--color-orange)',
+  },
+  transparent: {
+    fontColor: 'var(--shades-of-grey-100)',
+  },
+  white: {
+    fontColor: 'var(--shades-of-grey-100);',
+  },
+};
+
+export const Chip: FC<ChipProps> = (props: ChipProps) => {
+  const {
+    iconLeft, iconRight, label, size = ChipSize.m, variant = ChipVariant.primary, onClick,
+  } = props;
+
+  return (
+    <ChipWrapper size={size} variant={variant} onClick={onClick}>
+      {iconLeft && (
+        <IconWrapper>
+          <Icon
+            type={iconLeft}
+            fill={colorVariant[variant].fontColor}
+            size={sizeVariant[size].iconSize}
+          />
+        </IconWrapper>
+      )}
+      <Text size={size}>{label}</Text>
+      {iconRight && (
+        <IconWrapper>
+          <Icon
+            type={iconRight}
+            fill={colorVariant[variant].fontColor}
+            size={sizeVariant[size].iconSize}
+          />
+        </IconWrapper>
+      )}
+    </ChipWrapper>
+  );
+};
+
+const getVariantStyles = (variant: ChipVariant, clickable: boolean): string => {
+  switch (variant) {
+    case ChipVariant.secondary:
+      return `
+        background-color: var(--color-white);
+        opacity: 0.9;
+        border-color: var(--color-orange);
+        border-style: solid;
+        
+        ${clickable && `
+          cursor: pointer;
+          
+          &:hover {
+            opacity: 0.8;
+          }
+          
+          &:active {
+            opacity: 0.65;
+          }
+        `}
+      `;
+    case ChipVariant.transparent:
+      return `        
+        ${clickable && `
+          &:hover {
+            background-color: var(--shades-of-grey-40);
+          }
+          
+          &:active {
+            background-color: var(--shades-of-grey-60);
+          }
+        `}
+      `;
+    case ChipVariant.white:
+      return `
+        background-color: var(--color-white);
+        border-color: var(--shades-of-grey-40);
+        border-style: solid;
+        
+        ${clickable && `
+          &:hover {
+            background-color: var(--shades-of-grey-20);
+          }
+          
+          &:active {
+           border-color: var(--shades-of-grey-100);
+          }
+        `}
+      `;
+    case ChipVariant.primary:
+    default:
+      return `
+        background-color: var(--color-orange);
+        border-color: var(--color-orange);
+        border-style: solid;
+
+        ${clickable && `
+          &:hover {
+            opacity: 0.8;
+          }
+          
+          &:active {
+            opacity: 0.65;
+          }
+        `}
+      `;
+  }
+};
+
+Chip.displayName = 'Chip';
+
+const ChipWrapper = styled.div<{ size: ChipSize, variant: ChipVariant, onClick?: OnClickFunctionType }>`
+  border-radius: 100px;
+  display: flex;
+  justify-content: center;
+  width: min-content;
+  
+  ${(p) => `
+    border-width: ${sizeVariant[p.size].border};
+    padding: ${sizeVariant[p.size].paddingY} ${sizeVariant[p.size].paddingX};
+    color: ${colorVariant[p.variant].fontColor};
+    ${getVariantStyles(p.variant, typeof p.onClick === 'function')}
+    ${typeof p.onClick === 'function' && `
+      cursor: pointer;
+    `}
+  `}
+`;
+
+const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+`;
+
+IconWrapper.displayName = 'IconWrapper';
+
+const Text = styled.span<{
+  size: ChipSize
+}>`
+  color: inherit;
+  font-weight: bold;
+  ${(p) => `
+    margin: 0 ${sizeVariant[p.size].gap};
+    line-height: ${sizeVariant[p.size].lineHeight};
+    font-size: ${sizeVariant[p.size].fontSize};
+  `}
+`;
+
+Text.displayName = 'Text';

package/src/components/atoms/Chip/__snapshots__/Chip.test.tsx.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Radio /> should match snapshot - basic 1`] = `
+<div>
+  <div
+    class="sc-gsDKAQ beQSVy"
+  >
+    <span
+      class="sc-hKwDye idViEF"
+    >
+      Accept
+    </span>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> should match snapshot - icon 1`] = `
+<div>
+  <div
+    class="sc-gsDKAQ beQSVy"
+  >
+    <span
+      class="sc-dkPtRN doqhX"
+    >
+      <svg
+        fill="var(--shades-of-grey-0)"
+        height="15"
+        viewBox="0 0 14 14"
+        width="15"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="m8.41 7 4.3-4.29a1.004 1.004 0 1 0-1.42-1.42L7 5.59l-4.29-4.3a1.004 1.004 0 0 0-1.42 1.42L5.59 7l-4.3 4.29a1 1 0 0 0 0 1.42.998.998 0 0 0 1.42 0L7 8.41l4.29 4.3a.998.998 0 0 0 1.42 0 .997.997 0 0 0 .219-1.095.998.998 0 0 0-.22-.325L8.41 7Z"
+        />
+      </svg>
+    </span>
+    <span
+      class="sc-hKwDye idViEF"
+    >
+      Accept
+    </span>
+  </div>
+</div>
+`;
+
+exports[`<Radio /> should match snapshot 1`] = `
+<div>
+  <div
+    class="sc-gsDKAQ beQSVy"
+  >
+    <span
+      class="sc-hKwDye idViEF"
+    >
+      Accept
+    </span>
+  </div>
+</div>
+`;

package/src/components/atoms/Chip/index.ts

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

package/src/components/atoms/Divider/Divider.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Divider } from './Divider';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Atoms/Divider',
+  component: Divider,
+} as ComponentMeta<typeof Divider>;
+
+const Template: ComponentStory<typeof Divider> = (args) => <Divider {...args} />;
+
+export const Orange = Template.bind({});
+Orange.args = {
+  variant: 'orange',
+};
+
+export const Navy = Template.bind({});
+Navy.args = {
+  variant: 'navy',
+};
+
+export const White = Template.bind({});
+White.args = {
+  variant: 'white',
+};

package/src/components/atoms/Divider/Divider.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+type DividerProps = {
+  variant?: 'orange' | 'navy' | 'white';
+};
+
+export const Divider = styled.div<DividerProps>`
+  width: 100%;
+  height: 2px;
+  background-color: ${(p) => `var(--color-${p.variant || 'navy'})`};
+  opacity: 0.2;
+`;

package/src/components/atoms/Divider/index.ts

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

package/src/components/atoms/Dot/Dot.stories.tsx

@@ -0,0 +1,35 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Dot } from './Dot';
+
+export default {
+  title: 'Atoms/Dot',
+  component: Dot,
+  argTypes: {
+    size: {
+      name: 'size',
+      type: {
+        name: 'string',
+        required: false,
+      },
+      control: {
+        type: 'select',
+      },
+      options: ['xl', 'l', 'm', 's'],
+      defaultValue: 'm',
+    },
+  },
+} as ComponentMeta<typeof Dot>;
+
+const Template: ComponentStory<typeof Dot> = (args) => <Dot {...args} />;
+
+export const Icon = Template.bind({
+  icon: {
+    type: 'bell',
+  },
+});
+
+const TemplateWithChildren: ComponentStory<typeof Dot> = (args) => (
+  <Dot {...args}>7</Dot>
+);
+
+export const Basic = TemplateWithChildren.bind({});

package/src/components/atoms/Dot/Dot.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { Dot } from './Dot';
+
+describe('<Dot />', () => {
+  it('should match snapshot - basic', () => {
+    const { container } = render(<Dot>7</Dot>);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Dot/Dot.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Icon } from '../Icon';
+
+type DotProps = {
+  icon?: React.ComponentProps<typeof Icon>;
+  children?: React.ReactNode;
+  size?: 'xl' | 'l' | 'm' | 's';
+};
+
+const sizeVariant = {
+  xl: 32,
+  l: 24,
+  m: 18,
+  s: 12,
+};
+
+export const Dot: React.FCS<DotProps> = ({
+  icon,
+  children,
+  className,
+  size = 'm',
+}) => {
+  return (
+    <Root className={className} size={size}>
+      {icon ? <Icon {...icon} /> : children}
+    </Root>
+  );
+};
+
+const Root = styled.div<{ size: 'xl' | 'l' | 'm' | 's' }>`
+  background-color: var(--color-orange);
+  color: var(--color-white);
+  width: ${(p) => sizeVariant[p.size]}px;
+  height: ${(p) => sizeVariant[p.size]}px;
+  border-radius: ${(p) => sizeVariant[p.size] / 2}px;
+  line-height: ${(p) => sizeVariant[p.size]}px;
+  font-size: ${(p) => sizeVariant[p.size] / 2}px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;

package/src/components/atoms/Dot/index.ts

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

package/src/components/atoms/Field/FieldLabel.tsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import { fieldSizeVariants } from './fieldSizeVariants';
+
+interface FieldLabelProps {
+  sizeVariant: 'xl' | 'l' | 'm' | 's';
+  position?: 'inline' | 'block';
+  disabled?: boolean;
+}
+
+export const FieldLabel = styled.div<FieldLabelProps>`
+  ${(p) =>
+    p.position === 'inline'
+      ? `
+        position: relative;
+        display: flex;
+        align-items: center;
+      `
+      : `
+        position: absolute;
+        left: 0;
+        z-index: 10;
+        bottom: calc(100% - ${fieldSizeVariants[p.sizeVariant].font} - 4px);
+      `}
+
+  & label > span {
+    color: ${(p) =>
+    p.disabled ? 'var(--shades-of-grey-40)' : 'var(--shades-of-grey-80)'};
+    font-size: ${(p) => fieldSizeVariants[p.sizeVariant].font};
+  }
+`;
+
+FieldLabel.displayName = 'InputLabel';