@indico-data/design-system 1.0.1

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

@@ -0,0 +1,6 @@
+export { CircleSpinner } from './CircleSpinner';
+export { BarSpinner } from './BarSpinner';
+export { CirclePulse } from './CirclePulse';
+export { RandomLoadingMessage } from './RandomLoadingMessage';
+export { PercentageRing } from './PercentageRing';
+export { LoadingList } from './LoadingList';

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Shrug } from './Shrug';
+
+const meta = {
+  component: Shrug,
+  title: 'User Feedback/Shrug',
+  argTypes: {},
+  args: {
+    message: 'There are no workflows associated with this dataset.',
+  },
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+} satisfies Meta<typeof Shrug>;
+
+export default meta;
+type Story = StoryObj<typeof Shrug>;
+
+export const MessageOnly: Story = {};
+
+export const WithButtonAction: Story = {
+  args: { buttonText: 'Do something', buttonAction: () => {} },
+};
+
+export const WithLinkAction: Story = {
+  args: { actionText: 'Go back', actionLink: 'https://indico.io' },
+};
+
+export const ComponentMessage: Story = {
+  args: { message: <h2>Hello there! I'm an element</h2> },
+};

package/src/components/user-feedback/Shrug/Shrug.styles.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+import { COLORS, TYPOGRAPHY } from '@/tokens';
+
+export const StyledShrug = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 2em;
+
+  font-size: ${TYPOGRAPHY.fontSize.subheadLarge};
+
+  p {
+    font-size: inherit;
+    margin-top: 2em;
+  }
+
+  svg {
+    fill: ${COLORS.iron};
+    opacity: 0.5;
+  }
+`;

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

@@ -0,0 +1,44 @@
+// 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, 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" size={['260px', '84px']} />
+      {typeof message === 'string' ? (
+        <p className="t-subhead-large" {...props?.messageProps}>
+          {message}
+        </p>
+      ) : (
+        message
+      )}
+      {actionLink && actionText && (
+        <Link to={actionLink} className="button blue cta" style={{ marginTop: '20px' }}>
+          {actionText}
+        </Link>
+      )}
+      {buttonAction && buttonText && (
+        <Button onClick={buttonAction} style={{ marginTop: '20px' }} variant="cta">
+          {buttonText}
+        </Button>
+      )}
+    </StyledShrug>
+  );
+}

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

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

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

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

package/src/index.tsx

@@ -0,0 +1,18 @@
+import React, { StrictMode } from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+
+const root = ReactDOMClient.createRoot(document.body);
+
+function App() {
+  return (
+    <div>
+      <h1>Hello</h1>
+    </div>
+  );
+}
+
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

package/src/styles/globals/buttons.ts

@@ -0,0 +1,154 @@
+import { createGlobalStyle, css } from 'styled-components';
+
+import { COLORS, TYPOGRAPHY, ANIMATION } from '@/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/styles/globals/forms.ts

@@ -0,0 +1,103 @@
+import { createGlobalStyle } from 'styled-components';
+
+import { COLORS, TYPOGRAPHY, ANIMATION } from '@/tokens';
+import { colorUtils } from '@indico-data/utils';
+
+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};
+  }
+
+  [type='color'],
+  [type='date'],
+  [type='datetime'],
+  [type='datetime-local'],
+  [type='email'],
+  [type='month'],
+  [type='number'],
+  [type='password'],
+  [type='search'],
+  [type='tel'],
+  [type='text'],
+  [type='time'],
+  [type='url'],
+  [type='week'],
+  input:not([type]),
+  textarea {
+    appearance: none;
+    background-color: ${COLORS.clay};
+    border: ${COLORS.clay};
+    border-radius: 2px;
+    box-shadow: ${formBoxShadow};
+    box-sizing: border-box;
+    color: ${COLORS.defaultFontColor};
+    margin-bottom: ${TYPOGRAPHY.spacing.half};
+    padding: ${TYPOGRAPHY.spacing.third};
+    transition: border-color ${ANIMATION.duration} ${ANIMATION.timing};
+    width: 100%;
+
+    &:hover {
+      // border-color: ${colorUtils.shade(COLORS.borderColor, 20)};
+    }
+
+    &:focus {
+      border-color: ${COLORS.actionColor};
+      box-shadow: ${formBoxShadowFocus};
+      outline: none;
+    }
+
+    &:disabled {
+      // background-color: ${colorUtils.shade(COLORS.backgroundColor, 5)};
+      cursor: not-allowed;
+
+      &:hover {
+        border: 1px solid ${COLORS.lightGray};
+      }
+    }
+
+    &::placeholder {
+      // color: ${colorUtils.tint(COLORS.defaultFontColor, 40)};
+    }
+  }
+
+  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/styles/globals/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { UtilityClasses } from './utility-classes';
+import { Forms } from './forms';
+import { Buttons } from './buttons';
+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 />
+    <Buttons />
+    <Forms />
+    <Layout />
+    <Lists />
+    <Media />
+    <Tables />
+    <Typography />
+    <MarginPadding />
+  </>
+);

package/src/styles/globals/layout.ts

@@ -0,0 +1,25 @@
+import { createGlobalStyle } from 'styled-components';
+
+import { allColors } from '@/tokens/colors';
+
+export const Layout = createGlobalStyle`
+  html {
+    box-sizing: border-box;
+  }
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    height: 100%;
+  }
+
+  body {
+    margin: 0;
+    background-color: var(${allColors.backgroundColor});
+  }
+`;

package/src/styles/globals/lists.ts

@@ -0,0 +1,23 @@
+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/styles/globals/margin-padding.ts

@@ -0,0 +1,33 @@
+import { createGlobalStyle } from 'styled-components';
+import { MARGINS, PADDINGS } from '@/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/styles/globals/media.ts

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

package/src/styles/globals/tables.ts

@@ -0,0 +1,34 @@
+import { createGlobalStyle } from 'styled-components';
+
+import { colorUtils } from '@indico-data/utils';
+
+import { COLORS, TYPOGRAPHY } from '@/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};
+    // border-bottom: 0.5px solid ${colorUtils.hexToRgb(COLORS.defaultFontColor, 0.1)};
+    padding: 20px 15px 5px;
+    font-weight: 400;
+    text-align: left;
+  }
+
+  td {
+    // border-bottom: 0.5px solid ${colorUtils.hexToRgb(COLORS.defaultFontColor, 0.1)};
+    padding: 20px 15px;
+    font-size: ${TYPOGRAPHY.fontSize.base};
+  }
+
+  tr,
+  td,
+  th {
+    vertical-align: middle;
+  }
+`;

package/src/styles/globals/typography.ts

@@ -0,0 +1,95 @@
+import { createGlobalStyle } from 'styled-components';
+
+import { COLORS, TYPOGRAPHY, ANIMATION } from '@/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;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: ${TYPOGRAPHY.fontFamily.base};
+    font-size: ${TYPOGRAPHY.fontSize.display};
+    line-height: ${TYPOGRAPHY.lineHeight.heading};
+    margin: 0 0 10px;
+    color: ${COLORS.lightGray};
+    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;
+  }
+`;