@pie-element/complex-rubric 3.8.4-next.9 → 5.0.1-esmbeta.0

package/configure/node_modules/@pie-element/rubric/src/__tests__/__snapshots__/rubric-view.test.jsx.snap

@@ -0,0 +1,1815 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rubric viewer expanded snapshot renders 1`] = `
+<WithStyles(Rubric)
+  value={
+    Object {
+      "excludeZero": false,
+      "points": Array [
+        "nothing right",
+        "a teeny bit right",
+        "mostly right",
+        "bingo",
+      ],
+      "sampleAnswers": Array [
+        null,
+        "just right",
+        "not left",
+        null,
+      ],
+    }
+  }
+>
+  <Rubric
+    classes={
+      Object {
+        "chevronStyle": "Rubric-chevronStyle-7",
+        "hiddenScreenReader": "Rubric-hiddenScreenReader-8",
+        "listColumn": "Rubric-listColumn-2",
+        "listColumnItem": "Rubric-listColumnItem-3",
+        "root": "Rubric-root-1",
+        "rubricToggle": "Rubric-rubricToggle-6",
+        "text": "Rubric-text-4",
+        "titleText": "Rubric-titleText-5",
+      }
+    }
+    value={
+      Object {
+        "excludeZero": false,
+        "points": Array [
+          "nothing right",
+          "a teeny bit right",
+          "mostly right",
+          "bingo",
+        ],
+        "sampleAnswers": Array [
+          null,
+          "just right",
+          "not left",
+          null,
+        ],
+      }
+    }
+  >
+    <WithStyles(UiLayout)
+      className="Rubric-root-1"
+    >
+      <UiLayout
+        className="Rubric-root-1"
+        classes={
+          Object {
+            "extraCSSRules": "UiLayout-extraCSSRules-9",
+            "uiLayoutContainer": "UiLayout-uiLayoutContainer-10",
+          }
+        }
+        extraCSSRules={Object {}}
+        fontSizeFactor={1}
+      >
+        <div
+          className="Rubric-root-1 UiLayout-extraCSSRules-9 UiLayout-uiLayoutContainer-10"
+        >
+          <h2
+            className="Rubric-hiddenScreenReader-8"
+          >
+            Rubric
+          </h2>
+          <h2
+            aria-expanded={true}
+            className="Rubric-rubricToggle-6"
+            id="rubric-toggle"
+            onClick={[Function]}
+            onKeyPress={[Function]}
+            role="button"
+            tabIndex={0}
+          >
+            Hide
+             Rubric
+            <span
+              aria-hidden="true"
+              className="Rubric-chevronStyle-7"
+            >
+              <svg
+                fill="none"
+                height="20"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                width="20"
+              >
+                <polyline
+                  points="18 15 12 9 6 15"
+                />
+              </svg>
+            </span>
+          </h2>
+          <WithStyles(Collapse)
+            in={true}
+            timeout="auto"
+          >
+            <Collapse
+              classes={
+                Object {
+                  "container": "MuiCollapse-container-11",
+                  "entered": "MuiCollapse-entered-12",
+                  "wrapper": "MuiCollapse-wrapper-13",
+                  "wrapperInner": "MuiCollapse-wrapperInner-14",
+                }
+              }
+              collapsedHeight="0px"
+              component="div"
+              in={true}
+              theme={
+                Object {
+                  "breakpoints": Object {
+                    "between": [Function],
+                    "down": [Function],
+                    "keys": Array [
+                      "xs",
+                      "sm",
+                      "md",
+                      "lg",
+                      "xl",
+                    ],
+                    "only": [Function],
+                    "up": [Function],
+                    "values": Object {
+                      "lg": 1280,
+                      "md": 960,
+                      "sm": 600,
+                      "xl": 1920,
+                      "xs": 0,
+                    },
+                    "width": [Function],
+                  },
+                  "direction": "ltr",
+                  "mixins": Object {
+                    "gutters": [Function],
+                    "toolbar": Object {
+                      "@media (min-width:0px) and (orientation: landscape)": Object {
+                        "minHeight": 48,
+                      },
+                      "@media (min-width:600px)": Object {
+                        "minHeight": 64,
+                      },
+                      "minHeight": 56,
+                    },
+                  },
+                  "overrides": Object {},
+                  "palette": Object {
+                    "action": Object {
+                      "active": "rgba(0, 0, 0, 0.54)",
+                      "disabled": "rgba(0, 0, 0, 0.26)",
+                      "disabledBackground": "rgba(0, 0, 0, 0.12)",
+                      "hover": "rgba(0, 0, 0, 0.08)",
+                      "hoverOpacity": 0.08,
+                      "selected": "rgba(0, 0, 0, 0.14)",
+                    },
+                    "augmentColor": [Function],
+                    "background": Object {
+                      "default": "#fafafa",
+                      "paper": "#fff",
+                    },
+                    "common": Object {
+                      "black": "#000",
+                      "white": "#fff",
+                    },
+                    "contrastThreshold": 3,
+                    "divider": "rgba(0, 0, 0, 0.12)",
+                    "error": Object {
+                      "contrastText": "#fff",
+                      "dark": "#d32f2f",
+                      "light": "#e57373",
+                      "main": "#f44336",
+                    },
+                    "getContrastText": [Function],
+                    "grey": Object {
+                      "100": "#f5f5f5",
+                      "200": "#eeeeee",
+                      "300": "#e0e0e0",
+                      "400": "#bdbdbd",
+                      "50": "#fafafa",
+                      "500": "#9e9e9e",
+                      "600": "#757575",
+                      "700": "#616161",
+                      "800": "#424242",
+                      "900": "#212121",
+                      "A100": "#d5d5d5",
+                      "A200": "#aaaaaa",
+                      "A400": "#303030",
+                      "A700": "#616161",
+                    },
+                    "primary": Object {
+                      "contrastText": "#fff",
+                      "dark": "#303f9f",
+                      "light": "#7986cb",
+                      "main": "#3f51b5",
+                    },
+                    "secondary": Object {
+                      "contrastText": "#fff",
+                      "dark": "#c51162",
+                      "light": "#ff4081",
+                      "main": "#f50057",
+                    },
+                    "text": Object {
+                      "disabled": "rgba(0, 0, 0, 0.38)",
+                      "hint": "rgba(0, 0, 0, 0.38)",
+                      "primary": "rgba(0, 0, 0, 0.87)",
+                      "secondary": "rgba(0, 0, 0, 0.54)",
+                    },
+                    "tonalOffset": 0.2,
+                    "type": "light",
+                  },
+                  "props": Object {},
+                  "shadows": Array [
+                    "none",
+                    "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
+                    "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
+                    "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
+                    "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+                    "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+                    "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+                    "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+                    "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+                    "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+                    "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+                    "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+                    "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+                    "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+                    "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+                    "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+                    "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+                    "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+                    "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+                  ],
+                  "shape": Object {
+                    "borderRadius": 4,
+                  },
+                  "spacing": Object {
+                    "unit": 8,
+                  },
+                  "transitions": Object {
+                    "create": [Function],
+                    "duration": Object {
+                      "complex": 375,
+                      "enteringScreen": 225,
+                      "leavingScreen": 195,
+                      "short": 250,
+                      "shorter": 200,
+                      "shortest": 150,
+                      "standard": 300,
+                    },
+                    "easing": Object {
+                      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+                      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+                      "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+                      "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+                    },
+                    "getAutoHeightDuration": [Function],
+                  },
+                  "typography": Object {
+                    "body1": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.875rem",
+                      "fontWeight": 400,
+                      "lineHeight": "1.46429em",
+                    },
+                    "body1Next": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0.00938em",
+                      "lineHeight": 1.5,
+                    },
+                    "body2": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.875rem",
+                      "fontWeight": 500,
+                      "lineHeight": "1.71429em",
+                    },
+                    "body2Next": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.875rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0.01071em",
+                      "lineHeight": 1.5,
+                    },
+                    "button": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.875rem",
+                      "fontWeight": 500,
+                      "textTransform": "uppercase",
+                    },
+                    "buttonNext": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.875rem",
+                      "fontWeight": 500,
+                      "letterSpacing": "0.02857em",
+                      "lineHeight": 1.75,
+                      "textTransform": "uppercase",
+                    },
+                    "caption": Object {
+                      "color": "rgba(0, 0, 0, 0.54)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.75rem",
+                      "fontWeight": 400,
+                      "lineHeight": "1.375em",
+                    },
+                    "captionNext": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.75rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0.03333em",
+                      "lineHeight": 1.66,
+                    },
+                    "display1": Object {
+                      "color": "rgba(0, 0, 0, 0.54)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "2.125rem",
+                      "fontWeight": 400,
+                      "lineHeight": "1.20588em",
+                    },
+                    "display2": Object {
+                      "color": "rgba(0, 0, 0, 0.54)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "2.8125rem",
+                      "fontWeight": 400,
+                      "lineHeight": "1.13333em",
+                      "marginLeft": "-.02em",
+                    },
+                    "display3": Object {
+                      "color": "rgba(0, 0, 0, 0.54)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "3.5rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "-.02em",
+                      "lineHeight": "1.30357em",
+                      "marginLeft": "-.02em",
+                    },
+                    "display4": Object {
+                      "color": "rgba(0, 0, 0, 0.54)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "7rem",
+                      "fontWeight": 300,
+                      "letterSpacing": "-.04em",
+                      "lineHeight": "1.14286em",
+                      "marginLeft": "-.04em",
+                    },
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": 14,
+                    "fontWeightLight": 300,
+                    "fontWeightMedium": 500,
+                    "fontWeightRegular": 400,
+                    "h1": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "6rem",
+                      "fontWeight": 300,
+                      "letterSpacing": "-0.01562em",
+                      "lineHeight": 1,
+                    },
+                    "h2": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "3.75rem",
+                      "fontWeight": 300,
+                      "letterSpacing": "-0.00833em",
+                      "lineHeight": 1,
+                    },
+                    "h3": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "3rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0em",
+                      "lineHeight": 1.04,
+                    },
+                    "h4": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "2.125rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0.00735em",
+                      "lineHeight": 1.17,
+                    },
+                    "h5": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1.5rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0em",
+                      "lineHeight": 1.33,
+                    },
+                    "h6": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1.25rem",
+                      "fontWeight": 500,
+                      "letterSpacing": "0.0075em",
+                      "lineHeight": 1.6,
+                    },
+                    "headline": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1.5rem",
+                      "fontWeight": 400,
+                      "lineHeight": "1.35417em",
+                    },
+                    "overline": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.75rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0.08333em",
+                      "lineHeight": 2.66,
+                      "textTransform": "uppercase",
+                    },
+                    "pxToRem": [Function],
+                    "round": [Function],
+                    "subheading": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1rem",
+                      "fontWeight": 400,
+                      "lineHeight": "1.5em",
+                    },
+                    "subtitle1": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0.00938em",
+                      "lineHeight": 1.75,
+                    },
+                    "subtitle2": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.875rem",
+                      "fontWeight": 500,
+                      "letterSpacing": "0.00714em",
+                      "lineHeight": 1.57,
+                    },
+                    "title": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1.3125rem",
+                      "fontWeight": 500,
+                      "lineHeight": "1.16667em",
+                    },
+                    "useNextVariants": false,
+                  },
+                  "zIndex": Object {
+                    "appBar": 1100,
+                    "drawer": 1200,
+                    "mobileStepper": 1000,
+                    "modal": 1300,
+                    "snackbar": 1400,
+                    "tooltip": 1500,
+                  },
+                }
+              }
+              timeout="auto"
+            >
+              <Transition
+                addEndListener={[Function]}
+                appear={false}
+                enter={true}
+                exit={true}
+                in={true}
+                mountOnEnter={false}
+                onEnter={[Function]}
+                onEntered={[Function]}
+                onEntering={[Function]}
+                onExit={[Function]}
+                onExited={[Function]}
+                onExiting={[Function]}
+                timeout={null}
+                unmountOnExit={false}
+              >
+                <div
+                  className="MuiCollapse-container-11"
+                  style={
+                    Object {
+                      "minHeight": "0px",
+                    }
+                  }
+                >
+                  <div
+                    className="MuiCollapse-wrapper-13"
+                  >
+                    <div
+                      className="MuiCollapse-wrapperInner-14"
+                    >
+                      <WithStyles(List)
+                        component="nav"
+                      >
+                        <List
+                          classes={
+                            Object {
+                              "dense": "MuiList-dense-17",
+                              "padding": "MuiList-padding-16",
+                              "root": "MuiList-root-15",
+                              "subheader": "MuiList-subheader-18",
+                            }
+                          }
+                          component="nav"
+                          dense={false}
+                          disablePadding={false}
+                        >
+                          <nav
+                            className="MuiList-root-15 MuiList-padding-16"
+                          >
+                            <WithStyles(ListItem)
+                              className="Rubric-listColumn-2"
+                              key="P3"
+                            >
+                              <ListItem
+                                ContainerComponent="li"
+                                alignItems="center"
+                                button={false}
+                                className="Rubric-listColumn-2"
+                                classes={
+                                  Object {
+                                    "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart-24",
+                                    "button": "MuiListItem-button-28",
+                                    "container": "MuiListItem-container-20",
+                                    "default": "MuiListItem-default-22",
+                                    "dense": "MuiListItem-dense-23",
+                                    "disabled": "MuiListItem-disabled-25",
+                                    "divider": "MuiListItem-divider-26",
+                                    "focusVisible": "MuiListItem-focusVisible-21",
+                                    "gutters": "MuiListItem-gutters-27",
+                                    "root": "MuiListItem-root-19",
+                                    "secondaryAction": "MuiListItem-secondaryAction-29",
+                                    "selected": "MuiListItem-selected-30",
+                                  }
+                                }
+                                dense={false}
+                                disableGutters={false}
+                                disabled={false}
+                                divider={false}
+                                selected={false}
+                              >
+                                <MergeListContext
+                                  alignItems="center"
+                                  dense={false}
+                                >
+                                  <li
+                                    className="MuiListItem-root-19 MuiListItem-default-22 MuiListItem-gutters-27 Rubric-listColumn-2"
+                                    disabled={false}
+                                  >
+                                    <h3
+                                      className="Rubric-titleText-5"
+                                      key=".0"
+                                    >
+                                      3 PTS
+                                    </h3>
+                                    <div
+                                      className="Rubric-text-4"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "bingo",
+                                        }
+                                      }
+                                      key=".1"
+                                    />
+                                  </li>
+                                </MergeListContext>
+                              </ListItem>
+                            </WithStyles(ListItem)>
+                            <WithStyles(ListItem)
+                              className="Rubric-listColumn-2"
+                              key="P2"
+                            >
+                              <ListItem
+                                ContainerComponent="li"
+                                alignItems="center"
+                                button={false}
+                                className="Rubric-listColumn-2"
+                                classes={
+                                  Object {
+                                    "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart-24",
+                                    "button": "MuiListItem-button-28",
+                                    "container": "MuiListItem-container-20",
+                                    "default": "MuiListItem-default-22",
+                                    "dense": "MuiListItem-dense-23",
+                                    "disabled": "MuiListItem-disabled-25",
+                                    "divider": "MuiListItem-divider-26",
+                                    "focusVisible": "MuiListItem-focusVisible-21",
+                                    "gutters": "MuiListItem-gutters-27",
+                                    "root": "MuiListItem-root-19",
+                                    "secondaryAction": "MuiListItem-secondaryAction-29",
+                                    "selected": "MuiListItem-selected-30",
+                                  }
+                                }
+                                dense={false}
+                                disableGutters={false}
+                                disabled={false}
+                                divider={false}
+                                selected={false}
+                              >
+                                <MergeListContext
+                                  alignItems="center"
+                                  dense={false}
+                                >
+                                  <li
+                                    className="MuiListItem-root-19 MuiListItem-default-22 MuiListItem-gutters-27 Rubric-listColumn-2"
+                                    disabled={false}
+                                  >
+                                    <h3
+                                      className="Rubric-titleText-5"
+                                      key=".0"
+                                    >
+                                      2 PTS
+                                    </h3>
+                                    <div
+                                      className="Rubric-text-4"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "mostly right",
+                                        }
+                                      }
+                                      key=".1"
+                                    />
+                                  </li>
+                                </MergeListContext>
+                              </ListItem>
+                            </WithStyles(ListItem)>
+                            <WithStyles(ListItem)
+                              className="Rubric-listColumn-2"
+                              key="S2"
+                            >
+                              <ListItem
+                                ContainerComponent="li"
+                                alignItems="center"
+                                button={false}
+                                className="Rubric-listColumn-2"
+                                classes={
+                                  Object {
+                                    "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart-24",
+                                    "button": "MuiListItem-button-28",
+                                    "container": "MuiListItem-container-20",
+                                    "default": "MuiListItem-default-22",
+                                    "dense": "MuiListItem-dense-23",
+                                    "disabled": "MuiListItem-disabled-25",
+                                    "divider": "MuiListItem-divider-26",
+                                    "focusVisible": "MuiListItem-focusVisible-21",
+                                    "gutters": "MuiListItem-gutters-27",
+                                    "root": "MuiListItem-root-19",
+                                    "secondaryAction": "MuiListItem-secondaryAction-29",
+                                    "selected": "MuiListItem-selected-30",
+                                  }
+                                }
+                                dense={false}
+                                disableGutters={false}
+                                disabled={false}
+                                divider={false}
+                                selected={false}
+                              >
+                                <MergeListContext
+                                  alignItems="center"
+                                  dense={false}
+                                >
+                                  <li
+                                    className="MuiListItem-root-19 MuiListItem-default-22 MuiListItem-gutters-27 Rubric-listColumn-2"
+                                    disabled={false}
+                                  >
+                                    <h4
+                                      className="Rubric-titleText-5"
+                                      key=".0"
+                                      style={
+                                        Object {
+                                          "fontWeight": "normal",
+                                        }
+                                      }
+                                    >
+                                      Sample Answer
+                                    </h4>
+                                    <div
+                                      className="Rubric-text-4"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "not left",
+                                        }
+                                      }
+                                      key=".1"
+                                    />
+                                  </li>
+                                </MergeListContext>
+                              </ListItem>
+                            </WithStyles(ListItem)>
+                            <WithStyles(ListItem)
+                              className="Rubric-listColumn-2"
+                              key="P1"
+                            >
+                              <ListItem
+                                ContainerComponent="li"
+                                alignItems="center"
+                                button={false}
+                                className="Rubric-listColumn-2"
+                                classes={
+                                  Object {
+                                    "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart-24",
+                                    "button": "MuiListItem-button-28",
+                                    "container": "MuiListItem-container-20",
+                                    "default": "MuiListItem-default-22",
+                                    "dense": "MuiListItem-dense-23",
+                                    "disabled": "MuiListItem-disabled-25",
+                                    "divider": "MuiListItem-divider-26",
+                                    "focusVisible": "MuiListItem-focusVisible-21",
+                                    "gutters": "MuiListItem-gutters-27",
+                                    "root": "MuiListItem-root-19",
+                                    "secondaryAction": "MuiListItem-secondaryAction-29",
+                                    "selected": "MuiListItem-selected-30",
+                                  }
+                                }
+                                dense={false}
+                                disableGutters={false}
+                                disabled={false}
+                                divider={false}
+                                selected={false}
+                              >
+                                <MergeListContext
+                                  alignItems="center"
+                                  dense={false}
+                                >
+                                  <li
+                                    className="MuiListItem-root-19 MuiListItem-default-22 MuiListItem-gutters-27 Rubric-listColumn-2"
+                                    disabled={false}
+                                  >
+                                    <h3
+                                      className="Rubric-titleText-5"
+                                      key=".0"
+                                    >
+                                      1 PT
+                                    </h3>
+                                    <div
+                                      className="Rubric-text-4"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "a teeny bit right",
+                                        }
+                                      }
+                                      key=".1"
+                                    />
+                                  </li>
+                                </MergeListContext>
+                              </ListItem>
+                            </WithStyles(ListItem)>
+                            <WithStyles(ListItem)
+                              className="Rubric-listColumn-2"
+                              key="S1"
+                            >
+                              <ListItem
+                                ContainerComponent="li"
+                                alignItems="center"
+                                button={false}
+                                className="Rubric-listColumn-2"
+                                classes={
+                                  Object {
+                                    "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart-24",
+                                    "button": "MuiListItem-button-28",
+                                    "container": "MuiListItem-container-20",
+                                    "default": "MuiListItem-default-22",
+                                    "dense": "MuiListItem-dense-23",
+                                    "disabled": "MuiListItem-disabled-25",
+                                    "divider": "MuiListItem-divider-26",
+                                    "focusVisible": "MuiListItem-focusVisible-21",
+                                    "gutters": "MuiListItem-gutters-27",
+                                    "root": "MuiListItem-root-19",
+                                    "secondaryAction": "MuiListItem-secondaryAction-29",
+                                    "selected": "MuiListItem-selected-30",
+                                  }
+                                }
+                                dense={false}
+                                disableGutters={false}
+                                disabled={false}
+                                divider={false}
+                                selected={false}
+                              >
+                                <MergeListContext
+                                  alignItems="center"
+                                  dense={false}
+                                >
+                                  <li
+                                    className="MuiListItem-root-19 MuiListItem-default-22 MuiListItem-gutters-27 Rubric-listColumn-2"
+                                    disabled={false}
+                                  >
+                                    <h4
+                                      className="Rubric-titleText-5"
+                                      key=".0"
+                                      style={
+                                        Object {
+                                          "fontWeight": "normal",
+                                        }
+                                      }
+                                    >
+                                      Sample Answer
+                                    </h4>
+                                    <div
+                                      className="Rubric-text-4"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "just right",
+                                        }
+                                      }
+                                      key=".1"
+                                    />
+                                  </li>
+                                </MergeListContext>
+                              </ListItem>
+                            </WithStyles(ListItem)>
+                            <WithStyles(ListItem)
+                              className="Rubric-listColumn-2"
+                              key="P0"
+                            >
+                              <ListItem
+                                ContainerComponent="li"
+                                alignItems="center"
+                                button={false}
+                                className="Rubric-listColumn-2"
+                                classes={
+                                  Object {
+                                    "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart-24",
+                                    "button": "MuiListItem-button-28",
+                                    "container": "MuiListItem-container-20",
+                                    "default": "MuiListItem-default-22",
+                                    "dense": "MuiListItem-dense-23",
+                                    "disabled": "MuiListItem-disabled-25",
+                                    "divider": "MuiListItem-divider-26",
+                                    "focusVisible": "MuiListItem-focusVisible-21",
+                                    "gutters": "MuiListItem-gutters-27",
+                                    "root": "MuiListItem-root-19",
+                                    "secondaryAction": "MuiListItem-secondaryAction-29",
+                                    "selected": "MuiListItem-selected-30",
+                                  }
+                                }
+                                dense={false}
+                                disableGutters={false}
+                                disabled={false}
+                                divider={false}
+                                selected={false}
+                              >
+                                <MergeListContext
+                                  alignItems="center"
+                                  dense={false}
+                                >
+                                  <li
+                                    className="MuiListItem-root-19 MuiListItem-default-22 MuiListItem-gutters-27 Rubric-listColumn-2"
+                                    disabled={false}
+                                  >
+                                    <h3
+                                      className="Rubric-titleText-5"
+                                      key=".0"
+                                    >
+                                      0 PTS
+                                    </h3>
+                                    <div
+                                      className="Rubric-text-4"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "nothing right",
+                                        }
+                                      }
+                                      key=".1"
+                                    />
+                                  </li>
+                                </MergeListContext>
+                              </ListItem>
+                            </WithStyles(ListItem)>
+                          </nav>
+                        </List>
+                      </WithStyles(List)>
+                    </div>
+                  </div>
+                </div>
+              </Transition>
+            </Collapse>
+          </WithStyles(Collapse)>
+        </div>
+      </UiLayout>
+    </WithStyles(UiLayout)>
+  </Rubric>
+</WithStyles(Rubric)>
+`;
+
+exports[`rubric viewer snapshot renders 1`] = `
+<WithStyles(Rubric)
+  value={
+    Object {
+      "excludeZero": false,
+      "points": Array [
+        "nothing right",
+        "a teeny bit right",
+        "mostly right",
+        "bingo",
+      ],
+      "sampleAnswers": Array [
+        null,
+        "just right",
+        "not left",
+        null,
+      ],
+    }
+  }
+>
+  <Rubric
+    classes={
+      Object {
+        "chevronStyle": "Rubric-chevronStyle-7",
+        "hiddenScreenReader": "Rubric-hiddenScreenReader-8",
+        "listColumn": "Rubric-listColumn-2",
+        "listColumnItem": "Rubric-listColumnItem-3",
+        "root": "Rubric-root-1",
+        "rubricToggle": "Rubric-rubricToggle-6",
+        "text": "Rubric-text-4",
+        "titleText": "Rubric-titleText-5",
+      }
+    }
+    value={
+      Object {
+        "excludeZero": false,
+        "points": Array [
+          "nothing right",
+          "a teeny bit right",
+          "mostly right",
+          "bingo",
+        ],
+        "sampleAnswers": Array [
+          null,
+          "just right",
+          "not left",
+          null,
+        ],
+      }
+    }
+  >
+    <WithStyles(UiLayout)
+      className="Rubric-root-1"
+    >
+      <UiLayout
+        className="Rubric-root-1"
+        classes={
+          Object {
+            "extraCSSRules": "UiLayout-extraCSSRules-9",
+            "uiLayoutContainer": "UiLayout-uiLayoutContainer-10",
+          }
+        }
+        extraCSSRules={Object {}}
+        fontSizeFactor={1}
+      >
+        <div
+          className="Rubric-root-1 UiLayout-extraCSSRules-9 UiLayout-uiLayoutContainer-10"
+        >
+          <h2
+            className="Rubric-hiddenScreenReader-8"
+          >
+            Rubric
+          </h2>
+          <h2
+            aria-expanded={false}
+            className="Rubric-rubricToggle-6"
+            id="rubric-toggle"
+            onClick={[Function]}
+            onKeyPress={[Function]}
+            role="button"
+            tabIndex={0}
+          >
+            Show
+             Rubric
+            <span
+              aria-hidden="true"
+              className="Rubric-chevronStyle-7"
+            >
+              <svg
+                fill="none"
+                height="20"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                viewBox="0 0 24 24"
+                width="20"
+              >
+                <polyline
+                  points="6 9 12 15 18 9"
+                />
+              </svg>
+            </span>
+          </h2>
+          <WithStyles(Collapse)
+            in={false}
+            timeout="auto"
+          >
+            <Collapse
+              classes={
+                Object {
+                  "container": "MuiCollapse-container-11",
+                  "entered": "MuiCollapse-entered-12",
+                  "wrapper": "MuiCollapse-wrapper-13",
+                  "wrapperInner": "MuiCollapse-wrapperInner-14",
+                }
+              }
+              collapsedHeight="0px"
+              component="div"
+              in={false}
+              theme={
+                Object {
+                  "breakpoints": Object {
+                    "between": [Function],
+                    "down": [Function],
+                    "keys": Array [
+                      "xs",
+                      "sm",
+                      "md",
+                      "lg",
+                      "xl",
+                    ],
+                    "only": [Function],
+                    "up": [Function],
+                    "values": Object {
+                      "lg": 1280,
+                      "md": 960,
+                      "sm": 600,
+                      "xl": 1920,
+                      "xs": 0,
+                    },
+                    "width": [Function],
+                  },
+                  "direction": "ltr",
+                  "mixins": Object {
+                    "gutters": [Function],
+                    "toolbar": Object {
+                      "@media (min-width:0px) and (orientation: landscape)": Object {
+                        "minHeight": 48,
+                      },
+                      "@media (min-width:600px)": Object {
+                        "minHeight": 64,
+                      },
+                      "minHeight": 56,
+                    },
+                  },
+                  "overrides": Object {},
+                  "palette": Object {
+                    "action": Object {
+                      "active": "rgba(0, 0, 0, 0.54)",
+                      "disabled": "rgba(0, 0, 0, 0.26)",
+                      "disabledBackground": "rgba(0, 0, 0, 0.12)",
+                      "hover": "rgba(0, 0, 0, 0.08)",
+                      "hoverOpacity": 0.08,
+                      "selected": "rgba(0, 0, 0, 0.14)",
+                    },
+                    "augmentColor": [Function],
+                    "background": Object {
+                      "default": "#fafafa",
+                      "paper": "#fff",
+                    },
+                    "common": Object {
+                      "black": "#000",
+                      "white": "#fff",
+                    },
+                    "contrastThreshold": 3,
+                    "divider": "rgba(0, 0, 0, 0.12)",
+                    "error": Object {
+                      "contrastText": "#fff",
+                      "dark": "#d32f2f",
+                      "light": "#e57373",
+                      "main": "#f44336",
+                    },
+                    "getContrastText": [Function],
+                    "grey": Object {
+                      "100": "#f5f5f5",
+                      "200": "#eeeeee",
+                      "300": "#e0e0e0",
+                      "400": "#bdbdbd",
+                      "50": "#fafafa",
+                      "500": "#9e9e9e",
+                      "600": "#757575",
+                      "700": "#616161",
+                      "800": "#424242",
+                      "900": "#212121",
+                      "A100": "#d5d5d5",
+                      "A200": "#aaaaaa",
+                      "A400": "#303030",
+                      "A700": "#616161",
+                    },
+                    "primary": Object {
+                      "contrastText": "#fff",
+                      "dark": "#303f9f",
+                      "light": "#7986cb",
+                      "main": "#3f51b5",
+                    },
+                    "secondary": Object {
+                      "contrastText": "#fff",
+                      "dark": "#c51162",
+                      "light": "#ff4081",
+                      "main": "#f50057",
+                    },
+                    "text": Object {
+                      "disabled": "rgba(0, 0, 0, 0.38)",
+                      "hint": "rgba(0, 0, 0, 0.38)",
+                      "primary": "rgba(0, 0, 0, 0.87)",
+                      "secondary": "rgba(0, 0, 0, 0.54)",
+                    },
+                    "tonalOffset": 0.2,
+                    "type": "light",
+                  },
+                  "props": Object {},
+                  "shadows": Array [
+                    "none",
+                    "0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12)",
+                    "0px 1px 5px 0px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 3px 1px -2px rgba(0,0,0,0.12)",
+                    "0px 1px 8px 0px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 3px 3px -2px rgba(0,0,0,0.12)",
+                    "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+                    "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+                    "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+                    "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+                    "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+                    "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+                    "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+                    "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+                    "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+                    "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+                    "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+                    "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+                    "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+                    "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+                    "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+                    "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+                    "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+                    "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+                  ],
+                  "shape": Object {
+                    "borderRadius": 4,
+                  },
+                  "spacing": Object {
+                    "unit": 8,
+                  },
+                  "transitions": Object {
+                    "create": [Function],
+                    "duration": Object {
+                      "complex": 375,
+                      "enteringScreen": 225,
+                      "leavingScreen": 195,
+                      "short": 250,
+                      "shorter": 200,
+                      "shortest": 150,
+                      "standard": 300,
+                    },
+                    "easing": Object {
+                      "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+                      "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+                      "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+                      "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+                    },
+                    "getAutoHeightDuration": [Function],
+                  },
+                  "typography": Object {
+                    "body1": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.875rem",
+                      "fontWeight": 400,
+                      "lineHeight": "1.46429em",
+                    },
+                    "body1Next": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0.00938em",
+                      "lineHeight": 1.5,
+                    },
+                    "body2": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.875rem",
+                      "fontWeight": 500,
+                      "lineHeight": "1.71429em",
+                    },
+                    "body2Next": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.875rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0.01071em",
+                      "lineHeight": 1.5,
+                    },
+                    "button": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.875rem",
+                      "fontWeight": 500,
+                      "textTransform": "uppercase",
+                    },
+                    "buttonNext": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.875rem",
+                      "fontWeight": 500,
+                      "letterSpacing": "0.02857em",
+                      "lineHeight": 1.75,
+                      "textTransform": "uppercase",
+                    },
+                    "caption": Object {
+                      "color": "rgba(0, 0, 0, 0.54)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.75rem",
+                      "fontWeight": 400,
+                      "lineHeight": "1.375em",
+                    },
+                    "captionNext": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.75rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0.03333em",
+                      "lineHeight": 1.66,
+                    },
+                    "display1": Object {
+                      "color": "rgba(0, 0, 0, 0.54)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "2.125rem",
+                      "fontWeight": 400,
+                      "lineHeight": "1.20588em",
+                    },
+                    "display2": Object {
+                      "color": "rgba(0, 0, 0, 0.54)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "2.8125rem",
+                      "fontWeight": 400,
+                      "lineHeight": "1.13333em",
+                      "marginLeft": "-.02em",
+                    },
+                    "display3": Object {
+                      "color": "rgba(0, 0, 0, 0.54)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "3.5rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "-.02em",
+                      "lineHeight": "1.30357em",
+                      "marginLeft": "-.02em",
+                    },
+                    "display4": Object {
+                      "color": "rgba(0, 0, 0, 0.54)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "7rem",
+                      "fontWeight": 300,
+                      "letterSpacing": "-.04em",
+                      "lineHeight": "1.14286em",
+                      "marginLeft": "-.04em",
+                    },
+                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                    "fontSize": 14,
+                    "fontWeightLight": 300,
+                    "fontWeightMedium": 500,
+                    "fontWeightRegular": 400,
+                    "h1": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "6rem",
+                      "fontWeight": 300,
+                      "letterSpacing": "-0.01562em",
+                      "lineHeight": 1,
+                    },
+                    "h2": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "3.75rem",
+                      "fontWeight": 300,
+                      "letterSpacing": "-0.00833em",
+                      "lineHeight": 1,
+                    },
+                    "h3": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "3rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0em",
+                      "lineHeight": 1.04,
+                    },
+                    "h4": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "2.125rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0.00735em",
+                      "lineHeight": 1.17,
+                    },
+                    "h5": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1.5rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0em",
+                      "lineHeight": 1.33,
+                    },
+                    "h6": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1.25rem",
+                      "fontWeight": 500,
+                      "letterSpacing": "0.0075em",
+                      "lineHeight": 1.6,
+                    },
+                    "headline": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1.5rem",
+                      "fontWeight": 400,
+                      "lineHeight": "1.35417em",
+                    },
+                    "overline": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.75rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0.08333em",
+                      "lineHeight": 2.66,
+                      "textTransform": "uppercase",
+                    },
+                    "pxToRem": [Function],
+                    "round": [Function],
+                    "subheading": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1rem",
+                      "fontWeight": 400,
+                      "lineHeight": "1.5em",
+                    },
+                    "subtitle1": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1rem",
+                      "fontWeight": 400,
+                      "letterSpacing": "0.00938em",
+                      "lineHeight": 1.75,
+                    },
+                    "subtitle2": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "0.875rem",
+                      "fontWeight": 500,
+                      "letterSpacing": "0.00714em",
+                      "lineHeight": 1.57,
+                    },
+                    "title": Object {
+                      "color": "rgba(0, 0, 0, 0.87)",
+                      "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+                      "fontSize": "1.3125rem",
+                      "fontWeight": 500,
+                      "lineHeight": "1.16667em",
+                    },
+                    "useNextVariants": false,
+                  },
+                  "zIndex": Object {
+                    "appBar": 1100,
+                    "drawer": 1200,
+                    "mobileStepper": 1000,
+                    "modal": 1300,
+                    "snackbar": 1400,
+                    "tooltip": 1500,
+                  },
+                }
+              }
+              timeout="auto"
+            >
+              <Transition
+                addEndListener={[Function]}
+                appear={false}
+                enter={true}
+                exit={true}
+                in={false}
+                mountOnEnter={false}
+                onEnter={[Function]}
+                onEntered={[Function]}
+                onEntering={[Function]}
+                onExit={[Function]}
+                onExited={[Function]}
+                onExiting={[Function]}
+                timeout={null}
+                unmountOnExit={false}
+              >
+                <div
+                  className="MuiCollapse-container-11"
+                  style={
+                    Object {
+                      "minHeight": "0px",
+                    }
+                  }
+                >
+                  <div
+                    className="MuiCollapse-wrapper-13"
+                  >
+                    <div
+                      className="MuiCollapse-wrapperInner-14"
+                    >
+                      <WithStyles(List)
+                        component="nav"
+                      >
+                        <List
+                          classes={
+                            Object {
+                              "dense": "MuiList-dense-17",
+                              "padding": "MuiList-padding-16",
+                              "root": "MuiList-root-15",
+                              "subheader": "MuiList-subheader-18",
+                            }
+                          }
+                          component="nav"
+                          dense={false}
+                          disablePadding={false}
+                        >
+                          <nav
+                            className="MuiList-root-15 MuiList-padding-16"
+                          >
+                            <WithStyles(ListItem)
+                              className="Rubric-listColumn-2"
+                              key="P3"
+                            >
+                              <ListItem
+                                ContainerComponent="li"
+                                alignItems="center"
+                                button={false}
+                                className="Rubric-listColumn-2"
+                                classes={
+                                  Object {
+                                    "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart-24",
+                                    "button": "MuiListItem-button-28",
+                                    "container": "MuiListItem-container-20",
+                                    "default": "MuiListItem-default-22",
+                                    "dense": "MuiListItem-dense-23",
+                                    "disabled": "MuiListItem-disabled-25",
+                                    "divider": "MuiListItem-divider-26",
+                                    "focusVisible": "MuiListItem-focusVisible-21",
+                                    "gutters": "MuiListItem-gutters-27",
+                                    "root": "MuiListItem-root-19",
+                                    "secondaryAction": "MuiListItem-secondaryAction-29",
+                                    "selected": "MuiListItem-selected-30",
+                                  }
+                                }
+                                dense={false}
+                                disableGutters={false}
+                                disabled={false}
+                                divider={false}
+                                selected={false}
+                              >
+                                <MergeListContext
+                                  alignItems="center"
+                                  dense={false}
+                                >
+                                  <li
+                                    className="MuiListItem-root-19 MuiListItem-default-22 MuiListItem-gutters-27 Rubric-listColumn-2"
+                                    disabled={false}
+                                  >
+                                    <h3
+                                      className="Rubric-titleText-5"
+                                      key=".0"
+                                    >
+                                      3 PTS
+                                    </h3>
+                                    <div
+                                      className="Rubric-text-4"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "bingo",
+                                        }
+                                      }
+                                      key=".1"
+                                    />
+                                  </li>
+                                </MergeListContext>
+                              </ListItem>
+                            </WithStyles(ListItem)>
+                            <WithStyles(ListItem)
+                              className="Rubric-listColumn-2"
+                              key="P2"
+                            >
+                              <ListItem
+                                ContainerComponent="li"
+                                alignItems="center"
+                                button={false}
+                                className="Rubric-listColumn-2"
+                                classes={
+                                  Object {
+                                    "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart-24",
+                                    "button": "MuiListItem-button-28",
+                                    "container": "MuiListItem-container-20",
+                                    "default": "MuiListItem-default-22",
+                                    "dense": "MuiListItem-dense-23",
+                                    "disabled": "MuiListItem-disabled-25",
+                                    "divider": "MuiListItem-divider-26",
+                                    "focusVisible": "MuiListItem-focusVisible-21",
+                                    "gutters": "MuiListItem-gutters-27",
+                                    "root": "MuiListItem-root-19",
+                                    "secondaryAction": "MuiListItem-secondaryAction-29",
+                                    "selected": "MuiListItem-selected-30",
+                                  }
+                                }
+                                dense={false}
+                                disableGutters={false}
+                                disabled={false}
+                                divider={false}
+                                selected={false}
+                              >
+                                <MergeListContext
+                                  alignItems="center"
+                                  dense={false}
+                                >
+                                  <li
+                                    className="MuiListItem-root-19 MuiListItem-default-22 MuiListItem-gutters-27 Rubric-listColumn-2"
+                                    disabled={false}
+                                  >
+                                    <h3
+                                      className="Rubric-titleText-5"
+                                      key=".0"
+                                    >
+                                      2 PTS
+                                    </h3>
+                                    <div
+                                      className="Rubric-text-4"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "mostly right",
+                                        }
+                                      }
+                                      key=".1"
+                                    />
+                                  </li>
+                                </MergeListContext>
+                              </ListItem>
+                            </WithStyles(ListItem)>
+                            <WithStyles(ListItem)
+                              className="Rubric-listColumn-2"
+                              key="S2"
+                            >
+                              <ListItem
+                                ContainerComponent="li"
+                                alignItems="center"
+                                button={false}
+                                className="Rubric-listColumn-2"
+                                classes={
+                                  Object {
+                                    "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart-24",
+                                    "button": "MuiListItem-button-28",
+                                    "container": "MuiListItem-container-20",
+                                    "default": "MuiListItem-default-22",
+                                    "dense": "MuiListItem-dense-23",
+                                    "disabled": "MuiListItem-disabled-25",
+                                    "divider": "MuiListItem-divider-26",
+                                    "focusVisible": "MuiListItem-focusVisible-21",
+                                    "gutters": "MuiListItem-gutters-27",
+                                    "root": "MuiListItem-root-19",
+                                    "secondaryAction": "MuiListItem-secondaryAction-29",
+                                    "selected": "MuiListItem-selected-30",
+                                  }
+                                }
+                                dense={false}
+                                disableGutters={false}
+                                disabled={false}
+                                divider={false}
+                                selected={false}
+                              >
+                                <MergeListContext
+                                  alignItems="center"
+                                  dense={false}
+                                >
+                                  <li
+                                    className="MuiListItem-root-19 MuiListItem-default-22 MuiListItem-gutters-27 Rubric-listColumn-2"
+                                    disabled={false}
+                                  >
+                                    <h4
+                                      className="Rubric-titleText-5"
+                                      key=".0"
+                                      style={
+                                        Object {
+                                          "fontWeight": "normal",
+                                        }
+                                      }
+                                    >
+                                      Sample Answer
+                                    </h4>
+                                    <div
+                                      className="Rubric-text-4"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "not left",
+                                        }
+                                      }
+                                      key=".1"
+                                    />
+                                  </li>
+                                </MergeListContext>
+                              </ListItem>
+                            </WithStyles(ListItem)>
+                            <WithStyles(ListItem)
+                              className="Rubric-listColumn-2"
+                              key="P1"
+                            >
+                              <ListItem
+                                ContainerComponent="li"
+                                alignItems="center"
+                                button={false}
+                                className="Rubric-listColumn-2"
+                                classes={
+                                  Object {
+                                    "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart-24",
+                                    "button": "MuiListItem-button-28",
+                                    "container": "MuiListItem-container-20",
+                                    "default": "MuiListItem-default-22",
+                                    "dense": "MuiListItem-dense-23",
+                                    "disabled": "MuiListItem-disabled-25",
+                                    "divider": "MuiListItem-divider-26",
+                                    "focusVisible": "MuiListItem-focusVisible-21",
+                                    "gutters": "MuiListItem-gutters-27",
+                                    "root": "MuiListItem-root-19",
+                                    "secondaryAction": "MuiListItem-secondaryAction-29",
+                                    "selected": "MuiListItem-selected-30",
+                                  }
+                                }
+                                dense={false}
+                                disableGutters={false}
+                                disabled={false}
+                                divider={false}
+                                selected={false}
+                              >
+                                <MergeListContext
+                                  alignItems="center"
+                                  dense={false}
+                                >
+                                  <li
+                                    className="MuiListItem-root-19 MuiListItem-default-22 MuiListItem-gutters-27 Rubric-listColumn-2"
+                                    disabled={false}
+                                  >
+                                    <h3
+                                      className="Rubric-titleText-5"
+                                      key=".0"
+                                    >
+                                      1 PT
+                                    </h3>
+                                    <div
+                                      className="Rubric-text-4"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "a teeny bit right",
+                                        }
+                                      }
+                                      key=".1"
+                                    />
+                                  </li>
+                                </MergeListContext>
+                              </ListItem>
+                            </WithStyles(ListItem)>
+                            <WithStyles(ListItem)
+                              className="Rubric-listColumn-2"
+                              key="S1"
+                            >
+                              <ListItem
+                                ContainerComponent="li"
+                                alignItems="center"
+                                button={false}
+                                className="Rubric-listColumn-2"
+                                classes={
+                                  Object {
+                                    "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart-24",
+                                    "button": "MuiListItem-button-28",
+                                    "container": "MuiListItem-container-20",
+                                    "default": "MuiListItem-default-22",
+                                    "dense": "MuiListItem-dense-23",
+                                    "disabled": "MuiListItem-disabled-25",
+                                    "divider": "MuiListItem-divider-26",
+                                    "focusVisible": "MuiListItem-focusVisible-21",
+                                    "gutters": "MuiListItem-gutters-27",
+                                    "root": "MuiListItem-root-19",
+                                    "secondaryAction": "MuiListItem-secondaryAction-29",
+                                    "selected": "MuiListItem-selected-30",
+                                  }
+                                }
+                                dense={false}
+                                disableGutters={false}
+                                disabled={false}
+                                divider={false}
+                                selected={false}
+                              >
+                                <MergeListContext
+                                  alignItems="center"
+                                  dense={false}
+                                >
+                                  <li
+                                    className="MuiListItem-root-19 MuiListItem-default-22 MuiListItem-gutters-27 Rubric-listColumn-2"
+                                    disabled={false}
+                                  >
+                                    <h4
+                                      className="Rubric-titleText-5"
+                                      key=".0"
+                                      style={
+                                        Object {
+                                          "fontWeight": "normal",
+                                        }
+                                      }
+                                    >
+                                      Sample Answer
+                                    </h4>
+                                    <div
+                                      className="Rubric-text-4"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "just right",
+                                        }
+                                      }
+                                      key=".1"
+                                    />
+                                  </li>
+                                </MergeListContext>
+                              </ListItem>
+                            </WithStyles(ListItem)>
+                            <WithStyles(ListItem)
+                              className="Rubric-listColumn-2"
+                              key="P0"
+                            >
+                              <ListItem
+                                ContainerComponent="li"
+                                alignItems="center"
+                                button={false}
+                                className="Rubric-listColumn-2"
+                                classes={
+                                  Object {
+                                    "alignItemsFlexStart": "MuiListItem-alignItemsFlexStart-24",
+                                    "button": "MuiListItem-button-28",
+                                    "container": "MuiListItem-container-20",
+                                    "default": "MuiListItem-default-22",
+                                    "dense": "MuiListItem-dense-23",
+                                    "disabled": "MuiListItem-disabled-25",
+                                    "divider": "MuiListItem-divider-26",
+                                    "focusVisible": "MuiListItem-focusVisible-21",
+                                    "gutters": "MuiListItem-gutters-27",
+                                    "root": "MuiListItem-root-19",
+                                    "secondaryAction": "MuiListItem-secondaryAction-29",
+                                    "selected": "MuiListItem-selected-30",
+                                  }
+                                }
+                                dense={false}
+                                disableGutters={false}
+                                disabled={false}
+                                divider={false}
+                                selected={false}
+                              >
+                                <MergeListContext
+                                  alignItems="center"
+                                  dense={false}
+                                >
+                                  <li
+                                    className="MuiListItem-root-19 MuiListItem-default-22 MuiListItem-gutters-27 Rubric-listColumn-2"
+                                    disabled={false}
+                                  >
+                                    <h3
+                                      className="Rubric-titleText-5"
+                                      key=".0"
+                                    >
+                                      0 PTS
+                                    </h3>
+                                    <div
+                                      className="Rubric-text-4"
+                                      dangerouslySetInnerHTML={
+                                        Object {
+                                          "__html": "nothing right",
+                                        }
+                                      }
+                                      key=".1"
+                                    />
+                                  </li>
+                                </MergeListContext>
+                              </ListItem>
+                            </WithStyles(ListItem)>
+                          </nav>
+                        </List>
+                      </WithStyles(List)>
+                    </div>
+                  </div>
+                </div>
+              </Transition>
+            </Collapse>
+          </WithStyles(Collapse)>
+        </div>
+      </UiLayout>
+    </WithStyles(UiLayout)>
+  </Rubric>
+</WithStyles(Rubric)>
+`;