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

package/src/components/Bar/Bar.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 type BarAlign = "start" | "end" | "center";
 type BarSpace = "small" | "large";

package/src/components/Bar/BarBreak.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 interface BarBreakProps extends React.HTMLAttributes<HTMLElement> {
   /** HTML tag to render the compontent with */

package/src/components/Bar/BarItem.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 
 interface CommonProps {
   /** Bar item could shrink and wrap content if there is not enough empty space */

package/src/components/Bar/index.ts

@@ -1,3 +1,3 @@
 export { Bar } from "./Bar";
-export { BarItem } from "./BarItem";
 export { BarBreak } from "./BarBreak";
+export { BarItem } from "./BarItem";

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

@@ -1,10 +1,9 @@
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
+@use "../../../styles/tokens/space";
 
 $spacing: (
   default: space.get(),
-  small: space.get('small'),
-  large: space.get('large'),
+  small: space.get("small"),
+  large: space.get("large"),
 );
 
-$border: 2px solid color.$black;
+$border: 2px solid var(--color-text-default);

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

@@ -1,12 +1,12 @@
-@use './../../../styles/tokens/space';
-@use './../../../styles/tokens/breakpoint';
-@use './../../../styles/tools/generate';
-@use './../../../styles/tools/layout';
-@use './config';
+@use "./../../../styles/tokens/space";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/layout";
+@use "./config";
 
 @mixin bar-base {
   display: flex;
-  margin-bottom: space.get();
+  margin-bottom: space.get("large");
 }
 
 @mixin bar-horizontal() {
@@ -40,19 +40,19 @@
   }
 }
 
-@mixin bar-spacing($direction: 'horizontal', $space) {
-  @if ($direction == 'horizontal') {
+@mixin bar-spacing($direction: "horizontal", $space) {
+  @if ($direction == "horizontal") {
     margin-top: -($space);
   }
 }
 
-@mixin bar-item-spacing($direction: 'horizontal', $space) {
-  @if ($direction == 'horizontal') {
+@mixin bar-item-spacing($direction: "horizontal", $space) {
+  @if ($direction == "horizontal") {
     margin-top: $space;
     margin-right: $space;
   }
 
-  @if ($direction == 'vertical') {
+  @if ($direction == "vertical") {
     margin-bottom: $space;
   }
 }

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

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

package/src/components/BlockAction/BlockAction.tsx

@@ -1,3 +1,4 @@
+import cx from "classnames";
 import React, { ReactElement } from "react";
 
 import { CloneElementWithClassName } from "./CloneElementWithClassName";
@@ -7,15 +8,21 @@ export interface BlockActionProps {
   /** 1 and only one single element */
   children: ReactElement;
   className?: string;
+  /** Add border on hover */
+  hasBorderOnHover?: boolean;
   [key: string]: any;
 }
 
 const BlockAction: React.FC<BlockActionProps> = (props) => {
+  const { hasBorderOnHover, className, ...restProps } = props;
+
   return (
-    <Provider>
+    <Provider hasBorderOnHover={hasBorderOnHover}>
       <CloneElementWithClassName
-        {...props}
-        className="block-action"
+        {...restProps}
+        className={cx("block-action", className, {
+          "block-action--border-on-hover": hasBorderOnHover,
+        })}
         data-block-action
       />
     </Provider>

package/src/components/BlockAction/BlockActionControl.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import React, { useContext, ReactElement } from "react";
-
-import { Context } from "./Context";
+import React, { ReactElement, useContext } from "react";
 import { CloneElementWithClassName } from "./CloneElementWithClassName";
+import { Context } from "./Context";
 
 export interface BlockActionControlProps {
   /** 1 and only one single element */

package/src/components/BlockAction/BlockActionIndicator.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import React, { useContext, ReactElement } from "react";
 import cx from "classnames";
-
-import { Context } from "./Context";
+import React, { ReactElement, useContext } from "react";
 import { CloneElementWithClassName } from "./CloneElementWithClassName";
+import { Context } from "./Context";
 
 export interface BlockActionIndicatorProps {
   /** 1 and only one single element */

package/src/components/BlockAction/CloneElementWithClassName.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement } from "react";
 import cx from "classnames";
+import React, { ReactElement } from "react";
 
 interface CloneElementWithClassNameProps {
   className?: string;

package/src/components/BlockAction/Context.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import React, { useState, ReactNode, Dispatch, SetStateAction } from "react";
+import React, { Dispatch, ReactNode, SetStateAction, useState } from "react";
 
 interface ContextType {
   isIndicating: boolean;
   isActive: boolean;
   setIsActive: Dispatch<SetStateAction<boolean>>;
   setIsIndicating: Dispatch<SetStateAction<boolean>>;
+  hasBorderOnHover?: boolean;
 }
 
 export const Context = React.createContext<ContextType>({
@@ -14,10 +15,12 @@ export const Context = React.createContext<ContextType>({
   isActive: false,
   setIsActive: () => {},
   setIsIndicating: () => {},
+  hasBorderOnHover: undefined,
 });
 
 interface ProviderProps {
   children: ReactNode;
+  hasBorderOnHover?: boolean;
 }
 
 export const Provider: React.FC<ProviderProps> = (props) => {
@@ -31,6 +34,7 @@ export const Provider: React.FC<ProviderProps> = (props) => {
         setIsIndicating,
         isActive,
         setIsActive,
+        hasBorderOnHover: props.hasBorderOnHover,
       }}
     >
       {props.children}

package/src/components/BlockAction/index.tsx

@@ -1,9 +1,8 @@
 import React, { ReactElement } from "react";
-
-import { CloneElementWithClassName } from "./CloneElementWithClassName";
 import { BlockAction } from "./BlockAction";
 import { BlockActionControl } from "./BlockActionControl";
 import { BlockActionIndicator } from "./BlockActionIndicator";
+import { CloneElementWithClassName } from "./CloneElementWithClassName";
 
 export interface BlockActionOverrideProps {
   /** 1 and only one single element */
@@ -12,9 +11,7 @@ export interface BlockActionOverrideProps {
   [key: string]: any;
 }
 
-export { BlockAction };
-
-export { BlockActionControl };
+export { BlockAction, BlockActionControl };
 
 const BlockActionOverride: React.FC<BlockActionOverrideProps> = (props) => (
   <CloneElementWithClassName {...props} className="block-action__override" />
@@ -22,6 +19,4 @@ const BlockActionOverride: React.FC<BlockActionOverrideProps> = (props) => (
 
 BlockActionOverride.displayName = "BlockActionOverride";
 
-export { BlockActionOverride };
-
-export { BlockActionIndicator };
+export { BlockActionIndicator, BlockActionOverride };

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

@@ -1,10 +1,10 @@
-@use '../../../styles/tokens/color';
+@use "../../../styles/tokens/color";
 
 /// Generates indicator hover colors. Each key is a background color and matching hover color.
 /// @type Map
 $indicator-colors: (
-  'default': color.$orange-dark,
-  'black': color.$orange,
-  'orange': color.$white,
-  'orange-dark': color.$black,
-)
+  "default": color.$orange-dark,
+  "black": color.$orange,
+  "orange": color.$white,
+  "orange-dark": color.$black,
+);

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

@@ -25,3 +25,8 @@
 @mixin indicator($bg-color: "default", $config: config.$indicator-colors) {
   color: map.get($config, $bg-color);
 }
+
+@mixin border {
+  outline: 2px solid var(--color-border-accent);
+  outline-offset: -2px;
+}

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

@@ -15,21 +15,28 @@
     &__indicator.is-indicating:not(.block-action__indicator--color-reset) {
       @include mixins.indicator;
 
-      .bg-white & {
+      .background-primary &,
+      .surface-primary & {
         @include mixins.indicator;
       }
 
-      .bg-black & {
+      .background-contrast &,
+      .surface-contrast & {
         @include mixins.indicator("black");
       }
 
-      .bg-orange & {
+      .surface-secondary & {
         @include mixins.indicator("orange");
       }
 
-      .bg-orange-dark & {
+      .surface-tertiary & {
         @include mixins.indicator("orange-dark");
       }
     }
+
+    &--border-on-hover:has(.block-action__control:hover),
+    &--border-on-hover:has(.block-action__control:focus) {
+      @include mixins.border;
+    }
   }
 }

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

@@ -1,6 +1,6 @@
 // TODO: Uncomment the tests below when the components are ready for conformance testing.
 // import { render } from "@testing-library/react";
-// import { axe } from "jest-axe";
+// import { axe } from 'vitest-axe';
 
 // import { Bar, BarItem } from "../../Bar";
 // import { Button } from "../../Button";

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

@@ -1,13 +1,13 @@
-import { render, fireEvent } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 
 import { BlockActionControl } from "../BlockActionControl";
 import { Context } from "../Context";
 
 describe("rendering BlockActionControl", () => {
   let isIndicating;
-  const setIsIndicating = jest.fn((val) => (isIndicating = val));
+  const setIsIndicating = vi.fn((val) => (isIndicating = val));
   let isActive;
-  const setIsActive = jest.fn((val) => (isActive = val));
+  const setIsActive = vi.fn((val) => (isActive = val));
   describe("passed props", () => {
     it("renders children", () => {
       const { container } = render(

package/src/components/BodyBanner/BodyBanner.tsx

@@ -1,102 +1,78 @@
-import React from "react";
 import cx from "classnames";
+import React from "react";
 import { Grid } from "@/components/Grid/Grid";
-import { GridCol } from "../Grid/GridCol";
 import { Button } from "../Button/Button";
-import { Image } from "../Image/Image";
-import { Container } from "../Container/Container";
+import { GridCol } from "../Grid/GridCol";
 
 const CLASS_ROOT = "body-banner";
 
+export const bodyBannerColors = [
+  "background-primary",
+  "background-accent",
+  "surface-subtle",
+] as const;
+export type BodyBannerColor = (typeof bodyBannerColors)[number];
+
 interface BodyBannerProps {
-  size: "small" | "large";
-  /** Color scheme for whole BodyBanner */
-  colorScheme: "light" | "dark";
-  /** Color scheme for whole BodyBanner */
-  color?: "gray" | "orange";
+  size?: "large";
+  /** Background color using design tokens */
+  color?: BodyBannerColor;
   /** Additional CSS classes */
   className?: string;
-  /** Image URL */
-  imageUrl?: string;
-  /** Title */
-  title?: string;
-  /** Subtitle */
-  description?: string;
+  /** Image element */
+  image?: React.ReactNode;
+  /** Content area - typically heading and description */
+  children?: React.ReactNode;
   /** Button text */
   buttonText?: string;
+  /** Additional CSS classes for button */
+  buttonClassName?: string;
 }
-export const BodyBanner = (props: BodyBannerProps) => {
-  const {
-    className,
-    colorScheme,
-    size,
-    color,
-    imageUrl,
-    title,
-    description,
-    buttonText,
-  } = props;
+export const BodyBanner = ({
+  className,
+  size,
+  color = "background-primary",
+  image,
+  children,
+  buttonText,
+  buttonClassName,
+  ...other
+}: BodyBannerProps) => {
   const classes = cx(
     CLASS_ROOT,
     {
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
-      "is-small": size === "small",
-      "is-large": size === "large",
-      "is-gray": color === "gray",
-      "is-orange": color === "orange",
+      [`${CLASS_ROOT}--${size}`]: size,
+      [color]: color !== "background-primary",
     },
     className,
   );
   return (
-    <Container>
-      <Grid className={classes}>
-        <GridCol
-          size={{ xs: 12, md: size === "small" ? 12 : 6 }}
-          className={`${CLASS_ROOT}__content`}
-        >
-          {size === "small" && imageUrl && (
-            <div className={`${CLASS_ROOT}__image`}>
-              <Image src={imageUrl || ""} alt="Body Banner" />
-            </div>
-          )}
-          <div
-            className={`${CLASS_ROOT}__content-inner ${size === "large" ? "is-large" : ""}`}
-          >
-            <div>
-              <h3 className="mb-small">{title}</h3>
-              <p className="h6 mb-none fullwidth">{description}</p>
-            </div>
-            <div
-              className={`${CLASS_ROOT}__button ${size === "large" ? "is-large" : ""}`}
+    <Grid className={classes} {...other}>
+      <GridCol
+        size={{ xs: 12, md: size === "large" ? 6 : 12 }}
+        className={`${CLASS_ROOT}__content`}
+      >
+        {size !== "large" && image && (
+          <div className={`${CLASS_ROOT}__image`}>{image}</div>
+        )}
+        <div className={`${CLASS_ROOT}__content-inner`}>
+          <div>{children}</div>
+          <div className={`${CLASS_ROOT}__button`}>
+            <Button
+              size="large"
+              type="fill"
+              className={cx("mb-none", buttonClassName)}
             >
-              <Button
-                size="large"
-                type="fill"
-                colorScheme={
-                  colorScheme === "light"
-                    ? "light"
-                    : color !== "gray" && color !== "orange"
-                      ? "dark"
-                      : "light"
-                }
-                className="mb-none"
-              >
-                {buttonText}
-              </Button>
-            </div>
+              {buttonText}
+            </Button>
           </div>
+        </div>
+      </GridCol>
+      {size === "large" && image && (
+        <GridCol size={{ xs: 12, md: 6 }} className={`${CLASS_ROOT}__image`}>
+          {image}
         </GridCol>
-        {size === "large" && imageUrl && (
-          <GridCol size={{ xs: 12, md: 6 }} className={`${CLASS_ROOT}__image`}>
-            <Image
-              src={imageUrl || ""}
-              alt="Body Banner"
-              className="is-large"
-            />
-          </GridCol>
-        )}
-      </Grid>
-    </Container>
+      )}
+    </Grid>
   );
 };

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

@@ -3,19 +3,35 @@
 @use "../../../styles/tools/generate";
 @use "../../../styles/tokens/space";
 @use "../../../styles/tokens/breakpoint";
-// @use "./config";
 
 @mixin body-banner {
   display: flex;
   color: var(--color-text-default);
   background-color: var(--color-background-primary);
-  border: 1px solid var(--color-border-subtle);
+
+  &:not(
+    [class*="background-"],
+    [class*="surface-"],
+    [class*="fill-"],
+    [style*="--color-background"],
+    [style*="--color-fill"],
+    [style*="--color-surface"]
+  ) {
+    border: 1px solid var(--color-border-subtle);
+  }
+
+  &.grid {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
 }
 
 @mixin content {
   padding: 0 !important;
   display: flex;
   align-items: center;
+  width: 100%;
+
   @include breakpoint.get("sm", "down") {
     flex-direction: column;
     align-items: flex-start;
@@ -26,64 +42,40 @@
   width: 100%;
   display: flex;
   padding: space.get("large");
+  gap: convert.to-rem(60px);
 
   > div:not(.body-banner__button) {
     flex: 1;
     min-width: 0;
-  }
 
-  &.is-large {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    padding: space.get("xlarge");
-
-    @include breakpoint.get("lg", "down") {
-      padding: space.get("xlarge") space.get("large");
-    }
-
-    @include breakpoint.get("sm", "down") {
-      padding: space.get("large") 10px;
+    > *:last-child {
+      margin-bottom: 0;
     }
   }
 
   @include breakpoint.get("lg", "down") {
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    gap: convert.to-rem(30px);
   }
 
   @include breakpoint.get("sm", "down") {
-    padding: 15px;
+    padding: convert.to-rem(15px);
   }
 }
 
 @mixin image {
   padding: 0 !important;
-  img {
-    width: 80px;
-    height: 80px;
-    object-fit: cover;
-    margin: 0 space.get("large") !important;
+  flex-shrink: 0;
 
-    &.is-large {
-      width: 100%;
-      height: auto;
-      object-fit: cover;
-      object-position: left center;
-      margin: 0px !important;
-
-      @include breakpoint.get("xl", "down") {
-        height: 100%;
-      }
-
-      @include breakpoint.get("sm", "down") {
-        height: auto;
-      }
-    }
+  img,
+  svg {
+    max-height: convert.to-rem(120px);
+    object-fit: cover;
+    margin: space.get("large") 0 space.get("large") space.get("large") !important;
 
     @include breakpoint.get("sm", "down") {
-      margin: 15px !important;
+      margin: convert.to-rem(15px) 0 convert.to-rem(15px) convert.to-rem(15px) !important;
     }
   }
 }
@@ -91,16 +83,29 @@
 @mixin button {
   display: flex;
   align-items: center;
-  padding: 0 space.get("xlarge");
   margin: 0 !important;
+}
+
+@mixin large {
+  .body-banner__content-inner {
+    display: flex;
+    flex-direction: column;
+    padding: space.get("xlarge");
 
-  &.is-large {
-    padding: 0;
-    margin-top: space.get("small") !important;
+    @include breakpoint.get("lg", "down") {
+      padding: space.get("large");
+    }
   }
 
-  @include breakpoint.get("lg", "down") {
-    padding: 0;
-    margin-top: space.get("small") !important;
+  .body-banner__image {
+    img {
+      width: 100%;
+      height: 100%;
+      max-height: none;
+      object-fit: cover;
+      object-position: center;
+      margin: 0 !important;
+      display: block;
+    }
   }
 }

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

@@ -4,24 +4,6 @@
   .body-banner {
     @include mixins.body-banner();
 
-    &.is-gray {
-      --color-background-primary: var(--color-fill-subtle);
-      border: none !important;
-    }
-
-    &.is-orange {
-      // TODO: change to color token
-      --color-background-primary: #fff0e0;
-      border: none !important;
-    }
-
-    &.is-dark {
-      &.is-orange {
-      // TODO: change to color token
-        color: #000000 !important;
-      }
-    }
-
     &__content {
       @include mixins.content();
 
@@ -37,5 +19,9 @@
     &__button {
       @include mixins.button();
     }
+
+    &--large {
+      @include mixins.large();
+    }
   }
 }