@instructure/quiz-core 20.4.1 → 20.4.2-rc.1

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/presenter.js

@@ -6,24 +6,13 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
-var styles = {
-  componentId: 'eHqQt',
-  template: function template(theme) {
-    return "\n\n.eHqQt_eDnN{display:flex;justify-content:space-between;padding-bottom:".concat(theme.headingPadding || 'inherit', "}\n\n.eHqQt_eKXQ{margin:").concat(theme.cardTopMargin || 'inherit', " auto ").concat(theme.cardBottomMargin || 'inherit', " auto;padding:").concat(theme.cardWrapperPadding || 'inherit', ";position:relative}\n\n.eHqQt_dYbQ{align-items:center;display:flex;height:502px;justify-content:center;padding:").concat(theme.cardWrapperPadding || 'inherit', "}\n\n.eHqQt_crZr{padding-top:").concat(theme.metricGroupPaddingTop || 'inherit', "}\n\n.eHqQt_bTHH{position:absolute;right:calc(").concat(theme.viewPaddingRight || 'inherit', " + ").concat(theme.viewPaddingRightAdjust || 'inherit', ");top:").concat(theme.viewPaddingTop || 'inherit', "}\n\n.eHqQt_dPzc,.eHqQt_cpZE{column-gap:").concat(theme.metricsColumnGap || 'inherit', ";display:flex;flex-wrap:wrap;justify-content:flex-start;row-gap:1.5rem}");
-  },
-  'heading': 'eHqQt_eDnN',
-  'cardWrapper': 'eHqQt_eKXQ',
-  'skeletonCardWrapper': 'eHqQt_dYbQ',
-  'container': 'eHqQt_crZr',
-  'expandButtonContainer': 'eHqQt_bTHH',
-  'metricGroup': 'eHqQt_dPzc',
-  'metricsWrapper': 'eHqQt_cpZE'
-};
+/** @jsx jsx */
+import { Component } from 'react';
+import generateStyle from "./styles.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import ExpandButton from "../../../../../common/components/shared/ExpandButton/index.js";
-import { themeable } from '@instructure/ui-themeable';
-import theme from "./theme.js";
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "./theme.js";
 import { formatTimeToFullNumeric } from "../../../../../common/util/formatTimespan.js";
 import Card from "../../../../../common/components/shared/Card/index.js";
 import AnalysisPopoverMetric from "../AnalysisPopoverMetric/index.js";
@@ -33,7 +22,7 @@ import { quizAnalysisPropType } from "../propTypes.js";
 import PropTypes from 'prop-types';
 import { Spinner } from '@instructure/ui-spinner';
 import { cronbachsAlpha, standardDeviation } from "./popoverContent.js";
-export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var NewQuizAnalysis = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NewQuizAnalysis, _Component);
 
   var _super = _createSuper(NewQuizAnalysis);
