@soul-refiner/design-system 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @abide/core
+
+## 0.0.1
+
+### Patch Changes
+
+- init

package/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ["@babel/preset-env", { targets: { node: "current" } }],
+    "@babel/preset-typescript",
+  ],
+};

package/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}

package/package.json

@@ -1,16 +1,7 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.0.3",
-  "main": "./dist/index.mjs",
-  "module": "./dist/index.mjs",
-  "sideEffects": [
-    "**/*.css",
-    "**/*.scss"
-  ],
+  "version": "0.0.5",
   "license": "MIT",
-  "files": [
-    "dist/**"
-  ],
   "scripts": {
     "dev": "vite",
     "build": "mkdir -p dist && cp --parents `find -name \\*scss` ./dist && tsc && vite build",

package/src/actions/Button/Button.module.scss

@@ -0,0 +1,205 @@
+.button {
+  width: fit-content;
+  font-size: 14px;
+  line-height: 20px;
+  cursor: pointer;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  color: var(--color);
+  background-color: var(--background-color);
+
+  & > * {
+    pointer-events: none;
+  }
+  // types
+  &[class~=secondary] {
+    background-color: var(--color-grey-10);
+    border: 1px solid var(--color-grey-6);
+    color: var(--color-grey-1);
+    [class~=icon] {
+      background-color: transparent;
+      > svg {
+        fill: var(--color-grey-1);
+      }
+    }
+    
+    &:hover {
+      background-color: var(--color-grey-9);
+    }
+    &:active {
+      background-color: var(--color-grey-1);
+      color: var(--color-grey-10);
+      [class~=icon] > svg {
+        fill: var(--color-grey-10);
+      }
+    }
+    &[class~=focus] {
+      background-color: var(--color-grey-9);
+      border: 1px solid var(--color-grey-1);
+      [class~=icon] > svg {
+        fill: var(--color-grey-1);
+      }
+    }
+  }
+  &[class~=tertiary] {
+    background-color: #FFFFFF;
+    border: none;
+    color: var(--color-grey-1);
+    [class~=icon] {
+      background-color: transparent;
+      > svg {
+        fill: var(--color-grey-1);
+      }
+    }
+    &:disabled {
+      color: var(--color-grey-5);
+      background-color: #FFFFFF;
+    }
+    &:hover {
+      background-color: var(--color-grey-9);
+    }
+    &:active {
+      color: var(--color-grey-1);
+      background-color: var(--color-grey-7);
+      [class~=icon] > svg {
+        fill: var(--color-grey-1);
+      }
+    }
+    &[class~=focus] {
+      border: 1px solid var(--color-grey-8);
+      background-color: #FFFFFF;
+    }
+  }
+
+  &[class~=quarternary] {
+    padding: 4px 16px 4px 4px !important;
+    background-color: var(--color-blue-10);
+    border: 1px solid var(--color-blue-9);
+    color: var(--color-blue-4);
+    height: 35px;
+
+    [class~=icon] {
+      justify-self: stretch;
+      aspect-ratio: 1;
+      height: 100%;
+      max-height: 40px;
+      width: unset;
+
+      background-color: #E3EBFF;
+      border-radius: 999px;
+      padding: 2px;
+        &> svg {
+          fill: var(--color-blue-4);
+        }
+    }
+    &:hover {
+      background-color: var(--color-blue-9);
+      [class~=icon] {
+        background-color: var(--color-blue-10);
+      }
+    }
+    &:active {
+      background-color: var(--color-blue-9);
+      color: var(--color-blue-8);
+      [class~=icon] {
+        background-color: var(--color-blue-10);
+      }
+      [class~=icon] > svg {
+        fill: var(--color-blue-8);
+      }
+    }
+    &[class~=focus] {
+      background-color: var(--color-grey-9);
+      border: 1px solid var(--color-grey-1);
+      [class~=icon] > svg {
+        fill: var(--color-grey-1);
+      }
+    }
+  }
+
+  // shapes
+  &[class~=rectangular] {
+    border-radius: 5px;
+  }
+
+  // font
+  &[class~=bold] {
+    font-weight: 600;
+  }
+  &[class~=uppercase] {
+    text-transform: uppercase;
+  }
+
+  // icon
+  &[class~=icon-right] {
+    span {
+      order: 1;
+    }
+    [class~=icon] {
+      justify-self: flex-end;
+      order: 2;
+    }
+  }
+
+  // size 
+  &[class~=default] {
+    padding: 9px 32px;
+    &[class~=rounded] {
+      border-radius: 19px;
+    }
+  }
+  &[class~=small] {
+    padding: 6px 16px;
+    &[class~=rounded] {
+      border-radius: 16px;
+    }
+  }
+  &[class~=large] {
+    padding: 14px 40px;
+    &[class~=rounded] {
+      border-radius: 24px;
+    }
+  }
+
+  // states
+  &[class~=disabled] {
+    pointer-events: none;
+  }
+  &:disabled {
+    background-color: var(--color-grey-9) !important;
+    color: var(--color-grey-5) !important;
+
+    div {
+      background-color: var(--color-grey-9) !important;
+      color: var(--color-grey-5) !important;
+      svg {
+        fill: var(--color-grey-5) !important;
+      }
+    }
+  }
+  &:hover {
+    background-color: var(--hover-color);
+    [class~=icon] {
+      background-color: transparent;
+    }
+  }
+  &:active {
+    background-color: var(--color);
+    color: var(--background-color);
+    [class~=icon] > svg {
+      fill: var(--background-color);
+    }
+  }
+  &[class~=focus] {
+    background-color: var(--focus-color);
+    &:active {
+      color: var(--color);
+    }
+    [class~=icon] > svg {
+      fill: var(--color);
+    }
+  }
+}

package/src/actions/Button/Button.spec.js

@@ -0,0 +1,56 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+
+import { Like } from "@soul-refiner/icons/src";
+import { Button } from "./Button";
+
+const generateMockProps = (props) => ({
+  children: "button",
+  ...props,
+});
+
+describe("Button renders", () => {
+  it("as a semantically different element", () => {
+    const props = generateMockProps({
+      as: "a",
+      href: "https://google.com",
+    });
+    render(<Button {...props} />);
+    expect(screen.getByRole("link"));
+  });
+
+  it("with different text styles", () => {
+    const props = generateMockProps({
+      bold: false,
+      uppercase: false,
+    });
+    render(<Button {...props} />);
+    const button = screen.getByRole("button");
+    expect(!button.className.includes("bold"));
+    expect(!button.className.includes("uppercase"));
+  });
+
+  it("with an icon", () => {
+    const props = generateMockProps({
+      icon: <Like data-testid="icon" iconSize={8} size={16} fill="#000" />,
+    });
+    render(<Button {...props} />);
+    expect(screen.getByTestId("icon"));
+  });
+
+  it("with loading state", () => {
+    const props = generateMockProps({
+      loading: true,
+    });
+    render(<Button {...props} />);
+    const button = screen.getByRole("button");
+    expect(button.firstChild).toHaveStyle({
+      width: "14px",
+      height: "14px",
+      borderBottomColor: "transparent",
+      borderRightColor: "transparent",
+      borderLeftColor: "transparent",
+    });
+  });
+});

package/src/actions/Button/Button.tsx

@@ -0,0 +1,143 @@
+import React from "react";
+import buttonStyles from "./Button.module.scss";
+import { Loader } from "../../feedback/Loader";
+import { ChevronDown, ChevronUp } from "@soul-refiner/icons/src";
+import {
+  deriveHoverColor,
+  deriveFocusColor,
+} from "@soul-refiner/utils/src/colors";
+
+export interface ButtonProps
+  extends React.PropsWithChildren,
+    Omit<
+      React.HTMLProps<HTMLButtonElement | HTMLAnchorElement>,
+      "type" | "size" | "as"
+    > {
+  as?: React.ElementType;
+  bold?: boolean;
+  buttonType?: "primary" | "secondary" | "tertiary" | "quarternary";
+  buttonColor?: string;
+  className?: string;
+  dropdownOpen?: boolean;
+  icon?: React.ReactElement;
+  iconPosition?: "left" | "right";
+  inverted?: boolean;
+  focus?: boolean;
+  fluid?: boolean;
+  loading?: boolean;
+  padded?: boolean;
+  shape?: "rectangular" | "rounded";
+  size?: "default" | "small" | "large" | number;
+  styles?: React.CSSProperties;
+  color?: string;
+  uppercase?: boolean;
+}
+
+interface ButtonStyles extends React.CSSProperties {
+  "--background-color"?: string;
+  "--color"?: string;
+  "--hover-color"?: string;
+  "--focus-color"?: string;
+}
+
+export const Button = ({
+  as: Tag = "button",
+  bold = true,
+  buttonType = "primary",
+  buttonColor = "var(--color-blue-10)",
+  children,
+  className,
+  color = "var(--colorify-blue-3)",
+  disabled,
+  dropdownOpen,
+  focus,
+  icon,
+  iconPosition = "left",
+  inverted,
+  href,
+  fluid,
+  loading,
+  padded = true,
+  shape = "rounded",
+  size = "default",
+  style,
+  uppercase = true,
+  ...rest
+}: ButtonProps) => {
+  /**
+   * TODO: Refactor styles below to use variable definition pattern (width, padding, border-radius)
+   */
+  const additionalStyles: ButtonStyles = {
+    ...style,
+  };
+  if (fluid) {
+    additionalStyles.width = "100%";
+  }
+  if (!padded) {
+    additionalStyles.padding = "0px 0px 0px 0px";
+  }
+  if (typeof size === "number") {
+    additionalStyles.paddingLeft = 18 * size;
+    additionalStyles.paddingRight = 18 * size;
+    additionalStyles.paddingTop = 9 * size;
+    additionalStyles.paddingBottom = 9 * size;
+    if (shape === "rounded") {
+      additionalStyles.borderRadius = `${10 + 9 * size}px`;
+    }
+  }
+
+  additionalStyles["--background-color"] = inverted ? color : buttonColor;
+  additionalStyles["--color"] = !inverted ? color : buttonColor;
+  additionalStyles["--hover-color"] = deriveHoverColor(
+    inverted ? color : buttonColor
+  );
+  additionalStyles["--focus-color"] = deriveFocusColor(
+    inverted ? color : buttonColor
+  );
+
+  return (
+    <Tag
+      className={`${buttonStyles.button} ${focus ? "focus" : ""} ${
+        bold ? "bold" : ""
+      } ${buttonType ? buttonType : ""} ${disabled ? "disabled" : ""} ${
+        iconPosition ? "icon-" + iconPosition : ""
+      } ${size} ${shape ? shape : ""} ${uppercase ? "uppercase" : ""} ${
+        className ? className : ""
+      }`}
+      disabled={disabled}
+      href={!disabled && href ? href : undefined}
+      style={additionalStyles}
+      {...rest}
+    >
+      {icon && !loading && icon}
+      {!disabled && loading && (
+        <Loader
+          color={!inverted ? color : buttonColor}
+          inline
+          size={14}
+          styles={{ marginRight: 8 }}
+        />
+      )}
+      <span style={{ flexShrink: 0 }}>{children}</span>
+      {dropdownOpen !== undefined ? (
+        dropdownOpen ? (
+          <ChevronUp
+            fill={!inverted ? color : buttonColor}
+            inline
+            size={14}
+            iconSize={12}
+            style={{ margin: "0px 0px 0px 8px" }}
+          />
+        ) : (
+          <ChevronDown
+            fill={!inverted ? color : buttonColor}
+            inline
+            size={14}
+            iconSize={12}
+            style={{ margin: "0px 0px 0px 8px" }}
+          />
+        )
+      ) : null}
+    </Tag>
+  );
+};

package/src/actions/Button/index.ts

@@ -0,0 +1 @@
+export { Button, type ButtonProps } from "./Button";

package/src/actions/Dropdown/Dropdown.module.scss

@@ -0,0 +1,77 @@
+@use "@soul-refiner/styles/mixins";
+
+.dropdown {
+  position: relative;
+  display: block;
+  width: var(--width);
+  outline: none;
+
+  [class~="options"] {
+    position: absolute;
+    width: max-content;
+    padding: 8px;
+    border-radius: var(--border-radius-small);
+    box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.15);
+    background-color: white;
+    z-index: 100;
+    outline: none;
+    cursor: pointer;
+
+    &[class~="open-left"] {
+      right: 100%;
+    }
+  }
+
+  [class~="disabled"] {
+    pointer-events: none;
+  }
+}
+
+.option {
+  @include mixins.flex($gap: 8px, $align: center);
+  @include mixins.font(400, 14px, 22px);
+  padding: 5px 8px;
+  height: 32px;
+  width: 100%;
+  color: var(--color-grey-0);
+  border-radius: var(--border-radius-tiny);
+  user-select: none;
+  outline: none;
+  flex-shrink: 0;
+
+  &[class~="selected"] {
+    background-color: var(--color-blue-9);
+  }
+
+  &:disabled {
+    color: var(--color-grey-5);
+    & > div > svg {
+      fill: var(--color-grey-5);
+    }
+  }
+
+  & > * {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  input {
+    // TODO: style checkbox of list component
+    --todo: #fff;
+  }
+
+  &:hover {
+    background-color: var(--color-grey-9);
+  }
+}
+
+.spacer {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-grey-8);
+  margin: 16px 0px;
+
+  &:hover {
+    appearance: none;
+  }
+}

