@integrigo/integrigo-ui 1.6.8 → 1.6.10

package/src/components/molecules/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Dropdown } from './Dropdown';
+
+export default {
+  title: 'Molecules/Dropdown',
+  component: Dropdown,
+} as ComponentMeta<typeof Dropdown>;
+
+const Template: ComponentStory<typeof Dropdown> = (args) => (
+  <Dropdown {...args}>
+    <Dropdown.Option>Option 1</Dropdown.Option>
+    <Dropdown.Option>Option 2</Dropdown.Option>
+    <Dropdown.Option>Option 3</Dropdown.Option>
+  </Dropdown>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  placeholder: 'Select',
+  size: 'm',
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  placeholder: 'Select',
+  label: 'Label',
+  size: 'm',
+};

package/src/components/molecules/Dropdown/Dropdown.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import styled from 'styled-components';
+import { getValidationTypeProps } from '../../../helpers/validation';
+import { ValidationType } from '../../../types/validation';
+import { Label } from '../../atoms/Typography/Label';
+import { IconAddition } from '../../atoms/Icon';
+import { Option } from './Option';
+import { FieldLabel, fieldSizeVariants, FieldWrapper } from '../../atoms/Field';
+
+export interface DropdwonStaticProps {
+  Option: typeof Option;
+}
+
+export interface DropdownProps
+  extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  validationType: ValidationType;
+  label?: string;
+  size: 'xl' | 'l' | 'm' | 's';
+}
+
+const Dropdown = React.forwardRef<HTMLSelectElement, DropdownProps>(
+  ({ children, label, size = 'm', ...props }, ref) => {
+    return (
+      <FieldWrapper withLabel={Boolean(label)} sizeVariant={size}>
+        {label && (
+          <FieldLabel sizeVariant={size} disabled={props.disabled}>
+            <Label text={label}></Label>
+          </FieldLabel>
+        )}
+
+        <IconAddition
+          icon="angle-down"
+          disabled={props.disabled}
+          direction="rtl"
+          size={size}
+        />
+
+        <Select ref={ref} sizeVariant={size} {...props}>
+          <option disabled selected>
+            {props.placeholder}
+          </option>
+          {children}
+        </Select>
+      </FieldWrapper>
+    );
+  },
+);
+
+const DropdownWithStatic = Object.assign(Dropdown, { Option: Option });
+
+export { DropdownWithStatic as Dropdown };
+
+const Select = styled.select<
+Omit<DropdownProps, 'size'> & { sizeVariant: 'xl' | 'l' | 'm' | 's' }
+>`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: var(--color-white);
+  border: 2px solid var(--shades-of-grey-80);
+  cursor: pointer;
+  border-radius: var(--padding-s);
+  padding: ${(p) => fieldSizeVariants[p.sizeVariant].padding};
+  position: relative;
+  font-size: ${(p) => fieldSizeVariants[p.sizeVariant].font};
+  overflow: hidden;
+  color: var(--shades-of-grey-100);
+  font-weight: var(--font-bold);
+  transition: border var(--transition-speed),
+    background-color var(--transition-speed);
+  width: 100%;
+
+  &::placeholder {
+    color: var(--shades-of-grey-80);
+  }
+
+  &:focus,
+  &:active {
+    outline: none;
+    background-color: transparent;
+    border: 2px solid var(--color-orange);
+  }
+
+  ${(p) => getValidationTypeProps(p.validationType)};
+
+  &:disabled {
+    &::placeholder {
+      color: var(--shades-of-grey-60);
+    }
+    background-color: var(--shades-of-grey-40);
+    border: 2px solid var(--shades-of-grey-60);
+  }
+`;
+
+Select.displayName = 'Select';

package/src/components/molecules/Dropdown/Option.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Option: React.FC = ({ children }) => {
+  return <option>{children}</option>;
+};

package/src/components/molecules/Dropdown/index.ts

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

