refactor(frame): categorize under Layout, rename Panel to Frame

This also adds the field variant and refactors createBorderStyles to implement all border styles.

Author: WesSouza

src/Button/Button.tsx

@@ -6,7 +6,6 @@ import {
   createDisabledTextStyles,
   createFlatBoxStyles,
   createHatchedBackground,
-  createWellBorderStyles,
   focusOutline
 } from '../common';
 import { blockSizes } from '../common/system';
@@ -107,12 +106,14 @@ export const StyledButton = styled.button<StyledButtonProps>`
           border: 2px solid transparent;
           &:hover,
           &:focus {
-            ${!disabled && !active && createWellBorderStyles(false)}
+            ${!disabled &&
+            !active &&
+            createBorderStyles({ style: 'buttonThin' })}
           }
           &:active {
-            ${!disabled && createWellBorderStyles(true)}
+            ${!disabled && createBorderStyles({ style: 'buttonThinPressed' })}
           }
-          ${active && createWellBorderStyles(true)}
+          ${active && createBorderStyles({ style: 'buttonThinPressed' })}
           ${disabled && createDisabledTextStyles()}
         `
       : css`

src/Counter/Counter.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 import React, { useState } from 'react';
-import { Button, Counter, Panel } from 'react95';
+import { Button, Counter, Frame } from 'react95';
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
@@ -29,14 +29,14 @@ export function Default() {
   const [count, setCount] = useState(13);
   const handleClick = () => setCount(count + 1);
   return (
-    <Panel className='wrapper'>
+    <Frame className='wrapper'>
       <Counter value={123456789} minLength={11} size='lg' />
 
       <div className='counter-wrapper'>
         <Counter value={count} minLength={3} />
         <Button onClick={handleClick}>Click!</Button>
       </div>
-    </Panel>
+    </Frame>
   );
 }
 

src/Counter/Counter.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useMemo } from 'react';
 import styled from 'styled-components';
 
-import { createWellBorderStyles } from '../common';
+import { createBorderStyles } from '../common';
 import { CommonStyledProps, Sizes } from '../types';
 import { Digit } from './Digit';
 
@@ -13,7 +13,7 @@ type CounterProps = {
   CommonStyledProps;
 
 const CounterWrapper = styled.div`
