orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
233 lines (231 loc) • 6.26 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { space, layout, variant } from "styled-system";
import Avatar from "../Avatar";
import Flex, { FlexItem } from "../Flex";
import { Small } from "../Typography";
import { css } from "@styled-system/css";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Bar = styled("header").attrs(props => ({
"data-testid": props.dataTestId
})).withConfig({
displayName: "HeaderSimple__Bar",
componentId: "sc-1mo6hwx-0"
})(props => ({
height: themeGet("appScale.navBarSize")(props)
}), props => css({
width: "100%",
zIndex: 12,
position: "sticky",
top: "0",
display: "flex",
alignItems: "center",
py: 0,
px: 4,
bg: themeGet("colors.black")(props)
}), variant({
variants: {
default: {
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
},
search: {
display: ["flex", "flex", "grid"],
gridGap: ["0", "0", "r"],
gridTemplateColumns: ["1fr 2fr", "1fr 2fr", "1fr 2fr", "1fr 1.5fr 1.5fr 1fr", "1fr 1fr 1fr 1fr", "1.5fr 1fr 1fr 1.5fr"]
}
}
}), space);
const AppName = styled("div").withConfig({
displayName: "HeaderSimple__AppName",
componentId: "sc-1mo6hwx-1"
})(props => css({
display: "flex",
alignItems: "center",
fontSize: themeGet("fontSizes.3")(props),
color: themeGet("colors.white")(props)
}), variant({
variants: {
default: {
width: "5px",
height: "5px",
backgroundColor: "#fff",
transition: "all 200ms ease-in-out"
},
search: {
display: ["none", "none", "flex"],
border: "none",
pr: "0"
}
}
}), space);
const SearchContainer = styled("div").withConfig({
displayName: "HeaderSimple__SearchContainer",
componentId: "sc-1mo6hwx-2"
})(css({
width: "100%",
gridColumn: "2 / 4",
"a[class^='StyledLink'], a[class*=' StyledLink']": {
display: "inline-block"
}
}), space, layout);
/**
* Header component for top of app.
**/
const HeaderSimple = _ref => {
let {
appName,
userName,
avatarSource,
avatarAlt,
searchComponent,
dataTestId,
variant,
currentWorkspace,
logo
} = _ref;
return /*#__PURE__*/_jsxs(Bar, {
dataTestId: dataTestId,
variant: variant,
children: [/*#__PURE__*/_jsxs(Flex, {
alignItems: "center",
children: [logo && /*#__PURE__*/_jsx(FlexItem, {
children: logo
}), /*#__PURE__*/_jsxs(Flex, {
flexDirection: "column",
justifyContent: "center",
children: [/*#__PURE__*/_jsx(AppName, {
variant: variant,
children: appName
}), currentWorkspace && /*#__PURE__*/_jsx(Small, {
color: "white",
fontSize: "0",
display: ["none", "none", "none", "block"],
children: currentWorkspace
})]
})]
}), searchComponent && /*#__PURE__*/_jsx(SearchContainer, {
children: searchComponent
}), /*#__PURE__*/_jsx(Flex, {
alignItems: "center",
ml: "auto",
display: searchComponent ? ["none", "none", "none", "flex"] : "flex",
children: /*#__PURE__*/_jsx(Avatar, {
type: "inverted",
sizing: "small",
title: userName,
image: avatarSource,
imageAlt: avatarAlt
})
})]
});
};
HeaderSimple.propTypes = {
/** Logo for app. Preferably an svg logo */
logo: PropTypes.node,
/** Text for app name. Can be a plain text string or an svg logo */
appName: PropTypes.node,
/** Current active workspace name. Can be a plain text string or a component */
currentWorkspace: PropTypes.node,
/** Text for username. */
userName: PropTypes.node,
/** Source path for avatar image. */
avatarSource: PropTypes.node,
/** Alt text for avatar image. */
avatarAlt: PropTypes.string,
/** Can specify a component to be used for searching */
searchComponent: PropTypes.node,
/** Applies the chosen theme to the entire header. */
theme: PropTypes.object,
/** Specifies alternate versions of the header */
variant: PropTypes.oneOf(["search"]),
/** Allows for use of the `data-testid` attribute for testing. */
dataTestId: PropTypes.string
};
/** @component */
HeaderSimple.__docgenInfo = {
"description": "Header component for top of app.",
"methods": [],
"displayName": "HeaderSimple",
"props": {
"logo": {
"description": "Logo for app. Preferably an svg logo",
"type": {
"name": "node"
},
"required": false
},
"appName": {
"description": "Text for app name. Can be a plain text string or an svg logo",
"type": {
"name": "node"
},
"required": false
},
"currentWorkspace": {
"description": "Current active workspace name. Can be a plain text string or a component",
"type": {
"name": "node"
},
"required": false
},
"userName": {
"description": "Text for username.",
"type": {
"name": "node"
},
"required": false
},
"avatarSource": {
"description": "Source path for avatar image.",
"type": {
"name": "node"
},
"required": false
},
"avatarAlt": {
"description": "Alt text for avatar image.",
"type": {
"name": "string"
},
"required": false
},
"searchComponent": {
"description": "Can specify a component to be used for searching",
"type": {
"name": "node"
},
"required": false
},
"theme": {
"description": "Applies the chosen theme to the entire header.",
"type": {
"name": "object"
},
"required": false
},
"variant": {
"description": "Specifies alternate versions of the header",
"type": {
"name": "enum",
"value": [{
"value": "\"search\"",
"computed": false
}]
},
"required": false
},
"dataTestId": {
"description": "Allows for use of the `data-testid` attribute for testing.",
"type": {
"name": "string"
},
"required": false
}
}
};
export default HeaderSimple;