@gv-tech/design-system 0.9.0 → 1.1.0

package/src/Link.tsx

@@ -1,252 +0,0 @@
-import type { ComponentType, ReactNode } from 'react';
-import { Fragment } from 'react';
-import styled, { css } from 'styled-components';
-import { darken } from 'polished';
-
-import { Icon } from './Icon';
-import { color } from './shared/styles';
-import { LinkProps } from './types';
-
-/**
- * Props for styled link components
- */
-interface StyledLinkProps {
-  secondary?: boolean;
-  tertiary?: boolean;
-  nochrome?: boolean;
-  inverse?: boolean;
-  isButton?: boolean;
-  containsIcon?: boolean;
-  withArrow?: boolean;
-}
-
-/**
- * Props for LinkInner component
- */
-interface LinkInnerProps {
-  withArrow?: boolean;
-}
-
-const linkStyles = css<StyledLinkProps>`
-  display: inline-block;
-  transition:
-    transform 150ms ease-out,
-    color 150ms ease-out;
-  text-decoration: none;
-
-  color: ${color.secondary};
-
-  &:hover,
-  &:focus {
-    cursor: pointer;
-    transform: translateY(-1px);
-    color: ${darken(0.07, color.secondary)};
-  }
-  &:active {
-    transform: translateY(0);
-    color: ${darken(0.1, color.secondary)};
-  }
-
-  svg {
-    display: inline-block;
-    height: 1em;
-    width: 1em;
-    vertical-align: text-top;
-    position: relative;
-    bottom: -0.125em;
-    margin-right: 0.4em;
-  }
-
-  ${(props) =>
-    props.containsIcon &&
-    css`
-      svg {
-        height: 1em;
-        width: 1em;
-        vertical-align: middle;
-        position: relative;
-        bottom: 0;
-        margin-right: 0;
-      }
-    `};
-
-  ${(props) =>
-    props.secondary &&
-    css`
-      color: ${color.mediumdark};
-
-      &:hover {
-        color: ${color.dark};
-      }
-
-      &:active {
-        color: ${color.darker};
-      }
-    `};
-
-  ${(props) =>
-    props.tertiary &&
-    css`
-      color: ${color.dark};
-
-      &:hover {
-        color: ${color.darkest};
-      }
-
-      &:active {
-        color: ${color.mediumdark};
-      }
-    `};
-
-  ${(props) =>
-    props.nochrome &&
-    css`
-      color: inherit;
-
-      &:hover,
-      &:active {
-        color: inherit;
-        text-decoration: underline;
-      }
-    `};
-
-  ${(props) =>
-    props.inverse &&
-    css`
-      color: ${color.lightest};
-
-      &:hover {
-        color: ${color.lighter};
-      }
-
-      &:active {
-        color: ${color.light};
-      }
-    `};
-
-  ${(props) =>
-    props.isButton &&
-    css`
-      border: 0;
-      border-radius: 0;
-      background: none;
-      padding: 0;
-      font-size: inherit;
-    `};
-`;
-
-const LinkInner = styled.span<LinkInnerProps>`
-  ${(props) =>
-    props.withArrow &&
-    css`
-      > svg:last-of-type {
-        height: 0.7em;
-        width: 0.7em;
-        margin-right: 0;
-        margin-left: 0.25em;
-        bottom: auto;
-        vertical-align: inherit;
-      }
-    `};
-`;
-
-const LinkA = styled.a<StyledLinkProps>`
-  ${linkStyles};
-`;
-
-const LinkButton = styled.button<StyledLinkProps>`
-  /* reset button styles */
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-
-  ${linkStyles};
-`;
-
-const applyStyle = (LinkWrapper?: LinkProps['LinkWrapper']) => {
-  return (
-    LinkWrapper &&
-    styled(
-      ({
-        containsIcon: _containsIcon,
-        inverse: _inverse,
-        nochrome: _nochrome,
-        secondary: _secondary,
-        tertiary: _tertiary,
-        children: _children,
-        ...linkWrapperRest
-      }: Record<string, unknown>) => (
-        <LinkWrapper {...(linkWrapperRest as Record<string, unknown>)}>{_children as ReactNode}</LinkWrapper>
-      ),
-    )`
-      ${linkStyles};
-    `
-  );
-};
-
-/**
- * Links can contains text and/or icons. Be careful using only icons, you must provide a text alternative via aria-label for accessibility.
- *
- * @example
- * ```tsx
- * <Link href="/home">Home</Link>
- * <Link secondary href="/about">About</Link>
- * <Link withArrow>Learn more</Link>
- * ```
- */
-export const Link = ({
-  isButton = false,
-  withArrow = false,
-  secondary = false,
-  tertiary = false,
-  nochrome = false,
-  inverse = false,
-  containsIcon = false,
-  LinkWrapper,
-  children,
-  ...props
-}: LinkProps) => {
-  // Dev-time accessibility check for icon-only links
-  if (process.env.NODE_ENV !== 'production') {
-    const hasAriaLabel = Object.prototype.hasOwnProperty.call(props, 'aria-label');
-    const noVisibleChildren = !children || (typeof children === 'string' && children.trim() === '');
-    if (containsIcon && noVisibleChildren && !hasAriaLabel) {
-      console.warn('Link: icon-only links should include an `aria-label` or visible text for accessibility.');
-    }
-  }
-  const content = (
-    <Fragment>
-      <LinkInner withArrow={withArrow}>
-        {children}
-        {withArrow && <Icon icon="arrowright" />}
-      </LinkInner>
-    </Fragment>
-  );
-
-  const StyledLinkWrapper = applyStyle(LinkWrapper);
-
-  let SelectedLink: ComponentType<Record<string, unknown>> = LinkA;
-  if (LinkWrapper) {
-    SelectedLink = StyledLinkWrapper as ComponentType<Record<string, unknown>>;
-  } else if (isButton) {
-    SelectedLink = LinkButton as ComponentType<Record<string, unknown>>;
-  }
-
-  return (
-    <SelectedLink
-      secondary={secondary}
-      tertiary={tertiary}
-      nochrome={nochrome}
-      inverse={inverse}
-      isButton={isButton}
-      containsIcon={containsIcon}
-      {...props}
-    >
-      {content}
-    </SelectedLink>
-  );
-};

