@titelmedia/bricks-gallery - npm Package Compare versions

Comparing version 2.7.4 to 2.8.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [2.8.0](https://github.com/titel-media/bricks-lerna/compare/v2.7.4...v2.8.0) (2024-05-10)
+
+### Features
+
+- added customCss to each component ([f4c92ef](https://github.com/titel-media/bricks-lerna/commit/f4c92efdb17166243d63446e95287d0198006db3))
+
 ## [2.7.4](https://github.com/titel-media/bricks-lerna/compare/v2.7.3...v2.7.4) (2024-05-02)
@@ -8,0 +14,0 @@

dist/galleries/drawer/index.js

@@ -28,5 +28,4 @@ "use strict";
       if (current) {
-        var _current$scrollTrigge;
-        current === null || current === void 0 ? void 0 : (_current$scrollTrigge = current.scrollTrigger) === null || _current$scrollTrigge === void 0 ? void 0 : _current$scrollTrigge.kill(true);
-        current === null || current === void 0 ? void 0 : current.pause(0).kill(true);
+        current?.scrollTrigger?.kill(true);
+        current?.pause(0).kill(true);
         _all.gsap.set(itemsRef.current[i].current, {
@@ -70,3 +69,3 @@ clearProps: true
   }, [initTimelines]);
-  return _react.default.createElement(_styles.Container, null, items === null || items === void 0 ? void 0 : items.map((item, i) => _react.default.createElement("div", {
+  return _react.default.createElement(_styles.Container, null, items?.map((item, i) => _react.default.createElement("div", {
     ref: itemsRef.current[i],
@@ -73,0 +72,0 @@ key: `image--${i}`

dist/galleries/horizontal/index.js

@@ -17,3 +17,4 @@ "use strict";
   fullHeight = false,
-  imagePadding = true
+  imagePadding = true,
+  customCss
 }) => {
@@ -43,3 +44,2 @@ const containerRef = (0, _react.useRef)(null);
   function showContent() {
-    var _items$, _items;
     if (items.length === 0) {
@@ -50,7 +50,8 @@ console.error('No images on the items list in the Horizontal Gallery.');
     return _react.default.createElement(_styles.Wrapper, {
-      ref: wrapperRef
+      ref: wrapperRef,
+      customCss: customCss
     }, _react.default.createElement(_styles.ContainerDiv, {
       ref: containerRef,
-      firstImgAspectRatio: ((_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.aspectRatio) || 0,
-      lastImgAspectRatio: ((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.aspectRatio) || 0,
+      firstImgAspectRatio: items[0]?.aspectRatio || 0,
+      lastImgAspectRatio: items[items.length - 1]?.aspectRatio || 0,
       fullHeight: fullHeight
@@ -57,0 +58,0 @@ }, items.map((item, i) => _react.default.createElement(_styles.ImageWrapper, {

dist/galleries/horizontal/styles.js

@@ -7,6 +7,6 @@ "use strict";
 exports.Wrapper = exports.ImageWrapper = exports.Image = exports.ContainerDiv = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Wrapper = _styledComponents.default.div`
+  ${props => props.customCss};
   position: relative;
@@ -13,0 +13,0 @@ height: 100vh;

dist/galleries/overlay/index.js

@@ -21,3 +21,4 @@ "use strict";
   enableAnimation,
-  setAnimationDuration
+  setAnimationDuration,
+  customCss
 }) => {
@@ -27,3 +28,3 @@ const wrapperRef = (0, _react.useRef)(null);
   const overlayRef = (0, _react.useRef)(null);
-  const fluid = (staticImage === null || staticImage === void 0 ? void 0 : staticImage.fluid) || (staticImage === null || staticImage === void 0 ? void 0 : staticImage.responsiveImage) || staticImage;
+  const fluid = staticImage?.fluid || staticImage?.responsiveImage || staticImage;
   overlayHorizontal = overlayHorizontal || 'center';
@@ -72,3 +73,4 @@ overlayVertical = overlayVertical || 'bottom';
   return _react.default.createElement(_styles.Wrapper, {
-    ref: wrapperRef
+    ref: wrapperRef,
+    customCss: customCss
   }, _react.default.createElement(_styles.ContainerWrapper, {
@@ -87,3 +89,3 @@ staticPosition: staticPosition
     overlayAlignment: overlayAlignment
-  }, items === null || items === void 0 ? void 0 : items.map((item, i) => {
+  }, items?.map((item, i) => {
     return _react.default.createElement(_styles.ImageItem, {
@@ -90,0 +92,0 @@ key: `item-${i}`,

dist/galleries/overlay/styles.js

@@ -15,11 +15,11 @@ "use strict";
       return (0, _styledComponents.css)`
-      justify-content: flex-start;
+        justify-content: flex-start;
       `;
     case 'center':
       return (0, _styledComponents.css)`
-      justify-content: center;
+        justify-content: center;
       `;
     case 'right':
       return (0, _styledComponents.css)`
-      justify-content: flex-end;
+        justify-content: flex-end;
       `;
@@ -34,11 +34,11 @@ default:
       return (0, _styledComponents.css)`
-      align-items: flex-start;
+        align-items: flex-start;
       `;
     case 'center':
       return (0, _styledComponents.css)`
-     align-items: center;
+        align-items: center;
       `;
     case 'bottom':
       return (0, _styledComponents.css)`
-      align-items: flex-end;
+        align-items: flex-end;
       `;
@@ -50,2 +50,3 @@ default:
 const Wrapper = _styledComponents.default.div`
+  ${props => props.customCss};
   align-items: center;
@@ -64,3 +65,3 @@ justify-content: center;
   max-width: 80vw;
-  @media (max-width: ${_breakpoints.BREAKPOINTS.xs}px) { 
+  @media (max-width: ${_breakpoints.BREAKPOINTS.xs}px) {
     min-height: ${props => {
@@ -107,3 +108,3 @@ return `calc(${100 / props.aspectRatio}vw - ${40 / props.aspectRatio}px);`;
 const ImageItem = _styledComponents.default.img`
-width: ${props => `calc(${10 * props.aspectRatio}vh - ${10 * props.aspectRatio}px);`};
+  width: ${props => `calc(${10 * props.aspectRatio}vh - ${10 * props.aspectRatio}px);`};
 `;
@@ -110,0 +111,0 @@ exports.ImageItem = ImageItem;

dist/index.js

@@ -27,3 +27,4 @@ "use strict";
   fullHeight,
-  imagePadding
+  imagePadding,
+  customCss
 }) => {
@@ -59,3 +60,4 @@ const getGalleryComponent = () => {
     fullHeight: fullHeight,
-    imagePadding: imagePadding
+    imagePadding: imagePadding,
+    customCss: customCss
   }, galleryType === 'overlay' && {
@@ -62,0 +64,0 @@ staticImage: staticImage,

lib/galleries/horizontal/index.js

@@ -11,2 +11,3 @@ import React, { useRef, useEffect } from 'react';
   imagePadding = true,
+  customCss,
 }) => {
@@ -46,3 +47,3 @@ const containerRef = useRef(null);
     return (
-      <Wrapper ref={wrapperRef}>
+      <Wrapper ref={wrapperRef} customCss={customCss}>
         <ContainerDiv
@@ -49,0 +50,0 @@ ref={containerRef}

lib/galleries/horizontal/styles.js

@@ -1,4 +0,5 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 export const Wrapper = styled.div`
+  ${props => props.customCss};
   position: relative;
@@ -5,0 +6,0 @@ height: 100vh;

lib/galleries/overlay/index.js

@@ -10,3 +10,3 @@ import React, { useRef, useEffect } from 'react';
   WrapperOverlay,
-  OverlayContainer
+  OverlayContainer,
 } from './styles';
@@ -23,3 +23,4 @@ import { BREAKPOINTS } from '@titelmedia/bricks-theme/lib/variables/breakpoints';
   enableAnimation,
-  setAnimationDuration
+  setAnimationDuration,
+  customCss,
 }) => {
@@ -33,7 +34,8 @@ const wrapperRef = useRef(null);
   overlayVertical = overlayVertical || 'bottom';
-  const isAnimationEnable = (enableAnimation === 'true' || enableAnimation === true)
+  const isAnimationEnable =
+    enableAnimation === 'true' || enableAnimation === true;
   // 'true' string is for storybook.
 
   useEffect(() => {
-    if(wrapperRef.current) {
+    if (wrapperRef.current) {
       const elements = overlayRef.current.querySelectorAll('img');
@@ -58,3 +60,3 @@ const mm = gsap.matchMedia();
           end: `+=${imageContainer.current.offsetHeight * 2}`,
-          batchMax: 1, 
+          batchMax: 1,
           onEnter: batch =>
@@ -70,3 +72,3 @@ gsap.to(batch, {
       });
-      if(isAnimationEnable) {
+      if (isAnimationEnable) {
         gsap.effects.fade(wrapperRef.current, {
@@ -76,3 +78,3 @@ duration: setAnimationDuration ? setAnimationDuration : 0.75,
         });
-       }
+      }
     }
@@ -82,6 +84,4 @@ }, []);
   return (
-    <Wrapper ref={wrapperRef}>
-      <ContainerWrapper
-        staticPosition={staticPosition}
-      >
+    <Wrapper ref={wrapperRef} customCss={customCss}>
+      <ContainerWrapper staticPosition={staticPosition}>
         {fluid && (
@@ -93,11 +93,20 @@ <ImageContainer ref={imageContainer} aspectRatio={fluid.aspectRatio}>
         <WrapperOverlay
-         overlayHorizontal={overlayHorizontal}
-         overlayVertical={overlayVertical}
-         >
-          <OverlayContainer ref={overlayRef} overlayAlignment={overlayAlignment}>
-          {items?.map((item, i) => {
-                    return (
-                      <ImageItem key={`item-${i}`} src={item.src} srcSet={item.srcSet} alt={item.src} aspectRatio={item.aspectRatio}/>
-                    );
-              })}
+          overlayHorizontal={overlayHorizontal}
+          overlayVertical={overlayVertical}
+        >
+          <OverlayContainer
+            ref={overlayRef}
+            overlayAlignment={overlayAlignment}
+          >
+            {items?.map((item, i) => {
+              return (
+                <ImageItem
+                  key={`item-${i}`}
+                  src={item.src}
+                  srcSet={item.srcSet}
+                  alt={item.src}
+                  aspectRatio={item.aspectRatio}
+                />
+              );
+            })}
           </OverlayContainer>
@@ -104,0 +113,0 @@ </WrapperOverlay>

lib/galleries/overlay/styles.js

 import styled, { css } from 'styled-components';
 import { BREAKPOINTS } from '@titelmedia/bricks-theme/lib/variables/breakpoints';
 
-const setPositionHorizontal = (position) => {
+const setPositionHorizontal = position => {
   switch (position) {
     case 'left':
       return css`
-      justify-content: flex-start;
+        justify-content: flex-start;
       `;
     case 'center':
       return css`
-      justify-content: center;
+        justify-content: center;
       `;
     case 'right':
       return css`
-      justify-content: flex-end;
+        justify-content: flex-end;
       `;
@@ -23,15 +23,15 @@ default:
 
-const setPositionVertical = (position) => {
+const setPositionVertical = position => {
   switch (position) {
     case 'top':
       return css`
-      align-items: flex-start;
+        align-items: flex-start;
       `;
     case 'center':
       return css`
-     align-items: center;
+        align-items: center;
       `;
     case 'bottom':
       return css`
-      align-items: flex-end;
+        align-items: flex-end;
       `;
@@ -44,2 +44,3 @@ default:
 export const Wrapper = styled.div`
+  ${props => props.customCss};
   align-items: center;
@@ -58,5 +59,7 @@ justify-content: center;
   max-width: 80vw;
-  @media (max-width: ${BREAKPOINTS.xs}px) { 
+  @media (max-width: ${BREAKPOINTS.xs}px) {
     min-height: ${props => {
-      return `calc(${100 / props.aspectRatio}vw - ${40 / props.aspectRatio}px);`;
+      return `calc(${100 / props.aspectRatio}vw - ${
+        40 / props.aspectRatio
+      }px);`;
     }};
@@ -101,4 +104,4 @@ }
 export const ImageItem = styled.img`
-width: ${props =>
-  `calc(${10 * props.aspectRatio}vh - ${10 * props.aspectRatio}px);`};
+  width: ${props =>
+    `calc(${10 * props.aspectRatio}vh - ${10 * props.aspectRatio}px);`};
 `;
@@ -121,4 +124,5 @@
   display: flex;
-  flex-direction: ${props => props.overlayAlignment === 'inline' ? 'row' : 'column'};
+  flex-direction: ${props =>
+    props.overlayAlignment === 'inline' ? 'row' : 'column'};
   align-items: center;
 `;

lib/index.js

@@ -21,2 +21,3 @@ import React from 'react';
   imagePadding,
+  customCss,
 }) => {
@@ -57,2 +58,3 @@ const getGalleryComponent = () => {
       imagePadding={imagePadding}
+      customCss={customCss}
       {...(galleryType === 'overlay' && {
@@ -59,0 +61,0 @@ staticImage: staticImage,

package.json

 {
   "name": "@titelmedia/bricks-gallery",
-  "version": "2.7.4",
+  "version": "2.8.0",
   "description": "> TODO: description",
@@ -33,3 +33,3 @@ "author": "highsnob",
   },
-  "gitHead": "150af17acacbe38c2ad0d21f655bc8974904b1e0"
+  "gitHead": "cd450ba1a3f420b2a08a822bfb0f5f73c9b0aee7"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

1146

increased by1.69%

Worsened metrics

Total package byte prevSize

94138

decreased by-1.77%

No dependency changes