@htmlbricks/hb-shop-item-row 0.71.36 → 0.71.37

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 (4) hide show
  1. package/README.md +56 -44
  2. package/manifest.json +1 -1
  3. package/package.json +1 -1
  4. package/types/webcomponent.type.d.ts +1 -2
package/README.md CHANGED
@@ -1,14 +1,16 @@
1
- # hb-shop-item-row
1
+ # `hb-shop-item-row` (shop-item-row)
2
2
 
3
- **Category:** commerce · **Tags:** commerce, product
3
+ **Category:** commerce
4
+ **Tags:** commerce, product
5
+ **Package:** `@htmlbricks/hb-shop-item-row`
4
6
 
5
- ## Description
7
+ ## Overview
6
8
 
7
9
  Horizontal shop product row built as a Bulma **card** with a two-column layout: a narrow **thumbnail** column (optional image, optional badge tag) and a **main** column (linked title, muted subtitle, body text, star rating with numeric score, linked reviews line, current and compare-at prices, optional **card footer**). Content can come from **attributes** or from **named slots**; when a slot has no light DOM children, the component falls back to the matching string attribute.
8
10
 
9
11
  Use this element in dense product lists, search results, or comparison tables where a wide, single-row preview reads better than a stacked card. For a vertical card with the same content model, see **`hb-shop-item-cell`**.
10
12
 
11
- ## Layout and behavior
13
+ ### Layout and behavior
12
14
 
13
15
  - **Thumbnail:** The image and badge render only when `img` is non-empty. The image (and badge overlay) are wrapped in a link that uses `url` when it is set; otherwise the link has no `href`.
14
16
  - **Title:** When `title` is set or the `title` slot has content, the title appears as a level-5 heading with a link that uses the same `url` rules as the image.
@@ -16,49 +18,18 @@ Use this element in dense product lists, search results, or comparison tables wh
16
18
  - **Prices:** The current price is bold; **`regularprice`** is shown struck-through beside it when either the attribute or the `regularprice` slot provides content.
17
19
  - **Footer:** An optional Bulma **card footer** spans the text column when `footer` or the `footer` slot has content.
18
20
 
19
- ## Styling (Bulma)
20
-
21
- Cherry-picked **Bulma 1.x** Sass (`card`, `columns`, `image`, `content`, `title`, `tag`, helpers) is scoped to **`:host`** via `styles/bulma.scss`. Theme tokens are the public **`--bulma-*`** variables; set them on `body`, `:root`, or any ancestor so they inherit into the shadow tree. See [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/) and `extra/docs.ts` for the full `styleSetup` list.
22
-
23
- | Variable | Purpose |
24
- |----------|---------|
25
- | `--bulma-primary` | Accent and interactive highlights (theme setup). |
26
- | `--bulma-text` | Body and title text. |
27
- | `--bulma-card-background-color` | Background for the horizontal card shell (thumbnail column, text column, footer). |
28
- | `--bulma-border` | Row frame border (component SCSS supplies a fallback if unset). |
29
- | `--bulma-shadow` | Row frame shadow (fallback in SCSS if unset). |
30
- | `--bulma-text-weak` | Subtitle, strikethrough context, and secondary lines. |
31
- | `--bulma-link` | Linked title and reviews URL color. |
32
- | `--bulma-radius` | Card corners for the horizontal row shell. |
33
-
34
- The host also uses **`--bulma-block-spacing`** (with a built-in fallback) for default vertical **margin** between rows when the element is stacked in a list.
35
-
36
- There are no documented **`::part`** hooks for this package (`styleSetup.parts` is empty).
37
-
38
- ### Slots
39
-
40
- | Slot | Purpose |
41
- |------|---------|
42
- | `badge` | Optional label over the row thumbnail inside a rounded tag; defaults to the `badge` attribute when the slot is empty. |
43
- | `title` | Main product name in the title link beside the image; defaults to the `title` attribute when the slot is empty. |
44
- | `subtitle` | Secondary line under the title (muted); defaults to the `subtitle` attribute when the slot is empty. |
45
- | `text` | Product description or pitch in the main column; defaults to the `text` attribute when the slot is empty. |
46
- | `rating` | Numeric score shown after the star icons when `rating` is set; defaults to the `rating` attribute as plain text. |
47
- | `reviews` | Review count or label inside the linked parentheses next to the stars; defaults to the `reviews` attribute (the link uses `reviewsurl`). |
48
- | `price` | Current or sale price (bold, baseline row); defaults to the `price` attribute when the slot is empty. |
49
- | `footer` | Optional footer strip under the text column (still inside the card); defaults to the `footer` attribute when the slot is empty. |
50
- | `regularprice` | List or compare-at price shown struck-through beside `price`; defaults to the `regularprice` attribute when the slot is empty. |
51
-
52
21
  ## Custom element
53
22
 
54
- `hb-shop-item-row`
23
+ ```html
24
+ <hb-shop-item-row …></hb-shop-item-row>
25
+ ```
55
26
 
56
- ## Attributes (snake_case; string values in HTML)
27
+ ## Attributes
57
28
 
58
- In plain HTML, **all attribute values are strings**. Use empty `""` for unused text fields where you still need the attribute present for tooling or consistency.
29
+ Web component **attribute names use snake_case**. In plain HTML, **all attribute values are strings**. Use empty `""` for unused text fields where you still need the attribute present for tooling or consistency.
59
30
 
60
31
  | Attribute | Required | Description |
61
- |-----------|----------|-------------|
32
+ | --- | --- | --- |
62
33
  | `id` | No | Optional host id (forwarded to the inner card wrapper). |
