Initial creation of Compose Modal Individual Checkbox fixes VICE-854

Change-Id: I9c15a3b7781f7b2b31a04b4c792a76ea395477d3
Reviewed-on: https://gerrit.instructure.com/c/canvas-lms/+/250715
Tested-by: Service Cloud Jenkins <svc.cloudjenkins@instructure.com>
Reviewed-by: Davis Hyer <dhyer@instructure.com>
QA-Review: Davis Hyer <dhyer@instructure.com>
Product-Review: Davis Hyer <dhyer@instructure.com>

client_apps/canvas_inbox/components/IndividualMessageCheckbox/IndividualMessageCheckbox.js

@@ -0,0 +1,38 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import {Checkbox} from '@instructure/ui-checkbox'
+
+const t = str => str
+
+export const IndividualMessageCheckbox = props => {
+  return (
+    <Checkbox label={t('Send an individual message to each recipient')} size="small" {...props} />
+  )
+}
+
+IndividualMessageCheckbox.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  checked: PropTypes.bool
+}
+
+IndividualMessageCheckbox.defaultProps = {
+  checked: false
+}

client_apps/canvas_inbox/components/IndividualMessageCheckbox/IndividualMessageCheckbox.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 {IndividualMessageCheckbox} from './IndividualMessageCheckbox'
+
+export default {
+  title: 'Playground/Individual Message Checkbox',
+  component: IndividualMessageCheckbox,
+  argTypes: {
+    checked: {control: 'boolean'},
+    onChange: {action: 'Changed'}
+  }
+}
+
+const Template = args => <IndividualMessageCheckbox {...args} />
+
+export const Unchecked = Template.bind({})
+
+export const Checked = Template.bind({})
+Checked.args = {
+  checked: true
+}

client_apps/canvas_inbox/components/IndividualMessageCheckbox/__tests__/IndividualMessageCheckbox.test.js

@@ -0,0 +1,55 @@
+/*
+ * 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 {render, fireEvent} from '@testing-library/react'
+import React from 'react'
+import {IndividualMessageCheckbox} from '../IndividualMessageCheckbox'
+
+const setup = props => {
+  const utils = render(<IndividualMessageCheckbox onChange={() => {}} {...props} />)
+  const individualCheckbox = utils.container.querySelector('input')
+  return {individualCheckbox}
+}
+
+describe('Button', () => {
+  it('renders', () => {
+    const {individualCheckbox} = setup()
+    expect(individualCheckbox).toBeTruthy()
+  })
+
+  it('should call onChange when typing occurs', () => {
+    const onChangeMock = jest.fn()
+    const {individualCheckbox} = setup({
+      onChange: onChangeMock
+    })
+    fireEvent.click(individualCheckbox)
+    expect(onChangeMock.mock.calls.length).toBe(1)
+  })
+
+  it('should show checkbox as checked when prop is present', () => {
+    const {individualCheckbox} = setup({
+      checked: true
+    })
+    expect(individualCheckbox.checked).toBe(true)
+  })
+
+  it('should not show checkbox as checked when prop is missing', () => {
+    const {individualCheckbox} = setup()
+    expect(individualCheckbox.checked).toBe(false)
+  })
+})

client_apps/canvas_inbox/package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@instructure/canvas-theme": "6",
     "@instructure/ui-a11y-content": "6",
+    "@instructure/ui-checkbox": "6",
     "@instructure/ui-flex": "6",
     "@instructure/ui-text": "6",
     "@instructure/ui-text-input": "6",