@qoretechnologies/reqore 0.35.2 → 0.35.3

package/dist/constants/paging.js

@@ -11,7 +11,26 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 exports.__esModule = true;
-exports.getPaginationOptionsFromType = void 0;
+exports.getPaginationOptionsFromType = exports.getPagingObjectFromType = void 0;
+function getPagingObjectFromType(type) {
+    if (typeof type === 'object') {
+        return type;
+    }
+    switch (type) {
+        case 'buttons':
+            return {};
+        case 'list':
+            return {
+                showPagesAs: 'list'
+            };
+        case 'infinite':
+        case 'auto-load':
+            return { infinite: true };
+        default:
+            return {};
+    }
+}
+exports.getPagingObjectFromType = getPagingObjectFromType;
 function getPaginationOptionsFromType(type) {
     if (!type)
         return {};

package/dist/constants/paging.js.map

@@ -1 +1 @@
-{"version":3,"file":"paging.js","sourceRoot":"","sources":["../../src/constants/paging.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AA0BA,SAAgB,4BAA4B,CAC1C,IAA8B;IAE9B,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAC;IAErB,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAE1B,IAAA,QAAQ,GAWN,IAAI,SAXE,EACR,YAAY,GAUV,IAAI,aAVM,EACZ,WAAW,GAST,IAAI,YATK,EACX,SAAS,GAQP,IAAI,UARG,EACT,OAAO,GAOL,IAAI,QAPC,EACP,YAAY,GAMV,IAAI,aANM,EACZ,KAKE,IAAI,qBALyB,EAA/B,oBAAoB,mBAAG,QAAQ,KAAA,EAC/B,qBAAqB,GAInB,IAAI,sBAJe,EACrB,kBAAkB,GAGhB,IAAI,mBAHY,EAEf,gBAAgB,UACjB,IAAI,EAZF,0JAYL,CADoB,CACZ;QAET,OAAO;YACL,aAAa,EAAE,EAAE,QAAQ,UAAA,EAAE,YAAY,cAAA,EAAE,WAAW,aAAA,EAAE,SAAS,WAAA,EAAE,OAAO,SAAA,EAAE,YAAY,cAAA,EAAE;YACxF,oBAAoB,sBAAA;YACpB,gBAAgB,kBAAA;YAChB,qBAAqB,uBAAA;YACrB,kBAAkB,oBAAA;SACnB,CAAC;KACH;IAED,QAAQ,IAAI,EAAE;QACZ,KAAK,SAAS;YACZ,OAAO,EAAE,CAAC;QACZ,KAAK,MAAM;YACT,OAAO;gBACL,gBAAgB,EAAE;oBAChB,WAAW,EAAE,MAAM;iBACpB;aACF,CAAC;QACJ,KAAK,UAAU,CAAC;QAChB,KAAK,WAAW;YACd,OAAO,EAAE,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC;QAC/C;YACE,OAAO,EAAE,CAAC;KACb;AACH,CAAC;AA5CD,oEA4CC"}
+{"version":3,"file":"paging.js","sourceRoot":"","sources":["../../src/constants/paging.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AA0BA,SAAgB,uBAAuB,CACrC,IAA8B;IAE9B,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,OAAO,IAAI,CAAC;KACb;IAED,QAAQ,IAAI,EAAE;QACZ,KAAK,SAAS;YACZ,OAAO,EAAE,CAAC;QACZ,KAAK,MAAM;YACT,OAAO;gBACL,WAAW,EAAE,MAAM;aACpB,CAAC;QACJ,KAAK,UAAU,CAAC;QAChB,KAAK,WAAW;YACd,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;QAC5B;YACE,OAAO,EAAE,CAAC;KACb;AACH,CAAC;AApBD,0DAoBC;AAED,SAAgB,4BAA4B,CAC1C,IAA8B;IAE9B,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAC;IAErB,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAE1B,IAAA,QAAQ,GAWN,IAAI,SAXE,EACR,YAAY,GAUV,IAAI,aAVM,EACZ,WAAW,GAST,IAAI,YATK,EACX,SAAS,GAQP,IAAI,UARG,EACT,OAAO,GAOL,IAAI,QAPC,EACP,YAAY,GAMV,IAAI,aANM,EACZ,KAKE,IAAI,qBALyB,EAA/B,oBAAoB,mBAAG,QAAQ,KAAA,EAC/B,qBAAqB,GAInB,IAAI,sBAJe,EACrB,kBAAkB,GAGhB,IAAI,mBAHY,EAEf,gBAAgB,UACjB,IAAI,EAZF,0JAYL,CADoB,CACZ;QAET,OAAO;YACL,aAAa,EAAE,EAAE,QAAQ,UAAA,EAAE,YAAY,cAAA,EAAE,WAAW,aAAA,EAAE,SAAS,WAAA,EAAE,OAAO,SAAA,EAAE,YAAY,cAAA,EAAE;YACxF,oBAAoB,sBAAA;YACpB,gBAAgB,kBAAA;YAChB,qBAAqB,uBAAA;YACrB,kBAAkB,oBAAA;SACnB,CAAC;KACH;IAED,QAAQ,IAAI,EAAE;QACZ,KAAK,SAAS;YACZ,OAAO,EAAE,CAAC;QACZ,KAAK,MAAM;YACT,OAAO;gBACL,gBAAgB,EAAE;oBAChB,WAAW,EAAE,MAAM;iBACpB;aACF,CAAC;QACJ,KAAK,UAAU,CAAC;QAChB,KAAK,WAAW;YACd,OAAO,EAAE,aAAa,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,CAAC;QAC/C;YACE,OAAO,EAAE,CAAC;KACb;AACH,CAAC;AA5CD,oEA4CC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.35.2",
+  "version": "0.35.3",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Collection/index.tsx

@@ -14,7 +14,7 @@ import ReqoreInput, { IReqoreInputProps } from '../Input';
 import ReqoreMessage from '../Message';
 import { IReqorePanelAction, IReqorePanelProps, ReqorePanel, TReqorePanelActions } from '../Panel';
 import { ReqoreVerticalSpacer } from '../Spacer';
-import { sortTableData } from '../Table/helpers';
+import { getZoomActions, sizeToZoom, sortTableData, zoomToSize } from '../Table/helpers';
 import { IReqoreCollectionItemProps, ReqoreCollectionItem } from './item';
 
 export interface IReqoreCollectionProps extends IReqorePanelProps, IReqoreColumnsProps {
@@ -29,9 +29,14 @@ export interface IReqoreCollectionProps extends IReqorePanelProps, IReqoreColumn
   height?: string;
   fill?: boolean;
   maxItemHeight?: number;
-  filterable?: boolean;
+
   defaultQuery?: string;
+  defaultZoom?: 0 | 0.5 | 1 | 1.5 | 2;
+
+  filterable?: boolean;
   sortable?: boolean;
+  zoomable?: boolean;
+
   showAs?: 'list' | 'grid';
   showSelectedFirst?: boolean;
   selectedIcon?: IReqoreIconName;
@@ -67,6 +72,14 @@ export const StyledCollectionWrapper = styled(StyledColumns)`
   position: relative;
 `;
 
+export const zoomToWidth = {
+  0: '200px',
+  0.5: '300px',
+  1: '400px',
+  1.5: '500px',
+  2: '600px',
+};
+
 export const ReqoreCollection = ({
   items,
   stacked,
@@ -76,6 +89,8 @@ export const ReqoreCollection = ({
   filterable,
   inputInTitle = true,
   sortable,
+  zoomable,
+  defaultZoom,
   showSelectedFirst,
   inputProps,
   sortButtonProps,
@@ -116,6 +131,7 @@ export const ReqoreCollection = ({
   const [sort, setSort] = useState<'asc' | 'desc'>('asc');
   const [contentRef, setContentRef] = useState<HTMLDivElement>(undefined);
   const isMobile = useReqoreProperty('isMobile');
+  const [zoom, setZoom] = useState<number>(defaultZoom || sizeToZoom.normal);
   const { query, setQuery, preQuery, setPreQuery } = useQueryWithDelay(
     defaultQuery,
     searchDelay,
@@ -197,6 +213,13 @@ export const ReqoreCollection = ({
       ],
     };
 
+    if (zoomable) {
+      actions.push({
+        fluid: false,
+        group: getZoomActions('reqore-collection', zoom, setZoom),
+      });
+    }
+
     if (sortable) {
       toolbarGroup.group.push({
         icon: sort === 'desc' ? 'SortDesc' : 'SortAsc',
@@ -233,7 +256,19 @@ export const ReqoreCollection = ({
     }
 
     return [...actions, toolbarGroup];
-  }, [filterable, preQuery, query, rest.actions, _showAs, sort, sortable, filteredItems, isMobile]);
+  }, [
+    filterable,
+    preQuery,
+    query,
+    rest.actions,
+    _showAs,
+    sort,
+    sortable,
+    filteredItems,
+    isMobile,
+    zoom,
+    zoomable,
+  ]);
 
   const renderContent = useCallback(() => {
     return contentRenderer(
@@ -261,13 +296,13 @@ export const ReqoreCollection = ({
                   ref={setContentRef}
                   height={height}
                   alignItems={alignItems}
-                  minColumnWidth={minColumnWidth}
+                  minColumnWidth={minColumnWidth || zoomToWidth[zoom]}
                   maxColumnWidth={maxColumnWidth}
                   className='reqore-collection-content'
                 >
                   {finalItems?.map((item, index) => (
                     <ReqoreCollectionItem
-                      size={rest.size}
+                      size={zoomToSize[zoom]}
                       responsiveTitle={false}
                       {...item}
                       icon={item.icon || (item.selected ? selectedIcon : undefined)}
@@ -313,8 +348,8 @@ export const ReqoreCollection = ({
     rest,
     rounded,
     selectedIcon,
-    size,
     stacked,
+    zoom,
   ]);
 
   return (

package/src/components/Table/body.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
 import { useMount } from 'react-use';
 import { FixedSizeList as List } from 'react-window';
 import styled from 'styled-components';
@@ -7,7 +7,6 @@ import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import ReqoreTableRow, { IReqoreTableRowOptions } from './row';
 
 export interface IReqoreTableSectionBodyProps extends IReqoreTableRowOptions {
-  rowHeight?: number;
   height: number;
   refs: {
     left: React.RefObject<HTMLDivElement>;
@@ -30,7 +29,6 @@ const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>
     {
       data,
       height,
-      rowHeight,
       size = 'normal',
       refs,
       type,
@@ -70,11 +68,18 @@ const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>
       });
     });
 
+    const rowHeight = useMemo(
+      () => (rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1),
+      [size, rest.flat]
+    );
+
     return (
       <StyledList
         outerRef={targetRef}
         itemCount={data.length}
-        height={height}
+        // If the defined height is less than the count of items' height
+        // use that height instead
+        height={height > data.length * rowHeight ? data.length * rowHeight : height}
         className='reqore-table-body'
         itemSize={rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1}
         itemData={{

package/src/components/Table/index.tsx

@@ -3,7 +3,8 @@ import { size as count, isArray } from 'lodash';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useMeasure, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
-import { ReqoreMessage, ReqorePanel, ReqoreVerticalSpacer } from '../..';
+import { ReqoreMessage, ReqorePaginationContainer, ReqorePanel, ReqoreVerticalSpacer } from '../..';
+import { TReqorePaginationType, getPagingObjectFromType } from '../../constants/paging';
 import { TABLE_SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { useQueryWithDelay } from '../../hooks/useQueryWithDelay';
@@ -96,6 +97,8 @@ export interface IReqoreTableProps extends IReqorePanelProps {
   height?: number;
   wrapperSize?: TSizes;
 
+  paging?: TReqorePaginationType<IReqoreTableRowData>;
+
   sort?: IReqoreTableSort;
   onSortChange?: (sort?: IReqoreTableSort) => void;
 
@@ -141,16 +144,18 @@ export interface IReqoreTableSort {
 
 const StyledTableWrapper = styled.div`
   overflow: hidden;
+  display: flex;
+  flex-flow: column;
 
   ${({ isPinned }) =>
     isPinned
       ? css`
           flex-shrink: 0;
+          z-index: 1;
+          box-shadow: 1px -1px 20px -2px rgba(0, 0, 0, 0.8);
         `
       : css`
           width: 100%;
-          display: flex;
-          flex-flow: column;
           flex: 1;
         `};
 `;
@@ -192,6 +197,7 @@ const ReqoreTable = ({
   rowComponent,
   bodyCellComponent,
   onSelectClick,
+  paging,
   ...rest
 }: IReqoreTableProps) => {
   const leftTableRef = useRef<HTMLDivElement>(undefined);
@@ -468,6 +474,23 @@ const ReqoreTable = ({
     return _columnsList;
   }, [finalColumns]);
 
+  const handleScrollToTop = () => {
+    mainTableRef.current?.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+    leftTableRef.current?.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+    rightTableRef.current?.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+
+    setIsScrolled(false);
+  };
+
   const tableActions = useMemo<IReqorePanelAction[]>(() => {
     const finalActions: IReqorePanelAction[] = [...actions];
 
@@ -515,22 +538,7 @@ const ReqoreTable = ({
         tooltip: 'Scroll to top',
         className: 'reqore-table-columns-scroll-top',
         responsive: true,
-        onClick: () => {
-          mainTableRef.current?.scrollTo({
-            top: 0,
-            behavior: 'smooth',
-          });
-          leftTableRef.current?.scrollTo({
-            top: 0,
-            behavior: 'smooth',
-          });
-          rightTableRef.current?.scrollTo({
-            top: 0,
-            behavior: 'smooth',
-          });
-
-          setIsScrolled(false);
-        },
+        onClick: handleScrollToTop,
       });
     }
 
@@ -598,7 +606,7 @@ const ReqoreTable = ({
     [finalColumns]
   );
 
-  const renderTable = (type: 'left' | 'main' | 'right' = 'main') => {
+  const renderTable = (type: 'left' | 'main' | 'right' = 'main', items: IReqoreTableRowData[]) => {
     const tableColumns = columnsByType[type];
     const isPinned = type === 'left' || type === 'right';
 
@@ -617,19 +625,19 @@ const ReqoreTable = ({
           onSortChange={handleSortChange}
           heightAsGroup={hasGroupedColumns(finalColumns)}
           sortData={_sort}
-          hasVerticalScroll={count(transformedData) * TABLE_SIZE_TO_PX[size] > height}
+          hasVerticalScroll={count(items) * TABLE_SIZE_TO_PX[size] > height}
           onColumnsUpdate={handleColumnsUpdate}
           onFilterChange={(dataId: string, value: any) => {
             handleColumnsUpdate(dataId, 'filter', value);
           }}
           component={headerCellComponent}
         />
-        {count(transformedData) === 0 ? null : (
+        {count(items) === 0 ? null : (
           <ReqoreTableBody
             ref={refs[type]}
             refs={refs}
             type={type}
-            data={transformedData}
+            data={items}
             columns={tableColumns}
             height={fill ? sizes.height : height}
             selectable={selectable}
@@ -649,6 +657,8 @@ const ReqoreTable = ({
     );
   };
 
+  const pagingOptions = useMemo(() => getPagingObjectFromType(paging), [paging]);
+
   return (
     <ReqorePanel
       transparent
@@ -665,19 +675,39 @@ const ReqoreTable = ({
       getContentRef={wrapperRef}
       badge={badge}
     >
-      <StyledTablesWrapper className='reqore-table-wrapper'>
-        {renderTable('left')}
-        {renderTable()}
-        {renderTable('right')}
-      </StyledTablesWrapper>
-      {count(transformedData) === 0 ? (
-        <>
-          <ReqoreVerticalSpacer height={10} />
-          <ReqoreMessage flat size={size} icon='Search2Line'>
-            {emptyMessage}
-          </ReqoreMessage>
-        </>
-      ) : null}
+      <ReqorePaginationContainer<IReqoreTableRowData>
+        items={transformedData}
+        type={
+          paging
+            ? {
+                ...pagingOptions,
+                onPageChange: () => {
+                  if (!pagingOptions.infinite) {
+                    handleScrollToTop();
+                  }
+                },
+              }
+            : undefined
+        }
+      >
+        {(pagedData) => (
+          <>
+            <StyledTablesWrapper className='reqore-table-wrapper'>
+              {renderTable('left', pagedData)}
+              {renderTable('main', pagedData)}
+              {renderTable('right', pagedData)}
+            </StyledTablesWrapper>
+            {count(pagedData) === 0 ? (
+              <>
+                <ReqoreVerticalSpacer height={10} />
+                <ReqoreMessage flat size={size} icon='Search2Line'>
+                  {emptyMessage}
+                </ReqoreMessage>
+              </>
+            ) : null}
+          </>
+        )}
+      </ReqorePaginationContainer>
     </ReqorePanel>
   );
 };

package/src/components/Tree/index.tsx

@@ -8,6 +8,7 @@ import { IWithReqoreSize } from '../../types/global';
 import ReqoreButton from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
 import { IReqorePanelProps } from '../Panel';
+import { getZoomActions, sizeToZoom, zoomToSize } from '../Table/helpers';
 import ReqoreTag from '../Tag';
 
 export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
@@ -18,6 +19,8 @@ export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
   onItemClick?: (value: any, path?: string[]) => void;
   withLabelCopy?: boolean;
   showControls?: boolean;
+  zoomable?: boolean;
+  defaultZoom?: 0 | 0.5 | 1 | 1.5 | 2;
 }
 
 export interface ITreeStyle {
@@ -38,6 +41,8 @@ export const ReqoreTree = ({
   onItemClick,
   withLabelCopy,
   showControls = true,
+  zoomable,
+  defaultZoom,
   ...rest
 }: IReqoreTreeProps) => {
   const [_mode, setMode] = useState<'tree' | 'copy'>(mode);
@@ -45,6 +50,7 @@ export const ReqoreTree = ({
   const [allExpanded, setAllExpanded] = useState(expanded || !showControls);
   const [_showTypes, setShowTypes] = useState(showTypes);
   const addNotification = useReqoreProperty('addNotification');
+  const [zoom, setZoom] = useState(defaultZoom || sizeToZoom[size]);
 
   const handleCopyClick = () => {
     setMode('copy');
@@ -99,7 +105,7 @@ export const ReqoreTree = ({
       return (
         <div key={index} style={{ margin: level === 1 ? '15px 0' : `15px` }}>
           {isObject ? (
-            <ReqoreControlGroup size={size}>
+            <ReqoreControlGroup size={zoomToSize[zoom]}>
               <ReqoreButton
                 className='reqore-tree-toggle'
                 icon={isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill'}
@@ -112,7 +118,7 @@ export const ReqoreTree = ({
               {_showTypes ? <ReqoreTag label={dataType} className='reqore-tree-type' /> : null}
             </ReqoreControlGroup>
           ) : (
-            <ReqoreControlGroup size={size}>
+            <ReqoreControlGroup size={zoomToSize[zoom]}>
               <ReqoreTag
                 label={displayKey}
                 actions={
@@ -184,6 +190,11 @@ export const ReqoreTree = ({
       actions={
         showControls
           ? [
+              {
+                fluid: false,
+                group: getZoomActions('reqore-tree', zoom, setZoom),
+                show: !!zoomable,
+              },
               {
                 className: 'reqore-tree-expand-all',
                 icon: 'ArrowDownFill',

package/src/constants/paging.ts

@@ -24,6 +24,28 @@ export type TReqorePaginationTypeResult<T> = {
   includeBottomControls?: boolean;
 };
 
+export function getPagingObjectFromType<T>(
+  type: TReqorePaginationType<T>
+): IReqoreComponentPagingOptions<T> {
+  if (typeof type === 'object') {
+    return type;
+  }
+
+  switch (type) {
+    case 'buttons':
+      return {};
+    case 'list':
+      return {
+        showPagesAs: 'list',
+      };
+    case 'infinite':
+    case 'auto-load':
+      return { infinite: true };
+    default:
+      return {};
+  }
+}
+
 export function getPaginationOptionsFromType<T>(
   type: TReqorePaginationType<T>
 ): TReqorePaginationTypeResult<T> {

package/src/stories/Collection/Collection.stories.tsx

@@ -125,6 +125,22 @@ SelectedFirst.args = {
   showSelectedFirst: true,
 };
 
+export const Zoomable = Template.bind({});
+Zoomable.args = {
+  label: 'Collection of items',
+  items,
+  zoomable: true,
+};
+
+export const WithDefaultZoom = Template.bind({});
+WithDefaultZoom.args = {
+  label: 'Collection of items',
+  items,
+  zoomable: true,
+  size: 'tiny',
+  defaultZoom: 2,
+};
+
 export const CustomColumnsData = Template.bind({});
 CustomColumnsData.args = {
   columns: 2,

package/src/stories/Table/Table.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { StyledEffect } from '../../components/Effect';
-import { IReqoreTableColumn, IReqoreTableProps } from '../../components/Table';
+import { IReqoreTableColumn, IReqoreTableProps, IReqoreTableRowData } from '../../components/Table';
 import { IReqoreCustomTableBodyCellProps } from '../../components/Table/cell';
 import { IReqoreCustomHeaderCellProps } from '../../components/Table/header';
+import { TReqorePaginationType } from '../../constants/paging';
 import {
   ReqoreH3,
   ReqoreH4,
@@ -430,6 +431,22 @@ Sizes.args = {
   wrapperSize: 'big',
 };
 
+export const DefaultPaging = Template.bind({});
+DefaultPaging.args = {
+  paging: 'buttons',
+};
+
+export const CustomPaging = Template.bind({});
+CustomPaging.args = {
+  paging: {
+    fluid: true,
+    loadMoreLabel: 'Load more rows...',
+    showLabels: true,
+    infinite: true,
+    itemsPerPage: 100,
+  } as TReqorePaginationType<IReqoreTableRowData>,
+};
+
 const CustomHeaderCell = (props: IReqoreCustomHeaderCellProps) => {
   if (props.hasColumns) {
     return <ReqoreH3 intent='success'>{props.label}</ReqoreH3>;

package/src/stories/Tree/Tree.stories.tsx

@@ -47,3 +47,16 @@ export const NoControls = Template.bind({});
 NoControls.args = {
   showControls: false,
 };
+
+export const Zoomable = Template.bind({});
+Zoomable.args = {
+  zoomable: true,
+};
+
+export const WithDefaultZoom = Template.bind({});
+WithDefaultZoom.args = {
+  label: 'Collection of items',
+  zoomable: true,
+  size: 'tiny',
+  defaultZoom: 2,
+};