@pingux/astro 2.154.1 → 2.155.0-alpha.1

package/lib/components/Text/Text.styles.js

@@ -23,7 +23,7 @@ export var wordWrap = {
   wordWrap: 'break-word',
   wordBreak: 'break-word'
 };
-var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
+export var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
   fontWeight: 1,
   mb: 'sm',
@@ -41,6 +41,25 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
     color: 'neutral.80'
   }
 });
+export var searchNavTabLabel = _objectSpread(_objectSpread({}, base), {}, {
+  whiteSpace: 'nowrap',
+  fontSize: 'sm',
+  fontWeight: 1,
+  mb: 'sm',
+  px: 'sm',
+  lineHeight: '16px',
+  color: 'neutral.40',
+  height: '100%',
+  '.is-selected &, .is-hovered &': {
+    color: 'active'
+  },
+  '.is-selected &': {
+    color: 'active'
+  },
+  '.is-disabled &': {
+    color: 'neutral.80'
+  }
+});
 var stepperLabel = _objectSpread(_objectSpread({}, base), {}, {
   fontSize: '14px',
   fontWeight: '500',
@@ -241,6 +260,7 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
   }),
   panelHeaderSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
   panelHeaderText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
+  searchNavTabLabel: searchNavTabLabel,
   sectionTitle: sectionTitle,
   subtitle: subtitle,
   tabLabel: tabLabel,

package/lib/index.js

@@ -173,6 +173,8 @@ export { default as ScrollBox } from './components/ScrollBox';
 export * from './components/ScrollBox';
 export { default as SearchField } from './components/SearchField';
 export * from './components/SearchField';
+export { default as SearchNav } from './components/SearchNav';
+export * from './components/SearchNav';
 export { default as SelectField } from './components/SelectField';
 export * from './components/SelectField';
 export { default as Separator } from './components/Separator';

package/lib/styles/colors.js

@@ -129,12 +129,16 @@ var badge = {
   iconBadgeFill: accent[40]
 };
 var tooltip = accent[20];
+var border = {
+  hairline: '#E7EEF4'
+};
 var allColors = {
   black: black,
   background: background,
   backgroundBase: backgroundBase,
   backgroundSecondary: backgroundSecondary,
   badge: badge,
+  border: border,
   white: white,
   neutral: neutral,
   accent: accent,

package/lib/styles/themeOverrides/nextGenDarkMode/colors.js

@@ -29,7 +29,8 @@ var border = {
   dark: chroma.mix('#23282e', 'white', 0.25, 'rgb').hex(),
   input: nextGenColors['gray-500'],
   separator: chroma.mix('#23282e', 'white', 0.15, 'rgb').hex(),
-  attachment: '#39414b'
+  attachment: '#39414b',
+  hairline: '#737577'
 };
 var badge = {
   background: nextGenColors['gray-800'],

package/lib/styles/themeOverrides/nextGenDarkMode/variants/buttons.js

@@ -73,6 +73,15 @@ var iconButtons = {
     }
   })
 };
