@axinom/mosaic-ui 0.56.0-rc.6 → 0.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.56.0-rc.6",
+  "version": "0.56.0",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.29-rc.6",
+    "@axinom/mosaic-core": "^0.4.29",
     "@faker-js/faker": "^7.4.0",
     "@geoffcox/react-splitter": "^2.1.2",
     "@mui/base": "5.0.0-beta.40",
@@ -40,6 +40,7 @@
     "clsx": "^1.1.0",
     "lodash": "^4.17.21",
     "luxon": "^3.3.0",
+    "postcss": "^8.4.4",
     "react-beautiful-dnd": "^13.1.1",
     "react-calendar": "^3.3.1",
     "react-content-loader": "^6.0.3",
@@ -93,7 +94,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.28.1",
     "rollup-plugin-peer-deps-external": "^2.2.3",
-    "rollup-plugin-postcss": "^2.9.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^5.3.1",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-visualizer": "^5.8.3",
@@ -107,5 +108,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "deae548d43a743e376cfb53bc291fc95fea13946"
+  "gitHead": "c3802f0be74822f25268d4fdf7497a1c1577309d"
 }

package/src/components/Accordion/Accordion.scss

@@ -41,6 +41,7 @@
     }
 
     .button {
+      transition: transform 200ms ease;
       svg {
         height: 40%;
       }
@@ -51,3 +52,7 @@
     }
   }
 }
+
+.rotated {
+  transform: rotate(90deg);
+}

package/src/components/Accordion/Accordion.spec.tsx

@@ -85,7 +85,7 @@ describe('Accordion', () => {
     });
   });
 
