Merged PR 199: Add more Position for the dimensions + rename isDimensionBorrower and MarkPosition... + Refactor components in ContainerForm with Checkboxes and Selector + Add more docs

Add more Position for the dimensions

Rename isDimensionBorrower and MarkPosition...

Refactor components in ContainerForm with Checkboxes and Selector

Add more docs

src/Components/CheckboxGroupButtons/OrientationCheckboxes.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
+import { CheckboxGroupButtons } from './CheckboxGroupButtons';
+import { Orientation } from '../../Enums/Orientation';
+
+interface IOrientationCheckboxesProps {
+  id: string
+  name: string
+  labelText: string
+  value: Orientation[]
+  onChange: (key: string, value: number[]) => void
+}
+
+export function OrientationCheckboxes({
+  id,
+  name,
+  labelText,
+  value,
+  onChange
+}: IOrientationCheckboxesProps): JSX.Element {
+  return <CheckboxGroupButtons
+    key={id}
+    name={name}
+    selectedValues={value}
+    inputClassName='hidden'
+    labelText={labelText}
+    colQty={2}
+    inputGroups={[
+      {
+        key: `${id}-horizontal`,
+        text: (
+          <div title='Horizontal' aria-label='horizontal' className='radio-button-icon'>
+            <ChevronUpDownIcon className='heroicon p-1' />
+          </div>
+        ),
+        value: Orientation.Horizontal
+      },
+      {
+        key: `${id}-vertical`,
+        text: (
+          <div title='Vertical' aria-label='vertical' className='radio-button-icon'>
+            <ChevronUpDownIcon className='heroicon rotate-90 p-1' />
+          </div>
+        ),
+        value: Orientation.Vertical
+      }
+    ]}
+    onChange={(newSelectedValues) => {
+      onChange(id, newSelectedValues);
+    }}
+  />;
+}