@pingux/astro 2.151.0 → 2.151.1-alpha.1

package/lib/cjs/components/CodeView/CodeView.js

@@ -31,7 +31,7 @@ var _useGetTheme = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _codeView = _interopRequireDefault(require("../../styles/themes/next-gen/codeView/codeView"));
 var _CodeView = _interopRequireDefault(require("./CodeView.styles"));
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "textToCopy", "Prism", "stylesProp", "iconButtonProps"];
+var _excluded = ["children", "className", "hasLineNumbers", "hasNoCopyButton", "language", "textToCopy", "Prism", "stylesProp", "iconButtonProps", "variant"];
 /* istanbul ignore next */
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -48,6 +48,8 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     customPrism = props.Prism,
     stylesProp = props.stylesProp,
     iconButtonProps = props.iconButtonProps,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'default' : _props$variant,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useFocusRing = (0, _focus.useFocusRing)(),
     isFocusVisible = _useFocusRing.isFocusVisible,
@@ -73,7 +75,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return tokens.length.toString().length * 12;
   };
   var code = (children === null || children === void 0 ? void 0 : (0, _trim["default"])(children).call(children)) || '';
-  var codeViewTheme = (stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp.theme) || (isOnyx ? _codeView["default"].theme : _CodeView["default"].theme);
+  var codeViewTheme = (stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp.theme) || (isOnyx ? _codeView["default"][variant].theme : _CodeView["default"][variant].theme);
   (0, _react.useEffect)(function () {
     try {
       // eslint-disable-next-line import/no-dynamic-require, global-require
@@ -106,7 +108,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         key: i
       })), hasLineNumbers && (0, _react2.jsx)(_.Box, {
         as: "span",
-        variant: "codeView.lineNo",
+        variant: "codeView.".concat(variant, ".lineNo"),
         sx: {
           minWidth: getLineNoWidth(tokens)
         }
@@ -123,7 +125,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   if (isOnyx) {
     return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
       ref: ref,
-      variant: "codeView.wrapper",
+      variant: "codeView.".concat(variant, ".wrapper"),
       className: classNames
     }, (0, _utils.mergeProps)(focusProps, hoverProps, others), {
       role: "none"
@@ -131,9 +133,9 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isRow: true,
       justifyContent: "space-between",
       alignItems: "center",
-      variant: "codeView.header"
+      variant: "codeView.".concat(variant, ".header")
     }, (0, _react2.jsx)(_.Text, {
-      color: "gray-300",
+      variant: "codeView.".concat(variant, ".header.color"),
       mb: "0",
       mr: "sm",
       py: "sm"
@@ -141,13 +143,15 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       ref: ref,
       mode: "rightText",
       textToCopy: textToCopy || children,
-      iconButtonProps: iconButtonProps
-    }, "Copy")), content);
+      iconButtonProps: _objectSpread(_objectSpread({}, iconButtonProps), {}, {
+        variant: variant
+      })
+    })), content);
   }
   if (hasNoCopyButton) {
     return (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
       ref: ref,
-      variant: "codeView.wrapper",
+      variant: "codeView.".concat(variant, ".wrapper"),
       className: classNames
     }, (0, _utils.mergeProps)(focusProps, hoverProps, others), {
       role: "none"
@@ -162,7 +166,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     },
     wrapperProps: _objectSpread({
       className: classNames,
-      variant: 'codeView.wrapper'
+      variant: "codeView.".concat(variant, ".wrapper")
     }, others),
     iconButtonProps: iconButtonProps
   }, content);

package/lib/cjs/components/CodeView/CodeView.stories.d.ts

@@ -8,3 +8,4 @@ export declare const WithCustomSize: StoryFn;
 export declare const WithAdditionalLanguage: StoryFn;
 export declare const WithChangedCopiedValue: StoryFn<CodeViewProps>;
 export declare const WithCustomLanguage: StoryFn;
+export declare const Light: StoryFn<CodeViewProps>;

