@soul-refiner/design-system 0.0.3 → 0.0.5

package/src/surfaces/Review/Review.module.scss

@@ -0,0 +1,73 @@
+.review {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    background-color: #1B2530;
+    border-radius: var(--border-radius-normal);
+    padding: 20px 46px;
+
+    .header {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .avatar {
+            color: var(--color-grey-10);
+        }
+        
+        .details {
+            flex-direction: column;
+            color: #5C6264;
+            font-size: var(--size-14);
+            line-height: 150%;
+            text-align: right;
+            font-weight: var(--weight-inter-semibold);
+        }
+
+        .verified {
+            color: #FFE99B;
+            font-weight: var(--weight-inter-semibold);
+        }
+    }
+
+    .content {
+        color: #AFB6B9;
+        font-size: var(--size-18);
+        line-height: 150%;
+    }
+
+    .rating {
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+        color: #FFF;
+        font-weight: var(--weight-inter-semibold);
+        font-size: var(--size-16);
+        place-items: center;
+    }
+
+    .actions {
+        display: flex;
+        flex-direction: row;
+        gap: 32px;
+        color: #EFF1F4;
+
+        &> div:first-child {
+            min-width: 110px;
+        }
+    }
+
+    .button {
+        display: flex;
+        gap: 12px;
+        place-items: center;
+
+        border: none;
+        background-color: transparent;
+        color: #FFF;
+        &:hover, &:active, &:focus {
+            color: #FFF;
+            background-color: transparent;
+        }
+    }
+}

package/src/surfaces/Review/Review.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import reviewStyle from "./Review.module.scss";
+import { Like, LikeOutline, ShareOutline } from "@soul-refiner/icons/src";
+import { abbrRelativeTimeString } from "@soul-refiner/utils/src";
+import { Avatar } from "../../iconography";
+import { StarRating } from "../../iconography";
+
+export interface ReviewProps {
+  reviewer: string;
+  reviewDate: Date;
+  rating: number;
+  verifiedPurchase: boolean;
+  title: string;
+  content: string;
+  avatarUrl: string;
+  likes: number;
+  hasLiked: boolean;
+  onLike: () => void;
+  onShare: () => void;
+}
+
+export const Review = ({
+  reviewer = "John Doe",
+  reviewDate = new Date(new Date().getTime() - 7800000 * 100),
+  rating = 5,
+  verifiedPurchase = false,
+  title = "",
+  content = "",
+  avatarUrl,
+  likes = 0,
+  hasLiked,
+  onLike,
+  onShare,
+}: ReviewProps) => {
+  return (
+    <article className={reviewStyle.review}>
+      <div className={reviewStyle.header}>
+        <div className={reviewStyle.avatar}>
+          <Avatar
+            url={avatarUrl}
+            color="inherit"
+            title={
+              <span style={{ color: "var(--color-grey-10)" }}>{reviewer}</span>
+            }
+            size={40}
+          />
+        </div>
+        <div className={reviewStyle.details}>
+          {verifiedPurchase && (
+            <div className={reviewStyle.verified}>Verified Purchase</div>
+          )}
+          <div>Reviewed on {abbrRelativeTimeString(reviewDate)}</div>
+        </div>
+      </div>
+      <div className={reviewStyle.rating}>
+        <div>
+          <StarRating
+            rating={rating}
+            width={100}
+            outlines={false}
+            gradient={true}
+          />
+        </div>
+        <div>{title}</div>
+      </div>
+      <div className={reviewStyle.content}>{content}</div>
+      <div className={reviewStyle.actions}>
+        <div>
+          <button className={reviewStyle.button} onClick={onLike}>
+            {!hasLiked ? (
+              <LikeOutline iconSize={20} size={21} fill="#FFF" />
+            ) : (
+              <Like iconSize={20} size={21} fill="var(--color-blue-6)" />
+            )}
+            {likes} {likes === 1 ? "Like" : "Likes"}
+          </button>
+        </div>
+
+        <div>
+          <button className={reviewStyle.button} onClick={onShare}>
+            <ShareOutline iconSize={20} size={21} fill="#FFF" />
+            Share
+          </button>
+        </div>
+      </div>
+    </article>
+  );
+};

package/src/surfaces/Review/index.ts

