docs(window): categorize under Environment

This also moves Windows* subcomponents to the Windows folder.

Author: WesSouza

src/DatePicker/DatePicker.tsx

@@ -7,9 +7,7 @@ import { ScrollView } from '../ScrollView/ScrollView';
 import { Select } from '../Select/Select';
 import { SelectChangeEvent } from '../Select/Select.types';
 import { Toolbar } from '../Toolbar/Toolbar';
-import { Window } from '../Window/Window';
-import { WindowContent } from '../WindowContent/WindowContent';
-import { WindowHeader } from '../WindowHeader/WindowHeader';
+import { Window, WindowContent, WindowHeader } from '../Window/Window';
 
 type DatePickerProps = {
   className?: string;

src/Window/Window.mdx

@@ -13,7 +13,7 @@ import styled from 'styled-components';
 const Wrapper = styled.div`
   padding: 5rem;
   background: ${({ theme }) => theme.desktopBackground};
-  .window-header {
+  .window-title {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -63,7 +63,7 @@ const Wrapper = styled.div`
 `;
 
 export default {
-  title: 'Window',
+  title: 'Environment/Window',
   component: Window,
   subcomponents: { WindowHeader, WindowContent },
   decorators: [story => <Wrapper>{story()}</Wrapper>]
@@ -73,7 +73,7 @@ export function Default() {
   return (
     <>
       <Window resizable className='window'>
-        <WindowHeader className='window-header'>
+        <WindowHeader className='window-title'>
           <span>react95.exe</span>
           <Button>
             <span className='close-icon' />
@@ -103,7 +103,7 @@ export function Default() {
       </Window>
 
       <Window className='window'>
-        <WindowHeader active={false} className='window-header'>
+        <WindowHeader active={false} className='window-title'>
           <span>not-active.exe</span>
           <Button>
             <span className='close-icon' />

src/Window/Window.stories.tsx

@@ -47,16 +47,26 @@ const ResizeHandle = styled.span`
   `}
 `;
 
-const Window = forwardRef<HTMLDivElement, WindowProps>(function Window(
-  { children, resizable = false, resizeRef, shadow = true, ...otherProps },
-  ref
-) {
-  return (
-    <StyledWindow ref={ref} shadow={shadow} {...otherProps}>
-      {children}
-      {resizable && <ResizeHandle data-testid='resizeHandle' ref={resizeRef} />}
-    </StyledWindow>
-  );
-});
+const Window = forwardRef<HTMLDivElement, WindowProps>(
+  (
+    { children, resizable = false, resizeRef, shadow = true, ...otherProps },
+    ref
+  ) => {
+    return (
+      <StyledWindow ref={ref} shadow={shadow} {...otherProps}>
+        {children}
+        {resizable && (
+          <ResizeHandle data-testid='resizeHandle' ref={resizeRef} />
+        )}
+      </StyledWindow>
+    );
+  }
+);
+
+Window.displayName = 'Window';
+
+export * from './WindowContent';
+
+export * from './WindowHeader';
 
 export { Window, WindowProps };

src/Window/Window.tsx

@@ -21,4 +21,6 @@ const WindowContent = forwardRef<HTMLDivElement, WindowContentProps>(
   }
 );
 
+WindowContent.displayName = 'WindowContent';
+
 export { WindowContent, WindowContentProps };

src/WindowContent/WindowContent.spec.tsx renamed to src/Window/WindowContent.spec.tsx

@@ -31,8 +31,6 @@ export * from './Toolbar/Toolbar';
 export * from './Tooltip/Tooltip';
 export * from './TreeView/TreeView';
 export * from './Window/Window';
-export * from './WindowContent/WindowContent';
-export * from './WindowHeader/WindowHeader';
 
 /* deprecated components */
 export * from './legacy/Bar';