@eeacms/volto-tableau 6.0.0 → 6.0.2

package/src/less/tableau.less

@@ -1,4 +1,5 @@
 @import './globals.less';
+@import './tableau.variables';
 
 @addon: 'volto-tableau';
 @addontype: 'tableauBlock';
@@ -59,19 +60,19 @@
     animation: spin 1s linear infinite;
     background-image: linear-gradient(
       -45deg,
-      @primaryColor 25%,
-      @secondaryColor 25%,
-      @secondaryColor 50%,
-      @primaryColor 50%,
-      @primaryColor 75%,
-      @secondaryColor 75%
+      @grey-1 25%,
+      @grey-2 25%,
+      @grey-2 50%,
+      @grey-1 50%,
+      @grey-1 75%,
+      @grey-2 75%
     );
     background-size: 100px 100px;
     border-radius: 5px;
 
     span {
       margin: 6px auto;
-      color: white;
+      color: @textColor;
       font-weight: bold;
       text-align: center;
     }
@@ -111,227 +112,7 @@
   }
 }
 
-// ========= Sources ==========
-
-.tableau-wrapper .visualization-info-container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1.2rem;
-
-  > *:first-child {
-    margin-left: auto;
-
-    > *:not(:last-child) {
-      border-right: 1px solid @textColor;
-    }
-  }
-
-  > *:last-child {
-    justify-content: flex-end;
-  }
-
-  .visualization-info {
-    display: flex;
-    flex-grow: 0.5;
-    align-items: center;
-
-    > * {
-      padding: 0 0.5rem;
-      border-collapse: collapse;
-    }
-
-    > *:first-child {
-      padding-left: 0;
-    }
-
-    > *:last-child {
-      padding-right: 0;
-      margin-right: 0;
-
-      &.tableau-download-container {
-        margin-left: auto;
-      }
-    }
-  }
-}
-
-.embed-sources-header {
-  cursor: pointer;
-}
-
-#tableau-share-popup {
-  .ui.popup {
-    padding-right: 15px;
-    padding-left: 0;
-  }
-
-  .tableau-share-popup-text {
-    margin-left: 7px;
-  }
-}
-
-.tableau-share-popup-container {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-
-  .tableau-share-link {
-    input {
-      padding-left: 7px !important;
-      border-left: 0 !important;
-
-      &:focus {
-        outline: 1px solid var(--focus-visible, #0083e0);
-      }
-    }
-  }
-
-  .tableau-copy-button {
-    max-width: 80px;
-    padding: 10px 17px !important;
-    border: 1px solid black !important;
-    margin: 0 !important;
-    background-color: #4472c4 !important;
-    border-radius: 7px !important;
-  }
-
-  @media screen and (max-width: @largestMobileScreen) {
-    flex-direction: column;
-  }
-}
-
-.tableau-note-button,
-.tableau-more-info-button,
-.tableau-download-button,
-.tableau-sources-button,
-.tableau-share-button {
-  display: inline-flex;
-  align-items: center;
-  padding-bottom: 3px;
-  border: none;
-  background-color: transparent;
-  color: @textColor;
-  cursor: pointer;
-
-  .icon {
-    margin-left: 0.5rem;
-  }
-
-  &:hover {
-    color: @secondaryColor;
-  }
-
-  &.expanded {
-    padding-bottom: 0;
-    border-bottom: 3px solid @secondaryColor;
-    color: @secondaryColor;
-  }
-}
-
-.tableau-more-info-button,
-.tableau-download-button,
-.tableau-share-button {
-  gap: 0.25rem;
-
-  i {
-    margin-bottom: 1px;
-  }
-}
-
-#tableau-note-popup,
-#tableau-sources-popup,
-#tableau-download-popup {
-  .ui.popup {
-    background-color: @grey-1;
-    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
-
-    &::before {
-      background-color: @grey-1;
-    }
-  }
-
-  .sources-list {
-    margin: 0;
-    list-style: decimal inside;
-    padding-inline-start: 0;
-  }
-
-  .embed-sources-param-description {
-    margin-left: 5px;
-  }
-
-  @media screen and (min-width: @largestMobileScreen) {
-    .ui.popup {
-      max-width: 600px;
-    }
-  }
-}
-
-#tableau-download-popup {
-  ul.no-bullets {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-  }
-
-  .visualization-wrapper {
-    position: relative;
-
-    .visualization-info {
-      display: flex;
-      align-items: center;
-
-      > * {
-        padding: 0 0.5rem;
-        border-collapse: collapse;
-      }
-
-      > *:first-child {
-        padding-left: 0;
-      }
-
-      > *:last-child {
-        padding-right: 0;
-        margin-right: 0;
-
-        &.tableau-download-container {
-          margin-left: auto;
-        }
-      }
-
-      > *:not(:last-child) {
-        border-right: 2px solid @textColor;
-      }
-    }
-  }
-
-  .tableau-download-button.tableau-format-download {
-    padding: 0;
-    color: #679ad6;
-    font-weight: normal;
-
-    &:hover {
-      color: #164b7f;
-    }
-  }
-}
-
-@media print {
-  .tableau-download-container,
-  .tableau-note-container,
-  .tableau-sources-container,
-  .tableau-share-container,
-  #tableau-note-popup,
-  #tableau-sources-popup {
-    display: none;
-  }
-}
-
 #tableau-editor-modal {
   width: 90vw !important;
   height: calc(80vh - 10em) !important;
 }
