@veeqo/ui 0.0.1 → 0.0.3

package/src/components/Button/components/styled.ts

@@ -0,0 +1,271 @@
+import styled from 'styled-components';
+import { theme } from '../../../theme';
+import { sizes } from '../../../theme/modules/sizes';
+
+interface ButtonDisplayProps {
+  size: 'sm' | 'base';
+  hasText: boolean;
+  hasIcon: boolean;
+  hasDropdown: boolean;
+}
+
+export const MainContent = styled.span<{
+  loading?: boolean;
+  hasText: boolean;
+  size: 'base' | 'md';
+}>`
+  display: inline-flex;
+  align-items: center;
+
+  gap: ${({ hasText }) => (hasText ? '8px' : '4px')};
+  ${({ loading }) => loading && 'opacity: 0;'};
+
+  svg {
+    width: ${({ size }) => sizes[size]};
+    height: ${({ size }) => sizes[size]};
+  }
+`;
+
+const BaseButton = styled.button<ButtonDisplayProps>`
+  position: relative;
+  box-sizing: border-box;
+  appearance: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-family: ${theme.fontFamily};
+  font-weight: 400;
+  border: 1px solid;
+  background-color: transparent;
+  white-space: nowrap;
+
+  ${(props) => {
+    let height = '40px';
+    let paddingLeft = '24px';
+    let paddingRight = '24px';
+    let borderRadius = '8px';
+    let fontSize = '16px';
+    let outlineWidth = '4px';
+
+    if (props.hasIcon) {
+      paddingLeft = '16px';
+    }
+
+    if (props.hasDropdown) {
+      paddingRight = '16px';
+    }
+
+    if (props.size === 'sm') {
+      height = '32px';
+      paddingLeft = '16px';
+      paddingRight = '16px';
+      borderRadius = '4px';
+      fontSize = '14px';
+      outlineWidth = '2px';
+
+      if (props.hasIcon) {
+        paddingLeft = '8px';
+      }
+
+      if (props.hasDropdown) {
+        paddingRight = '8px';
+      }
+    }
+
+    if (!props.hasText) {
+      paddingLeft = '8px';
+      paddingRight = '8px';
+    }
+
+    return `
+      --outline-width: ${outlineWidth};
+
+      height: ${height};
+      padding-left: ${paddingLeft};
+      padding-right: ${paddingRight};
+      border-radius: ${borderRadius};
+      font-size: ${fontSize};
+    `;
+  }}
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    pointer-events: none;
+    cursor: unset !important;
+  }
+
+  /* TODO: - Fix typography so these hacks aren't needed */
+  & > span {
+    position: relative;
+    top: -1px;
+  }
+`;
+
+export const DefaultButton = styled(BaseButton as any)`
+  border-color: ${theme.colors.neutral.grey.dark};
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);
+  color: ${({ hasText }) =>
+    hasText ? theme.colors.neutral.ink.base : theme.colors.secondary.blue.base};
+
+  &:hover {
+    background-color: ${theme.colors.neutral.grey.lightest};
+  }
+
+  &:active {
+    background-color: ${theme.colors.neutral.grey.lightest};
+    border-color: ${theme.colors.secondary.blue.base};
+    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};
+    outline: 0;
+  }
+
+  &:disabled {
+    box-shadow: none !important;
+    background-color: ${theme.colors.neutral.grey.base} !important;
+    border-color: ${theme.colors.neutral.grey.base} !important;
+    color: ${theme.colors.neutral.ink.light} !important;
+  }
+`;
+
+export const DefaultDestructiveButton = styled(DefaultButton as any)`
+  color: ${theme.colors.secondary.red.base};
+
+  &:hover {
+    color: ${theme.colors.secondary.red.dark};
+  }
+
+  &:active {
+    border-color: ${theme.colors.secondary.red.base};
+    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};
+    color: ${theme.colors.secondary.red.dark};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};
+  }
+`;
+
+export const PrimaryButton = styled(DefaultButton as any)`
+  background-color: ${theme.colors.secondary.blue.base};
+  border-color: ${theme.colors.secondary.blue.base};
+  color: white;
+
+  &:hover {
+    background-color: ${theme.colors.secondary.blue.dark};
+    border-color: ${theme.colors.secondary.blue.dark};
+  }
+
+  &:active {
+    background-color: ${theme.colors.secondary.blue.dark};
+    border-color: ${theme.colors.secondary.blue.dark};
+    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};
+  }
+`;
+
+export const PrimaryDestructiveButton = styled(PrimaryButton as any)`
+  background-color: ${theme.colors.secondary.red.base};
+  border-color: ${theme.colors.secondary.red.base};
+  color: white;
+
+  &:hover {
+    background-color: ${theme.colors.secondary.red.dark};
+    border-color: ${theme.colors.secondary.red.dark};
+  }
+
+  &:active {
+    background-color: ${theme.colors.secondary.red.dark};
+    border-color: ${theme.colors.secondary.red.dark};
+    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.red.light};
+  }
+`;
+
+export const FlatButton = styled(BaseButton as any)`
+  border-color: transparent;
+  box-shadow: none;
+  color: ${theme.colors.neutral.ink.base};
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  &:active {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 var(--outline-width) ${theme.colors.secondary.blue.light};
+    outline: 0;
+  }
+
+  &:disabled {
+    background-color: transparent;
+    border-color: transparent;
+  }
+`;
+
+export const UnstyledButton = styled.button`
+  appearance: none;
+  border: 0;
+  background-color: transparent;
+  padding: 0;
+  font: inherit;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+export const LinkButton = styled(UnstyledButton)<ButtonDisplayProps>`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+
+  font-family: ${theme.text.link.fontFamily};
+  font-size: ${theme.text.link.fontSize};
+  font-weight: ${theme.text.link.fontWeight};
+  line-height: ${theme.text.link.lineHeight};
+  text-decoration: ${theme.text.link.textDecoration};
+  color: ${theme.colors.secondary.blue.base};
+
+  &:hover {
+    color: ${theme.colors.secondary.blue.dark};
+  }
+
+  & > * + * {
+    margin-left: ${theme.sizes.xs};
+  }
+
+  /* TODO: - Fix typography so these hacks aren't needed */
+  & > span {
+    position: relative;
+    top: -1px;
+  }
+`;
+
+export const LoadingWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0;
+`;

