@eturnity/eturnity_reusable_components 9.37.0 → 9.37.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "9.37.0",
+  "version": "9.37.1",
   "files": [
     "dist",
     "src"

package/src/components/inputs/select/option/index.vue

@@ -14,15 +14,7 @@
     :data-value="domDataValue"
     :disabled-bg-color="disabledBgColor"
     :disabled-text-color="disabledTextColor"
-    :hovered-bg-color="
-      colorMode == 'dark'
-        ? theme.semanticColors.teal[800]
-        : colorMode == 'transparent'
-        ? 'grey6'
-        : hoveredBgColor
-        ? hoveredBgColor
-        : 'grey5'
-    "
+    :hovered-bg-color="hoveredBackgroundColor"
     :is-disabled="isDisabled"
     :min-width="minWidth"
     :padding="padding"
@@ -172,6 +164,11 @@
       }
     },
     computed: {
+      hoveredBackgroundColor() {
+        if (this.colorMode == 'dark') return theme.semanticColors.teal[800]
+        if (this.colorMode == 'transparent') return 'grey6'
+        return this.hoveredBgColor || theme.semanticColors.grey[300]
+      },
       /** Vue omits `data-value` when bound to null, so the parent select cannot find this row for search filtering. */
       domDataValue() {
         const v = this.value

package/src/components/inputs/select/option/option.spec.js

@@ -0,0 +1,39 @@
+/* eslint-disable */
+import { mount } from '@vue/test-utils'
+import Option from '@/components/inputs/select/option'
+import theme from '@/assets/theme'
+
+// jsdom never receives the stylesheet vue3-styled-components generates, so the
+// hashed class on the rendered option is the observable: two mounts share a
+// class only when they resolve to the same styles.
+describe('RCoption', () => {
+  const styleClass = (props = {}) =>
+    mount(Option, {
+      props: { value: 'a', ...props },
+      slots: { default: 'Option A' },
+    })
+      .classes()
+      .join(' ')
+
+  it('hovers on grey 300 by default', () => {
+    expect(styleClass()).toBe(
+      styleClass({ hoveredBgColor: theme.semanticColors.grey[300] })
+    )
+  })
+
+  it('lets an explicit hoveredBgColor win over the default', () => {
+    expect(styleClass({ hoveredBgColor: 'grey4' })).not.toBe(styleClass())
+    expect(styleClass({ hoveredBgColor: 'grey4' })).toBe(
+      styleClass({ hoveredBgColor: theme.colors.grey4 })
+    )
+  })
+
+  it('keeps its own hover colours in dark and transparent colour modes', () => {
+    expect(styleClass({ colorMode: 'dark', hoveredBgColor: 'grey4' })).toBe(
+      styleClass({ colorMode: 'dark' })
+    )
+    expect(
+      styleClass({ colorMode: 'transparent', hoveredBgColor: 'grey4' })
+    ).toBe(styleClass({ colorMode: 'transparent' }))
+  })
+})

package/src/components/tableDropdown/index.vue

@@ -365,7 +365,7 @@
     }
 
     &:hover {
-      background-color: ${(props) => props.theme.colors.grey5};
+      background-color: ${(props) => props.theme.semanticColors.grey[300]};
     }
   `
 
@@ -420,7 +420,7 @@
     height: 37px;
 
     &:hover {
-      background-color: ${(props) => props.theme.colors.grey5};
+      background-color: ${(props) => props.theme.semanticColors.grey[300]};
     }
   `
 

package/src/components/tables/mainTable/index.vue

@@ -143,11 +143,13 @@
           .arrow-container,
           .input-placeholder,
           .table-dropdown-item {
-            background-color: ${(props) => props.theme.colors.grey5};
+            background-color: ${(props) =>
+              props.theme.semanticColors.grey[300]};
           }
 
           input {
-            background-color: ${(props) => props.theme.colors.grey5};
+            background-color: ${(props) =>
+              props.theme.semanticColors.grey[300]};
           }
         }
 
@@ -337,7 +339,7 @@
       &:hover {
         input:disabled {
           background-color: ${(props) =>
-            props.theme.colors.grey5 + '!important'};
+            props.theme.semanticColors.grey[300] + '!important'};
         }
 
         .drag-icon {
@@ -345,7 +347,7 @@
         }
 
         .drag-wrapper {
-          background-color: ${(props) => props.theme.colors.grey5};
+          background-color: ${(props) => props.theme.semanticColors.grey[300]};
         }
 
         .arrow-dropdown {
@@ -416,7 +418,7 @@
       height: unset;
 
       &:focus {
-        background: ${(props) => props.theme.colors.grey5};
+        background: ${(props) => props.theme.semanticColors.grey[300]};
       }
     }
 

package/src/components/threeDots/index.vue

@@ -254,12 +254,12 @@
       background-color: ${(props) =>
         props.colorTheme == 'dark'
           ? theme.semanticColors.teal[700]
-          : '#ebeef4'};
+          : theme.semanticColors.grey[300]};
     }
 
     &:focus-visible {
       outline: none;
-      background-color: #ebeef4;
+      background-color: ${theme.semanticColors.grey[300]};
     }
   `
   const OptionChild = styled('div', { colorTheme: String })`
@@ -272,12 +272,12 @@
       background-color: ${(props) =>
         props.colorTheme == 'dark'
           ? theme.semanticColors.teal[600]
-          : '#ebeef4'};
+          : theme.semanticColors.grey[300]};
     }
 
     &:focus-visible {
       outline: none;
-      background-color: #ebeef4;
+      background-color: ${theme.semanticColors.grey[300]};
     }
   `
 
@@ -358,7 +358,7 @@
       },
       hoveredBackgroundColor: {
         type: String,
-        default: theme.colors.grey5,
+        default: theme.semanticColors.grey[300],
       },
       dataId: {
         required: false,

package/src/components/threeDots/threeDots.spec.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import { mount, DOMWrapper } from '@vue/test-utils'
 import ThreeDots from './index.vue'
+import theme from '@/assets/theme'
 
 jest.mock('@/components/icon/iconCache.mjs', () => ({
   fetchIcon: jest.fn(() => Promise.resolve('')),
@@ -118,4 +119,28 @@ describe('ThreeDots', () => {
     expect(w.emitted('on-select')).toHaveLength(1)
     expect(w.emitted('on-select')[0][0]).toMatchObject({ value: 'c1' })
   })
+
+  // jsdom never receives the stylesheet vue3-styled-components generates, so the
+  // hashed class on the trigger is the observable: two mounts share a class only
+  // when they resolve to the same styles.
+  describe('hovered background colour', () => {
+    const styleClass = (props = {}) => {
+      const w = mount(ThreeDots, { props: { options, ...props } })
+      const classes = w.classes().join(' ')
+      w.unmount()
+      return classes
+    }
+
+    it('hovers on grey 300 by default', () => {
+      expect(styleClass()).toBe(
+        styleClass({ hoveredBackgroundColor: theme.semanticColors.grey[300] })
+      )
+    })
+
+    it('lets an explicit hoveredBackgroundColor win over the default', () => {
+      expect(
+        styleClass({ hoveredBackgroundColor: theme.colors.grey5 })
+      ).not.toBe(styleClass())
+    })
+  })
 })