@@ -0,0 +1 @@
+export { Review, type ReviewProps } from "./Review";

package/src/surfaces/index.ts

@@ -0,0 +1,9 @@
+export { Comment, type CommentProps } from "./Comment";
+export { Faq, type FaqProps } from "./Faq";
+export { Message, type MessageProps } from "./Message";
+export { Modal, type ModalProps } from "./Modal";
+export { Plan, type PlanProps } from "./Plan";
+export { Post, type PostProps } from "./Post";
+export { ProfileHeader, type ProfileHeaderProps } from "./ProfileHeader";
+export { RatingsOverview, type RatingsOverviewProps } from "./RatingsOverview";
+export { Review, type ReviewProps } from "./Review";

package/src/tables/Filter/Filter.module.scss

@@ -0,0 +1,34 @@
+@use "@soul-refiner/styles/mixins";
+
+.filter {
+  @include mixins.flex($gap: 6px, $align: center);
+  border: 1px solid var(--color-grey-7);
+  &#{&} {
+    padding: 9px 16px;
+  }
+
+  & > span {
+    @include mixins.flex($gap: 6px, $align: center);
+
+    & > [class~="label"] {
+      color: var(--color-grey-4);
+    }
+
+    & > [class~="value"] {
+      color: var(--colorify-blue-3);
+    }
+
+    & > [class~="divider"] {
+      width: 1px;
+      height: 12px;
+      background-color: var(--color-grey-8);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-grey-7);
+    & > span > span {
+      color: #ffffff;
+    }
+  }
+}

package/src/tables/Filter/Filter.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { ChevronDown, ChevronUp } from "@soul-refiner/icons/src";
+import { Button } from "../../actions";
+import filterStyles from "./Filter.module.scss";
+
+export interface FilterProps {
+  label: string;
+  open: boolean;
+  value: string;
+}
+
+export const Filter = ({ label, open, value }: FilterProps) => {
+  return (
+    <Button
+      bold={false}
+      buttonColor="#FFFFFF"
+      className={`${filterStyles.filter}`}
+      uppercase={false}
+    >
+      <span className="label">{label}</span>
+      <span className="divider" />
+      <span className="value">{value}</span>
+      {open ? (
+        <ChevronUp fill="var(--color-grey-7)" iconSize={8} size={8} />
+      ) : (
+        <ChevronDown fill="var(--color-grey-7)" iconSize={8} size={8} />
+      )}
+    </Button>
+  );
+};

package/src/tables/Filter/index.ts

@@ -0,0 +1 @@
+export { Filter, type FilterProps } from "./Filter";

package/src/tables/Table/Table.module.scss

@@ -0,0 +1,126 @@
+@use "@soul-refiner/styles/mixins";
+
+.wrapper {
+  background: #ffffff;
+  padding: 32px;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 32px;
+  border-radius: 25px;
+}
+
+.table {
+  width: 100%;
+
+  &[class~="compact"] {
+    width: fit-content;
+  }
+
+  &[class~="separated"] > tbody > * {
+    border-bottom: 1px solid var(--color-grey-9);
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &[class~="striped"] > tbody > *:nth-of-type(even) {
+    background-color: var(--color-grey-10);
+  }
+}
+
+.head {
+  --var: 0;
+}
+
+.body {
+  --var: 0;
+}
+
+.footer {
+  --var: 0;
+}
+
+.headercell {
+  &#{&} {
+    @include mixins.font(700, 16px, 24px);
+    color: #99b4cf;
+
+    & > p {
+      @include mixins.font(700, 16px, 24px);
+      color: #99b4cf;
+    }
+  }
+}
+
+.row {
+  display: table-row;
+  color: var(--color-grey-0);
+  border-radius: var(--border-radius-small);
+
+  & > * {
+    padding: var(--padding);
+  }
+
+  & > *:first-child {
+    border-top-left-radius: var(--border-radius-small);
+    border-bottom-left-radius: var(--border-radius-small);
+  }
+
+  & > *:last-child {
+    border-top-right-radius: var(--border-radius-small);
+    border-bottom-right-radius: var(--border-radius-small);
+  }
+
+  &[class~="anchor"] {
+    cursor: pointer;
+    padding-right: 24px;
+
+    &:hover {
+      background-color: var(--color-blue-9);
+
+      & > td:last-child {
+        position: relative;
+      }
+      & > td:last-child::after {
+        content: "❯";
+        color: var(--color-blue-3);
+        position: absolute;
+        right: 12px;
+        top: calc(50% - 16px);
+      }
+    }
+  }
+
+  &[class~="hoverable"] {
+    &:hover {
+      background-color: var(--color-blue-9);
+    }
+  }
+
+  &[class~="selected"] {
+    background-color: var(--colorify-blue-1);
+  }
+}
+
+.cell {
+  @include mixins.font(400, 16px, 28px);
+  color: var(--color-grey-3);
+  vertical-align: var(--vertical-align);
+  text-align: var(--text-align);
+
+  & > p {
+    @include mixins.font(400, 16px, 28px);
+    color: var(--color-grey-3);
+  }
+
+  &[class~="clamped"] {
+    @include mixins.font-clamp(var(--clamp));
+    & > * {
+      @include mixins.font-clamp(var(--clamp));
+    }
+  }
+
+  &[class~="wide"] {
+    width: var(--width);
+  }
+}

