@lanaco/lnc-react-ui 4.0.212 → 4.0.213

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 (3) hide show
  1. package/dist/MasonryGeneralCardsSection.cjs +43 -15
  2. package/dist/MasonryGeneralCardsSection.js +83 -53
  3. package/package.json +1 -1
package/dist/MasonryGeneralCardsSection.cjs CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";const e=require("react/jsx-runtime"),p=require("react"),j=require("./Button.cjs"),s=require("./emotion-styled.browser.esm-BtEseadx.cjs"),i=require("./utils-CITgSxXe.cjs"),d=require("./breakpoints-CcVm-gVm.cjs"),b=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),n=require("./style-BAcV7F53.cjs"),y=s.styled.a`
1
+ "use strict";const e=require("react/jsx-runtime"),p=require("react"),j=require("./Button.cjs"),l=require("./emotion-styled.browser.esm-BtEseadx.cjs"),o=require("./utils-CITgSxXe.cjs"),d=require("./breakpoints-CcVm-gVm.cjs"),y=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),n=require("./style-BAcV7F53.cjs"),v=l.styled.a`
2
2
  text-decoration: none;
3
3
  display: flex;
4
4
  flex-direction: column;
@@ -8,6 +8,7 @@
8
8
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
9
9
  cursor: pointer;
10
10
  text-decoration: none;
11
+ overflow: hidden;
11
12
 
12
13
  grid-column: ${r=>{var t;return((t=r.position)==null?void 0:t.columnStart)||"1"}} /
13
14
  ${r=>{var t;return((t=r.position)==null?void 0:t.columnEnd)||"6"}};
@@ -21,19 +22,43 @@
21
22
  #000 98.39%
22
23
  )`};
23
24
 
25
+ &::after {
26
+ content: "";
27
+ position: absolute;
28
+ top: 0;
29
+ left: 0;
30
+ height: 0.5rem;
31
+ width: 100%;
32
+ background: ${r=>r.borderColor||"transparent"};
33
+ transform: scaleX(0);
34
+ transform-origin: left;
35
+ transition: transform 0.4s ease;
36
+ }
37
+
38
+ &:hover::after {
39
+ transform: scaleX(1); /* ide na 100% */
40
+ }
41
+
42
+
43
+
24
44
  & .wrapper__image {
25
45
  height: 100%;
26
46
  width: 100%;
27
47
  object-fit: cover;
28
48
  border-radius: 0.75rem;
29
49
  mix-blend-mode: multiply;
50
+ transition: var(--transiton, all 0.2s ease);
51
+
52
+ &:hover {
53
+ transform: scale(1.2);
54
+ }
30
55
  }
31
56
 
32
57
  & .wrapper__image--skeleton {
33
58
  width: 24.5rem;
34
59
  height: 30rem;
35
60
  border-radius: 0.75rem;
36
- background-color: ${i.linearGradientAnimation("-90deg")};
61
+ background-color: ${o.linearGradientAnimation("-90deg")};
37
62
  }
38
63
 
39
64
  & .wrapper__text {
@@ -53,7 +78,7 @@
53
78
  font-style: normal;
54
79
  font-weight: 500;
55
80
  line-height: 1.5rem;
56
- ${i.truncateTextInRows(2)}
81
+ ${o.truncateTextInRows(2)}
57
82
  }
58
83
 
59
84
  & .text__tag {
@@ -75,33 +100,36 @@
75
100
  font-style: normal;
76
101
  font-weight: 400;
77
102
  line-height: 1.25rem;
78
- ${i.truncateTextInRows(2)}
103
+ ${o.truncateTextInRows(2)}
79
104
  }
80
105
 
