pcm-shared-components 0.0.191 → 0.0.194
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Buttons/TillButton/index.js +6 -6
- package/dist/components/Dialogs/GenericAppBar/components/GenericAppBarSubMenu.js +1 -1
- package/dist/components/{ImageStack → Images/ImageStack}/index.js +0 -0
- package/dist/components/Menus/ReusablePopupMenu/components/GenericSubMenu.js +4 -2
- package/dist/components/Menus/ReusablePopupMenu/components/ReusableMenu.js +13 -15
- package/dist/components/TextBoxes/CurrencyTextInput/index.js +2 -2
- package/dist/index.js +1 -1
- package/dist/languages/en/translations.json +5 -0
- package/dist/languages/es/translations.json +5 -0
- package/dist/languages/fr/translations.json +5 -0
- package/dist/styles/tailwind.css +1 -1
- package/package.json +1 -1
- package/dist/components/ImageStack/storybook/index.docs.mdx +0 -14
- package/dist/components/ImageStack/storybook/index.stories.js +0 -35
|
@@ -2,12 +2,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
|
|
|
2
2
|
|
|
3
3
|
import React, { memo } from 'react';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
|
-
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
|
6
|
-
|
|
5
|
+
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; // import { ThemeProvider } from '@mui/system';
|
|
6
|
+
|
|
7
7
|
import { createTheme, useTheme } from '@mui/material/styles';
|
|
8
8
|
import { ReusablePopupMenu } from '../../Menus/ReusablePopupMenu';
|
|
9
|
-
import i18n from '../../../locals/i18n';
|
|
10
9
|
import Button from '@mui/material/Button';
|
|
10
|
+
import i18next from 'i18next';
|
|
11
11
|
/**
|
|
12
12
|
* Creates a till button from other PCM components to simplify the component.
|
|
13
13
|
* Uses:
|
|
@@ -52,8 +52,8 @@ export default /*#__PURE__*/memo(TillButton);
|
|
|
52
52
|
TillButton.defaultProps = {
|
|
53
53
|
inUse: false,
|
|
54
54
|
name: '',
|
|
55
|
-
defaultText:
|
|
56
|
-
menuData:
|
|
55
|
+
defaultText: i18next.t('common.app.till'),
|
|
56
|
+
menuData: {},
|
|
57
57
|
className: undefined,
|
|
58
58
|
size: 'large',
|
|
59
59
|
theme: undefined
|
|
@@ -69,7 +69,7 @@ TillButton.propTypes = {
|
|
|
69
69
|
defaultText: PropTypes.string,
|
|
70
70
|
|
|
71
71
|
/** Menu items for the dropdown, see the ReusablePopupMenu component for a better understanding of the props parameters */
|
|
72
|
-
menuData: PropTypes.
|
|
72
|
+
menuData: PropTypes.object,
|
|
73
73
|
|
|
74
74
|
/** Classes applied to the button */
|
|
75
75
|
className: PropTypes.string,
|
|
@@ -70,7 +70,7 @@ const GenericAppBarSubMenu = ({
|
|
|
70
70
|
full_menu: true,
|
|
71
71
|
handleParentMenuClose: handleSubMenuClose
|
|
72
72
|
}) : /*#__PURE__*/React.createElement(MenuItem, {
|
|
73
|
-
key: `
|
|
73
|
+
key: `app_bar_sub_menu_items__${idx}}`,
|
|
74
74
|
onClick: () => {
|
|
75
75
|
handleSubMenuClose();
|
|
76
76
|
sub_menu.onClick();
|
|
File without changes
|
|
@@ -123,8 +123,10 @@ const GenericSubMenu = ({
|
|
|
123
123
|
open: isSubMenuOpen,
|
|
124
124
|
onClose: handleSubMenuClose,
|
|
125
125
|
onClick: menu.onClick
|
|
126
|
-
}, (menu.subMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true)).map((sub_menu, idx) => /*#__PURE__*/React.createElement(
|
|
127
|
-
key:
|
|
126
|
+
}, (menu.subMenu || []).filter(mn => !(mn.hideMenu && mn.hideMenu === true)).map((sub_menu, idx) => /*#__PURE__*/React.createElement("div", {
|
|
127
|
+
key: 'this_submenu_' + idx
|
|
128
|
+
}, sub_menu.subMenu ? /*#__PURE__*/React.createElement(GenericSubMenu, {
|
|
129
|
+
key: `app_bar_common_grid_app_bar_sub_desktop_sub_${idx}`,
|
|
128
130
|
menu: sub_menu,
|
|
129
131
|
classes: classes,
|
|
130
132
|
full_menu: true,
|
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
1
|
import React from 'react';
|
|
4
2
|
import withStyles from "@mui/styles/withStyles";
|
|
5
3
|
import Menu from "@mui/material/Menu";
|
|
@@ -15,17 +13,7 @@ const StyledMenu = withStyles({
|
|
|
15
13
|
paddingTop: 4,
|
|
16
14
|
paddingBottom: 4
|
|
17
15
|
}
|
|
18
|
-
})(props => /*#__PURE__*/React.createElement(Menu,
|
|
19
|
-
elevation: 0,
|
|
20
|
-
anchorOrigin: {
|
|
21
|
-
vertical: "bottom",
|
|
22
|
-
horizontal: props.menuAnchorLocation
|
|
23
|
-
},
|
|
24
|
-
transformOrigin: {
|
|
25
|
-
vertical: "top",
|
|
26
|
-
horizontal: props.menuAnchorLocation
|
|
27
|
-
}
|
|
28
|
-
}, props)));
|
|
16
|
+
})(props => /*#__PURE__*/React.createElement(Menu, props));
|
|
29
17
|
const StyledMenuItem = withStyles(() => ({
|
|
30
18
|
root: {
|
|
31
19
|
minHeight: 32,
|
|
@@ -61,15 +49,25 @@ const ReusableMenu = props => {
|
|
|
61
49
|
} = props;
|
|
62
50
|
return /*#__PURE__*/React.createElement(StyledMenu, {
|
|
63
51
|
id: "customized-menu",
|
|
52
|
+
elevation: 0,
|
|
64
53
|
anchorEl: menuAnchor,
|
|
65
|
-
|
|
54
|
+
anchorOrigin: {
|
|
55
|
+
vertical: "bottom",
|
|
56
|
+
horizontal: menuAnchorLocation
|
|
57
|
+
},
|
|
58
|
+
transformOrigin: {
|
|
59
|
+
vertical: "top",
|
|
60
|
+
horizontal: menuAnchorLocation
|
|
61
|
+
},
|
|
66
62
|
keepMounted: keepMounted,
|
|
67
63
|
open: Boolean(menuAnchor),
|
|
68
64
|
onClose: handleClose
|
|
69
65
|
}, menuData.filter(mn => !(mn.hideMenu && mn.hideMenu === true)).map((menu, idx) => /*#__PURE__*/React.createElement("div", {
|
|
70
66
|
className: "w-full",
|
|
71
67
|
key: `ReusableMenu_${idx}`
|
|
72
|
-
}, menu.name && /*#__PURE__*/React.createElement(
|
|
68
|
+
}, menu.name && /*#__PURE__*/React.createElement("div", {
|
|
69
|
+
key: 'this_menu_' + idx
|
|
70
|
+
}, menu.subMenu ? /*#__PURE__*/React.createElement("div", {
|
|
73
71
|
className: "flex flex-row w-full",
|
|
74
72
|
key: `main_sub_items_${new Date()}`
|
|
75
73
|
}, /*#__PURE__*/React.createElement(GenericSubMenu, {
|
|
@@ -80,7 +80,7 @@ export const CurrencyTextInput = props => {
|
|
|
80
80
|
|
|
81
81
|
if (decimalCheck.length === 2 && decimalCheck[1].length > 0) {
|
|
82
82
|
return Number(value).toLocaleString(undefined, {
|
|
83
|
-
minimumFractionDigits: 1,
|
|
83
|
+
minimumFractionDigits: Number(decimalPlaces) > 0 ? 1 : 0,
|
|
84
84
|
maximumFractionDigits: decimalPlaces,
|
|
85
85
|
useGrouping: false
|
|
86
86
|
});
|
|
@@ -220,7 +220,7 @@ CurrencyTextInput.propTypes = {
|
|
|
220
220
|
name: PropTypes.string,
|
|
221
221
|
|
|
222
222
|
/** Value to be enter and display in input */
|
|
223
|
-
value: PropTypes.string,
|
|
223
|
+
value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
224
224
|
|
|
225
225
|
/** The label content*/
|
|
226
226
|
label: PropTypes.string,
|
package/dist/index.js
CHANGED
|
@@ -21,5 +21,5 @@ import currencySymbol from './locals/currencySymbol';
|
|
|
21
21
|
import DateRangeCalendar from './components/Date/DateRangeCalendar';
|
|
22
22
|
import SimpleLabel from './components/Labels/SimpleLabel';
|
|
23
23
|
import CurrencyTextInput from './components/TextBoxes/CurrencyTextInput';
|
|
24
|
-
import ImageStack from './components/ImageStack';
|
|
24
|
+
import ImageStack from './components/Images/ImageStack';
|
|
25
25
|
export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu, SearchBar, TillButton, DropdownButton, translationResources, coreLocals, currencySymbol, DateRangeCalendar, SimpleLabel, CurrencyTextInput, ImageStack };
|
|
@@ -2254,8 +2254,13 @@
|
|
|
2254
2254
|
"opening_shift_float_title": "Opening Shift Float",
|
|
2255
2255
|
"pay_in_pay_out_section": "Cash In - Out Transactions",
|
|
2256
2256
|
"shift_summary": "Shift Summary",
|
|
2257
|
+
"till_cash_in_out_error": "An error occurred while trying to perform a cash in/out operation.",
|
|
2258
|
+
"till_currently_in_use_warning": "This till is currently being used by another user. Please select a different till.",
|
|
2259
|
+
"till_error": "An error occurred on the server side.",
|
|
2257
2260
|
"till_in_use_by": "Till in use by: {{user_name}}",
|
|
2261
|
+
"till_name_already_exist_warning": "The till name you entered already exist. Please enter a different till name.",
|
|
2258
2262
|
"till_title": "Till",
|
|
2263
|
+
"till_warning_user_already_has_a_till": "This user already has a till assigned. Please perform an end of day shift report before assigning a till to this user.",
|
|
2259
2264
|
"un_available": "Till Unavailable",
|
|
2260
2265
|
"use_this_till": "Use this Till"
|
|
2261
2266
|
},
|
|
@@ -2254,8 +2254,13 @@
|
|
|
2254
2254
|
"opening_shift_float_title": "Cambio flotante de apertura",
|
|
2255
2255
|
"pay_in_pay_out_section": "Transacciones de entrada y salida de efectivo",
|
|
2256
2256
|
"shift_summary": "Resumen de turno",
|
|
2257
|
+
"till_cash_in_out_error": "Ocurrió un error al intentar realizar una operación de entrada/salida de efectivo.",
|
|
2258
|
+
"till_currently_in_use_warning": "Esta caja registradora está siendo utilizada actualmente por otro usuario. Seleccione una caja diferente.",
|
|
2259
|
+
"till_error": "Se produjo un error en el lado del servidor.",
|
|
2257
2260
|
"till_in_use_by": "Caja registradora en uso por: {{user_name}}",
|
|
2261
|
+
"till_name_already_exist_warning": "El nombre de caja registradora que ingresó ya existe. Ingrese un nombre de caja diferente.",
|
|
2258
2262
|
"till_title": "Caja registradora",
|
|
2263
|
+
"till_warning_user_already_has_a_till": "Este usuario ya tiene una caja asignada. Realice un informe de turno de fin de día antes de asignar una caja a este usuario.",
|
|
2259
2264
|
"un_available": "Indisponible",
|
|
2260
2265
|
"use_this_till": "Usa esta caja"
|
|
2261
2266
|
},
|
|
@@ -2254,8 +2254,13 @@
|
|
|
2254
2254
|
"opening_shift_float_title": "Flotteur de quart d'ouverture",
|
|
2255
2255
|
"pay_in_pay_out_section": "Opérations d'encaissement et de retrait",
|
|
2256
2256
|
"shift_summary": "Résumé du quart de travail",
|
|
2257
|
+
"till_cash_in_out_error": "Une erreur s'est produite lors de la tentative d'exécution d'une opération d'encaissement/de retrait.",
|
|
2258
|
+
"till_currently_in_use_warning": "Cette caisse est actuellement utilisée par un autre utilisateur. Veuillez sélectionner une caisse différente.",
|
|
2259
|
+
"till_error": "Une erreur s'est produite côté serveur.",
|
|
2257
2260
|
"till_in_use_by": "Caisse utilisée par: {{user_name}}",
|
|
2261
|
+
"till_name_already_exist_warning": "Le nom de caisse que vous avez entré existe déjà. Veuillez saisir un autre nom de caisse.",
|
|
2258
2262
|
"till_title": "Caisse",
|
|
2263
|
+
"till_warning_user_already_has_a_till": "Cet utilisateur a déjà une caisse assignée. Veuillez effectuer un rapport de fin de journée avant d'attribuer une caisse à cet utilisateur.",
|
|
2259
2264
|
"un_available": "Caisse Indisponible",
|
|
2260
2265
|
"use_this_till": "Utilisez cette caisse"
|
|
2261
2266
|
},
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-4{margin-top:.4rem;margin-bottom:.4rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.ml-0{margin-left:0}.mr-0{margin-right:0}.ml-4{margin-left:.4rem}.mt-12{margin-top:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.
|
|
1
|
+
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-4{margin-top:.4rem;margin-bottom:.4rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.ml-0{margin-left:0}.mr-0{margin-right:0}.ml-4{margin-left:.4rem}.mt-12{margin-top:1.2rem}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.ml-12{margin-left:1.2rem}.mb-24{margin-bottom:2.4rem}.mr-12{margin-right:1.2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.w-full{width:100%}.w-auto{width:auto}.w-1\/2{width:50%}.w-2\/5{width:40%}.grow{flex-grow:1}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{overscroll-behavior:none}.rounded{border-radius:.4rem}.rounded-md{border-radius:.6rem}.border{border-width:1px}.border-2{border-width:2px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(34 41 47/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity))}.bg-yellow-100\/50{background-color:#fff9c480}.p-6{padding:.6rem}.px-4{padding-left:.4rem;padding-right:.4rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.px-2{padding-left:.2rem;padding-right:.2rem}.pt-12{padding-top:1.2rem}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pb-4{padding-bottom:.4rem}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-sm{font-size:1.4rem;line-height:2rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-2xl{line-height:3.2rem}.text-24,.text-2xl{font-size:2.4rem}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.drop-shadow-none,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (min-width:960px){.md\:pt-0{padding-top:0}}
|
package/package.json
CHANGED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
|
|
2
|
-
import ImageStack from '..'
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
# ImageStack
|
|
6
|
-
Simple image stack with image preview on hover
|
|
7
|
-
|
|
8
|
-
## Importing the component in your project.
|
|
9
|
-
```js
|
|
10
|
-
import {ImageStack} from 'pcm-shared-components';
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<ArgsTable of={ImageStack} />
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import ImageStack from '..';
|
|
2
|
-
import IndexDocs from './index.docs.mdx';
|
|
3
|
-
import { faker } from '@faker-js/faker';
|
|
4
|
-
export const IMAGES = [];
|
|
5
|
-
Array.from({
|
|
6
|
-
length: 10
|
|
7
|
-
}).forEach(() => {
|
|
8
|
-
IMAGES.push(faker.image.avatar());
|
|
9
|
-
});
|
|
10
|
-
export default {
|
|
11
|
-
title: 'Image/ImageStack',
|
|
12
|
-
component: ImageStack,
|
|
13
|
-
argTypes: {},
|
|
14
|
-
parameters: {
|
|
15
|
-
docs: {
|
|
16
|
-
// inlineStories: true,
|
|
17
|
-
page: IndexDocs
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const ImageStackTemplate = args => /*#__PURE__*/React.createElement(ImageStack, args);
|
|
23
|
-
|
|
24
|
-
export const ImageStackHorizontal = ImageStackTemplate.bind({});
|
|
25
|
-
ImageStackHorizontal.args = {
|
|
26
|
-
orientation: 'horizontal',
|
|
27
|
-
imageSize: 40,
|
|
28
|
-
images: IMAGES
|
|
29
|
-
};
|
|
30
|
-
export const ImageStackVertical = ImageStackTemplate.bind({});
|
|
31
|
-
ImageStackVertical.args = {
|
|
32
|
-
orientation: 'vertical',
|
|
33
|
-
imageSize: 60,
|
|
34
|
-
images: IMAGES
|
|
35
|
-
};
|