@scality/core-ui 0.168.0 → 0.170.0

package/src/lib/components/barchartv2/utils.test.ts

@@ -4,9 +4,9 @@ import {
   computeUnitLabelAndRoundReferenceValue,
   filterChartDataAndBarsByLegendSelection,
   formatPrometheusDataToRechartsDataAndBars,
+  getCurrentPoint,
   getMaxBarValue,
   getRoundReferenceValue,
-  renderTooltipContent,
   sortStackedBars,
   transformCategoryData,
   transformTimeData,
@@ -770,53 +770,38 @@ describe('sortStackedBars', () => {
   });
 });
 
-describe('renderTooltipContent', () => {
-  it('should return null when active is false', () => {
-    const props = {
-      active: false,
-      payload: [],
-      label: 'test',
-      coordinate: { x: 0, y: 0 },
-      accessibilityLayer: false,
-    };
-    const result = renderTooltipContent(props, undefined, undefined);
-    expect(result).toBeNull();
-  });
-
-  it('should return null when tooltip is undefined', () => {
-    const props = {
-      active: true,
-      payload: [{ name: 'test', value: 10 }],
-      label: 'test',
-      coordinate: { x: 0, y: 0 },
-      accessibilityLayer: false,
-    };
-    const result = renderTooltipContent(props, undefined, 'test');
-    expect(result).toBeNull();
-  });
-  it('should call tooltip with the correct props', () => {
-    const tooltip = jest.fn();
-    const props = {
-      active: true,
-      payload: [
-        { name: 'Success', value: 10 },
-        { name: 'Failed', value: 20 },
-      ],
-      label: 'Test',
-      coordinate: { x: 0, y: 0 },
-      accessibilityLayer: false,
-    };
-    renderTooltipContent(props, tooltip, 'Success');
-    expect(tooltip).toHaveBeenCalledWith({
+describe('getCurrentPoint', () => {
+  it('should return the current point', () => {
+    const result = getCurrentPoint(
+      {
+        payload: [{ name: 'Success', value: 10 }],
+        label: 'Test',
+        coordinate: { x: 10, y: 10 },
+        active: true,
+        accessibilityLayer: false,
+      },
+      'Success',
+    );
+    expect(result).toEqual({
+      category: 'Test',
+      values: [{ label: 'Success', value: 10, isHovered: true }],
+    });
+    const result2 = getCurrentPoint(
+      {
+        payload: [{ name: 'Success', value: 10 }],
+        label: 'Test',
+        coordinate: { x: 10, y: 10 },
+        active: true,
+        accessibilityLayer: false,
+      },
+      'Failed',
+    );
+    expect(result2).toEqual({
       category: 'Test',
-      values: [
-        { label: 'Success', value: 10, isHovered: true },
-        { label: 'Failed', value: 20, isHovered: false },
-      ],
+      values: [{ label: 'Success', value: 10, isHovered: false }],
     });
   });
 });
-
 describe('filterChartDataAndBarsByLegendSelection', () => {
   const mockChartData = [
     { category: 'Jan', Success: 10, Failed: 5, Warning: 3, Pending: 2 },

package/src/lib/components/barchartv2/utils.ts

@@ -428,35 +428,6 @@ export const sortStackedBars = (
   return barAverages.map(({ average, ...bar }) => bar);
 };
 
-export const renderTooltipContent = <T extends BarchartBars>(
-  props: TooltipContentProps<number, string>,
-  tooltip: BarchartTooltipFn<T> | undefined,
-  hoveredValue: string | undefined,
-) => {
-  const { active, payload, label } = props;
-
-  if (!active || !tooltip) {
-    return null;
-  }
-
-  const tooltipValues: {
-    label: T[number]['label'];
-    value: number;
-    isHovered: boolean;
-  }[] = payload.map((item) => ({
-    label: item.name,
-    value: item.value,
-    isHovered: item.name === hoveredValue,
-  }));
-
-  const currentPoint = {
-    category: label as string | number,
-    values: tooltipValues,
-  };
-
-  return tooltip(currentPoint);
-};
-
 /**
  * Filters both chart data and recharts bars to only include selected resources from legend
  * @param data - Array of chart data objects with category and resource values
@@ -538,3 +509,25 @@ export const useChartData = <T extends BarchartBars>(
     rechartsData,
   };
 };
+
+export const getCurrentPoint = <T extends BarchartBars>(
+  props: TooltipContentProps<number, string>,
+  hoveredValue: string | undefined,
+) => {
+  const { payload, label } = props;
+
+  const tooltipValues: {
+    label: T[number]['label'];
+    value: number;
+    isHovered: boolean;
+  }[] = payload.map((item) => ({
+    label: item.name,
+    value: item.value,
+    isHovered: item.name === hoveredValue,
+  }));
+
+  return {
+    category: label as string | number,
+    values: tooltipValues,
+  };
+};

package/src/lib/components/buttonv2/Buttonv2.component.tsx

@@ -51,8 +51,10 @@ export const ButtonStyled = styled.button<Props>`
     switch (props.variant) {
       case 'primary':
         return css`
-          background-color: ${brand.buttonPrimary};
-          border: ${spacing.r1} solid ${brand.buttonPrimary};
+          background: ${brand.buttonPrimary};
+          background-clip: padding-box, border-box;
+          border: ${spacing.r1} solid transparent;
+          border-color: ${brand.buttonPrimary};
           color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
@@ -73,8 +75,10 @@ export const ButtonStyled = styled.button<Props>`
 
       case 'secondary':
         return css`
-          background-color: ${brand.buttonSecondary};
-          border: ${spacing.r1} solid ${brand.buttonSecondary};
+          background: ${brand.buttonSecondary};
+          background-clip: padding-box, border-box;
+          border: ${spacing.r1} solid transparent;
+          border-color: ${brand.buttonSecondary};
           color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
@@ -88,7 +92,8 @@ export const ButtonStyled = styled.button<Props>`
           &:active:enabled {
             cursor: pointer;
             color: ${brand.textPrimary};
-            border: ${spacing.r1} solid ${brand.buttonSecondary};
+            border: ${spacing.r1} solid transparent;
+            border-color: ${brand.buttonSecondary};
           }
         `;
 
@@ -112,13 +117,19 @@ export const ButtonStyled = styled.button<Props>`
 
       case 'outline':
         return css`
-          border: ${spacing.r1} solid ${brand.buttonSecondary};
+          border: ${spacing.r1} solid transparent;
+          border-color: ${brand.border}; // fallback for linear-gradient button themes
+          border-color: ${brand.buttonSecondary};
           background-color: transparent;
           color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
             border-color: ${brand.infoPrimary};
             color: ${brand.textPrimary};
+
+            &::before {
+              background-image: ${brand.buttonPrimary};
+            }
           }
           &:focus-visible:enabled {
             ${FocusVisibleStyle}
@@ -129,6 +140,16 @@ export const ButtonStyled = styled.button<Props>`
             border: ${spacing.r1} solid ${brand.infoSecondary};
             color: ${brand.textPrimary};
           }
+          &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            padding: ${spacing.r1};
+            border-radius: inherit;
+            mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
+            mask-composite: exclude;
+            pointer-events: none;
+          }
         `;
 
       default:

package/src/lib/components/date/FormattedDateTime.spec.tsx

@@ -224,7 +224,7 @@ describe('FormatttedDateTime', () => {
       />,
     );
     //V
-    expect(screen.getByText('6 Oct 18:33')).toBeInTheDocument();
+    expect(screen.getByText('06 Oct 18:33')).toBeInTheDocument();
   });
 
   it('should display the date in the expected format of date in the chart', () => {
@@ -236,6 +236,31 @@ describe('FormatttedDateTime', () => {
       />,
     );
     //V
-    expect(screen.getByText('6 Oct 18:33:00')).toBeInTheDocument();
+    expect(screen.getByText('06 Oct 18:33:00')).toBeInTheDocument();
+  });
+  it('should display 3 letter month for September date', () => {
+    //S
+    render(
+      <>
+        <FormattedDateTime
+          format="day-month-abbreviated-hour-minute"
+          value={new Date('2022-09-06T18:33:00Z')}
+        />
+        <FormattedDateTime
+          format="day-month-abbreviated-hour-minute-second"
+          value={new Date('2022-09-06T18:33:00Z')}
+        />
+
+        <FormattedDateTime
+          format="chart-date"
+          value={new Date('2022-09-06T18:33:00Z')}
+        />
+      </>,
+    );
+    //V
+    expect(screen.getByText(/06 Sep 18:33/)).toBeInTheDocument();
+    expect(screen.getByText(/06 Sep 18:33:00/)).toBeInTheDocument();
+    expect(screen.getByText(/Tue06Sep/)).toBeInTheDocument();
+    expect(screen.queryByText(/Sept/)).not.toBeInTheDocument();
   });
 });

package/src/lib/components/date/FormattedDateTime.tsx

@@ -1,13 +1,31 @@
 import { getDateDaysDiff } from './dateDiffer';
 import { Tooltip } from '../tooltip/Tooltip.component';
 
+/**
+ * @description Long date formatter, with weekday, year, month and day. Used for describing long term date.
+ * @example Wednesday 6 October 2025
+ */
 export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
   weekday: 'long',
   year: 'numeric',
   month: 'long',
-  day: 'numeric',
+  day: '2-digit',
+});
+
+/**
+ * @description Long date formatter, without weekday.
+ * @example 01 September 2025
+ */
+export const LONG_DATE_FORMATER_WITHOUT_WEEKDAY = Intl.DateTimeFormat('en-GB', {
+  year: 'numeric',
+  month: 'long',
+  day: '2-digit',
 });
 
+/**
+ * @description Date formatter, with year, month and day. Used for describing long term date.
+ * @example 2025-01-01
+ */
 export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
   year: 'numeric',
   month: '2-digit',
@@ -15,12 +33,20 @@ export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
   hour12: false,
 });
 
+/**
+ * @description Day month formatter, with weekday, day and month. Used for describing long term date.
+ * @example Wed 6 Oct
+ */
 export const DAY_MONTH_FORMATER = Intl.DateTimeFormat('en-GB', {
   weekday: 'short',
   day: '2-digit',
   month: 'short',
 });
 
+/**
+ * @description Time formatter, with hour, minute and second. Used for describing long term date.
+ * @example 18:33:00
+ */
 export const TIME_SECOND_FORMATER = Intl.DateTimeFormat('en-GB', {
   hour12: false,
   hour: '2-digit',
@@ -28,16 +54,24 @@ export const TIME_SECOND_FORMATER = Intl.DateTimeFormat('en-GB', {
   second: '2-digit',
 });
 
+/**
+ * @description Time formatter, with hour and minute. Used for describing long term date.
+ * @example 18:33
+ */
 export const TIME_FORMATER = Intl.DateTimeFormat('en-GB', {
   hour12: false,
   hour: '2-digit',
   minute: '2-digit',
 });
 
+/**
+ * @description Day month abbreviated hour minute second formatter. Used for describing long term date.
+ * @example 6 Oct 18:33:00
+ */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
   'en-GB',
   {
-    day: 'numeric',
+    day: '2-digit',
     month: 'short',
     hour: '2-digit',
     minute: '2-digit',
@@ -46,8 +80,12 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
   },
 );
 
+/**
+ * @description Day month abbreviated hour minute formatter. Used for describing long term date.
+ * @example 6 Oct 18:33
+ */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
-  day: 'numeric',
+  day: '2-digit',
   month: 'short',
   hour: '2-digit',
   minute: '2-digit',
@@ -64,6 +102,15 @@ export const YEAR_MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
   day: '2-digit',
 });
 
+/**
+ * @description Month day formatter, without year. Used for short term date ranges.
+ * @example 01-15
+ */
+export const MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
+  month: '2-digit',
+  day: '2-digit',
+});
+
 type FormattedDateTimeProps = {
   format:
     | 'date'
@@ -75,8 +122,10 @@ type FormattedDateTimeProps = {
     | 'day-month-abbreviated-hour-minute'
     | 'day-month-abbreviated-hour-minute-second'
     | 'long-date'
+    | 'long-date-without-weekday'
     | 'chart-date'
-    | 'year-month-day';
+    | 'year-month-day'
+    | 'month-day';
 
   value: Date;
 };
@@ -92,6 +141,21 @@ const isItFutureOrIsItPast = (
   }
 };
 
+/**
+ * @description Formats the date and time according to the format specified.
+ * @example
+ * date: '2025-01-01'
+ * 'date-time': '2025-01-01 00:00'
+ * 'date-time-second': '2025-01-01 00:00:00'
+ * time: '00:00'
+ * 'time-second': '00:00:00'
+ * relative: '1 month ago'
+ * 'day-month-abbreviated-hour-minute': '6 Oct 18:33'
+ * 'day-month-abbreviated-hour-minute-second': '6 Oct 18:33:00'
+ * 'long-date': 'Wednesday 6 October 2025'
+ * 'chart-date': '6 Oct'
+ * 'year-month-day': '2025-10-06'
+ */
 export const FormattedDateTime = ({
   format,
   value,
@@ -194,23 +258,38 @@ export const FormattedDateTime = ({
       );
     case 'day-month-abbreviated-hour-minute':
       return (
-        <>{DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(value).replace(',', '')}</>
+        <>
+          {DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(value)
+            .replace(',', '')
+            .replace(/Sept/g, 'Sep')}
+        </>
       );
     case 'day-month-abbreviated-hour-minute-second':
       return (
         <>
-          {DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value).replace(
-            ',',
-            '',
-          )}
+          {DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value)
+            .replace(',', '')
+            // replace Sept with Sep to keep 3 letter month
+            .replace(/Sept/g, 'Sep')}
         </>
       );
     case 'long-date':
       return <>{LONG_DATE_FORMATER.format(value)}</>;
+    case 'long-date-without-weekday':
+      return <>{LONG_DATE_FORMATER_WITHOUT_WEEKDAY.format(value)}</>;
     case 'chart-date':
-      return <>{DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '')}</>;
+      return (
+        <>
+          {DAY_MONTH_FORMATER.format(value)
+            .replace(/[ ,]/g, '')
+            // replace Sept with Sep to keep 3 letter month
+            .replace(/Sept/g, 'Sep')}
+        </>
+      );
     case 'year-month-day':
       return <>{YEAR_MONTH_DAY_FORMATTER.format(value)}</>;
+    case 'month-day':
+      return <>{MONTH_DAY_FORMATTER.format(value)}</>;
     default:
       return <></>;
   }

package/src/lib/components/layout/v2/index.tsx

@@ -2,12 +2,12 @@ import { ReactElement } from 'react';
 import styled from 'styled-components';
 import { navbarHeight } from '../../../style/theme';
 
-const LayoutContainer = styled.div`
+const LayoutContainer = styled.div<{ variant?: 'transparent' }>`
   display: flex;
   flex-direction: column;
   height: 100vh;
   box-sizing: border-box;
-  background: ${(props) => props.theme['backgroundLevel1']};
+  background: ${props => props.variant === 'transparent' ? 'transparent' : props.theme.backgroundLevel1};
 `;
 
 const Navigation = styled.div`
@@ -17,12 +17,14 @@ const Navigation = styled.div`
 export function Layout({
   children: app,
   headerNavigation,
+  variant,
 }: {
   children: ReactElement | ReactElement[];
   headerNavigation: ReactElement;
+  variant?: 'transparent';
 }) {
   return (
-    <LayoutContainer className="layout-container">
+    <LayoutContainer className="layout-container" variant={variant}>
       <Navigation>{headerNavigation}</Navigation>
       {app}
     </LayoutContainer>