@soul-refiner/design-system 0.0.13 → 0.0.15

package/src/feedback/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import progressStyle from "./ProgressBar.module.scss";
+
+export interface ProgressBarProps {
+  percent: number;
+  color?: string;
+  backgroundColor?: string;
+  height?: number;
+}
+
+export const ProgressBar = ({
+  percent,
+  height,
+  backgroundColor,
+  color,
+}: ProgressBarProps) => {
+  const backgroundStyle = {
+    backgroundColor: backgroundColor,
+    height: `${height || 7}px`,
+  };
+
+  const fillStyle = {
+    backgroundColor: color,
+    width: `${percent}%`,
+  };
+
+  return (
+    <div style={backgroundStyle} className={progressStyle.progressBar}>
+      <div style={fillStyle} className={progressStyle.fill}></div>
+    </div>
+  );
+};

package/src/feedback/ProgressBar/index.ts

@@ -0,0 +1 @@
+export { ProgressBar, type ProgressBarProps } from "./ProgressBar";

package/src/feedback/Toast/Toast.module.scss

@@ -0,0 +1,44 @@
+@use "@soul-refiner/styles/_mixins";
+
+.toast {
+  @include mixins.flex($gap: 20px);
+  width: 365px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding: 20px;
+  border-radius: var(--border-radius-tiny);
+  border: 1px solid var(--color-grey-9);
+  box-shadow: 0px 16px 24px 4px rgba(18, 28, 45, 0.2);
+  user-select: none;
+  background-color: #ffffff;
+  z-index: 9990;
+
+  div {
+    border-radius: 50%;
+  }
+
+  &[class~="success"] {
+    border-left: 4px solid var(--color-green-5);
+  }
+
+  &[class~="error"] {
+    border-left: 4px solid var(--color-red-5);
+  }
+
+  &[class~="pending"] {
+    border-left: 4px solid var(--color-yellow-5);
+  }
+
+  &[class~="neutral"] {
+    border-left: 4px solid var(--color-blue-3);
+  }
+
+  button:hover {
+    border-radius: 50%;
+    background-color: var(--color-grey-9);
+    & > svg {
+      fill: var(--color-grey-3);
+    }
+  }
+}

package/src/feedback/Toast/Toast.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+import toastStyles from "./Toast.module.scss";
+import {
+  Check,
+  CircleInformation,
+  Close,
+  Pencil,
+  Slash,
+} from "@soul-refiner/icons/src";
+
+export interface ToastProps extends React.PropsWithChildren {
+  icon?: React.ReactNode;
+  onDismiss: () => void;
+  type: "success" | "error" | "pending" | "neutral";
+  visible: boolean;
+}
+
+export const Toast = ({
+  children,
+  icon: customIcon,
+  onDismiss,
+  type,
+  visible,
+}: ToastProps) => {
+  if (!visible) return null;
+  const icon = customIcon ? (
+    customIcon
+  ) : type === "success" ? (
+    <Check
+      fill="#FFFFFF"
+      iconSize={8}
+      size={16}
+      style={{
+        backgroundColor: "var(--color-green-2)",
+      }}
+    />
+  ) : type === "pending" ? (
+    <Pencil
+      fill="#FFFFFF"
+      iconSize={8}
+      size={16}
+      style={{
+        backgroundColor: "var(--color-yellow-4)",
+      }}
+    />
+  ) : type === "error" ? (
+    <Slash
+      fill="#FFFFFF"
+      iconSize={8}
+      size={16}
+      style={{
+        backgroundColor: "var(--color-red-4)",
+      }}
+    />
+  ) : (
+    <CircleInformation fill="var(--color-purple-1)" iconSize={16} size={16} />
+  );
+
+  return (
+    <aside className={`${toastStyles.toast} ${type}`}>
+      {icon}
+      {children}
+      <Close
+        as="button"
+        onClick={onDismiss}
+        fill="var(--color-grey-3)"
+        inline
+        iconSize={12}
+        size={20}
+        style={{
+          marginLeft: "auto",
+        }}
+      />
+    </aside>
+  );
+};

package/src/feedback/Toast/index.ts

@@ -0,0 +1 @@
+export { Toast, type ToastProps } from "./Toast";

package/src/feedback/Tooltip/Tooltip.module.scss