81
106
  & .text__action {
82
- background: var(--white, #fff);
83
- color: var(--neutral-600, #0f2a46);
107
+ background-color: var(--white, #fff);
108
+ color: var(--gray-600, #0f2a46);
109
+ border: 1px solid var(--gray-200, #e4e9f0);
110
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
111
+ 0 1px 2px 0 rgba(0, 0, 0, 0.06);
112
+ transition: var(--transiton, all 0.2s ease);
84
113
 
85
114
  &:hover {
86
- background: var(--primary-500, #f59e0b);
87
- color: var(--white, #fff);
115
+ background-color: var(--gray-200, #e4e9f0);
88
116
  }
89
117
  }
90
118
 
91
119
  & .text__title--skeleton {
92
- background-color: ${i.linearGradientAnimation("-90deg")};
120
+ background-color: ${o.linearGradientAnimation("-90deg")};
93
121
  height: 1rem;
94
122
  width: 9rem;
95
123
  }
96
124
 
97
125
  & .text__description--skeleton {
98
- background-color: ${i.linearGradientAnimation("-90deg")};
126
+ background-color: ${o.linearGradientAnimation("-90deg")};
99
127
  height: 1rem;
100
128
  width: 12rem;
101
129
  }
102
130
 
103
131
  & .text__action--skeleton {
104
- background-color: ${i.linearGradientAnimation("-90deg")};
132
+ background-color: ${o.linearGradientAnimation("-90deg")};
105
133
  height: 2rem;
106
134
  width: 9rem;
107
135
  }
@@ -114,7 +142,7 @@
114
142
  max-height: 14.5rem;
115
143
  }
116
144
  }
117
- `,k=p.forwardRef(({title:r,imageUrl:t,description:o,buttonText:a,onSelectCard:c=()=>{},className:m,position:g,tag:l,backgroundColor:h,buttonLink:x,LinkComponent:u},f)=>{const w=u||"a",_=b.useTheme();return e.jsx(e.Fragment,{children:e.jsxs(y,{ref:f,theme:_,className:m,position:g,backgroundColor:h,onClick:c,as:w,...u?{to:`/${x}`}:{href:`/${x}`},children:[e.jsx("img",{src:t,className:"wrapper__image"}),e.jsxs("div",{className:"wrapper__text",children:[l&&e.jsx("div",{className:"text__tag",children:l}),e.jsx("div",{className:"text__title",children:r}),i.isDefinedNotEmptyString(o)&&e.jsx("div",{className:"text__description",children:o}),i.isDefinedNotEmptyString(a)&&e.jsx(j,{text:a,className:"text__action"})]})]})})}),S=s.styled.div`
145
+ `,k=p.forwardRef(({title:r,imageUrl:t,description:i,buttonText:a,onSelectCard:c=()=>{},className:m,position:g,tag:s,backgroundColor:h,borderColor:u,buttonLink:x,LinkComponent:f},w)=>{const _=f||"a",b=y.useTheme();return e.jsx(e.Fragment,{children:e.jsxs(v,{ref:w,theme:b,className:m,position:g,backgroundColor:h,onClick:c,as:_,borderColor:u,...f?{to:`/${x}`}:{href:`/${x}`},children:[e.jsx("img",{src:t,className:"wrapper__image",loading:"lazy"}),e.jsxs("div",{className:"wrapper__text",children:[s&&e.jsx("div",{className:"text__tag",children:s}),e.jsx("div",{className:"text__title",children:r}),o.isDefinedNotEmptyString(i)&&e.jsx("div",{className:"text__description",children:i}),o.isDefinedNotEmptyString(a)&&e.jsx(j,{text:a,className:"text__action"})]})]})})}),S=l.styled.div`
118
146
  display: flex;
119
147
  flex-direction: column;
120
148
  gap: 1.5rem;
@@ -147,7 +175,7 @@
147
175
  }
148
176
  }
149
177
  }
150
- `,$=s.styled.div`
178
+ `,$=l.styled.div`
151
179
  display: grid;
152
180
  grid-template-columns: ${()=>"repeat(12, minmax(0, 1fr))"};
153
181
 
@@ -165,7 +193,7 @@
165
193
  height: 100%;
166
194
  max-height: 100%;
167
195
  }
168
- `,v=s.styled(n.SkeletonRowWrapper)`
196
+ `,C=l.styled(n.SkeletonRowWrapper)`
169
197
  @media ${d.down("S")} {
170
198
  flex-direction: column;
171
199
 
@@ -179,4 +207,4 @@
179
207
  flex-direction: column;
180
208
  }
181
209
  }
182
- `,G=({keyPrefix:r})=>e.jsxs(v,{children:[e.jsx(n.SkeletonColumnWrapper,{children:e.jsx(n.SkeletonLinePlaceholder,{height:"31.25rem",className:"skeleton__big"},`${r}-1`)}),e.jsxs(n.SkeletonColumnWrapper,{children:[e.jsxs(n.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{height:"15rem"},`${r}-2`),e.jsx(n.SkeletonLinePlaceholder,{height:"15rem"},`${r}-3`)]}),e.jsxs(n.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{height:"15rem"},`${r}-4`),e.jsx(n.SkeletonLinePlaceholder,{height:"15rem"},`${r}-5`)]})]})]}),N=({keyPrefix:r,isLoading:t=!1,fallbackComponent:o=e.jsx(e.Fragment,{}),children:a})=>e.jsx(p.Suspense,{fallbackComponent:o,children:t===!0?e.jsx(G,{keyPrefix:r}):a}),C=p.forwardRef(({title:r,items:t,isLoading:o=!1,limit:a=3,onSelectCard:c=()=>{},LinkComponent:m},g)=>e.jsxs(S,{ref:g,children:[e.jsx("div",{className:"regular-title",children:e.jsx("div",{className:"regular-title-text",children:e.jsx("span",{children:r})})}),e.jsx(N,{isLoading:o,keyPrefix:"masonry-general-cards-skeleton",children:e.jsx($,{limit:a,children:t&&(t==null?void 0:t.map((l,h)=>e.jsx(k,{...l,onSelectCard:()=>c(l),LinkComponent:m},`landing-page-masonry-general-card__${h+1}`)))})})]}));module.exports=C;
210
+ `,G=({keyPrefix:r})=>e.jsxs(C,{children:[e.jsx(n.SkeletonColumnWrapper,{children:e.jsx(n.SkeletonLinePlaceholder,{height:"31.25rem",className:"skeleton__big"},`${r}-1`)}),e.jsxs(n.SkeletonColumnWrapper,{children:[e.jsxs(n.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{height:"15rem"},`${r}-2`),e.jsx(n.SkeletonLinePlaceholder,{height:"15rem"},`${r}-3`)]}),e.jsxs(n.SkeletonRowWrapper,{noGradient:!0,children:[e.jsx(n.SkeletonLinePlaceholder,{height:"15rem"},`${r}-4`),e.jsx(n.SkeletonLinePlaceholder,{height:"15rem"},`${r}-5`)]})]})]}),N=({keyPrefix:r,isLoading:t=!1,fallbackComponent:i=e.jsx(e.Fragment,{}),children:a})=>e.jsx(p.Suspense,{fallbackComponent:i,children:t===!0?e.jsx(G,{keyPrefix:r}):a}),R=p.forwardRef(({title:r,items:t,isLoading:i=!1,limit:a=3,onSelectCard:c=()=>{},LinkComponent:m},g)=>e.jsxs(S,{ref:g,children:[e.jsx("div",{className:"regular-title",children:e.jsx("div",{className:"regular-title-text",children:e.jsx("span",{children:r})})}),e.jsx(N,{isLoading:i,keyPrefix:"masonry-general-cards-skeleton",children:e.jsx($,{limit:a,children:t&&(t==null?void 0:t.map((s,h)=>e.jsx(k,{...s,onSelectCard:()=>c(s),LinkComponent:m},`landing-page-masonry-general-card__${h+1}`)))})})]}));module.exports=R;
package/dist/MasonryGeneralCardsSection.js CHANGED
@@ -1,12 +1,12 @@
1
- import { jsx as r, Fragment as $, jsxs as i } from "react/jsx-runtime";
2
- import { forwardRef as v, Suspense as N } from "react";
3
- import C from "./Button.js";
4
- import { s } from "./emotion-styled.browser.esm-BNN1dTl3.js";
5
- import { w as d, n as _, l as w } from "./utils-B2fsQ6PS.js";
1
+ import { jsx as r, Fragment as v, jsxs as a } from "react/jsx-runtime";
2
+ import { forwardRef as $, Suspense as N } from "react";
3
+ import G from "./Button.js";
4
+ import { s as d } from "./emotion-styled.browser.esm-BNN1dTl3.js";
5
+ import { w as s, n as _, l as w } from "./utils-B2fsQ6PS.js";
6
6
  import { d as m } from "./breakpoints-ff0SIcV3.js";
