A design system in a box.
hip-ui.tngl.io/docs/introduction
add hero
+185
-7
+53
-3
apps/docs/src/components/header-layout/index.tsx
+53
-3
apps/docs/src/components/header-layout/index.tsx
···
4
4
5
5
import { spacing } from "../theme/spacing.stylex";
6
6
import { StyleXComponentProps } from "../theme/types";
7
-
import { uiColor } from "../theme/color.stylex";
7
+
import { primaryColor, uiColor } from "../theme/color.stylex";
8
+
import { primary } from "../theme/semantic-color.stylex";
8
9
import { containerBreakpoints } from "../theme/media-queries.stylex";
9
10
10
11
const styles = stylex.create({
···
48
49
footer: {
49
50
flexShrink: 0,
50
51
},
52
+
hero: {
53
+
width: "100%",
54
+
boxSizing: "border-box",
55
+
backgroundColor: primaryColor.solid1,
56
+
color: primaryColor.textContrast,
57
+
paddingTop: {
58
+
default: spacing["6"],
59
+
[containerBreakpoints.sm]: spacing["12"],
60
+
},
61
+
paddingBottom: {
62
+
default: spacing["6"],
63
+
[containerBreakpoints.sm]: spacing["12"],
64
+
},
65
+
paddingLeft: {
66
+
default: spacing["4"],
67
+
[containerBreakpoints.sm]: spacing["8"],
68
+
},
69
+
paddingRight: {
70
+
default: spacing["4"],
71
+
[containerBreakpoints.sm]: spacing["8"],
72
+
},
73
+
},
74
+
heroContent: {
75
+
maxWidth: "var(--page-content-max-width)",
76
+
width: "100%",
77
+
marginLeft: "auto",
78
+
marginRight: "auto",
79
+
boxSizing: "border-box",
80
+
},
51
81
});
52
82
53
83
/**
···
93
123
* Header layout footer component. Slot for footer content.
94
124
*/
95
125
export interface HeaderLayoutFooterProps
96
-
extends StyleXComponentProps<React.ComponentProps<"footer">> {}
126
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
97
127
98
128
export const HeaderLayoutFooter = ({
99
129
style,
100
130
...props
101
131
}: HeaderLayoutFooterProps) => {
102
-
return <footer {...props} {...stylex.props(styles.footer, style)} />;
132
+
return <div {...props} {...stylex.props(styles.footer, style)} />;
133
+
};
134
+
135
+
/**
136
+
* Header layout hero component. Full-width section with primary background color.
137
+
* Content follows the max-width constraint.
138
+
*/
139
+
export interface HeaderLayoutHeroProps
140
+
extends StyleXComponentProps<React.ComponentProps<"section">> {}
141
+
142
+
export const HeaderLayoutHero = ({
143
+
style,
144
+
children,
145
+
...props
146
+
}: HeaderLayoutHeroProps) => {
147
+
return (
148
+
<section {...props} {...stylex.props(styles.hero, style)}>
149
+
<div {...stylex.props(styles.heroContent)}>{children}</div>
150
+
</section>
151
+
);
103
152
};
104
153
105
154
/**
···
110
159
Header: HeaderLayoutHeader,
111
160
Page: HeaderLayoutPage,
112
161
Footer: HeaderLayoutFooter,
162
+
Hero: HeaderLayoutHero,
113
163
};
+69
apps/docs/src/examples/header-layout/with-hero.tsx
+69
apps/docs/src/examples/header-layout/with-hero.tsx
···
1
+
import { HeaderLayout } from "@/components/header-layout";
2
+
import {
3
+
Navbar,
4
+
NavbarLogo,
5
+
NavbarNavigation,
6
+
NavbarLink,
7
+
} from "@/components/navbar";
8
+
import { Button } from "@/components/button";
9
+
import { Heading1 } from "@/components/typography";
10
+
import { Flex } from "@/components/flex";
11
+
import * as stylex from "@stylexjs/stylex";
12
+
import { Text } from "@/components/typography/text";
13
+
14
+
const styles = stylex.create({
15
+
heroTitle: {
16
+
margin: 0,
17
+
},
18
+
heroDescription: {
19
+
margin: 0,
20
+
},
21
+
});
22
+
23
+
function Logo() {
24
+
return (
25
+
<svg
26
+
width="32"
27
+
height="32"
28
+
viewBox="0 0 120 120"
29
+
fill="currentColor"
30
+
xmlns="http://www.w3.org/2000/svg"
31
+
>
32
+
<circle cx="60" cy="60" r="50" stroke="currentColor" strokeWidth="2" />
33
+
</svg>
34
+
);
35
+
}
36
+
37
+
export function WithHero() {
38
+
return (
39
+
<HeaderLayout.Root>
40
+
<HeaderLayout.Header>
41
+
<Navbar>
42
+
<NavbarLogo>
43
+
<Logo />
44
+
</NavbarLogo>
45
+
<NavbarNavigation justify="right">
46
+
<NavbarLink href="/dashboard">Dashboard</NavbarLink>
47
+
<NavbarLink href="/projects">Projects</NavbarLink>
48
+
<NavbarLink href="/settings">Settings</NavbarLink>
49
+
</NavbarNavigation>
50
+
</Navbar>
51
+
</HeaderLayout.Header>
52
+
<HeaderLayout.Hero>
53
+
<Flex direction="column" gap="8" align="start">
54
+
<Flex direction="column">
55
+
<Heading1 style={styles.heroTitle}>
56
+
Welcome to Our Platform
57
+
</Heading1>
58
+
<Text>This is a hero section with a primary color background.</Text>
59
+
</Flex>
60
+
<Button>Get Started</Button>
61
+
</Flex>
62
+
</HeaderLayout.Hero>
63
+
<HeaderLayout.Page>
64
+
<h2>Page Content</h2>
65
+
<p>This is the main page content area.</p>
66
+
</HeaderLayout.Page>
67
+
</HeaderLayout.Root>
68
+
);
69
+
}
+2
packages/hip-ui/src/components/header-layout/header-layout-config.ts
+2
packages/hip-ui/src/components/header-layout/header-layout-config.ts
+53
-3
packages/hip-ui/src/components/header-layout/index.tsx
+53
-3
packages/hip-ui/src/components/header-layout/index.tsx
···
4
4
5
5
import { spacing } from "../theme/spacing.stylex";
6
6
import { StyleXComponentProps } from "../theme/types";
7
-
import { uiColor } from "../theme/color.stylex";
7
+
import { primaryColor, uiColor } from "../theme/color.stylex";
8
+
import { primary } from "../theme/semantic-color.stylex";
8
9
import { containerBreakpoints } from "../theme/media-queries.stylex";
9
10
10
11
const styles = stylex.create({
···
48
49
footer: {
49
50
flexShrink: 0,
50
51
},
52
+
hero: {
53
+
width: "100%",
54
+
boxSizing: "border-box",
55
+
backgroundColor: primaryColor.solid1,
56
+
color: primaryColor.textContrast,
57
+
paddingTop: {
58
+
default: spacing["6"],
59
+
[containerBreakpoints.sm]: spacing["12"],
60
+
},
61
+
paddingBottom: {
62
+
default: spacing["6"],
63
+
[containerBreakpoints.sm]: spacing["12"],
64
+
},
65
+
paddingLeft: {
66
+
default: spacing["4"],
67
+
[containerBreakpoints.sm]: spacing["8"],
68
+
},
69
+
paddingRight: {
70
+
default: spacing["4"],
71
+
[containerBreakpoints.sm]: spacing["8"],
72
+
},
73
+
},
74
+
heroContent: {
75
+
maxWidth: "var(--page-content-max-width)",
76
+
width: "100%",
77
+
marginLeft: "auto",
78
+
marginRight: "auto",
79
+
boxSizing: "border-box",
80
+
},
51
81
});
52
82
53
83
/**
···
93
123
* Header layout footer component. Slot for footer content.
94
124
*/
95
125
export interface HeaderLayoutFooterProps
96
-
extends StyleXComponentProps<React.ComponentProps<"footer">> {}
126
+
extends StyleXComponentProps<React.ComponentProps<"div">> {}
97
127
98
128
export const HeaderLayoutFooter = ({
99
129
style,
100
130
...props
101
131
}: HeaderLayoutFooterProps) => {
102
-
return <footer {...props} {...stylex.props(styles.footer, style)} />;
132
+
return <div {...props} {...stylex.props(styles.footer, style)} />;
133
+
};
134
+
135
+
/**
136
+
* Header layout hero component. Full-width section with primary background color.
137
+
* Content follows the max-width constraint.
138
+
*/
139
+
export interface HeaderLayoutHeroProps
140
+
extends StyleXComponentProps<React.ComponentProps<"section">> {}
141
+
142
+
export const HeaderLayoutHero = ({
143
+
style,
144
+
children,
145
+
...props
146
+
}: HeaderLayoutHeroProps) => {
147
+
return (
148
+
<section {...props} {...stylex.props(styles.hero, style)}>
149
+
<div {...stylex.props(styles.heroContent)}>{children}</div>
150
+
</section>
151
+
);
103
152
};
104
153
105
154
/**
···
110
159
Header: HeaderLayoutHeader,
111
160
Page: HeaderLayoutPage,
112
161
Footer: HeaderLayoutFooter,
162
+
Hero: HeaderLayoutHero,
113
163
};