From 737d465c22b8bc1695cac9bcade086e47d86d3e2 Mon Sep 17 00:00:00 2001
From: Kaloyan Manolov <kaloyan.manolov@advance-auto.com>
Date: Wed, 16 Oct 2024 13:10:37 +0300
Subject: [PATCH 1/3] chore: uepr-72: uepr-65: migrate monorepo changes

---
 .../delete-button/delete-button.css           |    4 +
 .../delete-button/delete-button.jsx           |    7 +-
 .../delete-confirmation-prompt.css            |   74 +
 .../delete-confirmation-prompt.jsx            |  185 +++
 .../icon--arrow-left.svg                      |    3 +
 .../icon--arrow-right.svg                     |    3 +
 .../icon--delete.svg                          |   18 +
 .../delete-confirmation-prompt/icon--undo.svg |   12 +
 src/components/library/library.css            |   18 +
 src/components/library/library.jsx            |  102 +-
 .../sprite-selector-item.jsx                  |    4 +-
 .../sprite-selector/sprite-list.jsx           |    2 +
 src/containers/sprite-selector-item.jsx       |   47 +-
 src/containers/tips-library.jsx               |    1 +
 src/lib/libraries/decks/index.jsx             | 1308 +++++++++--------
 test/integration/how-tos.test.js              |    4 +-
 test/integration/menu-bar.test.js             |    1 +
 test/integration/sprites.test.js              |    2 +
 test/integration/stage-size.test.js           |    6 +-
 .../sprite-selector-item.test.jsx.snap        |    4 +-
 .../containers/sprite-selector-item.test.jsx  |   36 +-
 21 files changed, 1154 insertions(+), 687 deletions(-)
 create mode 100644 src/components/delete-confirmation-prompt/delete-confirmation-prompt.css
 create mode 100644 src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx
 create mode 100644 src/components/delete-confirmation-prompt/icon--arrow-left.svg
 create mode 100644 src/components/delete-confirmation-prompt/icon--arrow-right.svg
 create mode 100644 src/components/delete-confirmation-prompt/icon--delete.svg
 create mode 100644 src/components/delete-confirmation-prompt/icon--undo.svg

diff --git a/src/components/delete-button/delete-button.css b/src/components/delete-button/delete-button.css
index 692a9d35200..5f7f422c66d 100644
--- a/src/components/delete-button/delete-button.css
+++ b/src/components/delete-button/delete-button.css
@@ -28,6 +28,10 @@
   transition: all 0.15s ease-out;
 }
 