7
- import { u as G } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
7
+ import { u as z } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
8
8
  import { S as f, b, a as l } from "./style-BwQ4djFC.js";
9
- const z = s.a`
9
+ const j = d.a`
10
10
  text-decoration: none;
11
11
  display: flex;
12
12
  flex-direction: column;
@@ -16,6 +16,7 @@ const z = s.a`
16
16
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06);
17
17
  cursor: pointer;
18
18
  text-decoration: none;
19
+ overflow: hidden;
19
20
 
20
21
  grid-column: ${(e) => {
21
22
  var t;
@@ -41,19 +42,43 @@ const z = s.a`
41
42
  #000 98.39%
42
43
  )`};
43
44
 
45
+ &::after {
46
+ content: "";
47
+ position: absolute;
48
+ top: 0;
49
+ left: 0;
50
+ height: 0.5rem;
51
+ width: 100%;
52
+ background: ${(e) => e.borderColor || "transparent"};
53
+ transform: scaleX(0);
54
+ transform-origin: left;
55
+ transition: transform 0.4s ease;
56
+ }
57
+
58
+ &:hover::after {
59
+ transform: scaleX(1); /* ide na 100% */
60
+ }
61
+
62
+
63
+
44
64
  & .wrapper__image {
45
65
  height: 100%;
46
66
  width: 100%;
47
67
  object-fit: cover;
48
68
  border-radius: 0.75rem;
49
69
  mix-blend-mode: multiply;
70
+ transition: var(--transiton, all 0.2s ease);
71
+
72
+ &:hover {
73
+ transform: scale(1.2);
74
+ }
50
75
  }
51
76
 
52
77
  & .wrapper__image--skeleton {
53
78
  width: 24.5rem;
54
79
  height: 30rem;
55
80
  border-radius: 0.75rem;
56
- background-color: ${d("-90deg")};
81
+ background-color: ${s("-90deg")};
57
82
  }
58
83
 
59
84
  & .wrapper__text {
@@ -99,29 +124,32 @@ const z = s.a`
99
124
  }
