Refactor/typography (#511)

* add slight padding to the content and top bar. * use `Typography` instead of `<h>` and `<p>` tags * use `Typography` instead of `<h>` and `<p>` tags * lint
equinor · Sep 18, 2023 · 1c4b2e0 · 1c4b2e0
1 parent 3658bf9
commit 1c4b2e0
Show file tree

Hide file tree

Showing 14 changed files with 66 additions and 40 deletions.
diff --git a/example/src/plugins/job-ui-single/pages/CreateJobEntity.tsx b/example/src/plugins/job-ui-single/pages/CreateJobEntity.tsx
@@ -7,7 +7,7 @@ import {
   splitAddress,
   useDMSS,
 } from '@development-framework/dm-core'
-import { Button } from '@equinor/eds-core-react'
+import { Button, Typography } from '@equinor/eds-core-react'
 import { AxiosError, AxiosResponse } from 'axios'
 import React, { useState } from 'react'
 import { JobForm } from './JobForm'
@@ -112,22 +112,24 @@ export const CreateJobEntity = (props: TCreateJobEntityProps) => {
 
   if (createdJobEntity) {
     return (
-      <>
-        <p>Job entity already created at location {jobEntityDestination} </p>
-      </>
+      <Typography>
+        Job entity already created at location {jobEntityDestination}{' '}
+      </Typography>
     )
   }
 
   return (
     <div>
       <Stack spacing={1}>
-        <h3>Create new object of type: {EBlueprint.JOB}</h3>
+        <Typography variant="h3">
+          Create new object of type: {EBlueprint.JOB}
+        </Typography>
         {defaultJobEntity ? (
           <>
-            <p>
+            <Typography>
               Using default job entity. Will be saved to destination{' '}
               {jobEntityDestination}
-            </p>
+            </Typography>
             <Button
               onClick={() => {
                 createJobEntity(defaultJobEntity)

diff --git a/example/src/plugins/job-ui-single/pages/JobControl.tsx b/example/src/plugins/job-ui-single/pages/JobControl.tsx
@@ -5,7 +5,7 @@ import {
   useJob,
 } from '@development-framework/dm-core'
 import React, { useState } from 'react'
-import { Button, Chip, Icon } from '@equinor/eds-core-react'
+import { Button, Chip, Icon, Typography } from '@equinor/eds-core-react'
 import { stop, play } from '@equinor/eds-icons'
 
 export const JobControl = (props: { jobEntityId: string }) => {
@@ -68,9 +68,9 @@ export const JobControl = (props: { jobEntityId: string }) => {
         Get results
       </button>
 
-      <h4>Logs:</h4>
+      <Typography variant="h4">Logs:</Typography>
       {error ? <pre>{JSON.stringify(error, null, 2)}</pre> : <pre>{logs}</pre>}
-      <h4>Result:</h4>
+      <Typography variant="h4">Result:</Typography>
       {result && (
         <>
           <pre>{result.message}</pre>

diff --git a/example/src/plugins/job-ui-single/pages/JobForm.tsx b/example/src/plugins/job-ui-single/pages/JobForm.tsx
@@ -10,7 +10,7 @@ import {
   TValidEntity,
   useBlueprint,
 } from '@development-framework/dm-core'
-import { Button, TextField } from '@equinor/eds-core-react'
+import { Button, TextField, Typography } from '@equinor/eds-core-react'
 
 import React, { ChangeEvent, useState } from 'react'
 
@@ -74,7 +74,7 @@ export const JobForm = (props: {
           if (attribute.name === 'runner') {
             return (
               <>
-                <p>Pick job runner entity:</p>
+                <Typography>Pick job runner entity:</Typography>
                 <Button onClick={() => setShowJobRunnerModal(true)}>
                   Select
                 </Button>
@@ -85,23 +85,23 @@ export const JobForm = (props: {
                     setFormData({ ...formData, runner: entity })
                   }}
                 />
-                <p>
+                <Typography>
                   {formData?.runner &&
                     'Selected: ' + JSON.stringify(formData.runner)}
-                </p>
+                </Typography>
               </>
             )
           }
           if (attribute.name === 'applicationInput') {
             return (
               <>
                 <div>
-                  <p>Select reference to applicationInput</p>
-                  <p>
+                  <Typography>Select reference to applicationInput</Typography>
+                  <Typography>
                     {formData?.applicationInput &&
                       'Selected: ' +
                         JSON.stringify(formData.applicationInput.address)}
-                  </p>
+                  </Typography>
                 </div>
                 <Button onClick={() => setShowInputModal(true)}>Select</Button>
                 <EntityPickerDialog

diff --git a/packages/dm-core-plugins/src/explorer/context/modal/ModalContext.tsx b/packages/dm-core-plugins/src/explorer/context/modal/ModalContext.tsx
@@ -2,6 +2,7 @@
 
 import React from 'react'
 import styled from 'styled-components'
+import { Typography } from '@equinor/eds-core-react'
 
 /*
  * This component is from https://javascript.plainenglish.io/architecting-and-making-a-modal-with-react-75bf652ccc70
@@ -65,7 +66,7 @@ const ModalInner = ({
   return (
     <>
       <ModalHeader>
-        <h2>{data.dialog.title}</h2>
+        <Typography variant="h2">{data.dialog.title}</Typography>
       </ModalHeader>
       <ModalContent {...data.props} />
     </>

diff --git a/packages/dm-core-plugins/src/header/HeaderPlugin.tsx b/packages/dm-core-plugins/src/header/HeaderPlugin.tsx
@@ -7,7 +7,7 @@ import {
   useDocument,
   useUiPlugins,
 } from '@development-framework/dm-core'
-import { Icon, TopBar } from '@equinor/eds-core-react'
+import { Icon, TopBar, Typography } from '@equinor/eds-core-react'
 import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 
@@ -101,7 +101,7 @@ export default (props: IUIPlugin): JSX.Element => {
 
   return (
     <div>
-      <TopBar>
+      <TopBar style={{ marginBottom: '8px' }}>
         <TopBar.Header>
           <ClickableIcon
             onClick={() => {
@@ -110,7 +110,9 @@ export default (props: IUIPlugin): JSX.Element => {
           >
             <Icon data={grid_on} size={32} />
           </ClickableIcon>
-          <h4 style={{ paddingTop: 9, paddingLeft: 10 }}>{entity.label}</h4>
+          <Typography variant="h4" style={{ paddingLeft: 10 }}>
+            {entity.label}
+          </Typography>
           {appSelectorOpen && (
             <RecipeSelector
               selectableUiRecipeNames={

diff --git a/packages/dm-core-plugins/src/header/components/UserInfoDialog.tsx b/packages/dm-core-plugins/src/header/components/UserInfoDialog.tsx
@@ -1,5 +1,5 @@
 import { Dialog, useDMSS } from '@development-framework/dm-core'
-import { Button, Radio } from '@equinor/eds-core-react'
+import { Button, Radio, Typography } from '@equinor/eds-core-react'
 import { AxiosResponse } from 'axios'
 import React, { useContext, useState } from 'react'
 import { AuthContext } from 'react-oauth2-code-pkce'
@@ -66,7 +66,7 @@ export const UserInfoDialog = (props: UserInfoDialogProps) => {
 
         {tokenData?.roles.includes(applicationEntity.adminRole) && (
           <>
-            <p>Impersonate a role (UI only)</p>
+            <Typography>Impersonate a role (UI only)</Typography>
             <UnstyledList>
               {applicationEntity.roles &&
                 applicationEntity.roles.map((role: string) => (

diff --git a/packages/dm-core-plugins/src/job/JobControl.tsx b/packages/dm-core-plugins/src/job/JobControl.tsx
@@ -9,7 +9,7 @@ import {
   TJob,
   useDMSS,
 } from '@development-framework/dm-core'
-import { Button, Label, Progress } from '@equinor/eds-core-react'
+import { Button, Label, Progress, Typography } from '@equinor/eds-core-react'
 import { AxiosError } from 'axios'
 import React, { useContext, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
@@ -290,7 +290,12 @@ export const JobControl = (props: {
           marginTop: '25px',
         }}
       >
-        <h4 style={{ alignSelf: 'self-end', marginRight: '10px' }}>Logs:</h4>
+        <Typography
+          variant="h4"
+          style={{ alignSelf: 'self-end', marginRight: '10px' }}
+        >
+          Logs:
+        </Typography>
         <Button
           style={{ height: '20px' }}
           variant="outlined"

diff --git a/packages/dm-core-plugins/src/job/JobInputEditPlugin.tsx b/packages/dm-core-plugins/src/job/JobInputEditPlugin.tsx
@@ -9,6 +9,7 @@ import {
 } from '@development-framework/dm-core'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
+import { Typography } from '@equinor/eds-core-react'
 
 export const JobInputEditPlugin = (props: IUIPlugin) => {
   const { idReference } = props
@@ -38,7 +39,9 @@ export const JobInputEditPlugin = (props: IUIPlugin) => {
           padding: '30px',
         }}
       >
-        <h4>Can't edit job parameters after job has been started</h4>
+        <Typography variant="body_short_bold">
+          Can't edit job parameters after job has been started
+        </Typography>
       </div>
     )
   }

diff --git a/packages/dm-core-plugins/src/view_selector/Content.tsx b/packages/dm-core-plugins/src/view_selector/Content.tsx
@@ -20,10 +20,11 @@ export const Content = (props: {
   setFormData: (v: TGenericObject) => void
   onOpen: TOnOpen
   formData: TGenericObject
+  style?: Record<string, string | number>
 }): JSX.Element => {
   const { selectedView, items, setFormData, formData, onOpen } = props
   return (
-    <div style={{ width: '100%' }}>
+    <div style={props.style}>
       {items.map((config: TItemData) => (
         <HidableWrapper
           key={config.viewId}

diff --git a/packages/dm-core-plugins/src/view_selector/ViewSelectorPlugin.tsx b/packages/dm-core-plugins/src/view_selector/ViewSelectorPlugin.tsx
@@ -147,6 +147,12 @@ export const ViewSelectorPlugin = (
         />
       )}
       <Content
+        style={{
+          ...(internalConfig.asSidebar
+            ? { paddingLeft: '8px' }
+            : { paddingTop: '8px' }),
+          paddingRight: '8px',
+        }}
         type={type}
         onOpen={addView}
         formData={formData}

diff --git a/packages/dm-core/src/components/AccessControl/ACLUserRolesPanel.tsx b/packages/dm-core/src/components/AccessControl/ACLUserRolesPanel.tsx
@@ -1,4 +1,4 @@
-import { Button, Input } from '@equinor/eds-core-react'
+import { Button, Input, Typography } from '@equinor/eds-core-react'
 import React, { useState } from 'react'
 import styled from 'styled-components'
 import { AccessControlList, AccessLevel } from '../../services'
@@ -58,7 +58,7 @@ export const ACLUserRolesPanel = ({
   return (
     <>
       {aclKey === 'users' && (
-        <p style={{ fontStyle: 'italic' }}>Use short name</p>
+        <Typography variant="body_short_italic">Use short name</Typography>
       )}
       <CenteredRow>
         <Input

diff --git a/packages/dm-core/src/components/EntityView.tsx b/packages/dm-core/src/components/EntityView.tsx
@@ -5,6 +5,7 @@ import { ErrorBoundary, ErrorGroup } from '../utils/ErrorBoundary'
 import { useRecipe } from '../hooks'
 import { IUIPlugin } from '../types'
 import { Loading } from './Loading'
+import { Typography } from '@equinor/eds-core-react'
 
 const Wrapper = styled.div`
   align-self: start;
@@ -37,10 +38,10 @@ export const EntityView = (props: IEntityView): JSX.Element => {
   if (error)
     return (
       <ErrorGroup>
-        <p>{`Failed to find UiRecipe for type "${
+        <Typography>{`Failed to find UiRecipe for type "${
           type || '(unknown type)'
-        }"`}</p>
-        <p>{JSON.stringify(error)}</p>
+        }"`}</Typography>
+        <pre>{JSON.stringify(error)}</pre>
       </ErrorGroup>
     )
 

diff --git a/packages/dm-core/src/components/ViewCreator/ViewCreator.tsx b/packages/dm-core/src/components/ViewCreator/ViewCreator.tsx
@@ -12,6 +12,7 @@ import React, { useEffect, useState } from 'react'
 import { InlineRecipeView } from './InlineRecipeView'
 import { getTarget } from './utils'
 import { AxiosResponse } from 'axios'
+import { Typography } from '@equinor/eds-core-react'
 
 type TViewCreator = Omit<IUIPlugin, 'type'> & {
   viewConfig: TViewConfig | TInlineRecipeViewConfig | TReferenceViewConfig
@@ -60,10 +61,10 @@ export const ViewCreator = (props: TViewCreator): JSX.Element => {
   if (isLoading) return <Loading />
   if (error)
     return (
-      <p>
+      <Typography>
         Could not find attribute for document with id {reference} (
         {error.message})
-      </p>
+      </Typography>
     )
   if (attribute === undefined)
     throw new Error('Unable to find type and dimensions for view')

diff --git a/packages/dm-core/src/utils/ErrorBoundary.tsx b/packages/dm-core/src/utils/ErrorBoundary.tsx
@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react'
 import styled from 'styled-components'
+import { Typography } from '@equinor/eds-core-react'
 
 export const ErrorGroup = styled.div`
   display: flex;
@@ -20,12 +21,6 @@ export class ErrorBoundary extends React.Component<
   any,
   { hasError: boolean; error: Error }
 > {
-  fallBack: (error: Error) => ReactNode = (error: Error) => (
-    <ErrorGroup>
-      <h4 style={{ color: 'red' }}>{this.message}</h4>
-      <Message>{error.message}</Message>
-    </ErrorGroup>
-  )
   message = 'unknown'
 
   constructor(props: { message: string }) {
@@ -42,6 +37,15 @@ export class ErrorBoundary extends React.Component<
     }
   }
 
+  fallBack: (error: Error) => ReactNode = (error: Error) => (
+    <ErrorGroup>
+      <Typography variant="h5" color="red">
+        {this.message}
+      </Typography>
+      <Message>{error.message}</Message>
+    </ErrorGroup>
+  )
+
   render() {
     if (this.state.hasError) {
       // You can render any custom fallback UI