@integrigo/integrigo-ui 1.6.8 → 1.6.10

package/src/components/atoms/Initials/Initials.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Color } from '../../../styles';
+
+type InitialsProps = {
+  text: string;
+  size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
+};
+
+const sizeVariant = {
+  s: 20,
+  m: 32,
+  l: 53,
+  xl: 64,
+  xxl: 94,
+};
+
+const colorVariant = [Color.Green, Color.Navy, Color.Orange, Color.Grey60];
+
+export const Initials: React.FC<InitialsProps> = ({ text, size = 'm' }) => (
+  <Root size={sizeVariant[size]} color={colorVariant[text.charCodeAt(0) % 4]}>
+    {text}
+  </Root>
+);
+
+const Root = styled.div<{ size: number, color: string }>`
+  background-color: ${p => p.color};
+  color: var(--color-white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+  width: ${(p) => p.size}px;
+  height: ${(p) => p.size}px;
+  border-radius: ${(p) => p.size / 2}px;
+`;

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

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Nav } from './Nav';
+
+export default {
+  title: 'Atoms/Nav',
+  component: Nav,
+} as ComponentMeta<typeof Nav>;
+
+const Template: ComponentStory<typeof Nav> = (args) => <Nav {...args}>The Nav text</Nav>;
+
+export const Basic = Template.bind({});
+Basic.args = {};
+
+export const Active = Template.bind({});
+Active.args = {
+  active: true,
+};

package/src/components/atoms/Nav/Nav.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+export interface NavProps {
+  active?: boolean;
+}
+
+export const Nav = styled.nav<NavProps>`
+  font-size: var(--font-size-l);
+  font-weight: ${p => p.active ? 'var(--font-bold)' : 'var(--font-medium)'};
+  cursor: pointer;
+  white-space: nowrap;
+  width: min-content;
+  transition: color var(--transition-speed);
+  padding: var(--padding-s) var(--padding-l);
+
+  &:hover {
+    color: ${p => p.active ? 'auto' : 'var(--color-green)' };
+  }
+`;
+
+Nav.displayName = 'Nav';

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

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

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

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

package/src/components/atoms/Pill/Pill.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export interface PillProps {
+  variant: 'orange' | 'green' | 'red'
+}
+
+export const Pill = styled.div<PillProps>`
+  background-color: ${p => `var(--color-${p.variant})`};
+  border-radius: var(--padding-l);
+  color: var(--color-white);
+  font-weight: var(--font-bold);
+  font-size: var(--font-size-m);
+  padding: var(--padding-s) var(--padding-xxl);
+  width: min-content;
+`;
+
+Pill.displayName = 'Pill';

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Spinner } from './Spinner';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Atoms/Spinner',
+  component: Spinner,
+} as ComponentMeta<typeof Spinner>;
+
+const Template: ComponentStory<typeof Spinner> = () => <Spinner />;
+
+export const Basic = Template.bind({});
+Basic.args = {
+  size: {
+    width: 20,
+    height: 20,
+  },
+};

package/src/components/atoms/Spinner/Spinner.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { Icon } from '../Icon';
+
+export type SpinnerProps = Omit<React.ComponentProps<typeof Icon>, 'type'>;
+
+export const Spinner: React.FC<SpinnerProps> = ({ ...props }, ref) => (
+  <SpinnerIcon type="process" ref={ref} {...props} />
+);
+
+const rotate = keyframes`
+  100% {
+    transform: rotate(-360deg);
+  }
+`;
+
+const SpinnerIcon = styled(Icon)`
+  animation: ${rotate} 1s linear infinite;
+  will-change: transform;
+`;

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

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

