@gv-tech/design-system 0.9.0 → 1.1.0

package/src/Badge.stories.tsx

@@ -1,87 +0,0 @@
-import type { ReactNode } from 'react';
-import { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Badge } from './Badge';
-import { Icon } from './Icon';
-
-const meta: Meta<typeof Badge> = {
-  title: 'Design System/Badge',
-  component: Badge,
-};
-
-import { expect } from '@storybook/jest';
-import { within } from '@storybook/testing-library';
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const AllBadges: Story = {
-  args: {
-    children: 'Badge',
-  },
-  render: (_args) => (
-    <div>
-      <Badge status="positive">Positive</Badge>
-      <Badge status="negative">Negative</Badge>
-      <Badge status="neutral">Neutral</Badge>
-      <Badge status="error">Error</Badge>
-      <Badge status="warning">Warning</Badge>
-      <Badge status="positive">
-        <Icon icon="facehappy" inline block={false} />
-        with icon
-      </Badge>
-    </div>
-  ),
-};
-
-export const Positive: Story = {
-  render: () => <Badge status="positive">Positive</Badge>,
-};
-export const Negative = () => <Badge status="negative">Negative</Badge>;
-export const Warning = () => <Badge status="warning">Warning</Badge>;
-export const Neutral = () => <Badge status="neutral">Neutral</Badge>;
-export const Error = () => <Badge status="error">Error</Badge>;
-
-interface BadgeArgs {
-  status?: 'positive' | 'negative' | 'neutral' | 'error' | 'warning';
-  children?: ReactNode;
-}
-
-interface IconArgs {
-  icon: string;
-  inline?: boolean;
-  block: boolean;
-}
-
-type WithIconArgs = BadgeArgs & IconArgs;
-
-export const WithIcon = (args: WithIconArgs) => (
-  <Badge {...args}>
-    <Icon {...args} />
-    with icon
-  </Badge>
-);
-WithIcon.args = {
-  status: 'warning',
-  icon: 'check',
-  inline: true,
-  block: false,
-};
-
-WithIcon.storyName = 'with icon';
-WithIcon.play = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-  const canvas = within(canvasElement);
-  const badge = canvas.getByText(/with icon/i);
-  expect(badge).toBeInTheDocument();
-  const icon = canvasElement.querySelector('svg');
-  expect(icon).toBeInTheDocument();
-};
-
-AllBadges.play = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-  const canvas = within(canvasElement);
-  expect(canvas.getByText('Positive')).toBeInTheDocument();
-  expect(canvas.getByText('Negative')).toBeInTheDocument();
-  expect(canvas.getByText('Neutral')).toBeInTheDocument();
-  expect(canvas.getByText('Error')).toBeInTheDocument();
-  expect(canvas.getByText('Warning')).toBeInTheDocument();
-};

package/src/Badge.tsx

@@ -1,76 +0,0 @@
-import styled, { css } from 'styled-components';
-import { background, color, typography } from './shared/styles';
-import { BadgeProps, BADGE_STATUSES, StatusProps } from './types';
-
-/**
- * Styled badge wrapper with status-based styling
- */
-const BadgeWrapper = styled.div<StatusProps>`
-  display: inline-block;
-  vertical-align: top;
-  font-size: 11px;
-  line-height: 12px;
-  padding: 4px 12px;
-  border-radius: 3em;
-  font-weight: ${typography.weight.bold};
-
-  svg {
-    height: 12px;
-    width: 12px;
-    margin-right: 4px;
-    margin-top: -2px;
-  }
-
-  ${(props) =>
-    props.status === BADGE_STATUSES.POSITIVE &&
-    css`
-      color: ${color.positive};
-      background: ${background.positive};
-    `};
-
-  ${(props) =>
-    props.status === BADGE_STATUSES.NEGATIVE &&
-    css`
-      color: ${color.negative};
-      background: ${background.negative};
-    `};
-
-  ${(props) =>
-    props.status === BADGE_STATUSES.WARNING &&
-    css`
-      color: ${color.warning};
-      background: ${background.warning};
-    `};
-
-  ${(props) =>
-    props.status === BADGE_STATUSES.ERROR &&
-    css`
-      color: ${color.lightest};
-      background: ${color.negative};
-    `};
-
-  ${(props) =>
-    props.status === BADGE_STATUSES.NEUTRAL &&
-    css`
-      color: ${color.dark};
-      background: ${color.mediumlight};
-    `};
-`;
-
-/**
- * Badge component for displaying status indicators and labels
- *
- * @example
- * ```tsx
- * <Badge status="positive">Success</Badge>
- * <Badge status="error">Error</Badge>
- * <Badge>Default</Badge>
- * ```
- */
-export const Badge = ({ status = BADGE_STATUSES.NEUTRAL, children, ...props }: BadgeProps) => {
-  return (
-    <BadgeWrapper status={status} {...props}>
-      {children}
-    </BadgeWrapper>
-  );
-};

package/src/Button.stories.tsx

