@instructure/outcomes-ui 4.1.1 → 4.1.3

package/lib/components/Gradebook/gradebook-table/ColumnHeader/index.stories.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithMenu = exports.WithIconAndBackground = exports.WithIcon = exports.WithBrandBackground = exports.NarrowColumn = exports.LongTitleWithMenu = exports.LongTitle = exports.Default = exports.CustomWidth = void 0;
+exports.default = exports.WithTitleId = exports.WithMenu = exports.WithIconAndBackground = exports.WithIcon = exports.WithBrandBackground = exports.NarrowColumn = exports.LongTitleWithMenu = exports.LongTitle = exports.Default = exports.CustomWidth = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _uiMenu = require("@instructure/ui-menu");
 var _uiIcons = require("@instructure/ui-icons");
@@ -32,6 +32,12 @@ var LongTitle = exports.LongTitle = {
     title: 'This is a long title that should be truncated with an ellipsis when it exceeds the available space'
   }
 };
+var WithTitleId = exports.WithTitleId = {
+  args: {
+    title: 'Test Title',
+    titleId: 'test-title-id'
+  }
+};
 var WithMenu = exports.WithMenu = {
   args: {
     title: 'Test Title',

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/ScoreWithLabel.d.ts

@@ -3,8 +3,9 @@ import { ScoreDisplayFormat } from '../../../../util/gradebook/constants';
 import type { MasteryLevel } from '../../../../types/gradebook';
 export interface ScoreWithLabelProps {
     masteryLevel: MasteryLevel;
-    score: number;
     label: string;
+    score?: number;
+    totalScore?: number;
     scoreDisplayFormat?: ScoreDisplayFormat;
 }
 export declare const ScoreWithLabel: React.FC<ScoreWithLabelProps>;

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/ScoreWithLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScoreWithLabel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/ScoreCellContent/ScoreWithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,YAAY,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;CACxC;AAkBD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgCxD,CAAA"}
+{"version":3,"file":"ScoreWithLabel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/ScoreCellContent/ScoreWithLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,YAAY,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAA;CACxC;AAmCD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwCxD,CAAA"}

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/ScoreWithLabel.js

@@ -13,6 +13,7 @@ var _index = require("../../icons/MasteryLevelIcon/index.js");
 var Label = function Label(_ref) {
   var scoreDisplayFormat = _ref.scoreDisplayFormat,
     score = _ref.score,
+    totalScore = _ref.totalScore,
     text = _ref.text;
   if (scoreDisplayFormat === _constants.ScoreDisplayFormat.ICON_AND_LABEL) {
     return /*#__PURE__*/_react.default.createElement(_uiText.Text, {
@@ -24,22 +25,34 @@ var Label = function Label(_ref) {
       size: "legend"
     }, score);
   }
+  var isPercentFormat = scoreDisplayFormat === _constants.ScoreDisplayFormat.PERCENT;
+  var isPercentAndRatioFormat = scoreDisplayFormat === _constants.ScoreDisplayFormat.PERCENT_AND_RATIO;
+  if (isPercentFormat || isPercentAndRatioFormat) {
+    var percent = score != null && totalScore != null && totalScore !== 0 ? "".concat(Math.round(score / totalScore * 100), "%") : null;
+    return percent != null ? /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
+      gap: "x-small"
+    }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      weight: "bold"
+    }, percent), isPercentAndRatioFormat && /*#__PURE__*/_react.default.createElement(_uiText.Text, null, "(".concat(score, "/").concat(totalScore, ")"))) : null;
+  }
 };
 var ScoreWithLabel = exports.ScoreWithLabel = function ScoreWithLabel(_ref2) {
   var masteryLevel = _ref2.masteryLevel,
     score = _ref2.score,
+    totalScore = _ref2.totalScore,
     label = _ref2.label,
     _ref2$scoreDisplayFor = _ref2.scoreDisplayFormat,
     scoreDisplayFormat = _ref2$scoreDisplayFor === void 0 ? _constants.ScoreDisplayFormat.ICON_ONLY : _ref2$scoreDisplayFor;
+  var isPercentFormat = [_constants.ScoreDisplayFormat.PERCENT, _constants.ScoreDisplayFormat.PERCENT_AND_RATIO].includes(scoreDisplayFormat);
   var justifyItems = scoreDisplayFormat === _constants.ScoreDisplayFormat.ICON_ONLY ? 'center' : 'start';
   return /*#__PURE__*/_react.default.createElement(_uiFlex.Flex, {
     width: "100%",
     height: "100%",
     alignItems: "center",
     gap: "small",
-    padding: "none medium-small",
+    padding: "none small",
     justifyItems: justifyItems
-  }, /*#__PURE__*/_react.default.createElement(_index.MasteryLevelIcon, {
+  }, !isPercentFormat && /*#__PURE__*/_react.default.createElement(_index.MasteryLevelIcon, {
     masteryLevel: masteryLevel,
     width: "1.5rem",
     height: "1.5rem",
@@ -48,6 +61,7 @@ var ScoreWithLabel = exports.ScoreWithLabel = function ScoreWithLabel(_ref2) {
   }), /*#__PURE__*/_react.default.createElement(Label, {
     scoreDisplayFormat: scoreDisplayFormat,
     score: score,
+    totalScore: totalScore,
     text: label
   }));
 };

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/__tests__/ScoreWithLabel.test.js

@@ -41,6 +41,47 @@ describe('ScoreWithLabel', function () {
       expect(pointsText).toBeInTheDocument();
       expect(pointsText.closest('[class*="screenReaderContent"]')).not.toBeInTheDocument();
     });
+    it('shows percent with PERCENT format', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT
+      })));
+      expect(_react2.screen.getByText('75%')).toBeInTheDocument();
+    });
+    it('does not show mastery icon with PERCENT format', function () {
+      var _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, Object.assign({}, defaultProps, {
+          score: 3,
+          totalScore: 4,
+          scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT
+        }))),
+        container = _render.container;
+      expect(container.querySelector('svg')).not.toBeInTheDocument();
+    });
+    it('shows percent and ratio with PERCENT_AND_RATIO format', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT_AND_RATIO
+      })));
+      expect(_react2.screen.getByText('75%')).toBeInTheDocument();
+      expect(_react2.screen.getByText('(3/4)')).toBeInTheDocument();
+    });
+    it('does not show mastery icon with PERCENT_AND_RATIO format', function () {
+      var _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, Object.assign({}, defaultProps, {
+          score: 3,
+          totalScore: 4,
+          scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT_AND_RATIO
+        }))),
+        container = _render2.container;
+      expect(container.querySelector('svg')).not.toBeInTheDocument();
+    });
+    it('shows null when totalScore is missing with PERCENT format', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, Object.assign({}, defaultProps, {
+        scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT
+      })));
+      expect(_react2.screen.queryByText(/%/)).not.toBeInTheDocument();
+    });
   });
   it('uses default ICON_ONLY format when not specified', function () {
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, defaultProps));

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/__tests__/index.test.js

