🎨 Remove css nesting and introduce native dialog element #2469 (#2494)

* 🎨 native dialog * 🎨 fix css * 🎨 update * 🎨 use tw utility * 🎨 use button and variant * 🎨 finetunig * 💫 Minor changes to reflect exit animation #2469 * 🐛 more padding on mobile to not overlap button and text * 🎨 rename to root variables --------- Co-authored-by: Padmaja <[email protected]>
equinor · Sep 11, 2024 · 57eab31 · 57eab31
1 parent 9f71f64
commit 57eab31
Show file tree

Hide file tree

Showing 11 changed files with 631 additions and 5,492 deletions.
diff --git a/sanityv3/schemas/textSnippets.ts b/sanityv3/schemas/textSnippets.ts
@@ -739,6 +739,11 @@ const snippets: textSnippet = {
     defaultValue: 'Back to content',
     group: groups.others,
   },
+  close: {
+    title: 'Close',
+    defaultValue: 'Close',
+    group: groups.others,
+  },
 }
 
 type textSnippetGroup = { title: string; hidden?: boolean }

diff --git a/search/pnpm-lock.yaml b/search/pnpm-lock.yaml
diff --git a/web/core/Button/Button.tsx b/web/core/Button/Button.tsx
@@ -0,0 +1,125 @@
+import { IconType } from '@equinor/eds-core-react/dist/types/components/Icon/Icon.types'
+import { ButtonHTMLAttributes, forwardRef } from 'react'
+import envisTwMerge from '../../twMerge'
+
+export const commonButtonStyling = `
+w-fit
+text-sm
+px-4
+py-3
+rounded-md
+focus:outline-none
+focus-visible:envis-outline
+dark:focus:outline-none
+dark:focus-visible:envis-outline-invert
+active:scale-99
+flex
+items-center
+gap-3
+`
+
+export type Variants = 'contained' | 'outlined' | 'ghost' | 'contained-secondary' | 'outlined-secondary'
+
+/** Use for common button styling in Button,IconButton, Link/ButtonLink */
+export const getVariant = (variant: Variants): string => {
+  switch (variant) {
+    case 'ghost':
+      return `
+      hover:bg-moss-green-60
+      focus:outline-none
+      focus-visible:envis-outline
+      active:scale-99
+      dark:text-white-100
+      dark:hover:bg-white-transparent
+      dark:focus-visible:envis-outline-invert
+      `
+    case 'outlined':
+      return `
+      border
+      border-north-sea-100
+      text-norwegian-woods-100
+      hover:bg-moss-green-60
+      hover:text-moss-green-100
+      focus:outline-none
+      focus-visible:outline-slate-blue-95
+      dark:text-white-100
+      dark:border-white-100
+      dark:hover:bg-white-transparent
+      dark:focus-visible:outline-white-100
+      `
+    case 'outlined-secondary':
+      return `
+      px-3
+      py-2
+      lg:px-5
+      lg:py-3
+      border
+      border-north-sea-100
+      text-black-80 
+      hover:bg-slate-blue-100
+      hover:text-white-100
+      focus:outline-none
+      focus-visible:outline-slate-blue-95
+      dark:text-white-100
+      dark:border-white-100
+      dark:hover:bg-white-transparent
+      dark:focus-visible:outline-white-100
+      `
+    case 'contained-secondary':
+      return `
+      px-3
+      py-2
+      lg:px-5
+      lg:py-3
+      bg-slate-blue-95
+      text-white-100 
+      hover:bg-slate-blue-100
+      hover:text-white-100
+      focus:outline-none
+      focus-visible:outline-slate-blue-95
+    `
+    case 'contained':
+    default:
+      return `bg-norwegian-woods-100 
+      text-white-100 
+      hover:bg-moss-green-100
+      focus:outline-none
+      focus-visible:outline-norwegian-woods-100
+      dark:bg-white-100
+      dark:hover:bg-norwegian-woods-40
+      dark:text-slate-80
+      dark:focus-visible:outline-white-100
+      `
+  }
+}
+
+export type ButtonProps = {
+  /** Specifies which variant to use */
+  variant?: Variants
+  /** Type of button
+   * @default 'button'
+   */
+  type?: string
+  /** Should make our own Icon component ? */
+  icon?: IconType
+} & ButtonHTMLAttributes<HTMLButtonElement>
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = 'contained', type = 'button', children, icon: Icon, className = '', ...rest }, ref) => {
+    const variantClassNames = getVariant(variant)
+
+    const buttonClassNames = envisTwMerge(
+      commonButtonStyling,
+      variantClassNames,
+      `${Icon ? 'flex gap-2' : ''}`,
+      className,
+    )
+
+    return (
+      <button ref={ref} type={type} className={buttonClassNames} {...rest}>
+        {Icon && <Icon />}
+        {children}
+      </button>
+    )
+  },
+)
diff --git a/web/core/Button/LinkButton.tsx b/web/core/Button/LinkButton.tsx
@@ -0,0 +1,35 @@
+import { ButtonHTMLAttributes, forwardRef } from 'react'
+import envisTwMerge from '../../twMerge'
+import { IconData } from '@equinor/eds-icons'
+import { TransformableIcon } from '../../icons/TransformableIcon'
+
+export type LinkButtonProps = {
+  iconData?: IconData
+  iconClassName?: string
+} & ButtonHTMLAttributes<HTMLButtonElement>
+
+export const LinkButton = forwardRef<HTMLButtonElement, LinkButtonProps>(
+  ({ children, iconData, className = '', iconClassName = '', ...rest }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        className={envisTwMerge(
+          `flex 
+          gap-1
+          text-xs
+          underline
+          hover:no-underline
+          focus:outline-none
+          focus-visible:envis-outline
+          active:scale-99`,
+          className,
+        )}
+        {...rest}
+      >
+        {iconData && <TransformableIcon iconData={iconData} className={iconClassName} />}
+        {children}
+      </button>
+    )
+  },
+)
diff --git a/web/core/Button/index.tsx b/web/core/Button/index.tsx
@@ -1,118 +1,2 @@
-import { IconType } from '@equinor/eds-core-react/dist/types/components/Icon/Icon.types'
-import { ButtonHTMLAttributes, forwardRef } from 'react'
-import envisTwMerge from '../../twMerge'
-
-export const commonButtonStyling = `
-w-fit
-text-sm
-px-3
-py-2
-lg:px-5
-lg:py-3
-rounded-md
-focus:outline-none
-focus-visible:envis-outline
-dark:focus:outline-none
-dark:focus-visible:envis-outline-invert
-active:scale-99
-flex
-items-center
-gap-3
-`
-
-export type Variants = 'contained' | 'outlined' | 'ghost' | 'contained-secondary' | 'outlined-secondary'
-
-/** Use for common button styling in Button,IconButton, Link/ButtonLink */
-export const getVariant = (variant: Variants): string => {
-  switch (variant) {
-    case 'ghost':
-      return `
-      hover:bg-moss-green-60
-      focus:outline-none
-      focus-visible:envis-outline
-      active:scale-99
-      dark:text-white-100
-      dark:hover:bg-white-transparent
-      dark:focus-visible:envis-outline-invert
-      `
-    case 'outlined':
-      return `
-      border
-      border-north-sea-100
-      text-norwegian-woods-100
-      hover:bg-moss-green-60
-      hover:text-moss-green-100
-      focus:outline-none
-      focus-visible:outline-slate-blue-95
-      dark:text-white-100
-      dark:border-white-100
-      dark:hover:bg-white-transparent
-      dark:focus-visible:outline-white-100
-      `
-    case 'outlined-secondary':
-      return `
-      border
-      border-north-sea-100
-      text-black-80 
-      hover:bg-slate-blue-100
-      hover:text-white-100
-      focus:outline-none
-      focus-visible:outline-slate-blue-95
-      dark:text-white-100
-      dark:border-white-100
-      dark:hover:bg-white-transparent
-      dark:focus-visible:outline-white-100
-      `
-    case 'contained-secondary':
-      return `bg-slate-blue-95 
-      text-white-100 
-      hover:bg-slate-blue-100
-      hover:text-white-100
-      focus:outline-none
-      focus-visible:outline-slate-blue-95
-    `
-    case 'contained':
-    default:
-      return `bg-norwegian-woods-100 
-      text-white-100 
-      hover:bg-moss-green-100
-      focus:outline-none
-      focus-visible:outline-norwegian-woods-100
-      dark:bg-white-100
-      dark:hover:bg-norwegian-woods-40
-      dark:text-slate-80
-      dark:focus-visible:outline-white-100
-      `
-  }
-}
-
-export type ButtonProps = {
-  /** Specifies which variant to use */
-  variant?: Variants
-  /** Type of button
-   * @default 'button'
-   */
-  type?: string
-  /** Should make our own Icon component ? */
-  icon?: IconType
-} & ButtonHTMLAttributes<HTMLButtonElement>
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = 'contained', type = 'button', children, icon: Icon, className = '', ...rest }, ref) => {
-    const variantClassNames = getVariant(variant)
-
-    const buttonClassNames = envisTwMerge(
-      commonButtonStyling,
-      variantClassNames,
-      `${Icon ? 'flex gap-2' : ''}`,
-      className,
-    )
-
-    return (
-      <button ref={ref} type={type} className={buttonClassNames} {...rest}>
-        {Icon && <Icon />}
-        {children}
-      </button>
-    )
-  },
-)
+export { Button, commonButtonStyling, getVariant, type ButtonProps } from './Button'
+export { LinkButton, type LinkButtonProps } from './LinkButton'
diff --git a/web/package.json b/web/package.json
@@ -41,7 +41,6 @@
     "@sanity/webhook": "^2.0.0",
     "@types/easy-soap-request": "^5.6.0",
     "@types/uuid": "^8.3.4",
