pcm-shared-components 0.0.193 → 0.0.196
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 +3 -0
- package/dist/languages/es/translations.json +3 -0
- package/dist/languages/fr/translations.json +3 -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 };
|
|
@@ -270,6 +270,7 @@
|
|
|
270
270
|
"bottom": "bottom",
|
|
271
271
|
"boxed": "Boxed",
|
|
272
272
|
"bulk_update": "Bulk Update",
|
|
273
|
+
"calendar_view": "Calendar View",
|
|
273
274
|
"campground_settings": {
|
|
274
275
|
"cancellation_policy": {
|
|
275
276
|
"day_cancel_policy_notes": "Prevents a reservation from being canceled from the online client portal if the arrival date of the reservation is within the specified range."
|
|
@@ -346,6 +347,7 @@
|
|
|
346
347
|
"go_to_documentation": "Go to Documentation",
|
|
347
348
|
"go_to_list": "Go To List",
|
|
348
349
|
"got_to_list": "Go To List",
|
|
350
|
+
"grid_view": "Grid View",
|
|
349
351
|
"horizontal": "Horizontal",
|
|
350
352
|
"id": "ID",
|
|
351
353
|
"in": "In",
|
|
@@ -2260,6 +2262,7 @@
|
|
|
2260
2262
|
"till_in_use_by": "Till in use by: {{user_name}}",
|
|
2261
2263
|
"till_name_already_exist_warning": "The till name you entered already exist. Please enter a different till name.",
|
|
2262
2264
|
"till_title": "Till",
|
|
2265
|
+
"till_used": "Till Used",
|
|
2263
2266
|
"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.",
|
|
2264
2267
|
"un_available": "Till Unavailable",
|
|
2265
2268
|
"use_this_till": "Use this Till"
|
|
@@ -270,6 +270,7 @@
|
|
|
270
270
|
"bottom": "fondo",
|
|
271
271
|
"boxed": "en caja",
|
|
272
272
|
"bulk_update": "Actualización masiva",
|
|
273
|
+
"calendar_view": "Vista de calendario",
|
|
273
274
|
"campground_settings": {
|
|
274
275
|
"cancellation_policy": {
|
|
275
276
|
"day_cancel_policy_notes": "Evita que se cancele una reserva desde el portal de clientes online si la fecha de llegada de la reserva está dentro del rango especificado."
|
|
@@ -346,6 +347,7 @@
|
|
|
346
347
|
"go_to_documentation": "Ir a la documentación",
|
|
347
348
|
"go_to_list": "Ir a la lista",
|
|
348
349
|
"got_to_list": "Ir a la lista",
|
|
350
|
+
"grid_view": "Vista en cuadrícula",
|
|
349
351
|
"horizontal": "Horizontal",
|
|
350
352
|
"id": "IDENTIFICACIÓN",
|
|
351
353
|
"in": "En",
|
|
@@ -2260,6 +2262,7 @@
|
|
|
2260
2262
|
"till_in_use_by": "Caja registradora en uso por: {{user_name}}",
|
|
2261
2263
|
"till_name_already_exist_warning": "El nombre de caja registradora que ingresó ya existe. Ingrese un nombre de caja diferente.",
|
|
2262
2264
|
"till_title": "Caja registradora",
|
|
2265
|
+
"till_used": "caja registradora usada",
|
|
2263
2266
|
"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.",
|
|
2264
2267
|
"un_available": "Indisponible",
|
|
2265
2268
|
"use_this_till": "Usa esta caja"
|
|
@@ -270,6 +270,7 @@
|
|
|
270
270
|
"bottom": "bas",
|
|
271
271
|
"boxed": "Encadré",
|
|
272
272
|
"bulk_update": "Mises à jour en masse",
|
|
273
|
+
"calendar_view": "Calendrier",
|
|
273
274
|
"campground_settings": {
|
|
274
275
|
"cancellation_policy": {
|
|
275
276
|
"day_cancel_policy_notes": "Empêche une réservation d'être annulée à partir du portail client en ligne si la date d'arrivée de la réservation se situe dans la plage spécifiée."
|
|
@@ -346,6 +347,7 @@
|
|
|
346
347
|
"go_to_documentation": "Accéder à la documentation",
|
|
347
348
|
"go_to_list": "Aller à la liste",
|
|
348
349
|
"got_to_list": "Aller à la liste",
|
|
350
|
+
"grid_view": "La Grille",
|
|
349
351
|
"horizontal": "Horizontal",
|
|
350
352
|
"id": "ID",
|
|
351
353
|
"in": "Entrer",
|
|
@@ -2260,6 +2262,7 @@
|
|
|
2260
2262
|
"till_in_use_by": "Caisse utilisée par: {{user_name}}",
|
|
2261
2263
|
"till_name_already_exist_warning": "Le nom de caisse que vous avez entré existe déjà. Veuillez saisir un autre nom de caisse.",
|
|
2262
2264
|
"till_title": "Caisse",
|
|
2265
|
+
"till_used": "Caisse Utilisée",
|
|
2263
2266
|
"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.",
|
|
2264
2267
|
"un_available": "Caisse Indisponible",
|
|
2265
2268
|
"use_this_till": "Utilisez cette caisse"
|
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
|
-
};
|