@jordan-mace/chaser-design-system 1.2.2 → 1.2.3

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

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+import { Tag } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Tag',
+  component: Tag,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: { onRemove: fn() },
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default Tag',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Primary Tag',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    children: 'Success Tag',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    children: 'Warning Tag',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    children: 'Error Tag',
+  },
+};
+
+export const Removable: Story = {
+  args: {
+    removable: true,
+    children: 'Removable Tag',
+  },
+};
+
+export const TagGroup: Story = {
+  render: () => (
+    <Tag.Group>
+      <Tag>React</Tag>
+      <Tag variant="primary">TypeScript</Tag>
+      <Tag variant="success">JavaScript</Tag>
+      <Tag variant="warning">CSS</Tag>
+      <Tag variant="error">HTML</Tag>
+      <Tag removable>Node.js</Tag>
+    </Tag.Group>
+  ),
+};

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

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Tag from './Tag';
+import React from 'react';
+
+describe('Tag', () => {
+  it('renders default tag correctly', async () => {
+    const { container } = await render(<Tag>Default Tag</Tag>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders primary tag correctly', async () => {
+    const { container } = await render(<Tag variant="primary">Primary Tag</Tag>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders success tag correctly', async () => {
+    const { container } = await render(<Tag variant="success">Success Tag</Tag>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders warning tag correctly', async () => {
+    const { container } = await render(<Tag variant="warning">Warning Tag</Tag>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders error tag correctly', async () => {
+    const { container } = await render(<Tag variant="error">Error Tag</Tag>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders removable tag correctly', async () => {
+    const { container } = await render(<Tag removable>Removable Tag</Tag>);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders tag group correctly', async () => {
+    const { container } = await render(
+      <Tag.Group>
+        <Tag>Tag 1</Tag>
+        <Tag variant="primary">Tag 2</Tag>
+        <Tag variant="success">Tag 3</Tag>
+        <Tag variant="warning">Tag 4</Tag>
+        <Tag variant="error">Tag 5</Tag>
+      </Tag.Group>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,72 @@
+import clsx from 'clsx';
+import React from 'react';
+import { tag, removeButton, tagGroup } from './styles.css';
+import Box from '../Box';
+
+type TagProps = {
+  children: React.ReactNode;
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+  onRemove?: () => void;
+  removable?: boolean;
+  className?: string;
+};
+
+const Tag = ({
+  children,
+  variant = 'default',
+  onRemove,
+  removable = false,
+  className,
+}: TagProps) => {
+  return (
+    <Box
+      as="span"
+      className={clsx(tag[variant], className)}
+      display="inline"
+      alignItems="center"
+    >
+      {children}
+      {removable && (
+        <Box
+          as="span"
+          onClick={onRemove}
+          className={removeButton}
+          role="button"
+          tabIndex={0}
+          aria-label="Remove tag"
+          onKeyDown={(e: React.KeyboardEvent) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              onRemove?.();
+            }
+          }}
+        >
+          ×
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+type TagGroupProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const TagGroup = ({ children, className }: TagGroupProps) => {
+  return (
+    <Box
+      className={clsx(tagGroup, className)}
+      display="flex"
+      gap="small"
+      style={{ flexWrap: 'wrap' }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+const TagComponent = Object.assign(Tag, {
+  Group: TagGroup,
+});
+
+export default TagComponent;

package/src/components/Tag/styles.css.ts

@@ -0,0 +1,96 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const tag = styleVariants({
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '4px 12px',
+    fontSize: '12px',
+    fontWeight: '500',
+    fontFamily: vars.fontFamily.body,
+    borderRadius: '16px',
+    transition: 'all 0.2s ease',
+  },
+  default: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '4px 12px',
+    fontSize: '12px',
+    fontWeight: '500',
+    fontFamily: vars.fontFamily.body,
+    color: vars.colors.textPrimary,
+    backgroundColor: vars.colors.backgroundMuted,
+    borderRadius: '16px',
+    transition: 'all 0.2s ease',
+  },
+  primary: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '4px 12px',
+    fontSize: '12px',
+    fontWeight: '500',
+    fontFamily: vars.fontFamily.body,
+    color: vars.colors.buttonTextPrimary,
+    backgroundColor: vars.colors.buttonBackgroundPrimary,
+    borderRadius: '16px',
+    transition: 'all 0.2s ease',
+  },
+  success: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '4px 12px',
+    fontSize: '12px',
+    fontWeight: '500',
+    fontFamily: vars.fontFamily.body,
+    color: vars.colors.alertSuccessText,
+    backgroundColor: vars.colors.alertSuccessBackground,
+    borderRadius: '16px',
+    transition: 'all 0.2s ease',
+  },
+  warning: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '4px 12px',
+    fontSize: '12px',
+    fontWeight: '500',
+    fontFamily: vars.fontFamily.body,
+    color: vars.colors.alertWarningText,
+    backgroundColor: vars.colors.alertWarningBackground,
+    borderRadius: '16px',
+    transition: 'all 0.2s ease',
+  },
+  error: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '4px 12px',
+    fontSize: '12px',
+    fontWeight: '500',
+    fontFamily: vars.fontFamily.body,
+    color: vars.colors.alertErrorText,
+    backgroundColor: vars.colors.alertErrorBackground,
+    borderRadius: '16px',
+    transition: 'all 0.2s ease',
+  },
+});
+
+export const removeButton = style({
+  cursor: 'pointer',
+  marginLeft: '8px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: vars.colors.textSecondary,
+  fontSize: '16px',
+  lineHeight: '1',
+  ':hover': {
+    color: vars.colors.textPrimary,
+  },
+});
+
+export const tagGroup = styleWithLayer({
+  display: 'flex',
+  flexWrap: 'wrap',
+  gap: '8px',
+});

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

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+
+import { Header } from '.';
+
+const meta = {
+  title: 'Components/Text/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const H1: Story = {
+  args: {
+    variant: 'h1',
+  },
+  render: (args) => (
+    <Header {...args}>Welcome back, User!</Header>
+  ),
+};
+
+export const H2: Story = {
+  args: {
+    variant: 'h2',
+  },
+  render: (args) => (
+    <Header {...args}>Welcome back, User!</Header>
+  ),
+};
+
+export const H3: Story = {
+  args: {
+    variant: 'h3',
+  },
+  render: (args) => (
+    <Header {...args}>Welcome back, User!</Header>
+  ),
+};

package/src/components/Text/Header.tsx

@@ -0,0 +1,20 @@
+import clsx from 'clsx';
+import { heading, text } from './styles.css';
+import React from 'react';
+import Box from '../Box';
+
+type HeaderProps = {
+  variant: 'h1' | 'h2' | 'h3';
+  className?: string;
+  children?: React.ReactNode;
+};
+
+const Header = ({ variant, children, className }: HeaderProps) => {
+  return (
+    <Box as={variant} className={clsx(className, text, heading)}>
+      {children}
+    </Box>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+
+import { P } from '.';
+
+const meta = {
+  title: 'Components/Text/P',
+  component: P,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof P>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Welcome back, User!',
+  },
+};

package/src/components/Text/P.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import { text } from './styles.css';
+import React from 'react';
+import Box from '../Box';
+
+type PProps = React.HTMLAttributes<HTMLParagraphElement> & {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const P = (props: PProps) => {
+  return (
+    <Box as="p" className={clsx(props.className, text)}>
+      {props.children}
+    </Box>
+  );
+};
+
+export default P;

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

@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import { Header, P } from './';
+import React from 'react';
+
+describe('P', () => {
+  it('renders p correctly', async () => {
+    const { container } = await render(<P>Hello</P>);
+    expect(container).toMatchScreenshot();
+  });
+});
+
+describe('Header', () => {
+  it('renders h1 correctly', async () => {
+    const { container } = await render(
+      <Header variant="h1" label="Hello world!" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+  it('renders h2 correctly', async () => {
+    const { container } = await render(
+      <Header variant="h2" label="Hello world!" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+  it('renders h3 correctly', async () => {
+    const { container } = await render(
+      <Header variant="h3" label="Hello world!" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Text/styles.css.ts

@@ -0,0 +1,15 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+
+export const text = style({
+  color: vars.colors.textPrimary,
+  fontFamily: vars.fontFamily.body,
+  lineHeight: '24px',
+});
+
+export const heading = style({
+  color: vars.colors.textPrimary,
+  fontFamily: vars.fontFamily.heading,
+  lineHeight: '32px',
+  fontWeight: '700',
+});

package/src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { fn } from 'storybook/test';
+import React from 'react';
+
+import { TextArea } from '.';
+
+const meta = {
+  title: 'Components/TextArea',
+  component: TextArea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: { onChange: fn() },
+} satisfies Meta<typeof TextArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Description',
+    placeholder: 'Enter your description...',
+  },
+};
+
+export const WithoutLabel: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    label: 'Full Width TextArea',
+    fullWidth: true,
+    placeholder: 'This takes full width...',
+  },
+};

package/src/components/TextArea/TextArea.test.tsx

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import TextArea from './TextArea';
+import React from 'react';
+
+describe('TextArea', () => {
+  it('renders correctly with label', async () => {
+    const { container } = await render(<TextArea label={'Description'} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly without label', async () => {
+    const { container } = await render(<TextArea />);
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import React from 'react';
+import { textAreaStyle, label } from './styles.css';
+import { text } from '../Text/styles.css';
+import Box from '../Box';
+
+export type TextAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+  label?: string;
+  fullWidth?: boolean;
+};
+
+const TextArea = (props: TextAreaProps) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection={{ mobile: 'column', tablet: 'row' }}
+      gap="small"
+    >
+      {props.label && (
+        <Box
+          as="label"
+          className={clsx(
+            text,
+            label,
+          )}
+          marginX={{ mobile: 'auto', tablet: 'none' }}
+          marginY={{ mobile: 'none', tablet: 'auto' }}
+          htmlFor={props.id}
+        >
+          {props.label}
+        </Box>
+      )}
+      <Box
+        as="textarea"
+        className={clsx(textAreaStyle, props.className)}
+        width={props.fullWidth ? '100%' : undefined}
+        {...props}
+      />
+    </Box>
+  );
+};
+
+export default TextArea;

package/src/components/TextArea/styles.css.ts

@@ -0,0 +1,12 @@
+import { styleWithLayer } from '../../styles/utils';
+
+export const textAreaStyle = styleWithLayer({
+  padding: '0.5rem 1rem',
+  borderRadius: '0.5rem',
+  minHeight: '100px',
+  resize: 'vertical',
+});
+
+export const label = styleWithLayer({
+  paddingRight: '0.5rem',
+});