@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Button/types.ts

@@ -0,0 +1,48 @@
+import { AriaAttributes } from 'react';
+import { SerializedStyles, Theme } from '@emotion/react';
+import { MouseEventHandler } from 'react';
+
+/**
+ * https://www.w3.org/WAI/ARIA/apg/patterns/button/
+ */
+type ButtonAriaProps = Pick<
+  AriaAttributes,
+  | 'aria-labelledby'
+  | 'aria-label'
+  | 'aria-describedby'
+  | 'aria-disabled'
+  | 'aria-pressed'
+  | 'aria-current'
+>;
+
+export interface IButtonProps extends ButtonAriaProps {
+  block?: boolean;
+  size?: keyof MainSizes;
+  text?: string;
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+  variant?: keyof IButtonVariants | 'custom';
+  type?: 'button' | 'reset' | 'submit';
+  isDisabled?: boolean;
+  className?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  children?: React.ReactNode;
+}
+
+export interface IButtonVariants {
+  primary: (theme: Theme) => SerializedStyles;
+  info: (theme: Theme) => SerializedStyles;
+  secondary: (theme: Theme) => SerializedStyles;
+  tertiary: (theme: Theme) => SerializedStyles;
+  attention: (theme: Theme) => SerializedStyles;
+}
+
+export type IButtonTextProps = {
+  text: string;
+  className?: string;
+  testId?: string;
+};
+
+export type IColoredButtonTextProps = Required<Pick<IButtonProps, 'size'>> & {
+  text: string;
+};

package/src/components/ButtonGroup/ButtonGroup.spec.tsx

@@ -0,0 +1,37 @@
+import userEvent from '@testing-library/user-event';
+import { ButtonGroup } from './ButtonGroup';
+import { items } from './helpers';
+
+describe('ButtonGroup', () => {
+  it('Renders all buttons', () => {
+    const { getAllByRole, getByRole } = render(
+      <ButtonGroup items={items} onClick={(item) => item} />,
+    );
+
+    const itemsEls = getAllByRole('button');
+    expect(itemsEls.length).toBe(items.length);
+
+    for (const item of items) {
+      getByRole('button', { name: item.text });
+    }
+  });
+
+  it('Calls onClick handlers when clicked', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+
+    const { getByRole } = render(
+      <ButtonGroup items={items} onClick={mockOnClick} />,
+    );
+
+    for (const item of items) {
+      const buttonEl = getByRole('button', {
+        name: item.text,
+      });
+      await user.click(buttonEl);
+      expect(mockOnClick).toHaveBeenCalledWith(item);
+    }
+
+    expect(mockOnClick).toBeCalledTimes(items.length);
+  });
+});

package/src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { css, useTheme } from '@emotion/react';
+import { ButtonGroup } from './ButtonGroup';
+import { items } from './helpers';
+
+export default {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup,
+} as Meta<typeof ButtonGroup>;
+
+export const Default: StoryObj<typeof ButtonGroup> = () => {
+  return <ButtonGroup items={items} onClick={(item) => item} />;
+};
+
+Default.args = {};
+
+export const CustomStyle: StoryObj<typeof ButtonGroup> = () => {
+  const theme = useTheme();
+  return (
+    <div
+      css={css`
+        width: 100%;
+        background: #f2f4f7;
+        padding: 20px;
+        border-radius: 20px;
+      `}>
+      <ButtonGroup
+        items={items}
+        buttonStyles={css`
+          background: ${theme.colors.white};
+
+          &:hover {
+            background: ${theme.colors.greyLighter};
+          }
+        `}
+        onClick={(item) => item}
+      />
+    </div>
+  );
+};
+
+CustomStyle.args = {};

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import Button from '@components/Button';
+import Typography from '@components/Typography';
+import { ButtonGroupProps, ButtonGroupItem } from './types';
+import { ButtonItem } from './styles';
+
+export const ButtonGroup = ({
+  items,
+  buttonStyles,
+  onClick,
+}: ButtonGroupProps) => {
+  const [activeBtn, setActiveBtn] = useState(items[0]);
+  const handleClick = (item: ButtonGroupItem) => () => {
+    setActiveBtn(item);
+    onClick(item);
+  };
+
+  return (
+    <React.Fragment>
+      {items.map((item) => {
+        const isActive = activeBtn.id === item.id && !item.isDisabled;
+        return (
+          <Button
+            key={item.id}
+            aria-pressed={isActive}
+            variant="secondary"
+            size="small"
+            isDisabled={item.isDisabled}
+            aria-disabled={item.isDisabled}
+            onClick={handleClick(item)}
+            css={[ButtonItem, buttonStyles]}
+            className={isActive ? 'active' : ''}>
+            <Typography variant="body1">{item.text}</Typography>
+          </Button>
+        );
+      })}
+    </React.Fragment>
+  );
+};