@@ -1,244 +0,0 @@
-import type { ComponentProps } from 'react';
-import styled from 'styled-components';
-
-import { userEvent, within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
-
-import { Button } from './Button';
-import { Icon } from './Icon';
-import { IconName } from './types';
-import { StoryLinkWrapper } from './StoryLinkWrapper';
-
-const CustomButton = styled.button`
-  border: 1px solid green;
-  background: lightgreen;
-  color: rebeccapurple;
-  padding: 1em;
-  font-size: 1.2em;
-`;
-
-function ButtonWrapper(props: ComponentProps<typeof CustomButton>) {
-  return <CustomButton {...props} />;
-}
-
-export default {
-  title: 'Design System/Button',
-  component: Button,
-};
-
-import type { StoryFn } from '@storybook/react';
-export const AllButtons: StoryFn = (_args: Record<string, unknown>) => (
-  <div>
-    <Button appearance="primary">Primary</Button>
-    <Button appearance="secondary">Secondary</Button>
-    <Button appearance="tertiary">Tertiary</Button>
-    <Button appearance="outline">Outline</Button>
-    <Button appearance="primaryOutline">Outline primary</Button>
-    <Button appearance="secondaryOutline">Outline secondary</Button>
-    <Button appearance="primary" disabled>
-      Disabled
-    </Button>
-    <br />
-    <Button appearance="primary" loading>
-      Primary
-    </Button>
-    <Button appearance="secondary" loading>
-      Secondary
-    </Button>
-    <Button appearance="tertiary" loading>
-      Tertiary
-    </Button>
-    <Button appearance="outline" loading>
-      Outline
-    </Button>
-    <Button appearance="outline" loading loadingText="Custom...">
-      Outline
-    </Button>
-    <br />
-    <Button appearance="primary" size="small">
-      Primary
-    </Button>
-    <Button appearance="secondary" size="small">
-      Secondary
-    </Button>
-    <Button appearance="tertiary" size="small">
-      Tertiary
-    </Button>
-    <Button appearance="outline" size="small">
-      Outline
-    </Button>
-    <Button appearance="primary" disabled size="small">
-      Disabled
-    </Button>
-    <Button appearance="outline" size="small" containsIcon>
-      <Icon icon={'link' as IconName} aria-label="Link" />
-    </Button>
-    <Button appearance="outline" size="small">
-      <Icon icon={'link' as IconName} />
-      Link
-    </Button>
-  </div>
-);
-
-AllButtons.storyName = 'all buttons';
-
-export const ButtonWrapperStory: StoryFn = (_args: Record<string, unknown>) => (
-  <div>
-    <ButtonWrapper>Original Button Wrapper</ButtonWrapper>
-    <br />
-    <Button ButtonWrapper={ButtonWrapper} appearance="primary">
-      Primary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="secondary">
-      Secondary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="tertiary">
-      Tertiary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="outline">
-      Outline
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="primaryOutline">
-      Outline primary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="secondaryOutline">
-      Outline secondary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="primary" disabled>
-      Disabled
-    </Button>
-    <br />
-    <Button ButtonWrapper={ButtonWrapper} appearance="primary" loading>
-      Primary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="secondary" loading>
-      Secondary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="tertiary" loading>
-      Tertiary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="outline" loading>
-      Outline
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="outline" loading loadingText="Custom...">
-      Outline
-    </Button>
-    <br />
-    <Button ButtonWrapper={ButtonWrapper} appearance="primary" size="small">
-      Primary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="secondary" size="small">
-      Secondary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="tertiary" size="small">
-      Tertiary
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="outline" size="small">
-      Outline
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="primary" disabled size="small">
-      Disabled
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="outline" size="small" containsIcon>
-      <Icon icon={'link' as IconName} aria-label="Link" />
-    </Button>
-    <Button ButtonWrapper={ButtonWrapper} appearance="outline" size="small">
-      <Icon icon={'link' as IconName} />
-      Link
-    </Button>
-  </div>
-);
-
-ButtonWrapperStory.storyName = 'button wrapper';
-
-export const AnchorWrapper: StoryFn = (_args: Record<string, unknown>) => (
-  <div>
-    <StoryLinkWrapper to="http://storybook.js.org">Original Link Wrapper</StoryLinkWrapper>
-    <br />
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="primary">
-      Primary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="secondary">
-      Secondary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="tertiary">
-      Tertiary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline">
-      Outline
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="primaryOutline">
-      Outline primary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="secondaryOutline">
-      Outline secondary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="primary" disabled>
-      Disabled
-    </Button>
-    <br />
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="primary" loading>
-      Primary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="secondary" loading>
-      Secondary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="tertiary" loading>
-      Tertiary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline" loading>
-      Outline
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline" loading loadingText="Custom...">
-      Outline
-    </Button>
-    <br />
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="primary" size="small">
-      Primary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="secondary" size="small">
-      Secondary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="tertiary" size="small">
-      Tertiary
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline" size="small">
-      Outline
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="primary" disabled size="small">
-      Disabled
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline" size="small" containsIcon>
-      <Icon icon={'link' as IconName} aria-label="Link" />
-    </Button>
-    <Button ButtonWrapper={StoryLinkWrapper} appearance="outline" size="small">
-      <Icon icon={'link' as IconName} />
-      Link
-    </Button>
-  </div>
-);
-
-AnchorWrapper.storyName = 'anchor wrapper';
-
-/*
- * New story using the play function.
- * See https://storybook.js.org/docs/react/writing-stories/play-function
- * to learn more about the play function.
- */
-export const WithInteractions: StoryFn = (_args: Record<string, unknown>) => {
-  const args = _args as unknown as ComponentProps<typeof Button>;
-  return <Button {...args} />;
-};
-WithInteractions.args = {
-  appearance: 'primary',
-  href: 'http://storybook.js.org',
-  ButtonWrapper: StoryLinkWrapper,
-  children: 'Button',
-};
-
-WithInteractions.play = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-  // Assigns canvas to the component root element
-  const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole('link'));
-  expect(canvas.getByRole('link')).toHaveAttribute('href', 'http://storybook.js.org');
-};