@@ -60,16 +49,16 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
 
     _this.renderExpanded = function () {
       var scores = _this.props.quizAnalysis.scores;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.container
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.metricGroup
-      }, /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
+      return jsx("div", {
+        css: _this.props.styles.container
+      }, jsx("div", {
+        css: _this.props.styles.metricGroup
+      }, jsx(AnalysisPopoverMetric, {
         metricKey: "stddev",
         value: scores === null || scores === void 0 ? void 0 : scores.stddev,
         label: t('Standard Deviation'),
         popoverDescription: standardDeviation
-      }), /*#__PURE__*/React.createElement(AnalysisPopoverMetric, {
+      }), jsx(AnalysisPopoverMetric, {
         metricKey: "cronbachs_alpha",
         value: scores === null || scores === void 0 ? void 0 : scores.cronbachs_alpha,
         label: t('Cronbach\'s Alpha'),
@@ -82,45 +71,45 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       var scores = quizAnalysis.scores,
           attempts = quizAnalysis.attempts;
       var expanded = _this.state.expanded;
-      return /*#__PURE__*/React.createElement(Card, {
-        className: styles.cardWrapper
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.metricGroup
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.metricsWrapper
-      }, /*#__PURE__*/React.createElement(AnalysisMetric, {
+      return jsx(Card, {
+        css: _this.props.styles.cardWrapper
+      }, jsx("div", {
+        css: _this.props.styles.metricGroup
+      }, jsx("div", {
+        css: _this.props.styles.metricsWrapper
+      }, jsx(AnalysisMetric, {
         metricKey: "highscore",
         label: t('High Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.max_percentage,
         suffix: "%"
-      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+      }), jsx(AnalysisMetric, {
         metricKey: "lowscore",
         label: t('Low Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.min_percentage,
         suffix: "%"
-      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+      }), jsx(AnalysisMetric, {
         metricKey: "meanscore",
         label: t('Mean Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.mean_percentage,
         suffix: "%"
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.metricsWrapper
-      }, /*#__PURE__*/React.createElement(AnalysisMetric, {
+      })), jsx("div", {
+        css: _this.props.styles.metricsWrapper
+      }, jsx(AnalysisMetric, {
         metricKey: "median_percentage",
         label: t('Median Score'),
         value: scores === null || scores === void 0 ? void 0 : scores.median_percentage,
         suffix: "%"
-      }), /*#__PURE__*/React.createElement(AnalysisMetric, {
+      }), jsx(AnalysisMetric, {
         metricKey: "mean_elapsed_sec",
         label: t('Mean Elapsed Time'),
         value: formatTimeToFullNumeric(attempts === null || attempts === void 0 ? void 0 : attempts.mean_elapsed_sec)
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.expandButtonContainer
-      }, /*#__PURE__*/React.createElement(ExpandButton, {
+      })), jsx("div", {
+        css: _this.props.styles.expandButtonContainer
+      }, jsx(ExpandButton, {
         onClick: _this.handleToggle,
         title: expanded ? t('collapse quiz analysis') : t('expand quiz analysis'),
         isExpanded: expanded
-      }))), expanded && _this.renderExpanded(), /*#__PURE__*/React.createElement(ScoreDistribution, {
+      }))), expanded && _this.renderExpanded(), jsx(ScoreDistribution, {
         decileDistribution: _this.getPreparedDecileDistribution()
       }));
     };
@@ -152,9 +141,9 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
       var fetchInProgress = this.props.fetchInProgress;
 
       if (fetchInProgress) {
-        return /*#__PURE__*/React.createElement(Card, {
-          className: styles.skeletonCardWrapper
-        }, /*#__PURE__*/React.createElement(Spinner, {
+        return jsx(Card, {
+          css: this.props.styles.skeletonCardWrapper
+        }, jsx(Spinner, {
           renderTitle: t('Loading quiz analysis data')
         }));
       } else {
@@ -167,7 +156,8 @@ export var NewQuizAnalysis = (_dec = themeable(theme, styles), _dec(_class = (_t
   return NewQuizAnalysis;
 }(Component), _class2.propTypes = {
   quizAnalysis: quizAnalysisPropType,
-  fetchInProgress: PropTypes.bool
+  fetchInProgress: PropTypes.bool,
+  styles: PropTypes.object
 }.isRequired, _class2.defaultProps = {
   quizAnalysis: {}
 }, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/styles.js

@@ -0,0 +1,40 @@
+var generateStyle = function generateStyle(componentTheme) {
+  var metric = {
+    flexWrap: 'wrap',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    columnGap: componentTheme.metricsColumnGap,
+    rowGap: '1.5rem'
+  };
+  return {
+    heading: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      paddingBottom: componentTheme.headingPadding
+    },
+    cardWrapper: {
+      padding: componentTheme.cardWrapperPadding,
+      position: 'relative',
+      margin: "".concat(componentTheme.cardTopMargin, " auto ").concat(componentTheme.cardBottomMargin, " auto")
+    },
+    skeletonCardWrapper: {
+      padding: componentTheme.cardWrapperPadding,
+      height: '502px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    container: {
+      paddingTop: componentTheme.metricGroupPaddingTop
+    },
+    expandButtonContainer: {
+      position: 'absolute',
+      right: "calc(".concat(componentTheme.viewPaddingRight, " + ").concat(componentTheme.viewPaddingRightAdjust, ")"),
+      top: componentTheme.viewPaddingTop
+    },
+    metricsWrapper: metric,
+    metricGroup: metric
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/NewQuizAnalysis/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing;
   return {
     metricGroupPaddingTop: spacing.medium,
@@ -11,4 +11,6 @@ export default function generator(_ref) {
     cardWrapperPadding: spacing.medium,
     metricsColumnGap: '82px'
   };
-}
+};
+
+export default generateComponentTheme;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/presenter.js

@@ -3,27 +3,23 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
-var _dec, _class, _temp;
+var _dec, _class, _class2, _temp;
 
+/* eslint-disable no-unused-vars */
+
+/** @jsx jsx */
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import QuintileDistribution from "../../../../charts/QuintileDistribution/index.js";
-import { themeable } from '@instructure/ui-themeable';
-import theme from "./theme.js";
-var styles = {
-  componentId: 'eRgoL',
-  template: function template(theme) {
-    return "\n\n.eRgoL_YBfL{background-color:".concat(theme.legendRectFillColor || 'inherit', "}\n\n.eRgoL_eDZF{column-gap:10px;display:inline-flex;padding:").concat(theme.legendPadding || 'inherit', " 0}\n\n.eRgoL_dVXF{margin:").concat(theme.legendMargin || 'inherit', " 0}\n\n.eRgoL_dxZa,[dir=ltr] .eRgoL_dxZa,[dir=rtl] .eRgoL_dxZa{text-align:center}");
-  },
-  'legendRect': 'eRgoL_YBfL',
-  'legendContainer': 'eRgoL_eDZF',
-  'headingContainer': 'eRgoL_dVXF',
-  'chartLabel': 'eRgoL_dxZa'
-};
+import { withStyle, jsx } from '@instructure/emotion';
+import generateComponentTheme from "./theme.js";
+import generateStyle from "./styles.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { Text } from '@instructure/ui-text';
 import { Heading } from '@instructure/ui-heading';
 import Legend from "../../../../charts/Legend/index.js";
-export var ScoreDistribution = (_dec = themeable(theme, styles), _dec(_class = (_temp = /*#__PURE__*/function (_Component) {
+import { number } from 'sinon/lib/sinon/match';
+export var ScoreDistribution = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(ScoreDistribution, _Component);
 
   var _super = _createSuper(ScoreDistribution);
@@ -65,28 +61,28 @@ export var ScoreDistribution = (_dec = themeable(theme, styles), _dec(_class = (
     key: "render",
     value: function render() {
       var decileDistribution = this.props.decileDistribution;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-        className: styles.headingContainer
-      }, /*#__PURE__*/React.createElement(Heading, {
+      return jsx(React.Fragment, null, jsx("div", {
+        css: this.props.styles.headingContainer
+      }, jsx(Heading, {
         level: "h3",
         themeOverride: {
           h3FontWeight: 700
         }
-      }, t('Score Distribution'))), /*#__PURE__*/React.createElement(QuintileDistribution, {
+      }, t('Score Distribution'))), jsx(QuintileDistribution, {
         animateDelay: 1000,
         animateDuration: 1000,
         visualDistribution: decileDistribution || [],
         calculateLabelForColumn: decileDistribution.length > 10 ? this.calculateLabelForColumnsWithExtremeValues : this.calculateLabelForColumns
-      }), /*#__PURE__*/React.createElement("div", {
+      }), jsx("div", {
         "aria-hidden": "true",
-        className: styles.chartLabel
-      }, /*#__PURE__*/React.createElement(Text, {
+        css: this.props.styles.chartLabel
+      }, jsx(Text, {
         size: "small"
-      }, t('Score'))), /*#__PURE__*/React.createElement("div", {
-        className: styles.legendContainer
-      }, /*#__PURE__*/React.createElement(Legend, {
+      }, t('Score'))), jsx("div", {
+        css: this.props.styles.legendContainer
+      }, jsx(Legend, {
         series: [{
-          className: styles.legendRect,
+          customStyles: this.props.styles.legendRect,
           label: t('Number of Students')
         }]
       })));
@@ -95,4 +91,9 @@ export var ScoreDistribution = (_dec = themeable(theme, styles), _dec(_class = (
 
   ScoreDistribution.displayName = "ScoreDistribution";
   return ScoreDistribution;
-}(Component), _temp)) || _class);
+}(Component), _class2.propTypes = {
+  decileDistribution: PropTypes.arrayOf(PropTypes.number),
+  styles: PropTypes.object
+}, _class2.defaultProps = {
+  decileDistribution: []
+}, _temp)) || _class);

package/es/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/styles.js

@@ -0,0 +1,20 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    legendRect: {
+      backgroundColor: componentTheme.legendRectFillColor
+    },
+    legendContainer: {
+      display: 'inline-flex',
+      columnGap: '10px',
+      padding: "".concat(componentTheme.legendPadding, " 0")
+    },
+    headingContainer: {
+      margin: "".concat(componentTheme.legendMargin, " 0")
+    },
+    chartLabel: {
+      textAlign: 'center'
+    }
+  };
+};
+
+export default generateStyle;

package/es/reporting/components/resources/NewQuizAndItemAnalysis/charts/ScoreDistribution/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       typography = _ref.typography;
@@ -9,4 +9,6 @@ export default function generator(_ref) {
     legendFontSize: typography.fontSizeXSmall,
     legendMargin: spacing.medium
   };
-}
+};
+
+export default generateComponentTheme;

package/lib/reporting/components/Caption/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,27 +15,21 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _uiHeading = require("@instructure/ui-heading");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'bEEaV',
-  template: function template(theme) {
-    return "\n\n.bEEaV_caGd{margin:".concat(theme.contentMargin || 'inherit', "}\n\n.bEEaV_biBD{padding-top:").concat(theme.childrenPadding || 'inherit', "}");
-  },
-  'content': 'bEEaV_caGd',
-  'children': 'bEEaV_biBD'
-};
-var Caption = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var Caption = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Caption, _Component);
 
   var _super = (0, _createSuper2.default)(Caption);
@@ -50,15 +42,15 @@ var Caption = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   (0, _createClass2.default)(Caption, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.content
-      }, /*#__PURE__*/_react.default.createElement(_uiHeading.Heading, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.content
+      }, (0, _emotion.jsx)(_uiHeading.Heading, {
         level: "reset",
         as: "h2",
         border: "bottom",
         color: "primary"
-      }, this.props.text), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.children
+      }, this.props.text), (0, _emotion.jsx)("div", {
+        css: this.props.styles.children
       }, this.props.children));
     }
   }]);
@@ -66,7 +58,8 @@ var Caption = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(
   return Caption;
 }(_react.Component), _class2.propTypes = {
   text: _propTypes.default.string,
-  children: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.arrayOf(_propTypes.default.object)])
+  children: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.arrayOf(_propTypes.default.object)]),
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   text: void 0,
   children: void 0

package/lib/reporting/components/Caption/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    content: {
+      margin: componentTheme.contentMargin
+    },
+    children: {
+      paddingTop: componentTheme.childrenPadding
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/Caption/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       borders = _ref.borders,
       colors = _ref.colors;
@@ -13,4 +13,7 @@ function generator(_ref) {
     contentMargin: spacing.small,
     childrenPadding: spacing.xSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/lib/reporting/components/charts/Legend/index.js

@@ -2,13 +2,13 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Legend = void 0;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -17,33 +17,21 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _uiA11yContent = require("@instructure/ui-a11y-content");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _emotion = require("@instructure/emotion");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _class, _class2, _temp;
 
-var styles = {
-  componentId: 'gafaO',
-  template: function template(theme) {
-    return "\n\n.gafaO_fEOG{border:".concat(theme.containerBorderWidth || 'inherit', " solid ").concat(theme.containerBorderColor || 'inherit', "}\n\n.gafaO_dWcO{margin:0 calc(-1*").concat(theme.seriesContainerRowMargin || 'inherit', ")}\n\n.gafaO_czwp{align-items:center;flex-direction:row;margin:").concat(theme.seriesContainerMargin || 'inherit', "}\n\n.gafaO_fEOG .gafaO_czwp{display:flex}\n\n.gafaO_dWcO .gafaO_czwp{display:inline-flex;padding:0 ").concat(theme.seriesContainerRowMargin || 'inherit', "}\n\n.gafaO_crhW{display:flex;height:1.2rem;margin-right:").concat(theme.seriesSwatchMargin || 'inherit', ";width:1.2rem}\n\n.gafaO_fAPS{flex:1}\n\n.gafaO_eVVT{color:").concat(theme.seriesLabelColor || 'inherit', ";font-family:").concat(theme.seriesLabelFontFamily || 'inherit', ";font-size:").concat(theme.seriesLabelFontSize || 'inherit', ";white-space:nowrap}");
-  },
-  'containerColumn': 'gafaO_fEOG',
-  'containerRow': 'gafaO_dWcO',
-  'seriesContainer': 'gafaO_czwp',
-  'seriesSwatchContainer': 'gafaO_crhW',
-  'seriesSwatch': 'gafaO_fAPS',
-  'seriesLabel': 'gafaO_eVVT'
-};
-var Legend = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var Legend = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Legend, _Component);
 
   var _super = (0, _createSuper2.default)(Legend);
@@ -54,27 +42,47 @@ var Legend = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
   }
 
   (0, _createClass2.default)(Legend, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "renderSeries",
-    value: function renderSeries(series, index) {
-      return /*#__PURE__*/_react.default.createElement("div", {
+    value: function renderSeries(series, index, styles) {
+      var customStyles = series.customStyles ? series.customStyles : {};
+      return (0, _emotion.jsx)("div", {
         key: index,
-        className: styles.seriesContainer
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.seriesSwatchContainer
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)([styles.seriesSwatch, series.className])
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.seriesLabel
+        className: "seriesContainer",
+        css: styles.seriesContainer
+      }, (0, _emotion.jsx)("div", {
+        css: styles.seriesSwatchContainer
+      }, (0, _emotion.jsx)("div", {
+        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styles.seriesSwatch), customStyles)
+      })), (0, _emotion.jsx)("div", {
+        css: styles.seriesLabel
       }, series.label));
     }
   }, {
     key: "render",
     value: function render() {
-      var variant = this.props.variant;
-      var containerClass = variant === 'row' ? styles.containerRow : styles.containerColumn;
-      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.PresentationContent, null, /*#__PURE__*/_react.default.createElement("div", {
-        className: containerClass
-      }, this.props.series.map(this.renderSeries)));
+      var _this = this;
+
+      var _this$props = this.props,
+          variant = _this$props.variant,
+          series = _this$props.series,
+          styles = _this$props.styles;
+      var containerClass = variant === 'row' ? 'containerRow' : 'containerColumn';
+      return (0, _emotion.jsx)(_uiA11yContent.PresentationContent, null, (0, _emotion.jsx)("div", {
+        className: containerClass,
+        css: styles.containerStyle
+      }, series.map(function (s, i) {
+        return _this.renderSeries(s, i, styles);
+      })));
     }
   }]);
   Legend.displayName = "Legend";
