@soul-refiner/design-system 0.0.14 → 0.0.16

package/src/surfaces/Comment/Comment.module.scss

@@ -0,0 +1,106 @@
+@use "@soul-refiner/styles/_mixins";
+
+.comment {
+  @include mixins.flex($justify: space-between, $gap: 12px);
+  position: relative;
+  padding-bottom: 12px;
+
+  [class~="content-wrapper"] {
+    flex: 1;
+
+    [class~="comment"] {
+      padding: 16px;
+      border-radius: 18px;
+      background-color: #ffffff;
+
+      [class~="name"] {
+        margin-bottom: 8px;
+        display: block;
+      }
+    }
+
+    [class~="actions-wrapper"] {
+      @include mixins.flex($gap: 16px, $align: center);
+      margin: 8px 0px;
+      padding-left: 17px;
+
+      p {
+        color: var(--color-grey-4);
+        font-size: 12px;
+        line-height: 18px;
+        user-select: none;
+      }
+
+      [class~="interactive"] {
+        cursor: pointer;
+      }
+
+      [class~="likes-wrapper"] {
+        @include mixins.flex($gap: 5px);
+        margin-left: auto;
+        div {
+          border-radius: 50%;
+          background: linear-gradient(0deg, #1d62f0 0%, #1ad5fd 100%);
+        }
+      }
+    }
+
+    textarea {
+      width: 100%;
+      margin: 16px 0px;
+    }
+
+    [class~="has-replies"] {
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 32px;
+        left: -28px;
+        height: calc(100% - 12px);
+        border-left: 2px solid var(--color-grey-9);
+      }
+    }
+
+    [class~="is-reply"] {
+      position: relative;
+
+      &::before {
+        content: "";
+        position: absolute;
+        left: -28px;
+        height: 100%;
+        border-left: 2px solid var(--color-grey-9);
+      }
+    }
+  }
+}
+
+.replies {
+  padding-top: 12px;
+
+  [class~="reply-line-bottom"] {
+    position: absolute;
+    top: 0;
+    left: -28px;
+    width: 28px;
+    height: 16px;
+    border-bottom-left-radius: 16px;
+    border: 2px solid var(--color-grey-9);
+    border-top: none;
+    border-right: none;
+  }
+
+  [class~="show-replies"] {
+    padding: 5px 0px 8px 5px;
+    font-weight: 600;
+    color: var(--color-grey-4);
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      color: var(--colorify-blue-3);
+    }
+  }
+}

package/src/surfaces/Comment/Comment.spec.js

@@ -0,0 +1,105 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import { Comment } from "./Comment";
+
+const props = {
+  commenter: {
+    id: 1,
+    avatar: "https://i.pravatar.cc/32",
+    firstName: "Dietrich",
+    lastName: "von Hildebrand",
+    url: "",
+  },
+  content: "What a great point!",
+  created: new Date(),
+  hasLiked: false,
+  reactions: 0,
+  onReact: jest.fn(),
+  onReply: jest.fn(),
+};
+
+describe("Comment renders", () => {
+  it("the comment, name, and avatar", () => {
+    render(<Comment {...props} />);
+    expect(screen.getByText("What a great point!"));
+    expect(screen.getByText("Dietrich von Hildebrand"));
+    expect(screen.getByRole("img"));
+  });
+
+  it("with reactions", () => {
+    props.reactions = 10;
+    render(<Comment {...props} />);
+    expect(screen.getByTestId("likes-wrapper").lastChild.textContent).toEqual(
+      "10"
+    );
+  });
+
+  it("without reactions", () => {
+    render(<Comment {...props} />);
+    expect(!screen.queryByTestId("likes-wrapper"));
+  });
+
+  it("a yet-to-be reacted to comment", () => {
+    render(<Comment {...props} />);
+    const notLikedIcon = screen.getByTestId("not-liked-icon");
+    fireEvent.click(notLikedIcon);
+    expect(props.onReact).toHaveBeenCalled();
+  });
+
+  it("a liked comment", () => {
+    props.hasReacted = true;
+    render(<Comment {...props} />);
+    const likedIcon = screen.getByTestId("liked-icon");
+    fireEvent.click(likedIcon);
+    expect(props.onReact).toHaveBeenCalled();
+  });
+
+  it("the abbreviated time the commented was posted", () => {
+    render(<Comment {...props} />);
+    expect(screen.getByText("Just now"));
+  });
+
+  it("nested comments", () => {
+    props.replies = [
+      {
+        commentId: "zlk2jlkjsalkfjaslkdfj",
+        commenter: {
+          id: 3,
+          avatar: "",
+          firstName: "Laura",
+          lastName: "Smith",
+          url: "",
+        },
+        content:
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus, leo, id mi proin aenean gravida. Suspendisse auctor rutrum porttitor viverra convallis neque. Ipsum, aliquet sed laoreet tincidunt.",
+        created: new Date(new Date().getTime() - 60000 * 1),
+        hasReacted: false,
+        onReact: jest.fn(),
+        onReply: jest.fn(),
+        reactions: 1,
+      },
+      {
+        commentId: "blkjsdlkjlkjwlfkajsdf",
+        commenter: {
+          id: 3,
+          avatar: "https://i.pravatar.cc/36",
+          firstName: "Dave",
+          lastName: "Johannisburger",
+          url: "",
+        },
+        content:
+          "Onec euismod, nisl eget consectetur tempor, nisl nunc egestas nisi, euismod aliquam.",
+        created: new Date(),
+        hasReacted: false,
+        onReact: jest.fn(),
+        onReply: jest.fn(),
+        reactions: 1,
+      },
+    ];
+    render(<Comment {...props}></Comment>);
+    expect(screen.getByText("Show Replies"));
+    expect(screen.getByTestId("reply-line-bottom"));
+  });
+});

