Merge pull request #231 from Ultimaker/CS-220-add-MISP-related-icons

CS-220 add new icon

Author: ChrisTerBeke

src/components/icons/info_circular_icon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { IconWrapper, IconProps } from './icon_wrapper';
+
+/** this icon works a bit differently than the rest
+ *  when it's color is modified, it's affecting the 'i' letter in the inside
+ *  the color of the surrounding disc is colored by overwriting the background attribute
+ *  of the icon--info-circular class
+*/
+const InfoCircularIcon: React.StatelessComponent<IconProps> = ({ className }): JSX.Element => (
+    <div className={`${className} icon--info-circular`}>
+        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+            <path d="M12,14.5v-5a1,1,0,0,0-1-1H10a1,1,0,0,0,0,2v4a1,1,0,0,0,0,2h2a1,1,0,0,0,0-2Z" />
+            <circle cx="11" cy="6.5" r="1" />
+        </svg>
+    </div>
+);
+
+InfoCircularIcon.displayName = 'InfoCircularIcon';
+
+export default IconWrapper(InfoCircularIcon);

src/index.tsx

@@ -134,6 +134,7 @@ export { default as WarningIcon } from './components/icons/warning_icon';
 export { default as WebsiteIcon } from './components/icons/website_icon';
 export { default as TeamsIcon } from './components/icons/teams_icon';
 export { default as TickIcon } from './components/icons/tick_icon';
+export { default as InfoCircularIcon } from './components/icons/info_circular_icon';
 
 // views
 export * from './views/page_not_found';

src/stories/icons.stories.tsx

@@ -47,6 +47,7 @@ import MultiplyIcon from '../components/icons/multiply_icon';
 import MoveUpIcon from '../components/icons/move_up_icon';
 import TeamsIcon from '../components/icons/teams_icon';
 import TickIcon from '../components/icons/tick_icon';
+import InfoCircularIcon from '../components/icons/info_circular_icon';
 
 const stories = storiesOf('Icons', module);
 
@@ -267,6 +268,11 @@ stories.add('Icons', withInfo(
                         <TickIcon {...props} />
                     </Tooltip>
                 </GridItem>
+                <GridItem layoutWidth="fit">
+                    <Tooltip tooltipText="InfoCircularIcon">
+                        <InfoCircularIcon {...props} />
+                    </Tooltip>
+                </GridItem>
 
 
             </Grid>

src/stylesheets/_icons.scss

@@ -13,7 +13,8 @@
         fill: $color-black;
     }
 
-    &.icon--circle {
+    &.icon--circle,
+    &.icon--info-circular {
         border-radius: 50%;
         height: 4rem;
         width: 4rem;
@@ -72,6 +73,12 @@
         }
     }
 
+    &.icon--info-circular {
+        background-color: $color-grey-dark;
+        width: 2.2rem;
+        height: 2.2rem;
+    }
+
     &.icon--blue svg {
         fill: $color-blue;
     }