Merge pull request #1522 from ArielCalisaya/development

Reuse DynamicContentCard for Lessons, Exercises, Projects and How tos cards and more...
breatheco-de · Jul 1, 2024 · c346089 · c346089
2 parents 74168d5 + 57a0958
commit c346089
Show file tree

Hide file tree

Showing 33 changed files with 341 additions and 308 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -137,8 +137,9 @@
     "new-exercise": "Start from the beginning",
     "continue-exercise": "Continue from a previous session",
     "open-locally": "Open locally on your computer",
+    "recommended": "Recommended",
     "open-in-learnpack-button": {
-      "text": "Open in the cloud (recommended)",
+      "text": "Open in the cloud",
       "title": "Open in the cloud",
       "description": "We take care of <a class=\"link\" href=\"https://4geeks.com/click-and-learn\">setup and installations</a> for all the required technologies to run this exercise or project.",
       "type": "dropdown"

diff --git a/public/locales/en/exercises.json b/public/locales/en/exercises.json
@@ -10,7 +10,7 @@
   "filter": "Filter",
   "filters": "Filters",
   "created": "Created by:",
-  "description": "Choose one of the following tutorials and learn with step-by-step interactive tutorials, instant grading, and get help from <a href='https://4geeks.com/rigobot'>Rigobot</a>; Our internally developed AI for learning technical skills",
+  "description": "Choose one of the following tutorials and learn with step-by-step interactive tutorials, instant grading, and get help from <a class=\"link\" href='https://4geeks.com/rigobot'>Rigobot</a>; Our internally developed AI for learning technical skills",
   "backToExercises": "Back to Exercises",
   "direct-access-interactive": "Sign up and get access to interactive tutorial",
   "direct-access-solution": "Sign up and get access to solution files and videos",

diff --git a/public/locales/en/workshops.json b/public/locales/en/workshops.json
@@ -35,5 +35,6 @@
     "link-text": "Learn more.",
     "link": "",
     "get-more-workshops": "Get more workshops"
-  }
+  },
+  "back-to-workshops": "Go back"
 }
diff --git a/public/locales/es/common.json b/public/locales/es/common.json
@@ -136,8 +136,9 @@
     "new-exercise": "Comenzar desde el principio",
     "continue-exercise": "Continuar desde una sesión anterior",
     "open-locally": "Abrir localmente en tu computadora",
+    "recommended": "Recomendado",
     "open-in-learnpack-button": {
-      "text": "Abrir en la nube (recomendado)",
+      "text": "Abrir en la nube",
       "title": "Abrir en la nube",
       "description": "Nosotros nos encargamos de la <a class=\"link\" href=\"https://4geeks.com/aprende-en-un-clic\">configuración e instalación</a> de todas las tecnologías requeridas para realizar este ejercicio.",
       "type": "dropdown"

diff --git a/public/locales/es/workshops.json b/public/locales/es/workshops.json
@@ -35,5 +35,6 @@
     "link-text": "Aprende más.",
     "link": "",
     "get-more-workshops": "Obten más workshops"
-  }
+  },
+  "back-to-workshops": "Regresar"
 }
diff --git a/slices/RecommendedCourses/index.jsx b/slices/RecommendedCourses/index.jsx
@@ -14,6 +14,7 @@ const RecommendedCourses = ({ slice }) => (
     technologies={slice.primary.technologies}
     title={slice?.primary?.title}
     margin={slice?.primary?.margin || '20px auto 0 auto'}
+    mx={{ base: '10px', md: '2rem' }}
     gridColumn="2 / span 8"
   />
 );

