pcm-shared-components 0.0.192 → 0.0.195
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 +1 -0
- package/dist/languages/es/translations.json +1 -0
- package/dist/languages/fr/translations.json +1 -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 };
|
|
@@ -2260,6 +2260,7 @@
|
|
|
2260
2260
|
"till_in_use_by": "Till in use by: {{user_name}}",
|
|
2261
2261
|
"till_name_already_exist_warning": "The till name you entered already exist. Please enter a different till name.",
|
|
2262
2262
|
"till_title": "Till",
|
|
2263
|
+
"till_used": "Till Used",
|
|
2263
2264
|
"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
2265
|
"un_available": "Till Unavailable",
|
|
2265
2266
|
"use_this_till": "Use this Till"
|
|
@@ -2260,6 +2260,7 @@
|
|
|
2260
2260
|
"till_in_use_by": "Caja registradora en uso por: {{user_name}}",
|
|
2261
2261
|
"till_name_already_exist_warning": "El nombre de caja registradora que ingresó ya existe. Ingrese un nombre de caja diferente.",
|
|
2262
2262
|
"till_title": "Caja registradora",
|
|
2263
|
+
"till_used": "caja registradora usada",
|
|
2263
2264
|
"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
2265
|
"un_available": "Indisponible",
|
|
2265
2266
|
"use_this_till": "Usa esta caja"
|
|
@@ -2260,6 +2260,7 @@
|
|
|
2260
2260
|
"till_in_use_by": "Caisse utilisée par: {{user_name}}",
|
|
2261
2261
|
"till_name_already_exist_warning": "Le nom de caisse que vous avez entré existe déjà. Veuillez saisir un autre nom de caisse.",
|
|
2262
2262
|
"till_title": "Caisse",
|
|
2263
|
+
"till_used": "Caisse Utilisée",
|
|
2263
2264
|
"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
2265
|
"un_available": "Caisse Indisponible",
|
|
2265
2266
|
"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
|
-
};
|