feat(icons): add community and LikeHand icons

feat(editors): Add new "preset" to comments in TextEditorInput feat: HtmlText new property and icons feat(icons): new icons to communities and add new size to UserDisplayItem --------- Ticket: epic/Community-22 Refs: #185 Reviewed-by: @MIGUELez11 Co-authored-by: Fernando Marín Sánchez <[email protected]>
leemonade · Sep 13, 2024 · 0c7e569 · 0c7e569
1 parent 35e8a76
commit 0c7e569
Show file tree

Hide file tree

Showing 22 changed files with 158 additions and 86 deletions.
diff --git a/packages/components/src/informative/UserDisplayItem/UserDisplayItem.js b/packages/components/src/informative/UserDisplayItem/UserDisplayItem.js
@@ -13,7 +13,7 @@ import { UserDisplayItemStyles } from './UserDisplayItem.styles';
 
 export const USER_DISPLAY_ITEM_VARIANTS = ['inline', 'block', 'rol', 'email'];
 export const USER_DISPLAY_ITEM_LAYOUT = ['left', 'right'];
-export const USER_DISPLAY_ITEM_SIZES = ['xs', 'sm', 'xmd', 'lg'];
+export const USER_DISPLAY_ITEM_SIZES = ['xs', 'sm', 'xsm', 'md', 'lg'];
 
 export const USER_DISPLAY_ITEM_DEFAULT_PROPS = {
   variant: 'inline',

diff --git a/...nts/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.constants.js b/...nts/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.constants.js
@@ -9,8 +9,12 @@ export const TOTAL_LAYOUT_STEP_CONTAINER_PROP_TYPES = {
   fullWidth: PropTypes.bool,
   titleZone: PropTypes.node,
   loading: PropTypes.bool,
+  TopZone: PropTypes.node,
+  forceNotMaxWidth: PropTypes.bool,
 };
 export const TOTAL_LAYOUT_STEP_CONTAINER_DEFAULT_PROPS = {
   stepName: '',
   titleZone: null,
+  TopZone: null,
+  forceNotMaxWidth: false,
 };
diff --git a/...nents/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.stories.js b/...nents/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.stories.js
@@ -3,7 +3,7 @@ import { TotalLayoutStepContainer } from './TotalLayoutStepContainer';
 import { TOTAL_LAYOUT_STEP_CONTAINER_DEFAULT_PROPS } from './TotalLayoutStepContainer.constants';
 import mdx from './TotalLayoutStepContainer.mdx';
 import { ContextContainer } from '../../ContextContainer';
-import { TextInput, Textarea } from '../../../form';
+import { Button, TextInput, Textarea } from '../../../form';
 import { Stack } from '../../Stack';
 
 export default {
@@ -69,4 +69,5 @@ Playground.args = {
   // myBooleanProp: false,
   // mySelectProp: 'Hello'
   ...TOTAL_LAYOUT_STEP_CONTAINER_DEFAULT_PROPS,
+  TopZone: <Button variant="linkInline">Volver atrás</Button>,
 };
diff --git a/...onents/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js b/...onents/src/layout/TotalLayout/TotalLayoutStepContainer/TotalLayoutStepContainer.styles.js
@@ -2,7 +2,7 @@ import { createStyles } from '@mantine/styles';
 import { TOTAL_LAYOUT_HEADER_HEIGHT } from '../TotalLayoutHeader/TotalLayoutHeader.constants';
 
 const TotalLayoutStepContainerStyles = createStyles(
-  (theme, { hasFooter, clean, fullWidth, noMargin, footerPadding }) => ({
+  (theme, { hasFooter, clean, fullWidth, noMargin, footerPadding, TopZone, forceNotMaxWidth }) => ({
     root: {},
     stepContainer: {
       padding: clean ? 0 : '30px 0 0 0 ',
@@ -22,6 +22,10 @@ const TotalLayoutStepContainerStyles = createStyles(
     stepName: {
       marginBottom: 12,
     },
+    topZone: {
+      marginBottom: 12,
+      marginTop: 24,
+    },
   }),
 );
 

diff --git a/packages/components/src/misc/CardEmptyCover/CardEmptyCover.js b/packages/components/src/misc/CardEmptyCover/CardEmptyCover.js
@@ -18,6 +18,7 @@ import { AssetDocumentIconSmall } from '../FileIcon/AssetDocumentIcon';
 import { AssetScormIcon } from '../FileIcon/AssetScormIcon';
 import { AssetTestIcon } from '../FileIcon/AssetTestIcon';
 import { Box } from '../../layout/Box';
+import { AssetCommunityIcon } from '../FileIcon/AsssetCommunityIcon';
 
 const CardEmptyCover = memo(({ icon, fileType, height }) => {
   const pairColumnRef = useRef(null);
@@ -55,6 +56,10 @@ const CardEmptyCover = memo(({ icon, fileType, height }) => {
       key: 'application',
       value: <FileIcon height={18} width={18} color={'#878D96'} />,
     },
+    {
+      key: 'community',
+      value: <AssetCommunityIcon height={20} width={20} color={'#878D96'} />,
+    },
   ];
 
   const styledIcon = useMemo(() => {

diff --git a/packages/components/src/misc/CardEmptyCover/CardEmptyCover.stories.js b/packages/components/src/misc/CardEmptyCover/CardEmptyCover.stories.js
@@ -15,7 +15,7 @@ export default {
   },
   argTypes: {
     fileType: {
-      options: ['audio', 'video', 'image', 'bookmark', 'file', 'noicon'],
+      options: ['audio', 'video', 'image', 'bookmark', 'file', 'noicon', 'community'],
       control: 'select',
     },
   },

diff --git a/packages/components/src/misc/FileIcon/AsssetCommunityIcon/AssetCommunityIcon.js b/packages/components/src/misc/FileIcon/AsssetCommunityIcon/AssetCommunityIcon.js
diff --git a/packages/components/src/misc/FileIcon/AsssetCommunityIcon/AsssetCommunityIcon.constants.js b/packages/components/src/misc/FileIcon/AsssetCommunityIcon/AsssetCommunityIcon.constants.js
@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+
+export const ASSET_COMMUNITY_ICON_DEFAULT_PROPS = {
+  width: 24,
+  height: 24,
+  color: '#7E8795',
+};
+export const ASSET_COMMUNITY_ICON_PROP_TYPES = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  color: PropTypes.string,
+};
diff --git a/packages/components/src/misc/FileIcon/AsssetCommunityIcon/index.js b/packages/components/src/misc/FileIcon/AsssetCommunityIcon/index.js
@@ -0,0 +1 @@
+export * from './AssetCommunityIcon';
diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
@@ -1544,7 +1544,7 @@ export default {
           "y": 0,
           "blur": 4,
           "spread": 0,
-          "color": "#ffffff",
+          "color": "#ffffff26",
           "type": "dropShadow"
         },
         "type": "boxShadow"
@@ -1625,17 +1625,8 @@ export default {
             "type": "color"
           },
           "hover--reverse-transparent": {
-            "value": "#ffffff",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.15",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#ffffff26",
+            "type": "color"
           },
           "down": {
             "value": "#F1FFBD",
@@ -5295,30 +5286,12 @@ export default {
       "color": {
         "primary": {
           "default": {
-            "value": "#4D5358",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.4",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#4d535866",
+            "type": "color"
           },
           "hover": {
-            "value": "#4D5358",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.7",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#4d5358b3",
+            "type": "color"
           },
           "down": {
             "value": "#4D5358",

diff --git a/packages/components/src/typography/HtmlText/HtmlText.constants.js b/packages/components/src/typography/HtmlText/HtmlText.constants.js
@@ -2,7 +2,9 @@ import PropTypes from 'prop-types';
 
 export const HTML_TEXT_DEFAULT_PROPS = {
   children: '',
+  truncateLines: 0,
 };
 export const HTML_TEXT_PROP_TYPES = {
   children: PropTypes.string,
+  truncateLines: PropTypes.number,
 };
diff --git a/packages/components/src/typography/HtmlText/HtmlText.js b/packages/components/src/typography/HtmlText/HtmlText.js
@@ -1,13 +1,25 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import { Box } from '../../layout/Box';
 import { HtmlTextStyles } from './HtmlText.styles';
 import { HTML_TEXT_DEFAULT_PROPS, HTML_TEXT_PROP_TYPES } from './HtmlText.constants';
+import { truncateHtml } from './helpers';
 
-const HtmlText = ({ children, className }) => {
+const HtmlText = ({ children, className, truncateLines }) => {
   const { classes, cx } = HtmlTextStyles({}, { name: 'HtmlText' });
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (truncateLines > 0 && ref.current) {
+      truncateHtml(ref.current, truncateLines);
+    }
+  }, [truncateLines]);
 
   return (
-    <Box dangerouslySetInnerHTML={{ __html: children }} className={cx(className, classes.root)} />
+    <Box
+      ref={ref}
+      dangerouslySetInnerHTML={{ __html: children }}
+      className={cx(className, classes.root)}
+    />
   );
 };
 

diff --git a/packages/components/src/typography/HtmlText/HtmlText.stories.js b/packages/components/src/typography/HtmlText/HtmlText.stories.js
@@ -22,56 +22,13 @@ export default {
   },
 };
 
-const Template = ({ ...props }) => {
-  return <HtmlText {...props} />;
-};
+const Template = ({ ...props }) => <HtmlText {...props} />;
 
 export const Playground = Template.bind({});
 
 Playground.args = {
   // myBooleanProp: false,
   // mySelectProp: 'Hello'
   ...HTML_TEXT_DEFAULT_PROPS,
-  children: `
-<h1>Heading 1</h1>
-<h2>Heading 2</h2>
-<h3>Heading 3</h3>
-<h4>Heading 4</h4>
-<h5>Heading 5</h5>
-<h6>Heading 6</h6>
-<hr>
-<p><a href="https://mantine.dev">Mantine link</a></p>
-<p>Lorem ipsum, dolor sitamet consectetur adipisicing elit. Provident omnis laudantium itaque quisquam est, magnam harum, cum molestias necessitatibus obcaecati quod esse debitis velit nemo dolores deserunt. Quia, iure doloremque.</p>
-<img src="https://images.unsplash.com/photo-1485219309265-6cda6f90a076?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=2550&amp;q=80" alt="Unsplash image">
-<ul>
-  <li>list item - 1</li>
-  <li>list item - 2</li>
-  <li>list item - 3</li>
-  <li>list item - 4</li>
-</ul>
-
-<ol>
-  <li>list item - 1</li>
-  <li>list item - 2</li>
-  <li>list item - 3</li>
-  <li>list item - 4</li>
-</ol>
-
-<blockquote>
-  Life is like an npm install – you never know what you are going to get.
-  <cite>– Forrest Gump</cite>
-</blockquote>
-
-<p>This is <code>Code</code> inside paragraph</p>
-
-<pre>import React from 'react';
-import { Avatar } from '@mantine/core';
-import image from './image.png';
-
-export function AvatarDemo() {
-  return &lt;Avatar src={image} alt="it's me" /&gt;;
-}</pre>
-
-<table><thead><tr><th>Element position</th><th>Element name</th><th>Symbol</th><th>Atomic mass</th></tr></thead><tbody><tr><td>6</td><td>Carbon</td><td>C</td><td>12.011</td></tr><tr><td>7</td><td>Nitrogen</td><td>N</td><td>14.007</td></tr><tr><td>39</td><td>Yttrium</td><td>Y</td><td>88.906</td></tr><tr><td>56</td><td>Barium</td><td>Ba</td><td>137.33</td></tr><tr><td>58</td><td>Cerium</td><td>Ce</td><td>140.12</td></tr></tbody></table>
-`,
+  children: `<p style="margin-left: 0px!important;">Post muy largo</p><p style="margin-left: 0px!important;"></p><p style="margin-left: 0px!important;"></p><p style="margin-left: 0px!important;">El aprendizaje continuo en el mundo de la programación es una necesidad ineludible. La tecnología avanza a pasos agigantados, y lo que hoy es innovador, mañana puede quedar obsoleto. Como desarrolladores, nos enfrentamos al desafío constante de mantenernos actualizados en un campo que evoluciona rápidamente.</p><p style="margin-left: 0px!important;"><span>Uno</span> de los aspectos más fascinantes de este viaje es la diversidad de caminos que podemos tomar. Desde el desarrollo web hasta la inteligencia artificial, pasando por la ciberseguridad y el blockchain, las opciones son casi infinitas. Cada especialización ofrece sus propios retos y recompensas, permitiéndonos encontrar nuestra pasión dentro de este vasto universo digital<span>.</span></p><p style="margin-left: 0px!important;"><span>Sin</span> embargo, el verdadero poder de un programador no reside solo en el conocimiento técnico, sino en la capacidad de resolver problemas. La lógica, la creatividad y el pensamiento crítico son habilidades tan importantes como el dominio de cualquier lenguaje de programación. Es la combinación de estas habilidades lo que nos permite crear soluciones innovadoras y ef<span>icientes.</span></p><p style="margin-left: 0px!important;">Compartir conocimientos, colaborar en proyectos y aprender de los errores y éxitos de otros nos ayuda a crecer más rápido y de manera más integral<span>.</span></p><p style="margin-left: 0px!important;"><span>No</span> debemos olvidar la importancia de la ética en nuestro trabajo. A medida que la tecnología se integra más en todos los aspectos de la vida, nuestra responsabilidad como creadores aumenta. Debemos considerar cuidadosamente el impacto de nuestro código en la sociedad y esforzarnos por desarrollar tecnologías que beneficien a la human<span>idad.</span></p><p style="margin-left: 0px!important;"><span>En res</span>umen, ser programador es embarcarse en un viaje de aprendizaje permanente, lleno de desafíos y oportunidades. Es un camino que requiere dedicación, pasión y una mente abierta. Pero para aquellos que abrazan este estilo de vida, las recompensas son inmensas: la satisfacción de crear, la emoción de innovar y la oportunidad de dejar una huella duradera en el mundo digital<span>.</span></p>`,
 };
diff --git a/packages/components/src/typography/HtmlText/helpers.js b/packages/components/src/typography/HtmlText/helpers.js
@@ -0,0 +1,38 @@
+const truncateHtml = (element, maxLines) => {
+  const allElements = element.getElementsByTagName('*');
+  let lineCount = 0;
+  let lastElement;
+
+  for (let i = 0; i < allElements.length; i++) {
+    const currentElement = allElements[i];
+    const lines = Math.ceil(
+      currentElement.offsetHeight / parseInt(getComputedStyle(currentElement).lineHeight),
+    );
+
+    if (lineCount + lines > maxLines) {
+      const remainingLines = maxLines - lineCount;
+      currentElement.style.overflow = 'hidden';
+      currentElement.style.textOverflow = 'ellipsis';
+      currentElement.style.display = '-webkit-box';
+      currentElement.style.WebkitLineClamp = remainingLines.toString();
+      currentElement.style.WebkitBoxOrient = 'vertical';
+      currentElement.style.wordBreak = 'keep-all';
+      currentElement.style.overflowWrap = 'break-word';
+
+      for (let j = i + 1; j < allElements.length; j++) {
+        allElements[j].style.display = 'none';
+      }
+      break;
+    }
+
+    lineCount += lines;
+    lastElement = currentElement;
+  }
+
+  // Si no se excedió el límite, asegurarse de que el último elemento esté visible
+  if (lastElement) {
+    lastElement.style.display = '';
+  }
+};
+
+export { truncateHtml };
diff --git a/packages/editors/src/form/TextEditorInput/TextEditorInput.constants.js b/packages/editors/src/form/TextEditorInput/TextEditorInput.constants.js
@@ -12,6 +12,17 @@ export const TEXT_EDITOR_DEFAULT_TOOLBARS = {
 };
 
 export const TEXT_EDITOR_TEXTAREA_TOOLBARS = {
+  style: true,
+  heading: false,
+  align: false,
+  list: false,
+  history: false,
+  color: false,
+  formulation: false,
+  link: true,
+};
+
+export const TEXT_EDITOR_NO_HEADINGS_TOOLBARS = {
   style: true,
   heading: false,
   align: true,

diff --git a/packages/icons/outline/esm/index.d.ts b/packages/icons/outline/esm/index.d.ts
@@ -95,13 +95,15 @@ export { default as LayoutGridIcon } from './LayoutGridIcon'
 export { default as LayoutHeadlineIcon } from './LayoutHeadlineIcon'
 export { default as LayoutModuleIcon } from './LayoutModuleIcon'
 export { default as LayoutTwoColumsIcon } from './LayoutTwoColumsIcon'
+export { default as LikeOutlineIcon } from './LikeOutlineIcon'
 export { default as LinkBrokenIcon } from './LinkBrokenIcon'
 export { default as ListEditIcon } from './ListEditIcon'
 export { default as LocationIcon } from './LocationIcon'
 export { default as LoveItRemoveIcon } from './LoveItRemoveIcon'
 export { default as LoveItIcon } from './LoveItIcon'
 export { default as ManWomanIcon } from './ManWomanIcon'
 export { default as MeetingCameraIcon } from './MeetingCameraIcon'
+export { default as MessagesBubbleSquareIcon } from './MessagesBubbleSquareIcon'
 export { default as ModuleFourIcon } from './ModuleFourIcon'
 export { default as ModuleThreeIcon } from './ModuleThreeIcon'
 export { default as ModuleTwoIcon } from './ModuleTwoIcon'
@@ -123,6 +125,7 @@ export { default as PluginAlertsIcon } from './PluginAlertsIcon'
 export { default as PluginAssignmentsIcon } from './PluginAssignmentsIcon'
 export { default as PluginCalendarIcon } from './PluginCalendarIcon'
 export { default as PluginClassesIcon } from './PluginClassesIcon'
+export { default as PluginComunicaNoDotsIcon } from './PluginComunicaNoDotsIcon'
 export { default as PluginComunicaIcon } from './PluginComunicaIcon'
 export { default as PluginContentCreatorIcon } from './PluginContentCreatorIcon'
 export { default as PluginCurriculumIcon } from './PluginCurriculumIcon'