DS button CSS and component implementation plus move most --ciam variables to --ds

GitOrigin-RevId: 5dd6b490a6f597892b47a89aabce748cea3e3bc6
2025-11-14 09:05:34 +00:00
parent ccf1fb8fcb
commit c0c3bfe185
18 changed files with 508 additions and 270 deletions
@@ -0,0 +1,60 @@
+import { forwardRef, ReactNode } from 'react'
+import { Button, ButtonProps } from 'react-bootstrap'
+
+type DSButtonProps = Pick<
+  ButtonProps,
+  | 'children'
+  | 'disabled'
+  | 'href'
+  | 'id'
+  | 'target'
+  | 'rel'
+  | 'onClick'
+  | 'onMouseDown'
+  | 'onMouseOver'
+  | 'onMouseOut'
+  | 'onFocus'
+  | 'onBlur'
+  | 'size'
+  | 'active'
+  | 'type'
+> & {
+  leadingIcon?: ReactNode
+  trailingIcon?: ReactNode
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger'
+}
+
+const DSButton = forwardRef<HTMLButtonElement, DSButtonProps>(
+  (
+    {
+      children,
+      leadingIcon,
+      trailingIcon,
+      variant = 'primary',
+      size,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <Button
+        className="d-inline-grid btn-ds"
+        variant={variant}
+        size={size}
+        {...props}
+        ref={ref}
+        role={undefined}
+      >
+        <span className="button-content">
+          {leadingIcon}
+          {children}
+          {trailingIcon}
+        </span>
+      </Button>
+    )
+  }
+)
+
+DSButton.displayName = 'DSButton'
+
+export default DSButton