@indico-data/design-system 2.43.1 → 2.45.0

package/src/legacy/components/basic-section/SectionTable/SectionTable.styles.ts

@@ -1,236 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-
-import { colorUtils } from '@/legacy/utils';
-
-import { MEDIA_QUERIES, COLORS } from '@/legacy/tokens';
-
-const cardTableLoading = keyframes`
-  25% {
-    left: -50px;
-  }
-  50% {
-    left: calc(100% + 50px);
-  }
-  75% {
-    left: calc(100% + 50px);
-  }
-  100% {
-    left: calc(100% + 50px);
-  }
-`;
-
-export const StyledSectionTable = styled.div`
-  .mobile-sort {
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      display: none;
-    }
-
-    select {
-      max-width: none;
-    }
-  }
-
-  .outer-hover {
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
-  &.loading {
-    margin-top: 50px;
-
-    table {
-      overflow: hidden;
-    }
-  }
-
-  .SectionTable--tbody-loading {
-    tr {
-      margin: 10px 0;
-      border-bottom: 10px solid transparent;
-    }
-
-    td {
-      position: relative;
-      border-bottom: none;
-      height: 73px;
-      background: ${COLORS.mirage};
-
-      &:before {
-        position: absolute;
-        display: block;
-        top: 0;
-        left: -50px;
-        content: '';
-        height: 100%;
-        width: 50px;
-        background: linear-gradient(90deg, ${COLORS.mirage}, #232e3d, ${COLORS.mirage});
-        animation: ${cardTableLoading} 2s infinite;
-        animation-timing-function: linear;
-      }
-    }
-  }
-
-  tbody > tr {
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      &.hover:hover {
-        background: ${COLORS.oxfordBlue};
-        cursor: pointer;
-      }
-    }
-  }
-
-  .action-column {
-    display: none;
-    text-align: center;
-    width: 20px;
-    padding: 20px 5px;
-
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      display: table-cell;
-    }
-  }
-
-  table,
-  thead,
-  tbody,
-  th,
-  td,
-  tr {
-    display: block;
-
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      display: table;
-    }
-
-    .no-link {
-      cursor: default;
-    }
-  }
-
-  thead {
-    display: block;
-
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      display: table-header-group;
-    }
-  }
-
-  th {
-    padding-bottom: 10px;
-    border-bottom: 1px solid #535d6d;
-  }
-
-  th:hover {
-    cursor: pointer;
-  }
-
-  th.not-sortable:hover {
-    cursor: default;
-  }
-
-  tbody {
-    display: block;
-
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      display: table-row-group;
-    }
-  }
-
-  th,
-  td {
-    display: block;
-
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      display: table-cell;
-    }
-  }
-
-  tr {
-    display: block;
-    padding-bottom: 10px;
-
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      display: table-row;
-
-      border-bottom: 0.5px solid ${colorUtils.hexToRgb(COLORS.defaultFontColor, 0.1)};
-    }
-  }
-
-  /* Hide table headers (but not display: none;, for accessibility) */
-  thead tr {
-    position: absolute;
-    top: -9999px;
-    left: -9999px;
-
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      position: static;
-    }
-  }
-
-  tr:nth-child(odd) {
-    background: ${COLORS.oxfordBlue};
-
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      background: transparent;
-    }
-  }
-
-  td {
-    /* Behave  like a "row" */
-    border: none;
-    position: relative;
-    padding-left: 50%;
-    padding-top: 10px;
-    padding-bottom: 5px;
-
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      position: static;
-      padding: 20px 15px;
-    }
-  }
-
-  td:before {
-    /* Now like a table header */
-    position: absolute;
-    /* Top/left values mimic padding */
-    left: 6px;
-    width: 45%;
-    padding-right: 10px;
-    white-space: nowrap;
-    content: attr(data-heading);
-
-    @media ${MEDIA_QUERIES.mediumScreen} {
-      display: none;
-    }
-  }
-
-  td.inner-table-cell {
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-left: 5px;
-    border: none;
-
-    &:before {
-      display: none;
-    }
-  }
-
-  tr.row-option {
-    display: none;
-
-    &.open {
-      display: table-row;
-    }
-  }
-
-  .outer-hover tr {
-    border: none;
-  }
-
-  .outer-hover .hover {
-    border-bottom: 0.5px solid ${colorUtils.hexToRgb(COLORS.defaultFontColor, 0.1)};
-  }
-`;