+.delete-button-clicked {
+  background-color: $data-primary;
+}
+
 .delete-icon {
     position: relative;
     margin: 0.25rem;
diff --git a/src/components/delete-button/delete-button.jsx b/src/components/delete-button/delete-button.jsx
index 6e84fb983f3..bdd16c7349d 100644
--- a/src/components/delete-button/delete-button.jsx
+++ b/src/components/delete-button/delete-button.jsx
@@ -16,7 +16,11 @@ const DeleteButton = props => (
         tabIndex={props.tabIndex}
         onClick={props.onClick}
     >
-        <div className={styles.deleteButtonVisible}>
+        <div
+            className={classNames(styles.deleteButtonVisible, {
+                [styles.deleteButtonClicked]: props.isConfirmationModalOpened
+            })}
+        >
             <img
                 className={styles.deleteIcon}
                 src={deleteIcon}
@@ -29,6 +33,7 @@ const DeleteButton = props => (
 DeleteButton.propTypes = {
     className: PropTypes.string,
     onClick: PropTypes.func.isRequired,
+    isConfirmationModalOpened: PropTypes.bool,
     tabIndex: PropTypes.number
 };
 
diff --git a/src/components/delete-confirmation-prompt/delete-confirmation-prompt.css b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.css
new file mode 100644
index 00000000000..295bb6b5c34
--- /dev/null
+++ b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.css
@@ -0,0 +1,74 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.modal-container {
+    display: flex;
+    flex-direction: row;
+    border: none;
+}
+
+.arrow-container {
+    display: flex;
+    align-items: center;
+    margin-right: -7px;
+}
+
+.arrow-container-left {
+    margin-right: -7px;
+}
+
+.arrow-container-right {
+    margin-left: -7px;
+}
+
+.body {
+    padding: 1rem 1.5rem;
+    border-radius: 0.5rem;
+    background: $looks-secondary;
+}
+
+.label {
+    color: $ui-white;
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin: 1rem 0 1.5rem;
+}
+
+.button-row {
+    font-weight: bolder;
+    display: flex;
+}
+
+.button-row button {
+    display: flex;
+    gap: 0.5rem;
+    justify-content: center;
+    width: 47%;
+    padding: 0.75rem 1rem;
+    border-radius: 2rem;
+    border: 1px solid $ui-black-transparent;
+    color: $looks-secondary;
+    background: $ui-white;
+    font-weight: 600;
+    font-size: 0.85rem;
+    cursor: pointer;
+    margin: auto;
+}
+
+.button-row button.ok-button {
+    margin-left: 0;
+}
+
+.button-row button.cancel-button {
+    margin-right: 0;
+}
+
+.message {
+    margin-top: 0.25rem;
+}
+
+.delete-icon {
+    height: 1.5rem;
+    width: 1.5rem;
+}
+
diff --git a/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx
new file mode 100644
index 00000000000..2a6eea9525f
--- /dev/null
+++ b/src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx
@@ -0,0 +1,185 @@
+import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import Box from '../box/box.jsx';
+import ReactModal from 'react-modal';
+import deleteIcon from './icon--delete.svg';
+import undoIcon from './icon--undo.svg';
+import arrowLeftIcon from './icon--arrow-left.svg';
+import arrowRightIcon from './icon--arrow-right.svg';
+
+import styles from './delete-confirmation-prompt.css';
+
+// TODO: Parametrize from outside if we want more custom messaging
+const messages = defineMessages({
+    shouldDeleteSpriteMessage: {
+        defaultMessage: 'Are you sure you want to delete this sprite?',
+        description: 'Message to indicate whether selected sprite should be deleted.',
+        id: 'gui.gui.shouldDeleteSprite'
+    },
+    shouldDeleteCostumeMessage: {
+        defaultMessage: 'Are you sure you want to delete this costume?',
+        description: 'Message to indicate whether selected costume should be deleted.',
+        id: 'gui.gui.shouldDeleteCostume'
+    },
+    shouldDeleteSoundMessage: {
+        defaultMessage: 'Are you sure you want to delete this sound?',
+        description: 'Message to indicate whether selected sound should be deleted.',
+        id: 'gui.gui.shouldDeleteSound'
+    },
+    confirmOption: {
+        defaultMessage: 'yes',
+        description: 'Yes - should delete the sprite',
+        id: 'gui.gui.confirm'
+    },
+    cancelOption: {
+        defaultMessage: 'no',
+        description: 'No - cancel deletion',
+        id: 'gui.gui.cancel'
+    },
+    confirmDeletionHeading: {
+        defaultMessage: 'Confirm Asset Deletion',
+        description: 'Heading of confirmation prompt to delete asset',
+        id: 'gui.gui.deleteAssetHeading'
+    }
+});
+
+const modalWidth = 300;
+const calculateModalPosition = (relativeElemRef, modalPosition) => {
+    const refPosition = relativeElemRef.getBoundingClientRect();
+
+    if (modalPosition === 'left') {
+        return {
+            top: refPosition.top - refPosition.height,
+            left: refPosition.left - modalWidth - 25
+        };
+    }
+
+    if (modalPosition === 'right') {
+        return {
+            top: refPosition.top - refPosition.height,
+            left: refPosition.right + 25
+        };
+    }
+
+    return {};
+};
+
+const getMessage = entityType => {
+    if (entityType === 'COSTUME') {
+        return messages.shouldDeleteCostumeMessage;
+    }
+
+    if (entityType === 'SOUND') {
+        return messages.shouldDeleteSoundMessage;
+    }
+
+    return messages.shouldDeleteSpriteMessage;
+};
+
+const DeleteConfirmationPrompt = ({
+    intl,
+    onCancel,
+    onOk,
+    modalPosition,
+    entityType,
+    relativeElemRef
+}) => {
+    const modalPositionValues = calculateModalPosition(relativeElemRef, modalPosition);
+
+    return (<ReactModal
+        isOpen
+        // We have to inline the styles, since a part
+        // of them are dynamically generated
+        style={{
+            content: {
+                ...modalPositionValues,
+                width: modalWidth,
+                border: 'none',
+                height: 'fit-content',
+                backgroundColor: 'transparent',
+                padding: 0,
+                margin: 0,
+                position: 'absolute',
+                overflowX: 'hidden',
+                zIndex: 1000
+            },
+            overlay: {
+                position: 'fixed',
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                zIndex: 510,
+                backgroundColor: 'transparent'
+            }
+        }}
+        contentLabel={intl.formatMessage(messages.confirmDeletionHeading)}
+        onRequestClose={onCancel}
+    >
+        <Box className={styles.modalContainer}>
+            { modalPosition === 'right' ?
+                <Box className={classNames(styles.arrowContainer, styles.arrowContainerLeft)}>
+                    <img
+                        className={styles.deleteIcon}
+                        src={arrowLeftIcon}
+                    />
+                </Box> : null }
+            <Box className={styles.body}>
+                <Box className={styles.label}>
+                    <FormattedMessage {...getMessage(entityType)} />
+                </Box>
+                <Box className={styles.buttonRow}>
+                    <button
+                        className={styles.okButton}
+                        onClick={onOk}
+                        role="button"
+                    >
+                        <img
+                            className={styles.deleteIcon}
+                            src={deleteIcon}
+                        />
+                        <div className={styles.message}>
+                            <FormattedMessage {...messages.confirmOption} />
+                        </div>
+                    </button>
+                    <button
+                        className={styles.cancelButton}
+                        onClick={onCancel}
+                        role="button"
+                    >
+                        <img
+                            className={styles.deleteIcon}
+                            src={undoIcon}
+                        />
+                        <div className={styles.message}>
+                            <FormattedMessage {...messages.cancelOption} />
+                        </div>
+                    </button>
+                </Box>
+            </Box>
+            {modalPosition === 'left' ?
+                <Box className={classNames(styles.arrowContainer, styles.arrowContainerRight)}>
+                    <img
+                        className={styles.deleteIcon}
+                        src={arrowRightIcon}
+                    />
+                </Box> : null }
+        </Box>
+    </ReactModal>);
+};
+
+DeleteConfirmationPrompt.propTypes = {
+    onOk: PropTypes.func.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    relativeElemRef: PropTypes.object,
+    entityType: PropTypes.string,
+    modalPosition: PropTypes.string,
+    intl: intlShape.isRequired
+};
+
+const DeleteConfirmationPromptIntl = injectIntl(DeleteConfirmationPrompt);
+
+export default DeleteConfirmationPromptIntl;
diff --git a/src/components/delete-confirmation-prompt/icon--arrow-left.svg b/src/components/delete-confirmation-prompt/icon--arrow-left.svg
new file mode 100644
index 00000000000..0712a6f88b8
--- /dev/null
+++ b/src/components/delete-confirmation-prompt/icon--arrow-left.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="30" viewBox="0 0 14 30" fill="#855CD6" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 0.780016L14 29.9653L2.05904 18.0243C0.594577 16.5599 0.594577 14.1855 2.05904 12.721L14 0.780016Z" fill="#855CD6"/>
+</svg>
diff --git a/src/components/delete-confirmation-prompt/icon--arrow-right.svg b/src/components/delete-confirmation-prompt/icon--arrow-right.svg
new file mode 100644
index 00000000000..cc59340dc3f
--- /dev/null
+++ b/src/components/delete-confirmation-prompt/icon--arrow-right.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="30" viewBox="0 0 14 30" fill="#855CD6" xmlns="http://www.w3.org/2000/svg" transform="rotate(180)">
+<path d="M14 0.780016L14 29.9653L2.05904 18.0243C0.594577 16.5599 0.594577 14.1855 2.05904 12.721L14 0.780016Z" fill="#855CD6"  />
+</svg>
diff --git a/src/components/delete-confirmation-prompt/icon--delete.svg b/src/components/delete-confirmation-prompt/icon--delete.svg
new file mode 100644
index 00000000000..4be0a2a3caf
--- /dev/null
+++ b/src/components/delete-confirmation-prompt/icon--delete.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 55.1 (78136) - https://sketchapp.com -->
+    <title>Sound/General/Delete</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M4.54751641,6.99994966 L15.4523042,6.99994966 C15.7284466,6.99994966 15.9523042,7.22380729 15.9523042,7.49994966 C15.9523042,7.51506367 15.9516189,7.5301699 15.9502504,7.54522183 L15.1651793,16.1801783 C15.0715275,17.2102489 14.207924,17.9989808 13.1736049,17.9990897 L6.82662224,17.9997575 C5.79213514,17.9998663 4.92828345,17.2110677 4.83462539,16.180829 L4.04956981,7.54521753 C4.02456905,7.27020922 4.22724022,7.02700381 4.50224854,7.00200306 C4.51729904,7.00063483 4.53240384,6.99994966 4.54751641,6.99994966 Z M7.33333333,4 L7.88603796,2.34188612 C7.95409498,2.13771505 8.14516441,2 8.36037961,2 L11.6396204,2 C11.8548356,2 12.045905,2.13771505 12.113962,2.34188612 L12.6666667,4 L16.5,4 C16.7761424,4 17,4.22385763 17,4.5 L17,5.5 C17,5.77614237 16.7761424,6 16.5,6 L3.5,6 C3.22385763,6 3,5.77614237 3,5.5 L3,4.5 C3,4.22385763 3.22385763,4 3.5,4 L7.33333333,4 Z M8.38742589,4 L11.6125741,4 L11.2792408,3 L8.72075922,3 L8.38742589,4 Z M10,11.7204812 L11.5952436,10.1252376 C11.7905057,9.92997548 12.1070882,9.92997548 12.3023504,10.1252376 L12.3747624,10.1976496 C12.5700245,10.3929118 12.5700245,10.7094943 12.3747624,10.9047564 L10.7795188,12.5 L12.3747624,14.0952436 C12.5700245,14.2905057 12.5700245,14.6070882 12.3747624,14.8023504 L12.3023504,14.8747624 C12.1070882,15.0700245 11.7905057,15.0700245 11.5952436,14.8747624 L10,13.2795188 L8.40475641,14.8747624 C8.20949427,15.0700245 7.89291178,15.0700245 7.69764963,14.8747624 L7.62523762,14.8023504 C7.42997548,14.6070882 7.42997548,14.2905057 7.62523762,14.0952436 L9.22048121,12.5 L7.62523762,10.9047564 C7.42997548,10.7094943 7.42997548,10.3929118 7.62523762,10.1976496 L7.69764963,10.1252376 C7.89291178,9.92997548 8.20949427,9.92997548 8.40475641,10.1252376 L10,11.7204812 Z" id="path-1"></path>
+    </defs>
+    <g id="Sound/General/Delete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <g id="Trash-Can"></g>
+        <g id="White" mask="url(#mask-2)" fill="#855CD6">
+            <rect id="Color" x="0" y="0" width="20" height="20"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/delete-confirmation-prompt/icon--undo.svg b/src/components/delete-confirmation-prompt/icon--undo.svg
new file mode 100644
index 00000000000..44c9517b707
--- /dev/null
+++ b/src/components/delete-confirmation-prompt/icon--undo.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>undo</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="undo" fill="#855CD6">
+            <path d="M15.5581635,12.7700651 L11.8403972,16.4941315 C11.5610922,16.7671364 11.1830854,16.9211391 10.7903784,16.9211391 C10.3990715,16.9211391 10.0210647,16.7671364 9.74035971,16.4941315 L6.02399342,12.7700651 C5.5969858,12.3430574 5.47098355,11.7060461 5.70198767,11.1530362 C5.93299179,10.6000263 6.46500128,10.24302 7.06701202,10.24302 L8.40403587,10.24302 C8.36903525,9.92101423 8.27803362,9.55700774 8.12403088,9.17200087 C8.07573002,9.05999887 8.02602913,8.94799688 7.97002813,8.83599488 C7.89302676,8.70999263 7.90072689,8.67499201 7.79502501,8.52098926 C7.62702201,8.26898476 7.47301926,8.07998139 7.29031601,7.86297752 C6.9200094,7.4639704 6.47200141,7.12096429 5.99599292,6.86895979 C5.5129843,6.6169553 5.00897531,6.46295255 4.56096732,6.37895105 C4.11995945,6.30194968 3.71395221,6.29494955 3.47594796,6.29494955 C3.35694584,6.28794943 3.2029431,6.31594993 3.12594172,6.32295005 C3.04194022,6.32995018 2.99293935,6.3369503 2.99293935,6.3369503 C2.49593048,6.38595117 2.04792249,6.02194468 1.99892162,5.52493582 C1.95692087,5.10492832 2.20192524,4.72692158 2.57293186,4.58691908 C2.57293186,4.58691908 2.62193273,4.56591871 2.6989341,4.53791821 C2.78993573,4.50991771 2.87393723,4.46091684 3.06994072,4.40491584 C3.46194772,4.28591371 3.95895658,4.15991147 4.60996819,4.09691034 C5.25397968,4.04090934 6.03099354,4.05490959 6.85070816,4.22291259 C7.66902276,4.39791571 8.53003812,4.72692158 9.32805235,5.20293007 C9.7060591,5.44793444 10.1120663,5.73493956 10.427072,6.01494456 C10.5670745,6.11994643 10.8050787,6.35795068 10.9450812,6.5049533 C11.1060841,6.67295629 11.2530867,6.84095929 11.4007893,7.01596241 C11.9670994,7.7159749 12.3871069,8.47198839 12.6601118,9.15800062 C12.8211147,9.55000762 12.9331167,9.92101423 13.0171182,10.24302 L14.5151449,10.24302 C15.1171556,10.24302 15.6491651,10.6000263 15.8801692,11.1530362 C16.1111734,11.7060461 15.9851711,12.3430574 15.5581635,12.7700651" id="Fill-1" transform="translate(8.994247, 10.494247) scale(-1, 1) rotate(-45.000000) translate(-8.994247, -10.494247) "></path>
+        </g>
+    </g>
+</svg>
diff --git a/src/components/library/library.css b/src/components/library/library.css
index df13ec5f71a..1419380c103 100644
--- a/src/components/library/library.css
+++ b/src/components/library/library.css
@@ -19,6 +19,24 @@
     height: calc(100% - $library-header-height - $library-filter-bar-height - 2rem);
 }
 
+.library-category {
+  display: flex;
+  flex-direction: column;
+}
+
+.library-category-title {
+  padding-Left: .5rem;
+  font-weight: bold;
+  font-size: 2rem;
+  color: $text-primary;
+}
+
+.library-category-items {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 1rem;
+}
+
 .filter-bar {
     display: flex;
     flex-direction: row;
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 48a1de5541d..8e4ac86f15a 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -10,6 +10,7 @@ import Divider from '../divider/divider.jsx';
 import Filter from '../filter/filter.jsx';
 import TagButton from '../../containers/tag-button.jsx';
 import Spinner from '../spinner/spinner.jsx';
+import {CATEGORIES} from '../../../src/lib/libraries/decks/index.jsx';
 
 import styles from './library.css';
 
@@ -23,6 +24,28 @@ const messages = defineMessages({
         id: 'gui.library.allTag',
         defaultMessage: 'All',
         description: 'Label for library tag to revert to all items after filtering by tag.'
+    },
+    // Strings here need to be defined statically
+    // https://formatjs.io/docs/getting-started/message-declaration/#pre-declaring-using-definemessage-for-later-consumption-less-recommended
+    [CATEGORIES.gettingStarted]: {
+        id: `gui.library.gettingStarted`,
+        defaultMessage: 'Getting Started',
+        description: 'Label for getting started category'
+    },
+    [CATEGORIES.basics]: {
+        id: `gui.library.basics`,
+        defaultMessage: 'Basics',
+        description: 'Label for basics category'
+    },
+    [CATEGORIES.intermediate]: {
+        id: `gui.library.intermediate`,
+        defaultMessage: 'Intermediate',
+        description: 'Label for intermediate category'
+    },
+    [CATEGORIES.prompts]: {
+        id: `gui.library.prompts`,
+        defaultMessage: 'Prompts',
+        description: 'Label for prompts category'
     }
 });
 
@@ -128,7 +151,7 @@ class LibraryComponent extends React.Component {
         this.setState({filterQuery: ''});
     }
     getFilteredData () {
-        if (this.state.selectedTag === 'all') {
+        if (this.state.selectedTag === ALL_TAG.tag) {
             if (!this.state.filterQuery) return this.props.data;
             return this.props.data.filter(dataItem => (
                 (dataItem.tags || [])
@@ -157,6 +180,58 @@ class LibraryComponent extends React.Component {
     setFilteredDataRef (ref) {
         this.filteredDataRef = ref;
     }
+    renderElement (data, index) {
+        return (<LibraryItem
+            bluetoothRequired={data.bluetoothRequired}
+            collaborator={data.collaborator}
+            description={data.description}
+            disabled={data.disabled}
+            extensionId={data.extensionId}
+            featured={data.featured}
+            hidden={data.hidden}
+            iconMd5={data.costumes ? data.costumes[0].md5ext : data.md5ext}
+            iconRawURL={data.rawURL}
+            icons={data.costumes}
+            id={index}
+            insetIconURL={data.insetIconURL}
+            internetConnectionRequired={data.internetConnectionRequired}
+            isPlaying={this.state.playingItem === index}
+            key={typeof data.name === 'string' ? data.name : data.rawURL}
+            name={data.name}
+            showPlayButton={this.props.showPlayButton}
+            onMouseEnter={this.handleMouseEnter}
+            onMouseLeave={this.handleMouseLeave}
+            onSelect={this.handleSelect}
+        />);
+    }
+    renderData (data) {
+        if (this.state.selectedTag !== ALL_TAG.tag) {
+            return data.map((dataItem, index) => this.renderElement(dataItem, index));
+        }
+
+        const dataByCategory = Object.groupBy(data, el => el.category);
+        const categoriesOrder = Object.values(CATEGORIES);
+
+        return Object.entries(dataByCategory)
+            .sort(([key1], [key2]) => categoriesOrder.indexOf(key1) - categoriesOrder.indexOf(key2))
+            .map(([key, values]) =>
+                (<div
+                    key={key}
+                    className={styles.libraryCategory}
+                >
+                    {key === 'undefined' ?
+                        null :
+                        <span className={styles.libraryCategoryTitle}>
+                            {this.props.intl.formatMessage(messages[key])}
+                        </span>
+                    }
+                    <div
+                        className={styles.libraryCategoryItems}
+                    >
+                        {values.map((dataItem, index) => this.renderElement(dataItem, index))}
+                    </div>
+                </div>));
+    }
     render () {
         return (
             <Modal
@@ -208,30 +283,7 @@ class LibraryComponent extends React.Component {
                     })}
                     ref={this.setFilteredDataRef}
                 >
-                    {this.state.loaded ? this.getFilteredData().map((dataItem, index) => (
-                        <LibraryItem
-                            bluetoothRequired={dataItem.bluetoothRequired}
-                            collaborator={dataItem.collaborator}
-                            description={dataItem.description}
-                            disabled={dataItem.disabled}
-                            extensionId={dataItem.extensionId}
-                            featured={dataItem.featured}
-                            hidden={dataItem.hidden}
-                            iconMd5={dataItem.costumes ? dataItem.costumes[0].md5ext : dataItem.md5ext}
-                            iconRawURL={dataItem.rawURL}
-                            icons={dataItem.costumes}
-                            id={index}
-                            insetIconURL={dataItem.insetIconURL}
-                            internetConnectionRequired={dataItem.internetConnectionRequired}
-                            isPlaying={this.state.playingItem === index}
-                            key={typeof dataItem.name === 'string' ? dataItem.name : dataItem.rawURL}
-                            name={dataItem.name}
-                            showPlayButton={this.props.showPlayButton}
-                            onMouseEnter={this.handleMouseEnter}
-                            onMouseLeave={this.handleMouseLeave}
-                            onSelect={this.handleSelect}
-                        />
-                    )) : (
+                    {this.state.loaded ? this.renderData(this.getFilteredData()) : (
                         <div className={styles.spinnerWrapper}>
                             <Spinner
                                 large
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index 458df186f94..1c3a7f4c9de 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -50,6 +50,7 @@ const SpriteSelectorItem = props => (
         {(props.selected && props.onDeleteButtonClick) ? (
             <DeleteButton
                 className={styles.deleteButton}
+                isConfirmationModalOpened={props.isDeleteConfirmationModalOpened}
                 onClick={props.onDeleteButtonClick}
             />
         ) : null }
@@ -102,7 +103,8 @@ SpriteSelectorItem.propTypes = {
     onMouseEnter: PropTypes.func,
     onMouseLeave: PropTypes.func,
     preventContextMenu: PropTypes.bool,
-    selected: PropTypes.bool.isRequired
+    selected: PropTypes.bool.isRequired,
+    isDeleteConfirmationModalOpened: PropTypes.bool
 };
 
 export default SpriteSelectorItem;
diff --git a/src/components/sprite-selector/sprite-list.jsx b/src/components/sprite-selector/sprite-list.jsx
index 3d191029345..c496bd73259 100644
--- a/src/components/sprite-selector/sprite-list.jsx
+++ b/src/components/sprite-selector/sprite-list.jsx
@@ -94,6 +94,8 @@ const SpriteList = function (props) {
                                 onDeleteButtonClick={onDeleteSprite}
                                 onDuplicateButtonClick={onDuplicateSprite}
                                 onExportButtonClick={onExportSprite}
+                                withDeleteConfirmation
+                                deleteConfirmationModalPosition={'left'}
                             />
                         </SortableAsset>
                     );
diff --git a/src/containers/sprite-selector-item.jsx b/src/containers/sprite-selector-item.jsx
index f946cf83f1d..1bedb4164da 100644
--- a/src/containers/sprite-selector-item.jsx
+++ b/src/containers/sprite-selector-item.jsx
@@ -10,6 +10,7 @@ import VM from 'scratch-vm';
 import getCostumeUrl from '../lib/get-costume-url';
 import DragRecognizer from '../lib/drag-recognizer';
 import {getEventXY} from '../lib/touch-utils';
+import DeleteConfirmationPrompt from '../components/delete-confirmation-prompt/delete-confirmation-prompt.jsx';
 
 import SpriteSelectorItemComponent from '../components/sprite-selector-item/sprite-selector-item.jsx';
 
@@ -19,8 +20,8 @@ class SpriteSelectorItem extends React.PureComponent {
         bindAll(this, [
             'getCostumeData',
             'setRef',
+            'setState',
             'handleClick',
-            'handleDelete',
             'handleDuplicate',
             'handleExport',
             'handleMouseEnter',
@@ -28,13 +29,18 @@ class SpriteSelectorItem extends React.PureComponent {
             'handleMouseDown',
             'handleDragEnd',
             'handleDrag',
-            'handleTouchEnd'
+            'handleTouchEnd',
+            'handleDeleteButtonClick',
+            'handleDeleteSpriteModalClose',
+            'handleDeleteSpriteModalConfirm'
         ]);
 
         this.dragRecognizer = new DragRecognizer({
             onDrag: this.handleDrag,
             onDragEnd: this.handleDragEnd
         });
+
+        this.state = {isDeletePromptOpen: false};
     }
     componentDidMount () {
         document.addEventListener('touchend', this.handleTouchEnd);
@@ -90,10 +96,6 @@ class SpriteSelectorItem extends React.PureComponent {
             this.props.onClick(this.props.id);
         }
     }
-    handleDelete (e) {
-        e.stopPropagation(); // To prevent from bubbling back to handleClick
-        this.props.onDeleteButtonClick(this.props.id);
-    }
     handleDuplicate (e) {
         e.stopPropagation(); // To prevent from bubbling back to handleClick
         this.props.onDuplicateButtonClick(this.props.id);
@@ -108,6 +110,22 @@ class SpriteSelectorItem extends React.PureComponent {
     handleMouseEnter () {
         this.props.dispatchSetHoveredSprite(this.props.id);
     }
+    handleDeleteButtonClick (e) {
+        e.stopPropagation(); // To prevent from bubbling back to handleClick
+
+        if (this.props.withDeleteConfirmation) {
+            this.setState({isDeletePromptOpen: true});
+        } else {
+            this.props.onDeleteButtonClick(this.props.id);
+        }
+    }
+    handleDeleteSpriteModalClose () {
+        this.setState({isDeletePromptOpen: false});
+    }
+    handleDeleteSpriteModalConfirm () {
+        this.props.onDeleteButtonClick(this.props.id);
+        this.setState({isDeletePromptOpen: false});
+    }
     setRef (component) {
         // Access the DOM node using .elem because it is going through ContextMenuTrigger
         this.ref = component && component.elem;
@@ -126,27 +144,36 @@ class SpriteSelectorItem extends React.PureComponent {
             receivedBlocks,
             costumeURL,
             vm,
+            deleteConfirmationModalPosition,
             /* eslint-enable no-unused-vars */
             ...props
         } = this.props;
-        return (
+        return (<>
+            {this.state.isDeletePromptOpen ? <DeleteConfirmationPrompt
+                onOk={this.handleDeleteSpriteModalConfirm}
+                onCancel={this.handleDeleteSpriteModalClose}
+                relativeElemRef={this.ref}
+                entityType={this.props.dragType}
+                modalPosition={deleteConfirmationModalPosition}
+            /> : null}
             <SpriteSelectorItemComponent
                 componentRef={this.setRef}
                 costumeURL={this.getCostumeData()}
                 preventContextMenu={this.dragRecognizer.gestureInProgress()}
                 onClick={this.handleClick}
-                onDeleteButtonClick={onDeleteButtonClick ? this.handleDelete : null}
+                onDeleteButtonClick={onDeleteButtonClick ? this.handleDeleteButtonClick : null}
                 onDuplicateButtonClick={onDuplicateButtonClick ? this.handleDuplicate : null}
                 onExportButtonClick={onExportButtonClick ? this.handleExport : null}
                 onMouseDown={this.handleMouseDown}
                 onMouseEnter={this.handleMouseEnter}
                 onMouseLeave={this.handleMouseLeave}
+                isDeleteConfirmationModalOpened={this.state.isDeletePromptOpen}
                 {...props}
             />
+        </>
         );
     }
 }
-
 SpriteSelectorItem.propTypes = {
     asset: PropTypes.instanceOf(storage.Asset),
     costumeURL: PropTypes.string,
@@ -164,6 +191,8 @@ SpriteSelectorItem.propTypes = {
     onExportButtonClick: PropTypes.func,
     receivedBlocks: PropTypes.bool.isRequired,
     selected: PropTypes.bool,
+    withDeleteConfirmation: PropTypes.bool,
+    deleteConfirmationModalPosition: PropTypes.string,
     vm: PropTypes.instanceOf(VM).isRequired
 };
 
diff --git a/src/containers/tips-library.jsx b/src/containers/tips-library.jsx
index 4899a7e1158..57088c4032a 100644
--- a/src/containers/tips-library.jsx
+++ b/src/containers/tips-library.jsx
@@ -78,6 +78,7 @@ class TipsLibrary extends React.PureComponent {
                 name: decksLibraryContent[id].name,
                 featured: true,
                 tags: decksLibraryContent[id].tags,
+                category: decksLibraryContent[id].category,
                 urlId: decksLibraryContent[id].urlId,
                 requiredProjectId: decksLibraryContent[id].requiredProjectId,
                 hidden: decksLibraryContent[id].hidden || false
diff --git a/src/lib/libraries/decks/index.jsx b/src/lib/libraries/decks/index.jsx
index b9c48850887..b66644c100b 100644
--- a/src/lib/libraries/decks/index.jsx
+++ b/src/lib/libraries/decks/index.jsx
@@ -65,6 +65,13 @@ import addEffectsThumb from './thumbnails/add-effects.jpg';
 import moveArrowKeysThumb from './thumbnails/move-arrow-keys.jpg';
 import spinThumb from './thumbnails/spin.jpg';
 
+export const CATEGORIES = {
+    gettingStarted: 'gettingStarted',
+    basics: 'basics',
+    intermediate: 'intermediate',
+    prompts: 'prompts'
+};
+
 export default {
 
     'intro-move-sayhello': {
@@ -76,6 +83,7 @@ export default {
             />
         ),
         tags: ['help', 'stuck', 'how', 'can', 'say'],
+        category: CATEGORIES.gettingStarted,
         img: libraryIntro,
         steps: [{
             video: 'intro-move-sayhello'
@@ -125,6 +133,7 @@ export default {
             />
         ),
         tags: ['help', 'stuck', 'how', 'can', 'say', 'asl', 'deaf', 'accessibile', 'hear'],
+        category: CATEGORIES.gettingStarted,
         img: libraryGettingStartedASL,
         steps: [{
             video: 'intro-getting-started-ASL'
@@ -148,6 +157,7 @@ export default {
         ),
         img: libraryAnimate,
         tags: ['animation', 'art', 'spin', 'grow'],
+        category: CATEGORIES.prompts,
         steps: [{
             video: 'animate-a-name'
         }, {
@@ -214,231 +224,99 @@ export default {
         urlId: 'name'
     },
 
-    'imagine': {
+    'Animate-A-Character': {
         name: (
             <FormattedMessage
-                defaultMessage="Imagine a World"
-                description="Name for the 'Imagine a World' how-to"
-                id="gui.howtos.imagine"
+                defaultMessage="Animate A Character"
+                description="Name for the 'Animate A Character' how-to"
+                id="gui.howtos.animate-char.name"
             />
         ),
-        tags: ['imagine'],
-        img: libraryImagine,
+        img: libraryAnimateChar,
+        category: CATEGORIES.prompts,
         steps: [{
-            video: 'imagine'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Type What You Want to Say"
-                    description="Step name for 'Type What You Want to Say' step"
-                    id="gui.howtos.imagine.step_imagineTypeWhatYouWant"
-                />
-            ),
-            image: 'imagineTypeWhatYouWant'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Click the Green Flag to Start"
-                    description="Step name for 'Click the Green Flag to Start' step"
-                    id="gui.howtos.imagine.step_imagineClickGreenFlag"
-                />
-            ),
-            image: 'imagineClickGreenFlag'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Choose Any Backdrop"
-                    description="Step name for 'Choose Any Backdrop' step"
-                    id="gui.howtos.imagine.step_imagineChooseBackdrop"
-                />
-            ),
-            image: 'imagineChooseBackdrop'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Choose Any Sprite"
-                    description="Step name for 'Choose Any Sprite' step"
-                    id="gui.howtos.imagine.step_imagineChooseSprite"
-                />
-            ),
-            image: 'imagineChooseSprite'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Press the Space Key to Glide"
-                    description="Step name for 'Press the Space Key to Glide' step"
-                    id="gui.howtos.imagine.step_imagineFlyAround"
-                />
-            ),
-            image: 'imagineFlyAround'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Choose Another Sprite"
-                    description="Step name for 'Choose Another Sprite' step"
-                    id="gui.howtos.imagine.step_imagineChooseAnotherSprite"
-                />
-            ),
-            image: 'imagineChooseAnotherSprite'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Move Left-Right"
-                    description="Step name for 'Move Left-Right' step"
-                    id="gui.howtos.imagine.step_imagineLeftRight"
-                />
-            ),
-            image: 'imagineLeftRight'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Move Up-Down"
-                    description="Step name for 'Move Up-Down' step"
-                    id="gui.howtos.imagine.step_imagineUpDown"
-                />
-            ),
-            image: 'imagineUpDown'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Change Costumes"
-                    description="Step name for 'Change Costumes' step"
-                    id="gui.howtos.imagine.step_imagineChangeCostumes"
-                />
-            ),
-            image: 'imagineChangeCostumes'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Glide to a Point"
-                    description="Step name for 'Glide to a Point' step"
-                    id="gui.howtos.imagine.step_imagineGlideToPoint"
-                />
-            ),
-            image: 'imagineGlideToPoint'
-        }, {
+            video: 's228u3g5u9'
+        },
+        {
             title: (
                 <FormattedMessage
-                    defaultMessage="Grow and Shrink"
-                    description="Step name for 'Grow and Shrink' step"
-                    id="gui.howtos.imagine.step_imagineGrowShrink"
+                    defaultMessage="Add a Backdrop"
+                    description="Step name for 'Add a Backdrop' step"
+                    id="gui.howtos.animate-char.step_addbg"
                 />
             ),
-            image: 'imagineGrowShrink'
+            image: 'animateCharPickBackdrop'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Choose Another Backdrop"
-                    description="Step name for 'Choose Another Backdrop' step"
-                    id="gui.howtos.imagine.step_imagineChooseAnotherBackdrop"
+                    defaultMessage="Add a Sprite"
+                    description="Step name for 'Add a Sprite' step"
+                    id="gui.howtos.animate-char.step_addsprite"
                 />
             ),
-            image: 'imagineChooseAnotherBackdrop'
+            image: 'animateCharPickSprite'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Switch Backdrops"
-                    description="Step name for 'Switch Backdrops' step"
-                    id="gui.howtos.imagine.step_imagineSwitchBackdrops"
+                    defaultMessage="Say Something"
+                    description="Step name for 'Say Something' step"
+                    id="gui.howtos.animate-char.step_saysomething"
                 />
             ),
-            image: 'imagineSwitchBackdrops'
+            image: 'animateCharSaySomething'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Add a Sound"
-                    description="Step name for 'Add a Sound' step"
-                    id="gui.howtos.imagine.step_imagineRecordASound"
+                    defaultMessage="Add Sound"
+                    description="Step name for 'Add Sound' step"
+                    id="gui.howtos.animate-char.step_addsound"
                 />
             ),
-            image: 'imagineRecordASound'
+            image: 'animateCharAddSound'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Choose Your Sound"
-                    description="Step name for 'Choose Your Sound' step"
-                    id="gui.howtos.imagine.step_imagineChooseSound"
+                    defaultMessage="Animate Talking"
+                    description="Step name for 'Animate Talking' step"
+                    id="gui.howtos.animate-char.step_animatetalking"
                 />
             ),
-            image: 'imagineChooseSound'
+            image: 'animateCharTalk'
         }, {
-            deckIds: [
-                'hide-and-show',
-                'Chase-Game'
-            ]
-        }
-        ],
-        urlId: 'imagine'
-    },
-    
-    'Make-Music': {
-        name: (
-            <FormattedMessage
-                defaultMessage="Make Music"
-                description="Name for the 'Make Music' how-to"
-                id="gui.howtos.make-music.name"
-            />
-        ),
-        img: libraryMakeMusic,
-        tags: ['music', 'sound', 'instrument', 'play', 'song', 'band'],
-        steps: [{
-            video: 'Make-Music'
-        },
-        {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Pick an Instrument Sprite "
-                    description="Step name for 'Pick an Instrument Sprite' step"
-                    id="gui.howtos.Make-Music.step_PickInstrument"
-                />
-            ),
-            image: 'musicPickInstrument'
-        },
-        {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Play Sound When Clicked"
-                    description="Step name for 'Play Sound When Clicked' step"
-                    id="gui.howtos.Make-Music.step_PlaySoundClick"
-                />
-            ),
-            image: 'musicPlaySound'
-        },
-        {
             title: (
                 <FormattedMessage
-                    defaultMessage="Create a Song"
-                    description="Step name for 'Create a Song' step"
-                    id="gui.howtos.Make-Music.step_MakeSong"
+                    defaultMessage="Move Using Arrow Keys"
+                    description="Step name for 'Move Using Arrow Keys' step"
+                    id="gui.howtos.animate-char.step_arrowkeys"
                 />
             ),
-            image: 'musicMakeSong'
+            image: 'animateCharMove'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Choose a Drum & Make a Beat"
-                    description="Step name for 'Choose a Drum & Make a Beat' step"
-                    id="gui.howtos.make-music.step_MakeBeat"
+                    defaultMessage="Jump"
+                    description="Step name for 'Jump' step"
+                    id="gui.howtos.animate-char.step_jump"
                 />
             ),
-            image: 'musicMakeBeat'
+            image: 'animateCharJump'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Choose the Microphone Sprite & Surprise Beatbox"
-                    description="Step name for 'Choose the Microphone Sprite & Surprise Beatbox' step"
-                    id="gui.howtos.make-music.step_MakeBeatBox"
+                    defaultMessage="Change Color"
+                    description="Step name for 'Change Color' step"
+                    id="gui.howtos.animate-char.step_changecolor"
                 />
             ),
-            image: 'musicMakeBeatbox'
+            image: 'animateCharChangeColor'
         }, {
             deckIds: [
-                'add-a-backdrop',
-                'add-sprite'
+                'code-cartoon',
+                'Tell-A-Story'
             ]
         }
         ],
-        urlId: 'music'
+        urlId: 'animate-a-character'
     },
 
     'Tell-A-Story': {
@@ -450,6 +328,7 @@ export default {
             />
         ),
         img: libraryStory,
+        category: CATEGORIES.prompts,
         steps: [{
             video: 'stah7jjorp'
         },
@@ -554,291 +433,312 @@ export default {
         urlId: 'tell-a-story'
     },
 
-    'Chase-Game': {
+    'say-it-out-loud': {
         name: (
             <FormattedMessage
-                defaultMessage="Make a Chase Game"
-                description="Name for the 'Make a Chase Game' how-to"
-                id="gui.howtos.make-a-chase-game.name"
+                defaultMessage="Create Animations That Talk"
+                description="Name for the 'Create Animations That Talk' how-to"
+                id="gui.howtos.say-it-out-loud"
             />
         ),
-        img: libraryChaseGame,
-        tags: ['games', 'arrow', 'keyboard', 'score'],
+        img: libraryTXTSpeech,
+        category: CATEGORIES.prompts,
         steps: [{
-            video: 'Chase-Game'
-        },
-        {
+            video: 'k54n8uwcty',
+            trackingPixel: (
+                <img src="https://code.org/api/hour/begin_scratch_talk.png" />
+            )
+        }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Add a Backdrop"
-                    description="Step name for 'Add a Backdrop' step"
-                    id="gui.howtos.Chase-Game.step_BG"
+                    defaultMessage="Add the Text to Speech blocks"
+                    description="Step name for 'Add the Text to Speech blocks' step"
+                    id="gui.howtos.say-it-out-loud.step_AddTXTextension"
                 />
             ),
-            image: 'chaseGameAddBackdrop'
+            image: 'speechAddExtension'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Add a Sprite"
-                    description="Step name for 'Add a Sprite' step"
-                    id="gui.howtos.chase-game.step_AddOcto"
+                    defaultMessage="Say Something"
+                    description="Step name for 'Say Something' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTSpeech"
                 />
             ),
-            image: 'chaseGameAddSprite1'
+            image: 'speechSaySomething'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Move Right & Left With Arrow Keys"
-                    description="Step name for 'Move Right & Left With Arrow Keys' step"
-                    id="gui.howtos.make-music.step_LeftRight"
+                    defaultMessage="Set a Voice"
+                    description="Step name for 'Set a Voice"
+                    id="gui.howtos.say-it-out-loud_TXTSetVoice"
                 />
             ),
-            image: 'chaseGameRightLeft'
+            image: 'speechSetVoice'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Move Up & Down With Arrow Keys"
-                    description="Step name for 'Move Up & Down With Arrow Keys' step"
-                    id="gui.howtos.Chase-Game.step_UpDown"
+                    defaultMessage="Move Around"
+                    description="Step name for 'Move Around' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTMove"
                 />
             ),
-            image: 'chaseGameUpDown'
+            image: 'speechMoveAround'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Add Another Sprite"
-                    description="Step name for 'Add Another Sprite' step"
-                    id="gui.howtos.Chase-Game.step_AddStar"
+                    defaultMessage="Add a Backdrop"
+                    description="Step name for 'Add a Backdrop' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTBackdrop"
                 />
             ),
-            image: 'chaseGameAddSprite2'
+            image: 'speechAddBackdrop'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Move Randomly"
-                    description="Step name for 'Move Randomly' step"
-                    id="gui.howtos.Chase-Game.step_MoveRandom"
+                    defaultMessage="Add Another Character"
+                    description="Step name for 'Add Another Character' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTAddSprite"
                 />
             ),
-            image: 'chaseGameMoveRandomly'
+            image: 'speechAddSprite'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="In Octopus Sprite, When Touching Play Sound"
-                    description="Step name for 'In Octopus Sprite, When Touching Play Sound' step"
-                    id="gui.howtos.Chase-Game.step_WhenTouch"
+                    defaultMessage="Perform a Song"
+                    description="Step name for 'Perform a Song' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTSong"
                 />
             ),
-            image: 'chaseGamePlaySound'
+            image: 'speechSong'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Create Score Variable"
-                    description="Step name for 'Create Score Variable"
-                    id="gui.howtos.Chase-Game.step_ScoreVariable"
+                    defaultMessage="Change Color"
+                    description="Step name for 'Change Color' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTColor"
                 />
             ),
-            image: 'chaseGameAddVariable'
+            image: 'speechChangeColor'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="In Octopus Sprite, When Touching Add Score"
-                    description="Step name for 'In Octopus Sprite, When Touching Add Score step"
-                    id="gui.howtos.Chase-Game.ScoreWhenTouch"
+                    defaultMessage="Spin Around"
+                    description="Step name for 'Spin Around"
+                    id="gui.howtos.say-it-out-loud.step_TXTSpin"
                 />
             ),
-            image: 'chaseGameChangeScore'
+            image: 'speechSpin'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Grow and Shrink"
+                    description="Step name for 'Grow and Shrink' step"
+                    id="gui.howtos.say-it-out-loud.step_TXTGrow"
+                />
+            ),
+            image: 'speechGrowShrink'
         }, {
             deckIds: [
-                'add-effects',
-                'move-around-with-arrow-keys'
+                'animate-a-name',
+                'talking'
             ]
         }
         ],
-        urlId: 'chase-game'
+        urlId: 'animations-that-talk'
     },
 
-    'Animate-A-Character': {
+    'imagine': {
         name: (
             <FormattedMessage
-                defaultMessage="Animate A Character"
-                description="Name for the 'Animate A Character' how-to"
-                id="gui.howtos.animate-char.name"
+                defaultMessage="Imagine a World"
+                description="Name for the 'Imagine a World' how-to"
+                id="gui.howtos.imagine"
             />
         ),
-        img: libraryAnimateChar,
+        tags: ['imagine'],
+        img: libraryImagine,
+        category: CATEGORIES.prompts,
         steps: [{
-            video: 's228u3g5u9'
-        },
-        {
+            video: 'imagine'
+        }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Add a Backdrop"
-                    description="Step name for 'Add a Backdrop' step"
-                    id="gui.howtos.animate-char.step_addbg"
+                    defaultMessage="Type What You Want to Say"
+                    description="Step name for 'Type What You Want to Say' step"
+                    id="gui.howtos.imagine.step_imagineTypeWhatYouWant"
                 />
             ),
-            image: 'animateCharPickBackdrop'
+            image: 'imagineTypeWhatYouWant'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Add a Sprite"
-                    description="Step name for 'Add a Sprite' step"
-                    id="gui.howtos.animate-char.step_addsprite"
+                    defaultMessage="Click the Green Flag to Start"
+                    description="Step name for 'Click the Green Flag to Start' step"
+                    id="gui.howtos.imagine.step_imagineClickGreenFlag"
                 />
             ),
-            image: 'animateCharPickSprite'
+            image: 'imagineClickGreenFlag'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Say Something"
-                    description="Step name for 'Say Something' step"
-                    id="gui.howtos.animate-char.step_saysomething"
+                    defaultMessage="Choose Any Backdrop"
+                    description="Step name for 'Choose Any Backdrop' step"
+                    id="gui.howtos.imagine.step_imagineChooseBackdrop"
                 />
             ),
-            image: 'animateCharSaySomething'
+            image: 'imagineChooseBackdrop'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Add Sound"
-                    description="Step name for 'Add Sound' step"
-                    id="gui.howtos.animate-char.step_addsound"
+                    defaultMessage="Choose Any Sprite"
+                    description="Step name for 'Choose Any Sprite' step"
+                    id="gui.howtos.imagine.step_imagineChooseSprite"
                 />
             ),
