@pareto-engineering/design-system 5.0.2 → 5.0.4

package/src/ui/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.jsx

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import { snakeCaseToTitleCase } from 'ui/utils'
-
 import './styles.scss'
 
+// Local Definitions
+
 const baseClassName = styleNames.base
 
 const componentClassName = 'y-labels-dropdown'
@@ -65,7 +65,7 @@ const YLabelsDropDown = ({
               className="status-dot"
               style={{ backgroundColor: item.color }}
             />
-            {snakeCaseToTitleCase(item.label)}
+            {item.label}
             {selectedYLabels.some((label) => label.label === item.label) && (
               <span className="icon checkmark">I</span>
             )}
@@ -115,7 +115,7 @@ YLabelsDropDown.propTypes = {
 }
 
 YLabelsDropDown.defaultProps = {
-  placeholder:'Select Item',
+  placeholder:'Submission status',
 }
 
 export default YLabelsDropDown

package/src/ui/a/Charts/Common/YLabelsDropDown/styles.scss

@@ -1,8 +1,7 @@
 @use "@pareto-engineering/bem";
 
 $default-margin: 1rem;
-$default-border: var(--theme-default-input-border);
-$default-border-radius: var(--theme-default-input-border-radius);
+$default-border-radius: .25rem;
 $default-padding: 1rem;
 $default-width: 15rem;
 $default-box-shadow: 0 .25rem .75rem var(--ui-lines);
@@ -17,9 +16,9 @@ $default-checkmark-font-size: calc(var(--s-1) * .75rem);
 
     .dropdown-button {
       align-items: center;
-      background-color: var(--background-far);
-      border: $default-border;
-      border-radius: calc($default-border-radius / 2);
+      background-color: var(--soft-background-inputs);
+      border: none;
+      border-radius: $default-border-radius;
       color: var(--hard-paragraph);
       cursor: pointer;
       display: flex;
@@ -54,8 +53,8 @@ $default-checkmark-font-size: calc(var(--s-1) * .75rem);
 
       .dropdown-item {
         align-items: center;
-        border-radius: calc($default-border-radius / 2);
-        color: var(--paragraph);
+        border-radius: $default-border-radius;
+        color: var(--hard-paragraph);
         cursor: pointer;
         display: flex;
         margin: calc($default-margin * .125);

package/src/ui/a/Charts/index.js

@@ -1,3 +1,2 @@
 export { AreaChart } from './AreaChart'
 export { BarChart } from './BarChart'
-export { PieChart } from './PieChart'

package/src/ui/a/index.js

@@ -30,4 +30,4 @@ export { ToggleSwitch } from './ToggleSwitch'
 export { XMLEditor } from './XMLEditor'
 export { DatePicker } from './DatePicker'
 export { Tooltip } from './Tooltip'
-export { AreaChart, BarChart, PieChart } from './Charts'
+export { AreaChart, BarChart } from './Charts'

package/src/ui/f/fields/FileUpload/common/Preview/Preview.jsx

@@ -91,18 +91,32 @@ const Preview = ({
         <span title={file.name} className="name">{file.name}</span>
         {isFileBroken
           ? (
-            <Tooltip
-              description="bulk-updates-text"
-              content={(
-                <p>
-                  This file doesn&apos;t have a link or the link is invalid.
-                </p>
-              )}
-            >
-              <span className="icon x-ui-icons c-x">
-                h
-              </span>
-            </Tooltip>
+            <>
+              <Tooltip
+                description="bulk-updates-text"
+                content={(
+                  <p>
+                    This file doesn&apos;t have a link or the link is invalid.
+                  </p>
+                )}
+              >
+                <span className="icon x-ui-icons c-x">
+                  h
+                </span>
+              </Tooltip>
+              {
+                writeOnly && (
+                  <Button
+                    color="ui-icons"
+                    isCompact
+                    isSimple
+                    onClick={() => handleDelete()}
+                  >
+                    <span className="icon">{canDelete ? 'Y' : '9'}</span>
+                  </Button>
+                )
+              }
+            </>
           )
           : (
             <Button

package/src/ui/utils/formatting.js

@@ -46,9 +46,6 @@ export const formatTime = (seconds) => {
   if (minutes > 0 || (hours > 0 && remainingSeconds > 0)) parts.push(`${minutes}m`)
   if (remainingSeconds > 0) parts.push(`${remainingSeconds}s`)
 
-  // Cater for decimal seconds
-  if (parts.length === 0) return '0s'
-
   return parts.join(' ')
 }
 
@@ -126,8 +123,3 @@ export const formatDate = (input, format = DATE_FORMATS.HUMAN_READABLE) => {
     return 'Invalid Date'
   }
 }
-
-export const snakeCaseToTitleCase = (word) => {
-  const result = word.replace(/([A-Z])/g, ' $1')
-  return result.charAt(0).toUpperCase() + result.slice(1)
-}

package/src/ui/utils/index.js

@@ -1,4 +1,2 @@
 export { useWindowSize, useDynamicPosition, useOutsideClick } from './hooks'
-export {
-  formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase,
-} from './formatting'
+export { formatTime, formatDate, DATE_FORMATS } from './formatting'