@codecademy/brand 4.0.0-alpha.fdfb3ba880.0 → 4.0.0

package/dist/SocialMediaSharingDropdown/index.js

@@ -1,96 +1,111 @@
-import { DropdownButton } from "../DropdownButton/index.js";
-import { SOCIAL_SHARING_PLATFORMS, createShareLink } from "../SocialMediaSharing/index.js";
-import { Alert, FlexBox, Text } from "@codecademy/gamut";
-import { useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { LinkIcon, ShareIcon } from "@codecademy/gamut-icons";
-
-//#region src/SocialMediaSharingDropdown/index.tsx
-const clipboardAlertMessage = "Link has been copied to clipboard.";
-const onClickWrapper = (e, id, href, action) => {
-	e.preventDefault();
-	action?.(e, `${id}_share`);
-	const popupSize = 570;
-	const left = (window.screen.width - popupSize) / 2;
-	const features = `menubar=no,toolbar=no,status=no,width=${popupSize},height=${popupSize},top=${(window.screen.height - popupSize) / 2},left=${left}`;
-	window.open(href, "_blank", features)?.focus();
+/*
+ * NOTE: This is a local new variant of the SocialMediaSharing gamut component that should be ported to Gamut.
+ * */
+import { Alert, FlexBox, Text } from '@codecademy/gamut';
+import { LinkIcon, ShareIcon } from '@codecademy/gamut-icons';
+import { useRef, useState } from 'react';
+import { DropdownButton } from '../DropdownButton';
+import { createShareLink, SOCIAL_SHARING_PLATFORMS } from '../SocialMediaSharing';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const clipboardAlertMessage = 'Link has been copied to clipboard.';
+export const onClickWrapper = (e, id, href, action) => {
+  e.preventDefault();
+  action?.(e, `${id}_share`);
+  const popupSize = 570;
+  const left = (window.screen.width - popupSize) / 2;
+  const top = (window.screen.height - popupSize) / 2;
+  const features = `menubar=no,toolbar=no,status=no,width=${popupSize},height=${popupSize},top=${top},left=${left}`;
+  window.open(href, '_blank', features)?.focus();
 };
-const SocialMediaSharingDropdown = ({ url, message, hashtags, mention, action, defaultPosition = "below", addAlert }) => {
-	const [showClipboardAlert, setShowClipboardAlert] = useState(false);
-	const dropdownRef = useRef(null);
-	const focusDropdown = () => dropdownRef.current?.focus({ preventScroll: true });
-	const copyUrlToClipboard = async (e) => {
-		action?.(e, `link_share`);
-		await navigator.clipboard.writeText(url);
-		if (addAlert) addAlert({
-			message: clipboardAlertMessage,
-			onClose: focusDropdown
-		});
-		else setShowClipboardAlert(true);
-	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(DropdownButton, {
-		ref: dropdownRef,
-		"data-testid": "social-share-dropdown",
-		isMenu: true,
-		buttonType: "text",
-		defaultPosition,
-		px: 0,
-		dropdownItems: [
-			...SOCIAL_SHARING_PLATFORMS.map(({ id, formatShare, baseUrl, displayName }) => ({
-				id,
-				text: displayName,
-				clickHandler: (e) => {
-					onClickWrapper(e, id, createShareLink(formatShare, baseUrl, {
-						url,
-						message,
-						hashtags,
-						mention
-					}), action);
-				}
-			})),
-			"separator",
-			{
-				id: "copy-link",
-				icon: LinkIcon,
-				text: "Copy link",
-				ariaLabel: "Copy link",
-				clickHandler: (e) => copyUrlToClipboard(e)
-			}
-		],
-		children: [/* @__PURE__ */ jsx(ShareIcon, {
-			mr: 4,
-			size: 22
-		}), "Share"]
-	}), showClipboardAlert && /* @__PURE__ */ jsx(FlexBox, {
-		minWidth: "min-content",
-		width: {
-			_: "80%",
-			sm: "60%"
-		},
-		position: "fixed",
-		top: "6rem",
-		left: {
-			_: "10%",
-			sm: "20%"
-		},
-		zIndex: 999,
-		"data-testid": "social-share-copy-to-clipboard-alert",
-		justifyContent: "center",
-		children: /* @__PURE__ */ jsx(Alert, {
-			onClose: () => {
-				setShowClipboardAlert(false);
-				focusDropdown();
-			},
-			type: "success",
-			placement: "inline",
-			children: /* @__PURE__ */ jsx(Text, {
-				whiteSpace: "break-spaces",
-				display: "inline",
-				children: clipboardAlertMessage
-			})
-		})
-	})] });
-};
-
-//#endregion
-export { SocialMediaSharingDropdown, onClickWrapper };
+export const SocialMediaSharingDropdown = ({
+  url,
+  message,
+  hashtags,
+  mention,
+  action,
+  defaultPosition = 'below',
+  addAlert
+}) => {
+  const [showClipboardAlert, setShowClipboardAlert] = useState(false);
+  const dropdownRef = useRef(null);
+  const focusDropdown = () => dropdownRef.current?.focus({
+    preventScroll: true
+  });
+  const copyUrlToClipboard = async e => {
+    action?.(e, `link_share`);
+    await navigator.clipboard.writeText(url);
+    if (addAlert) {
+      addAlert({
+        message: clipboardAlertMessage,
+        onClose: focusDropdown
+      });
+    } else {
+      setShowClipboardAlert(true);
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(DropdownButton, {
+      ref: dropdownRef,
+      "data-testid": "social-share-dropdown",
+      isMenu: true,
+      buttonType: "text",
+      defaultPosition: defaultPosition,
+      px: 0,
+      dropdownItems: [...SOCIAL_SHARING_PLATFORMS.map(({
+        id,
+        formatShare,
+        baseUrl,
+        displayName
+      }) => ({
+        id,
+        text: displayName,
+        clickHandler: e => {
+          onClickWrapper(e, id, createShareLink(formatShare, baseUrl, {
+            url,
+            message,
+            hashtags,
+            mention
+          }), action);
+        }
+      })), 'separator', {
+        id: 'copy-link',
+        icon: LinkIcon,
+        text: 'Copy link',
+        ariaLabel: 'Copy link',
+        clickHandler: e => copyUrlToClipboard(e)
+      }],
+      children: [/*#__PURE__*/_jsx(ShareIcon, {
+        mr: 4,
+        size: 22
+      }), "Share"]
+    }), showClipboardAlert && /*#__PURE__*/_jsx(FlexBox, {
+      minWidth: "min-content",
+      width: {
+        _: '80%',
+        sm: '60%'
+      },
+      position: "fixed",
+      top: "6rem",
+      left: {
+        _: '10%',
+        sm: '20%'
+      },
+      zIndex: 999,
+      "data-testid": "social-share-copy-to-clipboard-alert",
+      justifyContent: "center",
+      children: /*#__PURE__*/_jsx(Alert, {
+        onClose: () => {
+          setShowClipboardAlert(false);
+          focusDropdown();
+        },
+        type: "success",
+        placement: "inline",
+        children: /*#__PURE__*/_jsx(Text, {
+          whiteSpace: "break-spaces",
+          display: "inline",
+          children: clipboardAlertMessage
+        })
+      })
+    })]
+  });
+};

