@scality/core-ui 0.169.0 → 0.170.0

package/dist/components/buttonv2/Buttonv2.component.js

@@ -99,6 +99,7 @@ export const ButtonStyled = styled.button `
         case 'outline':
             return css `
           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};
@@ -125,7 +126,6 @@ export const ButtonStyled = styled.button `
             position: absolute;
             inset: 0;
             padding: ${spacing.r1};
-            background-image: ${brand.buttonSecondary};
             border-radius: inherit;
             mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
             mask-composite: exclude;

package/dist/components/date/FormattedDateTime.d.ts

@@ -1,17 +1,41 @@
+/**
+ * @description Long date formatter, with weekday, year, month and day. Used for describing long term date.
+ * @example Wednesday 6 October 2025
+ */
 export declare const LONG_DATE_FORMATER: Intl.DateTimeFormat;
 /**
  * @description Long date formatter, without weekday.
  * @example 01 September 2025
  */
 export declare const LONG_DATE_FORMATER_WITHOUT_WEEKDAY: Intl.DateTimeFormat;
+/**
+ * @description Date formatter, with year, month and day. Used for describing long term date.
+ * @example 2025-01-01
+ */
 export declare const DATE_FORMATER: Intl.DateTimeFormat;
+/**
+ * @description Day month formatter, with weekday, day and month. Used for describing long term date.
+ * @example Wed 6 Oct
+ */
 export declare const DAY_MONTH_FORMATER: Intl.DateTimeFormat;
+/**
+ * @description Time formatter, with hour, minute and second. Used for describing long term date.
+ * @example 18:33:00
+ */
 export declare const TIME_SECOND_FORMATER: Intl.DateTimeFormat;
+/**
+ * @description Time formatter, with hour and minute. Used for describing long term date.
+ * @example 18:33
+ */
 export declare const TIME_FORMATER: Intl.DateTimeFormat;
+/**
+ * @description Day month abbreviated hour minute second formatter. Used for describing long term date.
+ * @example 6 Oct 18:33:00
+ */
 export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND: Intl.DateTimeFormat;
 /**
- * @description Day month abbreviated hour minute formatter, without second.
- * @example 15 Sept 14:30
+ * @description Day month abbreviated hour minute formatter. Used for describing long term date.
+ * @example 6 Oct 18:33
  */
 export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE: Intl.DateTimeFormat;
 /**
@@ -28,6 +52,21 @@ type FormattedDateTimeProps = {
     format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'long-date' | 'long-date-without-weekday' | 'chart-date' | 'year-month-day' | 'month-day';
     value: Date;
 };
+/**
+ * @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 declare const FormattedDateTime: ({ format, value, }: FormattedDateTimeProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FormattedDateTime.d.ts.map

package/dist/components/date/FormattedDateTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kCAAkC,qBAI7C,CAAC;AAEH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,qBAInC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qBAG9B,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,WAAW,GACX,2BAA2B,GAC3B,YAAY,GACZ,gBAAgB,GAChB,WAAW,CAAC;IAEhB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CA2HxB,CAAC"}
+{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kCAAkC,qBAI7C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,qBAInC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qBAG9B,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,WAAW,GACX,2BAA2B,GAC3B,YAAY,GACZ,gBAAgB,GAChB,WAAW,CAAC;IAEhB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CAsIxB,CAAC"}

package/dist/components/date/FormattedDateTime.js

@@ -1,11 +1,15 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 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.
@@ -16,30 +20,50 @@ export const LONG_DATE_FORMATER_WITHOUT_WEEKDAY = Intl.DateTimeFormat('en-GB', {
     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',
     day: '2-digit',
     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',
     minute: '2-digit',
     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',
@@ -47,11 +71,11 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat('en-
     hour12: false,
 });
 /**
- * @description Day month abbreviated hour minute formatter, without second.
- * @example 15 Sept 14:30
+ * @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',
@@ -82,6 +106,21 @@ const isItFutureOrIsItPast = (timeDiff, stringToBeFormatted) => {
         return `in ${stringToBeFormatted}`;
     }
 };
+/**
+ * @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, }) => {
     switch (format) {
         case 'date':
@@ -116,15 +155,23 @@ export const FormattedDateTime = ({ format, value, }) => {
             }
             return (_jsx(Tooltip, { overlay: _jsx(FormattedDateTime, { format: "date-time-second", value: value }), children: "few seconds ago" }));
         case 'day-month-abbreviated-hour-minute':
-            return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(value).replace(',', '') }));
+            return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_HOUR_MINUTE.format(value)
+                    .replace(',', '')
+                    .replace(/Sept/g, 'Sep') }));
         case 'day-month-abbreviated-hour-minute-second':
-            return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value).replace(',', '') }));
+            return (_jsx(_Fragment, { children: 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 _jsx(_Fragment, { children: LONG_DATE_FORMATER.format(value) });
         case 'long-date-without-weekday':
             return _jsx(_Fragment, { children: LONG_DATE_FORMATER_WITHOUT_WEEKDAY.format(value) });
         case 'chart-date':
-            return _jsx(_Fragment, { children: DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '') });
+            return (_jsx(_Fragment, { children: 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 _jsx(_Fragment, { children: YEAR_MONTH_DAY_FORMATTER.format(value) });
         case 'month-day':

package/dist/components/date/FormattedDateTime.spec.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import { FormattedDateTime } from './FormattedDateTime';
 import userEvent from '@testing-library/user-event';
@@ -141,12 +141,21 @@ describe('FormatttedDateTime', () => {
         //S
         render(_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute", value: new Date('2022-10-06T18:33:00Z') }));
         //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', () => {
         //S
         render(_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute-second", value: new Date('2022-10-06T18:33:00Z') }));
         //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(_jsxs(_Fragment, { children: [_jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute", value: new Date('2022-09-06T18:33:00Z') }), _jsx(FormattedDateTime, { format: "day-month-abbreviated-hour-minute-second", value: new Date('2022-09-06T18:33:00Z') }), _jsx(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/dist/components/layout/v2/index.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
-export declare function Layout({ children: app, headerNavigation, }: {
+export declare function Layout({ children: app, headerNavigation, variant, }: {
     children: ReactElement | ReactElement[];
     headerNavigation: ReactElement;
+    variant?: 'transparent';
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/layout/v2/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/v2/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAgBrC,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EAAE,GAAG,EACb,gBAAgB,GACjB,EAAE;IACD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,gBAAgB,EAAE,YAAY,CAAC;CAChC,2CAOA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/v2/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAgBrC,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EAAE,GAAG,EACb,gBAAgB,EAChB,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,gBAAgB,EAAE,YAAY,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB,2CAOA"}

package/dist/components/layout/v2/index.js

@@ -6,11 +6,11 @@ const LayoutContainer = styled.div `
   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 `
   height: ${navbarHeight};
 `;
