Exercício 44

frontend/packages/volto-trepr-intranet/src/components/Blocks/Listing/IconListingTemplate.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@plone/components';
+import { ConditionalLink, UniversalLink, Icon } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+import { getContentIcon } from '@plone/volto/helpers/Content/Content';
+
+const IconListingTemplate = ({
+  headlineTag,
+  items,
+  linkTitle,
+  linkHref,
+  isEditMode,
+}) => {
+  let link = null;
+  let href = linkHref?.[0]?.['@id'] || '';
+
+  if (isInternalURL(href)) {
+    link = (
+      <ConditionalLink to={flattenToAppURL(href)} condition={!isEditMode}>
+        {linkTitle || href}
+      </ConditionalLink>
+    );
+  } else if (href) {
+    link = <UniversalLink href={href}>{linkTitle || href}</UniversalLink>;
+  }
+
+  const getTitleTag = (tag) => {
+    const level = tag.slice(-1);
+    if (/\d/.test(level)) {
+      return `h${Number(level) + 1}`;
+    } else {
+      return 'h3';
+    }
+  };
+  const TitleTag = headlineTag ? getTitleTag(headlineTag) : 'h3';
+
+  return (
+    <>
+      <Container className="items icon-items">
+        {items.map((item) => {
+          const iconName = getContentIcon(item.portal_type, true);
+          return (
+            <div className="listing-item" key={item['@id']}>
+              <ConditionalLink item={item} condition={!isEditMode}>
+                <Icon name={iconName} size="64px" />
+                <div className="listing-body">
+                  <TitleTag>{item.title ? item.title : item.id}</TitleTag>
+                  <p>{item.description}</p>
+                </div>
+              </ConditionalLink>
+            </div>
+          );
+        })}
+      </Container>
+
+      {link && <div className="footer">{link}</div>}
+    </>
+  );
+};
+IconListingTemplate.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.any).isRequired,
+  linkMore: PropTypes.any,
+  isEditMode: PropTypes.bool,
+};
+export default IconListingTemplate;

frontend/packages/volto-trepr-intranet/src/index.js

@@ -3,6 +3,8 @@ import AreaView from './components/Views/AreaView';
 import PessoaView from './components/Views/PessoaView';
 // Blocks
 import AreaGridItem from './components/Blocks/Grid/AreaGridItem';
+/// Listing
+import IconListingTemplate from './components/Blocks/Listing/IconListingTemplate';
 
 const applyConfig = (config) => {
   config.settings = {
@@ -38,6 +40,16 @@ const applyConfig = (config) => {
     component: AreaGridItem,
     dependencies: 'Area',
   });
+  /// Listing
+  //// Listing Variations
+  config.blocks.blocksConfig.listing.variations = [
+    ...config.blocks.blocksConfig.listing.variations,
+    {
+      id: 'icon-template',
+      title: 'Ícones',
+      template: IconListingTemplate,
+    },
+  ];
 
   return config;
 };

frontend/packages/volto-trepr-intranet/src/theme/_main.scss

@@ -1,2 +1,3 @@
 // This theme extends the volto-light-theme
 @import 'root';
+@import 'components/block_listing';

frontend/packages/volto-trepr-intranet/src/theme/components/_block_listing.scss

@@ -0,0 +1,13 @@
+.block.listing.icon-template {
+  .items {
+    .listing-item {
+      svg.icon {
+        padding: $spacing-small;
+        border-radius: 50%;
+        margin-right: $spacing-small;
+        background-color: lightblue;
+        color: white;
+      }
+    }
+  }
+}