Feature/steps

packages/coderskit/src/components/Steps/Steps.tsx

@@ -0,0 +1,261 @@
+import React, { HTMLAttributes, ReactNode, ReactElement, LabelHTMLAttributes } from 'react';
+import classnames from 'classnames';
+import styled from '@emotion/styled';
+import { ThemeColorsKeys } from '../..';
+
+// SINGLE STEP
+
+export type StepState = 'success' | 'error' | 'active' | 'pending';
+
+export interface StepProps extends HTMLAttributes<HTMLDivElement> {
+  state?: StepState;
+  labelLayout?: LabelLayout;
+  children?: ReactNode;
+}
+
+interface StepContentProps extends StepProps {
+  size?: number;
+  color?: ThemeColorsKeys;
+  fontColor?: ThemeColorsKeys;
+  children?: ReactNode;
+}
+
+export const StepContentBase = styled.div<StepContentProps>(props => {
+  const { colors } = props.theme;
+  const color = colors[props.color!];
+  const fontColor = colors[props.fontColor!];
+
+  return {
+    display: 'flex',
+    borderRadius: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: `1px solid ${color}`,
+    backgroundColor: color,
+    color: fontColor,
+    width: props.size,
+    height: props.size,
+  };
+});
+
+const StepContentSuccess = styled(StepContentBase)(props => {
+  const { colors } = props.theme;
+
+  return {
+    backgroundColor: colors.primary,
+    borderColor: colors.primary,
+    color: colors.white,
+  };
+});
+
+const StepContentError = styled(StepContentBase)(props => {
+  const { colors } = props.theme;
+
+  return {
+    backgroundColor: colors.error,
+    borderColor: colors.error,
+    color: colors.white,
+  };
+});
+
+const StepContentActive = styled(StepContentBase)(props => {
+  const { colors } = props.theme;
+
+  return {
+    backgroundColor: colors.white,
+    borderColor: colors.primary,
+    color: colors.primary,
+  };
+});
+
+const StepContentPending = styled(StepContentBase)(props => {
+  const { colors } = props.theme;
+
+  return {
+    backgroundColor: colors.white,
+    borderColor: colors.fontDisabled,
+    color: colors.fontDisabled,
+  };
+});
+
+const StepVertical = styled.div<StepProps>(() => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    margin: '10px',
+  };
+});
+
+const StepHorizontal = styled.div<StepProps>(() => {
+  return {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: '10px',
+
+    '.ck-step-content': {
+      marginRight: 8,
+    },
+  };
+});
+
+export const StepContent = (props: StepContentProps) => {
+  const StepContent =
+    props.state === 'success'
+      ? StepContentSuccess
+      : props.state === 'error'
+      ? StepContentError
+      : props.state === 'active'
+      ? StepContentActive
+      : props.state === 'pending'
+      ? StepContentPending
+      : StepContentBase;
+
+  return (
+    <StepContent {...props} className={classnames(props.className, 'ck-step-content')}>
+      {props.children}
+    </StepContent>
+  );
+};
+
+export const Step = (props: StepProps) => {
+  const StepWrapper = props.labelLayout === 'vertical' ? StepVertical : StepHorizontal;
+
+  return <StepWrapper className={classnames(props.className, 'ck-step')}>{props.children}</StepWrapper>;
+};
+
+// STEP LABEL
+
+export type LabelLayout = 'vertical' | 'horizontal';
+
+export interface StepLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  state?: StepState;
+  children?: ReactNode;
+}
+
+const StepLabelWrapper = styled.label<StepLabelProps>(props => {
+  const { theme, state } = props;
+  const { fontSizes, fontWeights, lineHeights, colors } = theme;
+
+  return {
+    width: 'fit-content',
+    whiteSpace: 'nowrap',
+    fontSize: fontSizes.body2,
+    lineHeight: lineHeights.body2,
+    fontWeight: fontWeights.regular,
+    color: colors[state === 'active' ? 'primary' : 'fontDisabled'],
+  };
+});
+
+export const StepLabel = ({ children, ...props }: StepLabelProps) => {
+  return (
+    <StepLabelWrapper {...props} className={classnames(props.className, 'ck-step-label')}>
+      <span>{children}</span>
+    </StepLabelWrapper>
+  );
+};
+
+// SEPARATOR
+
+export interface SeparatorProps extends StepContentProps {
+  topOffset?: string;
+}
+
+const Separator = styled.div<SeparatorProps>(props => {
+  const { colors } = props.theme;
+
+  return {
+    height: '1px',
+    width: '100%',
+    marginTop: props.topOffset,
+    backgroundColor: colors.fontDisabled,
+  };
+});
+
+// STEP GROUP
+
+export interface StepsProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  activeStep?: number;
+  labelLayout?: LabelLayout;
+}
+
+const StepsWrapper = styled.div<StepsProps>(() => {
+  return {
+    display: 'flex',
+    justifyContent: 'space-between',
+  };
+});
+
+const calculateSeparatorTopOffset = (StepWrapper: ReactElement) => {
+  const stepContent = StepWrapper!.props.children[0];
+  return `${stepContent.props.size / 2 + 10}px`;
+};
+
+export const Steps = ({ children, ...props }: StepsProps) => {
+  const className = classnames(props.className, 'ck-steps');
+
+  // Determine child's state and pass number as a child (only if it's active or pending)
+  const childrenWithState = React.Children.map(children as ReactElement[], (child, index) => {
+    const state = index === props.activeStep ? 'active' : index > props.activeStep! ? 'pending' : undefined;
+
+    if (index >= props.activeStep!) {
+      let number = index + 1;
+      let updatedChildren = React.Children.map(child.props.children as ReactElement[], (innerChild, index) => {
+        if (index === 0) {
+          return React.cloneElement(innerChild as ReactElement, { state: state, children: number });
+        } else {
+          return React.cloneElement(innerChild as ReactElement, { state: state });
+        }
+      });
+      return React.cloneElement(child, {}, updatedChildren);
+    }
+
+    return child;
+  });
+
+  // Pass label layout to children
+  const calcChildren = childrenWithState.length;
+  const childrenWithLabels: ReactNode[] = [];
+  const labelLayout = props.labelLayout;
+
+  childrenWithState.forEach((element: ReactNode) => {
+    childrenWithLabels.push(React.cloneElement(element as ReactElement, { labelLayout: labelLayout }));
+  });
+
+  // Add separators between steps
+  const topOffset = calculateSeparatorTopOffset(children![0]);
+
+  const childrenWithSeparators: ReactNode[] = [];
+  childrenWithLabels.forEach((element: ReactNode, index) => {
+    childrenWithSeparators.push(element);
+    if (index < calcChildren - 1) {
+      childrenWithSeparators.push(<Separator topOffset={topOffset} />);
+    }
+  });
+
+  return (
+    <StepsWrapper {...props} className={className}>
+      {childrenWithSeparators}
+    </StepsWrapper>
+  );
+};
+
+StepContent.defaultProps = {
+  fontColor: 'white',
+  color: 'primary',
+  size: 32,
+  children: '',
+};
+
+Step.defaultProps = {
+  labelLeyout: 'vertical',
+};
+
+Steps.defaultProps = {
+  activeStep: 2,
+};
+
+Step.Label = StepLabel;
+Step.Content = StepContent;

packages/coderskit/src/components/Steps/index.ts

@@ -0,0 +1 @@
+export * from './Steps';

packages/coderskit/src/components/index.ts

@@ -21,3 +21,4 @@ export * from './TextArea';
 export * from './Tooltip';
 export * from './Typography';
 export * from './Upload';
+export * from './Steps';

packages/coderskit/src/icons/TimesSolid.tsx

@@ -0,0 +1,19 @@
+import React, { SVGProps } from 'react';
+
+const SvgTimesSolid = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    aria-hidden="true"
+    data-prefix="fas"
+    data-icon="times"
+    className="svg-inline--fa fa-times fa-w-11"
+    viewBox="0 0 352 512"
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+    />
+  </svg>
+);
+
+export default SvgTimesSolid;