update debugger picker styling and reorganize tags

Author: javiert-okta

src/features/common/components/debugger-picker/debugger-picker.component.tsx

@@ -5,7 +5,6 @@ import { DebuggerPickerOptionModel } from "@/features/common/models/debugger-pic
 import { LibraryFilterLabel } from "@/features/libraries/models/library-filters.model";
 import { isGroupedOptionsType } from "./utils";
 
-
 interface PickerLabelProps {
   label: string | null;
 }
@@ -17,12 +16,12 @@ const getGroupLabel = (
   >,
   selected: DebuggerPickerOptionModel
 ): LibraryFilterLabel | undefined => {
-  if(!isGroupedOptionsType(options)) return undefined
+  if (!isGroupedOptionsType(options)) return undefined;
 
   const group = (options as GroupBase<DebuggerPickerOptionModel>[]).find(
     (group) => group.options.some((opt) => opt.value === selected.value)
   );
-  return group ? group.label as LibraryFilterLabel : undefined;
+  return group ? (group.label as LibraryFilterLabel) : undefined;
 };
 
 const PickerLabel: React.FC<PickerLabelProps> = ({ label }) => {
@@ -62,9 +61,7 @@ export const DebuggerPickerComponent: React.FC<
 }) => {
   const [isClient, setIsClient] = useState(false);
 
-  const handleChange = (
-    selection: SingleValue<DebuggerPickerOptionModel>
-  ) => {
+  const handleChange = (selection: SingleValue<DebuggerPickerOptionModel>) => {
     if (!selection) {
       return;
     }
@@ -78,21 +75,21 @@ export const DebuggerPickerComponent: React.FC<
 
   if (!isClient) {
     return (
-      <div className={styles.picker} data-has-label={label !== null}>
+      <>
         <PickerLabel label={label} />
         <div className="react-select-placeholder"></div>
-      </div>
+      </>
     );
   }
 
   return (
-    <div className={styles.picker} data-has-label={label !== null}>
+    <>
       {label && <PickerLabel label={label} />}
       <Select
         aria-label={"Debugger picker"}
         className="react-select-container"
         onChange={handleChange}
-        value={selectedOptionCode}
+        //value={selectedOptionCode}
         options={options}
         menuPortalTarget={document.body}
         classNamePrefix={"react-select"}
@@ -101,8 +98,22 @@ export const DebuggerPickerComponent: React.FC<
         styles={{
           control: (base) => ({
             ...base,
-            minHeight: "1.75rem",
-            height: "1.75rem",
+            alignItems: 'center',
+            cursor: 'pointer',
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'space-between',
+            minHeight: '2.5rem',
+            position: 'relative',
+            transition: '0.2s ease-out',
+            borderRadius: '1rem',
+            boxShadow: 'rgba(0, 0, 0, 0.04) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.04) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px inset',
+            boxSizing: 'border-box',
+            height: '2.5rem',
+            width: '100%',
+            padding: '0px 0.25rem',
+            minWidth: '240px',
+            outline: '0px !important',
             ...(minWidth ? { minWidth: minWidth } : {}),
           }),
 
@@ -125,6 +136,6 @@ export const DebuggerPickerComponent: React.FC<
           }),
         }}
       ></Select>
-    </div>
+    </>
   );
 };

src/features/common/components/debugger-picker/debugger-picker.module.scss

@@ -14,15 +14,14 @@ $picker-list-width-lg: 7rem;
 $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
 
 .picker {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: transparent;
-  border: none;
-  color: var(--color_fg_bold);
-  cursor: pointer;
-  gap: 0.75rem;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: transparent;
+    color: var(--color_fg_bold);
+    gap: .75rem;
+    width: 100vh;
 
   //width: $picker-width-sm;
 
@@ -56,4 +55,4 @@ $picker-list-offset-lg: calc(($picker-list-width-lg - $picker-width-lg) / 2);
 
 .picker__fullName {
   display: flex;
-}
+}

src/features/common/components/widget/widget/widget.component.tsx

@@ -1,7 +1,6 @@
 import React, { ReactNode, useId } from "react";
 import styles from "./widget.module.scss";
 import { BoxComponent } from "@/features/common/components/box/box.component";
-import { WidgetAlgPickerComponent } from "@/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component";
 import { DebuggerWidgetValues } from "@/features/common/values/debugger-widget.values";
 import { clsx } from "clsx";
 import { getLocalizedSecondaryFont } from "@/libs/theme/fonts";