package/src/actions/Dropdown/Dropdown.spec.js

@@ -0,0 +1,149 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { Like } from "@soul-refiner/icons/src";
+import { Dropdown } from "./Dropdown";
+import { Button } from "../Button";
+
+const generateMockProps = (props) => ({
+  onChange: jest.fn(),
+  closeOnChange: true,
+  options: [
+    {
+      value: "option1",
+      label: "Option 1",
+      style: { width: 160 },
+    },
+    {
+      value: "option2",
+      label: "Option 2",
+      style: { width: 160 },
+    },
+    {
+      value: "option3",
+      label: "Option 3",
+      style: { width: 160 },
+    },
+    {
+      value: "option4",
+      label: "Option 4",
+      style: { width: 160 },
+    },
+  ],
+  trigger: <Button>Dropdown</Button>,
+  ...props,
+});
+
+describe("Dropdown", () => {
+  it("renders its options", () => {
+    const props = generateMockProps({});
+    render(<Dropdown {...props} />);
+    const trigger = screen.getByRole("button");
+    fireEvent.click(trigger);
+    const optionsWrapper = screen.getByTestId("options-wrapper");
+    expect(optionsWrapper.children.length).toEqual(4);
+  });
+
+  it("renders selectable options", () => {
+    const props = generateMockProps({
+      closeOnChange: false,
+    });
+    render(<Dropdown {...props} />);
+    const trigger = screen.getByRole("button");
+    fireEvent.click(trigger);
+    const optionsWrapper = screen.getByTestId("options-wrapper");
+    fireEvent.click(optionsWrapper.children[0]);
+    expect(optionsWrapper.children[0]).toHaveAttribute(
+      "class",
+      "undefined  selected"
+    );
+  });
+
+  it("renders checkbox options", () => {
+    const props = generateMockProps({
+      options: [
+        {
+          checkbox: true,
+          value: "option1",
+          label: "Option 1",
+          style: { width: 160 },
+        },
+        {
+          checkbox: true,
+          value: "option2",
+          label: "Option 2",
+          style: { width: 160 },
+        },
+        {
+          checkbox: true,
+          value: "option3",
+          label: "Option 3",
+          style: { width: 160 },
+        },
+        {
+          checkbox: true,
+          value: "option4",
+          label: "Option 4",
+          style: { width: 160 },
+        },
+      ],
+    });
+    render(<Dropdown {...props} />);
+    const trigger = screen.getByRole("button");
+    fireEvent.click(trigger);
+    const optionsWrapper = screen.getByTestId("options-wrapper");
+    expect(optionsWrapper.children[0].children[0].tagName).toEqual("INPUT");
+  });
+
+  it("renders icon options", () => {
+    const props = generateMockProps({
+      options: [
+        {
+          value: "option1",
+          label: "Option 1",
+          style: { width: 160 },
+          icon: <Like iconSize={16} size="20" fill="var(--color-grey-4)" />,
+        },
+        {
+          value: "option2",
+          label: "Option 2",
+          style: { width: 160 },
+          icon: <Like iconSize={16} size="20" fill="var(--color-grey-4)" />,
+        },
+        {
+          value: "option3",
+          label: "Option 3",
+          style: { width: 160 },
+          icon: <Like iconSize={16} size="20" fill="var(--color-grey-4)" />,
+        },
+        {
+          value: "option4",
+          label: "Option 4",
+          style: { width: 160 },
+          icon: <Like iconSize={16} size="20" fill="var(--color-grey-4)" />,
+        },
+      ],
+    });
+    render(<Dropdown {...props} />);
+    const trigger = screen.getByRole("button");
+    fireEvent.click(trigger);
+    const optionsWrapper = screen.getByTestId("options-wrapper");
+    expect(optionsWrapper.children[0].children[0]).toHaveAttribute(
+      "class",
+      "undefined icon "
+    );
+  });
+
+  it("fires the onChange handler upon selection", () => {
+    const props = generateMockProps({
+      closeOnChange: false,
+    });
+    render(<Dropdown {...props} />);
+    const trigger = screen.getByRole("button");
+    fireEvent.click(trigger);
+    const optionsWrapper = screen.getByTestId("options-wrapper");
+    fireEvent.click(optionsWrapper.children[0]);
+    expect(props.onChange).toHaveBeenCalled();
+  });
+});