@soul-refiner/design-system 0.0.13 → 0.0.15

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

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

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

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

package/src/cards/index.ts

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

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

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

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

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

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