@indico-data/design-system 2.43.0 → 2.44.0

package/src/legacy/components/Toggle/Toggle.styles.ts

@@ -1,86 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS } from '@/legacy/tokens';
-
-export const StyledToggle = styled.label`
-  position: relative;
-  display: inline-block;
-  width: 28px;
-  height: 18px;
-  border: 2px solid ${COLORS.defaultFontColor};
-  border-radius: 34px;
-  margin-bottom: 0;
-  cursor: pointer;
-
-  & input {
-    display: none;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .slider {
-    position: absolute;
-    top: 0;
-    left: -1px;
-    right: 0;
-    bottom: 0;
-    transition: 0.4s;
-    border-radius: 34px;
-  }
-
-  .slider:before {
-    position: absolute;
-    content: '';
-    height: 17px;
-    width: 17px;
-    left: -1px;
-    bottom: -1px;
-    background-color: ${COLORS.clay};
-    transition: 0.4s;
-    border: 2px solid ${COLORS.defaultFontColor};
-    border-radius: 50%;
-  }
-
-  input:checked + .slider {
-    background-color: ${COLORS.defaultFontColor};
-    width: 100%;
-  }
-
-  input:checked + .slider:before {
-    transform: translateX(12px);
-  }
-
-  p {
-    position: relative;
-    left: 35px;
-    bottom: 2px;
-  }
-
-  .checked-icon,
-  .not-checked-icon {
-    position: absolute;
-    pointer-events: none;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .checked-icon {
-    color: #fff;
-    display: none;
-    left: 3px;
-  }
-
-  .not-checked-icon {
-    right: 3px;
-  }
-
-  input:checked ~ .not-checked-icon {
-    display: none;
-  }
-  input:checked ~ .checked-icon {
-    display: block;
-  }
-`;

package/src/legacy/components/Toggle/Toggle.tsx

@@ -1,69 +0,0 @@
-// 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 { Icon } from '@/components';
-import { PermafrostComponent, IconName, IconSizes } from '@/types';
-import { StyledToggle } from './Toggle.styles';
-
-type Props = {
-  disabled: boolean;
-  onChange: any;
-  value: boolean;
-  ['aria-label']?: string;
-  iconSize?: IconSizes;
-  checkedIconName?: IconName;
-  notCheckedIconName?: IconName;
-} & PermafrostComponent;
-
-export const Toggle = (props: Props) => {
-  const {
-    disabled,
-    onChange,
-    value,
-    className,
-    id,
-    checkedIconName,
-    notCheckedIconName,
-    iconSize,
-  } = props;
-
-  const defaultIconStyle = { width: '5px', height: '5px' };
-
-  return (
-    <StyledToggle
-      className={classNames(className, {
-        disabled,
-      })}
-      data-cy={props['data-cy']}
-      id={id}
-    >
-      <input
-        aria-label={props['aria-label']}
-        type="checkbox"
-        disabled={disabled}
-        checked={value}
-        onChange={onChange}
-      />
-      <span className="slider round" />
-
-      {checkedIconName && (
-        <Icon
-          size={iconSize}
-          name={checkedIconName}
-          className="checked-icon"
-          style={iconSize ? undefined : defaultIconStyle}
-        />
-      )}
-      {notCheckedIconName && (
-        <Icon
-          size={iconSize}
-          name={notCheckedIconName}
-          className="not-checked-icon"
-          style={iconSize ? undefined : defaultIconStyle}
-        />
-      )}
-    </StyledToggle>
-  );
-};

package/src/legacy/components/Toggle/index.ts

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

package/src/legacy/components/basic-section/Section/Section.stories.tsx

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Section } from './Section';
-
-const meta = {
-  component: Section,
-  title: 'legacy/Basic Section/Section',
-  argTypes: {},
-} satisfies Meta<typeof Section>;
-
-export default meta;
-type Story = StoryObj<typeof Section>;
-
-export const Normal: Story = {};

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

@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledSection = styled.article`
-  position: relative;
-  float: left;
-  margin-bottom: 20px;
-  width: 100%;
-`;

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

