Merge pull request #850 from gympass/RTN-1557

RTN-1557: Update Feedback component to receive Caption as a new child component

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
 </Box>
 ```
 
+### With Caption
+
+```javascript
+  <Box h={611} w="100%">
+    <Feedback
+      variant="success"
+      title="Welcome to Yoga, Feedback."
+      description="Enjoy your membership! Access thousands of gyms, studios and wellness  app."
+    >
+      <Feedback.Caption>Caption description here</Feedback.Caption>
+      <Feedback.PrimaryButton>Ok</Feedback.PrimaryButton>
+      <Feedback.SecondaryButton>Cancel</Feedback.SecondaryButton>
+    </Feedback>
+  </Box>
+```
+
 ### Only with primary button
 
 ```javascript

packages/yoga/src/Feedback/web/Feedback.jsx

@@ -12,6 +12,7 @@ import {
   PrimaryButton,
   SecondaryButton,
   TextContainer,
+  Caption,
 } from './StyledFeedback';
 
 const ICON_SIZE = 64;
@@ -38,13 +39,15 @@ function Feedback({ variant, title, description, children, center, ...props }) {
   const iconProps = VARIANT_ICONS[variant];
   let primaryButton;
   let secondaryButton;
+  let captionElement;
   let titleElement = <Title>{title}</Title>;
 
   function defineCompoundComponents() {
     React.Children.forEach(children, child => {
       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}
           </Text.Body1>
         </TextContainer>
+
+        {captionElement ? <Box mt="medium">{captionElement}</Box> : null}
+
         <Actions mt="xxxlarge">
           {primaryButton}
           {secondaryButton}

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('<Feedback />', () => {
   it('should render the title and description', () => {
@@ -30,6 +31,16 @@ describe('<Feedback />', () => {
     expect(getByRole('heading', { name: title })).toBeTruthy();
   });
 
+  it('should render caption children', () => {
+    const { getByText } = renderWithTheme(
+      <Feedback variant="success" title={title} description={description}>
+        <Feedback.Caption>{caption}</Feedback.Caption>
+      </Feedback>,
+    );
+
+    expect(getByText(caption)).toBeTruthy();
+  });
+
   it('should render the buttons', () => {
     const { getByRole } = renderWithTheme(
       <Feedback variant="success" title={title} description={description}>
@@ -42,6 +53,20 @@ describe('<Feedback />', () => {
     expect(getByRole('button', { name: 'Cancel' })).toBeTruthy();
   });
 
+  it('should render title, description, buttons and caption', () => {
+    const { getByText, getByRole } = renderWithTheme(
+      <Feedback variant="success" description="Enjoy your membership!">
+        <Feedback.Caption>{caption}</Feedback.Caption>
+        <Feedback.PrimaryButton>Ok</Feedback.PrimaryButton>
+        <Feedback.SecondaryButton>Cancel</Feedback.SecondaryButton>
+      </Feedback>,
+    );
+
+    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(
       <Feedback

packages/yoga/src/Feedback/web/StyledFeedback.jsx

@@ -94,6 +94,21 @@ export const SecondaryButton = styled(Button.Text)`
   ${buttonsStyles}
 `;
 
+export const Caption = styled(Text.Body1).attrs(() => ({
+  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';

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;