@pingux/astro 2.161.1-alpha.2 → 2.161.1-alpha.4

package/lib/README.md

@@ -14,7 +14,7 @@ Yarn:
 
 ## Requirements
 
-- Node: 18+
+- Node: 20+
 - React: 16.8+
 
 ## Usage
@@ -33,7 +33,7 @@ import { AstroProvider } from '@pingux/astro';
 
 Astro uses [Storybook](https://storybook.js.org/) for component documentation. Once Astro has been cloned, run the following commands to start a local Storybook server:
 
-`yarn start`
+`npx nx start`
 
 The Storybook server defaults to `https://localhost:6006`. This port can be customized by running the command start -p 9009. For example, this will start Storybook on port 9009. More information on customizing Storybook CLI options can be found at https://storybook.js.org/docs/react/api/cli-options. 
 
@@ -41,19 +41,23 @@ Component prop documentation is available under the "documentation" tab per each
 
 For example, to view the disabled button styling, navigate to the Button story’s props table, locate the "isDisabled" prop, and toggle to "true". This change allows you to preview the disabled button’s styling and functionality.
 
-## Yarn
-We use a modern version of [Yarn](https://yarnpkg.com/getting-started) for package management with the [Plug'n'Play](https://yarnpkg.com/features/pnp) feature enabled. This allows for a [Zero Install](https://yarnpkg.com/features/zero-installs) approach to be used.
+To create a production bundle:
 
-## Enabling TypeScript in VSCode
+```sh
+npx nx build astro
+```
+
+To run linting:
 
-To run TypeScript properly, there are a couple of steps to run first:
+```sh
+npx nx lint astro
+```
 
-1. Run `yarn dlx @yarnpkg/sdks vscode` and reload the window to configure vscode for TypeScript. 
-2. Open a TypeScript file in VSCode and open the command palette with `cmd + shift + p`.
-    
-    a. Search for "TypeScript: Select TypeScript Version..."
-    
-    b. Choose "Use Workspace Version"
+To run unit tests:
+
+```sh
+npx nx test astro
+```
 
 ## Browser Compatibility
 

package/lib/cjs/components/RequirementsList/RequirementsList.js

@@ -25,7 +25,9 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var requirements = props.requirements,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useGetTheme = (0, _hooks.useGetTheme)(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   var SuccessCircle = icons.SuccessCircle,
     ErrorCircle = icons.ErrorCircle,
     WarningIcon = icons.WarningIcon,
@@ -75,7 +77,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
             name: 'Empty Status Icon'
           },
           icon: DefaultCircle,
-          color: "neutral.40",
+          color: isOnyx ? 'common.dark' : 'neutral.40',
           mr: "sm",
           size: "sm",
           "data-testid": "status-icon__".concat(status)
@@ -91,7 +93,7 @@ var RequirementsList = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       width: "100%",
       as: "li"
     }, statusIconRender(req.status, (0, _kebabCase["default"])(req.name)), (0, _react2.jsx)(_Text["default"], {
-      variant: "bodyWeak"
+      variant: "requirementsListText"
     }, req.name));
   };
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -1950,6 +1950,16 @@ export declare const text: {
         wordWrap: wordWrapText;
         wordBreak: wordBreak;
     };
+    requirementsListText: {
+        fontSize: string;
+        color: string;
+        fontFamily: string;
+        display: string;
+        overflowWrap: overflowWrap;
+        maxWidth: string;
+        wordWrap: wordWrapText;
+        wordBreak: wordBreak;
+    };
     searchNavTabLabel: {
         whiteSpace: string;
         fontSize: string;

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

@@ -274,6 +274,11 @@ var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   }),
   panelHeaderSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
   panelHeaderText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
+  requirementsListText: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    color: 'text.secondary',
+    fontFamily: 'standard'
+  }),
   searchNavTabLabel: searchNavTabLabel,
   sectionTitle: sectionTitle,
   subtitle: subtitle,

package/lib/cjs/docs/Welcome.stories.mdx

@@ -28,7 +28,7 @@ Yarn:
 
 ### Requirements
 
-- Node: 18+
+- Node: 20+
 - React: 16.8+
 
 ### Usage
