@scality/core-ui 0.115.0

package/src/lib/components/card/Card.component.tsx

@@ -0,0 +1,196 @@
+// @ts-nocheck
+import { HTMLProps } from 'react';
+import { createContext } from 'react';
+import styled from 'styled-components';
+import { hex2RGB } from '../../utils';
+const CardContext = createContext(null);
+type CardElementProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+function withCompoundCheck(Component) {
+  return ({ children, className, ...rest }: CardElementProps) => (
+    <CardContext.Consumer>
+      {(value) => {
+        const componentName = Component.displayName;
+
+        if (!value) {
+          throw new Error(
+            `${
+              componentName ? componentName : 'This component'
+            } cannot be rendered outside the Card component`,
+          );
+        }
+
+        return (
+          <Component
+            className={[
+              componentName ? `sc-${componentName.toLowerCase()}` : null,
+              className,
+            ].join(' ')}
+            {...rest}
+          >
+            {children}
+          </Component>
+        );
+      }}
+    </CardContext.Consumer>
+  );
+}
+
+const StyledCardHeader = styled.div`
+  padding: 0.7rem;
+  border-radius: 3px;
+  font-weight: bold;
+`;
+StyledCardHeader.displayName = 'CardHeader';
+const StyledCardBody = styled.div`
+  padding: 0.7rem 0;
+  color: ${(props) => props.theme.textPrimary};
+`;
+StyledCardBody.displayName = 'CardBody';
+const StyledCardBodyContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+`;
+StyledCardBodyContainer.displayName = 'CardBodyContainer';
+export const CardHeader = withCompoundCheck(StyledCardHeader);
+export const CardBody = withCompoundCheck(StyledCardBody);
+export const CardBodyContainer = withCompoundCheck(StyledCardBodyContainer);
+
+const StyledCard = styled.div<{
+  width: string;
+  height: string;
+  headerBackgroundColor: string;
+  bodyBackgroundColor: string;
+  colorStatus?: string;
+  activeBorderColor: string;
+  disabled: boolean;
+}>`
+  border-radius: 3px;
+  display: flex;
+  flex-flow: column;
+  width: ${(props) => props.width};
+  height: ${(props) => props.height};
+  background: ${(props) =>
+    props.theme[props.bodyBackgroundColor || 'backgroundLevel3']};
+
+  ${StyledCardBody} {
+    opacity: ${(props) => (props.disabled ? '0.2' : '1')};
+  }
+
+  ${StyledCardHeader} {
+    border-radius: 2px;
+    color: ${(props) => props.theme.textPrimary};
+    ${(props) => {
+      const hexColor = hex2RGB(
+        props.theme[
+          props.colorStatus || props.headerBackgroundColor || 'backgroundLevel4'
+        ],
+      ).join(',');
+      let opacity = 1;
+      if (props.colorStatus && props.colorStatus !== 'backgroundLevel4')
+        opacity = 0.4;
+      return `background: rgba(${hexColor}, ${opacity});`;
+    }}
+    ${(props) => props.disabled && 'opacity: 0.3;'}
+  }
+
+  ${(props) =>
+    props.onClick && !props.disabled
+      ? `
+      cursor: pointer;
+
+      &:hover {
+        box-shadow: 0 0 0 2px ${props.theme.highlight};
+      }
+
+      &:focus {
+        outline: 2px solid ${props.theme.buttonSecondary};
+        outline-offset: 2px;
+      }
+    `
+      : ''};
+
+  &.active {
+    box-shadow: 0 0 0 1px
+      ${(props) => props.theme[props.activeBorderColor || 'selectedActive']};
+  }
+`;
+type CardProps = {
+  width?: string;
+  height?: string;
+  headerBackgroundColor?: string;
+  bodyBackgroundColor?: string;
+  status?: 'healthy' | 'warning' | 'critical';
+  onClick?: () => void;
+  active?: boolean;
+  disabled?: boolean;
+  children: Node;
+  className?: string;
+} & HTMLProps<HTMLDivElement>;
+function Card({
+  width = 'auto',
+  height = 'auto',
+  headerBackgroundColor = 'backgroundLevel4',
+  bodyBackgroundColor = 'backgroundLevel3',
+  status = null,
+  onClick = null,
+  active = false,
+  disabled = false,
+  children,
+  className,
+  ...rest
+}: CardProps) {
+  let colorStatus: string | null = null;
+
+  if (status) {
+    colorStatus =
+      status === 'healthy'
+        ? 'backgroundLevel4'
+        : 'status' + status.replace(/^\w/, (c) => c.toUpperCase());
+  }
+
+  return (
+    <CardContext.Provider value={true}>
+      <StyledCard
+        className={[`sc-card ${active ? 'active' : ''}`, className].join(' ')}
+        width={width}
+        height={height}
+        headerBackgroundColor={headerBackgroundColor}
+        bodyBackgroundColor={bodyBackgroundColor}
+        colorStatus={colorStatus}
+        activeBorderColor={
+          !status || status === 'healthy' ? 'selectedActive' : colorStatus
+        }
+        disabled={disabled}
+        role={onClick && !disabled ? 'button' : null}
+        aria-pressed={onClick && !disabled ? active : null}
+        tabIndex={onClick && !disabled ? 0 : null}
+        onClick={!disabled ? onClick : undefined}
+        active={active}
+        onKeyDown={(event) => {
+          if (
+            !disabled &&
+            (event.key === ' ' ||
+              event.key === 'Enter' ||
+              event.key === 'Spacebar')
+          ) {
+            event.preventDefault();
+            onClick();
+          }
+        }}
+        {...rest}
+      >
+        {children}
+      </StyledCard>
+    </CardContext.Provider>
+  );
+}
+Card.Header = CardHeader;
+Card.Body = CardBody;
+Card.BodyContainer = CardBodyContainer;
+export { Card };

package/src/lib/components/checkbox/Checkbox.component.tsx

@@ -0,0 +1,131 @@
+import { ChangeEvent, InputHTMLAttributes, forwardRef } from 'react';
+import styled from 'styled-components';
+import { spacing, Stack } from '../../spacing';
+
+import { Text } from '../text/Text.component';
+
+type Props = {
+  label?: string;
+  value?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+const Checkbox = forwardRef<HTMLInputElement, Props>(
+  ({ disabled, checked, label, value, onChange, ...rest }, ref) => {
+    return (
+      <StyledCheckbox
+        checked={checked}
+        disabled={disabled}
+        className="sc-checkbox"
+      >
+        <Stack>
+          <input
+            type="checkbox"
+            checked={checked}
+            disabled={disabled}
+            value={value}
+            onChange={onChange}
+            ref={ref}
+            {...rest}
+          />
+          {label && <Text>{label}</Text>}
+        </Stack>
+      </StyledCheckbox>
+    );
+  },
+);
+
+export { Checkbox };
+
+const StyledCheckbox = styled.label<{
+  disabled?: boolean;
+  checked?: boolean;
+}>`
+  ${(props) => (props.disabled ? 'opacity: 0.5;' : '')}
+  /* Basic styling */
+
+  [type='checkbox'] {
+    width: 0.75rem;
+    height: 0.75rem;
+    color: ${(props) => props.theme.textPrimary};
+    vertical-align: middle;
+    -webkit-appearance: none;
+    background: none;
+    border: 0;
+    outline: 0;
+    flex-grow: 0;
+    border-radius: ${spacing.r2};
+    background-color: ${(props) => props.theme.backgroundLevel1};
+    transition: background 300ms;
+    cursor: pointer;
+  }
+
+  /* Pseudo element for check styling */
+
+  [type='checkbox']::before {
+    content: '';
+    color: transparent;
+    display: block;
+    width: inherit;
+    height: inherit;
+    border-radius: inherit;
+    border: 0;
+    background-color: transparent;
+    background-size: contain;
+    box-shadow: inset 0 0 0 ${spacing.r1}
+      ${(props) => props.theme.textSecondary};
+  }
+
+  /* Checked */
+
+  [type='checkbox']:checked {
+    background-color: ${(props) => props.theme.selectedActive};
+  }
+
+  [type='checkbox']:checked::before {
+    box-shadow: none;
+    background-image: url('data:image/svg+xml,%3Csvg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg"%3E %3Cpath d="M3 6.68646L5.0671 9L9 3" stroke="%23fff" stroke-width="1.5"/%3E %3C/svg%3E');
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+
+  /* Indeterminate */
+
+  [type='checkbox']:indeterminate::before {
+    box-shadow: inset 0 0 0 ${spacing.r1}
+      ${(props) => props.theme.selectedActive};
+    background-color: ${(props) => props.theme.highlight};
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cline x1='6' y1='12' x2='20' y2='12' style='stroke:%23fff;stroke-width:4'/%3E %3C/svg%3E");
+  }
+
+  /* Hover & focus */
+  [type='checkbox']:hover {
+    ${(props) =>
+      !props.disabled && `background-color: ${props.theme.highlight};`}
+  }
+
+  [type='checkbox']:hover::before {
+    ${(props) =>
+      !props.disabled &&
+      `box-shadow: inset 0 0 0 ${spacing.r1} ${props.theme.selectedActive};`}
+  }
+
+  [type='checkbox']:focus-visible:enabled {
+    outline: dashed ${spacing.r2} ${(props) => props.theme.selectedActive};
+    outline-offset: ${spacing.r2};
+  }
+
+  /* Disabled */
+
+  [type='checkbox']:checked:disabled {
+    cursor: not-allowed;
+    background-color: ${(props) => props.theme.selectedActive};
+  }
+
+  [type='checkbox']:not(:checked):disabled {
+    cursor: not-allowed;
+    background-color: ${(props) => props.theme.textSecondary};
+  }
+`;

package/src/lib/components/chips/Chips.component.tsx

@@ -0,0 +1,169 @@
+import { lighten } from 'polished';
+import styled, { css } from 'styled-components';
+import { fontSize, grayLight, white } from '../../style/theme';
+import { Button } from '../button/Button.component';
+import { Size } from '../constants';
+
+import { Icon } from '../icon/Icon.component';
+type Props = {
+  text: string;
+  variant?:
+    | 'statusHealthy'
+    | 'statusWarning'
+    | 'statusCritical'
+    | 'infoPrimary'
+    | 'infoSecondary';
+  icon?: JSX.Element;
+  onClick?: (arg0: any) => void;
+  onRemove?: (arg0: any) => void;
+  size?: Size;
+};
+const ChipsContainer = styled.div<{
+  size?: string;
+  variant?: any;
+  icon?: JSX.Element;
+}>`
+  display: inline-flex;
+  .sc-chips-remove {
+    padding-right: 10px;
+    color: ${white};
+    &:hover {
+      color: ${grayLight};
+    }
+  }
+  ${(props) => {
+    switch (props.size) {
+      case 'smaller':
+        return css`
+          border-radius: 10px;
+          .sc-chips-icon {
+            border-radius: 10px;
+            padding: 5px;
+          }
+        `;
+
+      case 'small':
+        return css`
+          border-radius: 12px;
+          .sc-chips-icon {
+            border-radius: 12px;
+            padding: 6px;
+          }
+        `;
+
+      case 'large':
+        return css`
+          border-radius: 14px;
+          .sc-chips-icon {
+            border-radius: 14px;
+            padding: 6px;
+          }
+        `;
+
+      case 'larger':
+        return css`
+          border-radius: 17px;
+          .sc-chips-icon {
+            border-radius: 17px;
+            padding: 7px;
+          }
+        `;
+
+      default:
+        return css`
+          border-radius: 12px;
+          .sc-chips-icon {
+            border-radius: 12px;
+            padding: 6px;
+          }
+        `;
+    }
+  }}
+  ${(props) => {
+    const brand = props.theme;
+    return css`
+      color: ${brand.textReverse};
+    `;
+  }}
+
+  ${(props) => {
+    const brand = props.theme;
+    const brandLight = lighten(0.1, brand[props.variant]).toString();
+    return props.onClick
+      ? css`
+          background-color: ${brand[props.variant]};
+          font-size: ${fontSize[props.size || 'base']};
+          &:hover {
+            cursor: pointer;
+            background-color: ${brandLight};
+          }
+          &:active {
+            background-color: ${brand[props.variant]};
+          }
+        `
+      : css`
+          background-color: ${brand[props.variant]};
+          font-size: ${fontSize[props.size || 'base']};
+        `;
+  }}
+`;
+export const ChipsIcon = styled.span<{
+  variant: any;
+  text: string;
+  size: Size;
+}>`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(props) =>
+    lighten(0.15, props.theme[props.variant]).toString()};
+`;
+export const ChipsText = styled.span<{ icon: any; isRemovable: boolean }>`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${(props) => (props.icon || props.isRemovable ? '5px' : '5px 10px')};
+`;
+
+const Chips = ({
+  text = '',
+  variant = 'infoPrimary',
+  icon = undefined,
+  onClick,
+  onRemove,
+  size = 'base',
+}: Props) => (
+  <ChipsContainer
+    className="sc-chips"
+    onClick={onClick}
+    variant={variant}
+    icon={icon}
+    size={size}
+  >
+    {icon && (
+      <ChipsIcon
+        className="sc-chips-icon"
+        text={text}
+        variant={variant}
+        size={size}
+      >
+        {icon}
+      </ChipsIcon>
+    )}
+    <ChipsText className="sc-chips-text" icon={icon} isRemovable={!!onRemove}>
+      {text}
+    </ChipsText>
+    {onRemove && (
+      <Button
+        // @ts-ignore
+        className="sc-chips-remove"
+        size={size}
+        inverted={true}
+        icon={<Icon name="Close" />}
+        onClick={onRemove}
+      />
+    )}
+  </ChipsContainer>
+);
+
+export { Chips };

package/src/lib/components/circularprogressbar/CircularProgressBar.component.style.ts

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { getThemePropSelector } from '../../utils';
+import { EmphaseText } from '../text/Text.component';
+export const CircularProgressBarContainer = styled.div`
+  display: inline-block;
+  color: ${getThemePropSelector('textPrimary')};
+`;
+export const Title = styled(EmphaseText)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${spacing.r8};
+`;
+export const ProgressCircle = styled.circle<{
+  circumference: number;
+  percent: number;
+}>`
+  stroke-dasharray: ${({ circumference }) => circumference};
+  stroke-dashoffset: ${({ percent, circumference }) =>
+    ((100 - percent) / 100) * circumference};
+  stroke: ${(props) => props.color || props.theme.statusHealthy};
+  stroke-width: ${(props) => props.strokeWidth};
+  stroke-linecap: round;
+  fill: none;
+`;
+export const BackgroundCircle = styled.circle<{ backgroundColor?: string }>`
+  fill: none;
+  stroke: ${(props) => props.backgroundColor || props.theme.backgroundLevel1};
+  stroke-width: ${(props) => props.strokeWidth};
+`;