@@ -0,0 +1,47 @@
+.tooltip {
+    --tooltipColor: rgba(0 0 0 / 80%);
+    
+    color: #FFF;
+    font-size: var(--size-13);
+    border-radius: var(--border-radius-small);
+    user-select: none;
+    pointer-events: none;
+
+    padding: 8px 16px;
+    
+    background-color: var(--tooltipColor);
+    backdrop-filter: blur(4px);
+    
+    position: relative;
+    animation: fadeIn 125ms forwards ease-in-out;
+    opacity: 0;
+    transform: translateY(-100%);
+
+    @keyframes fadeIn {
+        0% { 
+            opacity: 0; 
+            transform: translateY(calc(-100% + 5px));
+        }
+        100% { 
+            opacity: 1;
+            transform: translateY(-100%);
+        }
+    }
+
+    &::after {
+        --size: 15px;
+        
+        content: "";
+        display: block;
+        width: var(--size);
+        height: calc(var(--size) / 1.6666);
+        
+        background-color: var(--tooltipColor);
+        clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+        transform: rotate(180deg) translate(50%, -100%);
+        
+        left: 50%;
+        bottom: 0;
+        position: absolute;
+    }
+}

package/src/feedback/Tooltip/Tooltip.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import tooltipStyles from "./Tooltip.module.scss";
+
+export interface TooltipProps {
+  label: string;
+}
+
+export const Tooltip = ({ label = "Tooltip" }: TooltipProps) => {
+  return <div className={tooltipStyles.tooltip}>{label}</div>;
+};

package/src/feedback/Tooltip/index.ts

@@ -0,0 +1 @@
+export { Tooltip, type TooltipProps } from "./Tooltip";

package/src/feedback/index.ts

@@ -0,0 +1,5 @@
+export { Chip, type ChipProps } from "./Chip";
+export { Loader, type LoaderProps } from "./Loader";
+export { ProgressBar, type ProgressBarProps } from "./ProgressBar";
+export { Toast, type ToastProps } from "./Toast";
+export { Tooltip, type TooltipProps } from "./Tooltip";

package/src/global.d.ts

@@ -0,0 +1,6 @@
+declare module "*.scss";
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.webp";
+declare module "@emoji-mart/data";
+declare module "@emoji-mart/react";

package/src/iconography/Avatar/Avatar.module.scss

@@ -0,0 +1,90 @@
+@use "@soul-refiner/styles/_mixins";
+
+.wrapper {
+  @include mixins.flex($gap: 18px, $align: center);
+
+  & > div {
+    &[class~="left"] {
+      order: -1;
+    }
+    > p {
+      @include mixins.font-clamp();
+    }
+  }
+}
+
+.avatar {
+  cursor: pointer;
+  padding: 0px;
+  position: relative;
+  background-color: transparent;
+
+  img,
+  svg {
+    border-radius: 50%;
+    background-color: var(--color-blue-light-6);
+    overflow: hidden;
+    object-fit: cover;
+  }
+
+  div {
+    @include mixins.flex($dir: column, $justify: center, $align: center);
+    text-align: left;
+  }
+}
+
+.presence,
+.status {
+  border-radius: 50%;
+  position: absolute;
+  right: 0px;
+  box-sizing: border-box;
+  border: 2px solid var(--color-grey-10);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    background-color: transparent;
+    height: 70%;
+    width: 70%;
+    object-fit: contain;
+  }
+}
+
+.presence {
+  bottom: 0px;
+}
+
+.status {
+  top: 0px;
+}
+
+.online {
+  background-color: var(--color-green-5);
+}
+
+.busy {
+  background-color: var(--color-red-5);
+  color: white;
+}
+
+.focus {
+  background-color: white;
+}
+
+.offline {
+  background-color: var(--color-grey-6);
+}
+
+.approved {
+  background-color: var(--color-turquoise-5);
+}
+
+.declined {
+  background-color: var(--color-red-5);
+}
+
+.locked {
+  background-color: var(--color-grey-3);
+}

package/src/iconography/Avatar/Avatar.spec.js