package/src/components/molecules/InfoCard/InfoCard.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { InfoCard } from './InfoCard';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Molecules/InfoCard',
+  component: InfoCard,
+} as ComponentMeta<typeof InfoCard>;
+
+const Template: ComponentStory<typeof InfoCard> = (args) => <InfoCard {...args}>Tag</InfoCard>;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  title: 'Title',
+  body: 'This is body',
+};
+
+export const WithBackground = Template.bind({});
+WithBackground.args = {
+  title: 'Title',
+  body: 'This is body',
+  background: <div style={{ width: '100%', height: '240px', backgroundColor: 'var(--color-ecru)' }}/>,
+};
+
+export const Inversed = Template.bind({});
+Inversed.args = {
+  title: 'Title',
+  body: 'This is body',
+  inverse: true,
+};

package/src/components/molecules/InfoCard/InfoCard.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Card } from '../../atoms/Card';
+import { Hero } from '../../atoms/Typography/Hero';
+import { Body } from '../../atoms/Typography/Body';
+
+export interface InfoCardProps {
+  title: string;
+  body: React.ReactNode;
+  background?: React.ReactNode;
+  inverse?: boolean;
+  size?: 's' | 'm' | 'l' | 'xl' | 'xxl'
+}
+
+export const InfoCard: React.FC<InfoCardProps> = ({
+  title,
+  body,
+  background,
+  inverse = false,
+  size = 'l',
+}) => {
+  return (
+    <Root>
+      {background && <Background>{background}</Background>}
+      <CardBody inverse={inverse}>
+        <Hero size={size}>{title}</Hero>
+        <Body size={size}>{body}</Body>
+      </CardBody>
+    </Root>
+  );
+};
+
+const Root = styled.div`
+  padding: 0;
+  position: relative;
+
+  & > ${Card} > p {
+    margin: 0;
+  }
+`;
+
+Root.displayName = 'Root';
+
+const CardBody = styled(Card)<{ inverse: boolean }>`
+  position: relative;
+
+  & > * {
+    margin: 0;
+    margin-bottom: var(--padding-m);
+    color: ${p => p.inverse ? 'var(--color-white)' : 'var(--color-navy)'};
+  }
+
+  & > p {
+    margin: 0;
+  }
+`;
+
+CardBody.displayName = 'CardBody';
+
+const Background = styled(Card)`
+  border-radius: 24px 24px 0px 0px;
+  position: relative;
+  height: 100%;
+  margin-bottom: -24px;
+  padding: 0;
+  overflow: hidden;
+`;
+
+Background.displayName = 'Background';

package/src/components/molecules/InfoCard/index.tsx

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

package/src/components/molecules/Input/Input.stories.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Input } from './Input';
+
+export default {
+  title: 'Molecules/Input',
+  component: Input,
+} as ComponentMeta<typeof Input>;
+
+const Template: ComponentStory<typeof Input> = (args) => <Input {...args} />;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  placeholder: 'Basic input',
+  disabled: false,
+  size: 'm',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  placeholder: 'Success input',
+  validationType: 'success',
+  disabled: false,
+  size: 'm',
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  placeholder: 'Error input',
+  validationType: 'error',
+  disabled: false,
+  size: 'm',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  placeholder: 'Disabled input',
+  disabled: true,
+  size: 'm',
+};
+
+export const IconLTR = Template.bind({});
+IconLTR.args = {
+  placeholder: 'Icon LTR input',
+  direction: 'ltr',
+  icon: 'user-circle',
+  disabled: false,
+  size: 'm',
+  onIconClick: () => console.log('click'),
+};
+
+export const IconRTL = Template.bind({});
+IconRTL.args = {
+  placeholder: 'Icon RTL input',
+  direction: 'rtl',
+  icon: 'user-circle',
+  disabled: false,
+  size: 'm',
+  onIconClick: () => console.log('click'),
+};
+
+export const DisabledIcon = Template.bind({});
+DisabledIcon.args = {
+  placeholder: 'Disabled with icon',
+  direction: 'ltr',
+  icon: 'user-circle',
+  disabled: true,
+  size: 'm',
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  placeholder: 'Basic input',
+  disabled: false,
+  label: 'Label',
+  direction: 'ltr',
+  icon: 'user-circle',
+  size: 'm',
+};

