[Storybook] Update styles to be more accurate to prod

.storybook/preview.tsx

@@ -1,4 +1,4 @@
 import * as React from "react";
 import {color} from "@khanacademy/wonder-blocks-tokens";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import {Dependencies} from "@khanacademy/perseus";
@@ -10,6 +10,7 @@
 } from "../testing/test-dependencies";
 
 import type {Preview} from "@storybook/react";
+import StoryWrapper from "./story-wrapper";
 
 // IMPORTANT: This code runs ONCE per story file, not per story within that file.
 // If you want code to run once per story, see `StorybookWrapper`.
@@ -23,7 +24,9 @@
         (Story) => (
             <RenderStateRoot>
                 <DependenciesContext.Provider value={storybookDependenciesV2}>
-                    <Story />
+                    <StoryWrapper>
+                        <Story />
+                    </StoryWrapper>
                 </DependenciesContext.Provider>
             </RenderStateRoot>
         ),

.storybook/story-wrapper.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import "./webapp-styles.less";
+
+/**
+ * Wrapper for Storybook stories that
+ * 1. Renders the story inside of a .framework-perseus container
+ * 2. Includes the global styles from webapp
+ */
+function StoryWrapper(props) {
+    // Most of our components have an expectation to be
+    // rendered inside of a .framework-perseus container.
+    // We want to make sure we can include it here, since it
+    // can also affect the styling.
+    return (
+        <div className="framework-perseus box-sizing-border-box-reset">
+            {props.children}
+        </div>
+    );
+}
+
+export default StoryWrapper;

.storybook/webapp-styles.less

@@ -0,0 +1,136 @@
+/**
+ * This file contains styles that are used in webapp that ultimately
+ * get passed onto Perseus components when they are rendered within webapp.
+ * This file is imported in the .storybook/preview.js file so that the
+ * components can have the same styles as webapp when viewed within Storybook.
+ *
+ * Taken from base-page-styles.less in webapp.
+ */
+
+@layer reset, shared, legacy;
+
+// Variables from webapp
+@offBlack: #21242c;
+@wonderBlocksFontFamily: "Lato", "Noto Sans", "Helvetica", "Corbel", sans-serif;
+@grayExtraLight: #eee;
+@white: #fff;
+@maxContainerWidth: 1200px;
+
+@layer shared {
+    html,
+    body {
+        height: 100%;
+    }
+
+    body {
+        font-family: @wonderBlocksFontFamily, "Helvetica", "Corbel", sans-serif;
+        font-size: 14px;
+        margin: 0;
+        color: @offBlack;
+        line-height: 1.4;
+    }
+
+    #outer-wrapper {
+        // See http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        background-color: @grayExtraLight;
+        height: 100%;
+        margin: 0 0 -77px;
+
+        &.white-outer-wrapper {
+            background-color: @white;
+        }
+    }
+
+    #page-container {
+        flex: 1 0 auto;
+        height: 100%;
+        width: 100%;
+        max-width: @maxContainerWidth;
+        position: relative;
+        margin: 0 auto;
+
+        &.full-bleed {
+            max-width: none;
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        .tutorial-outer-wrapper &,
+        .scratchpad-outermost-wrapper & {
+            // Override - tutorial pages and scratchpads have no max width
+            max-width: none;
+        }
+    }
+
+    #page-container-inner {
+        height: 100%;
+    }
+
+    #page-container-inner article {
+        /* TODO(benkomalo): determine if this is correct. On the homepage we
+      * definitely don't want the border (as it was for the old design).
+      * Does it apply everywhere */
+        border-top: none;
+    }
+
+    #app-shell-root {
+        height: 100%;
+    }
+
+    .external-styles-missing {
+        display: none;
+    }
+
+    .contained-and-centered {
+        margin: 0 auto;
+        max-width: @maxContainerWidth;
+    }
+
+    .min-contained-and-centered {
+        margin: 0 auto;
+    }
+
+    // Add this class for elements that should only be visible if the page has been
+    // made responsive (viewable and friendly on different screen sizes).
+    .visible-on-responsive-page {
+        display: none !important;
+    }
+
+    #page_sub_nav {
+        display: none;
+    }
+
+    // Inline the LESS .page-container-min-width-zero() mixin
+    body,
+    #page-container,
+    footer,
+    footer .footer-container {
+        /* Needs !important because we might load shared.css later */
+        min-width: 0 !important;
+    }
+
+    .full-height {
+        height: 100%;
+    }
+
+    .box-sizing-border-box-reset {
+        box-sizing: border-box;
+    }
+
+    .box-sizing-border-box-reset * {
+        box-sizing: inherit;
+    }
+
+    .box-sizing-content-box-reset {
+        box-sizing: content-box;
+    }
+
+    .box-sizing-content-box-reset * {
+        box-sizing: inherit;
+    }
+}