-            image: 'animateCharAddSound'
+            image: 'imagineChooseSprite'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Animate Talking"
-                    description="Step name for 'Animate Talking' step"
-                    id="gui.howtos.animate-char.step_animatetalking"
+                    defaultMessage="Press the Space Key to Glide"
+                    description="Step name for 'Press the Space Key to Glide' step"
+                    id="gui.howtos.imagine.step_imagineFlyAround"
                 />
             ),
-            image: 'animateCharTalk'
+            image: 'imagineFlyAround'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Move Using Arrow Keys"
-                    description="Step name for 'Move Using Arrow Keys' step"
-                    id="gui.howtos.animate-char.step_arrowkeys"
+                    defaultMessage="Choose Another Sprite"
+                    description="Step name for 'Choose Another Sprite' step"
+                    id="gui.howtos.imagine.step_imagineChooseAnotherSprite"
                 />
             ),
-            image: 'animateCharMove'
+            image: 'imagineChooseAnotherSprite'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Jump"
-                    description="Step name for 'Jump' step"
-                    id="gui.howtos.animate-char.step_jump"
+                    defaultMessage="Move Left-Right"
+                    description="Step name for 'Move Left-Right' step"
+                    id="gui.howtos.imagine.step_imagineLeftRight"
                 />
             ),