-export function Layout({ children: app, headerNavigation, }) {
-    return (_jsxs(LayoutContainer, { className: "layout-container", children: [_jsx(Navigation, { children: headerNavigation }), app] }));
+export function Layout({ children: app, headerNavigation, variant, }) {
+    return (_jsxs(LayoutContainer, { className: "layout-container", variant: variant, children: [_jsx(Navigation, { children: headerNavigation }), app] }));
 }

package/dist/style/theme.js

@@ -121,7 +121,7 @@ export const coreUIAvailableThemes = {
         selectedActive: '#037AFF',
         highlight: '#1A3C75',
         border: '#4A4A4A',
-        buttonPrimary: 'linear-gradient(130deg, #9355E7 0%, #2E4AA3 100%)',
+        buttonPrimary: 'linear-gradient(130deg, #9355E7 0%, #2E4AA3 60%)',
         buttonSecondary: 'linear-gradient(130deg, #595A78 0%, #44455F 100%)',
         buttonDelete: '#3D0808',
         infoPrimary: '#8E8EAC',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.169.0",
+  "version": "0.170.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",

package/src/lib/components/barchartv2/ChartTooltip.test.tsx

@@ -27,7 +27,7 @@ describe('ChartTooltip', () => {
     successValue: () => screen.queryByText(SUCCESS_VALUE),
     failed: () => screen.queryByText(/Failed/),
     failedValue: () => screen.queryByText(FAILED_VALUE),
-    date: () => screen.queryByText(/Monday, 1 July 2024/),
+    date: () => screen.queryByText(/Monday, 01 July 2024/),
     time: () => screen.queryByText(/00:00/),
   };
   it('should render the ChartTooltip component', () => {

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

@@ -118,6 +118,7 @@ export const ButtonStyled = styled.button<Props>`
       case 'outline':
         return css`
           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};
@@ -144,7 +145,6 @@ export const ButtonStyled = styled.button<Props>`
             position: absolute;
             inset: 0;
             padding: ${spacing.r1};
-            background-image: ${brand.buttonSecondary};
             border-radius: inherit;
             mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
             mask-composite: exclude;

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,11 +1,15 @@
 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',
 });
 
 /**
@@ -18,6 +22,10 @@ export const LONG_DATE_FORMATER_WITHOUT_WEEKDAY = Intl.DateTimeFormat('en-GB', {
   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',
@@ -25,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',
@@ -38,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',
@@ -57,11 +81,11 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
 );
 
 /**
- * @description Day month abbreviated hour minute formatter, without second.
- * @example 15 Sept 14:30
+ * @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',
@@ -117,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,
@@ -219,15 +258,19 @@ 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':
@@ -235,7 +278,14 @@ export const FormattedDateTime = ({
     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':

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>

package/src/lib/style/theme.ts

@@ -150,7 +150,7 @@ export const coreUIAvailableThemes: Record<CoreUIThemeName, CoreUITheme> = {
     selectedActive: '#037AFF',
     highlight: '#1A3C75',
     border: '#4A4A4A',
-    buttonPrimary: 'linear-gradient(130deg, #9355E7 0%, #2E4AA3 100%)',
+    buttonPrimary: 'linear-gradient(130deg, #9355E7 0%, #2E4AA3 60%)',
     buttonSecondary: 'linear-gradient(130deg, #595A78 0%, #44455F 100%)',
     buttonDelete: '#3D0808',
     infoPrimary: '#8E8EAC',

package/stories/formattedate.stories.tsx

@@ -24,6 +24,13 @@ export const FormattedDate = {
               'time' as const,
               'time-second' as const,
               'relative' as const,
+              'day-month-abbreviated-hour-minute' as const,
+              'day-month-abbreviated-hour-minute-second' as const,
+              'long-date' as const,
+              'long-date-without-weekday' as const,
+              'chart-date' as const,
+              'year-month-day' as const,
+              'month-day' as const,
             ].map((format) => (
               <tr key={format}>
                 <td>{format}</td>

package/stories/layout.stories.tsx

@@ -123,6 +123,25 @@ export const Layout2MainContentOnly = {
   ),
 };
 
+export const Layout2TransparentBackground = {
+  render: () => (
+    <Layout2
+      variant='transparent'
+      headerNavigation={
+        <HeaderComponent>
+          <h3>Header navigation</h3>
+        </HeaderComponent>
+      }
+    >
+      <AppContainer>
+        <AppContainer.MainContent hasTopMargin>
+          Main content
+        </AppContainer.MainContent>
+      </AppContainer>
+    </Layout2>
+  ),
+};
+
 export const Layout2OverallSummaryAndMainContent = {
   render: () => (
     <Layout2