@wix/design-system 1.2.0 → 1.4.0

package/dist/cjs/Button/ButtonCore/ButtonCore.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_2_0_ButtonCore";
+var _namespace_ = "wds_1_4_0_ButtonCore";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_ButtonCore__root","content":"wds_1_2_0_ButtonCore__content","prefix":"wds_1_2_0_ButtonCore__prefix","suffix":"wds_1_2_0_ButtonCore__suffix"};
+module.exports.classes = {"root":"wds_1_4_0_ButtonCore__root","content":"wds_1_4_0_ButtonCore__content","prefix":"wds_1_4_0_ButtonCore__prefix","suffix":"wds_1_4_0_ButtonCore__suffix"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Calendar/BaseCalendar/BaseCalendar.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_2_0_BaseCalendar";
+var _namespace_ = "wds_1_4_0_BaseCalendar";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_BaseCalendar__root","text-small-thin":"wds_1_2_0_StylableTypography__text-small-thin","text-tiny-thin":"wds_1_2_0_StylableTypography__text-tiny-thin","container":"wds_1_2_0_BaseCalendar__container","months":"wds_1_2_0_BaseCalendar__months","month":"wds_1_2_0_BaseCalendar__month","weekdays":"wds_1_2_0_BaseCalendar__weekdays","weekdaysRow":"wds_1_2_0_BaseCalendar__weekdaysRow","weekday":"wds_1_2_0_BaseCalendar__weekday","body":"wds_1_2_0_BaseCalendar__body","week":"wds_1_2_0_BaseCalendar__week","day":"wds_1_2_0_BaseCalendar__day","dayCircle":"wds_1_2_0_BaseCalendar__dayCircle","dayWrapper":"wds_1_2_0_BaseCalendar__dayWrapper","dayText":"wds_1_2_0_BaseCalendar__dayText","dayIndicationContainer":"wds_1_2_0_BaseCalendar__dayIndicationContainer"};
+module.exports.classes = {"root":"wds_1_4_0_BaseCalendar__root","text-small-thin":"wds_1_4_0_StylableTypography__text-small-thin","text-tiny-thin":"wds_1_4_0_StylableTypography__text-tiny-thin","container":"wds_1_4_0_BaseCalendar__container","months":"wds_1_4_0_BaseCalendar__months","month":"wds_1_4_0_BaseCalendar__month","weekdays":"wds_1_4_0_BaseCalendar__weekdays","weekdaysRow":"wds_1_4_0_BaseCalendar__weekdaysRow","weekday":"wds_1_4_0_BaseCalendar__weekday","body":"wds_1_4_0_BaseCalendar__body","week":"wds_1_4_0_BaseCalendar__week","day":"wds_1_4_0_BaseCalendar__day","dayCircle":"wds_1_4_0_BaseCalendar__dayCircle","dayWrapper":"wds_1_4_0_BaseCalendar__dayWrapper","dayText":"wds_1_4_0_BaseCalendar__dayText","dayIndicationContainer":"wds_1_4_0_BaseCalendar__dayIndicationContainer"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Calendar/Calendar.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_2_0_Calendar";
+var _namespace_ = "wds_1_4_0_Calendar";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_Calendar__root","month":"wds_1_2_0_BaseCalendar__month","day":"wds_1_2_0_BaseCalendar__day","header":"wds_1_2_0_Calendar__header"};
+module.exports.classes = {"root":"wds_1_4_0_Calendar__root","month":"wds_1_4_0_BaseCalendar__month","day":"wds_1_4_0_BaseCalendar__day","header":"wds_1_4_0_Calendar__header"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Calendar/DatePickerDropdown/DatePickerDropdown.st.css.js

@@ -5,7 +5,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_2_0_DatePickerDropdown";
+var _namespace_ = "wds_1_4_0_DatePickerDropdown";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_DatePickerDropdown__root","dropdown":"wds_1_2_0_DatePickerDropdown__dropdown","caption":"wds_1_2_0_DatePickerDropdown__caption"};
+module.exports.classes = {"root":"wds_1_4_0_DatePickerDropdown__root","dropdown":"wds_1_4_0_DatePickerDropdown__dropdown","caption":"wds_1_4_0_DatePickerDropdown__caption"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Calendar/DatePickerHead/DatePickerHead.st.css.js

@@ -8,7 +8,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_2_0_DatePickerHead";
+var _namespace_ = "wds_1_4_0_DatePickerHead";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -16,7 +16,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_DatePickerHead__root","yearAndMonthWrapper":"wds_1_2_0_DatePickerHead__yearAndMonthWrapper","caption":"wds_1_2_0_DatePickerHead__caption","monthDropdown":"wds_1_2_0_DatePickerHead__monthDropdown","yearDropdown":"wds_1_2_0_DatePickerHead__yearDropdown","arrowLeft":"wds_1_2_0_DatePickerHead__arrowLeft","arrowRight":"wds_1_2_0_DatePickerHead__arrowRight","arrowIcon":"wds_1_2_0_DatePickerHead__arrowIcon"};
+module.exports.classes = {"root":"wds_1_4_0_DatePickerHead__root","yearAndMonthWrapper":"wds_1_4_0_DatePickerHead__yearAndMonthWrapper","caption":"wds_1_4_0_DatePickerHead__caption","monthDropdown":"wds_1_4_0_DatePickerHead__monthDropdown","yearDropdown":"wds_1_4_0_DatePickerHead__yearDropdown","arrowLeft":"wds_1_4_0_DatePickerHead__arrowLeft","arrowRight":"wds_1_4_0_DatePickerHead__arrowRight","arrowIcon":"wds_1_4_0_DatePickerHead__arrowIcon"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Calendar/DatePickerHead/MonthDropdown/MonthDropdown.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../../stylable-cjs-runti
 
 
 
-var _namespace_ = "wds_1_2_0_MonthDropdown";
+var _namespace_ = "wds_1_4_0_MonthDropdown";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_MonthDropdown__root"};
+module.exports.classes = {"root":"wds_1_4_0_MonthDropdown__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Calendar/DatePickerHead/YearDropdown/YearDropdown.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../../stylable-cjs-runti
 
 
 
-var _namespace_ = "wds_1_2_0_YearDropdown";
+var _namespace_ = "wds_1_4_0_YearDropdown";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_YearDropdown__root"};
+module.exports.classes = {"root":"wds_1_4_0_YearDropdown__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/CalendarPanel/CalendarPanel.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_2_0_CalendarPanel";
+var _namespace_ = "wds_1_4_0_CalendarPanel";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_CalendarPanel__root","calendarWithPresets":"wds_1_2_0_CalendarPanel__calendarWithPresets","presets":"wds_1_2_0_CalendarPanel__presets","calendar":"wds_1_2_0_CalendarPanel__calendar","footer":"wds_1_2_0_CalendarPanel__footer"};
+module.exports.classes = {"root":"wds_1_4_0_CalendarPanel__root","calendarWithPresets":"wds_1_4_0_CalendarPanel__calendarWithPresets","presets":"wds_1_4_0_CalendarPanel__presets","calendar":"wds_1_4_0_CalendarPanel__calendar","footer":"wds_1_4_0_CalendarPanel__footer"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Card/Card.st.css.js

@@ -6,7 +6,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_2_0_Card";
+var _namespace_ = "wds_1_4_0_Card";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -14,7 +14,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_Card__root","card":"wds_1_2_0_Card__card","controls":"wds_1_2_0_Card__controls"};
+module.exports.classes = {"root":"wds_1_4_0_Card__root","card":"wds_1_4_0_Card__card","controls":"wds_1_4_0_Card__controls"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Card/Content/Content.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_2_0_CardContent";
+var _namespace_ = "wds_1_4_0_CardContent";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_CardContent__root"};
+module.exports.classes = {"root":"wds_1_4_0_CardContent__root"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Card/Header/Header.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_2_0_CardHeader";
+var _namespace_ = "wds_1_4_0_CardHeader";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_CardHeader__root","suffix":"wds_1_2_0_CardHeader__suffix","titleWrapper":"wds_1_2_0_CardHeader__titleWrapper","title":"wds_1_2_0_CardHeader__title"};
+module.exports.classes = {"root":"wds_1_4_0_CardHeader__root","suffix":"wds_1_4_0_CardHeader__suffix","titleWrapper":"wds_1_4_0_CardHeader__titleWrapper","title":"wds_1_4_0_CardHeader__title"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/Card/Subheader/Subheader.st.css.js

@@ -4,7 +4,7 @@ const { classesRuntime, statesRuntime } = require("./../../stylable-cjs-runtime.
 
 
 
-var _namespace_ = "wds_1_2_0_Subheader";
+var _namespace_ = "wds_1_4_0_Subheader";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -12,7 +12,7 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_Subheader__root","suffix":"wds_1_2_0_Subheader__suffix"};
+module.exports.classes = {"root":"wds_1_4_0_Subheader__root","suffix":"wds_1_4_0_Subheader__suffix"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};

package/dist/cjs/CardFolderTabs/CardFolderTabs.st.css.js

@@ -7,7 +7,7 @@ const { classesRuntime, statesRuntime } = require("./../stylable-cjs-runtime.js"
 
 
 
-var _namespace_ = "wds_1_2_0_CardFolderTabs";
+var _namespace_ = "wds_1_4_0_CardFolderTabs";
 var _style_ = /*#__PURE__*/ classesRuntime.bind(null, _namespace_);
 
 module.exports.cssStates = /*#__PURE__*/ statesRuntime.bind(null, _namespace_);
@@ -15,12 +15,12 @@ module.exports.style = /*#__PURE__*/ _style_;
 module.exports.st = /*#__PURE__*/ _style_;
 
 module.exports.namespace = _namespace_;
-module.exports.classes = {"root":"wds_1_2_0_CardFolderTabs__root","headerWrapper":"wds_1_2_0_CardFolderTabs__headerWrapper","button":"wds_1_2_0_CardFolderTabs__button","buttonText":"wds_1_2_0_CardFolderTabs__buttonText","tabContentWrapper":"wds_1_2_0_CardFolderTabs__tabContentWrapper"};
+module.exports.classes = {"root":"wds_1_4_0_CardFolderTabs__root","headerWrapper":"wds_1_4_0_CardFolderTabs__headerWrapper","button":"wds_1_4_0_CardFolderTabs__button","buttonText":"wds_1_4_0_CardFolderTabs__buttonText","tabContentWrapper":"wds_1_4_0_CardFolderTabs__tabContentWrapper"};
 module.exports.keyframes = {}; 
 module.exports.layers = {};
 module.exports.containers = {};
 module.exports.stVars = {}; 
-module.exports.vars = {"maxWidth":"--wds_1_2_0_CardFolderTabs-maxWidth"}; 
+module.exports.vars = {"maxWidth":"--wds_1_4_0_CardFolderTabs-maxWidth"}; 
 
 
 

package/dist/cjs/CardGalleryItem/CardGalleryItem.js

@@ -18,6 +18,8 @@ var _constants = require("./constants");
 var _CardGalleryItemSt = require("./CardGalleryItem.st.css.js");
 var _context = require("../WixStyleReactProvider/context");
 var _DragHandle = require("./DragHandle");
+var _Image = _interopRequireDefault(require("../Image"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _jsxFileName = "/home/builduser/work/31dad9578a4e06bb/packages/wix-design-system/dist/cjs/CardGalleryItem/CardGalleryItem.js";
 class CardGalleryItem extends _react.default.PureComponent {
   constructor() {
@@ -59,9 +61,10 @@ class CardGalleryItem extends _react.default.PureComponent {
     var {
       title,
       subtitle,
-      suffix
+      suffix,
+      imagePlacement
     } = this.props;
-    return !!(title || subtitle || suffix);
+    return !!(title || subtitle || suffix || imagePlacement === 'side');
   }
   _renderBadge() {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -70,7 +73,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 150,
+        lineNumber: 156,
         columnNumber: 7
       }
     }, this.props.badge);
@@ -88,7 +91,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 160,
+        lineNumber: 166,
         columnNumber: 7
       }
     }));
@@ -99,7 +102,10 @@ class CardGalleryItem extends _react.default.PureComponent {
       subtitle,
       size,
       suffix,
-      draggable
+      draggable,
+      imagePlacement,
+      backgroundImageNode,
+      backgroundImageUrl
     } = this.props;
     var heading = size === 'medium' ? /*#__PURE__*/_react.default.createElement(_Heading.default, {
       size: "small",
@@ -108,7 +114,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 174,
+        lineNumber: 189,
         columnNumber: 9
       }
     }, title) : /*#__PURE__*/_react.default.createElement(_Text.default, {
@@ -119,16 +125,17 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 178,
+        lineNumber: 193,
         columnNumber: 9
       }
     }, title);
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Card.default.Divider, {
+    var textSize = imagePlacement === 'side' ? 'tiny' : size === 'medium' ? 'small' : 'tiny';
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, imagePlacement === 'top' && /*#__PURE__*/_react.default.createElement(_Card.default.Divider, {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 185,
-        columnNumber: 9
+        lineNumber: 203,
+        columnNumber: 38
       }
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: _CardGalleryItemSt.classes.footer,
@@ -136,7 +143,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 186,
+        lineNumber: 204,
         columnNumber: 9
       }
     }, draggable && /*#__PURE__*/_react.default.createElement("div", {
@@ -144,26 +151,43 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 188,
+        lineNumber: 206,
+        columnNumber: 13
+      }
+    }, this._renderDragHandle()), imagePlacement === 'side' && /*#__PURE__*/_react.default.createElement("div", {
+      className: _CardGalleryItemSt.classes.footerImage,
+      "data-hook": _constants.DataHook.footerImage,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 211,
         columnNumber: 13
       }
-    }, this._renderDragHandle()), /*#__PURE__*/_react.default.createElement("div", {
+    }, backgroundImageUrl ? /*#__PURE__*/_react.default.createElement(_Image.default, {
+      src: backgroundImageUrl,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 216,
+        columnNumber: 17
+      }
+    }) : backgroundImageNode), /*#__PURE__*/_react.default.createElement("div", {
       className: _CardGalleryItemSt.classes.footerContent,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 192,
+        lineNumber: 222,
         columnNumber: 11
       }
     }, heading, /*#__PURE__*/_react.default.createElement(_Text.default, {
-      size: size === 'medium' ? 'small' : 'tiny',
+      size: textSize,
       secondary: true,
       ellipsis: true,
       dataHook: _constants.DataHook.Subtitle,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 194,
+        lineNumber: 224,
         columnNumber: 13
       }
     }, subtitle)), suffix && /*#__PURE__*/_react.default.createElement("div", {
@@ -171,7 +195,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 203,
+        lineNumber: 233,
         columnNumber: 22
       }
     }, suffix)));
@@ -190,7 +214,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 217,
+        lineNumber: 247,
         columnNumber: 7
       }
     }, _ref => {
@@ -205,7 +229,7 @@ class CardGalleryItem extends _react.default.PureComponent {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 219,
+          lineNumber: 249,
           columnNumber: 11
         }
       }, label);
