Add name of the widget in analytical framework

the-deep · Jul 17, 2024 · 0f73420 · 0f73420
1 parent f5f259a
commit 0f73420
Show file tree

Hide file tree

Showing 26 changed files with 103 additions and 0 deletions.
diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/DateRangeWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/DateRangeWidgetForm/index.tsx
@@ -92,6 +92,9 @@ function DateRangeWidgetForm(props: DateRangeWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(date range)"
+                headingContainerClassName={styles.headingDescription}
+                spacing="compact"
                 headerActions={(
                     <>
                         <Button

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/DateRangeWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/DateRangeWidgetForm/styles.css
@@ -1,6 +1,11 @@
 .date-range-widget-form {
     .container {
         background-color: var(--dui-color-foreground);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
     .error,
     .input {

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/DateWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/DateWidgetForm/index.tsx
@@ -152,6 +152,9 @@ function DateWidgetForm(props: DateWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(date)"
+                headingContainerClassName={styles.headingDescription}
+                spacing="compact"
                 headerActions={(
                     <>
                         <Button

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/DateWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/DateWidgetForm/styles.css
@@ -1,6 +1,11 @@
 .date-widget-form {
     .container {
         background-color: var(--dui-color-foreground);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
     .error,
     .input {

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/GeoWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/GeoWidgetForm/index.tsx
@@ -108,6 +108,9 @@ function GeoLocationWidgetForm(props: GeoLocationWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(geo location)"
+                headingContainerClassName={styles.headingDescription}
+                spacing="compact"
                 headerActions={(
                     <>
                         <Button

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/GeoWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/GeoWidgetForm/styles.css
@@ -1,6 +1,11 @@
 .geo-widget-form {
     .container {
         background-color: var(--dui-color-foreground);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
     .error,
     .input {

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/Matrix1dWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/Matrix1dWidgetForm/index.tsx
@@ -613,6 +613,9 @@ function Matrix1dWidgetForm(props: Matrix1dWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(matrix 1d)"
+                spacing="compact"
+                headingContainerClassName={styles.headingDescription}
                 contentClassName={styles.editorContent}
                 withoutExternalPadding
                 ellipsizeHeading

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/Matrix1dWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/Matrix1dWidgetForm/styles.css
@@ -6,6 +6,11 @@
 
     .container {
         background-color: var(--dui-color-foreground);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
 
     .editor-content {

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/Matrix2dWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/Matrix2dWidgetForm/index.tsx
@@ -1106,6 +1106,9 @@ function Matrix2dWidgetForm(props: Matrix2dWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(matrix 2d)"
+                headingContainerClassName={styles.headingDescription}
+                spacing="compact"
                 contentClassName={styles.editorContent}
                 withoutExternalPadding
                 ellipsizeHeading

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/Matrix2dWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/Matrix2dWidgetForm/styles.css
@@ -6,6 +6,11 @@
 
     .container {
         background-color: var(--dui-color-foreground);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
 
     .container-content {

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/MultiSelectWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/MultiSelectWidgetForm/index.tsx
@@ -389,6 +389,9 @@ function MultiSelectWidgetForm(props: MultiSelectWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(multi select)"
+                spacing="compact"
+                headingContainerClassName={styles.headingDescription}
                 contentClassName={styles.editorContent}
                 headerActions={(
                     <>

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/MultiSelectWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/MultiSelectWidgetForm/styles.css
@@ -7,6 +7,11 @@
 
     .container {
         background-color: var(--dui-color-foreground);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
 
     .error,

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/NumberWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/NumberWidgetForm/index.tsx
@@ -191,6 +191,9 @@ function NumberWidgetForm(props: NumberWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(number)"
+                headingContainerClassName={styles.headingDescription}
+                spacing="compact"
                 headerActions={(
                     <>
                         <Button

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/NumberWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/NumberWidgetForm/styles.css
@@ -1,6 +1,11 @@
 .number-widget-form {
     .container {
         background-color: var(--dui-color-foreground);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
     .error,
     .input {

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/OrganigramWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/OrganigramWidgetForm/index.tsx
@@ -514,6 +514,8 @@ function OrganigramWidgetForm(props: OrganigramWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(organigram)"
+                headingContainerClassName={styles.headingDescription}
                 spacing="compact"
                 headerActions={(
                     <>

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/OrganigramWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/OrganigramWidgetForm/styles.css
@@ -10,6 +10,11 @@
         background-color: var(--dui-color-foreground);
         overflow-y: auto;
         gap: var(--dui-spacing-medium);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
 
     .list-container {

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/ScaleWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/ScaleWidgetForm/index.tsx
@@ -443,6 +443,9 @@ function ScaleWidgetForm(props: ScaleWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(scale)"
+                headingContainerClassName={styles.headingDescription}
+                spacing="compact"
                 contentClassName={styles.editorContent}
                 headerActions={(
                     <>

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/ScaleWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/ScaleWidgetForm/styles.css
@@ -6,6 +6,11 @@
 
     .container {
         background-color: var(--dui-color-foreground);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
 
     .error,

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/SingleSelectWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/SingleSelectWidgetForm/index.tsx
@@ -388,7 +388,10 @@ function SingleSelectWidgetForm(props: SingleSelectWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(single select)"
+                headingContainerClassName={styles.headingDescription}
                 contentClassName={styles.editorContent}
+                spacing="compact"
                 headerActions={(
                     <>
                         <Button

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/SingleSelectWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/SingleSelectWidgetForm/styles.css
@@ -6,6 +6,11 @@
 
     .container {
         background-color: var(--dui-color-foreground);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
 
     .error,

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/TextWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/TextWidgetForm/index.tsx
@@ -149,6 +149,9 @@ function TextWidgetForm(props: TextWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(text)"
+                headingContainerClassName={styles.headingDescription}
+                spacing="compact"
                 headerActions={(
                     <>
                         <Button

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/TextWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/TextWidgetForm/styles.css
@@ -1,6 +1,11 @@
 .text-widget-form {
     .container {
         background-color: var(--dui-color-foreground);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
     .input {
         margin: var(--dui-spacing-small) var(--dui-spacing-medium);

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/TimeRangeWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/TimeRangeWidgetForm/index.tsx
@@ -94,6 +94,9 @@ function TimeRangeWidgetForm(props: TimeRangeWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(time range)"
+                headingContainerClassName={styles.headingDescription}
+                spacing="compact"
                 headerActions={(
                     <>
                         <Button

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/TimeRangeWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/TimeRangeWidgetForm/styles.css
@@ -1,6 +1,11 @@
 .time-range-widget-form {
     .container {
         background-color: var(--dui-color-foreground);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
     .error,
     .input {

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/TimeWidgetForm/index.tsx b/app/views/AnalyticalFramework/components/WidgetEditor/TimeWidgetForm/index.tsx
@@ -152,6 +152,9 @@ function TimeWidgetForm(props: TimeWidgetFormProps) {
             <Container
                 className={styles.container}
                 heading={value.title ?? 'Unnamed'}
+                headingDescription="(time)"
+                headingContainerClassName={styles.headingDescription}
+                spacing="compact"
                 headerActions={(
                     <>
                         <Button

diff --git a/app/views/AnalyticalFramework/components/WidgetEditor/TimeWidgetForm/styles.css b/app/views/AnalyticalFramework/components/WidgetEditor/TimeWidgetForm/styles.css
@@ -1,6 +1,11 @@
 .time-widget-form {
     .container {
         background-color: var(--dui-color-foreground);
+
+        .heading-description {
+            color: var(--dui-color-accent);
+            font-weight: var(--dui-font-weight-bold);
+        }
     }
     .error,
     .input {