package/src/StoryLinkWrapper.d.ts

@@ -1 +0,0 @@
-export {};

package/src/StoryLinkWrapper.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { action } from 'storybook/actions';
-
-const fireClickAction = action('onLinkClick');
-
-interface Props {
-  children: React.ReactNode;
-  className?: string;
-  href?: string | null;
-  onClick?: () => void;
-  to?: string | null;
-}
-
-export const StoryLinkWrapper: React.FC<Props> = ({
-  children,
-  className = '',
-  href = null,
-  onClick = () => {},
-  to = null,
-  ...rest
-}) => {
-  const modifiedOnClick = (event: React.MouseEvent) => {
-    event.preventDefault();
-    onClick?.();
-    fireClickAction(href || to);
-  };
-
-  return (
-    <a className={className} href={(href || to) ?? undefined} onClick={modifiedOnClick} {...rest}>
-      {children}
-    </a>
-  );
-};

package/src/__tests__/Avatar.test.tsx

@@ -1,28 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Avatar } from '../Avatar';
-import '@testing-library/jest-dom';
-
-describe('Avatar', () => {
-  it('renders initials when no image is provided', () => {
-    render(<Avatar username="John Doe" />);
-    expect(screen.getByText('J')).toBeInTheDocument();
-  });
-
-  it('renders an image when src is provided', () => {
-    render(<Avatar src="https://example.com/avatar.jpg" username="Jane Doe" />);
-    const img = screen.getByAltText('Jane Doe');
-    expect(img).toBeInTheDocument();
-    expect(img).toHaveAttribute('src', 'https://example.com/avatar.jpg');
-  });
-
-  it('shows loading state accurately', () => {
-    render(<Avatar loading username="Loading..." />);
-    expect(screen.getByLabelText('Loading avatar ...')).toBeInTheDocument();
-  });
-
-  it('renders correct initial based on username', () => {
-    render(<Avatar username="Eric Garcia" />);
-    expect(screen.getByText('E')).toBeInTheDocument();
-  });
-});