package/src/components/ButtonGroup/helpers.ts

@@ -0,0 +1,7 @@
+import { ButtonGroupItem } from './types';
+
+export const items: Array<ButtonGroupItem> = [
+  { id: 1, text: 'All (10)', isDisabled: false },
+  { id: 2, text: 'Running (117)', isDisabled: false },
+  { id: 3, text: 'Stopped (2)', isDisabled: false },
+];

package/src/components/ButtonGroup/index.ts

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './ButtonGroup';
+export * from './types';

package/src/components/ButtonGroup/styles.ts

@@ -0,0 +1,53 @@
+import { Theme, css } from '@emotion/react';
+
+export const ButtonItem = (theme: Theme) => css`
+  justify-content: center;
+  min-width: 40px;
+  height: auto;
+  padding: 8px;
+  text-align: center;
+  letter-spacing: 0em;
+  border-radius: 0;
+  box-shadow: none;
+  user-select: none;
+
+  &:hover,
+  &:focus,
+  &:active {
+    box-shadow: none;
+  }
+
+  &:first-of-type {
+    border-radius: 6px 0 0 6px;
+  }
+
+  &:last-child {
+    border-radius: 0 6px 6px 0;
+  }
+
+  &:not(:last-child) {
+    margin-right: 1px;
+  }
+
+  &.active {
+    background: ${theme.colors.greyFocused};
+  }
+
+  &:disabled {
+    background: ${theme.colors.grey};
+
+    p {
+      color: ${theme.colors.grey40};
+    }
+  }
+
+  ${theme.mediaQueries.md} {
+    min-width: 65px;
+    padding: 12px;
+
+    p {
+      font-size: 13.3px;
+      line-height: 15px;
+    }
+  }
+`;

package/src/components/ButtonGroup/types.ts

@@ -0,0 +1,13 @@
+import { SerializedStyles } from '@emotion/react';
+
+export type ButtonGroupItem = {
+  id: number;
+  text: string;
+  isDisabled?: boolean;
+};
+
+export interface ButtonGroupProps {
+  items: Array<ButtonGroupItem>;
+  onClick: (item: ButtonGroupItem) => void;
+  buttonStyles?: SerializedStyles;
+}

package/src/components/Card/Card.spec.tsx

