Merge branch 'imprv/gw-3282-slack-button' into add-dark-mode-for-slack-button

src/client/js/components/PageComment/CommentEditor.jsx

@@ -356,6 +356,7 @@ class CommentEditor extends React.Component {
                   slackChannels={commentContainer.state.slackChannels}
                   onEnabledFlagChange={this.onSlackEnabledFlagChange}
                   onChannelChange={this.onSlackChannelsChange}
+                  id="idForComment"
                 />
               </div>
               )

src/client/js/components/SavePageControls.jsx

@@ -92,6 +92,7 @@ class SavePageControls extends React.Component {
               slackChannels={editorContainer.state.slackChannels}
               onEnabledFlagChange={this.slackEnabledFlagChangedHandler}
               onChannelChange={this.slackChannelsChangedHandler}
+              id="idForSavePageControl"
             />
           </div>
           )

src/client/js/components/SlackNotification.jsx

@@ -40,17 +40,17 @@ class SlackNotification extends React.Component {
 
     return (
       <div className="grw-slack-notification">
-        <div className="input-group  extended-setting">
+        <div className="input-group extended-setting">
           <label className="input-group-addon">
             <div className="custom-control custom-switch custom-switch-lg custom-switch-slack">
               <input
                 type="checkbox"
                 className="custom-control-input border-0"
-                id="slackSwitch"
+                id={this.props.id}
                 checked={this.props.isSlackEnabled}
                 onChange={this.updateCheckboxHandler}
               />
-              <label className="custom-control-label" htmlFor="slackSwitch">
+              <label className="custom-control-label" htmlFor={this.props.id}>
               </label>
             </div>
           </label>
@@ -80,6 +80,7 @@ SlackNotification.propTypes = {
   slackChannels: PropTypes.string.isRequired,
   onEnabledFlagChange: PropTypes.func,
   onChannelChange: PropTypes.func,
+  id: PropTypes.string,
 };
 
 export default withTranslation()(SlackNotification);

src/client/styles/scss/_on-edit.scss

@@ -119,28 +119,6 @@ body.on-edit {
     line-height: 1em;
   }
 
-  // .grw-slack-notification {
-  //   $input-height-slack: 1.8rem;
-  //   background-color: white;
-  //   border-color: $gray-200;
-
-  //   border-style: solid;
-  //   border-width: 1px;
-  //   border-radius: $input-height-slack/2 2px 2px $input-height-slack/2;
-
-  //   .form-control {
-  //     width: 80px;
-  //     height: $input-height-slack;
-  //     border: transparent;
-  //     @include media-breakpoint-up(sm) {
-  //       width: 130px;
-  //     }
-  //     @include media-breakpoint-up(md) {
-  //       width: 180px;
-  //     }
-  //   }
-  // }
-
   .grw-editor-navbar-bottom {
     height: $grw-editor-navbar-bottom-height;
 

src/client/styles/scss/atoms/_custom_control.scss

@@ -71,7 +71,13 @@ label.custom-control-label {
 }
 
 .custom-switch.custom-switch-slack {
+  $color-slack: #4b144c;
+
   .custom-control-label {
+    &::before {
+      background-color: $gray-200;
+      border-color: transparent;
+    }
     &::after {
       background-size: 15px;
     }

src/client/styles/scss/molecules/slack-notification.scss

@@ -7,7 +7,6 @@
   border-radius: $input-height-slack/2 2px 2px $input-height-slack/2;
 
   .form-control {
-    width: 80px;
     height: $input-height-slack;
     border: transparent;
     @include media-breakpoint-up(sm) {
@@ -18,6 +17,6 @@
     }
   }
 }
-
-// .grw-slack-notification-sm {
+//　TODO デザインの使用が確定して実装、本タスクのスコープ外
+// .grw-slack-notification-xd {
 // }