@behivetech/organisms.hero-banner 0.7.3 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +3 -8
  2. package/dist/index.cjs +10 -10
  3. package/dist/index.css +18 -18
  4. package/dist/index.js +10 -10
  5. package/docs.json +1 -1
  6. package/hero-banner.module.scss +3 -3
  7. package/hero-banner.tsx +1 -1
  8. package/package.json +3 -1
package/README.md CHANGED
@@ -1,6 +1,8 @@
1
1
  # HeroBanner
2
2
 
3
- TODO: Add component description.
3
+ A full-width hero section: a background image behind a headline, subtext and call-to-action links, aligned left, centre or right.
4
+
5
+ Docs: https://bht-galaxy.vercel.app/behivetech/organisms/hero-banner
4
6
 
5
7
  ## Usage
6
8
 
@@ -9,10 +11,3 @@ import { HeroBanner } from "@behivetech/organisms.hero-banner";
9
11
 
10
12
  <HeroBanner>Content</HeroBanner>;
11
13
  ```
12
-
13
- ## Props
14
-
15
- | Prop | Type | Default | Description |
16
- | ----------- | ----------- | ------- | ---------------------- |
17
- | `children` | `ReactNode` | — | Component content |
18
- | `className` | `string` | — | Additional class names |
package/dist/index.cjs CHANGED
@@ -142,15 +142,15 @@ var getClassName = ({
142
142
 
143
143
  // hero-banner.module.scss
144
144
  var hero_banner_module_default = {
145
- "BHT__hero-banner": "BHT__hero-banner",
146
- "BHT__hero-banner__content": "BHT__hero-banner__content",
147
- "BHT__hero-banner__headline": "BHT__hero-banner__headline",
148
- "BHT__hero-banner__subtext": "BHT__hero-banner__subtext",
149
- "BHT__hero-banner__ctas": "BHT__hero-banner__ctas",
150
- "BHT__hero-banner__cta": "BHT__hero-banner__cta",
151
- "BHT__hero-banner__cta-secondary": "BHT__hero-banner__cta-secondary",
152
- "BHT__hero-banner--align-left": "BHT__hero-banner--align-left",
153
- "BHT__hero-banner--align-right": "BHT__hero-banner--align-right"
145
+ "BHT__HeroBanner": "BHT__HeroBanner",
146
+ "BHT__HeroBanner__content": "BHT__HeroBanner__content",
147
+ "BHT__HeroBanner__headline": "BHT__HeroBanner__headline",
148
+ "BHT__HeroBanner__subtext": "BHT__HeroBanner__subtext",
149
+ "BHT__HeroBanner__ctas": "BHT__HeroBanner__ctas",
150
+ "BHT__HeroBanner__cta": "BHT__HeroBanner__cta",
151
+ "BHT__HeroBanner__cta-secondary": "BHT__HeroBanner__cta-secondary",
152
+ "BHT__HeroBanner--align-left": "BHT__HeroBanner--align-left",
153
+ "BHT__HeroBanner--align-right": "BHT__HeroBanner--align-right"
154
154
  };
155
155
 
156
156
  // hero-banner.tsx
@@ -168,7 +168,7 @@ var HeroBanner = ({
168
168
  }) => {
169
169
  const [rootClass, getChildClass] = getClassName({
170
170
  className,
171
- rootClass: "BHT__hero-banner",
171
+ rootClass: "BHT__HeroBanner",
172
172
  modifiers: { [`align-${align}`]: true },
173
173
  styles: hero_banner_module_default
174
174
  });
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* esbuild-sass-plugin:css-chunkhero-banner.module.scss */
2
- .BHT__hero-banner {
2
+ .BHT__HeroBanner {
3
3
  --hero-banner-on-image: #ffffff;
4
4
  position: relative;
5
5
  min-height: 30rem;
@@ -10,14 +10,14 @@
10
10
  background-color: var(--md-sys-color-surface, var(--color-surface));
11
11
  padding: var(--spacing-16, 4rem) var(--spacing-8, 2rem);
12
12
  }
13
- .BHT__hero-banner::before {
13
+ .BHT__HeroBanner::before {
14
14
  content: "";
15
15
  position: absolute;
16
16
  inset: 0;
17
17
  background: var(--md-sys-color-scrim, var(--color-overlay));
18
18
  opacity: 0.4;
19
19
  }
20
- .BHT__hero-banner__content {
20
+ .BHT__HeroBanner__content {
21
21
  position: relative;
22
22
  z-index: 1;
23
23
  max-width: 45rem;
@@ -25,7 +25,7 @@
25
25
  margin: 0 auto;
26
26
  text-align: center;
27
27
  }
28
- .BHT__hero-banner__headline {
28
+ .BHT__HeroBanner__headline {
29
29
  font-family: var(--md-sys-typescale-display-medium-font, var(--font-heading));
30
30
  font-size: var(--md-sys-typescale-display-medium-size, 2.8125rem);
31
31
  font-weight: var(--md-sys-typescale-display-medium-weight, 400);
@@ -34,7 +34,7 @@
34
34
  color: var(--hero-banner-on-image);
35
35
  margin: 0 0 var(--spacing-4, 1rem);
36
36
  }
37
- .BHT__hero-banner__subtext {
37
+ .BHT__HeroBanner__subtext {
38
38
  font-family: var(--md-sys-typescale-title-large-font, var(--font-body));
39
39
  font-size: var(--md-sys-typescale-title-large-size, 1.375rem);
40
40
  font-weight: var(--md-sys-typescale-title-large-weight, 400);
@@ -43,13 +43,13 @@
43
43
  color: color-mix(in srgb, var(--hero-banner-on-image) 85%, transparent);
44
44
  margin: 0 0 var(--spacing-6, 1.5rem);
45
45
  }
46
- .BHT__hero-banner__ctas {
46
+ .BHT__HeroBanner__ctas {
47
47
  display: flex;
48
48
  flex-wrap: wrap;
49
49
  gap: var(--spacing-3, 0.75rem);
50
50
  justify-content: center;
51
51
  }
52
- .BHT__hero-banner__cta {
52
+ .BHT__HeroBanner__cta {
53
53
  position: relative;
54
54
  isolation: isolate;
55
55
  display: inline-block;
@@ -64,7 +64,7 @@
64
64
  border-radius: var(--md-sys-shape-corner-full, 9999px);
65
65
  text-decoration: none;
66
66
  }
67
- .BHT__hero-banner__cta::after {
67
+ .BHT__HeroBanner__cta::after {
68
68
  content: "";
69
69
  position: absolute;
70
70
  inset: 0;
@@ -74,16 +74,16 @@
74
74
  pointer-events: none;
75
75
  transition: opacity var(--md-sys-motion-duration-short-2, 100ms) var(--md-sys-motion-easing-standard, ease);
76
76
  }
77
- .BHT__hero-banner__cta:hover::after {
77
+ .BHT__HeroBanner__cta:hover::after {
78
78
  opacity: var(--md-sys-state-hover-opacity, 0.08);
79
79
  }
80
- .BHT__hero-banner__cta:focus-visible::after {
80
+ .BHT__HeroBanner__cta:focus-visible::after {
81
81
  opacity: var(--md-sys-state-focus-opacity, 0.1);
82
82
  }
83
- .BHT__hero-banner__cta:active::after {
83
+ .BHT__HeroBanner__cta:active::after {
84
84
  opacity: var(--md-sys-state-pressed-opacity, 0.1);
85
85
  }
86
- .BHT__hero-banner__cta::before {
86
+ .BHT__HeroBanner__cta::before {
87
87
  content: "";
88
88
  position: absolute;
89
89
  left: 0;
@@ -93,26 +93,26 @@
93
93
  height: 100%;
94
94
  min-height: 48px;
95
95
  }
96
- .BHT__hero-banner__cta:focus-visible {
96
+ .BHT__HeroBanner__cta:focus-visible {
97
97
  outline: 3px solid var(--md-sys-color-secondary, var(--color-border-focus));
98
98
  outline-offset: 2px;
99
99
  }
100
- .BHT__hero-banner__cta-secondary {
100
+ .BHT__HeroBanner__cta-secondary {
101
101
  background: transparent;
102
102
  color: var(--hero-banner-on-image);
103
103
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-banner-on-image) 70%, transparent);
104
104
  }
105
- .BHT__hero-banner--align-left .BHT__hero-banner__content {
105
+ .BHT__HeroBanner--align-left .BHT__HeroBanner__content {
106
106
  text-align: left;
107
107
  margin-left: 0;
108
108
  }
109
- .BHT__hero-banner--align-left .BHT__hero-banner__ctas {
109
+ .BHT__HeroBanner--align-left .BHT__HeroBanner__ctas {
110
110
  justify-content: flex-start;
111
111
  }
112
- .BHT__hero-banner--align-right .BHT__hero-banner__content {
112
+ .BHT__HeroBanner--align-right .BHT__HeroBanner__content {
113
113
  text-align: right;
114
114
  margin-right: 0;
115
115
  }
116
- .BHT__hero-banner--align-right .BHT__hero-banner__ctas {
116
+ .BHT__HeroBanner--align-right .BHT__HeroBanner__ctas {
117
117
  justify-content: flex-end;
118
118
  }
package/dist/index.js CHANGED
@@ -123,15 +123,15 @@ var getClassName = ({
123
123
 
124
124
  // hero-banner.module.scss
125
125
  var hero_banner_module_default = {
126
- "BHT__hero-banner": "BHT__hero-banner",
127
- "BHT__hero-banner__content": "BHT__hero-banner__content",
128
- "BHT__hero-banner__headline": "BHT__hero-banner__headline",
129
- "BHT__hero-banner__subtext": "BHT__hero-banner__subtext",
130
- "BHT__hero-banner__ctas": "BHT__hero-banner__ctas",
131
- "BHT__hero-banner__cta": "BHT__hero-banner__cta",
132
- "BHT__hero-banner__cta-secondary": "BHT__hero-banner__cta-secondary",
133
- "BHT__hero-banner--align-left": "BHT__hero-banner--align-left",
134
- "BHT__hero-banner--align-right": "BHT__hero-banner--align-right"
126
+ "BHT__HeroBanner": "BHT__HeroBanner",
127
+ "BHT__HeroBanner__content": "BHT__HeroBanner__content",
128
+ "BHT__HeroBanner__headline": "BHT__HeroBanner__headline",
129
+ "BHT__HeroBanner__subtext": "BHT__HeroBanner__subtext",
130
+ "BHT__HeroBanner__ctas": "BHT__HeroBanner__ctas",
131
+ "BHT__HeroBanner__cta": "BHT__HeroBanner__cta",
132
+ "BHT__HeroBanner__cta-secondary": "BHT__HeroBanner__cta-secondary",
133
+ "BHT__HeroBanner--align-left": "BHT__HeroBanner--align-left",
134
+ "BHT__HeroBanner--align-right": "BHT__HeroBanner--align-right"
135
135
  };
136
136
 
137
137
  // hero-banner.tsx
@@ -149,7 +149,7 @@ var HeroBanner = ({
149
149
  }) => {
150
150
  const [rootClass, getChildClass] = getClassName({
151
151
  className,
152
- rootClass: "BHT__hero-banner",
152
+ rootClass: "BHT__HeroBanner",
153
153
  modifiers: { [`align-${align}`]: true },
154
154
  styles: hero_banner_module_default
155
155
  });
package/docs.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://github.com/behivetech/bht-component-registry/docs.schema.json",
3
3
  "version": 2,
4
- "generatedAt": "2026-10-23T16:58:54.227Z",
4
+ "generatedAt": "2026-10-23T19:00:58.945Z",
5
5
  "docs": [
6
6
  {
7
7
  "displayName": "HeroBanner",
package/hero-banner.module.scss CHANGED
@@ -6,7 +6,7 @@
6
6
  // `--hero-banner-on-image` below rather than being repeated per rule. A site
7
7
  // can override it on the root if its imagery calls for something else.
8
8
 
9
- .BHT__hero-banner {
9
+ .BHT__HeroBanner {
10
10
  --hero-banner-on-image: #ffffff;
11
11
 
12
12
  position: relative;
@@ -136,7 +136,7 @@
136
136
  }
137
137
 
138
138
  &--align-left {
139
- .BHT__hero-banner {
139
+ .BHT__HeroBanner {
140
140
  &__content {
141
141
  text-align: left;
142
142
  margin-left: 0;
@@ -149,7 +149,7 @@
149
149
  }
150
150
 
151
151
  &--align-right {
152
- .BHT__hero-banner {
152
+ .BHT__HeroBanner {
153
153
  &__content {
154
154
  text-align: right;
155
155
  margin-right: 0;
package/hero-banner.tsx CHANGED
@@ -46,7 +46,7 @@ export const HeroBanner = ({
46
46
  }: HeroBannerProps) => {
47
47
  const [rootClass, getChildClass] = getClassName({
48
48
  className,
49
- rootClass: "BHT__hero-banner",
49
+ rootClass: "BHT__HeroBanner",
50
50
  modifiers: { [`align-${align}`]: true },
51
51
  styles,
52
52
  });
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@behivetech/organisms.hero-banner",
3
- "version": "0.7.3",
3
+ "version": "0.8.0",
4
4
  "license": "MIT",
5
+ "description": "A full-width hero section: a background image behind a headline, subtext and call-to-action links, aligned left, centre or right.",
5
6
  "type": "module",
6
7
  "private": false,
7
8
  "exports": {
@@ -48,6 +49,7 @@
48
49
  "url": "https://github.com/behivetech/bht-galaxy.git",
49
50
  "directory": "registry/behivetech/organisms/hero-banner"
50
51
  },
52
+ "homepage": "https://bht-galaxy.vercel.app/behivetech/organisms/hero-banner",
51
53
  "publishConfig": {
52
54
  "registry": "https://registry.npmjs.org",
53
55
  "access": "public",