@@ -216,7 +240,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 232,
+        lineNumber: 262,
         columnNumber: 7
       }
     }, disabled && disabledMessage ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
@@ -225,7 +249,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 234,
+        lineNumber: 264,
         columnNumber: 11
       }
     }, primaryAction) : primaryAction, secondaryActionProps && /*#__PURE__*/_react.default.createElement("div", {
@@ -233,7 +257,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 242,
+        lineNumber: 272,
         columnNumber: 11
       }
     }, /*#__PURE__*/_react.default.createElement(_TextButton.default, {
@@ -249,7 +273,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 243,
+        lineNumber: 273,
         columnNumber: 13
       }
     }, secondaryActionProps.label)));
@@ -260,7 +284,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 264,
+        lineNumber: 294,
         columnNumber: 7
       }
     }, this.props.settingsMenu);
@@ -279,7 +303,8 @@ class CardGalleryItem extends _react.default.PureComponent {
       dragging,
       droppable,
       tabIndex,
-      aspectRatio
+      aspectRatio,
+      imagePlacement
     } = this.props;
     var withFooter = !!this._hasFooter();
     var showActions = !dragging && !droppable && !!(primaryActionProps || secondaryActionProps);
@@ -292,7 +317,8 @@ class CardGalleryItem extends _react.default.PureComponent {
         size,
         dragging,
         draggable,
-        showActions
+        showActions,
+        imagePlacement
       }),
       "data-hook": dataHook,
       onFocus: this._onFocus,
