@soul-refiner/design-system 0.0.5 → 0.0.6

package/CHANGELOG.md

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

package/babel.config.js

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

package/custom.d.ts

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

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

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

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

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

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

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

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

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