From 06ae6861e4d6f3e6d16fe8ed6684334711d230a1 Mon Sep 17 00:00:00 2001 From: Volodymyr Koval Date: Thu, 31 Oct 2024 11:52:20 +0200 Subject: [PATCH] feat(TMC-2505): integrate status dot to tabs component --- .../Primitive/StatusBubblePrimitive.test.tsx | 12 ------ .../components/StatusBubble/StatusBubble.tsx | 27 ------------- .../src/components/StatusBubble/index.ts | 15 ------- .../variations/StatusBubbleBeta.tsx | 16 -------- .../variations/StatusBubbleError.tsx | 16 -------- .../variations/StatusBubbleInformation.tsx | 18 --------- .../variations/StatusBubbleSuccess.tsx | 18 --------- .../variations/StatusBubbleWarning.tsx | 18 --------- .../Primitive/StatusDotPrimitive.module.scss} | 2 +- .../Primitive/StatusDotPrimitive.test.tsx | 12 ++++++ .../Primitive/StatusDotPrimitive.tsx} | 17 +++++--- .../src/components/StatusDot/StatusDot.tsx | 27 +++++++++++++ .../src/components/StatusDot/index.ts | 15 +++++++ .../StatusDot/variations/StatusDotBeta.tsx | 13 +++++++ .../StatusDot/variations/StatusDotError.tsx | 13 +++++++ .../variations/StatusDotInformation.tsx | 15 +++++++ .../StatusDot/variations/StatusDotSuccess.tsx | 13 +++++++ .../StatusDot/variations/StatusDotWarning.tsx | 13 +++++++ .../Tabs/Primitive/TabStyles.module.scss | 4 ++ .../src/components/Tabs/Primitive/Tabs.tsx | 3 ++ packages/design-system/src/index.ts | 2 +- .../stories/feedback/StatusBubble.stories.tsx | 39 ------------------- .../{StatusBubble.mdx => StatusDot.mdx} | 4 +- .../stories/feedback/StatusDot.stories.tsx | 36 +++++++++++++++++ .../src/stories/navigation/Tabs.stories.tsx | 35 +++++++++++++++++ 25 files changed, 214 insertions(+), 189 deletions(-) delete mode 100644 packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.test.tsx delete mode 100644 packages/design-system/src/components/StatusBubble/StatusBubble.tsx delete mode 100644 packages/design-system/src/components/StatusBubble/index.ts delete mode 100644 packages/design-system/src/components/StatusBubble/variations/StatusBubbleBeta.tsx delete mode 100644 packages/design-system/src/components/StatusBubble/variations/StatusBubbleError.tsx delete mode 100644 packages/design-system/src/components/StatusBubble/variations/StatusBubbleInformation.tsx delete mode 100644 packages/design-system/src/components/StatusBubble/variations/StatusBubbleSuccess.tsx delete mode 100644 packages/design-system/src/components/StatusBubble/variations/StatusBubbleWarning.tsx rename packages/design-system/src/components/{StatusBubble/Primitive/StatusBubblePrimitive.module.scss => StatusDot/Primitive/StatusDotPrimitive.module.scss} (96%) create mode 100644 packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.test.tsx rename packages/design-system/src/components/{StatusBubble/Primitive/StatusBubblePrimitive.tsx => StatusDot/Primitive/StatusDotPrimitive.tsx} (50%) create mode 100644 packages/design-system/src/components/StatusDot/StatusDot.tsx create mode 100644 packages/design-system/src/components/StatusDot/index.ts create mode 100644 packages/design-system/src/components/StatusDot/variations/StatusDotBeta.tsx create mode 100644 packages/design-system/src/components/StatusDot/variations/StatusDotError.tsx create mode 100644 packages/design-system/src/components/StatusDot/variations/StatusDotInformation.tsx create mode 100644 packages/design-system/src/components/StatusDot/variations/StatusDotSuccess.tsx create mode 100644 packages/design-system/src/components/StatusDot/variations/StatusDotWarning.tsx delete mode 100644 packages/design-system/src/stories/feedback/StatusBubble.stories.tsx rename packages/design-system/src/stories/feedback/{StatusBubble.mdx => StatusDot.mdx} (73%) create mode 100644 packages/design-system/src/stories/feedback/StatusDot.stories.tsx diff --git a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.test.tsx b/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.test.tsx deleted file mode 100644 index 51b4870dcaa..00000000000 --- a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '@testing-library/react'; - -import StatusBubble, { variants } from './StatusBubblePrimitive'; - -describe('StatusBubble', (): void => { - it('Should render', (): void => { - render(); - - expect(screen.getByTestId('my-status-bubble-component')).toBeVisible(); - }); -}); diff --git a/packages/design-system/src/components/StatusBubble/StatusBubble.tsx b/packages/design-system/src/components/StatusBubble/StatusBubble.tsx deleted file mode 100644 index 2b0caa898a6..00000000000 --- a/packages/design-system/src/components/StatusBubble/StatusBubble.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import { StatusBubbleProps, variants } from './Primitive/StatusBubblePrimitive'; -import StatusBubbleBeta from './variations/StatusBubbleBeta'; -import StatusBubbleError from './variations/StatusBubbleError'; -import StatusBubbleInformation from './variations/StatusBubbleInformation'; -import StatusBubbleSuccess from './variations/StatusBubbleSuccess'; -import StatusBubbleWarning from './variations/StatusBubbleWarning'; - -const StatusBubble = forwardRef((props: StatusBubbleProps, ref: Ref) => { - switch (props.variant) { - case variants.beta: - return ; - case variants.error: - return ; - case variants.information: - return ; - case variants.success: - return ; - case variants.warning: - return ; - default: - return null; - } -}); - -export default StatusBubble; diff --git a/packages/design-system/src/components/StatusBubble/index.ts b/packages/design-system/src/components/StatusBubble/index.ts deleted file mode 100644 index 19d03ad1a2d..00000000000 --- a/packages/design-system/src/components/StatusBubble/index.ts +++ /dev/null @@ -1,15 +0,0 @@ -import StatusBubble from './StatusBubble'; -import StatusBubbleBeta from './variations/StatusBubbleBeta'; -import StatusBubbleError from './variations/StatusBubbleError'; -import StatusBubbleInformation from './variations/StatusBubbleInformation'; -import StatusBubbleSuccess from './variations/StatusBubbleSuccess'; -import StatusBubbleWarning from './variations/StatusBubbleWarning'; - -export { - StatusBubble, - StatusBubbleBeta, - StatusBubbleError, - StatusBubbleInformation, - StatusBubbleSuccess, - StatusBubbleWarning, -}; diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleBeta.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleBeta.tsx deleted file mode 100644 index a792e88b6fd..00000000000 --- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleBeta.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import StatusBubblePrimitive, { - StatusBubbleProps, - variants, -} from '../Primitive/StatusBubblePrimitive'; - -export type StatusBubbleBetaProps = Omit; - -const StatusBubbleBeta = forwardRef((props: StatusBubbleBetaProps, ref: Ref) => { - return ; -}); - -StatusBubbleBeta.displayName = 'StatusBubbleBeta'; - -export default StatusBubbleBeta; diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleError.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleError.tsx deleted file mode 100644 index fee48041b32..00000000000 --- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleError.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import StatusBubblePrimitive, { - StatusBubbleProps, - variants, -} from '../Primitive/StatusBubblePrimitive'; - -export type StatusBubbleErrorProps = Omit; - -const StatusBubbleError = forwardRef((props: StatusBubbleErrorProps, ref: Ref) => { - return ; -}); - -StatusBubbleError.displayName = 'StatusBubbleError'; - -export default StatusBubbleError; diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleInformation.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleInformation.tsx deleted file mode 100644 index c700be3ba5c..00000000000 --- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleInformation.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import StatusBubblePrimitive, { - StatusBubbleProps, - variants, -} from '../Primitive/StatusBubblePrimitive'; - -export type StatusBubbleInformationProps = Omit; - -const StatusBubbleInformation = forwardRef( - (props: StatusBubbleInformationProps, ref: Ref) => { - return ; - }, -); - -StatusBubbleInformation.displayName = 'StatusBubbleInformation'; - -export default StatusBubbleInformation; diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleSuccess.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleSuccess.tsx deleted file mode 100644 index 70625b2306b..00000000000 --- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleSuccess.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import StatusBubblePrimitive, { - StatusBubbleProps, - variants, -} from '../Primitive/StatusBubblePrimitive'; - -export type StatusBubbleSuccessProps = Omit; - -const StatusBubbleSuccess = forwardRef( - (props: StatusBubbleSuccessProps, ref: Ref) => { - return ; - }, -); - -StatusBubbleSuccess.displayName = 'StatusBubbleSuccess'; - -export default StatusBubbleSuccess; diff --git a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleWarning.tsx b/packages/design-system/src/components/StatusBubble/variations/StatusBubbleWarning.tsx deleted file mode 100644 index 491778914a8..00000000000 --- a/packages/design-system/src/components/StatusBubble/variations/StatusBubbleWarning.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { forwardRef, Ref } from 'react'; - -import StatusBubblePrimitive, { - StatusBubbleProps, - variants, -} from '../Primitive/StatusBubblePrimitive'; - -export type StatusBubbleWarningProps = Omit; - -const StatusBubbleWarning = forwardRef( - (props: StatusBubbleWarningProps, ref: Ref) => { - return ; - }, -); - -StatusBubbleWarning.displayName = 'StatusBubbleWarning'; - -export default StatusBubbleWarning; diff --git a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.module.scss b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss similarity index 96% rename from packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.module.scss rename to packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss index 180c571d13d..dcf82b42925 100644 --- a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.module.scss +++ b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.module.scss @@ -1,6 +1,6 @@ @use '@talend/design-tokens/lib/tokens' as tokens; -.statusBubble { +.statusDot { display: block; width: tokens.$coral-spacing-xs; height: tokens.$coral-spacing-xs; diff --git a/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.test.tsx b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.test.tsx new file mode 100644 index 00000000000..5209e05e6e3 --- /dev/null +++ b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.test.tsx @@ -0,0 +1,12 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen } from '@testing-library/react'; + +import StatusDot, { variants } from './StatusDotPrimitive'; + +describe('StatusDot', (): void => { + it('Should render', (): void => { + render(); + + expect(screen.getByTestId('my-status-dot-component')).toBeVisible(); + }); +}); diff --git a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.tsx b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx similarity index 50% rename from packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.tsx rename to packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx index 8ef65b92e4b..30a4315f99f 100644 --- a/packages/design-system/src/components/StatusBubble/Primitive/StatusBubblePrimitive.tsx +++ b/packages/design-system/src/components/StatusDot/Primitive/StatusDotPrimitive.tsx @@ -14,18 +14,23 @@ export const variants = { warning: 'warning', }; -export type StatusBubbleProps = { +export type StatusDotProps = { variant: string; + className?: string; } & DataAttributes; -const StatusBubblePrimitive = forwardRef( - ({ variant, ...rest }: StatusBubbleProps, ref: Ref) => { +const StatusDotPrimitive = forwardRef( + ({ variant, className, ...rest }: StatusDotProps, ref: Ref) => { return ( - + ); }, ); -StatusBubblePrimitive.displayName = 'StatusBubblePrimitive'; +StatusDotPrimitive.displayName = 'StatusDotPrimitive'; -export default StatusBubblePrimitive; +export default StatusDotPrimitive; diff --git a/packages/design-system/src/components/StatusDot/StatusDot.tsx b/packages/design-system/src/components/StatusDot/StatusDot.tsx new file mode 100644 index 00000000000..15590ac2a13 --- /dev/null +++ b/packages/design-system/src/components/StatusDot/StatusDot.tsx @@ -0,0 +1,27 @@ +import { forwardRef, Ref } from 'react'; + +import { StatusDotProps, variants } from './Primitive/StatusDotPrimitive'; +import StatusDotBeta from './variations/StatusDotBeta'; +import StatusDotError from './variations/StatusDotError'; +import StatusDotInformation from './variations/StatusDotInformation'; +import StatusDotSuccess from './variations/StatusDotSuccess'; +import StatusDotWarning from './variations/StatusDotWarning'; + +const StatusBubble = forwardRef((props: StatusDotProps, ref: Ref) => { + switch (props.variant) { + case variants.beta: + return ; + case variants.error: + return ; + case variants.information: + return ; + case variants.success: + return ; + case variants.warning: + return ; + default: + return null; + } +}); + +export default StatusBubble; diff --git a/packages/design-system/src/components/StatusDot/index.ts b/packages/design-system/src/components/StatusDot/index.ts new file mode 100644 index 00000000000..32bc82353ae --- /dev/null +++ b/packages/design-system/src/components/StatusDot/index.ts @@ -0,0 +1,15 @@ +import StatusDot from './StatusDot'; +import StatusDotBeta from './variations/StatusDotBeta'; +import StatusDotError from './variations/StatusDotError'; +import StatusDotInformation from './variations/StatusDotInformation'; +import StatusDotSuccess from './variations/StatusDotSuccess'; +import StatusDotWarning from './variations/StatusDotWarning'; + +export { + StatusDot, + StatusDotBeta, + StatusDotError, + StatusDotInformation, + StatusDotSuccess, + StatusDotWarning, +}; diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotBeta.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotBeta.tsx new file mode 100644 index 00000000000..b66b24ec818 --- /dev/null +++ b/packages/design-system/src/components/StatusDot/variations/StatusDotBeta.tsx @@ -0,0 +1,13 @@ +import { forwardRef, Ref } from 'react'; + +import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive'; + +export type StatusDotBetaProps = Omit; + +const StatusDotBeta = forwardRef((props: StatusDotBetaProps, ref: Ref) => { + return ; +}); + +StatusDotBeta.displayName = 'StatusDotBeta'; + +export default StatusDotBeta; diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotError.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotError.tsx new file mode 100644 index 00000000000..f3d6d75ddd8 --- /dev/null +++ b/packages/design-system/src/components/StatusDot/variations/StatusDotError.tsx @@ -0,0 +1,13 @@ +import { forwardRef, Ref } from 'react'; + +import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive'; + +export type StatusDotErrorProps = Omit; + +const StatusDotError = forwardRef((props: StatusDotErrorProps, ref: Ref) => { + return ; +}); + +StatusDotError.displayName = 'StatusDotError'; + +export default StatusDotError; diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotInformation.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotInformation.tsx new file mode 100644 index 00000000000..ff5f664789c --- /dev/null +++ b/packages/design-system/src/components/StatusDot/variations/StatusDotInformation.tsx @@ -0,0 +1,15 @@ +import { forwardRef, Ref } from 'react'; + +import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive'; + +export type StatusDotInformationProps = Omit; + +const StatusDotInformation = forwardRef( + (props: StatusDotInformationProps, ref: Ref) => { + return ; + }, +); + +StatusDotInformation.displayName = 'StatusDotInformation'; + +export default StatusDotInformation; diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotSuccess.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotSuccess.tsx new file mode 100644 index 00000000000..491bb6df577 --- /dev/null +++ b/packages/design-system/src/components/StatusDot/variations/StatusDotSuccess.tsx @@ -0,0 +1,13 @@ +import { forwardRef, Ref } from 'react'; + +import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive'; + +export type StatusDotSuccessProps = Omit; + +const StatusDotSuccess = forwardRef((props: StatusDotSuccessProps, ref: Ref) => { + return ; +}); + +StatusDotSuccess.displayName = 'StatusDotSuccess'; + +export default StatusDotSuccess; diff --git a/packages/design-system/src/components/StatusDot/variations/StatusDotWarning.tsx b/packages/design-system/src/components/StatusDot/variations/StatusDotWarning.tsx new file mode 100644 index 00000000000..5f2f14a59bf --- /dev/null +++ b/packages/design-system/src/components/StatusDot/variations/StatusDotWarning.tsx @@ -0,0 +1,13 @@ +import { forwardRef, Ref } from 'react'; + +import StatusDotPrimitive, { StatusDotProps, variants } from '../Primitive/StatusDotPrimitive'; + +export type StatusDotWarningProps = Omit; + +const StatusDotWarning = forwardRef((props: StatusDotWarningProps, ref: Ref) => { + return ; +}); + +StatusDotWarning.displayName = 'StatusDotWarning'; + +export default StatusDotWarning; diff --git a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss index 18d7b5db708..96257440163 100644 --- a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss +++ b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss @@ -122,4 +122,8 @@ transition: tokens.$coral-transition-fast; transform: translateY(100%); } + + .statusDot { + align-self: flex-start; + } } diff --git a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx index afb41f25541..de0f253fab9 100644 --- a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx +++ b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx @@ -6,6 +6,7 @@ import { IconNameWithSize } from '@talend/icons'; import { SizedIcon } from '../../Icon'; import { StackHorizontal } from '../../Stack'; +import { StatusDot } from '../../StatusDot'; import { TagDefault } from '../../Tag'; import { Tooltip } from '../../Tooltip'; import { TabsInternalContext } from './TabsProvider'; @@ -31,6 +32,7 @@ export type TabPropTypes = { disabled?: boolean; icon?: IconNameWithSize<'S'>; tag?: string | number; + statusDot?: string; tooltip?: string; error?: boolean; }; @@ -53,6 +55,7 @@ export function Tab(props: TabPropTypes) { {props.icon && } {props.title} {props.tag && {props.tag}} + {props.statusDot && } ); diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index 1411c207e0c..dc5ff1b6f7c 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -27,7 +27,7 @@ export * from './components/RatioBar'; export * from './components/RichRadioButton'; export * from './components/Skeleton'; export * from './components/Status'; -export * from './components/StatusBubble'; +export * from './components/StatusDot'; export * from './components/Stepper'; export * from './components/Switch'; export * from './components/Tabs'; diff --git a/packages/design-system/src/stories/feedback/StatusBubble.stories.tsx b/packages/design-system/src/stories/feedback/StatusBubble.stories.tsx deleted file mode 100644 index 2836ed8dc35..00000000000 --- a/packages/design-system/src/stories/feedback/StatusBubble.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { - StatusBubble, - StatusBubbleBeta, - StatusBubbleError, - StatusBubbleInformation, - StatusBubbleSuccess, - StatusBubbleWarning, -} from '../../'; -import { - StatusBubbleProps, - variants, -} from '../../components/StatusBubble/Primitive/StatusBubblePrimitive'; - -export const Beta = () => ; -export const Error = () => ; -export const Information = () => ; -export const Success = () => ; -export const Warning = () => ; - -export const Usage = (props: StatusBubbleProps) => ; - -Usage.args = { - variant: variants.beta, -}; - -Usage.argTypes = { - variant: { - description: 'StatusBubble variation', - options: Object.values(variants), - control: { - type: 'select', - }, - }, -}; - -export default { - title: 'Feedback/StatusBubble', - component: StatusBubble, -}; diff --git a/packages/design-system/src/stories/feedback/StatusBubble.mdx b/packages/design-system/src/stories/feedback/StatusDot.mdx similarity index 73% rename from packages/design-system/src/stories/feedback/StatusBubble.mdx rename to packages/design-system/src/stories/feedback/StatusDot.mdx index d71a4748c86..1873ad52ac2 100644 --- a/packages/design-system/src/stories/feedback/StatusBubble.mdx +++ b/packages/design-system/src/stories/feedback/StatusDot.mdx @@ -2,7 +2,7 @@ import { Canvas, Controls, Meta } from '@storybook/blocks'; import { FigmaImage } from '@talend/storybook-docs'; -import * as Stories from './StatusBubble.stories'; +import * as Stories from './StatusDot.stories'; import { Status } from '../Status.block'; @@ -10,7 +10,7 @@ import { Status } from '../Status.block'; # StatusBubble -The status bubble component displays state information using circle shape with semantic colors +The status dot component displays state information using circle shape with semantic colors ### Variations diff --git a/packages/design-system/src/stories/feedback/StatusDot.stories.tsx b/packages/design-system/src/stories/feedback/StatusDot.stories.tsx new file mode 100644 index 00000000000..cb8d4551527 --- /dev/null +++ b/packages/design-system/src/stories/feedback/StatusDot.stories.tsx @@ -0,0 +1,36 @@ +import { + StatusDot, + StatusDotBeta, + StatusDotError, + StatusDotInformation, + StatusDotSuccess, + StatusDotWarning, +} from '../../'; +import { StatusDotProps, variants } from '../../components/StatusDot/Primitive/StatusDotPrimitive'; + +export const Beta = () => ; +export const Error = () => ; +export const Information = () => ; +export const Success = () => ; +export const Warning = () => ; + +export const Usage = (props: StatusDotProps) => ; + +Usage.args = { + variant: variants.beta, +}; + +Usage.argTypes = { + variant: { + description: 'StatusDot variation', + options: Object.values(variants), + control: { + type: 'select', + }, + }, +}; + +export default { + title: 'Feedback/StatusDot', + component: StatusDot, +}; diff --git a/packages/design-system/src/stories/navigation/Tabs.stories.tsx b/packages/design-system/src/stories/navigation/Tabs.stories.tsx index 5506b4cb3c7..e8bd6b31123 100644 --- a/packages/design-system/src/stories/navigation/Tabs.stories.tsx +++ b/packages/design-system/src/stories/navigation/Tabs.stories.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { StackHorizontal, StackVertical, Tabs } from '../../'; +import { variants as StatusDotVariants } from '../../components/StatusDot/Primitive/StatusDotPrimitive'; export default { component: Tabs, title: 'Navigation/Tabs' }; @@ -124,6 +125,40 @@ export const TabStandaloneControlled = () => { ); }; +export const TabsWithStatusBubble = () => { + return ( + + + + + + + Users tab content + Calendar tab content + Favorite tab content + + ); +}; + export const TabAPI = () => (