@speakapbv/dough-component-library 9.7.1 → 9.8.0

package/dist/components/image-comp/image.d.ts

@@ -14,6 +14,10 @@ export interface ImageProps {
     borderColor?: Colors;
     width?: string;
     height?: string;
+    ratio?: {
+        width: number;
+        height: number;
+    };
     opacity?: number;
     rounded?: boolean;
     borderRadius?: boolean;

package/dist/index.es.js

@@ -688,7 +688,7 @@ var Button = function (props) {
                 return "24px";
             }
         }
-        return "3px";
+        return "6px";
     };
     useEffect(function () {
         if (props.color && props.color !== colorVal && buttonRef.current) {
@@ -5075,7 +5075,7 @@ var ContentSlider = function (props) {
 };
 ContentSlider.displayName = "ContentSlider";
 
-var css_248z$I = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-viewer {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  background-size: 0px 0px;\n}\n.dough-image-viewer.dough-image-border-radius {\n  border-radius: 12px;\n}\n.dough-box.dough-box-border-radius .dough-image-viewer.dough-image-border-radius {\n  border-radius: 6px;\n}\n.dough-image-viewer.has-border {\n  padding: 3px;\n}\n.dough-image-viewer.has-border > .after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: -1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer > .dough-image-viewer-as-background {\n  display: none;\n}\n.dough-image-viewer > img {\n  position: relative;\n  z-index: 5;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  object-position: center center;\n  text-indent: -101%;\n  overflow: hidden;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > .dough-image-viewer-as-background {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: auto;\n  height: auto;\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n}\nhtml.dough-IE11 .dough-image-viewer.has-border > .dough-image-viewer-as-background {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  z-index: 1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  object-fit: contain;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > .dough-image-viewer-as-background {\n  background-size: contain;\n}\n.dough-image-viewer.size-extra-small {\n  width: 32px !important;\n  height: 32px !important;\n}\n.dough-image-viewer.size-extra-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-small {\n  width: 64px !important;\n  height: 64px !important;\n}\n.dough-image-viewer.size-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-normal {\n  width: 96px !important;\n  height: 96px !important;\n}\n.dough-image-viewer.size-normal > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-large {\n  width: 128px !important;\n  height: 128px !important;\n}\n.dough-image-viewer.size-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-extra-large {\n  width: 160px !important;\n  height: 160px !important;\n}\n.dough-image-viewer.size-extra-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.rounded {\n  border-radius: 100%;\n}\n.dough-image-viewer.rounded > .dough-image-viewer-as-background,\n.dough-image-viewer.rounded > .after,\n.dough-image-viewer.rounded > img {\n  border-radius: 100%;\n}\n.dough-image-viewer > .dough-image-viewer-content-container {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n}\nbody:not(.no-transition) .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-image-viewer.dough-image-have-children-text-color * {\n  color: inherit !important;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover > .dough-image-viewer-content-container {\n  opacity: 0;\n  pointer-events: none;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover:hover > .dough-image-viewer-content-container {\n  opacity: 1;\n}\n.dough-image-viewer:not(:hover) .dough-image-show-only-on-image-hover {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}";
+var css_248z$I = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-viewer {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  background-size: 0px 0px;\n}\n.dough-image-viewer.dough-image-border-radius {\n  border-radius: 12px;\n}\n.dough-box.dough-box-border-radius .dough-image-viewer.dough-image-border-radius {\n  border-radius: 6px;\n}\n.dough-image-viewer.has-border {\n  padding: 3px;\n}\n.dough-image-viewer.has-border > .after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: -1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer > .dough-image-viewer-as-background {\n  display: none;\n}\n.dough-image-viewer > img {\n  position: relative;\n  z-index: 5;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  object-position: center center;\n  text-indent: -101%;\n  overflow: hidden;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\n.dough-image-viewer.dough-image-with-ratio > img {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > .dough-image-viewer-as-background {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: auto;\n  height: auto;\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n}\nhtml.dough-IE11 .dough-image-viewer.has-border > .dough-image-viewer-as-background {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  z-index: 1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  object-fit: contain;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > .dough-image-viewer-as-background {\n  background-size: contain;\n}\n.dough-image-viewer.size-extra-small {\n  width: 32px !important;\n  height: 32px !important;\n}\n.dough-image-viewer.size-extra-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-small {\n  width: 64px !important;\n  height: 64px !important;\n}\n.dough-image-viewer.size-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-normal {\n  width: 96px !important;\n  height: 96px !important;\n}\n.dough-image-viewer.size-normal > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-large {\n  width: 128px !important;\n  height: 128px !important;\n}\n.dough-image-viewer.size-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-extra-large {\n  width: 160px !important;\n  height: 160px !important;\n}\n.dough-image-viewer.size-extra-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.rounded {\n  border-radius: 100%;\n}\n.dough-image-viewer.rounded > .dough-image-viewer-as-background,\n.dough-image-viewer.rounded > .after,\n.dough-image-viewer.rounded > img {\n  border-radius: 100%;\n}\n.dough-image-viewer > .dough-image-viewer-content-container {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n}\nbody:not(.no-transition) .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-image-viewer.dough-image-have-children-text-color * {\n  color: inherit !important;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover > .dough-image-viewer-content-container {\n  opacity: 0;\n  pointer-events: none;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover:hover > .dough-image-viewer-content-container {\n  opacity: 1;\n}\n.dough-image-viewer:not(:hover) .dough-image-show-only-on-image-hover {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}";
 styleInject(css_248z$I);
 
 var ImageContentShowOnHoverClassName = "dough-image-show-only-on-image-hover";
@@ -5087,12 +5087,15 @@ var Image = function (props) {
             "dough-image-border-radius": props.borderRadius,
             "has-border": props.border,
             rounded: props.rounded,
+            "dough-image-with-ratio": props.ratio,
             "dough-image-viewer-fit-to-view": props.fitToView,
             "dough-image-viewer-show-children-on-hover": props.showChildrenOnHover,
-        }), style: {
-            height: (_a = props.height) !== null && _a !== void 0 ? _a : "initial",
-            width: (_b = props.width) !== null && _b !== void 0 ? _b : "initial",
-        } }, props.dataAttributes),
+        }), style: __assign({ height: (_a = props.height) !== null && _a !== void 0 ? _a : "initial", width: (_b = props.width) !== null && _b !== void 0 ? _b : "initial" }, (props.ratio
+            ? {
+                paddingTop: (props.ratio.height * 100) /
+                    props.ratio.width + "%",
+            }
+            : {})) }, props.dataAttributes),
         React.createElement("img", { alt: "", src: props.src, style: {
                 opacity: props.opacity,
             } }),

package/dist/index.js

@@ -683,7 +683,7 @@ var Button = function (props) {
                 return "24px";
             }
         }
-        return "3px";
+        return "6px";
     };
     React.useEffect(function () {
         if (props.color && props.color !== colorVal && buttonRef.current) {
@@ -5059,7 +5059,7 @@ var ContentSlider = function (props) {
 };
 ContentSlider.displayName = "ContentSlider";
 
-var css_248z$I = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-viewer {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  background-size: 0px 0px;\n}\n.dough-image-viewer.dough-image-border-radius {\n  border-radius: 12px;\n}\n.dough-box.dough-box-border-radius .dough-image-viewer.dough-image-border-radius {\n  border-radius: 6px;\n}\n.dough-image-viewer.has-border {\n  padding: 3px;\n}\n.dough-image-viewer.has-border > .after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: -1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer > .dough-image-viewer-as-background {\n  display: none;\n}\n.dough-image-viewer > img {\n  position: relative;\n  z-index: 5;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  object-position: center center;\n  text-indent: -101%;\n  overflow: hidden;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > .dough-image-viewer-as-background {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: auto;\n  height: auto;\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n}\nhtml.dough-IE11 .dough-image-viewer.has-border > .dough-image-viewer-as-background {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  z-index: 1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  object-fit: contain;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > .dough-image-viewer-as-background {\n  background-size: contain;\n}\n.dough-image-viewer.size-extra-small {\n  width: 32px !important;\n  height: 32px !important;\n}\n.dough-image-viewer.size-extra-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-small {\n  width: 64px !important;\n  height: 64px !important;\n}\n.dough-image-viewer.size-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-normal {\n  width: 96px !important;\n  height: 96px !important;\n}\n.dough-image-viewer.size-normal > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-large {\n  width: 128px !important;\n  height: 128px !important;\n}\n.dough-image-viewer.size-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-extra-large {\n  width: 160px !important;\n  height: 160px !important;\n}\n.dough-image-viewer.size-extra-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.rounded {\n  border-radius: 100%;\n}\n.dough-image-viewer.rounded > .dough-image-viewer-as-background,\n.dough-image-viewer.rounded > .after,\n.dough-image-viewer.rounded > img {\n  border-radius: 100%;\n}\n.dough-image-viewer > .dough-image-viewer-content-container {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n}\nbody:not(.no-transition) .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-image-viewer.dough-image-have-children-text-color * {\n  color: inherit !important;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover > .dough-image-viewer-content-container {\n  opacity: 0;\n  pointer-events: none;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover:hover > .dough-image-viewer-content-container {\n  opacity: 1;\n}\n.dough-image-viewer:not(:hover) .dough-image-show-only-on-image-hover {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}";
+var css_248z$I = "/* COLORS */\n/* Typography*/\n/*Dennis should provide medium font size*/\n.dough-image-viewer {\n  display: inline-flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  background-size: 0px 0px;\n}\n.dough-image-viewer.dough-image-border-radius {\n  border-radius: 12px;\n}\n.dough-box.dough-box-border-radius .dough-image-viewer.dough-image-border-radius {\n  border-radius: 6px;\n}\n.dough-image-viewer.has-border {\n  padding: 3px;\n}\n.dough-image-viewer.has-border > .after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: -1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer > .dough-image-viewer-as-background {\n  display: none;\n}\n.dough-image-viewer > img {\n  position: relative;\n  z-index: 5;\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  object-position: center center;\n  text-indent: -101%;\n  overflow: hidden;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\n.dough-image-viewer.dough-image-with-ratio > img {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer > .dough-image-viewer-as-background {\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: auto;\n  height: auto;\n  background-position: center center;\n  background-size: cover;\n  background-repeat: no-repeat;\n}\nhtml.dough-IE11 .dough-image-viewer.has-border > .dough-image-viewer-as-background {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  bottom: 3px;\n  left: 3px;\n  z-index: 1;\n  width: auto;\n  height: auto;\n}\n.dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  object-fit: contain;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > img {\n  opacity: 0;\n}\nhtml.dough-IE11 .dough-image-viewer.dough-image-viewer-fit-to-view > .dough-image-viewer-as-background {\n  background-size: contain;\n}\n.dough-image-viewer.size-extra-small {\n  width: 32px !important;\n  height: 32px !important;\n}\n.dough-image-viewer.size-extra-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-small {\n  width: 64px !important;\n  height: 64px !important;\n}\n.dough-image-viewer.size-small > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-normal {\n  width: 96px !important;\n  height: 96px !important;\n}\n.dough-image-viewer.size-normal > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-large {\n  width: 128px !important;\n  height: 128px !important;\n}\n.dough-image-viewer.size-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.size-extra-large {\n  width: 160px !important;\n  height: 160px !important;\n}\n.dough-image-viewer.size-extra-large > img {\n  width: 100%;\n  height: 100%;\n}\n.dough-image-viewer.rounded {\n  border-radius: 100%;\n}\n.dough-image-viewer.rounded > .dough-image-viewer-as-background,\n.dough-image-viewer.rounded > .after,\n.dough-image-viewer.rounded > img {\n  border-radius: 100%;\n}\n.dough-image-viewer > .dough-image-viewer-content-container {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 10;\n  width: auto;\n  height: auto;\n}\nbody:not(.no-transition) .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: all 650ms cubic-bezier(0.25, 1, 0, 1);\n}\nbody.no-transition .dough-image-viewer > .dough-image-viewer-content-container {\n  transition: none 0ms linear !important;\n  transition-delay: 0ms !important;\n}\n.dough-image-viewer.dough-image-have-children-text-color * {\n  color: inherit !important;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover > .dough-image-viewer-content-container {\n  opacity: 0;\n  pointer-events: none;\n}\n.dough-image-viewer.dough-image-viewer-show-children-on-hover:hover > .dough-image-viewer-content-container {\n  opacity: 1;\n}\n.dough-image-viewer:not(:hover) .dough-image-show-only-on-image-hover {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}";
 styleInject(css_248z$I);
 
 var ImageContentShowOnHoverClassName = "dough-image-show-only-on-image-hover";
@@ -5071,12 +5071,15 @@ var Image = function (props) {
             "dough-image-border-radius": props.borderRadius,
             "has-border": props.border,
             rounded: props.rounded,
+            "dough-image-with-ratio": props.ratio,
             "dough-image-viewer-fit-to-view": props.fitToView,
             "dough-image-viewer-show-children-on-hover": props.showChildrenOnHover,
-        }), style: {
-            height: (_a = props.height) !== null && _a !== void 0 ? _a : "initial",
-            width: (_b = props.width) !== null && _b !== void 0 ? _b : "initial",
-        } }, props.dataAttributes),
+        }), style: __assign({ height: (_a = props.height) !== null && _a !== void 0 ? _a : "initial", width: (_b = props.width) !== null && _b !== void 0 ? _b : "initial" }, (props.ratio
+            ? {
+                paddingTop: (props.ratio.height * 100) /
+                    props.ratio.width + "%",
+            }
+            : {})) }, props.dataAttributes),
         React__default.createElement("img", { alt: "", src: props.src, style: {
                 opacity: props.opacity,
             } }),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@speakapbv/dough-component-library",
-    "version": "9.7.1",
+    "version": "9.8.0",
     "description": "DOUGH: Speakap React Component Library",
     "author": "Speakap",
     "license": "MIT",