Merge pull request #636 from ripe-tech/v-pca/635-add-props-to-lightbox

635 - add title and subTitle props to lightbox

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-*
+* `title` and `subtitle` optional props to Lightbox component - [#635](https://github.com/ripe-tech/ripe-components-vue/issues/635)
 
 ### Changed
 

vue/components/ui/molecules/lightbox/lightbox.stories.js

@@ -18,6 +18,8 @@ storiesOf("Components/Molecules/Lightbox", module)
                 <lightbox
                     v-bind:image="image"
                     v-bind:visible="visible"
+                    v-bind:title="'brand'"
+                    v-bind:sub-title="'8 items'"
                     style="max-width: 200px">
                 </lightbox>
             `

vue/components/ui/molecules/lightbox/lightbox.vue

@@ -1,13 +1,19 @@
 <template>
     <div class="lightbox">
         <global-events v-on:keydown.esc="close" />
+        <div class="lightbox-title" v-if="title">
+            {{ title }}
+        </div>
         <image-ripe
             v-bind:src="image"
             v-bind:style="imageStyle"
             v-bind:alt="alt || ''"
             v-if="image"
             v-on:click="event => $emit('click', event)"
         />
+        <div class="lightbox-subtitle" v-if="subTitle">
+            {{ subTitle }}
+        </div>
         <transition name="fade">
             <div
                 class="lightbox-container"
@@ -34,6 +40,26 @@
     display: inline-block;
 }
 
+.lightbox-title {
+    color: #a4adb5;
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.6px;
+    margin-bottom: 6.5px;
+    text-transform: uppercase;
+}
+
+.lightbox-subtitle {
+    background-color: #e1e2ff;
+    border-radius: 4px;
+    color: #5f60c2;
+    font-size: 10px;
+    margin-top: 12.5px;
+    padding: 4px 6px;
+    text-align: center;
+    width: 55px;
+}
+
 .lightbox > img {
     cursor: pointer;
     height: inherit;
@@ -89,6 +115,14 @@
 export const Lightbox = {
     name: "lightbox",
     props: {
+        title: {
+            type: String,
+            default: null
+        },
+        subTitle: {
+            type: String,
+            default: null
+        },
         image: {
             type: String,
             default: null