fix: Update Callout margins; allow Callout without title (#106)

Author: tassoevan

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_Default_Story.png

@@ -7,6 +7,7 @@ import { Icon } from '../Icon';
 const Container = createStyledComponent('rcx-callout', 'section');
 const Wrapper = createStyledComponent('rcx-callout__wrapper');
 const Title = createStyledComponent('rcx-callout__title', 'h1');
+const ChildrenWrapper = createStyledComponent('rcx-callout__children', 'div');
 
 export const Callout = React.forwardRef(function Callout({
   children,
@@ -20,10 +21,12 @@ export const Callout = React.forwardRef(function Callout({
     || (type === 'danger' && 'ban');
 
   return <Container mod-type={type} ref={ref} {...props}>
-    <Icon name={iconName} x16 />
+    <Icon name={iconName} size={20} />
     <Wrapper>
-      <Title mod-has-children={!!children}>{title}</Title>
-      {children}
+      {title && <Title>{title}</Title>}
+      <ChildrenWrapper>
+        {children}
+      </ChildrenWrapper>
     </Wrapper>
   </Container>;
 });
@@ -37,6 +40,6 @@ Callout.displayName = 'Callout';
 Callout.propTypes = {
   children: PropTypes.node,
   invisible: PropTypes.bool,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.node,
   type: PropTypes.oneOf(['info', 'success', 'warning', 'danger']).isRequired,
 };

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description.png

@@ -5,6 +5,6 @@ import { Callout } from '../..';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<Callout title='' />, div);
+  ReactDOM.render(<Callout />, div);
   ReactDOM.unmountComponentAtNode(div);
 });

packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description_Only.png

@@ -43,3 +43,24 @@ something important in the content of the current page.
     </>
   </Story>
 </Preview>
+
+## With description only
+
+<Preview>
+  <Story name='With Description Only'>
+    <>
+      <Callout>
+        This is a generic description.
+      </Callout>
+      <Callout type='success'>
+        This is a successful description.
+      </Callout>
+      <Callout type='warning'>
+        This is a warning description.
+      </Callout>
+      <Callout type='danger'>
+        This is a danger description.
+      </Callout>
+    </>
+  </Story>
+</Preview>

packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_Default_Story.png

@@ -5,12 +5,9 @@
 
   display: flex;
 
-  margin: 0 0 #{ $spaces-x24 };
-  margin-inline: 0;
-  margin-block-start: 0;
-  margin-block-end: #{ $spaces-x24 };
-
-  padding: #{ $spaces-x16 };
+  padding-block: #{ $spaces-x16 };
+  padding-inline-start: #{ $spaces-x16 };
+  padding-inline-end: #{ $spaces-x32 };
 
   border-radius: #{ $borders-radius-x2 };
 
@@ -29,10 +26,6 @@
   &--type-danger {
     background-color: #{ map-get($colors, red200) };
   }
-
-  & > .rcx-icon {
-    font-size: #{ $sizes-x16 };
-  }
 }
 
 .rcx-callout__wrapper {
@@ -43,9 +36,7 @@
   overflow: hidden;
   flex: 1 1 0;
 
-  margin: 0 #{ $spaces-x8 };
-  margin-block: 0;
-  margin-inline: #{ $spaces-x8 };
+  margin-inline-start: #{ $spaces-x8 };
 
   color: #{ $text-colors-default };
   flex-flow: column nowrap;
@@ -56,12 +47,16 @@
 .rcx-callout__title {
   @include box;
 
-  @include as-caption($bold: true);
-
-  &--has-children {
-    margin-bottom: #{ $spaces-x4 };
-  }
+  padding-block: #{ $spaces-x2 };
 
+  @include as-caption($bold: true);
   @include with-text--ellipsis;
   @include with-text--nowrap;
 }
+
+.rcx-callout__children {
+  @include box;
+  display: block;
+
+  padding-block: #{ $spaces-x2 };
+}