@@ -1,30 +0,0 @@
-// 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 { PermafrostComponent } from '@/types';
-
-import { StyledSection } from './Section.styles';
-
-type Props = PermafrostComponent & {
-  style?: object;
-  children: React.ReactNode;
-};
-
-export const Section = (props: Props) => {
-  const { className, style = {}, children, id, ...restOfProps } = props;
-
-  return (
-    <StyledSection
-      className={classNames('Section', className)}
-      data-cy={props['data-cy']}
-      id={id}
-      style={style}
-      {...restOfProps}
-    >
-      {children}
-    </StyledSection>
-  );
-};

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

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

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

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS } from '@/legacy/tokens';
-
-export const StyledSectionBlock = styled.div`
-  h3 {
-    margin: 24px 0 31px;
-  }
-
-  hr {
-    width: 100%;
-    border-bottom: 1px solid ${COLORS.ebony};
-    margin: 27px 0 1px;
-  }
-`;

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

@@ -1,37 +0,0 @@
-// 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 { PermafrostComponent } from '@/types';
-
-import { StyledSectionBlock } from './SectionBlock.styles';
-
-type Props = PermafrostComponent & {
-  title?: string;
-  style?: object;
-  children: React.ReactNode;
-};
-
-export const SectionBlock = (props: Props) => {
-  const { title, className, children, id, style = {}, ...restOfProps } = props;
-
-  return (
-    <StyledSectionBlock
-      className={classNames('SectionBlock', className)}
-      data-cy={props['data-cy']}
-      id={id}
-      style={style}
-      {...restOfProps}
-    >
-      {title ? (
-        <header>
-          <h3>{title}</h3>
-        </header>
-      ) : null}
-      {children}
-      <hr className="section-bottom-border" />
-    </StyledSectionBlock>
-  );
-};

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

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

package/src/legacy/components/basic-section/SectionBody/SectionBody.stories.tsx

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { SectionBody } from './SectionBody';
-
-const meta = {
-  component: SectionBody,
-  title: 'legacy/Basic Section/SectionBody',
-  argTypes: {},
-} satisfies Meta<typeof SectionBody>;
-
-export default meta;
-type Story = StoryObj<typeof SectionBody>;
-
-export const Normal: Story = {
-  args: {},
-};

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

@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-import { COLORS } from '@/legacy/tokens';
-
-const sectionSidePadding = '19px';
-
-export const StyledSectionBody = styled.div`
-  background: ${COLORS.clay};
-  border-radius: 4px;
-  border: 1px solid #333d4c;
-  padding: 0 ${sectionSidePadding};
-
-  .SectionBody:last-of-type {
-    .section-bottom-border {
-      border-bottom: none;
-    }
-  }
-`;

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

@@ -1,30 +0,0 @@
-// 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 { PermafrostComponent } from '@/types';
-
-import { StyledSectionBody } from './SectionBody.styles';
-
-export type SectionBodyProps = PermafrostComponent & {
-  style?: object;
-  children: React.ReactNode;
-};
-
-export const SectionBody = (props: SectionBodyProps) => {
-  const { className, style = {}, children, id, ...restOfProps } = props;
-
-  return (
-    <StyledSectionBody
-      className={classNames('SectionBody', className)}
-      data-cy={props['data-cy']}
-      id={id}
-      style={style}
-      {...restOfProps}
-    >
-      {children}
-    </StyledSectionBody>
-  );
-};

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

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

package/src/legacy/components/basic-section/SectionHeader/SectionHeader.stories.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { SectionHeader } from './SectionHeader';
-
-const meta = {
-  component: SectionHeader,
-  title: 'legacy/Basic Section/SectionHeader',
-  argTypes: {},
-} satisfies Meta<typeof SectionHeader>;
-
-export default meta;
-type Story = StoryObj<typeof SectionHeader>;
-
-export const Normal: Story = {
-  args: { children: <div>Section Header</div> },
-};

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

@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledSectionHeader = styled.header`
-  padding: 23px 0 18px;
-`;

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

@@ -1,30 +0,0 @@
-// 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 { PermafrostComponent } from '@/types';
-
-import { StyledSectionHeader } from './SectionHeader.styles';
-
-type Props = PermafrostComponent & {
-  style?: object;
-  children?: React.ReactNode;
-};
-
-export const SectionHeader = (props: Props) => {
-  const { className = '', style = {}, children, id, ...restOfProps } = props;
-
-  return (
-    <StyledSectionHeader
-      className={classNames('SectionHeader', className)}
-      data-cy={props['data-cy']}
-      id={id}
-      style={style}
-      {...restOfProps}
-    >
-      {children}
-    </StyledSectionHeader>
-  );
-};

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

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

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)};
-  }
-`;