-
-.loadAddonVariables();

package/src/less/tableau.variables

@@ -1,4 +1,7 @@
-@tableauWrapperBackground : #f5f5f5;
+@grey-1: #f9f9f9;
+@grey-2: #E6E7E8;
+
+@tableauWrapperBackground : @grey-1;
 @tableauWrapperPadding    : 1rem;
 @tableauWrapperMargin     : 0 0 1rem 0;
 
@@ -6,5 +9,3 @@
 @tableauIframeMargin        : 0 auto 1rem auto;
 @tableauIframeBorder        : none;
 @tableauIframeBorderRadius  : 0;
-
-@grey-1                     : #f9f9f9;

package/src/Utils/Download/Download.test.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-import Download from './Download';
-
-window.URL.createObjectURL = jest.fn(() => 'test');
-
-jest.mock('@plone/volto/components', () => ({
-  Icon: ({ children }) => <img alt="incon">{children}</img>,
-}));
-
-describe('Download', () => {
-  const viz = {};
-
-  it('should render the component', () => {
-    const { container } = render(<Download viz={viz} />);
-    expect(
-      container.querySelector('.tableau-download-container'),
-    ).toBeInTheDocument();
-  });
-});

package/src/Utils/FigureNote/FigureNote.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { Popup } from 'semantic-ui-react';
-import {
-  serializeNodes,
-  serializeNodesToText,
-} from '@plone/volto-slate/editor/render';
-import { isArray } from 'lodash';
-
-export const serializeText = (note) => {
-  if (!serializeNodesToText(note))
-    return <p>There are no notes set for this visualization</p>;
-  return isArray(note) ? serializeNodes(note) : note;
-};
-
-const FigureNote = ({ note = [] }) => {
-  const [expanded, setExpanded] = React.useState(false);
-
-  return (
-    <div className="tableau-note-container">
-      <Popup
-        position="bottom left"
-        popper={{ id: 'tableau-note-popup' }}
-        trigger={
-          <button className={cx('tableau-note-button', { expanded })}>
-            Note
-          </button>
-        }
-        on="click"
-        onClose={() => {
-          setExpanded(false);
-        }}
-        onOpen={() => {
-          setExpanded(true);
-        }}
-      >
-        <Popup.Content>{serializeText(note)}</Popup.Content>
-      </Popup>
-    </div>
-  );
-};
-
-export default FigureNote;

package/src/Utils/FigureNote/FigureNote.test.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-import FigureNote from './FigureNote';
-
-window.URL.createObjectURL = jest.fn(() => 'test');
-
-const slateEditor = require('@plone/volto-slate/editor/render');
-slateEditor.serializeNodes = jest.fn();
-
-jest.mock('@plone/volto-slate/editor/render', () => ({
-  serializeNodesToText: ({ note = [] }) => note,
-}));
-
-describe('FigureNote', () => {
-  const note = [];
-
-  it('should render the component', () => {
-    const { container } = render(<FigureNote note={note} />);
-    expect(
-      container.querySelector('.tableau-note-container'),
-    ).toBeInTheDocument();
-  });
-});

package/src/Utils/MoreInfoLink/MoreInfoLink.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { UniversalLink } from '@plone/volto/components';
-
-const Link = ({ children, ...props }) => {
-  if (props.href) {
-    return <UniversalLink {...props}>{children}</UniversalLink>;
-  }
-  return <span {...props}>{children}</span>;
-};
-
-const MoreInfoLink = ({ contentTypeLink }) => {
-  return (
-    <Link href={contentTypeLink}>
-      <button className={cx('tableau-more-info-button')}>
-        More info <i class="ri-external-link-line"></i>
-      </button>
-    </Link>
-  );
-};
-
-export default MoreInfoLink;

