@soul-refiner/design-system 0.0.5 → 0.0.6

package/src/cards/FeatureCard/FeatureCard.spec.js

@@ -1,70 +0,0 @@
-import React from "react";
-import "@testing-library/jest-dom";
-import { render, screen, fireEvent } from "@testing-library/react";
-
-
-import { FeatureCard } from "./FeatureCard";
-
-const props = {
-  subtitle: "New courses added every month",
-  title: "Access to all our Courses",
-  thumbnail: "https://source.unsplash.com/random/300x300/?christian",
-  onSubmit: jest.fn(),
-  onPhotoChange: jest.fn(),
-}
-
-describe("Feature Card", () => {
-  it("renders the img, the title, and the subtitle", () => {
-    render(<FeatureCard {...props} />);
-    expect(screen.getByText("New courses added every month"));
-    expect(screen.getByText("Access to all our Courses"));
-    expect(screen.getByRole("img")).toHaveAttribute("src", "https://source.unsplash.com/random/300x300/?christian");
-  });
-
-  it("an editable state", () => {
-    render(<FeatureCard {...props} />);
-    const featurecard = screen.getByTestId("feature-card");
-    fireEvent.click(featurecard);
-    expect(screen.getByTestId("title").tagName).toEqual("INPUT");
-    expect(screen.getByTestId("subtitle").tagName).toEqual("INPUT");
-  });
-
-  it("inputs that can change", () => {
-    render(<FeatureCard {...props} />);
-    const featurecard = screen.getByTestId("feature-card");
-    fireEvent.click(featurecard);
-    const titleInput = screen.getByTestId("title");
-    fireEvent.change(titleInput, { target: { value: "Access our new content" } });
-    expect(titleInput.value).toEqual("Access our new content");
-  });
-
-  it("a submitable form", () => {
-    render(<FeatureCard {...props} />);
-    const featurecard = screen.getByTestId("feature-card");
-    fireEvent.click(featurecard);
-    const submitButton = screen.getByTestId("feature-card-submit")
-    fireEvent.click(submitButton);
-    expect(props.onSubmit).toHaveBeenCalledWith({
-      subtitle: "New courses added every month",
-      title: "Access to all our Courses",
-      thumbnail: "https://source.unsplash.com/random/300x300/?christian",
-    });
-  });
-
-  it("a resetable form", () => {
-    render(<FeatureCard {...props} />);
-    const featurecard = screen.getByTestId("feature-card");
-    fireEvent.click(featurecard);
-    const resetButton = screen.getByTestId("feature-card-reset")
-    fireEvent.click(resetButton);
-    expect(screen.getByTestId("title").tagName).toEqual("FIGCAPTION");
-    expect(screen.getByTestId("subtitle").tagName).toEqual("P");
-  });
-
-  it("changes the photo", () => {
-    render(<FeatureCard {...props} />);
-    const photoEditButton = screen.getByTestId("photo-edit");
-    fireEvent.click(photoEditButton);
-    expect(props.onSubmit).toHaveBeenCalled();
-  });
-})

package/src/cards/FeatureCard/FeatureCard.tsx

