Add and use SettingsAccordion throughout app

3 files changed, 54 insertions, 24 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx
new file mode 100644
index 0000000000..b4aa0129e9
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/SettingsAccordion.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { ScrollToAnchorId } from '../../../shared/ipc-types';
+import { useScrollToListItem } from '../../hooks';
+import { Accordion, AccordionProps } from '../../lib/components/accordion';
+import { useHistory } from '../../lib/history';
+
+export type SettingsAccordion = Omit<AccordionProps, 'animation'> & {
+  accordionId: string;
+  anchorId?: ScrollToAnchorId;
+};
+
+function SettingsAccordion({ accordionId, anchorId, ...props }: SettingsAccordion) {
+  const { location } = useHistory();
+  const initialExpanded = location.state.expandedSections[accordionId];
+  const [expanded, setExpanded] = React.useState(initialExpanded);
+  const { ref, animation } = useScrollToListItem(anchorId);
+
+  return (
+    <Accordion
+      ref={ref}
+      animation={animation}
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+      {...props}
+    />
+  );
+}
+
+const SettingsAccordionNamespace = Object.assign(SettingsAccordion, {
+  Trigger: Accordion.Trigger,
+  Header: Accordion.Header,
+  Content: Accordion.Content,
+  Title: Accordion.Title,
+  Icon: Accordion.Icon,
+});
+
+export { SettingsAccordionNamespace as SettingsAccordion };
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/index.ts
new file mode 100644
index 0000000000..60f9bc00d3
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/settings-accordion/index.ts
@@ -0,0 +1 @@
+export * from './SettingsAccordion';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/DnsBlockerSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/DnsBlockerSetting.tsx
index c49b953fb1..2c086d4a5b 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/DnsBlockerSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/dns-blocker-settings/DnsBlockerSetting.tsx
@@ -1,15 +1,12 @@
-import React from 'react';
 import { sprintf } from 'sprintf-js';
 
 import { messages } from '../../../../../../shared/gettext';
-import { useScrollToListItem } from '../../../../../hooks';
-import { Accordion } from '../../../../../lib/components/accordion';
 import { FlexRow } from '../../../../../lib/components/flex-row';
-import { useHistory } from '../../../../../lib/history';
 import { formatHtml } from '../../../../../lib/html-formatter';
 import { useSelector } from '../../../../../redux/store';
 import InfoButton from '../../../../InfoButton';
 import { ModalMessage } from '../../../../Modal';
+import { SettingsAccordion } from '../../../../settings-accordion';
 import {
   BlockAdsSetting,
   BlockAdultContentSetting,
@@ -22,24 +19,18 @@ import {
 
 export function DnsBlockerSettings() {
   const dns = useSelector((state) => state.settings.dns);
-  const { location } = useHistory();
-  const initialExpanded = location.state.expandedSections['dns-blocker-setting'];
   const customDnsFeatureName = messages.pgettext('vpn-settings-view', 'Use custom DNS server');
-  const [expanded, setExpanded] = React.useState(initialExpanded);
-  const { ref, animation } = useScrollToListItem('dns-blocker-setting');
 
   return (
     <>
-      <Accordion
-        ref={ref}
-        expanded={expanded}
-        onExpandedChange={setExpanded}
-        disabled={dns.state === 'custom'}
-        animation={animation}>
-        <Accordion.Header>
-          <Accordion.Title>
+      <SettingsAccordion
+        accordionId="dns-blocker-setting"
+        anchorId="dns-blocker-setting"
+        disabled={dns.state === 'custom'}>
+        <SettingsAccordion.Header>
+          <SettingsAccordion.Title>
             {messages.pgettext('vpn-settings-view', 'DNS content blockers')}
-          </Accordion.Title>
+          </SettingsAccordion.Title>
           <FlexRow $gap="medium">
             <InfoButton>
               <ModalMessage>
@@ -66,20 +57,20 @@ export function DnsBlockerSettings() {
                 )}
               </ModalMessage>
             </InfoButton>
-            <Accordion.Trigger>
-              <Accordion.Icon />
-            </Accordion.Trigger>
+            <SettingsAccordion.Trigger>
+              <SettingsAccordion.Icon />
+            </SettingsAccordion.Trigger>
           </FlexRow>
-        </Accordion.Header>
-        <Accordion.Content>
+        </SettingsAccordion.Header>
+        <SettingsAccordion.Content>
           <BlockAdsSetting />
           <BlockTrackersSetting />
           <BlockMalwareSetting />
           <BlockGamblingSetting />
           <BlockAdultContentSetting />
           <BlockSocialMediaSetting />
-        </Accordion.Content>
-      </Accordion>
+        </SettingsAccordion.Content>
+      </SettingsAccordion>
       {dns.state === 'custom' && <CustomDnsEnabledFooter />}
     </>
   );