@indico-data/design-system 2.43.0 → 2.44.0

package/src/legacy/components/user-feedback/Shrug/Shrug.tsx

@@ -1,45 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/components';
-import { PermafrostComponent } from '@/types';
-
-import { StyledShrug } from './Shrug.styles';
-
-type Props = PermafrostComponent & {
-  actionLink?: string;
-  actionText?: string;
-  buttonAction?(): void;
-  buttonText?: string;
-  message?: string | React.ReactNode;
-  messageProps?: { 'data-cy': string };
-};
-
-export function Shrug(props: Props): React.ReactElement {
-  const { actionLink, actionText, buttonAction, buttonText, className, id, message } = props;
-  return (
-    <StyledShrug className={className} data-cy={props['data-cy']} id={id}>
-      <Icon name="shrug" />
-      {typeof message === 'string' ? (
-        <p className="t-subhead-large" {...props?.messageProps}>
-          {message}
-        </p>
-      ) : (
-        message
-      )}
-      {actionLink && actionText && (
-        <Link to={actionLink} className="button blue cta mt-5">
-          {actionText}
-        </Link>
-      )}
-      {buttonAction && buttonText && (
-        <Button onClick={buttonAction} className="mt-5" variant="cta">
-          {buttonText}
-        </Button>
-      )}
-    </StyledShrug>
-  );
-}

package/src/legacy/components/user-feedback/Shrug/index.ts

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

package/src/legacy/components/user-feedback/index.ts

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

package/src/legacy/styles/globals/buttons.ts

@@ -1,154 +0,0 @@
-import { createGlobalStyle, css } from 'styled-components';
-
-import { COLORS, TYPOGRAPHY, ANIMATION } from '@/legacy/tokens';
-
-const buttonColor = COLORS.darkFontColor;
-const buttonBackground = COLORS.iron;
-
-const buttonDefault = css`
-  appearance: none;
-  background-color: ${buttonBackground};
-  border: 0;
-  border-radius: 2px;
-  color: ${buttonColor};
-  cursor: pointer;
-  display: inline-block;
-  font-family: ${TYPOGRAPHY.fontFamily.base};
-  font-size: ${TYPOGRAPHY.fontSize.base};
-  line-height: 1;
-  padding: ${TYPOGRAPHY.spacing.half} ${TYPOGRAPHY.spacing.base};
-  text-align: center;
-  text-decoration: none;
-  transition: background-color ${ANIMATION.duration} ${ANIMATION.timing};
-  user-select: none;
-  vertical-align: middle;
-  white-space: nowrap;
-  box-shadow: 0 1px 1px 0 ${COLORS.black};
-`;
-
-export const Buttons = createGlobalStyle`
-  button,
-  [type='button'],
-  [type='reset'],
-  [type='submit'],
-  .button {
-    ${buttonDefault}
-
-    &:hover,
-    &:focus {
-      background-color: #bebebe;
-      color: ${buttonColor};
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-
-      background-color: ${COLORS.romanSilver};
-  
-      &:hover {
-        background-color: ${COLORS.romanSilver};
-      }
-    }
-
-    &.red {
-      background-color: ${COLORS.red};
-      color: ${COLORS.hiliteFontColor};
-
-      &:hover {
-        background-color: #ed3c39;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        background-color: ${COLORS.red};
-
-        &:hover {
-          background-color: ${COLORS.red};
-        }
-      }
-
-      &.round:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        background-color: ${COLORS.red};
-
-        &:hover {
-          background-color: ${COLORS.red};
-        }
-      }
-    }
-
-    &.blue {
-      background-color: ${COLORS.curiousBlue};
-      color: ${COLORS.hiliteFontColor};
-
-      &:hover {
-        background-color: #1777c2;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        background-color: #1e88e5;
-
-        &:hover {
-          background-color: #1e88e5;
-        }
-      }
-    }
-
-    &.green {
-      background-color: ${COLORS.green};
-      color: ${COLORS.hiliteFontColor};
-
-      &:hover {
-        background-color: #419a45;
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-        background-color: #419a45;
-
-        &:hover {
-          background-color: #419a45;
-        }
-      }
-    }
-
-    &.cta {
-      font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
-    }
-
-    &.round {
-      border-radius: 50%;
-      padding: 10px;
-    }
-
-    &.link-style {
-      background: none;
-      box-shadow: none;
-      text-decoration: underline;
-      padding: 0;
-      transition: color ${ANIMATION.duration} ${ANIMATION.timing}, text-decoration-color ${ANIMATION.duration} ${ANIMATION.timing};
-      color: ${COLORS.midFontColor};
-      text-decoration-color: currentColor;
-
-      &:hover {
-        text-decoration-color: transparent;
-        color: ${COLORS.defaultFontColor};
-      }
-    }
-
-    .fa-fw {
-      width: 1em;
-      text-align: center;
-    }
-
-    i {
-      display: inline-block;
-      margin-right: 2px;
-    }
-  }
-`;