-  ${createWellBorderStyles(true)}
+  ${createBorderStyles({ style: 'status' })}
   display: inline-flex;
   background: #000000;
 `;

src/Frame/Frame.spec.tsx

@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { Frame } from './Frame';
+
+describe('<Frame />', () => {
+  it('should render frame', () => {
+    const { container } = render(<Frame />);
+    const frame = container.firstElementChild;
+
+    expect(frame).toBeInTheDocument();
+  });
+
+  it('should render custom styles', () => {
+    const { container } = render(
+      <Frame style={{ backgroundColor: 'papayawhip' }} />
+    );
+    const frame = container.firstElementChild;
+
+    expect(frame).toHaveAttribute('style', 'background-color: papayawhip;');
+  });
+
+  it('should render children', async () => {
+    const { findByText } = render(
+      <Frame>
+        <span>Cool frame</span>
+      </Frame>
+    );
+    const content = await findByText(/cool frame/i);
+
+    expect(content).toBeInTheDocument();
+  });
+
+  it('should render custom props', () => {
+    const customProps = { title: 'frame' };
+    const { container } = render(<Frame {...customProps} />);
+    const frame = container.firstElementChild;
+
+    expect(frame).toHaveAttribute('title', 'frame');
+  });
+});

src/Panel/Panel.stories.tsx renamed to src/Frame/Frame.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta } from '@storybook/react';
 import React from 'react';
-import { Panel } from 'react95';
+import { Frame } from 'react95';
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
@@ -19,46 +19,48 @@ const Wrapper = styled.div`
 `;
 
 export default {
-  title: 'Panel',
-  component: Panel,
+  title: 'Layout/Frame',
+  component: Frame,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-} as ComponentMeta<typeof Panel>;
+} as ComponentMeta<typeof Frame>;
 
 export function Default() {
   return (
-    <Panel
+    <Frame
       variant='outside'
       shadow
       style={{ padding: '0.5rem', lineHeight: '1.5', width: 600 }}
     >
       <p style={{ padding: '0.5rem' }}>
-        Notice the subtle difference in borders. The lightest border is not on
-        the edge of this panel.
+        This is a frame of the &apos;window&apos; variant, the default. Notice
+        the subtle difference in borders. The lightest border is not on the edge
+        of this frame.
       </p>
-      <Panel variant='inside' style={{ margin: '1rem', padding: '1rem' }}>
-        This panel on the other hand has the lightest border on the edge. Use
-        this panel inside &apos;outside&apos; panels.
+      <Frame variant='inside' style={{ margin: '1rem', padding: '1rem' }}>
+        This frame of the &apos;button&apos; variant on the other hand has the
+        lightest border on the edge. Use this frame inside &apos;window&apos;
+        frames.
         <br />
-        <Panel
-          variant='well'
+        <Frame
+          variant='field'
           style={{
             marginTop: '1rem',
             padding: '1rem',
             height: 200,
             width: 100
           }}
         >
-          Put some content here
-        </Panel>
-      </Panel>
-      <Panel
+          A field frame variant is used to display content.
+        </Frame>
+      </Frame>
+      <Frame
         variant='well'
         style={{ marginTop: '1rem', padding: '0.1rem 0.25rem', width: '100%' }}
       >
-        The &apos;well&apos; variant of a panel is often used as a window
-        footer.
-      </Panel>
-    </Panel>
+        The &apos;status&apos; variant of a frame is often used as a status bar
+        at the end of the window.
+      </Frame>
+    </Frame>
   );
 }
 

src/Frame/Frame.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { createBorderStyles, createBoxStyles } from '../common';
+import { CommonStyledProps } from '../types';
+
+type FrameProps = {
+  children?: React.ReactNode;
+  shadow?: boolean;
+  variant?: 'outside' | 'field' | 'inside' | 'well';
+} & React.HTMLAttributes<HTMLDivElement> &
+  CommonStyledProps;
+
+const createFrameStyles = (variant: FrameProps['variant']) => {
+  switch (variant) {
+    case 'well':
+      return css`
+        ${createBorderStyles({ style: 'status' })}
+      `;
+    case 'outside':
+      return css`
+        ${createBorderStyles({ style: 'window' })}
+      `;
+    case 'field':
+      return css`
+        ${createBorderStyles({ style: 'field' })}
+      `;
+    default:
+      return css`
+        ${createBorderStyles()}
+      `;
+  }
+};
+
+const StyledFrame = styled.div<Required<Pick<FrameProps, 'variant'>>>`
+  position: relative;
+  font-size: 1rem;
+  ${({ variant }) => createFrameStyles(variant)}
+  ${({ variant }) =>
+    createBoxStyles(
+      variant === 'field'
+        ? { background: 'canvas', color: 'canvasText' }
+        : undefined
+    )}
+`;
+
+const Frame = forwardRef<HTMLDivElement, FrameProps>(
+  ({ children, shadow = false, variant = 'window', ...otherProps }, ref) => {
+    return (
+      <StyledFrame ref={ref} shadow={shadow} variant={variant} {...otherProps}>
+        {children}
+      </StyledFrame>
+    );
+  }
+);
+
+Frame.displayName = 'Frame';
+
+export { Frame, FrameProps };

src/MenuList/MenuList.tsx

@@ -17,7 +17,7 @@ const MenuList = styled.ul.attrs(() => ({
   box-sizing: border-box;
   width: ${props => (props.fullWidth ? '100%' : 'auto')};
   padding: 4px;
-  ${createBorderStyles({ windowBorders: true })}
+  ${createBorderStyles({ style: 'window' })}
   ${createBoxStyles()}
   ${props =>
     props.inline &&

src/Panel/Panel.spec.tsx

@@ -37,7 +37,7 @@ const StyledHeadCell = styled.th<{ $disabled: boolean }>`
     css`
       &:active {
         &:before {
-          ${createBorderStyles({ invert: true, windowBorders: true })}
+          ${createBorderStyles({ invert: true, style: 'window' })}
           border-left: none;
           border-top: none;
           padding-top: 2px;