@orangesk/orange-design-system 3.5.0 → 3.6.0

package/src/components/Gauge/Gauge.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { ForwardedRef } from "react";
+import type { ForwardedRef } from "react";
+import React from "react";
 
 const getMaxValue = (radius: number): number =>
   Math.PI * (radius + radius * 0.22) * 2;

package/src/components/Icon/Pictogram.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import React from "react";
-import { Icon, IconProps } from "./Icon";
+import type { IconProps } from "./Icon";
+import { Icon } from "./Icon";
 
 export interface PictogramProps extends Omit<IconProps, "type"> {
   /**

package/src/components/Icon/SpritePathContext.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 
 export const SpritePathContext = React.createContext("/sprite.svg");
 

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

@@ -1,4 +1,3 @@
-@use "sass:map" as sass-map;
 @use "../../../styles/tools/convert";
 @use "../../../styles/tokens/color";
 
@@ -6,18 +5,34 @@ $sizes: (
   default: (
     small: convert.to-rem(16px),
     medium: convert.to-rem(24px),
-    large: convert.to-rem(32px),
+    large: convert.to-rem(24px),
     xlarge: convert.to-rem(40px),
     xxlarge: convert.to-rem(48px),
     huge: convert.to-rem(56px),
   ),
   md: (
+    large: convert.to-rem(32px),
+    xlarge: convert.to-rem(48px),
+    xxlarge: convert.to-rem(56px),
+    huge: convert.to-rem(64px),
+  ),
+  lg: (
+    large: convert.to-rem(32px),
     xlarge: convert.to-rem(48px),
     xxlarge: convert.to-rem(64px),
     huge: convert.to-rem(80px),
   ),
 );
 
+$pictogram-sizes: (
+  small: convert.to-rem(16px),
+  medium: convert.to-rem(24px),
+  large: convert.to-rem(32px),
+  xlarge: convert.to-rem(48px),
+  xxlarge: convert.to-rem(64px),
+  huge: convert.to-rem(80px),
+);
+
 $colors: (
   info: var(--color-icon-information),
   success: var(--color-icon-positive),

package/src/components/Icon/styles/export/size.js

@@ -4,13 +4,14 @@
 export const exports = {
   "small": "1rem",
   "medium": "1.5rem",
-  "large": "2rem",
+  "large": "1.5rem",
   "xlarge": "2.5rem",
   "xxlarge": "3rem",
   "huge": "3.5rem",
+  "large-md": "2rem",
   "xlarge-md": "3rem",
-  "xxlarge-md": "4rem",
-  "huge-md": "5rem"
+  "xxlarge-md": "3.5rem",
+  "huge-md": "4rem"
 };
 
 export default exports;

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

@@ -32,6 +32,15 @@
     @include mixins.sizes;
     @include mixins.colors;
 
+    // Pictogram sizes stay fixed. Responsive sizing belongs to icons only.
+    &--pictogram {
+      @each $variant, $size in config.$pictogram-sizes {
+        &.icon#{generate.variant-name($variant)} {
+          --icon-size: #{$size};
+        }
+      }
+    }
+
     &__use {
       &--light {
         display: block;

package/src/components/Icon/tests/Icon.styles.unit.test.jsx

@@ -0,0 +1,12 @@
+import * as sass from "sass";
+
+describe("Icon styles", () => {
+  it("keeps pictogram sizes fixed across breakpoints", () => {
+    const { css } = sass.compile("src/components/Icon/styles/style.scss");
+
+    expect(css).toMatch(
+      /\.icon--pictogram\.icon--xlarge \{\s+--icon-size: 3rem;\s+\}/,
+    );
+    expect(css.match(/\.icon--pictogram\.icon--xlarge/g)).toHaveLength(1);
+  });
+});

package/src/components/Loader/Loader.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 
 import { useStatic } from "../../utils/hooks";
 

package/src/components/Loader/LoaderFullscreen.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 import { Container } from "../Container";
 import { Loader } from "./Loader";
 

package/src/components/Megamenu/Megamenu.tsx

@@ -54,13 +54,8 @@ import {
   CLASS_TILES,
   CLASS_TOP,
 } from "./constants";
-import {
-  MegamenuTile,
-  MenuItem,
-  MenuSection,
-  megamenuTiles,
-  menuSections,
-} from "./data";
+import type { MegamenuTile, MenuItem, MenuSection } from "./data";
+import { megamenuTiles, menuSections } from "./data";
 import { getMegamenuIds } from "./ids";
 import { MegamenuIcon } from "./MegaMenuIcon";
 import { MegamenuSearchContent } from "./MegamenuSearchContent";

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -31,7 +31,7 @@ import {
 } from "./constants";
 import { getMegamenuIds } from "./ids";
 import { MegamenuIcon } from "./MegaMenuIcon";
-import { MegamenuProps } from "./Megamenu";
+import type { MegamenuProps } from "./Megamenu";
 import { MegamenuSearchContent } from "./MegamenuSearchContent";
 import { MyOrangeMobilePanel } from "./MyOrangeMobilePanel";
 import {

package/src/components/Modal/ModalCloseButton.tsx

@@ -1,6 +1,6 @@
 import { IconButton } from "../Button";
-import { ButtonType } from "../Button/Button";
-import { IconButtonProps } from "../Button/IconButton";
+import type { ButtonType } from "../Button/Button";
+import type { IconButtonProps } from "../Button/IconButton";
 
 interface ExtendedIconButtonProps extends IconButtonProps {
   type?: ButtonType;

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/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/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;
       }