@veeqo/ui 0.0.1 → 0.0.4

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

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breadcrumbs it renders correctly 1`] = `
+.c0 {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  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;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.c1 {
+  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;
+}
+
+.c1 .separator {
+  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;
+  padding: 0px 0.4rem;
+}
+
+.c1 a {
+  color: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-transform: capitalize;
+}
+
+<div>
+  <ul
+    class="c0 breadcrumbs"
+  >
+    <li
+      class="c1 breadcrumb"
+    >
+      <a
+        href="/"
+      >
+        Home
+      </a>
+      <svg
+        class="separator"
+        fill="none"
+        height="1rem"
+        viewBox="0 0 16 16"
+        width="1rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M5.99994 11.06L9.05327 8L5.99994 4.94L6.93994 4L10.9399 8L6.93994 12L5.99994 11.06Z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </li>
+    <li
+      class="c1 breadcrumb"
+    >
+      <a
+        href="/settings"
+      >
+        Settings
+      </a>
+    </li>
+  </ul>
+</div>
+`;

package/src/components/Breadcrumbs/components/Breadcrumb.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BreadcrumbProps } from '../types';
+import { BreadcrumbSC } from './styled';
+
+export const Breadcrumb = ({ children, title, LinkComponent, href }: BreadcrumbProps) => {
+  if (LinkComponent) {
+    return (
+      <BreadcrumbSC className="breadcrumb">
+        <LinkComponent href={href}>{title}</LinkComponent>
+        {children}
+      </BreadcrumbSC>
+    );
+  }
+  return (
+    <BreadcrumbSC className="breadcrumb">
+      {title}
+      {children}
+    </BreadcrumbSC>
+  );
+};

package/src/components/Breadcrumbs/components/styled.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import { text } from '../../../theme/modules/text';
+
+export const BreadcrumbsSC = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  font-family: ${text.body.fontFamily};
+  font-weight: ${text.body.fontWeight};
+  font-size: ${text.body.fontSize};
+  line-height: ${text.body.lineHeight};
+`;
+
+export const BreadcrumbSC = styled.li`
+  display: flex;
+  align-items: center;
+
+  .separator {
+    display: flex;
+    align-items: center;
+    padding: 0px 0.4rem;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    text-transform: capitalize;
+  }
+`;

package/src/components/Breadcrumbs/index.ts

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

package/src/components/Breadcrumbs/types.ts

@@ -0,0 +1,23 @@
+type Item = {
+  pathname: string;
+  title: string;
+};
+
+type LinkComponentProps = false | React.ComponentType<any>;
+
+export interface BreadcrumbsProps {
+  items: Item[];
+  Separator?: string | React.ReactNode;
+  LinkComponent?: LinkComponentProps;
+}
+export interface BreadcrumbProps {
+  title: string;
+  href: string;
+  LinkComponent?: LinkComponentProps;
+  children?: React.ReactNode;
+}
+
+export interface DefaultLinkProps {
+  children: React.ReactNode;
+  href: string;
+}

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

@@ -0,0 +1,111 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '.';
+
+const meta = {
+  title: 'Components/Common/Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const argTypes = {
+  loading: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  variant: {
+    options: [
+      'default',
+      'destructive',
+      'primary',
+      'primaryDestructive',
+      'flat',
+      'link',
+      'unstyled',
+    ],
+    control: {
+      type: 'select',
+    },
+  },
+  size: {
+    options: ['sm', 'base'],
+    control: {
+      type: 'select',
+    },
+  },
+};
+
+export const Standard: Story = {
+  argTypes,
+  args: {
+    size: 'base',
+    variant: 'default',
+    children: 'Click me!',
+  },
+};
+
+const testIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="presentation">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.22222 2H19.7778C21 2 22 3 22 4.22222V19.7778C22 21 21 22 19.7778 22H4.22222C3 22 2 21 2 19.7778V4.22222C2 3 3 2 4.22222 2ZM6.44444 17.5556H8.66667V9.77778H6.44444V17.5556ZM13.1111 17.5556H10.8889V6.44444H13.1111V17.5556ZM15.3333 17.5556H17.5556V13.1111H15.3333V17.5556Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+);
+
+export const LinkButton: Story = {
+  argTypes,
+  args: {
+    size: 'sm',
+    variant: 'link',
+    children: 'Click me!',
+    icon: testIcon(),
+  },
+};
+
+export const IconButton: Story = {
+  argTypes,
+  args: {
+    size: 'base',
+    variant: 'default',
+    icon: testIcon(),
+  },
+};
+
+export const TextIconButton: Story = {
+  argTypes,
+  args: {
+    size: 'base',
+    variant: 'default',
+    children: 'Click me!',
+    icon: testIcon(),
+  },
+};
+
+export const DropdownButton: Story = {
+  argTypes,
+  args: {
+    size: 'base',
+    variant: 'default',
+    children: 'Click me!',
+    icon: testIcon(),
+    dropdown: true,
+  },
+};
+
+export const LoadingButton: Story = {
+  argTypes,
+  args: {
+    size: 'base',
+    variant: 'default',
+    children: 'Click me!',
+    icon: testIcon(),
+    loading: true,
+  },
+};

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { Button } from '.';
+
+const testIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    role="presentation"
+    width={24}
+    height={24}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4.22222 2H19.7778C21 2 22 3 22 4.22222V19.7778C22 21 21 22 19.7778 22H4.22222C3 22 2 21 2 19.7778V4.22222C2 3 3 2 4.22222 2ZM6.44444 17.5556H8.66667V9.77778H6.44444V17.5556ZM13.1111 17.5556H10.8889V6.44444H13.1111V17.5556ZM15.3333 17.5556H17.5556V13.1111H15.3333V17.5556Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+describe('Button', () => {
+  test('it renders correctly', async () => {
+    const { container } = render(<Button>Default button</Button>);
+
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders primary variant correctly', () => {
+    const { container } = render(<Button variant="primary">Primary button</Button>);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders destructive variant correctly', () => {
+    const { container } = render(<Button variant="destructive">Destructive button</Button>);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders primary destructive variant correctly', () => {
+    const { container } = render(
+      <Button variant="primaryDestructive">Primary destructive button</Button>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders flat variant correctly', () => {
+    const { container } = render(<Button variant="flat">Flat button</Button>);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders loading state correctly', () => {
+    const { container } = render(<Button loading>Loading</Button>);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders icon with text correctly', () => {
+    const { container } = render(<Button icon={testIcon()}>Delete</Button>);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders icon-only correctly', () => {
+    const { container } = render(<Button icon={testIcon()} />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders dropdown icon correctly', () => {
+    const { container } = render(<Button dropdown>Dropdown button</Button>);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders small size correctly', () => {
+    const { container } = render(<Button size="sm">Small button</Button>);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders small icon-only correctly', () => {
+    const { container } = render(<Button size="sm" icon={testIcon()} />);
+
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders small icon-only with dropdown correctly', () => {
+    const { container } = render(<Button size="sm" icon={testIcon()} dropdown />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,82 @@
+import React, { forwardRef } from 'react';
+
+import { ButtonProps } from './types';
+import { Loader } from '../Loader';
+
+import {
+  DefaultButton,
+  DefaultDestructiveButton,
+  PrimaryButton,
+  PrimaryDestructiveButton,
+  FlatButton,
+  LinkButton,
+  UnstyledButton,
+  LoadingWrapper,
+  MainContent,
+} from './components/styled';
+import { DropdownIcon } from '../../tempIcons/DropdownIcon';
+
+const variantMap = {
+  default: DefaultButton,
+  primary: PrimaryButton,
+  destructive: DefaultDestructiveButton,
+  primaryDestructive: PrimaryDestructiveButton,
+  flat: FlatButton,
+  link: LinkButton,
+  unstyled: UnstyledButton,
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      children,
+      icon,
+      variant = 'default',
+      size = 'base',
+      dropdown = false,
+      loading = false,
+      ...otherProps
+    }: ButtonProps,
+    ref,
+  ) => {
+    if (variant === 'unstyled') {
+      return (
+        <UnstyledButton ref={ref} className={className} {...otherProps}>
+          {children}
+        </UnstyledButton>
+      );
+    }
+
+    const VariantButton = variantMap[variant];
+    return (
+      <VariantButton
+        ref={ref}
+        className={className}
+        size={size}
+        hasText={!!children}
+        hasIcon={!!icon}
+        hasDropdown={dropdown}
+        {...otherProps}
+      >
+        {(children || icon) && (
+          <MainContent
+            loading={loading}
+            hasText={!!children}
+            size={children || size === 'sm' ? 'base' : 'md'}
+          >
+            {icon && icon}
+            {children && <span>{children}</span>}
+            {dropdown && <DropdownIcon />}
+          </MainContent>
+        )}
+
+        {loading && (
+          <LoadingWrapper>
+            <Loader />
+          </LoadingWrapper>
+        )}
+      </VariantButton>
+    );
+  },
+);

package/src/components/Button/Docs.mdx

@@ -0,0 +1,19 @@
+import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
+import { Stack } from '../../components';
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Buttons are used when the use needs to perform an action - such as "add" or "delete".
+
+If an action navigates to another area of the product, you should use the `Common/Anchor` component instead.
+
+<Primary />
+
+<Controls />
+
+## Accessiblity
+
+Icon Button's rely on you passing in an `icon`, make sure to either add `role="presentation"` to the icon before passing it in, or use an `aria-label` if provides meaning.