orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
186 lines • 5.91 kB
JavaScript
import React, { useState } from "react";
import { action } from "@storybook/addon-actions";
import HeaderComplex from "../HeaderComplex";
import StyledLink from "../StyledLink";
import Icon from "../Icon";
import { Small } from "../Typography";
import TextInput from "../TextInput";
import Select from "../Select";
import Box from "../Box";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export default {
title: "Components/HeaderComplex",
decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
height: "500px",
children: storyFn()
})],
component: HeaderComplex
};
export const defaultHeader = () => /*#__PURE__*/_jsxs(HeaderComplex, {
appName: `App Name`,
userName: `Michael`,
avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
clientInfo: `Tenant: ci2153 Workspace: 20k-v5 [lb5ctx] UI_Version: 8c315c2 [4412] Backend_Version: dabc261 [3578]`,
logoutFunction: action("clicked-logout"),
sideMenuContent: /*#__PURE__*/_jsxs(StyledLink, {
href: "#",
children: [/*#__PURE__*/_jsx(Icon, {
icon: ["fas", "cog"],
mr: "s"
}), "Settings"]
}),
navToggleId: "defaultHeader",
children: [/*#__PURE__*/_jsx(StyledLink, {
href: "#",
white: true,
bold: true,
active: true,
children: "Summary"
}), /*#__PURE__*/_jsx(StyledLink, {
href: "#",
white: true,
bold: true,
children: "Find"
}), /*#__PURE__*/_jsx(StyledLink, {
href: "#",
white: true,
bold: true,
children: "Visualisation"
})]
});
defaultHeader.storyName = "Default Header";
export const headerWithSearch = () => /*#__PURE__*/_jsx(HeaderComplex, {
variant: "search",
appName: "App Name",
userName: "Michael",
avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
logoutFunction: action("clicked-logout"),
searchComponent: /*#__PURE__*/_jsx(TextInput, {
fullWidth: true,
id: "search",
type: "text",
placeholder: "Search for...",
iconRight: ["fas", "search"]
}, "search"),
navToggleId: "headerWithSearch"
});
headerWithSearch.storyName = "Alternative Header with search";
export const headerWithSearchAndLinks = () => /*#__PURE__*/_jsxs(HeaderComplex, {
variant: "searchAndLinks",
appName: "App Name",
userName: "Michael",
avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
logoutFunction: action("clicked-logout"),
searchComponent: /*#__PURE__*/_jsx(TextInput, {
fullWidth: true,
id: "search",
type: "text",
placeholder: "Search for...",
iconRight: ["fas", "search"]
}, "search"),
navToggleId: "headerWithSearchAndLinks",
children: [/*#__PURE__*/_jsx(StyledLink, {
href: "#",
white: true,
bold: true,
children: "Summary"
}), /*#__PURE__*/_jsx(StyledLink, {
href: "#",
white: true,
bold: true,
children: "Teams"
}), /*#__PURE__*/_jsx(StyledLink, {
href: "#",
white: true,
bold: true,
children: "People"
}), /*#__PURE__*/_jsx(StyledLink, {
href: "#",
white: true,
bold: true,
children: "Reports"
})]
});
headerWithSearch.storyName = "Alternative Header with search";
export const headerWithWorkspaceSwitching = () => {
const options = [{
label: "Workspace A"
}, {
label: "Workspace B"
}];
// eslint-disable-next-line react-hooks/rules-of-hooks
const [selected, setSelected] = useState([{
label: "Workspace A"
}]);
const onChange = value => {
setSelected(value);
};
const currentWorkspace = "Workspace A";
const select = /*#__PURE__*/_jsx(Select, {
id: "WorkspaceSelect",
"data-testid": "select-workspace-dropdown",
placeholder: "Select a workspace",
options: options,
value: selected,
onChange: onChange,
height: "30px",
padding: "0 8px",
inverted: true
});
const internalAppLinks = /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(StyledLink, {
href: "#",
target: "_blank",
children: ["App 1 Name", /*#__PURE__*/_jsx(Small, {
children: "This is a description of other app in suite"
})]
}), /*#__PURE__*/_jsxs(StyledLink, {
href: "#",
target: "_blank",
children: ["App 2 Name", /*#__PURE__*/_jsx(Small, {
children: "This is a description of other app in suite"
})]
})]
});
const externalAppLinks = /*#__PURE__*/_jsxs(StyledLink, {
href: "#",
target: "_blank",
children: ["External App Name", /*#__PURE__*/_jsx(Small, {
children: "This is a description of external 3rd party app"
})]
});
return /*#__PURE__*/_jsx(HeaderComplex, {
appName: `App Name`,
currentWorkspace: currentWorkspace,
userName: `Michael`,
avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
clientInfo: `Tenant: ci2153 Workspace: 20k-v5 [lb5ctx] UI_Version: 8c315c2 [4412] Backend_Version: dabc261 [3578]`,
logoutFunction: action("clicked-logout"),
workspaceSwitcherContent: select,
navToggleId: "headerWithWorkspaceSwitching",
appSwitcher: true,
internalAppSwitcherContent: internalAppLinks,
externalAppSwitcherContent: externalAppLinks
});
};
headerWithWorkspaceSwitching.storyName = "Header with workspace switching";
defaultHeader.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "defaultHeader"
};
headerWithSearch.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "headerWithSearch"
};
headerWithSearchAndLinks.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "headerWithSearchAndLinks"
};
headerWithWorkspaceSwitching.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "headerWithWorkspaceSwitching"
};