Update docs

README.md

@@ -15,11 +15,11 @@
 [![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-call-to-action-block-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-call-to-action-block-develop)
 
 
-[Volto](https://github.com/plone/volto) add-on
+[Volto](https://github.com/plone/volto) Call to Action Block
 
 ## Features
 
-Demo GIF
+![Call to Action](https://github.com/eea/volto-call-to-action-block/raw/develop/docs/call-to-action.gif)
 
 ## Getting started
 

src/components/Schema.js

@@ -5,9 +5,9 @@ const messages = defineMessages({
     id: 'Call to Action',
     defaultMessage: 'Call to Action',
   },
-  Text: {
-    id: 'Text',
-    defaultMessage: 'Text',
+  Label: {
+    id: 'Label',
+    defaultMessage: 'Label',
   },
   Link: {
     id: 'Link',
@@ -45,7 +45,7 @@ const messages = defineMessages({
     id: 'Inverted',
     defaultMessage: 'Inverted',
   },
-  DefaultText: {
+  DefaultLabel: {
     id: 'Click here',
     defaultMessage: 'Click here',
   },
@@ -84,8 +84,8 @@ export const EditSchema = ({ intl }) => ({
 
   properties: {
     text: {
-      title: intl.formatMessage(messages.Text),
-      default: intl.formatMessage(messages.DefaultText),
+      title: intl.formatMessage(messages.Label),
+      default: intl.formatMessage(messages.DefaultLabel),
     },
     href: {
       title: intl.formatMessage(messages.Link),

src/components/View.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Icon } from 'semantic-ui-react';
 import cx from 'classnames';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { Link } from 'react-router-dom';
+import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
 
 const View = ({ data, isEditMode }) => {
   const [hasLink, setHasLink] = React.useState(false);
@@ -21,9 +22,11 @@ const View = ({ data, isEditMode }) => {
     }
   }, [isEditMode, data.href]);
 
+  const As = hasLink && isInternalURL(data.href[0]['@id']) ? Link : 'a';
+
   return (
     <div className={cx('block button align', data.styles?.align)}>
-      <a
+      <As
         className={cx(
           data.styles?.theme !== 'link' ? 'ui button' : '',
           data.styles?.inverted ? 'inverted' : '',
@@ -35,12 +38,13 @@ const View = ({ data, isEditMode }) => {
           data.styles?.theme,
         )}
         href={hasLink ? flattenToAppURL(data.href[0]['@id']) : null}
+        to={hasLink ? flattenToAppURL(data.href[0]['@id']) : null}
         title={hasLink ? data.href[0]['title'] : ''}
         target={data.target}
       >
         {data.styles?.icon && <Icon className={data.styles?.icon} />}
         {data.text}
-      </a>
+      </As>
     </div>
   );
 };