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

package/dist/ScoreSummary/helpers.d.ts

@@ -0,0 +1,11 @@
+export type ContentItemType = 'article' | 'context_item' | 'informational' | 'lesson' | 'lock' | 'pro' | 'project_component' | 'project' | 'quiz' | 'resource' | 'reviewable_project' | 'seminar' | 'video' | 'external_resource' | 'kanban_project';
+export interface ResumeUrlPathParams {
+    journeySlug?: string;
+    pathSlug?: string;
+    trackSlug?: string;
+    moduleSlug?: string;
+    contentItemType?: ContentItemType;
+    contentItemSlug?: string;
+}
+export declare const getContentItemTypeRoutePart: (type?: ContentItemType) => string;
+export declare const createResumeUrlPath: ({ journeySlug, pathSlug, trackSlug, moduleSlug, contentItemType, contentItemSlug, }: ResumeUrlPathParams) => string;

package/dist/ScoreSummary/helpers.js

@@ -0,0 +1,20 @@
+import pluralize from 'pluralize';
+export const getContentItemTypeRoutePart = type => {
+  return type ? pluralize(type, 2) : '';
+};
+export const createResumeUrlPath = ({
+  journeySlug,
+  pathSlug,
+  trackSlug,
+  moduleSlug,
+  contentItemType,
+  contentItemSlug
+}) => {
+  const contentItemTypeRoute = getContentItemTypeRoutePart(contentItemType);
+  const journeyUrl = journeySlug ? `/journeys/${journeySlug}` : '';
+  if (pathSlug && trackSlug && moduleSlug && contentItemType && contentItemTypeRoute && contentItemSlug) return `${journeyUrl}/paths/${pathSlug}/tracks/${trackSlug}/modules/${moduleSlug}/${contentItemTypeRoute}/${contentItemSlug}`;
+  if (pathSlug && trackSlug && moduleSlug) return `${journeyUrl}/paths/${pathSlug}/tracks/${trackSlug}/modules/${moduleSlug}`;
+  if (pathSlug && trackSlug) return `${journeyUrl}/paths/${pathSlug}/tracks/${trackSlug}`;
+  if (pathSlug) return `${journeyUrl}/paths/${pathSlug}`;
+  return journeyUrl;
+};

package/dist/ScoreSummary/index.d.ts

@@ -0,0 +1,21 @@
+import { Colors } from '@codecademy/gamut-styles';
+import { UserClickData } from '@codecademy/tracking';
+import * as React from 'react';
+import { CorrectAnswerCountsBySubContent, UntestedSubContent } from './types';
+export interface ScoreSummaryProps {
+    subScores: CorrectAnswerCountsBySubContent;
+    totalCorrect: number;
+    totalQuestions: number;
+    pathSlug: string;
+    trackSlug?: string;
+    trackingData?: UserClickData;
+    lighterBorderColor?: Colors;
+    layout?: 'column' | 'row';
+    untestedSubContent?: UntestedSubContent[];
+    trackUserClick?: (data: UserClickData) => void;
+    description?: string;
+    noMaxWidth?: boolean;
+    colorfulIcons?: boolean;
+    percentToPass?: number;
+}
+export declare const ScoreSummary: React.FC<ScoreSummaryProps>;

package/dist/ScoreSummary/index.js

