Add outcomes components to storybook

closes OUT-4194

flag=none

Test-plan: - yarn install
 - yarn storybook
 - Navigate to Outcomes components
 - Press 'D' on the keyboard to bring up the controls
 - Verify that string / bool / number props can be edited easily
 - Verify all stories load (no red screens on a story)
   - OutcomeManagement will need additional work to mock out
     GraphQL requests. Some Failures on the story are anticipated
Change-Id: I7e5765c50c15ae1a5ea239946ebe12a72d73b614
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/257144
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Michael Brewer-Davis <mbd@instructure.com>
Reviewed-by: Augusto Callejas <acallejas@instructure.com>
QA-Review: Pat Renner <prenner@instructure.com>
Product-Review: Michael Brewer-Davis <mbd@instructure.com>

.storybook/main.js

@@ -34,7 +34,9 @@ module.exports = {
       path.resolve(__dirname, '../frontend_build/'),
       'node_modules'
     ]
-    config.resolve.alias['coffeescripts/str/i18nLolcalize.js'] = path.resolve(__dirname, '../app/coffeescripts/str/i18nLolcalize.js')
+    config.resolve.alias['coffeescripts'] = path.resolve(__dirname, '../app/coffeescripts'),
+    config.resolve.alias['jsx'] = path.resolve(__dirname, '../app/jsx'),
+    config.resolve.alias['node_modules-version-of-react-modal'] = require.resolve('react-modal')
     return config;
   }
-}
+}

app/jsx/outcomes/ConfirmMasteryModal.stories.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import ConfirmMasteryModal from './ConfirmMasteryModal'
+
+export default {
+  title: 'Examples/Outcomes/ConfirmMasteryModal',
+  component: ConfirmMasteryModal,
+  args: {
+    modalText: 'Are you sure you want to change your mastery?',
+    isOpen: true,
+    title: 'Modal Title',
+    confirmButtonText: 'Confirm Mastery Change'
+  }
+}
+
+const Template = args => <ConfirmMasteryModal {...args} />
+
+export const Default = Template.bind({})

app/jsx/outcomes/ConfirmOutcomeEditModal.stories.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import ConfirmOutcomeEditModal from './ConfirmOutcomeEditModal'
+
+export default {
+  title: 'Examples/Outcomes/ConfirmOutcomeEditModal',
+  component: ConfirmOutcomeEditModal,
+  args: {
+    changed: true,
+    assessed: true,
+    hasUpdateableRubrics: false,
+    modifiedFields: {
+      masteryPoints: true,
+      scoringMethod: true
+    },
+    onConfirm: () => {}
+  }
+}
+
+// Similar to showConfirmOutcomeEdit but without ReactDOM.render so we don't have to
+//  handle unmounting ourselves
+function showConfirmOutcomeEdit(props) {
+  const parent = document.createElement('div')
+  parent.setAttribute('class', 'confirm-outcome-edit-modal-container')
+  document.body.appendChild(parent)
+
+  function showConfirmOutcomeEditRef(modal) {
+    if (modal) modal.show()
+  }
+
+  return <ConfirmOutcomeEditModal {...props} parent={parent} ref={showConfirmOutcomeEditRef} />
+}
+
+const Template = args => showConfirmOutcomeEdit(args)
+
+export const Default = Template.bind({})

app/jsx/outcomes/CriterionInfo.stories.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import CriterionInfo from './CriterionInfo'
+
+export default {
+  title: 'Examples/Outcomes/CriterionInfo',
+  component: CriterionInfo
+}
+
+const Template = args => <CriterionInfo {...args} />
+
+export const Default = Template.bind({})

app/jsx/outcomes/ImportOutcomesModal.stories.js

@@ -0,0 +1,43 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import ImportOutcomesModal from './ImportOutcomesModal'
+
+export default {
+  title: 'Examples/Outcomes/ImportOutcomesModal',
+  component: ImportOutcomesModal
+}
+
+// Similar to showImportOutcomesModal but without ReactDOM.render so we don't have to
+//  handle unmounting ourselves
+const storybookImportOutcomesModal = props => {
+  const parent = document.createElement('div')
+  parent.setAttribute('class', 'import-outcomes-modal-container')
+  document.body.appendChild(parent)
+
+  function showImportOutcomesRef(modal) {
+    if (modal) modal.show()
+  }
+
+  return <ImportOutcomesModal {...props} parent={parent} ref={showImportOutcomesRef} />
+}
+
+const Template = _args => storybookImportOutcomesModal()
+
+export const Default = Template.bind({})

