@ndlib/component-library 1.0.16 → 1.0.18

package/dist/components/composites/Card/index.d.ts

@@ -18,6 +18,7 @@ type CardChildren = React.ReactNode | ((state: CardState) => React.ReactNode);
 export type CardProps = StyledElementProps<HTMLDivElement, {
     headline?: string;
     heading?: string;
+    headlineStyles?: StylesProp;
     headingStyles?: StylesProp;
     headingIcon?: React.FC;
     headingAction?: React.ReactNode;

package/dist/components/composites/Card/index.js

@@ -52,7 +52,7 @@ const DateDisplay = ({ date: dateString }) => {
                     mt: 1,
                 } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
 };
-export const Card = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headingStyles, headingIcon, headingAction, backgroundColor, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, containImage, containerWidth, containerHeight, children, }) => {
+export const Card = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headlineStyles, headingStyles, headingIcon, headingAction, backgroundColor, sx, imageHeight: imageHeightProp, imageWidth: imageWidthProp, containImage, containerWidth, containerHeight, children, }) => {
     const theme = useTheme();
     const contentPaddingX = size === CARD_SIZE.SM ? 3 : 4;
     const isVertical = !layout || layout === CARD_LAYOUT.VERTICAL;
@@ -110,7 +110,7 @@ export const Card = ({ size, displayDate, headline, image, alt, layout, onClick,
                                     color: COLOR.WHITE,
                                     mt: 0,
                                     whiteSpace: 'nowrap',
-                                } }, { children: heading }))] }), _jsx(Row, { children: headingAction && headingAction })] }))), _jsx(Row, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(Column, Object.assign({ justify: "center" }, { children: [headline && (_jsx(Heading, Object.assign({ typography: typography, sx: { mt: 0 } }, { children: truncateHeadlineAfter ? (_jsx(ReadMore, Object.assign({ lines: truncateHeadlineAfter, typography: typography, sx: { bg: activeBackground } }, { children: headline }))) : (headline) }))), children && (_jsx(Box, Object.assign({ sx: { mt: headline && !heading ? 2 : 0 } }, { children: typeof children === 'function'
+                                } }, { children: heading }))] }), _jsx(Row, { children: headingAction && headingAction })] }))), _jsx(Row, Object.assign({ sx: { px: contentPaddingX, py: contentPaddingY } }, { children: _jsxs(Column, Object.assign({ justify: "center" }, { children: [headline && (_jsx(Heading, Object.assign({ typography: typography, sx: Object.assign({ mt: 0 }, headlineStyles) }, { children: truncateHeadlineAfter ? (_jsx(ReadMore, Object.assign({ lines: truncateHeadlineAfter, typography: typography, sx: { bg: activeBackground } }, { children: headline }))) : (headline) }))), children && (_jsx(Box, Object.assign({ sx: { mt: headline && !heading ? 2 : 0 } }, { children: typeof children === 'function'
                                 ? children({ isHovered, activeBackground })
                                 : children })))] })) }))] })));
 };

package/dist/components/elements/Fields/Checkbox/index.js

@@ -16,7 +16,7 @@ export const Checkbox = (_a) => {
     const theme = useTheme();
     return (_jsx("input", Object.assign({ type: "checkbox", onChange: (e) => {
             onChange(e.target.checked);
-        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: disabled ? 'not-allowed' : 'pointer', ':hover': {
+        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1rem', width: '1rem', cursor: disabled ? 'not-allowed' : 'pointer', ':hover': {
                 boxShadow: theme.boxShadow,
             } }, sx), disabled: disabled }, rest)));
 };

package/dist/components/elements/Fields/DatePicker/DatePicker.stories.js

