@asante-org/atlascopco-vt-litesitegenerator 1.2.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.
- package/README.md +160 -0
- package/dist/.storybook/AtlasCopcoTheme.d.ts +2 -0
- package/dist/.storybook/main.d.ts +3 -0
- package/dist/.storybook/manager.d.ts +1 -0
- package/dist/.storybook/preview.d.ts +4 -0
- package/dist/assets/.gitkeep +0 -0
- package/dist/index.esm.js +696 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.esm.scss +2050 -0
- package/dist/index.js +752 -0
- package/dist/index.js.map +1 -0
- package/dist/index.scss +2050 -0
- package/dist/src/components/lsg/LsgBanner/LsgBanner.d.ts +17 -0
- package/dist/src/components/lsg/LsgBanner/LsgBanner.stories.d.ts +7 -0
- package/dist/src/components/lsg/LsgBanner/index.d.ts +2 -0
- package/dist/src/components/lsg/LsgButton/LsgButton.d.ts +16 -0
- package/dist/src/components/lsg/LsgButton/LsgButton.stories.d.ts +10 -0
- package/dist/src/components/lsg/LsgButton/index.d.ts +2 -0
- package/dist/src/components/lsg/LsgCard/LsgCard.d.ts +22 -0
- package/dist/src/components/lsg/LsgCard/LsgCard.stories.d.ts +9 -0
- package/dist/src/components/lsg/LsgCard/index.d.ts +2 -0
- package/dist/src/components/lsg/LsgFooter/LsgFooter.d.ts +14 -0
- package/dist/src/components/lsg/LsgFooter/LsgFooter.stories.d.ts +6 -0
- package/dist/src/components/lsg/LsgFooter/index.d.ts +2 -0
- package/dist/src/components/lsg/LsgHeader/LsgHeader.d.ts +14 -0
- package/dist/src/components/lsg/LsgHeader/LsgHeader.stories.d.ts +6 -0
- package/dist/src/components/lsg/LsgHeader/index.d.ts +2 -0
- package/dist/src/components/lsg/LsgLanguageSwitcher/LsgLanguageSwitcher.d.ts +20 -0
- package/dist/src/components/lsg/LsgLanguageSwitcher/LsgLanguageSwitcher.stories.d.ts +6 -0
- package/dist/src/components/lsg/LsgLanguageSwitcher/index.d.ts +2 -0
- package/dist/src/components/lsg/LsgLogo/LsgLogo.d.ts +13 -0
- package/dist/src/components/lsg/LsgLogo/LsgLogo.stories.d.ts +7 -0
- package/dist/src/components/lsg/LsgLogo/index.d.ts +2 -0
- package/dist/src/components/lsg/LsgNavigation/LsgNavigation.d.ts +13 -0
- package/dist/src/components/lsg/LsgNavigation/LsgNavigation.stories.d.ts +6 -0
- package/dist/src/components/lsg/LsgNavigation/index.d.ts +2 -0
- package/dist/src/components/lsg/LsgQuickLinks/LsgQuickLinks.d.ts +11 -0
- package/dist/src/components/lsg/LsgQuickLinks/LsgQuickLinks.stories.d.ts +6 -0
- package/dist/src/components/lsg/LsgQuickLinks/index.d.ts +2 -0
- package/dist/src/components/lsg/LsgSearchOverlay/LsgSearchOverlay.d.ts +19 -0
- package/dist/src/components/lsg/LsgSearchOverlay/LsgSearchOverlay.stories.d.ts +6 -0
- package/dist/src/components/lsg/LsgSearchOverlay/index.d.ts +2 -0
- package/dist/src/components/lsg/LsgSearchTrigger/LsgSearchTrigger.d.ts +10 -0
- package/dist/src/components/lsg/LsgSearchTrigger/LsgSearchTrigger.stories.d.ts +6 -0
- package/dist/src/components/lsg/LsgSearchTrigger/index.d.ts +2 -0
- package/dist/src/components/lsg/LsgSocialMediaIcons/LsgSocialMediaIcons.d.ts +13 -0
- package/dist/src/components/lsg/LsgSocialMediaIcons/LsgSocialMediaIcons.stories.d.ts +6 -0
- package/dist/src/components/lsg/LsgSocialMediaIcons/index.d.ts +2 -0
- package/dist/src/components/lsg/_LsgOverviewComponents.d.ts +35 -0
- package/dist/src/components/lsg/index.d.ts +24 -0
- package/dist/src/components/lsg/lsg-clientlib-runtime.d.ts +1 -0
- package/dist/src/components/lsg/lsg-clientlib.d.ts +14 -0
- package/dist/src/index.d.ts +6 -0
- package/dist/src/stories/foundation/_components/StoryLayout.d.ts +11 -0
- package/dist/src/themes/createThemeComponents.d.ts +19 -0
- package/dist/src/themes/theme-1/components.d.ts +16 -0
- package/dist/src/themes/theme-1/theme-clientlib.d.ts +1 -0
- package/dist/src/themes/theme-2/components.d.ts +16 -0
- package/dist/src/themes/theme-2/theme-clientlib.d.ts +1 -0
- package/dist/src/themes/theme-3/components.d.ts +16 -0
- package/dist/src/themes/theme-3/theme-clientlib.d.ts +1 -0
- package/dist/themes/theme-1.css +754 -0
- package/dist/themes/theme-1.css.map +1 -0
- package/dist/themes/theme-1.js +99 -0
- package/dist/themes/theme-1.js.map +1 -0
- package/dist/themes/theme-2.css +754 -0
- package/dist/themes/theme-2.css.map +1 -0
- package/dist/themes/theme-2.js +99 -0
- package/dist/themes/theme-2.js.map +1 -0
- package/dist/themes/theme-3.css +762 -0
- package/dist/themes/theme-3.css.map +1 -0
- package/dist/themes/theme-3.js +99 -0
- package/dist/themes/theme-3.js.map +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/package.json +115 -0
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./LsgBanner.scss";
|
|
3
|
+
export interface LsgBannerCta {
|
|
4
|
+
label: string;
|
|
5
|
+
href: string;
|
|
6
|
+
external?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface LsgBannerProps {
|
|
9
|
+
heading: string;
|
|
10
|
+
eyebrow?: string;
|
|
11
|
+
copy?: string;
|
|
12
|
+
cta?: LsgBannerCta;
|
|
13
|
+
/** Background image URL */
|
|
14
|
+
imageUrl?: string;
|
|
15
|
+
imageAlt?: string;
|
|
16
|
+
}
|
|
17
|
+
export declare const LsgBanner: React.FC<LsgBannerProps>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { LsgBanner } from "./LsgBanner";
|
|
3
|
+
declare const meta: Meta<typeof LsgBanner>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof LsgBanner>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithBackgroundImage: Story;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./LsgButton.scss";
|
|
3
|
+
export type LsgButtonVariant = "primary" | "secondary" | "ghost";
|
|
4
|
+
export interface LsgButtonProps {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
variant?: LsgButtonVariant;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/** Renders an <a> element when provided */
|
|
9
|
+
href?: string;
|
|
10
|
+
onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
|
|
11
|
+
type?: "button" | "submit" | "reset";
|
|
12
|
+
className?: string;
|
|
13
|
+
/** Opens in a new tab when used with href */
|
|
14
|
+
external?: boolean;
|
|
15
|
+
}
|
|
16
|
+
export declare const LsgButton: React.FC<LsgButtonProps>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { LsgButton } from "./LsgButton";
|
|
3
|
+
declare const meta: Meta<typeof LsgButton>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof LsgButton>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Secondary: Story;
|
|
8
|
+
export declare const Ghost: Story;
|
|
9
|
+
export declare const AsLink: Story;
|
|
10
|
+
export declare const Disabled: Story;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./LsgCard.scss";
|
|
3
|
+
export interface LsgCardCta {
|
|
4
|
+
label: string;
|
|
5
|
+
href: string;
|
|
6
|
+
external?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface LsgCardProps {
|
|
9
|
+
title: string;
|
|
10
|
+
description?: string;
|
|
11
|
+
imageUrl?: string;
|
|
12
|
+
imageAlt?: string;
|
|
13
|
+
/** Wraps the whole card in a link when provided */
|
|
14
|
+
href?: string;
|
|
15
|
+
cta?: LsgCardCta;
|
|
16
|
+
}
|
|
17
|
+
export declare const LsgCard: React.FC<LsgCardProps>;
|
|
18
|
+
export interface LsgCardsProps {
|
|
19
|
+
cards: LsgCardProps[];
|
|
20
|
+
}
|
|
21
|
+
/** Renders a responsive grid of LsgCard items. */
|
|
22
|
+
export declare const LsgCards: React.FC<LsgCardsProps>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { LsgCard, LsgCards } from "./LsgCard";
|
|
3
|
+
declare const meta: Meta<typeof LsgCard>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof LsgCard>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithLink: Story;
|
|
8
|
+
export declare const NoImage: Story;
|
|
9
|
+
export declare const CardGrid: StoryObj<typeof LsgCards>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./LsgFooter.scss";
|
|
3
|
+
import { LsgLogoProps } from "../LsgLogo";
|
|
4
|
+
import { LsgQuickLinksProps } from "../LsgQuickLinks";
|
|
5
|
+
import { LsgSocialItem } from "../LsgSocialMediaIcons";
|
|
6
|
+
export interface LsgFooterProps {
|
|
7
|
+
logo?: LsgLogoProps;
|
|
8
|
+
tagline?: string;
|
|
9
|
+
/** One or more quick-link groups rendered side by side */
|
|
10
|
+
quickLinksGroups?: LsgQuickLinksProps[];
|
|
11
|
+
socialItems?: LsgSocialItem[];
|
|
12
|
+
copyright?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare const LsgFooter: React.FC<LsgFooterProps>;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./LsgHeader.scss";
|
|
3
|
+
import { LsgLogoProps } from "../LsgLogo";
|
|
4
|
+
import { LsgNavItem } from "../LsgNavigation";
|
|
5
|
+
import { LsgLanguage } from "../LsgLanguageSwitcher";
|
|
6
|
+
export interface LsgHeaderProps {
|
|
7
|
+
logo?: LsgLogoProps;
|
|
8
|
+
navItems?: LsgNavItem[];
|
|
9
|
+
languages?: LsgLanguage[];
|
|
10
|
+
currentLanguage?: string;
|
|
11
|
+
searchLabel?: string;
|
|
12
|
+
searchPlaceholder?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare const LsgHeader: React.FC<LsgHeaderProps>;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./LsgLanguageSwitcher.scss";
|
|
3
|
+
export interface LsgLanguage {
|
|
4
|
+
code: string;
|
|
5
|
+
label: string;
|
|
6
|
+
href: string;
|
|
7
|
+
}
|
|
8
|
+
export interface LsgLanguageSwitcherProps {
|
|
9
|
+
currentLanguage: string;
|
|
10
|
+
languages: LsgLanguage[];
|
|
11
|
+
/** Accessible label for the trigger button */
|
|
12
|
+
label?: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Language Switcher
|
|
16
|
+
*
|
|
17
|
+
* Hydrated: state managed by React (useState).
|
|
18
|
+
* Clientlib-only: driven by lsg-clientlib.js targeting [data-lsg-lang-switcher].
|
|
19
|
+
*/
|
|
20
|
+
export declare const LsgLanguageSwitcher: React.FC<LsgLanguageSwitcherProps>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { LsgLanguageSwitcher } from "./LsgLanguageSwitcher";
|
|
3
|
+
declare const meta: Meta<typeof LsgLanguageSwitcher>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof LsgLanguageSwitcher>;
|
|
6
|
+
export declare const Default: Story;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./LsgLogo.scss";
|
|
3
|
+
export interface LsgLogoProps {
|
|
4
|
+
/** Image src. When omitted, renders a text logo. */
|
|
5
|
+
src?: string;
|
|
6
|
+
alt?: string;
|
|
7
|
+
href?: string;
|
|
8
|
+
width?: number;
|
|
9
|
+
height?: number;
|
|
10
|
+
/** Fallback text shown when no src is provided */
|
|
11
|
+
text?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const LsgLogo: React.FC<LsgLogoProps>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { LsgLogo } from "./LsgLogo";
|
|
3
|
+
declare const meta: Meta<typeof LsgLogo>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof LsgLogo>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithImage: Story;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./LsgNavigation.scss";
|
|
3
|
+
export interface LsgNavItem {
|
|
4
|
+
label: string;
|
|
5
|
+
href: string;
|
|
6
|
+
current?: boolean;
|
|
7
|
+
}
|
|
8
|
+
export interface LsgNavigationProps {
|
|
9
|
+
items: LsgNavItem[];
|
|
10
|
+
/** Accessible label for the <nav> landmark */
|
|
11
|
+
label?: string;
|
|
12
|
+
}
|
|
13
|
+
export declare const LsgNavigation: React.FC<LsgNavigationProps>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./LsgQuickLinks.scss";
|
|
3
|
+
export interface LsgQuickLink {
|
|
4
|
+
label: string;
|
|
5
|
+
href: string;
|
|
6
|
+
}
|
|
7
|
+
export interface LsgQuickLinksProps {
|
|
8
|
+
heading?: string;
|
|
9
|
+
links: LsgQuickLink[];
|
|
10
|
+
}
|
|
11
|
+
export declare const LsgQuickLinks: React.FC<LsgQuickLinksProps>;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./LsgSearchOverlay.scss";
|
|
3
|
+
export interface LsgSearchOverlayProps {
|
|
4
|
+
id?: string;
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
/** Accessible label for the search input */
|
|
7
|
+
label?: string;
|
|
8
|
+
isOpen?: boolean;
|
|
9
|
+
onClose?: () => void;
|
|
10
|
+
onSearch?: (query: string) => void;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Search Overlay
|
|
14
|
+
*
|
|
15
|
+
* Hydrated: isOpen/onClose controlled by parent (e.g. LsgHeader).
|
|
16
|
+
* Clientlib-only: driven by lsg-clientlib.js targeting [data-lsg-search-overlay].
|
|
17
|
+
* The CSS class lsg-search-overlay--open drives visibility in both modes.
|
|
18
|
+
*/
|
|
19
|
+
export declare const LsgSearchOverlay: React.FC<LsgSearchOverlayProps>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { LsgSearchOverlay } from "./LsgSearchOverlay";
|
|
3
|
+
declare const meta: Meta<typeof LsgSearchOverlay>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof LsgSearchOverlay>;
|
|
6
|
+
export declare const Default: Story;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./LsgSearchTrigger.scss";
|
|
3
|
+
export interface LsgSearchTriggerProps {
|
|
4
|
+
/** Accessible label for the button */
|
|
5
|
+
label?: string;
|
|
6
|
+
/** id of the search overlay this button controls */
|
|
7
|
+
targetId?: string;
|
|
8
|
+
onClick?: () => void;
|
|
9
|
+
}
|
|
10
|
+
export declare const LsgSearchTrigger: React.FC<LsgSearchTriggerProps>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { LsgSearchTrigger } from "./LsgSearchTrigger";
|
|
3
|
+
declare const meta: Meta<typeof LsgSearchTrigger>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof LsgSearchTrigger>;
|
|
6
|
+
export declare const Default: Story;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import "./LsgSocialMediaIcons.scss";
|
|
3
|
+
export type LsgSocialPlatform = "linkedin" | "twitter" | "facebook" | "instagram" | "youtube";
|
|
4
|
+
export interface LsgSocialItem {
|
|
5
|
+
platform: LsgSocialPlatform;
|
|
6
|
+
href: string;
|
|
7
|
+
/** Screen-reader label, e.g. "Atlas Copco on LinkedIn" */
|
|
8
|
+
label: string;
|
|
9
|
+
}
|
|
10
|
+
export interface LsgSocialMediaIconsProps {
|
|
11
|
+
items: LsgSocialItem[];
|
|
12
|
+
}
|
|
13
|
+
export declare const LsgSocialMediaIcons: React.FC<LsgSocialMediaIconsProps>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { LsgSocialMediaIcons } from "./LsgSocialMediaIcons";
|
|
3
|
+
declare const meta: Meta<typeof LsgSocialMediaIcons>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof LsgSocialMediaIcons>;
|
|
6
|
+
export declare const Default: Story;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export declare const Section: ({ children }: {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
}) => JSX.Element;
|
|
5
|
+
export declare const Divider: () => JSX.Element;
|
|
6
|
+
export declare const H2: ({ children }: {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
}) => JSX.Element;
|
|
9
|
+
export declare const H3: ({ children }: {
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
}) => JSX.Element;
|
|
12
|
+
export declare const P: ({ children }: {
|
|
13
|
+
children: React.ReactNode;
|
|
14
|
+
}) => JSX.Element;
|
|
15
|
+
export declare const Code: ({ children }: {
|
|
16
|
+
children: React.ReactNode;
|
|
17
|
+
}) => JSX.Element;
|
|
18
|
+
export declare const CodeBlock: ({ children }: {
|
|
19
|
+
children: string;
|
|
20
|
+
}) => JSX.Element;
|
|
21
|
+
export declare const Tag: ({ children, color }: {
|
|
22
|
+
children: React.ReactNode;
|
|
23
|
+
color?: string | undefined;
|
|
24
|
+
}) => JSX.Element;
|
|
25
|
+
export declare const TableHead: () => JSX.Element;
|
|
26
|
+
export declare const SwatchRow: ({ description, defaultValue, cssVar }: {
|
|
27
|
+
description: string;
|
|
28
|
+
defaultValue: string;
|
|
29
|
+
cssVar: string;
|
|
30
|
+
}) => JSX.Element;
|
|
31
|
+
export declare const SNIPPET_DECORATOR = "// .storybook/preview.tsx\n\nconst withLsgTheme: Decorator = (Story, context) => {\n const themeKey = context.globals.lsgTheme ?? \"theme-1\";\n const vars = LSG_THEMES[themeKey];\n\n React.useEffect(() => {\n let el = document.getElementById(\"lsg-theme-vars\");\n if (!el) {\n el = document.createElement(\"style\");\n el.id = \"lsg-theme-vars\";\n document.head.appendChild(el);\n }\n // Builds: :root { --lsg-color-primary: #c4262e; ... }\n el.textContent = Object.entries(vars)\n .reduce((acc, [k, v]) => acc + \" \" + k + \": \" + v + \";\\n\", \":root {\\n\") + \"}\";\n }, [themeKey]);\n\n return <Story />;\n};";
|
|
32
|
+
export declare const SNIPPET_ADD_THEME = "// .storybook/preview.tsx \u2192 LSG_THEMES\n\nconst LSG_THEMES = {\n \"theme-1\": { /* ... existing ... */ },\n \"theme-2\": { /* ... existing ... */ },\n \"theme-3\": { /* ... existing ... */ },\n\n // Add your new brand here:\n mybrand: {\n \"--lsg-color-primary\": \"#7b2d8b\", // brand violet\n \"--lsg-color-secondary\": \"#4a4e54\",\n \"--lsg-color-tertiary\": \"#d97706\",\n \"--lsg-color-light\": \"#f3f4f6\",\n \"--lsg-color-dark\": \"#1e2124\",\n \"--lsg-color-black\": \"#000000\",\n \"--lsg-color-white\": \"#ffffff\",\n \"--lsg-font-family-primary\": '\"Helvetica Neue\", Arial, sans-serif',\n \"--lsg-font-family-secondary\": '\"Helvetica Neue\", Arial, sans-serif',\n \"--lsg-radius-rounded\": \"10px\",\n },\n} as const;";
|
|
33
|
+
export declare const SNIPPET_TOOLBAR = "// .storybook/preview.tsx \u2192 globalTypes\n\nglobalTypes: {\n lsgTheme: {\n toolbar: {\n items: [\n { value: \"theme-1\", title: \"Theme 1\" },\n { value: \"theme-2\", title: \"Theme 2\" },\n { value: \"theme-3\", title: \"Theme 3\" },\n { value: \"mybrand\", title: \"My Brand\" }, // add here\n ],\n dynamicTitle: true,\n },\n },\n},";
|
|
34
|
+
export declare const SNIPPET_AEM_CLIENTLIB = "/* /apps/mybrand/clientlibs/lsg-theme/css/theme.css */\n\n:root {\n --lsg-color-primary: #7b2d8b;\n --lsg-color-secondary: #4a4e54;\n --lsg-color-tertiary: #d97706;\n --lsg-color-light: #f3f4f6;\n --lsg-color-dark: #1e2124;\n --lsg-color-black: #000000;\n --lsg-color-white: #ffffff;\n --lsg-font-family-primary: \"Helvetica Neue\", Arial, sans-serif;\n --lsg-font-family-secondary: \"Helvetica Neue\", Arial, sans-serif;\n}";
|
|
35
|
+
export declare const SNIPPET_AEM_HTL = "<!-- AEM HTL: page.html -->\n<body style=\"\n --lsg-color-primary: ${properties.brandPrimary @ context='styleString'};\n --lsg-color-secondary: ${properties.brandSecondary @ context='styleString'};\n\">\n ...\n</body>";
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export { LsgButton } from "./LsgButton";
|
|
2
|
+
export type { LsgButtonProps, LsgButtonVariant } from "./LsgButton";
|
|
3
|
+
export { LsgBanner } from "./LsgBanner";
|
|
4
|
+
export type { LsgBannerProps, LsgBannerCta } from "./LsgBanner";
|
|
5
|
+
export { LsgCard, LsgCards } from "./LsgCard";
|
|
6
|
+
export type { LsgCardProps, LsgCardCta, LsgCardsProps } from "./LsgCard";
|
|
7
|
+
export { LsgLogo } from "./LsgLogo";
|
|
8
|
+
export type { LsgLogoProps } from "./LsgLogo";
|
|
9
|
+
export { LsgNavigation } from "./LsgNavigation";
|
|
10
|
+
export type { LsgNavigationProps, LsgNavItem } from "./LsgNavigation";
|
|
11
|
+
export { LsgLanguageSwitcher } from "./LsgLanguageSwitcher";
|
|
12
|
+
export type { LsgLanguageSwitcherProps, LsgLanguage } from "./LsgLanguageSwitcher";
|
|
13
|
+
export { LsgSearchTrigger } from "./LsgSearchTrigger";
|
|
14
|
+
export type { LsgSearchTriggerProps } from "./LsgSearchTrigger";
|
|
15
|
+
export { LsgSearchOverlay } from "./LsgSearchOverlay";
|
|
16
|
+
export type { LsgSearchOverlayProps } from "./LsgSearchOverlay";
|
|
17
|
+
export { LsgHeader } from "./LsgHeader";
|
|
18
|
+
export type { LsgHeaderProps } from "./LsgHeader";
|
|
19
|
+
export { LsgQuickLinks } from "./LsgQuickLinks";
|
|
20
|
+
export type { LsgQuickLinksProps, LsgQuickLink } from "./LsgQuickLinks";
|
|
21
|
+
export { LsgSocialMediaIcons } from "./LsgSocialMediaIcons";
|
|
22
|
+
export type { LsgSocialMediaIconsProps, LsgSocialItem, LsgSocialPlatform, } from "./LsgSocialMediaIcons";
|
|
23
|
+
export { LsgFooter } from "./LsgFooter";
|
|
24
|
+
export type { LsgFooterProps } from "./LsgFooter";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function bootLsgClientlib(themeName: string, root?: Window): void;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* lsg-clientlib.ts — Lite Site Generator clientlib JS
|
|
3
|
+
*
|
|
4
|
+
* Minimal vanilla JS for components that require interactivity when used in
|
|
5
|
+
* AEM clientlib-only mode (i.e. AEM renders the HTML, React is NOT hydrating).
|
|
6
|
+
*
|
|
7
|
+
* For hydrated usage these behaviours are handled by React component state.
|
|
8
|
+
*
|
|
9
|
+
* AEM setup:
|
|
10
|
+
* 1. Build: `npm run build:lsg-clientlib-js`
|
|
11
|
+
* 2. Copy dist/lsg-clientlib.js to your AEM clientlib folder.
|
|
12
|
+
* 3. Add to your clientlib `js.txt`.
|
|
13
|
+
*/
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import "./components/lsg/lsg.scss";
|
|
2
|
+
export { LsgButton, LsgBanner, LsgCard, LsgCards, LsgLogo, LsgNavigation, LsgLanguageSwitcher, LsgSearchTrigger, LsgSearchOverlay, LsgHeader, LsgQuickLinks, LsgSocialMediaIcons, LsgFooter, } from "./components/lsg";
|
|
3
|
+
export { Theme1LsgButton, Theme1LsgBanner, Theme1LsgCard, Theme1LsgCards, Theme1LsgLogo, Theme1LsgNavigation, Theme1LsgLanguageSwitcher, Theme1LsgSearchTrigger, Theme1LsgSearchOverlay, Theme1LsgHeader, Theme1LsgQuickLinks, Theme1LsgSocialMediaIcons, Theme1LsgFooter, theme1Components, } from "./themes/theme-1/components";
|
|
4
|
+
export { Theme2LsgButton, Theme2LsgBanner, Theme2LsgCard, Theme2LsgCards, Theme2LsgLogo, Theme2LsgNavigation, Theme2LsgLanguageSwitcher, Theme2LsgSearchTrigger, Theme2LsgSearchOverlay, Theme2LsgHeader, Theme2LsgQuickLinks, Theme2LsgSocialMediaIcons, Theme2LsgFooter, theme2Components, } from "./themes/theme-2/components";
|
|
5
|
+
export { Theme3LsgButton, Theme3LsgBanner, Theme3LsgCard, Theme3LsgCards, Theme3LsgLogo, Theme3LsgNavigation, Theme3LsgLanguageSwitcher, Theme3LsgSearchTrigger, Theme3LsgSearchOverlay, Theme3LsgHeader, Theme3LsgQuickLinks, Theme3LsgSocialMediaIcons, Theme3LsgFooter, theme3Components, } from "./themes/theme-3/components";
|
|
6
|
+
export type { LsgButtonProps, LsgButtonVariant, LsgBannerProps, LsgBannerCta, LsgCardProps, LsgCardCta, LsgCardsProps, LsgLogoProps, LsgNavigationProps, LsgNavItem, LsgLanguageSwitcherProps, LsgLanguage, LsgSearchTriggerProps, LsgSearchOverlayProps, LsgHeaderProps, LsgQuickLinksProps, LsgQuickLink, LsgSocialMediaIconsProps, LsgSocialItem, LsgSocialPlatform, LsgFooterProps, } from "./components/lsg";
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
interface StoryFooterProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
}
|
|
5
|
+
export declare const StoryFooter: ({ children }: StoryFooterProps) => JSX.Element;
|
|
6
|
+
interface StoryHeaderProps {
|
|
7
|
+
title: string;
|
|
8
|
+
subtitle: string;
|
|
9
|
+
}
|
|
10
|
+
export declare const StoryHeader: ({ title, subtitle }: StoryHeaderProps) => JSX.Element;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const BASE_COMPONENTS: {
|
|
3
|
+
readonly LsgButton: React.FC<import("../components/lsg").LsgButtonProps>;
|
|
4
|
+
readonly LsgBanner: React.FC<import("../components/lsg").LsgBannerProps>;
|
|
5
|
+
readonly LsgCard: React.FC<import("../components/lsg").LsgCardProps>;
|
|
6
|
+
readonly LsgCards: React.FC<import("../components/lsg").LsgCardsProps>;
|
|
7
|
+
readonly LsgLogo: React.FC<import("../components/lsg").LsgLogoProps>;
|
|
8
|
+
readonly LsgNavigation: React.FC<import("../components/lsg").LsgNavigationProps>;
|
|
9
|
+
readonly LsgLanguageSwitcher: React.FC<import("../components/lsg").LsgLanguageSwitcherProps>;
|
|
10
|
+
readonly LsgSearchTrigger: React.FC<import("../components/lsg").LsgSearchTriggerProps>;
|
|
11
|
+
readonly LsgSearchOverlay: React.FC<import("../components/lsg").LsgSearchOverlayProps>;
|
|
12
|
+
readonly LsgHeader: React.FC<import("../components/lsg").LsgHeaderProps>;
|
|
13
|
+
readonly LsgQuickLinks: React.FC<import("../components/lsg").LsgQuickLinksProps>;
|
|
14
|
+
readonly LsgSocialMediaIcons: React.FC<import("../components/lsg").LsgSocialMediaIconsProps>;
|
|
15
|
+
readonly LsgFooter: React.FC<import("../components/lsg").LsgFooterProps>;
|
|
16
|
+
};
|
|
17
|
+
type BaseComponents = typeof BASE_COMPONENTS;
|
|
18
|
+
export declare function createThemeComponents(themeName: string): BaseComponents;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const theme1Components: {
|
|
2
|
+
readonly LsgButton: import("react").FC<import("../..").LsgButtonProps>;
|
|
3
|
+
readonly LsgBanner: import("react").FC<import("../..").LsgBannerProps>;
|
|
4
|
+
readonly LsgCard: import("react").FC<import("../..").LsgCardProps>;
|
|
5
|
+
readonly LsgCards: import("react").FC<import("../..").LsgCardsProps>;
|
|
6
|
+
readonly LsgLogo: import("react").FC<import("../..").LsgLogoProps>;
|
|
7
|
+
readonly LsgNavigation: import("react").FC<import("../..").LsgNavigationProps>;
|
|
8
|
+
readonly LsgLanguageSwitcher: import("react").FC<import("../..").LsgLanguageSwitcherProps>;
|
|
9
|
+
readonly LsgSearchTrigger: import("react").FC<import("../..").LsgSearchTriggerProps>;
|
|
10
|
+
readonly LsgSearchOverlay: import("react").FC<import("../..").LsgSearchOverlayProps>;
|
|
11
|
+
readonly LsgHeader: import("react").FC<import("../..").LsgHeaderProps>;
|
|
12
|
+
readonly LsgQuickLinks: import("react").FC<import("../..").LsgQuickLinksProps>;
|
|
13
|
+
readonly LsgSocialMediaIcons: import("react").FC<import("../..").LsgSocialMediaIconsProps>;
|
|
14
|
+
readonly LsgFooter: import("react").FC<import("../..").LsgFooterProps>;
|
|
15
|
+
};
|
|
16
|
+
export declare const Theme1LsgButton: import("react").FC<import("../..").LsgButtonProps>, Theme1LsgBanner: import("react").FC<import("../..").LsgBannerProps>, Theme1LsgCard: import("react").FC<import("../..").LsgCardProps>, Theme1LsgCards: import("react").FC<import("../..").LsgCardsProps>, Theme1LsgLogo: import("react").FC<import("../..").LsgLogoProps>, Theme1LsgNavigation: import("react").FC<import("../..").LsgNavigationProps>, Theme1LsgLanguageSwitcher: import("react").FC<import("../..").LsgLanguageSwitcherProps>, Theme1LsgSearchTrigger: import("react").FC<import("../..").LsgSearchTriggerProps>, Theme1LsgSearchOverlay: import("react").FC<import("../..").LsgSearchOverlayProps>, Theme1LsgHeader: import("react").FC<import("../..").LsgHeaderProps>, Theme1LsgQuickLinks: import("react").FC<import("../..").LsgQuickLinksProps>, Theme1LsgSocialMediaIcons: import("react").FC<import("../..").LsgSocialMediaIconsProps>, Theme1LsgFooter: import("react").FC<import("../..").LsgFooterProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const theme2Components: {
|
|
2
|
+
readonly LsgButton: import("react").FC<import("../..").LsgButtonProps>;
|
|
3
|
+
readonly LsgBanner: import("react").FC<import("../..").LsgBannerProps>;
|
|
4
|
+
readonly LsgCard: import("react").FC<import("../..").LsgCardProps>;
|
|
5
|
+
readonly LsgCards: import("react").FC<import("../..").LsgCardsProps>;
|
|
6
|
+
readonly LsgLogo: import("react").FC<import("../..").LsgLogoProps>;
|
|
7
|
+
readonly LsgNavigation: import("react").FC<import("../..").LsgNavigationProps>;
|
|
8
|
+
readonly LsgLanguageSwitcher: import("react").FC<import("../..").LsgLanguageSwitcherProps>;
|
|
9
|
+
readonly LsgSearchTrigger: import("react").FC<import("../..").LsgSearchTriggerProps>;
|
|
10
|
+
readonly LsgSearchOverlay: import("react").FC<import("../..").LsgSearchOverlayProps>;
|
|
11
|
+
readonly LsgHeader: import("react").FC<import("../..").LsgHeaderProps>;
|
|
12
|
+
readonly LsgQuickLinks: import("react").FC<import("../..").LsgQuickLinksProps>;
|
|
13
|
+
readonly LsgSocialMediaIcons: import("react").FC<import("../..").LsgSocialMediaIconsProps>;
|
|
14
|
+
readonly LsgFooter: import("react").FC<import("../..").LsgFooterProps>;
|
|
15
|
+
};
|
|
16
|
+
export declare const Theme2LsgButton: import("react").FC<import("../..").LsgButtonProps>, Theme2LsgBanner: import("react").FC<import("../..").LsgBannerProps>, Theme2LsgCard: import("react").FC<import("../..").LsgCardProps>, Theme2LsgCards: import("react").FC<import("../..").LsgCardsProps>, Theme2LsgLogo: import("react").FC<import("../..").LsgLogoProps>, Theme2LsgNavigation: import("react").FC<import("../..").LsgNavigationProps>, Theme2LsgLanguageSwitcher: import("react").FC<import("../..").LsgLanguageSwitcherProps>, Theme2LsgSearchTrigger: import("react").FC<import("../..").LsgSearchTriggerProps>, Theme2LsgSearchOverlay: import("react").FC<import("../..").LsgSearchOverlayProps>, Theme2LsgHeader: import("react").FC<import("../..").LsgHeaderProps>, Theme2LsgQuickLinks: import("react").FC<import("../..").LsgQuickLinksProps>, Theme2LsgSocialMediaIcons: import("react").FC<import("../..").LsgSocialMediaIconsProps>, Theme2LsgFooter: import("react").FC<import("../..").LsgFooterProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export declare const theme3Components: {
|
|
2
|
+
readonly LsgButton: import("react").FC<import("../..").LsgButtonProps>;
|
|
3
|
+
readonly LsgBanner: import("react").FC<import("../..").LsgBannerProps>;
|
|
4
|
+
readonly LsgCard: import("react").FC<import("../..").LsgCardProps>;
|
|
5
|
+
readonly LsgCards: import("react").FC<import("../..").LsgCardsProps>;
|
|
6
|
+
readonly LsgLogo: import("react").FC<import("../..").LsgLogoProps>;
|
|
7
|
+
readonly LsgNavigation: import("react").FC<import("../..").LsgNavigationProps>;
|
|
8
|
+
readonly LsgLanguageSwitcher: import("react").FC<import("../..").LsgLanguageSwitcherProps>;
|
|
9
|
+
readonly LsgSearchTrigger: import("react").FC<import("../..").LsgSearchTriggerProps>;
|
|
10
|
+
readonly LsgSearchOverlay: import("react").FC<import("../..").LsgSearchOverlayProps>;
|
|
11
|
+
readonly LsgHeader: import("react").FC<import("../..").LsgHeaderProps>;
|
|
12
|
+
readonly LsgQuickLinks: import("react").FC<import("../..").LsgQuickLinksProps>;
|
|
13
|
+
readonly LsgSocialMediaIcons: import("react").FC<import("../..").LsgSocialMediaIconsProps>;
|
|
14
|
+
readonly LsgFooter: import("react").FC<import("../..").LsgFooterProps>;
|
|
15
|
+
};
|
|
16
|
+
export declare const Theme3LsgButton: import("react").FC<import("../..").LsgButtonProps>, Theme3LsgBanner: import("react").FC<import("../..").LsgBannerProps>, Theme3LsgCard: import("react").FC<import("../..").LsgCardProps>, Theme3LsgCards: import("react").FC<import("../..").LsgCardsProps>, Theme3LsgLogo: import("react").FC<import("../..").LsgLogoProps>, Theme3LsgNavigation: import("react").FC<import("../..").LsgNavigationProps>, Theme3LsgLanguageSwitcher: import("react").FC<import("../..").LsgLanguageSwitcherProps>, Theme3LsgSearchTrigger: import("react").FC<import("../..").LsgSearchTriggerProps>, Theme3LsgSearchOverlay: import("react").FC<import("../..").LsgSearchOverlayProps>, Theme3LsgHeader: import("react").FC<import("../..").LsgHeaderProps>, Theme3LsgQuickLinks: import("react").FC<import("../..").LsgQuickLinksProps>, Theme3LsgSocialMediaIcons: import("react").FC<import("../..").LsgSocialMediaIconsProps>, Theme3LsgFooter: import("react").FC<import("../..").LsgFooterProps>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|