@@ -300,7 +326,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 292,
+        lineNumber: 323,
         columnNumber: 7
       }
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -311,7 +337,7 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 305,
+        lineNumber: 337,
         columnNumber: 9
       }
     }, /*#__PURE__*/_react.default.createElement(_Card.default, {
@@ -320,16 +346,16 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 311,
+        lineNumber: 343,
         columnNumber: 11
       }
-    }, /*#__PURE__*/_react.default.createElement(_Proportion.default, {
+    }, imagePlacement === 'top' && /*#__PURE__*/_react.default.createElement(_Proportion.default, {
       aspectRatio: aspectRatio,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 312,
-        columnNumber: 13
+        lineNumber: 345,
+        columnNumber: 15
       }
     }, /*#__PURE__*/_react.default.createElement(_MediaOverlay.default, {
       media: backgroundImageUrl || backgroundImageNode || '',
@@ -340,16 +366,16 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 313,
-        columnNumber: 15
+        lineNumber: 346,
+        columnNumber: 17
       }
     }, showActions && /*#__PURE__*/_react.default.createElement(_MediaOverlay.default.Content, {
       visible: "hover",
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 321,
-        columnNumber: 19
+        lineNumber: 354,
+        columnNumber: 21
       }
     }, this._renderActions()), settingsMenu && showActions && /*#__PURE__*/_react.default.createElement(_MediaOverlay.default.Content, {
       visible: "hover",
@@ -357,16 +383,16 @@ class CardGalleryItem extends _react.default.PureComponent {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 326,
-        columnNumber: 19
+        lineNumber: 359,
+        columnNumber: 21
       }
     }, this._renderSettingsMenu())), badge && this._renderBadge(), /*#__PURE__*/_react.default.createElement("div", {
       className: _CardGalleryItemSt.classes.dragHandleFloatingWrapper,
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 332,
-        columnNumber: 15
+        lineNumber: 365,
+        columnNumber: 17
       }
     }, withFloatingDragHandle && this._renderDragHandle())), withFooter && this._renderFooter())));
   }
@@ -439,14 +465,17 @@ CardGalleryItem.propTypes = {
    * - Landscape - 4/3
    * - Custom number (e.g. 1.5)
    */
-  aspectRatio: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  aspectRatio: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  /** Sets placement of background image. */
+  imagePlacement: _propTypes.default.oneOf(['top', 'side'])
 };
 CardGalleryItem.defaultProps = {
   aspectRatio: 1.6,
   primaryActionProps: {
     onClick: () => {}
   },
-  size: 'medium'
+  size: 'medium',
+  imagePlacement: 'top'
 };
 var _default = CardGalleryItem;
 exports.default = _default;