@@ -1,123 +0,0 @@
-import React from "react";
-import { Component } from "@soul-refiner/utils/src";
-import { Camera, Check, Close, Pencil } from "@soul-refiner/icons/src";
-import featureCardStyles from "./FeatureCard.module.scss";
-import { Button } from "../../actions";
-
-export interface FeatureCardProps {
-  onPhotoChange: () => void;
-  onSubmit: (args: {
-    thumbnail: string;
-    title: string;
-    subtitle: string;
-  }) => void;
-  subtitle: string;
-  thumbnail: string;
-  title: string;
-}
-
-export const FeatureCard = ({
-  onPhotoChange,
-  onSubmit,
-  subtitle,
-  thumbnail,
-  title,
-}: FeatureCardProps) => {
-  const [editing, setEditing] = React.useState(false);
-  const [state, setState] = React.useState(() => ({
-    subtitle,
-    thumbnail,
-    title,
-  }));
-
-  const handleEdit = (event: React.MouseEvent) => {
-    event.preventDefault();
-    setEditing((prev) => !prev);
-  };
-
-  const handleChange = (event: React.FormEvent) => {
-    const value = (event.target as HTMLInputElement).value;
-    setState((prev) => ({
-      ...prev,
-      [(event.target as HTMLInputElement).name]: value,
-    }));
-  };
-
-  const handleSubmit = () => {
-    setEditing(false);
-    onSubmit(state);
-  };
-
-  const handleReset = () => {
-    setEditing(false);
-    setState({
-      subtitle,
-      thumbnail,
-      title,
-    });
-  };
-
-  return (
-    <Component
-      as={editing ? "fieldset" : "a"}
-      className={`${featureCardStyles.featurecard} ${
-        editing ? "" : " not-editing"
-      }`}
-      data-edit-caption="Edit Feature"
-      data-testid="feature-card"
-      onClick={editing ? undefined : handleEdit}
-    >
-      <figure>
-        <Button
-          buttonColor="var(--color-grey-8)"
-          className="photo-edit"
-          data-testid="photo-edit"
-          color="var(--color-grey-0)"
-          icon={<Camera fill="var(--color-grey-0)" iconSize={21} size={21} />}
-          onClick={editing ? onPhotoChange : undefined}
-        >
-          Edit
-        </Button>
-        <img src={thumbnail} alt={title} title={title} />
-        <Component
-          as={editing ? "input" : "figcaption"}
-          data-testid="title"
-          name="title"
-          onChange={editing ? handleChange : undefined}
-          value={state.title}
-        >
-          {editing ? undefined : state.title}
-        </Component>
-        <Component
-          as={editing ? "input" : "p"}
-          data-testid="subtitle"
-          name="subtitle"
-          onChange={editing ? handleChange : undefined}
-          value={state.subtitle}
-        >
-          {editing ? undefined : state.subtitle}
-        </Component>
-      </figure>
-      {editing && (
-        <div className="actions">
-          <Check
-            as="button"
-            data-testid="feature-card-submit"
-            fill="var(--color-grey-4)"
-            iconSize={10}
-            onClick={handleSubmit}
-            size={32}
-          />
-          <Close
-            as="button"
-            data-testid="feature-card-reset"
-            fill="var(--color-grey-4)"
-            iconSize={10}
-            onClick={handleReset}
-            size={32}
-          />
-        </div>
-      )}
-    </Component>
-  );
-};

package/src/cards/FeatureCard/index.ts

@@ -1 +0,0 @@
-export { FeatureCard, type FeatureCardProps } from "./FeatureCard";

package/src/cards/index.ts

@@ -1,3 +0,0 @@
-export { CourseCard, type CourseCardProps } from "./CourseCard";
-export { EpisodeCard, type EpisodeCardProps } from "./EpisodeCard";
-export { FeatureCard, type FeatureCardProps } from "./FeatureCard";

package/src/data/Bar/Bar.module.scss

@@ -1,105 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.bar {
-  @include mixins.flex($dir: column, $gap: 64px);
-  padding: 32px;
-  border-radius: 25px;
-  background-color: #ffffff;
-  position: relative;
-  z-index: 1;
-
-  [class~="graph"] {
-    position: relative;
-    height: var(--graph-height);
-    width: var(--graph-width);
-    margin-bottom: 32px;
-
-    [class~="grid"] {
-      @include mixins.grid();
-      grid-auto-rows: 1fr;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 100%;
-      width: 100%;
-      z-index: -1;
-
-      div {
-        @include mixins.flex($align: flex-start);
-
-        p {
-          @include mixins.font(600, 16px, 24px);
-          position: relative;
-          width: 72px;
-          top: -12px;
-        }
-
-        & > div {
-          border-top: 1px solid var(--color-grey-9);
-          height: 100%;
-          width: 100%;
-        }
-
-        &:last-child {
-          & > div {
-            border-bottom: 1px solid var(--color-grey-9);
-            position: relative;
-
-            &::before {
-              @include mixins.font(600, 16px, 24px);
-              content: "0";
-              position: absolute;
-              left: -64px;
-              bottom: -12px;
-            }
-          }
-        }
-      }
-    }
-
-    [class~="info"] {
-      @include mixins.flex($align: flex-end, $justify: space-around);
-      padding-left: 64px;
-      height: 100%;
-      width: 100%;
-      z-index: 2;
-
-      [class~="set"] {
-        @include mixins.flex($align: flex-end, $gap: 8px);
-        [class~="bar"] {
-          height: var(--bar-height);
-          width: 26px;
-          background-color: var(--bar-color);
-          border-radius: 4px 4px 0px 0px;
-        }
-      }
-    }
-  }
-
-  [class~="keys"] {
-    @include mixins.flex($gap: 16px);
-
-    [class~="set"] {
-      flex: 1;
-
-      [class~="label"] {
-        @include mixins.flex($gap: 16px, $align: center);
-        height: 28px;
-        & > div {
-          width: 19px;
-          height: 19px;
-          background-color: var(--label-color);
-          border-radius: 50%;
-          flex-shrink: 0;
-        }
-
-        p {
-          @include mixins.font(400, 16px, 28px);
-          @include mixins.font-clamp(1);
-        }
-      }
-    }
-  }
-}

