@codecademy/brand 4.0.0 → 5.0.0-alpha.19accb830.0

package/dist/SocialMediaSharing/index.d.ts

@@ -1,49 +1,65 @@
-import * as React from 'react';
-import type { BaseSocialShareProps } from './SocialShareIconLink';
-export type SocialMediaShare = {
-    url: string;
-    message?: string;
-    hashtags?: string[];
-    mention?: string;
+import { BaseSocialShareProps } from "./SocialShareIconLink.js";
+import * as React$1 from "react";
+import * as _codecademy_gamut_icons0 from "@codecademy/gamut-icons";
+
+//#region src/SocialMediaSharing/index.d.ts
+type SocialMediaShare = {
+  url: string;
+  message?: string;
+  hashtags?: string[];
+  mention?: string;
 };
-export declare const createShareLink: (formatter: (payload: SocialMediaShare) => Record<string, string>, baseUri: string, payload: SocialMediaShare) => string;
-export declare const SOCIAL_SHARING_PLATFORMS: ({
-    id: string;
-    displayName: string;
-    icon: React.ForwardRefExoticComponent<import("@codecademy/gamut-icons").GamutIconProps & React.RefAttributes<SVGSVGElement>>;
-    baseUrl: string;
-    formatShare: ({ url, message }: SocialMediaShare) => {
-        hashtag: string;
-        quote?: string | undefined;
-        href?: string | undefined;
-    };
+declare const createShareLink: (formatter: (payload: SocialMediaShare) => Record<string, string>, baseUri: string, payload: SocialMediaShare) => string;
+declare const SOCIAL_SHARING_PLATFORMS: ({
+  id: string;
+  displayName: string;
+  icon: React$1.ForwardRefExoticComponent<_codecademy_gamut_icons0.GamutIconProps & React$1.RefAttributes<SVGSVGElement>>;
+  baseUrl: string;
+  formatShare: ({
+    url,
+    message
+  }: SocialMediaShare) => {
+    hashtag: string;
+    quote?: string | undefined;
+    href?: string | undefined;
+  };
 } | {
-    id: string;
-    displayName: string;
-    icon: React.ForwardRefExoticComponent<import("@codecademy/gamut-icons").GamutIconProps & React.RefAttributes<SVGSVGElement>>;
-    baseUrl: string;
-    formatShare: ({ url, message, hashtags, mention }: SocialMediaShare) => {
-        via?: string | undefined;
-        hashtags?: string | undefined;
-        text?: string | undefined;
-        url?: string | undefined;
-    };
+  id: string;
+  displayName: string;
+  icon: React$1.ForwardRefExoticComponent<_codecademy_gamut_icons0.GamutIconProps & React$1.RefAttributes<SVGSVGElement>>;
+  baseUrl: string;
+  formatShare: ({
+    url,
+    message,
+    hashtags,
+    mention
+  }: SocialMediaShare) => {
+    via?: string | undefined;
+    hashtags?: string | undefined;
+    text?: string | undefined;
+    url?: string | undefined;
+  };
 } | {
-    id: string;
-    displayName: string;
-    icon: React.ForwardRefExoticComponent<import("@codecademy/gamut-icons").GamutIconProps & React.RefAttributes<SVGSVGElement>>;
-    baseUrl: string;
-    formatShare: ({ url }: SocialMediaShare) => {
-        url: string;
-    };
-})[];
-export type SocialMediaSharingProps = BaseSocialShareProps & {
+  id: string;
+  displayName: string;
+  icon: React$1.ForwardRefExoticComponent<_codecademy_gamut_icons0.GamutIconProps & React$1.RefAttributes<SVGSVGElement>>;
+  baseUrl: string;
+  formatShare: ({
+    url
+  }: SocialMediaShare) => {
     url: string;
-    message?: string;
-    hashtags?: string[];
-    mention?: string;
-    action?: (e: React.MouseEvent, target: string) => void;
-    label?: string;
-    iconStyles?: string;
+  };
+})[];
+type SocialMediaSharingProps = BaseSocialShareProps & {
+  url: string;
+  message?: string;
+  hashtags?: string[];
+  mention?: string;
+  action?: (e: React$1.MouseEvent, target: string) => void;
+  label?: string;
+  iconStyles?: string;
 };
-export declare const SocialMediaSharing: React.FC<SocialMediaSharingProps>;
+declare const SocialMediaSharing: React$1.FC<SocialMediaSharingProps>;
+//#endregion
+export { SOCIAL_SHARING_PLATFORMS, SocialMediaShare, SocialMediaSharing, SocialMediaSharingProps, createShareLink };
+//# sourceMappingURL=index.d.ts.map

package/dist/SocialMediaSharing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/SocialMediaSharing/index.tsx"],"mappings":";;;;;KAWY,gBAAA;EACV,GAAA;EACA,OAAA;EACA,QAAA;EACA,OAAA;AAAA;AAAA,cAGW,eAAA,GACX,SAAA,GAAY,OAAA,EAAS,gBAAA,KAAqB,MAAA,kBAC1C,OAAA,UACA,OAAA,EAAS,gBAAA;AAAA,cAeE,wBAAA;;;0CA+BZ,wBAAA,CAAA,cAAA;;;;;KAzBmC,gBAAA;;;;;;;;0CAAgB,wBAAA,CAAA,cAAA;;;;;;;KAWG,gBAAA;;;;;;;;;0CAAgB,wBAAA,CAAA,cAAA;;;;KAY5C,gBAAA;;;;KAIf,uBAAA,GAA0B,oBAAA;EACpC,GAAA;EACA,OAAA;EACA,QAAA;EACA,OAAA;EACA,MAAA,IAAU,CAAA,EAAG,OAAA,CAAM,UAAA,EAAY,MAAA;EAC/B,KAAA;EACA,UAAA;AAAA;AAAA,cAGW,kBAAA,EAAoB,OAAA,CAAM,EAAA,CAAG,uBAAA"}

package/dist/SocialMediaSharing/index.js

@@ -1,116 +1,80 @@
-import { Box, GridBox, Text } from '@codecademy/gamut';
-import { FacebookIcon, LinkedinIcon, TwitterIcon } from '@codecademy/gamut-icons';
-import * as React from 'react';
-import { SocialShareIconLink } from './SocialShareIconLink';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const createShareLink = (formatter, baseUri, payload) => {
-  const params = formatter(payload);
-  const url = new URL(baseUri);
-  Object.keys(params).forEach(key => {
-    url.searchParams.append(key, params[key]);
-  });
-  return url.toString();
+import { SocialShareIconLink } from "./SocialShareIconLink.js";
+import { Box, GridBox, Text } from "@codecademy/gamut";
+import * as React$1 from "react";
+import { FacebookIcon, LinkedinIcon, TwitterIcon } from "@codecademy/gamut-icons";
+
+//#region src/SocialMediaSharing/index.tsx
+const createShareLink = (formatter, baseUri, payload) => {
+	const params = formatter(payload);
+	const url = new URL(baseUri);
+	Object.keys(params).forEach((key) => {
+		url.searchParams.append(key, params[key]);
+	});
+	return url.toString();
+};
+const SOCIAL_SHARING_PLATFORMS = [
+	{
+		id: "facebook",
+		displayName: "Facebook",
+		icon: FacebookIcon,
+		baseUrl: "https://www.facebook.com/dialog/share?app_id=212500508799908",
+		formatShare: ({ url, message }) => ({
+			...url && { href: url },
+			...message && { quote: message },
+			hashtag: "#codecademy"
+		})
+	},
+	{
+		id: "twitter",
+		displayName: "Twitter",
+		icon: TwitterIcon,
+		baseUrl: "https://twitter.com/intent/tweet?",
+		formatShare: ({ url, message, hashtags, mention }) => ({
+			...url && { url },
+			...message && { text: message },
+			...hashtags && { hashtags: hashtags.join(",") },
+			...mention && { via: mention }
+		})
+	},
+	{
+		id: "linkedin",
+		displayName: "LinkedIn",
+		icon: LinkedinIcon,
+		baseUrl: "https://www.linkedin.com/shareArticle",
+		formatShare: ({ url }) => ({ url })
+	}
+];
+const SocialMediaSharing = ({ url, message, hashtags, mention, action, label, sectionId, size = "normal", iconStyles }) => {
+	return /* @__PURE__ */ React$1.createElement(Box, {
+		display: "inline-flex",
+		flexDirection: "column",
+		alignItems: "center"
+	}, label && /* @__PURE__ */ React$1.createElement(Text, {
+		fontSize: size === "small" ? 14 : 16,
+		textColor: "text",
+		mb: 16,
+		"data-testid": "social-sharing-label"
+	}, label), /* @__PURE__ */ React$1.createElement(GridBox, {
+		gridAutoColumns: "max-content",
+		gridAutoFlow: "column",
+		gap: 16,
+		className: iconStyles
+	}, SOCIAL_SHARING_PLATFORMS.map(({ id, icon, formatShare, baseUrl }) => /* @__PURE__ */ React$1.createElement(SocialShareIconLink, {
+		key: id,
+		id,
+		sectionId,
+		href: createShareLink(formatShare, baseUrl, {
+			url,
+			message,
+			hashtags,
+			mention
+		}),
+		icon,
+		size,
+		onClick: (e) => action?.(e, `${id}_share`)
+	}))));
 };
 
-// https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview
-// https://developers.facebook.com/docs/sharing/reference/share-dialog
-// https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/share-on-linkedin?context=linkedin/consumer/context#create-an-article-or-url-share
-export const SOCIAL_SHARING_PLATFORMS = [{
-  id: 'facebook',
-  displayName: 'Facebook',
-  icon: FacebookIcon,
-  baseUrl: 'https://www.facebook.com/dialog/share?app_id=212500508799908',
-  formatShare: ({
-    url,
-    message
-  }) => ({
-    ...(url && {
-      href: url
-    }),
-    ...(message && {
-      quote: message
-    }),
-    hashtag: '#codecademy'
-  })
-}, {
-  id: 'twitter',
-  displayName: 'Twitter',
-  icon: TwitterIcon,
-  baseUrl: 'https://twitter.com/intent/tweet?',
-  formatShare: ({
-    url,
-    message,
-    hashtags,
-    mention
-  }) => ({
-    ...(url && {
-      url
-    }),
-    ...(message && {
-      text: message
-    }),
-    ...(hashtags && {
-      hashtags: hashtags.join(',')
-    }),
-    ...(mention && {
-      via: mention
-    })
-  })
-}, {
-  id: 'linkedin',
-  displayName: 'LinkedIn',
-  icon: LinkedinIcon,
-  baseUrl: 'https://www.linkedin.com/shareArticle',
-  formatShare: ({
-    url
-  }) => ({
-    url
-  })
-}];
-export const SocialMediaSharing = ({
-  url,
-  message,
-  hashtags,
-  mention,
-  action,
-  label,
-  sectionId,
-  size = 'normal',
-  iconStyles
-}) => {
-  return /*#__PURE__*/_jsxs(Box, {
-    display: "inline-flex",
-    flexDirection: "column",
-    alignItems: "center",
-    children: [label && /*#__PURE__*/_jsx(Text, {
-      fontSize: size === 'small' ? 14 : 16,
-      textColor: "text",
-      mb: 16,
-      "data-testid": "social-sharing-label",
-      children: label
-    }), /*#__PURE__*/_jsx(GridBox, {
-      gridAutoColumns: "max-content",
-      gridAutoFlow: "column",
-      gap: 16,
-      className: iconStyles,
-      children: SOCIAL_SHARING_PLATFORMS.map(({
-        id,
-        icon,
-        formatShare,
-        baseUrl
-      }) => /*#__PURE__*/_jsx(SocialShareIconLink, {
-        id: id,
-        sectionId: sectionId,
-        href: createShareLink(formatShare, baseUrl, {
-          url,
-          message,
-          hashtags,
-          mention
-        }),
-        icon: icon,
-        size: size,
-        onClick: e => action?.(e, `${id}_share`)
-      }, id))
-    })]
-  });
-};
+//#endregion
+export { SOCIAL_SHARING_PLATFORMS, SocialMediaSharing, createShareLink };
+//# sourceMappingURL=index.js.map

package/dist/SocialMediaSharing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Box","GridBox","Text","FacebookIcon","LinkedinIcon","TwitterIcon","React","SocialShareIconLink","createShareLink","formatter","baseUri","payload","params","url","URL","Object","keys","forEach","key","searchParams","append","toString","SOCIAL_SHARING_PLATFORMS","id","displayName","icon","baseUrl","formatShare","message","href","quote","hashtag","hashtags","mention","text","join","via","SocialMediaSharing","action","label","sectionId","size","iconStyles","display","flexDirection","alignItems","fontSize","textColor","mb","data-testid","gridAutoColumns","gridAutoFlow","gap","className","map","onClick","e"],"sources":["../../src/SocialMediaSharing/index.tsx"],"sourcesContent":["import { Box, GridBox, Text } from '@codecademy/gamut';\nimport {\n  FacebookIcon,\n  LinkedinIcon,\n  TwitterIcon,\n} from '@codecademy/gamut-icons';\nimport * as React from 'react';\n\nimport type { BaseSocialShareProps } from './SocialShareIconLink';\nimport { SocialShareIconLink } from './SocialShareIconLink';\n\nexport type SocialMediaShare = {\n  url: string;\n  message?: string;\n  hashtags?: string[];\n  mention?: string;\n};\n\nexport const createShareLink = (\n  formatter: (payload: SocialMediaShare) => Record<string, string>,\n  baseUri: string,\n  payload: SocialMediaShare\n) => {\n  const params = formatter(payload);\n  const url = new URL(baseUri);\n\n  Object.keys(params).forEach((key) => {\n    url.searchParams.append(key, params[key]);\n  });\n\n  return url.toString();\n};\n\n// https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview\n// https://developers.facebook.com/docs/sharing/reference/share-dialog\n// https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/share-on-linkedin?context=linkedin/consumer/context#create-an-article-or-url-share\nexport const SOCIAL_SHARING_PLATFORMS = [\n  {\n    id: 'facebook',\n    displayName: 'Facebook',\n    icon: FacebookIcon,\n    baseUrl: 'https://www.facebook.com/dialog/share?app_id=212500508799908',\n    formatShare: ({ url, message }: SocialMediaShare) => ({\n      ...(url && { href: url }),\n      ...(message && { quote: message }),\n      hashtag: '#codecademy',\n    }),\n  },\n  {\n    id: 'twitter',\n    displayName: 'Twitter',\n    icon: TwitterIcon,\n    baseUrl: 'https://twitter.com/intent/tweet?',\n    formatShare: ({ url, message, hashtags, mention }: SocialMediaShare) => ({\n      ...(url && { url }),\n      ...(message && { text: message }),\n      ...(hashtags && { hashtags: hashtags.join(',') }),\n      ...(mention && { via: mention }),\n    }),\n  },\n  {\n    id: 'linkedin',\n    displayName: 'LinkedIn',\n    icon: LinkedinIcon,\n    baseUrl: 'https://www.linkedin.com/shareArticle',\n    formatShare: ({ url }: SocialMediaShare) => ({ url }),\n  },\n];\n\nexport type SocialMediaSharingProps = BaseSocialShareProps & {\n  url: string;\n  message?: string;\n  hashtags?: string[];\n  mention?: string;\n  action?: (e: React.MouseEvent, target: string) => void;\n  label?: string;\n  iconStyles?: string;\n};\n\nexport const SocialMediaSharing: React.FC<SocialMediaSharingProps> = ({\n  url,\n  message,\n  hashtags,\n  mention,\n  action,\n  label,\n  sectionId,\n  size = 'normal',\n  iconStyles,\n}) => {\n  return (\n    <Box display=\"inline-flex\" flexDirection=\"column\" alignItems=\"center\">\n      {label && (\n        <Text\n          fontSize={size === 'small' ? 14 : 16}\n          textColor=\"text\"\n          mb={16}\n          data-testid=\"social-sharing-label\"\n        >\n          {label}\n        </Text>\n      )}\n      <GridBox\n        gridAutoColumns=\"max-content\"\n        gridAutoFlow=\"column\"\n        gap={16}\n        className={iconStyles}\n      >\n        {SOCIAL_SHARING_PLATFORMS.map(({ id, icon, formatShare, baseUrl }) => (\n          <SocialShareIconLink\n            key={id}\n            id={id}\n            sectionId={sectionId}\n            href={createShareLink(formatShare, baseUrl, {\n              url,\n              message,\n              hashtags,\n              mention,\n            })}\n            icon={icon}\n            size={size}\n            onClick={(e) => action?.(e, `${id}_share`)}\n          />\n        ))}\n      </GridBox>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;AAkBA,MAAaQ,mBACXC,WACAC,SACAC,YAAAA;CAEA,MAAMC,SAASH,UAAUE,QAAAA;CACzB,MAAME,MAAM,IAAIC,IAAIJ,QAAAA;AAEpBK,QAAOC,KAAKJ,OAAAA,CAAQK,SAASC,QAAAA;AAC3BL,MAAIM,aAAaC,OAAOF,KAAKN,OAAOM,KAAI;GAC1C;AAEA,QAAOL,IAAIQ,UAAQ;;AAMrB,MAAaC,2BAA2B;CACtC;EACEC,IAAI;EACJC,aAAa;EACbC,MAAMtB;EACNuB,SAAS;EACTC,cAAc,EAAEd,KAAKe,eAAiC;GACpD,GAAIf,OAAO,EAAEgB,MAAMhB,KAAK;GACxB,GAAIe,WAAW,EAAEE,OAAOF,SAAS;GACjCG,SAAS;GACX;EACF;CACA;EACER,IAAI;EACJC,aAAa;EACbC,MAAMpB;EACNqB,SAAS;EACTC,cAAc,EAAEd,KAAKe,SAASI,UAAUC,eAAiC;GACvE,GAAIpB,OAAO,EAAEA,KAAK;GAClB,GAAIe,WAAW,EAAEM,MAAMN,SAAS;GAChC,GAAII,YAAY,EAAEA,UAAUA,SAASG,KAAK,IAAA,EAAM;GAChD,GAAIF,WAAW,EAAEG,KAAKH,SAAS;GACjC;EACF;CACA;EACEV,IAAI;EACJC,aAAa;EACbC,MAAMrB;EACNsB,SAAS;EACTC,cAAc,EAAEd,WAA6B,EAAEA,KAAI;EACrD;CACD;AAYD,MAAawB,sBAAyD,EACpExB,KACAe,SACAI,UACAC,SACAK,QACAC,OACAC,WACAC,OAAO,UACPC,iBACD;AACC,QACE,wBAAA,cAAC1C,KAAAA;EAAI2C,SAAQ;EAAcC,eAAc;EAASC,YAAW;IAC1DN,SACC,wBAAA,cAACrC,MAAAA;EACC4C,UAAUL,SAAS,UAAU,KAAK;EAClCM,WAAU;EACVC,IAAI;EACJC,eAAY;IAEXV,MAAAA,EAGL,wBAAA,cAACtC,SAAAA;EACCiD,iBAAgB;EAChBC,cAAa;EACbC,KAAK;EACLC,WAAWX;IAEVpB,yBAAyBgC,KAAK,EAAE/B,IAAIE,MAAME,aAAaD,cACtD,wBAAA,cAACnB,qBAAAA;EACCW,KAAKK;EACDA;EACOiB;EACXX,MAAMrB,gBAAgBmB,aAAaD,SAAS;GAC1Cb;GACAe;GACAI;GACAC;GACF,CAAA;EACMR;EACAgB;EACNc,UAAUC,MAAMlB,SAASkB,GAAG,GAAGjC,GAAG,QAAO"}

package/dist/SocialMediaSharingDropdown/index.cjs

@@ -0,0 +1,94 @@
+const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../DropdownButton/index.cjs');
+const require_index$1 = require('../SocialMediaSharing/index.cjs');
+let _codecademy_gamut = require("@codecademy/gamut");
+let react = require("react");
+let _codecademy_gamut_icons = require("@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();
+};
+const SocialMediaSharingDropdown = ({ url, message, hashtags, mention, action, defaultPosition = "below", addAlert }) => {
+	const [showClipboardAlert, setShowClipboardAlert] = (0, react.useState)(false);
+	const dropdownRef = (0, react.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__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(require_index.DropdownButton, {
+		ref: dropdownRef,
+		"data-testid": "social-share-dropdown",
+		isMenu: true,
+		buttonType: "text",
+		defaultPosition,
+		px: 0,
+		dropdownItems: [
+			...require_index$1.SOCIAL_SHARING_PLATFORMS.map(({ id, formatShare, baseUrl, displayName }) => ({
+				id,
+				text: displayName,
+				clickHandler: (e) => {
+					onClickWrapper(e, id, require_index$1.createShareLink(formatShare, baseUrl, {
+						url,
+						message,
+						hashtags,
+						mention
+					}), action);
+				}
+			})),
+			"separator",
+			{
+				id: "copy-link",
+				icon: _codecademy_gamut_icons.LinkIcon,
+				text: "Copy link",
+				ariaLabel: "Copy link",
+				clickHandler: (e) => copyUrlToClipboard(e)
+			}
+		]
+	}, /* @__PURE__ */ React.createElement(_codecademy_gamut_icons.ShareIcon, {
+		mr: 4,
+		size: 22
+	}), "Share"), showClipboardAlert && /* @__PURE__ */ React.createElement(_codecademy_gamut.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"
+	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.Alert, {
+		onClose: () => {
+			setShowClipboardAlert(false);
+			focusDropdown();
+		},
+		type: "success",
+		placement: "inline"
+	}, /* @__PURE__ */ React.createElement(_codecademy_gamut.Text, {
+		whiteSpace: "break-spaces",
+		display: "inline"
+	}, clipboardAlertMessage))));
+};
+
+//#endregion
+exports.SocialMediaSharingDropdown = SocialMediaSharingDropdown;
+exports.onClickWrapper = onClickWrapper;
+//# sourceMappingURL=index.cjs.map

package/dist/SocialMediaSharingDropdown/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Alert","FlexBox","Text","LinkIcon","ShareIcon","useRef","useState","DropdownButton","createShareLink","SOCIAL_SHARING_PLATFORMS","clipboardAlertMessage","onClickWrapper","e","id","href","action","preventDefault","popupSize","left","window","screen","width","top","height","features","open","focus","SocialMediaSharingDropdown","url","message","hashtags","mention","defaultPosition","addAlert","showClipboardAlert","setShowClipboardAlert","dropdownRef","focusDropdown","current","preventScroll","copyUrlToClipboard","navigator","clipboard","writeText","onClose","ref","data-testid","isMenu","buttonType","px","dropdownItems","map","formatShare","baseUrl","displayName","text","clickHandler","icon","ariaLabel","mr","size","minWidth","_","sm","position","zIndex","justifyContent","type","placement","whiteSpace","display"],"sources":["../../src/SocialMediaSharingDropdown/index.tsx"],"sourcesContent":["/*\n * NOTE: This is a local new variant of the SocialMediaSharing gamut component that should be ported to Gamut.\n * */\nimport { Alert, FlexBox, PopoverYPositionType, Text } from '@codecademy/gamut';\nimport { LinkIcon, ShareIcon } from '@codecademy/gamut-icons';\nimport { useRef, useState } from 'react';\n\nimport { DropdownButton, DropdownButtonRefType } from '../DropdownButton';\nimport {\n  createShareLink,\n  SOCIAL_SHARING_PLATFORMS,\n} from '../SocialMediaSharing';\n\nconst clipboardAlertMessage = 'Link has been copied to clipboard.';\n\nexport type SocialMediaSharingDropdownProps = {\n  url: string;\n  message?: string;\n  hashtags?: string[];\n  mention?: string;\n  action?: (e: React.MouseEvent, target: string) => void;\n  defaultPosition?: PopoverYPositionType['position'];\n  addAlert?: (alert: { message: string; onClose: () => void }) => void;\n};\n\nexport const onClickWrapper = (\n  e: React.MouseEvent,\n  id: string,\n  href: string,\n  action?: SocialMediaSharingDropdownProps['action']\n) => {\n  e.preventDefault();\n  action?.(e, `${id}_share`);\n  const popupSize = 570;\n  const left = (window.screen.width - popupSize) / 2;\n  const top = (window.screen.height - popupSize) / 2;\n  const features = `menubar=no,toolbar=no,status=no,width=${popupSize},height=${popupSize},top=${top},left=${left}`;\n  window.open(href, '_blank', features)?.focus();\n};\n\nexport const SocialMediaSharingDropdown: React.FC<\n  SocialMediaSharingDropdownProps\n> = ({\n  url,\n  message,\n  hashtags,\n  mention,\n  action,\n  defaultPosition = 'below',\n  addAlert,\n}) => {\n  const [showClipboardAlert, setShowClipboardAlert] = useState(false);\n\n  const dropdownRef = useRef<DropdownButtonRefType>(null);\n  const focusDropdown = () =>\n    dropdownRef.current?.focus({ preventScroll: true });\n\n  const copyUrlToClipboard = async (e: React.MouseEvent) => {\n    action?.(e, `link_share`);\n    await navigator.clipboard.writeText(url);\n\n    if (addAlert) {\n      addAlert({\n        message: clipboardAlertMessage,\n        onClose: focusDropdown,\n      });\n    } else {\n      setShowClipboardAlert(true);\n    }\n  };\n\n  return (\n    <>\n      <DropdownButton\n        ref={dropdownRef}\n        data-testid=\"social-share-dropdown\"\n        isMenu\n        buttonType=\"text\"\n        defaultPosition={defaultPosition}\n        px={0}\n        dropdownItems={[\n          ...SOCIAL_SHARING_PLATFORMS.map(\n            ({ id, formatShare, baseUrl, displayName }) => ({\n              id,\n              text: displayName,\n              clickHandler: (e: React.MouseEvent) => {\n                onClickWrapper(\n                  e,\n                  id,\n                  createShareLink(formatShare, baseUrl, {\n                    url,\n                    message,\n                    hashtags,\n                    mention,\n                  }),\n                  action\n                );\n              },\n            })\n          ),\n          'separator',\n          {\n            id: 'copy-link',\n            icon: LinkIcon,\n            text: 'Copy link',\n            ariaLabel: 'Copy link',\n            clickHandler: (e) => copyUrlToClipboard(e),\n          },\n        ]}\n      >\n        <ShareIcon mr={4} size={22} />\n        Share\n      </DropdownButton>\n      {showClipboardAlert && (\n        <FlexBox\n          minWidth=\"min-content\"\n          width={{ _: '80%', sm: '60%' }}\n          position=\"fixed\"\n          top=\"6rem\"\n          left={{ _: '10%', sm: '20%' }}\n          zIndex={999}\n          data-testid=\"social-share-copy-to-clipboard-alert\"\n          justifyContent=\"center\"\n        >\n          <Alert\n            onClose={() => {\n              setShowClipboardAlert(false);\n              focusDropdown();\n            }}\n            type=\"success\"\n            placement=\"inline\"\n          >\n            <Text whiteSpace=\"break-spaces\" display=\"inline\">\n              {clipboardAlertMessage}\n            </Text>\n          </Alert>\n        </FlexBox>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;AAaA,MAAMU,wBAAwB;AAY9B,MAAaC,kBACXC,GACAC,IACAC,MACAC,WAAAA;AAEAH,GAAEI,gBAAc;AAChBD,UAASH,GAAG,GAAGC,GAAG,QAAO;CACzB,MAAMI,YAAY;CAClB,MAAMC,QAAQC,OAAOC,OAAOC,QAAQJ,aAAa;CAEjD,MAAMO,WAAW,yCAAyCP,UAAU,UAAUA,UAAU,QAD3EE,OAAOC,OAAOG,SAASN,aAAa,EACkD,QAAQC;AAC3GC,QAAOM,KAAKX,MAAM,UAAUU,SAAAA,EAAWE,OAAAA;;AAGzC,MAAaC,8BAER,EACHC,KACAC,SACAC,UACAC,SACAhB,QACAiB,kBAAkB,SAClBC,eACD;CACC,MAAM,CAACC,oBAAoBC,6CAAkC,MAAA;CAE7D,MAAMC,gCAA4C,KAAA;CAClD,MAAMC,sBACJD,YAAYE,SAASZ,MAAM,EAAEa,eAAe,MAAK,CAAA;CAEnD,MAAMC,qBAAqB,OAAO5B,MAAAA;AAChCG,WAASH,GAAG,aAAY;AACxB,QAAM6B,UAAUC,UAAUC,UAAUf,IAAAA;AAEpC,MAAIK,SACFA,UAAS;GACPJ,SAASnB;GACTkC,SAASP;GACX,CAAA;MAEAF,uBAAsB,KAAA;;AAI1B,QACE,sBAAA,cAAA,MAAA,UAAA,MACE,sBAAA,cAAC5B,8BAAAA;EACCsC,KAAKT;EACLU,eAAY;EACZC,QAAAA;EACAC,YAAW;EACMhB;EACjBiB,IAAI;EACJC,eAAe;MACVzC,yCAAyB0C,KACzB,EAAEtC,IAAIuC,aAAaC,SAASC,mBAAmB;IAC9CzC;IACA0C,MAAMD;IACNE,eAAe5C,MAAAA;AACbD,oBACEC,GACAC,IACAL,gCAAgB4C,aAAaC,SAAS;MACpCzB;MACAC;MACAC;MACAC;MACF,CAAA,EACAhB,OAAAA;;IAGN,EAAA;GAEF;GACA;IACEF,IAAI;IACJ4C,MAAMtD;IACNoD,MAAM;IACNG,WAAW;IACXF,eAAe5C,MAAM4B,mBAAmB5B,EAAAA;IAC1C;GACD;IAED,sBAAA,cAACR,mCAAAA;EAAUuD,IAAI;EAAGC,MAAM;KAAM,QAAA,EAG/B1B,sBACC,sBAAA,cAACjC,2BAAAA;EACC4D,UAAS;EACTxC,OAAO;GAAEyC,GAAG;GAAOC,IAAI;GAAM;EAC7BC,UAAS;EACT1C,KAAI;EACJJ,MAAM;GAAE4C,GAAG;GAAOC,IAAI;GAAM;EAC5BE,QAAQ;EACRnB,eAAY;EACZoB,gBAAe;IAEf,sBAAA,cAAClE,yBAAAA;EACC4C,eAAS;AACPT,yBAAsB,MAAA;AACtBE,kBAAAA;;EAEF8B,MAAK;EACLC,WAAU;IAEV,sBAAA,cAAClE,wBAAAA;EAAKmE,YAAW;EAAeC,SAAQ;IACrC5D,sBAAAA,CAAAA,CAAAA,CAAAA"}

package/dist/SocialMediaSharingDropdown/index.d.cts

@@ -0,0 +1,20 @@
+import { PopoverYPositionType } from "@codecademy/gamut";
+
+//#region src/SocialMediaSharingDropdown/index.d.ts
+type SocialMediaSharingDropdownProps = {
+  url: string;
+  message?: string;
+  hashtags?: string[];
+  mention?: string;
+  action?: (e: React.MouseEvent, target: string) => void;
+  defaultPosition?: PopoverYPositionType['position'];
+  addAlert?: (alert: {
+    message: string;
+    onClose: () => void;
+  }) => void;
+};
+declare const onClickWrapper: (e: React.MouseEvent, id: string, href: string, action?: SocialMediaSharingDropdownProps["action"]) => void;
+declare const SocialMediaSharingDropdown: React.FC<SocialMediaSharingDropdownProps>;
+//#endregion
+export { SocialMediaSharingDropdown, SocialMediaSharingDropdownProps, onClickWrapper };
+//# sourceMappingURL=index.d.cts.map

package/dist/SocialMediaSharingDropdown/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/SocialMediaSharingDropdown/index.tsx"],"mappings":";;;KAeY,+BAAA;EACV,GAAA;EACA,OAAA;EACA,QAAA;EACA,OAAA;EACA,MAAA,IAAU,CAAA,EAAG,KAAA,CAAM,UAAA,EAAY,MAAA;EAC/B,eAAA,GAAkB,oBAAA;EAClB,QAAA,IAAY,KAAA;IAAS,OAAA;IAAiB,OAAA;EAAA;AAAA;AAAA,cAG3B,cAAA,GACX,CAAA,EAAG,KAAA,CAAM,UAAA,EACT,EAAA,UACA,IAAA,UACA,MAAA,GAAS,+BAAA;AAAA,cAWE,0BAAA,EAA4B,KAAA,CAAM,EAAA,CAC7C,+BAAA"}

package/dist/SocialMediaSharingDropdown/index.d.ts

@@ -1,15 +1,20 @@
-import { PopoverYPositionType } from '@codecademy/gamut';
-export type SocialMediaSharingDropdownProps = {
-    url: string;
-    message?: string;
-    hashtags?: string[];
-    mention?: string;
-    action?: (e: React.MouseEvent, target: string) => void;
-    defaultPosition?: PopoverYPositionType['position'];
-    addAlert?: (alert: {
-        message: string;
-        onClose: () => void;
-    }) => void;
+import { PopoverYPositionType } from "@codecademy/gamut";
+
+//#region src/SocialMediaSharingDropdown/index.d.ts
+type SocialMediaSharingDropdownProps = {
+  url: string;
+  message?: string;
+  hashtags?: string[];
+  mention?: string;
+  action?: (e: React.MouseEvent, target: string) => void;
+  defaultPosition?: PopoverYPositionType['position'];
+  addAlert?: (alert: {
+    message: string;
+    onClose: () => void;
+  }) => void;
 };
-export declare const onClickWrapper: (e: React.MouseEvent, id: string, href: string, action?: SocialMediaSharingDropdownProps["action"]) => void;
-export declare const SocialMediaSharingDropdown: React.FC<SocialMediaSharingDropdownProps>;
+declare const onClickWrapper: (e: React.MouseEvent, id: string, href: string, action?: SocialMediaSharingDropdownProps["action"]) => void;
+declare const SocialMediaSharingDropdown: React.FC<SocialMediaSharingDropdownProps>;
+//#endregion
+export { SocialMediaSharingDropdown, SocialMediaSharingDropdownProps, onClickWrapper };
+//# sourceMappingURL=index.d.ts.map

package/dist/SocialMediaSharingDropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/SocialMediaSharingDropdown/index.tsx"],"mappings":";;;KAeY,+BAAA;EACV,GAAA;EACA,OAAA;EACA,QAAA;EACA,OAAA;EACA,MAAA,IAAU,CAAA,EAAG,KAAA,CAAM,UAAA,EAAY,MAAA;EAC/B,eAAA,GAAkB,oBAAA;EAClB,QAAA,IAAY,KAAA;IAAS,OAAA;IAAiB,OAAA;EAAA;AAAA;AAAA,cAG3B,cAAA,GACX,CAAA,EAAG,KAAA,CAAM,UAAA,EACT,EAAA,UACA,IAAA,UACA,MAAA,GAAS,+BAAA;AAAA,cAWE,0BAAA,EAA4B,KAAA,CAAM,EAAA,CAC7C,+BAAA"}