diff --git a/packages/doc/content/components/components/feedback/index.mdx b/packages/doc/content/components/components/feedback/index.mdx index 341301f8a1..e655c374a6 100644 --- a/packages/doc/content/components/components/feedback/index.mdx +++ b/packages/doc/content/components/components/feedback/index.mdx @@ -72,6 +72,22 @@ This screen can be used to give feedback to the user of success, information, or ``` +### With Caption + +```javascript + + + Caption description here + Ok + Cancel + + +``` + ### Only with primary button ```javascript diff --git a/packages/yoga/src/Feedback/web/Feedback.jsx b/packages/yoga/src/Feedback/web/Feedback.jsx index 2141922c80..2d6e607b09 100644 --- a/packages/yoga/src/Feedback/web/Feedback.jsx +++ b/packages/yoga/src/Feedback/web/Feedback.jsx @@ -12,6 +12,7 @@ import { PrimaryButton, SecondaryButton, TextContainer, + Caption, } from './StyledFeedback'; const ICON_SIZE = 64; @@ -38,6 +39,7 @@ function Feedback({ variant, title, description, children, center, ...props }) { const iconProps = VARIANT_ICONS[variant]; let primaryButton; let secondaryButton; + let captionElement; let titleElement = {title}; function defineCompoundComponents() { @@ -45,6 +47,7 @@ function Feedback({ variant, title, description, children, center, ...props }) { if (isChildFromComponent(child, PrimaryButton)) primaryButton = child; if (isChildFromComponent(child, SecondaryButton)) secondaryButton = child; if (isChildFromComponent(child, Title)) titleElement = child; + if (isChildFromComponent(child, Caption)) captionElement = child; }); } @@ -75,6 +78,9 @@ function Feedback({ variant, title, description, children, center, ...props }) { {description} + + {captionElement ? {captionElement} : null} + {primaryButton} {secondaryButton} diff --git a/packages/yoga/src/Feedback/web/Feedback.test.jsx b/packages/yoga/src/Feedback/web/Feedback.test.jsx index 42c0f8f4b3..b40a1b6c7b 100644 --- a/packages/yoga/src/Feedback/web/Feedback.test.jsx +++ b/packages/yoga/src/Feedback/web/Feedback.test.jsx @@ -9,6 +9,7 @@ function renderWithTheme(ui) { const title = 'Welcome to Yoga'; const description = 'Enjoy your membership!'; +const caption = 'Caption Description here.'; describe('', () => { it('should render the title and description', () => { @@ -30,6 +31,16 @@ describe('', () => { expect(getByRole('heading', { name: title })).toBeTruthy(); }); + it('should render caption children', () => { + const { getByText } = renderWithTheme( + + {caption} + , + ); + + expect(getByText(caption)).toBeTruthy(); + }); + it('should render the buttons', () => { const { getByRole } = renderWithTheme( @@ -42,6 +53,20 @@ describe('', () => { expect(getByRole('button', { name: 'Cancel' })).toBeTruthy(); }); + it('should render title, description, buttons and caption', () => { + const { getByText, getByRole } = renderWithTheme( + + {caption} + Ok + Cancel + , + ); + + expect(getByText(caption)).toBeTruthy(); + expect(getByRole('button', { name: 'Ok' })).toBeTruthy(); + expect(getByRole('button', { name: 'Cancel' })).toBeTruthy(); + }); + it('should render correctly when not centered vertically', () => { const { baseElement } = renderWithTheme( ({ + as: 'p', + bold: true, +}))` + ${({ + theme: { + yoga: { colors }, + }, + }) => + css` + color: ${colors.text.secondary}; + `}} +`; + Title.displayName = 'Feedback.Title'; PrimaryButton.displayName = 'Feedback.PrimaryButton'; SecondaryButton.displayName = 'Feedback.SecondaryButton'; +Caption.displayName = 'Feedback.Caption'; diff --git a/packages/yoga/src/Feedback/web/index.js b/packages/yoga/src/Feedback/web/index.js index 99d912ef19..effe807c5c 100644 --- a/packages/yoga/src/Feedback/web/index.js +++ b/packages/yoga/src/Feedback/web/index.js @@ -1,8 +1,14 @@ import Feedback from './Feedback'; -import { Title, PrimaryButton, SecondaryButton } from './StyledFeedback'; +import { + Title, + PrimaryButton, + SecondaryButton, + Caption, +} from './StyledFeedback'; Feedback.Title = Title; Feedback.PrimaryButton = PrimaryButton; Feedback.SecondaryButton = SecondaryButton; +Feedback.Caption = Caption; export default Feedback;