diff --git a/packages/system/package.json b/packages/system/package.json index fd672bb..75f7fa4 100644 --- a/packages/system/package.json +++ b/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", diff --git a/packages/system/src/components/storyblok/CardsClientFilter/CardsClientFilter.tsx b/packages/system/src/components/storyblok/CardsClientFilter/CardsClientFilter.tsx index 7b7e24b..3cab5f0 100644 --- a/packages/system/src/components/storyblok/CardsClientFilter/CardsClientFilter.tsx +++ b/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 ( Loading posts...}>
diff --git a/packages/system/src/components/storyblok/HeroDefault/HeroDefault.mocks.tsx b/packages/system/src/components/storyblok/HeroDefault/HeroDefault.mocks.tsx index f9161e2..6dd20e5 100644 --- a/packages/system/src/components/storyblok/HeroDefault/HeroDefault.mocks.tsx +++ b/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 = { diff --git a/packages/system/src/components/storyblok/HeroDefault/HeroDefault.tsx b/packages/system/src/components/storyblok/HeroDefault/HeroDefault.tsx index 231ce92..aace722 100644 --- a/packages/system/src/components/storyblok/HeroDefault/HeroDefault.tsx +++ b/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 } diff --git a/packages/system/src/components/storyblok/PageDefault/PageDefault.mocks.tsx b/packages/system/src/components/storyblok/PageDefault/PageDefault.mocks.tsx index 1c034b2..c51e7c2 100644 --- a/packages/system/src/components/storyblok/PageDefault/PageDefault.mocks.tsx +++ b/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,7 +108,7 @@ export const mockSimplePageBlok: PageDefaultStoryblok = { component: "page_default", header: "header-1", footer: "footer-1", - body: [mockHeroBlock, mockRichTextBlock], + body: [mockRichTextBlock], } export const mockContentPageBlok: PageDefaultStoryblok = { @@ -116,7 +116,7 @@ export const mockContentPageBlok: PageDefaultStoryblok = { component: "page_default", header: "header-1", footer: "footer-1", - body: [mockHeroBlock, mockRichTextBlock, mockSecondRichTextBlock], + body: [mockRichTextBlock, mockSecondRichTextBlock], } export const mockLandingPageBlok: PageDefaultStoryblok = { @@ -124,7 +124,7 @@ export const mockLandingPageBlok: PageDefaultStoryblok = { component: "page_default", header: "header-1", footer: "footer-1", - body: [mockHeroBlock], + body: [], } // Mock React nodes for simple header/footer diff --git a/packages/system/src/components/storyblok/PageLayout/PageLayout.mocks.tsx b/packages/system/src/components/storyblok/PageLayout/PageLayout.mocks.tsx index f9bf68d..f29da31 100644 --- a/packages/system/src/components/storyblok/PageLayout/PageLayout.mocks.tsx +++ b/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 diff --git a/packages/system/src/components/ui/CardsControl/CardsControl.css b/packages/system/src/components/ui/CardsControl/CardsControl.css index 9430e96..a029a47 100644 --- a/packages/system/src/components/ui/CardsControl/CardsControl.css +++ b/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,6 +24,7 @@ height: 46px; outline: none; padding: 0.5rem 1.5rem; + transition: background-color 0.25s ease-in-out; &::picker-icon { color: var(--dark-500); @@ -31,6 +32,10 @@ transition-delay: 0.25s; } + &:hover { + background-color: var(--light-200); + } + &:open::picker-icon { rotate: -180deg; } diff --git a/packages/system/src/components/ui/Icon/Icon.tsx b/packages/system/src/components/ui/Icon/Icon.tsx index 2aaa8df..7e1ba13 100644 --- a/packages/system/src/components/ui/Icon/Icon.tsx +++ b/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 ( - + ) } diff --git a/yarn.lock b/yarn.lock index 3f48bf9..ca542d3 100644 --- a/yarn.lock +++ b/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"