@windstream/react-shared-components 0.1.93 → 0.1.94

package/src/contentful/blocks/blogs-grid/BlogGrid.stories.mocks.tsx

@@ -1,144 +1,144 @@
-import { BlogCardProps, BlogCategoryOption } from "./types";
-
-/* ----------------------
-   CATEGORY OPTIONS
-------------------------- */
-
-export const CATEGORY_OPTIONS: BlogCategoryOption[] = [
-  { value: "all", label: "All Categories" },
-  { value: "technology", label: "Technology" },
-  { value: "business", label: "Business" },
-  { value: "lifestyle", label: "Lifestyle" },
-  { value: "entertainment", label: "Entertainment" },
-];
-
-/* ----------------------
-   ARTICLES WITH COVERS (6)
-------------------------- */
-
-export const ARTICLES_WITH_COVERS: BlogCardProps[] = [
-  {
-    slug: "blog/getting-started-with-fiber",
-    title: "Getting Started with Fiber Internet",
-    shortDescription:
-      "Everything you need to know about making the switch to fiber optic internet for your home.",
-    blogCreationDate: "2025-12-01",
-    category: "Technology",
-    cover: {
-      url: "https://placehold.co/600x338/0ea5e9/ffffff?text=Fiber+Internet",
-      width: 600,
-      height: 338,
-      title: "Fiber internet illustration",
-    },
-  },
-  {
-    slug: "blog/smart-home-tips",
-    title: "10 Smart Home Tips for Beginners",
-    shortDescription:
-      "Transform your living space with these easy smart-home upgrades that anyone can do.",
-    blogCreationDate: "2025-11-18",
-    category: "Technology",
-    cover: {
-      url: "https://placehold.co/600x338/8b5cf6/ffffff?text=Smart+Home",
-      width: 600,
-      height: 338,
-      title: "Smart home devices",
-    },
-  },
-  {
-    slug: "blog/remote-work-connectivity",
-    title: "Stay Connected While Working Remotely",
-    shortDescription:
-      "Best practices for maintaining a rock-solid internet connection in your home office.",
-    blogCreationDate: "2025-11-05",
-    category: "Business",
-    cover: {
-      url: "https://placehold.co/600x338/f59e0b/ffffff?text=Remote+Work",
-      width: 600,
-      height: 338,
-      title: "Remote work setup",
-    },
-  },
-  {
-    slug: "blog/streaming-quality-guide",
-    title: "The Ultimate Streaming Quality Guide",
-    shortDescription:
-      "How to get the best picture and sound from your favorite streaming services.",
-    blogCreationDate: "2025-10-22",
-    category: "Entertainment",
-    cover: {
-      url: "https://placehold.co/600x338/ec4899/ffffff?text=Streaming",
-      width: 600,
-      height: 338,
-      title: "Streaming setup",
-    },
-  },
-  {
-    slug: "blog/digital-wellness",
-    title: "Digital Wellness: Finding Balance Online",
-    shortDescription:
-      "Practical strategies for maintaining a healthy relationship with technology.",
-    blogCreationDate: "2025-10-10",
-    category: "Lifestyle",
-    cover: {
-      url: "https://placehold.co/600x338/10b981/ffffff?text=Digital+Wellness",
-      width: 600,
-      height: 338,
-      title: "Digital wellness",
-    },
-  },
-  {
-    slug: "blog/cybersecurity-basics",
-    title: "Cybersecurity Basics for Every Household",
-    shortDescription:
-      "Simple steps to protect your family's data and devices from online threats.",
-    blogCreationDate: "2025-09-28",
-    category: "Technology",
-    cover: {
-      url: "https://placehold.co/600x338/ef4444/ffffff?text=Cybersecurity",
-      width: 600,
-      height: 338,
-      title: "Cybersecurity basics",
-    },
-  },
-];
-
-/* ----------------------
-   ARTICLES WITHOUT COVERS (3)
-------------------------- */
-
-export const ARTICLES_WITHOUT_COVERS: BlogCardProps[] = [
-  {
-    slug: "blog/home-network-setup",
-    title: "How to Set Up Your Home Network Like a Pro",
-    shortDescription:
-      "A step-by-step guide to configuring routers, extenders, and mesh systems.",
-    blogCreationDate: "2025-09-15",
-    category: "Technology",
-  },
-  {
-    slug: "blog/budgeting-internet-plan",
-    title: "Choosing the Right Internet Plan on a Budget",
-    shortDescription:
-      "Compare plans and find the best value for your household's internet needs.",
-    blogCreationDate: "2025-09-01",
-    category: "Business",
-  },
-  {
-    slug: "blog/gaming-online",
-    title: "Level Up Your Online Gaming Experience",
-    shortDescription:
-      "Reduce lag, improve ping, and get the most out of competitive online gaming.",
-    blogCreationDate: "2025-08-20",
-    category: "Entertainment",
-  },
-];
-
-/* ----------------------
-   COMBINED (all 9 articles)
-------------------------- */
-
-export const ALL_ARTICLES: BlogCardProps[] = [
-  ...ARTICLES_WITH_COVERS,
-  ...ARTICLES_WITHOUT_COVERS,
-];
+import { BlogCardProps, BlogCategoryOption } from "./types";
+
+/* ----------------------
+   CATEGORY OPTIONS
+------------------------- */
+
+export const CATEGORY_OPTIONS: BlogCategoryOption[] = [
+  { value: "all", label: "All Categories" },
+  { value: "technology", label: "Technology" },
+  { value: "business", label: "Business" },
+  { value: "lifestyle", label: "Lifestyle" },
+  { value: "entertainment", label: "Entertainment" },
+];
+
+/* ----------------------
+   ARTICLES WITH COVERS (6)
+------------------------- */
+
+export const ARTICLES_WITH_COVERS: BlogCardProps[] = [
+  {
+    slug: "blog/getting-started-with-fiber",
+    title: "Getting Started with Fiber Internet",
+    shortDescription:
+      "Everything you need to know about making the switch to fiber optic internet for your home.",
+    blogCreationDate: "2025-12-01",
+    category: "Technology",
+    cover: {
+      url: "https://placehold.co/600x338/0ea5e9/ffffff?text=Fiber+Internet",
+      width: 600,
+      height: 338,
+      title: "Fiber internet illustration",
+    },
+  },
+  {
+    slug: "blog/smart-home-tips",
+    title: "10 Smart Home Tips for Beginners",
+    shortDescription:
+      "Transform your living space with these easy smart-home upgrades that anyone can do.",
+    blogCreationDate: "2025-11-18",
+    category: "Technology",
+    cover: {
+      url: "https://placehold.co/600x338/8b5cf6/ffffff?text=Smart+Home",
+      width: 600,
+      height: 338,
+      title: "Smart home devices",
+    },
+  },
+  {
+    slug: "blog/remote-work-connectivity",
+    title: "Stay Connected While Working Remotely",
+    shortDescription:
+      "Best practices for maintaining a rock-solid internet connection in your home office.",
+    blogCreationDate: "2025-11-05",
+    category: "Business",
+    cover: {
+      url: "https://placehold.co/600x338/f59e0b/ffffff?text=Remote+Work",
+      width: 600,
+      height: 338,
+      title: "Remote work setup",
+    },
+  },
+  {
+    slug: "blog/streaming-quality-guide",
+    title: "The Ultimate Streaming Quality Guide",
+    shortDescription:
+      "How to get the best picture and sound from your favorite streaming services.",
+    blogCreationDate: "2025-10-22",
+    category: "Entertainment",
+    cover: {
+      url: "https://placehold.co/600x338/ec4899/ffffff?text=Streaming",
+      width: 600,
+      height: 338,
+      title: "Streaming setup",
+    },
+  },
+  {
+    slug: "blog/digital-wellness",
+    title: "Digital Wellness: Finding Balance Online",
+    shortDescription:
+      "Practical strategies for maintaining a healthy relationship with technology.",
+    blogCreationDate: "2025-10-10",
+    category: "Lifestyle",
+    cover: {
+      url: "https://placehold.co/600x338/10b981/ffffff?text=Digital+Wellness",
+      width: 600,
+      height: 338,
+      title: "Digital wellness",
+    },
+  },
+  {
+    slug: "blog/cybersecurity-basics",
+    title: "Cybersecurity Basics for Every Household",
+    shortDescription:
+      "Simple steps to protect your family's data and devices from online threats.",
+    blogCreationDate: "2025-09-28",
+    category: "Technology",
+    cover: {
+      url: "https://placehold.co/600x338/ef4444/ffffff?text=Cybersecurity",
+      width: 600,
+      height: 338,
+      title: "Cybersecurity basics",
+    },
+  },
+];
+
+/* ----------------------
+   ARTICLES WITHOUT COVERS (3)
+------------------------- */
+
+export const ARTICLES_WITHOUT_COVERS: BlogCardProps[] = [
+  {
+    slug: "blog/home-network-setup",
+    title: "How to Set Up Your Home Network Like a Pro",
+    shortDescription:
+      "A step-by-step guide to configuring routers, extenders, and mesh systems.",
+    blogCreationDate: "2025-09-15",
+    category: "Technology",
+  },
+  {
+    slug: "blog/budgeting-internet-plan",
+    title: "Choosing the Right Internet Plan on a Budget",
+    shortDescription:
+      "Compare plans and find the best value for your household's internet needs.",
+    blogCreationDate: "2025-09-01",
+    category: "Business",
+  },
+  {
+    slug: "blog/gaming-online",
+    title: "Level Up Your Online Gaming Experience",
+    shortDescription:
+      "Reduce lag, improve ping, and get the most out of competitive online gaming.",
+    blogCreationDate: "2025-08-20",
+    category: "Entertainment",
+  },
+];
+
+/* ----------------------
+   COMBINED (all 9 articles)
+------------------------- */
+
+export const ALL_ARTICLES: BlogCardProps[] = [
+  ...ARTICLES_WITH_COVERS,
+  ...ARTICLES_WITHOUT_COVERS,
+];

