@soul-refiner/design-system 0.0.5 → 0.0.7

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

@@ -1,73 +0,0 @@
-.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

@@ -1,88 +0,0 @@
-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

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

package/src/surfaces/index.ts

@@ -1,9 +0,0 @@
-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

@@ -1,34 +0,0 @@
-@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

@@ -1,30 +0,0 @@
-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

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

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

@@ -1,126 +0,0 @@
-@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

@@ -1,113 +0,0 @@
-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();
-  });
-});