package/src/components/molecules/Input/Input.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
+import { FieldProps } from 'formik';
+
+import { getValidationTypeProps } from '../../../helpers/validation';
+import { ValidationType } from '../../../types/validation';
+import { IconAddition, IconType } from '../../atoms/Icon';
+import { Label } from '../../atoms/Typography/Label';
+import { FieldLabel, fieldSizeVariants, FieldWrapper } from '../../atoms/Field';
+
+export type InputProps = Omit<
+React.InputHTMLAttributes<HTMLInputElement>,
+'size'
+> &
+FieldProps & {
+  label?: string;
+  validationType?: ValidationType;
+  icon?: IconType;
+  size?: 'xl' | 'l' | 'm' | 's';
+  direction?: 'ltr' | 'rtl';
+  onIconClick?: () => void;
+};
+
+const getDirectionPadding = (
+  direction: InputProps['direction'],
+  padding: string,
+): FlattenSimpleInterpolation => {
+  switch (direction) {
+    case 'ltr':
+      return css`
+        padding-left: ${padding};
+      `;
+    case 'rtl':
+      return css`
+        padding-right: ${padding};
+      `;
+    default:
+      return css``;
+  }
+};
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ icon, label, size = 'm', onIconClick, field, ...props }, ref) => (
+    <FieldWrapper withLabel={Boolean(label)} sizeVariant={size}>
+      {label && (
+        <FieldLabel sizeVariant={size}>
+          <Label text={label} />
+        </FieldLabel>
+      )}
+
+      {props.direction !== 'rtl' && (
+        <IconAddition
+          icon={icon}
+          disabled={props.disabled}
+          direction={props.direction}
+          onClick={onIconClick}
+          size={size}
+        />
+      )}
+
+      <InputElement ref={ref} sizeVariant={size} {...field} {...props} />
+
+      {props.direction === 'rtl' && (
+        <IconAddition
+          icon={icon}
+          disabled={props.disabled}
+          direction={props.direction}
+          onClick={onIconClick}
+        />
+      )}
+    </FieldWrapper>
+  ),
+);
+
+const InputElement = styled.input<
+Pick<InputProps, 'validationType' | 'direction'> & {
+  sizeVariant: 'xl' | 'l' | 'm' | 's';
+}
+>`
+  background-color: var(--color-white);
+  border: 2px solid var(--shades-of-grey-80);
+  border-radius: var(--padding-s);
+  padding: ${(p) => fieldSizeVariants[p.sizeVariant].padding};
+  position: relative;
+  overflow: hidden;
+  font-size: ${(p) => fieldSizeVariants[p.sizeVariant].font};
+  color: var(--shades-of-grey-100);
+  font-weight: var(--font-bold);
+  transition: border var(--transition-speed),
+    background-color var(--transition-speed);
+  width: 100%;
+
+  &::placeholder {
+    color: var(--shades-of-grey-80);
+  }
+
+  &:focus,
+  &:active {
+    outline: none;
+    background-color: transparent;
+    border: 2px solid var(--color-orange);
+  }
+
+  ${(p) => getValidationTypeProps(p.validationType)};
+  ${(p) =>
+    getDirectionPadding(
+      p.direction,
+      fieldSizeVariants[p.sizeVariant].iconPadding,
+    )};
+
+  &:disabled {
+    &::placeholder {
+      color: var(--shades-of-grey-60);
+    }
+    background-color: var(--shades-of-grey-40);
+    border: 2px solid var(--shades-of-grey-60);
+  }
+`;
+
+Input.displayName = 'Input';

package/src/components/molecules/Input/index.ts

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

package/src/components/molecules/Profile/Profile.stories.tsx

@@ -0,0 +1,32 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Profile } from './Profile';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Molecules/Profile',
+  component: Profile,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['s', 'm', 'l', 'xl', 'xxl'],
+      defaultValue: 'm',
+    },
+  },
+} as ComponentMeta<typeof Profile>;
+
+const Template: ComponentStory<typeof Profile> = (args) => (
+  <Profile {...args}>children</Profile>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  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',
+  alt: 'Joanna Simpson',
+  name: 'Joanna Simpson',
+};
+
+export const WithInitials = Template.bind({});
+WithInitials.args = {
+  name: 'Joanna Simpson',
+};