@@ -47,7 +47,7 @@ import { AstroProvider } from ‘@pingux/astro’;
 
 Astro uses [Storybook](https://storybook.js.org/) for component documentation. Once Astro has been cloned, run the following commands to start a local Storybook server:
 
-`yarn && yarn start`
+Run `npm install` in the root and package level. Followed by `npx nx start` in lib/astro.
 
 The Storybook server defaults to `https://localhost:6006`. This port can be customized by running the command start -p 9009. For example, this will start Storybook on port 9009. More information on customizing Storybook CLI options can be found at the [Storybook docs](https://storybook.js.org/docs/react/api/cli-options). 
 

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/colors.d.ts

@@ -95,6 +95,9 @@ export declare const colors: {
         backgroundColor: string;
         headerColor: string;
     };
+    common: {
+        dark: string;
+    };
     neutral: {
         90: string;
     };

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

@@ -106,6 +106,9 @@ var iconWrapper = {
     lightIndigo: _colorTokens.nextGenColors['indigo-100']
   }
 };
+var common = {
+  dark: '#C0C9D5'
+};
 var backgroundBase = _colorTokens.nextGenColors['gray-900'];
 var backgroundSecondary = _colorTokens.nextGenColors['gray-900'];
 var backgroundCard = '#1a1e22';
@@ -157,5 +160,6 @@ var colors = exports.colors = _objectSpread(_objectSpread({
   backgroundHover: backgroundHover,
   font: font,
   badge: badge,
-  codeEditor: codeEditor
+  codeEditor: codeEditor,
+  common: common
 });

package/lib/cjs/styles/themes/next-gen/colors/colors.d.ts

@@ -266,6 +266,7 @@ declare const colors: {
         };
         border: string;
         hairline: string;
+        dark: string;
     };
     font: {
         base: string;

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

@@ -76,7 +76,7 @@ var critical = exports.critical = {
   light: _colorTokens.nextGenColors['red-100']
 };
 var success = exports.success = {
-  bright: _colorTokens.nextGenColors['green-600'],
+  bright: _colorTokens.nextGenColors['green-500'],
   dark: _colorTokens.nextGenColors['green-800'],
   light: _colorTokens.nextGenColors['green-100']
 };

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -249,6 +249,7 @@ declare const _default: {
             };
             border: string;
             hairline: string;
+            dark: string;
         };
         font: {
             base: string;
@@ -1975,6 +1976,12 @@ declare const _default: {
             color: string;
             marginTop: string;
         };
+        requirementsListText: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            lineHeight: string;
+        };
         stepperTabContent: {
             fontSize: string;
             color: string;

package/lib/cjs/styles/themes/next-gen/tokens/colorTokens.d.ts

@@ -116,6 +116,7 @@ export declare const nextGenColors: {
         };
         border: string;
         hairline: string;
+        dark: string;
     };
     font: {
         base: string;

package/lib/cjs/styles/themes/next-gen/tokens/colorTokens.js

@@ -122,7 +122,8 @@ var nextGenColors = exports.nextGenColors = {
       'secondary': '#f6f8fa'
     },
     'border': '#69788B',
-    'hairline': '#e7eef4'
+    'hairline': '#e7eef4',
+    'dark': '#324054'
   },
   'font': {
     'base': '#23282e',

package/lib/cjs/styles/themes/next-gen/variants/text.d.ts

@@ -31,6 +31,12 @@ export declare const text: {
         color: string;
         marginTop: string;
     };
+    requirementsListText: {
+        color: string;
+        fontSize: string;
+        fontWeight: number;
+        lineHeight: string;
+    };
     stepperTabContent: {
         fontSize: string;
         color: string;

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

@@ -216,6 +216,12 @@ var text = exports.text = _objectSpread(_objectSpread({
     color: 'font.light',
     marginTop: '0px !important'
   },
+  requirementsListText: {
+    color: 'font.base',
+    fontSize: 'md',
+    fontWeight: 0,
+    lineHeight: 'body'
+  },
   stepperTabContent: stepperTabContent,
   stepperTabContentHeader: stepperTabContentHeader
 });

package/lib/components/RequirementsList/RequirementsList.js

@@ -13,7 +13,9 @@ var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
   var requirements = props.requirements,
     others = _objectWithoutProperties(props, _excluded);
   var _useGetTheme = useGetTheme(),
-    icons = _useGetTheme.icons;
+    icons = _useGetTheme.icons,
+    themeState = _useGetTheme.themeState;
+  var isOnyx = themeState.isOnyx;
   var SuccessCircle = icons.SuccessCircle,
     ErrorCircle = icons.ErrorCircle,
     WarningIcon = icons.WarningIcon,
@@ -63,7 +65,7 @@ var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
             name: 'Empty Status Icon'
           },
           icon: DefaultCircle,
-          color: "neutral.40",
+          color: isOnyx ? 'common.dark' : 'neutral.40',
           mr: "sm",
           size: "sm",
           "data-testid": "status-icon__".concat(status)
@@ -79,7 +81,7 @@ var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
       width: "100%",
       as: "li"
     }, statusIconRender(req.status, kebabCase(req.name)), ___EmotionJSX(Text, {
-      variant: "bodyWeak"
+      variant: "requirementsListText"
     }, req.name));
   };
   return ___EmotionJSX(Box, _extends({

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

@@ -267,6 +267,11 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
   }),
   panelHeaderSubtext: _objectSpread(_objectSpread({}, listViewItemSubtext), textEllipsis),
   panelHeaderText: _objectSpread(_objectSpread({}, listViewItemText), textEllipsis),
+  requirementsListText: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    color: 'text.secondary',
+    fontFamily: 'standard'
+  }),
   searchNavTabLabel: searchNavTabLabel,
   sectionTitle: sectionTitle,
   subtitle: subtitle,

