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

package/dist/SkillPathCard/index.d.ts

@@ -1,25 +1,20 @@
-import { CourseDifficulty, EnrollmentStatus } from "../ContentGroupBaseCard/types.js";
-import { HeadingTags } from "@codecademy/gamut";
-import * as react11 from "react";
-
-//#region src/SkillPathCard/index.d.ts
-interface SkillPathCardProps {
-  title: string;
-  lessonCount: number;
-  enrollmentStatus: EnrollmentStatus;
-  shortDescription?: string | null;
-  difficulty?: CourseDifficulty | null;
-  imageUrl: string;
-  courseCount: number;
-  isFullSize?: boolean;
-  headingLevel?: HeadingTags;
-  timeToComplete?: number | null;
-  header?: React.ReactNode;
-  footer?: React.ReactNode;
-  openInNewTab?: boolean;
-  href: string;
-  onClick: () => void;
+import { HeadingTags } from '@codecademy/gamut';
+import { CourseDifficulty, EnrollmentStatus } from '../ContentGroupBaseCard/types';
+export interface SkillPathCardProps {
+    title: string;
+    lessonCount: number;
+    enrollmentStatus: EnrollmentStatus;
+    shortDescription?: string | null;
+    difficulty?: CourseDifficulty | null;
+    imageUrl: string;
+    courseCount: number;
+    isFullSize?: boolean;
+    headingLevel?: HeadingTags;
+    timeToComplete?: number | null;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+    openInNewTab?: boolean;
+    href: string;
+    onClick: () => void;
 }
-declare const SkillPathCard: react11.ForwardRefExoticComponent<SkillPathCardProps & react11.RefAttributes<HTMLAnchorElement>>;
-//#endregion
-export { SkillPathCard, SkillPathCardProps };
+export declare const SkillPathCard: import("react").ForwardRefExoticComponent<SkillPathCardProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/SkillPathCard/index.js

@@ -1,33 +1,46 @@
-import { getPathImageUrl } from "../ContentGroupBaseCard/helpers.js";
-import { CertificateComponent, CourseCountComponent } from "../ContentGroupBaseCard/shared.js";
-import { ContentGroupBaseCard } from "../ContentGroupBaseCard/index.js";
-import { forwardRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/SkillPathCard/index.tsx
-const SkillPathCard = forwardRef(({ title, shortDescription, difficulty, lessonCount, imageUrl, courseCount, enrollmentStatus, headingLevel = "h3", isFullSize = false, timeToComplete, header, footer, openInNewTab = false, href, onClick }, ref) => {
-	return /* @__PURE__ */ jsxs(ContentGroupBaseCard, {
-		headerBackgroundColor: "blue-100",
-		headerText: "Skill path",
-		title,
-		headingLevel,
-		description: shortDescription,
-		difficulty,
-		numLessons: lessonCount,
-		shadow: "outline",
-		imageSrc: getPathImageUrl(enrollmentStatus, imageUrl),
-		isFullSize,
-		enrollmentStatus,
-		timeToComplete,
-		header,
-		footer,
-		openInNewTab,
-		href,
-		onClick,
-		ref,
-		children: [/* @__PURE__ */ jsx(CourseCountComponent, { count: courseCount }), /* @__PURE__ */ jsx(CertificateComponent, {})]
-	});
-});
-
-//#endregion
-export { SkillPathCard };
+import { forwardRef } from 'react';
+import { ContentGroupBaseCard } from '../ContentGroupBaseCard';
+import { getPathImageUrl } from '../ContentGroupBaseCard/helpers';
+import { CertificateComponent, CourseCountComponent } from '../ContentGroupBaseCard/shared';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SkillPathCard = /*#__PURE__*/forwardRef(({
+  title,
+  shortDescription,
+  difficulty,
+  lessonCount,
+  imageUrl,
+  courseCount,
+  enrollmentStatus,
+  headingLevel = 'h3',
+  isFullSize = false,
+  timeToComplete,
+  header,
+  footer,
+  openInNewTab = false,
+  href,
+  onClick
+}, ref) => {
+  return /*#__PURE__*/_jsxs(ContentGroupBaseCard, {
+    headerBackgroundColor: "blue-100",
+    headerText: "Skill path",
+    title: title,
+    headingLevel: headingLevel,
+    description: shortDescription,
+    difficulty: difficulty,
+    numLessons: lessonCount,
+    shadow: "outline",
+    imageSrc: getPathImageUrl(enrollmentStatus, imageUrl),
+    isFullSize: isFullSize,
+    enrollmentStatus: enrollmentStatus,
+    timeToComplete: timeToComplete,
+    header: header,
+    footer: footer,
+    openInNewTab: openInNewTab,
+    href: href,
+    onClick: onClick,
+    ref: ref,
+    children: [/*#__PURE__*/_jsx(CourseCountComponent, {
+      count: courseCount
+    }), /*#__PURE__*/_jsx(CertificateComponent, {})]
+  });
+});

package/dist/SocialMediaSharing/SocialShareIconLink.d.ts

@@ -1,10 +1,13 @@
-import "react";
-import { GamutIconProps } from "@codecademy/gamut-icons";
-
-//#region src/SocialMediaSharing/SocialShareIconLink.d.ts
-type BaseSocialShareProps = {
-  sectionId?: string;
-  size?: 'small' | 'normal';
+import { GamutIconProps } from '@codecademy/gamut-icons';
+import * as React from 'react';
+export type BaseSocialShareProps = {
+    sectionId?: string;
+    size?: 'small' | 'normal';
 };
-//#endregion
-export { BaseSocialShareProps };
+export type SocialShareIconLinkProps = BaseSocialShareProps & {
+    icon: React.ComponentType<GamutIconProps>;
+    id: string;
+    href: string;
+    onClick?: (e: React.MouseEvent) => void;
+};
+export declare const SocialShareIconLink: React.FC<SocialShareIconLinkProps>;

package/dist/SocialMediaSharing/SocialShareIconLink.js

@@ -1,40 +1,49 @@
-import { Anchor, Box } from "@codecademy/gamut";
-import styled from "@emotion/styled";
-import "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/SocialMediaSharing/SocialShareIconLink.tsx
-const IconLink = styled(Box)``.withComponent(Anchor);
+import _styled from "@emotion/styled/base";
+import { Anchor, Box } from '@codecademy/gamut';
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconLink = /*#__PURE__*/_styled(Box, {
+  target: "e1axyiz20",
+  label: "IconLink"
+})(process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Tb2NpYWxNZWRpYVNoYXJpbmcvU29jaWFsU2hhcmVJY29uTGluay50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSzRCIiwiZmlsZSI6Ii4uLy4uL3NyYy9Tb2NpYWxNZWRpYVNoYXJpbmcvU29jaWFsU2hhcmVJY29uTGluay50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBbmNob3IsIEJveCB9IGZyb20gJ0Bjb2RlY2FkZW15L2dhbXV0JztcbmltcG9ydCB7IEdhbXV0SWNvblByb3BzIH0gZnJvbSAnQGNvZGVjYWRlbXkvZ2FtdXQtaWNvbnMnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuXG5jb25zdCBJY29uTGluayA9IHN0eWxlZChCb3gpYGAud2l0aENvbXBvbmVudChBbmNob3IpO1xuXG5jb25zdCBnZXRUaXRsZUlkID0gKGlkOiBzdHJpbmcsIHNlY3Rpb25JZD86IHN0cmluZykgPT5cbiAgc2VjdGlvbklkID8gYCR7c2VjdGlvbklkfS0ke2lkfWAgOiBpZDtcblxuZXhwb3J0IHR5cGUgQmFzZVNvY2lhbFNoYXJlUHJvcHMgPSB7XG4gIHNlY3Rpb25JZD86IHN0cmluZztcbiAgc2l6ZT86ICdzbWFsbCcgfCAnbm9ybWFsJztcbn07XG5cbmV4cG9ydCB0eXBlIFNvY2lhbFNoYXJlSWNvbkxpbmtQcm9wcyA9IEJhc2VTb2NpYWxTaGFyZVByb3BzICYge1xuICBpY29uOiBSZWFjdC5Db21wb25lbnRUeXBlPEdhbXV0SWNvblByb3BzPjtcbiAgaWQ6IHN0cmluZztcbiAgaHJlZjogc3RyaW5nO1xuICBvbkNsaWNrPzogKGU6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHZvaWQ7XG59O1xuXG5leHBvcnQgY29uc3QgU29jaWFsU2hhcmVJY29uTGluazogUmVhY3QuRkM8U29jaWFsU2hhcmVJY29uTGlua1Byb3BzPiA9ICh7XG4gIGljb246IEljb25Db21wb25lbnQsXG4gIGlkLFxuICBocmVmLFxuICBvbkNsaWNrLFxuICBzaXplLFxuICBzZWN0aW9uSWQsXG59KSA9PiB7XG4gIGNvbnN0IG9uSWNvbkNsaWNrID0gKGU6IFJlYWN0Lk1vdXNlRXZlbnQpID0+IHtcbiAgICBlLnByZXZlbnREZWZhdWx0KCk7XG4gICAgb25DbGljaz8uKGUpO1xuICAgIGNvbnN0IHBvcHVwU2l6ZSA9IDU3MDtcbiAgICBjb25zdCBsZWZ0ID0gKHdpbmRvdy5zY3JlZW4ud2lkdGggLSBwb3B1cFNpemUpIC8gMjtcbiAgICBjb25zdCB0b3AgPSAod2luZG93LnNjcmVlbi5oZWlnaHQgLSBwb3B1cFNpemUpIC8gMjtcbiAgICBjb25zdCBmZWF0dXJlcyA9IGBtZW51YmFyPW5vLHRvb2xiYXI9bm8sc3RhdHVzPW5vLHdpZHRoPSR7cG9wdXBTaXplfSxoZWlnaHQ9JHtwb3B1cFNpemV9LHRvcD0ke3RvcH0sbGVmdD0ke2xlZnR9YDtcbiAgICB3aW5kb3cub3BlbihocmVmLCAnX2JsYW5rJywgZmVhdHVyZXMpPy5mb2N1cygpO1xuICB9O1xuXG4gIHJldHVybiAoXG4gICAgPEljb25MaW5rXG4gICAgICBocmVmPXtocmVmfVxuICAgICAgb25DbGljaz17b25JY29uQ2xpY2t9XG4gICAgICB0YXJnZXQ9XCJfYmxhbmtcIlxuICAgICAgcmVsPVwibm9vcGVuZXIgbm9yZWZlcnJlclwiXG4gICAgICBhcmlhLWxhYmVsPXtgc2hhcmUgb24gJHtpZH1gfVxuICAgICAgcD17OH1cbiAgICAgIGxpbmVIZWlnaHQ9ezB9XG4gICAgICBib3JkZXJTdHlsZT1cInNvbGlkXCJcbiAgICAgIGJvcmRlcldpZHRoPXtzaXplID09PSAnc21hbGwnID8gMSA6IDJ9XG4gICAgICBib3JkZXJDb2xvcj1cImJvcmRlci1wcmltYXJ5XCJcbiAgICAgIGJvcmRlclJhZGl1cz1cImZ1bGxcIlxuICAgID5cbiAgICAgIDxJY29uQ29tcG9uZW50XG4gICAgICAgIHRpdGxlPXtpZH1cbiAgICAgICAgdGl0bGVJZD17Z2V0VGl0bGVJZChpZCwgc2VjdGlvbklkKX1cbiAgICAgICAgc2l6ZT17c2l6ZSA9PT0gJ3NtYWxsJyA/IDE2IDogMjR9XG4gICAgICAgIGNvbG9yPVwidGV4dFwiXG4gICAgICAvPlxuICAgIDwvSWNvbkxpbms+XG4gICk7XG59O1xuIl19 */").withComponent(Anchor, {
+  target: "e1axyiz21",
+  label: "IconLink"
+});
 const getTitleId = (id, sectionId) => sectionId ? `${sectionId}-${id}` : id;
-const SocialShareIconLink = ({ icon: IconComponent, id, href, onClick, size, sectionId }) => {
-	const onIconClick = (e) => {
-		e.preventDefault();
-		onClick?.(e);
-		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();
-	};
-	return /* @__PURE__ */ jsx(IconLink, {
-		href,
-		onClick: onIconClick,
-		target: "_blank",
-		rel: "noopener noreferrer",
-		"aria-label": `share on ${id}`,
-		p: 8,
-		lineHeight: 0,
-		borderStyle: "solid",
-		borderWidth: size === "small" ? 1 : 2,
-		borderColor: "border-primary",
-		borderRadius: "full",
-		children: /* @__PURE__ */ jsx(IconComponent, {
-			title: id,
-			titleId: getTitleId(id, sectionId),
-			size: size === "small" ? 16 : 24,
-			color: "text"
-		})
-	});
-};
-
-//#endregion
-export { SocialShareIconLink };
+export const SocialShareIconLink = ({
+  icon: IconComponent,
+  id,
+  href,
+  onClick,
+  size,
+  sectionId
+}) => {
+  const onIconClick = e => {
+    e.preventDefault();
+    onClick?.(e);
+    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();
+  };
+  return /*#__PURE__*/_jsx(IconLink, {
+    href: href,
+    onClick: onIconClick,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    "aria-label": `share on ${id}`,
+    p: 8,
+    lineHeight: 0,
+    borderStyle: "solid",
+    borderWidth: size === 'small' ? 1 : 2,
+    borderColor: "border-primary",
+    borderRadius: "full",
+    children: /*#__PURE__*/_jsx(IconComponent, {
+      title: id,
+      titleId: getTitleId(id, sectionId),
+      size: size === 'small' ? 16 : 24,
+      color: "text"
+    })
+  });
+};

package/dist/SocialMediaSharing/index.d.ts

@@ -1,64 +1,49 @@
-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;
+import * as React from 'react';
+import type { BaseSocialShareProps } from './SocialShareIconLink';
+export type SocialMediaShare = {
+    url: string;
+    message?: string;
+    hashtags?: string[];
+    mention?: string;
 };
-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;
-  };
+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;
+    };
 } | {
-  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, 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
-  }: SocialMediaShare) => {
-    url: string;
-  };
+    id: string;
+    displayName: string;
+    icon: React.ForwardRefExoticComponent<import("@codecademy/gamut-icons").GamutIconProps & React.RefAttributes<SVGSVGElement>>;
+    baseUrl: string;
+    formatShare: ({ url }: SocialMediaShare) => {
+        url: 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 type SocialMediaSharingProps = BaseSocialShareProps & {
+    url: string;
+    message?: string;
+    hashtags?: string[];
+    mention?: string;
+    action?: (e: React.MouseEvent, target: string) => void;
+    label?: string;
+    iconStyles?: string;
 };
-declare const SocialMediaSharing: React$1.FC<SocialMediaSharingProps>;
-//#endregion
-export { SOCIAL_SHARING_PLATFORMS, SocialMediaShare, SocialMediaSharing, SocialMediaSharingProps, createShareLink };
+export declare const SocialMediaSharing: React.FC<SocialMediaSharingProps>;

package/dist/SocialMediaSharing/index.js

@@ -1,82 +1,116 @@
-import { SocialShareIconLink } from "./SocialShareIconLink.js";
-import { Box, GridBox, Text } from "@codecademy/gamut";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-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__ */ 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,
-				sectionId,
-				href: createShareLink(formatShare, baseUrl, {
-					url,
-					message,
-					hashtags,
-					mention
-				}),
-				icon,
-				size,
-				onClick: (e) => action?.(e, `${id}_share`)
-			}, id))
-		})]
-	});
+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();
 };
 
-//#endregion
-export { SOCIAL_SHARING_PLATFORMS, SocialMediaSharing, createShareLink };
+// 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))
+    })]
+  });
+};

package/dist/SocialMediaSharingDropdown/__tests__/SocialMediaSharingDropdown-test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/SocialMediaSharingDropdown/index.d.ts

@@ -1,19 +1,15 @@
-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;
+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;
 };
-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 };
+export declare const onClickWrapper: (e: React.MouseEvent, id: string, href: string, action?: SocialMediaSharingDropdownProps["action"]) => void;
+export declare const SocialMediaSharingDropdown: React.FC<SocialMediaSharingDropdownProps>;