pcm-shared-components 2.0.171 → 2.0.173

package/dist/components/Date/DatePickerReactStyled/DateCalendar/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
+// import React from 'react';
 import PropTypes from 'prop-types';
-import { orange } from '@mui/material/colors';
+// import { orange } from '@mui/material/colors';
 import { Datepicker } from '@datepicker-react/styled';
 import { ThemeProvider } from 'styled-components';
 import './css/style.css';
-import { calendarTheme } from '../common/theme';
+import { commonCalendarTheme } from '../common/theme';
 
 /**
  * example with styling https://codesandbox.io/s/react-date-picker-rangeinput-jw726?from-embed=&file=/src/index.js:2503-2537 
@@ -35,7 +35,9 @@ export const DateCalendar = props => {
     variant,
     vertical,
     zIndex,
-    i18next
+    i18next,
+    daySize,
+    datepickerPadding
   } = props;
   const handleOnDayRender = date => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, onDayRender ? /*#__PURE__*/React.createElement(React.Fragment, null, onDayRender(date)) : /*#__PURE__*/React.createElement("span", {
@@ -70,13 +72,14 @@ export const DateCalendar = props => {
       console.error(error);
     }
   };
+  const overrideCalendarTheme = {};
   return /*#__PURE__*/React.createElement("div", {
     className: `m-auto pt-0 md:pt-0 ${variant === 'standard' ? 'bottom_border' : undefined}`,
     style: {
       zIndex: 100
     }
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: calendarTheme({
+    theme: commonCalendarTheme({
       ...props
     })
   }, /*#__PURE__*/React.createElement(Datepicker, {
@@ -128,7 +131,9 @@ DateCalendar.defaultProps = {
   variant: 'standard',
   vertical: false,
   zIndex: 1000,
-  i18next: undefined
+  i18next: undefined,
+  daySize: 40,
+  datepickerPadding: 25
 };
 DateCalendar.propTypes = {
   /** Used to provide the minimum booking date.  To allow date selection past todays date simply pas it an old past date example 'new Date('1999-10-02')' */
@@ -160,5 +165,9 @@ DateCalendar.propTypes = {
   /** Controls the z-index of the calendar dropdown date selection */
   zIndex: PropTypes.number,
   /** i18next localization to use for the component. Don't use the library localization or else it won't load properly on the consuming application */
-  i18next: PropTypes.any
+  i18next: PropTypes.any,
+  /** Controls the size of the day in the calendar */
+  daySize: PropTypes.oneOf([PropTypes.instanceOf(Number), PropTypes.instanceOf(Array)]),
+  /** Controls the padding of the datepicker */
+  datepickerPadding: PropTypes.number
 };

package/dist/components/Date/DatePickerReactStyled/DateCalendar/storybook/index.stories.js

@@ -51,7 +51,9 @@ const DateCalendarComp = props => {
     endDate: state.endDate,
     focusedInput: state.focusedInput,
     minBookingDays: 2,
-    i18next: i18next
+    i18next: i18next,
+    daySize: 40,
+    datepickerPadding: 25
   }, props));
 };
 export default {
@@ -70,5 +72,7 @@ export const DateCalendarExample = DateCalendarTemplate.bind({});
 DateCalendarExample.args = {
   Help: 'Note not all props listed see docs for full list...',
   variant: 'standard',
-  numberOfMonthsVisible: 2
+  numberOfMonthsVisible: 2,
+  daySize: 40,
+  datepickerPadding: 25
 };

package/dist/components/Date/DatePickerReactStyled/DateRangeCalendar/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { orange } from '@mui/material/colors';
 import { DateRangeInput } from '@datepicker-react/styled';
 import { ThemeProvider } from 'styled-components';
-import { calendarTheme } from '../common/theme';
+import { commonCalendarTheme } from '../common/theme';
 import './css/style.css';
 
 /**
@@ -73,7 +73,7 @@ export const DateRangeCalendar = props => {
       zIndex: 100
     }
   }, /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: calendarTheme({
+    theme: commonCalendarTheme({
       ...props
     })
   }, /*#__PURE__*/React.createElement(DateRangeInput, {

package/dist/components/Date/DatePickerReactStyled/common/theme.js

@@ -1,12 +1,14 @@
 import { orange } from '@mui/material/colors';
-export const calendarTheme = ({
+export const commonCalendarTheme = ({
   variant = 'outlined',
-  zIndex = 1000
+  zIndex = 1000,
+  daySize = [36, 40],
+  datepickerPadding = 25
 }) => {
   return {
     breakpoints: ['32em', '48em', '64em'],
     reactDatepicker: {
-      daySize: [36, 40],
+      daySize: daySize,
       fontFamily: 'system-ui, -apple-system',
       colors: {
         primaryColor: orange[900],
@@ -28,7 +30,8 @@ export const calendarTheme = ({
       datepickerZIndex: zIndex,
       dateRangeZIndex: zIndex,
       dateSingleZIndex: zIndex,
-      dayAccessibilityBorderColor: "none"
+      dayAccessibilityBorderColor: "none",
+      datepickerPadding: datepickerPadding
     }
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "2.0.171",
+  "version": "2.0.173",
   "private": false,
   "main": "dist/index.js",
   "babel": {