package/lib/docs/Welcome.stories.mdx

@@ -28,7 +28,7 @@ Yarn:
 
 ### Requirements
 
-- Node: 18+
+- Node: 20+
 - React: 16.8+
 
 ### Usage
@@ -47,7 +47,7 @@ import { AstroProvider } from ‘@pingux/astro’;
 
 Astro uses [Storybook](https://storybook.js.org/) for component documentation. Once Astro has been cloned, run the following commands to start a local Storybook server:
 
-`yarn && yarn start`
+Run `npm install` in the root and package level. Followed by `npx nx start` in lib/astro.
 
 The Storybook server defaults to `https://localhost:6006`. This port can be customized by running the command start -p 9009. For example, this will start Storybook on port 9009. More information on customizing Storybook CLI options can be found at the [Storybook docs](https://storybook.js.org/docs/react/api/cli-options). 
 

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

@@ -99,6 +99,9 @@ var iconWrapper = {
     lightIndigo: nextGenColors['indigo-100']
   }
 };
+var common = {
+  dark: '#C0C9D5'
+};
 var backgroundBase = nextGenColors['gray-900'];
 var backgroundSecondary = nextGenColors['gray-900'];
 var backgroundCard = '#1a1e22';
@@ -150,5 +153,6 @@ export var colors = _objectSpread(_objectSpread({
   backgroundHover: backgroundHover,
   font: font,
   badge: badge,
-  codeEditor: codeEditor
+  codeEditor: codeEditor,
+  common: common
 });

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

@@ -69,7 +69,7 @@ export var critical = {
   light: nextGenColors['red-100']
 };
 export var success = {
-  bright: nextGenColors['green-600'],
+  bright: nextGenColors['green-500'],
   dark: nextGenColors['green-800'],
   light: nextGenColors['green-100']
 };

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

@@ -115,7 +115,8 @@ export var nextGenColors = {
       'secondary': '#f6f8fa'
     },
     'border': '#69788B',
-    'hairline': '#e7eef4'
+    'hairline': '#e7eef4',
+    'dark': '#324054'
   },
   'font': {
     'base': '#23282e',

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

@@ -209,6 +209,12 @@ export var text = _objectSpread(_objectSpread({
     color: 'font.light',
     marginTop: '0px !important'
   },
+  requirementsListText: {
+    color: 'font.base',
+    fontSize: 'md',
+    fontWeight: 0,
+    lineHeight: 'body'
+  },
   stepperTabContent: stepperTabContent,
   stepperTabContentHeader: stepperTabContentHeader
 });