Integration branch ux 12.2024

package.json

@@ -146,7 +146,7 @@
     "regenerator-runtime": "0.13.9",
     "sass": "1.81.0",
     "sass-loader": "10.5.2",
-    "scratch-gui": "5.0.1",
+    "scratch-gui": "5.1.0",
     "scratch-l10n": "5.0.7",
     "selenium-webdriver": "4.26.0",
     "slick-carousel": "1.8.1",

src/_colors.scss

@@ -25,18 +25,23 @@ $background-color: hsla(0, 0%, 99%, 1); //#FDFDFD
 
 $motion-blue-3: hsla(215, 60%, 50%, 1);//#3373CC
 
+$ui-light-blue: hsla(195, 63%, 86%, 1); //#C5E7f2
+$ui-cyan-blue: hsla(194, 73%, 36%, 1); //#19809F
+
 /* UI Secondary Colors */
 /* 3.0 colors */
 /* Using www naming convention for now, should be consistent with gui */
 $ui-aqua: hsla(144, 45%, 36%, 1); 
 $ui-aqua-dark: darken($ui-aqua, 10%);
+$ui-purple-light: hsla(260, 100%, 88%, 1); // #DACEF3
 $ui-purple: hsla(260, 100%, 70%, 1); // #9966FF Looks Primary
 $ui-purple-dark: hsla(260, 60%, 60%, 1); // #855CD6 Looks Secondary
 $ui-purple-darker: hsla(260, 46%, 54%, 1);
 $ui-purple-10percent: hsla(260, 60%, 60%, .1);
 $ui-purple-25percent: hsla(260, 60%, 60%, .25);
 $ui-magenta: hsla(300, 53%, 60%, 1); /* #CF63CF Sounds Primary */
 $ui-magenta-dark: hsla(300, 48%, 50%, 1); /* #BD42BD Sounds Tertiary */
+$ui-light-grayish-blue: hsla(215, 76%, 95%, 1);
 
 $ui-yellow: hsla(45, 100%, 50%, 1); // #FFBF00 Events Primary
 $ui-coral: hsla(350, 100%, 70%, 1); // #FF6680 More Blocks Primary
@@ -48,6 +53,7 @@ $ui-light-primary: hsl(215, 100%, 95%);
 $ui-light-primary-transparent: hsla(215, 100%, 95%, 0);
 
 $ui-border: hsla(0, 0%, 85%, 1); //#D9D9D9
+$ui-border-light-blue: hsla(215, 50%, 90%, 1); //#D9E3F2
 
 /* modals */
 $ui-mint-green: hsl(163, 69%, 44%);
@@ -59,6 +65,7 @@ $active-dark-gray: hsla(0, 0%, 0%, .2);
 $box-shadow-gray: hsla(0, 0%, 0%, .25);
 $box-shadow-light-gray: hsla(0, 0%, 0%, .15);
 $overlay-gray: hsla(0, 0%, 0%, .75);
+$gray-50: hsla(226, 15%, 97%, 1);
 $transparent-light-blue: rgba(229, 240, 254, 0);
 
 /* Typography Colors */

src/components/adminpanel/adminpanel.jsx

