@orangesk/orange-design-system 3.1.0 → 3.3.0

package/src/components/StarRating/StarRating.tsx

@@ -0,0 +1,52 @@
+import cx from "classnames";
+import React from "react";
+
+import { Icon } from "../Icon";
+
+export interface StarRatingProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+  /** Extra class name for root element. */
+  className?: string;
+  /** Rating value. Rounded to nearest whole star. */
+  rating: number;
+}
+
+const CLASS_ROOT = "star-rating";
+const STAR_COUNT = 5;
+const FILLED_ICON_NAME = "star-favourite";
+const EMPTY_ICON_NAME = "star-empty-thin";
+
+const clampRating = (rating: number) =>
+  Math.max(0, Math.min(Math.round(rating), STAR_COUNT));
+
+const StarRating: React.FC<StarRatingProps> = ({
+  className,
+  rating,
+  ...other
+}) => {
+  const filledStars = clampRating(rating);
+
+  return (
+    <span className={cx(CLASS_ROOT, className)} {...other}>
+      {Array.from({ length: STAR_COUNT }, (_, index) => {
+        const isFilled = index < filledStars;
+
+        return (
+          <Icon
+            key={`${isFilled ? FILLED_ICON_NAME : EMPTY_ICON_NAME}-${index}`}
+            className={cx(`${CLASS_ROOT}__icon`, {
+              [`${CLASS_ROOT}__icon--filled`]: isFilled,
+              [`${CLASS_ROOT}__icon--empty`]: !isFilled,
+            })}
+            name={isFilled ? FILLED_ICON_NAME : EMPTY_ICON_NAME}
+            size="large"
+          />
+        );
+      })}
+    </span>
+  );
+};
+
+StarRating.displayName = "StarRating";
+
+export { StarRating };

package/src/components/StarRating/index.ts

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

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

@@ -0,0 +1,28 @@
+@use "../../../styles/tools/convert";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/breakpoint";
+
+@layer components {
+  .star-rating {
+    display: flex;
+    margin-bottom: space.get("large");
+    width: fit-content;
+    gap: convert.to-rem(5px);
+
+    &__icon--filled {
+      color: var(--color-icon-brand);
+    }
+
+    &__icon--empty {
+      color: var(--color-icon-disabled);
+    }
+
+    &__icon {
+      --icon-size: #{convert.to-rem(24px)};
+
+      @include breakpoint.get(md) {
+        --icon-size: #{convert.to-rem(32px)};
+      }
+    }
+  }
+}

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

@@ -0,0 +1,62 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { render } from "@testing-library/react";
+
+import { StarRating } from "../StarRating";
+
+describe("rendering StarRating", () => {
+  it("has default class star-rating", () => {
+    const { getByTestId } = render(
+      <StarRating rating={4} data-testid="test-id" />,
+    );
+
+    expect(getByTestId("test-id")).toHaveClass("star-rating");
+  });
+
+  it("renders five icons by default", () => {
+    const { container } = render(<StarRating rating={4} />);
+
+    expect(container.querySelectorAll("svg.icon")).toHaveLength(5);
+    expect(container.querySelector("svg")).toHaveClass("icon--large");
+  });
+
+  it("renders filled and empty stars from rating", () => {
+    const { container } = render(<StarRating rating={3} />);
+    const uses = container.querySelectorAll("use");
+
+    expect(uses[0].getAttribute("xlink:href")).toBe(
+      "/sprite.svg#star-favourite",
+    );
+    expect(uses[1].getAttribute("xlink:href")).toBe(
+      "/sprite.svg#star-favourite",
+    );
+    expect(uses[2].getAttribute("xlink:href")).toBe(
+      "/sprite.svg#star-favourite",
+    );
+    expect(uses[3].getAttribute("xlink:href")).toBe(
+      "/sprite.svg#star-empty-thin",
+    );
+    expect(uses[4].getAttribute("xlink:href")).toBe(
+      "/sprite.svg#star-empty-thin",
+    );
+  });
+
+  it("rounds and clamps rating", () => {
+    const { container } = render(<StarRating rating={5.7} />);
+    const uses = container.querySelectorAll("use");
+
+    uses.forEach((use) => {
+      expect(use.getAttribute("xlink:href")).toBe("/sprite.svg#star-favourite");
+    });
+  });
+
+  it("passes aria-label through", () => {
+    const { getByTestId } = render(
+      <StarRating rating={2} aria-label="2 out of 5" data-testid="test-id" />,
+    );
+
+    expect(getByTestId("test-id")).toHaveAttribute("aria-label", "2 out of 5");
+  });
+});

