@orangesk/orange-design-system 3.2.0 → 3.3.1

package/src/components/Testimonial/Testimonial.tsx

@@ -1,38 +0,0 @@
-import cx from "classnames";
-import React from "react";
-
-interface TestimonialProps {
-  className?: string;
-  children?: React.ReactNode;
-  color?: "default" | "orange";
-  isDiv?: boolean;
-  [key: string]: any;
-}
-
-const CLASS_ROOT = "testimonial";
-
-export const Testimonial: React.FC<TestimonialProps> = ({
-  className,
-  children,
-  color = "default",
-  isDiv = false,
-  ...other
-}) => {
-  const Tag = isDiv ? "div" : "p";
-
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`testimonial--${color}`]: color === "orange",
-    },
-    className,
-  );
-
-  return (
-    <Tag className={classes} {...other}>
-      {children}
-    </Tag>
-  );
-};
-
-Testimonial.displayName = "Testimonial";

package/src/components/Testimonial/index.ts

@@ -1 +0,0 @@
-export { Testimonial } from "./Testimonial";

package/src/components/Testimonial/styles/config.scss

@@ -1,42 +0,0 @@
-@use "../../../styles/tokens/color";
-@use "../../../styles/tokens/space";
-@use "../../../styles/tools/convert";
-
-$black: var(--color-background-contrast);
-$orange: var(--color-surface-secondary);
-
-$quotation-mark-bottom: (
-  -webkit-mask-image:
-    url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H7.55102V7.55102C7.55102 8.91157 7.39229 10.2041 7.07483 11.4286C6.80272 12.6077 6.34921 13.6508 5.71429 14.5578C5.12472 15.4649 4.35374 16.1905 3.40136 16.7347C2.49433 17.2789 1.38322 17.551 0.0680272 17.551V14.1497C0.839002 14.1497 1.47392 13.9683 1.97279 13.6054C2.47166 13.1973 2.87982 12.6757 3.19728 12.0408C3.51474 11.4059 3.71882 10.703 3.80952 9.93198C3.94558 9.11565 4.01361 8.322 4.01361 7.55102H0V0ZM12.449 0H20V7.55102C20 8.91157 19.8413 10.2041 19.5238 11.4286C19.2517 12.6077 18.7982 13.6508 18.1633 14.5578C17.5737 15.4649 16.8027 16.1905 15.8503 16.7347C14.9433 17.2789 13.8322 17.551 12.517 17.551V14.1497C13.288 14.1497 13.9229 13.9683 14.4218 13.6054C14.9206 13.1973 15.3288 12.6757 15.6463 12.0408C15.9637 11.4059 16.1678 10.703 16.2585 9.93198C16.3946 9.11565 16.4626 8.322 16.4626 7.55102H12.449V0Z" /></svg>'),
-  mask-image:
-    url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H7.55102V7.55102C7.55102 8.91157 7.39229 10.2041 7.07483 11.4286C6.80272 12.6077 6.34921 13.6508 5.71429 14.5578C5.12472 15.4649 4.35374 16.1905 3.40136 16.7347C2.49433 17.2789 1.38322 17.551 0.0680272 17.551V14.1497C0.839002 14.1497 1.47392 13.9683 1.97279 13.6054C2.47166 13.1973 2.87982 12.6757 3.19728 12.0408C3.51474 11.4059 3.71882 10.703 3.80952 9.93198C3.94558 9.11565 4.01361 8.322 4.01361 7.55102H0V0ZM12.449 0H20V7.55102C20 8.91157 19.8413 10.2041 19.5238 11.4286C19.2517 12.6077 18.7982 13.6508 18.1633 14.5578C17.5737 15.4649 16.8027 16.1905 15.8503 16.7347C14.9433 17.2789 13.8322 17.551 12.517 17.551V14.1497C13.288 14.1497 13.9229 13.9683 14.4218 13.6054C14.9206 13.1973 15.3288 12.6757 15.6463 12.0408C15.9637 11.4059 16.1678 10.703 16.2585 9.93198C16.3946 9.11565 16.4626 8.322 16.4626 7.55102H12.449V0Z" /></svg>')
-);
-
-$quotation-mark-top: (
-  mask-image:
-    url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M7.55102 17.551H0V10C0 8.63946 0.136054 7.36962 0.408163 6.19048C0.725624 4.96599 1.17914 3.90023 1.76871 2.9932C2.40363 2.08617 3.19728 1.36055 4.14966 0.81633C5.10204 0.272111 6.21315 0 7.48299 0V3.40136C6.71202 3.40136 6.0771 3.60544 5.57823 4.01361C5.07937 4.37642 4.6712 4.87528 4.35374 5.5102C4.03628 6.14513 3.80952 6.87075 3.67347 7.68708C3.58277 8.45805 3.53742 9.22902 3.53742 10H7.55102V17.551ZM20 17.551H12.449V10C12.449 8.63946 12.585 7.36962 12.8571 6.19048C13.1746 4.96599 13.6281 3.90023 14.2177 2.9932C14.8526 2.08617 15.6463 1.36055 16.5986 0.81633C17.551 0.272111 18.6621 0 19.932 0V3.40136C19.161 3.40136 18.5261 3.60544 18.0272 4.01361C17.5283 4.37642 17.1202 4.87528 16.8027 5.5102C16.4853 6.14513 16.2585 6.87075 16.1224 7.68708C16.0317 8.45805 15.9864 9.22902 15.9864 10H20V17.551Z" /></svg>'),
-  -webkit-mask-image:
-    url('data:image/svg+xml,<svg width="20" height="18" viewBox="0 0 20 18" xmlns="http://www.w3.org/2000/svg"><path  fill-rule="evenodd" clip-rule="evenodd" d="M7.55102 17.551H0V10C0 8.63946 0.136054 7.36962 0.408163 6.19048C0.725624 4.96599 1.17914 3.90023 1.76871 2.9932C2.40363 2.08617 3.19728 1.36055 4.14966 0.81633C5.10204 0.272111 6.21315 0 7.48299 0V3.40136C6.71202 3.40136 6.0771 3.60544 5.57823 4.01361C5.07937 4.37642 4.6712 4.87528 4.35374 5.5102C4.03628 6.14513 3.80952 6.87075 3.67347 7.68708C3.58277 8.45805 3.53742 9.22902 3.53742 10H7.55102V17.551ZM20 17.551H12.449V10C12.449 8.63946 12.585 7.36962 12.8571 6.19048C13.1746 4.96599 13.6281 3.90023 14.2177 2.9932C14.8526 2.08617 15.6463 1.36055 16.5986 0.81633C17.551 0.272111 18.6621 0 19.932 0V3.40136C19.161 3.40136 18.5261 3.60544 18.0272 4.01361C17.5283 4.37642 17.1202 4.87528 16.8027 5.5102C16.4853 6.14513 16.2585 6.87075 16.1224 7.68708C16.0317 8.45805 15.9864 9.22902 15.9864 10H20V17.551Z" /></svg>'),
-);
-
-$quotation-mark-top-position: (
-  default: (
-    top: 0,
-    right: 0,
-  ),
-  oneline: (
-    top: 0,
-    right: 0,
-  ),
-);
-
-$quotation-mark-bottom-position: (
-  default: (
-    left: 0,
-    bottom: 0,
-  ),
-  oneline: (
-    left: 0,
-    bottom: 0,
-  ),
-);

