Merge branch 'development' into feature/64-add-text-field

Author: NEKOYASAN

src/components/AddButton.vue

@@ -6,21 +6,7 @@
     :height="buttonSize"
     @click="onClick"
   >
-    <span v-if="iconSize === 'x-small'">
-      <v-icon :color="iconColor" x-small>{{ iconName }}</v-icon>
-    </span>
-    <span v-if="iconSize === 'small'">
-      <v-icon :color="iconColor" small>{{ iconName }}</v-icon>
-    </span>
-    <span v-if="iconSize === 'medium'">
-      <v-icon :color="iconColor" small>{{ iconName }}</v-icon>
-    </span>
-    <span v-if="iconSize === 'large'">
-      <v-icon :color="iconColor" small>{{ iconName }}</v-icon>
-    </span>
-    <span v-if="iconSize === 'x-large'">
-      <v-icon :color="iconColor" x-large>{{ iconName }}</v-icon>
-    </span>
+    <v-icon :size="iconSize" :color="iconColor">{{ iconName }}</v-icon>
   </v-btn>
 </template>
 
@@ -51,14 +37,9 @@ export default Vue.extend({
       default: '#004170'
     },
     iconSize: {
-      type: String,
+      type: [String, Number],
       required: false,
-      default: 'medium',
-      validator(value: string): boolean {
-        return ['x-small', 'small', 'medium', 'large', 'x-large'].includes(
-          value
-        )
-      }
+      default: '40'
     }
   },
   methods: {

src/components/LessonCaption.vue

@@ -52,12 +52,12 @@ export default Vue.extend({
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .lessoncaption-title {
   display: flex;
   flex-direction: column;
-  background: #015998;
-  color: #fff;
+  background: $color-base-color-07;
+  color: $color-white;
   height: 66px;
   border-radius: 22px !important;
   margin: 0 8px;
@@ -71,7 +71,7 @@ export default Vue.extend({
   font-size: 28px;
   padding: 10px 2px 0 2px;
   display: flex;
-  color: #fff !important;
+  color: $color-white !important;
   align-items: center;
   text-align: center;
 }
@@ -80,7 +80,7 @@ export default Vue.extend({
   font-size: 8px;
   margin-top: 0;
   display: flex;
-  color: #fff !important;
+  color: $color-white !important;
   align-items: center;
   text-align: center;
 }
@@ -91,7 +91,7 @@ export default Vue.extend({
   font-weight: normal;
   font-size: 10px;
   text-align: center;
-  color: #fff;
+  color: $color-white;
   flex: none;
   order: 4;
   align-self: center;

src/components/SimpleBottomSheet.vue

@@ -1,15 +1,20 @@
 <template>
-  <v-bottom-sheet v-model="sheet" persistent>
-    <v-container class="simple-bottom-sheet">
-      <v-row>
-        <v-col class="message">{{ message }}</v-col>
-        <v-col cols="2">
-          <span class="abb-button">
-            <AddButton @addButtonClicked="addButtonClicked" />
-          </span>
-        </v-col>
-      </v-row>
-    </v-container>
+  <v-bottom-sheet v-model="sheet" class="sheet" persistent scrollable>
+    <v-card class="card">
+      <v-card-title class="card-title" />
+      <v-card-text class="card-text">
+        <v-container class="container">
+          <v-row class="row">
+            <v-col class="col message">{{ message }}</v-col>
+            <v-col cols="2">
+              <span class="add-button">
+                <AddButton @addButtonClicked="addButtonClicked" />
+              </span>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+    </v-card>
   </v-bottom-sheet>
 </template>
 
@@ -23,6 +28,7 @@ export default Vue.extend({
   props: {
     message: {
       type: String,
+      default: 'メッセージ',
       required: true
     },
     expanded: {
@@ -38,32 +44,46 @@ export default Vue.extend({
   },
   methods: {
     addButtonClicked() {
-      this.sheet = !this.sheet
       this.$emit('addButtonClicked')
     }
   }
 })
 </script>
 
 <style lang="scss" scoped>
-.simple-bottom-sheet {
+.card {
   background-color: $color-base-color-07;
-  color: $color-white;
-  border-radius: 24px 24px 0 0;
+  border-radius: 24px 24px 0 0 !important;
+}
+
+.card-title {
+  padding: 8px !important;
+}
+.card-text {
+  padding: 0 !important;
+}
+
+.container {
+  padding: 0 16px 16px;
+}
+
+.row {
+  margin: 0;
+  padding: 0;
+}
+
+.col {
   padding: 0;
 }
 
 .message {
-  max-width: 90%;
-  padding: 1rem 1.5rem;
   align-self: center;
+  color: $color-white !important;
+  font-family: 'Noto Sans JP', sans-serif;
 }
 
 .add-button {
-  max-width: 20%;
-  margin: 0 12px;
-  padding: 10px;
-  align-self: end;
+  align-self: start;
   float: right;
 }
 </style>

src/components/__tests__/CalendarBar.spec.ts

@@ -62,9 +62,9 @@ describe('CalendarBar.vue', () => {
     // 2020-05-08T10:00:00.000+0900
     const dt = new Date(2020, 4, 8, 10, 0, 0, 0)
     const wrapper = mountFunction({
-      propsData: { date: dt, config: { view: 'V', startWeekOn: 'DOW' } }
+      propsData: { value: dt, config: { view: 'V', startWeekOn: 'DOW' } }
     })
-    expect(wrapper.props().date).toBe(dt)
+    expect(wrapper.props().value).toBe(dt)
     expect(wrapper.props().config.view).toBe('V')
     expect(wrapper.props().config.startWeekOn).toBe('DOW')
   })
@@ -87,7 +87,7 @@ describe('CalendarBar.vue', () => {
 
     wrapper = mountFunction({
       propsData: {
-        date: dt,
+        value: dt,
         config: { view: 'Day', startWeekOn: 'Sunday' }
       }
     })
@@ -97,7 +97,7 @@ describe('CalendarBar.vue', () => {
 
     wrapper = mountFunction({
       propsData: {
-        date: dt,
+        value: dt,
         config: { view: 'Day', startWeekOn: 'Monday' }
       }
     })
@@ -118,7 +118,7 @@ describe('CalendarBar.vue', () => {
       new Date(2020, 4, 9, 10, 0, 0, 0)
     )
     const props = (pDate: Date, pDow: string) => ({
-      date: pDate,
+      value: pDate,
       config: { view: 'Week', startWeekOn: pDow }
     })
     let dateListWindow
@@ -234,7 +234,7 @@ describe('CalendarBar.vue', () => {
       new Date(2020, 4, 9, 10, 0, 0, 0)
     )
     const props = (pDate: Date, pDow: string) => ({
-      date: pDate,
+      value: pDate,
       config: { view: 'Weekday', startWeekOn: pDow }
     })
     let dateListWindow
@@ -300,7 +300,7 @@ describe('CalendarBar.vue', () => {
 
     wrapper = mountFunction({
       propsData: {
-        date: dt,
+        value: dt,
         config: { view: 'Day', startWeekOn: 'Sunday' }
       }
     })
@@ -368,7 +368,7 @@ describe('CalendarBar.vue', () => {
 
     wrapper = mountFunction({
       propsData: {
-        date: dt,
+        value: dt,
         config: { view: 'Week', startWeekOn: 'Sunday' }
       }
     })
@@ -438,7 +438,7 @@ describe('CalendarBar.vue', () => {
 
     wrapper = mountFunction({
       propsData: {
-        date: dt,
+        value: dt,
         config: { view: 'Weekday', startWeekOn: 'Sunday' }
       }
     })