package/src/__tests__/Badge.test.tsx

@@ -1,25 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Badge } from '../Badge';
-import '@testing-library/jest-dom';
-
-describe('Badge', () => {
-  it('renders with children text', () => {
-    render(<Badge>New</Badge>);
-    expect(screen.getByText('New')).toBeInTheDocument();
-  });
-
-  it('renders with different statuses', () => {
-    const { rerender } = render(<Badge status="positive">Positive</Badge>);
-    expect(screen.getByText('Positive')).toBeInTheDocument();
-
-    rerender(<Badge status="negative">Negative</Badge>);
-    expect(screen.getByText('Negative')).toBeInTheDocument();
-
-    rerender(<Badge status="warning">Warning</Badge>);
-    expect(screen.getByText('Warning')).toBeInTheDocument();
-
-    rerender(<Badge status="error">Error</Badge>);
-    expect(screen.getByText('Error')).toBeInTheDocument();
-  });
-});

package/src/__tests__/Button.test.tsx

@@ -1,38 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-
-import { Button } from '../Button';
-import assertNoA11yViolations from '../test-utils/axe';
-
-describe('Button', () => {
-  it('renders children text', async () => {
-    const { container } = render(<Button>Click me</Button>);
-    expect(screen.getByText('Click me')).toBeTruthy();
-    await assertNoA11yViolations(container);
-  });
-
-  it('applies disabled when isDisabled prop is true', async () => {
-    const { container } = render(<Button isDisabled>Disabled</Button>);
-    const btn = screen.getByText('Disabled').closest('button');
-    expect(btn).toHaveAttribute('disabled');
-    await assertNoA11yViolations(container);
-  });
-
-  it('mounts icon-only button with accessible name', async () => {
-    // Render an icon-only button with aria-label to satisfy accessibility
-    const { container } = render(
-      <Button containsIcon aria-label="Icon action" isDisabled>
-        {/* icon-only scenario simulated with no children */}
-      </Button>,
-    );
-    const btn = screen.getByRole('button', { name: 'Icon action' });
-    expect(btn).toBeTruthy();
-    await assertNoA11yViolations(container);
-  });
-
-  it('fails axe for icon-only button without accessible name', async () => {
-    const { container } = render(<Button containsIcon isDisabled />);
-    // Expect the helper to throw with accessibility violations
-    await expect(assertNoA11yViolations(container)).rejects.toThrow(/Accessibility violations detected/);
-  });
-});

package/src/__tests__/Icon.test.tsx

@@ -1,26 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-
-import { Icon } from '../Icon';
-import assertNoA11yViolations from '../test-utils/axe';
-
-describe('Icon', () => {
-  it('renders an svg for a valid icon key', async () => {
-    const { container } = render(<Icon icon="check" data-testid="icon" />);
-    const el = screen.getByTestId('icon');
-    expect(el.tagName.toLowerCase()).toBe('svg');
-    // path should exist (may be empty if icon not present)
-    expect(el.querySelector('path')).not.toBeNull();
-    await assertNoA11yViolations(container);
-  });
-
-  it('renders aria-hidden fallback for unknown icon key', async () => {
-    const { container } = render(<Icon icon={'__does_not_exist__' as unknown as string} data-testid="missing" />);
-    const el = screen.getByTestId('missing');
-    expect(el.getAttribute('aria-hidden')).not.toBeNull();
-    const path = el.querySelector('path');
-    expect(path).not.toBeNull();
-    expect(path?.getAttribute('d')).toBe('');
-    await assertNoA11yViolations(container);
-  });
-});

