@ssa-ui-kit/widgets 0.0.1-alpha

package/src/components/UpcomingWorkouts/UpcomingWorkoutCard.tsx

@@ -0,0 +1,64 @@
+import { useTheme, css } from '@emotion/react';
+
+import {
+  Avatar,
+  Button,
+  Card,
+  CardContent,
+  Wrapper,
+  Typography,
+  Icon,
+} from '@ssa-ui-kit/core';
+
+import { IUpcomingWorkoutCardProps } from './types';
+import { contentWrapper } from './style';
+
+/**
+ *
+ * UI Component that use CardList to render a list of upcoming workouts
+ */
+export const UpcomingWorkoutCard = ({
+  image,
+  title,
+  workoutTime,
+  renderDetails,
+  onClick,
+}: IUpcomingWorkoutCardProps) => {
+  const theme = useTheme();
+  return (
+    <Card noShadow>
+      <Wrapper direction="row">
+        <Avatar size={42} image={image} />
+
+        <CardContent
+          css={css`
+            width: calc(100% - 42px);
+          `}>
+          <Wrapper direction="column">
+            <div css={contentWrapper}>
+              <Typography variant="h6">{title}</Typography>
+              <Button
+                endIcon={<Icon name="more" />}
+                variant="tertiary"
+                size="small"
+                onClick={onClick}
+              />
+            </div>
+
+            <div css={contentWrapper}>
+              <Typography
+                variant="subtitle"
+                color={theme.colors.greyDarker60}
+                as="p">
+                {renderDetails()}
+              </Typography>
+              <Typography variant="subtitle" as="p">
+                {workoutTime}
+              </Typography>
+            </div>
+          </Wrapper>
+        </CardContent>
+      </Wrapper>
+    </Card>
+  );
+};

package/src/components/UpcomingWorkouts/UpcomingWorkouts.spec.tsx

