From 87532aa8ef4eb6ade6f19d20bfc8b14c0302064c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= <me@yunyoujun.cn>
Date: Thu, 29 Mar 2018 02:18:31 -0500
Subject: [PATCH] Card: add shadow attribute (#10418)

* Card: add shadow attribute

* Card: fix test file

* Card: modify shadow class

* Card: modify test file

* Card: fix props
---
 examples/docs/en-US/card.md        | 26 +++++++++++++++++++++++
 examples/docs/es/card.md           | 34 ++++++++++++++++++++++++++----
 examples/docs/zh-CN/card.md        | 26 +++++++++++++++++++++++
 packages/card/src/main.vue         | 11 +++++++---
 packages/theme-chalk/src/card.scss | 13 +++++++++++-
 test/unit/specs/card.spec.js       | 21 ++++++++++++++++++
 6 files changed, 123 insertions(+), 8 deletions(-)

diff --git a/examples/docs/en-US/card.md b/examples/docs/en-US/card.md
index 5c79c065d..a7c83d68a 100644
--- a/examples/docs/en-US/card.md
+++ b/examples/docs/en-US/card.md
@@ -183,8 +183,34 @@ export default {
 ```
 :::
 
+### Shadow
+
+Set the conditions that appear for shadow.
+
+:::demo Use attribute `shadow` to set shadow with `always`, `hover` or `never`.
+```html
+<el-row :gutter="12">
+  <el-col :span="8">
+    <el-card shadow="always">
+      Always
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="hover">
+      Hover
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="never">
+      Never
+  </el-col>
+</el-row>
+```
+:::
+
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
 | header | Title of the card. Also accepts a DOM passed by `slot#header` | string| — | — |
 | body-style | CSS style of body | object| — | { padding: '20px' } |
+| shadow | Status of shadow | string | always/hover/never | always |
diff --git a/examples/docs/es/card.md b/examples/docs/es/card.md
index a3766f62b..bf1a29ec2 100644
--- a/examples/docs/es/card.md
+++ b/examples/docs/es/card.md
@@ -185,8 +185,34 @@ export default {
 ```
 :::
 
+### Shadow
+
+Set the conditions that appear for shadow.
+
+:::demo Use attribute `shadow` to set shadow with `always`, `hover` or `never`.
+```html
+<el-row :gutter="12">
+  <el-col :span="8">
+    <el-card shadow="always">
+      Always
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="hover">
+      Hover
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="never">
+      Never
+  </el-col>
+</el-row>
+```
+:::
+
 ### Atributos
-| Atributo   | Descripción                              | Tipo   | Valores aceptados | Por defecto         |
-| ---------- | ---------------------------------------- | ------ | ----------------- | ------------------- |
-| header     | Titulo del card. También acepta DOM pasado por `slot#header` | string | —                 | —                   |
-| body-style | Estilo CSS del cuerpo                    | object | —                 | { padding: '20px' } |
+| Atributo   | Descripción                              | Tipo   | Valores aceptados  | Por defecto         |
+| ---------- | ---------------------------------------- | ------ | -----------------  | ------------------- |
+| header     | Titulo del card. También acepta DOM pasado por `slot#header` | string  | —                 | —                   |
+| body-style | Estilo CSS del cuerpo                    | object | —                  | { padding: '20px' } |
+| shadow     | Status of shadow                         | string | always/hover/never | always              |
diff --git a/examples/docs/zh-CN/card.md b/examples/docs/zh-CN/card.md
index a9e628beb..a66536845 100644
--- a/examples/docs/zh-CN/card.md
+++ b/examples/docs/zh-CN/card.md
@@ -184,8 +184,34 @@ export default {
 ```
 :::
 
+### 卡片阴影
+
+可对阴影的显示情况进行配置。
+
+:::demo `always`、`hover`、`never`，通过设置`shadow`属性来配置卡片阴影。
+```html
+<el-row :gutter="12">
+  <el-col :span="8">
+    <el-card shadow="always">
+      总是显示
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="hover">
+      鼠标悬浮时显示
+    </el-card>
+  </el-col>
+  <el-col :span="8">
+    <el-card shadow="never">
+      从不显示
+  </el-col>
+</el-row>
+```
+:::
+
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | header | 设置 header，也可以通过 `slot#header` 传入 DOM | string| — | — |
 | body-style | 设置 body 的样式| object| — | { padding: '20px' } |
+| shadow | 设置 shadow 状态| string | always/hover/never | always |
diff --git a/packages/card/src/main.vue b/packages/card/src/main.vue
index e678bbfd8..81e27c1ce 100644
--- a/packages/card/src/main.vue
+++ b/packages/card/src/main.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="el-card">
+  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
     <div class="el-card__header" v-if="$slots.header || header">
       <slot name="header">{{ header }}</slot>
     </div>
@@ -12,7 +12,12 @@
 <script>
   export default {
     name: 'ElCard',
-
-    props: ['header', 'bodyStyle']
+    props: {
+      header: {},
+      bodyStyle: {},
+      shadow: {
+        type: String
+      }
+    }
   };
 </script>
diff --git a/packages/theme-chalk/src/card.scss b/packages/theme-chalk/src/card.scss
index 77c1bfbf3..1a5b24781 100644
--- a/packages/theme-chalk/src/card.scss
+++ b/packages/theme-chalk/src/card.scss
@@ -6,8 +6,19 @@
   border: 1px solid $--card-border-color;
   background-color: $--color-white;
   overflow: hidden;
-  box-shadow: $--box-shadow-light;
   color: $--color-text-primary;
+  transition: 0.3s;
+
+  @include when(always-shadow) {
+    box-shadow: $--box-shadow-light;
+  }
+
+  @include when(hover-shadow) {
+    &:hover,
+    &:focus {
+      box-shadow: $--box-shadow-light;
+    }
+  }
 
   @include e(header) {
     padding: #{$--card-padding - 2 $--card-padding};
diff --git a/test/unit/specs/card.spec.js b/test/unit/specs/card.spec.js
index 3bd1ed32c..f80cfb2c4 100644
--- a/test/unit/specs/card.spec.js
+++ b/test/unit/specs/card.spec.js
@@ -32,4 +32,25 @@ describe('Card', () => {
 
     expect(vm.$el.querySelector('.el-card__body').style.padding).to.equal('10px');
   });
+
+  it('shadow', () => {
+    vm = createTest(Card, {
+      shadow: 'always'
+    });
+    expect(vm.$el.classList.contains('is-always-shadow')).to.be.true;
+  });
+
+  it('shadow', () => {
+    vm = createTest(Card, {
+      shadow: 'hover'
+    });
+    expect(vm.$el.classList.contains('is-hover-shadow')).to.be.true;
+  });
+
+  it('shadow', () => {
+    vm = createTest(Card, {
+      shadow: 'never'
+    });
+    expect(vm.$el.classList.contains('is-never-shadow')).to.be.true;
+  });
 });