@veeqo/ui 0.0.1 → 0.0.3

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Badge } from '.';
+import { DropdownIcon } from '../../tempIcons/DropdownIcon';
+
+const meta = {
+  title: 'Components/UI/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Some badge text',
+    iconSlot: <DropdownIcon />,
+  },
+};
+
+export const WithTooltip: Story = {
+  args: {
+    children: 'Some badge text',
+    iconSlot: <DropdownIcon />,
+    tooltip: 'Some tooltip text',
+  },
+};

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Badge } from '.';
+import { CrossIcon } from '../../tempIcons/CrossIcon';
+
+describe('Badge', () => {
+  test('it renders correctly', () => {
+    const { container } = render(
+      <Badge iconSlot={<CrossIcon />} variant="primary">
+        Text
+      </Badge>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+
+import { BadgeProps } from './types';
+import { DefaultBadge, PrimaryBadge, WarningBadge } from './styled';
+import { buildClassnames } from '../../utils/buildClassnames';
+
+const variantMap = {
+  default: DefaultBadge,
+  primary: PrimaryBadge,
+  warning: WarningBadge,
+};
+
+export const Badge = ({
+  variant = 'default',
+  hideBorder = false,
+  iconSlot,
+  tooltip,
+  className,
+  e2eClassName,
+  children,
+}: BadgeProps) => {
+  const BadgeVariant = variantMap[variant];
+
+  return (
+    <Tooltip text={tooltip}>
+      <BadgeVariant className={buildClassnames([className, e2eClassName])} hideBorder={hideBorder}>
+        {iconSlot && iconSlot}
+        {children && <span>{children}</span>}
+      </BadgeVariant>
+    </Tooltip>
+  );
+};

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

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badge it renders correctly 1`] = `
+.c0 {
+  display: inline-block;
+}
+
+.c1 {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.c2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  vertical-align: middle;
+  gap: 4px;
+  padding: 0.35em 0.65em;
+  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: 75%;
+  line-height: 16px;
+  border-radius: 0.75rem;
+  border: 1px solid transparent;
+  cursor: default;
+}
+
+.c2 svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.c3 {
+  border-color: #0079D1;
+  background-color: #D9EBF8;
+  color: #0079D1;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c0"
+    >
+      <div
+        class="c1 c2 c3"
+      >
+        <svg
+          fill="none"
+          height="1.5rem"
+          role="presentation"
+          viewBox="0 0 24 24"
+          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>
+        <span>
+          Text
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Badge/index.ts

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

package/src/components/Badge/styled.ts

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import { BaseContainer } from '../BaseContainer';
+import { text } from '../../theme/modules/text';
+import { colors } from '../../theme/modules/colors';
+import { sizes } from '../../theme/modules/sizes';
+
+type BaseBadgeProps = {
+  hideBorder: boolean;
+};
+
+const BaseBadge = styled(BaseContainer)<BaseBadgeProps>`
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  gap: 4px;
+  padding: 0.35em 0.65em;
+
+  font-family: ${text.bodySmall.fontFamily};
+  font-weight: ${text.bodySmall.fontWeight};
+  font-size: 75%;
+  line-height: 16px;
+
+  border-radius: 0.75rem;
+  border: ${(props) => (props.hideBorder ? 'none' : '1px solid transparent')};
+
+  cursor: default;
+
+  svg {
+    width: ${sizes.base};
+    height: ${sizes.base};
+  }
+`;
+
+export const DefaultBadge = styled(BaseBadge)`
+  background-color: inherit;
+  border-color: ${colors.secondary.blue.base};
+  color: ${colors.secondary.blue.base};
+`;
+
+export const PrimaryBadge = styled(BaseBadge)`
+  border-color: ${colors.secondary.blue.base};
+  background-color: ${colors.secondary.blue.lightest};
+  color: ${colors.secondary.blue.base};
+`;
+
+export const WarningBadge = styled(BaseBadge)`
+  border-color: ${colors.secondary.yellow.base};
+  background-color: ${colors.secondary.yellow.lightest};
+  color: ${colors.secondary.orange.dark};
+`;

package/src/components/Badge/types.ts

@@ -0,0 +1,43 @@
+import React, { ReactNode } from 'react';
+
+export type BadgeVariant = 'default' | 'primary' | 'warning';
+
+/**
+ * Badge properties.
+ */
+export type BadgeProps = {
+  /**
+   * Specifies the Badge variant.
+   */
+  variant?: BadgeVariant;
+
+  /**
+   * Renders an optional icon inside the Badge.
+   */
+  iconSlot?: Omit<ReactNode, string>;
+
+  /**
+   * Specifies tooltip text to display on hover.
+   */
+  tooltip?: string;
+
+  /**
+   * Specifies whether or not to hide the Badge border.
+   */
+  hideBorder?: boolean;
+
+  /**
+   * Specifies an optional class name.
+   */
+  className?: string;
+
+  /**
+   * Specifies an optional class name for E2E testing.
+   */
+  e2eClassName?: string;
+
+  /**
+   * Children.
+   */
+  children: React.ReactNode;
+};

package/src/components/Banner/Banner.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Banner } from '.';
+import { DropdownIcon } from '../../tempIcons/DropdownIcon';
+import { BannerTypes } from './types';
+
+const meta = {
+  title: 'Components/UI/Banner',
+  component: Banner,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Banner>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  argTypes: {
+    type: {
+      options: Object.values(BannerTypes),
+      control: { type: 'select' },
+    },
+  },
+  args: {
+    type: 'info',
+    text: 'Banner main content',
+    icon: <DropdownIcon />,
+    onClose: () => alert('Close'),
+  },
+};

package/src/components/Banner/Banner.test.tsx

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

package/src/components/Banner/Banner.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { colors } from '../../theme/modules/colors';
+
+import { BannerTypes, BannerProps } from './types';
+
+import { Pill, Text, Row, Col, HeaderCol } from './styled';
+import { Button } from '../Button';
+import { CrossIcon } from '../../tempIcons/CrossIcon';
+import { sizes } from '../../theme/modules/sizes';
+
+const accentColors = {
+  [BannerTypes.help]: colors.secondary.blue.base,
+  [BannerTypes.info]: colors.neutral.ink.base,
+  [BannerTypes.error]: colors.secondary.red.base,
+  [BannerTypes.success]: colors.secondary.green.base,
+};
+
+/**
+ * The `Banner` component was previously called `Alert` (and similarly `Pill`).
+ */
+export const Banner = ({
+  type = BannerTypes.info,
+  text,
+  icon,
+  onClose,
+  className,
+  header,
+}: BannerProps) => {
+  const accentColor = accentColors[type as BannerTypes];
+
+  return (
+    <Pill accentColor={accentColor} className={className}>
+      <Row>
+        {icon && <Col style={{ marginRight: sizes.md }}>{icon}</Col>}
+        <HeaderCol>{header || <Text variant="headingSmall">{text}</Text>}</HeaderCol>
+        <Col>
+          {onClose && (
+            <Button variant="flat" aria-label="Close" icon={<CrossIcon />} onClick={onClose} />
+          )}
+        </Col>
+      </Row>
+    </Pill>
+  );
+};

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

@@ -0,0 +1,124 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner it renders correctly 1`] = `
+.c5 {
+  box-sizing: border-box;
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  line-height: 16px;
+  color: #37424d;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  color: #37424D;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-letter-spacing: -0.011rem;
+  -moz-letter-spacing: -0.011rem;
+  -ms-letter-spacing: -0.011rem;
+  letter-spacing: -0.011rem;
+}
+
+.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;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+  padding: 20px 24px 24px 24px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 3px rgba(55,66,77,0.15),inset 4px 0px 0px #37424D;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.c3 svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.c4 {
+  -webkit-box-flex: 2;
+  -webkit-flex-grow: 2;
+  -ms-flex-positive: 2;
+  flex-grow: 2;
+  margin-right: 12px;
+}
+
+.c6 {
+  position: relative;
+  top: -2px;
+}
+
+<div>
+  <div
+    class="c0 c1"
+  >
+    <div
+      class="c0 c2"
+    >
+      <div
+        class="c0 c3 c4"
+      >
+        <h3
+          class="c5 c6"
+        >
+          Banner content
+        </h3>
+      </div>
+      <div
+        class="c0 c3"
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/components/Banner/index.ts

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

package/src/components/Banner/styled.ts

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+
+import { Text } from '../Text';
+import { BaseContainer } from '../BaseContainer';
+import { PillProps } from './types';
+import { sizes } from '../../theme/modules/sizes';
+
+const Pill = styled(BaseContainer)<PillProps>`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  padding: 20px 24px 24px 24px;
+  border-radius: 4px;
+  ${({ accentColor }) =>
+    accentColor &&
+    `
+    box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${accentColor};
+  `}
+`;
+
+const Row = styled(BaseContainer)`
+  display: flex;
+  flex-direction: row;
+`;
+
+const Col = styled(BaseContainer)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+
+  svg {
+    width: ${sizes.md};
+    height: ${sizes.md};
+  }
+`;
+
+const HeaderCol = styled(Col)`
+  flex-grow: 2;
+  margin-right: 12px;
+`;
+
+const StyledText = styled(Text)`
+  position: relative;
+  top: -2px;
+`;
+
+export { Pill, StyledText as Text, Row, Col, HeaderCol };

package/src/components/Banner/types.ts

@@ -0,0 +1,23 @@
+import { ReactNode, ReactEventHandler } from 'react';
+
+export enum BannerTypes {
+  help = 'help',
+  info = 'info',
+  error = 'error',
+  success = 'success',
+}
+
+export type BannerProps = {
+  type?: keyof typeof BannerTypes | string;
+  text?: string;
+  icon?: Omit<ReactNode, string>;
+  onClose?: ReactEventHandler;
+  className?: string;
+  header?: ReactNode;
+};
+
+export type PillProps = {
+  children?: ReactNode;
+  className?: string;
+  accentColor?: string;
+};

package/src/components/BaseContainer/BaseContainer.test.tsx

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

package/src/components/BaseContainer/BaseContainer.ts

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+export const BaseContainer = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+`;

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Container it renders correctly 1`] = `
+.c0 {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    Container content
+  </div>
+</div>
+`;

package/src/components/BaseContainer/index.ts

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

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumbs } from './Breadcrumbs';
+
+const meta = {
+  title: 'Components/UI/Breadcrumbs',
+  component: Breadcrumbs,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          background: '#0079D1',
+          color: 'white',
+          padding: '0.875rem 1.5rem',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Breadcrumbs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const crumbs = [
+  {
+    pathname: '/',
+    title: 'Home',
+  },
+  {
+    pathname: '/settings',
+    title: 'Settings',
+  },
+];
+
+export const Default: Story = {
+  args: {
+    items: crumbs,
+  },
+};

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Breadcrumbs } from '.';
+
+describe('Breadcrumbs', () => {
+  test('it renders correctly', () => {
+    const crumbs = [
+      {
+        pathname: '/',
+        title: 'Home',
+      },
+      {
+        pathname: '/settings',
+        title: 'Settings',
+      },
+    ];
+
+    const { container } = render(<Breadcrumbs items={crumbs} />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { BreadcrumbsSC } from './components/styled';
+import { BreadcrumbsProps, DefaultLinkProps } from './types';
+import { RightArrowIcon } from '../../tempIcons/RightArrowIcon';
+import { sizes } from '../../theme/modules/sizes';
+import { Breadcrumb } from './components/Breadcrumb';
+
+const DefaultSeparator = () => (
+  <RightArrowIcon className="separator" width={sizes.base} height={sizes.base} />
+);
+
+const DefaultLink = ({ children, href }: DefaultLinkProps) => <a href={href}>{children}</a>;
+
+export const Breadcrumbs = ({
+  items,
+  Separator = <DefaultSeparator />,
+  LinkComponent = DefaultLink,
+}: BreadcrumbsProps) => (
+  <BreadcrumbsSC className="breadcrumbs">
+    {items.map((item, i) => (
+      <Breadcrumb
+        key={item.title}
+        title={item.title}
+        href={item.pathname}
+        LinkComponent={LinkComponent}
+      >
+        {items.length !== i + 1 && Separator}
+      </Breadcrumb>
+    ))}
+  </BreadcrumbsSC>
+);