package/src/legacy/styles/globals/forms.ts

@@ -1,53 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-import { COLORS, TYPOGRAPHY, ANIMATION } from '@/legacy/tokens';
-
-const formBoxShadow = 'inset 0 0 0 rgba(#000, 0)';
-const formBoxShadowFocus = formBoxShadow;
-
-export const Forms = createGlobalStyle`
-  fieldset {
-    background-color: transparent;
-    border: 0;
-    margin: 0;
-    padding: 0;
-  }
-
-  legend {
-    font-weight: 600;
-    margin-bottom: ${TYPOGRAPHY.spacing.quarter};
-    padding: 0;
-  }
-
-  label {
-    display: block;
-    font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-    margin-bottom: ${TYPOGRAPHY.spacing.quarter};
-  }
-
-  input,
-  select,
-  textarea {
-    display: block;
-    font-family: ${TYPOGRAPHY.fontFamily.base};
-    font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-  }
-
-
-
-
-  textarea {
-    resize: vertical;
-  }
-
-  [type="checkbox"],
-  [type="radio"] {
-    display: inline;
-    margin-right: ${TYPOGRAPHY.spacing.quarter};
-  }
-
-  [type="file"] {
-    margin-bottom: ${TYPOGRAPHY.spacing.half};
-    width: 100%;
-  }
-`;

package/src/legacy/styles/globals/index.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { UtilityClasses } from './utility-classes';
-import { Forms } from './forms';
-import { Layout } from './layout';
-import { Lists } from './lists';
-import { Media } from './media';
-import { Tables } from './tables';
-import { Typography } from './typography';
-import { MarginPadding } from './margin-padding';
-
-export const GlobalStyles = () => (
-  <>
-    <UtilityClasses />
-    <Forms />
-    <Layout />
-    <Lists />
-    <Media />
-    <Tables />
-    <Typography />
-    <MarginPadding />
-  </>
-);

package/src/legacy/styles/globals/layout.ts

@@ -1,22 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-export const Layout = createGlobalStyle`
-  html {
-    box-sizing: border-box;
-  }
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: border-box;
-  }
-
-  html,
-  body {
-    height: 100%;
-  }
-
-  body {
-    margin: 0;
-  }
-`;

package/src/legacy/styles/globals/lists.ts

@@ -1,23 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-export const Lists = createGlobalStyle`
-  ul,
-  ol {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  dl {
-    margin: 0;
-  }
-
-  dt {
-    font-weight: 600;
-    margin: 0;
-  }
-
-  dd {
-    margin: 0;
-  }
-`;

package/src/legacy/styles/globals/margin-padding.ts

@@ -1,33 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-import { MARGINS, PADDINGS } from '@/legacy/tokens';
-
-export const MarginPadding = createGlobalStyle`  
-  .pt-md {
-    padding-top: ${PADDINGS.md};
-  }
-  .pt-sm {
-    padding-top: ${PADDINGS.sm};
-  }
-  .pb-md {
-    padding-bottom: ${PADDINGS.md};
-  }
-  .pb-sm {
-    padding-bottom: ${PADDINGS.sm};
-  }
-  .mt-md {
-    margin-top: ${MARGINS.md};
-  }
-  .mt-sm {
-    margin-top: ${MARGINS.sm};
-  }
-  .mb-md {
-    margin-bottom: ${MARGINS.md};
-  }
-  .mb-sm {
-    margin-bottom: ${MARGINS.sm};
-  }
-  .my-md {
-    margin-top: ${MARGINS.md};
-    margin-bottom: ${MARGINS.md};
-  }
-`;

package/src/legacy/styles/globals/media.ts

@@ -1,13 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-export const Media = createGlobalStyle`  
-  figure {
-    margin: 0;
-  }
-
-  img,
-  picture {
-    margin: 0;
-    max-width: 100%;
-  }
-`;

package/src/legacy/styles/globals/tables.ts

@@ -1,30 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-import { TYPOGRAPHY } from '@/legacy/tokens';
-
-export const Tables = createGlobalStyle`
-  table {
-    border-collapse: collapse;
-    margin: ${TYPOGRAPHY.spacing.half} 0;
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  th {
-    font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
-    padding: 20px 15px 5px;
-    font-weight: 400;
-    text-align: left;
-  }
-
-  td {
-    padding: 20px 15px;
-    font-size: ${TYPOGRAPHY.fontSize.base};
-  }
-
-  tr,
-  td,
-  th {
-    vertical-align: middle;
-  }
-`;