@@ -24,23 +24,31 @@ describe('ScoreCellContent', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn()
       })));
-      expect(_react2.screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
     it('shows action button when focus is true', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn(),
         focus: true
       })));
-      expect(_react2.screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('shows action button on hover (internal state)', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn()
       })));
-      expect(_react2.screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
       var viewElement = _react2.screen.getByTestId('score-cell-content');
       _react2.fireEvent.mouseEnter(viewElement);
-      expect(_react2.screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('hides action button on mouse leave (internal state)', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
@@ -48,16 +56,22 @@ describe('ScoreCellContent', function () {
       })));
       var viewElement = _react2.screen.getByTestId('score-cell-content');
       _react2.fireEvent.mouseEnter(viewElement);
-      expect(_react2.screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
       _react2.fireEvent.mouseLeave(viewElement);
-      expect(_react2.screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
     it('shows action button when hover prop is true (controlled)', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: jest.fn(),
         hover: true
       })));
-      expect(_react2.screen.getByTestId('score-cell-action-button')).toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '1'
+      });
     });
     it('does not update internal hover state when hover prop is controlled', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
@@ -68,7 +82,9 @@ describe('ScoreCellContent', function () {
       _react2.fireEvent.mouseEnter(viewElement);
 
       // Button should not appear because hover prop is controlled and set to false
-      expect(_react2.screen.queryByTestId('score-cell-action-button')).not.toBeInTheDocument();
+      expect(_react2.screen.getByTestId('score-cell-action-wrapper')).toHaveStyle({
+        opacity: '0'
+      });
     });
   });
   describe('action button interaction', function () {
@@ -82,12 +98,12 @@ describe('ScoreCellContent', function () {
       _react2.fireEvent.click(button);
       expect(onAction).toHaveBeenCalledTimes(1);
     });
-    it('disables action button when onAction is undefined', function () {
+    it('does not show action button when onAction is undefined', function () {
       (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
         onAction: void 0,
         focus: true
       })));
-      expect(_react2.screen.queryByTestId('score-cell-action-button')).toHaveAttribute('disabled');
+      expect(_react2.screen.queryByTestId('score-cell-action-wrapper')).not.toBeInTheDocument();
     });
   });
   describe('scoreDisplayFormat', function () {
@@ -110,5 +126,22 @@ describe('ScoreCellContent', function () {
       })));
       expect(_react2.screen.getByText('3')).toBeInTheDocument();
     });