package/src/components/atoms/Typography/Body.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Body } from './Body';
+
+export default {
+  title: 'Atoms/Typography/Body',
+  component: Body,
+} as ComponentMeta<typeof Body>;
+
+const Template: ComponentStory<typeof Body> = (args) => <Body {...args}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra urna non purus convallis dignissim. Sed lobortis sem molestie est euismod, euismod aliquet dolor ullamcorper. Vivamus nisl metus, ultricies ac pharetra vel, faucibus vel lacus. Vestibulum eget nisi laoreet, dignissim urna sit amet, pretium arcu. Sed non diam dictum, sollicitudin orci et, ultricies nunc. Suspendisse ultrices mi tincidunt efficitur tristique. Vivamus fringilla condimentum tempus. Aliquam varius quam sit amet nunc iaculis, finibus dictum leo tincidunt.</Body>;
+
+export const XXL = Template.bind({});
+XXL.args = {
+  size: 'xxl',
+};
+
+export const XL = Template.bind({});
+XL.args = {
+  size: 'xl',
+};
+
+export const L = Template.bind({});
+L.args = {
+  size: 'l',
+};
+
+export const M = Template.bind({});
+M.args = {
+  size: 'm',
+};
+
+export const S = Template.bind({});
+S.args = {
+  size: 's',
+};

package/src/components/atoms/Typography/Body.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+export interface BodyProps {
+  size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
+  align?: 'left' | 'right' | 'center';
+  bold?: boolean
+}
+
+export const Body = styled.p<BodyProps>`
+  font-size: ${(p) => `var(--font-size-${p.size || 'm'})`};
+  line-height: ${(p) => `calc(1.5*var(--font-size-${p.size || 'm'}))`};
+  text-align: ${(p) => p.align || 'left'};
+  font-weight: ${(p) => p.bold ? 'var(---font-bold)' : 'var(--font-thin)'};
+`;
+
+Body.displayName = 'Body';

package/src/components/atoms/Typography/Hero.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Hero } from './Hero';
+
+export default {
+  title: 'Atoms/Typography/Hero',
+  component: Hero,
+} as ComponentMeta<typeof Hero>;
+
+const Template: ComponentStory<typeof Hero> = (args) => <Hero {...args}>Title</Hero>;
+
+export const XXL = Template.bind({});
+XXL.args = {
+  size: 'xxl',
+};
+
+export const XL = Template.bind({});
+XL.args = {
+  size: 'xl',
+};
+
+export const L = Template.bind({});
+L.args = {
+  size: 'l',
+};
+
+export const M = Template.bind({});
+M.args = {
+  size: 'm',
+};
+
+export const S = Template.bind({});
+S.args = {
+  size: 's',
+};

package/src/components/atoms/Typography/Hero.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface HeroProps {
+  size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
+}
+
+const SIZE_MAP: Record<string, 'h1' | 'h2' | 'h3' | 'h4' | 'h5'> = {
+  s: 'h5',
+  m: 'h4',
+  l: 'h3',
+  xl: 'h2',
+  xxl: 'h1',
+};
+
+export const Hero: React.FCS<HeroProps> = ({
+  size = 'l',
+  className,
+  children,
+}) => (
+  <Header as={SIZE_MAP[size]} className={className}>
+    {children}
+  </Header>
+);
+
+const Header = styled.h1``;
+Header.displayName = 'Header';

package/src/components/atoms/Typography/Label.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Label } from './Label';
+
+export default {
+  title: 'Atoms/Typography/Label',
+  component: Label,
+} as ComponentMeta<typeof Label>;
+
+const Template: ComponentStory<typeof Label> = (args) => <Label {...args}>The label text</Label>;
+
+export const XXL = Template.bind({});
+XXL.args = {
+  size: 'xxl',
+};
+
+export const XL = Template.bind({});
+XL.args = {
+  size: 'xl',
+};
+
+export const L = Template.bind({});
+L.args = {
+  size: 'l',
+};
+
+export const M = Template.bind({});
+M.args = {
+  size: 'm',
+};
+
+export const S = Template.bind({});
+S.args = {
+  size: 's',
+};

