@spteck/react-controls-v2 2.6.9 → 2.7.1

package/README.md

@@ -199,6 +199,52 @@ If you are also using app context and localization, the recommended provider ord
 | `InlineSVG` | Load, sanitize, and render SVG from URLs, data URIs, and raw markup |
 | `BackgroundImage` | Full-width background images with cover sizing and overlay support |
 
+### News & Publishing
+
+| Component | Description |
+|-----------|-------------|
+| `NewsCard` | Standard vertical news card — image on top, headline, category badge, body text, author/date meta row, and a stats row (views, likes, comments, optional share button). Supports `default` and `overlay` variants, over-due accent, per-card settings panel, and click/link navigation. |
+| `NewsCardCompact` | Compact horizontal news card — thumbnail beside the text. Supports `default`, `flat`, and `overlay` variants plus all the same stats/share/settings props as `NewsCard`. |
+| `NewsBigCard` | Large feature card with a wide side image column. Supports `default` and `overlay` variants, full visibility controls (`showBodyText`, `showAuthorDate`, `showStats`, `showComments`, `showShare`), and an optional settings panel. |
+| `NewsFeed` | Feed container that renders a collection of `INewsFeedItem` objects in one of nine layout variants: `grid`, `list`, `filmstrip`, `marquee`, `carousel`, `mosaic`, `feature`, `masonry`, and `trending`. Supports drag-and-drop reordering, fixed-height scrolling, and feed-wide visibility toggles. |
+| `NewsTrendingFeed` | Compact trending-news sidebar widget — numbered thumbnail list with headline, category, date, and an optional "view all" action. |
+| `NewsStats` | Stats row sub-component used by the card components — displays views, likes, comments (with Fluent UI `Tooltip`s), and an optional circular share `Button`. |
+
+#### `INewsItem` interface
+
+```ts
+interface INewsItem {
+  headline:  string;          // required — main card headline
+  category?: string;          // section label shown above the headline
+  bodyText?: string;          // short description or body copy
+  author?:   string;          // author display name
+  date?:     string | Date;   // published date (ISO string, formatted string, or Date)
+  imageUrl?: string;          // image URL
+  views?:    number;          // view count shown in the stats row
+  likes?:    number;          // like count shown in the stats row
+  comments?: number;          // comment count (shown when showComments is true)
+}
+```
+
+#### Common card props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `showBodyText` | `boolean` | `true` | Show / hide body text |
+| `showAuthorDate` | `boolean` | `true` | Show / hide author and date |
+| `showStats` | `boolean` | `true` | Show / hide the stats row (views, likes, comments) |
+| `showComments` | `boolean` | `true` | Show comment count inside the stats row |
+| `showShare` | `boolean` | `false` | Show a circular share icon-button in the stats row |
+| `onShare` | `(item: INewsItem) => void` | — | Called when the share button is clicked |
+| `showCardSettings` | `boolean` | `false` | Show a settings gear button for per-card display customisation |
+| `isOverDue` | `boolean` | `false` | Apply an amber over-due colour accent to the card |
+| `headlineLines` | `number` | `1` | Max lines before headline is clamped |
+| `bodyLines` | `number` | `3` | Max lines before body text is clamped |
+| `locale` | `string` | browser | BCP 47 locale for date formatting |
+| `timeZone` | `string` | browser | IANA time-zone identifier for date formatting |
+
+---
+
 ### Media & Content
 
 | Component | Description |

package/dist/components/NewsBigCard/INewsBigCardProps.d.ts

@@ -33,5 +33,11 @@ export interface INewsBigCardProps extends IBaseProps {
     showAuthorDate?: boolean;
     /** Hide view / like stats in the meta row. Defaults to `true` (shown). */
     showStats?: boolean;
+    /** Show the comments count in the stats row. @default true */
+    showComments?: boolean;
+    /** Show a share icon-button on the card. @default false */
+    showShare?: boolean;
+    /** Called when the user clicks the share button. Receives the card's item. */
+    onShare?: (item: INewsItem) => void;
 }
 //# sourceMappingURL=INewsBigCardProps.d.ts.map

