@windstream/react-shared-components 0.2.26 → 0.2.28

package/package.json

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

package/src/components/brand-button/index.tsx

@@ -48,7 +48,7 @@ export const BrandButton = forwardRef<
     const getVariantClasses = () => {
       const baseClasses = cx(
         sizeToClassNames(size),
-        "rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-transparent cursor-pointer transition-colors duration-200 align-top sm:whitespace-nowrap",
+        "rounded-button pl-15 pr-15 inline-flex gap-2 items-center justify-center outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer transition-colors duration-200 align-top sm:whitespace-nowrap",
         fullWidth ? "w-full" : "w-auto"
       );
 
@@ -58,7 +58,7 @@ export const BrandButton = forwardRef<
         primary_inverse:
           "bg-bg-fill-inverse text-text-inverse [&:not(:disabled)]:hover:bg-bg-fill-inverse-hover focus:ring-bg-surface-inverse disabled:bg-bg-fill-inverse-disabled",
         secondary:
-          "border border-border-secondary-on-bg-fill bg-bg-fill-secondary text-text [&:not(:disabled)]:hover:bg-bg-fill-secondary-hover focus:bg-bg-fill-secondary focus:ring-border-secondary-on-bg-fill disabled:bg-bg-fill-secondary",
+          "border border-border-secondary-on-bg-fill bg-bg-fill-secondary text-text [&:not(:disabled)]:hover:bg-bg-fill-secondary-hover focus:bg-bg-fill-secondary focus:ring-input-border-hover disabled:bg-bg-fill-secondary",
       };
       const stateClasses = cx(
         (disabled || isLoading) && "cursor-not-allowed",

package/src/contentful/blocks/navigation/Navigation.stories.mocks.tsx

@@ -3,12 +3,16 @@ export const PRIMARY_LINKS: any = [
     __typename: "ComponentButton",
     buttonLabel: "Home",
     href: "/",
+    showButtonAs: "text",
+    target: "_self",
     preserveQueryParameters: false,
   },
   {
     __typename: "ComponentButton",
     buttonLabel: "Products",
     href: "/products",
+    showButtonAs: "text",
+    target: "_self",
     preserveQueryParameters: false,
   },
   {
@@ -20,11 +24,15 @@ export const PRIMARY_LINKS: any = [
           __typename: "ComponentButton",
           buttonLabel: "Internet",
           href: "/internet",
+          showButtonAs: "text",
+          target: "_self",
         },
         {
           __typename: "ComponentButton",
           buttonLabel: "Phone",
           href: "/phone",
+          showButtonAs: "text",
+          target: "_self",
         },
       ],
     },
@@ -32,17 +40,20 @@ export const PRIMARY_LINKS: any = [
 ];
 
 export const UTILITY_LINKS: any = [
-   {
+  {
     __typename: "ComponentButton",
     buttonLabel: "Residential",
     href: "/residential",
+    showButtonAs: "text",
+    target: "_self",
   },
   {
     __typename: "ComponentButton",
     buttonLabel: "Business",
     href: "/business",
+    showButtonAs: "text",
+    target: "_self",
   },
- 
 ];
 
 export const ACCOUNT_LINKS: any = [
@@ -55,6 +66,8 @@ export const ACCOUNT_LINKS: any = [
           __typename: "ComponentButton",
           buttonLabel: "Profile",
           href: "/profile",
+          showButtonAs: "text",
+          target: "_self",
         },
       ],
     },
@@ -71,6 +84,8 @@ export const SUPPORT_LINKS: any = [
           __typename: "ComponentButton",
           buttonLabel: "Help",
           href: "/help",
+          showButtonAs: "text",
+          target: "_self",
         },
       ],
     },

package/src/contentful/blocks/navigation/Navigation.stories.tsx

@@ -9,10 +9,43 @@ import {
   SUPPORT_LINKS,
 } from "./Navigation.stories.mocks";
 
+const searchFormStyle = `
+  form[name="searchForm"] {
+    border-radius: 9999px !important;
+    background: #ffffff;
+    border-color: #d1d5db;
+    padding-left: 12px;
+    padding-right: 12px;
+    overflow: hidden;
+  }
+  [aria-label="Cart"] .material-symbols-rounded,
+  [aria-label="cart"] .material-symbols-rounded {
+    font-size: 0 !important;
+    width: 24px;
+    height: 24px;
+    display: inline-flex !important;
+    align-items: center;
+    justify-content: center;
+  }
+  [aria-label="Cart"] .material-symbols-rounded::before,
+  [aria-label="cart"] .material-symbols-rounded::before {
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M280-80q-33 0-56.5-23.5T200-160q0-33 23.5-56.5T280-240q33 0 56.5 23.5T360-160q0 33-23.5 56.5T280-80Zm400 0q-33 0-56.5-23.5T600-160q0-33 23.5-56.5T680-240q33 0 56.5 23.5T760-160q0 33-23.5 56.5T680-80ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-3-79.5l54-98-144-304H40v-80h130l38 80Zm134 280h280-280Z' fill='%2300002d'/%3E%3C/svg%3E");
+    display: block;
+  }
+`;
+
 const meta: Meta<typeof Navigation> = {
   title: "Contentful Blocks/Navigation",
   component: Navigation,
   tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <>
+        <style>{searchFormStyle}</style>
+        <Story />
+      </>
+    ),
+  ],
 
   parameters: {
     docs: {
@@ -42,8 +75,13 @@ const meta: Meta<typeof Navigation> = {
     cartHref: "#",
     displayCartIcon: true,
 
+    searchBarIcon: {
+      url: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%239CA3AF'%3E%3Cpath d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E",
+    },
+
     invocaPhoneNumberDisplayText: "1-855-654-0841",
     callNowCtaText: "Call now:",
+    utilityNavActiveIndex: 0,
 
   },
 

package/src/hooks/contentful/use-contentful-rich-text.tsx

@@ -18,7 +18,7 @@ import { toDocument } from "@shared/utils/contentful/to-document";
 
 const defaultOptions: Options = {
   renderMark: {
-    [MARKS.BOLD]: text => <strong>{text}</strong>,
+    [MARKS.BOLD]: text => <strong className="font-black">{text}</strong>,
     [MARKS.ITALIC]: text => <em>{text}</em>,
     [MARKS.UNDERLINE]: text => <u>{text}</u>,
     [MARKS.CODE]: text => <code>{text}</code>,