@indico-data/design-system 1.0.47 → 1.0.49

package/src/components/inputs/RadioGroup/RadioGroup.styles.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const StyledRadioGroup = styled.div`
+  &.horizontal {
+    display: flex;
+
+    > * {
+      margin-right: 10px;
+    }
+  }
+`;

package/src/components/inputs/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,120 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React, { createContext, useContext, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { AriaRadioGroupProps, AriaRadioProps } from '@react-types/radio';
+import { useRadio, useRadioGroup } from '@react-aria/radio';
+import { useFocusRing } from '@react-aria/focus';
+import { useVisuallyHidden } from '@react-aria/visually-hidden';
+import { RadioGroupState, useRadioGroupState } from 'react-stately';
+
+import { PermafrostComponent } from '@/types';
+import { StyledRadioGroup } from './RadioGroup.styles';
+
+export type RadioGroupProps = PermafrostComponent & {
+  value?: string;
+  onChange?: (value: string) => void;
+  children: React.ReactNode;
+  className?: string;
+} & AriaRadioGroupProps;
+
+export const RadioContext = createContext({} as RadioGroupState);
+
+/**
+ * Renders a group of radio buttons with no styling. This component is not
+ * designed to be user-facing, and should only be used to provide functionality.
+ *
+ * A group label must be included: either pass a string or markup into the
+ * `label` prop, or include an `aria-label` or `aria-labelledby` attribute.
+ */
+export function RadioGroup(props: RadioGroupProps) {
+  const {
+    children,
+    className,
+    value,
+    id,
+    isDisabled,
+    isReadOnly,
+    label,
+    name,
+    onChange,
+    orientation,
+    defaultValue,
+  } = props;
+
+  const [lastFocusedValue, setLastFocusedValue] = useState<string | null>(null);
+
+  const radioGroupState = {
+    isDisabled: isDisabled || false,
+    isReadOnly: isReadOnly || false,
+    lastFocusedValue,
+    name: name || '',
+    selectedValue: value,
+    setLastFocusedValue,
+    setSelectedValue: onChange,
+    defaultValue,
+  };
+
+  const state = useRadioGroupState(radioGroupState);
+  const { radioGroupProps, labelProps } = useRadioGroup(props, state);
+
+  return (
+    <StyledRadioGroup
+      {...radioGroupProps}
+      className={classNames(className, { horizontal: orientation === 'horizontal' })}
+      data-cy={props['data-cy']}
+      id={id}
+    >
+      {label && (
+        <div className="groupLabel" {...labelProps}>
+          {label}
+        </div>
+      )}
+
+      <RadioContext.Provider value={state}>{children}</RadioContext.Provider>
+    </StyledRadioGroup>
+  );
+}
+
+/**
+ * A single radio button and its label; no styling is applied, and the native
+ * radio button is visually hidden.
+ */
+export function Radio(
+  props: AriaRadioProps & {
+    className?: string;
+    isVisuallySelected?: (selectedValue: string) => void;
+  },
+) {
+  const { children, className, isDisabled, isVisuallySelected } = props;
+  const state = useContext(RadioContext);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { visuallyHiddenProps } = useVisuallyHidden();
+
+  const { inputProps } = useRadio(props, state, inputRef);
+  const { isFocusVisible, focusProps } = useFocusRing();
+
+  let isSelected;
+
+  if (isVisuallySelected) {
+    isSelected = isVisuallySelected(state.selectedValue as string);
+  } else {
+    // @ts-ignore
+    isSelected = state.selectedValue === props.value || state?.defaultValue === props.value;
+  }
+
+  return (
+    <label
+      className={classNames(className, {
+        disabled: isDisabled || state.isDisabled,
+        selected: isSelected,
+        focused: isFocusVisible,
+      })}
+    >
+      <input {...inputProps} {...visuallyHiddenProps} {...focusProps} ref={inputRef} />
+
+      {children}
+    </label>
+  );
+}

package/src/components/inputs/RadioGroup/index.ts

@@ -0,0 +1 @@
+export { Radio as AbstractRadio, RadioGroup as AbstractRadioGroup } from './RadioGroup';

package/src/components/inputs/SearchInput/SearchInput.styles.ts

@@ -1,14 +1,10 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import { TYPOGRAPHY } from '@/tokens';
 
 import { inputCommon } from '../inputsCommon.styles';
 
-export const StyledSearchField = styled.div<{
-  border?: boolean;
-  showSearchIcon?: boolean;
-  showClearInputIcon?: boolean;
-}>`
+export const StyledSearchField = styled.div`
   position: relative;
   background: transparent;
 
@@ -17,49 +13,39 @@ export const StyledSearchField = styled.div<{
     top: 4px;
     left: 0;
     font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-
-    ${(props) =>
-      props.border &&
-      props.showSearchIcon &&
-      css`
-        top: 7px;
-        left: 5px;
-      `}
   }
 
   input {
     ${inputCommon};
-
     padding: 5px;
     font-size: ${TYPOGRAPHY.fontSize.base};
     margin-bottom: 0;
-    ${(props) =>
-      props.border &&
-      css`
-        border: 1px solid currentColor;
-        border-radius: 4px;
-      `}
-    ${(props) =>
-      props.showSearchIcon &&
-      css`
-        padding: 5px 5px 5px 25px;
-      `}
   }
 
-  ${(props) =>
-    props.showClearInputIcon &&
-    css`
-      .clear-input {
-        cursor: pointer;
-        height: 10px;
-        width: 10px;
-        position: absolute;
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-        &:hover {
-          opacity: 0.5;
-        }
-      }
-    `}
+  &.border.showSearchIcon label {
+    top: 7px;
+    left: 5px;
+  }
+
+  &.border input {
+    border: 1px solid currentColor;
+    border-radius: 4px;
+  }
+
+  &.showSearchIcon input {
+    padding: 5px 5px 5px 25px;
+  }
+
+  &.showClearInputIcon .clear-input {
+    cursor: pointer;
+    height: 10px;
+    width: 10px;
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    &:hover {
+      opacity: 0.5;
+    }
+  }
 `;

package/src/components/inputs/SearchInput/SearchInput.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { v4 as uuid } from 'uuid';
+import classNames from 'classnames';
 
 import { Icon } from '@/components/Icon';
 import { PermafrostComponent } from '@/types';
@@ -39,10 +40,11 @@ export const SearchInput = (props: Props) => {
 
   return (
     <StyledSearchField
-      className={className}
-      border={border}
-      showSearchIcon={showSearchIcon}
-      showClearInputIcon={showClearInputIcon}
+      className={classNames(className, {
+        border,
+        showSearchIcon,
+        showClearInputIcon,
+      })}
       data-cy={props['data-cy']}
     >
       {showSearchIcon && (

package/src/components/inputs/index.ts

@@ -2,3 +2,5 @@ export { EditableInput } from './EditableInput';
 export { NumberInput } from './NumberInput';
 export { SearchInput } from './SearchInput';
 export { TextInput } from './TextInput';
+export { Radio, RadioGroup } from './RadioButtons';
+export { AbstractRadio, AbstractRadioGroup } from './RadioGroup';

package/src/components/loading-indicators/CirclePulse/CirclePulse.styles.ts

@@ -23,14 +23,14 @@ const ripple = (size: string) => keyframes`
 const animationSpeed = 1.4;
 
 export const StyledLoadingIndicator = styled.div<{
-  overallSize: string;
-  rippleSize: string;
+  overallsize: string;
+  ripplesize: string;
 }>`
   display: grid;
   place-items: center;
 
-  width: ${(props) => props.overallSize};
-  height: ${(props) => props.overallSize};
+  width: ${(props) => props.overallsize};
+  height: ${(props) => props.overallsize};
 
   margin-left: auto;
   margin-right: auto;
@@ -43,7 +43,7 @@ export const StyledLoadingIndicator = styled.div<{
 
     grid-area: 1 / 1;
 
-    animation: ${(props) => ripple(props.rippleSize)} ${animationSpeed}s
+    animation: ${(props) => ripple(props.ripplesize)} ${animationSpeed}s
       cubic-bezier(0, 0.2, 0.8, 1) infinite;
 
     @media (prefers-reduced-motion) {
@@ -60,7 +60,7 @@ export const StyledLoadingIndicator = styled.div<{
   }
 `;
 
-export const StyledMessageLoadingIndicator = styled.div<{ overallSize: string }>`
+export const StyledMessageLoadingIndicator = styled.div<{ overallsize: string }>`
   display: block;
 
   > * {
@@ -71,7 +71,7 @@ export const StyledMessageLoadingIndicator = styled.div<{ overallSize: string }>
   .message {
     text-align: center;
     display: block;
-    width: ${(props) => props.overallSize};
+    width: ${(props) => props.overallsize};
     margin-top: -50px;
 
     color: ${COLORS.lightFontColor};

package/src/components/loading-indicators/CirclePulse/CirclePulse.tsx

@@ -32,8 +32,8 @@ export function CirclePulse(props: Props): React.ReactElement {
         className={className}
         data-cy={props['data-cy']}
         id={id}
-        overallSize={returnSizeString(overallSize)}
-        rippleSize={returnSizeString(rippleSize)}
+        overallsize={returnSizeString(overallSize)}
+        ripplesize={returnSizeString(rippleSize)}
         style={color ? { color } : { color: COLORS.curiousBlue }}
       />
     );
@@ -41,7 +41,7 @@ export function CirclePulse(props: Props): React.ReactElement {
 
   if (showRandomMessage) {
     return (
-      <StyledMessageLoadingIndicator overallSize={returnSizeString(overallSize)}>
+      <StyledMessageLoadingIndicator overallsize={returnSizeString(overallSize)}>
         {loadingIndicator()}
 
         <RandomLoadingMessage />

package/src/components/loading-indicators/LoadingIndicator/LoadingIndicator.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { LoadingIndicator } from './LoadingIndicator';
+
+const meta = {
+  component: LoadingIndicator,
+  title: 'LoadingIndicator',
+} satisfies Meta<typeof LoadingIndicator>;
+
+export default meta;
+type Story = StoryObj<typeof LoadingIndicator>;
+
+export const Normal: Story = {
+  args: {},
+};
+export const CustomColor: Story = {
+  args: { color: '#f0f' },
+};
+
+export const WithRandomMessage: Story = {
+  args: { showRandomMessage: true },
+};

package/src/components/loading-indicators/LoadingIndicator/LoadingIndicator.styles.ts

@@ -0,0 +1,81 @@
+import styled, { keyframes } from 'styled-components';
+
+import { COLORS, TYPOGRAPHY } from '@/tokens';
+
+const ripple = (size: string) => keyframes`
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+  
+  20% {
+    opacity: 1;
+  }
+  
+  100% {
+    width: ${size};
+    height: ${size};
+    opacity: 0;
+  }
+`;
+
+const animationSpeed = 1.4;
+
+export const StyledLoadingIndicator = styled.div<{
+  overallsize: string;
+  ripplesize: string;
+}>`
+  display: grid;
+  place-items: center;
+
+  width: ${(props) => props.overallsize};
+  height: ${(props) => props.overallsize};
+
+  margin-left: auto;
+  margin-right: auto;
+
+  &:before,
+  &:after {
+    content: '';
+    border: 4px solid currentColor;
+    border-radius: 50%;
+
+    grid-area: 1 / 1;
+
+    animation: ${(props) => ripple(props.ripplesize)} ${animationSpeed}s
+      cubic-bezier(0, 0.2, 0.8, 1) infinite;
+
+    @media (prefers-reduced-motion) {
+      animation-duration: ${animationSpeed * 2}s;
+    }
+  }
+
+  &:after {
+    animation-delay: -${animationSpeed / 2}s;
+
+    @media (prefers-reduced-motion) {
+      animation-delay: -${animationSpeed}s;
+    }
+  }
+`;
+
+export const StyledMessageLoadingIndicator = styled.div<{ overallsize: string }>`
+  display: block;
+
+  > * {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .message {
+    text-align: center;
+    display: block;
+    width: ${(props) => props.overallsize};
+    margin-top: -50px;
+
+    color: ${COLORS.lightFontColor};
+    font-size: ${TYPOGRAPHY.fontSize.base};
+    font-style: italic;
+  }
+`;

package/src/components/loading-indicators/LoadingIndicator/LoadingIndicator.tsx

@@ -0,0 +1,61 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { RandomLoadingMessage } from '@/components';
+import { PermafrostComponent } from '@/types';
+import { COLORS } from '@/tokens';
+
+import { StyledLoadingIndicator, StyledMessageLoadingIndicator } from './LoadingIndicator.styles';
+
+type Props = PermafrostComponent & {
+  color?: string;
+  overallSize?: string | number;
+  rippleSize?: string | number;
+  showRandomMessage?: boolean;
+};
+
+export function LoadingIndicator(props: Props): React.ReactElement {
+  const {
+    className,
+    color,
+    id,
+    overallSize = '200px',
+    rippleSize = '76px',
+    showRandomMessage,
+  } = props;
+
+  const loadingIndicator = () => {
+    return (
+      <StyledLoadingIndicator
+        aria-hidden={true}
+        className={className}
+        data-cy={props['data-cy']}
+        id={id}
+        overallsize={returnSizeString(overallSize)}
+        ripplesize={returnSizeString(rippleSize)}
+        style={color ? { color } : { color: COLORS.curiousBlue }}
+      />
+    );
+  };
+
+  if (showRandomMessage) {
+    return (
+      <StyledMessageLoadingIndicator overallsize={returnSizeString(overallSize)}>
+        {loadingIndicator()}
+
+        <RandomLoadingMessage />
+      </StyledMessageLoadingIndicator>
+    );
+  }
+
+  return loadingIndicator();
+}
+
+function returnSizeString(size: string | number): string {
+  if (typeof size === 'number') {
+    return `${size}px`;
+  }
+
+  return size;
+}

package/src/components/loading-indicators/LoadingIndicator/index.ts

@@ -0,0 +1 @@
+export { LoadingIndicator } from './LoadingIndicator';

package/src/components/loading-indicators/index.ts

@@ -4,3 +4,4 @@ export { CirclePulse } from './CirclePulse';
 export { RandomLoadingMessage } from './RandomLoadingMessage';
 export { PercentageRing } from './PercentageRing';
 export { LoadingList } from './LoadingList';
+export { LoadingIndicator } from './LoadingIndicator';

package/src/components/modals/ConfirmModal/ConfirmModal.stories.tsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ConfirmModal } from './ConfirmModal';
+
+const meta = {
+  component: ConfirmModal,
+  title: 'Modals/ConfirmModal',
+  args: {
+    title: 'Im sorry, Dave. Im afraid I cant do that.',
+    message: 'This mission is too important for me to allow you to jeopardize it.',
+    confirmText: 'I dont know what youre talking about, Hal.',
+    rejectText: 'I dont know what youre talking about, Hal.',
+  },
+  argTypes: {
+    open: { control: { disable: true } },
+    className: { control: { disable: true } },
+    describedBy: { control: { disable: true } },
+    modalNode: { control: { disable: true } },
+    width: { control: { disable: true } },
+  },
+} satisfies Meta<typeof ConfirmModal>;
+
+export default meta;
+type Story = StoryObj<typeof ConfirmModal>;
+
+function StoryRender(props: any) {
+  const [isOpen, setIsOpen] = useState<boolean>(props.open);
+
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <button type="button" onClick={handleOpen}>
+        Open the pod bay doors, HAL.
+      </button>
+
+      <ConfirmModal {...props} open={isOpen} responseHandler={handleClose} />
+    </>
+  );
+}
+
+export const Base: Story = {
+  args: {
+    processing: false,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const Open: Story = {
+  args: {
+    open: true,
+    processing: false,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};
+
+export const processing: Story = {
+  args: {
+    open: true,
+    processing: true,
+  },
+  render: (args) => {
+    return <StoryRender {...args} />;
+  },
+};

package/src/components/modals/ConfirmModal/ConfirmModal.styles.ts

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+import { COLORS, TYPOGRAPHY } from '@/tokens';
+
+export const StyledConfirmModal = styled.div`
+  padding: 20px;
+
+  .title {
+    margin: 30px 16px;
+    font-size: ${TYPOGRAPHY.fontSize.display};
+    text-align: center;
+    color: ${COLORS.lightFontColor};
+  }
+
+  .message {
+    text-align: center;
+    padding-bottom: 16px;
+  }
+
+  .actions {
+    text-align: center;
+    padding-bottom: 40px;
+
+    button {
+      min-width: 300px;
+      display: block;
+      margin: 16px auto 0;
+    }
+  }
+`;

package/src/components/modals/ConfirmModal/ConfirmModal.tsx

@@ -0,0 +1,84 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import { v4 as uuid } from 'uuid';
+
+import { Button, LoadingAwareContainer, ModalBase } from '@/components';
+import { ModalBaseProps } from '../ModalBase';
+import { PermafrostComponent } from '@/types';
+
+import { StyledConfirmModal } from './ConfirmModal.styles';
+
+type Props = PermafrostComponent &
+  Pick<ModalBaseProps, 'open'> & {
+    describedBy?: string;
+    clickOutsideHandler(e?: React.SyntheticEvent): void;
+    confirmText?: string;
+    message?: string | React.ReactNode;
+    modalNode?: string;
+    processing?: boolean;
+    rejectText?: string;
+    responseHandler(response: boolean, event: React.SyntheticEvent): void;
+    title?: string | React.ReactNode;
+    width?: number;
+  };
+
+export function ConfirmModal(props: Props) {
+  const id = uuid();
+  const {
+    className,
+    clickOutsideHandler,
+    confirmText,
+    describedBy,
+    message,
+    modalNode,
+    open,
+    processing,
+    rejectText,
+    responseHandler,
+    title,
+    width,
+  } = props;
+
+  return (
+    <ModalBase
+      className={className}
+      clickToDismiss={clickOutsideHandler}
+      data-cy={props['data-cy']}
+      describedBy={describedBy}
+      id={props.id}
+      labelElement={id}
+      node={modalNode}
+      open={open}
+    >
+      <StyledConfirmModal style={{ width: width || 555 }}>
+        {title && (
+          <div id={id} className="title">
+            {title || 'Please confirm'}
+          </div>
+        )}
+
+        {message && <div className="message">{message}</div>}
+
+        <LoadingAwareContainer isLoading={processing} className="actions">
+          <Button
+            variant="cta"
+            className="confirm"
+            onClick={(event) => responseHandler(true, event)}
+          >
+            {confirmText || 'Yes'}
+          </Button>
+
+          <Button
+            variant="normal"
+            className="reject"
+            onClick={(event) => responseHandler(false, event)}
+          >
+            {rejectText || 'No'}
+          </Button>
+        </LoadingAwareContainer>
+      </StyledConfirmModal>
+    </ModalBase>
+  );
+}

package/src/components/modals/ConfirmModal/index.ts

@@ -0,0 +1 @@
+export { ConfirmModal } from './ConfirmModal';