cozy-ui 105.1.0 → 105.2.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [105.2.1](https://github.com/cozy/cozy-ui/compare/v105.2.0...v105.2.1) (2024-03-26)
+
+
+### Bug Fixes
+
+* **Viewer:** Remove WebviewIntentProvider ([edfdc1d](https://github.com/cozy/cozy-ui/commit/edfdc1d))
+
+# [105.2.0](https://github.com/cozy/cozy-ui/compare/v105.1.0...v105.2.0) (2024-03-21)
+
+
+### Features
+
+* **Viewer:** Refactor PrintButton and use `ActionsItems` ([8b7a068](https://github.com/cozy/cozy-ui/commit/8b7a068))
+
 # [105.1.0](https://github.com/cozy/cozy-ui/compare/v105.0.2...v105.1.0) (2024-03-21)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "105.1.0",
+  "version": "105.2.1",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ActionsMenu/Actions/helpers.js

@@ -5,18 +5,18 @@ import { fetchBlobFileById } from 'cozy-client/dist/models/file'
 const MAX_RESIZE_IMAGE_SIZE = 3840
 
 /**
- * Make array of actions for ActionsItems component
+ * Make array of actions and hydrate actions with options
  *
- * @param {Function[]} actions - Array of actions to create ActionsMenuItem components with associated actions and conditions
+ * @param {Function[]} actions - Array of actions with associated actions and conditions
  * @param {object} actionOptions - Options that need to be passed on actions
  * @returns {object[]} Array of actions
  */
 export const makeActions = (actions = [], options = {}) => {
-  return actions.filter(Boolean).map(action => {
-    const actionMenu = action(options)
-    const name = actionMenu.name || action.name
+  return actions.filter(Boolean).map(actionFn => {
+    const action = actionFn(options)
+    const name = action.name || actionFn.name
 
-    return { [name]: actionMenu }
+    return { [name]: action }
   })
 }
 
@@ -58,7 +58,7 @@ export const getOnlyNeededActions = (actions, docs) => {
         return actionObject
       })
       .filter(Boolean)
-      // We don't want to have an hr as the latest actions available
+      // We don't want to have an hr/divider as the latest actions available
       .filter((cleanedAction, idx, cleanedActions) => {
         return !(
           (getActionName(cleanedAction) === 'hr' ||

package/react/ActionsMenu/ActionsItems.jsx

@@ -74,4 +74,12 @@ ActionsItems.propTypes = {
   onClick: PropTypes.func
 }
 
+export const actionsItemsComponentPropTypes = {
+  docs: PropTypes.array,
+  action: PropTypes.object,
+  autoFocus: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func
+}
+
 export default ActionsItems

package/react/ActionsMenu/Readme.md

@@ -4,23 +4,7 @@ You can pass a reference to a custom DOM element through the `ref` prop to attac
 
 A header `ActionsMenuMobileHeader` can be used to provide context on the menu actions. Since on desktop, we display a popper and not a `BottomSheet`, context for the user is not lost, so the header would be redundant. This is why it is not rendered unless we are on mobile.
 
-### With an automatic creation of actions
-
-Use `makeActions` method and create (or use the predefined actions) to build the actions to pass to `ActionsMenu` high level component. The method `makeActions` takes `actions` array as first argument, and `options` as second argument. `options` are then passed to the `actions` component as `props`.
-
-```bash
-const action1 = ({ option1, option2 }) => ({
-  name: action1,
-  action: (doc, { option3, option4 }) => {}
-  Component: ({ onClick, ...props }) => <SomeComponent {...props} onClick={() => onClick({ option3 })}} />
-})
-
-const actions = makeActions([action1, action2], { option1, option2 })
-
-<ActionsMenu actions={actions} componentsProps={{ actionsItems: { actionOptions: { option4 }} }}
-```
-
-#### How to create actions
+### How to create and use actions
 
 An action is a simple function that returns an object with specific keys:
 
@@ -33,7 +17,7 @@ An action is a simple function that returns an object with specific keys:
 * **Component** : `<func>` – The returned component that manages the display
 
 ```bash
-const expl = makeActionOptions => ({
+const actionExpl = options => ({
   name: 'expl',
   action: () => {},
   disabled: false,
@@ -43,6 +27,32 @@ const expl = makeActionOptions => ({
 })
 ```
 
+The method `makeActions` takes `actions` array as first argument, and `options` as second argument. `options` are then passed to the `actions` component as `props`.
+
+```bash
+const action1 = ({ option1, option2, option5 }) => ({
+  name: action1,
+  action: (doc, { option3, option4 }) => {}
+  Component: ({ onClick, ...props }) => <SomeComponent {...props} onClick={() => onClick({ option3 })}} />
+})
+
+const actions = makeActions([action1, action2], { option1, option2 })
+```
+
+Then you can use `ActionsItems` to render the actions, and pass options (as simple props) and component (in `component` prop) to be used for rendering.
+
+```bash
+<ActionsItems actions={actions} docs={[file]} component={ActionComponent} option5="" />
+```
+
+### ActionsMenu with an automatic creation of actions
+
+Use `makeActions` method and create (or use the predefined actions) to build the actions to pass to `ActionsMenu`. You can pass options to actions with `componentsProps.actionsItems.actionOptions` prop.
+
+```bash
+<ActionsMenu actions={actions} componentsProps={{ actionsItems: { actionOptions: { option4 }} }} />
+```
+
 ```jsx
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
@@ -125,7 +135,9 @@ const actions = makeActions([ modify, viewInContacts, divider, call, smsTo, emai
 </DemoProvider>
 ```
 
-### With a manual creation of the actions
+### ActionsMenu with a manual creation of the actions
+
+We don't use `makeActions` here, all actions are created "by hand". This is not the recommanded choice.
 
 ```jsx
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'

package/react/Viewer/Readme.md

@@ -4,12 +4,11 @@ Once rendered, the `Viewer` will take up all the available space in it's contain
 
 The `Viewer` can display an **information panel** to show additional information about the current file (e.g. whether a file is certified).
 
-### ⚠️ Important
+### ⚠️ Requirement
 
+* You must have [WebviewIntent Provider](https://github.com/cozy/cozy-libs/blob/b1ad6f5933b463878f641d9fbb63eddd4c45b0d0/packages/cozy-intent/src/view/components/WebviewIntentProvider.tsx#L89) & [CozySharing Provider](https://github.com/cozy/cozy-libs/tree/master/packages/cozy-sharing)
 * In order to download and display the files, it will need a `cozy-client` instance in the React context.
 * To have the panels, the app need to have [cozy-harvest-lib](https://github.com/cozy/cozy-libs/tree/master/packages/cozy-harvest-lib) installed
-* To have a working footer, the app need to have a [CozySharing Provider](https://github.com/cozy/cozy-libs/tree/master/packages/cozy-sharing).
-* If the footer will be used on MobileApp, the app should have this Cordova plugin [4db7f8f#diff-8c7901258747b81ed60cc2d9cbb254344fae11f8a602e56c1ae42d9eef11d318R50](https://github.com/cozy/cozy-ui/commit/4db7f8fba866bffe04d81d42c716a8dea5c50157#diff-8c7901258747b81ed60cc2d9cbb254344fae11f8a602e56c1ae42d9eef11d318R50)
 
 ### Props
 
@@ -68,6 +67,7 @@ const files = [
   {
     _id: 'audio',
     class: 'audio',
+    type: 'file',
     name: 'Sample.mp3',
     mime: 'audio/mp3',
     dir_id: 'parent_folder'
@@ -75,6 +75,7 @@ const files = [
   {
     _id: 'slide',
     class: 'slide',
+    type: 'file',
     name: 'Slide.pptx',
     mime: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
     dir_id: 'parent_folder'
@@ -82,6 +83,7 @@ const files = [
   {
     _id: 'pdf',
     class: 'pdf',
+    type: 'file',
     name: 'My vehicle registration.pdf',
     mime: 'application/pdf',
     metadata: {
@@ -107,6 +109,7 @@ const files = [
   {
     _id: 'text',
     class: 'text',
+    type: 'file',
     name: 'LoremipsumdolorsitametconsecteturadipiscingelitSednonrisusSuspendisselectustortordignissimsitametadipiscingnecultriciesseddolorCraselementumultricesdiamMaecenasligulamassavariusasempercongueeuismodnonmiProinporttitororcinecnonummymolestieenimesteleifendminonfermentumdiamnislsitameteratDuissemperDuisarcumassascelerisquevitaeconsequatinpretiumaenimPellentesquecongueUtinrisusvolutpatliberopharetratemporCrasvestibulumbibendumauguePraesentegestasleoinpedePraesentblanditodioeuenimPellentesquesedduiutaugueblanditsodalesVestibulumanteipsumprimisinfaucibusorciluctusetultricesposuerecubiliaCuraeAliquamnibhMaurisacmaurissedpedepellentesquefermentumMaecenasadipiscingantenondiamsodaleshendrerit.txt',
     mime: 'text/plain',
     metadata: {
@@ -120,6 +123,7 @@ const files = [
     {
     _id: 'text',
     class: 'text',
+    type: 'file',
     name: 'encrypted-example.txt',
     mime: 'text/plain',
     encrypted: true
@@ -128,6 +132,7 @@ const files = [
   {
     _id: 'image',
     class: 'image',
+    type: 'file',
     name: 'Demo.jpg',
     mime: 'image/jpg',
     metadata: {
@@ -143,12 +148,14 @@ const files = [
   {
     _id: 'none',
     class: 'unknown',
+    type: 'file',
     name: 'Unsupported file type',
     mime: '???/???'
   },
   {
     _id: 'none',
     class: 'unknown',
+    type: 'file',
     name: 'Unsupported file type',
     mime: '???/???',
     metadata: {

package/react/Viewer/ViewerContainer.jsx

@@ -2,8 +2,6 @@ import React, { createRef } from 'react'
 import PropTypes from 'prop-types'
 import cx from 'classnames'
 
-import { WebviewIntentProvider } from 'cozy-intent'
-
 import useBreakpoints from '../providers/Breakpoints'
 import { FileDoctype } from '../proptypes'
 import { useExtendI18n } from '../providers/I18n'
@@ -52,39 +50,37 @@ const ViewerContainer = props => {
   }
 
   return (
-    <WebviewIntentProvider>
-      <AlertProvider>
-        <ActionMenuProvider editPathByModelProps={editPathByModelProps}>
-          <div
-            id="viewer-wrapper"
-            className={cx(styles['viewer-wrapper'], className)}
-          >
-            <EncryptedProvider url={currentURL}>
-              <Viewer
-                {...rest}
-                componentsProps={componentsPropsWithDefault}
-                currentFile={currentFile}
-                hasPrevious={hasPrevious}
-                hasNext={hasNext}
-                validForPanel={validForPanel}
-                toolbarRef={toolbarRef}
-              >
-                {children}
-              </Viewer>
-            </EncryptedProvider>
-            <ViewerInformationsWrapper
-              isPublic={isPublic}
-              disableFooter={disableFooter}
-              validForPanel={validForPanel}
+    <AlertProvider>
+      <ActionMenuProvider editPathByModelProps={editPathByModelProps}>
+        <div
+          id="viewer-wrapper"
+          className={cx(styles['viewer-wrapper'], className)}
+        >
+          <EncryptedProvider url={currentURL}>
+            <Viewer
+              {...rest}
+              componentsProps={componentsPropsWithDefault}
               currentFile={currentFile}
+              hasPrevious={hasPrevious}
+              hasNext={hasNext}
+              validForPanel={validForPanel}
               toolbarRef={toolbarRef}
             >
               {children}
-            </ViewerInformationsWrapper>
-          </div>
-        </ActionMenuProvider>
-      </AlertProvider>
-    </WebviewIntentProvider>
+            </Viewer>
+          </EncryptedProvider>
+          <ViewerInformationsWrapper
+            isPublic={isPublic}
+            disableFooter={disableFooter}
+            validForPanel={validForPanel}
+            currentFile={currentFile}
+            toolbarRef={toolbarRef}
+          >
+            {children}
+          </ViewerInformationsWrapper>
+        </div>
+      </ActionMenuProvider>
+    </AlertProvider>
   )
 }
 

package/react/Viewer/components/PrintButton.jsx

@@ -1,30 +1,57 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 
-import { useClient } from 'cozy-client'
 import { useWebviewIntent } from 'cozy-intent'
 
 import Button from '../../Buttons'
 import IconButton from '../../IconButton'
 import Icon from '../../Icon'
+import ActionsItems, {
+  actionsItemsComponentPropTypes
+} from '../../ActionsMenu/ActionsItems'
 import { print } from '../../ActionsMenu/Actions/print'
+import { makeActions } from '../../ActionsMenu/Actions/helpers'
+
+const ActionComponent = forwardRef(({ action, variant, onClick }, ref) => {
+  const { label, icon } = action
+
+  if (variant === 'button') {
+    return (
+      <Button
+        ref={ref}
+        variant="secondary"
+        aria-label={label}
+        label={<Icon icon={icon} />}
+        onClick={onClick}
+      />
+    )
+  }
+
+  return (
+    <IconButton
+      ref={ref}
+      className="u-white"
+      aria-label={label}
+      onClick={onClick}
+    >
+      <Icon icon={icon} />
+    </IconButton>
+  )
+})
+
+ActionComponent.displayName = 'ActionComponent'
+
+ActionComponent.propTypes = {
+  ...actionsItemsComponentPropTypes,
+  variant: PropTypes.oneOf(['default', 'button'])
+}
 
 const PrintButton = ({ file, variant }) => {
   const [isPrintAvailable, setIsPrintAvailable] = useState(false)
-  const client = useClient()
   const webviewIntent = useWebviewIntent()
-  const {
-    icon: printIcon,
-    label: printLabel,
-    action: printAction,
-    displayCondition: printDisplayCondition
-  } = print()
 
   const isPDFDoc = file.mime === 'application/pdf'
-  const showPrintButton = printDisplayCondition && isPDFDoc && isPrintAvailable
-
-  const handleClick = async () =>
-    await printAction([file], { client, webviewIntent })
+  const showPrintButton = isPDFDoc && isPrintAvailable
 
   useEffect(() => {
     const init = async () => {
@@ -39,25 +66,15 @@ const PrintButton = ({ file, variant }) => {
 
   if (!showPrintButton) return null
 
-  if (variant === 'button') {
-    return (
-      <Button
-        variant="secondary"
-        aria-label={printLabel}
-        label={<Icon icon={printIcon} />}
-        onClick={handleClick}
-      />
-    )
-  }
+  const actions = makeActions([print])
 
   return (
-    <IconButton
-      className="u-white"
-      aria-label={printLabel}
-      onClick={handleClick}
-    >
-      <Icon icon={printIcon} />
-    </IconButton>
+    <ActionsItems
+      docs={[file]}
+      actions={actions}
+      component={ActionComponent}
+      variant={variant}
+    />
   )
 }
 

package/transpiled/react/ActionsMenu/Actions/helpers.js

@@ -13,9 +13,9 @@ import { fetchBlobFileById } from 'cozy-client/dist/models/file'; // Should guar
 
 var MAX_RESIZE_IMAGE_SIZE = 3840;
 /**
- * Make array of actions for ActionsItems component
+ * Make array of actions and hydrate actions with options
  *
- * @param {Function[]} actions - Array of actions to create ActionsMenuItem components with associated actions and conditions
+ * @param {Function[]} actions - Array of actions with associated actions and conditions
  * @param {object} actionOptions - Options that need to be passed on actions
  * @returns {object[]} Array of actions
  */
@@ -23,10 +23,10 @@ var MAX_RESIZE_IMAGE_SIZE = 3840;
 export var makeActions = function makeActions() {
   var actions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return actions.filter(Boolean).map(function (action) {
-    var actionMenu = action(options);
-    var name = actionMenu.name || action.name;
-    return _defineProperty({}, name, actionMenu);
+  return actions.filter(Boolean).map(function (actionFn) {
+    var action = actionFn(options);
+    var name = action.name || actionFn.name;
+    return _defineProperty({}, name, action);
   });
 };
 export var getActionName = function getActionName(actionObject) {
@@ -57,7 +57,7 @@ export var getOnlyNeededActions = function getOnlyNeededActions(actions, docs) {
     }
 
     return actionObject;
-  }).filter(Boolean) // We don't want to have an hr as the latest actions available
+  }).filter(Boolean) // We don't want to have an hr/divider as the latest actions available
   .filter(function (cleanedAction, idx, cleanedActions) {
     return !((getActionName(cleanedAction) === 'hr' || getActionName(cleanedAction) === 'divider') && idx === cleanedActions.length - 1);
   });

package/transpiled/react/ActionsMenu/ActionsItems.js

@@ -71,4 +71,11 @@ ActionsItems.propTypes = {
   /** The overrideClick function from ActionsMenuWrapper */
   onClick: PropTypes.func
 };
+export var actionsItemsComponentPropTypes = {
+  docs: PropTypes.array,
+  action: PropTypes.object,
+  autoFocus: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func
+};
 export default ActionsItems;

package/transpiled/react/Viewer/ViewerContainer.js

@@ -11,7 +11,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { WebviewIntentProvider } from 'cozy-intent';
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { FileDoctype } from "cozy-ui/transpiled/react/proptypes";
 import { useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
@@ -64,7 +63,7 @@ var ViewerContainer = function ViewerContainer(props) {
     }, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.toolbarProps)
   });
 
-  return /*#__PURE__*/React.createElement(WebviewIntentProvider, null, /*#__PURE__*/React.createElement(AlertProvider, null, /*#__PURE__*/React.createElement(ActionMenuProvider, {
+  return /*#__PURE__*/React.createElement(AlertProvider, null, /*#__PURE__*/React.createElement(ActionMenuProvider, {
     editPathByModelProps: editPathByModelProps
   }, /*#__PURE__*/React.createElement("div", {
     id: "viewer-wrapper",
@@ -84,7 +83,7 @@ var ViewerContainer = function ViewerContainer(props) {
     validForPanel: validForPanel,
     currentFile: currentFile,
     toolbarRef: toolbarRef
-  }, children)))));
+  }, children))));
 };
 
 ViewerContainer.propTypes = {

package/transpiled/react/Viewer/components/PrintButton.js

@@ -1,111 +1,113 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useState, useEffect } from 'react';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { useState, useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { useClient } from 'cozy-client';
 import { useWebviewIntent } from 'cozy-intent';
 import Button from "cozy-ui/transpiled/react/Buttons";
 import IconButton from "cozy-ui/transpiled/react/IconButton";
 import Icon from "cozy-ui/transpiled/react/Icon";
+import ActionsItems, { actionsItemsComponentPropTypes } from "cozy-ui/transpiled/react/ActionsMenu/ActionsItems";
 import { print } from "cozy-ui/transpiled/react/ActionsMenu/Actions/print";
+import { makeActions } from "cozy-ui/transpiled/react/ActionsMenu/Actions/helpers";
+var ActionComponent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var action = _ref.action,
+      variant = _ref.variant,
+      onClick = _ref.onClick;
+  var label = action.label,
+      icon = action.icon;
+
+  if (variant === 'button') {
+    return /*#__PURE__*/React.createElement(Button, {
+      ref: ref,
+      variant: "secondary",
+      "aria-label": label,
+      label: /*#__PURE__*/React.createElement(Icon, {
+        icon: icon
+      }),
+      onClick: onClick
+    });
+  }
 
-var PrintButton = function PrintButton(_ref) {
-  var file = _ref.file,
-      variant = _ref.variant;
+  return /*#__PURE__*/React.createElement(IconButton, {
+    ref: ref,
+    className: "u-white",
+    "aria-label": label,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }));
+});
+ActionComponent.displayName = 'ActionComponent';
+ActionComponent.propTypes = _objectSpread(_objectSpread({}, actionsItemsComponentPropTypes), {}, {
+  variant: PropTypes.oneOf(['default', 'button'])
+});
+
+var PrintButton = function PrintButton(_ref2) {
+  var file = _ref2.file,
+      variant = _ref2.variant;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       isPrintAvailable = _useState2[0],
       setIsPrintAvailable = _useState2[1];
 
-  var client = useClient();
   var webviewIntent = useWebviewIntent();
-
-  var _print = print(),
-      printIcon = _print.icon,
-      printLabel = _print.label,
-      printAction = _print.action,
-      printDisplayCondition = _print.displayCondition;
-
   var isPDFDoc = file.mime === 'application/pdf';
-  var showPrintButton = printDisplayCondition && isPDFDoc && isPrintAvailable;
-
-  var handleClick = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return printAction([file], {
-                client: client,
-                webviewIntent: webviewIntent
-              });
-
-            case 2:
-              return _context.abrupt("return", _context.sent);
-
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function handleClick() {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
+  var showPrintButton = isPDFDoc && isPrintAvailable;
   useEffect(function () {
     var init = /*#__PURE__*/function () {
-      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var _yield$webviewIntent$;
 
         var isAvailable;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context.prev = _context.next) {
               case 0:
-                _context2.next = 2;
+                _context.next = 2;
                 return webviewIntent === null || webviewIntent === void 0 ? void 0 : webviewIntent.call('isAvailable', 'print');
 
               case 2:
-                _context2.t1 = _yield$webviewIntent$ = _context2.sent;
-                _context2.t0 = _context2.t1 !== null;
+                _context.t1 = _yield$webviewIntent$ = _context.sent;
+                _context.t0 = _context.t1 !== null;
 
-                if (!_context2.t0) {
-                  _context2.next = 6;
+                if (!_context.t0) {
+                  _context.next = 6;
                   break;
                 }
 
-                _context2.t0 = _yield$webviewIntent$ !== void 0;
+                _context.t0 = _yield$webviewIntent$ !== void 0;
 
               case 6:
-                if (!_context2.t0) {
-                  _context2.next = 10;
+                if (!_context.t0) {
+                  _context.next = 10;
                   break;
                 }
 
-                _context2.t2 = _yield$webviewIntent$;
-                _context2.next = 11;
+                _context.t2 = _yield$webviewIntent$;
+                _context.next = 11;
                 break;
 
               case 10:
-                _context2.t2 = true;
+                _context.t2 = true;
 
               case 11:
-                isAvailable = _context2.t2;
+                isAvailable = _context.t2;
                 setIsPrintAvailable(isAvailable);
 
               case 13:
               case "end":
-                return _context2.stop();
+                return _context.stop();
             }
           }
-        }, _callee2);
+        }, _callee);
       }));
 
       return function init() {
@@ -116,25 +118,13 @@ var PrintButton = function PrintButton(_ref) {
     init();
   }, [webviewIntent]);
   if (!showPrintButton) return null;
-
-  if (variant === 'button') {
-    return /*#__PURE__*/React.createElement(Button, {
-      variant: "secondary",
-      "aria-label": printLabel,
-      label: /*#__PURE__*/React.createElement(Icon, {
-        icon: printIcon
-      }),
-      onClick: handleClick
-    });
-  }
-
-  return /*#__PURE__*/React.createElement(IconButton, {
-    className: "u-white",
-    "aria-label": printLabel,
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: printIcon
-  }));
+  var actions = makeActions([print]);
+  return /*#__PURE__*/React.createElement(ActionsItems, {
+    docs: [file],
+    actions: actions,
+    component: ActionComponent,
+    variant: variant
+  });
 };
 
 PrintButton.propTypes = {