+    it('renders percent with PERCENT format', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT
+      })));
+      expect(_react2.screen.getByText('75%')).toBeInTheDocument();
+    });
+    it('renders percent and ratio with PERCENT_AND_RATIO format', function () {
+      (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.ScoreCellContent, Object.assign({}, defaultProps, {
+        score: 3,
+        totalScore: 4,
+        scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT_AND_RATIO
+      })));
+      expect(_react2.screen.getByText('75%')).toBeInTheDocument();
+      expect(_react2.screen.getByText('(3/4)')).toBeInTheDocument();
+    });
   });
 });

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/index.d.ts

@@ -3,6 +3,8 @@ import { type ViewProps } from '@instructure/ui-view';
 import { type ScoreWithLabelProps } from './ScoreWithLabel';
 export type ScoreCellContentProps = ScoreWithLabelProps & {
     onAction?: () => void;
+    actionScreenReaderLabel?: string;
+    actionIcon?: React.ReactNode;
     focus?: boolean;
     hover?: boolean;
     background?: ViewProps['background'];

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/ScoreCellContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAI3D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAE3E,MAAM,MAAM,qBAAqB,GAAI,mBAAmB,GAAG;IACzD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAqE5D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/ScoreCellContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAG3D,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAA;AAE3E,MAAM,MAAM,qBAAqB,GAAI,mBAAmB,GAAG;IACzD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAiF5D,CAAA"}

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/index.js

@@ -12,14 +12,16 @@ var _formatMessage = _interopRequireDefault(require("format-message"));
 var _uiView = require("@instructure/ui-view");
 var _uiFlex = require("@instructure/ui-flex");
 var _uiButtons = require("@instructure/ui-buttons");
-var _uiIcons = require("@instructure/ui-icons");
 var _ScoreWithLabel = require("./ScoreWithLabel.js");
 var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref) {
   var masteryLevel = _ref.masteryLevel,
     scoreDisplayFormat = _ref.scoreDisplayFormat,
     score = _ref.score,
+    totalScore = _ref.totalScore,
     label = _ref.label,
     onAction = _ref.onAction,
+    actionScreenReaderLabel = _ref.actionScreenReaderLabel,
+    actionIcon = _ref.actionIcon,
     focus = _ref.focus,
     hoverControlled = _ref.hover,
     _ref$background = _ref.background,
@@ -29,7 +31,7 @@ var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref
     hoverInternal = _useState2[0],
     setHoverInternal = _useState2[1];
   var hover = hoverControlled !== null && hoverControlled !== void 0 ? hoverControlled : hoverInternal;
-  var showAction = focus || hover;
+  var showAction = onAction && (focus || hover);
   var handleMouseEnter = function handleMouseEnter() {
     if (hoverControlled === void 0) {
       setHoverInternal(true);
@@ -58,9 +60,16 @@ var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref
   }, /*#__PURE__*/_react.default.createElement(_ScoreWithLabel.ScoreWithLabel, {
     masteryLevel: masteryLevel,
     score: score,
+    totalScore: totalScore,
     scoreDisplayFormat: scoreDisplayFormat,
     label: label
-  }))), showAction && /*#__PURE__*/_react.default.createElement(_uiView.View, {
+  }))), onAction && /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "score-cell-action-wrapper",
+    style: {
+      opacity: showAction ? 1 : 0,
+      pointerEvents: showAction ? 'auto' : 'none'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_uiView.View, {
     position: "absolute",
     insetInlineEnd: "0",
     insetBlockStart: "50%",
@@ -68,14 +77,14 @@ var ScoreCellContent = exports.ScoreCellContent = function ScoreCellContent(_ref
       transform: 'translateY(-50%)'
     }
   }, /*#__PURE__*/_react.default.createElement(_uiButtons.IconButton, {
+    "aria-haspopup": "dialog",
     withBackground: false,
     withBorder: false,
     size: "small",
     margin: "0 xxx-small 0 0",
-    renderIcon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconExpandStartLine, null),
-    screenReaderLabel: (0, _formatMessage.default)('View Contributing Score Details'),
+    renderIcon: actionIcon,
+    screenReaderLabel: actionScreenReaderLabel || (0, _formatMessage.default)('View Contributing Score Details'),
     onClick: onAction,
-    disabled: !onAction,
     "data-testid": "score-cell-action-button"
-  })));
+  }))));
 };

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/index.stories.d.ts

