@veeqo/ui 0.0.4 → 0.0.6

package/src/components/Stepper/styled.ts

@@ -1,83 +0,0 @@
-import styled from 'styled-components';
-import { ComponentSize } from '../types';
-
-export const Container = styled.div<{ size?: ComponentSize }>`
-  box-sizing: border-box;
-  display: inline-flex;
-  flex-direction: column;
-  height: ${({ size }) => (size === 'sm' ? '32px' : '40px')};
-  border-radius: 4px;
-
-  ${({ size }) =>
-    size === 'sm'
-      ? `svg { width: 14px !important; height: 14px !important; };
-
-      > button { padding: 0 6px };`
-      : ''};
-
-  & > *:first-child {
-    border-bottom-width: 0;
-  }
-
-  & > *:active,
-  & > *:focus {
-    border-width: 1px;
-  }
-
-  & > *:active + *,
-  & > *:focus + * {
-    border-top-width: 0;
-  }
-
-  & > *:focus,
-  & > *:active {
-    z-index: 5;
-  }
-
-  & > *:first-child {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-  }
-
-  & > *:last-child {
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-  }
-`;
-
-export const StepButton = styled.button`
-  appearance: none;
-  flex: 1;
-  border: 0;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 0 8px;
-  background-color: white;
-
-  border: 1px solid #959fa8;
-
-  &:hover {
-    cursor: pointer;
-    background-color: #fafafb;
-  }
-
-  &:active:not(:disabled) {
-    background-color: #fafafb;
-    border-color: #0079d1;
-    box-shadow: 0 0 0 4px #80bce8;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 4px #80bce8;
-    outline: 0;
-  }
-
-  &:disabled {
-    background-color: #f2f3f5;
-    border-color: #959fa8;
-    color: #637381;
-    cursor: not-allowed;
-  }
-`;