@@ -0,0 +1,75 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+
+import { Avatar } from "./Avatar";
+
+const generateMockProps = props => ({
+  as: "button",
+  size: 64,
+  ...props,
+});
+
+describe("Avatar renders", () => {
+  it("with a url", () => {
+    const props = generateMockProps({
+      url: "https://testing.avatar.io"
+    });
+    render(<Avatar {...props} />);
+    const img = screen.getByRole("img");
+    expect(img).toHaveAttribute("src", "https://testing.avatar.io");
+  });
+
+  it("with a title", () => {
+    const props = generateMockProps({
+      title: "Ben Merritt"
+    });
+    render(<Avatar {...props} />);
+    expect(screen.findByText("Ben Merritt"));
+  });
+
+  it("with a subtitle", () => {
+    const props = generateMockProps({
+      subtitle: "1 hour ago"
+    });
+    render(<Avatar {...props} />);
+    expect(screen.findByText("1 hour ago"));
+  });
+
+  it("at different sizes", () => {
+    const SIZE = 128
+    const props = generateMockProps({
+      size: SIZE
+    });
+    render(<Avatar {...props} />);
+    const button = screen.getByRole("button");
+    expect(button).toHaveStyle(`
+      height: ${SIZE}
+    `)
+  });
+
+  it("with a presence indicator", () => {
+    const props = generateMockProps({
+      presence: "busy"
+    });
+    render(<Avatar {...props} />);
+    const svgWrapper = screen.getByTestId("presence-wrapper")
+    expect(svgWrapper).toHaveStyle(`
+      background-color: var(--color-red);
+    `)
+    expect(svgWrapper.firstChild.firstChild)
+  });
+
+  it("with a status indicator", () => {
+    const props = generateMockProps({
+      status: "declined"
+    });
+    render(<Avatar {...props} />);
+    const svgWrapper = screen.getByTestId("status-wrapper")
+    expect(svgWrapper).toHaveStyle(`
+      background-color: var(--color-red);
+    `)
+    expect(svgWrapper.firstChild.firstChild)
+  });
+})

