@scality/core-ui 0.115.0

package/src/lib/components/button/Button.component.tsx

@@ -0,0 +1,312 @@
+// @ts-nocheck
+// Legacy Button should not be use anymore
+import { lighten } from 'polished';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight, white } from '../../style/theme';
+import { Size } from '../constants';
+import { Loader } from '../loader/Loader.component';
+type Props = {
+  text?: string;
+  size?: Size;
+
+  /* We need to make sure the variant exist in the color-palette
+  Otherwise we will encounter the error: Passed an incorrect argument to a color function, please pass a string representation of a color. */
+  variant?:
+    | 'buttonPrimary'
+    | 'buttonSecondary'
+    | 'buttonDelete'
+    | 'backgroundLevel1';
+  // this variant is for the button in navbar and sidebar
+  outlined?: boolean;
+  inverted?: boolean;
+  disabled?: boolean;
+  icon?: JSX.Element;
+  href?: string;
+  title?: string;
+  type?: string;
+  isLoading?: boolean;
+  onClick?: (arg0: any) => void;
+};
+export const ButtonStyled = styled.button`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  position: relative;
+  display: inline-flex;
+  user-select: none;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
+  border: none;
+  text-decoration: none;
+  font-weight: ${fontWeight.base};
+
+  &:hover,
+  &:focus,
+  &:active {
+    outline: none;
+    cursor: pointer;
+  }
+
+  ${(props) => {
+    switch (props.size) {
+      case 'smaller':
+        return css`
+          padding: 7px 14px;
+          font-size: ${fontSize.smaller};
+          border-radius: 4px;
+          height: 27px;
+        `;
+
+      case 'small':
+        return css`
+          padding: 8px 16px;
+          font-size: ${fontSize.small};
+          border-radius: 5px;
+          height: 30px;
+        `;
+
+      case 'large':
+        return css`
+          padding: 10px 20px;
+          font-size: ${fontSize.large};
+          border-radius: 7px;
+          height: 40px;
+        `;
+
+      case 'larger':
+        return css`
+          padding: 11px 22px;
+          font-size: ${fontSize.larger};
+          border-radius: 8px;
+          height: 48px;
+        `;
+
+      case 'base':
+      default:
+        return css`
+          padding: 12px 16px;
+          font-size: ${fontSize.base};
+          border-radius: 6px;
+          height: 32px;
+        `;
+    }
+  }}
+
+  ${(props) => {
+    if (props.isLoading) {
+      return css`
+        > span {
+          display: flex;
+          .sc-loader {
+            margin: 0px ${spacing.r4};
+            svg {
+              fill: ${props.theme.textPrimary} !important;
+            }
+          }
+        }
+      `;
+    }
+
+    if (props.outlined) {
+      return css`
+        border-width: 1px;
+        border-style: solid;
+        border-color: ${props.theme.buttonSecondary};
+        // to be checked
+        background-color: ${props.theme.backgroundLevel1};
+        color: ${props.theme.textPrimary};
+
+        &:hover {
+          border-color: ${props.theme.infoPrimary};
+          color: ${props.theme.textPrimary};
+        }
+      `;
+    } else if (props.variant === 'buttonPrimary') {
+      return css`
+        background-color: ${props.theme.buttonPrimary};
+        border: 1px solid ${props.theme.buttonPrimary};
+        color: ${props.theme.textPrimary};
+        &:hover {
+          background-color: ${props.theme.highlight};
+          outline: none;
+          border: 1px solid ${props.theme.infoPrimary};
+        }
+      `;
+    } else if (props.variant === 'buttonSecondary') {
+      return css`
+        background-color: ${props.theme.buttonSecondary};
+        border: 1px solid ${props.theme.buttonSecondary};
+        color: ${props.theme.textPrimary};
+        &:hover {
+          background-color: ${props.theme.infoPrimary};
+          border: 1px solid ${props.theme.infoPrimary};
+        }
+      `;
+    } else if (props.variant === 'buttonDelete') {
+      return css`
+        background-color: ${props.theme.buttonDelete};
+        border: 1px solid ${props.theme.buttonDelete};
+        color: ${props.theme.statusCritical};
+        &:hover {
+          background-color: ${props.theme.statusCritical};
+          border: 1px solid ${props.theme.infoPrimary};
+          color: ${props.theme.textPrimary};
+        }
+      `;
+    } else if (props.variant === 'backgroundLevel1') {
+      return css`
+        background-color: ${props.theme.backgroundLevel1};
+        color: ${props.theme.textPrimary};
+        &:hover {
+          background-color: ${props.theme.highlight};
+        }
+      `;
+    } else {
+      return css`
+        background-color: ${props.theme.backgroundLevel1};
+        border: 1px solid ${props.theme.backgroundLevel1};
+        color: ${props.theme.statusCritical};
+        &:hover {
+          background-color: ${props.theme.backgroundLevel1};
+          border: 1px solid ${props.theme.infoPrimary};
+          color: ${props.theme.textPrimary};
+        }
+      `;
+    }
+  }}
+
+${(props) => {
+    const brandLighter = lighten(0.2, props.theme[props.variant]).toString();
+    return css`
+      ${props.disabled
+        ? `
+          box-shadow: none;
+          pointer-events: none;
+          opacity: 0.3;
+          border-color: ${brandLighter};
+          color: ${white};
+        `
+        : null}
+    `;
+  }}
+
+${(props) => {
+    const brandLighter = lighten(0.2, props.theme[props.variant]).toString();
+    const brandLight = lighten(0.1, props.theme[props.variant]).toString();
+    return css`
+      ${!props.text && props.icon && props.inverted
+        ? `
+        padding: 0;
+        height: auto;
+        border: none;
+        background-color: transparent;
+        color: ${props.disabled ? brandLight : props.theme[props.variant]};
+
+        &:hover{
+          background-color: transparent;
+          color: ${brandLight};
+          border: none;
+        }
+
+        &:active {
+          background-color: transparent;
+          color: ${brandLighter};
+        }
+        `
+        : null}
+    `;
+  }}
+`;
+export const ButtonIcon = styled.span`
+  ${(props) =>
+    props.text &&
+    css`
+      padding-right: 8px;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    `}
+`;
+export const ButtonText = styled.span`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const ButtonContent = styled.span`
+  position: relative;
+`;
+const Anchor = ButtonStyled.withComponent('a');
+
+/**
+ * @deprecated
+ * You should use ButtonV2 with
+ * import { Button } from '@scality/core-ui/dist/next';
+ */
+function Button({
+  text = '',
+  href = '',
+  icon = null,
+  size = 'base',
+  variant = 'buttonPrimary',
+  outlined = false,
+  disabled = false,
+  onClick,
+  title = '',
+  isLoading = false,
+  type = 'button',
+  inverted = false,
+  ...rest
+}: Props) {
+  return href && href.length ? (
+    <Anchor
+      className="sc-button"
+      href={href}
+      variant={variant}
+      outlined={outlined}
+      disabled={disabled}
+      size={size}
+      title={title}
+      {...rest}
+    >
+      {icon && (
+        <ButtonIcon text={text} size={size}>
+          {icon}
+        </ButtonIcon>
+      )}
+      <ButtonText>{text}</ButtonText>
+    </Anchor>
+  ) : (
+    <ButtonStyled
+      className="sc-button"
+      variant={variant}
+      outlined={outlined}
+      disabled={disabled || isLoading}
+      size={size}
+      onClick={onClick}
+      title={title}
+      isLoading={isLoading}
+      type={type}
+      inverted={inverted}
+      icon={icon}
+      text={text}
+      {...rest}
+    >
+      <ButtonContent>
+        {isLoading && <Loader size={size} />}
+        <span className="sc-button-text">
+          {icon && (
+            <ButtonIcon text={text} size={size}>
+              {icon}
+            </ButtonIcon>
+          )}
+          <ButtonText>{text}</ButtonText>
+        </span>
+      </ButtonContent>
+    </ButtonStyled>
+  );
+}
+
+export { Button };

package/src/lib/components/buttonv2/Buttonv2.component.tsx

@@ -0,0 +1,270 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import styled, { css } from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight } from '../../style/theme';
+import { Loader } from '../loader/Loader.component';
+import { Tooltip, Props as TooltipProps } from '../tooltip/Tooltip.component';
+export type Props = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  'size' | 'label'
+> & {
+  variant?: 'primary' | 'secondary' | 'danger' | 'outline';
+  size?: 'default' | 'inline';
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  icon?: React.ReactNode;
+  label?: React.ReactNode;
+  tooltip?: Omit<TooltipProps, 'children'>;
+  isLoading?: boolean;
+};
+export const ButtonStyled = styled.button<Props>`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  user-select: none;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
+  border: none;
+  text-decoration: none;
+  font-family: 'Lato';
+  font-weight: ${fontWeight.base};
+
+  padding: ${spacing.r4} ${spacing.r8};
+  font-size: ${fontSize.base};
+  border-radius: ${spacing.r4};
+  height: ${(props) => (props.size === 'inline' ? spacing.r24 : spacing.r32)};
+  ${(props) => {
+    const brand = props.theme;
+
+    switch (props.variant) {
+      case 'primary':
+        return css`
+          background-color: ${brand.buttonPrimary};
+          border: ${spacing.r1} solid ${brand.buttonPrimary};
+          color: ${brand.textSecondary};
+          &:hover:enabled {
+            cursor: pointer;
+            border: ${spacing.r1} solid ${brand.infoPrimary};
+            color: ${brand.textPrimary};
+          }
+          // :focus-visible is the keyboard-only version of :focus
+          &:focus-visible:enabled {
+            outline: dashed ${spacing.r2} ${brand.selectedActive};
+            outline-offset: ${spacing.r2};
+            color: ${brand.textPrimary};
+          }
+          &:active:enabled {
+            cursor: pointer;
+            color: ${brand.textPrimary};
+            border: ${spacing.r1} solid ${brand.infoSecondary};
+          }
+        `;
+
+      case 'secondary':
+        return css`
+          background-color: ${brand.buttonSecondary};
+          border: ${spacing.r1} solid ${brand.buttonSecondary};
+          color: ${brand.textSecondary};
+          &:hover:enabled {
+            cursor: pointer;
+            border: ${spacing.r1} solid ${brand.infoPrimary};
+            color: ${brand.textPrimary};
+          }
+          &:focus-visible:enabled {
+            outline: dashed ${spacing.r2} ${brand.selectedActive};
+            outline-offset: ${spacing.r2};
+            color: ${brand.textPrimary};
+          }
+          &:active:enabled {
+            cursor: pointer;
+            color: ${brand.textPrimary};
+            border: ${spacing.r1} solid ${brand.buttonSecondary};
+          }
+        `;
+
+      case 'danger':
+        return css`
+          background-color: ${brand.buttonDelete};
+          border: ${spacing.r1} solid ${brand.buttonDelete};
+          color: ${brand.statusCritical};
+          &:hover:enabled {
+            cursor: pointer;
+            border: ${spacing.r1} solid ${brand.infoPrimary};
+          }
+          &:focus-visible:enabled {
+            outline: dashed ${spacing.r2} ${brand.selectedActive};
+            outline-offset: ${spacing.r2};
+          }
+          &:active:enabled {
+            cursor: pointer;
+            border: ${spacing.r1} solid ${brand.infoSecondary};
+          }
+        `;
+
+      case 'outline':
+        return css`
+          border: ${spacing.r1} solid ${brand.buttonSecondary};
+          background-color: transparent;
+          color: ${brand.textPrimary};
+          &:hover:enabled {
+            cursor: pointer;
+            border-color: ${brand.infoPrimary};
+            color: ${brand.textPrimary};
+          }
+          &:focus-visible:enabled {
+            outline: dashed ${spacing.r2} ${brand.selectedActive};
+            outline-offset: ${spacing.r2};
+            border-color: ${brand.buttonSecondary};
+          }
+          &:active:enabled {
+            cursor: pointer;
+            border: ${spacing.r1} solid ${brand.infoSecondary};
+            color: ${brand.textPrimary};
+          }
+        `;
+
+      default:
+    }
+  }}
+
+  ${(props) => {
+    return css`
+      ${props.disabled
+        ? `
+          cursor: not-allowed !important;
+          pointer-events: auto !important;
+          opacity: 0.5;
+        `
+        : null}
+    `;
+  }}
+
+
+  ${(props) => {
+    const brand = props.theme;
+    return css`
+      ${props.icon && !props.label && !props.variant
+        ? `
+          background-color: transparent;
+          border: none;
+          color: ${brand.textSecondary};
+
+        &:hover{
+          cursor: pointer;
+          border: none;
+          color: ${brand.textPrimary};
+        }
+        &:focus-visible:enabled {
+          outline: dashed ${spacing.r2} ${brand.selectedActive};
+        }
+        &:active {
+          cursor: pointer;
+          color: ${brand.textPrimary};
+        }
+        `
+        : null}
+    `;
+  }}
+`;
+export const ButtonLabel = styled.span`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const ButtonIcon = styled.span<{ label: React.ReactNode }>`
+  ${(props) =>
+    props.label &&
+    css`
+      padding-right: ${spacing.r8};
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+    `}
+`;
+
+export const ButtonLoader = styled(Loader)<{ label; variant }>`
+  ${(props) => {
+    return css`
+      margin-right: ${props.label ? spacing.r8 : '0'};
+      svg {
+        fill: ${props.variant === 'danger'
+          ? props.theme.statusCritical
+          : props.variant === 'outline'
+          ? props.theme.textPrimary
+          : props.theme.textSecondary};
+      }
+    `;
+  }}
+`;
+
+function Button({
+  variant,
+  size,
+  disabled,
+  label,
+  icon,
+  onClick,
+  tooltip,
+  isLoading,
+  ...rest
+}: Props) {
+  if (!icon && !label) {
+    console.warn(
+      'Please specify either icon or label prop for the button component.',
+    );
+  }
+
+  if (!label && icon && !tooltip) {
+    console.warn('Please specify the tooltip for the standalone icon button.');
+  }
+
+  return (
+    <Tooltip
+      placement={tooltip ? tooltip.placement : undefined}
+      overlay={tooltip && tooltip.overlay}
+      overlayStyle={tooltip && tooltip.overlayStyle}
+    >
+      <ButtonStyled
+        className="sc-button"
+        variant={variant}
+        disabled={isLoading || disabled}
+        label={label}
+        icon={icon}
+        onClick={onClick}
+        size={size}
+        {...rest}
+      >
+        <>
+          {icon &&
+            (isLoading ? (
+              <ButtonLoader size="small" variant={variant} label={label} />
+            ) : (
+              <ButtonIcon
+                label={label}
+                aria-label={
+                  tooltip &&
+                  tooltip.overlay &&
+                  typeof tooltip.overlay === 'string'
+                    ? tooltip.overlay
+                    : undefined
+                }
+              >
+                {icon}
+              </ButtonIcon>
+            ))}
+          {!icon && isLoading && (
+            <ButtonLoader size="small" variant={variant} label={label} />
+          )}
+          <ButtonLabel>{label}</ButtonLabel>
+        </>
+      </ButtonStyled>
+    </Tooltip>
+  );
+}
+
+export { Button };