package/src/components/Tag/Tag.stories.tsx

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Tag } from './Tag';
-import { theme } from '../../theme';
-
-const meta = {
-  title: 'Components/Common/Tag',
-  component: Tag,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Tag>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const argTypes = {
-  backgroundColor: {
-    control: {
-      type: 'color',
-    },
-  },
-
-  color: {
-    control: {
-      type: 'color',
-    },
-  },
-};
-
-export const Default: Story = {
-  argTypes,
-  args: {
-    children: 'Warehouse: London',
-  },
-};
-
-export const WithCustomColors: Story = {
-  argTypes,
-  args: {
-    children: 'Warehouse: London',
-    backgroundColor: theme.colors.brand.blue.darkest,
-    color: 'white',
-  },
-};

package/src/components/Tag/Tag.test.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { colors } from '../../theme/modules/colors';
-import { Tag } from './Tag';
-
-describe('Tag', () => {
-  test('it renders correctly', () => {
-    const { container } = render(<Tag>Tag content</Tag>);
-    expect(container).toMatchSnapshot();
-  });
-
-  test('it renders correctly with background and color props', () => {
-    const { container } = render(
-      <Tag backgroundColor={colors.secondary.blue.base} color={colors.neutral.grey.light} />,
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/Tag/Tag.ts

@@ -1,23 +0,0 @@
-import styled from 'styled-components';
-
-import { colors } from '../../theme/modules/colors';
-import { BaseContainer } from '../BaseContainer';
-
-export interface TagProps {
-  backgroundColor?: string;
-  color?: string;
-}
-
-export const Tag = styled(BaseContainer)<TagProps>`
-  display: inline-flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px;
-  padding: 4px 8px;
-
-  ${({ backgroundColor, color }) => `
-    color: ${color ?? colors.neutral.ink.base};
-    background-color: ${backgroundColor ?? colors.neutral.grey.base};
-  `}
-`;

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

@@ -1,78 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tag it renders correctly 1`] = `
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-radius: 4px;
-  padding: 4px 8px;
-  color: #37424D;
-  background-color: #DFE3E8;
-}
-
-<div>
-  <div
-    class="c0 c1"
-  >
-    Tag content
-  </div>
-</div>
-`;
-
-exports[`Tag it renders correctly with background and color props 1`] = `
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-
-.c1 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-radius: 4px;
-  padding: 4px 8px;
-  color: #F2F3F5;
-  background-color: #0079D1;
-}
-
-<div>
-  <div
-    class="c0 c1"
-    color="#F2F3F5"
-  />
-</div>
-`;

package/src/components/Text/Docs.mdx

@@ -1,112 +0,0 @@
-import { Meta, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
-import { Stack } from '../../components';
-import { Text } from './';
-import * as TextStories from './Text.stories';
-
-<Meta of={TextStories} />
-
-# Text
-
-For more information and examples of all text styles, see the [Typography](/?path=/story/design-typography--page) design guidelines.
-
-<Primary />
-
-<Controls />
-
-## Usage
-
-```jsx
-import { VeeqoCommon } from '@veeqo/components';
-const { Text } = VeeqoCommon;
-
-<Text variant="bodyBold">This is the bodyBold text variant</Text>;
-```
-
-### Accessiblity
-
-Headings are now using HTML heading tags.
-
-New Defaults:
-
-<table>
-  <tr>
-    <td>Variant</td>
-    <td>HTML Attribute</td>
-  </tr>
-  <tr>
-    <td>`headingXXL`</td>
-    <td>`h1`</td>
-  </tr>
-  <tr>
-    <td>`headingXL`</td>
-    <td>`h1`</td>
-  </tr>
-  <tr>
-    <td>`headingLarge`</td>
-    <td>`h2`</td>
-  </tr>
-  <tr>
-    <td>`headingMedium`</td>
-    <td>`h3`</td>
-  </tr>
-  <tr>
-    <td>`headingSmall`</td>
-    <td>`h3`</td>
-  </tr>
-</table>
-
-The variant defaults can be overriden with the `as` attribute:
-
-<Canvas>
-  <Text variant="headingSmall" as="h2">
-    h2 Heading Small
-  </Text>
-</Canvas>
-
-## Variants
-
-<Canvas>
-  <Stack>
-    <Text variant="headingXXL">headingXXL</Text>
-    <Text variant="headingXL">headingXL</Text>
-    <Text variant="headingLarge">headingLarge</Text>
-    <Text variant="headingMedium">headingMedium</Text>
-    <Text variant="headingSmall">headingSmall</Text>
-    <Text variant="headingTable">headingTable</Text>
-    <Text variant="subheadingLarge">subheadingLarge</Text>
-    <Text variant="subheadingMedium">subheadingMedium</Text>
-    <Text variant="subheadingSmall">subheadingSmall</Text>
-    <Text variant="subheadingSmallBold">subheadingSmallBold</Text>
-    <Text variant="body">body</Text>
-    <Text variant="bodySmall">bodySmall</Text>
-    <Text variant="bodyBold">bodyBold</Text>
-    <Text variant="bodyBoldDark">bodyBoldDark</Text>
-    <Text variant="bodySmallBold">bodySmallBold</Text>
-    <Text variant="inputLabel">inputLabel</Text>
-    <Text variant="inputLabelSmall">inputLabelSmall</Text>
-    <Text variant="hintText">hintText</Text>
-    <Text variant="placeholder">placeholder</Text>
-    <Text variant="placeholderSmall">placeholderSmall</Text>
-    <Text variant="placeholderCode">placeholderCode</Text>
-    <Text variant="placeholderCodeSmall">placeholderCodeSmall</Text>
-    <Text variant="error">error</Text>
-    <Text variant="errorSmall">errorSmall</Text>
-    <Text variant="successSmall">successSmall</Text>
-  </Stack>
-</Canvas>
-
-### Deprecated
-
-Do not use these variants, they are very bad for accessiblity and we have alternatives available
-for both types: `Button` and `Link`.
-
-<Canvas>
-  <Stack>
-    <Text variant="linkLarge">linkLarge</Text>
-    <Text variant="linkMedium">linkMedium</Text>
-    <Text variant="link">link</Text>
-    <Text variant="linkSmall">linkSmall</Text>
-    <Text variant="button">button</Text>
-    <Text variant="buttonSmall">buttonSmall</Text>
-  </Stack>
-</Canvas>

package/src/components/Text/Text.stories.tsx

@@ -1,27 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Text } from './Text';
-import { deprecatedTextVariants, textVariants } from './textVariants';
-
-const meta = {
-  title: 'Components/Common/Text',
-  component: Text,
-} satisfies Meta<typeof Text>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Example: Story = {
-  argTypes: {
-    variant: {
-      options: [...textVariants, deprecatedTextVariants],
-      control: {
-        type: 'select',
-      },
-    },
-  },
-  args: {
-    variant: 'headingXXL',
-    children: 'Some example text',
-  },
-};

package/src/components/Text/Text.test.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Text } from './Text';
-import { deprecatedTextVariants, textVariants } from './textVariants';
-
-describe('Text', () => {
-  test.each(textVariants)('it renders $variant correctly', (variant) => {
-    const { container } = render(
-      <Text variant={variant}>
-        Variant:
-        {variant}
-      </Text>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  test.each(deprecatedTextVariants)(
-    'it renders $deprecatedVariant correctly',
-    (deprecatedVariant) => {
-      const { container } = render(
-        <Text variant={deprecatedVariant}>
-          Deprecated Variant:
-          {deprecatedVariant}
-        </Text>,
-      );
-      expect(container).toMatchSnapshot();
-    },
-  );
-
-  it('allows a variants tag to be overriden', () => {
-    const { container } = render(
-      <Text variant="headingXXL" as="h6">
-        Variant: headingXXL override to h6
-      </Text>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/Text/Text.ts

@@ -1,44 +0,0 @@
-import styled from 'styled-components';
-import type { TextProps } from './types';
-import { getComponentOverride } from './utils';
-import { theme } from '../../theme';
-
-const { text, colors, fontFamily } = theme;
-
-export const Text = styled.span.attrs<TextProps>(({ as, variant }) => ({
-  as: getComponentOverride(as, variant),
-}))<TextProps>`
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  font-family: ${fontFamily};
-  line-height: 16px;
-  color: #37424d;
-
-  ${({ variant }) =>
-    (variant === 'button' || variant === 'buttonSmall') &&
-    `
-    cursor: pointer;
-    background-color: transparent;
-    border: 0;
-  `}
-
-  ${({ variant, muted = false }) => {
-    if (!variant) return '';
-    const color = muted ? colors.neutral.ink.lightest : text[variant].color;
-    return `
-      font-family: ${text[variant].fontFamily};
-      font-style: ${text[variant].fontStyle};
-      font-weight: ${text[variant].fontWeight};
-      font-size: ${text[variant].fontSize};
-      line-height: ${text[variant].lineHeight};
-      color: ${color};
-      text-decoration: ${text[variant].textDecoration};
-      letter-spacing: ${text[variant].letterSpacing};
-    `;
-  }}
-`;