-            image: 'animateCharJump'
+            image: 'imagineLeftRight'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Change Color"
-                    description="Step name for 'Change Color' step"
-                    id="gui.howtos.animate-char.step_changecolor"
+                    defaultMessage="Move Up-Down"
+                    description="Step name for 'Move Up-Down' step"
+                    id="gui.howtos.imagine.step_imagineUpDown"
                 />
             ),
-            image: 'animateCharChangeColor'
+            image: 'imagineUpDown'
         }, {
-            deckIds: [
-                'code-cartoon',
-                'Tell-A-Story'
-            ]
-        }
-        ],
-        urlId: 'animate-a-character'
-    },
-
-    'Make-A-Game': {
-        name: (
-            <FormattedMessage
-                defaultMessage="Make a Clicker Game"
-                description="Name for the 'Make a Clicker Game' how-to"
-                id="gui.howtos.make-a-game.name"
-            />
-        ),
-        img: libraryMakeAGame,
-        tags: ['games', 'click', 'clicked', 'score'],
-        steps: [{
-            video: 'Make-A-Game'
-        },
-        {
             title: (
                 <FormattedMessage
-                    defaultMessage="Pick A Sprite"
-                    description="Step name for 'Pick A Sprite' step"
-                    id="gui.howtos.Make-A-Game.step_GamePickSprite"
+                    defaultMessage="Change Costumes"
+                    description="Step name for 'Change Costumes' step"
+                    id="gui.howtos.imagine.step_imagineChangeCostumes"
                 />
             ),
-            image: 'popGamePickSprite'
+            image: 'imagineChangeCostumes'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Play Sound When Clicked"
-                    description="Play Sound When Clicked' step"
-                    id="gui.howtos.make-a-game.step_GamePlaySound"
+                    defaultMessage="Glide to a Point"
+                    description="Step name for 'Glide to a Point' step"
+                    id="gui.howtos.imagine.step_imagineGlideToPoint"
                 />
             ),
-            image: 'popGamePlaySound'
+            image: 'imagineGlideToPoint'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Create Score Variable"
-                    description="Step name for 'Create Score Variable' step"
-                    id="gui.howtos.make-a-game.step_GameAddScore"
+                    defaultMessage="Grow and Shrink"
+                    description="Step name for 'Grow and Shrink' step"
+                    id="gui.howtos.imagine.step_imagineGrowShrink"
                 />
             ),
-            image: 'popGameAddScore'
+            image: 'imagineGrowShrink'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="When Clicked Increase Score"
-                    description="Step name for 'When Clicked Increase Score' step"
-                    id="gui.howtos.make-a-game.step_GameChangeScore"
+                    defaultMessage="Choose Another Backdrop"
+                    description="Step name for 'Choose Another Backdrop' step"
+                    id="gui.howtos.imagine.step_imagineChooseAnotherBackdrop"
                 />
             ),
