Add Hero component

packages/base/Hero/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@toptal/picasso-hero",
+  "version": "0.1.0",
+  "description": "Toptal UI components library - Hero",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist-package/src/index.js",
+  "module": "./dist-package/src/index.js",
+  "scripts": {
+    "build:package": "tsc -b tsconfig.json",
+    "prepublishOnly": "pnpm build:package"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toptal/picasso.git"
+  },
+  "author": "Toptal",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/toptal/picasso/issues"
+  },
+  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
+  "dependencies": {
+    "@toptal/picasso-tailwind-merge": "2.0.4",
+    "classnames": "^2.5.1"
+  },
+  "sideEffects": [
+    "**/styles.ts",
+    "**/styles.js"
+  ],
+  "peerDependencies": {
+    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
+    "react": ">=16.12.0 < 19.0.0"
+  },
+  "exports": {
+    ".": "./dist-package/src/index.js"
+  },
+  "devDependencies": {
+    "@toptal/picasso-test-utils": "2.0.0"
+  },
+  "files": [
+    "dist-package/**",
+    "!dist-package/tsconfig.tsbuildinfo",
+    "src"
+  ]
+}

packages/base/Hero/src/Hero/Hero.tsx

@@ -0,0 +1,77 @@
+import React, { forwardRef } from 'react'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+type Variant = 'filled' | 'outlined' | 'subtle'
+type Color = 'blue' | 'green'
+type Orientation = 'image-right' | 'image-left'
+
+export interface Props extends BaseProps {
+  children: React.ReactNode
+  variant?: Variant
+  color?: Color
+  orientation?: Orientation
+  isCompact?: boolean
+  as?: 'section' | 'header' | 'div'
+}
+
+const baseStyles = 'flex items-center gap-8 rounded-lg border border-solid'
+
+const sizeStyles = {
+  compact: 'px-4 py-8',
+  regular: 'px-8 py-16',
+}
+
+const orientationStyles: Record<Orientation, string> = {
+  'image-right': 'flex-row',
+  'image-left': 'flex-row-reverse',
+}
+
+const styles: Record<Variant, Record<Color, string>> = {
+  filled: {
+    blue: 'bg-blue-500 border-blue-500 text-white',
+    green: 'bg-green-500 border-green-500 text-white',
+  },
+  outlined: {
+    blue: 'bg-white border-blue-500 text-blue-700',
+    green: 'bg-white border-green-500 text-green-700',
+  },
+  subtle: {
+    blue: 'bg-blue-50 border-blue-100 text-blue-900',
+    green: 'bg-green-50 border-green-100 text-green-900',
+  },
+}
+
+export const Hero = forwardRef<HTMLElement, Props>(function Hero(
+  {
+    children,
+    className,
+    variant = 'filled',
+    color = 'blue',
+    orientation = 'image-right',
+    isCompact = false,
+    as: Component = 'section',
+    ...rest
+  },
+  ref
+) {
+  return (
+    <Component
+      ref={ref as React.Ref<HTMLDivElement>}
+      className={twMerge(
+        baseStyles,
+        isCompact ? sizeStyles.compact : sizeStyles.regular,
+        orientationStyles[orientation],
+        styles[variant][color],
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </Component>
+  )
+})
+
+Hero.displayName = 'Hero'
+
+export default Hero

packages/base/Hero/src/Hero/index.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './Hero'
+
+export { default as Hero } from './Hero'
+export type HeroProps = OmitInternalProps<Props>

packages/base/Hero/src/HeroCompound/index.ts

@@ -0,0 +1,8 @@
+import { Hero } from '../Hero'
+import { HeroContent } from '../HeroContent'
+import { HeroImage } from '../HeroImage'
+
+export const HeroCompound = Object.assign(Hero, {
+  Content: HeroContent,
+  Image: HeroImage,
+})

packages/base/Hero/src/HeroContent/HeroContent.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+export interface Props extends BaseProps {
+  children: React.ReactNode
+}
+
+export const HeroContent = forwardRef<HTMLDivElement, Props>(
+  function HeroContent({ children, className, ...rest }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={twMerge('flex flex-col gap-4 flex-1 min-w-0', className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+HeroContent.displayName = 'HeroContent'
+
+export default HeroContent

packages/base/Hero/src/HeroContent/index.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './HeroContent'
+
+export { default as HeroContent } from './HeroContent'
+export type HeroContentProps = OmitInternalProps<Props>

packages/base/Hero/src/HeroImage/HeroImage.tsx

@@ -0,0 +1,35 @@
+import React, { forwardRef } from 'react'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { twMerge } from '@toptal/picasso-tailwind-merge'
+
+export interface Props
+  extends BaseProps,
+    Omit<
+      React.ImgHTMLAttributes<HTMLImageElement>,
+      'className' | 'style' | 'alt'
+    > {
+  src: string
+  imageAlt: string
+}
+
+export const HeroImage = forwardRef<HTMLImageElement, Props>(function HeroImage(
+  { className, src, imageAlt, ...rest },
+  ref
+) {
+  return (
+    <img
+      ref={ref}
+      src={src}
+      alt={imageAlt}
+      className={twMerge(
+        'flex-1 min-w-0 max-w-[50%] h-auto object-cover rounded-lg',
+        className
+      )}
+      {...rest}
+    />
+  )
+})
+
+HeroImage.displayName = 'HeroImage'
+
+export default HeroImage

packages/base/Hero/src/HeroImage/index.ts

@@ -0,0 +1,6 @@
+import type { OmitInternalProps } from '@toptal/picasso-shared'
+
+import type { Props } from './HeroImage'
+
+export { default as HeroImage } from './HeroImage'
+export type HeroImageProps = OmitInternalProps<Props>

packages/base/Hero/src/index.ts

@@ -0,0 +1,4 @@
+export * from './Hero'
+export * from './HeroContent'
+export * from './HeroImage'
+export * from './HeroCompound'

packages/base/Hero/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": { "outDir": "dist-package" },
+  "include": ["src"],
+  "references": [
+    { "path": "../../picasso-tailwind" },
+    { "path": "../../picasso-tailwind-merge" }
+  ]
+}

tsconfig.pkgsrc.json

@@ -46,6 +46,7 @@
     { "path": "packages/base/FormLayout" },
     { "path": "packages/base/Grid" },
     { "path": "packages/base/Helpbox" },
+    { "path": "packages/base/Hero" },
     { "path": "packages/base/Icons" },
     { "path": "packages/base/Image" },
     { "path": "packages/base/Input" },