@scality/core-ui 0.123.0 → 0.124.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.123.0",
+  "version": "0.124.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/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: () => {},
-    },
   },
 };