@orangesk/orange-design-system 3.4.0 → 3.6.0

package/src/components/Pagination/Separator.tsx

@@ -1,5 +1,5 @@
 import cx from "classnames";
-import { HTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
 
 const CLASS_ROOT = "pagination__separator";
 

package/src/components/Pill/Pill.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 
 const CLASS_ROOT = "pill";
 

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

@@ -101,3 +101,13 @@
     padding-top: 0 !important;
   }
 }
+
+@mixin promo-banner-vertical-with-top-padding() {
+  .promo-banner__item {
+    padding-top: space.get("xlarge") !important;
+
+    @include breakpoint.get("md", "down") {
+      padding-top: space.get("large") !important;
+    }
+  }
+}

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

@@ -27,6 +27,11 @@
 
     &--vertical {
       @include mixins.promo-banner-vertical;
+
+      &.promo-banner--with-top-padding {
+        @include mixins.promo-banner-vertical-with-top-padding;
+      }
+
       .promo-banner__item[class*="grid__col"],
       .promo-banner__image[class*="grid__col"]:not(
           .promo-banner__image--bleed-right

package/src/components/PromotionCard/PromotionCard.tsx

@@ -1,7 +1,7 @@
 import cx from "classnames";
 import React from "react";
-
-import { Card, CardColor } from "../Card";
+import type { CardColor } from "../Card";
+import { Card } from "../Card";
 
 import { CLASS_ROOT } from "./constants";
 

package/src/components/SkipLink/SkipLink.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { AnchorHTMLAttributes } from "react";
+import type { AnchorHTMLAttributes } from "react";
+import React from "react";
 
 interface SkipLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;

package/src/components/StarRating/StarRating.tsx

@@ -2,6 +2,7 @@ import cx from "classnames";
 import React from "react";
 
 import { Icon } from "../Icon";
+import type { IconSize } from "../Icon/Icon";
 
 export interface StarRatingProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
@@ -9,6 +10,8 @@ export interface StarRatingProps
   className?: string;
   /** Rating value. Rounded to nearest whole star. */
   rating: number;
+  /** Icon size for each star. */
+  size?: IconSize;
 }
 
 const CLASS_ROOT = "star-rating";
@@ -22,6 +25,7 @@ const clampRating = (rating: number) =>
 const StarRating: React.FC<StarRatingProps> = ({
   className,
   rating,
+  size,
   ...other
 }) => {
   const filledStars = clampRating(rating);
@@ -39,7 +43,7 @@ const StarRating: React.FC<StarRatingProps> = ({
               [`${CLASS_ROOT}__icon--empty`]: !isFilled,
             })}
             name={isFilled ? FILLED_ICON_NAME : EMPTY_ICON_NAME}
-            size="large"
+            size={size}
           />
         );
       })}

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

@@ -1,6 +1,6 @@
 @use "../../../styles/tools/convert";