package/src/__tests__/Link.test.tsx

@@ -1,31 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Link } from '../Link';
-import '@testing-library/jest-dom';
-
-describe('Link', () => {
-  it('renders a link with correct text', () => {
-    render(<Link href="https://example.com">Example</Link>);
-    const linkElement = screen.getByRole('link', { name: /example/i });
-    expect(linkElement).toBeInTheDocument();
-    expect(linkElement).toHaveAttribute('href', 'https://example.com');
-  });
-
-  it('renders as a button when isButton is true', () => {
-    render(<Link isButton>Button Link</Link>);
-    const buttonElement = screen.getByRole('button', { name: /button link/i });
-    expect(buttonElement).toBeInTheDocument();
-  });
-
-  it('renders an arrow icon when withArrow is true', () => {
-    const { container } = render(<Link withArrow>Arrow Link</Link>);
-    const svg = container.querySelector('svg');
-    expect(svg).toBeInTheDocument();
-  });
-
-  it('renders with secondary styling', () => {
-    render(<Link secondary>Secondary Link</Link>);
-    const linkElement = screen.getByText('Secondary Link').closest('a');
-    expect(linkElement).toHaveStyle('color: rgb(153, 153, 153)'); // color.mediumdark
-  });
-});

package/src/mdx.d.ts

@@ -1,5 +0,0 @@
-declare module '*.mdx' {
-  import * as React from 'react';
-  const MDXComponent: (props: Record<string, unknown>) => React.JSX.Element;
-  export default MDXComponent;
-}

package/src/setupTests.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/src/shared/animation.d.ts

@@ -1,18 +0,0 @@
-/**
- * Type declarations for shared/animation.js
- */
-
-import { Keyframes, FlattenSimpleInterpolation } from 'styled-components';
-
-export interface Easing {
-  rubber: string;
-}
-
-export declare const easing: Easing;
-
-export declare const rotate360: Keyframes;
-export declare const glow: Keyframes;
-export declare const float: Keyframes;
-export declare const jiggle: Keyframes;
-export declare const shake: Keyframes;
-export declare const inlineGlow: FlattenSimpleInterpolation;

package/src/shared/animation.js

@@ -1,60 +0,0 @@
-// Handy CSS animations for micro-interactions
-import { css, keyframes } from 'styled-components';
-import { color } from './styles';
-
-export const easing = {
-  rubber: 'cubic-bezier(0.175, 0.885, 0.335, 1.05)',
-};
-
-export const rotate360 = keyframes`
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-`;
-
-export const glow = keyframes`
-  0%, 100% { opacity: 1; }
-  50% { opacity: .4; }
-`;
-
-export const float = keyframes`
-  0% { transform: translateY(1px); }
-  25% { transform: translateY(0px); }
-  50% { transform: translateY(-3px); }
-  100% { transform: translateY(1px); }
-`;
-
-export const jiggle = keyframes`
-  0%, 100% { transform:translate3d(0,0,0); }
-  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
-  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
-`;
-
-export const shake = keyframes`
-  0% { transform:rotate(-3deg) }
-  1.68421% { transform:rotate(3deg) }
-  2.10526% { transform:rotate(6deg) }
-  3.78947% { transform:rotate(-6deg) }
-  4.21053% { transform:rotate(-6deg) }
-  5.89474% { transform:rotate(6deg) }
-  6.31579% { transform:rotate(6deg) }
-  8% { transform:rotate(-6deg) }
-  8.42105% { transform:rotate(-6deg) }
-  10.10526% { transform:rotate(6deg) }
-  10.52632% { transform:rotate(6deg) }
-  12.21053% { transform:rotate(-6deg) }
-  12.63158% { transform:rotate(-6deg) }
-  14.31579% { transform:rotate(6deg) }
-  15.78947% { transform:rotate(0deg) }
-  100% { transform:rotate(0deg) }
-`;
-
-export const inlineGlow = css`
-  animation: ${glow} 1.5s ease-in-out infinite;
-  background: ${color.mediumlight};
-  color: transparent;
-  cursor: progress;
-`;