package/src/components/Button/index.ts

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

package/src/components/Button/types.ts

@@ -0,0 +1,27 @@
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+
+export type ButtonVariant =
+  | 'default'
+  | 'destructive'
+  | 'primary'
+  | 'primaryDestructive'
+  | 'flat'
+  | 'link'
+  | 'unstyled';
+
+/**
+ * Button properties.
+ */
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode;
+  /** Variant styles */
+  variant?: ButtonVariant;
+  /** Button sizes */
+  size?: 'sm' | 'base';
+  /** Icon */
+  icon?: ReactNode;
+  /** Renders a dropdown indicator inside the button */
+  dropdown?: boolean;
+  /** Renders a loading indicator inside the button */
+  loading?: boolean;
+}

package/src/components/Card/Card.stories.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card } from './Card';
+import { Stack } from '../Stack';
+import { Button } from '../Button';
+
+const meta = {
+  title: 'Components/Common/Card',
+  component: Card,
+} satisfies Meta<typeof Card>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'Custom header',
+    onClose: undefined,
+    children: (
+      <div>
+        <p>Main content within here!</p>
+        <img
+          alt="The Meerkat"
+          src="https://www.dudleyzoo.org.uk/wp-content/uploads/DZG_Meerkat_5-1200x794.jpg"
+          width={512}
+        />
+      </div>
+    ),
+    renderFooter: () => (
+      <Stack direction="horizontal" alignX="end">
+        <Button>Cancel</Button>
+        <Button variant="primary">Save changes</Button>
+      </Stack>
+    ),
+  },
+};
+
+// Story with only children
+
+export const ChildrenOnly: Story = {
+  args: {
+    onClose: undefined,
+    children: (
+      <div>
+        <p>Main content within here!</p>
+        <img
+          alt="The Meerkat"
+          src="https://www.dudleyzoo.org.uk/wp-content/uploads/DZG_Meerkat_5-1200x794.jpg"
+          width={512}
+        />
+      </div>
+    ),
+  },
+};
+
+// Dismissable card (onClose passed)
+
+export const Dismissable: Story = {
+  args: {
+    title: 'Dismissable Card',
+    children: (
+      <div>
+        <p>Main content within here!</p>
+        <img
+          alt="The Meerkat"
+          src="https://www.dudleyzoo.org.uk/wp-content/uploads/DZG_Meerkat_5-1200x794.jpg"
+          width={512}
+        />
+      </div>
+    ),
+    onClose: () => {
+      alert('Dismissed!');
+    },
+  },
+};
+
+export const CollapsableCard: Story = {
+  args: {
+    title: 'Collapsable Card',
+    collapsable: true,
+    children: 'content',
+    onClose: undefined,
+  },
+};