package/src/lib/components/circularprogressbar/CircularProgressBar.component.tsx

@@ -0,0 +1,58 @@
+import {
+  CircularProgressBarContainer,
+  Title,
+  ProgressCircle,
+  BackgroundCircle,
+} from './CircularProgressBar.component.style';
+type Props = {
+  percent: number;
+  radius: number;
+  strokeWidth?: number;
+  title?: string;
+  color?: string;
+  backgroundColor?: string;
+  children?: JSX.Element;
+};
+
+function CircularProgressBar({
+  percent,
+  radius,
+  strokeWidth = 10,
+  title,
+  color,
+  backgroundColor,
+  children,
+  ...rest
+}: Props) {
+  const centerPointCoordinate = strokeWidth / 2 + radius;
+  const svgSize = centerPointCoordinate * 2;
+  const CIRCUMFERENCE = Math.PI * (radius * 2);
+  return (
+    <CircularProgressBarContainer className="sc-circularprogressbar" {...rest}>
+      {title && <Title>{title}</Title>}
+
+      <svg width={svgSize} height={svgSize}>
+        <BackgroundCircle
+          cx={centerPointCoordinate}
+          cy={centerPointCoordinate}
+          backgroundColor={backgroundColor}
+          r={radius}
+          strokeWidth={strokeWidth}
+        />
+        <ProgressCircle
+          percent={percent}
+          color={color}
+          circumference={CIRCUMFERENCE}
+          cx={centerPointCoordinate}
+          cy={centerPointCoordinate}
+          r={radius}
+          strokeWidth={strokeWidth}
+          transform={`rotate(-90 ${centerPointCoordinate}  ${centerPointCoordinate})`} // To start at 0 o'clock
+        />
+        {children}
+      </svg>
+    </CircularProgressBarContainer>
+  );
+}
+
+export { CircularProgressBar };

