fixing pr callouts

mozilla · Aug 11, 2022 · 1ea9428 · 1ea9428
1 parent 49c0d52
commit 1ea9428
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 47 deletions.
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -21,6 +21,6 @@ jobs:
           npm install --legacy-peer-deps
           # Forcing legacy peer dep behavior, since we want to use a version of React 
           # that is newer than the one Storybook expects.
-          npm run deploy-storybook -- --ci
+          npm run deploy-storybook
         env:
           GH_TOKEN: Dashboard:${{ secrets.GITHUB_TOKEN }}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -51,7 +51,7 @@ const Button = ({
   onClick,
   iconPlacedRight = false,
   href,
-  target = '_blank',
+  target = '_self',
   classProp = '',
 }: ButtonPropsT) => {
   const content = (
@@ -83,17 +83,21 @@ const Button = ({
     </>
   );
 
-  const getClass = `
-  ${styles['button_' + category]} 
-  ${styles[size]} 
-  ${!text && styles[size + '_round']} 
-  ${classProp} 
-  ${active && styles['button_' + category + '_active']}
-`;
+  /**
+   * Configure CSS Class
+   */
+  const className = `
+    ${styles['button_' + category]} 
+    ${styles[size]} 
+    ${!text && styles[size + '_round']} 
+    ${classProp} 
+    ${active && styles['button_' + category + '_active']}
+  `;
 
   return href ? (
+    // ANCHOR LINK 
     <a
-      className={getClass}
+      className={className}
       id={id}
       target={target}
       href={href}
@@ -102,8 +106,9 @@ const Button = ({
       {content}
     </a>
   ) : (
+    // BUTTON 
     <button
-      className={getClass}
+      className={className}
       id={id}
       aria-label={text}
       type={type}

diff --git a/src/components/Checkbox/Checkbox.module.scss b/src/components/Checkbox/Checkbox.module.scss
@@ -12,7 +12,6 @@
   input {
     position: absolute;
     opacity: 0;
-    cursor: pointer;
     height: 0;
     width: 0;
   }

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -1,7 +1,6 @@
 import React, {
   forwardRef,
   useRef,
-  useImperativeHandle,
   ChangeEventHandler,
   ChangeEvent,
 } from 'react';
@@ -13,20 +12,23 @@ type CheckboxPropsT = {
   disabled?: boolean;
   classProp?: string;
   labelClassProp?: string;
-  onChange: Function;
+  onChange: (value: boolean) => void;
 };
 
 const Checkbox = forwardRef(
-  ({ classProp, label, disabled, checked, onChange }: CheckboxPropsT, ref) => {
+  (
+    {
+      classProp,
+      label,
+      disabled,
+      checked,
+      labelClassProp,
+      onChange,
+    }: CheckboxPropsT,
+    ref
+  ) => {
     const inputRef = useRef<HTMLInputElement>(null);
 
-    /**
-     * Exposed Component API
-     */
-    useImperativeHandle(ref, () => {
-      return {};
-    });
-
     /**
      * Handle Input Change
      * @param event
@@ -49,9 +51,15 @@ const Checkbox = forwardRef(
         />
 
         {/* Styled Checkmark  */}
-        <div className={`${styles.checkmark} ${disabled && styles.checkmark_disabled}`} />
+        <div
+          className={`${styles.checkmark} ${
+            disabled && styles.checkmark_disabled
+          }`}
+        />
 
-        {label ? <div className={styles.label}>{label}</div> : null}
+        {label ? (
+          <div className={`${styles.label} ${labelClassProp}`}>{label}</div>
+        ) : null}
       </label>
     );
   }

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -848,6 +848,37 @@ const Icon = ({
         </>
       ) : null}
 
+      {name === 'x-circle' ? (
+        <>
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="15" y1="9" x2="9" y2="15"></line>
+          <line x1="9" y1="9" x2="15" y2="15"></line>
+        </>
+      ) : null}
+
+      {name === 'x-octagon' ? (
+        <>
+          <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
+          <line x1="15" y1="9" x2="9" y2="15"></line>
+          <line x1="9" y1="9" x2="15" y2="15"></line>
+        </>
+      ) : null}
+
+      {name === 'x-square' ? (
+        <>
+          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+          <line x1="9" y1="9" x2="15" y2="15"></line>
+          <line x1="15" y1="9" x2="9" y2="15"></line>
+        </>
+      ) : null}
+
+      {name === 'x' ? (
+        <>
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </>
+      ) : null}
+
       {/*  
 
         
@@ -1855,25 +1886,7 @@ const Icon = ({
         <symbol id="wind" viewBox="0 0 24 24">
           <path d="M9.59 4.59A2 2 0 1 1 11 8H2m10.59 11.41A2 2 0 1 0 14 16H2m15.73-8.27A2.5 2.5 0 1 1 19.5 12H2"></path>
         </symbol>
-        <symbol id="x-circle" viewBox="0 0 24 24">
-          <circle cx="12" cy="12" r="10"></circle>
-          <line x1="15" y1="9" x2="9" y2="15"></line>
-          <line x1="9" y1="9" x2="15" y2="15"></line>
-        </symbol>
-        <symbol id="x-octagon" viewBox="0 0 24 24">
-          <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon>
-          <line x1="15" y1="9" x2="9" y2="15"></line>
-          <line x1="9" y1="9" x2="15" y2="15"></line>
-        </symbol>
-        <symbol id="x-square" viewBox="0 0 24 24">
-          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
-          <line x1="9" y1="9" x2="15" y2="15"></line>
-          <line x1="15" y1="9" x2="9" y2="15"></line>
-        </symbol>
-        <symbol id="x" viewBox="0 0 24 24">
-          <line x1="18" y1="6" x2="6" y2="18"></line>
-          <line x1="6" y1="6" x2="18" y2="18"></line>
-        </symbol>
+        
         <symbol id="youtube" viewBox="0 0 24 24">
           <path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path>
           <polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon>

diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
@@ -25,6 +25,7 @@ const RadioButton = ({
   return (
     <div className={`${styles.button_wrapper} ${classProp}`}>
       <input
+        readOnly={true}
         id={id}
         type="radio"
         name={groupName}

diff --git a/src/stories/Checkbox.stories.tsx b/src/stories/Checkbox.stories.tsx
@@ -9,19 +9,20 @@ export default {
 
 const Template: ComponentStory<typeof Checkbox> = (args) => {
 
-  const [value, setValue] = useState(args.checked);
+  const [value, setValue] = useState(false);
   const onChange = (value: boolean) => {
     setValue(value);
   };
 
-  const [darkValue, setDarkValue] = useState(args.checked);
+  const [darkValue, setDarkValue] = useState(false);
   const onDarkChange = (value: boolean) => {
     setDarkValue(value);
   };
 
   useEffect(() => {
-    setValue(args.checked);
-    setDarkValue(args.checked);
+    const checked = args.checked ? args.checked : false;
+    setValue(checked);
+    setDarkValue(checked);
   }, [args.checked]);
 
   return (