@@ -0,0 +1,94 @@
+import { userEvent } from '@storybook/testing-library';
+import { screen } from '../../../customTest';
+
+import Icon from '@components/Icon';
+import CardContent from '@components/CardContent';
+import CardHeader from '@components/CardHeader';
+
+import Card from './index';
+
+describe('Card', () => {
+  it('Render Card', () => {
+    render(
+      <div>
+        <Card>
+          <CardHeader>
+            <h2>Card</h2>
+          </CardHeader>
+          <CardContent>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+              eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+              suscipit arcu ligula non enim.
+            </p>
+          </CardContent>
+        </Card>
+      </div>,
+    );
+
+    const cardHeader = screen.getByText(/card/i).closest('div');
+
+    expect(cardHeader).toHaveStyle('background: inherit');
+  });
+
+  it('Render Card with icon header', async () => {
+    render(
+      <div>
+        <Card>
+          <CardHeader icon={<Icon name="calendar" size={57} />}>
+            <h2>Card</h2>
+          </CardHeader>
+          <CardContent>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+              eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+              suscipit arcu ligula non enim.
+            </p>
+          </CardContent>
+        </Card>
+      </div>,
+    );
+
+    const icon = await screen.findByTitle(/calendar/i);
+
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('Render Card with transparent header', () => {
+    render(
+      <div>
+        <CardHeader transparent>
+          <h2>Card</h2>
+        </CardHeader>
+        <Card>
+          <CardContent>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+              eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+              suscipit arcu ligula non enim.
+            </p>
+          </CardContent>
+        </Card>
+      </div>,
+    );
+
+    const cardHeader = screen.getByText(/card/i).closest('div');
+
+    expect(cardHeader).toHaveStyle('background: transparent');
+  });
+
+  it('Handles click on a Card', async () => {
+    const onClick = jest.fn();
+    render(
+      <Card onClick={onClick}>
+        <CardHeader>Header</CardHeader>
+        <CardContent>Content</CardContent>
+      </Card>,
+    );
+
+    const cardBtnEl = screen.getByRole('button', { name: 'Header Content' });
+    await userEvent.click(cardBtnEl);
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});

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

@@ -0,0 +1,253 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Typography from '@components/Typography';
+import Icon from '@components/Icon';
+import Switch, { SwitchContextProvider } from '@components/Switch';
+import Button from '@components/Button';
+import ProgressCircle from '@components/ProgressCircle';
+import CardHeader from '@components/CardHeader';
+import CardContent from '@components/CardContent';
+import Avatar from '@components/Avatar';
+import Wrapper from '@components/Wrapper';
+
+import Card from './index';
+import { CardProps } from './types';
+import ResponsiveImage from '@components/ResponsiveImage';
+import { useTheme } from '@emotion/react';
+
+export default {
+  title: 'Components/Card',
+  component: Card,
+  parameters: {
+    docs: {
+      description: {
+        component: 'A card is a container that holds information',
+      },
+    },
+  },
+  argTypes: {
+    noShadow: {
+      control: 'boolean',
+    },
+  },
+} as Meta<typeof Card>;
+
+const flexContainer = {
+  display: 'flex',
+
+  justifyContent: 'space-between',
+  alignItems: 'center',
+
+  width: '100%',
+
+  paddingLeft: 15,
+};
+
+export const Basic: StoryObj<typeof Card> = ({ noShadow }: CardProps) => {
+  return (
+    <Card noShadow={noShadow}>
+      <CardHeader>
+        <Typography variant="h2">Card</Typography>
+      </CardHeader>
+
+      <CardContent>
+        <Typography variant="body1">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+          eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+          suscipit arcu ligula non enim.
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+Basic.args = {};
+
+export const IconHeader: StoryObj<typeof Card> = ({ noShadow }: CardProps) => {
+  const theme = useTheme();
+  return (
+    <Card noShadow={noShadow}>
+      <CardHeader
+        icon={
+          <ResponsiveImage
+            css={{
+              filter: `drop-shadow(0px 5px 5px ${theme.colors.purpleDark}`,
+            }}
+            srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fheart%2Fheart_64.png?alt=media&token=aca1639b-62f5-44ed-a0d1-3cea8e4797e2 64w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fheart%2Fheart_48.png?alt=media&token=7ef68a25-5362-48b9-b359-c46b48d1db54 48w"
+            sizes="(min-width: 1440px) 64px, 48px"
+            src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fheart%2Fheart_48.png?alt=media&token=7ef68a25-5362-48b9-b359-c46b48d1db54"
+            alt="Heart"
+          />
+        }>
+        <Typography variant="h2">Card</Typography>
+      </CardHeader>
+
+      <CardContent>
+        <Typography variant="body1">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+          eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+          suscipit arcu ligula non enim.
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+IconHeader.args = {};
+
+export const FloatHeader: StoryObj<typeof Card> = ({ noShadow }: CardProps) => {
+  return (
+    <div>
+      <CardHeader transparent>
+        <Typography variant="h2">Card</Typography>
+      </CardHeader>
+
+      <Card noShadow={noShadow}>
+        <CardContent>
+          <Typography variant="body1">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+            suscipit arcu ligula non enim.
+          </Typography>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+FloatHeader.args = {};
+
+export const ItemCard: StoryObj<typeof Card> = ({ noShadow }: CardProps) => {
+  const image = 'https://via.placeholder.com/42x42';
+  const name = 'John Doe';
+
+  return (
+    <Card noShadow={noShadow}>
+      <Wrapper direction="row" avatarSize={42}>
+        <Avatar size={42} image={image} className="lostpixel-ignore" />
+
+        <CardContent
+          style={{
+            width: `calc(100% - 42px)`,
+            paddingLeft: 15,
+          }}>
+          <div>
+            <Typography variant="subtitle">{name}</Typography>
+            <Typography variant="body1">Goal 25 km | 19,7 km</Typography>
+          </div>
+
+          <ProgressCircle
+            {...{
+              size: 50,
+              max: 100,
+              currentValue: 70,
+              infoContent: <Typography variant="body1">70%</Typography>,
+              color: 'purple',
+            }}
+          />
+        </CardContent>
+      </Wrapper>
+    </Card>
+  );
+};
+ItemCard.args = {};
+
+export const ItemCardAction: StoryObj<typeof Card> = ({
+  noShadow,
+}: CardProps) => {
+  const image = 'https://via.placeholder.com/42x42';
+  const name = 'John Doe';
+
+  return (
+    <SwitchContextProvider initialState={true}>
+      <Card noShadow={noShadow}>
+        <Wrapper direction="row">
+          <Avatar size={42} image={image} className="lostpixel-ignore" />
+
+          <CardContent
+            style={{
+              width: 'calc(100% - 42px)',
+            }}>
+            <Wrapper direction="column">
+              <div style={flexContainer}>
+                <Typography variant="h6">{name}</Typography>
+                <Button
+                  variant="tertiary"
+                  size="small"
+                  onClick={() => console.log}
+                  endIcon={<Icon name="more" />}
+                />
+              </div>
+
+              <div style={flexContainer}>
+                <Typography variant="body1">Goal 25 km | 19,7 km</Typography>
+
+                <Switch label="switch" />
+              </div>
+            </Wrapper>
+          </CardContent>
+        </Wrapper>
+      </Card>
+    </SwitchContextProvider>
+  );
+};
+ItemCardAction.args = {};
+
+export const ItemCardAvatar: StoryObj<typeof Card> = ({
+  noShadow,
+}: CardProps) => {
+  const image = 'https://via.placeholder.com/64x64';
+
+  return (
+    <Card noShadow={noShadow}>
+      <Avatar size={64} image={image} className="lostpixel-ignore" />
+
+      <CardContent>
+        <Typography variant="body1">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+          eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+          suscipit arcu ligula non enim.
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+ItemCardAvatar.args = {};
+
+export const NoShadow: StoryObj<typeof Card> = ({ noShadow }: CardProps) => {
+  return (
+    <Card noShadow={noShadow}>
+      <CardHeader>
+        <Typography variant="h2">Card</Typography>
+      </CardHeader>
+
+      <CardContent>
+        <Typography variant="body1">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+          eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+          suscipit arcu ligula non enim.
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+NoShadow.args = {};
+
+export const Clickable: StoryObj<typeof Card> = ({ onClick }: CardProps) => {
+  return (
+    <Card onClick={onClick}>
+      <CardHeader>
+        <Typography variant="h2">A clickable card</Typography>
+      </CardHeader>
+
+      <CardContent>
+        <Typography variant="body1">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+          eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+          suscipit arcu ligula non enim.
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+};
+Clickable.args = {
+  onClick: () => alert('Clicked!'),
+};

package/src/components/Card/Card.tsx

@@ -0,0 +1,13 @@
+import CardBase from './CardBase';
+
+import { CardProps } from './types';
+
+const Card = ({ children, onClick, ...props }: CardProps) => {
+  return (
+    <CardBase {...props} as={onClick ? 'button' : 'div'} onClick={onClick}>
+      {children}
+    </CardBase>
+  );
+};
+
+export default Card;

package/src/components/Card/CardBase.tsx

@@ -0,0 +1,20 @@
+import styled from '@emotion/styled';
+
+const CardBase = styled.div<{ noShadow?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 20px;
+
+  background: #fff;
+
+  box-shadow: ${({ theme, noShadow }) =>
+    !noShadow && `0px 10px 40px ${theme.colors.greyDarker60}`};
+  border-radius: 10px;
+  border: none;
+
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
+`;
+
+export default CardBase;

package/src/components/Card/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Card';
+export * from './CardBase';

package/src/components/Card/types.ts

@@ -0,0 +1,8 @@
+import { CommonProps } from '@global-types/emotion';
+
+export interface CardProps extends CommonProps {
+  noShadow?: boolean;
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+}

package/src/components/CardContent/CardContent.tsx

@@ -0,0 +1,17 @@
+import { CommonProps } from '@global-types/emotion';
+import CardContentBase from './CardContentBase';
+
+export interface CardProps extends CommonProps {
+  children: React.ReactNode;
+  style?: React.CSSProperties;
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  className?: string;
+  ariaLabelledby?: string;
+  role?: string;
+}
+
+const CardContent = ({ children, ...props }: CardProps) => (
+  <CardContentBase {...props}>{children}</CardContentBase>
+);
+
+export default CardContent;

package/src/components/CardContent/CardContentBase.tsx

@@ -0,0 +1,12 @@
+import styled from '@emotion/styled';
+
+const CardContentBase = styled.div<{ direction?: string }>`
+  display: flex;
+  justify-content: space-between;
+
+  flex-direction: ${({ direction }) => (direction ? direction : 'row')};
+  align-items: ${({ direction }) =>
+    direction === 'column' ? 'normal' : 'center'};
+`;
+
+export default CardContentBase;

package/src/components/CardContent/index.ts

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