@orangesk/orange-design-system 2.0.0-beta.8 → 2.0.0

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

@@ -1,5 +1,4 @@
 @use "../../../styles/tokens/space";
-@use "../../../styles/tokens/color";
 @use "../../../styles/tools/convert";
 @use "sass:map";
 
@@ -13,21 +12,24 @@ $tag: (
 $sizes: (
   default: (
     padding: convert.to-rem(7px) convert.to-rem(12px),
-    font-size: convert.to-rem(14px),
-    line-height: 1rem,
+    font-size: convert.to-rem(14px) "!important",
+    line-height: 1rem "!important",
     font-weight: 700,
+    border-width: 1px,
   ),
   small: (
     padding: convert.to-rem(2px) convert.to-rem(8px),
-    font-size: convert.to-rem(12px),
-    line-height: convert.to-rem(14px),
+    font-size: convert.to-rem(12px) "!important",
+    line-height: convert.to-rem(14px) "!important",
     font-weight: 400,
+    border-width: 2px,
   ),
   large: (
-    padding: convert.to-rem(12.5px) convert.to-rem(15px),
-    font-size: convert.to-rem(16px),
-    line-height: convert.to-rem(18px),
+    padding: convert.to-rem(11px) convert.to-rem(15px),
+    font-size: convert.to-rem(16px) "!important",
+    line-height: convert.to-rem(18px) "!important",
     font-weight: 700,
+    border-width: 2px,
   ),
 );
 
@@ -36,7 +38,7 @@ $icon-sizes: (
     padding: convert.to-rem(7px),
   ),
   large: (
-    padding: convert.to-rem(9.5px),
+    padding: convert.to-rem(8px),
   ),
 );
 
@@ -46,48 +48,46 @@ $colors: (
     color: var(--color-text-default),
   ),
   "orange": (
-    background-color: map.get(color.$colors-light, icon-accent),
-    color: color.$black,
+    background-color: var(--tag-orange),
+    color: var(--tag-text-dark),
   ),
   "black": (
-    background-color: map.get(color.$colors-dark, border-subtle),
-    color: color.$white,
+    background-color: var(--tag-black),
+    color: var(--tag-text-light),
   ),
   "yellow": (
-    // TODO add to config
-    background-color: #fff6b6,
-    color: color.$black,
+    background-color: var(--tag-yellow),
+    color: var(--tag-text-dark),
   ),
   "green": (
-    // TODO add to config
-    background-color: #b8ebd6,
-    color: color.$black,
+    background-color: var(--tag-green),
+    color: var(--tag-text-dark),
   ),
   "blue": (
-    // TODO add to config
-    background-color: #b5e8f7,
-    color: color.$black,
+    background-color: var(--tag-blue),
+    color: var(--tag-text-dark),
   ),
   "success": (
-    background-color: map.get(color.$colors-light, icon-positive),
-    color: color.$white,
+    background-color: var(--tag-success),
+    color: var(--tag-text-light),
   ),
   "danger": (
-    background-color: map.get(color.$colors-light, icon-negative),
-    color: color.$white,
+    background-color: var(--tag-danger),
+    color: var(--tag-text-light),
   ),
   "info": (
-    background-color: map.get(color.$colors-light, icon-information),
-    color: color.$white,
+    background-color: var(--tag-info),
+    color: var(--tag-text-light),
   ),
   "warning": (
-    background-color: map.get(color.$colors-light, icon-warning),
-    color: color.$black,
+    background-color: var(--tag-warning),
+    color: var(--tag-text-dark),
   ),
   "transparent": (
     background-color: transparent,
     color: var(--color-text-default),
-    border: 1px solid var(--color-border-strong),
+    border-color: var(--color-border-strong),
+    border-style: solid,
   ),
 );
 

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

@@ -19,7 +19,8 @@
 }
 
 @mixin color-transparent() {
-  border: 1px solid var(--color-border-strong);
+  border-color: var(--color-border-strong);
+  border-style: solid;
 }
 
 @mixin buttton-disabled($is-icon: false) {
@@ -87,4 +88,4 @@
     @include generate.css-map(config.$states-transparent-color, "disabled");
     cursor: not-allowed;
   }
-}
+}

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

@@ -20,6 +20,39 @@
       }
     }
 