package/dist/components/NewsCard/INewsCardProps.d.ts

@@ -32,5 +32,18 @@ export interface INewsCardProps extends IBaseProps {
     showAuthorDate?: boolean;
     /** Hide view / like stats in the meta row. Defaults to `true` (shown). */
     showStats?: boolean;
+    /** Show the comments count in the stats row. @default true */
+    showComments?: boolean;
+    /** Show a share icon-button on the card. @default false */
+    showShare?: boolean;
+    /** Called when the user clicks the share button. Receives the card's item. */
+    onShare?: (item: INewsItem) => void;
+    /**
+     * Show a settings gear button on the card. Clicking it opens a panel where
+     * the viewer can toggle image, body text, author/date, and stats visibility,
+     * and set headline / body line clamp values. State is local to each instance.
+     * @default false
+     */
+    showCardSettings?: boolean;
 }
 //# sourceMappingURL=INewsCardProps.d.ts.map

package/dist/components/NewsCard/NewsCardMeta.d.ts

@@ -4,11 +4,18 @@ export interface INewsCardMetaProps {
     dateText?: string;
     views?: number;
     likes?: number;
+    comments?: number;
+    /** Show the comments count. @default true */
+    showComments?: boolean;
     /** Renders white text for use on dark overlay cards */
     isOverlay?: boolean;
     isOverDue?: boolean;
     showAuthorDate?: boolean;
     showStats?: boolean;
+    /** Show a share icon-button in the stats row. @default false */
+    showShare?: boolean;
+    /** Called when the user clicks the share button. */
+    onShare?: () => void;
     className?: string;
     style?: React.CSSProperties;
 }

package/dist/components/NewsCardCompact/INewsCardCompactProps.d.ts

@@ -37,5 +37,18 @@ export interface INewsCardCompactProps extends IBaseProps {
     showAuthorDate?: boolean;
     /** Hide view / like stats in the meta row. Defaults to `true` (shown). */
     showStats?: boolean;
+    /** Show the comments count in the stats row. @default true */
+    showComments?: boolean;
+    /** Show a share icon-button on the card. @default false */
+    showShare?: boolean;
+    /** Called when the user clicks the share button. Receives the card's item. */
+    onShare?: (item: INewsItem) => void;
+    /**
+     * Show a settings gear button on the card. Clicking it opens a panel where
+     * the viewer can toggle image, body text, author/date, and stats visibility,
+     * and set headline / body line clamp values. State is local to each instance.
+     * @default false
+     */
+    showCardSettings?: boolean;
 }
 //# sourceMappingURL=INewsCardCompactProps.d.ts.map

package/dist/components/NewsCardCompact/NewsCardCompactMeta.d.ts

@@ -4,11 +4,18 @@ export interface INewsCardCompactMetaProps {
     dateText?: string;
     views?: number;
     likes?: number;
+    comments?: number;
+    /** Show the comments count. @default true */
+    showComments?: boolean;
     /** Renders white text for use on dark overlay cards */
     isOverlay?: boolean;
     isOverDue?: boolean;
     showAuthorDate?: boolean;
     showStats?: boolean;
+    /** Show a share icon-button in the stats row. @default false */
+    showShare?: boolean;
+    /** Called when the user clicks the share button. */
+    onShare?: () => void;
     className?: string;
     style?: React.CSSProperties;
 }

package/dist/components/NewsFeed/DraggableFeedCard.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export interface IDraggableFeedCardProps {
+    /** Unique id that matches the item id used in SortableContext. */
+    id: string;
+    /** When false the wrapper renders children as-is with no dnd behaviour. */
+    draggable?: boolean;
+    children: React.ReactNode;
+    /** Additional style applied to the outer wrapper (e.g. grid column span). */
+    wrapperStyle?: React.CSSProperties;
+    /** Additional className applied to the outer wrapper (e.g. masonry item class). */
+    wrapperClassName?: string;
+}
+/**
+ * DraggableFeedCard
+ *
+ * A thin sortable wrapper around any news card.
+ * When `draggable` is true it:
+ *  - registers itself with @dnd-kit/sortable via `useSortable`
+ *  - renders a drag handle (ReOrderDotsVertical icon) in the top-right corner,
+ *    visible only on hover or while dragging
+ *  - only attaches the pointer listeners to the handle so card clicks still work
+ *  - applies CSS transform/transition during drag for smooth reordering
+ */
+export declare const DraggableFeedCard: React.FC<IDraggableFeedCardProps>;
+//# sourceMappingURL=DraggableFeedCard.d.ts.map

