refactor ribbon component

Author: javiert-okta

src/features/common/components/bars/ribbon/ribbon.component.tsx

@@ -1,129 +1,21 @@
 "use client";
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React from "react";
 import { LayoutDictionaryModel } from "@/features/localization/models/layout-dictionary.model";
 import styles from "./ribbon.module.scss";
 import { BoxComponent } from "@/features/common/components/box/box.component";
-import { savePreferredLanguage } from "@/features/localization/services/ui-language.utils";
 import Link from "next/link";
-import {
-  getSanitizedThemePickerCodeValue,
-  isLightThemePreference,
-  isSystemThemePreference,
-} from "@/features/themes/services/theme.utils";
-import { RibbonPickerComponent } from "@/features/common/components/bars/ribbon/ribbon-picker/ribbon-picker.component";
-import { LightIconComponent } from "@/features/common/components/bars/ribbon/assets/light-icon.component";
-import { DarkIconComponent } from "@/features/common/components/bars/ribbon/assets/dark-icon.component";
-import { ThemeModel } from "@/features/common/models/theme.model";
-import { useAppStore } from "@/features/common/services/app.store";
-import { SystemIconComponent } from "@/features/common/components/bars/ribbon/assets/system-icon.component";
-import {
-  ThemeCookieValues,
-  ThemePickerCodeValues,
-} from "@/features/common/values/theme.values";
-import { savePreferredThemeInCookie } from "@/features/themes/services/theme.client.utils";
 
 interface RibbonComponentProps {
-  themeCode: ThemeCookieValues;
-  languageCode: string;
   dictionary: LayoutDictionaryModel["ribbon"];
 }
 
 export const RibbonComponent: React.FC<RibbonComponentProps> = ({
-  themeCode,
-  languageCode,
   dictionary,
 }) => {
-  const theme$ = useAppStore((state) => state.theme$);
-
-  const sanitizedThemePickerCodeValue = useMemo(() => {
-    return getSanitizedThemePickerCodeValue(themeCode);
-  }, [themeCode]);
-
-  const [currentTheme, setCurrentTheme] = useState<ThemeModel>(
-    dictionary.themePicker.options.filter((element) =>
-      isSystemThemePreference(themeCode)
-        ? isSystemThemePreference(element.code)
-        : element.code === sanitizedThemePickerCodeValue,
-    )[0],
-  );
-
-  const themeOptions = useMemo(
-    () =>
-      dictionary.themePicker.options.map((option) => {
-        return {
-          code: option.code,
-          full: {
-            ...option,
-            label: option.label,
-            icon: isSystemThemePreference(option.code) ? (
-              <SystemIconComponent />
-            ) : isLightThemePreference(option.code) ? (
-              <LightIconComponent />
-            ) : (
-              <DarkIconComponent />
-            ),
-          },
-          compact: {
-            ...option,
-            label: null,
-            icon: isSystemThemePreference(option.code) ? (
-              <SystemIconComponent />
-            ) : isLightThemePreference(option.code) ? (
-              <LightIconComponent />
-            ) : (
-              <DarkIconComponent />
-            ),
-          },
-        };
-      }),
-    [dictionary.themePicker.options],
-  );
-
-  const handleThemeSelection = useCallback(
-    async (value: ThemePickerCodeValues) => {
-      const themePreference = await savePreferredThemeInCookie(
-        value,
-        languageCode,
-      );
-
-      if (themePreference) {
-        setCurrentTheme(themePreference);
-      }
-    },
-    [languageCode],
-  );
-
-  const handleLanguageSelection = useCallback(async (value: string) => {
-    await savePreferredLanguage(value);
-  }, []);
-
-  useEffect(() => {
-    if (theme$) {
-      setCurrentTheme(
-        dictionary.themePicker.options.filter((element) =>
-          isSystemThemePreference(themeCode)
-            ? isSystemThemePreference(element.code)
-            : element.code === sanitizedThemePickerCodeValue,
-        )[0],
-      );
-    }
-  }, [
-    dictionary.themePicker.options,
-    sanitizedThemePickerCodeValue,
-    theme$,
-    themeCode,
-  ]);
 
   return (
-    <>
-      <BoxComponent
-        contentAs="section"
-        containerClassName={styles.container}
-        wrapperClassName={styles.wrapper}
-        contentClassName={styles.content}
-        aria-label="Page options"
-      >
+    
         <div className={styles.cta}>
           <span className={styles.cta__title}>{dictionary.cta.title}</span>
           <Link
@@ -156,30 +48,5 @@ export const RibbonComponent: React.FC<RibbonComponentProps> = ({
             </div>
           </Link>
         </div>
-        <div className={styles.actions}>
-          <RibbonPickerComponent<ThemePickerCodeValues>
-            label={null}
-            compactLabel={null}
-            icon={
-              isSystemThemePreference(currentTheme.code) ? (
-                <SystemIconComponent />
-              ) : isLightThemePreference(currentTheme.code) ? (
-                <LightIconComponent />
-              ) : (
-                <DarkIconComponent />
-              )
-            }
-            languageCode={languageCode}
-            selectedOptionCode={currentTheme.code}
-            handleSelection={handleThemeSelection}
-            options={themeOptions}
-            aria={{
-              buttonLabel: dictionary.themePicker.button.ariaLabel,
-              listLabel: dictionary.themePicker.list.ariaLabel,
-            }}
-          />
-        </div>
-      </BoxComponent>
-    </>
   );
 };

src/features/common/components/bars/ribbon/ribbon.module.scss

@@ -1,38 +1,10 @@
 @use "@/libs/theme/styles/variables" as *;
 @use "@/libs/theme/styles/mixins" as *;
 
-.container {
-  @include Container;
-
-  background: var(--color_bg_app_bar);
-  border-bottom: 1px solid;
-  border-image-slice: 1;
-  border-image-source: linear-gradient(
-    135deg,
-    rgb(76, 183, 163) 0%,
-    rgb(63, 89, 228) 50%,
-    rgb(64, 22, 160) 100%
-  );
-}
-
-.wrapper {
-  @include ExtendedGrid;
-  height: $ribbon-height;
-}
-
-.content {
-  position: relative;
-  @include InnerContentFlex;
-  height: 100%;
-  grid-column: 1 / -1;
-  align-items: center;
-  justify-content: space-between;
-
-  color: $neutrals-light-100-snow;
-}
-
 .cta {
   display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 0.75rem;
   line-height: 1.25rem;
   color: $Neutral0;
@@ -88,11 +60,3 @@
   }
 }
 
-.actions {
-  display: flex;
-  gap: 0.5rem;
-
-  @media #{$breakpoint-dimension-md} {
-    gap: 1rem;
-  }
-}