@@ -6,6 +6,8 @@ type Story = StoryObj<typeof ScoreCellContent>;
 export declare const IconOnly: Story;
 export declare const IconAndScore: Story;
 export declare const IconAndLabel: Story;
+export declare const Percent: Story;
+export declare const PercentAndRatio: Story;
 export declare const OnAction: Story;
 export declare const FocusControlled: Story;
 //# sourceMappingURL=index.stories.d.ts.map

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/index.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/ScoreCellContent/index.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAUvC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAA;AAGD,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAA"}
+{"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Gradebook/gradebook-table/ScoreCellContent/index.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,gBAAgB,CAavC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAE9C,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KASrB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAS7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAA;AAGD,eAAO,MAAM,eAAe,EAAE,KAW7B,CAAA"}

package/lib/components/Gradebook/gradebook-table/ScoreCellContent/index.stories.js

@@ -4,15 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.OnAction = exports.IconOnly = exports.IconAndScore = exports.IconAndLabel = exports.FocusControlled = void 0;
+exports.default = exports.PercentAndRatio = exports.Percent = exports.OnAction = exports.IconOnly = exports.IconAndScore = exports.IconAndLabel = exports.FocusControlled = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _uiView = require("@instructure/ui-view");
 var _addonActions = require("@storybook/addon-actions");
+var _uiIcons = require("@instructure/ui-icons");
 var _constants = require("../../../../util/gradebook/constants.js");
 var _index = require("./index.js");
 var meta = {
   title: 'Gradebook/ScoreCellContent',
   component: _index.ScoreCellContent,
+  parameters: {
+    actions: {
+      argTypesRegex: ''
+    } // Disable auto-actions
+  },
   decorators: [function (Story) {
     return /*#__PURE__*/_react.default.createElement(_uiView.View, {
       width: "200px",
@@ -48,6 +54,26 @@ var IconAndLabel = exports.IconAndLabel = {
     background: 'secondary'
   }
 };
+var Percent = exports.Percent = {
+  args: {
+    scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT,
+    masteryLevel: 'mastery',
+    label: 'Mastery',
+    score: 3,
+    totalScore: 4,
+    background: 'secondary'
+  }
+};
+var PercentAndRatio = exports.PercentAndRatio = {
+  args: {
+    scoreDisplayFormat: _constants.ScoreDisplayFormat.PERCENT_AND_RATIO,
+    masteryLevel: 'mastery',
+    label: 'Mastery',
+    score: 3,
+    totalScore: 4,
+    background: 'secondary'
+  }
+};
 var OnAction = exports.OnAction = {
   args: {
     scoreDisplayFormat: _constants.ScoreDisplayFormat.ICON_AND_POINTS,
@@ -55,6 +81,7 @@ var OnAction = exports.OnAction = {
     label: 'Remediation',
     score: 1,
     onAction: (0, _addonActions.action)('onAction'),
+    actionIcon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconExpandStartLine, null),
     background: 'secondary'
   }
 };
@@ -67,6 +94,7 @@ var FocusControlled = exports.FocusControlled = {
     label: 'No Evidence',
     score: 0,
     onAction: (0, _addonActions.action)('onAction'),
+    actionIcon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconExpandStartLine, null),
     focus: true,
     background: 'secondary'
   }

package/lib/components/Gradebook/gradebook-table/StudentCell/__mocks__/mockData.d.ts

@@ -0,0 +1,13 @@
+export declare const mockStudent: {
+    id: string;
+    displayName: string;
+    sortableName: string;
+    status: string;
+};
+export declare const mockStudentLongName: {
+    id: string;
+    displayName: string;
+    sortableName: string;
+    status: string;
+};
+//# sourceMappingURL=mockData.d.ts.map

package/lib/components/Gradebook/gradebook-table/StudentCell/__mocks__/mockData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mockData.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Gradebook/gradebook-table/StudentCell/__mocks__/mockData.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;CAKvB,CAAA;AAED,eAAO,MAAM,mBAAmB;;;;;CAK/B,CAAA"}

package/lib/components/Gradebook/gradebook-table/StudentCell/__mocks__/mockData.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockStudentLongName = exports.mockStudent = void 0;
+var mockStudent = exports.mockStudent = {
+  id: '1',
+  displayName: 'John Smith',
+  sortableName: 'Smith, John',
+  status: 'active'
+};
+var mockStudentLongName = exports.mockStudentLongName = {
+  id: '2',
+  displayName: 'Alexander Montgomery Wellington Junior III',
+  sortableName: 'III, Alexander Montgomery Wellington Junior',
+  status: 'active'
+};