fix(shared-ui-feat-layout): Updated style of footer component

Updated style of footer component Added optional glow property to
sullivanpj · Dec 17, 2022 · c371cbe · c371cbe
1 parent 4ee4b6a
commit c371cbe
Show file tree

Hide file tree

Showing 14 changed files with 178 additions and 111 deletions.
diff --git a/apps/web/shell/project.json b/apps/web/shell/project.json
@@ -19,12 +19,6 @@
         "production": {}
       }
     },
-    "dev": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "cd apps/web/shell && npx next dev"
-      }
-    },
     "serve": {
       "executor": "@nrwl/next:server",
       "defaultConfiguration": "development",

diff --git a/assets/box-logo-purple.svg b/assets/box-logo-purple.svg
diff --git a/design-system/components/src/checkbox/Checkbox.tsx b/design-system/components/src/checkbox/Checkbox.tsx
@@ -33,6 +33,7 @@ export const Checkbox = forwardRef<FieldReference<boolean>, CheckboxProps>(
       disabled = false,
       required = false,
       noBorder = false,
+      glow = true,
       label,
       tabIndex,
       autoFocus = false,
@@ -113,7 +114,7 @@ export const Checkbox = forwardRef<FieldReference<boolean>, CheckboxProps>(
             getStrokeStyle(error, warning, info, focused, disabled),
             getInputFillColor(disabled),
             {
-              "focus:shadow-active-glow": focused,
+              "focus:shadow-active-glow": focused && glow,
             },
             "max-w-6 flex h-6 w-6 rounded-md font-label-1 leading-label-1 transition-colors focus:ring-0 focus:ring-offset-0",
             disabled
@@ -122,7 +123,7 @@ export const Checkbox = forwardRef<FieldReference<boolean>, CheckboxProps>(
             { "border-3": disabled },
             {
               "border-1 shadow-sm transition-shadow duration-300 ease-in-out hover:shadow-active-glow":
-                !disabled,
+                !disabled && glow,
             }
           )}
           type="checkbox"

diff --git a/design-system/components/src/field-wrapper/field-wrapper-label/FieldWrapperLabel.tsx b/design-system/components/src/field-wrapper/field-wrapper-label/FieldWrapperLabel.tsx
@@ -36,7 +36,9 @@ export const FieldWrapperLabel = ({
         {label}
       </label>
       {required && (
-        <label className="font-extrabold text-red-500" htmlFor={name}>
+        <label
+          className="font-extrabold leading-none text-red-500"
+          htmlFor={name}>
           *
         </label>
       )}

diff --git a/design-system/components/src/input/Input.tsx b/design-system/components/src/input/Input.tsx
@@ -108,6 +108,7 @@ export const Input = forwardRef<FieldReference<string>, InputProps>(
       disabled = false,
       required = false,
       noBorder = false,
+      glow = true,
       label,
       placeholder,
       min,
@@ -198,15 +199,17 @@ export const Input = forwardRef<FieldReference<string>, InputProps>(
             getStrokeStyle(error, warning, info, focused, disabled),
             getInputFillColor(disabled),
             {
-              "ring-1 ring-active ring-offset-0 focus:shadow-active-glow":
-                focused,
+              "ring-1 ring-active ring-offset-0": focused,
+            },
+            {
+              "focus:shadow-active-glow": focused && glow,
             },
             "w-full rounded-xl font-label-1 leading-label-1 transition-colors focus:ring-0 focus:ring-active focus:ring-offset-0",
             getInputTextStyle(error, warning, info, focused, disabled, value),
             { "border-3": disabled },
             {
               "border-1 shadow-sm transition-shadow duration-300 ease-in-out hover:shadow-active-glow":
-                !disabled,
+                !disabled && glow,
             },
             className
           )}

diff --git a/design-system/components/src/select/Select.tsx b/design-system/components/src/select/Select.tsx
@@ -46,6 +46,7 @@ export const Select = forwardRef<FieldReference<string>, SelectProps>(
       disabled = false,
       required = false,
       noBorder = false,
+      glow = true,
       label,
       placeholder,
       tabIndex,
@@ -124,15 +125,17 @@ export const Select = forwardRef<FieldReference<string>, SelectProps>(
             getStrokeStyle(error, warning, info, focused, disabled),
             getInputFillColor(disabled),
             {
-              "ring-active focus:shadow-active-glow ring-1 ring-offset-0":
-                focused,
+              "ring-1 ring-active ring-offset-0": focused,
             },
-            "font-label-1 leading-label-1 focus:ring-active disabled:bg-disabled-fill flex w-full cursor-pointer rounded-xl transition-colors focus:ring-0 focus:ring-offset-0",
+            {
+              "focus:shadow-active-glow": focused && glow,
+            },
+            "flex w-full cursor-pointer rounded-xl font-label-1 leading-label-1 transition-colors focus:ring-0 focus:ring-active focus:ring-offset-0 disabled:bg-disabled-fill",
             getInputTextStyle(error, warning, info, focused, disabled, value),
             { "border-3": disabled },
             {
-              "border-1 hover:shadow-active-glow shadow-sm transition-shadow duration-300 ease-in-out":
-                !disabled,
+              "border-1 shadow-sm transition-shadow duration-300 ease-in-out hover:shadow-active-glow":
+                !disabled && glow,
             }
           )}
           value={value ?? undefined}

diff --git a/design-system/components/src/textarea/Textarea.tsx b/design-system/components/src/textarea/Textarea.tsx
@@ -37,6 +37,7 @@ export const Textarea = forwardRef<FieldReference<string>, TextareaProps>(
       disabled = false,
       required = false,
       noBorder = false,
+      glow = true,
       label,
       placeholder,
       minLength,
@@ -121,15 +122,17 @@ export const Textarea = forwardRef<FieldReference<string>, TextareaProps>(
             getStrokeStyle(error, warning, info, focused, disabled),
             getInputFillColor(disabled),
             {
-              "ring-1 ring-active ring-offset-0 focus:shadow-active-glow":
-                focused,
+              "ring-1 ring-active ring-offset-0": focused,
+            },
+            {
+              "focus:shadow-active-glow": focused && glow,
             },
             "flex w-full resize-none rounded-xl font-label-1 leading-label-1 transition-colors focus:ring-0 focus:ring-active focus:ring-offset-0",
             getInputTextStyle(error, warning, info, focused, disabled, value),
             { "border-3": disabled },
             {
               "border-1 shadow-sm transition-shadow duration-300 ease-in-out hover:shadow-active-glow":
-                !disabled,
+                !disabled && glow,
             },
             className
           )}

diff --git a/design-system/components/src/types.ts b/design-system/components/src/types.ts
@@ -63,6 +63,11 @@ export type BaseFieldProps = PropsWithBaseRef<{
    */
   noBorder?: boolean;
 
+  /**
+   * Should the input glow when focused
+   */
+  glow?: boolean;
+
   /**
    * Global attribute valid for all elements, including all the input types, an integer
    * attribute indicating if the element can take input focus (is focusable),

diff --git a/design-system/tokens/src/open-system/design-tokens.json b/design-system/tokens/src/open-system/design-tokens.json
@@ -777,7 +777,7 @@
     "hover-link-3": {
       "description": "",
       "type": "color",
-      "value": "#503083ff",
+      "value": "#b59bdeff",
       "blendMode": "normal",
       "extensions": {
         "org.lukasoppermann.figmaDesignTokens": {
@@ -786,6 +786,18 @@
         }
       }
     },
+    "high-visibility": {
+      "description": "",
+      "type": "color",
+      "value": "#1ef04cff",
+      "blendMode": "normal",
+      "extensions": {
+        "org.lukasoppermann.figmaDesignTokens": {
+          "styleId": "S:831c761a14d7b5dd6e2ccee5df73daa35cefd82c,",
+          "exportKey": "color"
+        }
+      }
+    },
     "header colors": {
       "header-primary": {
         "description": "",

diff --git a/design-system/tokens/src/open-system/open-system.fig b/design-system/tokens/src/open-system/open-system.fig
diff --git a/libs/shared/ui/components/src/link/Link.tsx b/libs/shared/ui/components/src/link/Link.tsx
@@ -1,8 +1,10 @@
 import {
   Link as DesignComponentLink,
   LinkProps as DesignComponentLinkProps,
+  LinkVariants,
   PropsWithBase,
 } from "@open-system/design-system-components";
+import clsx from "clsx";
 import NextLink, { LinkProps as NextLinkProps } from "next/link";
 
 import { HTMLAttributeAnchorTarget } from "react";
@@ -11,18 +13,43 @@ export type LinkProps = PropsWithBase<
   Omit<NextLinkProps, "href"> &
     Partial<Pick<NextLinkProps, "href">> & {
       target?: HTMLAttributeAnchorTarget;
-    } & Pick<DesignComponentLinkProps, "variant">
+    } & DesignComponentLinkProps
 >;
 
 /**
  * A component to facilitate application navigation. This is essentially a wrapper
  * around the NextJS Link component.
  */
-export function Link({ children, href = "/", ...props }: LinkProps) {
+export function Link({
+  children,
+  className,
+  variant,
+  href = "/",
+  ...props
+}: LinkProps) {
   return (
-    <NextLink href={href} {...props}>
+    <NextLink href={href} className={className} {...props}>
       {typeof children === "string" ? (
-        <DesignComponentLink {...props}>{children}</DesignComponentLink>
+        <DesignComponentLink
+          {...props}
+          variant={variant}
+          className={clsx(
+            {
+              "text-link-1 hover:text-hover-link-1":
+                variant === LinkVariants.PRIMARY,
+            },
+            {
+              "text-link-2 hover:text-hover-link-2":
+                variant === LinkVariants.SECONDARY,
+            },
+            {
+              "text-link-3 hover:text-hover-link-3":
+                variant === LinkVariants.TERTIARY,
+            },
+            className
+          )}>
+          {children}
+        </DesignComponentLink>
       ) : (
         children
       )}