package/src/tables/Table/Table.spec.js

@@ -0,0 +1,113 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import { BarGraph } from "@soul-refiner/icons/src";
+import { Table } from "./Table";
+
+const generateProps = (props) => ({
+  ...props,
+});
+
+const Head = (props) => (
+  <Table.Head {...props}>
+    <Table.Row>
+      <Table.HeaderCell width={4}>Title 1</Table.HeaderCell>
+      <Table.HeaderCell width={2}>Title 2</Table.HeaderCell>
+    </Table.Row>
+  </Table.Head>
+);
+
+const Row = (props) => (
+  <Table.Row {...props}>
+    <Table.Cell>Row {props.row ? props.row : 1} Data 1</Table.Cell>
+    <Table.Cell>Row {props.row ? props.row : 1} Data 2</Table.Cell>
+  </Table.Row>
+);
+
+describe("Table", () => {
+  it("renders an icon header", () => {
+    const props = generateProps({
+      iconHeader: {
+        as: "h5",
+        color: "blue",
+        icon: <BarGraph iconSize={18} size={24} fill="var(--color-blue-3)" />,
+        title: "Summary",
+      },
+    });
+    render(
+      <Table {...props}>
+        <Head />
+        <Table.Body>
+          <Row row={1} />
+        </Table.Body>
+      </Table>
+    );
+    expect(screen.getByText("Summary"));
+  });
+
+  it("renders a footer", () => {
+    const props = generateProps({
+      footer: <p>This is a footer</p>,
+    });
+    render(
+      <Table {...props}>
+        <Head />
+        <Table.Body>
+          <Row row={1} />
+        </Table.Body>
+      </Table>
+    );
+    expect(screen.getByText("This is a footer"));
+  });
+
+  it("renders rows separated by lines", () => {
+    const props = generateProps({});
+    render(
+      <Table {...props}>
+        <Head />
+        <Table.Body>
+          <Row row={1} />
+          <Row row={2} />
+        </Table.Body>
+      </Table>
+    );
+    const row1 = screen.getByText("Row 1 Data 1").parentElement;
+    expect(row1).toHaveStyle({
+      borderBottom: "1px solid var(--color-grey-9)",
+    });
+  });
+
+  it("renders a striped table", () => {
+    const props = generateProps({});
+    render(
+      <Table {...props}>
+        <Head />
+        <Table.Body>
+          <Row row={1} />
+          <Row row={2} />
+        </Table.Body>
+      </Table>
+    );
+    const row2 = screen.getByText("Row 2 Data 1").parentElement;
+    expect(row2).toHaveStyle({
+      backgroundColor: "var(--color-grey-9)",
+    });
+  });
+
+  it("renders clickable rows", () => {
+    const props = generateProps({});
+    const rowClickHandler = jest.fn();
+    render(
+      <Table {...props}>
+        <Head />
+        <Table.Body>
+          <Row row={1} onClick={rowClickHandler} />
+        </Table.Body>
+      </Table>
+    );
+    const row1 = screen.getByText("Row 1 Data 1").parentElement;
+    fireEvent.click(row1);
+    expect(rowClickHandler).toHaveBeenCalled();
+  });
+});