fix(codebytes): style tweaks (#33)

* we dont want main

* let parent pass in styles

* remove iframe prop

* allow better overrides

* lets try this?

* remove mt

* remove unused import

* min height

* attempt to fix axe issues

* diff color

* please work

* forgot hash

* cleanup

* lets try this

* lets try this

* please work

* holy grail

* dev dependency

* proper package json

* please

* revert

* revert rest too

* hail mary

* gah

* time to sign off

* try this

* remove props

* allow max width to be overrided

Author: borisonr

packages/codebytes/src/MonacoEditor/theme.ts

@@ -58,6 +58,7 @@ const theme = ({
     'editorIndentGuide.background': ui.indent.inactive,
     'editorIndentGuide.activeBackground': ui.indent.active,
     'editorWhitespace.foreground': syntax.comment,
+    'editorLineNumber.foreground': '#9FA2AC',
   },
 });
 

packages/codebytes/src/codeByteEditor.tsx

@@ -1,6 +1,6 @@
 import { Box, IconButton } from '@codecademy/gamut';
 import { FaviconIcon } from '@codecademy/gamut-icons';
-import { Background, states, system } from '@codecademy/gamut-styles';
+import { Background, system } from '@codecademy/gamut-styles';
 import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 import React, { useEffect, useState } from 'react';
@@ -12,38 +12,28 @@ import { LanguageSelection } from './languageSelection';
 import { trackUserImpression } from './libs/eventTracking';
 import { CodeByteEditorProps } from './types';
 
-const editorStates = states({
-  isIFrame: { height: '100vh', width: '100%' },
-});
-
 const editorBaseStyles = system.css({
   border: 1,
   borderColor: 'gray-900',
   display: 'flex',
   flexDirection: 'column',
-  height: '25rem',
-  width: '43rem',
-  overflow: 'hidden',
+  minHeight: '25rem',
 });
-export interface EditorStyleProps
-  extends StyleProps<typeof editorBaseStyles>,
-    StyleProps<typeof editorStates> {}
 
-const EditorContainer = styled(Background)<EditorStyleProps>(
-  editorBaseStyles,
-  editorStates
+const EditorContainer = styled(Background)<StyleProps<typeof editorBaseStyles>>(
+  editorBaseStyles
 );
 
 export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   text: initialText,
   language: initialLanguage,
   hideCopyButton = false,
-  isIFrame = false,
   snippetsBaseUrl,
   onEdit,
   onLanguageChange,
   onCopy,
   trackingData,
+  ...rest
 }) => {
   const getInitialText = () => {
     if (initialText !== undefined) return initialText;
@@ -70,7 +60,7 @@ export const CodeByteEditor: React.FC<CodeByteEditorProps> = ({
   }, []);
 
   return (
-    <EditorContainer bg="black" as="main" isIFrame={isIFrame}>
+    <EditorContainer bg="black" maxWidth="43rem" {...rest}>
       <Box borderBottom={1} borderColor="gray-900" py={4} pl={8}>
         <IconButton
           icon={FaviconIcon}

packages/codebytes/src/drawers.tsx

@@ -17,6 +17,11 @@ const RightDrawerIcon = LeftDrawerIcon.withComponent(ArrowChevronRightIcon);
 
 const Drawer = styled(FlexBox)<{ open?: boolean; hideOnClose?: boolean }>`
   position: relative;
+  // A hidden overflowing element causes accessibility errors
+  // The background of the overflowing element causes triggers color contrast errors
+  & .lines-content {
+    height: 100% !important;
+  }
   ${({ open, hideOnClose }) => `
     flex-basis: ${open ? '100%' : '0%'};
     visibility: ${!open && hideOnClose ? 'hidden' : 'visible'};
@@ -120,6 +125,8 @@ export const Drawers: React.FC<DrawersProps> = ({ leftChild, rightChild }) => {
         <Drawer
           hideOnClose
           id="output-drawer"
+          aria-labelledby="output-drawer-label"
+          role="region"
           open={!isLeftOpen}
           overflow="hidden"
         >

packages/codebytes/src/types.ts

@@ -1,16 +1,17 @@
+import { BackgroundProps } from '@codecademy/gamut-styles';
 import { UserClickData } from '@codecademy/tracking';
 
 import { LanguageOption } from './consts';
 
 export interface CodebytesChangeHandler {
   (text: string, language: LanguageOption): void;
 }
-export interface CodeByteEditorProps {
+export interface CodeByteEditorProps
+  extends Omit<BackgroundProps, 'onCopy' | 'bg'> {
   text?: string;
   language?: LanguageOption;
   hideCopyButton?: boolean;
   onCopy?: CodebytesChangeHandler;
-  isIFrame?: boolean;
   snippetsBaseUrl?: string;
   onEdit?: CodebytesChangeHandler;
   onLanguageChange?: CodebytesChangeHandler;

yarn.lock

@@ -13438,9 +13438,9 @@ [email protected]:
     loader-utils "^1.2.3"
 
 "monaco-editor@>= 0.25.0 < 1":
-  version "0.31.1"
-  resolved "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.31.1.tgz#67f597b3e45679d1f551237e12a3a42c4438b97b"
-  integrity sha512-FYPwxGZAeP6mRRyrr5XTGHD9gRXVjy7GUzF4IPChnyt3fS5WrNxIkS8DNujWf6EQy0Zlzpxw8oTVE+mWI2/D1Q==
+  version "0.32.0"
+  resolved "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.32.0.tgz#653764356aca40a0bf3807d150b01e0f1a604b96"
+  integrity sha512-r3xvo6XMA/fg3SuVJb+NMxf+fXHO8GPIOLoPFRO2LIf7GbqfV9W7FdddqT9ze+bCtnLd+s4IScnOGCgDQDg4BQ==
 
 moo@^0.5.0:
   version "0.5.1"