+    // Special styling for default tags inside .background-secondary parent
+    .background-secondary & {
+      // Target tags that don't have any color variant class
+      // Use negative lookahead-like approach: exclude if class contains any color variant
+      &:not([class*="--orange"]):not([class*="--black"]):not(
+          [class*="--yellow"]
+        ):not([class*="--green"]):not([class*="--blue"]):not(
+          [class*="--success"]
+        ):not([class*="--danger"]):not([class*="--info"]):not(
+          [class*="--warning"]
+        ):not([class*="--transparent"]) {
+        background-color: var(--color-surface-moderate);
+
+        &:where(button),
+        &:where(a) {
+          background-color: var(--color-surface-moderate);
+
+          &:not([disabled]):not([aria-disabled="true"]) {
+            &:focus-visible,
+            &:hover {
+              background-color: color.$gray-600;
+            }
+
+            &:active,
+            &.is-active {
+              color: var(--color-text-inverse);
+              background-color: var(--color-background-contrast);
+            }
+          }
+        }
+      }
+    }
+
     // Transparent class is a special variant of color, it's not possible to make transparent variant for each color at the moment.
     &--transparent {
       @include mixins.color-transparent();
@@ -83,6 +116,28 @@
       border-radius: 9999px;
       z-index: 2;
 
+      .background-secondary & {
+        background-color: var(--color-border-strong);
+
+        &:not([disabled]):not([aria-disabled="true"]) {
+          &:focus-visible,
+          &:hover {
+            background-color: color.$gray-600;
+          }
+
+          &:active,
+          &.is-active {
+            color: var(--color-text-inverse);
+            background-color: var(--color-background-contrast);
+          }
+        }
+
+        &[aria-disabled="true"],
+        &[disabled] {
+          background-color: var(--color-border-strong);
+        }
+      }
+
       @each $name, $props in config.$icon-sizes {
         &#{generate.variant-name($name)} {
           $padding: sass-map.get($props, padding);

package/src/components/Tag/tests/{Tag.conformance.test.js → Tag.conformance.test.jsx}

@@ -1,8 +1,7 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
-
-import { colors } from "../Tag";
+import { axe } from "vitest-axe";
 import { Tag, TagButton } from "..";
+import { colors } from "../Tag";
 
 const sizes = ["small", "large"];
 

package/src/components/Tag/tests/{Tag.unit.test.js → Tag.unit.test.jsx}

@@ -1,8 +1,6 @@
 import { render } from "@testing-library/react";
-
-import { Tag } from "../Tag";
+import { colors, Tag } from "../Tag";
 import { TagButton } from "../TagButton";
-import { colors } from "../Tag";
 
 describe("rendering", () => {
   describe("initial state", () => {
@@ -58,7 +56,7 @@ describe("rendering", () => {
     describe("interactive functionality", () => {
       describe("onClick prop", () => {
         it("renders as button when onClick is provided", () => {
-          const handleClick = jest.fn();
+          const handleClick = vi.fn();
           const { getByRole } = render(
             <Tag onClick={handleClick}>Clickable Tag</Tag>,
           );
@@ -67,7 +65,7 @@ describe("rendering", () => {
         });
 
         it("calls onClick when clicked", () => {
-          const handleClick = jest.fn();
+          const handleClick = vi.fn();
           const { getByRole } = render(
             <Tag onClick={handleClick}>Clickable Tag</Tag>,
           );
@@ -76,7 +74,7 @@ describe("rendering", () => {
         });
 
         it("does not call onClick when disabled", () => {
-          const handleClick = jest.fn();
+          const handleClick = vi.fn();
           const { getByRole } = render(
             <Tag onClick={handleClick} isDisabled>
               Disabled Clickable Tag
@@ -87,7 +85,7 @@ describe("rendering", () => {
         });
 
         it("has button type set to 'button'", () => {
-          const handleClick = jest.fn();
+          const handleClick = vi.fn();
           const { getByRole } = render(
             <Tag onClick={handleClick}>Clickable Tag</Tag>,
           );

package/src/components/Tag/tests/{TagButton.conformance.test.js → TagButton.conformance.test.jsx}

@@ -1,5 +1,5 @@
 import { render } from "@testing-library/react";
-import { axe } from "jest-axe";
+import { axe } from "vitest-axe";
 
 import { TagButton } from "../TagButton";
 

package/src/components/Tag/tests/{TagButton.unit.test.js → TagButton.unit.test.jsx}

@@ -1,4 +1,5 @@
-import { render, fireEvent } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
+import React from "react";
 
 import { TagButton } from "../TagButton";
 
@@ -61,7 +62,7 @@ describe("TagButton", () => {
 
   describe("interaction", () => {
     it("calls onClick when clicked", () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       const { getByRole } = render(
         <TagButton iconName="close" ariaLabel="Close" onClick={handleClick} />,
       );
@@ -71,7 +72,7 @@ describe("TagButton", () => {
     });
 
     it("does not call onClick when disabled", () => {
-      const handleClick = jest.fn();
+      const handleClick = vi.fn();
       const { getByRole } = render(
         <TagButton
           iconName="close"

package/src/components/Testimonial/Testimonial.tsx

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

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

@@ -6,34 +6,37 @@ $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>')
+  -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>')
+  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,
-    )
+  default: (
+    top: 0,
+    right: 0,
+  ),
+  oneline: (
+    top: 0,
+    right: 0,
+  ),
 );
 
 $quotation-mark-bottom-position: (
-    default: (
-        left: 0,
-        bottom: 0,
-    ),
-    oneline: (
-        left: 0,
-        bottom: 0,
-    )
-)
-
+  default: (
+    left: 0,
+    bottom: 0,
+  ),
+  oneline: (
+    left: 0,
+    bottom: 0,
+  ),
+);

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

@@ -1,40 +1,44 @@
-@use './config';
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tools/convert';
+@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;
+  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');
-    }
+  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;
-    }
-}
+  &::before,
+  &::after {
+    background-color: config.$orange;
+  }
+}

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

@@ -0,0 +1,16 @@
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+
+import { Testimonial } from "../";
+
+const example = <Testimonial />;
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

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

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

package/src/components/Tile/Tile.tsx

@@ -1,27 +1,19 @@
-import React, { ReactNode } from "react";
 import cx from "classnames";
-
-import { Image } from "../Image";
+import React, { ReactNode } from "react";
 import { Icon } from "../Icon";
 import { IconProps } from "../Icon/Icon";
 
-export type TileColor = "default" | "white";
 export type TileHAlign = "center";
 export type TileVAlign = "center" | "end" | "space-between";
+export type TileVariant = "compact" | "action";
 
 export interface TileProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Tile color. */
-  color?: TileColor;
   /** Horizontal alignment of the tile content. */
   hAlign?: TileHAlign;
   /** Vertical alignment of the tile content. */
   vAlign?: TileVAlign;
-  /** variant can be "image" or "action" */
-  variant?: "image" | "action";
-  /** Alt and src attributes are required */
-  backgroundImage?: React.ComponentProps<typeof Image>;
-  /** Use small spacing */
-  space?: "small";
+  /** Tile variant. */
+  variant?: TileVariant;
   children?: ReactNode;
   className?: string;
 }
@@ -32,51 +24,42 @@ const Tile: React.FC<TileProps> = ({
   className,
   children,
   variant,
-  backgroundImage,
   vAlign,
   hAlign,
-  color = "default",
-  space,
   ...other
 }) => {
+  const isCompact = variant === "compact";
+  const isAction = variant === "action";
+
   const classesWrapper = cx(
     CLASS_ROOT,
     {
-      [`${CLASS_ROOT}--${variant}`]: variant,
-      [`tile--${color}`]: color !== "default",
+      [`${CLASS_ROOT}--compact`]: isCompact,
+      [`${CLASS_ROOT}--action`]: isAction,
     },
     className,
   );
 
   const classesBody = cx(
     `${CLASS_ROOT}__body`,
-    vAlign && `justify-content-${vAlign}`,
-    hAlign && `align-items-${hAlign}`,
-    space && `${CLASS_ROOT}__body--space-${space}`,
+    !isAction && vAlign && `justify-content-${vAlign}`,
+    !isAction && hAlign && `align-items-${hAlign}`,
   );
 
-  const iconProps =
-    variant === "action"
-      ? ({
-          name: "chevron-right",
-          size: "medium",
-          color: "orange",
-        } as IconProps)
-      : null;
+  const iconProps = isAction
+    ? ({
+        name: "chevron-right",
+        size: "medium",
+        color: "orange",
+      } as IconProps)
+    : null;
 
   return (
     <div className={classesWrapper} {...other}>
       <div className={classesBody}>
-        {iconProps && <Icon {...iconProps} />}
         {children}
+        {iconProps && <Icon {...iconProps} />}
       </div>
-      {backgroundImage && (
-        // eslint-disable-next-line jsx-a11y/alt-text
-        <Image
-          {...backgroundImage}
-          className={cx(`${CLASS_ROOT}__bg`, backgroundImage.className)}
-        />
-      )}
     </div>
   );
 };