Updating hero type

packages/system/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gotpop/system",
-  "version": "0.1.287",
+  "version": "0.1.295",
   "description": "React design system components for gotpop",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/system/src/components/storyblok/CardsClientFilter/CardsClientFilter.tsx

@@ -126,6 +126,10 @@ export function CardsClientFilter({
       )
     )
 
+  console.info(
+    "The minified hydration error you're seeing here is due to the use of nested html in this page's custom select. As this is an experimental project I've decided to use it anyway (it's a problem with Next.js not the broswer) obviously this is not ready for a commerical project."
+  )
+
   return (
     <Suspense fallback={<div>Loading posts...</div>}>
       <div className="filters-with-output">

packages/system/src/components/storyblok/HeroDefault/HeroDefault.mocks.tsx

@@ -1,4 +1,4 @@
-import type { HeroDefaultStoryblok } from "../../../types/storyblok-components"
+import type { HeroDefaultStoryblok } from "./HeroDefault"
 
 // Main hero mock data
 export const mockFullHeroBlok: HeroDefaultStoryblok = {

packages/system/src/components/storyblok/HeroDefault/HeroDefault.tsx

@@ -1,9 +1,19 @@
+import type { SbBlokData } from "@storyblok/react"
 import { useId } from "react"
-import type { HeroDefaultStoryblok } from "../../../types/storyblok-components"
+import type { RichtextStoryblok } from "../../../types/storyblok-components"
 import { CustomElement } from "../../ui/CustomElement"
 import { RichText } from "../RichText/RichText"
 import { Typography } from "../Typography/Typography"
 
+// Legacy component type - not currently in CMS
+export interface HeroDefaultStoryblok extends SbBlokData {
+  component: "hero_default"
+  heading?: string
+  subheading?: RichtextStoryblok
+  _uid: string
+  [k: string]: any
+}
+
 interface HeroDefaultProps {
   blok: HeroDefaultStoryblok
 }

packages/system/src/components/storyblok/PageDefault/PageDefault.mocks.tsx

@@ -1,9 +1,9 @@
 import type {
-  HeroDefaultStoryblok,
   PageDefaultStoryblok,
   RichTextBlockStoryblok,
 } from "../../../types/storyblok-components"
 import { HeroDefault } from "../HeroDefault"
+import type { HeroDefaultStoryblok } from "../HeroDefault/HeroDefault"
 import { RichTextBlock } from "../RichTextBlock"
 
 // Mock content blocks
@@ -108,23 +108,23 @@ export const mockSimplePageBlok: PageDefaultStoryblok = {
   component: "page_default",
   header: "header-1",
   footer: "footer-1",
-  body: [mockHeroBlock, mockRichTextBlock],
+  body: [mockRichTextBlock],
 }
 
 export const mockContentPageBlok: PageDefaultStoryblok = {
   _uid: "page-2",
   component: "page_default",
   header: "header-1",
   footer: "footer-1",
-  body: [mockHeroBlock, mockRichTextBlock, mockSecondRichTextBlock],
+  body: [mockRichTextBlock, mockSecondRichTextBlock],
 }
 
 export const mockLandingPageBlok: PageDefaultStoryblok = {
   _uid: "page-3",
   component: "page_default",
   header: "header-1",
   footer: "footer-1",
-  body: [mockHeroBlock],
+  body: [],
 }
 
 // Mock React nodes for simple header/footer

packages/system/src/components/storyblok/PageLayout/PageLayout.mocks.tsx

@@ -1,8 +1,6 @@
-import type {
-  HeroDefaultStoryblok,
-  RichTextBlockStoryblok,
-} from "../../../types/storyblok-components"
+import type { RichTextBlockStoryblok } from "../../../types/storyblok-components"
 import { HeroDefault } from "../HeroDefault"
+import type { HeroDefaultStoryblok } from "../HeroDefault/HeroDefault"
 import { RichTextBlock } from "../RichTextBlock"
 
 // Mock content blocks for different layout scenarios

packages/system/src/components/ui/CardsControl/CardsControl.css

@@ -1,7 +1,7 @@
 @scope (select-option) {
   & {
     align-items: center;
-    background: var(--light-100);
+    background-color: var(--light-100);
     border: 1px solid var(--light-300);
     display: grid;
     grid-column: var(--grid-column, auto);
@@ -24,13 +24,18 @@
     height: 46px;
     outline: none;
     padding: 0.5rem 1.5rem;
+    transition: background-color 0.25s ease-in-out;
 
     &::picker-icon {
       color: var(--dark-500);
       transition: 0.4s rotate;
       transition-delay: 0.25s;
     }
 
+    &:hover {
+      background-color: var(--light-200);
+    }
+
     &:open::picker-icon {
       rotate: -180deg;
     }

packages/system/src/components/ui/Icon/Icon.tsx

@@ -91,6 +91,20 @@ interface IconProps {
   className?: string
 }
 
+const SIMPLE_ICON_NAMES: IconName[] = [
+  "css",
+  "javascript",
+  "html5",
+  "react",
+  "angular",
+  "vuedotjs",
+  "nextdotjs",
+  "nodedotjs",
+  "typescript",
+  "graphql",
+  "cloudflare",
+]
+
 export function Icon({
   name,
   size = 24,
@@ -117,9 +131,15 @@ export function Icon({
     )
   }
 
+  const isSimpleIcon = SIMPLE_ICON_NAMES.includes(name)
+
   return (
     <span className={className}>
-      <IconComponent size={size} color={color} />
+      <IconComponent
+        size={size}
+        color={color}
+        {...(isSimpleIcon && { title: "" })}
+      />
     </span>
   )
 }

yarn.lock

@@ -938,7 +938,7 @@
     "@storyblok/react" "5.4.20"
 
 "@gotpop/system@*", "@gotpop/system@file:/Users/minivan/web/sites/platform/system/packages/system":
-  version "0.1.287"
+  version "0.1.295"
   resolved "file:packages/system"
   dependencies:
     "@icons-pack/react-simple-icons" "^13.8.0"