Merge pull request #2475 from teamleadercrm/empty-state-badged-link-a…

…ction

Add a `BadgedLink` action to `EmptyState`

CHANGELOG.md

@@ -12,6 +12,12 @@
 
 ### Dependency updates
 
+## [18.1.0] - 2022-12-05
+
+### Added
+
+- `EmptyState`: Add an action prop that renders a `BadgedLink` ([@BeirlaenAaron](https://github.com/BeirlaenAaron)) in ([#2475](https://github.com/teamleadercrm/ui/pull/2475))
+
 ## [18.0.0] - 2022-11-29
 
 ### Changed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teamleader/ui",
   "description": "Teamleader UI library",
-  "version": "18.0.0",
+  "version": "18.1.0",
   "author": "Teamleader <[email protected]>",
   "bugs": {
     "url": "https://github.com/teamleadercrm/ui/issues"

src/components/detailPage/DetailPageHeader.tsx

@@ -12,7 +12,7 @@ import theme from './theme.css';
 
 export interface DetailPageHeaderProps extends Omit<ContainerProps, 'title'> {
   children?: ReactNode;
-  backLinkProps?: Omit<BadgedLinkProps, 'icon' | 'inheric'> & { children: ReactNode };
+  backLinkProps?: Omit<BadgedLinkProps, 'icon' | 'inherit'> & { children: ReactNode };
   title: React.ReactNode;
   /** The color which the title should have */
   titleColor?: 'neutral' | 'teal';

src/components/emptyState/EmptyState.tsx

@@ -11,12 +11,15 @@ import theme from './theme.css';
 import { BoxProps } from '../box/Box';
 import { GenericComponent } from '../../@types/types';
 import { SIZES } from '../../constants';
+import BadgedLink, { BadgedLinkProps } from '../badgedLink';
+import { IconAddSmallOutline } from '@teamleader/ui-icons';
 
 export interface EmptyStateProps extends Omit<BoxProps, 'size'> {
   hidePointer?: boolean;
   metaText?: ReactNode | string;
   size?: Exclude<typeof SIZES[number], 'tiny' | 'fullscreen' | 'smallest' | 'hero'>;
   title?: ReactNode | string;
+  action?: Omit<BadgedLinkProps, 'icon' | 'inherit'> & { children: ReactNode };
 }
 
 const illustrationMap = {
@@ -31,6 +34,7 @@ const EmptyState: GenericComponent<EmptyStateProps> = ({
   hidePointer = false,
   size = 'medium',
   title,
+  action,
   ...others
 }) => {
   const classNames = cx(
@@ -60,6 +64,11 @@ const EmptyState: GenericComponent<EmptyStateProps> = ({
             {metaText}
           </TextBody>
         )}
+        {action && (
+          <Box marginTop={3}>
+            <BadgedLink {...action} icon={<IconAddSmallOutline />} inherit={false} />
+          </Box>
+        )}
       </div>
     </Box>
   );

src/components/emptyState/emptyState.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { addStoryInGroup, MID_LEVEL_BLOCKS } from '../../../.storybook/utils';
 import EmptyState from './EmptyState';
-import { Marker } from '../typography';
+import { Marker, TextBodyCompact } from '../typography';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 const title = (
@@ -35,3 +35,15 @@ WithTitle.args = {
     'I am the meta information and I basically explain that you can start adding content via the add button above.',
   title,
 };
+
+export const WithAction: ComponentStory<typeof EmptyState> = (args) => <EmptyState {...args} />;
+
+WithAction.args = {
+  metaText:
+    'I am the meta information and I basically explain that you can start adding content via the add button above.',
+  title,
+  action: {
+    children: <TextBodyCompact>Start adding content</TextBodyCompact>,
+    onClick: () => console.log('action.onClick'),
+  },
+};