@indico-data/design-system 1.0.1

package/src/components/buttons/Button/Button.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  title: 'buttons/Button',
+  argTypes: {
+    onClick: { action: 'clicked/pressed' },
+    className: { control: { disable: true } },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Normal: Story = {
+  args: {
+    id: '1234',
+    variant: 'normal',
+    type: 'button',
+    children: 'Normal button',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    id: '1234',
+    variant: 'primary',
+    type: 'button',
+    children: 'Primary button',
+  },
+};
+
+export const CallToAction: Story = {
+  args: {
+    id: '1234',
+    variant: 'cta',
+    type: 'button',
+    children: 'Call to action button',
+  },
+};
+
+export const LinkStyled: Story = {
+  args: {
+    id: '1234',
+    variant: 'link-style',
+    type: 'button',
+    children: 'Button styled like a text link',
+  },
+};
+
+export const UnStyled: Story = {
+  args: {
+    id: '1234',
+    variant: 'no-style',
+    type: 'button',
+    children: 'Button with no style',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    id: '1234',
+    variant: 'normal',
+    type: 'button',
+    children: 'Disabled button',
+    disabled: true,
+  },
+};
+
+export const Busy: Story = {
+  args: {
+    id: '1234',
+    variant: 'cta',
+    type: 'button',
+    children: 'Saving',
+    busy: true,
+  },
+};

package/src/components/buttons/Button/Button.styles.ts

@@ -0,0 +1,99 @@
+import styled from 'styled-components';
+
+import { ANIMATION, COLORS, TYPOGRAPHY } from '@/tokens';
+
+export const StyledButton = styled.button`
+  border: 0;
+  display: inline-block;
+  cursor: pointer;
+  font-family: ${TYPOGRAPHY.fontFamily.base};
+
+  &.default {
+    border-radius: 2px;
+    padding: 0.625em 1.25em;
+    box-shadow: 0 1px 1px 0 ${COLORS.black};
+    transition: background-color ${ANIMATION.duration} ${ANIMATION.timing};
+  }
+
+  &.primary,
+  &.cta {
+    background-color: ${COLORS.curiousBlue};
+    color: ${COLORS.white};
+
+    &:hover,
+    &:focus {
+      // todo: shouldn't have to override...
+      color: ${COLORS.white};
+      // todo: store as constant
+      background-color: #1777c2;
+    }
+  }
+
+  &.cta {
+    font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
+  }
+
+  &.normal {
+    font-size: ${TYPOGRAPHY.fontSize.base};
+    background-color: ${COLORS.iron};
+    color: ${COLORS.darkFontColor};
+
+    &:hover,
+    &:focus {
+      // todo: store as constant
+      background-color: #bebebe;
+    }
+  }
+
+  &.outline {
+    color: ${COLORS.midFontColor};
+    background: transparent;
+    border: 1px solid ${COLORS.midFontColor};
+    transition:
+      border ${ANIMATION.duration} ${ANIMATION.timing},
+      color ${ANIMATION.duration} ${ANIMATION.timing};
+
+    &:hover,
+    &:focus {
+      border: 1px solid ${COLORS.defaultFontColor};
+      color: ${COLORS.defaultFontColor};
+      background: transparent;
+    }
+
+    &:disabled {
+      border: 1px solid ${COLORS.midFontColor};
+      color: ${COLORS.midFontColor};
+      background: transparent;
+      opacity: 0.6;
+
+      &:hover {
+        background: transparent;
+        border: 1px solid ${COLORS.midFontColor};
+        color: ${COLORS.midFontColor};
+        opacity: 0.6;
+      }
+    }
+  }
+
+  &.no-style {
+    font-size: inherit;
+    color: inherit;
+    background-color: transparent;
+    box-shadow: none;
+    padding: 0;
+
+    &:hover,
+    &:focus {
+      color: inherit;
+      background-color: transparent;
+    }
+
+    &:not(.focus-visible) {
+      outline: none;
+    }
+  }
+
+  &.busy {
+    cursor: wait;
+  }
+`;

package/src/components/buttons/Button/Button.tsx

@@ -0,0 +1,74 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { CircleSpinner } from '@/components';
+import { PermafrostComponent } from '@/types';
+import { StyledButton } from './Button.styles';
+
+export type ButtonVariant = 'primary' | 'cta' | 'normal' | 'link-style' | 'no-style' | 'outline';
+
+export type ButtonProps = PermafrostComponent & {
+  'aria-label'?: string;
+  'aria-pressed'?: boolean;
+  'aria-selected'?: boolean;
+  busy?: boolean;
+  children: React.ReactNode | React.ReactNode[];
+  disabled?: boolean;
+  onClick: (...args: any[]) => void;
+  onFocus?: () => void;
+  role?: string;
+  style?: React.CSSProperties;
+  tabindex?: 0 | -1;
+  type?: 'submit' | 'button' | 'reset';
+  variant?: ButtonVariant;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+};
+
+export function Button(props: ButtonProps): React.ReactElement {
+  const {
+    id,
+    className,
+    busy,
+    children,
+    disabled,
+    onClick,
+    onFocus,
+    role,
+    style,
+    tabindex,
+    type,
+    variant = 'default',
+    ...rest
+  } = props;
+
+  return (
+    <StyledButton
+      aria-disabled={busy}
+      aria-label={props['aria-label']}
+      aria-pressed={props['aria-pressed']}
+      aria-selected={props['aria-selected']}
+      className={classNames(variant, className, {
+        blue: variant === 'primary' || variant === 'cta',
+        busy,
+      })}
+      data-cy={props['data-cy']}
+      disabled={disabled}
+      id={id}
+      onClick={busy ? undefined : onClick}
+      onFocus={onFocus}
+      role={role}
+      style={style}
+      tabIndex={tabindex}
+      type={type || 'button'}
+      {...rest}
+    >
+      {busy && <CircleSpinner size="0.9em" style={{ marginRight: '0.5em' }} />}
+
+      {children}
+    </StyledButton>
+  );
+}

package/src/components/buttons/Button/index.ts

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

package/src/components/buttons/IconButton/IconButton.stories.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { IconButton } from './IconButton';
+
+const meta = {
+  component: IconButton,
+  title: 'buttons/IconButton',
+  args: {
+    iconSide: 'start',
+    size: 'normal',
+    variant: 'default',
+  },
+  argTypes: {
+    onPress: { action: 'clicked/pressed' },
+    isDisabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    adjustAlignment: {
+      description: 'vertical alignment of text relative to icon',
+      defaultValue: -2,
+    },
+    className: {
+      control: {
+        disable: true,
+      },
+    },
+    style: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+export const Normal: Story = {
+  args: {
+    iconName: 'fileHappy',
+    label: 'Save',
+    adjustAlignment: 0,
+  },
+};
+
+export const NoLabel: Story = {
+  args: {
+    iconName: 'fileHappy',
+    adjustAlignment: 0,
+  },
+};
+
+export const IconAtEnd: Story = {
+  args: {
+    iconName: 'fa-arrow-right',
+    iconSide: 'end',
+    label: 'Next Step',
+    variant: 'primary',
+    size: 'large',
+  },
+};
+
+export const Busy: Story = {
+  args: {
+    iconName: 'fileHappy',
+    label: 'Saving',
+    busy: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    iconName: 'fileHappy',
+    label: 'Save',
+    adjustAlignment: 0,
+    isDisabled: true,
+  },
+};
+
+export const AsLink: Story = {
+  args: {
+    iconName: 'fa-cog',
+    isLink: '#',
+    label: 'Settings',
+    adjustAlignment: 0,
+  },
+  render: (args) => (
+    <MemoryRouter>
+      <IconButton {...args} />
+    </MemoryRouter>
+  ),
+};

package/src/components/buttons/IconButton/IconButton.styles.ts

@@ -0,0 +1,78 @@
+import styled, { css } from 'styled-components';
+import { Link } from 'react-router-dom';
+
+import {
+  defaults,
+  sizeLarge,
+  variantDefault,
+  variantDestructive,
+  variantPrimary,
+  disabledOverrides,
+} from '../commonStyles';
+
+const iconMargin = '0.5em';
+
+export const iconButton = css`
+  align-items: center;
+
+  ${defaults};
+
+  svg {
+    height: 16px;
+    width: 16px;
+  }
+
+  &.large {
+    ${sizeLarge};
+
+    svg {
+      height: 20px;
+      width: 20px;
+    }
+  }
+
+  &.default {
+    ${variantDefault};
+  }
+
+  &.destructive {
+    ${variantDestructive};
+  }
+
+  &.primary {
+    ${variantPrimary};
+  }
+
+  // todo: use this rule/selector after global styling removed
+  //:not(:disabled):hover {
+  //  background-color: #bebebe;
+  //}
+  ${disabledOverrides};
+
+  &.start {
+    svg.right-margin {
+      margin-right: ${iconMargin};
+    }
+  }
+
+  &.end {
+    svg {
+      order: 1;
+      margin-left: ${iconMargin};
+    }
+  }
+`;
+
+export const StyledIconButton = styled.button`
+  // todo: overrides the global button styling
+  display: flex !important;
+
+  ${iconButton};
+`;
+
+export const StyledIconButtonLink = styled(Link)`
+  // todo: overrides the global button styling
+  display: inline-flex !important;
+
+  ${iconButton};
+`;

package/src/components/buttons/IconButton/IconButton.tsx

@@ -0,0 +1,109 @@
+// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import { useButton } from '@react-aria/button';
+import { useFocusRing } from '@react-aria/focus';
+import { AriaButtonProps } from '@react-types/button';
+
+import { Icon, IconName, CircleSpinner } from '@/components';
+import { PermafrostComponent } from '@/types';
+import { ButtonSize, ButtonVariant } from '../types';
+
+import { StyledIconButton, StyledIconButtonLink } from './IconButton.styles';
+
+type Props = PermafrostComponent & {
+  /**
+   * Adjusts vertical alignment of the text label, in relation to the icon
+   */
+  adjustAlignment?: number;
+  busy?: boolean;
+  iconName: IconName;
+  iconSide?: 'start' | 'end';
+  isDisabled?: boolean;
+  /**
+   * If element will be an `<a>`, the href URL
+   */
+  isLink?: string;
+  label?: string;
+  size?: ButtonSize;
+  style?: React.CSSProperties;
+  variant?: ButtonVariant;
+} & AriaButtonProps;
+
+/**
+ * General utility “button with an icon” component. May also be used for links that _look_
+ * like buttons, via the `isLink` property.
+ *
+ * The button handler must be passed in via the `onPress` property (replaces `onClick`).
+ *
+ * @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
+ */
+export function IconButton(props: Props) {
+  const {
+    adjustAlignment = 0,
+    busy,
+    className,
+    iconName,
+    iconSide = 'start',
+    id,
+    isDisabled,
+    isLink,
+    label,
+    size = 'normal',
+    style,
+    variant,
+  } = props;
+
+  const buttonEl = useRef();
+  const { buttonProps } = useButton(
+    { ...props, onPress: busy ? undefined : props.onPress },
+    buttonEl,
+  );
+  const { isFocusVisible, focusProps } = useFocusRing();
+
+  const commonProps = {
+    'aria-disabled': busy,
+    className: classNames(iconSide, size, variant, className, {
+      'focus-visible': isFocusVisible,
+      busy,
+      disabled: isLink && isDisabled,
+    }),
+    ...buttonProps,
+    ...focusProps,
+    'data-cy': props['data-cy'],
+    id,
+    ref: buttonEl,
+    style,
+  };
+
+  const iconElement = busy ? (
+    <CircleSpinner
+      size="1em"
+      style={{
+        marginTop: `${adjustAlignment}px`,
+        marginBottom: `${Math.abs(adjustAlignment)}px`,
+      }}
+    />
+  ) : (
+    <Icon className={classNames({ 'right-margin': label })} name={iconName} />
+  );
+
+  const labelElement = label ? (
+    <span style={{ marginTop: `${adjustAlignment}px` }}>{label}</span>
+  ) : null;
+
+  if (isLink && !isDisabled) {
+    return (
+      <StyledIconButtonLink {...commonProps} to={isLink}>
+        {iconElement} {labelElement}
+      </StyledIconButtonLink>
+    );
+  }
+
+  return (
+    <StyledIconButton {...commonProps}>
+      {iconElement} {labelElement}
+    </StyledIconButton>
+  );
+}

package/src/components/buttons/IconButton/index.ts

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

package/src/components/buttons/commonStyles.ts

@@ -0,0 +1,108 @@
+// TODO: This file's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
+
+import { css } from 'styled-components';
+
+import { ANIMATION, COLORS, TYPOGRAPHY } from '@/tokens';
+
+export const defaultHeight = '36px';
+export const largeHeight = '50px';
+
+export const basicDefaults = css`
+  border: 0;
+  display: inline-block;
+  cursor: pointer;
+
+  border-radius: 2px;
+  box-shadow: 0 1px 1px 0 ${COLORS.black};
+
+  &.busy {
+    cursor: wait;
+  }
+
+  &:disabled,
+  &.disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  &:not(.focus-visible) {
+    outline: none;
+  }
+
+  transition-property: opacity, background-color;
+  transition-duration: ${ANIMATION.duration};
+  transition-timing-function: ${ANIMATION.timing};
+`;
+
+export const defaults = css`
+  ${basicDefaults};
+
+  height: ${defaultHeight};
+  font-size: ${TYPOGRAPHY.fontSize.base};
+  font-family: ${TYPOGRAPHY.fontFamily.base};
+
+  padding: 0 1em !important;
+
+  & + button {
+    margin-left: 14px;
+  }
+`;
+
+export const sizeLarge = css`
+  height: ${largeHeight};
+  font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
+`;
+
+export const variantDefault = css`
+  color: ${COLORS.darkFontColor};
+  background-color: ${COLORS.iron};
+
+  &:hover {
+    background-color: #bebebe;
+  }
+`;
+
+export const variantPrimary = css`
+  background-color: ${COLORS.curiousBlue};
+  color: ${COLORS.white};
+
+  &:hover {
+    background-color: #1777c2;
+    color: ${COLORS.white};
+
+    &:disabled {
+      background-color: ${COLORS.curiousBlue} !important;
+    }
+  }
+`;
+
+export const variantDestructive = css`
+  background-color: ${COLORS.red};
+  color: ${COLORS.white};
+
+  &:hover {
+    background-color: #d4464b;
+    color: ${COLORS.white};
+  }
+`;
+
+// todo: remove once globals no longer need to be overridden
+export const disabledOverrides = css`
+  &:disabled,
+  &.disabled {
+    &:hover {
+      // todo: override due to default global styling
+      background-color: ${COLORS.iron} !important;
+
+      &.primary {
+        // todo: override due to default global styling
+        background-color: ${COLORS.curiousBlue} !important;
+      }
+
+      &.destructive {
+        // todo: override due to default global styling
+        background-color: ${COLORS.red} !important;
+      }
+    }
+  }
+`;

package/src/components/buttons/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export { IconButton } from './IconButton';

package/src/components/buttons/types.ts

@@ -0,0 +1,2 @@
+export type ButtonVariant = 'default' | 'primary' | 'destructive';
+export type ButtonSize = 'normal' | 'large';

package/src/components/dropdowns/BorderSelect/BorderSelect.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { BorderSelect } from './BorderSelect';
+
+const meta = {
+  component: BorderSelect,
+  title: 'dropdowns/BorderSelect',
+  argTypes: {},
+  args: {
+    onChange: () => {},
+    options: [
+      { name: 'Andy', value: 'andy' },
+      { name: 'Jess', value: 'jess' },
+      { name: 'Mike', value: 'mike' },
+    ],
+  },
+} satisfies Meta<typeof BorderSelect>;
+
+export default meta;
+type Story = StoryObj<typeof BorderSelect>;
+
+export const Base: Story = {};