@kadconsulting/dry
Version:
KAD Reusable Component Library
604 lines • 30.6 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import NavBar from './NavBar';
import { inferThemeType } from '../../internal/utilities';
import { useRef } from 'react';
import darkTheme from '~themes/default/palette/dark';
import { ThemeAwareStory } from '../../internal/components';
import lightTheme from '~themes/default/palette/light';
import { ThemeProvider, ThemeTypes } from '~components/ThemeProvider';
import { LayoutProvider } from '~components/LayoutProvider';
import Icon from '../Icons/Icon/Icon';
import { Table, Umbrella01, FaceId, User01 } from '../Icons/paths';
import { IconSizes } from '../Icons/Icon/IconTypes';
const themes = {
[ThemeTypes.LIGHT]: lightTheme,
[ThemeTypes.DARK]: darkTheme,
};
export default {
title: 'Components/NavBar',
tags: ['autodocs'],
component: NavBar,
argTypes: {
logoUrl: {
control: 'text',
description: 'URL for the logo image',
defaultValue: 'https://via.placeholder.com/150',
},
orientation: {
control: {
type: 'select',
options: ['horizontal', 'vertical'],
},
description: 'Orientation of the navigation bar',
defaultValue: 'horizontal',
},
},
};
export const Default = {
render: (args, context) => {
const themeType = inferThemeType(context);
const ref = useRef(null);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(LayoutProvider, { theme: themes[themeType], children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx(NavBar, { ...args, navRoutes: dummyNavRoutes, ref: ref }) }) }) }));
},
};
// Helper functions
const convertToDynamicRoutes = (basePath, staticSubRoute) => {
return `/${basePath}?type=${encodeURIComponent(staticSubRoute)}`;
};
// Sub-routes for 'About' section
const getAboutSubRoutes = () => {
return {
team: {
name: 'Our Team',
path: '/about/team',
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
subRoutes: {
leadership: {
name: 'Leadership Team',
path: '/about/team/leadership',
subRoutes: {
executive: {
name: 'Executive Leadership',
path: '/about/team/leadership/executive',
},
operations: {
name: 'Operations Leadership',
path: '/about/team/leadership/operations',
},
},
},
engineering: {
name: 'Engineering Team',
path: '/about/team/engineering',
subRoutes: {
software: {
name: 'Software Engineering',
path: '/about/team/engineering/software',
},
hardware: {
name: 'Hardware Engineering',
path: '/about/team/engineering/hardware',
},
},
},
design: {
name: 'Design Team',
path: '/about/team/design',
subRoutes: {
ux: {
name: 'UX Design',
path: '/about/team/design/ux',
},
graphic: {
name: 'Graphic Design',
path: '/about/team/design/graphic',
},
},
},
sales: {
name: 'Sales Team',
path: '/about/team/sales',
subRoutes: {
domestic: {
name: 'Domestic Sales',
path: '/about/team/sales/domestic',
},
international: {
name: 'International Sales',
path: '/about/team/sales/international',
},
},
},
},
},
mission: {
name: 'Our Mission',
path: '/about/mission',
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
},
history: {
name: 'Our History',
path: '/about/history',
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
},
careers: {
name: 'Careers',
path: '/about/careers',
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
subRoutes: {
engineering: {
name: 'Engineering Careers',
path: '/about/careers/engineering',
subRoutes: {
software: {
name: 'Software Engineering',
path: '/about/careers/engineering/software',
},
hardware: {
name: 'Hardware Engineering',
path: '/about/careers/engineering/hardware',
},
},
},
design: {
name: 'Design Careers',
path: '/about/careers/design',
subRoutes: {
ux: {
name: 'UX Design',
path: '/about/careers/design/ux',
},
graphic: {
name: 'Graphic Design',
path: '/about/careers/design/graphic',
},
},
},
sales: {
name: 'Sales Careers',
path: '/about/careers/sales',
subRoutes: {
domestic: {
name: 'Domestic Sales',
path: '/about/careers/sales/domestic',
},
international: {
name: 'International Sales',
path: '/about/careers/sales/international',
},
},
},
},
},
};
};
// Sub-routes for 'Test' section
const getTestSubRoutes = () => {
return {
test: {
name: 'lvl2',
path: '',
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
subRoutes: {
test: {
name: 'lvl3',
path: '',
subRoutes: {
test: {
name: 'lvl4',
path: '',
},
test1: {
name: 'lvl4',
path: '',
},
},
},
test2: {
name: 'lvl3',
path: '',
subRoutes: {
test: {
name: 'lvl4',
path: '',
},
test1: {
name: 'lvl4',
path: '',
},
},
},
test3: {
name: 'lvl3',
path: '',
subRoutes: {
test: {
name: 'lvl4',
path: '',
},
test1: {
name: 'lvl4',
path: '',
},
},
},
test4: {
name: 'lvl3',
path: '',
subRoutes: {
test: {
name: 'lvl4',
path: '',
},
test1: {
name: 'lvl4',
path: '',
},
},
},
},
},
test2: {
name: 'lvl2',
path: '',
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
},
test3: {
name: 'lvl2',
path: '',
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
},
test4: {
name: 'lvl2',
path: '',
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
subRoutes: {
test: {
name: 'lvl3',
path: '',
subRoutes: {
test: {
name: 'lvl4',
path: '',
},
test1: {
name: 'lvl4',
path: '',
},
},
},
test2: {
name: 'lvl3',
path: '',
subRoutes: {
test: {
name: 'lvl4',
path: '',
},
test1: {
name: 'lvl4',
path: '',
},
},
},
test3: {
name: 'lvl3',
path: '',
subRoutes: {
test: {
name: 'lvl4',
path: '',
},
test1: {
name: 'lvl4',
path: '',
},
},
},
},
},
};
};
// Sub-routes for 'Services' section
const getServicesSubRoutes = () => {
return {
consulting: {
name: 'Consulting',
path: '/about/team',
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
subRoutes: {
businessStrategy: {
name: 'Business Strategy',
path: convertToDynamicRoutes('services/consulting', 'business-strategy'),
subRoutes: {
corporate: {
name: 'Corporate Strategy',
path: convertToDynamicRoutes('services/consulting/business-strategy', 'corporate'),
},
startup: {
name: 'Startup Strategy',
path: convertToDynamicRoutes('services/consulting/business-strategy', 'startup'),
},
},
},
technology: {
name: 'Technology Consulting',
path: convertToDynamicRoutes('services/consulting', 'technology'),
subRoutes: {
it: {
name: 'IT Consulting',
path: convertToDynamicRoutes('services/consulting/technology', 'it'),
},
cybersecurity: {
name: 'Cybersecurity Consulting',
path: convertToDynamicRoutes('services/consulting/technology', 'cybersecurity'),
},
},
},
marketing: {
name: 'Marketing Consulting',
path: convertToDynamicRoutes('services/consulting', 'marketing'),
subRoutes: {
digital: {
name: 'Digital Marketing',
path: convertToDynamicRoutes('services/consulting/marketing', 'digital'),
},
brand: {
name: 'Brand Strategy',
path: convertToDynamicRoutes('services/consulting/marketing', 'brand'),
},
},
},
},
},
development: {
name: 'Development',
path: convertToDynamicRoutes('services', 'development'),
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
subRoutes: {
webDevelopment: {
name: 'Web Development',
path: convertToDynamicRoutes('services/development', 'web-development'),
subRoutes: {
frontend: {
name: 'Frontend Development',
path: convertToDynamicRoutes('services/development/web-development', 'frontend'),
},
backend: {
name: 'Backend Development',
path: convertToDynamicRoutes('services/development/web-development', 'backend'),
},
},
},
mobileDevelopment: {
name: 'Mobile Development',
path: convertToDynamicRoutes('services/development', 'mobile-development'),
subRoutes: {
ios: {
name: 'iOS Development',
path: convertToDynamicRoutes('services/development/mobile-development', 'ios'),
},
android: {
name: 'Android Development',
path: convertToDynamicRoutes('services/development/mobile-development', 'android'),
},
},
},
softwareEngineering: {
name: 'Software Engineering',
path: convertToDynamicRoutes('services/development', 'software-engineering'),
subRoutes: {
cloud: {
name: 'Cloud Software Engineering',
path: convertToDynamicRoutes('services/development/software-engineering', 'cloud'),
},
embedded: {
name: 'Embedded Systems',
path: convertToDynamicRoutes('services/development/software-engineering', 'embedded'),
},
},
},
},
},
};
};
// Enhanced sub-routes for 'Products' section
const getProductsSubRoutes = () => {
return {
electronics: {
name: 'Electronics',
path: convertToDynamicRoutes('products', 'electronics'),
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
subRoutes: {
laptops: {
name: 'Laptops',
path: convertToDynamicRoutes('products/electronics', 'laptops'),
icon: (_jsx(Icon, { color: '#667085', Path: Umbrella01, size: IconSizes.SMALL })),
subRoutes: {
gaming: {
name: 'Gaming Laptops',
path: convertToDynamicRoutes('products/electronics/laptops', 'gaming'),
},
business: {
name: 'Business Laptops',
path: convertToDynamicRoutes('products/electronics/laptops', 'business'),
},
},
},
smartphones: {
name: 'Smartphones',
path: convertToDynamicRoutes('products/electronics', 'smartphones'),
icon: _jsx(Icon, { color: '#667085', Path: FaceId, size: IconSizes.SMALL }),
subRoutes: {
android: {
name: 'Android Smartphones',
path: convertToDynamicRoutes('products/electronics/smartphones', 'android'),
},
ios: {
name: 'iOS Smartphones',
path: convertToDynamicRoutes('products/electronics/smartphones', 'ios'),
},
},
},
accessories: {
name: 'Accessories',
path: convertToDynamicRoutes('products/electronics', 'accessories'),
icon: _jsx(Icon, { color: '#667085', Path: Table, size: IconSizes.SMALL }),
subRoutes: {
headphones: {
name: 'Headphones',
path: convertToDynamicRoutes('products/electronics/accessories', 'headphones'),
},
chargers: {
name: 'Chargers',
path: convertToDynamicRoutes('products/electronics/accessories', 'chargers'),
},
},
},
},
},
apparel: {
name: 'Apparel',
path: convertToDynamicRoutes('products', 'apparel'),
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
subRoutes: {
mens: {
name: "Men's Clothing",
path: convertToDynamicRoutes('products/apparel', 'mens'),
icon: (_jsx(Icon, { color: '#667085', Path: Umbrella01, size: IconSizes.SMALL })),
},
womens: {
name: "Women's Clothing",
path: convertToDynamicRoutes('products/apparel', 'womens'),
icon: _jsx(Icon, { color: '#667085', Path: FaceId, size: IconSizes.SMALL }),
},
childrens: {
name: "Children's Clothing",
path: convertToDynamicRoutes('products/apparel', 'childrens'),
icon: _jsx(Icon, { color: '#667085', Path: Table, size: IconSizes.SMALL }),
},
},
},
sports: {
name: 'Sports Equipment',
path: convertToDynamicRoutes('products', 'sports'),
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
subRoutes: {
football: {
name: 'Football',
path: convertToDynamicRoutes('products/sports', 'football'),
icon: (_jsx(Icon, { color: '#667085', Path: Umbrella01, size: IconSizes.SMALL })),
},
basketball: {
name: 'Basketball',
path: convertToDynamicRoutes('products/sports', 'basketball'),
icon: _jsx(Icon, { color: '#667085', Path: FaceId, size: IconSizes.SMALL }),
},
tennis: {
name: 'Tennis',
path: convertToDynamicRoutes('products/sports', 'tennis'),
icon: _jsx(Icon, { color: '#667085', Path: Table, size: IconSizes.SMALL }),
},
},
},
};
};
// Function to generate dummy navigation routes
const isAuthenticated = false; // Example: Replace with actual authentication logic
const dummyNavRoutes = {
home: {
name: 'real long name for testing',
visibleInNav: true,
path: '',
icon: _jsx(Icon, { color: '#667085', Path: Table, size: IconSizes.SMALL }),
},
button: {
buttonType: 'secondary',
name: 'testing',
visibleInNav: true,
path: '',
icon: _jsx(Icon, { color: '#667085', Path: Table, size: IconSizes.SMALL }),
},
test: {
name: 'lvl1',
visibleInNav: true,
path: '',
icon: _jsx(Icon, { color: '#667085', Path: Umbrella01, size: IconSizes.SMALL }),
subNavigation: getTestSubRoutes(),
inThumbBar: true,
},
about: {
name: 'lvl1',
visibleInNav: true,
path: '',
icon: _jsx(Icon, { color: '#667085', Path: Umbrella01, size: IconSizes.SMALL }),
subNavigation: getAboutSubRoutes(),
},
services: {
name: 'Services',
visibleInNav: true,
path: '/services',
icon: _jsx(Icon, { color: '#667085', Path: Table, size: IconSizes.SMALL }),
subNavigation: getServicesSubRoutes(),
inThumbBar: true,
},
products: {
name: 'Products',
visibleInNav: true,
path: '/products',
icon: _jsx(Icon, { color: '#667085', Path: Table, size: IconSizes.SMALL }),
subNavigation: getProductsSubRoutes(),
},
contact: {
name: 'lvl1',
visibleInNav: true,
path: '',
icon: _jsx(Icon, { color: '#667085', Path: FaceId, size: IconSizes.SMALL }),
},
};
// Conditional Routes
if (isAuthenticated) {
dummyNavRoutes['User Dashboard'] = {
name: 'User Dashboard',
visibleInNav: true,
path: '/dashboard',
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
};
}
else {
dummyNavRoutes['Login'] = {
name: 'Login',
visibleInNav: true,
path: '/login',
icon: _jsx(Icon, { color: '#667085', Path: User01, size: IconSizes.SMALL }),
};
}
export const WithOrientation = {
render: (args, context) => {
const themeType = inferThemeType(context);
const ref = useRef(null);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(LayoutProvider, { theme: themes[themeType], children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx(NavBar, { ...args, navRoutes: dummyNavRoutes, ref: ref }) }) }) }));
},
};
export const WithContent = {
render: (args, context) => {
const themeType = inferThemeType(context);
const ref = useRef(null);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(LayoutProvider, { theme: themes[themeType], children: _jsx(ThemeAwareStory, { id: context.id, children: _jsxs("div", { children: [_jsx(NavBar, { ...args, navRoutes: dummyNavRoutes, ref: ref }), _jsxs("div", { children: [_jsx("h1", { children: "Content" }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("h1", { children: "Content" }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsxs("div", { children: [_jsx("h1", { children: "Content" }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." })] })] })] }) }) }) }));
},
};
export const WithContentClassName = {
render: (args, context) => {
const themeType = inferThemeType(context);
const ref = useRef(null);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(LayoutProvider, { theme: themes[themeType], children: _jsx(ThemeAwareStory, { id: context.id, children: _jsxs("div", { children: [_jsx(NavBar, { ...args, contentClassName: 'nav-bar__content', navRoutes: dummyNavRoutes, ref: ref }), _jsxs("div", { children: [_jsx("h1", { children: "Content" }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsx("h1", { children: "Content" }), _jsx("p", { children: "This is a story with content before the NavBar. It is useful for testing how the NavBar behaves when it is not the first element in the body." }), _jsxs("div", { children: [_jsx("h1", { children: "Content" }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." }), _jsx("p", { children: "This is a story with content after the NavBar. It is useful for testing how the NavBar behaves when it is not the last element in the body." })] })] })] }) }) }) }));
},
};
export const WithLoading = {
render: (args, context) => {
const themeType = inferThemeType(context);
const ref = useRef(null);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(LayoutProvider, { theme: themes[themeType], children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx("div", { children: _jsx(NavBar, { ...args, contentClassName: 'nav-bar__content', navRoutes: {}, loading: true, ref: ref }) }) }) }) }));
},
};
//# sourceMappingURL=NavBar.stories.js.map