@@ -0,0 +1,56 @@
+import { fireEvent, screen, waitFor } from '../../../customTest';
+import UpcomingWorkouts from './index';
+
+describe('UpcomingWorkouts', () => {
+  it('Render component', async () => {
+    const mockClick = jest.fn();
+
+    render(
+      <UpcomingWorkouts
+        workouts={[
+          {
+            id: 'cardio_training',
+            image:
+              'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fmat%2Fmat_42.png?alt=media&token=462a4e3c-4e57-4f76-aad3-97b72c75b4ff',
+            title: 'HIIT Cardio training',
+            workoutTime: '8:00 AM',
+            handleClick: mockClick,
+            details: {
+              exercises: 40,
+              minutes: 20,
+            },
+          },
+          {
+            id: 'other_training',
+            image:
+              'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fmat%2Fmat_42.png?alt=media&token=462a4e3c-4e57-4f76-aad3-97b72c75b4ff',
+            title: 'Other training',
+            workoutTime: '8:00 AM',
+            handleClick: mockClick,
+            details: {
+              exercises: 40,
+              minutes: 20,
+            },
+          },
+        ]}
+      />,
+    );
+
+    await waitFor(async () => {
+      const list = await screen.findAllByRole('listitem');
+      const itemA = await screen.findByText('HIIT Cardio training');
+      const itemB = await screen.findByText('Other training');
+
+      expect(list.length).toBe(2);
+      expect(itemA).toBeInTheDocument();
+      expect(itemB).toBeInTheDocument();
+
+      const btn = screen.queryAllByRole('button')[0];
+
+      await fireEvent.click(btn);
+
+      expect(mockClick).toHaveBeenCalled();
+      expect(mockClick).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/components/UpcomingWorkouts/UpcomingWorkouts.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { UpcomingWorkouts } from './UpcomingWorkouts';
+
+export default {
+  title: 'Widgets/UpcomingWorkouts',
+  component: UpcomingWorkouts,
+} as Meta<typeof UpcomingWorkouts>;
+
+export const Default: StoryObj<typeof UpcomingWorkouts> = () => {
+  return (
+    <div style={{ background: '#f1f1f1', padding: 20 }}>
+      <UpcomingWorkouts
+        workouts={[
+          {
+            id: 'cardio_training',
+            image:
+              'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fmat%2Fmat_42.png?alt=media&token=462a4e3c-4e57-4f76-aad3-97b72c75b4ff',
+            title: 'HIIT Cardio training',
+            workoutTime: '8:00 AM',
+            details: {
+              exercises: 40,
+              minutes: 20,
+            },
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+Default.storyName = 'UpcomingWorkouts';

package/src/components/UpcomingWorkouts/UpcomingWorkouts.tsx

@@ -0,0 +1,27 @@
+import { Fragment } from 'react';
+
+import CardList from '@components/CardList';
+
+import { UpcomingWorkoutCard } from './UpcomingWorkoutCard';
+
+import { IUpcomingWorkoutsProps } from './types';
+
+export const UpcomingWorkouts = ({ workouts }: IUpcomingWorkoutsProps) => (
+  <CardList
+    title="Upcoming Workout"
+    items={workouts}
+    renderItem={(workout) => (
+      <UpcomingWorkoutCard
+        image={workout.image}
+        title={workout.title}
+        workoutTime={workout.workoutTime}
+        onClick={workout.handleClick}
+        renderDetails={() => (
+          <Fragment>
+            <strong>{workout.details.exercises}</strong> Exercises |{' '}
+            <strong>{workout.details.minutes}</strong> mins
+          </Fragment>
+        )}
+      />
+    )}></CardList>
+);

package/src/components/UpcomingWorkouts/index.ts

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

package/src/components/UpcomingWorkouts/style.ts

@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+
+export const contentWrapper = () => css`
+  display: flex;
+
+  justify-content: space-between;
+  align-items: center;
+
+  width: 100%;
+
+  padding-left: 15px;
+`;

package/src/components/UpcomingWorkouts/types.ts

@@ -0,0 +1,23 @@
+export interface IUpcomingWorkoutCardProps {
+  image: string;
+  title: string;
+  workoutTime: string;
+  renderDetails: () => React.ReactNode;
+  onClick?: () => void;
+}
+
+export type Workout = {
+  id: string;
+  image: string;
+  title: string;
+  workoutTime: string;
+  handleClick?: () => void;
+  details: {
+    exercises: number;
+    minutes: number;
+  };
+};
+
+export interface IUpcomingWorkoutsProps {
+  workouts: Array<Workout>;
+}

package/src/components/UserCard/UserCard.tsx

@@ -0,0 +1,46 @@
+import { Fragment } from 'react';
+import { css, Theme } from '@emotion/react';
+
+import { Icon } from '@ssa-ui-kit/core';
+
+import { User } from './types';
+
+import UserCardBMI from './UserCardBMI';
+import UserCardCredentials from './UserCardCredentials';
+
+const container = (theme: Theme) => css`
+  display: grid;
+  grid-template-columns: 50px auto;
+  align-items: center;
+
+  ${theme.mediaQueries.lg} {
+    grid-template-columns: auto;
+  }
+`;
+
+const UserCard = ({ user }: { user: User | null }) => (
+  <Fragment>
+    <div css={container}>
+      <div
+        css={(theme: Theme) => css`
+          ${theme.mediaQueries.lg} {
+            display: none;
+          }
+        `}>
+        <label
+          htmlFor="aside"
+          css={css`
+            cursor: pointer;
+          `}>
+          <Icon name="carrot-left" size={16} />
+        </label>
+      </div>
+
+      <UserCardCredentials name={user?.name} email={user?.email} />
+    </div>
+
+    <UserCardBMI weight={user?.weight} height={user?.height} age={user?.age} />
+  </Fragment>
+);
+
+export default UserCard;

package/src/components/UserCard/UserCardBMI.tsx

@@ -0,0 +1,37 @@
+import { css } from '@emotion/react';
+
+import UserCardItem from './UserCardItem';
+
+import { User } from './types';
+
+const listCards = css`
+  display: flex;
+  justify-content: space-between;
+
+  list-style: none;
+  padding: 0;
+
+  li {
+    max-width: 92px;
+  }
+`;
+
+const UserCardBMI = ({
+  weight,
+  height,
+  age,
+}: Partial<Pick<User, 'weight' | 'height' | 'age'>>) => (
+  <ul css={listCards}>
+    <li>
+      <UserCardItem value={weight || ''} unit="kg" caption="Weight" />
+    </li>
+    <li>
+      <UserCardItem value={height || ''} unit="cm" caption="Height" />
+    </li>
+    <li>
+      <UserCardItem value={age || ''} unit="yrs" caption="Age" />
+    </li>
+  </ul>
+);
+
+export default UserCardBMI;

package/src/components/UserCard/UserCardCredentials.tsx

@@ -0,0 +1,56 @@
+import { css, Theme } from '@emotion/react';
+
+import { Avatar, Button, Typography, Icon } from '@ssa-ui-kit/core';
+
+import { User } from './types';
+
+const container = (theme: Theme) => css`
+  display: flex;
+  align-items: center;
+
+  button {
+    display: none;
+  }
+
+  ${theme.mediaQueries.lg} {
+    justify-content: space-between;
+
+    button {
+      display: block;
+    }
+  }
+`;
+const UserCardCredentials = ({
+  name,
+  email,
+}: Partial<Pick<User, 'name' | 'email'>>) => (
+  <div css={container}>
+    <div
+      css={css`
+        display: flex;
+        align-items: center;
+      `}>
+      <Avatar
+        size={42}
+        image={
+          'https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/img%2Fface%2Fface_46.png?alt=media&token=aaa3a75c-4779-4887-b011-352f8dd6c214'
+        }
+      />
+      <div
+        css={css`
+          padding-inline: 15px;
+        `}>
+        <Typography variant="subtitle">{name}</Typography>
+        <Typography variant="body1">{email}</Typography>
+      </div>
+    </div>
+
+    <Button
+      variant="tertiary"
+      size="large"
+      endIcon={<Icon name="notification" />}
+    />
+  </div>
+);
+
+export default UserCardCredentials;

package/src/components/UserCard/UserCardItem.tsx

@@ -0,0 +1,42 @@
+import { Theme, css } from '@emotion/react';
+
+import { Typography, Wrapper } from '@ssa-ui-kit/core';
+
+const cardShadow = (theme: Theme) => css`
+  display: flex;
+
+  width: 92px;
+  height: 68px;
+
+  align-items: center;
+  flex-flow: column;
+  justify-content: center;
+
+  background: ${theme.colors.white};
+  border-radius: 16px;
+  box-shadow: 0 10px 40px rgba(42, 48, 57, 0.08);
+`;
+
+interface UserCardItemProps {
+  value: string | number;
+  unit: string;
+  caption: string;
+}
+
+const UserCardItem = ({ value, unit, caption }: UserCardItemProps) => (
+  <div css={cardShadow}>
+    <Wrapper
+      css={css`
+        align-items: baseline;
+        justify-content: center;
+      `}>
+      <Typography variant="h4" weight="bold">
+        {value}
+      </Typography>
+      <Typography variant="subtitle">{unit}</Typography>
+    </Wrapper>
+    <Typography variant="subtitle">{caption}</Typography>
+  </div>
+);
+
+export default UserCardItem;

package/src/components/UserCard/index.tsx

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

package/src/components/UserCard/types.ts

@@ -0,0 +1,8 @@
+export type User = {
+  id: string;
+  name: string;
+  email: string;
+  weight: number;
+  height: number;
+  age: number;
+};

package/src/components/UserProfile/UserProfile.e2e.ts

@@ -0,0 +1,21 @@
+import { test, Page } from '@playwright/test';
+import { SCREEN_SIZES } from '../../consts';
+
+const CUSTOM_SHOTS_PATH = './custom-shots/';
+
+const gotoPage = (page: Page) => {
+  return page.goto(
+    'http://localhost:6007/iframe.html?args=&id=widgets-userprofile--default&viewMode=story',
+  );
+};
+
+test('Widgets: UserProfile is opened', async ({ page }) => {
+  await gotoPage(page);
+  await page.setViewportSize(SCREEN_SIZES[1920]);
+  await page.getByTestId('trigger-button').click();
+
+  const SCREENSHOT_PREFIX = `${CUSTOM_SHOTS_PATH}widgets-user-profile--is-opened__`;
+  await page.screenshot({
+    path: `${SCREENSHOT_PREFIX}[w1920px].png`,
+  });
+});

package/src/components/UserProfile/UserProfile.spec.tsx

@@ -0,0 +1,55 @@
+import userEvent from '@testing-library/user-event';
+import { UserProfile } from './UserProfile';
+
+describe('UserProfile', () => {
+  it('Renders with a user name and email values', async () => {
+    const user = userEvent.setup();
+    const { getByText, getByTestId } = render(
+      <UserProfile
+        name="Josh Li"
+        email="Josh@gmail.com"
+        trigger="Trigger"
+        onClick={jest.fn()}
+      />,
+    );
+    await user.click(getByTestId('trigger-button'));
+
+    getByText(/Josh Li/i);
+    getByText(/Josh@gmail.com/i);
+  });
+
+  it('Renders with a Log out button', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByTestId } = render(
+      <UserProfile
+        name="Josh Li"
+        email="Josh@gmail.com"
+        trigger="Trigger"
+        onClick={jest.fn()}
+      />,
+    );
+    await user.click(getByTestId('trigger-button'));
+
+    getByRole('button', { name: new RegExp('Log Out', 'i') });
+  });
+
+  it('Renders with click prop', async () => {
+    const user = userEvent.setup();
+    const mockOnClick = jest.fn();
+    const { getByRole, getByTestId } = render(
+      <UserProfile
+        name="Josh Li"
+        email="Josh@gmail.com"
+        trigger="Trigger"
+        onClick={mockOnClick}
+      />,
+    );
+    await user.click(getByTestId('trigger-button'));
+
+    const buttonEl = getByRole('button', { name: new RegExp('Log Out', 'i') });
+
+    await user.click(buttonEl);
+
+    expect(mockOnClick).toBeCalledTimes(1);
+  });
+});

package/src/components/UserProfile/UserProfile.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from '@ssa-ui-kit/core';
+import { UserProfile } from './UserProfile';
+
+export default {
+  title: 'Widgets/UserProfile',
+  component: UserProfile,
+} as Meta<typeof UserProfile>;
+
+export const Default: StoryObj<typeof UserProfile> = () => {
+  return (
+    <UserProfile
+      name="Josh Li"
+      email="Josh@gmail.com"
+      trigger={<Avatar size={42} image="https://via.placeholder.com/42x42" />}
+      onClick={() => alert('Clicked!')}
+    />
+  );
+};
+
+Default.args = {};

package/src/components/UserProfile/UserProfile.tsx

@@ -0,0 +1,51 @@
+import { useTheme } from '@emotion/react';
+import {
+  Button,
+  Icon,
+  Popover,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeading,
+  PopoverTrigger,
+} from '@ssa-ui-kit/core';
+import { UserProfileProps } from './types';
+import {
+  UserInfo,
+  ContentWrapper,
+  LogoutWrapper,
+  ResetBtnStyles,
+  CustomButton,
+} from './styles';
+
+export const UserProfile = ({
+  name,
+  email,
+  trigger,
+  onClick,
+}: UserProfileProps) => {
+  const theme = useTheme();
+  return (
+    <Popover placement="bottom-end">
+      <PopoverTrigger css={ResetBtnStyles}>{trigger}</PopoverTrigger>
+      <PopoverContent css={ContentWrapper}>
+        <div css={UserInfo}>
+          <PopoverHeading variant="h5" weight="bold">
+            {name}
+          </PopoverHeading>
+          <PopoverDescription
+            css={{ fontSize: 14, marginTop: 6 }}
+            weight="regular"
+            color={theme.colors.greyDropdownFocused}>
+            {email}
+          </PopoverDescription>
+        </div>
+        <div css={LogoutWrapper}>
+          <Button variant="info" css={CustomButton} onClick={onClick}>
+            <Icon name="log-out" size={15} color={theme.colors.white} />
+            Log Out
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/UserProfile/index.ts

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

package/src/components/UserProfile/styles.ts

@@ -0,0 +1,47 @@
+import { Theme, css } from '@emotion/react';
+
+export const ResetBtnStyles = css`
+  padding: 0;
+  height: auto;
+  background: none;
+
+  &:focus,
+  &:hover {
+    border: none;
+    background: none;
+    box-shadow: none;
+
+    &::before {
+      border: none;
+    }
+  }
+`;
+
+export const ContentWrapper = (theme: Theme) => css`
+  width: 224px;
+  background: ${theme.colors.greyPopoverLight};
+  border-radius: 20px;
+  box-shadow: 0px 4px 15px 0px ${theme.colors.black25};
+`;
+
+export const UserInfo = css`
+  gap: 2px;
+  width: 100%;
+  padding: 10px;
+`;
+
+export const LogoutWrapper = (theme: Theme) => css`
+  width: 100%;
+  padding: 10px 10px 18px 10px;
+  border-top: 0.4px solid ${theme.colors.greyGraphite70};
+`;
+
+export const CustomButton = css`
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px;
+  font-size: 14px;
+  line-height: 19px;
+  font-weight: 500;
+`;

package/src/components/UserProfile/types.ts

@@ -0,0 +1,6 @@
+export interface UserProfileProps {
+  name: string;
+  email: string;
+  trigger: string | JSX.Element;
+  onClick: () => void;
+}