diff --git a/CHANGELOG.md b/CHANGELOG.md index 67d2ed085..0dbbc20b9 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 7b7ca0db6..09158f291 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@teamleader/ui", "description": "Teamleader UI library", - "version": "18.0.0", + "version": "18.1.0", "author": "Teamleader ", "bugs": { "url": "https://github.com/teamleadercrm/ui/issues" diff --git a/src/components/detailPage/DetailPageHeader.tsx b/src/components/detailPage/DetailPageHeader.tsx index 839631cad..54f04a35a 100644 --- a/src/components/detailPage/DetailPageHeader.tsx +++ b/src/components/detailPage/DetailPageHeader.tsx @@ -12,7 +12,7 @@ import theme from './theme.css'; export interface DetailPageHeaderProps extends Omit { children?: ReactNode; - backLinkProps?: Omit & { children: ReactNode }; + backLinkProps?: Omit & { children: ReactNode }; title: React.ReactNode; /** The color which the title should have */ titleColor?: 'neutral' | 'teal'; diff --git a/src/components/emptyState/EmptyState.tsx b/src/components/emptyState/EmptyState.tsx index ff45656db..7f17ea7c9 100644 --- a/src/components/emptyState/EmptyState.tsx +++ b/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 { hidePointer?: boolean; metaText?: ReactNode | string; size?: Exclude; title?: ReactNode | string; + action?: Omit & { children: ReactNode }; } const illustrationMap = { @@ -31,6 +34,7 @@ const EmptyState: GenericComponent = ({ hidePointer = false, size = 'medium', title, + action, ...others }) => { const classNames = cx( @@ -60,6 +64,11 @@ const EmptyState: GenericComponent = ({ {metaText} )} + {action && ( + + } inherit={false} /> + + )} ); diff --git a/src/components/emptyState/emptyState.stories.tsx b/src/components/emptyState/emptyState.stories.tsx index a01ef1929..dced59af8 100644 --- a/src/components/emptyState/emptyState.stories.tsx +++ b/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 = (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: Start adding content, + onClick: () => console.log('action.onClick'), + }, +};