package/src/contentful/blocks/blogs-grid/BlogGrid.stories.tsx

@@ -1,156 +1,157 @@
-import {
-  ALL_ARTICLES,
-  ARTICLES_WITH_COVERS,
-  ARTICLES_WITHOUT_COVERS,
-  CATEGORY_OPTIONS,
-} from "./BlogGrid.stories.mocks";
-import { BlogGrid } from "./index";
-import type { BlogGridProps } from "./types";
-
-import { DocsPage } from "@shared/stories/DocsTemplate";
-import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
-
-/* ------------
-   ArgTypes
---------------- */
-
-const argTypes: ArgTypes<BlogGridProps> = {
-  paginatedArticles: {
-    control: { type: "object" as const },
-    description: "Array of blog articles to display on the current page",
-  },
-  totalArticles: {
-    control: { type: "number" as const },
-    description: "Total number of articles across all pages",
-  },
-  currentPage: {
-    control: { type: "number" as const },
-    description: "Current active page number",
-  },
-  totalPages: {
-    control: { type: "number" as const },
-    description: "Total number of pages",
-  },
-  selectedCategory: {
-    control: { type: "object" as const },
-    description: "Currently selected category option",
-  },
-  categoryOptions: {
-    control: { type: "object" as const },
-    description: "Available category filter options",
-  },
-};
-
-/* --------
-   Meta
------------ */
-
-const meta: Meta<typeof BlogGrid> = {
-  title: "Contentful Blocks/BlogGrid",
-  component: BlogGrid,
-  tags: ["autodocs"],
-  argTypes,
-  parameters: {
-    layout: "fullscreen",
-    docs: {
-      page: DocsPage,
-      description: {
-        component:
-          "A paginated, filterable grid of blog article cards with a category dropdown, article count summary, and pagination controls.",
-      },
-    },
-  },
-  args: {
-    paginatedArticles: ARTICLES_WITH_COVERS,
-    totalArticles: ALL_ARTICLES.length,
-    currentPage: 1,
-    totalPages: 2,
-    selectedCategory: CATEGORY_OPTIONS[0],
-    categoryOptions: CATEGORY_OPTIONS,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/* --------
-   Stories
------------ */
-
-export const Default: Story = {};
-
-export const WithPagination: Story = {
-  args: {
-    paginatedArticles: ARTICLES_WITH_COVERS,
-    totalArticles: 18,
-    currentPage: 2,
-    totalPages: 3,
-  },
-};
-
-export const SinglePage: Story = {
-  args: {
-    paginatedArticles: ARTICLES_WITH_COVERS,
-    totalArticles: 6,
-    currentPage: 1,
-    totalPages: 1,
-  },
-};
-
-export const EmptyState: Story = {
-  args: {
-    paginatedArticles: [],
-    totalArticles: 9,
-    currentPage: 1,
-    totalPages: 1,
-    selectedCategory: CATEGORY_OPTIONS[1],
-  },
-};
-
-export const CategoryFilterActive: Story = {
-  args: {
-    paginatedArticles: ALL_ARTICLES.filter(
-      (a) => a.category === "Technology",
-    ),
-    totalArticles: 4,
-    currentPage: 1,
-    totalPages: 1,
-    selectedCategory: CATEGORY_OPTIONS[1],
-  },
-};
-
-export const WithCoverImages: Story = {
-  args: {
-    paginatedArticles: ARTICLES_WITH_COVERS,
-    totalArticles: 6,
-    currentPage: 1,
-    totalPages: 1,
-  },
-};
-
-export const WithoutCoverImages: Story = {
-  args: {
-    paginatedArticles: ARTICLES_WITHOUT_COVERS,
-    totalArticles: 3,
-    currentPage: 1,
-    totalPages: 1,
-  },
-};
-
-export const MixedCoverImages: Story = {
-  args: {
-    paginatedArticles: [...ARTICLES_WITH_COVERS.slice(4), ...ARTICLES_WITHOUT_COVERS],
-    totalArticles: 5,
-    currentPage: 1,
-    totalPages: 1,
-  },
-};
-
-export const SingleArticle: Story = {
-  args: {
-    paginatedArticles: [ARTICLES_WITH_COVERS[0]],
-    totalArticles: 1,
-    currentPage: 1,
-    totalPages: 1,
-  },
-};
+import {
+  ALL_ARTICLES,
+  ARTICLES_WITH_COVERS,
+  ARTICLES_WITHOUT_COVERS,
+  CATEGORY_OPTIONS,
+} from "./BlogGrid.stories.mocks";
+import { BlogGrid } from "./index";
+import type { BlogGridProps } from "./types";
+
+import { DocsPage } from "@shared/stories/DocsTemplate";
+import type { ArgTypes, Meta, StoryObj } from "@storybook/react";
+
+/* ------------
+   ArgTypes
+--------------- */
+
+const argTypes: ArgTypes<BlogGridProps> = {
+  paginatedArticles: {
+    control: { type: "object" as const },
+    description: "Array of blog articles to display on the current page",
+  },
+  totalArticles: {
+    control: { type: "number" as const },
+    description: "Total number of articles across all pages",
+  },
+  currentPage: {
+    control: { type: "number" as const },
+    description: "Current active page number",
+  },
+  totalPages: {
+    control: { type: "number" as const },
+    description: "Total number of pages",
+  },
+  selectedCategory: {
+    control: { type: "object" as const },
+    description: "Currently selected category option",
+  },
+  categoryOptions: {
+    control: { type: "object" as const },
+    description: "Available category filter options",
+  },
+};
+
+/* --------
+   Meta
+----------- */
+
+const meta: Meta<typeof BlogGrid> = {
+  title: "Contentful Blocks/BlogGrid",
+  component: BlogGrid,
+  tags: ["autodocs"],
+  argTypes,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      page: DocsPage,
+      description: {
+        component:
+          "A paginated, filterable grid of blog article cards with a category dropdown, article count summary, and pagination controls.",
+      },
+    },
+  },
+  args: {
+    paginatedArticles: ARTICLES_WITH_COVERS,
+    totalArticles: ALL_ARTICLES.length,
+    currentPage: 1,
+    totalPages: 2,
+    selectedCategory: CATEGORY_OPTIONS[0],
+    categoryOptions: CATEGORY_OPTIONS,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* --------
+   Stories
+----------- */
+
+export const Default: Story = {};
+
+export const WithPagination: Story = {
+  args: {
+    paginatedArticles: ARTICLES_WITH_COVERS,
+    totalArticles: 18,
+    currentPage: 2,
+    totalPages: 3,
+  },
+};
+
+export const SinglePage: Story = {
+  args: {
+    paginatedArticles: ARTICLES_WITH_COVERS,
+    totalArticles: 6,
+    currentPage: 1,
+    totalPages: 1,
+  },
+};
+
+export const EmptyState: Story = {
+  args: {
+    paginatedArticles: [],
+    totalArticles: 9,
+    currentPage: 1,
+    totalPages: 1,
+    selectedCategory: CATEGORY_OPTIONS[1],
+  },
+};
+
+export const CategoryFilterActive: Story = {
+  args: {
+    paginatedArticles: ALL_ARTICLES.filter(a => a.category === "Technology"),
+    totalArticles: 4,
+    currentPage: 1,
+    totalPages: 1,
+    selectedCategory: CATEGORY_OPTIONS[1],
+  },
+};
+
+export const WithCoverImages: Story = {
+  args: {
+    paginatedArticles: ARTICLES_WITH_COVERS,
+    totalArticles: 6,
+    currentPage: 1,
+    totalPages: 1,
+  },
+};
+
+export const WithoutCoverImages: Story = {
+  args: {
+    paginatedArticles: ARTICLES_WITHOUT_COVERS,
+    totalArticles: 3,
+    currentPage: 1,
+    totalPages: 1,
+  },
+};
+
+export const MixedCoverImages: Story = {
+  args: {
+    paginatedArticles: [
+      ...ARTICLES_WITH_COVERS.slice(4),
+      ...ARTICLES_WITHOUT_COVERS,
+    ],
+    totalArticles: 5,
+    currentPage: 1,
+    totalPages: 1,
+  },
+};
+
+export const SingleArticle: Story = {
+  args: {
+    paginatedArticles: [ARTICLES_WITH_COVERS[0]],
+    totalArticles: 1,
+    currentPage: 1,
+    totalPages: 1,
+  },
+};