package/src/components/atoms/Typography/Label.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface LabelProps {
+  text: string;
+  size?: 's' | 'm' | 'l' | 'xl' | 'xxl';
+  children?: React.ReactNode;
+}
+
+const gapSizeVariant = {
+  xxl: '12px',
+  xl: '10px',
+  l: '4px',
+  m: '4px',
+  s: '2px',
+};
+
+export const Label: React.FC<LabelProps> = ({
+  text,
+  size,
+  children,
+}) => {
+  return (
+    <LabelContainer sizeVariant={size}>
+      {children}
+      <LabelText size={size}>
+        {text}
+      </LabelText>
+    </LabelContainer>
+  );
+};
+
+const LabelContainer = styled.label<{ sizeVariant: LabelProps['size'] }>`
+  display: flex;
+  align-items: center;
+  gap: ${(p) => gapSizeVariant[p.sizeVariant || 'm']};
+`;
+
+const LabelText = styled.span<Pick<LabelProps, 'size'>>`
+  font-size: ${(p) => `var(--font-size-${p.size || 'm'})`};
+  font-weight: var(--font-medium);
+  transition: color var(--transition-speed);
+`;

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

@@ -0,0 +1,5 @@
+import { Body } from './Body';
+import { Hero } from './Hero';
+import { Label } from './Label';
+
+export const Typography = { Body, Hero, Label };

package/src/components/atoms/index.ts

@@ -0,0 +1,11 @@
+export { Alert } from './Alert';
+export { Avatar } from './Avatar';
+export { Card } from './Card';
+export { Divider } from './Divider';
+export { Icon } from './Icon';
+export { Pill } from './Pill';
+export { Typography } from './Typography';
+export { Nav } from './Nav';
+export { Spinner } from './Spinner';
+export { Chip } from './Chip';
+export { Dot } from './Dot';

package/src/components/molecules/Button/BasicButton.tsx