package/src/legacy/styles/globals/typography.ts

@@ -1,82 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-import { COLORS, TYPOGRAPHY, ANIMATION } from '@/legacy/tokens';
-
-export const Typography = createGlobalStyle`
-  html {
-    color: ${COLORS.defaultFontColor};
-    font-family: ${TYPOGRAPHY.fontFamily.base};
-    font-size: 100%;
-    line-height: ${TYPOGRAPHY.lineHeight.base};
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-weight: 400;
-    font-style: normal;
-  }
-
-
-
-  h3 {
-    font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
-  }
-
-  h4 {
-    font-size: ${TYPOGRAPHY.fontSize.base};
-    color: ${COLORS.defaultFontColor};
-  }
-
-  h5 {
-    font-size: ${TYPOGRAPHY.fontSize.caption};
-    color: ${COLORS.defaultFontColor};
-  }
-
-  p {
-    margin: 0 0;
-    font-size: ${TYPOGRAPHY.fontSize.base};
-  }
-
-  .t-caption { font-size: ${TYPOGRAPHY.fontSize.caption}; }
-  .t-base { font-size: ${TYPOGRAPHY.fontSize.base}; }
-  .t-subhead-small { font-size: ${TYPOGRAPHY.fontSize.subheadSmall}; }
-  .t-subhead-large { font-size: ${TYPOGRAPHY.fontSize.subheadLarge}; }
-  .t-display { font-size: ${TYPOGRAPHY.fontSize.display}; }
-
-  .t-bold { font-weight: bold; }
-  .t-italic { font-style: italic; }
-
-  .error {
-    color: ${COLORS.red};
-  }
-
-  .prompt {
-    color: ${COLORS.curiousBlue};
-  }
-
-  .warning {
-    color: ${COLORS.yellow};
-  }
-
-  .success {
-    color: ${COLORS.green};
-  }
-
-  a {
-    color: ${COLORS.actionColor};
-    transition: color ${ANIMATION.duration} ${ANIMATION.timing};
-
-    &:active,
-    &:focus,
-    &:hover {
-      color: ${COLORS.defaultFontColor};
-      text-decoration: none;
-    }
-  }
-
-  hr {
-    border-bottom: 1px solid ${COLORS.borderColor};
-    border-left: 0;
-    border-right: 0;
-    border-top: 0;
-    margin: ${TYPOGRAPHY.spacing.base} 0;
-  }
-`;

package/src/legacy/styles/globals/utility-classes.ts

@@ -1,76 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-import { COLORS } from '@/legacy/tokens';
-
-export const UtilityClasses = createGlobalStyle`
-  .link-style {
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  .spin {
-    animation: spin 2s infinite linear;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-  
-  .card-body {
-    background-color: ${COLORS.clay};
-    border-radius: 4px;
-    border: 1px solid ${COLORS.oxfordBlue};
-    padding: 20px;
-    
-    hr {
-    margin: 1.25em 0;
-      border: 1px solid transparent;
-      border-bottom-color: ${COLORS.ebony};
-    }
-  }
-  
-  .scrollable-vertical {
-    overflow: hidden auto;
-  
-    scrollbar-color: ${COLORS.darkGray} transparent;
-    scrollbar-gutter: stable;
-    scrollbar-width: thin;
-  
-    &::-webkit-scrollbar {
-      width: 5px;
-    }
-  
-    &::-webkit-scrollbar-track {
-      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-    }
-  
-    &::-webkit-scrollbar-thumb {
-      background-color: darkgrey;
-      outline: 1px solid slategrey;
-      border-radius: 20px;
-    }
-  }
-
-  .page-bottom {
-    padding-bottom: 20px;
-  }
-
-  .aria-invisible {
-    border: 0; 
-    clip: rect(0 0 0 0); 
-    height: 1px;  
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-  }
-`;

package/src/legacy/styles/index.ts

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

package/src/legacy/tokens/animation.ts

@@ -1,6 +0,0 @@
-// This is used for "micro animations" - general purpose values to give the app a general feel
-// By no means is this the rule for building out custom animations for various parts of the application
-export const animation = {
-  duration: '200ms',
-  timing: 'ease',
-} as const;

package/src/legacy/tokens/breakpoints.ts

@@ -1,11 +0,0 @@
-export const breakpoints = {
-  mediumScreen: '600px',
-  largeScreen: '900px',
-  maxScreen: '1300px',
-} as const;
-
-export const mediaQueries = {
-  mediumScreen: `only screen and (min-width: ${breakpoints.mediumScreen})`,
-  largeScreen: `only screen and (min-width: ${breakpoints.largeScreen})`,
-  maxScreen: `only screen and (min-width: ${breakpoints.maxScreen})`,
-};