@scality/core-ui 0.123.0 → 0.125.0

package/dist/components/emptystate/Emptystate.component.d.ts

@@ -1,14 +1,13 @@
 /// <reference types="react" />
 import { IconName } from '../icon/Icon.component';
 import { CoreUITheme } from '../../style/theme';
-type Props = {
+export type Props = {
     listedResource: {
         singular: string;
         plural: string;
     };
     icon: IconName;
     link?: string;
-    history?: Record<string, any>;
     backgroundColor?: keyof CoreUITheme;
     /**
      * The resource to create before browsing the listed resource

package/dist/components/emptystate/Emptystate.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Emptystate.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/emptystate/Emptystate.component.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,KAAK,KAAK,GAAG;IACX,cAAc,EAAE;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,WAAW,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAgBF,eAAO,MAAM,aAAa,yGAIzB,CAAC;AACF,eAAO,MAAM,aAAa,yGAGzB,CAAC;AAEF,iBAAS,UAAU,CAAC,KAAK,EAAE,KAAK,eAwC/B;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"Emptystate.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/emptystate/Emptystate.component.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAQ,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,MAAM,KAAK,GAAG;IAClB,cAAc,EAAE;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,WAAW,CAAC;IACpC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAgBF,eAAO,MAAM,aAAa,yGAIzB,CAAC;AACF,eAAO,MAAM,aAAa,yGAGzB,CAAC;AAEF,iBAAS,UAAU,CAAC,KAAK,EAAE,KAAK,eAmC/B;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/emptystate/Emptystate.component.js

@@ -4,6 +4,7 @@ import { spacing } from '../../spacing';
 import { Button } from '../buttonv2/Buttonv2.component';
 import { Icon } from '../icon/Icon.component';
 import { LargeText } from '../text/Text.component';
+import { useHistory } from 'react-router';
 const EmptystateContainer = styled.div `
   ${(props) => {
     const { theme, backgroundColor } = props;
@@ -29,9 +30,10 @@ export const ActionWrapper = styled.div `
   justify-content: space-around;
 `;
 function EmptyState(props) {
-    const { icon, listedResource, link, history, resourceToCreate, backgroundColor, } = props;
+    const { icon, listedResource, link, resourceToCreate, backgroundColor } = props;
+    const history = useHistory();
     return (_jsxs(EmptystateContainer, { className: "sc-emptystate", backgroundColor: backgroundColor, children: [_jsx(EmptyStateRow, { children: _jsx(Icon, { name: icon, color: "infoPrimary", size: "5x", withWrapper: true }) }), _jsx(EmptyStateRow, { children: _jsx(LargeText, { children: `A list of ${listedResource.plural} will appear here.` }) }), _jsx(EmptyStateRow, { children: _jsx(LargeText, { children: !resourceToCreate
                         ? `There are no ${listedResource.plural} created yet, let's create your first ${listedResource.singular}.`
-                        : `Before browsing your ${listedResource.plural}, create your first ${resourceToCreate}.` }) }), history && (_jsx(ActionWrapper, { children: _jsx(Button, { label: `Create ${resourceToCreate || listedResource.singular}`, icon: _jsx(Icon, { name: "Create-add" }), type: "button", variant: "primary", onClick: () => history.push(link) }) }))] }));
+                        : `Before browsing your ${listedResource.plural}, create your first ${resourceToCreate}.` }) }), link && (_jsx(ActionWrapper, { children: _jsx(Button, { label: `Create ${resourceToCreate || listedResource.singular}`, icon: _jsx(Icon, { name: "Create-add" }), type: "button", variant: "primary", onClick: () => history.push(link) }) }))] }));
 }
 export { EmptyState };

package/dist/components/icon/Icon.component.d.ts

@@ -116,6 +116,9 @@ export declare const iconTable: {
     Eraser: string;
     'ID-card': string;
     Setting: string;
+    Desktop: string;
+    Globe: string;
+    Satellite: string;
 };
 export type IconName = keyof typeof iconTable;
 export type IconColor = keyof CoreUITheme;

package/dist/components/icon/Icon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHrB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAkEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Icon.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/icon/Icon.component.tsx"],"names":[],"mappings":"AAAA,OAAc,EACZ,aAAa,EAKd,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAG7D,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsHrB,CAAC;AAaF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC;AAC9C,MAAM,MAAM,SAAS,GAAG,MAAM,WAAW,CAAC;AAC1C,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAiBF,eAAO,MAAM,WAAW;UAAsB,QAAQ;SAiCrD,CAAC;AAkEF,iBAAS,IAAI,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,eAU7C;AAED,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/icon/Icon.component.js

@@ -119,6 +119,9 @@ export const iconTable = {
     Eraser: 'fas faEraser',
     'ID-card': 'fas faIdCard',
     Setting: 'fas faCog', //TODO: Rename to Gear in FA v6 <i class="fa-sharp fa-solid fa-gear"></i>
+    Desktop: 'fas faDesktop',
+    Globe: 'fas faGlobe',
+    Satellite: 'fas faSatelliteDish',
 };
 const IconStyled = styled(FontAwesomeIcon) `
   ${(props) => {

package/dist/components/inputv2/inputv2.d.ts

@@ -12,8 +12,8 @@ export type InputProps = {
 export declare const Input: import("react").ForwardRefExoticComponent<{
     error?: string | undefined;
     id: string;
-    leftIcon?: "Account" | "Backend" | "Tape" | "Node-backend" | "Volume-backend" | "Node-pdf" | "Volume-pdf" | "Network" | "Bucket" | "Cloud-backend" | "Datacenter" | "Simple-user" | "User" | "Group" | "Alert" | "Bell" | "Lat-menu" | "Dashboard" | "Workflow" | "Expiration" | "Replication" | "Transition" | "Discovery" | "Metrics" | "Edit" | "Logs" | "Lock" | "Lock-open" | "Create-add" | "Delete" | "Save" | "External-link" | "Link" | "Unlink" | "Close" | "Dropdown-down" | "Dropdown-up" | "Search" | "More" | "Info" | "Sync" | "Export" | "Copy" | "Simple-upload" | "Upload" | "Add-plus" | "Minus" | "Remove-minus" | "Sort" | "Sort-up" | "Sort-down" | "Calendar" | "Calendar-minus" | "Arrow-up" | "Arrow-down" | "Arrow-right" | "Arrow-left" | "Arrow-alt-circle-up" | "Folder" | "File" | "File-invoice" | "Deletion-marker" | "Map-marker" | "Location" | "Info-circle" | "Exclamation-triangle" | "Exclamation-circle" | "Exclamation" | "Check" | "Protected" | "Chevron-left" | "Chevron-right" | "Chevron-down" | "Chevron-up" | "Angle-right" | "Angle-double-right" | "Language" | "Theme" | "Documentation" | "Support" | "EULA" | "Log-out" | "Hourglass" | "Pause" | "Pause-circle" | "Play-circle" | "Upgrade" | "Expansion" | "Rebalance" | "Maintenance" | "Role" | "Change-erasure" | "Circle-health" | "Circle-empty" | "Dot-circle" | "Check-circle" | "Times-circle" | "Toolbox" | "Cubes" | "File-alt" | "Policy" | "Pen" | "Pencil" | "Eye" | "EyeSlash" | "Snowflake" | "Key" | "Filter" | "Download" | "Certificate" | "Redo" | "Eraser" | "ID-card" | "Setting" | undefined;
-    rightIcon?: "Account" | "Backend" | "Tape" | "Node-backend" | "Volume-backend" | "Node-pdf" | "Volume-pdf" | "Network" | "Bucket" | "Cloud-backend" | "Datacenter" | "Simple-user" | "User" | "Group" | "Alert" | "Bell" | "Lat-menu" | "Dashboard" | "Workflow" | "Expiration" | "Replication" | "Transition" | "Discovery" | "Metrics" | "Edit" | "Logs" | "Lock" | "Lock-open" | "Create-add" | "Delete" | "Save" | "External-link" | "Link" | "Unlink" | "Close" | "Dropdown-down" | "Dropdown-up" | "Search" | "More" | "Info" | "Sync" | "Export" | "Copy" | "Simple-upload" | "Upload" | "Add-plus" | "Minus" | "Remove-minus" | "Sort" | "Sort-up" | "Sort-down" | "Calendar" | "Calendar-minus" | "Arrow-up" | "Arrow-down" | "Arrow-right" | "Arrow-left" | "Arrow-alt-circle-up" | "Folder" | "File" | "File-invoice" | "Deletion-marker" | "Map-marker" | "Location" | "Info-circle" | "Exclamation-triangle" | "Exclamation-circle" | "Exclamation" | "Check" | "Protected" | "Chevron-left" | "Chevron-right" | "Chevron-down" | "Chevron-up" | "Angle-right" | "Angle-double-right" | "Language" | "Theme" | "Documentation" | "Support" | "EULA" | "Log-out" | "Hourglass" | "Pause" | "Pause-circle" | "Play-circle" | "Upgrade" | "Expansion" | "Rebalance" | "Maintenance" | "Role" | "Change-erasure" | "Circle-health" | "Circle-empty" | "Dot-circle" | "Check-circle" | "Times-circle" | "Toolbox" | "Cubes" | "File-alt" | "Policy" | "Pen" | "Pencil" | "Eye" | "EyeSlash" | "Snowflake" | "Key" | "Filter" | "Download" | "Certificate" | "Redo" | "Eraser" | "ID-card" | "Setting" | undefined;
+    leftIcon?: "Account" | "Backend" | "Tape" | "Node-backend" | "Volume-backend" | "Node-pdf" | "Volume-pdf" | "Network" | "Bucket" | "Cloud-backend" | "Datacenter" | "Simple-user" | "User" | "Group" | "Alert" | "Bell" | "Lat-menu" | "Dashboard" | "Workflow" | "Expiration" | "Replication" | "Transition" | "Discovery" | "Metrics" | "Edit" | "Logs" | "Lock" | "Lock-open" | "Create-add" | "Delete" | "Save" | "External-link" | "Link" | "Unlink" | "Close" | "Dropdown-down" | "Dropdown-up" | "Search" | "More" | "Info" | "Sync" | "Export" | "Copy" | "Simple-upload" | "Upload" | "Add-plus" | "Minus" | "Remove-minus" | "Sort" | "Sort-up" | "Sort-down" | "Calendar" | "Calendar-minus" | "Arrow-up" | "Arrow-down" | "Arrow-right" | "Arrow-left" | "Arrow-alt-circle-up" | "Folder" | "File" | "File-invoice" | "Deletion-marker" | "Map-marker" | "Location" | "Info-circle" | "Exclamation-triangle" | "Exclamation-circle" | "Exclamation" | "Check" | "Protected" | "Chevron-left" | "Chevron-right" | "Chevron-down" | "Chevron-up" | "Angle-right" | "Angle-double-right" | "Language" | "Theme" | "Documentation" | "Support" | "EULA" | "Log-out" | "Hourglass" | "Pause" | "Pause-circle" | "Play-circle" | "Upgrade" | "Expansion" | "Rebalance" | "Maintenance" | "Role" | "Change-erasure" | "Circle-health" | "Circle-empty" | "Dot-circle" | "Check-circle" | "Times-circle" | "Toolbox" | "Cubes" | "File-alt" | "Policy" | "Pen" | "Pencil" | "Eye" | "EyeSlash" | "Snowflake" | "Key" | "Filter" | "Download" | "Certificate" | "Redo" | "Eraser" | "ID-card" | "Setting" | "Desktop" | "Globe" | "Satellite" | undefined;
+    rightIcon?: "Account" | "Backend" | "Tape" | "Node-backend" | "Volume-backend" | "Node-pdf" | "Volume-pdf" | "Network" | "Bucket" | "Cloud-backend" | "Datacenter" | "Simple-user" | "User" | "Group" | "Alert" | "Bell" | "Lat-menu" | "Dashboard" | "Workflow" | "Expiration" | "Replication" | "Transition" | "Discovery" | "Metrics" | "Edit" | "Logs" | "Lock" | "Lock-open" | "Create-add" | "Delete" | "Save" | "External-link" | "Link" | "Unlink" | "Close" | "Dropdown-down" | "Dropdown-up" | "Search" | "More" | "Info" | "Sync" | "Export" | "Copy" | "Simple-upload" | "Upload" | "Add-plus" | "Minus" | "Remove-minus" | "Sort" | "Sort-up" | "Sort-down" | "Calendar" | "Calendar-minus" | "Arrow-up" | "Arrow-down" | "Arrow-right" | "Arrow-left" | "Arrow-alt-circle-up" | "Folder" | "File" | "File-invoice" | "Deletion-marker" | "Map-marker" | "Location" | "Info-circle" | "Exclamation-triangle" | "Exclamation-circle" | "Exclamation" | "Check" | "Protected" | "Chevron-left" | "Chevron-right" | "Chevron-down" | "Chevron-up" | "Angle-right" | "Angle-double-right" | "Language" | "Theme" | "Documentation" | "Support" | "EULA" | "Log-out" | "Hourglass" | "Pause" | "Pause-circle" | "Play-circle" | "Upgrade" | "Expansion" | "Rebalance" | "Maintenance" | "Role" | "Change-erasure" | "Circle-health" | "Circle-empty" | "Dot-circle" | "Check-circle" | "Times-circle" | "Toolbox" | "Cubes" | "File-alt" | "Policy" | "Pen" | "Pencil" | "Eye" | "EyeSlash" | "Snowflake" | "Key" | "Filter" | "Download" | "Certificate" | "Redo" | "Eraser" | "ID-card" | "Setting" | "Desktop" | "Globe" | "Satellite" | undefined;
     size?: InputSize | undefined;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=inputv2.d.ts.map

package/dist/components/textbadge/TextBadge.component.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
+type TextBadgeVariant = 'statusHealthy' | 'statusWarning' | 'statusCritical' | 'infoPrimary' | 'infoSecondary' | 'selectedActive';
 type Props = {
     text: string;
     className?: string;
-    variant?: 'statusHealthy' | 'statusWarning' | 'statusCritical' | 'infoPrimary' | 'infoSecondary';
+    variant?: TextBadgeVariant;
 };
 export declare function TextBadge({ text, variant, className, ...rest }: Props): JSX.Element;
 export {};

package/dist/components/textbadge/TextBadge.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextBadge.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/textbadge/TextBadge.component.tsx"],"names":[],"mappings":";AAkBA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EACJ,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,aAAa,GACb,eAAe,CAAC;CACrB,CAAC;AACF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,OAAuB,EACvB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eAUP"}
+{"version":3,"file":"TextBadge.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/textbadge/TextBadge.component.tsx"],"names":[],"mappings":";AAIA,KAAK,gBAAgB,GACjB,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,aAAa,GACb,eAAe,GACf,gBAAgB,CAAC;AAerB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B,CAAC;AACF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,OAAuB,EACvB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eAUP"}

package/dist/components/textbadge/TextBadge.component.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-nocheck
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontWeight } from '../../style/theme';

package/package.json

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

package/src/lib/components/emptystate/Emptystate.component.tsx

@@ -1,18 +1,18 @@
 import styled, { css } from 'styled-components';
-
 import { spacing } from '../../spacing';
 import { Button } from '../buttonv2/Buttonv2.component';
 import { Icon, IconName } from '../icon/Icon.component';
 import { LargeText } from '../text/Text.component';
 import { CoreUITheme } from '../../style/theme';
-type Props = {
+import { useHistory } from 'react-router';
+
+export type Props = {
   listedResource: {
     singular: string;
     plural: string;
   };
   icon: IconName;
   link?: string;
-  history?: Record<string, any>;
   backgroundColor?: keyof CoreUITheme;
   /**
    * The resource to create before browsing the listed resource
@@ -46,14 +46,9 @@ export const ActionWrapper = styled.div`
 `;
 
 function EmptyState(props: Props) {
-  const {
-    icon,
-    listedResource,
-    link,
-    history,
-    resourceToCreate,
-    backgroundColor,
-  } = props;
+  const { icon, listedResource, link, resourceToCreate, backgroundColor } =
+    props;
+  const history = useHistory();
   return (
     <EmptystateContainer
       className="sc-emptystate"
@@ -72,7 +67,7 @@ function EmptyState(props: Props) {
             : `Before browsing your ${listedResource.plural}, create your first ${resourceToCreate}.`}
         </LargeText>
       </EmptyStateRow>
-      {history && (
+      {link && (
         <ActionWrapper>
           <Button
             label={`Create ${resourceToCreate || listedResource.singular}`}

package/src/lib/components/icon/Icon.component.tsx

@@ -128,6 +128,9 @@ export const iconTable = {
   Eraser: 'fas faEraser',
   'ID-card': 'fas faIdCard',
   Setting: 'fas faCog', //TODO: Rename to Gear in FA v6 <i class="fa-sharp fa-solid fa-gear"></i>
+  Desktop: 'fas faDesktop',
+  Globe: 'fas faGlobe',
+  Satellite: 'fas faSatelliteDish',
 };
 
 const IconStyled = styled(FontAwesomeIcon)`

package/src/lib/components/textbadge/TextBadge.component.tsx

@@ -1,9 +1,16 @@
-// @ts-nocheck
 import styled from 'styled-components';
 import { spacing } from '../../spacing';
 import { fontWeight } from '../../style/theme';
 
-const StyledTextBadge = styled.span`
+type TextBadgeVariant =
+  | 'statusHealthy'
+  | 'statusWarning'
+  | 'statusCritical'
+  | 'infoPrimary'
+  | 'infoSecondary'
+  | 'selectedActive';
+
+const StyledTextBadge = styled.span<{ variant: TextBadgeVariant }>`
   ${({ theme, variant }) => `
       background-color: ${theme[variant]};
       color: ${
@@ -19,12 +26,7 @@ const StyledTextBadge = styled.span`
 type Props = {
   text: string;
   className?: string;
-  variant?:
-    | 'statusHealthy'
-    | 'statusWarning'
-    | 'statusCritical'
-    | 'infoPrimary'
-    | 'infoSecondary';
+  variant?: TextBadgeVariant;
 };
 export function TextBadge({
   text,

package/stories/emptystate.stories.tsx

@@ -1,21 +1,28 @@
-import { EmptyState } from '../src/lib/components/emptystate/Emptystate.component';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  EmptyState,
+  Props,
+} from '../src/lib/components/emptystate/Emptystate.component';
+type Story = StoryObj<Props>;
 
-export default {
+const meta: Meta<Props> = {
   title: 'Components/Data Display/EmptyState',
   component: EmptyState,
   args: {
     icon: 'Node-backend',
-    label: 'Node',
+    listedResource: {
+      singular: 'resource',
+      plural: 'resources',
+    },
   },
 };
 
-export const Default = {};
+export default meta;
+
+export const Default: Story = {};
 
-export const WithLink = {
+export const WithLink: Story = {
   args: {
     link: '',
-    history: {
-      push: () => {},
-    },
   },
 };