@ssa-ui-kit/widgets 0.0.2-alpha → 0.0.3-alpha

package/src/components/UpcomingWorkouts/index.ts

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

package/src/components/UpcomingWorkouts/style.ts

@@ -1,12 +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;
-`;
+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

@@ -1,23 +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>;
-}
+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

@@ -1,46 +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;
+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

@@ -1,37 +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;
+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

@@ -1,56 +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;
+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

@@ -1,42 +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;
+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

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

package/src/components/UserCard/types.ts

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

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

@@ -1,21 +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`,
-  });
-});
+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

@@ -1,55 +1,91 @@
-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);
-  });
-});
+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);
+  });
+
+  it('renders with custom text', async () => {
+    const user = userEvent.setup();
+    const { getByRole, queryByRole, getByTestId } = render(
+      <UserProfile
+        name="Josh Li"
+        email="Josh@gmail.com"
+        trigger="Trigger"
+        logOutText="Leave"
+        onClick={jest.fn()}
+      />,
+    );
+
+    await user.click(getByTestId('trigger-button'));
+
+    getByRole('button', { name: 'Log out Leave' });
+    expect(queryByRole('button', { name: 'Log Out' })).not.toBeInTheDocument();
+  });
+
+  it('renders with custom styles', async () => {
+    const user = userEvent.setup();
+    const { getByRole, getByTestId } = render(
+      <UserProfile
+        name="Josh Li"
+        email="Josh@gmail.com"
+        trigger="Trigger"
+        onClick={jest.fn()}
+        css={{ backgroundColor: 'pink' }}
+      />,
+    );
+
+    await user.click(getByTestId('trigger-button'));
+
+    const dialogEl = getByRole('dialog');
+    expect(dialogEl).toHaveStyle(`background-color: pink`);
+  });
+});