@@ -0,0 +1,108 @@
+import { Box, GridBox, Text } from '@codecademy/gamut';
+import { pxRem } from '@codecademy/gamut-styles';
+import * as React from 'react';
+import { QuizScore } from '../QuizScore';
+import { SubScores } from './SubScores';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ScoreSummary = ({
+  subScores,
+  totalCorrect,
+  totalQuestions,
+  pathSlug,
+  trackSlug,
+  trackingData,
+  untestedSubContent,
+  lighterBorderColor = 'navy-400',
+  layout = 'row',
+  trackUserClick,
+  description,
+  noMaxWidth = false,
+  colorfulIcons = false,
+  percentToPass
+}) => {
+  let numOfRows = Object.entries(subScores).length;
+  if (untestedSubContent) {
+    numOfRows += untestedSubContent.length;
+  }
+  const isRowLayout = layout === 'row';
+  return /*#__PURE__*/_jsxs(GridBox, {
+    gridTemplateColumns: isRowLayout ? {
+      _: 'minmax(0, 1fr)',
+      md: '2fr 3fr'
+    } : '',
+    children: [/*#__PURE__*/_jsxs(Box, {
+      zIndex: 1,
+      bg: "transparent",
+      display: "inline",
+      maxWidth: noMaxWidth ? '' : isRowLayout ? {
+        _: pxRem(705),
+        md: pxRem(500)
+      } : pxRem(705),
+      mr: isRowLayout ? {
+        _: 0,
+        md: 24
+      } : 0,
+      children: [/*#__PURE__*/_jsx(Box, {
+        px: {
+          _: 24,
+          xs: 32
+        },
+        pt: 24,
+        pb: 8,
+        display: isRowLayout ? {
+          _: 'flex',
+          md: 'block'
+        } : 'flex',
+        flexDirection: isRowLayout ? {
+          _: 'column',
+          md: 'row'
+        } : 'column',
+        justifyContent: isRowLayout ? {
+          _: 'center',
+          md: ''
+        } : 'center',
+        border: 1,
+        children: /*#__PURE__*/_jsx(QuizScore, {
+          correctCount: totalCorrect,
+          layout: isRowLayout ? 'column' : 'row',
+          total: totalQuestions,
+          smallerFont: true,
+          numOfRows: numOfRows,
+          colorfulIcons: colorfulIcons,
+          percentToPass: percentToPass
+        })
+      }), description && /*#__PURE__*/_jsx(Box, {
+        p: 16,
+        pb: isRowLayout ? {
+          _: 16,
+          md: 0
+        } : 16,
+        border: isRowLayout ? {
+          _: 1,
+          md: 'none'
+        } : 1,
+        borderTop: "none",
+        textAlign: isRowLayout ? {
+          _: 'left',
+          md: 'center'
+        } : 'left',
+        children: /*#__PURE__*/_jsx(Text, {
+          fontSize: 14,
+          children: description
+        })
+      })]
+    }), /*#__PURE__*/_jsx(SubScores, {
+      colorfulIcons: colorfulIcons,
+      layout: layout,
+      lighterBorderColor: lighterBorderColor,
+      noMaxWidth: noMaxWidth,
+      pathSlug: pathSlug,
+      subScores: subScores,
+      trackSlug: trackSlug,
+      trackingData: trackingData,
+      trackUserClick: trackUserClick,
+      untestedSubContent: untestedSubContent,
+      showUntestedContent: true
+    })]
+  });
+};

package/dist/ScoreSummary/types.d.ts

