update feature toggles

bitovi · Feb 11, 2025 · 59ce763 · 59ce763
1 parent f9fbaf8
commit 59ce763
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 26 deletions.
diff --git a/public/images/features.svg b/public/images/features.svg
diff --git a/public/react/SettingsSidebar/SettingsSidebar.tsx b/public/react/SettingsSidebar/SettingsSidebar.tsx
@@ -61,11 +61,7 @@ const SettingsSidebar: FC<SettingsSidebarProps> = ({
           />
         </div>
       )}
-      {showSettings === "FEATURES" && (
-        <div className="h-full">
-          <Features />
-        </div>
-      )}
+      {showSettings === "FEATURES" && <Features />}
       {showSettings === "THEME" && (
         <div className="w-80 h-full">
           <Theme onBackButtonClicked={changeSettings} />

diff --git a/public/react/SettingsSidebar/components/Features/Features.tsx b/public/react/SettingsSidebar/components/Features/Features.tsx
@@ -2,10 +2,18 @@ import type { FC } from "react";
 
 import React from "react";
 import Heading from "@atlaskit/heading";
-import FeatureToggle from "./components/FeatureToggle/FeatureToggle";
+
+import FeatureToggle from "./components/FeatureToggle";
 
 interface FeaturesProps {}
 
+const features = [
+  { title: "Scatter Timeline Plot", subtitle: "Report due dates in a condensed scatter plot" },
+  { title: "Estimation Table", subtitle: "" },
+  { title: "Secondary Report", subtitle: "" },
+  { title: "Work Breakdowns", subtitle: "" },
+];
+
 const Features: FC<FeaturesProps> = () => {
   return (
     <div className="flex flex-col gap-y-4">
@@ -15,18 +23,14 @@ const Features: FC<FeaturesProps> = () => {
       <div className="flex flex-col gap-y-8">
         <p className="text-sm">Turn on new features under active development.</p>
         <ul className="flex flex-col gap-y-8">
-          <li>
-            <FeatureToggle />
-          </li>
-          <li>
-            <FeatureToggle />
-          </li>
-          <li>
-            <FeatureToggle />
-          </li>
+          {features.map((feature) => (
+            <li key={feature.title}>
+              <FeatureToggle {...feature} />
+            </li>
+          ))}
         </ul>
         <p className="text-sm">
-          Got feedback?
+          Got feedback?{" "}
           <a href="#" className="link" target="_blank">
             Let us know on github.
           </a>

diff --git a/public/react/SettingsSidebar/components/Features/components/FeatureToggle/FeatureToggle.tsx b/public/react/SettingsSidebar/components/Features/components/FeatureToggle/FeatureToggle.tsx
@@ -1,21 +1,24 @@
-import { Label as AtlasLabel } from "@atlaskit/form";
 import AtlasToggle from "@atlaskit/toggle";
 import type { FC } from "react";
 
 import React, { useId } from "react";
 
-interface FeatureToggleProps {}
+interface FeatureToggleProps {
+  title: string;
+  subtitle: string;
+}
 
-export const FeatureToggle: FC<FeatureToggleProps> = ({}) => {
+export const FeatureToggle: FC<FeatureToggleProps> = ({ title, subtitle }) => {
   const id = useId();
+
   return (
-    <div className="flex gap-x-4">
+    <div className="flex gap-x-4 items-center">
       <AtlasToggle id={id} size="large" />
       <div className="flex-col gap-y-6">
-        <AtlasLabel htmlFor={id}>
-          <span className="font-light text-black text-xl">Scatter timeline plot</span>
-        </AtlasLabel>
-        <p className="text-sm">Report due dates in a condensed scatter plot</p>
+        <label htmlFor={id} className="font-bold text-base text-slate-800">
+          {title}
+        </label>
+        <p className="text-sm">{subtitle}</p>
       </div>
     </div>
   );

diff --git a/public/react/SettingsSidebar/components/Features/components/FeatureToggle/index.ts b/public/react/SettingsSidebar/components/Features/components/FeatureToggle/index.ts
@@ -0,0 +1 @@
+export { default } from "./FeatureToggle";
diff --git a/public/react/SettingsSidebar/components/IssueSource/IssueSource.tsx b/public/react/SettingsSidebar/components/IssueSource/IssueSource.tsx
@@ -65,7 +65,6 @@ const IssueSource: FC<IssueSourceProps> = () => {
         value={statusesToExcludeOptions}
         onChange={handleExcludedStatusChange}
       />
-
       <div className="flex flex-row justify-end mt-2">
         <Button appearance="primary" isDisabled={!applyButtonEnabled} onClick={applyJql}>
           Apply

diff --git a/public/react/SettingsSidebar/components/ReportSettings/ReportSettings.tsx b/public/react/SettingsSidebar/components/ReportSettings/ReportSettings.tsx
@@ -37,7 +37,7 @@ const ReportSettings: FC<ReportSettingsProps> = ({ changeSettings }) => {
         Teams
       </SidebarButton>
       <SidebarButton onClick={() => changeSettings("FEATURES")}>
-        <img src="/images/team.svg" aria-hidden />
+        <img src="/images/features.svg" aria-hidden />
         Features
       </SidebarButton>
       <SidebarButton onClick={() => changeSettings("THEME")}>