-@use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tokens/space";
 
 @layer components {
   .star-rating {
@@ -17,7 +17,14 @@
       color: var(--color-icon-disabled);
     }
 
-    &__icon {
+    &__icon:not(
+        .icon--small,
+        .icon--medium,
+        .icon--large,
+        .icon--xlarge,
+        .icon--xxlarge,
+        .icon--huge
+      ) {
       --icon-size: #{convert.to-rem(24px)};
 
       @include breakpoint.get(md) {

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

@@ -19,7 +19,13 @@ describe("rendering StarRating", () => {
     const { container } = render(<StarRating rating={4} />);
 
     expect(container.querySelectorAll("svg.icon")).toHaveLength(5);
-    expect(container.querySelector("svg")).toHaveClass("icon--large");
+    expect(container.querySelector("svg")).not.toHaveClass("icon--large");
+  });
+
+  it("supports custom icon size", () => {
+    const { container } = render(<StarRating rating={4} size="small" />);
+
+    expect(container.querySelectorAll("svg.icon--small")).toHaveLength(5);
   });
 
   it("renders filled and empty stars from rating", () => {

package/src/components/Table/Footer.tsx

@@ -4,7 +4,7 @@ import React from "react";
 
 import { Row } from "./Row";
 import TableContext from "./TableContext";
-import { TableContextType, TableRow } from "./types";
+import type { TableContextType, TableRow } from "./types";
 
 const Footer: React.FC = () => {
   const { footers } = React.useContext(TableContext) as TableContextType;

package/src/components/Table/Header.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import { Cell } from "./Cell";
 import TableContext from "./TableContext";
-import { TableHeader } from "./types";
+import type { TableHeader } from "./types";
 
 interface SortOptions {
   none: string;

package/src/components/Table/Row.tsx

@@ -6,7 +6,7 @@ import { Button } from "../Button/";
 import { Icon } from "../Icon/";
 import { Cell } from "./Cell";
 import TableContext from "./TableContext";
-import { TableRow } from "./types";
+import type { TableRow } from "./types";
 
 interface RowProps {
   row: TableRow;

package/src/components/Table/Rows.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import { Row } from "./Row";
 import TableContext from "./TableContext";
-import { TableRow } from "./types";
+import type { TableRow } from "./types";
 
 const Rows: React.FC = () => {
   const { rows } = React.useContext(TableContext);

package/src/components/Table/Table.tsx

@@ -10,7 +10,7 @@ import { Header } from "./Header";
 import { Rows } from "./Rows";
 import TableStatic from "./Table.static";
 import TableContext from "./TableContext";
-import { ExpandableRowsCaptions, TableHeader, TableRow } from "./types";
+import type { ExpandableRowsCaptions, TableHeader, TableRow } from "./types";
 
 interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
   /** Caption helps users with screen readers to find a table and understand what it's about and decide if they want to read it. */

package/src/components/Table/TableContext.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { TableContextType } from "./types";
+import type { TableContextType } from "./types";
 
 const TableContext = React.createContext<TableContextType>({
   headers: [],

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

@@ -1,4 +1,5 @@
 $arrow-size: 5px;
 $striped-color: var(--color-background-secondary);
+$striped-color-on-secondary: var(--color-background-primary);
 $normal-border-size: 1px;
 $fat-border-size: 2px;

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

@@ -1,4 +1,5 @@
 @use "./mixins";
+@use "./config";
 @use "../../../styles/tokens/breakpoint";
 @use "../../../styles/tools/generate";
 
@@ -39,6 +40,11 @@
       @include mixins.odd-row;
     }
 
+    &--striped.background-secondary tbody tr:nth-of-type(odd),
+    .background-secondary &--striped tbody tr:nth-of-type(odd) {
+      background-color: config.$striped-color-on-secondary;
+    }
+
     &--compact {
       @include mixins.compact;
     }

package/src/components/Tag/Tag.tsx

@@ -1,6 +1,9 @@
 import cx from "classnames";
 import React from "react";
-import { TagButtonProps } from "./TagButton";
+import { CLASS_ROOT } from "./constants";
+import type { TagButtonProps } from "./TagButton";
+
+export { CLASS_ROOT } from "./constants";
 
 export const colors = [
   "black",
@@ -47,8 +50,6 @@ type AnchorProps = CommonProps &
 
 type TagProps = SpanProps | ButtonProps | AnchorProps;
 
-export const CLASS_ROOT = "tag";
-
 const Tag = React.forwardRef<HTMLElement, TagProps>((props, ref) => {
   const {
     color,

package/src/components/Tag/TagButton.tsx

@@ -2,7 +2,7 @@ import cx from "classnames";
 import React from "react";
 
 import { Icon } from "@/components/Icon";
-import { CLASS_ROOT } from "./Tag";
+import { CLASS_ROOT } from "./constants";
 
 export type TagButtonProps = {
   className?: string;

package/src/components/Tag/constants.ts

@@ -0,0 +1 @@
+export const CLASS_ROOT = "tag";

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

@@ -24,7 +24,7 @@
 }
 
 @mixin buttton-disabled($is-icon: false) {
-  $config: if($is-icon, config.$icon-states, config.$states);
+  $config: if(sass($is-icon): config.$icon-states; else: config.$states);
 
   &[aria-disabled="true"],
   &[disabled] {
@@ -39,7 +39,7 @@
 }
 
 @mixin button($is-icon: false) {
-  $config: if($is-icon, config.$icon-states, config.$states);
+  $config: if(sass($is-icon): config.$icon-states; else: config.$states);
 
   @include generate.css-map($config, "default");
   @include button-base;

package/src/components/Tile/Tile.tsx

@@ -1,7 +1,8 @@
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 import { Icon } from "../Icon";
-import { IconProps } from "../Icon/Icon";
+import type { IconProps } from "../Icon/Icon";
 
 export type TileHAlign = "center";
 export type TileVAlign = "center" | "end" | "space-between";

package/src/components/Tooltip/InfoTooltip.tsx

@@ -4,7 +4,8 @@ import cx from "classnames";
 import React from "react";
 
 import { Icon } from "../Icon";
-import { Tooltip, TooltipProps } from "./Tooltip";
+import type { TooltipProps } from "./Tooltip";
+import { Tooltip } from "./Tooltip";
 
 const CLASS_ROOT = "info-tooltip";
 

package/src/components/Tooltip/Tooltip.static.ts

@@ -1,9 +1,9 @@
 import { transitionHiddenElement } from "@cloudfour/transition-hidden-element";
-import {
-  createPopper,
+import type {
   Instance as PopperInstance,
   Options as PopperOptions,
 } from "@popperjs/core";
+import { createPopper } from "@popperjs/core";
 
 import { keys } from "../../utils";
 

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

@@ -22,6 +22,11 @@
   .info-tooltip {
     @include mixins.info-tooltip;
 
+    .background-contrast &,
+    .surface-contrast & {
+      color: var(--color-text-inverse);
+    }
+
     &.is-active &__icon,
     &:focus &__icon {
       @include mixins.info-tooltip-active-icon;

package/src/styles/tokens/space.scss

@@ -20,7 +20,9 @@ $map: (
   @if map.has-key($map, $size) {
     $space: map.get($map, $size);
 
-    @return if(math.unit($space) == "rem", $space, convert.to-rem($space));
+    @return if(
+      sass(math.unit($space) == "rem"): $space; else: convert.to-rem($space)
+    );
   } @else {
     @error 'Cannot find key ($size) \'#{$size}\' in $space \'#{$space}\'';
   }

package/src/styles/tools/generate.scss

@@ -22,7 +22,7 @@
 ///   color: #000;
 /// }
 @mixin css-map($_map, $keys...) {
-  $map: if($keys, map-deep-get($_map, $keys...), $_map);
+  $map: if(sass($keys): map-deep-get($_map, $keys...); else: $_map);
 
   @each $prop, $value in $map {
     #{$prop}: #{$value};
@@ -70,7 +70,9 @@
 /// @param {Map} $classSuffix - suffix for class name of element
 @mixin variants($map, $className: "", $classSuffix: "") {
   @each $variant, $props in $map {
-    #{if(&, "&", "")}#{$className + variant-name($variant) + $classSuffix} {
+    #{if(sass(&): "&"; else: "")}#{$className
+      + variant-name($variant)
+      + $classSuffix} {
       @include css-map($props);
     }
   }

package/src/styles/utilities/color.scss

@@ -1,10 +1,11 @@
 @use "../tokens/color";
 @use "sass:map";
+@use "sass:string";
 
 @layer utilities {
   // Background utilities
   @each $name, $value in color.$colors-light {
-    @if str-index($name, "background-") == 1 {
+    @if string.index($name, "background-") == 1 {
       .#{$name} {
         background-color: var(--color-#{$name}) !important;
       }
@@ -13,7 +14,7 @@
 
   // Surface utilities
   @each $name, $value in color.$colors-light {
-    @if str-index($name, "surface-") == 1 {
+    @if string.index($name, "surface-") == 1 {
       .#{$name} {
         background-color: var(--color-#{$name}) !important;
       }
@@ -22,7 +23,7 @@
 
   // Fill utilities
   @each $name, $value in color.$colors-light {
-    @if str-index($name, "fill-") == 1 {
+    @if string.index($name, "fill-") == 1 {
       .#{$name} {
         background-color: var(--color-#{$name}) !important;
       }
@@ -31,7 +32,7 @@
 
   // Border utilities
   @each $name, $value in color.$colors-light {
-    @if str-index($name, "border-") == 1 {
+    @if string.index($name, "border-") == 1 {
       .#{$name} {
         border-color: var(--color-#{$name}) !important;
       }
@@ -40,7 +41,7 @@
 
   // Text color utilities
   @each $name, $value in color.$colors-light {
-    @if str-index($name, "text-") == 1 {
+    @if string.index($name, "text-") == 1 {
       .#{$name} {
         color: var(--color-#{$name}) !important;
       }
@@ -49,7 +50,7 @@
 
   // Icon color utilities
   @each $name, $value in color.$colors-light {
-    @if str-index($name, "icon-") == 1 {
+    @if string.index($name, "icon-") == 1 {
       .#{$name} {
         color: var(--color-#{$name}) !important;
       }