ContentRenderer: accept 'screen' prop and override styles with given preview screen/device type

Author: jeremywiebe

packages/perseus-editor/src/article-editor.tsx

@@ -242,6 +242,7 @@ export default class ArticleEditor extends React.Component<Props, State> {
                             apiOptions={apiOptions}
                             question={section}
                             seamless={!nochrome}
+                            screen={this.props.screen}
                             linterContext={{
                                 contentType: "article",
                                 highlightLint: this.state.highlightLint,
@@ -259,6 +260,7 @@ export default class ArticleEditor extends React.Component<Props, State> {
                         apiOptions={apiOptions}
                         question={sections[sectionIndex]}
                         seamless={!nochrome}
+                        screen={this.props.screen}
                         linterContext={{
                             contentType: "article",
                             highlightLint: this.state.highlightLint,

packages/perseus-editor/src/content-renderer.tsx

@@ -11,23 +11,29 @@ import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import type {APIOptions, PerseusRenderer} from "@khanacademy/perseus";
+import type {
+    APIOptions,
+    DeviceType,
+    PerseusRenderer,
+} from "@khanacademy/perseus";
 import type {LinterContextProps} from "@khanacademy/perseus-linter";
 
 function ContentRenderer({
     question,
     apiOptions,
+    screen,
     seamless,
     linterContext,
     legacyPerseusLint,
 }: {
     question?: PerseusRenderer;
     apiOptions?: APIOptions;
+    screen: DeviceType;
     seamless?: boolean;
     linterContext?: LinterContextProps;
     legacyPerseusLint?: ReadonlyArray<string>;
 }) {
-    const className = apiOptions?.isMobile ? "perseus-mobile" : "";
+    const className = `${apiOptions?.isMobile ? "perseus-mobile" : ""} perseus-preview-${screen}`;
 
     return (
         <View

packages/perseus-editor/src/item-editor.tsx

@@ -19,7 +19,7 @@ const ITEM_DATA_VERSION = itemDataVersion;
 
 type Props = {
     apiOptions?: APIOptions;
-    deviceType?: DeviceType;
+    deviceType: DeviceType;
     gradeMessage?: string;
     imageUploader?: ImageUploader;
     wasAnswered?: boolean;
@@ -115,6 +115,7 @@ class ItemEditor extends React.Component<Props> {
                                 <ContentRenderer
                                     apiOptions={this.props.apiOptions}
                                     question={this.props.question}
+                                    screen={this.props.deviceType}
                                     linterContext={{
                                         contentType: "exercise",
                                         highlightLint: true,