@soul-refiner/design-system 0.0.14 → 0.0.16

package/src/actions/Switch/Switch.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import switchStyles from "./Switch.module.scss";
+
+export interface SwitchProps {
+  active: string;
+  fluid?: boolean;
+  onClick?: (option: string) => void;
+  options: string[];
+}
+
+export const Switch = ({
+  active,
+  fluid = true,
+  onClick,
+  options,
+}: SwitchProps) => {
+  return (
+    <div
+      className={`${switchStyles.switch} switch ${
+        !!fluid ? switchStyles.fluid : ""
+      }`}
+    >
+      {options.map((option, index) => (
+        <div
+          key={"switch-option-" + index.toString(36)}
+          className={active === option ? "active" : "inactive"}
+          onClick={() => onClick && onClick(option)}
+        >
+          {option}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/actions/Switch/index.ts

@@ -0,0 +1 @@
+export { Switch, type SwitchProps } from "./Switch";

package/src/actions/index.ts

@@ -0,0 +1,5 @@
+export { Button, type ButtonProps } from "./Button";
+export { Dropdown, type DropdownProps } from "./Dropdown";
+export { Dropzone, type DropzoneProps } from "./Dropzone";
+export { Rate, type RateProps } from "./Rate";
+export { Switch, type SwitchProps } from "./Switch";

package/src/cards/CourseCard/CourseCard.module.scss

@@ -0,0 +1,219 @@
+@use "@soul-refiner/styles/mixins";
+
+.coursecard {
+  position: relative;
+  display: block;
+  cursor: pointer;
+
+  [class~="thumbnail"] {
+    width: 100%;
+    object-fit: cover;
+    object-position: center center;
+    filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
+    border-radius: 12px;
+  }
+
+  [class~="preview-content"] {
+    @include mixins.flex($align: flex-end, $justify: space-between);
+    z-index: 5;
+    width: 100%;
+    position: relative;
+    & > h2 {
+      font-weight: 800;
+    }
+    & > p {
+      color: var(--color-grey-3);
+      font-size: 12px;
+      line-height: 24px;
+      display: block;
+    }
+    & > div {
+      gap: 8px;
+      & > button {
+        height: 36px;
+      }
+    }
+  }
+
+  [class~="header"] {
+    & > div > h2 {
+      @include mixins.font-clamp(1);
+    }
+  }
+
+  [class~="subtitle"] {
+    font-size: 13px;
+    line-height: 13px;
+    color: var(--color-grey-0);
+    &::before {
+      content: "by ";
+      font-style: italic;
+      font-weight: 200;
+      color: var(--color-grey-5);
+    }
+  }
+
+  [class~="hover-content"] {
+    display: none;
+    background-color: transparent;
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    position: relative;
+    z-index: 5;
+    width: 100%;
+    padding: 8px;
+    [class~="header"] {
+      @include mixins.flex();
+      width: 100%;
+      & > div:first-child {
+        margin-right: auto;
+      }
+      & > div:last-child {
+        @include mixins.flex($gap: 10px);
+      }
+      & > div > h2 {
+        color: var(--color-blue-4);
+        line-height: 28px;
+      }
+    }
+    [class~="header"] + div {
+      gap: 8px;
+      & > button {
+        height: 36px;
+      }
+    }
+    [class~="rating"] {
+      @include mixins.flex($align: center, $gap: 6px);
+      p {
+        @include mixins.font(400, 12px, 16px);
+        color: var(--color-grey-4);
+      }
+    }
+  }
+
+  &[class~="video"] {
+    width: 394px;
+    [class~="preview-content"] {
+      padding: 8px;
+      & > h2 {
+        padding-left: 8px;
+      }
+      & > p {
+        padding-right: 13px;
+      }
+    }
+    [class~="thumbnail"] {
+      height: 202px;
+    }
+    [class~="hover-content"] {
+      padding: 0px 24px 26px;
+      margin-top: -24px;
+      & > p {
+        @include mixins.font-clamp(3);
+      }
+    }
+    &:hover {
+      width: 426px;
+      transform: translate(-16px, -64px);
+      [class~="thumbnail"] {
+        height: 240px;
+      }
+      &::after {
+        background: linear-gradient(
+          0deg,
+          #ffffff 50%,
+          rgba(255, 255, 255, 0.85) 55%,
+          rgba(255, 255, 255, 0.1) 80%
+        );
+      }
+    }
+  }
+
+  &[class~="audio"],
+  &[class~="written"] {
+    width: 195px;
+
+    [class~="preview-content"] {
+      padding: 11px 0px;
+      & > p {
+        white-space: nowrap;
+        position: relative;
+        top: 2px;
+      }
+      & > div > div > p {
+        width: 100px;
+        @include mixins.font-clamp();
+      }
+    }
+    [class~="thumbnail"] {
+      height: 202px;
+    }
+    [class~="hover-content"] {
+      [class~="header"] {
+        & > div > h2:first-of-type {
+          position: absolute;
+          top: -24px;
+        }
+      }
+      margin-top: -24px;
+      padding-bottom: 24px;
+      & > p {
+        @include mixins.font-clamp(5);
+      }
+    }
+    &:hover {
+      width: 286px;
+      transform: translate(-45px, -64px);
+      &::after {
+        background: linear-gradient(
+          0deg,
+          #ffffff 44%,
+          rgba(255, 255, 255, 1) 58%,
+          rgba(255, 255, 255, 0.1) 100%
+        );
+      }
+    }
+  }
+
+  &[class~="written"] {
+    [class~="actions-top"] {
+      position: absolute;
+      top: -180px;
+      right: 0;
+      padding: 4px 8px;
+      border-radius: 12px;
+      background-color: #ffffff75;
+    }
+    [class~="hover-content"] {
+      [class~="header"] {
+        & > div > h2:first-of-type {
+          position: unset;
+          top: unset;
+        }
+      }
+    }
+  }
+
+  &:hover {
+    border-radius: 16px;
+    box-shadow: 0px 3.87273px 14.5227px rgba(0, 0, 0, 0.33);
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: 16px;
+    }
+
+    [class~="preview-content"] {
+      display: none;
+    }
+
+    [class~="hover-content"] {
+      @include mixins.flex($dir: column, $gap: 8px);
+    }
+  }
+}

package/src/cards/CourseCard/CourseCard.spec.js

@@ -0,0 +1,60 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+
+import { CourseCard } from "./CourseCard";
+
+const props = {
+  description: "The Conquer Series, unrivaled in its scope and authority, lays out the process to permanently stop watching porn with proven strategies and tools that have helped thousands of people around the world.",
+  episodes: 6,
+  onFavorite: jest.fn(),
+  onAddToCollection: jest.fn(),
+  owner: {
+    id: 76,
+    avatar: "https://source.unsplash.com/random/64x64/?christian",
+    firstName: "Soul",
+    lastName: "Refiner",
+    url: "",
+  },
+  plans: [
+    {
+      type: "rent",
+      price: 129,
+    },
+  ],
+  ratings: [4, 2, 4, 5, 3, 5, 3, 5, 3, 3, 4, 5, 4],
+  showAuthor: true,
+  title: "Conquer Series",
+  thumbnail: "https://source.unsplash.com/random/300x300/?christian",
+  type: "video"
+}
+
+describe("Course Card", () => {
+  it("renders", () => {
+    render(<CourseCard {...props} />);
+    expect(screen.getAllByText("Conquer Series"));
+    expect(screen.getAllByText("Soul Refiner"));
+    expect(screen.getByText("Rent $129"));
+    expect(screen.getByText("6 episodes"));
+  });
+
+  it("calculates the right rating", () => {
+    render(<CourseCard {...props} />);
+    expect(screen.getByText("(13)"));
+  });
+
+  it("fires the onFavorite handler", () => {
+    render(<CourseCard {...props} />);
+    const favoriteButton = screen.getByTestId("favorite-icon");
+    fireEvent.click(favoriteButton);
+    expect(props.onFavorite).toHaveBeenCalled();
+  });
+
+  it("fires the onAddToCollection handler", () => {
+    render(<CourseCard {...props} />);
+    const joinButton = screen.getByTestId("plus-icon");
+    fireEvent.click(joinButton);
+    expect(props.onAddToCollection).toHaveBeenCalled();
+  });
+})

package/src/cards/CourseCard/CourseCard.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+import { User } from "@soul-refiner/models";
+import { capitalize } from "@soul-refiner/utils/src";
+import { PlayOutline, Plus, Star, StarOutline } from "@soul-refiner/icons/src";
+import courseCardStyles from "./CourseCard.module.scss";
+import { Avatar, StarRating } from "../../iconography";
+
+export interface CourseCardProps {
+  description: string;
+  episodes: number;
+  favorited: boolean;
+  href: string;
+  onAddToCollection: () => void;
+  onFavorite: () => void;
+  owner: Partial<User>;
+  plans: Partial<
+    {
+      price: number;
+      type: "rent" | "buy";
+    }[]
+  >;
+  ratings: number[];
+  type: "video" | "audio" | "written";
+  showAuthor: boolean;
+  style: React.CSSProperties;
+  thumbnail: string;
+  title: string;
+}
+
+export const CourseCard = ({
+  description,
+  episodes,
+  favorited,
+  href,
+  onAddToCollection,
+  onFavorite,
+  owner,
+  plans,
+  ratings,
+  type = "video",
+  showAuthor,
+  style,
+  thumbnail,
+  title,
+}: CourseCardProps) => {
+  const additionalStyles = {};
+  const episodePhrase = `${episodes} ${type === "video" ? "episode" : "ep"}${
+    episodes !== 1 && type === "video" ? "s" : ""
+  }`;
+  const rating = Number(
+    ratings
+      .reduce((prev, curr) => {
+        return prev + curr / ratings.length;
+      }, 0)
+      .toPrecision(2)
+  );
+
+  return (
+    <a
+      className={`${courseCardStyles.coursecard} ${type}`}
+      href={href}
+      style={{ ...additionalStyles, ...style }}
+    >
+      <img
+        alt={title}
+        className="thumbnail"
+        src={thumbnail}
+        title={`${title} by ${owner?.firstName} ${owner?.lastName}`}
+      />
+      <div className="preview-content">
+        {showAuthor ? (
+          <Avatar
+            size={36}
+            url={owner.avatar ?? ""}
+            subtitle={`${owner?.firstName} ${owner?.lastName}`}
+            title={title}
+          />
+        ) : (
+          <h2 className="body body-large">{title}</h2>
+        )}
+        {!!episodes && <p>{episodePhrase}</p>}
+      </div>
+      <div className="hover-content">
+        <div className="header">
+          <div>
+            <h2 className="bold body body-large">
+              {type === "video"
+                ? "Watch"
+                : type === "audio"
+                ? "Listen"
+                : "Read"}{" "}
+              with {owner?.firstName} {owner?.lastName}
+            </h2>
+            <h2 className="bold body body-large">
+              {capitalize(plans[0]?.type ?? "")} ${plans[0]?.price}
+            </h2>
+          </div>
+          <div className={type === "written" ? "actions-top" : ""}>
+            <PlayOutline
+              fill="var(--color-grey-0)"
+              iconSize={17}
+              onClick={() => {}}
+              size={24}
+            />
+            <Plus
+              data-testid="plus-icon"
+              fill="var(--color-grey-0)"
+              iconSize={19}
+              onClick={onAddToCollection}
+              size={24}
+            />
+            {favorited ? (
+              <Star
+                data-testid="favorite-icon"
+                fill="var(--color-grey-0)"
+                iconSize={19}
+                onClick={onFavorite}
+                size={24}
+              />
+            ) : (
+              <StarOutline
+                data-testid="favorite-icon"
+                fill="var(--color-grey-0)"
+                iconSize={19}
+                onClick={onFavorite}
+                size={24}
+              />
+            )}
+          </div>
+        </div>
+        <Avatar
+          size={36}
+          url={owner.avatar ?? ""}
+          subtitle={`${owner?.firstName} ${owner?.lastName}`}
+          title={title}
+        />
+        <p>{description}</p>
+        <div className="rating">
+          <StarRating rating={rating} width={80} />
+          <p>({ratings.length})</p>
+        </div>
+      </div>
+    </a>
+  );
+};

package/src/cards/CourseCard/index.ts

@@ -0,0 +1 @@
+export { CourseCard, type CourseCardProps } from "./CourseCard";

package/src/cards/EpisodeCard/EpisodeCard.module.scss

@@ -0,0 +1,69 @@
+@use "@soul-refiner/styles/mixins";
+
+.episodecard {
+  @include mixins.flex($gap: 32px);
+  height: 196px;
+  width: 1000px;
+  padding: 18px 40px 18px 16px;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  border-radius: var(--border-radius-normal);
+  background-color: #ffffff;
+  cursor: pointer;
+
+  & > div:first-of-type {
+    height: 100%;
+    position: relative;
+    & > img {
+      height: 100%;
+      border-radius: 6.6px;
+    }
+    & > progress {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      position: absolute;
+      bottom: -0.5px;
+      left: 2px;
+      width: calc(100% - 4px);
+      height: 4px;
+      border: none;
+      clip-path: inset(0rem 0% round 0rem 0rem 10px 10px);
+    }
+    & > progress::-webkit-progress-bar {
+      background-color: var(--color-grey-0);
+    }
+    & > progress::-webkit-progress-value {
+      background-color: #ffa724;
+    }
+  }
+
+  & > div:last-of-type {
+    @include mixins.flex($dir: column, $gap: 23px);
+    width: 100%;
+    div {
+      width: 100%;
+      @include mixins.flex($gap: 8px, $align: center);
+      h2 {
+        @include mixins.font(700, 22px, 24px);
+        color: var(--color-grey-5);
+        &:last-of-type {
+          margin-right: auto;
+        }
+      }
+      p {
+        margin-right: 18px;
+        color: var(--color-grey-5);
+      }
+    }
+
+    & > p {
+      @include mixins.font(400, 16px, 24px);
+      @include mixins.font-clamp(4);
+      color: var(--color-grey-4);
+    }
+  }
+
+  &:hover {
+    background-color: var(--color-grey-9);
+  }
+}

package/src/cards/EpisodeCard/EpisodeCard.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import styles from "./EpisodeCard.module.scss";
+import { Audio, Video } from "@soul-refiner/icons/src";
+import { abbrTimeLength } from "@soul-refiner/utils/src/dates";
+
+export interface EpisodeCardProps {
+  description: string;
+  index: number;
+  /**
+   * The length of the episode in seconds
+   */
+  length: number;
+  /**
+   * Enter the progress in seconds watched
+   * A falsy value does not render the progress bar
+   */
+  progress: number;
+  thumbnail: string;
+  title: string;
+  type: "audio" | "video";
+}
+
+export const EpisodeCard = ({
+  description,
+  index,
+  length,
+  progress,
+  thumbnail,
+  title,
+  type,
+}: EpisodeCardProps) => {
+  return (
+    <div className={`${styles.episodecard}`}>
+      <div>
+        <img src={thumbnail} alt={title} title={title} />
+        {!!progress && <progress value={progress} max={length} />}
+      </div>
+      <div>
+        <div>
+          <h2>{index}.</h2>
+          <h2>{title}</h2>
+          {type === "video" ? (
+            <Video fill="var(--color-grey-5)" iconSize={16} size={24} />
+          ) : (
+            <Audio fill="var(--color-grey-5)" iconSize={16} size={24} />
+          )}
+          <p>{abbrTimeLength(length)}</p>
+        </div>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+};

package/src/cards/EpisodeCard/index.ts

@@ -0,0 +1 @@
+export { EpisodeCard, type EpisodeCardProps } from "./EpisodeCard";

package/src/cards/FeatureCard/FeatureCard.module.scss

@@ -0,0 +1,116 @@
+@use "@soul-refiner/styles/_mixins";
+
+.featurecard {
+  background-color: var(--color-grey-9);
+  display: block;
+  padding: 16px;
+  border-radius: 12px;
+  position: relative;
+  width: fit-content;
+
+  &[class~="not-editing"] {
+    @include mixins.hover-editable();
+    cursor: pointer;
+  }
+
+  figure {
+    img {
+      border-radius: 12px;
+      width: 352px;
+      height: 352px;
+      display: block;
+    }
+
+    figcaption {
+      @include mixins.font(700, 20px, 25px);
+      @include mixins.font-clamp();
+      width: 352px;
+      padding: 19px 0px 4px;
+    }
+
+    p {
+      @include mixins.font(400, 13px, 20px);
+      @include mixins.font-clamp();
+      width: 352px;
+    }
+
+    input {
+      width: 100%;
+      display: block;
+      box-sizing: border-box;
+      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
+      background-color: #f2f8ff;
+      border: none;
+      border-radius: var(--border-radius-small);
+      margin: 6px 0px;
+      padding: 5px 16px;
+      &:focus {
+        outline: none;
+      }
+    }
+
+    input:first-of-type {
+      @include mixins.font(700, 20px, 25px);
+      margin-top: 12px;
+      padding: 13px 16px;
+    }
+
+    button {
+      position: absolute;
+
+      &:hover {
+        background-color: var(--color-blue-9);
+      }
+
+      &:active {
+        background-color: var(--color-grey-4);
+        color: var(--color-grey-10);
+        svg {
+          fill: var(--color-grey-10);
+        }
+      }
+    }
+
+    [class~="photo-edit"] {
+      display: none;
+      right: 32px;
+      top: 321px;
+      padding: 8px 14px;
+    }
+
+    [class~="text-edit"] {
+      @at-root button#{&} {
+        right: 16px;
+      }
+    }
+  }
+
+  &:hover {
+    figure > button {
+      display: flex !important;
+    }
+  }
+
+  [class~="actions"] {
+    @include mixins.flex($justify: flex-end, $gap: 4px);
+    width: 100%;
+    button {
+      background-color: var(--color-grey-10);
+      box-shadow: 0px 3px 5px rgba(9, 30, 66, 0.2),
+        0px 0px 1px rgba(9, 30, 66, 0.31);
+      border-radius: 3px;
+
+      &:hover {
+        background-color: var(--color-blue-9);
+      }
+
+      &:active {
+        background-color: var(--color-grey-4);
+        color: var(--color-grey-10);
+        svg {
+          fill: var(--color-grey-10);
+        }
+      }
+    }
+  }
+}