@@ -0,0 +1,310 @@
+export interface EinConfig {
+    container_type: string;
+    server?: string;
+    codex?: string;
+    extensions?: {};
+}
+export interface BaseContentItemProgress {
+    content_item_id: string;
+    user_id: string;
+    started: boolean;
+    completed: boolean;
+    user_completed: boolean;
+    started_at?: string;
+    user_completed_at?: string;
+    completed_at?: string;
+    last_updated?: string;
+    progress_percentage?: number;
+}
+export interface ProjectChecklist {
+    [id: string]: string | boolean;
+}
+export interface QuizAttempt {
+    pct: number;
+    correct: number;
+    total: number;
+    passed: boolean;
+    at?: string;
+}
+export interface QuizProgress extends BaseContentItemProgress {
+    type: 'quiz';
+    total?: number;
+    correct?: number;
+    pct?: number;
+    highest_pct?: number;
+    passed?: boolean;
+    passed_any?: boolean;
+    taken?: boolean;
+    quiz_attempts: QuizAttempt[];
+}
+export interface ProjectProgress extends BaseContentItemProgress {
+    type: 'project';
+    checklist: ProjectChecklist;
+    status?: number;
+    tasks_complete?: number;
+    tasks_total?: number;
+    progress_pct: number;
+}
+export interface LessonProgress extends BaseContentItemProgress {
+    type: 'lesson';
+    exercises_completed: number;
+    current_exercise_checkpoints_completed: number;
+    exercises_total: number;
+    progress_pct: number;
+}
+export interface ArticleProgress extends BaseContentItemProgress {
+    type: 'article';
+}
+export interface VideoProgress extends BaseContentItemProgress {
+    type: 'video';
+}
+export interface InformationalProgress extends BaseContentItemProgress {
+    type: 'informational';
+}
+export interface ExternalResourceProgress extends BaseContentItemProgress {
+    type: 'external_resource';
+}
+export type ContentItemProgress = ProjectProgress | QuizProgress | LessonProgress | ArticleProgress | VideoProgress | InformationalProgress | ExternalResourceProgress;
+export interface ContentItemMeta {
+    task_count?: number;
+    ex_count?: number;
+}
+export type ContentItemType = 'article' | 'context_item' | 'informational' | 'lesson' | 'lock' | 'pro' | 'project_component' | 'project' | 'quiz' | 'resource' | 'reviewable_project' | 'seminar' | 'video' | 'external_resource' | 'kanban_project';
+export type ContentItemResourceType = 'book' | 'documentation' | 'tutorial' | 'general_resource';
+export interface BaseContentItem {
+    id: string;
+    slug: string;
+    created_at: string;
+    type: ContentItemType;
+    last_modified_at?: string;
+    published?: boolean;
+    title: string;
+    template_vars?: object;
+    time?: number;
+    meta?: ContentItemMeta;
+    description?: string;
+    author_ids?: string[];
+    tag_ids?: string[];
+    is_deprecated?: boolean;
+    feedback_link?: string;
+    starter_code_link?: string;
+    reviewable?: boolean;
+    due_date?: string;
+    qa_forum_url?: string;
+    is_free?: boolean;
+    assessment_ids?: string[];
+    thumbnail_url?: string;
+    progress?: ContentItemProgress;
+    resource_type?: ContentItemResourceType;
+    learningStandardIds?: string[];
+    /**
+     * @deprecated
+     */
+    content?: object;
+    /**
+     * @deprecated
+     */
+    uuid?: string;
+}
+export interface ProjectTask {
+    done?: boolean;
+    task_key: string;
+    text: string;
+    hint?: string;
+}
+export interface ProjectSelfAssessment {
+    heading?: string;
+    tasks: ProjectTask[];
+}
+export interface Workspace {
+    id: string;
+    slug: string;
+    type?: string;
+    ein_config?: EinConfig;
+}
+export interface ProjectInformation {
+    self_assessments: ProjectSelfAssessment[];
+    components: LayoutComponent[];
+    objective: string;
+    workspace?: Workspace;
+    ein_config: EinConfig;
+    download_path?: string;
+    preview_url?: string;
+    pro_free_project_trial?: boolean;
+    thumbnail_url?: string;
+    video_url?: string;
+    is_free?: boolean;
+}
+export interface ProjectContentItem extends BaseContentItem {
+    description: string;
+    type: 'project';
+    project_information: ProjectInformation;
+    standalone: boolean;
+}
+export type BriefProject = ProjectContentItem & {
+    projectInformation: ProjectInformation;
+};
+export interface FakeResponse {
+    id: string;
+    delay: number;
+    match_pattern: string;
+    output_content: string;
+    output_type: 'stderr' | 'stdout';
+}
+export interface BriefComponent {
+    type: 'Brief';
+    project: BriefProject;
+}
+export interface NarrativeComponent {
+    id: string;
+    type: 'Narrative';
+    content: string;
+    instructions?: string;
+}
+export interface ImageComponent {
+    id: string;
+    type: 'Image';
+    image_url: string;
+    alt_text: string;
+}
+export interface PersistentCodeEditorComponent {
+    id: string;
+    type: 'PersistentCodeEditor';
+    files: string[];
+    navigator_disabled?: boolean;
+    no_run_button?: boolean;
+}
+export interface ReadOnlyCodeEditorComponent {
+    id: string;
+    type: 'ReadOnlyCodeEditor';
+    file_path: string;
+}
+export interface OutputTerminalComponent {
+    id?: string;
+    type: 'OutputTerminal';
+}
+export interface SQLPreviewComponent {
+    id: string;
+    type: 'SQLPreview';
+}
+export interface TerminalComponent {
+    id: string;
+    type: 'Terminal';
+    shell: string;
+    prevent_checkpoint_run?: boolean;
+    fake_responses: FakeResponse[];
+}
+export interface VideoComponent {
+    id: string;
+    type: 'Video';
+    video_urls: string[];
+    autoplay?: boolean;
+    mute?: boolean;
+    loop?: boolean;
+    show_controls?: boolean;
+}
+export interface WebBrowserComponent {
+    id: string;
+    type: 'WebBrowser';
+    display_url: string;
+    show_preview_button?: boolean;
+    hide_browser_bar?: boolean;
+}
+export interface ExpoCodeEditorComponent {
+    id: string;
+    type: 'ExpoCodeEditor';
+    files: string[];
+}
+export interface ExpoPreviewComponent {
+    id: string;
+    type: 'ExpoPreview';
+    display_url: string;
+    hide_browser_bar?: boolean;
+}
+export interface ReplTerminalComponent {
+    type: 'ReplTerminal';
+    shell: string;
+}
+export interface SandboxCodeEditorComponent {
+    type: 'SandboxCodeEditor';
+    files?: string[];
+    runFileCommand?: (file: string) => string;
+}
+export interface SandboxOutputTerminalComponent {
+    type: 'SandboxOutputTerminal';
+}
+export interface CodeChallengeNarrativeComponent {
+    id: string;
+    type: 'CodeChallengeNarrative';
+    content: string;
+    instructions?: string;
+}
+export type LayoutComponent = BriefComponent | NarrativeComponent | ImageComponent | PersistentCodeEditorComponent | ReadOnlyCodeEditorComponent | OutputTerminalComponent | SQLPreviewComponent | TerminalComponent | VideoComponent | WebBrowserComponent | ExpoCodeEditorComponent | ExpoPreviewComponent | ReplTerminalComponent | SandboxCodeEditorComponent | SandboxOutputTerminalComponent | CodeChallengeNarrativeComponent;
+export interface AssessmentAnswer {
+    text: string;
+    reason?: string | null;
+    hint?: string;
+}
+export interface AssessmentCodeSnippet {
+    id?: string;
+    text: string;
+    language: string;
+}
+export interface ContentTestOptions {
+    command?: string;
+    failure_message?: string;
+    passive?: boolean;
+    withBabel?: boolean;
+    includeFiles?: string[];
+}
+export interface BaseAssessment {
+    id: string;
+    published: boolean;
+    created_at: string;
+    components: LayoutComponent[];
+    last_modified_at: string;
+    prompt?: string;
+    standalone?: boolean;
+    image?: {
+        url: string;
+        alt: string;
+    } | null;
+    sourceId: string;
+}
+export type AssessmentFillInTheCode = BaseAssessment & {
+    type: 'fill_in_code';
+    answers: AssessmentAnswer[];
+    snippet_template: string;
+    decoy_answers: string[];
+    code_language: string;
+};
+export type AssessmentECA = BaseAssessment & {
+    type: 'executable_code';
+    ein_config: EinConfig;
+};
+export type AssessmentMultipleChoice = BaseAssessment & {
+    type: 'multiple_choice';
+    code_snippet: AssessmentCodeSnippet | null;
+    answers: AssessmentAnswer[];
+    correct_answer: number;
+    latex_block: {
+        text: string;
+    } | null;
+};
+export type Assessment = AssessmentECA | AssessmentFillInTheCode | AssessmentMultipleChoice;
+export interface CorrectAnswerCountsBySubContent {
+    [key: string]: {
+        title: string;
+        correct: number;
+        total: number;
+        slug: string;
+    };
+}
+export interface SubContentAssessments {
+    assessments: Assessment[];
+    contains_new_content: boolean;
+    id: string;
+    slug: string;
+    title: string;
+}
+export type UntestedSubContent = Pick<SubContentAssessments, 'id' | 'slug' | 'title'>;

package/dist/ScoreSummary/types.js

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

package/dist/SkillPathCard/__tests__/__fixtures__/index.d.ts

@@ -0,0 +1,2 @@
+import { SkillPathCardProps } from '../..';
+export declare const mockSkillPathContent: SkillPathCardProps;

package/dist/SkillPathCard/index.d.ts

@@ -0,0 +1,20 @@
+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;
+}
+export declare const SkillPathCard: import("react").ForwardRefExoticComponent<SkillPathCardProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/SkillPathCard/index.js

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,13 @@
+import { GamutIconProps } from '@codecademy/gamut-icons';
+import * as React from 'react';
+export type BaseSocialShareProps = {
+    sectionId?: string;
+    size?: 'small' | 'normal';
+};
+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

@@ -0,0 +1,49 @@
+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;
+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

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