Merge pull request #374 from storybookjs/update-cardinal-icon

Update cardinal icon

Author: MichaelArestad

src/components/Cardinal.stories.tsx

@@ -2,6 +2,7 @@ import { action } from '@storybook/addon-actions';
 import React from 'react';
 
 import { Cardinal } from './Cardinal';
+import { Icon } from './Icon';
 
 const onHover = action('hover');
 const onClick = action('click');
@@ -179,3 +180,20 @@ export const LargePlural = () => <Cardinal size="large" count={2} text="Story" /
 LargePlural.story = {
   name: 'large plural',
 };
+
+export const WithIcon = () => (
+  <Cardinal
+    size="small"
+    count={14}
+    TextWrapper={() => (
+      <span>
+        Changes
+        <Icon icon="question" aria-label="More info" />
+      </span>
+    )}
+  />
+);
+
+WithIcon.story = {
+  name: 'with icon',
+};

src/components/Cardinal.tsx

@@ -78,8 +78,9 @@ const CardinalInner = styled.div<CardinalInnerProps>`
   text-align: ${(props) => props.alignment};
 
   svg {
+    width: 12px;
     height: 12px;
-    margin: 1px 0;
+    margin: 1px 0 0 4px;
     vertical-align: top;
     color: inherit;
   }