Merge pull request #540 from appearhere/add-icon-to-dismissible-panel

Add icon prop to dismissible panel and add price-tag icon

packages/core/src/components/DismissablePanel/DismissablePanel.css

@@ -8,4 +8,9 @@ div.root {
 
 .inner {
   width: 90%;
+  flex-grow: 2;
 }
+
+.dismissContainer {
+  align-self: flex-start;
+}

packages/core/src/components/DismissablePanel/DismissablePanel.js

@@ -26,7 +26,9 @@ const DismissablePanel = (props: Props) => {
       context={context}
       className={cx(css.root, onClose ? css.dismissable : null, className)}
     >
-      <div className={cx(css.inner)}>{children}</div>
+      <div className={cx(css.inner)}>
+        {children}
+      </div>
       {onClose && (
         <BtnContainer className={css.dismissContainer} onClick={onClose}>
           <Icon className={css.icon} name="cross" />

packages/core/src/components/Icon/icons.js

@@ -52,6 +52,7 @@ import travelIdea from './icons/icon-travel-idea.svg';
 import twitter from './icons/icon-twitter.svg';
 import vipEntrance from './icons/icon-vip-entrance.svg';
 import instagram from './icons/icon-instagram.svg';
+import priceTag from './icons/icon-price-tag.svg';
 
 export default {
   'appearhere-brackets': appearhereBrackets,
@@ -106,4 +107,5 @@ export default {
   ticket: ticket,
   twitter: twitter,
   instagram: instagram,
+  'price-tag': priceTag,
 };

packages/core/src/components/Panel/Panel.css

@@ -29,4 +29,9 @@
 .error {
   background-color: var(--color-danger);
   color: var(--color-white);
+}
+
+.icon {
+  padding-right: var(--size-regular);
+  align-self: flex-start;
 }

packages/core/src/components/Panel/Panel.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import cx from 'classnames';
+import Icon from '../Icon/Icon';
 
 import css from './Panel.css';
 
@@ -20,13 +21,17 @@ type Props = {
     typeof PANEL_CONTEXT.ERROR |
     typeof PANEL_CONTEXT.SUCCESS,
   children: React.Node,
+  icon?: string,
 }
 
 const Panel = (props: Props) => {
-  const { children, className, context, ...rest } = props;
+  const { children, className, context, icon, ...rest } = props;
 
   return (
     <div {...rest} className={cx(css.root, css[context], className)}>
+      {icon && (
+        <Icon className={css.icon} name={icon} dimensions={{ width: '20px', height: '20px' }} />
+      )}
       {children}
     </div>
   );

packages/playground/stories/DismissablePanel.story.js

@@ -23,4 +23,9 @@ storiesOf('DismissablePanel', module)
     <DismissablePanel context="error" onClose={action('Closing banner')}>
       Something went wrong 😕
     </DismissablePanel>
+  ))
+  .add('With Icon', () => (
+    <DismissablePanel icon="price-tag" onClose={action('Closing banner')}>
+      What a fabulous icon! 🔥
+    </DismissablePanel>
   ));

packages/playground/stories/Panel.story.js

@@ -10,4 +10,7 @@ storiesOf('Panel', module)
     <Panel context="blackout">Important information that you should look at right now</Panel>
   ))
   .add('Success context', () => <Panel context="success">You did something right! 👏</Panel>)
-  .add('Error context', () => <Panel context="error">Something went wrong 😕</Panel>);
+  .add('Error context', () => <Panel context="error">Something went wrong 😕</Panel>)
+  .add('With icon', () => (
+    <Panel icon="price-tag">Important information that you should look at right now</Panel>
+  ));