diff --git a/src/common/components/CallToAction.jsx b/src/common/components/CallToAction.jsx
@@ -16,7 +16,7 @@ import Icon from './Icon';
 function CallToAction({
   background, imageSrc, icon, href, styleContainer, isExternalLink, title, text,
   buttonText, onClick, margin, buttonsData, buttonStyle, fontSizeOfTitle,
-  isLoading,
+  isLoading, reverseButtons,
 }) {
   return (
     <Box
@@ -81,6 +81,8 @@ function CallToAction({
           // justifyContent="space-between"
           // justifyContent="center"
           gridTemplateColumns={{ base: 'repeat(auto-fill, minmax(10rem, 1fr))', md: '' }}
+          flexDirection={reverseButtons ? 'row-reverse' : 'row'}
+          justifyContent={reverseButtons ? 'flex-end' : 'flex-start'}
         >
           {buttonText && !buttonsData?.length > 0 && (
           <Button isLoading={isLoading} whiteSpace="wrap" as="a" style={buttonStyle} href={href} target={isExternalLink ? '_blank' : '_self'} padding="0.5rem 1rem" height="auto" marginY="auto" textTransform="uppercase" borderColor="white" color="white" variant="outline" onClick={onClick}>
@@ -199,6 +201,7 @@ CallToAction.propTypes = {
   fontSizeOfTitle: PropTypes.string,
   isLoading: PropTypes.bool,
   icon: PropTypes.string,
+  reverseButtons: PropTypes.bool,
 };
 
 CallToAction.defaultProps = {
@@ -217,6 +220,7 @@ CallToAction.defaultProps = {
   fontSizeOfTitle: 'var(--heading-xsm)',
   isLoading: false,
   icon: '',
+  reverseButtons: false,
 };
 
 export default CallToAction;
diff --git a/src/common/components/DynamicContentCard/FeatureIndicator.jsx b/src/common/components/DynamicContentCard/FeatureIndicator.jsx
@@ -22,7 +22,7 @@ function FeatureIndicator({ data, type }) {
     },
   };
   return (
-    <Flex margin="0 0 0 auto" gridGap="10px" alignItems="center">
+    <Flex id="feature_indicator" _empty={{ display: 'none' }} margin="0 0 0 auto" gridGap="10px" alignItems="center">
       {type === 'workshop' ? (
         <Flex display={langData?.[lang]?.title ? 'flex' : 'none'} alignItems="center" gridGap="8px" background={backgroundColor} padding="4px 10px" borderRadius="18px">
           <Text size="12px" textTransform="uppercase">

diff --git a/src/common/components/DynamicContentCard/HeadInfo.jsx b/src/common/components/DynamicContentCard/HeadInfo.jsx
@@ -12,11 +12,9 @@ const getIntervalDurationTranslation = (date) => {
 
   if (days > 0) {
     return t('live-event:day', { count: days });
-    // return `${days} days duration`;
   }
 
   if (hours > 0) {
-    // return t('live-event:time-duration', { time: hoursText });
     if (minutes > 0) {
       return `${hours}h ${minutes}m`;
     }
@@ -32,40 +30,35 @@ const getIntervalDurationTranslation = (date) => {
 
 function HeadInfo({ technologies, duration, type, date }) {
   const { t } = useTranslation('common');
-  const { backgroundColor, lightColor } = useStyle();
+  const { backgroundColor, featuredLight, lightColor } = useStyle();
   const startedButNotEnded = date?.started && date?.ended === false;
   const intervalDurationText = getIntervalDurationTranslation(date);
   const existsDuration = intervalDurationText || duration;
+  const isWorkshop = type === 'workshop';
+  const shouldDisplay = technologies?.length > 0 || existsDuration || isWorkshop;
 
   return (
-    <Flex alignItems="center" justifyContent="space-between" width="100%">
+    <Flex display={shouldDisplay ? 'flex' : 'none'} alignItems="center" justifyContent="space-between" width="100%">
       {technologies?.length > 0 ? (
         <Flex alignItems="center" gridGap="8px">
           {technologies.map((tech) => {
-            if (type === 'workshop') {
-              return (
-                <Text alignItems="center" gridGap="4px" background={backgroundColor} padding="4px 10px" borderRadius="18px">
-                  {tech.title}
-                </Text>
-              );
-            }
             if (tech?.icon_url) {
               return (
-                <Image src={tech.icon_url} width={20} height={20} />
+                <Image src={tech?.icon_url} width={20} height={20} />
               );
             }
             return (
-              <Text alignItems="center" gridGap="4px" background={backgroundColor} padding="4px 10px" borderRadius="18px">
+              <Text alignItems="center" gridGap="4px" background={featuredLight} padding="4px 10px" borderRadius="18px">
                 {tech?.title}
               </Text>
             );
           })}
         </Flex>
       ) : <Box />}
-      <Flex display={date?.ended ? 'none' : 'flex'} gridGap="10px" alignItems="center">
-        {/* read time */}
+      <Flex display={date?.ended ? 'none' : 'flex'} gridGap="10px" padding={isWorkshop ? '4px 0 0 0' : 'auto'} alignItems="center">
+        {/* <--------------- Average time duration ---------------> */}
         {(Number.isInteger(duration) || date?.text) && (
-          <Flex display={existsDuration ? 'flex' : 'none'} alignItems="center" gridGap="4px" background={backgroundColor} padding="4px 8px" borderRadius="18px">
+          <Flex display={existsDuration ? 'flex' : 'none'} alignItems="center" gridGap="4px" background={backgroundColor} borderRadius="18px">
             <Icon icon="clock" width="14px" height="14px" />
             {intervalDurationText ? (
               <Text size="12px" fontWeight={700}>
@@ -79,8 +72,8 @@ function HeadInfo({ technologies, duration, type, date }) {
             )}
           </Flex>
         )}
-        {/* starts at date */}
-        {type === 'workshop' && (
+        {/* <--------------- Time to start ---------------> */}
+        {isWorkshop && (
           <>
             {startedButNotEnded ? (
               <Box display="flex" alignItems="center" height="auto" gridGap="8px" padding="4px 10px" color="danger" background="red.light" borderRadius="18px">