package/lib/cjs/components/CodeView/CodeView.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithLineNumbers = exports.WithCustomSize = exports.WithCustomLanguage = exports.WithChangedCopiedValue = exports.WithAdditionalLanguage = exports.Default = void 0;
+exports["default"] = exports.WithLineNumbers = exports.WithCustomSize = exports.WithCustomLanguage = exports.WithChangedCopiedValue = exports.WithAdditionalLanguage = exports.Light = exports.Default = void 0;
 var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
@@ -183,4 +183,20 @@ WithCustomLanguage.parameters = {
       }]
     }
   }
+};
+var Light = function Light(args) {
+  return (0, _react2.jsx)(_index.CodeView, (0, _extends2["default"])({
+    variant: "light"
+  }, args));
+};
+exports.Light = Light;
+Light.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
 };

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

@@ -1,96 +1,98 @@
 declare const _default: {
-    theme: {
-        plain: {
-            color: string;
-            background: string;
-            lineHeight: number;
-            tabSize: number;
-            fontFamily: string;
-        };
-        styles: ({
-            types: string[];
-            style: {
-                color: string;
-                fontStyle?: undefined;
-            };
-        } | {
-            types: string[];
-            style: {
+    default: {
+        theme: {
+            plain: {
                 color: string;
-                fontStyle: string;
-            };
-        } | {
-            types: string[];
-            style: {
-                fontStyle: string;
-                color?: undefined;
+                background: string;
+                lineHeight: number;
+                tabSize: number;
+                fontFamily: string;
             };
-        })[];
-    };
-    wrapper: {
-        bg: string;
-        border: string;
-        borderColor: string;
-        width: number;
-        height: number;
-        my: number;
-        overflow: string;
-        alignItems: string;
-        '&.is-focused, &:focus': {
-            boxShadow: string;
-            outline: string;
-        };
-        pre: {
-            backgroundColor: string;
-            m: number;
-            p: string;
-            pr: number;
-            height: string;
-            width: string;
-            overflowX: string;
-            overflowY: string;
-            fontFamily: string;
-            fontSize: string;
-            lineHeight: string;
-            '& .token-line': {
-                display: string;
-                alignItems: string;
-                '& .token': {
-                    whiteSpace: string;
-                    wordBreak: string;
+            styles: ({
+                types: string[];
+                style: {
+                    color: string;
+                    fontStyle?: undefined;
                 };
-            };
+            } | {
+                types: string[];
+                style: {
+                    color: string;
+                    fontStyle: string;
+                };
+            } | {
+                types: string[];
+                style: {
+                    fontStyle: string;
+                    color?: undefined;
+                };
+            })[];
         };
-        '&.has-no-copy-button': {
-            pre: {
-                p: number;
+        wrapper: {
+            bg: string;
+            border: string;
+            borderColor: string;
+            width: number;
+            height: number;
+            my: number;
+            overflow: string;
+            alignItems: string;
+            '&.is-focused, &:focus': {
+                boxShadow: string;
+                outline: string;
             };
-        };
-        '&.has-line-numbers': {
             pre: {
+                backgroundColor: string;
+                m: number;
                 p: string;
-                overflow: string;
-                '& .token-line:first-of-type *': {
-                    pt: number;
-                };
+                pr: number;
+                height: string;
+                width: string;
+                overflowX: string;
+                overflowY: string;
+                fontFamily: string;
+                fontSize: string;
+                lineHeight: string;
                 '& .token-line': {
                     display: string;
+                    alignItems: string;
                     '& .token': {
                         whiteSpace: string;
+                        wordBreak: string;
+                    };
+                };
+            };
+            '&.has-no-copy-button': {
+                pre: {
+                    p: number;
+                };
+            };
+            '&.has-line-numbers': {
+                pre: {
+                    p: string;
+                    overflow: string;
+                    '& .token-line:first-of-type *': {
+                        pt: number;
+                    };
+                    '& .token-line': {
+                        display: string;
+                        '& .token': {
+                            whiteSpace: string;
+                        };
                     };
                 };
             };
         };
-    };
-    lineNo: {
-        display: string;
-        userSelect: string;
-        px: number;
-        m: string;
-        bg: string;
-        minWidth: number;
-        color: string;
-        lineHeight: string;
+        lineNo: {
+            display: string;
+            userSelect: string;
+            px: number;
+            m: string;
+            bg: string;
+            minWidth: number;
+            color: string;
+            lineHeight: string;
+        };
     };
 };
 export default _default;

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

@@ -162,8 +162,10 @@ var lineNo = {
   lineHeight: '20px'
 };
 var _default = {
-  theme: theme,
-  wrapper: wrapper,
-  lineNo: lineNo
+  "default": {
+    theme: theme,
+    wrapper: wrapper,
+    lineNo: lineNo
+  }
 };
 exports["default"] = _default;

package/lib/cjs/components/CopyText/CopyButton.js

@@ -17,18 +17,24 @@ var _hooks = require("../../hooks");
 var _Icon = _interopRequireDefault(require("../Icon"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _react2 = require("@emotion/react");
-var _excluded = ["iconProps"];
+var _excluded = ["iconProps", "variant"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var CopyButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  /* istanbul ignore next */
   var iconProps = props.iconProps,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'default' : _props$variant,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useGetTheme = (0, _hooks.useGetTheme)(),
-    copyButtonSize = _useGetTheme.copyButtonSize;
+    copyButtonSize = _useGetTheme.copyButtonSize,
+    themeState = _useGetTheme.themeState;
+  /* istanbul ignore next */
+  var themeVariant = !themeState.isOnyx ? 'copyButton' : "copyButton.".concat(variant);
   return (0, _react2.jsx)(_IconButton["default"], (0, _extends2["default"])({
     ref: ref,
     "aria-label": "copy to clipboard",
-    variant: "copyButton"
+    variant: themeVariant
   }, others), (0, _react2.jsx)(_Icon["default"], (0, _extends2["default"])({
     icon: _ContentCopyIcon["default"],
     size: copyButtonSize,

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

@@ -71,6 +71,12 @@ export declare const colors: {
         message: string;
         fieldHelper: string;
     };
+    background: {
+        base: string;
+        secondary: string;
+        card: string;
+        hover: string;
+    };
     backgroundBase: string;
     backgroundSecondary: string;
     backgroundCard: string;
@@ -85,6 +91,10 @@ export declare const colors: {
         background: string;
         textColor: string;
     };
+    codeEditor: {
+        backgroundColor: string;
+        headerColor: string;
+    };
     neutral: {
         90: string;
     };

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

@@ -43,6 +43,16 @@ var badge = {
   background: _colorTokens.nextGenColors['gray-800'],
   textColor: _colorTokens.nextGenColors['gray-100']
 };
+var background = {
+  base: _colorTokens.nextGenColors['gray-900'],
+  secondary: '#1a1e22',
+  card: '#1a1e22',
+  hover: hoverDark
+};
+var codeEditor = {
+  backgroundColor: background.secondary,
+  headerColor: _colorTokens.nextGenColors['gray-900']
+};
 var twoTone = {
   bg: {
     orange: _colorTokens.nextGenColors['orange-500'],
@@ -139,12 +149,14 @@ var colors = _objectSpread(_objectSpread({
     message: 'white',
     fieldHelper: _colorTokens.nextGenColors['gray-400']
   },
+  background: background,
   backgroundBase: backgroundBase,
   backgroundSecondary: backgroundSecondary,
   backgroundCard: backgroundCard,
   backgroundSuggestion: backgroundSuggestion,
   backgroundHover: backgroundHover,
   font: font,
-  badge: badge
+  badge: badge,
+  codeEditor: codeEditor
 });
 exports.colors = colors;