-
-            image: 'popGameChangeScore'
+            image: 'imagineChooseAnotherBackdrop'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Go to a random position"
-                    description="Step name for 'Go to a random position' step"
-                    id="gui.howtos.make-a-game.step_Random"
+                    defaultMessage="Switch Backdrops"
+                    description="Step name for 'Switch Backdrops' step"
+                    id="gui.howtos.imagine.step_imagineSwitchBackdrops"
                 />
             ),
-            image: 'popGameRandomPosition'
+            image: 'imagineSwitchBackdrops'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Change Color"
-                    description="Step name for 'Change Color' step"
-                    id="gui.howtos.make-music.step_GameChangeColor"
+                    defaultMessage="Add a Sound"
+                    description="Step name for 'Add a Sound' step"
+                    id="gui.howtos.imagine.step_imagineRecordASound"
                 />
             ),
-            image: 'popGameChangeColor'
+            image: 'imagineRecordASound'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Reset Score"
-                    description="Step name for 'Reset Score' step"
-                    id="gui.howtos.make-music.step_ResetScore"
+                    defaultMessage="Choose Your Sound"
+                    description="Step name for 'Choose Your Sound' step"
+                    id="gui.howtos.imagine.step_imagineChooseSound"
                 />
             ),
-            image: 'popGameResetScore'
+            image: 'imagineChooseSound'
         }, {
             deckIds: [
-                'add-a-backdrop',
-                'move-around-with-arrow-keys'
+                'hide-and-show',
+                'Chase-Game'
             ]
         }
         ],
-        urlId: 'clicker-game'
+        urlId: 'imagine'
     },
 
+    'add-effects': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Add Effects"
+                description="Name for the 'Add Effects' how-to"
+                id="gui.howtos.add-effects.name"
+            />
+        ),
+        tags: ['animation', 'art', 'games', 'stories', '8-bit', 'brightness', 'ghost', 'transparency', 'opacity',
+            'fx', 'color', 'fisheye', 'whirl', 'twist', 'pixelate', 'mosaic', '8bit'],
+        category: CATEGORIES.intermediate,
+        img: addEffectsThumb,
+        steps: [{
+            video: 'add-effects'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Add Effects"
+                    description="Step name for 'Add Effects' step"
+                    id="gui.howtos.videosens.step_addEffects"
+                />
+            ),
+            image: 'addEffects'
+        }, {
+            deckIds: [
+                'add-a-backdrop',
+                'code-cartoon'
+            ]
+        }],
+        urlId: 'add-effects'
+    },
+    
+
     'make-it-fly': {
         name: (
             <FormattedMessage
@@ -848,6 +748,7 @@ export default {
             />
         ),
         tags: ['game', 'fly', 'how', 'can', 'animation'],
+        category: CATEGORIES.intermediate,
         img: libraryMakeFly,
         steps: [{
             video: 'zbtdx2dem9'
@@ -968,7 +869,78 @@ export default {
         ],
         urlId: 'make-it-fly'
     },
-
+    
+    'Make-Music': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Make Music"
+                description="Name for the 'Make Music' how-to"
+                id="gui.howtos.make-music.name"
+            />
+        ),
+        img: libraryMakeMusic,
+        tags: ['music', 'sound', 'instrument', 'play', 'song', 'band'],
+        category: CATEGORIES.intermediate,
+        steps: [{
+            video: 'Make-Music'
+        },
+        {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Pick an Instrument Sprite "
+                    description="Step name for 'Pick an Instrument Sprite' step"
+                    id="gui.howtos.Make-Music.step_PickInstrument"
+                />
+            ),
+            image: 'musicPickInstrument'
+        },
+        {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Play Sound When Clicked"
+                    description="Step name for 'Play Sound When Clicked' step"
+                    id="gui.howtos.Make-Music.step_PlaySoundClick"
+                />
+            ),
+            image: 'musicPlaySound'
+        },
+        {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Create a Song"
+                    description="Step name for 'Create a Song' step"
+                    id="gui.howtos.Make-Music.step_MakeSong"
+                />
+            ),
+            image: 'musicMakeSong'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose a Drum & Make a Beat"
+                    description="Step name for 'Choose a Drum & Make a Beat' step"
+                    id="gui.howtos.make-music.step_MakeBeat"
+                />
+            ),
+            image: 'musicMakeBeat'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose the Microphone Sprite & Surprise Beatbox"
+                    description="Step name for 'Choose the Microphone Sprite & Surprise Beatbox' step"
+                    id="gui.howtos.make-music.step_MakeBeatBox"
+                />
+            ),
+            image: 'musicMakeBeatbox'
+        }, {
+            deckIds: [
+                'add-a-backdrop',
+                'add-sprite'
+            ]
+        }
+        ],
+        urlId: 'music'
+    },
+    
     'pong': {
         name: (
             <FormattedMessage
@@ -979,6 +951,7 @@ export default {
         ),
         tags: ['pong', 'game'],
         img: libraryPong,
+        category: CATEGORIES.prompts,
         steps: [{
             video: 'pong-game'
         },
@@ -1003,110 +976,303 @@ export default {
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Bounce Around"
-                    description="Step name for 'Bounce Around' step"
-                    id="gui.howtos.pong.step_pongBounceAround"
+                    defaultMessage="Bounce Around"
+                    description="Step name for 'Bounce Around' step"
+                    id="gui.howtos.pong.step_pongBounceAround"
+                />
+            ),
+            image: 'pongBounceAround'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Add a Paddle"
+                    description="Step name for 'Add a Paddle' step"
+                    id="gui.howtos.pong.step_pongAddPaddle"
+                />
+            ),
+            image: 'pongAddPaddle'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Move the Paddle"
+                    description="Step name for 'Move the Paddle' step"
+                    id="gui.howtos.pong.step_pongMoveThePaddle"
+                />
+            ),
+            image: 'pongMoveThePaddle'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Select the Ball Sprite"
+                    description="Step name for 'Select the Ball Sprite' step"
+                    id="gui.howtos.pong.step_pongSelectBallSprite"
+                />
+            ),
+            image: 'pongSelectBallSprite'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Add Code to Bounce the Ball Off the Paddle"
+                    description="Step name for 'Add Code to Bounce the Ball Off the Paddle' step"
+                    id="gui.howtos.pong.step_pongAddMoreCodeToBall"
+                />
+            ),
+            image: 'pongAddMoreCodeToBall'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Add a Score"
+                    description="Step name for 'Add a Score' step"
+                    id="gui.howtos.pong.step_pongAddAScore"
+                />
+            ),
+            image: 'pongAddAScore'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Choose 'Score' from the Menu"
+                    description="Step name for 'Choose 'Score' from the Menu' step"
+                    id="gui.howtos.pong.step_pongChooseScoreFromMenu"
+                />
+            ),
+            image: 'pongChooseScoreFromMenu'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Insert the 'Change Score' Block"
+                    description="Step name for 'Insert the 'Change Score' Block' step"
+                    id="gui.howtos.pong.step_pongInsertChangeScoreBlock"
+                />
+            ),
+            image: 'pongInsertChangeScoreBlock'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Reset Score"
+                    description="Step name for 'Reset Score' step"
+                    id="gui.howtos.pong.step_pongResetScore"
+                />
+            ),
+            image: 'pongResetScore'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Add the Line Sprite"
+                    description="Step name for 'Add the Line Sprite' step"
+                    id="gui.howtos.pong.step_pongAddLineSprite"
+                />
+            ),
+            image: 'pongAddLineSprite'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Game Over"
+                    description="Step name for 'Game Over' step"
+                    id="gui.howtos.pong.step_pongGameOver"
+                />
+            ),
+            image: 'pongGameOver'
+        }, {
+            deckIds: [
+                'add-effects',
+                'Video-Sensing'
+            ]
+        }
+        ],
+        urlId: 'pong'
+    },
+    
+    'Make-A-Game': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Make a Clicker Game"
+                description="Name for the 'Make a Clicker Game' how-to"
+                id="gui.howtos.make-a-game.name"
+            />
+        ),
+        img: libraryMakeAGame,
+        tags: ['games', 'click', 'clicked', 'score'],
+        category: CATEGORIES.prompts,
+        steps: [{
+            video: 'Make-A-Game'
+        },
+        {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Pick A Sprite"
+                    description="Step name for 'Pick A Sprite' step"
+                    id="gui.howtos.Make-A-Game.step_GamePickSprite"
+                />
+            ),
+            image: 'popGamePickSprite'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Play Sound When Clicked"
+                    description="Play Sound When Clicked' step"
+                    id="gui.howtos.make-a-game.step_GamePlaySound"
+                />
+            ),
+            image: 'popGamePlaySound'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Create Score Variable"
+                    description="Step name for 'Create Score Variable' step"
+                    id="gui.howtos.make-a-game.step_GameAddScore"
+                />
+            ),
+            image: 'popGameAddScore'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="When Clicked Increase Score"
+                    description="Step name for 'When Clicked Increase Score' step"
+                    id="gui.howtos.make-a-game.step_GameChangeScore"
+                />
+            ),
+
+            image: 'popGameChangeScore'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Go to a random position"
+                    description="Step name for 'Go to a random position' step"
+                    id="gui.howtos.make-a-game.step_Random"
+                />
+            ),
+            image: 'popGameRandomPosition'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Change Color"
+                    description="Step name for 'Change Color' step"
+                    id="gui.howtos.make-music.step_GameChangeColor"
                 />
             ),