package/src/legacy/components/basic-section/SectionTable/SectionTable.tsx

@@ -1,233 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React, { useState } from 'react';
-import classNames from 'classnames';
-
-import { IconName } from '@/types';
-import { Icon } from '@/components';
-import { BorderSelect } from '@/legacy/components/dropdowns';
-
-import { StyledSectionTable } from './SectionTable.styles';
-
-const createTitle = (item: any) => {
-  return typeof item === 'string' || typeof item === 'number' ? item : null;
-};
-
-export const SectionTable = (props: any) => {
-  const [openRowOptions, changeOpenRowOptions] = useState([]);
-
-  const handleRowClick = (link: any) => {
-    if (!link) {
-      return null;
-    }
-    return (e: any) => {
-      e.stopPropagation();
-      props.history.push(link);
-    };
-  };
-
-  const handleRowOptionToggleClick = (id: any) => {
-    if (openRowOptions.indexOf(id as never) === -1) {
-      changeOpenRowOptions([].concat(openRowOptions, id));
-    } else {
-      changeOpenRowOptions(openRowOptions.filter((option) => option !== id));
-    }
-    if (props.openRowOptionHandler) {
-      props.openRowOptionHandler(id);
-    }
-  };
-
-  const headers = Object.keys(props.tableObjects[0].content);
-  return (
-    <StyledSectionTable
-      className={classNames('SectionTable', props.className, { loading: props.loading })}
-      data-cy={props['data-cy']}
-      id={props.id}
-    >
-      {props.sortColumnHandler && props.sortedColumn && (
-        <div className="mobile-sort">
-          <BorderSelect
-            onChange={(e) => props.sortColumnHandler(e.target.value)}
-            value={props.sortedColumn}
-            options={([] as { name: string; value: string }[]).concat(
-              { name: 'Choose Sorting Option', value: '' },
-              headers.map((item) => {
-                return { name: item, value: item };
-              }),
-            )}
-          />
-        </div>
-      )}
-      <table {...props.tableProps}>
-        <thead>
-          <tr>
-            {props.tableObjects[0].rowAccordionContent ? <th className="action-column" /> : null}
-            {headers.map((header, i) => {
-              return (
-                <th
-                  className={classNames({
-                    'not-sortable':
-                      props.sortableHeaders && props.sortableHeaders.indexOf(header) === -1,
-                  })}
-                  onClick={() => {
-                    if (props.sortColumnHandler) {
-                      if (props.sortableHeaders) {
-                        if (props.sortableHeaders.indexOf(header) !== -1) {
-                          props.sortColumnHandler(header);
-                        }
-                      } else {
-                        props.sortColumnHandler(header);
-                      }
-                    }
-                  }}
-                  key={i}
-                >
-                  {props.headersContent ? props.headersContent[header] : header}{' '}
-                  {props.sortedColumn === header && (
-                    <Icon name={`fa-caret-${props.sortDirection}` as IconName} />
-                  )}
-                </th>
-              );
-            })}
-          </tr>
-        </thead>
-        <tbody className={classNames({ 'SectionTable--tbody-loading': props.loading })}>
-          {props.loading
-            ? Array.from({ length: 5 }, (x, i) => (
-                <tr key={i}>
-                  {props.tableObjects[0].rowAccordionContent ? (
-                    <td colSpan={headers.length + 1} />
-                  ) : (
-                    <td colSpan={headers.length} />
-                  )}
-                </tr>
-              ))
-            : props.tableObjects.map((obj: any, i: any) => {
-                let rowStyle = obj.rowStyleCondition;
-
-                if (rowStyle) {
-                  rowStyle = { [rowStyle.className]: rowStyle.condition };
-                }
-
-                if (obj.rowAccordionContent) {
-                  return (
-                    <tr key={i} className={classNames(rowStyle)} {...props.rowProps}>
-                      <td
-                        colSpan={headers.length + 1}
-                        style={{ padding: '0' }}
-                        className="outer-hover"
-                      >
-                        <table>
-                          <thead>
-                            <tr>
-                              <th
-                                className="action-column"
-                                style={{
-                                  padding: '0',
-                                  height: '1px',
-                                  border: 'none',
-                                }}
-                              />
-                              {headers.map((e, i) => {
-                                return (
-                                  <th
-                                    key={i}
-                                    style={{
-                                      padding: '0',
-                                      height: '1px',
-                                      border: 'none',
-                                    }}
-                                  />
-                                );
-                              })}
-                            </tr>
-                          </thead>
-                          <tbody>
-                            <tr onClick={() => handleRowOptionToggleClick(obj.id)}>
-                              <td style={{ borderBottom: 'none' }} className="action-column">
-                                <Icon
-                                  name="chevron-down"
-                                  style={{
-                                    transform:
-                                      openRowOptions.indexOf(obj.id as never) !== -1
-                                        ? 'rotate(180deg)'
-                                        : '',
-                                  }}
-                                />
-                              </td>
-                              {Object.keys(obj.content).map((key, i) => {
-                                return (
-                                  <td
-                                    key={i}
-                                    style={{
-                                      borderBottom: 'none',
-                                    }}
-                                    data-heading={headers[i]}
-                                    title={createTitle(obj.content[key])}
-                                    {...props?.headingProps?.[headers?.[i]]}
-                                  >
-                                    {obj.content[key]}
-                                  </td>
-                                );
-                              })}
-                            </tr>
-                            <tr
-                              className={classNames('row-option', {
-                                open: openRowOptions.indexOf(obj.id as never) !== -1,
-                              })}
-                            >
-                              <td className="inner-table-cell" colSpan={headers.length + 1}>
-                                {obj.rowAccordionContent}
-                              </td>
-                            </tr>
-                          </tbody>
-                        </table>
-                      </td>
-                    </tr>
-                  );
-                } else if (obj.lineItemLink) {
-                  return (
-                    <tr
-                      key={i}
-                      onClick={handleRowClick(obj.lineItemLink)}
-                      className={classNames('hover', rowStyle)}
-                      {...props.rowProps}
-                    >
-                      {Object.keys(obj.content).map((key, i) => {
-                        return (
-                          <td
-                            key={i}
-                            data-heading={headers[i]}
-                            title={createTitle(obj.content[key])}
-                            {...props?.headingProps?.[headers?.[i]]}
-                          >
-                            {obj.content[key]}
-                          </td>
-                        );
-                      })}
-                    </tr>
-                  );
-                } else {
-                  return (
-                    <tr key={i} className={classNames(rowStyle)} {...props.rowProps}>
-                      {Object.keys(obj.content).map((key, i) => {
-                        return (
-                          <td
-                            key={i}
-                            data-heading={headers[i]}
-                            title={createTitle(obj.content[key])}
-                            {...props?.headingProps?.[headers?.[i]]}
-                          >
-                            {obj.content[key]}
-                          </td>
-                        );
-                      })}
-                    </tr>
-                  );
-                }
-              })}
-        </tbody>
-      </table>
-    </StyledSectionTable>
-  );
-};

package/src/legacy/components/basic-section/SectionTable/index.ts

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

package/src/legacy/components/basic-section/index.ts

@@ -1,5 +0,0 @@
-export { Section } from './Section';
-export { SectionBlock } from './SectionBlock';
-export { SectionBody } from './SectionBody';
-export { SectionHeader } from './SectionHeader';
-export { SectionTable } from './SectionTable';

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

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Button } from './Button';
-
-const meta = {
-  component: Button,
-  title: 'legacy/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/legacy/components/buttons/Button/Button.styles.ts

@@ -1,99 +0,0 @@
-import styled from 'styled-components';
-
-import { ANIMATION, COLORS, TYPOGRAPHY } from '@/legacy/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;
-  }
-`;