Show a coming-soon backpack

src/components/backpack/backpack.css

+@import "../../css/units.css";
+@import "../../css/colors.css";
+
+.backpack-container {
+    flex-shrink: 1;
+    position: relative;
+}
+
+.backpack-header {
+    margin-top: 0.5rem;
+    border: 1px solid $ui-black-transparent;
+    border-top-right-radius: $space;
+    background: $ui-white;
+    padding: 0.25rem;
+    text-align: center;
+    font-size: 0.85rem;
+    color: $text-primary;
+    transition: 0.2s;
+    cursor: pointer;
+}

src/components/backpack/backpack.jsx

+import React from 'react';
+import {FormattedMessage} from 'react-intl';
+import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
+import styles from './backpack.css';
+
+const Backpack = () => (
+    <div className={styles.backpackContainer}>
+        <div className={styles.backpackHeader}>
+            <ComingSoonTooltip place="top">
+                <FormattedMessage
+                    defaultMessage="Backpack"
+                    description="Button to open the backpack"
+                    id="gui.backpack.header"
+                />
+            </ComingSoonTooltip>
+        </div>
+    </div>
+);
+
+export default Backpack;

src/components/blocks/blocks.css

@@ -9,6 +9,7 @@
     left: 0;
     border: 1px solid $ui-black-transparent;
     border-top-right-radius: $space;
+    border-bottom-right-radius: $space;
 }
 
 .blocks :global(.blocklyMainBackground) {

src/components/gui/gui.jsx

@@ -15,6 +15,7 @@ import StageWrapper from '../../containers/stage-wrapper.jsx';
 import Loader from '../loader/loader.jsx';
 import Box from '../box/box.jsx';
 import MenuBar from '../menu-bar/menu-bar.jsx';
+import Backpack from '../backpack/backpack.jsx';
 
 import PreviewModal from '../../containers/preview-modal.jsx';
 import ImportModal from '../../containers/import-modal.jsx';
@@ -44,6 +45,7 @@ const GUIComponent = props => {
     const {
         activeTabIndex,
         basePath,
+        backpackVisible,
         blocksTabVisible,
         cardsVisible,
         children,
@@ -202,6 +204,9 @@ const GUIComponent = props => {
                                 {soundsTabVisible ? <SoundTab vm={vm} /> : null}
                             </TabPanel>
                         </Tabs>
+                        {backpackVisible ? (
+                            <Backpack />
+                        ) : null}
                     </Box>
 
                     <Box className={styles.stageAndTargetWrapper}>
@@ -220,6 +225,7 @@ const GUIComponent = props => {
 };
 GUIComponent.propTypes = {
     activeTabIndex: PropTypes.number,
+    backpackVisible: PropTypes.null,
     basePath: PropTypes.string,
     blocksTabVisible: PropTypes.bool,
     cardsVisible: PropTypes.bool,
@@ -242,6 +248,7 @@ GUIComponent.propTypes = {
     vm: PropTypes.instanceOf(VM).isRequired
 };
 GUIComponent.defaultProps = {
+    backpackVisible: false,
     basePath: './'
 };
 export default injectIntl(GUIComponent);

src/playground/index.jsx

@@ -24,4 +24,4 @@ document.body.appendChild(appTarget);
 GUI.setAppElement(appTarget);
 const WrappedGui = HashParserHOC(AppStateHOC(GUI));
 
-ReactDOM.render(<WrappedGui />, appTarget);
+ReactDOM.render(<WrappedGui backpackVisible />, appTarget);