-            image: 'pongBounceAround'
+            image: 'popGameChangeColor'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Add a Paddle"
-                    description="Step name for 'Add a Paddle' step"
-                    id="gui.howtos.pong.step_pongAddPaddle"
+                    defaultMessage="Reset Score"
+                    description="Step name for 'Reset Score' step"
+                    id="gui.howtos.make-music.step_ResetScore"
                 />
             ),
-            image: 'pongAddPaddle'
+            image: 'popGameResetScore'
         }, {
+            deckIds: [
+                'add-a-backdrop',
+                'move-around-with-arrow-keys'
+            ]
+        }
+        ],
+        urlId: 'clicker-game'
+    },
+
+    'Chase-Game': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Make a Chase Game"
+                description="Name for the 'Make a Chase Game' how-to"
+                id="gui.howtos.make-a-chase-game.name"
+            />
+        ),
+        img: libraryChaseGame,
+        tags: ['games', 'arrow', 'keyboard', 'score'],
+        category: CATEGORIES.prompts,
+        steps: [{
+            video: 'Chase-Game'
+        },
+        {
             title: (
                 <FormattedMessage
-                    defaultMessage="Move the Paddle"
-                    description="Step name for 'Move the Paddle' step"
-                    id="gui.howtos.pong.step_pongMoveThePaddle"
+                    defaultMessage="Add a Backdrop"
+                    description="Step name for 'Add a Backdrop' step"
+                    id="gui.howtos.Chase-Game.step_BG"
                 />
             ),
-            image: 'pongMoveThePaddle'
+            image: 'chaseGameAddBackdrop'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Select the Ball Sprite"
-                    description="Step name for 'Select the Ball Sprite' step"
-                    id="gui.howtos.pong.step_pongSelectBallSprite"
+                    defaultMessage="Add a Sprite"
+                    description="Step name for 'Add a Sprite' step"
+                    id="gui.howtos.chase-game.step_AddOcto"
                 />
             ),
-            image: 'pongSelectBallSprite'
+            image: 'chaseGameAddSprite1'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Add Code to Bounce the Ball Off the Paddle"
-                    description="Step name for 'Add Code to Bounce the Ball Off the Paddle' step"
-                    id="gui.howtos.pong.step_pongAddMoreCodeToBall"
+                    defaultMessage="Move Right & Left With Arrow Keys"
+                    description="Step name for 'Move Right & Left With Arrow Keys' step"
+                    id="gui.howtos.make-music.step_LeftRight"
                 />
             ),
-            image: 'pongAddMoreCodeToBall'
+            image: 'chaseGameRightLeft'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Add a Score"
-                    description="Step name for 'Add a Score' step"
-                    id="gui.howtos.pong.step_pongAddAScore"
+                    defaultMessage="Move Up & Down With Arrow Keys"
+                    description="Step name for 'Move Up & Down With Arrow Keys' step"
+                    id="gui.howtos.Chase-Game.step_UpDown"
                 />
             ),
-            image: 'pongAddAScore'
+            image: 'chaseGameUpDown'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Choose 'Score' from the Menu"
-                    description="Step name for 'Choose 'Score' from the Menu' step"
-                    id="gui.howtos.pong.step_pongChooseScoreFromMenu"
+                    defaultMessage="Add Another Sprite"
+                    description="Step name for 'Add Another Sprite' step"
+                    id="gui.howtos.Chase-Game.step_AddStar"
                 />
             ),
-            image: 'pongChooseScoreFromMenu'
+            image: 'chaseGameAddSprite2'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Insert the 'Change Score' Block"
-                    description="Step name for 'Insert the 'Change Score' Block' step"
-                    id="gui.howtos.pong.step_pongInsertChangeScoreBlock"
+                    defaultMessage="Move Randomly"
+                    description="Step name for 'Move Randomly' step"
+                    id="gui.howtos.Chase-Game.step_MoveRandom"
                 />
             ),
-            image: 'pongInsertChangeScoreBlock'
+            image: 'chaseGameMoveRandomly'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Reset Score"
-                    description="Step name for 'Reset Score' step"
-                    id="gui.howtos.pong.step_pongResetScore"
+                    defaultMessage="In Octopus Sprite, When Touching Play Sound"
+                    description="Step name for 'In Octopus Sprite, When Touching Play Sound' step"
+                    id="gui.howtos.Chase-Game.step_WhenTouch"
                 />
             ),
-            image: 'pongResetScore'
+            image: 'chaseGamePlaySound'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Add the Line Sprite"
-                    description="Step name for 'Add the Line Sprite' step"
-                    id="gui.howtos.pong.step_pongAddLineSprite"
+                    defaultMessage="Create Score Variable"
+                    description="Step name for 'Create Score Variable"
+                    id="gui.howtos.Chase-Game.step_ScoreVariable"
                 />
             ),
-            image: 'pongAddLineSprite'
+            image: 'chaseGameAddVariable'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Game Over"
-                    description="Step name for 'Game Over' step"
-                    id="gui.howtos.pong.step_pongGameOver"
+                    defaultMessage="In Octopus Sprite, When Touching Add Score"
+                    description="Step name for 'In Octopus Sprite, When Touching Add Score step"
+                    id="gui.howtos.Chase-Game.ScoreWhenTouch"
                 />
             ),
-            image: 'pongGameOver'
+            image: 'chaseGameChangeScore'
         }, {
             deckIds: [
                 'add-effects',
-                'Video-Sensing'
+                'move-around-with-arrow-keys'
             ]
         }
         ],
-        urlId: 'pong'
+        urlId: 'chase-game'
     },
 
     'code-cartoon': {
@@ -1120,6 +1286,7 @@ export default {
         tags: ['code-cartoon'],
         requiredProjectId: '331474033',
         img: libraryCodeCartoon,
+        category: CATEGORIES.prompts,
         steps: [{
             video: 'code-cartoon'
         }, {
@@ -1241,6 +1408,7 @@ export default {
         ),
         requiredProjectId: '249143200',
         img: libraryCartoonNetwork,
+        category: CATEGORIES.prompts,
         steps: [{
             video: 'uz5oz5h9yg',
             trackingPixel: (
@@ -1314,194 +1482,81 @@ export default {
                 <FormattedMessage
                     defaultMessage="Level Up: Change Backdrop"
                     description="Step name for 'Level Up: Change Backdrop' step"
-                    id="gui.howtos.cartoon-network.step_CNbackdrop"
-                />
-            ),
-            image: 'cnBackdrop'
-        },
-        {
-            video: '6o76f5ivo1'
-        },
-        {
-            deckIds: [
-                'switch-costume',
-                'add-effects'
-            ]
-        }
-        ],
-        urlId: 'animate-an-adventure-game'
-    },
-
-    'Video-Sensing': {
-        name: (
-            <FormattedMessage
-                defaultMessage="Video Sensing"
-                description="Name for the 'Video Sensing' how-to"
-                id="gui.howtos.videosens.name"
-            />
-        ),
-        img: libraryVideoSens,
-        steps: [{
-            video: '3pd1z110d6'
-        },
-        {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Add Extension"
-                    description="Step name for 'Add Extension' step"
-                    id="gui.howtos.videosens.step_addextension"
-                />
-            ),
-            image: 'videoAddExtension'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Pet the Cat"
-                    description="Step name for 'Pet the Cat' step"
-                    id="gui.howtos.videosens.step_pet"
-                />
-            ),
-            image: 'videoPet'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Animate"
-                    description="Step name for 'Animate' step"
-                    id="gui.howtos.videosens.step_animate"
-                />
-            ),
-            image: 'videoAnimate'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Pop a Balloon"
-                    description="Step name for 'Pop a Balloon' step"
-                    id="gui.howtos.videosens.step_pop"
-                />
-            ),
-            image: 'videoPop'
-        }, {
-            deckIds: [
-                'Make-Music',
-                'add-effects'
-            ]
-        }
-        ],
-        urlId: 'video-sensing'
-    },
-
-    'say-it-out-loud': {
-        name: (
-            <FormattedMessage
-                defaultMessage="Create Animations That Talk"
-                description="Name for the 'Create Animations That Talk' how-to"
-                id="gui.howtos.say-it-out-loud"
-            />
-        ),
-        img: libraryTXTSpeech,
-        steps: [{
-            video: 'k54n8uwcty',
-            trackingPixel: (
-                <img src="https://code.org/api/hour/begin_scratch_talk.png" />
-            )
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Add the Text to Speech blocks"
-                    description="Step name for 'Add the Text to Speech blocks' step"
-                    id="gui.howtos.say-it-out-loud.step_AddTXTextension"
-                />
-            ),
-            image: 'speechAddExtension'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Say Something"
-                    description="Step name for 'Say Something' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTSpeech"
-                />
-            ),
-            image: 'speechSaySomething'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Set a Voice"
-                    description="Step name for 'Set a Voice"
-                    id="gui.howtos.say-it-out-loud_TXTSetVoice"
-                />
-            ),
-            image: 'speechSetVoice'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Move Around"
-                    description="Step name for 'Move Around' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTMove"
-                />
-            ),
-            image: 'speechMoveAround'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Add a Backdrop"
-                    description="Step name for 'Add a Backdrop' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTBackdrop"
-                />
-            ),
-            image: 'speechAddBackdrop'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Add Another Character"
-                    description="Step name for 'Add Another Character' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTAddSprite"
+                    id="gui.howtos.cartoon-network.step_CNbackdrop"
                 />
             ),