package/src/components/Card/Card.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Card } from './Card';
+
+describe('Card', () => {
+  test('it renders correctly', () => {
+    const { container } = render(
+      <Card
+        title="Test title"
+        subtitle="Test subtitle"
+        action={{
+          title: 'Test action',
+          onClick: () => {},
+        }}
+        collapsable
+        elevation={4}
+        accent="info"
+        onClose={() => {}}
+        renderFooter={() => <span>Test footer</span>}
+      >
+        Card content
+      </Card>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/Card/Card.tsx

@@ -0,0 +1,88 @@
+import React, { ReactNode, useState } from 'react';
+
+import { CardHeader } from '../CardHeader';
+import { Surface, Body, FullBleed, Footer, CardElevation, Section } from './styled';
+
+const collapseAnimationVariants = {
+  expanded: { height: 'auto' },
+  collapsed: { height: 0 },
+};
+
+type CardAction = {
+  title: string;
+  onClick: () => void;
+};
+
+export type CardProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  title?: string;
+  subtitle?: string;
+  HeaderActionSlot?: React.ReactNode;
+  action?: CardAction;
+  collapsable?: boolean;
+  elevation?: CardElevation;
+  accent?: 'info' | 'success' | 'error';
+  children: ReactNode;
+  onClose?: () => void;
+  renderFooter?: () => ReactNode;
+};
+
+export const Card = ({
+  className,
+  style,
+  title,
+  subtitle,
+  HeaderActionSlot,
+  action,
+  collapsable,
+  elevation,
+  accent,
+  children,
+  onClose,
+  renderFooter,
+}: CardProps) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const toggleCollapsed = () => {
+    setIsCollapsed(!isCollapsed);
+  };
+
+  const headerMarkup = title && (
+    <CardHeader
+      title={title}
+      subtitle={subtitle}
+      ActionSlot={HeaderActionSlot}
+      action={action}
+      onClickClose={onClose}
+      isCollapsed={isCollapsed}
+      onClickCollapse={collapsable ? toggleCollapsed : undefined}
+    />
+  );
+
+  const showBody = (collapsable && !isCollapsed) || !collapsable;
+  const bodyMarkup = (
+    <Body
+      animate={showBody ? 'expanded' : 'collapsed'}
+      variants={collapseAnimationVariants}
+      transition={{ duration: 0.3, ease: 'easeOut' }}
+    >
+      <Section>{children}</Section>
+    </Body>
+  );
+
+  const footerMarkup = renderFooter !== undefined && <Footer>{renderFooter()}</Footer>;
+
+  return (
+    <Surface className={className} style={style} elevation={elevation} accent={accent}>
+      {headerMarkup}
+      {bodyMarkup}
+      {footerMarkup}
+    </Surface>
+  );
+};
+
+Card.Surface = Surface;
+Card.Section = Section;
+Card.FullBleed = FullBleed;
+Card.Footer = Footer;

package/src/components/Card/Docs.mdx

@@ -0,0 +1,134 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as CardStories from './Card.stories';
+import { Stack } from '../Stack';
+
+<Meta of={CardStories} />
+
+# Card
+
+Cards are a primary layout element and are a great way to group content into composable blocks and add structure to pages with lots of content.
+
+<Primary />
+
+## Contents
+
+<Stack direction="horizontal">
+  <div>
+    <ul>
+      <li>[Demo](#demo)</li>
+      <li>[Titles](#titles)</li>
+      <li>[Footer](#footer)</li>
+      <li>[Dismissable cards](#dismissable-cards)</li>
+    </ul>
+  </div>
+  <div>
+    <ul>
+      <li>[Collapsable cards](#collapsable-cards)</li>
+      <li>[Elevation](#elevation)</li>
+      <li>[Building a custom card](#building-a-custom-card)</li>
+      <li>[Props](#props)</li>
+    </ul>
+  </div>
+</Stack>
+
+## Titles
+
+It's always a good idea to add titles to your cards so that users can quickly understand their contents.
+
+You can use the `title` prop along with `subtitle` to add extra context to your cards.
+
+```jsx
+import { VeeqoCommon } from '@veeqo/components';
+const { Card } = VeeqoCommon;
+
+<Card title="Test title">Your content goes here</Card>;
+```
+
+## Footer
+
+A card footer is a great place to add actions or secondary information.
+
+Use the `renderFooter` prop to add your footer content.
+
+<Story of={CardStories.Default} />
+
+## Dismissable cards
+
+If a card can be dismissed by the user, you can add an `onClose` handler which will render a close button inside the card header.
+
+<Story of={CardStories.Dismissable} />
+
+## Collapsable cards
+
+When a card has contents that take up a lot of space you might want to enable the `collapsable` prop so that users can shrink the card.
+
+<Story of={CardStories.CollapsableCard} />
+
+## Elevation
+
+Card contents are rendered onto a surface which can sit on different elevation levels depending on the context. For example, a card using within a modal will sit on a higher and level and overlap other content.
+
+We can use the `elevation` prop to specify which level our card sits on.
+
+```jsx
+<Card title="Modal card" elevation={4} onClose={() => {}}>
+  Your content goes here
+</Card>
+```
+
+## Building a custom card
+
+Sometimes you might need more flexibility when building cards with custom content - this could include full-width images, multiple sections or anything else.
+
+For those situations you can use Card sub-components:
+
+```jsx
+<Card.Surface>
+  <CardHeader title="Card title" subtitle="This is a subtitle" onClickClose={() => {}} />
+  <Card.Section>Some content in the first section</Card.Section>
+  <Card.Section>More content in another section</Card.Section>
+  <Card.Footer>
+    <Stack direction="horizontal" alignX="end">
+      <Button>Cancel</Button>
+      <Button variant="primary">Save changes</Button>
+    </Stack>
+  </Card.Footer>
+</Card.Surface>
+```
+
+Here are the available sub-components:
+
+<table>
+  <tr>
+    <td>
+      <b>Sub-component</b>
+    </td>
+    <td>
+      <b>Props</b>
+    </td>
+  </tr>
+  <tr>
+    <td>`Card.Surface`</td>
+    <td>`elevation`, `accent`</td>
+  </tr>
+  <tr>
+    <td>`Card.Section`</td>
+    <td>-</td>
+  </tr>
+  <tr>
+    <td>`Card.Footer`</td>
+    <td>-</td>
+  </tr>
+  <tr>
+    <td>`Card.CloseButton`</td>
+    <td>`onClick`</td>
+  </tr>
+  <tr>
+    <td>`Card.CollapseButton`</td>
+    <td>`isCollapsed`, `onClick`</td>
+  </tr>
+</table>
+
+## Props
+
+<Controls />