app/jsx/outcomes/Management/OutcomeDescription.stories.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import OutcomeDescription from './OutcomeDescription'
+
+export default {
+  title: 'Examples/Outcomes/OutcomeDescription',
+  component: OutcomeDescription
+}
+
+const Template = args => <OutcomeDescription {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  description: 'Normal Length Description'
+}
+
+export const reallyLongDescription = Template.bind({})
+reallyLongDescription.args = {
+  description: 'Lots of things to learn '.repeat(100)
+}

app/jsx/outcomes/Management/OutcomeGroupHeader.stories.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import OutcomeGroupHeader from './OutcomeGroupHeader'
+
+export default {
+  title: 'Examples/Outcomes/OutcomeGroupHeader',
+  component: OutcomeGroupHeader,
+  args: {
+    minWidth: 'auto'
+  }
+}
+
+const Template = args => <OutcomeGroupHeader {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  title: 'Outcome Group Header',
+  description: 'Outcome Group Description'
+}
+
+export const reallyLongDescription = Template.bind({})
+reallyLongDescription.args = {
+  title: 'Outcome Group With a Very Very Very Long Description',
+  description: 'Outcome Group Description '.repeat(100)
+}

app/jsx/outcomes/Management/OutcomeKebabMenu.stories.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import OutcomeKebabMenu from './OutcomeKebabMenu'
+
+export default {
+  title: 'Examples/Outcomes/OutcomeKebabMenu',
+  component: OutcomeKebabMenu,
+  args: {
+    menuTitle: 'Kebab Menu'
+  }
+}
+
+const Template = args => <OutcomeKebabMenu {...args} />
+
+export const Default = Template.bind({})

app/jsx/outcomes/ManagementHeader.stories.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import ManagementHeader from './ManagementHeader'
+
+export default {
+  title: 'Examples/Outcomes/ManagementHeader',
+  component: ManagementHeader
+}
+
+const Template = args => <ManagementHeader {...args} />
+
+export const Default = Template.bind({})

app/jsx/outcomes/MasteryCalculation/ProficiencyCalculation.stories.js

@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import ProficiencyCalculation from './ProficiencyCalculation'
+
+export default {
+  title: 'Examples/Outcomes/ProficiencyCalculation',
+  component: ProficiencyCalculation,
+  args: {
+    method: {
+      calculationMethod: 'decaying_average',
+      calculationInt: 65
+    },
+    canManage: true,
+    update: () => {},
+    onNotifyPendingChanges: () => {},
+    contextType: 'Account'
+  }
+}
+
+const Template = args => <ProficiencyCalculation {...args} />
+
+export const Default = Template.bind({})

app/jsx/outcomes/MasteryScale/ProficiencyRating.stories.js

@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import ProficiencyRating from './ProficiencyRating'
+
+export default {
+  title: 'Examples/Outcomes/ProficiencyRating',
+  component: ProficiencyRating,
+  args: {
+    color: '127A1B',
+    description: 'Exceeds Mastery',
+    descriptionError: undefined,
+    disableDelete: false,
+    focusField: 'description',
+    mastery: true,
+    onColorChange: () => {},
+    onDelete: () => {},
+    onDescriptionChange: () => {},
+    onMasteryChange: () => {},
+    onPointsChange: () => {},
+    points: '5',
+    pointsError: undefined,
+    isMobileView: false,
+    position: 0,
+    canManage: true
+  }
+}
+
+const Template = args => <ProficiencyRating {...args} />
+
+export const Default = Template.bind({})

app/jsx/outcomes/OutcomesImporter.stories.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import OutcomesImporter from './OutcomesImporter'
+
+export default {
+  title: 'Examples/Outcomes/OutcomesImporter',
+  component: OutcomesImporter,
+  args: {
+    hide: () => {},
+    disableOutcomeViews: () => {},
+    resetOutcomeViews: () => {},
+    importId: '1',
+    contextUrlRoot: '',
+    invokedImport: true
+  }
+}
+
+const Template = args => <OutcomesImporter {...args} />
+export const Default = Template.bind({})

app/jsx/outcomes/RoleList.stories.js

@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2020 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+import RoleList from './RoleList'
+
+export default {
+  title: 'Examples/Outcomes/RoleList',
+  component: RoleList,
+  args: {
+    description: 'Allowed Roles',
+    roles: [
+      {
+        id: '1',
+        role: 'Teacher_role',
+        label: 'Teacher',
+        base_role_type: 'Teacher'
+      },
+      {
+        id: '2',
+        role: 'Admin',
+        label: 'Admin',
+        base_role_type: 'Admin'
+      }
+    ]
+  }
+}
+
+const Template = args => <RoleList {...args} />
+
+export const Default = Template.bind({})