@@ -11,7 +11,7 @@ const AdminPanel = ({
     onOpen,
     onClose
 }) => (
-    <div className={classNames('admin-panel', className, {hidden: !isOpen})}>
+    <div className={classNames('admin-panel', className, {collapsed: !isOpen})}>
         {isOpen ? (
             <React.Fragment>
                 <span

src/components/adminpanel/adminpanel.scss

@@ -14,7 +14,7 @@
     overflow: scroll;
     text-shadow: none;
 
-    &.hidden {
+    &.collapsed {
         width: 10px;
     }
 

src/components/cards-modal/cards-modal.jsx

@@ -0,0 +1,143 @@
+import React, {useCallback, useState} from 'react';
+import ReactModal from 'react-modal';
+import PropTypes from 'prop-types';
+import Button from '../forms/button.jsx';
+import {FormattedMessage, useIntl} from 'react-intl';
+import ModalNavigation from '../modal-navigation/modal-navigation.jsx';
+
+import './cards-modal.scss';
+
+const GUIDES_SECTIONS = [
+    {
+        titleId: 'ideas.modalSectionTitleSpritesAndSounds',
+        imgSrc: '/images/ideas/sprites-sounds.svg',
+        cards: [
+            {
+                cardId: 'ideas.modalCardNameCreateSprite',
+                hrefId: 'guides.ScratchLearningResource_CreateOriginalSpriteLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameRemix',
+                hrefId: 'guides.ScratchLearningResource_RemixRe-imagineSpritesLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameBringDrawingsIntoScratch',
+                hrefId: 'guides.ScratchLearningResource_BringYourDrawingsIntoScratchLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameSound',
+                hrefId: 'guides.ScratchLearningResource_SoundsAddRecordText-to-SpeechLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameCreateAsset',
+                hrefId: 'guides.ScratchLearningResource_CreateanAssetPackLink'
+            }
+        ]
+    },
+    {
+        titleId: 'ideas.modalSectionTitleAdvancedTopics',
+        imgSrc: '/images/ideas/advanced-topics.svg',
+        cards: [
+            {
+                cardId: 'ideas.modalCardNameConditionalStatements',
+                hrefId: 'guides.ScratchLearningResource_ConditionalStatementsLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameVariablesLists',
+                hrefId: 'guides.ScratchLearningResource_VariablesandListsLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameCustomBlocks',
+                hrefId: 'guides.ScratchLearningResource_MyBlocksLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameFaceSensing',
+                hrefId: 'cards.paperplanes-turtlegraphics-cardsLink'
+            },
+            {
+                cardId: 'ideas.modalCardNameComputationalConcepts',
+                hrefId: 'cards.facesensing-cardsLink'
+            }
+        ]
+    }
+];
+
+export const CardsModal = ({isOpen, onClose = () => {}}) => {
+    const [currentPage, setCurrentPage] = useState(0);
+    const intl = useIntl();
+    const onNextPage = useCallback(() => {
+        if (currentPage < GUIDES_SECTIONS.length - 1) {
+            setCurrentPage(currentPage + 1);
+        }
+    }, [currentPage]);
+    const onBackPage = useCallback(() => {
+        if (currentPage > 0) {
+            setCurrentPage(currentPage - 1);
+        }
+    }, [currentPage]);
+
+    if (!isOpen) return null;
+    return (
+        <ReactModal
+            isOpen={isOpen}
+            onRequestClose={onClose}
+            className="cards-modal-container"
+            overlayClassName="cards-modal-overlay"
+        >
+            <div className="cards-modal-header">
+                <div className="cards-title">
+                    <FormattedMessage id={'ideas.modalTitle'} />
+                </div>
+                <Button
+                    className="close-button"
+                    isCloseType
+                    onClick={onClose}
+                />
+            </div>
+            <div className="cards-modal-section-title">
+                <FormattedMessage id={GUIDES_SECTIONS[currentPage].titleId} />
+            </div>
+            <div className="cards-modal-section-content">
+                <img
+                    className="section-img"
+                    src={GUIDES_SECTIONS[currentPage].imgSrc}
+                />
+                <div className="cards-modal-cards-list">
+                    {GUIDES_SECTIONS[currentPage].cards.map(card => (
+                        <div
+                            key={card.cardId}
+                            className="card"
+                        >
+                            <FormattedMessage id={card.cardId} />
+                            <a
+                                href={intl.formatMessage({
+                                    id: card.hrefId
+                                })}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <Button>
+                                    <img src="/images/ideas/download-icon.svg" />
+                                </Button>
+                            </a>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            <ModalNavigation
+                currentPage={currentPage}
+                totalDots={GUIDES_SECTIONS.length}
+                nextButtonImageSrc="/images/ideas/right-arrow.svg"
+                prevButtonImageSrc="/images/ideas/left-arrow.svg"
+                onNextPage={onNextPage}
+                onBackPage={onBackPage}
+                className="cards-modal-navigation"
+            />
+        </ReactModal>
+    );
+};
+
+CardsModal.propTypes = {
+    isOpen: PropTypes.bool,
+    onClose: PropTypes.func
+};

src/components/cards-modal/cards-modal.scss

@@ -0,0 +1,150 @@
+@import "../../colors";
+@import "../../frameless";
+
+.cards-modal-overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 510;
+
+    background-color: $box-shadow-light-gray;
+    border-color: unset;
+}
+
+.cards-modal-container {
+    display: flex;
+    flex-direction: column;
+
+    background: white;
+    border-radius: 8px;
+    width: 640px;
+
+    box-shadow: 0 0 0 4px $ui-blue-25percent;
+
+    &:focus {
+        outline: none;
+        border: none;
+    }
+
+    .cards-modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        padding: 10px;
+        background-color: $ui-blue;
+        border-radius: 8px 8px 0 0;
+
+        .cards-title {
+            font-size: 1rem;
+            font-weight: 700;
+            line-height: 1.25rem;
+            color: $ui-white;
+            margin-left: auto;
+            margin-right: auto;
+        }
+
+        .close-button {
+            position: unset;
+            margin: 0;
+        }
+    }
+
+    .cards-modal-section-title {
+        text-align: center;
+        vertical-align: middle;
+
+        color: $header-gray;
+        font-size: 1.5rem;
+        font-weight: 700;
+        line-height: 2rem;
+
+        padding: 0.5rem 0;
+        margin: 0.75rem 0
+    }
+
+    .cards-modal-section-content {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        margin: 0 1.25rem;
+        gap: 1.25rem;
+
+        .section-img {
+            width: 200px;
+        }
+
+        .cards-modal-cards-list {
+            flex: 1;
+
+            .card {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                font-size: 0.875rem;
+                font-weight: 500;
+
+
+                .button {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 2rem;
+                    height: 2rem;
+                }
+            }
+
+            .card + .card {
+                border-top: 1px solid $box-shadow-light-gray;
+            }
+        }
+    }
+
+    .cards-modal-navigation {
+        justify-content: center;
+        align-items: center;
+        margin: 1.75rem 0;
+
+        .navigation-button {
+            padding: 0;
+            margin: 0 1rem;
+        }
+
+        .dotRow{
+            width: 32px;
+            height: 16px;
+            gap: 0.5rem;
+        }
+
+        .dot{
+            width: 8px;
+            height: 8px;
+            background-color: transparent;
+            border: 2px solid $ui-blue;
+        }
+
+        .active{
+            background-color: $ui-blue;
+            box-shadow: 0 0 0 4px $ui-blue-25percent;
+        }
+    }
+}
+
+.cards-modal-container:focus {
+    outline: none;
+    border: none;
+}
+
+@media only screen and (max-width: $mobileIntermediate) {
+    .cards-modal-container {
+        width: 100%;
+    }
+}