package/src/lib/components/cloudprogressbar/CloudProgressBar.component.tsx

@@ -0,0 +1,105 @@
+import styled, { css, keyframes } from 'styled-components';
+import { coreUIAvailableThemes } from '../../style/theme';
+export type CloudProgressBarProps = {
+  percentage: number;
+  borderSize: string;
+  cloudColor?: string;
+  progressCloudColor?: string;
+  children: JSX.Element;
+};
+
+const keyFrameCloud = (props) => {
+  return keyframes`
+    from {
+      height:100%
+    } 
+    to {
+      height:${100 - props.percentage}%
+    }`;
+};
+
+const Container = styled.div`
+  ${(props) => {
+    return css`
+      text-align: center;
+      position: relative;
+    `;
+  }}
+`;
+const ContainerProgress = styled.div<{ percentage: number }>`
+  ${(props) => {
+    return css`
+      animation-duration: 1s;
+      animation-fill-mode: both;
+      animation-name: ${keyFrameCloud};
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      overflow: hidden;
+    `;
+  }}
+`;
+
+const Cloud = ({ strokeColor, borderSize }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 15 72 42"
+    enableBackground="new 0 0 72 72"
+  >
+    <g>
+      <path
+        fill="none"
+        stroke={strokeColor}
+        strokeWidth={borderSize}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit="10"
+        d="M15.9,30.3c0,0.4-0.4,0.8-0.8,0.8C10,31.6,6,36.7,6,42.9c0,6.6,4.5,11.9,10.2,11.9h38.7C61,54.8,66,49.1,66,42.2c0-6.6-4.6-12.1-10.4-12.5c-0.4,0-0.8-0.3-0.9-0.8c-1.3-6.7-7.3-11.7-14.3-11.7c-4.6,0-8.7,2.1-11.3,5.4C28.8,23,28.3,23.1,28,23c-1-0.4-2.1-0.6-3.3-0.6C20.1,22.3,16.3,25.8,15.9,30.3z"
+      />
+    </g>
+  </svg>
+);
+
+const CloudProgress = ({ strokeColor, percentage, borderSize }) => (
+  <ContainerProgress percentage={percentage}>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 15 72 42"
+      enableBackground="new 0 0 72 72"
+    >
+      <g>
+        <path
+          fill="none"
+          stroke={strokeColor}
+          strokeWidth={borderSize}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeMiterlimit="10"
+          d="M15.9,30.3c0,0.4-0.4,0.8-0.8,0.8C10,31.6,6,36.7,6,42.9c0,6.6,4.5,11.9,10.2,11.9h38.7C61,54.8,66,49.1,66,42.2c0-6.6-4.6-12.1-10.4-12.5c-0.4,0-0.8-0.3-0.9-0.8c-1.3-6.7-7.3-11.7-14.3-11.7c-4.6,0-8.7,2.1-11.3,5.4C28.8,23,28.3,23.1,28,23c-1-0.4-2.1-0.6-3.3-0.6C20.1,22.3,16.3,25.8,15.9,30.3z"
+        />
+      </g>
+    </svg>
+  </ContainerProgress>
+);
+
+const CloudProgressBar = ({
+  percentage = 0,
+  borderSize = '2px',
+  cloudColor = coreUIAvailableThemes.darkRebrand.statusHealthy,
+  progressCloudColor = coreUIAvailableThemes.darkRebrand.backgroundLevel1,
+  children,
+}: CloudProgressBarProps) => (
+  <Container className="sc-cloudprogressbar">
+    <Cloud strokeColor={progressCloudColor} borderSize={borderSize} />
+    <CloudProgress
+      strokeColor={cloudColor}
+      percentage={percentage}
+      borderSize={borderSize}
+    />
+
+    {children}
+  </Container>
+);
+
+export { CloudProgressBar };