@@ -0,0 +1,137 @@
+import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
+
+export const sizeVariants = {
+  xl: {
+    iconPadding: '48px',
+    padding: '16px 24px',
+    ghostPadding: '32px',
+    font: '20px',
+  },
+  l: {
+    iconPadding: '40px',
+    padding: '12px 18px',
+    ghostPadding: '24px',
+    font: '16px',
+  },
+  m: {
+    iconPadding: '28px',
+    padding: '10px 16px',
+    ghostPadding: '20px',
+    font: '12px',
+  },
+  s: {
+    iconPadding: '16px',
+    padding: '6px 12px',
+    ghostPadding: '12px',
+    font: '8px',
+  },
+};
+
+export const getDirectionPadding = (
+  direction?: 'rtl' | 'ltr',
+  ghost?: boolean,
+  size: 'xl' | 'l' | 'm' | 's' = 'm',
+): FlattenSimpleInterpolation => {
+  const padding = sizeVariants[size].iconPadding;
+  const ghostPadding = sizeVariants[size].ghostPadding;
+
+  switch (direction) {
+    case 'ltr':
+      return css`
+        ${!ghost && `padding-right: ${padding};`}
+        padding-left: ${ghost ? ghostPadding : padding};
+      `;
+    case 'rtl':
+      return css`
+        ${!ghost && `padding-left: ${padding};`}
+        padding-right: ${ghost ? ghostPadding : padding};
+      `;
+    default:
+      return css``;
+  }
+};
+
+export const BasicButton = styled.div<{
+  direction?: 'ltr' | 'rtl';
+  ghost?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  sizeVariant: 'xl' | 'l' | 'm' | 's';
+}>`
+  background-color: transparent;
+  border: none;
+  border-radius: var(--padding-xl);
+  color: ${(p) => (p.loading ? 'transparent' : 'var(--shades-of-grey-100)')};
+  padding: ${(p) => sizeVariants[p.sizeVariant].padding};
+  font-weight: var(--font-bold);
+  font-size: ${(p) => sizeVariants[p.sizeVariant].font};
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  transition: color var(--transition-speed),
+    background-color var(--transition-speed);
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: calc(100% - 4px);
+    height: calc(100% - 4px);
+    background-color: transparent;
+    border: 2px solid var(--color-orange);
+    border-radius: var(--padding-xl);
+    z-index: 1;
+    transition: background-color var(--transition-speed),
+      opacity var(--transition-speed), border-color var(--transition-speed);
+  }
+
+  &:active {
+    color: var(--color-orange);
+    outline: none;
+  }
+
+  ${(p) => getDirectionPadding(p.direction, p.ghost, p.sizeVariant)};
+
+  &:hover {
+    color: var(--color-orange);
+  }
+
+  &:hover,
+  &:hover:before {
+    opacity: 0.8;
+    border-color: var(--color-orange);
+  }
+
+  &:hover:active,
+  &:hover:active:before {
+    opacity: 0.6;
+    border-color: var(--color-orange);
+  }
+
+  ${(p) =>
+    p.disabled &&
+    `
+    color: ${p.loading ? 'transparent' : 'var(--shades-of-grey-60)'};
+    border-color: var(--shades-of-grey-60);
+    background-color: var(--shades-of-grey-40);
+
+    &::before {
+      border-color: var(--shades-of-grey-60);
+    }
+
+    &:hover,
+    &:active,
+    &:hover:active,
+    &:hover:before,
+    &:hover:active:before {
+      color: ${p.loading ? 'transparent' : 'var(--shades-of-grey-60)'};
+      cursor: auto;
+      opacity: 1;
+      border-color: var(--shades-of-grey-60);
+    }
+  `}
+`;
+
+BasicButton.displayName = 'BasicButton';

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Button } from './Button';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Atoms/Button',
+  component: Button,
+  argTypes: {
+    loading: {
+      control: 'boolean',
+      defaultValue: false,
+    },
+  },
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = ({ ...args }) => (
+  <Button {...args}>Button</Button>
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  disabled: false,
+  size: 'm',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  disabled: false,
+  size: 'm',
+};
+
+export const Ghost = Template.bind({});
+Ghost.args = {
+  ghost: true,
+  disabled: false,
+  size: 'm',
+};
+
+export const IconLTR = Template.bind({});
+IconLTR.args = {
+  primary: true,
+  direction: 'ltr',
+  icon: 'user-circle',
+  disabled: false,
+  size: 'm',
+};
+
+export const IconRTL = Template.bind({});
+IconRTL.args = {
+  primary: true,
+  direction: 'rtl',
+  icon: 'user-circle',
+  disabled: false,
+  size: 'm',
+};
+
+export const SecondaryWithIcon = Template.bind({});
+SecondaryWithIcon.args = {
+  icon: 'user-circle',
+  disabled: false,
+  size: 'm',
+};
+
+export const DisabledGhostWithIcon = Template.bind({});
+DisabledGhostWithIcon.args = {
+  ghost: true,
+  disabled: false,
+  direction: 'ltr',
+  icon: 'user-circle',
+  size: 'm',
+};

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from './Button';
+
+describe('<Button />', () => {
+  it('primary button should render', () => {
+    render(<Button primary >Button</Button>);
+  });
+
+  it('secondary button should render', () => {
+    render(<Button>Button</Button>);
+  });
+
+  it('ghost button should render', () => {
+    render(<Button ghost>Button</Button>);
+  });
+
+  it('primary - should match snapshot', () => {
+    const { container } = render(<Button primary>Button</Button>);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('primary + disabled - should match snapshot', () => {
+    const { container } = render(<Button primary disabled>Button</Button>);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('primary + loading - should match snapshot', () => {
+    const { container } = render(<Button primary loading>Button</Button>);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('secondary - should match snapshot', () => {
+    const { container } = render(<Button>Button</Button>);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('secondary + disabled - should match snapshot', () => {
+    const { container } = render(<Button disabled>Button</Button>);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('secondary + loading - should match snapshot', () => {
+    const { container } = render(<Button loading>Button</Button>);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('ghost - should match snapshot', () => {
+    const { container } = render(<Button>Button</Button>);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('ghost + disabled - should match snapshot', () => {
+    const { container } = render(<Button ghost disabled>Button</Button>);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('ghost + loading - should match snapshot', () => {
+    const { container } = render(<Button ghost loading>Button</Button>);
+    expect(container).toMatchSnapshot();
+  });
+});