feat: introduce DefaultAlertButton with variant from config

Author: adamstankiewicz

env.config.js

@@ -3,6 +3,9 @@
 // Also note that in an actual application this file would be added to .gitignore.
 const config = {
   JS_FILE_VAR: 'JS_FILE_VAR_VALUE_FOR_EXAMPLE_APP',
+  styleOverrides: {
+    alertButtonVariant: 'brand',
+  },
 };
 
 export default config;

example/ExamplePage.jsx

@@ -1,10 +1,11 @@
 import { useContext, useEffect } from 'react';
 import { Link } from 'react-router-dom';
+import { Alert } from '@openedx/paragon';
 
 /* eslint-disable import/no-extraneous-dependencies */
 import { injectIntl, useIntl } from '@edx/frontend-platform/i18n';
 import { logInfo } from '@edx/frontend-platform/logging';
-import { AppContext } from '@edx/frontend-platform/react';
+import { AppContext, DefaultAlertButton } from '@edx/frontend-platform/react';
 import { ensureConfig, mergeConfig, getConfig } from '@edx/frontend-platform';
 /* eslint-enable import/no-extraneous-dependencies */
 import messages from './messages';
@@ -51,6 +52,16 @@ function ExamplePage() {
       <p>JS_FILE_VAR var came through: <strong>{getConfig().JS_FILE_VAR}</strong></p>
       <p>Visit <Link to="/authenticated">authenticated page</Link>.</p>
       <p>Visit <Link to="/error_example">error page</Link>.</p>
+      <div>
+        <Alert
+          variant="error"
+          actions={[
+            <DefaultAlertButton>Hello</DefaultAlertButton>,
+          ]}
+        >
+          Lorem ispum dolar sit amet.
+        </Alert>
+      </div>
     </div>
   );
 }

src/react/index.js

@@ -6,11 +6,12 @@
  * @module React
  */
 
+export { useAppEvent } from './hooks';
 export { default as AppContext } from './AppContext';
 export { default as AppProvider } from './AppProvider';
 export { default as AuthenticatedPageRoute } from './AuthenticatedPageRoute';
 export { default as ErrorBoundary } from './ErrorBoundary';
 export { default as ErrorPage } from './ErrorPage';
 export { default as LoginRedirect } from './LoginRedirect';
 export { default as PageWrap } from './PageWrap';
-export { useAppEvent } from './hooks';
+export { default as DefaultAlertButton } from './paragon/DefaultAlertButton';

src/react/paragon/DefaultAlertButton.jsx

@@ -0,0 +1,47 @@
+import { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@openedx/paragon';
+import { getConfig } from '../../config';
+
+function useAlertButtonVariant(props) {
+  if (props.variant) {
+    // If a variant is explicitly set in the props, use that.
+    return props.variant;
+  }
+  // Otherwise, check for a configured style override for the alert button variant.
+  const { styleOverrides } = getConfig();
+  if (styleOverrides?.alertButtonVariant) {
+    return styleOverrides.alertButtonVariant;
+  }
+
+  // If no variant is set in props and no style override is configured, use Paragon's default variant.
+  return undefined;
+}
+
+/**
+ * A default alert button component that utilizes a button variant override, if configured. Otherwise,
+ * it defaults to the ``primary`` button variant. By creating this wrapper component, consuming projects
+ * can more readily import and use a consistent alert button style across their application without having
+ * to re-integrate the button variant logic across every usage.
+ * @memberof module:React
+ * @param {Object} props
+ */
+const DefaultAlertButton = forwardRef(({ children, ...props }, ref) => {
+  const alertButtonVariant = useAlertButtonVariant(props);
+  return (
+    <Button
+      variant={alertButtonVariant}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+});
+DefaultAlertButton.displayName = 'DefaultAlertButton';
+
+DefaultAlertButton.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default DefaultAlertButton;

src/react/paragon/index.ts

@@ -0,0 +1 @@
+export { default as DefaultAlertButton } from './DefaultAlertButton';