@@ -18,14 +18,34 @@ export const Default = {
     render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { placeholder: "test" }) }))),
 };
 export const Inline = {
-    render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { inline: true }) }))),
+    argTypes: {
+        backgroundColor: {
+            options: ['blue', 'gold', 'green', 'red'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        const { backgroundColor } = args;
+        return (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { backgroundColor: backgroundColor, inline: true }) })));
+    },
 };
 export const HighlightedDates = {
-    render: () => {
+    argTypes: {
+        backgroundColor: {
+            options: ['blue', 'gold', 'green', 'red'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        const { backgroundColor } = args;
         const highlightedDate1 = new Date();
         highlightedDate1.setDate(highlightedDate1.getDate() + 1);
         const highlightedDate2 = new Date();
         highlightedDate2.setDate(highlightedDate2.getDate() - 1);
-        return (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { inline: true, highlightDates: [highlightedDate1, highlightedDate2] }) })));
+        return (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulDatePicker, { inline: true, backgroundColor: backgroundColor, highlightDates: [highlightedDate1, highlightedDate2] }) })));
     },
 };

package/dist/components/elements/Fields/DatePicker/index.d.ts

@@ -9,12 +9,14 @@ export declare const InputWrapper: React.ForwardRefExoticComponent<{
     children: React.ReactElement;
 } & React.RefAttributes<any>>;
 export declare const areDatesEqual: (d1: Date, d2: Date) => boolean;