package/src/surfaces/Comment/Comment.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+import commentStyles from "./Comment.module.scss";
+import { abbrRelativeTimeString } from "@soul-refiner/utils/src";
+import { Comment as IComment } from "@soul-refiner/models";
+
+import { Avatar } from "../../iconography";
+import { PostInput } from "../../inputs";
+import {
+  Circle,
+  CommentOutline,
+  Like,
+  LikeOutline,
+} from "@soul-refiner/icons/src";
+
+export interface CommentProps extends IComment {
+  onReact: () => void;
+  onReply: (reply: string) => void;
+  onShowReplies?: () => void;
+  replies?: IComment[];
+  showReplies: boolean;
+}
+
+export const Comment = ({
+  id,
+  parentId,
+  user,
+  text,
+  created,
+  onReact,
+  onReply,
+  onShowReplies,
+  replies,
+  reactions,
+  showReplies,
+}: CommentProps) => {
+  const [showReplyInput, setshowReplyInput] = React.useState(false);
+  const [reply, setReply] = React.useState("");
+
+  const handleshowReplyInput = () => setshowReplyInput(true);
+
+  const handleReplyChange = (
+    event: React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
+    setReply((event.target as HTMLTextAreaElement).value);
+  };
+
+  const handleReplySubmit = (
+    event: React.KeyboardEvent<HTMLTextAreaElement>
+  ) => {
+    if (event.key === "Enter") {
+      onReply(reply);
+      setshowReplyInput(false);
+      setReply("");
+    }
+  };
+
+  const numReplies = replies ? replies.length : 0;
+
+  return (
+    <div className={`${commentStyles.comment}`} data-commentid={id}>
+      <Avatar
+        as="a"
+        href={user?.url ? user.url : ""}
+        size={32}
+        url={user?.avatar ? user.avatar : ""}
+      />
+      <div className="content-wrapper">
+        <div className={`${numReplies > 0 ? "has-replies" : ""}`}>
+          <p className="comment body">
+            <span className="lead name">
+              {user.firstName} {user.lastName}
+            </span>
+            <span className="body-large">{text}</span>
+          </p>
+          <div className="actions-wrapper">
+            {reactions.some((reaction) => reaction.userId !== user.id) ? (
+              <Like
+                className="interactive"
+                data-testid="liked-icon"
+                fill="var(--colorify-blue-3)"
+                iconSize={18}
+                onClick={onReact}
+                size={18}
+              />
+            ) : (
+              <LikeOutline
+                className="interactive"
+                data-testid="not-liked-icon"
+                fill="var(--colorify-blue-3)"
+                iconSize={18}
+                onClick={onReact}
+                size={18}
+              />
+            )}
+            <CommentOutline
+              className="interactive"
+              fill="var(--colorify-blue-3)"
+              iconSize={16}
+              onClick={handleshowReplyInput}
+              size={18}
+            />
+            <Circle fill="var(--color-grey-7" iconSize={3} size={3} />
+            <p>{abbrRelativeTimeString(new Date(created))}</p>
+            {!!reactions && (
+              <div className="likes-wrapper" data-testid="likes-wrapper">
+                <Like fill="white" iconSize={10} inline size={18} />
+                <p>{reactions.length}</p>
+              </div>
+            )}
+          </div>
+          {showReplyInput && (
+            <PostInput
+              onChange={handleReplyChange}
+              onKeyDown={handleReplySubmit}
+              placeholder="Write a reply"
+              value={reply}
+            />
+          )}
+        </div>
+        {numReplies > 0 && (
+          <div className={`${commentStyles.replies}`}>
+            {showReplies ? (
+              replies &&
+              replies.map(({ ...reply }, index) => (
+                <div
+                  className={index !== numReplies - 1 ? "is-reply" : ""}
+                  key={reply.id + text.length + index}
+                  style={{ position: "relative" }}
+                >
+                  <Comment
+                    onReact={onReact}
+                    onReply={onReply}
+                    onShowReplies={onShowReplies}
+                    showReplies={true}
+                    {...reply}
+                  />
+                  <div className="reply-line-bottom"></div>
+                </div>
+              ))
+            ) : (
+              <div
+                onClick={onShowReplies}
+                style={{ position: "relative", width: "fit-content" }}
+              >
+                <p className="show-replies">Show Replies</p>
+                <div
+                  className="reply-line-bottom"
+                  data-testid="reply-line-bottom"
+                ></div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/surfaces/Comment/index.ts

@@ -0,0 +1 @@
+export { Comment, type CommentProps } from "./Comment";

package/src/surfaces/Faq/Faq.module.scss

@@ -0,0 +1,91 @@
+@use "@soul-refiner/styles/mixins";
+.faq,
+.create {
+  display: flex;
+  flex-grow: 1;
+  align-self: stretch;
+  padding: 14px 16px;
+  background-color: var(--color-grey-9);
+  flex-direction: column;
+  border-radius: var(--border-radius-small);
+  gap: 16px;
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex: 1;
+    place-items: center;
+    gap: 16px;
+  }
+
+  input,
+  textarea {
+    padding: 16px;
+    background-color: var(--color-grey-10);
+    border: none;
+    border-radius: var(--border-radius-small);
+    width: 100%;
+    resize: vertical;
+    outline: none;
+    color: var(--color-grey-3);
+    box-shadow: inset 0px 4px 4px rgb(0 0 0 / 3%);
+  }
+
+  input {
+    width: 50%;
+  }
+
+  .contentArea {
+    white-space: pre-line;
+    color: var(--color-grey-0);
+    padding-bottom: 16px;
+  }
+
+  .entry {
+    font-size: var(--size-20);
+    font-weight: var(--weight-inter-semibold);
+  }
+
+  .arrowUp {
+    transform: rotate(180deg);
+  }
+
+  [class~="row"] {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    place-items: center;
+  }
+
+  [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);
+        }
+      }
+    }
+  }
+}
+
+.create {
+  border: 1px dashed #97a0a3;
+  font-size: var(--size-20);
+  font-weight: var(--weight-inter-semibold);
+  color: var(--color-grey-0);
+  background-color: transparent;
+}

package/src/surfaces/Faq/Faq.spec.js

@@ -0,0 +1,38 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+
+import { Faq } from "./Faq";
+
+const generateProps = props => ({
+  editable: true,
+  title: "What is Soul Refiner?",
+  content: "Soul Refiner is the streaming platform that makes it possible for anyone to watch or listen to hundreds of video lessons taught by 150+ of the world’s best.",
+  creationMode: false,
+  onSubmit: jest.fn(e => e.preventDefault()),
+  ...props
+});
+
+describe("FAQ", () => {
+  it("adds another", () => {
+    const props = generateProps();
+    render(<Faq {...props} />);
+    fireEvent.click(screen.getByText("Add a FAQ"));
+    let title = screen.getByPlaceholderText("Title");
+    let content = screen.getByPlaceholderText("Your FAQ content...");
+    expect(title).toHaveAttribute(
+      "value",
+      "What is Soul Refiner?"
+    );
+    expect(content.value).toEqual(
+      "Soul Refiner is the streaming platform that makes it possible for anyone to watch or listen to hundreds of video lessons taught by 150+ of the world’s best."
+    );
+    const submit = screen.getByTestId("faq-submit");
+    fireEvent.click(submit);
+    title = screen.getByText("What is Soul Refiner?");
+    content = screen.getByText("Soul Refiner is the streaming platform that makes it possible for anyone to watch or listen to hundreds of video lessons taught by 150+ of the world’s best.");
+    expect(title.tagName).toEqual("H3");
+    expect(content.tagName).toEqual("P");
+  });
+})

package/src/surfaces/Faq/Faq.tsx

@@ -0,0 +1,156 @@
+import React, { useEffect, useState } from "react";
+import { Component } from "@soul-refiner/utils/src";
+import { Check, Close, ChevronDown, Pencil } from "@soul-refiner/icons/src";
+import faqStyles from "./Faq.module.scss";
+
+export interface FaqProps {
+  title: string;
+  content: string;
+  editable: boolean;
+  creationMode: boolean;
+  onSubmit: (
+    event: React.FormEvent,
+    props: { title: string; content: string }
+  ) => void;
+}
+
+export const Faq = ({
+  title = "",
+  content = "",
+  editable,
+  creationMode,
+  onSubmit,
+}: FaqProps) => {
+  const [createFaq, setCreateFaq] = useState(creationMode);
+  const [editing, setEditing] = useState(false);
+  const [collapsed, setCollapsed] = useState(true);
+  const [details, setDetails] = useState(() => ({
+    title: title,
+    content: content,
+  }));
+
+  React.useEffect(() => {
+    setCreateFaq(creationMode);
+  }, [creationMode]);
+
+  const handleReset = () => {
+    if (details.title === "" && details.content === "") {
+      setCreateFaq(false);
+    } else {
+      setDetails({
+        title: title,
+        content: content,
+      });
+    }
+    setEditing(false);
+  };
+
+  const handleCreateFaq = () => {
+    setCreateFaq(true);
+    setEditing(true);
+    setCollapsed(false);
+  };
+
+  const handleSubmit = (event: React.FormEvent) => {
+    setEditing(false);
+    onSubmit(event, details);
+  };
+
+  const handleChange = (e: React.FormEvent) => {
+    const element: HTMLInputElement = e.target as HTMLInputElement;
+
+    setDetails((prev) => ({
+      ...prev,
+      [element.name]: element.value,
+    }));
+  };
+
+  if (!createFaq) {
+    return (
+      <>
+        <button className={faqStyles.create} onClick={handleCreateFaq}>
+          Add a FAQ
+        </button>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Component as={editing ? "form" : "div"} className={faqStyles.faq}>
+        <div className={faqStyles.header}>
+          <Component
+            as={editing ? "input" : "h3"}
+            className={faqStyles.entry}
+            children={editing ? undefined : details.title}
+            name="title"
+            onChange={handleChange}
+            value={details.title}
+            data-form-type="other"
+            placeholder="Title"
+          />
+
+          <div className="row">
+            {!editing && editable && (
+              <Pencil
+                as="button"
+                fill="var(--color-grey-4)"
+                iconSize={14}
+                size={24}
+                onClick={() => {
+                  setEditing(true);
+                  setCollapsed(false);
+                }}
+              />
+            )}
+
+            <ChevronDown
+              as="button"
+              fill="var(--color-grey-0)"
+              iconSize={16}
+              size={32}
+              className={!collapsed ? faqStyles.arrowUp : ""}
+              onClick={() => setCollapsed(!collapsed)}
+            />
+          </div>
+        </div>
+
+        {!collapsed && (
+          <div className={faqStyles.contentArea}>
+            <Component
+              as={editing ? "textarea" : "p"}
+              rows={3}
+              className={faqStyles.content}
+              children={editing ? undefined : details.content}
+              name="content"
+              onChange={handleChange}
+              value={details.content}
+              placeholder="Your FAQ content..."
+            />
+          </div>
+        )}
+
+        {editing && (
+          <div className="actions">
+            <Check
+              as="button"
+              data-testid="faq-submit"
+              fill="var(--color-grey-4)"
+              iconSize={10}
+              onClick={handleSubmit}
+              size={32}
+            />
+            <Close
+              as="button"
+              data-testid="faq-reset"
+              fill="var(--color-grey-4)"
+              iconSize={10}
+              onClick={handleReset}
+              size={32}
+            />
+          </div>
+        )}
+      </Component>
+    </>
+  );
+};

package/src/surfaces/Faq/index.ts

@@ -0,0 +1 @@
+export { Faq, type FaqProps } from "./Faq";

package/src/surfaces/Message/Message.module.scss

@@ -0,0 +1,37 @@
+@use "@soul-refiner/styles/_mixins";
+
+.message {
+  margin-bottom: 64px;
+
+  & > div:first-of-type {
+    justify-content: flex-start;
+  }
+
+  &[class~="fromSelf"] {
+    & > div:first-of-type {
+      justify-content: flex-end;
+    }
+  }
+}
+
+.individual {
+  max-width: 480px;
+  margin: 10px 70px;
+  border-radius: 18px;
+  border-top-left-radius: 0px;
+  padding: 20px 16px;
+  background-color: var(--color-grey-9);
+  & > * {
+    color: var(--color-grey-1);
+  }
+
+  &[class~="fromSelf"] {
+    border-top-left-radius: 18px;
+    border-top-right-radius: 0px;
+    background-color: var(--color-blue-3);
+    margin-left: auto;
+    & > * {
+      color: #ffffff;
+    }
+  }
+}