-    "@types/react-transition-group": "^4.4.10",
     "@types/xml2js": "^0.4.11",
     "algoliasearch": "^4.16.0",
     "date-fns": "^2.29.3",
@@ -81,8 +80,7 @@
     "swr": "^1.3.0",
     "tailwind-merge": "^2.2.1",
     "uuid": "^9.0.0",
-    "xml2js": "^0.6.0",
-    "react-transition-group": "^4.4.5"
+    "xml2js": "^0.6.0"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.16.0",

diff --git a/web/pageComponents/shared/TranscriptAndActions.tsx b/web/pageComponents/shared/TranscriptAndActions.tsx
@@ -3,15 +3,14 @@ import { getUrlFromAction } from '../../common/helpers'
 import { useState } from 'react'
 import { PortableTextBlock } from '@portabletext/types'
 import { ButtonLink } from '@core/Link'
-import { commonButtonStyling, getVariant } from '@core/Button'
+import { Button, getVariant } from '@core/Button'
 import { getLocaleFromName } from '../../lib/localization'
 import Modal from '@sections/Modal/Modal'
 import RichText from './portableText/RichText'
 import { add_circle_filled } from '@equinor/eds-icons'
 import { twMerge } from 'tailwind-merge'
 import { TransformableIcon } from '../../icons/TransformableIcon'
 import { useIntl } from 'react-intl'
-import { title } from 'process'
 
 type TranscriptAndActionsProps = {
   className?: string
@@ -46,14 +45,16 @@ const TranscriptAndActions = ({ action, transcript, className, ariaTitle }: Tran
 
       {transcript && (
         <>
-          <button
+          <Button
+            variant="contained-secondary"
             onClick={handleOpen}
+            aria-haspopup="dialog"
             aria-label={`${readTranscript} ${ariaTitle}`}
-            className={`w-full mb-8 ${commonButtonStyling} ${getVariant('contained-secondary')}`}
+            className={`w-full mb-8`}
           >
             <span className="grow">{readTranscript}</span>
-            <TransformableIcon className={'scale-90 lg:scale-100'} iconData={add_circle_filled} />
-          </button>
+            <TransformableIcon iconData={add_circle_filled} />
+          </Button>
           <Modal isOpen={isOpen} onClose={handleClose} title={ariaTitle}>
             <RichText value={transcript} />
           </Modal>