package/src/lib/components/buttonv2/CopyButton.component.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react';
+import { Icon } from '../icon/Icon.component';
+import { Button, Props } from './Buttonv2.component';
+
+export const COPY_STATE_IDLE = 'idle';
+export const COPY_STATE_SUCCESS = 'success';
+export const COPY_STATE_UNSUPPORTED = 'unsupported';
+export const useClipboard = () => {
+  const [copyStatus, setCopyStatus] = useState(COPY_STATE_IDLE);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setCopyStatus(COPY_STATE_IDLE);
+    }, 2000);
+    return () => clearTimeout(timer);
+  }, [copyStatus]);
+
+  const copyToClipboard = (text) => {
+    if (!navigator || !navigator.clipboard) {
+      setCopyStatus(COPY_STATE_UNSUPPORTED);
+      return;
+    }
+
+    navigator.clipboard.writeText(text);
+    setCopyStatus(COPY_STATE_SUCCESS);
+  };
+
+  return {
+    copy: copyToClipboard,
+    copyStatus: copyStatus,
+  };
+};
+
+export const CopyButton = ({
+  label,
+  textToCopy,
+  variant,
+  ...props
+}: {
+  label?: string;
+  textToCopy: string;
+  variant?: 'outline' | 'ghost';
+} & Props) => {
+  const { copy, copyStatus } = useClipboard();
+  return (
+    <Button
+      {...props}
+      variant={variant === 'outline' ? 'outline' : undefined}
+      style={{
+        minWidth:
+          //Just to make sure the width of the button stays the same when copied!
+          variant === 'outline'
+            ? (label ? label.length / 2 : 0) + 7 + 'rem'
+            : undefined,
+      }}
+      label={
+        variant === 'outline'
+          ? copyStatus === COPY_STATE_SUCCESS
+            ? `Copied${label ? ' ' + label + '' : ''}!`
+            : `Copy${label ? ' ' + label : ''}`
+          : undefined
+      }
+      icon={
+        <Icon
+          name={copyStatus === COPY_STATE_SUCCESS ? 'Check' : 'Copy'}
+          color={
+            copyStatus === COPY_STATE_SUCCESS ? 'statusHealthy' : undefined
+          }
+        />
+      }
+      disabled={copyStatus === COPY_STATE_SUCCESS || props.disabled}
+      onClick={() => copy(textToCopy)}
+      type="button"
+      tooltip={
+        variant !== 'outline'
+          ? {
+              overlay:
+                copyStatus === COPY_STATE_SUCCESS
+                  ? 'Copied !'
+                  : `Copy${label ? ' ' + label : ''}`,
+              overlayStyle: {
+                maxWidth: '20rem',
+              },
+              placement: 'top',
+            }
+          : undefined
+      }
+    />
+  );
+};