package/src/components/index.ts

@@ -1,6 +1,7 @@
 import { Accordion, AccordionItem } from "./Accordion";
 import { Alert } from "./Alert";
 import { AnchorNavigation } from "./AnchorNavigation";
+import { Avatar } from "./Avatar";
 import { Bar, BarBreak, BarItem } from "./Bar";
 import {
   BlockAction,
@@ -19,12 +20,13 @@ import {
 } from "./Button";
 import { Buttons } from "./Buttons";
 import { Card, CardProductHeader, CardSection } from "./Card";
-import { Carousel } from "./Carousel";
+import { Carousel, CarouselItem } from "./Carousel";
 import { CarouselHero, CarouselHeroItem } from "./CarouselHero";
 import { CarouselPromotions } from "./CarouselPromotions";
 import { CartTable } from "./CartTable";
 import { Container } from "./Container";
 import { Controls } from "./Controls";
+import { Countdown, CountdownTag } from "./Countdown";
 import { Cover } from "./Cover";
 import { Divider } from "./Divider";
 import {
@@ -85,12 +87,12 @@ import { Section } from "./Section";
 import { Skeleton } from "./Skeleton";
 import { SkipLink } from "./SkipLink";
 import { SocialButton } from "./SocialButton";
+import { StarRating } from "./StarRating";
 import { Stepbar } from "./Stepbar";
 import { Sticker } from "./Sticker";
 import { Table } from "./Table";
 import { Tab, TabPanel, Tabs } from "./Tabs";
 import { Tag, TagButton } from "./Tag";
-import { Testimonial } from "./Testimonial";
 import { Tile } from "./Tile";
 import { Timeline } from "./Timeline";
 import { InfoTooltip, Tooltip } from "./Tooltip";
@@ -101,6 +103,7 @@ export {
   Alert,
   AnchorNavigation,
   Autocomplete,
+  Avatar,
   Bar,
   BarBreak,
   BarItem,
@@ -121,11 +124,14 @@ export {
   Carousel,
   CarouselHero,
   CarouselHeroItem,
+  CarouselItem,
   CarouselPromotions,
   CartTable,
   Checkbox,
   Container,
   Controls,
+  Countdown,
+  CountdownTag,
   Cover,
   Divider,
   Dropdown,
@@ -185,6 +191,7 @@ export {
   SocialButton,
   SpritePathContext,
   SpritePathProvider,
+  StarRating,
   Stepbar,
   Sticker,
   Tab,
@@ -193,7 +200,6 @@ export {
   Tabs,
   Tag,
   TagButton,
-  Testimonial,
   TextArea,
   TextInput,
   Tile,

package/src/styles/export/color.js

@@ -27,6 +27,7 @@ export const exports = {
   "light-fill-accent3": "#ffb4e6",
   "light-fill-accent4": "#a885d8",
   "light-fill-accent5": "#ffd200",
+  "light-fill-accent6": "#ffc48f",
   "light-fill-information": "rgba(65, 112, 216, 0.0784313725)",
   "light-fill-positive": "rgba(34, 135, 34, 0.0784313725)",
   "light-fill-warning": "rgba(255, 204, 0, 0.0784313725)",
@@ -78,6 +79,7 @@ export const exports = {
   "dark-fill-accent3": "#ffb4e6",
   "dark-fill-accent4": "#a885d8",
   "dark-fill-accent5": "#ffd200",
+  "dark-icon-accent6": "#ffc48f",
   "dark-fill-information": "rgba(65, 112, 216, 0.2)",
   "dark-fill-positive": "rgba(34, 135, 34, 0.2)",
   "dark-fill-warning": "rgba(255, 204, 0, 0.2)",

package/src/styles/tokens/color.scss

@@ -26,6 +26,7 @@ $colors-light: (
   fill-accent3: #ffb4e6,
   fill-accent4: #a885d8,
   fill-accent5: #ffd200,
+  fill-accent6: #ffc48f,
   fill-information: #4170d814,
   fill-positive: #22872214,
   fill-warning: #ffcc0014,
@@ -80,6 +81,7 @@ $colors-dark: (
   fill-accent3: #ffb4e6,
   fill-accent4: #a885d8,
   fill-accent5: #ffd200,
+  icon-accent6: #ffc48f,
   fill-information: #4170d833,
   fill-positive: #22872233,
   fill-warning: #ffcc0033,

package/src/styles/typography/mixins.scss

@@ -19,6 +19,10 @@
   max-width: none;
 }
 
+@mixin text-relaxed {
+  max-inline-size: clamp(40rem, 75vw, 70rem);
+}
+
 @mixin headings-base($heading-config, $selector-pattern, $base-styles) {
   $selector: ();
 

package/src/styles/utilities/text.scss

@@ -55,6 +55,12 @@
     );
   }
 
+  .body-text-sm {
+    @include generate.css-map(
+      map.get(map.get(typographyConfig.$body-text, "default"), "default")
+    );
+  }
+
   .large {
     @include generate.responsive-css-map(
       map.get(typographyConfig.$body-text, "large")
@@ -152,4 +158,7 @@
   .text-narrow {
     @include typographyMixins.text-narrow;
   }
+  .text-relaxed {
+    @include typographyMixins.text-relaxed;
+  }
 }

package/build/components/Testimonial/style.css

@@ -1,2 +0,0 @@
-@layer components{.testimonial{font-size:.875rem;padding:.625rem 1.875rem .625rem 2.5rem;position:relative;width:fit-content}.testimonial:after,.testimonial:before{background-color:var(--color-background-contrast);background-repeat:no-repeat;content:"";display:block;height:1.125rem;position:absolute;width:1.25rem}.testimonial:before{bottom:0;left:0;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg width="20" height="18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0h7.551v7.551c0 1.36-.159 2.653-.476 3.878-.272 1.179-.726 2.222-1.36 3.129A6.652 6.652 0 0 1 3.4 16.735c-.907.544-2.018.816-3.333.816V14.15c.771 0 1.406-.182 1.905-.545.499-.408.907-.93 1.224-1.564a6.33 6.33 0 0 0 .613-2.109c.136-.816.204-1.61.204-2.381H0V0Zm12.449 0H20v7.551c0 1.36-.159 2.653-.476 3.878-.272 1.179-.726 2.222-1.36 3.129a6.653 6.653 0 0 1-2.314 2.177c-.907.544-2.018.816-3.333.816V14.15c.771 0 1.406-.182 1.905-.545.499-.408.907-.93 1.224-1.564a6.331 6.331 0 0 0 .613-2.109c.136-.816.204-1.61.204-2.381h-4.014V0Z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg width="20" height="18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0h7.551v7.551c0 1.36-.159 2.653-.476 3.878-.272 1.179-.726 2.222-1.36 3.129A6.652 6.652 0 0 1 3.4 16.735c-.907.544-2.018.816-3.333.816V14.15c.771 0 1.406-.182 1.905-.545.499-.408.907-.93 1.224-1.564a6.33 6.33 0 0 0 .613-2.109c.136-.816.204-1.61.204-2.381H0V0Zm12.449 0H20v7.551c0 1.36-.159 2.653-.476 3.878-.272 1.179-.726 2.222-1.36 3.129a6.653 6.653 0 0 1-2.314 2.177c-.907.544-2.018.816-3.333.816V14.15c.771 0 1.406-.182 1.905-.545.499-.408.907-.93 1.224-1.564a6.331 6.331 0 0 0 .613-2.109c.136-.816.204-1.61.204-2.381h-4.014V0Z"/></svg>')}.testimonial:after{mask-image:url('data:image/svg+xml;charset=utf-8,<svg width="20" height="18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.551 17.551H0V10c0-1.36.136-2.63.408-3.81.318-1.224.771-2.29 1.36-3.197A7.288 7.288 0 0 1 4.15.816C5.102.272 6.213 0 7.483 0v3.401c-.771 0-1.406.204-1.905.613-.499.362-.907.861-1.224 1.496-.318.635-.544 1.36-.68 2.177A19.78 19.78 0 0 0 3.536 10h4.014v7.551Zm12.449 0h-7.551V10c0-1.36.136-2.63.408-3.81.318-1.224.771-2.29 1.36-3.197A7.289 7.289 0 0 1 16.6.816C17.55.272 18.662 0 19.932 0v3.401c-.771 0-1.406.204-1.905.613-.499.362-.907.861-1.224 1.496-.318.635-.544 1.36-.68 2.177A19.78 19.78 0 0 0 15.985 10H20v7.551Z"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg width="20" height="18" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.551 17.551H0V10c0-1.36.136-2.63.408-3.81.318-1.224.771-2.29 1.36-3.197A7.288 7.288 0 0 1 4.15.816C5.102.272 6.213 0 7.483 0v3.401c-.771 0-1.406.204-1.905.613-.499.362-.907.861-1.224 1.496-.318.635-.544 1.36-.68 2.177A19.78 19.78 0 0 0 3.536 10h4.014v7.551Zm12.449 0h-7.551V10c0-1.36.136-2.63.408-3.81.318-1.224.771-2.29 1.36-3.197A7.289 7.289 0 0 1 16.6.816C17.55.272 18.662 0 19.932 0v3.401c-.771 0-1.406.204-1.905.613-.499.362-.907.861-1.224 1.496-.318.635-.544 1.36-.68 2.177A19.78 19.78 0 0 0 15.985 10H20v7.551Z"/></svg>');right:0;top:0}.testimonial--orange:after,.testimonial--orange:before{background-color:var(--color-surface-secondary)}}
-/*# sourceMappingURL=style.css.map */

package/build/components/Testimonial/style.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["style.scss"],"names":[],"mappings":"AAAA,kBACE,aAGE,iBAAmB,CAFnB,uCAA0C,CAG1C,iBAAkB,CAFlB,iBAGF,CACA,uCAOE,iDAAkD,CADlD,2BAA4B,CAL5B,UAAW,CACX,aAAc,CAEd,eAAgB,CADhB,iBAAkB,CAElB,aAGF,CACA,oBAIE,QAAS,CADT,MAAO,CAFP,0sBAAq/B,CACr/B,ksBAGF,CACA,mBACE,mrBAA09B,CAC19B,2rBAAk+B,CAEl+B,OAAQ,CADR,KAEF,CACA,uDACE,+CACF,CACF","file":"style.css","sourcesContent":["@layer components {\n  .testimonial {\n    padding: 0.625rem 1.875rem 0.625rem 2.5rem;\n    width: fit-content;\n    font-size: 0.875rem;\n    position: relative;\n  }\n  .testimonial::before, .testimonial::after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    height: 1.125rem;\n    width: 1.25rem;\n    background-repeat: no-repeat;\n    background-color: var(--color-background-contrast);\n  }\n  .testimonial::before {\n    -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>');\n    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>');\n    left: 0;\n    bottom: 0;\n  }\n  .testimonial::after {\n    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>');\n    -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>');\n    top: 0;\n    right: 0;\n  }\n  .testimonial--orange::before, .testimonial--orange::after {\n    background-color: var(--color-surface-secondary);\n  }\n}"]}

package/build/components/types/src/components/Testimonial/Testimonial.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-interface TestimonialProps {
-    className?: string;
-    children?: React.ReactNode;
-    color?: "default" | "orange";
-    isDiv?: boolean;
-    [key: string]: any;
-}
-export declare const Testimonial: React.FC<TestimonialProps>;
-export {};

package/build/components/types/src/components/Testimonial/index.d.ts

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