package/src/components/Testimonial/styles/mixins.scss

@@ -1,44 +0,0 @@
-@use "./config";
-@use "../../../styles/tokens/base";
-@use "../../../styles/tokens/space";
-@use "../../../styles/tools/generate";
-@use "../../../styles/tools/convert";
-
-@mixin base {
-  padding: space.get("small") space.get("large") space.get("small")
-    convert.to-rem(40px);
-  width: fit-content;
-}
-
-@mixin quotation-mark {
-  font-size: convert.to-rem(14px);
-  position: relative;
-  &::before,
-  &::after {
-    content: "";
-    display: block;
-    position: absolute;
-    height: convert.to-rem(18px);
-    width: convert.to-rem(20px);
-    background-repeat: no-repeat;
-    background-color: config.$black;
-  }
-  &::before {
-    @include generate.css-map(config.$quotation-mark-bottom);
-    @include generate.css-map(
-      config.$quotation-mark-bottom-position,
-      "default"
-    );
-  }
-  &::after {
-    @include generate.css-map(config.$quotation-mark-top);
-    @include generate.css-map(config.$quotation-mark-top-position, "default");
-  }
-}
-
-@mixin orange {
-  &::before,
-  &::after {
-    background-color: config.$orange;
-  }
-}

package/src/components/Testimonial/styles/style.scss

@@ -1,16 +0,0 @@
-@use "./config";
-@use "./mixins";
-@use "../../../styles/tokens/color";
-@use "../../../styles/tools/generate";
-@use "../../../styles/tokens/breakpoint";
-
-@layer components {
-  .testimonial {
-    @include mixins.base;
-    @include mixins.quotation-mark;
-  }
-
-  .testimonial--orange {
-    @include mixins.orange;
-  }
-}

package/src/components/Testimonial/tests/Testimonial.unit.test.jsx

@@ -1,43 +0,0 @@
-import { render } from "@testing-library/react";
-
-import { Testimonial } from "../";
-
-describe("rendering Testimonial", () => {
-  describe("initial state", () => {
-    it("has default class testimonial", () => {
-      const { getByTestId } = render(<Testimonial data-testid="test-id" />);
-      expect(getByTestId("test-id")).toHaveClass("testimonial");
-    });
-    it("its rendered as paragraph", () => {
-      const { getByTestId } = render(<Testimonial data-testid="test-id" />);
-      expect(getByTestId("test-id").tagName).toBe("P");
-    });
-  });
-
-  describe("passed props", () => {
-    it("renders children", () => {
-      const { getByText } = render(<Testimonial>test</Testimonial>);
-      expect(getByText("test")).toBeInTheDocument();
-    });
-    it("has additional class when className is set", () => {
-      const { getByTestId } = render(
-        <Testimonial className="test" data-testid="test-id" />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("testimonial");
-      expect(getByTestId("test-id")).toHaveClass("test");
-    });
-    it("has additional className testimonial--orange prop color with value orange is passed", () => {
-      const { getByTestId } = render(
-        <Testimonial className="test" data-testid="test-id" color="orange" />,
-      );
-      expect(getByTestId("test-id")).toHaveClass("testimonial");
-      expect(getByTestId("test-id")).toHaveClass("testimonial--orange");
-    });
-    it("its rendered as div when isDiv prop is passed", () => {
-      const { getByTestId } = render(
-        <Testimonial data-testid="test-id" isDiv />,
-      );
-      expect(getByTestId("test-id").tagName).toBe("DIV");
-    });
-  });
-});