@veeqo/ui 0.0.1 → 0.0.3

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

@@ -0,0 +1,78 @@
+// 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/Tag/index.ts

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

package/src/components/Text/Docs.mdx

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,44 @@
+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};
+    `;
+  }}
+`;