package/dist/components/NewsFeed/INewsFeedProps.d.ts

@@ -34,6 +34,22 @@ export interface INewsFeedLayoutProps {
     height?: number | string;
     headlineLines?: number;
     bodyLines?: number;
+    /** Hide body text. Defaults to `true` (shown). Pass `false` to hide. */
+    showBodyText?: boolean;
+    /** Hide author and date in the meta row. Defaults to `true` (shown). */
+    showAuthorDate?: boolean;
+    /** Hide view / like stats in the meta row. Defaults to `true` (shown). */
+    showStats?: boolean;
+    /** Show the comments count on every card. @default true */
+    showComments?: boolean;
+    /** Show a share icon-button on every card. @default false */
+    showShare?: boolean;
+    /** Called when the user clicks a card's share button. Receives the card's item. */
+    onShare?: (item: INewsItem) => void;
+    /** Show a settings gear button on every card allowing per-card display customisation. */
+    showCardSettings?: boolean;
+    /** When true, each card renders a drag handle and the layout is sortable. */
+    draggable?: boolean;
 }
 export interface INewsFeedProps extends IBaseProps {
     /** Collection of news items to display */
@@ -77,5 +93,29 @@ export interface INewsFeedProps extends IBaseProps {
      * @default false
      */
     showCardSettings?: boolean;
+    /** Hide body text. Defaults to `true` (shown). Pass `false` to hide. */
+    showBodyText?: boolean;
+    /** Hide author and date in the meta row. Defaults to `true` (shown). */
+    showAuthorDate?: boolean;
+    /** Hide view / like stats in the meta row. Defaults to `true` (shown). */
+    showStats?: boolean;
+    /** Show the comments count on every card. @default true */
+    showComments?: boolean;
+    /** Show a share icon-button on every card. @default false */
+    showShare?: boolean;
+    /** Called when the user clicks a card's share button. Receives the card's item. */
+    onShare?: (item: INewsItem) => void;
+    /**
+     * Enable drag-and-drop reordering of cards.
+     * Supported layouts: `grid`, `list`, `masonry`, `feature`.
+     * Has no effect on `marquee`, `filmstrip`, `carousel`, and `trending`.
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * Called after the user drops a card into a new position.
+     * Receives the full re-ordered items array so the parent can persist the new order.
+     */
+    onItemsReorder?: (reorderedItems: INewsFeedItem[]) => void;
 }
 //# sourceMappingURL=INewsFeedProps.d.ts.map

package/dist/components/NewsStats/NewsStats.d.ts

@@ -2,11 +2,19 @@ import * as React from "react";
 export interface INewsStatsProps {
     views?: number;
     likes?: number;
+    /** Number of comments to display */
+    comments?: number;
+    /** Show the comments count. @default true */
+    showComments?: boolean;
     color: string;
     isOverDue?: boolean;
     iconSize?: number;
     heartSize?: number;
     paddingTop?: string;
+    /** Show a share icon-button. @default false */
+    showShare?: boolean;
+    /** Called when the user clicks the share button. */
+    onShare?: () => void;
 }
 export declare const NewsStats: React.FC<INewsStatsProps>;
 //# sourceMappingURL=NewsStats.d.ts.map

package/dist/components/NewsStats/useNewsStatsStyles.d.ts

@@ -0,0 +1,7 @@
+export interface INewsStatsStyles {
+    viewIcon: string;
+    commentIcon: string;
+    buttonIcon: string;
+}
+export declare const useNewsStatsStyles: (color: string, viewsColor: string, iconSize: number) => INewsStatsStyles;
+//# sourceMappingURL=useNewsStatsStyles.d.ts.map