package/src/components/molecules/Profile/Profile.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Profile } from './Profile';
+
+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('<Profile />', () => {
+  it('profile should render', () => {
+    render(<Profile src={SRC} alt="Jane Doe" name="Jane Doe" />);
+  });
+
+  it('profile should match snapshot', () => {
+    const { container } = render(
+      <Profile src={SRC} alt="Jane Doe" name="Jane Doe" />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/molecules/Profile/Profile.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Avatar, Typography } from '../../atoms';
+import { Initials } from '../../atoms/Initials';
+
+const { Hero } = Typography;
+
+type ProfileProps = Partial<React.ComponentProps<typeof Avatar>> & {
+  name: string;
+  children?: React.ReactNode;
+};
+
+const getInitials = (text: string): string =>
+  text
+    .split(' ')
+    .map((part) => part[0])
+    .slice(0, 2)
+    .join('');
+
+export const Profile: React.FC<ProfileProps> = ({
+  src,
+  alt,
+  size,
+  name,
+  children,
+}) => (
+  <Root>
+    {src ? (
+      <Avatar src={src} alt={alt || name} size={size} />
+    ) : (
+      <Initials text={getInitials(name)} size={size} />
+    )}
+
+    <Details>
+      <Name as="span">{name}</Name>
+      {children}
+    </Details>
+  </Root>
+);
+
+const Root = styled.div`
+  display: flex;
+  gap: var(--padding-m);
+  align-items: center;
+`;
+
+Root.displayName = 'Root';
+
+const Name = styled(Hero)`
+  font-size: var(--font-bold);
+`;
+
+Name.displayName = 'Name';
+
+const Details = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+Details.displayName = 'Details';

package/src/components/molecules/Profile/index.ts

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

package/src/components/molecules/Radio/Radio.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Radio, Size } from './Radio';
+
+export default {
+  title: 'Molecules/Radio',
+  component: Radio,
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+    size: {
+      control: 'select',
+      options: Object.keys(Size),
+      defaultValue: Size.xl,
+    },
+  },
+} as ComponentMeta<typeof Radio>;
+
+const Template: ComponentStory<typeof Radio> = (args) => (
+  <>
+    <Radio {...args} name={'radio'} onChange={() => console.log('change')}/>
+  </>
+);
+
+export const Basic = Template.bind({});
+
+export const Controlled = Template.bind({});
+Controlled.args = {
+  checked: false,
+};
+
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  label: 'Label',
+};

package/src/components/molecules/Radio/Radio.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Radio } from './Radio';
+
+describe('<Radio />', () => {
+  it('should render', () => {
+    render(<Radio />);
+  });
+  it('enabled - should match snapshot', () => {
+    const { container } = render(<Radio label={'Label'}/>);
+    expect(container).toMatchSnapshot();
+  });
+  it('enabled + checked - should match snapshot', () => {
+    const { container } = render(<Radio label={'Label'} defaultChecked />);
+    expect(container).toMatchSnapshot();
+  });
+  it('disabled - should match snapshot', () => {
+    const { container } = render(<Radio label={'Label'} disabled={true} />);
+    expect(container).toMatchSnapshot();
+  });
+  it('should change the value', () => {
+    render(<Radio label={'Test label'}/>);
+    const input = screen.getByLabelText(/Test label/);
+    expect(input).not.toBeChecked();
+    fireEvent.click(input);
+    expect(input).toBeChecked();
+  });
+  it('should allow only one radio button to be checked', async () => {
+    const user = userEvent.setup();
+    render(
+      <form>
+        <Radio name="radio" value="first" label="first" defaultChecked />
+        <Radio name="radio" value="second" label="second" />
+      </form>,
+    );
+    expect(screen.getByLabelText(/first/)).toBeChecked();
+    expect(screen.getByLabelText(/second/)).not.toBeChecked();
+    await user.click(screen.getByLabelText(/second/));
+    expect(screen.getByLabelText(/first/)).not.toBeChecked();
+    expect(screen.getByLabelText(/second/)).toBeChecked();
+  });
+});