fix: add hide header option

Author: seveibar

src/Header/index.js

@@ -27,6 +27,7 @@ type Props = {|
 
 export const Header = ({
   leftSideContent = null,
+  hideHeaderText = false,
   items,
   onClickItem,
 }: Props) => {
@@ -36,6 +37,7 @@ export const Header = ({
       {items.map((item) => (
         <HeaderButton
           key={item.name}
+          hideText={hideHeaderText}
           onClick={() => onClickItem(item)}
           {...item}
         />

src/HeaderButton/index.js

@@ -29,14 +29,15 @@ const ButtonInnerContent = styled("div")({
   display: "flex",
   flexDirection: "column",
 })
-const IconContainer = styled("div")({
+const IconContainer = styled("div")(({ textHidden }) => ({
   color: colors.grey[700],
-  height: 20,
+  height: textHidden ? 32 : 20,
+  paddingTop: textHidden ? 8 : 0,
   "& .MuiSvgIcon-root": {
     width: 18,
     height: 18,
   },
-})
+}))
 const Text = styled("div")({
   fontWeight: "bold",
   fontSize: 11,
@@ -46,17 +47,25 @@ const Text = styled("div")({
   justifyContent: "center",
 })
 
-export const HeaderButton = ({ name, icon, disabled, onClick }) => {
+export const HeaderButton = ({
+  name,
+  icon,
+  disabled,
+  onClick,
+  hideText = false,
+}) => {
   const customIconMapping = useIconDictionary()
   return (
     <StyledButton onClick={onClick} disabled={disabled}>
       <ButtonInnerContent>
-        <IconContainer>
+        <IconContainer textHidden={hideText}>
           {icon || getIcon(name, customIconMapping)}
         </IconContainer>
-        <Text>
-          <div>{name}</div>
-        </Text>
+        {!hideText && (
+          <Text>
+            <div>{name}</div>
+          </Text>
+        )}
       </ButtonInnerContent>
     </StyledButton>
   )

src/Workspace/index.js

@@ -16,15 +16,15 @@ const Container = styled("div")({
   flexDirection: "column",
   height: "100%",
   overflow: "hidden",
-  maxWidth: "100vw"
+  maxWidth: "100vw",
 })
 const SidebarsAndContent = styled("div")({
   display: "flex",
   flexGrow: 1,
   width: "100%",
   height: "100%",
   overflow: "hidden",
-  maxWidth: "100vw"
+  maxWidth: "100vw",
 })
 
 export default ({
@@ -38,17 +38,22 @@ export default ({
   headerLeftSide = null,
   iconDictionary = emptyObj,
   rightSidebarExpanded,
-  children
+  hideHeader = false,
+  hideHeaderText = false,
+  children,
 }) => {
   const [sidebarAndContentRef, sidebarAndContent] = useDimensions()
   return (
     <IconDictionaryContext.Provider value={iconDictionary}>
       <Container style={style}>
-        <Header
-          leftSideContent={headerLeftSide}
-          onClickItem={onClickHeaderItem}
-          items={headerItems}
-        />
+        {!hideHeader && (
+          <Header
+            hideHeaderText={hideHeaderText}
+            leftSideContent={headerLeftSide}
+            onClickItem={onClickHeaderItem}
+            items={headerItems}
+          />
+        )}
         <SidebarsAndContent ref={sidebarAndContentRef}>
           {iconSidebarItems.length === 0 ? null : (
             <IconSidebar

src/Workspace/index.stories.js

@@ -122,3 +122,79 @@ export const FullWidthHeightViewport = () => (
 FullWidthHeightViewport.story = {
   name: "FullWidthHeightViewport",
 }
+
+export const HideHeader = () => (
+  <div style={{ width: "90vw", height: "90vh" }}>
+    <Workspace
+      allowFullscreen
+      hideHeader
+      headerItems={[{ name: "Prev" }, { name: "Next" }, { name: "Save" }]}
+      onClickHeaderItem={action("onClickHeaderItem")}
+      onClickIconSidebarItem={action("onClickIconSidebarItem")}
+      selectedTools={["play"]}
+      iconSidebarItems={[
+        {
+          name: "Play",
+          helperText: "Play Tooltip",
+        },
+        {
+          name: "Pause",
+          helperText: "Pause Tooltip",
+        },
+      ]}
+      rightSidebarItems={[
+        <SidebarBox icon={<FeaturedVideoIcon />} title="Region Selector">
+          Hello world!
+        </SidebarBox>,
+      ]}
+    >
+      <div
+        style={{ margin: 40, width: 400, height: 400, backgroundColor: "#f00" }}
+      >
+        Hello World
+      </div>
+    </Workspace>
+  </div>
+)
+
+HideHeader.story = {
+  name: "HideHeader",
+}
+
+export const HideHeaderText = () => (
+  <div style={{ width: "90vw", height: "90vh" }}>
+    <Workspace
+      allowFullscreen
+      hideHeaderText
+      headerItems={[{ name: "Prev" }, { name: "Next" }, { name: "Save" }]}
+      onClickHeaderItem={action("onClickHeaderItem")}
+      onClickIconSidebarItem={action("onClickIconSidebarItem")}
+      selectedTools={["play"]}
+      iconSidebarItems={[
+        {
+          name: "Play",
+          helperText: "Play Tooltip",
+        },
+        {
+          name: "Pause",
+          helperText: "Pause Tooltip",
+        },
+      ]}
+      rightSidebarItems={[
+        <SidebarBox icon={<FeaturedVideoIcon />} title="Region Selector">
+          Hello world!
+        </SidebarBox>,
+      ]}
+    >
+      <div
+        style={{ margin: 40, width: 400, height: 400, backgroundColor: "#f00" }}
+      >
+        Hello World
+      </div>
+    </Workspace>
+  </div>
+)
+
+HideHeaderText.story = {
+  name: "HideHeaderText",
+}