ublo-lib 1.36.26 → 1.36.27

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 (6) hide show
  1. package/es/lbm/components/instant-search/google-results.d.ts +1 -1
  2. package/es/lbm/components/instant-search/google-results.d.ts.map +1 -1
  3. package/es/lbm/components/instant-search/google-results.js +14 -14
  4. package/es/lbm/components/instant-search/google-results.module.css +60 -120
  5. package/es/lbm/components/instant-search/results.js +4 -4
  6. package/package.json +1 -1
package/es/lbm/components/instant-search/google-results.d.ts CHANGED
@@ -5,6 +5,6 @@ type Props = {
5
5
  sendPlausibleGoal: (path: string) => void;
6
6
  faqsMaximized: boolean;
7
7
  };
8
- export default function GoogleProducts({ products, loading, sendPlausibleGoal, faqsMaximized, }: Props): import("react/jsx-runtime").JSX.Element;
8
+ export default function OTLinks({ products, loading, sendPlausibleGoal, faqsMaximized, }: Props): import("react/jsx-runtime").JSX.Element;
9
9
  export {};
10
10
  //# sourceMappingURL=google-results.d.ts.map
package/es/lbm/components/instant-search/google-results.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"google-results.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/instant-search/google-results.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,OAAO,EAAE,OAAO,CAAC;IAEjB,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,QAAQ,EACR,OAAO,EACP,iBAAiB,EACjB,aAAa,GACd,EAAE,KAAK,2CAuEP"}
1
+ {"version":3,"file":"google-results.d.ts","sourceRoot":"","sources":["../../../../src/lbm/components/instant-search/google-results.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B,OAAO,EAAE,OAAO,CAAC;IAEjB,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,aAAa,EAAE,OAAO,CAAC;CACxB,CAAC;AAIF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,iBAAiB,EACjB,aAAa,GACd,EAAE,KAAK,2CA2DP"}
package/es/lbm/components/instant-search/google-results.js CHANGED
@@ -1,25 +1,25 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import Image from "next/image";
3
2
  import Link from "ublo/link";
3
+ import * as Icons from "dt-design-system/es/icons";
4
4
  import Loader from "dt-design-system/es/loader";
5
5
  import * as Ripple from "dt-design-system/es/ripple";
6
- import css from "./products.module.css";
6
+ import css from "./google-results.module.css";
7
7
  const PLACEHOLDERS = [...new Array(2)];
8
- export default function GoogleProducts({ products, loading, sendPlausibleGoal, faqsMaximized, }) {
8
+ export default function OTLinks({ products, loading, sendPlausibleGoal, faqsMaximized, }) {
9
9
  if (faqsMaximized || !products || products.length === 0)
10
10
  return null;
11
11
  const createRipple = (e) => {
12
12
  Ripple.create(e);
13
13
  };
14
- return (_jsxs("div", { className: css.products, children: [loading &&
15
- PLACEHOLDERS.map((_, i) => {
16
- return (_jsx("div", { className: css.loaderContainer, children: _jsx(Loader, { className: css.loader, variant: "overlay" }) }, i));
17
- }), !loading &&
18
- products.map((product, i) => {
19
- const { htmlTitle, link, displayLink: productPageTitle, htmlSnippet, pagemap, } = product;
20
- const productTitle = htmlTitle.replaceAll("b>", "mark>");
21
- const productText = htmlSnippet.replaceAll("b>", "mark>");
22
- const image = pagemap ? pagemap.cse_thumbnail?.[0]?.src : undefined;
23
- return (_jsxs(Link, { className: css.product, href: link, target: "_blank", onClick: sendPlausibleGoal(link), onMouseDown: createRipple, children: [image && (_jsx(Image, { className: css.productImage, src: image, alt: htmlTitle, width: 220, height: 180, placeholder: "blur", blurDataURL: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAASABYDASIAAhEBAxEB/8QAGQABAAMBAQAAAAAAAAAAAAAAAAMEBgUH/8QAJBAAAgEDBAICAwAAAAAAAAAAAQIDAAQRBRIhMRNBFCIVYYH/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/EABcRAQEBAQAAAAAAAAAAAAAAAAABIRH/2gAMAwEAAhEDEQA/APTGvUkI+6kt0M91TvbtIY2cqWC949Vnvx+p/Onvnd5HjM5tlG0bNygJtzx6IOf1VuS0vRY7JpWuZvPC5cfTcFCBjgHAyVY465qlc65mo6vPcOYrSOYFTnKEZI/oNKl0KzubPUrtrjzmLxxrEZHLbjjDnHOOlx7wOaUzYLmNGtDSlIQtSlKQ/9k=" })), _jsxs("div", { className: css.productContent, children: [_jsx("div", { className: css.productPageTitle, dangerouslySetInnerHTML: { __html: productPageTitle } }), _jsx("div", { className: css.productTitle, dangerouslySetInnerHTML: { __html: productTitle } }), _jsx("div", { className: css.productText, dangerouslySetInnerHTML: { __html: productText } })] })] }, i));
24
- })] }));
14
+ const linksTitle = "Office du tourisme";
15
+ return (_jsxs("div", { className: css.linksSection, children: [_jsx("div", { className: css.linksTitle, children: linksTitle }), _jsxs("div", { className: css.links, children: [loading &&
16
+ PLACEHOLDERS.map((_, i) => {
17
+ return (_jsx("div", { className: css.loaderContainer, children: _jsx(Loader, { variant: "overlay" }) }, i));
18
+ }), !loading &&
19
+ products.map((product, i) => {
20
+ const { htmlTitle, link, htmlSnippet } = product;
21
+ const productTitle = htmlTitle.replaceAll("b>", "mark>");
22
+ const productText = htmlSnippet.replaceAll("b>", "mark>");
23
+ return (_jsxs(Link, { className: css.link, href: link, target: "_blank", onClick: sendPlausibleGoal(link), onMouseDown: createRipple, children: [_jsx(Icons.Globe, { className: css.linkIcon }), _jsxs("div", { className: css.linkContent, children: [_jsxs("div", { className: css.linkTitleContainer, children: [_jsx("div", { className: css.linkTitle, dangerouslySetInnerHTML: { __html: productTitle } }), _jsx(Icons.ExternalLink, { className: css.linkIcon })] }), productText && (_jsx("div", { className: css.linkText, dangerouslySetInnerHTML: { __html: productText } }))] })] }, i));
24
+ })] })] }));
25
25
  }
package/es/lbm/components/instant-search/google-results.module.css CHANGED
@@ -1,75 +1,79 @@
1
- .products {
2
- flex: 1 1 100%;
3
- display: grid;
4
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
5
- align-content: flex-start;
6
- gap: 16px;
7
- padding: 12px;
1
+ .linksSection {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 6px;
8
5
  }
9
6
 
10
- div + .products {
11
- padding-top: 4px;
7
+ .linksTitle {
8
+ position: sticky;
9
+ top: 16px;
10
+ font-size: 17px;
11
+ font-weight: 700;
12
+ padding: 3px 8px;
13
+ background-color: var(--ds-grey-200, #efefef);
14
+ border-radius: var(--ds-radius-100, 6px);
15
+ z-index: 1;
12
16
  }
13
17
 
14
- .products.empty {
15
- position: absolute;
16
- top: 0;
17
- left: 0;
18
- width: 100%;
19
- height: 100%;
20
- align-content: center;
21
- padding-bottom: 120px;
22
- pointer-events: none;
18
+ @media (min-width: 730px) {
19
+ .linksTitle {
20
+ top: 0;
21
+ }
23
22
  }
24
23
 
25
- .noProduct {
26
- grid-column: 1 / -1;
24
+ .links {
27
25
  display: flex;
28
26
  flex-direction: column;
29
- align-items: center;
30
- justify-content: center;
31
- gap: 18px;
32
- color: var(--ds-grey-400, #9d9d9d);
33
- text-align: center;
34
- font-size: 17px;
35
- }
36
-
37
- .noProductIcon {
38
- flex: 0 0 140px;
39
- width: 140px;
40
- height: 140px;
27
+ gap: 6px;
41
28
  }
42
29
 
43
30
  .loaderContainer {
44
31
  position: relative;
45
32
  width: 100%;
46
- height: 290px;
47
- border-radius: var(--ds-input-radius, var(--ds-radius-200, 8px));
48
- }
49
-
50
- .loader {
51
- background: linear-gradient(
52
- -45deg,
53
- var(--ds-grey-300, #d4d4d4),
54
- var(--ds-grey-400, #d2d2d2),
55
- var(--ds-grey-200, #efefef),
56
- var(--ds-grey-400, #d2d2d2)
57
- );
58
- background-size: 400% 400%;
59
- background-position: 0% 50%;
33
+ height: 44px;
34
+ border-radius: var(--ds-radius-100, 6px);
60
35
  }
61
36
 
62
- .product {
37
+ .link {
63
38
  position: relative;
64
39
  display: flex;
65
- flex-direction: column;
40
+ gap: 10px;
41
+ padding: 6px;
66
42
  color: var(--ds-grey-500, #484848);
67
- background-color: var(--ds-grey-000, #fff);
68
- border-radius: var(--ds-input-radius, var(--ds-radius-200, 8px));
69
- border: var(--ds-input-border, 1px solid var(--ds-grey-300, #d7d7d7));
43
+ border-radius: var(--ds-radius-100, 6px);
44
+ transition: background-color 160ms
45
+ var(--ds-transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
46
+ }
47
+
48
+ .link:is(:hover, :focus) {
49
+ background-color: var(--ds-grey-100, #f5f5f5);
50
+ }
51
+
52
+ .linkIcon {
53
+ flex: 0 0 16px;
54
+ width: 16px;
55
+ height: 16px;
56
+ margin-top: 2px;
57
+ fill: currentColor;
58
+ }
59
+
60
+ .linkContent {
61
+ flex: 1 1 auto;
62
+ }
63
+
64
+ .linkTitleContainer {
65
+ display: flex;
66
+ flex-direction: row;
67
+ align-items: center;
68
+ justify-content: space-between;
69
+ gap: 4px;
70
+ }
71
+
72
+ .linkTitle {
73
+ font-size: 15px;
70
74
  }
71
75
 
72
- .product mark {
76
+ .link mark {
73
77
  position: relative;
74
78
  display: inline-block;
75
79
  font-weight: 700;
@@ -77,7 +81,7 @@ div + .products {
77
81
  background-color: transparent;
78
82
  }
79
83
 
80
- .product mark::before {
84
+ .link mark::before {
81
85
  content: "";
82
86
  position: absolute;
83
87
  top: 0;
@@ -89,76 +93,12 @@ div + .products {
89
93
  opacity: 0.15;
90
94
  }
91
95
 
92
- .productImage {
93
- width: 100%;
94
- height: 180px;
95
- object-fit: cover;
96
- border-radius: var(--ds-input-radius, var(--ds-radius-200, 8px))
97
- var(--ds-input-radius, var(--ds-radius-200, 8px)) 0 0;
98
- }
99
-
100
- .productContent {
101
- flex: 1 1 auto;
102
- display: flex;
103
- flex-direction: column;
104
- gap: 6px;
105
- padding: 8px;
106
- }
107
-
108
- .productParent {
96
+ .linkParent {
109
97
  text-transform: uppercase;
110
98
  font-size: 10px;
111
99
  }
112
100
 
113
- .productPageTitle {
114
- font-weight: 700;
115
- font-size: 14px;
116
- line-height: 1;
117
- }
118
-
119
- .productTitle {
120
- font-weight: 700;
121
- font-size: 13px;
122
- line-height: 1;
123
- }
124
-
125
- .productText {
126
- font-size: 11px;
127
- }
128
-
129
- .productPrice {
130
- position: absolute;
131
- top: 6px;
132
- left: 6px;
133
- max-width: calc(100% - 12px);
134
- padding: 4px;
135
- color: var(--ds-grey-100, #f5f5f5);
136
- background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
137
- font-weight: 700;
101
+ .linkText {
138
102
  font-size: 12px;
139
- border-radius: var(--ds-radius-100, 6px);
140
- }
141
-
142
- .productPrice:emtpy {
143
- display: none;
144
- }
145
-
146
- .productTime {
147
- font-size: 8px;
148
- text-transform: uppercase;
149
- font-weight: 700;
150
- }
151
-
152
- .otherProducts {
153
- grid-column: 1 / -1;
154
- position: sticky;
155
- bottom: 16px;
156
- display: flex;
157
- justify-content: center;
158
- }
159
-
160
- @media (min-width: 730px) {
161
- .otherProducts {
162
- display: none;
163
- }
103
+ white-space: pre-wrap;
164
104
  }
package/es/lbm/components/instant-search/results.js CHANGED
@@ -8,7 +8,7 @@ import css from "./results.module.css";
8
8
  import Faqs from "./faqs";
9
9
  import Widgets from "./widgets";
10
10
  import useGoogleSearch from "./hooks/use-google-search";
11
- import GoogleProducts from "./google-results";
11
+ import OTLinks from "./google-results";
12
12
  export default function Results({ lang, text, facet, setFacet, results, loading, sendPlausibleGoal, }) {
13
13
  const ref = React.useRef(null);
14
14
  const [faqsMaximized, setFaqsMaximized] = React.useState(false);
@@ -32,7 +32,7 @@ export default function Results({ lang, text, facet, setFacet, results, loading,
32
32
  });
33
33
  React.useEffect(() => {
34
34
  const runEffect = () => {
35
- if (sortedHits.product.length < 4) {
35
+ if (flattenedHits.length < 10) {
36
36
  setGoogleText(text);
37
37
  }
38
38
  else {
@@ -40,9 +40,9 @@ export default function Results({ lang, text, facet, setFacet, results, loading,
40
40
  }
41
41
  };
42
42
  runEffect();
43
- }, [text, sortedHits, setGoogleText]);
43
+ }, [text, flattenedHits, setGoogleText]);
44
44
  const { page: pages, product: products, information, faq: faqs, widget: widgets, document: documents, "msem-widget": msemWidgets, lodging: lodgings, } = sortedHits;
45
45
  const isOtherResultsEmpty = !(pages.length || information.length);
46
46
  const countLabel = message(lang, "results");
47
- return (_jsx("div", { className: css.results, children: (loading || text.length > 0) && (_jsxs("div", { className: css.inner, children: [_jsxs("div", { ref: ref, className: css.left, children: [_jsxs("div", { className: css.facet, children: [countLabel, " ", _jsx(FacetSwitch, { lang: lang, facet: facet, setFacet: setFacet })] }), _jsx(Links, { linksTitle: message(lang, "pages"), icon: "File", links: pages, loading: loading, sendPlausibleGoal: sendPlausibleGoal }), _jsx(Links, { linksTitle: message(lang, "documents"), icon: "FileText", links: documents, loading: loading, sendPlausibleGoal: sendPlausibleGoal }), _jsx(Links, { linksTitle: message(lang, "information"), icon: "Info", links: information, loading: loading, sendPlausibleGoal: sendPlausibleGoal })] }), _jsxs("div", { className: css.right, children: [_jsx(Widgets, { lang: lang, widgets: [...widgets, ...msemWidgets, ...lodgings], loading: loading, sendPlausibleGoal: sendPlausibleGoal, faqsMaximized: faqsMaximized }), _jsx(Products, { lang: lang, products: products, loading: loading, sendPlausibleGoal: sendPlausibleGoal, otherResultsRef: ref, isOtherResultsEmpty: isOtherResultsEmpty, faqsMaximized: faqsMaximized }), _jsx(GoogleProducts, { products: googleSearch.result, loading: googleSearch.loading, sendPlausibleGoal: sendPlausibleGoal, faqsMaximized: faqsMaximized }), _jsx(Faqs, { lang: lang, faqs: faqs, loading: loading, sendPlausibleGoal: sendPlausibleGoal, maximized: faqsMaximized, setMaximized: setFaqsMaximized })] })] })) }));
47
+ return (_jsx("div", { className: css.results, children: (loading || text.length > 0) && (_jsxs("div", { className: css.inner, children: [_jsxs("div", { ref: ref, className: css.left, children: [_jsxs("div", { className: css.facet, children: [countLabel, " ", _jsx(FacetSwitch, { lang: lang, facet: facet, setFacet: setFacet })] }), _jsx(Links, { linksTitle: message(lang, "pages"), icon: "File", links: pages, loading: loading, sendPlausibleGoal: sendPlausibleGoal }), _jsx(Links, { linksTitle: message(lang, "documents"), icon: "FileText", links: documents, loading: loading, sendPlausibleGoal: sendPlausibleGoal }), _jsx(Links, { linksTitle: message(lang, "information"), icon: "Info", links: information, loading: loading, sendPlausibleGoal: sendPlausibleGoal }), _jsx(OTLinks, { products: googleSearch.result, loading: googleSearch.loading, sendPlausibleGoal: sendPlausibleGoal, faqsMaximized: faqsMaximized })] }), _jsxs("div", { className: css.right, children: [_jsx(Widgets, { lang: lang, widgets: [...widgets, ...msemWidgets, ...lodgings], loading: loading, sendPlausibleGoal: sendPlausibleGoal, faqsMaximized: faqsMaximized }), _jsx(Products, { lang: lang, products: products, loading: loading, sendPlausibleGoal: sendPlausibleGoal, otherResultsRef: ref, isOtherResultsEmpty: isOtherResultsEmpty, faqsMaximized: faqsMaximized }), _jsx(Faqs, { lang: lang, faqs: faqs, loading: loading, sendPlausibleGoal: sendPlausibleGoal, maximized: faqsMaximized, setMaximized: setFaqsMaximized })] })] })) }));
48
48
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ublo-lib",
3
- "version": "1.36.26",
3
+ "version": "1.36.27",
4
4
  "peerDependencies": {
5
5
  "dt-design-system": "^3.9.9",
6
6
  "leaflet": "^1.9.1",