+export declare const isDateInThePast: (d1: Date, d2: Date) => boolean;
 export declare const DatePicker: React.FC<{
     value: Date;
     onChange: (date: Date) => void;
     minDate?: Date;
     maxDate?: Date;
     inline?: boolean;
+    backgroundColor?: string;
     highlightDates?: Date[];
     wrapperProps?: BoxProps;
     inputProps?: Partial<TextInputProps>;

package/dist/components/elements/Fields/DatePicker/index.js

@@ -33,13 +33,22 @@ export const areDatesEqual = (d1, d2) => {
     const serializeDate = (d) => `${d.getFullYear()} ${d.getMonth()} ${d.getDate()}`;
     return serializeDate(d1) === serializeDate(d2);
 };
+export const isDateInThePast = (d1, d2) => {
+    const serializeDate = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+    return serializeDate(d1) < serializeDate(d2);
+};
 export const DatePicker = (_a) => {
-    var { value, wrapperProps, inputProps, highlightDates } = _a, rest = __rest(_a, ["value", "wrapperProps", "inputProps", "highlightDates"]);
+    var { value, wrapperProps, inputProps, backgroundColor, highlightDates } = _a, rest = __rest(_a, ["value", "wrapperProps", "inputProps", "backgroundColor", "highlightDates"]);
     const highlightDateSet = new Set(highlightDates === null || highlightDates === void 0 ? void 0 : highlightDates.map((d) => d.toDateString()));
-    return (_jsx(Box, Object.assign({}, wrapperProps, { children: _jsx(ReactDatePicker, Object.assign({ calendarClassName: "ndlib-date-picker", selected: value, dayClassName: (date) => {
+    if (!backgroundColor)
+        backgroundColor = 'blue';
+    return (_jsx(Box, Object.assign({}, wrapperProps, { children: _jsx(ReactDatePicker, Object.assign({ calendarClassName: `ndlib-date-picker ndlib-date-picker-${backgroundColor}`, selected: value, dayClassName: (date) => {
                 if (areDatesEqual(date, value)) {
                     return '';
                 }
+                if (isDateInThePast(date, value)) {
+                    return 'ndlib-date-picker-pastdate';
+                }
                 if (highlightDateSet.has(date.toDateString())) {
                     return 'ndlib-date-picker-highlight';
                 }

package/dist/components/elements/Fields/MonthPicker/MonthPicker.stories.js

@@ -16,5 +16,16 @@ export const Default = {
     render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPicker, {}) }))),
 };
 export const Inline = {
-    render: () => (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPicker, { inline: true }) }))),
+    argTypes: {
+        backgroundColor: {
+            options: ['blue', 'gold', 'green', 'red'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    render: (args) => {
+        const { backgroundColor } = args;
+        return (_jsx(Box, Object.assign({ sx: { height: '500px' } }, { children: _jsx(StatefulMonthPicker, { backgroundColor: backgroundColor, inline: true }) })));
+    },
 };

package/dist/components/elements/Fields/MonthPicker/index.d.ts

@@ -8,6 +8,7 @@ export declare const MonthPicker: React.FC<{
     minDate?: Date;
     maxDate?: Date;
     inline?: boolean;
+    backgroundColor?: string;
     inputProps?: Partial<TextInputProps>;
     wrapperProps?: BoxProps;
 }>;

package/dist/components/elements/Fields/MonthPicker/index.js

@@ -19,6 +19,8 @@ import { importedDefaultComponentShim } from '../../../../utils/misc';
 const ReactDatePicker = importedDefaultComponentShim(_ReactDatePicker);
 const PermissiveTextInput = TextInput;
 export const MonthPicker = (_a) => {
-    var { value, inputProps, wrapperProps } = _a, rest = __rest(_a, ["value", "inputProps", "wrapperProps"]);
-    return (_jsx(Box, Object.assign({}, wrapperProps, { children: _jsx(ReactDatePicker, Object.assign({ calendarClassName: "ndlib-date-picker", selected: value, customInput: _jsx(InputWrapper, { children: _jsx(PermissiveTextInput, Object.assign({}, inputProps)) }), showMonthYearPicker: true }, rest)) })));
+    var { value, inputProps, backgroundColor, wrapperProps } = _a, rest = __rest(_a, ["value", "inputProps", "backgroundColor", "wrapperProps"]);
+    if (!backgroundColor)
+        backgroundColor = 'blue';
+    return (_jsx(Box, Object.assign({}, wrapperProps, { children: _jsx(ReactDatePicker, Object.assign({ calendarClassName: `ndlib-date-picker ndlib-date-picker-${backgroundColor}`, selected: value, customInput: _jsx(InputWrapper, { children: _jsx(PermissiveTextInput, Object.assign({}, inputProps)) }), showMonthYearPicker: true }, rest)) })));
 };

package/dist/components/elements/text/Heading/index.d.ts

@@ -8,6 +8,7 @@ type HeaderProps = StyledElementProps<HTMLSpanElement, {
     underline?: boolean;
     underlineColor?: COLOR;
     typography?: TYPOGRAPHY_TYPE;
+    headlineStyles?: any;
     level?: number;
 }>;
 export declare enum HEADING_SIZE {

package/dist/components/elements/text/Heading/index.js

@@ -39,7 +39,7 @@ const LEVEL_TYPOGRAPHY_MAP = {
     6: TYPOGRAPHY_TYPE.HEADING_SMALL,
 };
 export const Heading = (_a) => {
-    var { sx, size, standalone, underline, underlineColor, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "underline", "underlineColor", "typography", "level"]);
+    var { sx, size, standalone, underline, underlineColor, headlineStyles, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "underline", "underlineColor", "headlineStyles", "typography", "level"]);
     const { level: groupLevel, labelId, type, trackHeadingRendered } = useGroup();
     const { flagInDevelopment } = useEnvironment();
     const theme = useTheme();

package/dist/theme/Color.stories.js

@@ -34,6 +34,7 @@ const colors = [
     { color: COLOR.ND_GREEN, label: 'ND_GREEN' },
     { color: COLOR.ND_GREEN_LIGHT, label: 'ND_GREEN_LIGHT' },
     { color: COLOR.ND_METALLIC_GOLD, label: 'ND_METALLIC_GOLD' },
+    { color: COLOR.ND_METALLIC_GOLD_LIGHT, label: 'ND_METALLIC_GOLD_LIGHT' },
     { color: COLOR.ND_PROVOST_BLUE, label: 'ND_PROVOST_BLUE' },
     { color: COLOR.ND_SECONDARY_1, label: 'ND_SECONDARY_1' },
     { color: COLOR.ND_SECONDARY_2, label: 'ND_SECONDARY_2' },

package/dist/theme/GlobalStyles.js

@@ -137,14 +137,42 @@ const globalStyles = css `
     border-spacing: 0;
   }
 
-  .ndlib-date-picker .react-datepicker__header,
-  .ndlib-date-picker .react-datepicker__header * {
-    color: white;
+  .react-datepicker {
+    border: 0 !important;
+    border-radius: 0 !important;
+  }
+    
+  .ndlib-date-picker-blue .react-datepicker__header,
+  .ndlib-date-picker-blue .react-datepicker__header * {
     background-color: ${colors.primary};
+    color: white; 
+  }
+
+  .ndlib-date-picker-gold .react-datepicker__header,
+  .ndlib-date-picker-gold .react-datepicker__header * {
+    background-color: ${colors.ndMetallicGold};
+    color: white; 
+  }
+
+  .ndlib-date-picker-green .react-datepicker__header,
+  .ndlib-date-picker-green .react-datepicker__header * {
+    background-color: ${colors.ndGreem};
+    color: white; 
+  }
+
+  .ndlib-date-picker-red .react-datepicker__header,
+  .ndlib-date-picker-red .react-datepicker__header * {
+    background-color: ${colors.ndTertiary4};
+    color: white; 
+  }
+
+  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
+    border-top-right-radius: 0 !important;
   }
 
   .ndlib-date-picker .react-datepicker__header {
     width: 280px;
+    border-radius: 0;
   }
 
   .ndlib-date-picker .react-datepicker__day-names {
@@ -157,8 +185,12 @@ const globalStyles = css `
 
   .ndlib-date-picker .ndlib-date-picker-highlight {
     background-color: ${colors.ndTertiary1};
-    border-radius: 0.3rem;
     color: ${colors.background};
+    border-radius: 0.3rem;
+  }
+
+  .ndlib-date-picker .ndlib-date-picker-pastdate {
+    color: ${colors.lightGray};
   }
 
   @font-face {

package/dist/theme/colors.d.ts

@@ -32,6 +32,7 @@ export declare enum COLOR {
     ND_SKY_BLUE_DARK = "ndSkyBlueDark",
     ND_SKY_BLUE_LIGHT = "ndSkyBlueLight",
     ND_METALLIC_GOLD = "ndMetallicGold",
+    ND_METALLIC_GOLD_LIGHT = "ndMetallicGoldLight",
     ND_PROVOST_BLUE = "ndProvostBlue",
     ND_SECONDARY_1 = "ndSecondary1",
     ND_SECONDARY_2 = "ndSecondary2",

package/dist/theme/colors.js

@@ -33,6 +33,7 @@ export var COLOR;
     COLOR["ND_SKY_BLUE_DARK"] = "ndSkyBlueDark";
     COLOR["ND_SKY_BLUE_LIGHT"] = "ndSkyBlueLight";
     COLOR["ND_METALLIC_GOLD"] = "ndMetallicGold";
+    COLOR["ND_METALLIC_GOLD_LIGHT"] = "ndMetallicGoldLight";
     COLOR["ND_PROVOST_BLUE"] = "ndProvostBlue";
     COLOR["ND_SECONDARY_1"] = "ndSecondary1";
     COLOR["ND_SECONDARY_2"] = "ndSecondary2";
@@ -88,6 +89,7 @@ export const colors = {
     [COLOR.ND_SKY_BLUE_DARK]: '#c1cddd',
     [COLOR.ND_SKY_BLUE_LIGHT]: '#edf2f9',
     [COLOR.ND_METALLIC_GOLD]: '#ae9142',
+    [COLOR.ND_METALLIC_GOLD_LIGHT]: '#CEBE8E',
     [COLOR.ND_PROVOST_BLUE]: '#002a5d',
     [COLOR.ND_SECONDARY_1]: '#5aabbc',
     [COLOR.ND_SECONDARY_2]: '#999623',

package/dist/theme/index.d.ts

@@ -50,6 +50,7 @@ export declare const theme: {
         ndSkyBlueDark: string;
         ndSkyBlueLight: string;
         ndMetallicGold: string;
+        ndMetallicGoldLight: string;
         ndProvostBlue: string;
         ndSecondary1: string;
         ndSecondary2: string;
@@ -154,6 +155,7 @@ export declare const useTheme: () => {
         ndSkyBlueDark: string;
         ndSkyBlueLight: string;
         ndMetallicGold: string;
+        ndMetallicGoldLight: string;
         ndProvostBlue: string;
         ndSecondary1: string;
         ndSecondary2: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "type": "module",
   "sideEffects": false,
   "files": [