@datlv-trustshop/shopify-inapp-components 0.1.31 → 0.1.32

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 (2) hide show
  1. package/dist/components/GrowApps.js +19 -6
  2. package/package.json +1 -1
package/dist/components/GrowApps.js CHANGED
@@ -10,7 +10,7 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
10
10
  const slidesContainerRef = useRef(null);
11
11
  const currentPositionRef = useRef(0);
12
12
  const { data } = useDashboard();
13
- const growAppsTranslations = useTranslation('growApps');
13
+ const growAppsTranslations = useTranslation("growApps");
14
14
  const allGrowApps = data?.grow_apps || [];
15
15
  const displayLimit = data?.grow_apps_display_limit || maxItems;
16
16
  const growApps = allGrowApps.slice(0, displayLimit);
@@ -137,7 +137,8 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
137
137
  return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx(Card, { children: _jsx(Box, { children: _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: growAppsTranslations?.noData || "No apps available" }) }) }) }));
138
138
  }
139
139
  const activator = (_jsx(Button, { icon: MenuHorizontalIcon, variant: "tertiary", onClick: togglePopoverActive, ariaExpanded: popoverActive }));
140
- return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx(Card, { children: _jsx(Box, { children: _jsxs(BlockStack, { gap: "200", children: [_jsxs(InlineStack, { align: "space-between", blockAlign: "center", wrap: false, gap: "300", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx(Text, { variant: "headingMd", as: "h3", children: growAppsTranslations?.title || "Grow faster with apps" }), _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: growAppsTranslations?.subtitle || "Discover powerful apps to enhance your store, streamline workflows, and boost sales." })] }), _jsxs(InlineStack, { gap: "100", wrap: false, children: [showDismiss && (_jsx(Box, { padding: "150", children: _jsx(Popover, { active: popoverActive, activator: activator, onClose: togglePopoverActive, ariaHaspopup: false, children: _jsx(ActionList, { actionRole: "menuitem", items: [
140
+ return (_jsx("div", { className: className, style: { width: "100%" }, children: _jsx(Card, { children: _jsx(Box, { children: _jsxs(BlockStack, { gap: "200", children: [_jsxs(InlineStack, { align: "space-between", blockAlign: "center", wrap: false, gap: "300", children: [_jsxs(BlockStack, { gap: "100", children: [_jsx(Text, { variant: "headingMd", as: "h3", children: growAppsTranslations?.title || "Grow faster with apps" }), _jsx(Text, { variant: "bodyMd", tone: "subdued", as: "p", children: growAppsTranslations?.subtitle ||
141
+ "Discover powerful apps to enhance your store, streamline workflows, and boost sales." })] }), _jsxs(InlineStack, { gap: "100", wrap: false, children: [showDismiss && (_jsx(Box, { padding: "150", children: _jsx(Popover, { active: popoverActive, activator: activator, onClose: togglePopoverActive, ariaHaspopup: false, children: _jsx(ActionList, { actionRole: "menuitem", items: [
141
142
  {
142
143
  content: growAppsTranslations?.dismiss || "Dismiss",
143
144
  onAction: handleDismiss,
@@ -189,17 +190,29 @@ export const GrowApps = ({ className = "", onAppClick, onDismiss, dismissKey = D
189
190
  transform: "translateX(0px)",
190
191
  }, children: growApps.map((app, index) => {
191
192
  const iconUrl = app.icon_url || app.imageUrl || "";
192
- const buttonText = app.button_text || app.button_get_app || growAppsTranslations?.install || "Get app";
193
+ const buttonText = app.button_text ||
194
+ app.button_get_app ||
195
+ growAppsTranslations?.install ||
196
+ "Get app";
193
197
  return (_jsx("div", { "data-index": index, style: {
194
198
  flexShrink: 0,
195
199
  width: "282px",
196
200
  transition: "transform 0.2s ease",
197
- }, children: _jsx(Card, { children: _jsx(Box, { minWidth: "250px", children: _jsxs(BlockStack, { gap: "300", children: [_jsx(InlineStack, { gap: "400", blockAlign: "start", children: iconUrl && (_jsx("img", { src: iconUrl, alt: app.title, width: 60, height: 60, style: {
201
+ }, children: _jsx(Card, { children: _jsx(Box, { minWidth: "250px", minHeight: "180px", children: _jsxs(BlockStack, { gap: "300", children: [_jsx(InlineStack, { gap: "400", blockAlign: "start", children: iconUrl && (_jsx("img", { src: iconUrl, alt: app.title, width: 60, height: 60, style: {
198
202
  borderRadius: "8px",
199
203
  flexShrink: 0,
200
- } })) }), _jsxs(BlockStack, { gap: "200", children: [_jsx(Text, { variant: "headingSm", as: "h4", children: app.title }), _jsx("div", { style: {
204
+ } })) }), _jsxs(BlockStack, { gap: "200", children: [_jsx("div", { style: {
201
205
  display: "-webkit-box",
202
- WebkitLineClamp: 3,
206
+ fontSize: "13px",
207
+ fontWeight: 650,
208
+ color: "#303030",
209
+ WebkitLineClamp: 1,
210
+ WebkitBoxOrient: "vertical",
211
+ overflow: "hidden",
212
+ textOverflow: "ellipsis",
213
+ }, children: app.title }), _jsx("div", { style: {
214
+ display: "-webkit-box",
215
+ WebkitLineClamp: 2,
203
216
  WebkitBoxOrient: "vertical",
204
217
  overflow: "hidden",
205
218
  textOverflow: "ellipsis",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@datlv-trustshop/shopify-inapp-components",
3
- "version": "0.1.31",
3
+ "version": "0.1.32",
4
4
  "private": false,
5
5
  "description": "React TypeScript components for Shopify in-app dashboard content",
6
6
  "main": "dist/index.js",