feat: update tile to 1030 (#1189)

Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>
carbon-design-system · May 12, 2021 · b8a4fd6 · b8a4fd6
1 parent 71f7848
commit b8a4fd6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 21 deletions.
diff --git a/packages/core/src/components/cv-tile/_cv-tile-expandable.vue b/packages/core/src/components/cv-tile/_cv-tile-expandable.vue
@@ -1,27 +1,23 @@
 <template>
-  <div
-    data-tile="expandable"
+  <button
+    type="button"
+    :style="styleObject"
+    @click="toggle"
     :class="[
       `cv-tile-expandable ${carbonPrefix}--tile--expandable`,
       { [`${carbonPrefix}--tile--is-expanded`]: internalExpanded },
     ]"
-    ref="target"
-    tabindex="0"
-    :style="styleObject"
-    @click="toggle"
-    @keydown.enter.prevent="toggle"
-    @keydown.space.prevent
-    @keyup.space.prevent="toggle"
   >
-    <button type="button" :class="`${carbonPrefix}--tile__chevron`">
-      <ChevronDown16 />
-    </button>
     <div :class="`${carbonPrefix}--tile-content`">
       <span data-tile-atf :class="`${carbonPrefix}--tile-content__above-the-fold`" ref="aboveFold">
         <slot>
           <!-- Above the fold content here -->
         </slot>
       </span>
+      <div :class="`${carbonPrefix}--tile__chevron`">
+        <span>{{ chevronLabel }}</span>
+        <ChevronDown16 />
+      </div>
       <span
         :class="`${carbonPrefix}--tile-content__below-the-fold`"
         ref="belowFold"
@@ -32,7 +28,7 @@
         </slot>
       </span>
     </div>
-  </div>
+  </button>
 </template>
 
 <script>
@@ -44,6 +40,8 @@ export default {
   mixins: [carbonPrefixMixin, methodsMixin({ target: ['blur', 'focus'] })],
   props: {
     expanded: Boolean,
+    tileCollapsedLabel: String,
+    tileExpandedLabel: String,
   },
   components: { ChevronDown16 },
   data() {
@@ -62,6 +60,11 @@ export default {
       }
     },
   },
+  computed: {
+    chevronLabel() {
+      return this.internalExpanded ? this.tileExpandedLabel : this.tileCollapsedLabel;
+    },
+  },
   methods: {
     toggle(force) {
       let currentHeight = this.$el.getBoundingClientRect().height;

diff --git a/packages/core/src/components/cv-tile/cv-tile-notes.md b/packages/core/src/components/cv-tile/cv-tile-notes.md
@@ -31,7 +31,9 @@ The tile comes in four types selected by the kind attribute.
 ```HTML
 <cv-tile
   cv-type="expandable"
- expanded
+  expanded
+  tileCollapsedLabel,
+  tileExpandedLabel,
   >
   Tile content
   <template slot="below">Below the fold content</template>
@@ -41,14 +43,16 @@ The tile comes in four types selected by the kind attribute.
 ## Attributes
 
 - kind: 'standard', 'clickable', 'expandable' or 'selectable'
-- selected: Selectable type only sets initial state to selected
-- cv-expandable: Expandable type only sets initial state to expanded
+- selected: Selectable kind only sets initial state to selected
+- expanded: Expandable kind only sets initial state to expanded
+- tileCollapsedLabel: String expandable kind only default: 'Tile collapsed'
+- tileExpandedLabel: String expandable kind only default: 'Tile expanded'
 
-### Clickable Type
+### Clickable kind
 
-The clickable type is intended as a navigation link. Users should supply href or click handling.
+The clickable kind is intended as a navigation link. Users should supply href or click handling.
 
-### Selectable type is based on an input. Users should supply name and value if needed.
+### Selectable kind is based on an input. Users should supply name and value if needed.
 
 Has the following unique attribute
 

diff --git a/packages/core/src/components/cv-tile/cv-tile.vue b/packages/core/src/components/cv-tile/cv-tile.vue
@@ -4,6 +4,8 @@
     :class="[`cv-tile ${carbonPrefix}--tile`, { [`${carbonPrefix}--tile--light`]: isLight }]"
     :checked="selected"
     :expanded="expanded"
+    :tileCollapsedLabel="tileCollapsedLabel"
+    :tileExpandedLabel="tileExpandedLabel"
     v-bind="$attrs"
     v-on="$listeners"
     ref="tile"
@@ -43,6 +45,8 @@ export default {
   props: {
     expanded: Boolean,
     selected: Boolean,
+    tileCollapsedLabel: { type: String, default: 'Tile collapsed' },
+    tileExpandedLabel: { type: String, default: 'Tile expanded' },
     kind: {
       type: String,
       default: '',

diff --git a/storybook/stories/cv-tile-story.js b/storybook/stories/cv-tile-story.js
@@ -17,7 +17,7 @@ let preKnobs = {
   slotDefault: {
     group: 'slots',
     slot: 'default',
-    value: '<h1>Hello</h1><p>This is some tile content</p>',
+    value: '<h1>Hello</h1><p>This is some tile content.</p>',
   },
   slotBelow: {
     group: 'slots',
@@ -57,6 +57,18 @@ let preKnobs = {
     ],
     prop: 'href',
   },
+  tileCollapsed: {
+    group: 'attr',
+    type: text,
+    config: ['Tile collapsed label', ''], // consts.CONFIG], // fails when used with number in storybook 4.1.4
+    prop: 'tile-collapsed-label',
+  },
+  tileExpanded: {
+    group: 'attr',
+    type: text,
+    config: ['Tile expanded label', ''], // consts.CONFIG], // fails when used with number in storybook 4.1.4
+    prop: 'tile-expanded-label',
+  },
   vModel: {
     group: 'attr',
     value: `v-model="modelValue"`,
@@ -97,7 +109,7 @@ let variants = [
   },
   {
     name: 'expandable',
-    includes: ['slotDefault', 'light', 'slotBelow', 'expanded'],
+    includes: ['slotDefault', 'light', 'slotBelow', 'expanded', 'tileCollapsed', 'tileExpanded'],
     extra: { kind: { group: 'attr', value: 'kind="expandable"' } },
   },
   {