100
125
 
101
126
  & .text__action {
102
- background: var(--white, #fff);
103
- color: var(--neutral-600, #0f2a46);
127
+ background-color: var(--white, #fff);
128
+ color: var(--gray-600, #0f2a46);
129
+ border: 1px solid var(--gray-200, #e4e9f0);
130
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
131
+ 0 1px 2px 0 rgba(0, 0, 0, 0.06);
132
+ transition: var(--transiton, all 0.2s ease);
104
133
 
105
134
  &:hover {
106
- background: var(--primary-500, #f59e0b);
107
- color: var(--white, #fff);
135
+ background-color: var(--gray-200, #e4e9f0);
108
136
  }
109
137
  }
110
138
 
111
139
  & .text__title--skeleton {
112
- background-color: ${d("-90deg")};
140
+ background-color: ${s("-90deg")};
113
141
  height: 1rem;
114
142
  width: 9rem;
115
143
  }
116
144
 
117
145
  & .text__description--skeleton {
118
- background-color: ${d("-90deg")};
146
+ background-color: ${s("-90deg")};
119
147
  height: 1rem;
120
148
  width: 12rem;
121
149
  }
122
150
 
123
151
  & .text__action--skeleton {
124
- background-color: ${d("-90deg")};
152
+ background-color: ${s("-90deg")};
125
153
  height: 2rem;
126
154
  width: 9rem;
127
155
  }
@@ -134,47 +162,49 @@ const z = s.a`
134
162
  max-height: 14.5rem;
135
163
  }
136
164
  }
137
- `, j = v(
165
+ `, W = $(
138
166
  ({
139
167
  title: e,
140
168
  imageUrl: t,
141
- description: a,
142
- buttonText: n,
169
+ description: o,
170
+ buttonText: i,
143
171
  onSelectCard: c = () => {
144
172
  },
145
173
  className: g,
146
174
  position: h,
147
- tag: o,
175
+ tag: n,
148
176
  backgroundColor: p,
177
+ borderColor: y,
149
178
  buttonLink: u,
150
179
  LinkComponent: x
151
- }, y) => {
152
- const k = x || "a", S = G();
153
- return /* @__PURE__ */ r($, { children: /* @__PURE__ */ i(
154
- z,
180
+ }, k) => {
181
+ const S = x || "a", C = z();
182
+ return /* @__PURE__ */ r(v, { children: /* @__PURE__ */ a(
183
+ j,
155
184
  {
156
- ref: y,
157
- theme: S,
185
+ ref: k,
186
+ theme: C,
158
187
  className: g,
159
188
  position: h,
160
189
  backgroundColor: p,
161
190
  onClick: c,
162
- as: k,
191
+ as: S,
192
+ borderColor: y,
163
193
  ...x ? {
164
194
  to: `/${u}`
165
195
  } : {
166
196
  href: `/${u}`
167
197
  },
168
198
  children: [
169
- /* @__PURE__ */ r("img", { src: t, className: "wrapper__image" }),
170
- /* @__PURE__ */ i("div", { className: "wrapper__text", children: [
171
- o && /* @__PURE__ */ r("div", { className: "text__tag", children: o }),
199
+ /* @__PURE__ */ r("img", { src: t, className: "wrapper__image", loading: "lazy" }),
200
+ /* @__PURE__ */ a("div", { className: "wrapper__text", children: [
201
+ n && /* @__PURE__ */ r("div", { className: "text__tag", children: n }),
172
202
  /* @__PURE__ */ r("div", { className: "text__title", children: e }),
173
- w(a) && /* @__PURE__ */ r("div", { className: "text__description", children: a }),
174
- w(n) && /* @__PURE__ */ r(
175
- C,
203
+ w(o) && /* @__PURE__ */ r("div", { className: "text__description", children: o }),
204
+ w(i) && /* @__PURE__ */ r(
205
+ G,
176
206
  {
177
- text: n,
207
+ text: i,
178
208
  className: "text__action"
179
209
  }
180
210
  )
@@ -183,7 +213,7 @@ const z = s.a`
183
213
  }
184
214
  ) });
185
215
  }
186
- ), W = s.div`
216
+ ), M = d.div`
187
217
  display: flex;
188
218
  flex-direction: column;
189
219
  gap: 1.5rem;
@@ -216,7 +246,7 @@ const z = s.a`
216
246
  }
217
247
  }
218
248
  }
219
- `, M = s.div`
249
+ `, R = d.div`
220
250
  display: grid;
221
251
  grid-template-columns: ${() => "repeat(12, minmax(0, 1fr))"};
222
252
 
@@ -234,7 +264,7 @@ const z = s.a`
234
264
  height: 100%;
235
265
  max-height: 100%;
236
266
  }
237
- `, R = s(f)`
267
+ `, E = d(f)`
238
268
  @media ${m("S")} {
239
269
  flex-direction: column;
240
270
 
@@ -248,7 +278,7 @@ const z = s.a`
248
278
  flex-direction: column;
249
279
  }
250
280
  }
251
- `, E = ({ keyPrefix: e }) => /* @__PURE__ */ i(R, { children: [
281
+ `, T = ({ keyPrefix: e }) => /* @__PURE__ */ a(E, { children: [
252
282
  /* @__PURE__ */ r(b, { children: /* @__PURE__ */ r(
253
283
  l,
254
284
  {
@@ -257,42 +287,42 @@ const z = s.a`
257
287
  },
258
288
  `${e}-1`
259
289
  ) }),
260
- /* @__PURE__ */ i(b, { children: [
261
- /* @__PURE__ */ i(f, { noGradient: !0, children: [
290
+ /* @__PURE__ */ a(b, { children: [
291
+ /* @__PURE__ */ a(f, { noGradient: !0, children: [
262
292
  /* @__PURE__ */ r(l, { height: "15rem" }, `${e}-2`),
263
293
  /* @__PURE__ */ r(l, { height: "15rem" }, `${e}-3`)
264
294
  ] }),
265
- /* @__PURE__ */ i(f, { noGradient: !0, children: [
295
+ /* @__PURE__ */ a(f, { noGradient: !0, children: [
266
296
  /* @__PURE__ */ r(l, { height: "15rem" }, `${e}-4`),
267
297
  /* @__PURE__ */ r(l, { height: "15rem" }, `${e}-5`)
268
298
  ] })
269
299
  ] })
270
- ] }), T = ({
300
+ ] }), X = ({
271
301
  keyPrefix: e,
272
302
  isLoading: t = !1,
273
- fallbackComponent: a = /* @__PURE__ */ r($, {}),
274
- children: n
275
- }) => /* @__PURE__ */ r(N, { fallbackComponent: a, children: t === !0 ? /* @__PURE__ */ r(E, { keyPrefix: e }) : n }), K = v(
303
+ fallbackComponent: o = /* @__PURE__ */ r(v, {}),
304
+ children: i
305
+ }) => /* @__PURE__ */ r(N, { fallbackComponent: o, children: t === !0 ? /* @__PURE__ */ r(T, { keyPrefix: e }) : i }), K = $(
276
306
  ({
277
307
  title: e,
278
308
  items: t,
279
- isLoading: a = !1,
280
- limit: n = 3,
309
+ isLoading: o = !1,
310
+ limit: i = 3,
281
311
  onSelectCard: c = () => {
282
312
  },
283
313
  LinkComponent: g
284
- }, h) => /* @__PURE__ */ i(W, { ref: h, children: [
314
+ }, h) => /* @__PURE__ */ a(M, { ref: h, children: [
285
315
  /* @__PURE__ */ r("div", { className: "regular-title", children: /* @__PURE__ */ r("div", { className: "regular-title-text", children: /* @__PURE__ */ r("span", { children: e }) }) }),
286
316
  /* @__PURE__ */ r(
287
- T,
317
+ X,
288
318
  {
289
- isLoading: a,
319
+ isLoading: o,
290
320
  keyPrefix: "masonry-general-cards-skeleton",
291
- children: /* @__PURE__ */ r(M, { limit: n, children: t && (t == null ? void 0 : t.map((o, p) => /* @__PURE__ */ r(
292
- j,
321
+ children: /* @__PURE__ */ r(R, { limit: i, children: t && (t == null ? void 0 : t.map((n, p) => /* @__PURE__ */ r(
322
+ W,
293
323
  {
294
- ...o,
295
- onSelectCard: () => c(o),
324
+ ...n,
325
+ onSelectCard: () => c(n),
296
326
  LinkComponent: g
297
327
  },
298
328
  `landing-page-masonry-general-card__${p + 1}`
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lanaco/lnc-react-ui",
3
- "version": "4.0.212",
3
+ "version": "4.0.213",
4
4
  "description": "React component library",
5
5
  "type": "module",
6
6
  "keywords": [