@@ -82,9 +90,11 @@ var Legend = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_
 }(_react.Component), _class2.propTypes = {
   series: _propTypes.default.arrayOf(_propTypes.default.shape({
     label: _propTypes.default.string.isRequired,
-    className: _propTypes.default.string.isRequired
+    customStyles: _propTypes.default.object.isRequired
   })),
-  variant: _propTypes.default.oneOf(['column', 'row'])
+  variant: _propTypes.default.oneOf(['column', 'row']),
+  makeStyles: _propTypes.default.func,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   series: [],
   variant: 'column'

package/lib/reporting/components/charts/Legend/styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var containerVariant = {
+    row: {
+      margin: "0 calc(-1 * ".concat(componentTheme.seriesContainerRowMargin, ")"),
+      '.seriesContainer': {
+        display: 'inline-flex',
+        padding: "0 ".concat(componentTheme.seriesContainerRowMargin)
+      }
+    },
+    column: {
+      border: "".concat(componentTheme.containerBorderWidth, " solid ").concat(componentTheme.containerBorderColor),
+      '.seriesContainer': {
+        display: 'flex'
+      }
+    }
+  };
+  return {
+    seriesContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      margin: componentTheme.seriesContainerMargin
+    },
+    containerStyle: (0, _objectSpread2.default)({}, containerVariant[props.variant]),
+    seriesSwatchContainer: {
+      width: '1.2rem',
+      height: '1.2rem',
+      marginRight: componentTheme.seriesSwatchMargin,
+      display: 'flex'
+    },
+    seriesSwatch: {
+      flex: 1
+    },
+    seriesLabel: {
+      fontFamily: componentTheme.seriesLabelFontFamily,
+      fontSize: componentTheme.seriesLabelFontSize,
+      whiteSpace: 'nowrap',
+      color: componentTheme.seriesLabelColor
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

package/lib/reporting/components/charts/Legend/theme.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var borders = _ref.borders,
       spacing = _ref.spacing,
       colors = _ref.colors,
@@ -21,4 +21,7 @@ function generator(_ref) {
     seriesLabelFontSize: typography.fontSizeXSmall,
     seriesLabelColor: colors.textDarkest
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;