@kaizen/components 1.74.3 → 1.75.0

package/codemods/utils/transformV1ButtonPropsToButtonOrLinkButton.spec.tsx

@@ -0,0 +1,199 @@
+import ts from 'typescript'
+import { parseJsx } from '../__tests__/utils'
+import { transformV1ButtonPropsToButtonOrLinkButton } from './transformV1ButtonPropsToButtonOrLinkButton'
+import { printAst } from './'
+
+const mockedTransformer =
+  () =>
+  (context: ts.TransformationContext) =>
+  (rootNode: ts.Node): ts.Node => {
+    const visit = (node: ts.Node): ts.Node => {
+      if (ts.isJsxSelfClosingElement(node)) {
+        const primaryAction = node.attributes.properties.find((prop) => {
+          return prop?.name?.getText() === 'primaryAction'
+        }) as ts.JsxAttribute
+
+        if (primaryAction) {
+          const primaryActionInitializer =
+            primaryAction?.initializer?.getChildren()[1] as ts.ObjectLiteralExpression
+          const ButtonOrLinkComponent =
+            transformV1ButtonPropsToButtonOrLinkButton(primaryActionInitializer)
+          const newAttr = ts.factory.createJsxAttribute(
+            ts.factory.createIdentifier('primaryAction'),
+            ts.factory.createJsxExpression(undefined, ButtonOrLinkComponent.component),
+          )
+
+          return ts.factory.createJsxSelfClosingElement(
+            ts.factory.createIdentifier('DummyComponent'),
+            undefined,
+            ts.factory.createJsxAttributes([newAttr]),
+          )
+        }
+      }
+      return ts.visitEachChild(node, visit, context)
+    }
+    return ts.visitNode(rootNode, visit)
+  }
+
+const transformInput = (sourceFile: ts.SourceFile): string => {
+  const result = ts.transform(sourceFile, [mockedTransformer()])
+  const transformedSource = result.transformed[0] as ts.SourceFile
+  return printAst(transformedSource)
+}
+
+describe('transformV1ButtonPropsToButtonOrLinkButton()', () => {
+  it('transforms V1 button-like props into a Button/next component', () => {
+    const inputAst = parseJsx(`<DummyComponent primaryAction={{
+      label: 'Learn more',
+      onClick: () => console.log("hello world")
+      destructive: true,
+      disabled: false,
+      reversed: true,
+      size: 'small',
+      working: true,
+      workingLabel: 'Loading...',
+      workingLabelHidden: true,
+      disableTabFocusAndIUnderstandTheAccessibilityImplications: true,
+      'data-automation-id': 'some-id',
+      classNameOverride: styles.buttonClass,
+    }} />`)
+
+    const outputAst = parseJsx(
+      `<DummyComponent primaryAction={<Button  onPress={() => console.log("hello world")} isDisabled={false} isReversed size="medium" isPending pendingLabel='Loading...' hasHiddenPendingLabel data-testid='some-id' className={styles.buttonClass} variant="secondary">Learn more</Button>} />`,
+    )
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+  it('transforms V1 link-like props into a LinkButton component', () => {
+    const inputAst = parseJsx(`<DummyComponent primaryAction={{
+      label: 'Learn more',
+      href: 'https://www.example.com',
+      destructive: true,
+      disabled: false,
+      reversed: true,
+      newTabAndIUnderstandTheAccessibilityImplications: true,
+      size: 'small',
+      working: true,
+      workingLabel: 'Loading...',
+      workingLabelHidden: true,
+      disableTabFocusAndIUnderstandTheAccessibilityImplications: true,
+    }} />`)
+
+    const outputAst = parseJsx(
+      `<DummyComponent primaryAction={<LinkButton href='https://www.example.com' isDisabled={false} isReversed target="_blank" rel="noopener noreferrer" size="medium" isPending pendingLabel='Loading...' hasHiddenPendingLabel variant="secondary">Learn more</LinkButton>} />`,
+    )
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+  it('transforms component render props into a LinkButton component and keeps the component render props', () => {
+    const inputAst = parseJsx(`<DummyComponent primaryAction={{
+      label: 'Learn more',
+      href: 'https://www.example.com',
+      destructive: true,
+      disabled: false,
+      reversed: true,
+      newTabAndIUnderstandTheAccessibilityImplications: true,
+      size: 'small',
+      working: true,
+      workingLabel: 'Loading...',
+      workingLabelHidden: true,
+      disableTabFocusAndIUnderstandTheAccessibilityImplications: true,
+      component: ({ children }) => <span>{children}</span>,
+    }} />`)
+
+    const outputAst = parseJsx(
+      `<DummyComponent primaryAction={<LinkButton href='https://www.example.com' isDisabled={false} isReversed target="_blank" rel="noopener noreferrer" size="medium" isPending pendingLabel='Loading...' hasHiddenPendingLabel component={({ children }) => <span>{children}</span>} variant="secondary">Learn more</LinkButton>}/>`,
+    )
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+  it('will create a large button if the size is undefined', () => {
+    const inputAst = parseJsx(`<DummyComponent primaryAction={{
+      label: 'Learn more',
+      onClick: () => console.log("hello world")
+    }}/>`)
+
+    const outputAst = parseJsx(
+      `<DummyComponent primaryAction={<Button onPress={() => console.log("hello world")} variant="secondary" size="large">Learn more</Button>}}
+    />`,
+    )
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+
+  // This will allow for type feedback to the consumer
+  it('passes tooltip and badge props into the created element', () => {
+    const inputAst = parseJsx(`<DummyComponent primaryAction={{
+      label: 'Learn more',
+      onClick: () => console.log("hello world")
+      size: 'small',
+      classNameOverride: styles.buttonClass,
+      tooltip: { text: 'Opens in a new tab', mood: 'cautionary' },
+      badge: { text: 'New' },
+    }}/>`)
+
+    const outputAst = parseJsx(
+      `<DummyComponent primaryAction={<Button onPress={() => console.log("hello world")} size="medium" className={styles.buttonClass} tooltip={{ text: 'Opens in a new tab', mood: 'cautionary' }} badge={{ text: 'New' }} variant="secondary">Learn more</Button>}}
+    />`,
+    )
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+  it('passes all data and native attributes into the created element', () => {
+    const inputAst = parseJsx(`<DummyComponent primaryAction={{
+        label: 'Learn more',
+        onClick: () => console.log("hello world")
+        size: 'small',
+        classNameOverride: styles.buttonClass,
+        'data-random-attribute': 'some-id',
+        "aria-label": "some label",
+        form: 'form-id',
+      }}/>`)
+
+    const outputAst = parseJsx(
+      `<DummyComponent primaryAction={<Button onPress={() => console.log("hello world")} size="medium" className={styles.buttonClass}  data-random-attribute='some-id' aria-label="some label" form='form-id' variant="secondary">Learn more</Button>}}
+      />`,
+    )
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+
+  it('transforms shorthand properties as expressions', () => {
+    const inputAst = parseJsx(`<DummyComponent primaryAction={{
+        label,
+        onClick: () => console.log("hello world")
+        size: 'small',
+        classNameOverride: styles.buttonClass,
+        badge: { text: 'New' },
+        'data-random-attribute': 'some-id',
+        "aria-label": "some label",
+        form: 'form-id',
+      }}/>`)
+
+    const outputAst = parseJsx(
+      `<DummyComponent primaryAction={<Button onPress={() => console.log("hello world")} size="medium" className={styles.buttonClass} badge={{ text: 'New' }} data-random-attribute='some-id' aria-label="some label" form='form-id' variant="secondary">{label}</Button>}}
+      />`,
+    )
+
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+  it('transforms expressions correctly as children', () => {
+    const inputAst = parseJsx(`
+      <DummyComponent primaryAction={{
+        label: intl.formatMessage({ id: "label.id", defaultMessage: "Label", { variableVal }),
+        onClick: () => console.log("hello world")
+        href: url,
+        size: buttonSize,
+        classNameOverride: styles.buttonClass,
+        badge: { text: 'New' },
+        'data-random-attribute': 'some-id',
+        form: 'form-id',
+      }}/>`)
+
+    const outputAst = parseJsx(
+      `<DummyComponent primaryAction={<LinkButton onPress={() => console.log("hello world")} href={url} size={buttonSize} className={styles.buttonClass} badge={{ text: 'New' }} data-random-attribute='some-id' form='form-id' variant="secondary">{intl.formatMessage({ id: "label.id", defaultMessage: "Label", { variableVal })}</LinkButton>}}
+      />`,
+    )
+    expect(transformInput(inputAst)).toBe(printAst(outputAst))
+  })
+})

package/codemods/utils/transformV1ButtonPropsToButtonOrLinkButton.ts

@@ -0,0 +1,195 @@
+import ts from 'typescript'
+
+import {
+  createJsxElementWithChildren,
+  createProp,
+  createStringProp,
+  getPropValueText,
+} from '../utils'
+
+/**
+ * A function that transforms button v1 prop values into a Button/next JSX component
+ * @returns
+ * - `ts.JsxAttribute` if the prop should be transformed
+ * - `null` if the prop should be removed
+ * - `undefined` if the prop should be kept as is
+ */
+export const transformButtonProp = (
+  propName: string,
+  propValue: ts.JsxAttributeValue | undefined,
+): ts.JsxAttribute | null | undefined => {
+  const sanitizedPropName = propName.replace(/'/g, '')
+  const sanitizedPropValue =
+    propValue?.kind === ts.SyntaxKind.StringLiteral
+      ? propValue
+      : ts.factory.createJsxExpression(undefined, propValue)
+
+  switch (sanitizedPropName) {
+    case 'onClick':
+      return createProp('onPress', sanitizedPropValue)
+    case 'reversed':
+      return createProp('isReversed', sanitizedPropValue)
+    case 'classNameOverride':
+      return createProp('className', sanitizedPropValue)
+    case 'data-automation-id':
+      return createProp('data-testid', sanitizedPropValue)
+    case 'fullWidth':
+      return createProp('isFullWidth', sanitizedPropValue)
+    case 'working':
+      return createProp('isPending', sanitizedPropValue)
+    case 'workingLabel':
+      return createProp('pendingLabel', sanitizedPropValue)
+    case 'workingLabelHidden':
+      return createProp('hasHiddenPendingLabel', sanitizedPropValue)
+    case 'onMouseDown':
+      return createProp('onPressStart', sanitizedPropValue)
+    case 'disableTabFocusAndIUnderstandTheAccessibilityImplications':
+      return null
+    case 'newTabAndIUnderstandTheAccessibilityImplications':
+      return null
+    case 'disabled':
+      return createProp('isDisabled', sanitizedPropValue)
+    case 'secondaryDismiss':
+      return null
+    case 'icon': {
+      return createProp('icon', sanitizedPropValue)
+    }
+    case 'size': {
+      const oldValue = propValue && (getPropValueText(propValue) as 'small' | 'regular')
+      const buttonSizeMap = {
+        small: 'medium',
+        regular: 'large',
+      }
+
+      return oldValue ? createStringProp('size', buttonSizeMap[oldValue]) : undefined
+    }
+    case 'primary':
+      return createStringProp('variant', 'primary')
+    case 'secondary':
+      return createStringProp('variant', 'tertiary')
+    case 'destructive':
+      return null
+    default:
+      return undefined
+  }
+}
+
+type TransformButtonProp = {
+  import: string
+  component: ts.JsxSelfClosingElement | ts.JsxElement
+}
+
+/** A utility to transform V1 Button props into a Button or LinkButton with the import JSX element */
+export const transformV1ButtonPropsToButtonOrLinkButton = (
+  buttonProps: ts.ObjectLiteralExpression,
+  /** optional override for the variant type if needed, ie: primary or secondary actions*/
+  variantOverride?: string,
+): TransformButtonProp => {
+  let childrenValue: ts.JsxAttributeValue | undefined
+  let hasSizeProp = false
+  let hasVariant = false
+  let hasLinkAttr = false
+
+  const newProps = buttonProps.properties.reduce<ts.JsxAttributeLike[]>((acc, currentProp) => {
+    const propName = currentProp?.name?.getText()
+    const propValue = ts.isPropertyAssignment(currentProp) ? currentProp.initializer : undefined
+
+    if (propName) {
+      if (propName === 'label') {
+        if (ts.isShorthandPropertyAssignment(currentProp)) {
+          childrenValue = ts.factory.createJsxExpression(
+            undefined,
+            ts.factory.createIdentifier(propName),
+          )
+          return acc
+        }
+        if (propValue && propValue?.kind !== ts.SyntaxKind.StringLiteral) {
+          childrenValue = ts.factory.createJsxExpression(undefined, propValue)
+          return acc
+        }
+        childrenValue = propValue as ts.JsxAttributeValue
+        return acc
+      }
+
+      if (propName === 'newTabAndIUnderstandTheAccessibilityImplications') {
+        return [
+          ...acc,
+          createStringProp('target', '_blank'),
+          createStringProp('rel', 'noopener noreferrer'),
+        ]
+      }
+
+      if (propName === 'primary' || propName === 'secondary' || variantOverride) {
+        hasVariant = true
+      }
+
+      if (propName === 'size') {
+        hasSizeProp = true
+      }
+
+      if (propName === 'href') {
+        hasLinkAttr = true
+        if (propValue && propValue?.kind !== ts.SyntaxKind.StringLiteral) {
+          return [...acc, createProp('href', ts.factory.createJsxExpression(undefined, propValue))]
+        }
+        return [...acc, createProp('href', propValue as ts.StringLiteral)]
+      }
+
+      if (propName === 'component') {
+        hasLinkAttr = true
+        return [
+          ...acc,
+          createProp(
+            'component',
+            ts.factory.createJsxExpression(undefined, propValue) as ts.JsxExpression,
+          ),
+        ]
+      }
+
+      const newProp = transformButtonProp(propName, propValue as ts.JsxAttributeValue)
+
+      if (newProp === null) return acc
+
+      if (newProp === undefined) {
+        const sanitizedPropName = propName.replace(/'|"/g, '')
+        const sanitizedPropValue: ts.JsxAttributeValue =
+          propValue?.kind === ts.SyntaxKind.StringLiteral
+            ? (propValue as ts.StringLiteral)
+            : (ts.factory.createJsxExpression(undefined, propValue) as ts.JsxExpression)
+        const otherAttr = ts.factory.createJsxAttribute(
+          ts.factory.createIdentifier(sanitizedPropName),
+          sanitizedPropValue,
+        )
+        acc.push(otherAttr)
+        return acc
+      }
+
+      if (newProp) {
+        return [...acc, newProp]
+      }
+    }
+
+    return acc
+  }, [])
+
+  if (!hasVariant) {
+    newProps.push(createStringProp('variant', 'secondary'))
+  }
+
+  if (variantOverride) {
+    newProps.push(createStringProp('variant', variantOverride))
+  }
+
+  if (!hasSizeProp) {
+    newProps.push(createStringProp('size', 'large'))
+  }
+
+  return {
+    import: hasLinkAttr ? 'LinkButton' : 'Button',
+    component: createJsxElementWithChildren(
+      hasLinkAttr ? 'LinkButton' : 'Button',
+      newProps,
+      childrenValue,
+    ),
+  }
+}

package/dist/cjs/GuidanceBlock/GuidanceBlock.cjs

@@ -3,14 +3,14 @@
 var tslib = require('tslib');
 var React = require('react');
 var classnames = require('classnames');
-var Media = require('react-media');
 var Button = require('../Button/Button/Button.cjs');
 require('../Button/IconButton/IconButton.cjs');
 var Heading = require('../Heading/Heading.cjs');
 var Text = require('../Text/Text.cjs');
 var Tooltip = require('../Tooltip/Tooltip.cjs');
-var Icon = require('../__next__/Icon/Icon.cjs');
+var useMediaQueries = require('../utils/useMediaQueries.cjs');
 var GuidanceBlock_module = require('./GuidanceBlock.module.css.cjs');
+var Icon = require('../__next__/Icon/Icon.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
@@ -18,7 +18,6 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var Media__default = /*#__PURE__*/_interopDefault(Media);
 var WithTooltip = function (_a) {
   var tooltipProps = _a.tooltipProps,
     children = _a.children;
@@ -29,40 +28,32 @@ var WithTooltip = function (_a) {
  * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
  */
 var GuidanceBlock = function (_a) {
-  var _b, _c, _d, _e;
-  var _f = _a.layout,
-    layout = _f === void 0 ? 'default' : _f,
-    _g = _a.variant,
-    variant = _g === void 0 ? 'default' : _g,
-    _h = _a.withActionButtonArrow,
-    withActionButtonArrow = _h === void 0 ? true : _h,
-    _j = _a.noMaxWidth,
-    noMaxWidth = _j === void 0 ? false : _j,
-    _k = _a.illustrationType,
-    illustrationType = _k === void 0 ? 'spot' : _k,
-    _l = _a.smallScreenTextAlignment,
-    smallScreenTextAlignment = _l === void 0 ? 'center' : _l,
+  var _b, _c, _d, _e, _f;
+  var _g = _a.layout,
+    layout = _g === void 0 ? 'default' : _g,
+    _h = _a.variant,
+    variant = _h === void 0 ? 'default' : _h,
+    _j = _a.withActionButtonArrow,
+    withActionButtonArrow = _j === void 0 ? true : _j,
+    _k = _a.noMaxWidth,
+    noMaxWidth = _k === void 0 ? false : _k,
+    _l = _a.illustrationType,
+    illustrationType = _l === void 0 ? 'spot' : _l,
+    _m = _a.smallScreenTextAlignment,
+    smallScreenTextAlignment = _m === void 0 ? 'center' : _m,
     actions = _a.actions,
     illustration = _a.illustration,
     secondaryDismiss = _a.secondaryDismiss,
-    restProps = tslib.__rest(_a, ["layout", "variant", "withActionButtonArrow", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "actions", "illustration", "secondaryDismiss"]);
-  var _m = React.useState(false),
-    hidden = _m[0],
-    setHidden = _m[1];
+    actionsSlot = _a.actionsSlot,
+    restProps = tslib.__rest(_a, ["layout", "variant", "withActionButtonArrow", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "actions", "illustration", "secondaryDismiss", "actionsSlot"]);
   var _o = React.useState(false),
-    removed = _o[0],
-    setRemoved = _o[1];
-  var _p = React.useState(''),
-    mediaQueryLayout = _p[0],
-    setMediaQueryLayout = _p[1];
+    hidden = _o[0],
+    setHidden = _o[1];
+  var _p = React.useState(false),
+    removed = _p[0],
+    setRemoved = _p[1];
+  var queries = useMediaQueries.useMediaQueries().queries;
   var containerRef = React__default.default.createRef();
-  React.useEffect(function () {
-    if (layout === 'inline' || layout === 'stacked') {
-      containerQuery();
-    }
-    // @todo: Fix if possible - avoiding breaking in eslint upgrade
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   var handleDismissBanner = function () {
     var _a;
     setHidden(true);
@@ -74,21 +65,6 @@ var GuidanceBlock = function (_a) {
       setRemoved(true);
     }
   };
-  var containerQuery = function () {
-    var resizeObserver = new ResizeObserver(function (entries) {
-      if (entries.length === 1) {
-        handleMediaQueryLayout(entries[0].contentRect.width);
-      }
-    });
-    resizeObserver.observe(containerRef.current);
-  };
-  var handleMediaQueryLayout = function (width) {
-    if (width <= 320) {
-      setMediaQueryLayout('centerContent');
-    } else {
-      setMediaQueryLayout('');
-    }
-  };
   var marginTop = function () {
     if (hidden && containerRef.current) {
       return -containerRef.current.clientHeight + 'px';
@@ -98,9 +74,8 @@ var GuidanceBlock = function (_a) {
   if (removed) {
     return React__default.default.createElement(React__default.default.Fragment, null);
   }
-  var componentIsMobile = mediaQueryLayout.includes('centerContent');
   return React__default.default.createElement("div", {
-    className: classnames__default.default(GuidanceBlock_module.banner, variant && GuidanceBlock_module[variant], layout && GuidanceBlock_module[layout], hidden && GuidanceBlock_module.hidden, mediaQueryLayout === 'centerContent' && GuidanceBlock_module.centerContent, noMaxWidth && GuidanceBlock_module.noMaxWidth, illustrationType === 'scene' && GuidanceBlock_module.hasSceneIllustration, smallScreenTextAlignment === 'left' && GuidanceBlock_module.smallScreenTextAlignment),
+    className: classnames__default.default(GuidanceBlock_module.banner, variant && GuidanceBlock_module[variant], layout && GuidanceBlock_module[layout], hidden && GuidanceBlock_module.hidden, queries.isSmall && GuidanceBlock_module.centerContent, noMaxWidth && GuidanceBlock_module.noMaxWidth, illustrationType === 'scene' && GuidanceBlock_module.hasSceneIllustration, smallScreenTextAlignment === 'left' && GuidanceBlock_module.smallScreenTextAlignment),
     style: {
       marginTop: marginTop()
     },
@@ -124,41 +99,31 @@ var GuidanceBlock = function (_a) {
   }, (_d = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _d === void 0 ? void 0 : _d.title)), React__default.default.createElement(Text.Text, {
     tag: "p",
     variant: "body"
-  }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description))), (actions === null || actions === void 0 ? void 0 : actions.primary) && React__default.default.createElement(Media__default.default, {
-    query: "(max-width: 767px)"
-  }, function (isMobile) {
-    var _a;
-    return React__default.default.createElement("div", {
-      className: classnames__default.default({
-        noRightMargin: isMobile || componentIsMobile,
-        rightMargin: !(isMobile || componentIsMobile) && layout === 'default'
-      })
-    }, React__default.default.createElement("div", {
-      className: classnames__default.default(GuidanceBlock_module.buttonContainer, (actions === null || actions === void 0 ? void 0 : actions.secondary) && GuidanceBlock_module.secondaryAction)
-    }, React__default.default.createElement(WithTooltip, {
-      tooltipProps: actions.primary.tooltip
-    }, React__default.default.createElement(Button.Button, tslib.__assign({
-      icon: withActionButtonArrow ? React__default.default.createElement(Icon.Icon, {
-        name: "arrow_forward",
-        isPresentational: true,
-        shouldMirrorInRTL: true
-      }) : undefined,
-      iconPosition: "end"
-    }, actions.primary, {
-      fullWidth: isMobile || componentIsMobile
-    }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && React__default.default.createElement(WithTooltip, {
-      tooltipProps: actions.secondary.tooltip
-    }, React__default.default.createElement("div", {
-      className: GuidanceBlock_module.secondaryAction
-    }, React__default.default.createElement(Button.Button, tslib.__assign({
-      secondary: true
-    }, actions.secondary, {
-      onClick: secondaryDismiss ? function () {
-        return handleDismissBanner();
-      } : (_a = actions === null || actions === void 0 ? void 0 : actions.secondary) === null || _a === void 0 ? void 0 : _a.onClick,
-      fullWidth: isMobile || componentIsMobile
-    }))))));
-  })));
+  }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description))), (actions === null || actions === void 0 ? void 0 : actions.primary) || actionsSlot ? React__default.default.createElement("div", {
+    className: GuidanceBlock_module.buttonContainer
+  }, (actions === null || actions === void 0 ? void 0 : actions.primary) && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(WithTooltip, {
+    tooltipProps: actions.primary.tooltip
+  }, React__default.default.createElement(Button.Button, tslib.__assign({
+    icon: withActionButtonArrow ? React__default.default.createElement(Icon.Icon, {
+      name: "arrow_forward",
+      isPresentational: true,
+      shouldMirrorInRTL: true
+    }) : undefined,
+    iconPosition: "end"
+  }, actions.primary, {
+    fullWidth: queries.isSmall
+  }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && React__default.default.createElement(WithTooltip, {
+    tooltipProps: actions.secondary.tooltip
+  }, React__default.default.createElement("div", {
+    className: GuidanceBlock_module.secondaryAction
+  }, React__default.default.createElement(Button.Button, tslib.__assign({
+    secondary: true
+  }, actions.secondary, {
+    onClick: secondaryDismiss ? function () {
+      return handleDismissBanner();
+    } : (_f = actions === null || actions === void 0 ? void 0 : actions.secondary) === null || _f === void 0 ? void 0 : _f.onClick,
+    fullWidth: queries.isSmall
+  }))))), !actions && actionsSlot && actionsSlot) : null));
 };
 GuidanceBlock.displayName = 'GuidanceBlock';
 exports.GuidanceBlock = GuidanceBlock;

package/dist/cjs/GuidanceBlock/GuidanceBlock.module.css.cjs

@@ -1,8 +1,6 @@
 'use strict';
 
 var styles = {
-  "rightMargin": "GuidanceBlock-module_rightMargin__T6JO2",
-  "noRightMargin": "GuidanceBlock-module_noRightMargin__MczwN",
   "banner": "GuidanceBlock-module_banner__7FT39",
   "noMaxWidth": "GuidanceBlock-module_noMaxWidth__UCCUk",
   "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__tK4Xr",