63
34
  | `style` | No | Optional; present on the `Component` typing for host styling. |
64
35
  | `img` | Yes* | Image URL. If empty, the thumbnail column does not show an image or badge wrapper. |
@@ -79,7 +50,42 @@ In plain HTML, **all attribute values are strings**. Use empty `""` for unused t
79
50
 
80
51
  ## Events
81
52
 
82
- The `Events` typing defines **no** custom events for this component.
53
+ No custom events are declared in `types/webcomponent.type.d.ts` (`Events` is `{}`).
54
+
55
+ ## Slots
56
+
57
+ Each named slot falls back to the **same-named attribute** when the slot has no content (see `extra/docs.ts`).
58
+
59
+ | Slot | Purpose |
60
+ | --- | --- |
61
+ | `badge` | Optional label over the row thumbnail inside a rounded tag; defaults to the `badge` attribute when the slot is empty. |
62
+ | `title` | Main product name in the title link beside the image; defaults to the `title` attribute when the slot is empty. |
63
+ | `subtitle` | Secondary line under the title (muted); defaults to the `subtitle` attribute when the slot is empty. |
64
+ | `text` | Product description or pitch in the main column; defaults to the `text` attribute when the slot is empty. |
65
+ | `rating` | Numeric score shown after the star icons when `rating` is set; defaults to the `rating` attribute as plain text. |
66
+ | `reviews` | Review count or label inside the linked parentheses next to the stars; defaults to the `reviews` attribute (the link uses `reviewsurl`). |
67
+ | `price` | Current or sale price (bold, baseline row); defaults to the `price` attribute when the slot is empty. |
68
+ | `footer` | Optional footer strip under the text column (still inside the card); defaults to the `footer` attribute when the slot is empty. |
69
+ | `regularprice` | List or compare-at price shown struck-through beside `price`; defaults to the `regularprice` attribute when the slot is empty. |
70
+
71
+ There are no documented **`::part`** hooks for this package (`styleSetup.parts` is empty).
72
+
73
+ ## Styling (Bulma)
74
+
75
+ Cherry-picked **Bulma 1.x** Sass (`card`, `columns`, `image`, `content`, `title`, `tag`, helpers) is scoped to **`:host`** via `styles/bulma.scss`. Theme tokens are the public **`--bulma-*`** variables; set them on `body`, `:root`, or any ancestor so they inherit into the shadow tree. See [Bulma CSS variables](https://bulma.io/documentation/features/css-variables/) and `extra/docs.ts` for the full `styleSetup` list.
76
+
77
+ | Variable | Purpose |
78
+ | --- | --- |
79
+ | `--bulma-primary` | Accent and interactive highlights (theme setup). |
80
+ | `--bulma-text` | Body and title text. |
81
+ | `--bulma-card-background-color` | Background for the horizontal card shell (thumbnail column, text column, footer). |
82
+ | `--bulma-border` | Row frame border (component SCSS supplies a fallback if unset). |
83
+ | `--bulma-shadow` | Row frame shadow (fallback in SCSS if unset). |
84
+ | `--bulma-text-weak` | Subtitle, strikethrough context, and secondary lines. |
85
+ | `--bulma-link` | Linked title and reviews URL color. |
86
+ | `--bulma-radius` | Card corners for the horizontal row shell. |
87
+
88
+ The host also uses **`--bulma-block-spacing`** (with a built-in fallback) for default vertical **margin** between rows when the element is stacked in a list.
83
89
 
84
90
  ## Usage notes
85
91
 
@@ -87,7 +93,9 @@ The `Events` typing defines **no** custom events for this component.
87
93
  - **Storybook** exposes an `action` control for demos; it is **not** part of the `Component` props type.
88
94
  - **Internationalization:** `extra/docs.ts` does not register `i18n` entries for this package; translate strings in the host app before passing them in.
89
95
 
90
- ## Minimal HTML example
96
+ ## Examples
97
+
98
+ ### Full row
91
99
 
92
100
  ```html
93
101
  <hb-shop-item-row
@@ -107,7 +115,7 @@ The `Events` typing defines **no** custom events for this component.
107
115
  ></hb-shop-item-row>
108
116
  ```
109
117
 
110
- ## Compact example (title and price only)
118
+ ### Title and price only
111
119
 
112
120
  ```html
113
121
  <hb-shop-item-row
@@ -126,3 +134,7 @@ The `Events` typing defines **no** custom events for this component.
126
134
  footer=""
127
135
  ></hb-shop-item-row>
128
136
  ```
137
+
138
+ ## License
139
+
140
+ Package metadata references **Apache-2.0** (see `LICENSE.md` in the published package when consuming from npm).
package/manifest.json CHANGED
@@ -347,5 +347,5 @@
347
347
  "size": {},
348
348
  "iifePath": "main.iife.js",
349
349
  "repoName": "@htmlbricks/hb-shop-item-row",
350
- "version": "0.71.36"
350
+ "version": "0.71.37"
351
351
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@htmlbricks/hb-shop-item-row",
3
- "version": "0.71.36",
3
+ "version": "0.71.37",
4
4
  "contributors": [],
5
5
  "description": "Horizontal shop product card: image with optional badge, linked title and metadata, description, star rating scale with numeric rating and reviews link, current and strikethrough prices, and optional footer—all overridable via named slots.",
6
6
  "licenses": [
package/types/webcomponent.type.d.ts CHANGED
@@ -17,5 +17,4 @@ export type Component = {
17
17
  footer: string;
18
18
  };
19
19
 
20
- export type Events = {
21
- };
20
+ export type Events = {};