feat(queryitem): adding QueryItem.Qualifier component

src/components/data-entry/QueryItem/QueryItem.Qualifier.stories.tsx

@@ -0,0 +1,28 @@
+import { QueryItemQualifier } from './QueryItem.Qualifier'
+import { type Meta, type StoryObj } from '@storybook/react'
+
+type Story = StoryObj<typeof QueryItemQualifier>
+
+// default
+const meta: Meta<typeof QueryItemQualifier> = {
+  title: 'Aquarium/Data Entry/QueryItem.Qualifier',
+  component: QueryItemQualifier,
+  args: {},
+}
+export default meta
+
+// stories
+export const Empty: Story = {}
+
+export const Simple: Story = {
+  args: {
+    options: [
+      { value: '0', label: 'is equal to' },
+      { value: '1', label: 'is not equal to' },
+      { value: '2', label: 'is greater than to' },
+      { value: '3', label: 'is greater or equal to' },
+      { value: '4', label: 'is less than' },
+      { value: '5', label: 'is less or equal to' },
+    ],
+  },
+}

src/components/data-entry/QueryItem/QueryItem.Qualifier.tsx

@@ -0,0 +1,24 @@
+import './query-item.css'
+import { CheckIcon } from 'src/components/icons'
+import type { DefaultOptionType } from 'antd/es/select'
+import { type ISelectProps, Select } from '../Select/Select'
+
+export type IQueryItemQualifierOption = DefaultOptionType
+
+export interface IQueryItemQualifierProps {
+  options: IQueryItemQualifierOption[]
+}
+
+export const QueryItemQualifier = (props: IQueryItemQualifierProps) => {
+  const selectProps: ISelectProps = {
+    defaultValue: props.options?.length ? props.options[0].value : undefined,
+    options: props.options,
+    menuItemSelectedIcon: node =>
+      node.isSelected ? <CheckIcon className="query-item-qualifier__item-selected-icon" /> : null,
+    placement: 'bottomLeft',
+    popupMatchSelectWidth: false,
+    suffixIcon: null,
+    variant: 'borderless',
+  }
+  return <Select className="query-item-qualifier__select" {...selectProps}></Select>
+}

src/components/data-entry/QueryItem/QueryItem.tsx

@@ -0,0 +1,5 @@
+import { QueryItemQualifier } from './QueryItem.Qualifier'
+
+export const QueryItem = {
+  Qualifier: QueryItemQualifier,
+}

src/components/data-entry/QueryItem/query-item.css

@@ -0,0 +1,7 @@
+.query-item-qualifier__item-selected-icon {
+  margin-left: 5px;
+}
+
+.query-item-qualifier__select .ant-select-selection-item {
+  border-bottom: 4px solid var(--mp-brand-primary-8);
+}

src/styles/style.ts

@@ -1,8 +1,3 @@
-/**
- * Do not edit directly
- * Generated on Thu, 21 Mar 2024 19:23:25 GMT
- */
-
 export const Blue = '#1677ff'
 export const Purple = '#722ED1'
 export const Cyan = '#13C2C2'

src/utils/utils.spec.ts

@@ -29,9 +29,10 @@ describe('Testing utils', () => {
 
     it('it should return "Windows" when the user agent includes "Win"', () => {
       // arrange
-      global.navigator = {
+      const navigatorOverride: Partial<Navigator> = {
         userAgent: 'Windows',
-      } as Navigator
+      }
+      global.navigator = { ...global.navigator, ...navigatorOverride }
 
       // act
       const actualOS = getOS()
@@ -42,9 +43,10 @@ describe('Testing utils', () => {
 
     it('it should return "Macintosh" when the user agent includes "Mac"', () => {
       // arrange
-      global.navigator = {
+      const navigatorOverride: Partial<Navigator> = {
         userAgent: 'Macintosh',
-      } as Navigator
+      }
+      global.navigator = { ...global.navigator, ...navigatorOverride }
 
       // act
       const actualOS = getOS()
@@ -53,4 +55,4 @@ describe('Testing utils', () => {
       expect(actualOS).toBe('Macintosh')
     })
   })
-})
+})