+var searchNavTabLabel = {
+  color: 'gray-400',
+  '&.is-hovered': {
+    color: 'white',
+    '& > svg': {
+      fill: 'white'
+    }
+  }
+};
 var buttons = {
   primary: {
     color: 'black',
@@ -265,6 +274,7 @@ var buttons = {
     }
   },
   iconButtons: iconButtons,
+  searchNavTabLabel: searchNavTabLabel,
   modalCloseButton: modalCloseButton,
   listBoxLink: {
     color: 'blue-400',

package/lib/styles/themeOverrides/nextGenDarkMode/variants/cards.js

@@ -1,15 +1,29 @@
 var cards = {
   dark: {
     border: '1px solid',
-    borderColor: 'border.base',
-    boxShadow: '0 1px 3px 0px rgba(0,0,0, 0.13)',
+    borderColor: 'border.attachment',
+    boxShadow: 'standard',
     bg: 'transparent'
   },
   light: {
     border: '1px solid',
-    borderColor: 'border.base',
-    boxShadow: '0 1px 3px 0px rgba(0,0,0, 0.13)',
+    borderColor: 'border.attachment',
+    boxShadow: 'standard',
     bg: 'transparent'
+  },
+  withShadow: {
+    boxShadow: 'none',
+    borderColor: 'border.attachment',
+    backgroundColor: 'transparent'
+  },
+  interactive: {
+    borderColor: 'border.attachment'
+  },
+  container: {
+    borderColor: 'border.attachment'
+  },
+  activeCard: {
+    borderColor: 'border.attachment'
   }
 };
 export default cards;

package/lib/styles/themeOverrides/nextGenDarkMode/variants/text.js

@@ -5,6 +5,18 @@ export var text = {
   listViewItemText: {
     color: 'text.secondary'
   },
+  searchNavTabLabel: {
+    color: 'gray-400',
+    '.is-selected &, .is-hovered &': {
+      color: 'white'
+    },
+    '.is-selected &': {
+      color: 'white'
+    },
+    '.is-disabled &': {
+      color: 'neutral.80'
+    }
+  },
   listViewItemTextSelected: {
     color: 'gray-100'
   },

package/lib/styles/themes/next-gen/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SearchNav', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],
@@ -18,7 +18,8 @@ export var astroBlacklistStory = {
   StatusIcon: ['Default', 'In Rocker Button'],
   Avatar: ['Size Variation', 'Color Variation', 'Icon Variation', 'Square Variation', 'Logo Variation'],
   Text: ['Onyx'],
-  Loader: ['Circular', 'Custom Circular']
+  Loader: ['Circular', 'Custom Circular'],
+  Card: ['With Shadow']
 };
 export var nextGenOnlyComponents = ['NavigationHeader', 'Prompt', 'AI Panel', 'Response', 'Suggestions', 'Prompt Input', 'Footer', 'Onyx Input Patterns'];
 export default nextGenConvertedComponents;

package/lib/styles/themes/next-gen/next-gen.js

@@ -48,6 +48,9 @@ var nextGenTheme = {
     heading: '"Open Sans", sans-serif',
     codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
   },
+  shadows: {
+    standard: '0 1px 3px 0 rgba(0, 0, 0, 0.13)'
+  },
   sizes: sizes,
   badges: badges,
   navigationHeader: navigationHeader,

package/lib/styles/themes/next-gen/variants/button.js

@@ -30,6 +30,15 @@ export var defaultFocus = {
   outlineColor: 'active',
   outlineOffset: '2px'
 };
+var searchNavTabLabel = {
+  marginBottom: '9px',
+  color: 'neutral.40',
+  '&.is-hovered': {
+    '& > svg': {
+      fill: 'active'
+    }
+  }
+};
 var buttonBase = _objectSpread(_objectSpread({}, transitions), {}, {
   alignItems: 'center',
   justifyContent: 'center',
@@ -576,6 +585,7 @@ var buttons = {
   inlinePrimary: inlinePrimary,
   checkboxButton: checkboxButton,
   checkboxActiveButton: checkboxActiveButton,
+  searchNavTabLabel: searchNavTabLabel,
   outlineCritical: outlineCritical,
   link: link,
   listBoxLink: listBoxLink,

package/lib/styles/themes/next-gen/variants/cards.js

@@ -14,7 +14,7 @@ var interactive = {
   boxShadow: 'none',
   borderRadius: '1rem',
   border: '1px solid',
-  borderColor: 'border.base',
+  borderColor: 'gray-200',
   transition: 'border-color .25s ease-in',
   '&.is-focused': {
     backgroundColor: 'backgroundBase',
@@ -30,8 +30,13 @@ var interactive = {
 };
 var container = _objectSpread(_objectSpread({}, flat), {}, {
   p: 'lg',
-  borderColor: 'border.base',
-  lineHeight: 1.6
+  borderColor: 'gray-200',
+  lineHeight: 'body',
+  boxShadow: 'none'
+});
+var withShadow = _objectSpread(_objectSpread({}, container), {}, {
+  boxShadow: 'standard',
+  backgroundColor: 'backgroundBase'
 });
 var dark = _objectSpread(_objectSpread({}, flat), {}, {
   border: 'none',
@@ -46,7 +51,7 @@ var light = _objectSpread(_objectSpread({}, flat), {}, {
   gap: 'lg'
 });
 var activeCard = _objectSpread(_objectSpread({}, interactive), {}, {
-  borderColor: 'border.base',
+  borderColor: 'gray-200',
   '&.is-hovered': {
     borderColor: 'active',
     bg: 'default'
@@ -85,5 +90,9 @@ export default {
   container: container,
   suggestionColumn: suggestionColumn,
   suggestionRow: suggestionRow,
-  tableWrapper: tableWrapper
+  tableWrapper: tableWrapper,
+  withShadow: withShadow,
+  flat: {
+    boxShadow: 'none'
+  }
 };

package/lib/styles/themes/next-gen/variants/searchNav.js

@@ -0,0 +1,6 @@
+var tab = {
+  marginBottom: '-1.5px'
+};
+export default {
+  tab: tab
+};

package/lib/styles/themes/next-gen/variants/text.js

@@ -120,7 +120,8 @@ export var text = _objectSpread(_objectSpread({
     lineHeight: '24px'
   },
   tabLabel: {
-    color: 'text.primary'
+    color: 'text.primary',
+    wordBreak: 'normal'
   },
   placeholder: {
     color: 'gray-600',

package/lib/styles/themes/next-gen/variants/variants.js

@@ -28,6 +28,7 @@ import panelHeader from './panelHeader';
 import popoverMenu from './popoverMenu';
 import prompt from './prompt';
 import response from './response';
+import searchNav from './searchNav';
 import stepper from './stepper';
 import suggestion from './suggestion';
 import suggestions from './suggestions';
@@ -418,6 +419,7 @@ export default {
   prompt: prompt,
   response: response,
   rockerButton: rockerButton,
+  searchNav: searchNav,
   separator: separator,
   skeleton: skeleton,
   stepper: stepper,

package/lib/styles/variants/variants.js

@@ -49,6 +49,7 @@ import progressBar from '../../components/ProgressBar/ProgressBar.styles';
 import rangeCalendar from '../../components/RangeCalendar/RangeCalendar.styles';
 import rockerButton from '../../components/RockerButton/RockerButton.styles';
 import scrollBox from '../../components/ScrollBox/ScrollBox.styles';
+import searchNav from '../../components/SearchNav/SearchNav.styles';
 import separator from '../../components/Separator/Separator.styles';
 import serverErrorBoundary from '../../components/ServerErrorBoundary/ServerErrorBoundary.styles';
 import skeleton from '../../components/Skeleton/Skeleton.styles';
@@ -103,6 +104,7 @@ export default _objectSpread(_objectSpread({
   progressBar: progressBar,
   rockerButton: rockerButton,
   scrollBox: scrollBox,
+  searchNav: searchNav,
   separator: separator,
   serverErrorBoundary: serverErrorBoundary,
   slider: slider,

package/lib/types/searchNav.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.154.1",
+  "version": "2.155.0-alpha.1",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",