Merge branch 'beta' of github.com:kobotoolbox/kpi into beta

kobotoolbox · Jul 31, 2024 · a55037a · a55037a
2 parents b255fe2 + 109a8b0
commit a55037a
Show file tree

Hide file tree

Showing 72 changed files with 183 additions and 199 deletions.
diff --git a/jsapp/js/account/plans/plan.module.scss b/jsapp/js/account/plans/plan.module.scss
@@ -122,13 +122,8 @@ $plan-badge-height: 38px;
   padding: 0 0 sizes.$x12 0;
 }
 
-.priceName {
-  text-align: left;
-}
-
 .priceTitle {
   color: colors.$kobo-dark-blue;
-  text-align: left;
   font-size: sizes.$x20;
   padding-bottom: sizes.$x16;
   font-weight: 700;

diff --git a/jsapp/js/account/usage/usageProjectBreakdown.module.scss b/jsapp/js/account/usage/usageProjectBreakdown.module.scss
@@ -50,7 +50,7 @@
   font-weight: 700;
   font-size: sizes.$x13;
   color: colors.$kobo-gray-40;
-  text-align: left;
+  text-align: initial;
   padding-block: 1.5%;
 }
 

diff --git a/jsapp/js/account/usage/usageProjectBreakdown.tsx b/jsapp/js/account/usage/usageProjectBreakdown.tsx
@@ -143,7 +143,7 @@ const ProjectBreakdown = () => {
 
     return (
       <tr key={project.asset}>
-        <td>
+        <td dir='auto'>
           <Link
             className={styles.link}
             to={ROUTES.FORM_SUMMARY.replace(':uid', project.uid)}

diff --git a/jsapp/js/components/assetsTable/assetsTableRow.tsx b/jsapp/js/components/assetsTable/assetsTableRow.tsx
@@ -42,7 +42,7 @@ class AssetsTableRow extends React.Component<AssetsTableRowProps> {
           <Icon name={assetUtils.getAssetIcon(this.props.asset)} size='l' />
         </bem.AssetsTableRow__column>
 
-        <bem.AssetsTableRow__column m='name'>
+        <bem.AssetsTableRow__column m='name' dir='auto'>
           <AssetName asset={this.props.asset}/>
 
           {this.props.asset.settings && this.props.asset.tag_string && this.props.asset.tag_string.length > 0 &&

diff --git a/jsapp/js/components/common/button.scss b/jsapp/js/components/common/button.scss
@@ -155,7 +155,7 @@ $button-border-radius: sizes.$x6;
   position: relative; // Needed for tooltips, pending state etc.
   font-weight: 500;
   text-decoration: none;
-  text-align: left;
+  text-align: initial;
   padding: 0;
   margin: 0;
   border-width: $button-border-width;

diff --git a/jsapp/js/components/common/checkbox.scss b/jsapp/js/components/common/checkbox.scss
@@ -62,7 +62,7 @@
   }
 
   .checkbox__input + .checkbox__label {
-    margin-left: sizes.$x6;
+    margin-inline-start: sizes.$x6;
   }
 
   .checkbox__input {

diff --git a/jsapp/js/components/common/inlineMessage.scss b/jsapp/js/components/common/inlineMessage.scss
@@ -54,7 +54,7 @@
 // We need a bit stronger specificity here
 .k-inline-message p.k-inline-message__message {
   margin: 0;
-  text-align: left;
+  text-align: initial;
   font-size: sizes.$x14;
   line-height: inherit;
 }
diff --git a/jsapp/js/components/common/koboSelect.scss b/jsapp/js/components/common/koboSelect.scss
@@ -29,7 +29,7 @@ $k-select-menu-padding: sizes.$x6;
   @include mixins.centerRowFlex;
   justify-content: space-between;
   font-weight: 400;
-  text-align: left;
+  text-align: initial;
   border-width: button.$button-border-width;
   border-style: solid;
   border-color: transparent;
@@ -117,7 +117,7 @@ $k-select-menu-padding: sizes.$x6;
   height: $k-select-option-height;
   color: colors.$kobo-gray-40;
   padding: 0 #{sizes.$x16 - sizes.$x2};
-  text-align: left;
+  text-align: initial;
 }
 
 .k-select__menu-message {

diff --git a/jsapp/js/components/common/koboSelect.tsx b/jsapp/js/components/common/koboSelect.tsx
@@ -11,6 +11,7 @@ import {ButtonToIconMap} from 'js/components/common/button';
 import KoboDropdown from 'js/components/common/koboDropdown';
 import koboDropdownActions from 'js/components/common/koboDropdownActions';
 import './koboSelect.scss';
+import type {KoboDropdownPlacement} from 'js/components/common/koboDropdown';
 
 // We can't use "kobo-select" as it is already being used for custom styling of `react-select`.
 bem.KoboSelect = makeBem(null, 'k-select');
@@ -57,6 +58,7 @@ interface KoboSelectProps {
    * Sizes are generally the same as in button component so we use same type.
    */
   size: ButtonSize;
+  placement?: KoboDropdownPlacement;
   /** Without this option select always need the `selectedOption`. */
   isClearable?: boolean;
   /** This option displays a text box filtering options when opened. */
@@ -190,7 +192,7 @@ class KoboSelect extends React.Component<KoboSelectProps, KoboSelectState> {
     if (foundSelectedOption) {
       return (
         <bem.KoboSelect__trigger>
-          <bem.KoboSelect__triggerSelectedOption>
+          <bem.KoboSelect__triggerSelectedOption dir='auto'>
             {foundSelectedOption.icon &&
               <Icon
                 name={foundSelectedOption.icon}
@@ -296,6 +298,7 @@ class KoboSelect extends React.Component<KoboSelectProps, KoboSelectState> {
                 this.props.selectedOption === option.value
               ),
             }}
+            dir='auto'
           >
             {option.icon && <Icon name={option.icon}/>}
             <label>{option.label}</label>
@@ -348,7 +351,7 @@ class KoboSelect extends React.Component<KoboSelectProps, KoboSelectState> {
 
         <KoboDropdown
           name={this.props.name}
-          placement={'down-center'}
+          placement={this.props.placement || 'down-center'}
           isRequired={this.props.isRequired}
           isDisabled={Boolean(this.props.isDisabled)}
           hideOnMenuClick

diff --git a/jsapp/js/components/common/koboTagsInput.scss b/jsapp/js/components/common/koboTagsInput.scss
@@ -42,7 +42,7 @@ placese. As soon as these are removed, we can simplify this file.
   cursor: pointer;
   color: inherit !important;
   opacity: 0.6;
-  margin-left: sizes.$x6;
+  margin-inline-start: sizes.$x6;
   vertical-align: middle;
   font-size: sizes.$x20;
 

diff --git a/jsapp/js/components/common/koboTagsInput.tsx b/jsapp/js/components/common/koboTagsInput.tsx
@@ -23,6 +23,7 @@ interface InnerInputProps {
   placeholder: string;
   'data-cy'?: string;
   id?: string;
+  dir: string;
 }
 
 /**
@@ -54,6 +55,7 @@ class KoboTagsInput extends React.Component<KoboTagsInputProps> {
     const inputProps: InnerInputProps = {
       placeholder: this.props.placeholder || DEFAULT_PLACEHOLDER,
       'data-cy': this.props['data-cy'],
+      dir: 'auto',
     };
 
     if (this.props.label) {

diff --git a/jsapp/js/components/common/loadingSpinner.module.scss b/jsapp/js/components/common/loadingSpinner.module.scss
@@ -50,7 +50,7 @@
     max-height: 300px;
     overflow: auto;
     word-wrap: break-word;
-    text-align: left;
+    text-align: initial;
   }
 }
 

diff --git a/jsapp/js/components/common/modal.scss b/jsapp/js/components/common/modal.scss
@@ -353,7 +353,7 @@ $modal-custom-header-height: sizes.$x60;
 
   .intro {
     margin-bottom: 20px;
-    text-align: left;
+    text-align: initial;
   }
 
   .form-modal__item[disabled] {

diff --git a/jsapp/js/components/common/multiCheckbox.scss b/jsapp/js/components/common/multiCheckbox.scss
@@ -6,6 +6,8 @@
   height: auto;
   width: 100%;
   overflow: hidden auto;
+  text-align: initial;
+  padding: 0;
 }
 
 .multi-checkbox__item:not(:last-child) {

diff --git a/jsapp/js/components/common/multiCheckbox.tsx b/jsapp/js/components/common/multiCheckbox.tsx
@@ -43,6 +43,7 @@ export default function MultiCheckbox (props: MultiCheckboxProps) {
     <bem.MultiCheckbox
       m={`type-${props.type}`}
       className={props.className}
+      dir='auto'
     >
       {props.items.map((item, itemIndex) => (
         <bem.MultiCheckbox__item key={itemIndex}>

diff --git a/jsapp/js/components/common/radio.scss b/jsapp/js/components/common/radio.scss
@@ -30,7 +30,7 @@
   }
 
   .radio__input + .radio__label {
-    margin-left: sizes.$x6;
+    margin-inline-start: sizes.$x6;
   }
 
   .radio__input {

diff --git a/jsapp/js/components/common/textBox.tsx b/jsapp/js/components/common/textBox.tsx
@@ -182,6 +182,8 @@ export default function TextBox(props: TextBoxProps) {
     // For `number` type we allow only positive integers
     step: props.type === 'number' ? 1 : undefined,
     min: props.type === 'number' ? 0 : undefined,
+    // All textboxes handles text direction of user content with browser
+    // built-in functionality
     dir: 'auto',
   };
 

diff --git a/jsapp/js/components/common/toggleSwitch.scss b/jsapp/js/components/common/toggleSwitch.scss
@@ -47,7 +47,8 @@
   }
 
   .toggle-switch__slider + .toggle-switch__label {
-    margin-left: 6px;
+    // For RTL content
+    margin-inline-start: 6px;
   }
 
   input:checked + .toggle-switch__slider {

diff --git a/jsapp/js/components/formSummary.scss b/jsapp/js/components/formSummary.scss
@@ -86,7 +86,7 @@
     color: colors.$kobo-gray-40;
     border-bottom: 1px solid colors.$kobo-gray-92;
     position: relative;
-    text-align: left;
+    text-align: initial;
 
     &:last-child {
       border-bottom: none;

diff --git a/jsapp/js/components/formSummaryProjectInfo.tsx b/jsapp/js/components/formSummaryProjectInfo.tsx
@@ -69,11 +69,13 @@ export default function FormSummaryProjectInfo(
         {metadata.description && (
           <bem.FormView__group m='items'>
             {/* description - takes whole row */}
-            <bem.FormView__cell m='padding'>
+            <bem.FormView__cell m={['padding', 'full-width']}>
               <bem.FormView__label>
                 {metadata.description?.label ?? t('Description')}
               </bem.FormView__label>
-              {props.asset.settings.description || '-'}
+              <div dir='auto'>
+                {props.asset.settings.description || '-'}
+              </div>
             </bem.FormView__cell>
           </bem.FormView__group>
         )}

diff --git a/jsapp/js/components/header/headerTitleEditor.tsx b/jsapp/js/components/header/headerTitleEditor.tsx
@@ -121,6 +121,7 @@ class HeaderTitleEditor extends React.Component<
     return (
       <bem.MainHeader__title m={modifiers}>
         <input
+          dir='auto'
           type='text'
           name='title'
           maxLength={NAME_MAX_LENGTH}

diff --git a/jsapp/js/components/languages/languageSelector.scss b/jsapp/js/components/languages/languageSelector.scss
@@ -185,7 +185,7 @@
 
 .language-selector__not-found-message {
   padding: sizes.$x6 sizes.$x8;
-  text-align: left;
+  text-align: initial;
   font-style: italic;
 }
 

diff --git a/jsapp/js/components/library/assetContentSummary.tsx b/jsapp/js/components/library/assetContentSummary.tsx
@@ -91,7 +91,7 @@ export default class AssetContentSummary extends React.Component<
 
     return (
       <React.Fragment>
-        <bem.FormView__cell m={['box', 'bordered']}>
+        <bem.FormView__cell m={['box', 'bordered']} dir='auto'>
           {items.map(this.renderQuestion.bind(this))}
         </bem.FormView__cell>
 

diff --git a/jsapp/js/components/library/assetInfoBox.tsx b/jsapp/js/components/library/assetInfoBox.tsx
@@ -96,7 +96,9 @@ export default class AssetInfoBox extends React.Component<
           {this.state.areDetailsVisible &&
           <bem.AssetInfoBox__cell>
             <label>{t('Description')}</label>
-            {this.props.asset.settings.description || '-'}
+            <div dir='auto'>
+              {this.props.asset.settings.description || '-'}
+            </div>
           </bem.AssetInfoBox__cell>
           }
 

diff --git a/jsapp/js/components/map.scss b/jsapp/js/components/map.scss
@@ -114,7 +114,6 @@
 
     border-radius: 6px;
     padding: 12px;
-    text-align: left;
     color: colors.$kobo-gray-40;
   }
 

diff --git a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6 b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
@@ -238,7 +238,7 @@ class BulkEditSubmissionsForm extends React.Component {
           {renderQuestionTypeIcon(question.type)}
         </bem.SimpleTable__cell>
 
-        <bem.SimpleTable__cell>
+        <bem.SimpleTable__cell dir='auto'>
           {question.parents.length > 0 &&
             <small>{question.parents.join(' / ') + ' /'}</small>
           }
@@ -556,7 +556,7 @@ class BulkEditRowForm extends React.Component {
 
     return (
       <React.Fragment>
-        <bem.FormView__cell m={['columns', 'columns-top']}>
+        <bem.FormView__cell m={['columns', 'columns-top']} dir='auto'>
           <bem.FormView__cell m='column-icon'>
             {renderQuestionTypeIcon(this.props.question.type)}
           </bem.FormView__cell>