Merge pull request #642 from ripe-tech/v-pca/641-add-tiny-prop

641 - add tiny as part of size prop

CHANGELOG.md

@@ -10,7 +10,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)
-* `backgroundColor` optional prop to Input component - [#638](https://github.com/ripe-tech/ripe-components-vue/issues/638)
+* `tiny` as an option to the size prop in the Section Expandable component- [#641](https://github.com/ripe-tech/ripe-components-vue/issues/641)
 
 ### Changed
 

vue/components/ui/atoms/input/input.stories.js

@@ -102,8 +102,7 @@ storiesOf("Components/Atoms/Input", module)
                         v-bind:min-width="minWidth"
                         v-bind:height="height"
                         v-bind:debounce-delay="debounceDelay"
-                        v-bind:max-length="maxLength"
-                        v-bind:background-color="'#f9fAfd'" />
+                        v-bind:max-length="maxLength" />
                 </form-input>
                 <p>Text: {{ valueData }}</p>
             </div>

vue/components/ui/atoms/input/input.vue

@@ -158,10 +158,6 @@ export const Input = {
         maxLength: {
             type: Number,
             default: null
-        },
-        backgroundColor: {
-            type: String,
-            default: null
         }
     },
     mounted: function() {
@@ -223,8 +219,7 @@ export const Input = {
                 "min-width": this.minWidth === null ? null : `${this.minWidth}px`,
                 "font-size": this.fontSize === null ? null : `${this.fontSize}px`,
                 "font-weight": this.fontWeight === null ? null : `${this.fontWeight}`,
-                "text-align": this.align,
-                "background-color": this.backgroundColor === null ? null : this.backgroundColor
+                "text-align": this.align
             };
             return base;
         },

vue/components/ui/molecules/section-expandable/section-expandable.stories.js

@@ -21,6 +21,7 @@ storiesOf("Components/Molecules/Section Expandable", module)
                 default: select(
                     "Size",
                     {
+                        Tiny: "tiny",
                         Small: "small",
                         Medium: "medium",
                         Large: "large"

vue/components/ui/molecules/section-expandable/section-expandable.vue

@@ -35,6 +35,10 @@
     letter-spacing: 0.35px;
 }
 
+.section-expandable > .header > .title.title-tiny {
+    font-size: 12px;
+}
+
 .section-expandable > .header > .title.title-small {
     font-size: 14px;
 }