package/src/iconography/Avatar/Avatar.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import styles from "./Avatar.module.scss";
+import { DefaultIcon } from "./DefaultIcon";
+
+import {
+  iconDisplacement,
+  iconSize,
+  presenceIcon,
+  statusIcon,
+} from "./iconHelpers";
+
+export interface AvatarProps
+  extends React.PropsWithChildren,
+    Omit<
+      React.HTMLProps<HTMLButtonElement | HTMLAnchorElement>,
+      "as" | "title"
+    > {
+  as?: React.ElementType;
+  size: 128 | 96 | 64 | 40 | 36 | 32 | 24;
+  url: string;
+  title?: string | React.ReactNode;
+  textPosition?: "left" | "right";
+  subtitle?: string | React.ReactNode;
+  presence?: "online" | "busy" | "focus" | "offline";
+  status?: "approved" | "declined" | "locked";
+}
+
+export const Avatar = ({
+  as: Tag = "button",
+  size = 64,
+  url,
+  title,
+  subtitle,
+  presence,
+  status,
+  textPosition = "right",
+  ...rest
+}: AvatarProps) => {
+  const [displayDefault, setDisplayDefault] = React.useState(false);
+
+  const sizeOfIcon = iconSize(size);
+  const displacement = iconDisplacement(size);
+  const presenceElement = presenceIcon({ presence, size });
+  const statusElement = statusIcon({ status, size });
+
+  return (
+    <div className={styles.wrapper}>
+      <Tag className={styles.avatar} {...rest}>
+        {!displayDefault && (
+          <img
+            src={url}
+            alt={`avatar, ${title ? title : "unknown"}`}
+            className="avatar-img"
+            style={{ width: size, height: size }}
+            onError={() => setDisplayDefault(true)}
+          />
+        )}
+        {displayDefault && <DefaultIcon />}
+        {presence && (
+          <div
+            className={`${styles.presence} ${styles[presence]}`}
+            data-testid="presence-wrapper"
+            style={{
+              width: sizeOfIcon,
+              height: sizeOfIcon,
+              marginRight: displacement,
+              marginBottom: displacement,
+            }}
+          >
+            {presenceElement}
+          </div>
+        )}
+        {status && (
+          <div
+            className={`${styles.status} ${styles[status]}`}
+            data-testid="status-wrapper"
+            style={{
+              width: sizeOfIcon,
+              height: sizeOfIcon,
+              marginRight: displacement,
+              marginTop: displacement,
+            }}
+          >
+            {statusElement}
+          </div>
+        )}
+      </Tag>
+      {(title || subtitle) && (
+        <div className={textPosition}>
+          {title && <p className="avatar">{title}</p>}
+          {subtitle && <p className="avatar subtitle">{subtitle}</p>}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/iconography/Avatar/DefaultIcon.svg

@@ -0,0 +1,4 @@
+
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.8591 4.0743C17.5175 4.24647 16.0686 4.78143 14.9877 5.50371C14.3081 5.95785 13.3158 6.87994 12.8402 7.49923C12.0233 8.56305 11.3755 10.0081 11.1261 11.3229C10.9683 12.1545 10.9654 13.8965 11.1204 14.7068C11.3504 15.9088 11.8334 17.0691 12.5556 18.1541C13.022 18.855 14.0159 19.865 14.7227 20.3561L15.2791 20.7428L14.7618 20.9246C14.0573 21.172 12.5613 21.9173 11.8564 22.3719C10.4024 23.3097 8.75285 24.8781 7.78593 26.2421C6.49114 28.0687 5.57545 30.2513 5.18268 32.4472C5.0059 33.4356 4.94109 35.1437 5.06876 35.4519C5.21509 35.8052 5.53453 36 5.96735 36C6.6502 36 7.02102 35.6114 7.02211 34.8948C7.02297 34.3329 7.15205 33.2105 7.30361 32.4472C7.56417 31.135 8.17479 29.5552 8.86654 28.404C9.68143 27.0476 10.9812 25.5964 12.1751 24.7101C14.0173 23.3424 15.9779 22.518 18.1903 22.1811C18.4709 22.1383 19.3142 22.0696 20.0643 22.0284C20.8144 21.9871 21.6653 21.898 21.9553 21.8302C22.6461 21.6689 23.4912 21.3626 24.122 21.045C24.9142 20.6461 25.9633 19.8576 26.5587 19.2137C27.7815 17.8915 28.55 16.3484 28.893 14.5268C29.0313 13.7919 29.0138 12.1173 28.8596 11.3412C28.4881 9.47211 27.6286 7.88504 26.2837 6.58463C25.8892 6.20326 25.3557 5.74827 25.098 5.57359C23.9895 4.82211 22.6551 4.30691 21.3009 4.10756C20.4028 3.97536 19.7042 3.96592 18.8591 4.0743ZM21.5368 6.25191C22.2915 6.43283 23.2696 6.87026 23.9452 7.32901C24.5337 7.72872 25.2898 8.48075 25.6771 9.05178C26.2639 9.9168 26.6762 10.9194 26.8509 11.9058C26.8961 12.1606 26.933 12.6752 26.933 13.0492C26.933 14.7572 26.2648 16.4385 25.0666 17.7455C24.2454 18.6412 23.1015 19.337 21.8014 19.7315C21.2004 19.9139 20.9806 19.9398 20.0225 19.941C19.1374 19.9421 18.8104 19.9099 18.3047 19.7715C17.0477 19.4278 15.7765 18.6783 14.9271 17.7802C14.1849 16.9955 13.5502 15.8364 13.2534 14.7237C13.173 14.4222 13.087 13.7889 13.0624 13.3165C13.0268 12.6329 13.0491 12.306 13.172 11.715C13.2568 11.3065 13.4373 10.7057 13.573 10.3796C14.2011 8.8707 15.4471 7.53624 16.8992 6.81709C17.9769 6.28338 18.7302 6.10839 19.9835 6.10051C20.6304 6.09637 21.0647 6.13877 21.5368 6.25191ZM28.8666 23.7849C28.5829 23.9389 28.4166 24.2792 28.4166 24.706C28.4166 24.9937 28.4693 25.1198 28.7202 25.4321C28.8871 25.6399 29.2232 26.0033 29.4669 26.2395C29.9872 26.7436 30.7618 27.7687 31.2123 28.5493C31.9202 29.7757 32.508 31.3976 32.747 32.784C32.8113 33.157 32.894 33.9157 32.9308 34.4699L32.9978 35.4775L33.2828 35.7388C33.5353 35.9702 33.6179 36 34.0063 36C34.4042 36 34.4702 35.9745 34.721 35.7237L34.9974 35.4473L34.9525 34.1815C34.8997 32.6927 34.6829 31.5304 34.1913 30.1021C33.7932 28.9453 32.9482 27.2872 32.2827 26.3566C31.677 25.5098 30.7822 24.4931 30.2208 24.0139C29.8584 23.7045 29.7659 23.6631 29.4448 23.6658C29.2444 23.6675 28.9841 23.7211 28.8666 23.7849Z" fill="#9DA7B2"/>
+</svg>

package/src/iconography/Avatar/DefaultIcon.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const DefaultIcon = () => (
+  <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M18.8591 4.0743C17.5175 4.24647 16.0686 4.78143 14.9877 5.50371C14.3081 5.95785 13.3158 6.87994 12.8402 7.49923C12.0233 8.56305 11.3755 10.0081 11.1261 11.3229C10.9683 12.1545 10.9654 13.8965 11.1204 14.7068C11.3504 15.9088 11.8334 17.0691 12.5556 18.1541C13.022 18.855 14.0159 19.865 14.7227 20.3561L15.2791 20.7428L14.7618 20.9246C14.0573 21.172 12.5613 21.9173 11.8564 22.3719C10.4024 23.3097 8.75285 24.8781 7.78593 26.2421C6.49114 28.0687 5.57545 30.2513 5.18268 32.4472C5.0059 33.4356 4.94109 35.1437 5.06876 35.4519C5.21509 35.8052 5.53453 36 5.96735 36C6.6502 36 7.02102 35.6114 7.02211 34.8948C7.02297 34.3329 7.15205 33.2105 7.30361 32.4472C7.56417 31.135 8.17479 29.5552 8.86654 28.404C9.68143 27.0476 10.9812 25.5964 12.1751 24.7101C14.0173 23.3424 15.9779 22.518 18.1903 22.1811C18.4709 22.1383 19.3142 22.0696 20.0643 22.0284C20.8144 21.9871 21.6653 21.898 21.9553 21.8302C22.6461 21.6689 23.4912 21.3626 24.122 21.045C24.9142 20.6461 25.9633 19.8576 26.5587 19.2137C27.7815 17.8915 28.55 16.3484 28.893 14.5268C29.0313 13.7919 29.0138 12.1173 28.8596 11.3412C28.4881 9.47211 27.6286 7.88504 26.2837 6.58463C25.8892 6.20326 25.3557 5.74827 25.098 5.57359C23.9895 4.82211 22.6551 4.30691 21.3009 4.10756C20.4028 3.97536 19.7042 3.96592 18.8591 4.0743ZM21.5368 6.25191C22.2915 6.43283 23.2696 6.87026 23.9452 7.32901C24.5337 7.72872 25.2898 8.48075 25.6771 9.05178C26.2639 9.9168 26.6762 10.9194 26.8509 11.9058C26.8961 12.1606 26.933 12.6752 26.933 13.0492C26.933 14.7572 26.2648 16.4385 25.0666 17.7455C24.2454 18.6412 23.1015 19.337 21.8014 19.7315C21.2004 19.9139 20.9806 19.9398 20.0225 19.941C19.1374 19.9421 18.8104 19.9099 18.3047 19.7715C17.0477 19.4278 15.7765 18.6783 14.9271 17.7802C14.1849 16.9955 13.5502 15.8364 13.2534 14.7237C13.173 14.4222 13.087 13.7889 13.0624 13.3165C13.0268 12.6329 13.0491 12.306 13.172 11.715C13.2568 11.3065 13.4373 10.7057 13.573 10.3796C14.2011 8.8707 15.4471 7.53624 16.8992 6.81709C17.9769 6.28338 18.7302 6.10839 19.9835 6.10051C20.6304 6.09637 21.0647 6.13877 21.5368 6.25191ZM28.8666 23.7849C28.5829 23.9389 28.4166 24.2792 28.4166 24.706C28.4166 24.9937 28.4693 25.1198 28.7202 25.4321C28.8871 25.6399 29.2232 26.0033 29.4669 26.2395C29.9872 26.7436 30.7618 27.7687 31.2123 28.5493C31.9202 29.7757 32.508 31.3976 32.747 32.784C32.8113 33.157 32.894 33.9157 32.9308 34.4699L32.9978 35.4775L33.2828 35.7388C33.5353 35.9702 33.6179 36 34.0063 36C34.4042 36 34.4702 35.9745 34.721 35.7237L34.9974 35.4473L34.9525 34.1815C34.8997 32.6927 34.6829 31.5304 34.1913 30.1021C33.7932 28.9453 32.9482 27.2872 32.2827 26.3566C31.677 25.5098 30.7822 24.4931 30.2208 24.0139C29.8584 23.7045 29.7659 23.6631 29.4448 23.6658C29.2444 23.6675 28.9841 23.7211 28.8666 23.7849Z"
+      fill="#9DA7B2"
+    />
+  </svg>
+);