core: add carbon ads

.storybook/carbon-ads/CarbonAds.css

@@ -0,0 +1,97 @@
+.CarbonVertical,
+.CarbonVertical #cabonads,
+.CarbonVertical #carbonads-placeholder {
+  max-width: 150px;
+}
+
+.CarbonVertical .carbon-wrap,
+.CarbonVertical .placeholder-wrap {
+  flex-direction: column;
+}
+.CarbonVertical .carbon-text {
+  margin-top: 10px;
+  margin-bottom: 24px;
+  text-align: left;
+}
+.CarbonVertical .carbon-poweredby {
+  left: 10px;
+  bottom: 10px;
+}
+
+#root-carbon {
+  min-height: 120px;
+}
+
+#carbonads,
+#carbonads-placeholder {
+  max-width: 300px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial,
+    sans-serif;
+  line-height: 1.5;
+}
+
+#carbonads {
+  position: relative;
+  z-index: 2;
+}
+
+#carbonads-placeholder {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 300px;
+}
+
+#carbonads > span,
+#carbonads-placeholder {
+  display: block;
+  padding: 10px;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.05);
+}
+
+.carbon-wrap {
+  display: flex;
+}
+
+.carbon-img {
+  margin-right: 10px;
+  line-height: 0;
+}
+.carbon-img > img {
+  border-radius: 3px;
+}
+
+.carbon-text {
+  color: #637381;
+  text-decoration: none;
+  font-size: 12px;
+}
+
+.carbon-poweredby {
+  position: absolute;
+  bottom: 10px;
+  left: 152px;
+  color: #c5cdd0;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 500;
+  font-size: 8px;
+  line-height: 1;
+}
+
+.placeholder-wrap {
+  display: flex;
+}
+.placeholder-img {
+  margin-right: 10px;
+}
+.placeholder-text {
+  flex-grow: 1;
+  text-align: left;
+  font-size: 12px;
+}

.storybook/carbon-ads/CarbonAds.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import cx from 'clsx';
+import Box, { BoxProps } from '@mui/material/Box';
+import Skeleton from '@mui/material/Skeleton';
+import useCarbonAds from './useCarbonAds';
+import './CarbonAds.css';
+
+const CarbonAds = ({ vertical, ...props }: BoxProps & { vertical?: boolean}) => {
+  const { id, error } = useCarbonAds();
+  if (error) return null;
+  return createPortal(
+    <Box
+      className={cx(vertical && 'CarbonVertical')}
+      sx={{ position: 'fixed', minWidth: vertical ? 'initial' : 300, zIndex: 1300, top: '3.5rem', right: '1rem' }}
+      {...props}
+    >
+      <div id={id}>
+        <div id={'carbonads-placeholder'}>
+          <div className={'placeholder-wrap'}>
+            <div className={'placeholder-img'}>
+              <Skeleton
+                animation={'pulse'}
+                variant="rectangular"
+                width={130}
+                height={100}
+              />
+            </div>
+            <div className={'placeholder-text'}>
+              <Skeleton animation={'pulse'} />
+              <Skeleton animation={'pulse'} width={'72%'} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Box>,
+    document.body
+  );
+};
+
+export default CarbonAds;

.storybook/carbon-ads/useCarbonAds.ts

@@ -0,0 +1,57 @@
+import { useState, useEffect } from 'react';
+
+function useScript() {
+  // Keeping track of script loaded and error state
+  const id = 'root-carbon';
+  const [state, setState] = useState({
+    loaded: false,
+    error: false,
+  });
+
+  useEffect(
+    () => {
+      // Create script
+      let script = document.createElement('script');
+      script.src =
+        '//cdn.carbonads.com/carbon.js?serve=CE7DL5QE&placement=mui-treasurycom';
+      script.id = '_carbonads_js';
+      script.type = 'text/javascript';
+      script.async = true;
+
+      // Script event listener callbacks for load and error
+      const onScriptLoad = () => {
+        setState({
+          loaded: true,
+          error: false,
+        });
+      };
+
+      const onScriptError = () => {
+        // Remove from cachedScripts we can try loading again
+        script.remove();
+
+        setState({
+          loaded: true,
+          error: true,
+        });
+      };
+
+      script.addEventListener('load', onScriptLoad);
+      script.addEventListener('error', onScriptError);
+
+      // Add script to document body
+      document.getElementById(id)?.appendChild(script);
+
+      // Remove event listeners on cleanup
+      return () => {
+        script.removeEventListener('load', onScriptLoad);
+        script.removeEventListener('error', onScriptError);
+      };
+    },
+    [] // Only re-run effect if script src changes
+  );
+
+  return { ...state, id: 'root-carbon' };
+}
+
+export default useScript;

.storybook/manager.tsx

@@ -7,6 +7,7 @@ import {
   STORY_MISSING,
 } from "@storybook/core-events";
 import { Tool } from "./decorators/Author";
+import CarbonAds from './carbon-ads/CarbonAds';
 
 // https://storybook.js.org/docs/react/configure/features-and-behavior
 addons.setConfig({
@@ -51,3 +52,11 @@ addons.register("contributor", () => {
     render: Tool as unknown as () => React.ReactElement,
   });
 });
+
+addons.register("carbon-ads", () => {
+  addons.add("carbon-ads/toolbar", {
+    title: "Carbon Ads",
+    type: types.TOOL,
+    render: CarbonAds as unknown as () => React.ReactElement,
+  });
+});