CORE-1257: MessageBox component (#101)

* create new MessageBox component

* create new stores and snaps

* bump version

* update jira-linked-action

* remove unused ModalBodyHeading style

* update snaps

* export MessageBox

* return ModalBodyHeading

* update snaps

* export MessageBox styles

Author: jomcarvajal

.github/workflows/checks.yml

@@ -10,7 +10,7 @@ jobs:
     name: Jira
     runs-on: ubuntu-latest
     steps:
-      - uses: openstax/[email protected].14
+      - uses: openstax/[email protected].15
         with:
           jira_site: openstax
           jira_project: DISCO

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.18.5",
+  "version": "1.18.6",
   "license": "MIT",
   "source": "./src/index.ts",
   "types": "./dist/index.d.ts",

src/components/Error.tsx

@@ -1,8 +1,6 @@
 import React from "react";
 import * as Sentry from '@sentry/react';
-import { ModalBody, ModalBodyHeading } from "./Modal";
-import styled from "styled-components";
-import { colors } from "../../src/theme";
+import { BoxBody, BoxHeading, BoxEventId } from "./MessageBox.styles";
 import { ErrorContext } from "../contexts";
 
 export interface ErrorPropTypes {
@@ -11,12 +9,6 @@ export interface ErrorPropTypes {
   heading?: string;
 }
 
-const EventId = styled.div`
-  font-size: 1.4rem;
-  color: ${colors.palette.neutralMedium};
-  margin-top: 1.6rem;
-`;
-
 export const Error = ({ heading, children, ...props }: ErrorPropTypes) => {
   const context = React.useContext(ErrorContext);
   const [lastEventId, setLastEventId] = React.useState<string | undefined>(Sentry.lastEventId());
@@ -36,12 +28,12 @@ export const Error = ({ heading, children, ...props }: ErrorPropTypes) => {
     return () => clearInterval(intervalId);
   }, [lastEventId, context.error?.eventId]);
 
-  return <ModalBody {...props} data-testid='error'>
-    <ModalBodyHeading>{heading ?? `Uh-oh, there's been a glitch`}</ModalBodyHeading>
+  return <BoxBody {...props} data-testid='error'>
+    <BoxHeading>{heading ?? `Uh-oh, there's been a glitch`}</BoxHeading>
     {children ?? <>
       We're not quite sure what went wrong. Restart your browser. If this doesn't solve
       the problem, visit our <a href="https://openstax.secure.force.com/help" target="_blank">Support Center</a>.
     </>}
-    <EventId data-testid='event-id'>{context.error?.eventId || lastEventId}</EventId>
-  </ModalBody>
+    <BoxEventId data-testid='event-id'>{context.error?.eventId || lastEventId}</BoxEventId>
+  </BoxBody>
 };

src/components/MessageBox.spec.tsx

@@ -0,0 +1,25 @@
+import renderer from 'react-test-renderer';
+import { MessageBox } from './MessageBox';
+
+describe('MessageBox', () => {
+  it('matches snapshot', () => {
+    const tree = renderer.create(
+      <MessageBox />
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('can override text', () => {
+    const tree = renderer.create(
+      <MessageBox>Body text</MessageBox>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('can override margin', () => {
+    const tree = renderer.create(
+      <MessageBox customMargin='10rem 0 10rem 0'>Body text</MessageBox>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/MessageBox.stories.tsx

@@ -0,0 +1,9 @@
+import { MessageBox } from './MessageBox';
+
+export const Empty = () => <MessageBox />;
+export const CustomText = () => <MessageBox>
+  Diffferent body text
+</MessageBox>;
+export const CustomMargin = () => <MessageBox customMargin='10rem auto'>
+  No submissions are currently available for review.
+</MessageBox>;

src/components/MessageBox.styles.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+import { colors } from "../../src/theme";
+
+const modalPadding = 3;
+
+export const BoxWrapper = styled.div<{
+  margin?: string;
+}>`
+  margin: ${props => props.margin ?? '0 auto'};
+  max-width: 90.2rem;
+  border: 0.1rem solid ${colors.palette.pale};
+`;
+
+export const BoxHeading = styled.h3`
+  font-weight: 400;
+  font-size: 2.2rem;
+  margin-top: 0;
+`;
+
+export const BoxBody = styled.div`
+  font-size: 1.6rem;
+  padding: ${modalPadding}rem;
+`;
+
+export const BoxEventId = styled.div`
+  font-size: 1.4rem;
+  color: ${colors.palette.neutralMedium};
+  margin-top: 1.6rem;
+`;

src/components/MessageBox.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { BoxWrapper, BoxBody } from "./MessageBox.styles";
+
+export interface MessageBoxProps {
+  customMargin?: string;
+  children?: React.ReactNode;
+}
+
+export const MessageBox = ({ children, customMargin, ...props }: MessageBoxProps) => {
+
+  return (
+    <BoxWrapper margin={customMargin}>
+      <BoxBody {...props} data-testid='message-box'>
+        {children}
+      </BoxBody>
+    </BoxWrapper>
+  );
+};

src/components/__snapshots__/Error.spec.tsx.snap

@@ -2,29 +2,29 @@
 
 exports[`Error can override text 1`] = `
 <div
-  className="sc-jSMfEi cWLUhq"
+  className="sc-dkzDqf iJAkzW"
   data-testid="error"
 >
   <h3
-    className="sc-eCYdqJ hrmHjt"
+    className="sc-gsnTZi jDaiGk"
   >
     An important heading
   </h3>
   Body text
   <div
-    className="sc-papXJ dnjAXW"
+    className="sc-hKMtZM bkppVE"
     data-testid="event-id"
   />
 </div>
 `;
 
 exports[`Error matches snapshot 1`] = `
 <div
-  className="sc-jSMfEi cWLUhq"
+  className="sc-dkzDqf iJAkzW"
   data-testid="error"
 >
   <h3
-    className="sc-eCYdqJ hrmHjt"
+    className="sc-gsnTZi jDaiGk"
   >
     Uh-oh, there's been a glitch
   </h3>
@@ -37,7 +37,7 @@ exports[`Error matches snapshot 1`] = `
   </a>
   .
   <div
-    className="sc-papXJ dnjAXW"
+    className="sc-hKMtZM bkppVE"
     data-testid="event-id"
   />
 </div>

src/components/__snapshots__/ErrorModal.spec.tsx.snap

@@ -86,11 +86,11 @@ exports[`Modal matches snapshot 1`] = `
             </button>
           </header>
           <div
-            class="sc-papXJ jvMkIj"
+            class="sc-breuTD eiboLU"
             data-testid="error"
           >
             <h3
-              class="sc-ftvSup dzrTqv"
+              class="sc-evZas buXsYK"
             >
               Uh-oh, there's been a glitch
             </h3>
@@ -103,7 +103,7 @@ exports[`Modal matches snapshot 1`] = `
             </a>
             .
             <div
-              class="sc-crXcEl gaTpxy"
+              class="sc-ksZaOG cPKkuS"
               data-testid="event-id"
             />
           </div>
@@ -214,11 +214,11 @@ exports[`Modal matches snapshot when heading and children are set 1`] = `
             </button>
           </header>
           <div
-            class="sc-papXJ jvMkIj"
+            class="sc-breuTD eiboLU"
             data-testid="error"
           >
             <h3
-              class="sc-ftvSup dzrTqv"
+              class="sc-evZas buXsYK"
             >
               Scores not sent
             </h3>
@@ -232,7 +232,7 @@ exports[`Modal matches snapshot when heading and children are set 1`] = `
             </a>
             .
             <div
-              class="sc-crXcEl gaTpxy"
+              class="sc-ksZaOG cPKkuS"
               data-testid="event-id"
             />
           </div>

src/components/__snapshots__/MessageBox.spec.tsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageBox can override margin 1`] = `
+<div
+  className="sc-bczRLJ ezbLuP"
+>
+  <div
+    className="sc-dkzDqf iJAkzW"
+    data-testid="message-box"
+  >
+    Body text
+  </div>
+</div>
+`;
+
+exports[`MessageBox can override text 1`] = `
+<div
+  className="sc-bczRLJ ewgpZQ"
+>
+  <div
+    className="sc-dkzDqf iJAkzW"
+    data-testid="message-box"
+  >
+    Body text
+  </div>
+</div>
+`;
+
+exports[`MessageBox matches snapshot 1`] = `
+<div
+  className="sc-bczRLJ ewgpZQ"
+>
+  <div
+    className="sc-dkzDqf iJAkzW"
+    data-testid="message-box"
+  />
+</div>
+`;