package/src/Utils/MoreInfoLink/MoreInfoLink.test.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-import MoreInfoLink from './MoreInfoLink';
-
-window.URL.createObjectURL = jest.fn(() => 'test');
-
-jest.mock('@plone/volto/components', () => ({
-  UniversalLink: ({ children }) => <div>{children}</div>,
-}));
-
-describe('MoreInfoLink', () => {
-  const contentTypeLink = '/tableau-content-type';
-
-  it('should render the component', () => {
-    const { container } = render(
-      <MoreInfoLink contentTypeLink={contentTypeLink} />,
-    );
-    expect(
-      container.querySelector('.tableau-more-info-button'),
-    ).toBeInTheDocument();
-  });
-});

package/src/Utils/Share/Share.jsx

@@ -1,69 +0,0 @@
-import React from 'react';
-import { Popup, Input, Button } from 'semantic-ui-react';
-import { useCopyToClipboard } from '../../helpers.js';
-import cx from 'classnames';
-
-const Share = ({ contentTypeLink = '' }) => {
-  const [expanded, setExpanded] = React.useState(false);
-  const popupRef = React.useRef();
-
-  const CopyUrlButton = ({ className, url, buttonText }) => {
-    const [copyUrlStatus, copyUrl] = useCopyToClipboard(url);
-
-    if (copyUrlStatus === 'copied') {
-      buttonText = 'Copied!';
-    } else if (copyUrlStatus === 'failed') {
-      buttonText = 'Copy failed. Please try again.';
-    }
-
-    return (
-      <Button
-        primary
-        onClick={copyUrl}
-        className={cx('copy-button', className)}
-      >
-        {buttonText}
-      </Button>
-    );
-  };
-
-  return (
-    <Popup
-      popper={{ id: 'tableau-share-popup' }}
-      trigger={
-        <div className="tableau-share-container">
-          <button className={cx('tableau-share-button', { expanded })}>
-            <span>Share</span>
-            <i class="ri-share-fill"></i>
-          </button>
-        </div>
-      }
-      position="bottom left"
-      on="click"
-      onClose={() => {
-        setExpanded(false);
-      }}
-      onOpen={() => {
-        setExpanded(true);
-      }}
-      ref={popupRef}
-    >
-      <div>
-        <span className="tableau-share-popup-text">Copy link</span>
-        <div className="tableau-share-popup-container">
-          <Input
-            className="tableau-share-link"
-            defaultValue={contentTypeLink}
-          />
-          <CopyUrlButton
-            className="tableau-copy-button"
-            url={contentTypeLink}
-            buttonText="Copy"
-          />
-        </div>
-      </div>
-    </Popup>
-  );
-};
-
-export default Share;

package/src/Utils/Sources/Sources.jsx

@@ -1,67 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { Popup } from 'semantic-ui-react';
-import { UniversalLink } from '@plone/volto/components';
-
-const Link = ({ children, ...props }) => {
-  if (props.href) {
-    return <UniversalLink {...props}>{children}</UniversalLink>;
-  }
-  return <span {...props}>{children}</span>;
-};
-
-const Source = ({ source }) => {
-  return (
-    <>
-      <Link className="embed-sources-param-title" href={source.link}>
-        {source.title}
-      </Link>
-      ,
-      <span className="embed-sources-param-description">
-        {source.organisation}
-      </span>
-    </>
-  );
-};
-
-const SourcesWidget = ({ sources }) => {
-  const [expanded, setExpanded] = React.useState(false);
-
-  return (
-    <div className="tableau-sources-container">
-      <Popup
-        content={
-          sources?.length ? (
-            <ol className="sources-list">
-              {sources?.map((source, index) => {
-                return (
-                  <li key={index}>
-                    <Source source={source} />
-                  </li>
-                );
-              })}
-            </ol>
-          ) : (
-            <p>Data provenance is not set for this visualization.</p>
-          )
-        }
-        position="bottom left"
-        popper={{ id: 'tableau-sources-popup' }}
-        trigger={
-          <button className={cx('tableau-sources-button', { expanded })}>
-            Sources
-          </button>
-        }
-        on="click"
-        onClose={() => {
-          setExpanded(false);
-        }}
-        onOpen={() => {
-          setExpanded(true);
-        }}
-      />
-    </div>
-  );
-};
-
-export default SourcesWidget;