package/src/data/Bar/Bar.tsx

@@ -1,161 +0,0 @@
-import React from "react";
-import styles from "./Bar.module.scss";
-import { COLOR_ORDER } from "@soul-refiner/utils/src";
-import { IconHeader, IconHeaderProps } from "../../iconography";
-
-type Data = {
-  name: string;
-  count: number;
-};
-
-type DataSet = {
-  groupName?: string;
-  data: Required<Data>[];
-};
-
-export interface BarProps {
-  dataSets: DataSet[];
-  iconHeader?: IconHeaderProps;
-  /**
-   * Height of the bar graph in pixels, not the height of the overall container
-   * @note Only supports px or %
-   */
-  height?: string;
-  /**
-   * Width of the bar graph, not the width of the overall container
-   * @note Only supports px or %
-   */
-  width?: string;
-}
-
-export const Bar = ({
-  dataSets,
-  iconHeader,
-  height = "200px",
-  width = "686px",
-}: BarProps) => {
-  const [min, max] = dataSets.reduce(
-    (prev, curr) => {
-      const [currMin, currMax] = curr.data.reduce(
-        (currPrev, currCurr) => {
-          if (currCurr.count < currPrev[0]) {
-            currPrev[0] = currCurr.count;
-          }
-          if (currCurr.count > currPrev[1]) {
-            currPrev[1] = currCurr.count;
-          }
-          return currPrev;
-        },
-        [Infinity, -Infinity]
-      );
-      if (currMin < prev[0]) {
-        prev[0] = currMin;
-      }
-      if (currMax > prev[1]) {
-        prev[1] = currMax;
-      }
-      return prev;
-    },
-    [Infinity, -Infinity]
-  );
-  /**
-   * TODO: min could be the start of the graph when the information
-   * starts at a higher number but increments slowly
-   * e.g. 1001, 1007, 1015, 1035
-   * This would set yMin at a larger number
-   */
-  const yMin = 0;
-  let yCap = 10 ** Math.floor(Math.log10(max));
-  if (max > yCap) {
-    yCap = Math.ceil(max / yCap / 0.5) * 0.5 * yCap;
-  }
-  let step = 10 ** Math.floor(Math.log10(max));
-  if (Math.floor(step / yCap) <= 1) {
-    step = Math.ceil(step / 2 / 0.5) * 0.5;
-  }
-  while (yCap / step > 5) {
-    step = step * 2;
-  }
-
-  const findColor = (color: string, index: number) => {
-    return color.slice(0, color.length - 2) + (4 + index * 2) + ")";
-  };
-
-  return (
-    <section className={`${styles.bar}`}>
-      {iconHeader && <IconHeader {...iconHeader} />}
-      <div
-        className="graph"
-        style={
-          {
-            "--graph-height": height,
-            "--graph-width": width,
-          } as React.CSSProperties
-        }
-      >
-        <div className="grid">
-          {Array.from(
-            { length: yCap / step },
-            (_, index) => (yCap / step - index) * step
-          ).map((element) => (
-            <div key={element.toString(36)}>
-              <p>{element}</p>
-              <div />
-            </div>
-          ))}
-        </div>
-        <div className="info">
-          {dataSets.map((set, setIndex) => (
-            <div className="set" key={"set-" + setIndex.toString(36)}>
-              {set.data.map((bar, barIndex) => (
-                <div
-                  className="bar"
-                  key={"bar-" + barIndex.toString(36)}
-                  style={
-                    {
-                      "--bar-height": height.endsWith("px")
-                        ? Math.round(
-                            (bar.count * parseInt(height.replace("px", ""))) /
-                              yCap
-                          ) + "px"
-                        : Math.round(
-                            (bar.count * parseInt(height.replace("%", ""))) /
-                              yCap
-                          ) + "%",
-                      "--bar-color": findColor(COLOR_ORDER[setIndex], barIndex),
-                    } as React.CSSProperties
-                  }
-                  title={`${bar.name}: ${bar.count}`}
-                />
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-      <div className="keys">
-        {dataSets.map((set, setIndex) => (
-          <div className="set" key={"key-set-" + setIndex.toString(36)}>
-            {set.data.map((label, labelIndex) => (
-              <div
-                className="label"
-                key={"key-item-" + labelIndex.toString(36)}
-              >
-                <div
-                  style={
-                    {
-                      "--label-color": findColor(
-                        COLOR_ORDER[setIndex],
-                        labelIndex
-                      ),
-                    } as React.CSSProperties
-                  }
-                />
-                <p>{label.name}</p>
-              </div>
-            ))}
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-};

package/src/data/Bar/index.ts

@@ -1 +0,0 @@
-export { Bar, type BarProps } from "./Bar";

package/src/data/Line/Line.module.scss

@@ -1,102 +0,0 @@
-@use "@soul-refiner/styles/mixins";
-
-.line {
-  @include mixins.flex($dir: column, $gap: 64px);
-  padding: 32px;
-  border-radius: 25px;
-  background-color: #ffffff;
-  position: relative;
-  z-index: 1;
-
-  [class~="graph"] {
-    position: relative;
-    height: var(--graph-height);
-    width: var(--graph-width);
-    margin-bottom: 32px;
-
-    [class~="grid"] {
-      @include mixins.grid();
-      grid-auto-rows: 1fr;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: 100%;
-      width: 100%;
-      z-index: -1;
-
-      div {
-        @include mixins.flex($align: flex-start);
-
-        p {
-          @include mixins.font(600, 16px, 24px);
-          position: relative;
-          width: 72px;
-          top: -12px;
-        }
-
-        & > div {
-          border-top: 1px solid var(--color-grey-9);
-          height: 100%;
-          width: 100%;
-        }
-
-        &:last-child {
-          & > div {
-            border-bottom: 1px solid var(--color-grey-9);
-            position: relative;
-
-            &::before {
-              @include mixins.font(600, 16px, 24px);
-              content: "0";
-              position: absolute;
-              left: -64px;
-              bottom: -12px;
-            }
-          }
-        }
-      }
-    }
-
-    [class~="info"] {
-      @include mixins.flex($align: flex-end, $justify: space-around);
-      padding-left: 64px;
-      height: 100%;
-      width: 100%;
-      z-index: 2;
-
-      [class~="set"] {
-        @include mixins.flex($align: flex-end, $gap: 8px);
-        width: 100%;
-        [class~="line"] {
-          height: var(--bar-height);
-          width: 100%;
-          background-color: var(--bar-color);
-          border-radius: 4px 4px 0px 0px;
-          position: relative;
-          [class~="point"] {
-            position: absolute;
-            width: 18px;
-            height: 18px;
-            box-sizing: border-box;
-            top: -9px;
-            z-index: 5;
-            position: relative;
-            border: 3px solid #ea7e00;
-            border-radius: 50%;
-            background-color: #ffffff;
-          }
-          [class~="segment"] {
-            position: absolute;
-            width: var(--line-length);
-            height: 5px;
-            top: var(--from-top);
-            background-color: #ea7e00;
-            transform: rotate(var(--rotation));
-          }
-        }
-      }
-    }
-  }
-}