Merge pull request #1090 from matkoniecz/feature/unified-button-style

Button style unification for user-survey questions
colouring-cities · Feb 15, 2023 · 1292876 · 1292876
2 parents fc2cc07 + fa9e81d
commit 1292876
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/app/src/frontend/building/data-components/logical-data-entry/logical-data-entry.tsx b/app/src/frontend/building/data-components/logical-data-entry/logical-data-entry.tsx
@@ -145,3 +145,31 @@ export const LogicalDataEntryYesOnly: React.FC<LogicalDataEntryProps> = (props)
         </>
     );
 };
+
+export const LogicalDataEntryYesOnlyWithExplanation: React.FC<LogicalDataEntryProps> = (props) => {
+    function handleValueChange(e: React.ChangeEvent<HTMLInputElement>) {
+        props.onChange?.(props.slug, e.target.checked);
+    }
+
+    const isDisabled = props.mode === 'view' || props.disabled;
+
+    return (
+        <>
+            <DataTitleCopyable
+                slug={props.slug}
+                title={props.title}
+                tooltip={props.tooltip}
+                disabled={props.disabled || props.value == undefined}
+                copy={props.copy}
+            />
+            <label className="form-check-label">
+                <input className="form-check-input" type="checkbox"
+                    name={props.slug}
+                    checked={props.value === true}
+                    disabled={isDisabled || props.disallowTrue}
+                    onChange={handleValueChange}
+                /> Yes (tick to add or remove your edit)
+            </label>
+        </>
+    );
+};
diff --git a/app/src/frontend/building/data-containers/community.tsx b/app/src/frontend/building/data-containers/community.tsx
@@ -8,7 +8,7 @@ import { DataEntryGroup } from '../data-components/data-entry-group';
 
 import { CategoryViewProps } from './category-view-props';
 import InfoBox from '../../components/info-box';
-import { LogicalDataEntry, LogicalDataEntryYesOnly } from '../data-components/logical-data-entry/logical-data-entry';
+import { LogicalDataEntry, LogicalDataEntryYesOnlyWithExplanation } from '../data-components/logical-data-entry/logical-data-entry';
 import { buildingUserFields, dataFields } from '../../config/data-fields-config';
 
 import './community.css';
@@ -66,7 +66,7 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
             : <></>}
             */
             }
-            <LogicalDataEntryYesOnly
+            <LogicalDataEntryYesOnlyWithExplanation
                 slug='community_type_worth_keeping'
                 title={buildingUserFields.community_type_worth_keeping.title}