package/src/shared/global.d.ts

@@ -1,12 +0,0 @@
-/**
- * Type declarations for shared/global.js
- */
-
-import { FlattenSimpleInterpolation } from 'styled-components';
-
-export declare const fontUrl: string;
-export declare const bodyStyles: FlattenSimpleInterpolation;
-export declare const GlobalStyle: import('styled-components').GlobalStyleComponent<
-  object,
-  import('styled-components').DefaultTheme
->;

package/src/shared/global.js

@@ -1,120 +0,0 @@
-import { createGlobalStyle, css } from 'styled-components';
-import { color, typography } from './styles';
-
-export const fontUrl = 'https://fonts.googleapis.com/css?family=Nunito+Sans:400,700,800,900';
-
-export const bodyStyles = css`
-  font-family: ${typography.type.primary};
-  font-size: ${typography.size.s3}px;
-  color: ${color.darkest};
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-tap-highlight-color: transparent;
-  -webkit-overflow-scrolling: touch;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: ${typography.weight.regular};
-    margin: 0;
-    padding: 0;
-  }
-
-  button,
-  input,
-  textarea,
-  select {
-    outline: none;
-    font-family: ${typography.type.primary};
-  }
-
-  sub,
-  sup {
-    font-size: 0.8em;
-  }
-
-  sub {
-    bottom: -0.2em;
-  }
-
-  sup {
-    top: -0.2em;
-  }
-
-  b,
-  em {
-    font-weight: ${typography.weight.bold};
-  }
-
-  hr {
-    border: none;
-    border-top: 1px solid ${color.border};
-    clear: both;
-    margin-bottom: 1.25rem;
-  }
-
-  code,
-  pre {
-    font-family: ${typography.type.code};
-    font-size: ${typography.size.s2 - 1}px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  code {
-    display: inline-block;
-    padding-left: 2px;
-    padding-right: 2px;
-    vertical-align: baseline;
-
-    color: ${color.secondary};
-  }
-
-  pre {
-    line-height: 18px;
-    padding: 11px 1rem;
-    white-space: pre-wrap;
-
-    background: rgba(0, 0, 0, 0.05);
-    color: ${color.darkest};
-    border-radius: 3px;
-    margin: 1rem 0;
-  }
-
-  &.ReactModal__Body--open {
-    overflow: hidden;
-    &.hide-intercom #intercom-container {
-      display: none;
-    }
-  }
-
-  .ReactModalPortal > div {
-    opacity: 0;
-  }
-
-  .ReactModalPortal .ReactModal__Overlay {
-    transition: all 200ms ease-in;
-
-    &--after-open {
-      opacity: 1;
-    }
-    &--before-close {
-      opacity: 0;
-    }
-  }
-`;
-
-export const GlobalStyle = createGlobalStyle`
- body {
-   ${bodyStyles}
- }
-`;

package/src/shared/icons.d.ts

@@ -1,34 +0,0 @@
-/**
- * Type declarations for shared/icons.js
- */
-
-export interface Icons {
-  mobile: string;
-  watch: string;
-  tablet: string;
-  browser: string;
-  sidebar: string;
-  sidebaralt: string;
-  bottombar: string;
-  useralt: string;
-  user: string;
-  useradd: string;
-  users: string;
-  profile: string;
-  bookmark: string;
-  bookmarkhollow: string;
-  book: string;
-  star: string;
-  starhollow: string;
-  circle: string;
-  circlehollow: string;
-  heart: string;
-  hearthollow: string;
-  facehappy: string;
-  facesad: string;
-  faceneutral: string;
-  lock: string;
-  [key: string]: string; // Allow for additional icons
-}
-
-export declare const icons: Icons;