-            image: 'speechAddSprite'
-        }, {
+            image: 'cnBackdrop'
+        },
+        {
+            video: '6o76f5ivo1'
+        },
+        {
+            deckIds: [
+                'switch-costume',
+                'add-effects'
+            ]
+        }
+        ],
+        urlId: 'animate-an-adventure-game'
+    },
+
+    'Video-Sensing': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Video Sensing"
+                description="Name for the 'Video Sensing' how-to"
+                id="gui.howtos.videosens.name"
+            />
+        ),
+        img: libraryVideoSens,
+        category: CATEGORIES.intermediate,
+        steps: [{
+            video: '3pd1z110d6'
+        },
+        {
             title: (
                 <FormattedMessage
-                    defaultMessage="Perform a Song"
-                    description="Step name for 'Perform a Song' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTSong"
+                    defaultMessage="Add Extension"
+                    description="Step name for 'Add Extension' step"
+                    id="gui.howtos.videosens.step_addextension"
                 />
             ),
-            image: 'speechSong'
+            image: 'videoAddExtension'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Change Color"
-                    description="Step name for 'Change Color' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTColor"
+                    defaultMessage="Pet the Cat"
+                    description="Step name for 'Pet the Cat' step"
+                    id="gui.howtos.videosens.step_pet"
                 />
             ),
-            image: 'speechChangeColor'
+            image: 'videoPet'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Spin Around"
-                    description="Step name for 'Spin Around"
-                    id="gui.howtos.say-it-out-loud.step_TXTSpin"
+                    defaultMessage="Animate"
+                    description="Step name for 'Animate' step"
+                    id="gui.howtos.videosens.step_animate"
                 />
             ),
-            image: 'speechSpin'
+            image: 'videoAnimate'
         }, {
             title: (
                 <FormattedMessage
-                    defaultMessage="Grow and Shrink"
-                    description="Step name for 'Grow and Shrink' step"
-                    id="gui.howtos.say-it-out-loud.step_TXTGrow"
+                    defaultMessage="Pop a Balloon"
+                    description="Step name for 'Pop a Balloon' step"
+                    id="gui.howtos.videosens.step_pop"
                 />
             ),
-            image: 'speechGrowShrink'
+            image: 'videoPop'
         }, {
             deckIds: [
-                'animate-a-name',
-                'talking'
+                'Make-Music',
+                'add-effects'
             ]
         }
         ],
