@indico-data/design-system 1.0.1

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

@@ -0,0 +1,30 @@
+// 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/components/basic-section/Section/index.ts

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

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

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+import { COLORS } from '@/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/components/basic-section/SectionBlock/SectionBlock.tsx

@@ -0,0 +1,37 @@
+// 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/components/basic-section/SectionBlock/index.ts

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

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

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

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

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+import { COLORS } from '@/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/components/basic-section/SectionBody/SectionBody.tsx

@@ -0,0 +1,30 @@
+// 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/components/basic-section/SectionBody/index.ts

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SectionHeader } from './SectionHeader';
+
+const meta = {
+  component: SectionHeader,
+  title: '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/components/basic-section/SectionHeader/SectionHeader.styles.ts

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

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

@@ -0,0 +1,35 @@
+// 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>
+  );
+};
+
+SectionHeader.defaultProps = {
+  className: '',
+  style: {},
+};

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

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

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

@@ -0,0 +1,237 @@
+import styled, { keyframes } from 'styled-components';
+
+import { colorUtils } from '@indico-data/utils';
+
+import { MEDIA_QUERIES, COLORS } from '@/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;
+      // border-bottom: 0.5px solid ${colorUtils.hexToRgb(COLORS.defaultFontColor, 0.1)};
+      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/components/basic-section/SectionTable/SectionTable.tsx

@@ -0,0 +1,229 @@
+// 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 { Icon, BorderSelect, IconName } from '@/components';
+
+import { StyledSectionTable } from './SectionTable.styles';
+
+const createTitle = (item) => {
+  return typeof item === 'string' || typeof item === 'number' ? item : null;
+};
+
+export const SectionTable = (props) => {
+  const [openRowOptions, changeOpenRowOptions] = useState([]);
+
+  const handleRowClick = (link) => {
+    if (!link) {
+      return null;
+    }
+    return (e) => {
+      e.stopPropagation();
+      props.history.push(link);
+    };
+  };
+
+  const handleRowOptionToggleClick = (id) => {
+    if (openRowOptions.indexOf(id) === -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={[].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, i) => {
+                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) !== -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) !== -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/components/basic-section/SectionTable/index.ts

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

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

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