@windstream/react-shared-components 0.1.21 → 0.1.23

package/dist/core.d.ts

@@ -63,7 +63,7 @@ declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.InputHTMLAtt
     size?: "slim" | "medium" | "large" | undefined;
     label?: string | undefined;
     errorText?: string | undefined;
-    prefixIconName?: "search" | "location_on" | undefined;
+    prefixIconName?: "location_on" | "search" | undefined;
     prefixIconSize?: 20 | 24 | 40 | 48 | undefined;
     prefixIconFill?: boolean | undefined;
     suffixIconFill?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windstream/react-shared-components",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "type": "module",
   "description": "Shared React components for Kinetic applications",
   "main": "dist/index.js",

package/src/contentful/blocks/blogs-grid/index.tsx

@@ -46,7 +46,11 @@ export function BlogGrid({
   }
 
   return (
-    <section aria-label="Blog articles">
+    <section
+      aria-label="Blog articles"
+      data-section-type={"blogs-grid"}
+      data-section-index={"0"}
+    >
       {/* Controls bar */}
       <div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-3 px-6 pb-6">
         <Text className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left">
@@ -80,7 +84,7 @@ export function BlogGrid({
       {/* Articles grid */}
       {paginatedArticles.length > 0 ? (
         <div className="mx-auto grid max-w-[1200px] grid-cols-1 gap-6 px-5 pb-16 sm:grid-cols-2 lg:grid-cols-3">
-          {paginatedArticles.map(article => {
+          {paginatedArticles.map((article, index) => {
             const href = article.slug.startsWith("/")
               ? article.slug
               : `/${article.slug}`;
@@ -105,6 +109,7 @@ export function BlogGrid({
                 date={article.blogCreationDate}
                 category={article.category}
                 image={coverImage}
+                index={index}
               />
             );
           })}

package/src/contentful/blocks/cards/blog-card/index.tsx

@@ -16,13 +16,18 @@ export const BlogCard: React.FC<BlogCardProps> = ({
   image,
   readMoreText = "Read more",
   asGrid = true,
+  index,
 }: BlogCardProps) => {
   const parentClassName = asGrid
     ? "flex h-full flex-col overflow-hidden rounded-xl bg-white shadow-[0_1px_4px_rgba(0,0,0,0.08),0_4px_16px_rgba(0,0,0,0.06)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.12),0_8px_24px_rgba(0,0,0,0.10)]"
     : "callout-card lg:w-[calc(33.3333%-1rem)] md:w-[calc(50%-1rem)] w-full overflow-hidden rounded-xl bg-white shadow-[0_1px_4px_rgba(0,0,0,0.08),0_4px_16px_rgba(0,0,0,0.06)] transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_12px_rgba(0,0,0,0.12),0_8px_24px_rgba(0,0,0,0.10)]";
 
   return (
-    <article className={parentClassName}>
+    <article
+      className={parentClassName}
+      data-section-type={"blog-card"}
+      data-section-index={index}
+    >
       {/* Image */}
       <Link href={href} tabIndex={-1} aria-hidden="true" className="block">
         <div className="aspect-video w-full flex-shrink-0 overflow-hidden bg-gray-100">

package/src/contentful/blocks/cards/blog-card/types.ts

@@ -12,4 +12,5 @@ export interface BlogCardProps {
   };
   readMoreText?: string;
   asGrid?: boolean;
+  index?: number;
 }

package/src/contentful/blocks/modal/index.tsx

@@ -14,8 +14,10 @@ import { MaterialIcon } from "@shared/components/material-icon";
 import { Text } from "@shared/components/text";
 import { Button } from "@shared/contentful/blocks/button";
 import { cx } from "@shared/utils";
-
-export const Modal: React.FC<ModalProps> = props => {
+type ExtendedModalProps = ModalProps & {
+  containerAttributes?: React.HTMLAttributes<HTMLDivElement>;
+};
+export const Modal: React.FC<ExtendedModalProps> = props => {
   const {
     isOpen,
     onRequestClose,
@@ -25,6 +27,7 @@ export const Modal: React.FC<ModalProps> = props => {
     description,
     children,
     bodyClassName,
+    containerAttributes
   } = props;
 
   return (
@@ -50,6 +53,7 @@ export const Modal: React.FC<ModalProps> = props => {
           className="fixed left-1/2 top-1/2 z-[1001] w-auto -translate-x-1/2 -translate-y-1/2 focus:outline-none"
         >
           <Dialog.Content
+            {...containerAttributes}
             className={cx(
               "fixed left-[50%] top-[50%] w-[90vw] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-bg p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none",
               bodyClassName