@treely/strapi-slices 7.1.2 → 7.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +1 -1
  2. package/dist/strapi-slices.cjs.development.js +9 -15
  3. package/dist/strapi-slices.cjs.development.js.map +1 -1
  4. package/dist/strapi-slices.cjs.production.min.js +1 -1
  5. package/dist/strapi-slices.cjs.production.min.js.map +1 -1
  6. package/dist/strapi-slices.esm.js +9 -15
  7. package/dist/strapi-slices.esm.js.map +1 -1
  8. package/package.json +2 -2
  9. package/src/slices/CarouselMarqueeBanner/CarouselMarqueeBanner.tsx +10 -23
  10. package/src/slices/CarouselMarqueeBanner/styles.ts +4 -2
  11. package/src/utils/getClosestRatio.ts +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@treely/strapi-slices",
3
- "version": "7.1.2",
3
+ "version": "7.1.3",
4
4
  "license": "MIT",
5
5
  "author": "Tree.ly FlexCo",
6
6
  "description": "@treely/strapi-slices is a open source library maintained by Tree.ly.",
@@ -134,7 +134,7 @@
134
134
  "adblock-detect-react": "^1.1.0",
135
135
  "axios": "^1.7.2",
136
136
  "axios-cache-interceptor": "^1.5.3",
137
- "boemly": "^7.0.0",
137
+ "boemly": "^7.2.0",
138
138
  "embla-carousel-auto-scroll": "^8.5.1",
139
139
  "embla-carousel-autoplay": "^8.5.1",
140
140
  "embla-carousel-react": "^8.5.1",
package/src/slices/CarouselMarqueeBanner/CarouselMarqueeBanner.tsx CHANGED
@@ -70,7 +70,6 @@ const CarouselMarqueeBannerContent: React.FC<CarouselMarqueeBannerProps> = ({
70
70
  {slice.logos.map((logo, index) => (
71
71
  <Box
72
72
  key={`${logo.id}-${index}`}
73
- width={isMobile ? '16' : '36'}
74
73
  flexShrink={0}
75
74
  transform="translate3d(0, 0, 0)"
76
75
  >
@@ -82,17 +81,12 @@ const CarouselMarqueeBannerContent: React.FC<CarouselMarqueeBannerProps> = ({
82
81
  >
83
82
  <Box
84
83
  position="relative"
85
- maxHeight="xl"
86
- height={`calc(${
87
- isMobile
88
- ? 'var(--boemly-sizes-16)'
89
- : 'var(--boemly-sizes-36)'
90
- } / ${getClosestRatio(
91
- logo.img.data.attributes.width,
92
- logo.img.data.attributes.height
93
- )})`}
94
- width={isMobile ? '16' : '36'}
95
- borderRadius="xl"
84
+ height={isMobile ? '16' : '36'}
85
+ width={`calc(var(--boemly-sizes-10)
86
+ * ${getClosestRatio(
87
+ logo.img.data.attributes.width,
88
+ logo.img.data.attributes.height
89
+ )})`}
96
90
  >
97
91
  <Image
98
92
  src={strapiMediaUrl(logo.img, 'large')}
@@ -100,7 +94,7 @@ const CarouselMarqueeBannerContent: React.FC<CarouselMarqueeBannerProps> = ({
100
94
  fill
101
95
  style={{
102
96
  objectFit: logo.objectFit || 'contain',
103
- borderRadius: 'var(--boemly-radii-xl)',
97
+ filter: 'grayscale(100%)',
104
98
  }}
105
99
  />
106
100
  </Box>
@@ -117,7 +111,6 @@ const CarouselMarqueeBannerContent: React.FC<CarouselMarqueeBannerProps> = ({
117
111
  {logosToRender.map((logo, index) => (
118
112
  <Box
119
113
  key={`${logo.id}-${index}`}
120
- width={isMobile ? '16' : '36'}
121
114
  flexShrink={0}
122
115
  transform="translate3d(0, 0, 0)"
123
116
  >
@@ -129,17 +122,11 @@ const CarouselMarqueeBannerContent: React.FC<CarouselMarqueeBannerProps> = ({
129
122
  >
130
123
  <Box
131
124
  position="relative"
132
- maxHeight="xl"
133
- height={`calc(${
134
- isMobile
135
- ? 'var(--boemly-sizes-16)'
136
- : 'var(--boemly-sizes-36)'
137
- } / ${getClosestRatio(
125
+ height={isMobile ? '16' : '36'}
126
+ width={`calc(var(--boemly-sizes-10) * ${getClosestRatio(
138
127
  logo.img.data.attributes.width,
139
128
  logo.img.data.attributes.height
140
129
  )})`}
141
- width={isMobile ? '16' : '36'}
142
- borderRadius="xl"
143
130
  >
144
131
  <Image
145
132
  src={strapiMediaUrl(logo.img, 'large')}
@@ -147,7 +134,7 @@ const CarouselMarqueeBannerContent: React.FC<CarouselMarqueeBannerProps> = ({
147
134
  fill
148
135
  style={{
149
136
  objectFit: logo.objectFit || 'contain',
150
- borderRadius: 'var(--boemly-radii-xl)',
137
+ filter: 'grayscale(100%)',
151
138
  }}
152
139
  />
153
140
  </Box>
package/src/slices/CarouselMarqueeBanner/styles.ts CHANGED
@@ -12,7 +12,9 @@ export const CarouselInnerContainer = styled(
12
12
  display: flex;
13
13
  justify-content: ${(props) =>
14
14
  props.logoCount < 5 ? 'center' : 'flex-start'};
15
- gap: var(--boemly-space-6);
15
+ gap: var(--boemly-space-24);
16
+ padding-right: var(--boemly-space-24);
17
+ padding-left: var(--boemly-space-24);
16
18
 
17
19
  @media screen and (max-width: ${BREAKPOINT_MD}) {
18
20
  width: calc(
@@ -28,7 +30,7 @@ export const LogoGrid = styled(motion.div)`
28
30
  display: flex;
29
31
  flex-wrap: wrap;
30
32
  justify-content: center;
31
- gap: var(--boemly-space-6);
33
+ gap: var(--boemly-space-24);
32
34
 
33
35
  @media screen and (max-width: ${BREAKPOINT_MD}) {
34
36
  display: grid;
package/src/utils/getClosestRatio.ts CHANGED
@@ -1,4 +1,4 @@
1
- const ALLOWED_RATIOS = [2 / 3, 1 / 1, 3 / 2];
1
+ const ALLOWED_RATIOS = [2 / 3, 1 / 1, 3 / 2, 2 / 1, 3 / 1, 4 / 1, 5 / 1]; // width / height
2
2
 
3
3
  export const getClosestRatio = (width: number, height: number): number => {
4
4
  const ratio = width / height;