Merge pull request #243 from Ultimaker/CS-256_replace_logobot

Component updates for replacing the logobot

Author: X Li

src/components/__tests__/__snapshots__/box_placeholder.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The BoxPlaceholder component should render 1`] = `
+<div
+  className="box-placeholder"
+  style={
+    Object {
+      "height": "10rem",
+      "width": "10rem",
+    }
+  }
+>
+  <Icon(BoxIcon) />
+</div>
+`;

src/components/__tests__/box_placeholder.test.tsx

@@ -0,0 +1,22 @@
+// Copyright (c) 2018 Ultimaker B.V.
+import * as React from 'react';
+import { shallow } from 'enzyme';
+
+// component
+import BoxPlaceholder from '../box_placeholder';
+
+describe('The BoxPlaceholder component', () => {
+    let props;
+    let wrapper;
+
+    beforeEach(() => {
+        props = {
+            size: '10rem',
+        };
+        wrapper = shallow(<BoxPlaceholder {...props} />);
+    });
+
+    it('should render', () => {
+        expect(wrapper).toMatchSnapshot();
+    });
+});

src/components/box_placeholder.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import BoxIcon from './icons/box_icon';
+
+export interface BoxPlaceholderProps {
+    /** Size of the placeholder. Include unit */
+    size: string;
+}
+
+
+export const BoxPlaceholder: React.StatelessComponent<BoxPlaceholderProps> = ({ size }) => (
+    <div
+        className="box-placeholder"
+        style={{ height: size, width: size }}
+    >
+        <BoxIcon />
+    </div>
+);
+
+BoxPlaceholder.displayName = 'BoxPlaceholder';
+
+export default BoxPlaceholder;

src/components/icons/box_icon.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { IconWrapper, IconProps } from './icon_wrapper';
+
+const BoxIcon: React.StatelessComponent<IconProps> = ({ className }): JSX.Element => (
+    <div className={`${className} icon--box`}>
+        <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path d="M22,6.9c0-0.1,0-0.2-0.1-0.3c0,0,0,0,0,0c0,0,0,0,0,0c0-0.1-0.1-0.2-0.2-0.2c0,0,0,0,0-0.1c-0.1-0.1-0.2-0.1-0.3-0.2l-9-4c-0.3-0.1-0.6-0.1-0.8,0l-9,4c-0.1,0-0.2,0.1-0.3,0.2c0,0,0,0,0,0.1C2.2,6.4,2.2,6.5,2.1,6.5c0,0,0,0,0,0c0,0,0,0,0,0C2,6.7,2,6.8,2,6.9c0,0,0,0,0,0c0,0,0,0,0,0v10c0,0.4,0.2,0.8,0.6,0.9l9,4c0,0,0,0,0,0C11.7,22,11.9,22,12,22s0.3,0,0.4-0.1c0,0,0,0,0,0l9-4c0.4-0.2,0.6-0.5,0.6-0.9L22,6.9C22,7,22,7,22,6.9C22,7,22,7,22,6.9z M12,4.1L18.5,7L12,9.9L5.5,7L12,4.1z M4,8.5l7,3.1v7.8l-7-3.1V8.5z M13,19.5v-7.8l7-3.1v7.8L13,19.5z"/>
+        </svg>
+    </div>
+);
+
+BoxIcon.displayName = 'BoxIcon';
+
+export default IconWrapper(BoxIcon);

src/components/image.tsx

@@ -17,17 +17,20 @@ export interface ImageProps {
     className?: string;
     /** image alt */
     alt?: string;
+    /** image title */
+    title?: string;
 }
 
 export const Image: React.StatelessComponent<ImageProps> = ({
-    shape, src, size, id, className, alt,
+    shape, src, size, id, className, alt, title,
 }) => {
     const classes = classNames(`image image--${shape}`, className);
     return (
         <img
             id={id}
             src={src}
             alt={alt}
+            title={title}
             className={classes}
             style={{ width: size, height: size }}
         />

src/index.tsx

@@ -7,6 +7,7 @@ export * from './components/app_switcher_menu';
 export * from './components/app_switcher_trigger';
 export * from './components/aspect_ratio_container';
 export * from './components/beta_pill';
+export * from './components/box_placeholder';
 export * from './components/button';
 export * from './components/carousel';
 export * from './components/checkbox';
@@ -99,6 +100,7 @@ export * from './components/input_fields/textarea_field';
 export * from './components/icons/icon_wrapper';
 export { default as ApprovedIcon } from './components/icons/approved_icon';
 export { default as BuildPlateIcon } from './components/icons/build_plate_icon';
+export { default as BoxIcon } from './components/icons/box_icon';
 export { default as CameraIcon } from './components/icons/camera_icon';
 export { default as CrossIcon } from './components/icons/cross_icon';
 export { default as CuraLogo } from './components/icons/cura_logo';

src/stories/icons.stories.tsx

@@ -14,6 +14,7 @@ import GridItem from '../components/grid_item';
 import Tooltip from '../components/tooltip';
 import CrossIcon from '../components/icons/cross_icon';
 import ApprovedIcon from '../components/icons/approved_icon';
+import BoxIcon from '../components/icons/box_icon';
 import EmailIcon from '../components/icons/email_icon';
 import HighlightIcon from '../components/icons/highlight_icon';
 import PasswordIcon from '../components/icons/password_icon';
@@ -98,6 +99,11 @@ stories.add('Icons', withInfo(
                         <ApprovedIcon {...props} />
                     </Tooltip>
                 </GridItem>
+                <GridItem layoutWidth="fit">
+                    <Tooltip tooltipText="BoxIcon">
+                        <BoxIcon {...props} />
+                    </Tooltip>
+                </GridItem>
                 <GridItem layoutWidth="fit">
                     <Tooltip tooltipText="PendingIcon">
                         <PendingIcon {...props} />

src/stylesheets/_box_placeholder.scss

@@ -0,0 +1,15 @@
+.box-placeholder {
+    background-color: $color-transparent-grey-light;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .icon--box {
+        width: 50%;
+        height: 50%;
+
+        svg {
+            fill: $color-grey-mid;
+        }
+    }
+}

src/stylesheets/main.scss

@@ -60,3 +60,4 @@
 @import "app_switcher_menu";
 @import "sub_navigation_menu";
 @import "sub_navigation_mobile_menu";
+@import "box_placeholder";