tenara-ui-components 0.1.3 → 0.1.5
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.
- package/README.md +94 -29
- package/dist/atoms/BackgroundMedia/BackgroundMedia.d.ts +18 -0
- package/dist/atoms/BackgroundMedia/index.d.ts +2 -0
- package/dist/atoms/Button/Button.d.ts +23 -0
- package/dist/atoms/ButtonLink/ButtonLink.d.ts +27 -0
- package/dist/atoms/ButtonLink/index.d.ts +2 -0
- package/dist/atoms/Heading/Heading.d.ts +15 -0
- package/dist/atoms/Heading/index.d.ts +2 -0
- package/dist/atoms/TextLink/TextLink.d.ts +17 -0
- package/dist/components/index.d.ts +10 -0
- package/dist/index.css +1 -1
- package/dist/index.d.ts +8 -2
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/molecules/CTA/CTA.d.ts +33 -0
- package/dist/molecules/CTA/index.d.ts +2 -0
- package/dist/molecules/Card/Card.d.ts +20 -0
- package/dist/molecules/Header/Header.d.ts +11 -0
- package/dist/themes/core/context.d.ts +25 -0
- package/dist/themes/core/types.d.ts +106 -0
- package/dist/themes/index.d.ts +9 -0
- package/dist/themes/presets/advisors-plus.d.ts +6 -0
- package/dist/themes/presets/default.d.ts +6 -0
- package/dist/themes/presets/primax.d.ts +6 -0
- package/dist/themes/tenant-config.example.d.ts +7 -0
- package/dist/themes/utils/generator.d.ts +17 -0
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Tenara UI Components
|
|
2
2
|
|
|
3
|
-
A React component library built with atomic design principles
|
|
3
|
+
A React component library with built-in theming system for multi-tenant applications. Built with atomic design principles and optimized for separate tenant deployments.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -8,66 +8,131 @@ A React component library built with atomic design principles, featuring reusabl
|
|
|
8
8
|
npm install tenara-ui-components
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
##
|
|
11
|
+
## Quick Start
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
import { Button, Header } from 'tenara-ui-components';
|
|
13
|
+
### 1. Wrap Your App with ThemeProvider
|
|
15
14
|
|
|
16
|
-
|
|
15
|
+
```tsx
|
|
16
|
+
// app/layout.tsx (Next.js 13+) or _app.tsx
|
|
17
|
+
import { ThemeProvider, advisorsPlusTheme } from 'tenara-ui-components';
|
|
18
|
+
|
|
19
|
+
export default function RootLayout({ children }) {
|
|
20
|
+
return (
|
|
21
|
+
<html>
|
|
22
|
+
<body>
|
|
23
|
+
<ThemeProvider initialTheme={advisorsPlusTheme} initialThemeName="advisors-plus">
|
|
24
|
+
{children}
|
|
25
|
+
</ThemeProvider>
|
|
26
|
+
</body>
|
|
27
|
+
</html>
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### 2. Use Components
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { Button, Card, Header } from 'tenara-ui-components';
|
|
36
|
+
|
|
37
|
+
function HomePage() {
|
|
17
38
|
return (
|
|
18
39
|
<div>
|
|
19
40
|
<Header
|
|
20
41
|
onLogin={() => console.log('Login')}
|
|
21
42
|
onCreateAccount={() => console.log('Sign up')}
|
|
22
43
|
/>
|
|
23
|
-
<
|
|
44
|
+
<Card>
|
|
45
|
+
<h2>Welcome</h2>
|
|
46
|
+
<Button buttonType="general" label="Get Started" />
|
|
47
|
+
<Button buttonType="cta" label="Learn More" />
|
|
48
|
+
</Card>
|
|
24
49
|
</div>
|
|
25
50
|
);
|
|
26
51
|
}
|
|
27
52
|
```
|
|
28
53
|
|
|
54
|
+
## Available Themes
|
|
55
|
+
|
|
56
|
+
### Default Theme (Velera)
|
|
57
|
+
```tsx
|
|
58
|
+
import { ThemeProvider, defaultTheme } from 'tenara-ui-components';
|
|
59
|
+
|
|
60
|
+
<ThemeProvider initialTheme={defaultTheme} initialThemeName="default">
|
|
61
|
+
<App />
|
|
62
|
+
</ThemeProvider>
|
|
63
|
+
```
|
|
64
|
+
- **Colors:** Cobalt Blue & Gold
|
|
65
|
+
- **Style:** Professional, modern
|
|
66
|
+
|
|
67
|
+
### Advisors Plus Theme
|
|
68
|
+
```tsx
|
|
69
|
+
import { ThemeProvider, advisorsPlusTheme } from 'tenara-ui-components';
|
|
70
|
+
|
|
71
|
+
<ThemeProvider initialTheme={advisorsPlusTheme} initialThemeName="advisors-plus">
|
|
72
|
+
<App />
|
|
73
|
+
</ThemeProvider>
|
|
74
|
+
```
|
|
75
|
+
- **Colors:** Midnight Blue & Violet
|
|
76
|
+
- **Style:** Financial, trustworthy
|
|
77
|
+
|
|
78
|
+
### Primax Theme
|
|
79
|
+
```tsx
|
|
80
|
+
import { ThemeProvider, primaxTheme } from 'tenara-ui-components';
|
|
81
|
+
|
|
82
|
+
<ThemeProvider initialTheme={primaxTheme} initialThemeName="primax">
|
|
83
|
+
<App />
|
|
84
|
+
</ThemeProvider>
|
|
85
|
+
```
|
|
86
|
+
- **Colors:** Blue & Orange
|
|
87
|
+
- **Style:** Energetic, modern
|
|
88
|
+
|
|
29
89
|
## Components
|
|
30
90
|
|
|
31
91
|
### Atoms
|
|
32
|
-
- **Button** -
|
|
92
|
+
- **Button** - Multi-variant button component
|
|
93
|
+
- **TextLink** - Styled link component
|
|
94
|
+
- **Heading** - Typography component
|
|
95
|
+
- **BackgroundMedia** - Media background component
|
|
33
96
|
|
|
34
97
|
### Molecules
|
|
35
|
-
- **Header** - Navigation header with
|
|
98
|
+
- **Header** - Navigation header with authentication
|
|
99
|
+
- **Card** - Content card with flexible styling
|
|
100
|
+
- **CTA** - Call-to-action component
|
|
36
101
|
|
|
37
102
|
### Pages
|
|
38
|
-
- **Page** - Complete page layout
|
|
103
|
+
- **Page** - Complete page layout template
|
|
39
104
|
|
|
40
|
-
##
|
|
105
|
+
## Multi-Tenant Architecture
|
|
41
106
|
|
|
42
|
-
|
|
43
|
-
```bash
|
|
44
|
-
npm install
|
|
45
|
-
```
|
|
107
|
+
Perfect for separate tenant websites:
|
|
46
108
|
|
|
47
|
-
### Run development server
|
|
48
|
-
```bash
|
|
49
|
-
npm run dev
|
|
50
109
|
```
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
110
|
+
Component Library (npm)
|
|
111
|
+
├── advisors-plus.com → advisorsPlusTheme
|
|
112
|
+
├── primax.com → primaxTheme
|
|
113
|
+
└── velera.com → defaultTheme
|
|
55
114
|
```
|
|
56
115
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
116
|
+
Each tenant site gets:
|
|
117
|
+
- ✅ Automatic brand colors
|
|
118
|
+
- ✅ Consistent component styling
|
|
119
|
+
- ✅ Zero configuration beyond theme selection
|
|
120
|
+
- ✅ Full TypeScript support
|
|
61
121
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
122
|
+
## Features
|
|
123
|
+
|
|
124
|
+
- 🎨 **Built-in Theming** - Multiple brand themes included
|
|
125
|
+
- 🏗️ **Atomic Design** - Scalable component architecture
|
|
126
|
+
- 📱 **Responsive** - Mobile-first design approach
|
|
127
|
+
- ♿ **Accessible** - WCAG compliant components
|
|
128
|
+
- 🔧 **TypeScript** - Full type safety
|
|
129
|
+
- 📚 **Storybook** - Interactive component documentation
|
|
66
130
|
|
|
67
131
|
## Built With
|
|
68
132
|
|
|
69
133
|
- React 19
|
|
70
134
|
- Next.js 15
|
|
71
135
|
- TypeScript
|
|
136
|
+
- SCSS
|
|
72
137
|
- Storybook
|
|
73
138
|
- Rollup
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './BackgroundMedia.scss';
|
|
3
|
+
export interface BackgroundMediaProps {
|
|
4
|
+
/** Video URL for video background */
|
|
5
|
+
videoUrl?: string;
|
|
6
|
+
/** Image URL for image background */
|
|
7
|
+
imageUrl?: string;
|
|
8
|
+
/** CSS gradient overlay */
|
|
9
|
+
gradient?: string;
|
|
10
|
+
/** Background color */
|
|
11
|
+
bgColor?: string;
|
|
12
|
+
/** Custom CSS class */
|
|
13
|
+
className?: string;
|
|
14
|
+
/** Inline styles */
|
|
15
|
+
style?: React.CSSProperties;
|
|
16
|
+
}
|
|
17
|
+
/** Background media component supporting image or video */
|
|
18
|
+
export declare const BackgroundMedia: React.FC<BackgroundMediaProps>;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './Button.scss';
|
|
3
|
+
export type ButtonType = 'general' | 'video' | 'subscribe' | 'cta' | 'secondary' | 'secondarySolid' | 'twitter' | 'linkedIn' | 'facebook';
|
|
4
|
+
export interface ButtonProps {
|
|
5
|
+
/** Button variant type */
|
|
6
|
+
buttonType?: ButtonType;
|
|
7
|
+
/** Button label text */
|
|
8
|
+
label?: string;
|
|
9
|
+
/** Icon element */
|
|
10
|
+
icon?: React.ReactNode;
|
|
11
|
+
/** Allow passing classname to component */
|
|
12
|
+
className?: string;
|
|
13
|
+
/** Custom styles */
|
|
14
|
+
style?: React.CSSProperties;
|
|
15
|
+
/** Child elements */
|
|
16
|
+
children?: React.ReactNode;
|
|
17
|
+
/** Disabled state */
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
/** Click handler */
|
|
20
|
+
onClick?: () => void;
|
|
21
|
+
}
|
|
22
|
+
/** Primary UI component for user interaction */
|
|
23
|
+
export declare const Button: ({ buttonType, label, icon, className, children, style, disabled, onClick, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ButtonType } from '../Button/Button';
|
|
3
|
+
import '../Button/Button.scss';
|
|
4
|
+
export interface ButtonLinkProps {
|
|
5
|
+
/** Button variant type */
|
|
6
|
+
buttonType?: ButtonType;
|
|
7
|
+
/** Button label text */
|
|
8
|
+
label?: string;
|
|
9
|
+
/** Icon element */
|
|
10
|
+
icon?: React.ReactNode;
|
|
11
|
+
/** Link URL */
|
|
12
|
+
href: string;
|
|
13
|
+
/** Link target */
|
|
14
|
+
target?: '_blank' | '_self';
|
|
15
|
+
/** Allow passing classname to component */
|
|
16
|
+
className?: string;
|
|
17
|
+
/** Custom styles */
|
|
18
|
+
style?: React.CSSProperties;
|
|
19
|
+
/** Child elements */
|
|
20
|
+
children?: React.ReactNode;
|
|
21
|
+
/** ARIA label */
|
|
22
|
+
'aria-label'?: string;
|
|
23
|
+
/** Test ID */
|
|
24
|
+
'data-testid'?: string;
|
|
25
|
+
}
|
|
26
|
+
/** Button-styled link component for navigation */
|
|
27
|
+
export declare const ButtonLink: ({ buttonType, label, icon, href, target, className, children, style, ...props }: ButtonLinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './Heading.scss';
|
|
3
|
+
export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
4
|
+
export interface HeadingProps {
|
|
5
|
+
/** Heading level */
|
|
6
|
+
level?: HeadingLevel;
|
|
7
|
+
/** Heading text */
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
/** Custom CSS class */
|
|
10
|
+
className?: string;
|
|
11
|
+
/** Inline styles */
|
|
12
|
+
style?: React.CSSProperties;
|
|
13
|
+
}
|
|
14
|
+
/** Heading component with configurable level */
|
|
15
|
+
export declare const Heading: React.FC<HeadingProps>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './TextLink.scss';
|
|
3
|
+
export interface TextLinkProps {
|
|
4
|
+
label: string;
|
|
5
|
+
href?: string;
|
|
6
|
+
externalLink?: string;
|
|
7
|
+
target?: '_blank' | '_self' | '_parent' | '_top';
|
|
8
|
+
onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
9
|
+
className?: string;
|
|
10
|
+
icon?: React.ReactNode;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
'aria-label'?: string;
|
|
14
|
+
'aria-describedby'?: string;
|
|
15
|
+
'data-testid'?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const TextLink: React.FC<TextLinkProps>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { Button } from './atoms/Button/Button';
|
|
2
|
+
export { ButtonLink } from './atoms/ButtonLink';
|
|
3
|
+
export { TextLink } from './atoms/TextLink/TextLink';
|
|
4
|
+
export { BackgroundMedia } from './atoms/BackgroundMedia';
|
|
5
|
+
export { Heading } from './atoms/Heading';
|
|
6
|
+
export { Header } from './molecules/Header/Header';
|
|
7
|
+
export { Card } from './molecules/Card/Card';
|
|
8
|
+
export { CTA } from './molecules/CTA';
|
|
9
|
+
export { Page } from './pages/Page';
|
|
10
|
+
export * from '../themes/index';
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.button{align-items:center;border:1px solid transparent;border-radius:20px;cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;padding:14px 25px 13px;text-decoration:none;transition:all .3s ease}.button:disabled{cursor:not-allowed;opacity:.6}.button .icon{margin-left:8px}.button--general,.button--subscribe,.button--video{background-color
|
|
1
|
+
:root{--button-general-bg:#1e40af;--button-general-bg-hover:#1e3a8a;--button-general-bg-active:#1d4ed8;--button-general-color:#fff;--button-general-border:#1e40af;--button-general-shadow:none;--button-cta-bg:#efe63f;--button-cta-bg-hover:#efe63f;--button-cta-bg-active:#efe63f;--button-cta-color:#312e81;--button-cta-border:#efe63f;--button-cta-shadow:none;--button-secondary-bg:transparent;--button-secondary-bg-hover:#1e40af;--button-secondary-bg-active:#1d4ed8;--button-secondary-color:#1e40af;--button-secondary-color-hover:#fff;--button-secondary-border:#1e40af;--button-secondary-shadow:none;--button-border-radius:20px}.button{align-items:center;border:1px solid transparent;border-radius:var(--button-border-radius,20px);cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;padding:14px 25px 13px;text-decoration:none;transition:all .3s ease}.button:disabled{cursor:not-allowed;opacity:.6}.button .icon{margin-left:8px}.button--general,.button--subscribe,.button--video{background-color:var(--button-general-bg,#1e40af);border-color:var(--button-general-border,#1e40af);box-shadow:var(--button-general-shadow,none);color:var(--button-general-color,#fff)}.button--general:hover:not(:disabled),.button--subscribe:hover:not(:disabled),.button--video:hover:not(:disabled){background-color:var(--button-general-bg-hover,#1e3a8a)}.button--general:active:not(:disabled),.button--subscribe:active:not(:disabled),.button--video:active:not(:disabled){background-color:var(--button-general-bg-active,#1d4ed8)}.button--cta{background-color:var(--button-cta-bg,#efe63f);border-color:var(--button-cta-border,#efe63f);box-shadow:var(--button-cta-shadow,none);color:var(--button-cta-color,#312e81)}.button--cta:hover:not(:disabled){background-color:var(--button-cta-bg-hover,#efe63f)}.button--cta:active:not(:disabled){background-color:var(--button-cta-bg-active,#efe63f)}.button--facebook,.button--linkedIn,.button--secondary,.button--twitter{background-color:var(--button-secondary-bg,transparent);border:2px solid var(--button-secondary-border,#1e40af);box-shadow:var(--button-secondary-shadow,none);color:var(--button-secondary-color,#1e40af);padding:13px 24px 12px}.button--facebook:hover:not(:disabled),.button--linkedIn:hover:not(:disabled),.button--secondary:hover:not(:disabled),.button--twitter:hover:not(:disabled){background-color:var(--button-secondary-bg-hover,#1e40af);color:var(--button-secondary-color-hover,#fff)}.button--facebook:active:not(:disabled),.button--linkedIn:active:not(:disabled),.button--secondary:active:not(:disabled),.button--twitter:active:not(:disabled){background-color:var(--button-secondary-bg-active,#1d4ed8)}.button--secondarySolid{background-color:transparent;border:2px solid #fff;color:#fff}.button--secondarySolid:hover:not(:disabled){background-color:#3b82f6;border-color:#3b82f6}.button--secondarySolid:active:not(:disabled){background-color:#2563eb;border-color:#2563eb}.text-link{align-items:center;color:#1e3a8a;cursor:pointer;display:inline-flex;font-weight:700;gap:4px;text-decoration:underline;text-underline-offset:2px;transition:color .2s ease,text-decoration-color .2s ease}.text-link:hover{color:#1e40af;text-decoration:underline}.text-link:focus{border-radius:2px;outline:2px solid #2563eb;outline-offset:2px}.text-link:focus:not(:focus-visible){outline:none}.text-link:focus-visible{border-radius:2px;outline:2px solid #2563eb;outline-offset:2px}.text-link:active{color:#1e40af}.text-link--disabled{cursor:not-allowed;pointer-events:none}.text-link--disabled,.text-link--disabled:hover{color:#9ca3af;text-decoration:none}@media (prefers-contrast:high){.text-link{text-decoration-thickness:2px}.text-link:focus-visible{outline-width:3px}}@media (prefers-reduced-motion:reduce){.text-link{transition:none}}.background-media{background-position:50%;background-repeat:no-repeat;background-size:cover;height:100%;left:0;position:absolute;top:0;width:100%}.background-media--video{object-fit:cover}.heading{margin:0}.card-wrapper{max-width:340px;width:100%}.card__link{color:inherit;display:block;text-decoration:none}.card__link:focus{outline:2px solid currentColor;outline-offset:2px}.card{background-color:#fff;border:1px solid #e0e0e0;border-radius:20px;box-sizing:border-box;transition:box-shadow .3s ease;width:100%}.card--hover-effect:hover{box-shadow:0 3px 6px rgba(0,0,0,.1)}.card--hover-effect:hover .card__image-container{transform:scale(1.4)}.card:active{border:2px solid #00bcd4}.card[role=button]{cursor:pointer}.card[role=button]:focus{outline:2px solid currentColor;outline-offset:2px}.card__image-wrapper{aspect-ratio:3/2;border-radius:20px 20px 0 0;overflow:hidden;position:relative;width:100%}@media (max-width:768px){.card__image-wrapper{aspect-ratio:16/9}}.card__image-container{bottom:0;left:0;position:absolute;right:0;top:0;transition:transform .25s ease}.card__image{height:100%;object-fit:cover;width:100%}.card__body{box-sizing:border-box;padding:30px}:root{--content-container-bg:#312e81;--content-container-text-dark-bg:#fff;--content-container-boarder-radius:0px 0px 200px;--content-container-padding:84px 50px 0px 60px}.cta{height:500px;overflow:hidden;position:relative;width:100%}.cta__content{background-color:var(--content-container-bg);border-radius:var(--content-container-boarder-radius);height:450px;min-width:50%;padding:var(--content-container-padding);position:relative;width:745px;z-index:1}.cta__title{font-size:2.5rem;font-weight:700;margin:0 0 1rem}.cta__description,.cta__title{color:var(--content-container-text-dark-bg)}.cta__description{font-size:1.125rem;line-height:1.6;margin:0 0 2rem}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
-
export { Button } from './atoms/Button';
|
|
2
|
-
export {
|
|
1
|
+
export { Button } from './atoms/Button/Button';
|
|
2
|
+
export { ButtonLink } from './atoms/ButtonLink';
|
|
3
|
+
export { TextLink } from './atoms/TextLink/TextLink';
|
|
4
|
+
export { BackgroundMedia } from './atoms/BackgroundMedia';
|
|
5
|
+
export { Heading } from './atoms/Heading';
|
|
6
|
+
export { Header } from './molecules/Header/Header';
|
|
7
|
+
export { Card } from './molecules/Card/Card';
|
|
8
|
+
export { CTA } from './molecules/CTA';
|
|
3
9
|
export { Page } from './pages/Page';
|
package/dist/index.esm.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.button{align-items:center;border:1px solid transparent;border-radius:20px;cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;padding:14px 25px 13px;text-decoration:none;transition:all .3s ease}.button:disabled{cursor:not-allowed;opacity:.6}.button .icon{margin-left:8px}.button--general,.button--subscribe,.button--video{background-color
|
|
1
|
+
:root{--button-general-bg:#1e40af;--button-general-bg-hover:#1e3a8a;--button-general-bg-active:#1d4ed8;--button-general-color:#fff;--button-general-border:#1e40af;--button-general-shadow:none;--button-cta-bg:#efe63f;--button-cta-bg-hover:#efe63f;--button-cta-bg-active:#efe63f;--button-cta-color:#312e81;--button-cta-border:#efe63f;--button-cta-shadow:none;--button-secondary-bg:transparent;--button-secondary-bg-hover:#1e40af;--button-secondary-bg-active:#1d4ed8;--button-secondary-color:#1e40af;--button-secondary-color-hover:#fff;--button-secondary-border:#1e40af;--button-secondary-shadow:none;--button-border-radius:20px}.button{align-items:center;border:1px solid transparent;border-radius:var(--button-border-radius,20px);cursor:pointer;display:inline-flex;font-size:16px;font-weight:600;padding:14px 25px 13px;text-decoration:none;transition:all .3s ease}.button:disabled{cursor:not-allowed;opacity:.6}.button .icon{margin-left:8px}.button--general,.button--subscribe,.button--video{background-color:var(--button-general-bg,#1e40af);border-color:var(--button-general-border,#1e40af);box-shadow:var(--button-general-shadow,none);color:var(--button-general-color,#fff)}.button--general:hover:not(:disabled),.button--subscribe:hover:not(:disabled),.button--video:hover:not(:disabled){background-color:var(--button-general-bg-hover,#1e3a8a)}.button--general:active:not(:disabled),.button--subscribe:active:not(:disabled),.button--video:active:not(:disabled){background-color:var(--button-general-bg-active,#1d4ed8)}.button--cta{background-color:var(--button-cta-bg,#efe63f);border-color:var(--button-cta-border,#efe63f);box-shadow:var(--button-cta-shadow,none);color:var(--button-cta-color,#312e81)}.button--cta:hover:not(:disabled){background-color:var(--button-cta-bg-hover,#efe63f)}.button--cta:active:not(:disabled){background-color:var(--button-cta-bg-active,#efe63f)}.button--facebook,.button--linkedIn,.button--secondary,.button--twitter{background-color:var(--button-secondary-bg,transparent);border:2px solid var(--button-secondary-border,#1e40af);box-shadow:var(--button-secondary-shadow,none);color:var(--button-secondary-color,#1e40af);padding:13px 24px 12px}.button--facebook:hover:not(:disabled),.button--linkedIn:hover:not(:disabled),.button--secondary:hover:not(:disabled),.button--twitter:hover:not(:disabled){background-color:var(--button-secondary-bg-hover,#1e40af);color:var(--button-secondary-color-hover,#fff)}.button--facebook:active:not(:disabled),.button--linkedIn:active:not(:disabled),.button--secondary:active:not(:disabled),.button--twitter:active:not(:disabled){background-color:var(--button-secondary-bg-active,#1d4ed8)}.button--secondarySolid{background-color:transparent;border:2px solid #fff;color:#fff}.button--secondarySolid:hover:not(:disabled){background-color:#3b82f6;border-color:#3b82f6}.button--secondarySolid:active:not(:disabled){background-color:#2563eb;border-color:#2563eb}.text-link{align-items:center;color:#1e3a8a;cursor:pointer;display:inline-flex;font-weight:700;gap:4px;text-decoration:underline;text-underline-offset:2px;transition:color .2s ease,text-decoration-color .2s ease}.text-link:hover{color:#1e40af;text-decoration:underline}.text-link:focus{border-radius:2px;outline:2px solid #2563eb;outline-offset:2px}.text-link:focus:not(:focus-visible){outline:none}.text-link:focus-visible{border-radius:2px;outline:2px solid #2563eb;outline-offset:2px}.text-link:active{color:#1e40af}.text-link--disabled{cursor:not-allowed;pointer-events:none}.text-link--disabled,.text-link--disabled:hover{color:#9ca3af;text-decoration:none}@media (prefers-contrast:high){.text-link{text-decoration-thickness:2px}.text-link:focus-visible{outline-width:3px}}@media (prefers-reduced-motion:reduce){.text-link{transition:none}}.background-media{background-position:50%;background-repeat:no-repeat;background-size:cover;height:100%;left:0;position:absolute;top:0;width:100%}.background-media--video{object-fit:cover}.heading{margin:0}.card-wrapper{max-width:340px;width:100%}.card__link{color:inherit;display:block;text-decoration:none}.card__link:focus{outline:2px solid currentColor;outline-offset:2px}.card{background-color:#fff;border:1px solid #e0e0e0;border-radius:20px;box-sizing:border-box;transition:box-shadow .3s ease;width:100%}.card--hover-effect:hover{box-shadow:0 3px 6px rgba(0,0,0,.1)}.card--hover-effect:hover .card__image-container{transform:scale(1.4)}.card:active{border:2px solid #00bcd4}.card[role=button]{cursor:pointer}.card[role=button]:focus{outline:2px solid currentColor;outline-offset:2px}.card__image-wrapper{aspect-ratio:3/2;border-radius:20px 20px 0 0;overflow:hidden;position:relative;width:100%}@media (max-width:768px){.card__image-wrapper{aspect-ratio:16/9}}.card__image-container{bottom:0;left:0;position:absolute;right:0;top:0;transition:transform .25s ease}.card__image{height:100%;object-fit:cover;width:100%}.card__body{box-sizing:border-box;padding:30px}:root{--content-container-bg:#312e81;--content-container-text-dark-bg:#fff;--content-container-boarder-radius:0px 0px 200px;--content-container-padding:84px 50px 0px 60px}.cta{height:500px;overflow:hidden;position:relative;width:100%}.cta__content{background-color:var(--content-container-bg);border-radius:var(--content-container-boarder-radius);height:450px;min-width:50%;padding:var(--content-container-padding);position:relative;width:745px;z-index:1}.cta__title{font-size:2.5rem;font-weight:700;margin:0 0 1rem}.cta__description,.cta__title{color:var(--content-container-text-dark-bg)}.cta__description{font-size:1.125rem;line-height:1.6;margin:0 0 2rem}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e from"react";"function"==typeof SuppressedError&&SuppressedError;var
|
|
1
|
+
import e,{createContext as r,useEffect as o,useContext as n}from"react";function t(e,r){var o={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(o[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(n=Object.getOwnPropertySymbols(e);t<n.length;t++)r.indexOf(n[t])<0&&Object.prototype.propertyIsEnumerable.call(e,n[t])&&(o[n[t]]=e[n[t]])}return o}"function"==typeof SuppressedError&&SuppressedError;var a,c={exports:{}},s={};var l,i,d={};
|
|
2
2
|
/**
|
|
3
3
|
* @license React
|
|
4
4
|
* react-jsx-runtime.development.js
|
|
@@ -7,5 +7,5 @@ import e from"react";"function"==typeof SuppressedError&&SuppressedError;var r,t
|
|
|
7
7
|
*
|
|
8
8
|
* This source code is licensed under the MIT license found in the
|
|
9
9
|
* LICENSE file in the root directory of this source tree.
|
|
10
|
-
*/function l(){return o||(o=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===w?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case d:return"Fragment";case m:return"Profiler";case b:return"StrictMode";case j:return"Suspense";case k:return"SuspenseList";case O:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case y:return"Portal";case h:return(e.displayName||"Context")+".Provider";case g:return(e._context.displayName||"Context")+".Consumer";case v:var t=e.render;return(e=e.displayName)||(e=""!==(e=t.displayName||t.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case x:return null!==(t=e.displayName||null)?t:r(e.type)||"Memo";case S:t=e._payload,e=e._init;try{return r(e(t))}catch(e){}}return null}function t(e){return""+e}function n(e){try{t(e);var r=!1}catch(e){r=!0}if(r){var n=(r=console).error,o="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),t(e)}}function o(e){if(e===d)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===S)return"<...>";try{var t=r(e);return t?"<"+t+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function l(){var e=r(this.type);return P[e]||(P[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function i(e,t,o,a,s,i,f,y){var d,b=t.children;if(void 0!==b)if(a)if(T(b)){for(a=0;a<b.length;a++)c(b[a]);Object.freeze&&Object.freeze(b)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else c(b);if(N.call(t,"key")){b=r(e);var m=Object.keys(t).filter(function(e){return"key"!==e});a=0<m.length?"{key: someKey, "+m.join(": ..., ")+": ...}":"{key: someKey}",C[b+a]||(m=0<m.length?"{"+m.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',a,b,m,b),C[b+a]=!0)}if(b=null,void 0!==o&&(n(o),b=""+o),function(e){if(N.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(t)&&(n(t.key),b=""+t.key),"key"in t)for(var g in o={},t)"key"!==g&&(o[g]=t[g]);else o=t;return b&&function(e,r){function t(){u||(u=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(o,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,t,n,o,a,s,i){return t=a.ref,e={$$typeof:p,type:e,key:r,props:a,_owner:o},null!==(void 0!==t?t:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:l}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,b,i,0,null===(d=_.A)?null:d.getOwner(),o,f,y)}function c(e){"object"==typeof e&&null!==e&&e.$$typeof===p&&e._store&&(e._store.validated=1)}var u,f=e,p=Symbol.for("react.transitional.element"),y=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),b=Symbol.for("react.strict_mode"),m=Symbol.for("react.profiler"),g=Symbol.for("react.consumer"),h=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),j=Symbol.for("react.suspense"),k=Symbol.for("react.suspense_list"),x=Symbol.for("react.memo"),S=Symbol.for("react.lazy"),O=Symbol.for("react.activity"),w=Symbol.for("react.client.reference"),_=f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N=Object.prototype.hasOwnProperty,T=Array.isArray,E=console.createTask?console.createTask:function(){return null},P={},A=(f={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(f,a)(),R=E(o(a)),C={};s.Fragment=d,s.jsx=function(e,r,t,n,a){var s=1e4>_.recentlyCreatedOwnerStacks++;return i(e,r,t,!1,0,a,s?Error("react-stack-top-frame"):A,s?E(o(e)):R)},s.jsxs=function(e,r,t,n,a){var s=1e4>_.recentlyCreatedOwnerStacks++;return i(e,r,t,!0,0,a,s?Error("react-stack-top-frame"):A,s?E(o(e)):R)}}()),s}var i=(a||(a=1,"production"===process.env.NODE_ENV?t.exports=function(){if(r)return n;r=1;var e=Symbol.for("react.transitional.element"),t=Symbol.for("react.fragment");function o(r,t,n){var o=null;if(void 0!==n&&(o=""+n),void 0!==t.key&&(o=""+t.key),"key"in t)for(var a in n={},t)"key"!==a&&(n[a]=t[a]);else n=t;return t=n.ref,{$$typeof:e,type:r,key:o,ref:void 0!==t?t:null,props:n}}return n.Fragment=t,n.jsx=o,n.jsxs=o,n}():t.exports=l()),t.exports);const c=e=>{var{buttonType:r="general",label:t,icon:n,className:o,children:a,style:s,disabled:l=!1,onClick:c}=e,u=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)r.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(t[n[o]]=e[n[o]])}return t}(e,["buttonType","label","icon","className","children","style","disabled","onClick"]);const f=`button button--${r} ${o||""}`;return i.jsxs("button",Object.assign({type:"button",className:f,style:s,onClick:c,disabled:l},u,{children:[a||t," ",n&&i.jsx("span",{className:"icon",children:n})]}))},u=({user:e,onLogin:r,onLogout:t,onCreateAccount:n})=>i.jsx("header",{children:i.jsxs("div",{className:"storybook-header",children:[i.jsxs("div",{children:[i.jsx("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:i.jsxs("g",{fill:"none",fillRule:"evenodd",children:[i.jsx("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),i.jsx("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),i.jsx("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),i.jsx("h1",{children:"Acme"})]}),i.jsx("div",{children:e?i.jsxs(i.Fragment,{children:[i.jsxs("span",{className:"welcome",children:["Welcome, ",i.jsx("b",{children:e.name}),"!"]}),i.jsx(c,{buttonType:"secondary",onClick:t,label:"Log out"})]}):i.jsxs(i.Fragment,{children:[i.jsx(c,{buttonType:"secondary",onClick:r,label:"Log in"}),i.jsx(c,{buttonType:"cta",onClick:n,label:"Sign up"})]})})]})}),f=()=>{const[r,t]=e.useState();return i.jsxs("article",{children:[i.jsx(u,{user:r,onLogin:()=>t({name:"Jane Doe"}),onLogout:()=>t(void 0),onCreateAccount:()=>t({name:"Jane Doe"})}),i.jsxs("section",{className:"storybook-page",children:[i.jsx("h2",{children:"Pages in Storybook"}),i.jsxs("p",{children:["We recommend building UIs with a"," ",i.jsx("a",{href:"https://componentdriven.org",target:"_blank",rel:"noopener noreferrer",children:i.jsx("strong",{children:"component-driven"})})," ","process starting with atomic components and ending with pages."]})]})]})};export{c as Button,u as Header,f as Page};
|
|
10
|
+
*/function b(){return l||(l=1,"production"!==process.env.NODE_ENV&&function(){function r(e){if(null==e)return null;if("function"==typeof e)return e.$$typeof===_?null:e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case p:return"Fragment";case y:return"Profiler";case g:return"StrictMode";case h:return"Suspense";case k:return"SuspenseList";case N:return"Activity"}if("object"==typeof e)switch("number"==typeof e.tag&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case u:return"Portal";case v:return(e.displayName||"Context")+".Provider";case m:return(e._context.displayName||"Context")+".Consumer";case x:var o=e.render;return(e=e.displayName)||(e=""!==(e=o.displayName||o.name||"")?"ForwardRef("+e+")":"ForwardRef"),e;case j:return null!==(o=e.displayName||null)?o:r(e.type)||"Memo";case w:o=e._payload,e=e._init;try{return r(e(o))}catch(e){}}return null}function o(e){return""+e}function n(e){try{o(e);var r=!1}catch(e){r=!0}if(r){var n=(r=console).error,t="function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",t),o(e)}}function t(e){if(e===p)return"<>";if("object"==typeof e&&null!==e&&e.$$typeof===w)return"<...>";try{var o=r(e);return o?"<"+o+">":"<...>"}catch(e){return"<...>"}}function a(){return Error("react-stack-top-frame")}function c(){var e=r(this.type);return A[e]||(A[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),void 0!==(e=this.props.ref)?e:null}function s(e,o,t,a,s,d,b,u){var p,g=o.children;if(void 0!==g)if(a)if(S(g)){for(a=0;a<g.length;a++)l(g[a]);Object.freeze&&Object.freeze(g)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else l(g);if(O.call(o,"key")){g=r(e);var y=Object.keys(o).filter(function(e){return"key"!==e});a=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",C[g+a]||(y=0<y.length?"{"+y.join(": ..., ")+": ...}":"{}",console.error('A props object containing a "key" prop is being spread into JSX:\n let props = %s;\n <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n let props = %s;\n <%s key={someKey} {...props} />',a,g,y,g),C[g+a]=!0)}if(g=null,void 0!==t&&(n(t),g=""+t),function(e){if(O.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(o)&&(n(o.key),g=""+o.key),"key"in o)for(var m in t={},o)"key"!==m&&(t[m]=o[m]);else t=o;return g&&function(e,r){function o(){i||(i=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}o.isReactWarning=!0,Object.defineProperty(e,"key",{get:o,configurable:!0})}(t,"function"==typeof e?e.displayName||e.name||"Unknown":e),function(e,r,o,n,t,a,s,l){return o=a.ref,e={$$typeof:f,type:e,key:r,props:a,_owner:t},null!==(void 0!==o?o:null)?Object.defineProperty(e,"ref",{enumerable:!1,get:c}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:s}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:l}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}(e,g,d,0,null===(p=$.A)?null:p.getOwner(),t,b,u)}function l(e){"object"==typeof e&&null!==e&&e.$$typeof===f&&e._store&&(e._store.validated=1)}var i,b=e,f=Symbol.for("react.transitional.element"),u=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),g=Symbol.for("react.strict_mode"),y=Symbol.for("react.profiler"),m=Symbol.for("react.consumer"),v=Symbol.for("react.context"),x=Symbol.for("react.forward_ref"),h=Symbol.for("react.suspense"),k=Symbol.for("react.suspense_list"),j=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),N=Symbol.for("react.activity"),_=Symbol.for("react.client.reference"),$=b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,S=Array.isArray,H=console.createTask?console.createTask:function(){return null},A={},R=(b={"react-stack-bottom-frame":function(e){return e()}})["react-stack-bottom-frame"].bind(b,a)(),T=H(t(a)),C={};d.Fragment=p,d.jsx=function(e,r,o,n,a){var c=1e4>$.recentlyCreatedOwnerStacks++;return s(e,r,o,!1,0,a,c?Error("react-stack-top-frame"):R,c?H(t(e)):T)},d.jsxs=function(e,r,o,n,a){var c=1e4>$.recentlyCreatedOwnerStacks++;return s(e,r,o,!0,0,a,c?Error("react-stack-top-frame"):R,c?H(t(e)):T)}}()),d}var f=(i||(i=1,"production"===process.env.NODE_ENV?c.exports=function(){if(a)return s;a=1;var e=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function o(r,o,n){var t=null;if(void 0!==n&&(t=""+n),void 0!==o.key&&(t=""+o.key),"key"in o)for(var a in n={},o)"key"!==a&&(n[a]=o[a]);else n=o;return o=n.ref,{$$typeof:e,type:r,key:t,ref:void 0!==o?o:null,props:n}}return s.Fragment=r,s.jsx=o,s.jsxs=o,s}():c.exports=b()),c.exports);const u=e=>{var{buttonType:r="general",label:o,icon:n,className:a,children:c,style:s,disabled:l=!1,onClick:i}=e,d=t(e,["buttonType","label","icon","className","children","style","disabled","onClick"]);const b=`button button--${r} ${a||""}`;return f.jsxs("button",Object.assign({type:"button",className:b,style:s,onClick:i,disabled:l},d,{children:[c||o," ",n&&f.jsx("span",{className:"icon",children:n})]}))},p=e=>{var{buttonType:r="general",label:o,icon:n,href:a,target:c="_self",className:s,children:l,style:i}=e,d=t(e,["buttonType","label","icon","href","target","className","children","style"]);const b=`button button--${r} ${s||""}`,u="_blank"===c?"noopener noreferrer":void 0;return f.jsxs("a",Object.assign({href:a,target:c,rel:u,className:b,style:i},d,{children:[l||o," ",n&&f.jsx("span",{className:"icon",children:n})]}))},g=({label:e,href:r,externalLink:o,target:n="_self",onClick:t,className:a="",icon:c,style:s,disabled:l=!1,"aria-label":i,"aria-describedby":d,"data-testid":b})=>{const u=o||r,p=!!o||"_blank"===n;return!u||l?f.jsxs("span",{className:`text-link text-link--disabled ${a}`,style:s,"data-testid":b,"aria-label":i||e,"aria-describedby":d,children:[e," ",c]}):f.jsxs("a",{href:u,target:n,rel:p?"noopener noreferrer":void 0,onClick:e=>{l?e.preventDefault():t&&t(e)},onKeyDown:e=>{!l||"Enter"!==e.key&&" "!==e.key||e.preventDefault()},className:`text-link ${a}`,style:s,"aria-label":i,"aria-describedby":d,"data-testid":b,children:[e," ",c]})},y=({videoUrl:e,imageUrl:r,gradient:o,bgColor:n,className:t,style:a})=>{const c=["background-media",t].filter(Boolean).join(" ");if(e)return f.jsxs("video",{className:`${c} background-media--video`,autoPlay:!0,muted:!0,loop:!0,playsInline:!0,style:a,children:[f.jsx("source",{src:e,type:"video/mp4"}),"Your browser does not support video."]});const s=Object.assign({backgroundImage:o?`${o}, url(${r})`:r?`url(${r})`:void 0,backgroundColor:n},a);return f.jsx("div",{className:c,style:s})},m=({level:e="h2",children:r,className:o,style:n})=>{const t=e,a=["heading",o].filter(Boolean).join(" ");return f.jsx(t,{className:a,style:n,children:r})},v=({user:e,onLogin:r,onLogout:o,onCreateAccount:n})=>f.jsx("header",{children:f.jsxs("div",{className:"storybook-header",children:[f.jsxs("div",{children:[f.jsx("svg",{width:"32",height:"32",viewBox:"0 0 32 32",xmlns:"http://www.w3.org/2000/svg",children:f.jsxs("g",{fill:"none",fillRule:"evenodd",children:[f.jsx("path",{d:"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z",fill:"#FFF"}),f.jsx("path",{d:"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z",fill:"#555AB9"}),f.jsx("path",{d:"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z",fill:"#91BAF8"})]})}),f.jsx("h1",{children:"Acme"})]}),f.jsx("div",{children:e?f.jsxs(f.Fragment,{children:[f.jsxs("span",{className:"welcome",children:["Welcome, ",f.jsx("b",{children:e.name}),"!"]}),f.jsx(u,{buttonType:"secondary",onClick:o,label:"Log out"})]}):f.jsxs(f.Fragment,{children:[f.jsx(u,{buttonType:"secondary",onClick:r,label:"Log in"}),f.jsx(u,{buttonType:"cta",onClick:n,label:"Sign up"})]})})]})}),x=({children:e,maxWidth:r="340px",padding:o="30px",onClick:n,href:t,target:a="_self",imageUrl:c,imageAlt:s="",className:l="",style:i,aspectRatio:d="3/2",borderRadius:b="20px",hoverEffect:u=!0,"aria-label":p,"data-testid":g})=>{const y=e=>{"Enter"!==e.key&&" "!==e.key||!n||(e.preventDefault(),n(e))},m=e=>{n&&n(e)},v=Object.assign({maxWidth:r},i),x={borderRadius:b},h={aspectRatio:d,borderRadius:`${b} ${b} 0 0`},k={padding:o},j=["card",u&&"card--hover-effect",l].filter(Boolean).join(" "),w=f.jsxs("div",{className:j,style:x,"data-testid":g,children:[c&&f.jsx("div",{className:"card__image-wrapper",style:h,children:f.jsx("div",{className:"card__image-container",children:f.jsx("img",{src:c,alt:s,className:"card__image",loading:"lazy"})})}),f.jsx("div",{className:"card__body",style:k,children:e})]});return t?f.jsx("div",{className:"card-wrapper",style:v,children:f.jsx("a",{href:t,target:a,rel:"_blank"===a?"noopener noreferrer":void 0,onClick:m,className:"card__link",style:{borderRadius:b},"aria-label":p,children:w})}):n?f.jsx("div",{className:"card-wrapper",style:v,children:f.jsxs("div",{className:j,style:x,onClick:n,onKeyDown:y,role:"button",tabIndex:0,"aria-label":p,"data-testid":g,children:[c&&f.jsx("div",{className:"card__image-wrapper",style:h,children:f.jsx("div",{className:"card__image-container",children:f.jsx("img",{src:c,alt:s,className:"card__image",loading:"lazy"})})}),f.jsx("div",{className:"card__body",style:k,children:e})]})}):f.jsx("div",{className:"card-wrapper",style:v,children:w})},h=({videoUrl:e,imageUrl:r,gradient:o,bgColor:n,title:t,headingLevel:a="h2",description:c,buttonText:s,link:l,externalLink:i,target:d="_self",className:b,style:g})=>{const v=["cta",b].filter(Boolean).join(" ");return f.jsxs("div",{className:v,style:g,children:[f.jsx(y,{videoUrl:e,imageUrl:r,gradient:o,bgColor:n}),f.jsxs("div",{className:"cta__content",children:[f.jsx(m,{level:a,className:"cta__title",children:t}),c&&f.jsx("p",{className:"cta__description",children:c}),l?f.jsx(p,{buttonType:"cta",label:s,href:l,target:i?d:"_self"}):f.jsx(u,{buttonType:"cta",label:s,onClick:()=>{}})]})]})},k=()=>{const[r,o]=e.useState();return f.jsxs("article",{children:[f.jsx(v,{user:r,onLogin:()=>o({name:"Jane Doe"}),onLogout:()=>o(void 0),onCreateAccount:()=>o({name:"Jane Doe"})}),f.jsxs("section",{className:"storybook-page",children:[f.jsx("h2",{children:"Pages in Storybook"}),f.jsxs("p",{children:["We recommend building UIs with a"," ",f.jsx("a",{href:"https://componentdriven.org",target:"_blank",rel:"noopener noreferrer",children:f.jsx("strong",{children:"component-driven"})})," ","process starting with atomic components and ending with pages."]})]})]})},j={name:"default",colors:{primary:"#2e6bf0",primaryHover:"#1e40af",primaryActive:"#1e3a8a",secondary:"#efe63f",secondaryHover:"#eab308",secondaryActive:"#ca8a04",text:"#1f2937",textInverse:"#ffffff",background:"#ffffff",border:"#e5e5e5",success:"#10b981",warning:"#efe63f",error:"#ef4444"},spacing:{xs:"4px",sm:"8px",md:"16px",lg:"24px",xl:"32px",xxl:"48px"},borderRadius:{sm:"4px",md:"8px",lg:"16px",xl:"24px"},shadows:{sm:"0 2px 4px rgba(0, 0, 0, 0.1)",md:"0 4px 8px rgba(0, 0, 0, 0.15)",lg:"0 8px 16px rgba(0, 0, 0, 0.2)",xl:"0 16px 32px rgba(0, 0, 0, 0.25)"},typography:{fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontFamilyHeading:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSizeXs:"12px",fontSizeSm:"14px",fontSizeMd:"16px",fontSizeLg:"18px",fontSizeXl:"24px",fontWeightNormal:"400",fontWeightMedium:"500",fontWeightBold:"700",lineHeightTight:"1.25",lineHeightNormal:"1.5",lineHeightRelaxed:"1.75"},buttons:{borderRadius:"8px",padding:"12px 24px",fontSize:"16px",fontWeight:"500",general:{background:"#2e6bf0",backgroundHover:"#1e40af",backgroundActive:"#1e3a8a",color:"#ffffff",colorHover:"#ffffff",border:"#2e6bf0",borderHover:"#1e40af",shadow:"0 2px 4px rgba(46, 107, 240, 0.2)"},cta:{background:"#efe63f",backgroundHover:"#eab308",backgroundActive:"#ca8a04",color:"#1f2937",colorHover:"#1f2937",border:"#efe63f",borderHover:"#eab308",shadow:"0 4px 8px rgba(239, 230, 63, 0.3)"},secondary:{background:"transparent",backgroundHover:"#2e6bf0",backgroundActive:"#1e40af",color:"#2e6bf0",colorHover:"#ffffff",border:"#2e6bf0",borderHover:"#2e6bf0",shadow:"none"},outline:{background:"transparent",backgroundHover:"#f8f9fa",backgroundActive:"#e9ecef",color:"#333333",colorHover:"#333333",border:"#e5e5e5",borderHover:"#d1d5db",shadow:"none"},ghost:{background:"transparent",backgroundHover:"#f8f9fa",backgroundActive:"#e9ecef",color:"#333333",colorHover:"#333333",border:"transparent",borderHover:"transparent",shadow:"none"}},components:{card:{background:"#ffffff",border:"1px solid #e5e5e5",borderRadius:"8px",shadow:"0 2px 4px rgba(0, 0, 0, 0.1)",padding:"24px"},header:{background:"#ffffff",borderBottom:"1px solid #e5e5e5",height:"64px",padding:"0 24px"},cta:{background:"#1e40af",borderRadius:"16px",padding:"32px"}}},w=Object.assign(Object.assign({},j),{name:"advisors-plus",colors:Object.assign(Object.assign({},j.colors),{primary:"#1e2a78",primaryHover:"#151f5c",primaryActive:"#0f1640",secondary:"#4f46e5",secondaryHover:"#4338ca",secondaryActive:"#3730a3",text:"#1f2937",background:"#f8fafc"}),buttons:Object.assign(Object.assign({},j.buttons),{borderRadius:"8px",general:{background:"#1e2a78",backgroundHover:"#151f5c",backgroundActive:"#0f1640",color:"#ffffff",colorHover:"#ffffff",border:"#1e2a78",borderHover:"#151f5c",shadow:"0 2px 6px rgba(30, 42, 120, 0.25)"},cta:{background:"#4f46e5",backgroundHover:"#4338ca",backgroundActive:"#3730a3",color:"#ffffff",colorHover:"#ffffff",border:"#4f46e5",borderHover:"#4338ca",shadow:"0 3px 6px rgba(79, 70, 229, 0.3)"},secondary:{background:"transparent",backgroundHover:"#1e2a78",backgroundActive:"#151f5c",color:"#1e2a78",colorHover:"#ffffff",border:"#1e2a78",borderHover:"#1e2a78",shadow:"none"}}),components:Object.assign(Object.assign({},j.components),{cta:{background:"#1e2a78",borderRadius:"16px",padding:"32px"}})}),N=Object.assign(Object.assign({},j),{name:"primax",colors:Object.assign(Object.assign({},j.colors),{primary:"#0066cc",primaryHover:"#0052a3",primaryActive:"#003d7a",secondary:"#ff6600",secondaryHover:"#e55a00",secondaryActive:"#cc4f00"}),buttons:Object.assign(Object.assign({},j.buttons),{borderRadius:"8px",general:{background:"#0066cc",backgroundHover:"#0052a3",backgroundActive:"#003d7a",color:"#ffffff",colorHover:"#ffffff",border:"#0066cc",borderHover:"#0052a3",shadow:"0 2px 4px rgba(0, 102, 204, 0.2)"},cta:{background:"#ff6600",backgroundHover:"#e55a00",backgroundActive:"#cc4f00",color:"#ffffff",colorHover:"#ffffff",border:"#ff6600",borderHover:"#e55a00",shadow:"0 4px 8px rgba(255, 102, 0, 0.3)"},secondary:{background:"transparent",backgroundHover:"#0066cc",backgroundActive:"#0052a3",color:"#0066cc",colorHover:"#ffffff",border:"#0066cc",borderHover:"#0066cc",shadow:"none"}}),components:Object.assign(Object.assign({},j.components),{cta:{background:"#003d7a",borderRadius:"0px 0px 50px 50px",padding:"54px 60px 0px 30px"}})});const _=r(void 0);function $({children:e,initialTheme:r=j,initialThemeName:n="default"}){o(()=>{!function(e,r){const o=document.getElementById(`theme-${r}`)||document.createElement("style");o.id=`theme-${r}`;const n=`\n [data-theme="${r}"] {\n --primary-color: ${e.colors.primary};\n --primary-color-hover: ${e.colors.primaryHover};\n --primary-color-active: ${e.colors.primaryActive};\n --secondary-color: ${e.colors.secondary};\n --secondary-color-hover: ${e.colors.secondaryHover};\n --secondary-color-active: ${e.colors.secondaryActive};\n --text-color: ${e.colors.text};\n --text-color-inverse: ${e.colors.textInverse};\n --background-color: ${e.colors.background};\n --border-color: ${e.colors.border};\n \n --button-general-bg: ${e.buttons.general.background};\n --button-general-bg-hover: ${e.buttons.general.backgroundHover};\n --button-general-bg-active: ${e.buttons.general.backgroundActive};\n --button-general-color: ${e.buttons.general.color};\n --button-general-border: ${e.buttons.general.border};\n --button-general-shadow: ${e.buttons.general.shadow};\n \n --button-cta-bg: ${e.buttons.cta.background};\n --button-cta-bg-hover: ${e.buttons.cta.backgroundHover};\n --button-cta-bg-active: ${e.buttons.cta.backgroundActive};\n --button-cta-color: ${e.buttons.cta.color};\n --button-cta-border: ${e.buttons.cta.border};\n --button-cta-shadow: ${e.buttons.cta.shadow};\n \n --button-secondary-bg: ${e.buttons.secondary.background};\n --button-secondary-bg-hover: ${e.buttons.secondary.backgroundHover};\n --button-secondary-bg-active: ${e.buttons.secondary.backgroundActive};\n --button-secondary-color: ${e.buttons.secondary.color};\n --button-secondary-color-hover: ${e.buttons.secondary.colorHover};\n --button-secondary-border: ${e.buttons.secondary.border};\n --button-secondary-shadow: ${e.buttons.secondary.shadow};\n \n --button-border-radius: ${e.buttons.borderRadius};\n \n --content-container-bg: ${e.components.cta.background};\n --content-container-border-radius: ${e.components.cta.borderRadius};\n --content-container-padding: ${e.components.cta.padding};\n }\n `;o.textContent=n,document.head.contains(o)||document.head.appendChild(o)}(r,n),document.documentElement.setAttribute("data-theme",n)},[r,n]);const t={currentTheme:r,themeName:n};return f.jsx(_.Provider,{value:t,children:e})}function O(){const e=n(_);if(!e)throw new Error("useTheme must be used within a ThemeProvider");return e}export{y as BackgroundMedia,u as Button,p as ButtonLink,h as CTA,x as Card,v as Header,m as Heading,k as Page,g as TextLink,$ as ThemeProvider,w as advisorsPlusTheme,j as defaultTheme,N as primaxTheme,O as useTheme};
|
|
11
11
|
//# sourceMappingURL=index.esm.js.map
|