Bootstrap files and folders cleanup (#27692)

* Remove icons folder * Create folders for badge, button, and dropdown components * Remove Bootstrap 5 from test * Rename `getBootstrap5Breakpoint` to `getBootstrapBreakpoint` * Cleanup and update BS 5 comments * Move components to the shared folder * Rename `tooltips-bs5` to `tooltip` * Remove `-bs5` suffix * Fix path * Delete BS3 version file * Rename `_form_marketing-bootstrap-5` to `_form_marketing` * Delete BS3 version file * Rename `_contact_general_modal-marketing-bootstrap-5` to `_contact_general_modal-marketing` * Delete BS3 version file * Rename `_contact_modal-marketing-bootstrap-5` to `_contact_modal-marketing` * Delete BS3 version file * Rename `thin-footer-bootstrap-5` to `thin-footer` * Delete BS3 version file * Rename `language-picker-bootstrap-5` to `language-picker` * Rename `fat-footer-react-bootstrap-5` to `fat-footer-react` * Delete BS3 version file * Rename `navbar-marketing-bootstrap-5` to `navbar-marketing` * Rename `navbar-marketing-react-bootstrap-5` to `navbar-marketing-react` * Delete BS3 version file * Rename `layout-website-redesign-cms-bootstrap-5` to `layout-website-redesign-cms` * Source format * Fix path GitOrigin-RevId: cf0f5db7c84cf545c69213dcc271d9ff17fe5db7
2026-11-14 22:23:42 +01:00 · 2025-08-11 08:06:16 +00:00
parent bd8493dba6
commit d751b88e6b
516 changed files with 1507 additions and 1311 deletions
@@ -0,0 +1,82 @@
+import { forwardRef } from 'react'
+import { Button as BS5Button, Spinner } from 'react-bootstrap'
+import type { ButtonProps } from '@/shared/components/types/button-props'
+import classNames from 'classnames'
+import { useTranslation } from 'react-i18next'
+import MaterialIcon from '@/shared/components/material-icon'
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      children,
+      className,
+      leadingIcon,
+      isLoading = false,
+      loadingLabel,
+      trailingIcon,
+      variant = 'primary',
+      ...props
+    },
+    ref
+  ) => {
+    const { t } = useTranslation()
+
+    const buttonClassName = classNames('d-inline-grid', className, {
+      'button-loading': isLoading,
+    })
+
+    const loadingSpinnerClassName =
+      props.size === 'lg' ? 'loading-spinner-large' : 'loading-spinner-small'
+    const materialIconClassName =
+      props.size === 'lg' ? 'icon-large' : 'icon-small'
+
+    const leadingIconComponent =
+      leadingIcon && typeof leadingIcon === 'string' ? (
+        <MaterialIcon type={leadingIcon} className={materialIconClassName} />
+      ) : (
+        leadingIcon
+      )
+
+    const trailingIconComponent =
+      trailingIcon && typeof trailingIcon === 'string' ? (
+        <MaterialIcon type={trailingIcon} className={materialIconClassName} />
+      ) : (
+        trailingIcon
+      )
+
+    return (
+      <BS5Button
+        className={buttonClassName}
+        variant={variant}
+        {...props}
+        ref={ref}
+        disabled={isLoading || props.disabled}
+        data-ol-loading={isLoading}
+        role={undefined}
+      >
+        {isLoading && (
+          <span className="spinner-container">
+            <Spinner
+              animation="border"
+              aria-hidden="true"
+              as="span"
+              className={loadingSpinnerClassName}
+              role="status"
+            />
+            <span className="visually-hidden">
+              {loadingLabel ?? t('loading')}
+            </span>
+          </span>
+        )}
+        <span className="button-content" aria-hidden={isLoading}>
+          {leadingIconComponent}
+          {children}
+          {trailingIconComponent}
+        </span>
+      </BS5Button>
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export default Button
@@ -0,0 +1,46 @@
+import { forwardRef } from 'react'
+import classNames from 'classnames'
+import MaterialIcon from '@/shared/components/material-icon'
+import Button from './button'
+import type { IconButtonProps } from '@/shared/components/types/icon-button-props'
+
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      accessibilityLabel,
+      icon,
+      isLoading = false,
+      size,
+      className,
+      unfilled,
+      ...props
+    },
+    ref
+  ) => {
+    const iconButtonClassName = classNames(className, {
+      'icon-button': !size,
+      'icon-button-small': size === 'sm',
+      'icon-button-large': size === 'lg',
+    })
+    const iconSizeClassName = size === 'lg' ? 'icon-large' : 'icon-small'
+    const materialIconClassName = classNames(iconSizeClassName, {
+      'button-content-hidden': isLoading,
+      unfilled,
+    })
+
+    return (
+      <Button
+        className={iconButtonClassName}
+        isLoading={isLoading}
+        aria-label={accessibilityLabel}
+        {...props}
+        ref={ref}
+      >
+        <MaterialIcon className={materialIconClassName} type={icon} />
+      </Button>
+    )
+  }
+)
+IconButton.displayName = 'IconButton'
+
+export default IconButton