-        urlId: 'animations-that-talk'
+        urlId: 'video-sensing'
     },
 
     'talking': {
@@ -1513,6 +1568,7 @@ export default {
             />
         ),
         tags: ['talking'],
+        category: CATEGORIES.intermediate,
         img: libraryTalking,
         steps: [{
             video: 'talking'
@@ -1653,6 +1709,7 @@ export default {
         ),
         img: libraryAddSprite,
         tags: ['art', 'games', 'stories', 'character'],
+        category: CATEGORIES.gettingStarted,
         steps: [
             {
                 title: (
@@ -1684,6 +1741,7 @@ export default {
         ),
         img: addBackdropThumb,
         tags: ['art', 'games', 'stories', 'background'],
+        category: CATEGORIES.gettingStarted,
         steps: [{
             video: 'add-a-backdrop'
         }, {
@@ -1706,6 +1764,46 @@ export default {
         urlId: 'add-a-backdrop'
     },
 
+    'move-around-with-arrow-keys': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Use Arrow Keys"
+                description="Name for the 'Use Arrow Keys' how-to"
+                id="gui.howtos.move-around-with-arrow-keys.name"
+            />
+        ),
+        img: moveArrowKeysThumb,
+        tags: ['games', 'keyboard'],
+        category: CATEGORIES.basics,
+        steps: [{
+            video: 'move-around-with-arrow-keys'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Move Left and Right"
+                    description="Step name for 'Move Left and Right' step"
+                    id="gui.howtos.add-a-backdrop.step_moveArrowKeysLeftRight"
+                />
+            ),
+            image: 'moveArrowKeysLeftRight'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Move Up and Down"
+                    description="Step name for 'Move Up and Down' step"
+                    id="gui.howtos.add-a-backdrop.step_moveArrowKeysUpDown"
+                />
+            ),
+            image: 'moveArrowKeysUpDown'
+        }, {
+            deckIds: [
+                'make-it-fly',
+                'switch-costume'
+            ]
+        }],
+        urlId: 'arrow-keys'
+    },
+
     'change-size': {
         name: (
             <FormattedMessage
@@ -1715,6 +1813,7 @@ export default {
             />
         ),
         img: changeSizeThumb,
+        category: CATEGORIES.basics,
         scale: ['art', 'animation', 'scale'],
         steps: [{
             video: 'change-size'
@@ -1746,6 +1845,7 @@ export default {
         ),
         img: glideAroundThumb,
         tags: ['animation', 'stories', 'music', 'instrument', 'play', 'song', 'band'],
+        category: CATEGORIES.basics,
         steps: [{
             video: 'glide-around'
         }, {
@@ -1775,6 +1875,46 @@ export default {
         urlId: 'glide-around'
     },
 
+    'spin-video': {
+        name: (
+            <FormattedMessage
+                defaultMessage="Make It Spin"
+                description="Name for the 'Make It Spin' how-to"
+                id="gui.howtos.spin-video.name"
+            />
+        ),
+        img: spinThumb,
+        tags: ['animation', 'rotate', 'rotation'],
+        category: CATEGORIES.basics,
+        steps: [{
+            video: 'spin-video'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Turn"
+                    description="Step name for 'Turn' step"
+                    id="gui.howtos.change-size.step_spinTurn"
+                />
+            ),
+            image: 'spinTurn'
+        }, {
+            title: (
+                <FormattedMessage
+                    defaultMessage="Set Direction"
+                    description="Step name for 'Set Direction' step"
+                    id="gui.howtos.change-size.step_spinPointInDirection"
+                />
+            ),
+            image: 'spinPointInDirection'
+        }, {
+            deckIds: [
+                'add-a-backdrop',
+                'switch-costume'
+            ]
+        }],
+        urlId: 'make-it-spin'
+    },
+
     'record-a-sound': {
         name: (
             <FormattedMessage
@@ -1784,6 +1924,7 @@ export default {
             />
         ),
         tags: ['music', 'games', 'stories'],
+        category: CATEGORIES.basics,
         img: recordASound,
         steps: [{
             video: 'record-a-sound'
@@ -1841,45 +1982,6 @@ export default {
         urlId: 'record-a-sound'
     },
 
-    'spin-video': {
-        name: (
-            <FormattedMessage
-                defaultMessage="Make It Spin"
-                description="Name for the 'Make It Spin' how-to"
-                id="gui.howtos.spin-video.name"
-            />
-        ),
-        img: spinThumb,
-        tags: ['animation', 'rotate', 'rotation'],
-        steps: [{
-            video: 'spin-video'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Turn"
-                    description="Step name for 'Turn' step"
-                    id="gui.howtos.change-size.step_spinTurn"
-                />
-            ),
-            image: 'spinTurn'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Set Direction"
-                    description="Step name for 'Set Direction' step"
-                    id="gui.howtos.change-size.step_spinPointInDirection"
-                />
-            ),
-            image: 'spinPointInDirection'
-        }, {
-            deckIds: [
-                'add-a-backdrop',
-                'switch-costume'
-            ]
-        }],
-        urlId: 'make-it-spin'
-    },
-
     'hide-and-show': {
         name: (
             <FormattedMessage
@@ -1890,6 +1992,7 @@ export default {
         ),
         img: hideAndShowThumb,
         tags: ['stories', 'appear', 'disappear'],
+        category: CATEGORIES.basics,
         steps: [{
             video: 'hide-and-show'
         }, {
@@ -1920,6 +2023,7 @@ export default {
         ),
         img: switchCostumeThumb,
         tags: ['animation', 'art', 'games', 'stories', 'paint', 'edit', 'change', 'character', 'sprite'],
+        category: CATEGORIES.gettingStarted,
         steps: [{
             video: 'switch-costume'
         }, {
@@ -1940,76 +2044,6 @@ export default {
         urlId: 'animate-a-sprite'
     },
 
-    'move-around-with-arrow-keys': {
-        name: (
-            <FormattedMessage
-                defaultMessage="Use Arrow Keys"
-                description="Name for the 'Use Arrow Keys' how-to"
-                id="gui.howtos.move-around-with-arrow-keys.name"
-            />
-        ),
-        img: moveArrowKeysThumb,
-        tags: ['games', 'keyboard'],
-        steps: [{
-            video: 'move-around-with-arrow-keys'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Move Left and Right"
-                    description="Step name for 'Move Left and Right' step"
-                    id="gui.howtos.add-a-backdrop.step_moveArrowKeysLeftRight"
-                />
-            ),
-            image: 'moveArrowKeysLeftRight'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Move Up and Down"
-                    description="Step name for 'Move Up and Down' step"
-                    id="gui.howtos.add-a-backdrop.step_moveArrowKeysUpDown"
-                />
-            ),
-            image: 'moveArrowKeysUpDown'
-        }, {
-            deckIds: [
-                'make-it-fly',
-                'switch-costume'
-            ]
-        }],
-        urlId: 'arrow-keys'
-    },
-
-    'add-effects': {
-        name: (
-            <FormattedMessage
-                defaultMessage="Add Effects"
-                description="Name for the 'Add Effects' how-to"
-                id="gui.howtos.add-effects.name"
-            />
-        ),
-        tags: ['animation', 'art', 'games', 'stories', '8-bit', 'brightness', 'ghost', 'transparency', 'opacity',
-            'fx', 'color', 'fisheye', 'whirl', 'twist', 'pixelate', 'mosaic', '8bit'],
-        img: addEffectsThumb,
-        steps: [{
-            video: 'add-effects'
-        }, {
-            title: (
-                <FormattedMessage
-                    defaultMessage="Add Effects"
-                    description="Step name for 'Add Effects' step"
-                    id="gui.howtos.videosens.step_addEffects"
-                />
-            ),
-            image: 'addEffects'
-        }, {
-            deckIds: [
-                'add-a-backdrop',
-                'code-cartoon'
-            ]
-        }],
-        urlId: 'add-effects'
-    },
-
     'wedo2-getting-started': {
         steps: [{
             video: '4im7iizv47'
diff --git a/test/integration/how-tos.test.js b/test/integration/how-tos.test.js
index 577031f37d6..d1dc3de3ef7 100644
--- a/test/integration/how-tos.test.js
+++ b/test/integration/how-tos.test.js
@@ -27,8 +27,8 @@ describe('Working with the how-to library', () => {
         await loadUri(uri);
         await clickText('Costumes');
         await clickXpath('//*[@aria-label="Tutorials"]');
-        await clickText('Getting Started'); // Modal should close
-        // Make sure YouTube video on first card appears
+        await clickText('Add a Sprite'); // Modal should close
+        // Make sure YouTube video on card appears
         await findByXpath('//div[contains(@class, "step-video")]');
         const logs = await getLogs();
         await expect(logs).toEqual([]);
diff --git a/test/integration/menu-bar.test.js b/test/integration/menu-bar.test.js
index 45d6ec4e7c9..33a6353e61c 100644
--- a/test/integration/menu-bar.test.js
+++ b/test/integration/menu-bar.test.js
@@ -84,6 +84,7 @@ describe('Menu bar settings', () => {
         // Change the project by deleting a sprite
         await rightClickText('Sprite1', scope.spriteTile);
         await clickText('delete', scope.spriteTile);
+        await clickText('yes', scope.modal);
 
         await clickXpath(FILE_MENU_XPATH);
         await clickText('Load from your computer');
diff --git a/test/integration/sprites.test.js b/test/integration/sprites.test.js
index 40677246cda..c798e0a1792 100644
--- a/test/integration/sprites.test.js
+++ b/test/integration/sprites.test.js
@@ -68,6 +68,7 @@ describe('Working with sprites', () => {
         await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
         await rightClickText('Sprite1', scope.spriteTile);
         await clickText('delete', scope.spriteTile);
+        await clickText('yes', scope.modal);
         // Confirm that the stage has been switched to
         await findByText('Stage selected: no motion blocks');
         const logs = await getLogs();
@@ -78,6 +79,7 @@ describe('Working with sprites', () => {
         await loadUri(uri);
         await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
         await clickXpath('//*[@aria-label="Delete"]'); // Only visible close button is on the sprite
+        await clickText('yes', scope.modal);
         // Confirm that the stage has been switched to
         await findByText('Stage selected: no motion blocks');
         const logs = await getLogs();
diff --git a/test/integration/stage-size.test.js b/test/integration/stage-size.test.js
index ca235905079..0c3510140ff 100644
--- a/test/integration/stage-size.test.js
+++ b/test/integration/stage-size.test.js
@@ -27,12 +27,14 @@ describe('Loading scratch gui', () => {
     test('Switching small/large stage after highlighting and deleting sprite', async () => {
         await loadUri(uri);
 
-        // Highlight the sprite
-        await clickText('Sprite1', scope.spriteTile);
+        await new Promise((r) => setTimeout(r, 500)); // wait for animation
+
 
         // Delete it
         await rightClickText('Sprite1', scope.spriteTile);
+        
         await clickText('delete', scope.spriteTile);
+        await clickText('yes', scope.modal);
 
         // Go to small stage mode
         await clickXpath('//button[@title="Switch to small stage"]');
diff --git a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
index f7f19434a61..14936897676 100644
--- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
+++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
@@ -53,7 +53,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
     tabIndex={0}
   >
     <div
-      className={undefined}
+      className=""
     >
       <img
         className={undefined}
@@ -137,7 +137,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
     tabIndex={0}
   >
     <div
-      className={undefined}
+      className=""
     >
       <img
         className={undefined}
diff --git a/test/unit/containers/sprite-selector-item.test.jsx b/test/unit/containers/sprite-selector-item.test.jsx
index 89018f5ef36..ffa24d3fc93 100644
--- a/test/unit/containers/sprite-selector-item.test.jsx
+++ b/test/unit/containers/sprite-selector-item.test.jsx
@@ -3,9 +3,12 @@ import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
 import configureStore from 'redux-mock-store';
 import {Provider} from 'react-redux';
 
-import SpriteSelectorItem from '../../../src/containers/sprite-selector-item';
+import SpriteSelectorItemContainer from '../../../src/containers/sprite-selector-item';
 import DeleteButton from '../../../src/components/delete-button/delete-button';
+import DeleteConfirmationPrompt from '../../../src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx';
+import VM from 'scratch-vm';
 
+jest.mock('../../../src/components/delete-confirmation-prompt/delete-confirmation-prompt.jsx', () => jest.fn(() => null));
 describe('SpriteSelectorItem Container', () => {
     const mockStore = configureStore();
     let className;
@@ -17,11 +20,12 @@ describe('SpriteSelectorItem Container', () => {
     let selected;
     let id;
     let store;
+    let vm;
     // Wrap this in a function so it gets test specific states and can be reused.
-    const getContainer = function () {
+    const getContainer = function (withDeleteConfirmation) {
         return (
             <Provider store={store}>
-                <SpriteSelectorItem
+                <SpriteSelectorItemContainer
                     className={className}
                     costumeURL={costumeURL}
                     dispatchSetHoveredSprite={dispatchSetHoveredSprite}
@@ -30,16 +34,14 @@ describe('SpriteSelectorItem Container', () => {
                     selected={selected}
                     onClick={onClick}
                     onDeleteButtonClick={onDeleteButtonClick}
+                    vm={vm}
+                    withDeleteConfirmation={withDeleteConfirmation}
                 />
             </Provider>
         );
     };
 
     beforeEach(() => {
-        store = mockStore({scratchGui: {
-            hoveredTarget: {receivedBlocks: false, sprite: null},
-            assetDrag: {dragging: false}
-        }});
         className = 'ponies';
         costumeURL = 'https://scratch.mit.edu/foo/bar/pony';
         id = 1337;
@@ -48,11 +50,29 @@ describe('SpriteSelectorItem Container', () => {
         onDeleteButtonClick = jest.fn();
         dispatchSetHoveredSprite = jest.fn();
         selected = true;
+        vm = new VM();
+        store = mockStore({scratchGui: {
+            hoveredTarget: {receivedBlocks: false, sprite: null},
+            assetDrag: {dragging: false},
+            vm
+        }});
     });
 
-    test('should delete the sprite', () => {
+    test('should delete the sprite, when called without `withDeleteConfirmation`', () => {
         const wrapper = mountWithIntl(getContainer());
+
         wrapper.find(DeleteButton).simulate('click');
+        expect(DeleteConfirmationPrompt).not.toHaveBeenCalled();
         expect(onDeleteButtonClick).toHaveBeenCalledWith(1337);
     });
+
+    test('should initiate sprite deletion, when called `withDeleteConfirmation`', () => {
+        const wrapper = mountWithIntl(getContainer(true));
+
+        expect(DeleteConfirmationPrompt).not.toHaveBeenCalled();
+
+        wrapper.find(DeleteButton).simulate('click');
+
+        expect(DeleteConfirmationPrompt).toHaveBeenCalled();
+    });
 });

From c84caa24f137579610ce2fc1d92e7d6ec0f8c07a Mon Sep 17 00:00:00 2001
From: Kaloyan Manolov <kaloyan.manolov@advance-auto.com>
Date: Mon, 21 Oct 2024 11:39:01 +0300
Subject: [PATCH 2/3] fix: uepr-8: fix library item selection

---
 src/components/library/library.jsx | 34 +++++++++++++++++++-----------
 src/containers/tips-library.jsx    |  1 +
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 8e4ac86f15a..09aa6a33217 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -88,7 +88,8 @@ class LibraryComponent extends React.Component {
     }
     handleSelect (id) {
         this.handleClose();
-        this.props.onItemSelected(this.getFilteredData()[id]);
+        this.props.onItemSelected(this.getFilteredData()
+            .find(item => this.constructKey(item) === id));
     }
     handleClose () {
         this.props.onRequestClose();
@@ -100,7 +101,8 @@ class LibraryComponent extends React.Component {
                 selectedTag: tag.toLowerCase()
             });
         } else {
-            this.props.onItemMouseLeave(this.getFilteredData()[[this.state.playingItem]]);
+            this.props.onItemMouseLeave((this.getFilteredData()
+                .find(item => this.constructKey(item) === this.state.playingItem)));
             this.setState({
                 filterQuery: '',
                 playingItem: null,
@@ -111,7 +113,8 @@ class LibraryComponent extends React.Component {
     handleMouseEnter (id) {
         // don't restart if mouse over already playing item
         if (this.props.onItemMouseEnter && this.state.playingItem !== id) {
-            this.props.onItemMouseEnter(this.getFilteredData()[id]);
+            this.props.onItemMouseEnter(this.getFilteredData()
+                .find(item => this.constructKey(item) === id));
             this.setState({
                 playingItem: id
             });
@@ -119,7 +122,8 @@ class LibraryComponent extends React.Component {
     }
     handleMouseLeave (id) {
         if (this.props.onItemMouseLeave) {
-            this.props.onItemMouseLeave(this.getFilteredData()[id]);
+            this.props.onItemMouseLeave(this.getFilteredData()
+                .find(item => this.constructKey(item) === id));
             this.setState({
                 playingItem: null
             });
@@ -139,7 +143,8 @@ class LibraryComponent extends React.Component {
                 selectedTag: ALL_TAG.tag
             });
         } else {
-            this.props.onItemMouseLeave(this.getFilteredData()[[this.state.playingItem]]);
+            this.props.onItemMouseLeave(this.getFilteredData()
+                .find(item => this.constructKey(item) === this.state.playingItem));
             this.setState({
                 filterQuery: event.target.value,
                 playingItem: null,
@@ -174,13 +179,17 @@ class LibraryComponent extends React.Component {
                 .indexOf(this.state.selectedTag) !== -1
         ));
     }
+    constructKey (data) {
+        return typeof data.name === 'string' ? data.name : data.rawURL;
+    }
     scrollToTop () {
         this.filteredDataRef.scrollTop = 0;
     }
     setFilteredDataRef (ref) {
         this.filteredDataRef = ref;
     }
-    renderElement (data, index) {
+    renderElement (data) {
+        const key = this.constructKey(data);
         return (<LibraryItem
             bluetoothRequired={data.bluetoothRequired}
             collaborator={data.collaborator}
@@ -192,11 +201,11 @@ class LibraryComponent extends React.Component {
             iconMd5={data.costumes ? data.costumes[0].md5ext : data.md5ext}
             iconRawURL={data.rawURL}
             icons={data.costumes}
-            id={index}
+            id={key}
             insetIconURL={data.insetIconURL}
             internetConnectionRequired={data.internetConnectionRequired}
-            isPlaying={this.state.playingItem === index}
-            key={typeof data.name === 'string' ? data.name : data.rawURL}
+            isPlaying={this.state.playingItem === key}
+            key={key}
             name={data.name}
             showPlayButton={this.props.showPlayButton}
             onMouseEnter={this.handleMouseEnter}
@@ -205,8 +214,8 @@ class LibraryComponent extends React.Component {
         />);
     }
     renderData (data) {
-        if (this.state.selectedTag !== ALL_TAG.tag) {
-            return data.map((dataItem, index) => this.renderElement(dataItem, index));
+        if (this.state.selectedTag !== ALL_TAG.tag || !this.props.withCategories) {
+            return data.map(item => this.renderElement(item));
         }
 
         const dataByCategory = Object.groupBy(data, el => el.category);
@@ -228,7 +237,7 @@ class LibraryComponent extends React.Component {
                     <div
                         className={styles.libraryCategoryItems}
                     >
-                        {values.map((dataItem, index) => this.renderElement(dataItem, index))}
+                        {values.map(item => this.renderElement(item))}
                     </div>
                 </div>));
     }
@@ -313,6 +322,7 @@ LibraryComponent.propTypes = {
         /* eslint-enable react/no-unused-prop-types, lines-around-comment */
     ),
     filterable: PropTypes.bool,
+    withCategories: PropTypes.bool,
     id: PropTypes.string.isRequired,
     intl: intlShape.isRequired,
     onItemMouseEnter: PropTypes.func,
diff --git a/src/containers/tips-library.jsx b/src/containers/tips-library.jsx
index 57088c4032a..a6b2e008c59 100644
--- a/src/containers/tips-library.jsx
+++ b/src/containers/tips-library.jsx
@@ -95,6 +95,7 @@ class TipsLibrary extends React.PureComponent {
                 visible={this.props.visible}
                 onItemSelected={this.handleItemSelect}
                 onRequestClose={this.props.onRequestClose}
+                withCategories
             />
         );
     }

From 533f6f76165c8a9d27af52dad0ec4ad4e3658885 Mon Sep 17 00:00:00 2001
From: Kaloyan Manolov <kaloyan.manolov@advance-auto.com>
Date: Mon, 21 Oct 2024 15:12:29 +0300
Subject: [PATCH 3/3] fix: uepr-8: Fix test

---
 test/integration/how-tos.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/integration/how-tos.test.js b/test/integration/how-tos.test.js
index d1dc3de3ef7..494d7ce4ef5 100644
--- a/test/integration/how-tos.test.js
+++ b/test/integration/how-tos.test.js
@@ -27,7 +27,7 @@ describe('Working with the how-to library', () => {
         await loadUri(uri);
         await clickText('Costumes');
         await clickXpath('//*[@aria-label="Tutorials"]');
-        await clickText('Add a Sprite'); // Modal should close
+        await clickText('Add a Backdrop'); // Modal should close
         // Make sure YouTube video on card appears
         await findByXpath('//div[contains(@class, "step-video")]');
         const logs = await getLogs();