-  it('displays collapse icon when one or more children are expanded', () => {
+  it('displays rotated ChevronRight icon when one or more children are expanded', () => {
     const wrapper = mount(
       <Accordion header={<b>Header</b>}>
         <AccordionItem header={<b>Item 1</b>}>
@@ -103,6 +103,7 @@ describe('Accordion', () => {
     let button = wrapper.find(Button).first();
 
     expect(button.prop('icon')).toBe(IconName.ChevronRight);
+    expect(button.hasClass('rotated')).toBe(false);
 
     const item = wrapper.find(AccordionItem).last();
 
@@ -110,12 +111,14 @@ describe('Accordion', () => {
 
     button = wrapper.find(Button).first();
 
-    expect(button.prop('icon')).toBe(IconName.ChevronDown);
+    expect(button.prop('icon')).toBe(IconName.ChevronRight);
+    expect(button.hasClass('rotated')).toBe(true);
 
     item.find('button').simulate('click');
 
     button = wrapper.find(Button).first();
 
     expect(button.prop('icon')).toBe(IconName.ChevronRight);
+    expect(button.hasClass('rotated')).toBe(false);
   });
 });

package/src/components/Accordion/Accordion.tsx

@@ -95,11 +95,7 @@ export const Accordion: React.FC<AccordionProps> = ({
         {header && (
           <div className={clsx(classes.header)} data-test-id="accordion-header">
             <Button
-              icon={
-                expandAll.isExpanded
-                  ? IconName.ChevronDown
-                  : IconName.ChevronRight
-              }
+              icon={IconName.ChevronRight}
               onButtonClicked={() => {
                 const updatedState = { ...expanded };
 
@@ -110,7 +106,9 @@ export const Accordion: React.FC<AccordionProps> = ({
                 setExpanded(updatedState);
                 expandAll.toggleExpanded();
               }}
-              className={clsx(classes.button)}
+              className={clsx(classes.button, {
+                [classes.rotated]: expandAll.isExpanded,
+              })}
               buttonContext={ButtonContext.None}
             ></Button>
             {header}

package/src/components/Accordion/AccordionItem/AccordionItem.scss

@@ -6,10 +6,10 @@
   align-items: center;
   background-color: $light-gray;
   margin-top: 4px;
-  transition: box-shadow 0.15s ease-in-out 0s;
   height: 50px;
   cursor: pointer;
   color: var(--accordion-item-text-color, $accordion-item-text-color);
+  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
 
   &:hover {
     background-color: var(
@@ -30,7 +30,7 @@
 
 .container {
   overflow: hidden;
-  transition: max-height 100ms linear;
+  transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .expanded {
@@ -52,9 +52,14 @@
 .button {
   svg {
     height: 40%;
+    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   svg * {
     stroke: var(--accordion-item-arrow-color, $accordion-item-arrow-color);
   }
+
+  &.rotated > svg {
+    transform: rotate(90deg);
+  }
 }

package/src/components/Accordion/AccordionItem/AccordionItem.tsx

@@ -62,8 +62,10 @@ export const AccordionItem: React.FC<AccordionItemProps> = ({
         onClick={toggleExpanded}
       >
         <Button
-          icon={isExpanded ? IconName.ChevronDown : IconName.ChevronRight}
-          className={classes.button}
+          icon={IconName.ChevronRight}
+          className={clsx(classes.button, {
+            [classes.rotated]: isExpanded,
+          })}
           buttonContext={ButtonContext.None}
         />
         {header}

package/src/components/FormElements/BooleanView/BooleanViewField.spec.tsx

@@ -20,11 +20,11 @@ describe('BooleanViewField', () => {
 
   it('displays default true, false label values', () => {
     const wrapper1 = shallow(<BooleanViewField value={true} />);
-    const text1 = wrapper1.find('.text');
+    const text1 = wrapper1.find('[data-test-id="form-field-value"]');
     expect(text1.text()).toBe('True');
 
     const wrapper2 = shallow(<BooleanViewField value={false} />);
-    const text2 = wrapper2.find('.text');
+    const text2 = wrapper2.find('[data-test-id="form-field-value"]');
     expect(text2.text()).toBe('False');
   });
 
@@ -42,7 +42,7 @@ describe('BooleanViewField', () => {
 
     const green = wrapper.find('.true');
     const red = wrapper.find('.false');
-    const text = wrapper.find('.text');
+    const text = wrapper.find('[data-test-id="form-field-value"]');
 
     expect(green.exists()).toBe(true);
     expect(red.exists()).toBe(false);
@@ -63,7 +63,7 @@ describe('BooleanViewField', () => {
 
     const green = wrapper.find('.true');
     const red = wrapper.find('.false');
-    const text = wrapper.find('.text');
+    const text = wrapper.find('[data-test-id="form-field-value"]');
 
     expect(green.exists()).toBe(false);
     expect(red.exists()).toBe(true);

package/src/components/FormElements/BooleanView/BooleanViewField.tsx

@@ -32,11 +32,7 @@ export const BooleanViewField: React.FC<BooleanViewFieldProps> = ({
     >
       <div className={clsx(classes.value)}>
         <div className={clsx(value ? classes.true : classes.false)}></div>
-        <div
-          className={clsx(classes.text)}
-          data-test-id="form-field-value"
-          data-test-value={value}
-        >
+        <div data-test-id="form-field-value" data-test-value={value}>
           {value ? trueLabel : falseLabel}
         </div>
       </div>

package/src/components/FormElements/Checkbox/Checkbox.stories.tsx

@@ -31,9 +31,9 @@ export default meta;
 
 export const Main: StoryObj<typeof Checkbox> = {
   args: {
-    label: 'isActive',
+    label: 'Is Active?',
     tooltipContent: faker.lorem.paragraph(2),
-    name: 'number',
+    name: 'isActive',
   },
   render: (args) =>
     React.createElement(() => {

package/src/components/FormElements/Checkbox/Checkbox.tsx

@@ -65,9 +65,10 @@ export const Checkbox: React.FC<CheckboxProps> = ({
       className={clsx(classes.container, 'checkbox-container', className)}
       error={errorMsg}
       dataTestFieldType="Checkbox"
+      htmlFor={id ?? name}
     >
       <input
-        id={id}
+        id={id ?? name}
         name={name}
         ref={setReferenceElement as React.LegacyRef<HTMLInputElement>}
         type="checkbox"

package/src/components/FormElements/CustomTags/CustomTags.scss

@@ -113,7 +113,8 @@
           color: var(--live-suggest-text-color, $live-suggest-text-color);
         }
 
-        li:hover {
+        li:hover,
+        li.selected {
           background-color: var(
             --live-suggest-background-selected-color,
             $live-suggest-background-selected-color

package/src/components/FormElements/CustomTags/CustomTags.tsx

@@ -295,6 +295,7 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
       className={clsx(classes.container, 'custom-tags-container', className)}
       error={errorMessage}
       dataTestFieldType="CustomTags"
+      htmlFor={id ?? name}
     >
       <div className={clsx(classes.tagsWrapper)} style={styles}>
         <div className={clsx(classes.inputWrapper)}>
@@ -302,7 +303,7 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
             className={clsx({
               [classes.hasError]: errorMessage !== undefined,
             })}
-            id={id}
+            id={id ?? name}
             name={name}
             ref={textInput}
             value={val}
@@ -324,7 +325,9 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
                   onMouseDown={(event) =>
                     onSuggestionClickedHandler(event, suggestion)
                   }
-                  className={clsx({ [classes.selected]: cursorPos === idx })}
+                  className={clsx({
+                    [classes.selected]: cursorPos === idx,
+                  })}
                 >
                   {suggestion}
                 </li>

package/src/components/FormElements/DateTimeField/DateTimeText.stories.tsx

@@ -31,8 +31,8 @@ export default meta;
 
 export const Main: StoryObj<typeof DateTimeText> = {
   args: {
-    label: 'Name',
-    name: 'name',
+    label: 'Start',
+    name: 'start',
     tooltipContent: faker.lorem.sentences(4),
   },
   render: (args) =>

package/src/components/FormElements/DateTimeField/DateTimeText.tsx

@@ -89,11 +89,12 @@ export const DateTimeText: React.FC<DateTimeTextProps> = ({
       className={clsx(classes.container, 'datetime-container', className)}
       error={errorMsg}
       dataTestFieldType="DateTime"
+      htmlFor={id ?? name}
     >
       <div className={clsx(classes.inputbutton)} ref={container}>
         <input
           className={clsx({ [classes.hasError]: errorMsg })}
-          id={id}
+          id={id ?? name}
           name={name}
           type={'text'}
           value={display}

package/src/components/FormElements/DynamicDataListControl/DynamicDataListControl.tsx

@@ -30,6 +30,7 @@ export const DynamicDataListControl = <T extends Data>({
       {...rest}
       className={clsx('dynamic-data-list-control-container', className)}
       dataTestFieldType="DynamicDataListControl"
+      htmlFor={rest.id ?? rest.name}
     >
       <DynamicDataList {...rest} />
     </FormElementContainer>

package/src/components/FormElements/FileUploadControl/FileUploadControl.tsx

@@ -134,6 +134,7 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
       )}
       error={error}
       dataTestFieldType="FileUpload"
+      htmlFor={id ?? name}
     >
       <div className={clsx(classes.content)}>
         {dragging && !disabled ? (
@@ -157,12 +158,11 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
                 [classes.fileuploadbutton]: true,
                 [classes.disabled]: disabled,
               })}
-              htmlFor={id}
             >
               <Icons icon={IconName.File} />
             </label>
             <input
-              id={id}
+              id={id ?? name}
               type="file"
               accept={accept}
               disabled={disabled}

package/src/components/FormElements/FormElementContainer/FormElementContainer.tsx

@@ -16,6 +16,9 @@ export type FormElementContainerProps = BaseFormElement & {
 
   /** Stick to the top option */
   stickyLabel?: boolean;
+
+  /** The value of the 'for' attribute of the label */
+  htmlFor?: string;
 };
 
 /**
@@ -35,6 +38,7 @@ export const FormElementContainer: React.FC<FormElementContainerProps> = ({
   dataTestFieldType,
   inlineMode = false,
   stickyLabel = true,
+  htmlFor,
 }) => {
   const heightStyles: CSSProperties = {};
 
@@ -63,7 +67,7 @@ export const FormElementContainer: React.FC<FormElementContainerProps> = ({
           )}
           style={heightStyles}
         >
-          <label data-test-id="form-field-label">
+          <label data-test-id="form-field-label" htmlFor={htmlFor}>
             {label}
             {tooltipContent && (
               <InfoTooltip className={clsx(classes.tooltip)}>

package/src/components/FormElements/ReadOnlyText/ReadOnlyTextField.tsx

@@ -27,6 +27,7 @@ export const ReadOnlyTextField = <T,>({
   transform,
   className = '',
   hideCopyButton = false,
+  id,
   ...rest
 }: PropsWithChildren<ReadOnlyTextFieldProps<T>>): JSX.Element => {
   const nonNullableValue = value === null ? '' : value;
@@ -42,12 +43,14 @@ export const ReadOnlyTextField = <T,>({
       {...rest}
       className={clsx('read-only-field-container', className)}
       dataTestFieldType="ReadOnlyText"
+      htmlFor={id}
     >
       <div className={clsx(classes.container)}>
         <input
           value={displayValue}
           onChange={noop}
           data-test-id="form-field-value"
+          id={id}
         />
         {!hideCopyButton && (
           <Button

package/src/components/FormElements/Select/Select.tsx

@@ -86,13 +86,13 @@ export const Select: React.FC<SelectProps> = (props) => {
 
   return (
     <FormElementContainer
-      id={id}
       label={label}
       tooltipContent={tooltipContent}
       inlineMode={inlineMode}
       className={clsx(classes.container, 'select-container', className)}
       error={error}
       dataTestFieldType="Select"
+      htmlFor={id ?? name}
     >
       <div
         ref={setAnchorEl}
@@ -101,6 +101,7 @@ export const Select: React.FC<SelectProps> = (props) => {
       >
         <input
           {...getInputProps()}
+          id={id ?? name}
           name={name}
           className={clsx({ [classes.hasError]: Boolean(error) })}
           autoFocus={autoFocus}

package/src/components/FormElements/SingleLineText/SingleLineText.tsx

@@ -121,11 +121,12 @@ export const SingleLineText: React.FC<SingleLineTextProps> = ({
       )}
       error={errorMsg}
       dataTestFieldType="SingleLineText"
+      htmlFor={id ?? name}
     >
       <input
         {...inputProps}
         className={clsx({ [classes.hasError]: errorMsg !== undefined })}
-        id={id}
+        id={id ?? name}
         name={name}
         type={type}
         ref={innerRef}

package/src/components/FormElements/Tags/Tags.tsx

@@ -144,11 +144,12 @@ export const Tags = <T,>({
       className={clsx(classes.container, 'tags-container', className)}
       error={error}
       dataTestFieldType="Tags"
+      htmlFor={id ?? name}
     >
       <div className={clsx(classes.tagsWrapper)}>
         {currentTags.length < tagsOptions.length ? (
           <Select
-            id={id}
+            id={id ?? name}
             name={`tags-select-${name}`}
             className={clsx({
               [classes.hasError]: error !== undefined,

package/src/components/FormElements/TextArea/TextArea.tsx

@@ -49,10 +49,11 @@ export const TextArea: React.FC<TextAreaProps> = ({
       className={clsx(classes.container, 'text-area-container', className)}
       error={errorMsg}
       dataTestFieldType="TextArea"
+      htmlFor={id ?? name}
     >
       <textarea
         className={clsx({ [classes.hasError]: errorMsg !== undefined })}
-        id={id}
+        id={id ?? name}
         name={name}
         value={value ?? ''}
         disabled={disabled}

package/src/components/FormElements/ToggleButton/ToggleButton.stories.tsx

@@ -35,7 +35,7 @@ export const Main: StoryObj<typeof ToggleButton> = {
   args: {
     label: 'My Feature',
     tooltipContent: faker.lorem.sentences(4),
-    name: 'status',
+    name: 'myFeature',
     value: false,
   },
   render: (args) =>

package/src/components/FormElements/ToggleButton/ToggleButton.tsx

@@ -104,8 +104,10 @@ export const ToggleButton: React.FC<ToggleButtonProps> = ({
           className,
         )}
         dataTestFieldType="ToggleButton"
+        htmlFor={rest.id ?? rest.name}
       >
         <button
+          id={rest.id ?? rest.name}
           className={clsx(classes.toggle, {
             [classes.hasConfirm]: confirmation,
           })}