package/dist/Testimonial/index.d.ts

@@ -1,53 +1,45 @@
-import * as _codecademy_gamut0 from "@codecademy/gamut";
-import * as _emotion_styled0 from "@emotion/styled";
-import * as react0 from "react";
-import { ComponentProps } from "react";
-import * as _emotion_react0 from "@emotion/react";
-import * as _codecademy_variance_dist_types_config0 from "@codecademy/variance/dist/types/config";
-import * as _codecademy_gamut_dist_Card_types0 from "@codecademy/gamut/dist/Card/types";
-
-//#region src/Testimonial/index.d.ts
-declare const TestimonialCard: _emotion_styled0.StyledComponent<_codecademy_gamut_dist_Card_types0.CardProps & {
-  theme?: _emotion_react0.Theme;
+import { ComponentProps } from 'react';
+import * as React from 'react';
+declare const TestimonialCard: import("@emotion/styled").StyledComponent<import("@codecademy/gamut/dist/Card/types").CardProps & {
+    theme?: import("@emotion/react").Theme;
 } & {
-  mode?: "light" | "dark" | undefined;
+    mode?: "light" | "dark" | undefined;
 }, {}, {}>;
-declare const TestimonialContent: _emotion_styled0.StyledComponent<{
-  theme?: _emotion_react0.Theme | undefined;
-  as?: react0.ElementType<any, keyof react0.JSX.IntrinsicElements> | undefined;
-} & _codecademy_gamut0.BoxProps & Pick<react0.DetailedHTMLProps<react0.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "property" | "rel" | "rev" | "id" | "nonce" | "content" | "translate" | "children" | "className" | "prefix" | "role" | "suppressHydrationWarning" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | keyof react0.ClassAttributes<HTMLDivElement>> & {
-  theme?: _emotion_react0.Theme;
-} & _codecademy_variance_dist_types_config0.VariantProps<"orientation", false | "horizontal" | "vertical">, {}, {}>;
-type TestimonialProps = ComponentProps<typeof TestimonialCard> & Pick<ComponentProps<typeof TestimonialContent>, 'orientation'> & {
-  firstName: string;
-  lastName?: string;
-  quote: string;
-  /**
-   * City location
-   */
-  location?: string;
-  /**
-   * associated occupation of the person.
-   */
-  occupation?: string | null;
-  /**
-   * Associated workplace or institution
-   */
-  company?: string | null;
-  /**
-   * Portrait image src
-   */
-  imageUrl?: string | null;
-  /**
-   * setting this href will wrap the testimonial card with an anchor tag.
-   */
-  href?: string | null;
-  /**
-   * used to conditonally hide the portrait photo
-   */
-  hidePhoto?: boolean;
-  onClick?: () => void;
+declare const TestimonialContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@codecademy/gamut").BoxProps & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "content" | "translate" | "property" | "hidden" | "slot" | "style" | "title" | "suppressHydrationWarning" | "className" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | keyof React.ClassAttributes<HTMLDivElement>> & {
+    theme?: import("@emotion/react").Theme;
+} & import("@codecademy/variance/dist/types/config").VariantProps<"orientation", false | "horizontal" | "vertical">, {}, {}>;
+export type TestimonialProps = ComponentProps<typeof TestimonialCard> & Pick<ComponentProps<typeof TestimonialContent>, 'orientation'> & {
+    firstName: string;
+    lastName?: string;
+    quote: string;
+    /**
+     * City location
+     */
+    location?: string;
+    /**
+     * associated occupation of the person.
+     */
+    occupation?: string | null;
+    /**
+     * Associated workplace or institution
+     */
+    company?: string | null;
+    /**
+     * Portrait image src
+     */
+    imageUrl?: string | null;
+    /**
+     * setting this href will wrap the testimonial card with an anchor tag.
+     */
+    href?: string | null;
+    /**
+     * used to conditonally hide the portrait photo
+     */
+    hidePhoto?: boolean;
+    onClick?: () => void;
 };
-declare const Testimonial: react0.FC<TestimonialProps>;
-//#endregion
-export { Testimonial, TestimonialProps };
+export declare const Testimonial: React.FC<TestimonialProps>;
+export {};