newskit 3.13.0 → 4.2.0

package/cjs/theme/component-defaults.js

@@ -2,6 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.componentDefaults = void 0;
 exports.componentDefaults = {
+    assistiveText: {
+        small: {
+            stylePreset: 'assistiveText',
+            typographyPreset: 'utilityBody010',
+            minHeight: 'sizing030',
+        },
+        medium: {
+            stylePreset: 'assistiveText',
+            typographyPreset: 'utilityBody020',
+            minHeight: 'sizing030',
+        },
+        large: {
+            stylePreset: 'assistiveText',
+            typographyPreset: 'utilityBody030',
+            minHeight: 'sizing030',
+        },
+    },
     audioPlayer: {
         seekBar: {
             slider: {
@@ -31,22 +48,22 @@ exports.componentDefaults = {
         controls: {
             space: 'space030',
             previousButton: {
-                stylePreset: 'audioPlayerControlButton',
+                stylePreset: 'iconButtonMinimalPrimary',
             },
             replayButton: {
-                stylePreset: 'audioPlayerControlButton',
+                stylePreset: 'iconButtonMinimalPrimary',
             },
             playPauseButton: {
-                stylePreset: 'audioPlayerPlayPauseButton',
+                stylePreset: 'iconButtonSolidPrimary',
             },
             forwardButton: {
-                stylePreset: 'audioPlayerControlButton',
+                stylePreset: 'iconButtonMinimalPrimary',
             },
             nextButton: {
-                stylePreset: 'audioPlayerControlButton',
+                stylePreset: 'iconButtonMinimalPrimary',
             },
             popoutButton: {
-                stylePreset: 'audioPlayerControlButton',
+                stylePreset: 'iconButtonMinimalPrimary',
             },
         },
         volumeControl: {
@@ -59,14 +76,14 @@ exports.componentDefaults = {
                     stylePreset: 'volumeControlIndicator',
                 },
                 thumb: {
-                    stylePreset: 'audioPlayerVolumeControlThumb',
+                    stylePreset: 'audioPlayerThumb',
                     size: 'sizing040',
                 },
                 thumbLabel: {
                     stylePreset: 'volumeControlLabels',
                 },
                 labels: {
-                    stylePreset: 'volumeControlButtons',
+                    stylePreset: 'iconButtonMinimalPrimary',
                 },
             },
         },
@@ -89,7 +106,7 @@ exports.componentDefaults = {
                 },
                 message: {
                     stylePreset: 'inkInverse',
-                    typographyPreset: 'utilityBody010',
+                    typographyPreset: 'utilityBody020',
                 },
             },
             actions: {
@@ -116,7 +133,7 @@ exports.componentDefaults = {
                 },
                 message: {
                     stylePreset: 'inkInverse',
-                    typographyPreset: 'utilityBody010',
+                    typographyPreset: 'utilityBody020',
                 },
             },
             actions: {
@@ -127,23 +144,10 @@ exports.componentDefaults = {
             },
         },
     },
-    byline: {
-        stylePreset: 'inkSubtle',
-        typographyPreset: 'utilityMeta020',
-        spaceStack: 'space020',
-        link: {
-            stylePreset: 'linkInline',
-            typographyPreset: 'utilityMeta020',
-        },
-        divider: {
-            stylePreset: 'inkNonEssential',
-            spaceInline: 'space020',
-        },
-    },
     button: {
         small: {
             typographyPreset: 'utilityButton010',
-            stylePreset: 'buttonDefault',
+            stylePreset: 'buttonSolidPrimary',
             spaceInset: 'spaceInsetSquish020',
             minWidth: 'sizing090',
             minHeight: 'sizing060',
@@ -155,7 +159,7 @@ exports.componentDefaults = {
         },
         medium: {
             typographyPreset: 'utilityButton020',
-            stylePreset: 'buttonDefault',
+            stylePreset: 'buttonSolidPrimary',
             spaceInset: 'spaceInsetSquish030',
             minWidth: 'sizing100',
             minHeight: 'sizing080',
@@ -167,7 +171,7 @@ exports.componentDefaults = {
         },
         large: {
             typographyPreset: 'utilityButton030',
-            stylePreset: 'buttonDefault',
+            stylePreset: 'buttonSolidPrimary',
             spaceInset: 'spaceInsetSquish040',
             minWidth: 'sizing110',
             minHeight: 'sizing090',
@@ -178,6 +182,19 @@ exports.componentDefaults = {
             },
         },
     },
+    byline: {
+        stylePreset: 'inkSubtle',
+        typographyPreset: 'utilityMeta020',
+        spaceStack: 'space020',
+        link: {
+            stylePreset: 'linkInline',
+            typographyPreset: 'utilityMeta020',
+        },
+        divider: {
+            stylePreset: 'inkNonEssential',
+            spaceInline: 'space020',
+        },
+    },
     caption: {
         typographyPreset: 'editorialCaption010',
         stylePreset: 'inkBase',
@@ -304,11 +321,12 @@ exports.componentDefaults = {
         },
     },
     divider: {
-        stylePreset: 'dividerHorizontal',
+        stylePreset: 'divider',
     },
     drawer: {
         overlay: {
             zIndex: 70,
+            transitionPreset: 'fade',
         },
         panel: {
             zIndex: 80,
@@ -322,37 +340,17 @@ exports.componentDefaults = {
                 lg: '333px',
                 xl: '354px',
             },
-        },
-        header: {
-            spaceInset: 'spaceInsetSquish040',
-        },
-        content: {
-            spaceInset: 'spaceInset050',
-        },
-        closeButton: {
-            stylePreset: 'iconButtonMinimalSecondary',
-            spaceInset: 'spaceInset020',
-        },
-    },
-    modal: {
-        overlay: {
-            zIndex: 70,
-        },
-        panel: {
-            zIndex: 80,
-            stylePreset: 'modalPanel',
-            topOffset: '20vh',
-            width: {
-                xs: '90vw',
-                sm: '60vw',
-                md: '45vw',
-                lg: '38vw',
-                xl: '31vw',
+            left: {
+                transitionPreset: ['fade', 'slideLeft'],
             },
-            minHeight: '15vh',
-            maxHeight: {
-                xs: '95vh',
-                md: '80vh',
+            right: {
+                transitionPreset: ['fade', 'slideRight'],
+            },
+            top: {
+                transitionPreset: ['fade', 'slideTop'],
+            },
+            bottom: {
+                transitionPreset: ['fade', 'slideBottom'],
             },
         },
         header: {
@@ -369,7 +367,7 @@ exports.componentDefaults = {
     flag: {
         small: {
             typographyPreset: 'utilityLabel010',
-            stylePreset: 'flagDefault',
+            stylePreset: 'flagSolidPrimary',
             spaceInset: 'spaceInsetSquish010',
             minHeight: 'sizing050',
             iconSize: 'iconSize010',
@@ -377,7 +375,7 @@ exports.componentDefaults = {
         },
         medium: {
             typographyPreset: 'utilityLabel020',
-            stylePreset: 'flagDefault',
+            stylePreset: 'flagSolidPrimary',
             spaceInset: 'spaceInsetSquish020',
             minHeight: 'sizing060',
             iconSize: 'iconSize010',
@@ -385,7 +383,7 @@ exports.componentDefaults = {
         },
         large: {
             typographyPreset: 'utilityLabel030',
-            stylePreset: 'flagDefault',
+            stylePreset: 'flagSolidPrimary',
             spaceInset: 'spaceInsetSquish020',
             minHeight: 'sizing070',
             iconSize: 'iconSize010',
@@ -476,7 +474,7 @@ exports.componentDefaults = {
     },
     iconButton: {
         small: {
-            stylePreset: 'iconButtonDefault',
+            stylePreset: 'iconButtonSolidPrimary',
             spaceInset: 'spaceInset020',
             width: 'sizing060',
             height: 'sizing060',
@@ -485,7 +483,7 @@ exports.componentDefaults = {
             },
         },
         medium: {
-            stylePreset: 'iconButtonDefault',
+            stylePreset: 'iconButtonSolidPrimary',
             spaceInset: 'spaceInset030',
             width: 'sizing080',
             height: 'sizing080',
@@ -494,7 +492,7 @@ exports.componentDefaults = {
             },
         },
         large: {
-            stylePreset: 'iconButtonDefault',
+            stylePreset: 'iconButtonSolidPrimary',
             spaceInset: 'spaceInset040',
             width: 'sizing090',
             height: 'sizing090',
@@ -508,24 +506,56 @@ exports.componentDefaults = {
     },
     image: {
         stylePreset: 'imageSharp',
-        caption: {
-            typographyPreset: 'editorialCaption010',
-            stylePreset: 'inkBase',
-            spaceStack: 'space040',
-            spaceInset: {
-                xs: 'spaceInset040',
-                md: 'spaceInset050',
-            },
-            credit: {
-                typographyPreset: 'utilityMeta010',
-                stylePreset: 'uppercaseInkSubtle',
-            },
-        },
     },
     indeterminateProgressIndicator: {
         stylePreset: 'iconDefault',
         size: 'iconSize020',
     },
+    inlineDrawer: {
+        __extends: '{{componentDefaults.drawer}}',
+        panel: {
+            __extends: '{{componentDefaults.drawer.panel}}',
+            maxSize: 'auto',
+        },
+    },
+    inlineMessage: {
+        stylePreset: 'inlineMessageInformative',
+        spaceInset: 'spaceInset030',
+        icon: {
+            spaceInline: 'space030',
+        },
+        content: {
+            title: {
+                spaceStack: 'space030',
+                stylePreset: 'inkContrast',
+                typographyPreset: 'utilityHeading010',
+            },
+            message: {
+                stylePreset: 'inkBase',
+                typographyPreset: 'utilityBody020',
+            },
+        },
+    },
+    label: {
+        small: {
+            stylePreset: 'label',
+            typographyPreset: 'utilityLabel010',
+            spaceStack: 'space040',
+            spaceInline: 'space010',
+        },
+        medium: {
+            stylePreset: 'label',
+            typographyPreset: 'utilityLabel020',
+            spaceStack: 'space040',
+            spaceInline: 'space010',
+        },
+        large: {
+            stylePreset: 'label',
+            typographyPreset: 'utilityLabel030',
+            spaceStack: 'space040',
+            spaceInline: 'space010',
+        },
+    },
     link: {
         stylePreset: 'linkInline',
         spaceInline: 'space010',
@@ -540,6 +570,14 @@ exports.componentDefaults = {
     menu: {
         spaceInline: 'space020',
     },
+    menuGroup: {
+        spaceInline: 'space050',
+        title: {
+            typographyPreset: 'utilityHeading030',
+            stylePreset: 'inkSubtle',
+            spaceInline: 'space050',
+        },
+    },
     menuItem: {
         horizontal: {
             minHeight: 'sizing080',
@@ -554,12 +592,39 @@ exports.componentDefaults = {
             spaceInset: 'spaceInsetSquish030',
         },
     },
-    menuGroup: {
-        spaceInline: 'space050',
-        title: {
-            typographyPreset: 'utilityHeading030',
-            stylePreset: 'inkSubtle',
-            spaceInline: 'space050',
+    modal: {
+        overlay: {
+            zIndex: 70,
+            transitionPreset: 'fade',
+        },
+        panel: {
+            zIndex: 80,
+            stylePreset: 'modalPanel',
+            // transitionPreset: ['fade', 'moveUp', 'grow'], // uncomment this line when working on PPDSC-1809
+            transitionPreset: ['fade'],
+            topOffset: '20vh',
+            width: {
+                xs: '90vw',
+                sm: '60vw',
+                md: '45vw',
+                lg: '38vw',
+                xl: '31vw',
+            },
+            minHeight: '15vh',
+            maxHeight: {
+                xs: '95vh',
+                md: '80vh',
+            },
+        },
+        header: {
+            spaceInset: 'spaceInsetSquish040',
+        },
+        content: {
+            spaceInset: 'spaceInset050',
+        },
+        closeButton: {
+            stylePreset: 'iconButtonMinimalSecondary',
+            spaceInset: 'spaceInset020',
         },
     },
     orderedList: {
@@ -576,6 +641,7 @@ exports.componentDefaults = {
     },
     overlay: {
         stylePreset: 'overlay',
+        transitionPreset: 'fade',
     },
     paragraph: {
         stylePreset: 'inkBase',
@@ -660,6 +726,11 @@ exports.componentDefaults = {
             },
         },
     },
+    structuredList: {
+        divider: {
+            stylePreset: 'divider',
+        },
+    },
     structuredListItem: {
         stylePreset: 'structuredListItem',
         spaceInset: 'spaceInsetStretch040',
@@ -669,11 +740,6 @@ exports.componentDefaults = {
             stylePreset: 'inkContrast',
         },
     },
-    structuredList: {
-        divider: {
-            stylePreset: 'dividerHorizontal',
-        },
-    },
     tab: {
         small: {
             stylePreset: 'tab',
@@ -711,50 +777,39 @@ exports.componentDefaults = {
                 stylePreset: 'tabsBarIndicator',
                 weight: 'borderWidth020',
                 motionDuration: 'motionDuration030',
-                motionTiming: 'motionEaseInAndOut',
+                motionTiming: 'motionTimingEaseInAndOut',
             },
         },
     },
-    assistiveText: {
-        small: {
-            stylePreset: 'assistiveText',
-            typographyPreset: 'utilityLabel020',
-            minHeight: 'sizing030',
-        },
-        medium: {
-            stylePreset: 'assistiveText',
-            typographyPreset: 'utilityLabel020',
-            minHeight: 'sizing030',
-        },
-        large: {
-            stylePreset: 'assistiveText',
-            typographyPreset: 'utilityLabel030',
-            minHeight: 'sizing030',
-        },
-    },
-    label: {
+    tag: {
         small: {
-            stylePreset: 'label',
-            typographyPreset: 'utilityLabel030',
-            spaceStack: 'space040',
+            typographyPreset: 'utilityButton010',
+            stylePreset: 'tagPrimary',
+            spaceInset: 'spaceInsetSquish010',
+            minHeight: 'sizing050',
+            iconSize: 'iconSize010',
             spaceInline: 'space010',
         },
         medium: {
-            stylePreset: 'label',
-            typographyPreset: 'utilityLabel030',
-            spaceStack: 'space040',
+            typographyPreset: 'utilityButton020',
+            stylePreset: 'tagPrimary',
+            spaceInset: 'spaceInsetSquish020',
+            minHeight: 'sizing060',
+            iconSize: 'iconSize010',
             spaceInline: 'space010',
         },
         large: {
-            stylePreset: 'label',
-            typographyPreset: 'utilityLabel030',
-            spaceStack: 'space040',
+            typographyPreset: 'utilityButton030',
+            stylePreset: 'tagPrimary',
+            spaceInset: 'spaceInsetSquish020',
+            minHeight: 'sizing070',
+            iconSize: 'iconSize020',
             spaceInline: 'space010',
         },
     },
     textField: {
         small: {
-            stylePreset: 'textField',
+            stylePreset: 'inputField',
             spaceInset: 'spaceInset020',
             minHeight: 'sizing060',
             typographyPreset: 'utilityBody020',
@@ -769,7 +824,7 @@ exports.componentDefaults = {
             },
         },
         medium: {
-            stylePreset: 'textField',
+            stylePreset: 'inputField',
             spaceInset: 'spaceInset030',
             minHeight: 'sizing080',
             typographyPreset: 'utilityBody020',
@@ -784,7 +839,7 @@ exports.componentDefaults = {
             },
         },
         large: {
-            stylePreset: 'textField',
+            stylePreset: 'inputField',
             spaceInset: 'spaceInset030',
             minHeight: 'sizing090',
             typographyPreset: 'utilityBody030',
@@ -888,32 +943,6 @@ exports.componentDefaults = {
             },
         },
     },
-    tag: {
-        small: {
-            typographyPreset: 'utilityLabel010',
-            stylePreset: 'tagDefault',
-            spaceInset: 'spaceInsetSquish010',
-            minHeight: 'sizing050',
-            iconSize: 'iconSize010',
-            spaceInline: 'space010',
-        },
-        medium: {
-            typographyPreset: 'utilityLabel020',
-            stylePreset: 'tagDefault',
-            spaceInset: 'spaceInsetSquish020',
-            minHeight: 'sizing060',
-            iconSize: 'iconSize010',
-            spaceInline: 'space010',
-        },
-        large: {
-            typographyPreset: 'utilityLabel030',
-            stylePreset: 'tagDefault',
-            spaceInset: 'spaceInsetSquish020',
-            minHeight: 'sizing070',
-            iconSize: 'iconSize020',
-            spaceInline: 'space010',
-        },
-    },
     titleBar: {
         stylePreset: 'titleBar',
         spaceInset: {
@@ -941,7 +970,7 @@ exports.componentDefaults = {
         content: {
             message: {
                 stylePreset: 'inkInverse',
-                typographyPreset: 'utilityBody010',
+                typographyPreset: 'utilityBody020',
             },
             title: {
                 stylePreset: 'inkInverse',
@@ -959,24 +988,6 @@ exports.componentDefaults = {
             spaceInline: 'space030',
         },
     },
-    inlineMessage: {
-        stylePreset: 'inlineMessageInformative',
-        spaceInset: 'spaceInset030',
-        icon: {
-            spaceInline: 'space030',
-        },
-        content: {
-            title: {
-                spaceStack: 'space030',
-                stylePreset: 'inkContrast',
-                typographyPreset: 'utilityHeading010',
-            },
-            message: {
-                stylePreset: 'inkBase',
-                typographyPreset: 'utilityBody010',
-            },
-        },
-    },
     unorderedList: {
         spaceStack: 'space040',
         content: {
@@ -1002,10 +1013,57 @@ exports.componentDefaults = {
             },
         },
         button: {
-            stylePreset: 'volumeControlButtons',
+            stylePreset: 'iconButtonMinimalPrimary',
             iconSize: 'iconSize020',
             size: 'small',
         },
     },
+    checkbox: {
+        small: {
+            input: {
+                size: 'sizing050',
+                stylePreset: 'checkboxInput',
+                spaceInline: 'space030',
+            },
+            feedback: {
+                size: 'sizing070',
+                stylePreset: 'checkboxFeedback',
+            },
+            label: {
+                stylePreset: 'controlLabel',
+                typographyPreset: 'utilityBody020',
+            },
+        },
+        medium: {
+            input: {
+                size: 'sizing060',
+                stylePreset: 'checkboxInput',
+                spaceInline: 'space030',
+            },
+            feedback: {
+                size: 'sizing080',
+                stylePreset: 'checkboxFeedback',
+            },
+            label: {
+                stylePreset: 'controlLabel',
+                typographyPreset: 'utilityBody020',
+            },
+        },
+        large: {
+            input: {
+                size: 'sizing070',
+                stylePreset: 'checkboxInput',
+                spaceInline: 'space040',
+            },
+            feedback: {
+                size: 'sizing090',
+                stylePreset: 'checkboxFeedback',
+            },
+            label: {
+                stylePreset: 'controlLabel',
+                typographyPreset: 'utilityBody030',
+            },
+        },
+    },
 };
 //# sourceMappingURL=component-defaults.js.map