@@ -23,12 +22,9 @@ interface WidgetComponentProps {
 
 export const WidgetComponent: React.FC<WidgetComponentProps> = ({
   id,
-  widget,
   languageCode,
   headlineConfig,
   title,
-  description,
-  exampleGenerator,
   contentInput,
   contentOutput,
 }) => {
@@ -42,6 +38,7 @@ export const WidgetComponent: React.FC<WidgetComponentProps> = ({
       contentClassName={styles.content}
       aria-labelledby={headlineConfig.isVisible ? widgetId : undefined}
     >
+      
       {headlineConfig.isVisible && (
         <h2
           id={widgetId}
@@ -54,14 +51,7 @@ export const WidgetComponent: React.FC<WidgetComponentProps> = ({
           {headlineConfig.actions}
         </h2>
       )}
-      <div className={styles.input__description}>
-        <span>{description}</span>
-        <WidgetAlgPickerComponent
-          label={exampleGenerator.label}
-          languageCode={languageCode}
-          widget={widget}
-        />
-      </div>
+      
       <div heap-ignore="true" className={styles.content__input}>
         {contentInput}
       </div>

src/features/common/components/widget/widget/widget.module.scss

@@ -42,29 +42,3 @@
     line-height: 2.25rem;
   }
 }
-
-.input__description {
-  grid-column: span 6;
-  width: 100%;
-  color: var(--color_fg_default);
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 2rem;
-
-  gap: 0.625rem;
-  row-gap: 0.25rem;
-
-  font-size: 0.875rem;
-  line-height: 1.375rem;
-
-  & strong {
-    font-weight: 500;
-  }
-
-  @media #{$breakpoint-dimension-sm} {
-    grid-column: span 12;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-}

src/features/debugger/components/debugger-alg-picker/debugger-alg-picker.component.tsx

@@ -15,9 +15,7 @@ import {
   algDictionary,
   jwsExampleAlgHeaderParameterValuesDictionary,
 } from "@/features/common/values/jws-alg-header-parameter-values.dictionary";
-import { useButton } from "@react-aria/button";
-import { clsx } from "clsx";
-import { PrimaryFont } from "@/libs/theme/fonts";
+import { useButton } from "@react-aria/button"
 import { DebuggerPickerOptionModel } from "@/features/common/models/debugger-picker-option.model";
 
 enum PickerStates {
@@ -60,11 +58,11 @@ export const WidgetAlgPickerComponent: React.FC<
       elementType: "span",
       preventFocusOnPress: true,
     },
-    buttonRef,
+    buttonRef
   );
 
   const [pickerState, setPickerState] = useState<PickerStates>(
-    PickerStates.IDLE,
+    PickerStates.IDLE
   );
   const [canUseEs512, setCanUseEs512] = useState(false);
   const [canUseEd25519, setCanUseEd25519] = useState(false);
@@ -73,11 +71,11 @@ export const WidgetAlgPickerComponent: React.FC<
   const dictionary = getPickersUiDictionary(languageCode);
 
   const selectEncoderAlg$ = useEncoderStore(
-    (state) => state.selectEncodingExample,
+    (state) => state.selectEncodingExample
   );
 
   const selectDecoderAlg$ = useDecoderStore(
-    (state) => state.selectDecodingExample,
+    (state) => state.selectDecodingExample
   );
 
   const selectExample = (value: string) => {
@@ -94,13 +92,6 @@ export const WidgetAlgPickerComponent: React.FC<
     setPickerState(PickerStates.IDLE);
   };
 
-  const openPicker = () => {
-    setPickerState(PickerStates.PICKING);
-  };
-
-  const closePicker = () => {
-    setPickerState(PickerStates.IDLE);
-  };
 
   useEffect(() => {
     (async function runEs512Check() {
@@ -116,9 +107,9 @@ export const WidgetAlgPickerComponent: React.FC<
     })();
   }, []);
 
-  const noneAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
+  /* const noneAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
     return Object.entries(
-      jwsExampleAlgHeaderParameterValuesDictionary.unsecured,
+      jwsExampleAlgHeaderParameterValuesDictionary.unsecured
     ).map((entry) => {
       const [key, value] = entry;
 
@@ -127,7 +118,7 @@ export const WidgetAlgPickerComponent: React.FC<
         label: value.name,
       };
     });
-  }, []);
+  }, []); */
 
   const symmetricAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
     return Object.entries(jwsExampleAlgHeaderParameterValuesDictionary.mac).map(
@@ -138,13 +129,13 @@ export const WidgetAlgPickerComponent: React.FC<
           value: key,
           label: value.name,
         };
-      },
+      }
     );
   }, []);
 
   const asymmetricAlgOptions: DebuggerPickerOptionModel[] = useMemo(() => {
     const digitalSignatureEntries = Object.entries(
-      jwsExampleAlgHeaderParameterValuesDictionary.digitalSignature,
+      jwsExampleAlgHeaderParameterValuesDictionary.digitalSignature
     );
 
     const asymmetricAlgOptions: DebuggerPickerOptionModel[] = [];
@@ -194,41 +185,30 @@ export const WidgetAlgPickerComponent: React.FC<
   }, [canUseEd25519, canUseEd448, canUseEs512]);
 
   const algOptions = useMemo(() => {
-    return [...noneAlgOptions, ...symmetricAlgOptions, ...asymmetricAlgOptions];
-  }, [asymmetricAlgOptions, noneAlgOptions, symmetricAlgOptions]);
+    return [...symmetricAlgOptions, ...asymmetricAlgOptions];
+  }, [asymmetricAlgOptions, symmetricAlgOptions]);
 
   return (
-    <div role="region" aria-label={label} className={styles.picker}>
-      {pickerState === PickerStates.IDLE && (
-        <button
-          role="button"
-          className={clsx(styles.button, PrimaryFont.className)}
-          onClick={openPicker}
-        >
-          {dictionary.exampleAlgPicker.label}
-        </button>
-      )}
-      {pickerState === PickerStates.PICKING && (
-        <>
+    <div role="region" aria-label={label} className={styles.alg_picker}>
+      <div className={styles.container}>
+        <div className={styles.picker}>
+          <div className={styles.picker__label}>
+            <label className={styles.picker__fullName}>
+              {dictionary.exampleAlgPicker.label}
+            </label>
+          </div>
           <DebuggerPickerComponent
             label={null}
+            data-has-label={label !== null}
             languageCode={languageCode}
             handleSelection={selectExample}
             selectedOptionCode={null}
             options={algOptions}
             placeholder={dictionary.exampleAlgPicker.defaultValue}
             minWidth={null}
           />
-          <button
-            {...buttonProps}
-            aria-label={dictionary.exampleAlgPicker.closeButton.label}
-            className={styles.closeButton}
-            onClick={closePicker}
-          >
-            <span>+</span>
-          </button>
-        </>
-      )}
+        </div>
+      </div>
     </div>
   );
 };