tecsinapse · Brenneguer · Aug 28, 2023 · Aug 28, 2023 · Aug 28, 2023 · Aug 28, 2023
diff --git a/packages/carousel/package.json b/packages/carousel/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/carousel",
   "description": "TecSinapse Carousel",
-  "version": "2.7.5",
+  "version": "2.7.7-alpha.0",
   "main": "build/index.js",
   "module": "build/index.js",
   "author": {
@@ -23,7 +23,7 @@
     "ui-kit"
   ],
   "dependencies": {
-    "@tecsinapse/ui-kit": "^5.7.5",
+    "@tecsinapse/ui-kit": "^5.7.7-alpha.0",
     "material-ui-dots": "^2.0.2",
     "react-swipeable-views": "^0.13.9",
     "react-swipeable-views-utils": "^0.13.9"

diff --git a/packages/pickers/package.json b/packages/pickers/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/pickers",
   "description": "TecSinapse Pickers",
-  "version": "2.9.5",
+  "version": "2.9.7-alpha.0",
   "main": "build/index.js",
   "typings": "build/index.d.ts",
   "author": {
@@ -28,7 +28,7 @@
     "@date-io/date-fns": "^1.3.13",
     "@material-ui/pickers": "^3.2.10",
     "@tecsinapse/material-ui-color-picker": "^4.4.0",
-    "@tecsinapse/ui-kit": "^5.7.5",
+    "@tecsinapse/ui-kit": "^5.7.7-alpha.0",
     "date-fns": "^2.28.0"
   },
   "files": [

diff --git a/packages/table/package.json b/packages/table/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/table",
   "description": "TecSinapse Table",
-  "version": "4.1.5",
+  "version": "4.1.7-alpha.0",
   "main": "build/index.js",
   "typings": "build/index.d.ts",
   "author": {
@@ -23,7 +23,7 @@
     "ui-kit"
   ],
   "dependencies": {
-    "@tecsinapse/ui-kit": "^5.7.5",
+    "@tecsinapse/ui-kit": "^5.7.7-alpha.0",
     "react-virtualized": "^9.22.3"
   },
   "files": [

diff --git a/packages/ui-kit/package.json b/packages/ui-kit/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/ui-kit",
   "description": "TecSinapse UI-KIT",
-  "version": "5.7.5",
+  "version": "5.7.7-alpha.0",
   "main": "build/index.js",
   "module": "build/index.js",
   "repository": {

diff --git a/packages/ui-kit/src/components/MessagePreview/MessagePreview.d.ts b/packages/ui-kit/src/components/MessagePreview/MessagePreview.d.ts
@@ -1,8 +1,9 @@
 import { FC } from 'react';
 
 export interface MessagePreviewProps {
-  unformattedText: string
-  buttons?: [object];
+  unformattedText: string,
+  buttons?: [object],
+  sections?: [object],
   media?: string | undefined | null,
   header?: string | undefined | null,
   footer?: string | undefined | null,

diff --git a/packages/ui-kit/src/components/MessagePreview/MessagePreview.js b/packages/ui-kit/src/components/MessagePreview/MessagePreview.js
@@ -7,12 +7,15 @@ import { cardStyle } from './styles';
 import { MessagePreviewUtils } from './utils';
 import { MessageButtons } from './components/MessageButtons';
 import { PreviewHeader } from './components/PreviewHeader';
+import { ListItens } from './components/ListItens';
+import Divider from '../Divider';
 
 const useStyles = makeStyles(cardStyle);
 
 export const MessagePreview = ({
   unformattedText,
   buttons,
+  sections,
   media,
   header,
   footer,
@@ -53,6 +56,12 @@ export const MessagePreview = ({
             <div className={classes.footer}>
               {footer && <div className={classes.textFooter}>{footer}</div>}
               <div className={classes.textTime}>{currentTime()}</div>
+              {sections?.length > 0 && buttons?.length === 0 && (
+                <Grid className={classes.listButton}>
+                  <Divider variant="solid" />
+                  <ListItens sections={sections} classes={classes} />
+                </Grid>
+              )}
             </div>
           </Grid>
         </Grid>
@@ -71,6 +80,8 @@ MessagePreview.propTypes = {
   unformattedText: PropTypes.string.isRequired,
   /** array of buttons that should be displayed */
   buttons: PropTypes.array,
+  /** array of list items that should be displayed */
+  sections: PropTypes.array,
   /** media link */
   media: PropTypes.string,
   /** message header */
@@ -81,6 +92,7 @@ MessagePreview.propTypes = {
 
 MessagePreview.defaultProps = {
   buttons: [],
+  sections: [],
   media: undefined,
   header: undefined,
   footer: undefined,

diff --git a/packages/ui-kit/src/components/MessagePreview/components/ListItens.js b/packages/ui-kit/src/components/MessagePreview/components/ListItens.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Grid, Typography } from '@material-ui/core';
+import { mdiFormatListBulletedSquare } from '@mdi/js';
+import Icon from '@mdi/react';
+
+export const ListItens = ({ sections, classes }) => (
+  <Grid container>
+    <div className={classes.button}>
+      <Icon path={mdiFormatListBulletedSquare} size={1} />
+      <Typography>Ver Opções</Typography>
+    </div>
+  </Grid>
+);
diff --git a/packages/ui-kit/src/components/MessagePreview/styles.js b/packages/ui-kit/src/components/MessagePreview/styles.js
@@ -43,7 +43,7 @@ export const cardStyle = () => ({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
-    padding: '10px',
+    padding: '10px 10px 0px 10px',
     gap: '10px',
     background: '#ffffff',
     borderRadius: '0px 6px 6px 6px',
@@ -84,8 +84,10 @@ export const cardStyle = () => ({
     order: 1,
     alignSelf: 'stretch',
   },
+  listButton: {
+    width: '100%',
+  },
   textTime: {
-    marginBottom: '-5px',
     fontSize: '9px',
     lineHeight: '11px',
     alignItems: 'center',

diff --git a/packages/ui-kit/stories/MessagePreview/MessagePreview.story.tsx b/packages/ui-kit/stories/MessagePreview/MessagePreview.story.tsx
@@ -31,7 +31,7 @@ export default {
 };
 
 export const Base = args => {
-  const { unformattedText, buttons, media, header, footer } = args;
+  const { unformattedText, buttons, sections, media, header, footer } = args;
 
   return (
     <Grid item xs={6}>
@@ -47,6 +47,7 @@ export const Base = args => {
             unformattedText={unformattedText}
             buttons={buttons}
             media={media}
+            sections={sections}
             header={header}
             footer={footer}
           />
@@ -75,6 +76,13 @@ Base.args = {
       description: 'Encerrar',
     },
   ],
+  sections: [
+    {
+      position: 1,
+      title: 'Título do item na lista',
+      description: 'Descrição do item da lista',
+    }
+  ],
   media:
     'https://cdn.portaltecsinapse.com.br/src/chat-component/template-image-example.jpg',
   header: undefined,

diff --git a/packages/uploader/package.json b/packages/uploader/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/uploader",
   "description": "TecSinapse Uploader",
-  "version": "2.7.5",
+  "version": "2.7.7-alpha.0",
   "main": "build/index.js",
   "typings": "build/index.d.js",
   "author": {
@@ -23,7 +23,7 @@
     "uploader"
   ],
   "dependencies": {
-    "@tecsinapse/ui-kit": "^5.7.5",
+    "@tecsinapse/ui-kit": "^5.7.7-alpha.0",
     "react-dropzone": "^11.3.1",
     "uniqid": "^5.3.0"
   },

diff --git a/packages/wizard/package.json b/packages/wizard/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/wizard",
   "description": "TecSinapse Wizard",
-  "version": "3.7.5",
+  "version": "3.7.7-alpha.0",
   "main": "build/index.js",
   "typings": "build/index.d.ts",
   "author": {
@@ -23,7 +23,7 @@
     "wizard"
   ],
   "dependencies": {
-    "@tecsinapse/ui-kit": "^5.7.5"
+    "@tecsinapse/ui-kit": "^5.7.7-alpha.0"
   },
   "files": [
     "build",