@soul-refiner/design-system 0.0.3 → 0.0.5

package/src/inputs/TextInput/TextInput.module.scss

@@ -0,0 +1,35 @@
+@use "@soul-refiner/styles/mixins";
+
+.textField {
+  position: relative;
+  width: 100%;
+  display: flex;
+  padding: 12px 16px;
+  border-radius: var(--border-radius-normal);
+  background-color: var(--color-blue-10);
+
+  .counter {
+    @include mixins.font(400, 16px, 24px);
+    position: absolute;
+    bottom: 8px;
+    right: 16px;
+    color: #a4b0bf;
+  }
+
+  textarea[type="text"] {
+    width: 100%;
+    border: none;
+    resize: none;
+    background-color: transparent;
+    font-size: var(--size-16);
+    color: var(--color-grey-1);
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.hasCharacterCount {
+  padding-bottom: 32px;
+}

package/src/inputs/TextInput/TextInput.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import styles from "./TextInput.module.scss";
+
+export interface TextInputProps extends React.HTMLProps<HTMLTextAreaElement> {
+  characterCount?: boolean;
+}
+
+export const TextInput = ({
+  className,
+  characterCount = true,
+  maxLength,
+  value,
+  ...rest
+}: TextInputProps) => {
+  const ref = React.useRef<HTMLTextAreaElement>(null);
+
+  React.useEffect(() => {
+    if (ref.current) {
+      ref.current.style.height = "0px";
+      const scrollHeight = ref.current.scrollHeight;
+      ref.current.style.height = scrollHeight + "px";
+    }
+  }, [ref.current, value]);
+
+  return (
+    <div
+      className={`${styles.textField} ${
+        characterCount ? styles.hasCharacterCount : ""
+      }`}
+    >
+      <textarea
+        className={`${className ? " " + className : ""}`}
+        type="text"
+        maxLength={maxLength}
+        ref={ref}
+        value={value}
+        {...rest}
+      />
+      {characterCount && value !== undefined && maxLength && (
+        <span className={styles.counter}>
+          {value.toString().length.toString()} / {maxLength.toString()}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/inputs/TextInput/index.ts

@@ -0,0 +1 @@
+export { TextInput, type TextInputProps } from "./TextInput";

package/src/inputs/index.ts

@@ -0,0 +1,10 @@
+export { CalendarInput, type CalendarInputProps } from "./CalendarInput";
+export { CheckboxInput, type CheckboxInputProps } from "./CheckboxInput";
+export { FeedInput, type FeedInputProps } from "./FeedInput";
+export { InboxInput, type InboxInputProps } from "./InboxInput";
+export { PostInput, type PostInputProps } from "./PostInput";
+export { RadioInput, type RadioInputProps } from "./RadioInput";
+export { SearchInput, type SearchInputProps } from "./SearchInput";
+export { SelectInput, type SelectInputProps } from "./SelectInput";
+export { TagInput, type TagInputProps } from "./TagInput";
+export { TextInput, type TextInputProps } from "./TextInput";

package/src/lists/ContactDetails/ContactDetails.module.scss

@@ -0,0 +1,70 @@
+@use "@soul-refiner/styles/mixins";
+
+.contactdetails {
+  @include mixins.flex($dir: column, $gap: 19px);
+  position: relative;
+  border-radius: var(--border-radius-normal);
+  padding: 32px;
+
+  &[class~="not-editing"] {
+    @include mixins.hover-editable();
+    cursor: pointer;
+  }
+
+  div {
+    @include mixins.flex($gap: 24px);
+  }
+
+  a {
+    color: var(--color-blue-3);
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  input {
+    box-sizing: border-box;
+    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
+    padding: 5px 16px;
+    background-color: #f2f8ff;
+    border: none;
+    border-radius: var(--border-radius-small);
+
+    &[class~="link"] {
+      color: var(--color-blue-3);
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.wrapper {
+  @include mixins.flex($dir: column, $gap: 19px);
+  width: fit-content;
+
+  [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);
+        }
+      }
+    }
+  }
+}

package/src/lists/ContactDetails/ContactDetails.spec.js

@@ -0,0 +1,69 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+
+import { ContactDetails } from "./ContactDetails";
+
+const props = {
+  email: "support@soulrefiner.com",
+  location: "Stuart, FL, USA",
+  phone: "(941) 251-8670",
+  url: "https://soulrefiner.com",
+  onSubmit: jest.fn(),
+}
+
+describe("Contact Details renders", () => {
+  it("the email, location, phone, and url", () => {
+    render(<ContactDetails {...props} />);
+    expect(screen.getByText("support@soulrefiner.com"));
+    expect(screen.getByText("Stuart, FL, USA"));
+    expect(screen.getByText("(941) 251-8670"));
+    expect(screen.getByText("https://soulrefiner.com"));
+  });
+
+  it("an editable state", () => {
+    render(<ContactDetails {...props} />);
+    const contactDetails = screen.getByTestId("contact-details");
+    fireEvent.click(contactDetails);
+    expect(screen.getByTestId("location").tagName).toEqual("INPUT");
+    expect(screen.getByTestId("phone").tagName).toEqual("INPUT");
+    expect(screen.getByTestId("email").tagName).toEqual("INPUT");
+    expect(screen.getByTestId("url").tagName).toEqual("INPUT");
+  });
+
+  it("inputs that can change", () => {
+    render(<ContactDetails {...props} />);
+    const contactDetails = screen.getByTestId("contact-details");
+    fireEvent.click(contactDetails);
+    const locationInput = screen.getByTestId("location");
+    fireEvent.change(locationInput, { target: { value: "Port St Lucie, FL, USA" } });
+    expect(locationInput.value).toEqual("Port St Lucie, FL, USA");
+  });
+
+  it("a submitable form", () => {
+    render(<ContactDetails {...props} />);
+    const contactDetails = screen.getByTestId("contact-details");
+    fireEvent.click(contactDetails);
+    const submitButton = screen.getByTestId("contact-details-submit")
+    fireEvent.click(submitButton);
+    expect(props.onSubmit).toHaveBeenCalledWith({
+      email: "support@soulrefiner.com",
+      location: "Stuart, FL, USA",
+      phone: "(941) 251-8670",
+      url: "https://soulrefiner.com",
+    });
+  });
+
+  it("a resetable form", () => {
+    render(<ContactDetails {...props} />);
+    const contactDetails = screen.getByTestId("contact-details");
+    fireEvent.click(contactDetails);
+    const resetButton = screen.getByTestId("contact-details-reset")
+    fireEvent.click(resetButton);
+    expect(screen.getByTestId("location").tagName).toEqual("P");
+    expect(screen.getByTestId("phone").tagName).toEqual("A");
+    expect(screen.getByTestId("email").tagName).toEqual("A");
+    expect(screen.getByTestId("url").tagName).toEqual("A");
+  });
+})

package/src/lists/ContactDetails/ContactDetails.tsx

@@ -0,0 +1,185 @@
+import React from "react";
+import { Component } from "@soul-refiner/utils/src";
+import contactDetailsStyles from "./ContactDetails.module.scss";
+import {
+  Check,
+  Close,
+  Location,
+  Mail,
+  Pencil,
+  Phone,
+  URL,
+} from "@soul-refiner/icons/src";
+
+export interface ContactDetailsProps {
+  email?: string;
+  location?: string;
+  url?: string;
+  phone?: string;
+  onSubmit: (props: {
+    email: string;
+    location: string;
+    url: string;
+    phone: string;
+  }) => void;
+}
+
+export const ContactDetails = ({
+  email = "",
+  location = "",
+  url = "",
+  phone = "(000) 000-0000",
+  onSubmit,
+}: ContactDetailsProps) => {
+  const [editing, setEditing] = React.useState(false);
+  const [details, setState] = React.useState(() => ({
+    location: location,
+    email: email,
+    url: url,
+    phone: phone,
+  }));
+
+  const handleEditing = (event: React.MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setEditing((prev) => !prev);
+  };
+
+  const handleChange = (event: React.FormEvent) => {
+    const value = (event.target as HTMLInputElement).value;
+    if ((event.target as HTMLInputElement).name === "phone") {
+      let phoneNumber = value.replace(/[^\d]/g, "");
+      if (phoneNumber.length < 4) {
+        setState((prev) => ({
+          ...prev,
+          phone: phoneNumber,
+        }));
+        return;
+      }
+      if (phoneNumber.length < 7) {
+        setState((prev) => ({
+          ...prev,
+          phone: `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(3)}`,
+        }));
+        return;
+      }
+      setState((prev) => ({
+        ...prev,
+        phone: `(${phoneNumber.slice(0, 3)}) ${phoneNumber.slice(
+          3,
+          6
+        )}-${phoneNumber.slice(6, 10)}`,
+      }));
+      return;
+    }
+    setState((prev) => ({
+      ...prev,
+      [(event.target as HTMLInputElement).name]: value,
+    }));
+  };
+
+  const handleReset = () => {
+    setState({
+      location: location,
+      email: email,
+      url: url,
+      phone: phone,
+    });
+    setEditing(false);
+  };
+
+  const handleSubmit = () => {
+    setEditing(false);
+    onSubmit(details);
+  };
+
+  return (
+    <div className={contactDetailsStyles.wrapper}>
+      <Component
+        as={editing ? "form" : "div"}
+        className={`${contactDetailsStyles.contactdetails} shadow-small ${
+          editing ? "" : "not-editing"
+        }`}
+        data-edit-caption="Edit Contact Details"
+        data-testid="contact-details"
+        onClick={handleEditing}
+        onSubmit={handleSubmit}
+      >
+        <div>
+          <Location fill="var(--color-grey-3)" iconSize={22} size={24} />
+          <Component
+            as={editing ? "input" : "p"}
+            className="body body-large"
+            data-testid="location"
+            children={editing ? undefined : details.location}
+            name="location"
+            onChange={handleChange}
+            value={details.location}
+          />
+        </div>
+        <div>
+          <Mail fill="var(--color-grey-3)" iconSize={22} size={24} />
+          <Component
+            as={editing ? "input" : "a"}
+            className="link body body-large"
+            data-testid="email"
+            children={editing ? undefined : details.email}
+            href={editing ? undefined : "mailto:" + details.email}
+            name="email"
+            onClick={(event: React.MouseEvent) => event.stopPropagation()}
+            onChange={handleChange}
+            value={details.email}
+          />
+        </div>
+        <div>
+          <URL fill="var(--color-grey-3)" iconSize={22} size={24} />
+          <Component
+            as={editing ? "input" : "a"}
+            className="link body body-large"
+            children={editing ? undefined : details.url}
+            data-testid="url"
+            href={editing ? undefined : details.url}
+            name="url"
+            onClick={(event: React.MouseEvent) => event.stopPropagation()}
+            onChange={handleChange}
+            value={details.url}
+          />
+        </div>
+        <div>
+          <Phone fill="var(--color-grey-3)" iconSize={20} size={24} />
+          <Component
+            as={editing ? "input" : "a"}
+            className="link body body-large"
+            children={editing ? undefined : details.phone}
+            data-testid="phone"
+            href={editing ? undefined : "tel:" + details.phone}
+            name="phone"
+            onClick={(event: React.MouseEvent) => event.stopPropagation()}
+            onChange={handleChange}
+            value={details.phone}
+          />
+        </div>
+      </Component>
+      {editing && (
+        <div className="actions">
+          <Check
+            as="button"
+            data-testid="contact-details-submit"
+            fill="var(--color-grey-4)"
+            iconSize={10}
+            onClick={handleSubmit}
+            size={32}
+          />
+          <Close
+            as="button"
+            data-testid="contact-details-reset"
+            fill="var(--color-grey-4)"
+            iconSize={10}
+            onClick={handleReset}
+            size={32}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/lists/ContactDetails/index.ts

@@ -0,0 +1 @@
+export { ContactDetails, type ContactDetailsProps } from "./ContactDetails";

package/src/lists/index.ts

@@ -0,0 +1 @@
+export { ContactDetails, type ContactDetailsProps } from "./ContactDetails";

package/src/navigation/Breadcrumbs/Breadcrumbs.module.scss

@@ -0,0 +1,18 @@
+.breadcrumbs ul {
+    
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    place-items: center;
+
+    a {
+        font-size: var(--size-20);
+        color: var(--color-grey-4);
+        font-weight: 400;
+        transition: 125ms opacity ease-in-out;
+
+        &:hover {
+            opacity: 0.5;
+        }
+    }
+}

package/src/navigation/Breadcrumbs/Breadcrumbs.spec.js

@@ -0,0 +1,38 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import { Breadcrumbs } from "./Breadcrumbs";
+
+const generateMockProps = props => ({
+  crumbs: [
+    { label: "Home", url: "#" },
+    { label: "Something", url: "#" },
+    { label: "Sub Something", url: "#" },
+    { label: "Current Page", url: "#" },
+  ],
+  ...props,
+});
+
+describe("Breadcrumbs", () => {
+  it("renders the collapsed breadcrumbs", () => {
+    const props = generateMockProps({
+      collapse: true,
+    });
+    render(<Breadcrumbs {...props} />);
+    expect(screen.getByText("Home"));
+    expect(screen.getByText("Current Page"));
+    expect(screen.getAllByText("...").length).toEqual(2);
+  });
+
+  it("renders all breadcrumbs", () => {
+    const props = generateMockProps({
+      collapse: false,
+    });
+    render(<Breadcrumbs {...props} />);
+    expect(screen.getByText("Home"));
+    expect(screen.getByText("Something"));
+    expect(screen.getByText("Sub Something"));
+    expect(screen.getByText("Current Page"));
+  });
+});

package/src/navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import styles from "./Breadcrumbs.module.scss";
+import { ChevronRight } from "@soul-refiner/icons/src";
+
+export interface BreadcrumbsProps {
+  crumbs: Array<Breadcrumb>;
+  collapse: boolean;
+}
+
+export interface Breadcrumb {
+  label: string;
+  url: string;
+}
+
+export const Breadcrumbs = ({
+  crumbs = [
+    { label: "Home", url: "#" },
+    { label: "Something", url: "#" },
+    { label: "Sub Something", url: "#" },
+    { label: "Current Page", url: "#" },
+  ],
+  collapse,
+}: BreadcrumbsProps) => {
+  return (
+    <nav aria-label="breadcrumb-navigation" className={styles.breadcrumbs}>
+      <ul>
+        {crumbs.map((crumb, index) => {
+          const innerItem = index > 0 && index < crumbs.length - 1;
+          return (
+            <React.Fragment key={index + JSON.stringify(crumb)}>
+              {(innerItem || index === crumbs.length - 1) && <ChevronRight />}
+              <a href={crumb.url} title={crumb.label}>
+                <li key={index}>
+                  {innerItem && collapse ? "..." : crumb.label}
+                </li>
+              </a>
+            </React.Fragment>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+};

package/src/navigation/Breadcrumbs/index.ts

@@ -0,0 +1 @@
+export { Breadcrumbs, type BreadcrumbsProps } from "./Breadcrumbs";

package/src/navigation/Drawer/Drawer.module.scss

@@ -0,0 +1,104 @@
+@use "@soul-refiner/styles/mixins";
+
+.background {
+  position: fixed;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 149;
+  overflow: hidden;
+  background: radial-gradient(
+    79.02% 79.02% at 50% 0%,
+    rgba(0, 27, 58, 0.8) 0%,
+    rgba(0, 0, 0, 0.8) 100%
+  );
+  backdrop-filter: blur(5px);
+  cursor: pointer;
+}
+
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  max-width: 930px;
+  width: 100%;
+  z-index: 150;
+  border-radius: 20px 0px 0px 20px;
+  background-color: var(--background-color);
+  margin-right: 0;
+  transition: margin-right 0.5s;
+
+  &[class~="closed"] {
+    margin-right: -100vw;
+  }
+
+  [class~="children-wrapper"] {
+    @include mixins.flex($dir: column, $gap: 24px);
+    height: calc(100vh - 88px);
+    position: relative;
+    padding: 24px;
+    margin-right: 8px;
+    overflow: auto;
+
+    [class~="tabs-wrapper"] {
+      height: 64px;
+      width: 100%;
+      border-bottom: 4px solid var(--color-grey-9);
+      border-radius: 4px;
+
+      & > * {
+        height: 64px;
+      }
+    }
+
+    &[class~="with-actions"] {
+      height: calc(100vh - 135px);
+    }
+
+    &::-webkit-scrollbar-track {
+      margin: 40px 0px 15px 0px;
+    }
+  }
+
+  [class~="actions-wrapper"] {
+    @include mixins.flex($justify: flex-end, $align: center, $gap: 24px);
+    padding: 16px 36px 16px 24px;
+    background-color: #ffffff;
+    border-top: 1px solid var(--color-grey-9);
+    border-bottom-left-radius: 20px;
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+
+    button {
+      width: 200px;
+      padding-left: 23px;
+      padding-right: 23px;
+    }
+  }
+}
+
+.heading {
+  @include mixins.flex($align: center, $justify: space-between);
+  padding: 16px 24px;
+  border-top-left-radius: 20px;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+  background-color: #ffffff;
+  @include mixins.font(700, 24px, 32px);
+  color: var(--color-grey-4);
+  & > * {
+    @include mixins.font(700, 24px, 32px);
+    color: var(--color-grey-4);
+  }
+}
+
+.item {
+  @include mixins.flex($dir: column, $gap: 32px);
+  width: 100%;
+  padding: 32px;
+  background-color: #ffffff;
+  border: 1px solid rgba(209, 213, 216, 0.5);
+  box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+}