@indico-data/design-system 2.49.0 → 2.51.0

package/src/components/tanstackTable/styles/_variables.scss

@@ -0,0 +1,35 @@
+// Light Theme Specific Variables
+
+:root [data-theme='light'] {
+  --pf-tanstack-table-background-color: var(--pf-white-color);
+  --pf-tanstack-table-font-color: var(--pf-gray-color);
+  --pf-tanstack-table-border-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-stripe-color: var(--pf-gray-color-100);
+  --pf-tanstack-table-hover-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-disabled-color: var(--pf-gray-color-300);
+  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
+  --pf-tanstack-table-clicked-color: var(--pf-secondary-color-100);
+  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
+    0 8px 16px rgba(0, 0, 0, 0.2);
+  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'],
+:root {
+  --pf-tanstack-table-background-color: var(--pf-primary-color-800);
+  --pf-tanstack-table-font-color: var(--pf-white-color);
+  --pf-tanstack-table-border-color: var(--pf-tertiary-color-800);
+  --pf-tanstack-table-stripe-color: var(--pf-primary-color-700);
+  --pf-tanstack-table-hover-color: var(--pf-primary-color-600);
+  --pf-tanstack-table-disabled-color: var(--pf-gray-color-900);
+  --pf-tanstack-table-disabled-button-color: var(--pf-primary-color-100);
+  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
+  --pf-tanstack-table-clicked-color: var(--pf-primary-color);
+  --pf-tanstack-table-highlighted-color: var(--pf-primary-color);
+  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4),
+    0 8px 16px rgba(0, 0, 0, 0.3);
+  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
+  --pf-tanstack-table-pagination-background-color: var(--pf-primary-color-700);
+}

package/src/components/tanstackTable/styles/table.scss

@@ -0,0 +1,204 @@
+@import './_variables.scss';
+@import './test.scss';
+
+@import '../components/ActionBar/ActionBar.scss';
+@import '../components/NoResults/NoResults.scss';
+
+.tanstack-table__outer-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  .tanstack-table__container {
+    position: relative;
+    display: block;
+    overflow: auto;
+    height: 100%;
+
+    // Webkit scrollbar styles
+    &::-webkit-scrollbar {
+      width: var(--pf-size-2);
+      height: var(--pf-size-2);
+      cursor: pointer;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--pf-tanstack-table-background-color);
+      border-radius: var(--pf-rounded);
+      cursor: pointer;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--pf-tanstack-table-border-color);
+      border-radius: var(--pf-rounded);
+      cursor: pointer;
+      &:hover {
+        background: var(--pf-primary-color);
+      }
+    }
+
+    // Firefox scrollbar styles
+    scrollbar-width: thin;
+    scrollbar-color: var(--pf-tanstack-table-border-color) var(--pf-tanstack-table-background-color);
+  }
+}
+
+.tanstack-table {
+  border-collapse: separate;
+  margin: 0;
+  table-layout: auto;
+  border-spacing: 0;
+  border-radius: var(--pf-rounded-lg);
+  width: 100%;
+
+  &.is-loading {
+    border: var(--pf-border-thin) solid var(--pf-border-color);
+    height: 100%;
+    width: 100%;
+  }
+
+  &__thead {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-sizing: border-box;
+
+    background-color: var(--pf-tanstack-table-background-color);
+
+    tr:first-child {
+      th {
+        &:first-child {
+          border-top-left-radius: var(--pf-rounded-lg);
+        }
+
+        &:last-child {
+          border-top-right-radius: var(--pf-rounded-lg);
+        }
+      }
+    }
+
+    &__th {
+      color: var(--pf-tanstack-table-font-color);
+      background: var(--pf-tanstack-table-background-color);
+      font-size: var(--pf-tanstack-table-font-size);
+      font-weight: var(--pf-font-weight-medium);
+      box-sizing: border-box;
+
+      border-top: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+      border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+      border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+
+      user-select: none;
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      max-width: 300px;
+      width: auto;
+      padding: 0 var(--pf-padding-2);
+      text-align: left;
+
+      &:first-child {
+        border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+      }
+    }
+  }
+
+  &__tbody {
+    tr:last-child {
+      td {
+        &:first-child {
+          border-bottom-left-radius: var(--pf-rounded-lg);
+        }
+
+        &:last-child {
+          border-bottom-right-radius: var(--pf-rounded-lg);
+        }
+      }
+    }
+
+    &__tr {
+      background: transparent;
+      width: 100%;
+
+      &.is-selected {
+        td {
+          background: var(--pf-tanstack-table-checked-color);
+        }
+      }
+
+      &.show-hover {
+        &:hover {
+          td {
+            background-color: var(--pf-tanstack-table-hover-color);
+            cursor: pointer;
+          }
+        }
+      }
+
+      &.is-clicked {
+        td {
+          background-color: var(--pf-tanstack-table-clicked-color);
+        }
+      }
+    }
+
+    &__td {
+      font-size: var(--pf-font-size-base);
+      font-weight: var(--pf-font-weight-medium);
+      color: var(--pf-tanstack-table-font-color);
+      background: var(--pf-tanstack-table-background-color);
+
+      border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+      border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+
+      box-sizing: border-box;
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      padding: 0 var(--pf-padding-2);
+      max-width: 300px;
+      width: auto;
+      text-align: left;
+
+      &:first-child {
+        border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+      }
+    }
+  }
+
+  &__centered-row {
+    padding: var(--pf-padding-1) var(--pf-padding-2);
+    text-align: center;
+    vertical-align: middle;
+    height: 100%;
+    border: var(--pf-border-sm) solid var(--pf-border-color);
+
+    @keyframes shimmer {
+      0% {
+        background-color: var(--pf-primary-color-700) 40;
+      }
+      50% {
+        background-color: var(--pf-primary-color-700);
+      }
+      100% {
+        background-color: var(--pf-primary-color-700) 40;
+      }
+    }
+
+    animation: none;
+
+    &.is-loading {
+      animation: shimmer 3s ease-in-out infinite;
+    }
+
+    svg {
+      margin: 0 auto;
+      display: block;
+    }
+  }
+}

package/src/components/tanstackTable/styles/test.scss

@@ -0,0 +1,19 @@
+.tanstack-table__action-bar-test {
+  left: 20% !important;
+}
+
+.tanstack-table__action-bar-docs {
+  bottom: unset !important;
+  top: 50% !important;
+  transform: translate(-50%, -50%) !important;
+}
+
+.tanstack-table__column {
+  &.is-pinned {
+    opacity: 1;
+  }
+
+  &.is-not-pinned {
+    opacity: 0.3;
+  }
+}

package/src/components/tanstackTable/tanstack-table.d.ts

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import '@tanstack/react-table';
+
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    styles: {
+      definedColumnSize?: boolean;
+      header?: {
+        hasNoPadding?: boolean;
+        textAlign?: 'left' | 'center' | 'right';
+      };
+      cell?: {
+        hasNoPadding?: boolean;
+        textAlign?: 'left' | 'center' | 'right';
+      };
+    };
+  }
+}

package/src/components/tanstackTable/useTanstackTable.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+import { ColumnDef } from '@tanstack/react-table';
+import { useEffect, useMemo } from 'react';
+
+type Props<T> = {
+  defaultColumns: ColumnDef<T>[];
+};
+
+export function useTanstackTable<T>({ defaultColumns }: Props<T>) {
+  const columns = useMemo<ColumnDef<T>[]>(() => defaultColumns, []);
+  const defaultData = useMemo(() => [], []);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [rowSelection, setRowSelection] = useState({});
+  const [formattedColumns, setFormattedColumns] = useState<ColumnDef<T>[]>(columns);
+  const [isClickedRow, setIsClickedRow] = useState<string[]>([]);
+
+  // Tracks changes to browser width to allow for updating of column widths
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return {
+    columns,
+    defaultData,
+    rowSelection,
+    setRowSelection,
+    windowWidth,
+    formattedColumns,
+    setFormattedColumns,
+    isClickedRow,
+    setIsClickedRow,
+  };
+}

package/src/index.ts

@@ -28,6 +28,7 @@ export { Menu } from './components/menu';
 export { Pill } from './components/pill';
 export { Badge } from './components/badge';
 export { Modal } from './components/modal';
+export { TanstackTable } from './components/tanstackTable';
 
 // Utilities
 export { registerFontAwesomeIcons } from './setup/setupIcons';

package/src/legacy/components/loading-indicators/CirclePulse/CirclePulse.tsx

@@ -29,6 +29,7 @@ export function CirclePulse(props: Props): React.ReactElement {
         aria-hidden={true}
         className={className}
         data-cy={props['data-cy']}
+        data-testid={props['data-testid']}
         id={id}
         overallsize={returnSizeString(overallSize)}
         ripplesize={returnSizeString(rippleSize)}

package/src/storybookDocs/Permafrost.mdx

@@ -2,13 +2,16 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="Getting Started" />
 
-# Permafrost 
+# Permafrost
+
 #### Permafrost is the name of our User Interface Design System and Component Library.
+
 Permafrost is utilized in Indico's React projects to ensure a consistent look and feel across our products. It leverages many variables and components that are defined in our design system. We also wrap multiple libraries such as `react-day-picker` or `react-select` to ensure a consistent look and feel.
 
 <div style={{ marginBottom: '3rem' }} />
 
 ## Installation
+
 Indico serves Permafrost as a package on npm. In order to take advantage of it in your project, you can install it by adding the following to your `package.json`:
 
 ```json
@@ -16,16 +19,17 @@ Indico serves Permafrost as a package on npm. In order to take advantage of it i
   "@indico-data/permafrost": "latest" // or the specific version you want
 }
 ```
-After adding the package, import the CSS file to apply Permafrost’s styles to the components.
+
+After adding the package, import the CSS file to apply Permafrost's styles to the components.
 
 ```css
-@import "@indico-data/permafrost/dist/index.css";
+@import '@indico-data/permafrost/dist/index.css';
 ```
 
-
 ## Usage
 
 ### Overriding Variables
+
 You are able to override any of the variables in the design system. We currently support `light` and `dark` themes. If you would like to override a variable in the dark theme, try this approach:
 
 ```css
@@ -37,7 +41,8 @@ You are able to override any of the variables in the design system. We currently
 This pattern applies to all of our variables which you can find in the CSS variables directory in the project.
 
 ### Theming
-In order to switch between the light and dark themes, you can simply add the `data-theme` attribute to the `html` element. *Note* If no theme is provided, it will default to `:root` which is the dark theme.
+
+In order to switch between the light and dark themes, you can simply add the `data-theme` attribute to the `html` element. _Note_ If no theme is provided, it will default to `:root` which is the dark theme.
 
 ```html
 <html data-theme="light">
@@ -47,18 +52,22 @@ In order to switch between the light and dark themes, you can simply add the `da
 
 In the example above, it will leverage the `light` theme to render our styles with the `light mode` variables. It is important to note that while Permafrost natively supports `light` and `dark` values for data-theme, these can be extended and even overridden by your project to support additional themes.
 
-
 ### Importing Components
+
 Using components from Permafrost is as simple as importing them from the package and using them in your project.
 
 ```tsx
-import {Icon} from '@indico-data/design-system';
+import { Icon } from '@indico-data/design-system';
 
-
-<Icon name="indico-o" />
+<Icon name="indico-o" />;
 ```
 
+### Utility Classes
+
+Utility classes are pre-defined CSS classes that provide quick and easy styling options for common design patterns. They help maintain consistency and speed up development by offering ready-to-use styles for margins, typography, and more. For a complete list of available utility classes and their usage, see our [Utility Classes documentation](/docs/utility-classes-overview--docs).
+
 ### CSS Only
+
 We have tried to provide as much support as possible for those who wish to implement Permafrost without using our React components. This is where the CSS only approach comes in. We have wrapped the components in a way that allows you to use the same styles with a different library. In order to use the CSS only approach, you can import the css file that sets the styles for the components.
 
 You can do this by going into the project and running the following command:
@@ -70,11 +79,13 @@ yarn build
 This will create an `index.css` file in the `dist` directory that you can then copy and import into your project.
 
 #### SASS
+
 If you prefer to use SASS, you can copy the entire `/styles` directory and import the `index.scss` file into your project.
 
 **Note:** This will only give you the styling of our design system, none of the interactivity.
 
 ### CSS Only Usage
+
 If you wish to do the CSS only approach, you can do so by applying the CSS classes to your components. For example, if you have an input you wish to have styled with our design system, you can do the following:
 
 ```tsx
@@ -83,10 +94,10 @@ If you wish to do the CSS only approach, you can do so by applying the CSS class
 
 We are as generic as possible with our CSS classes, so you can easily override them if needed.
 
-
 ## Testing
+
 All of our components have been tested with React Testing Library. You can view the tests for each component by looking in the `__tests__` directory in each component. To run them, you can simply run the following command:
 
 ```bash
 yarn jest
-```
+```

package/src/styles/_borders.scss

@@ -3,7 +3,8 @@ $values: var(--pf-border-thin), var(--pf-border-sm), var(--pf-border-md), var(--
   var(--pf-border-xl);
 $directions: ('t', top), ('b', bottom), ('l', left), ('r', right);
 $styles: dashed, dotted, double, solid;
-$color-names: 'primary', 'secondary', 'gray', 'steel', 'green', 'orange', 'red';
+$color-names: 'primary', 'secondary', 'tertiary', 'gray', 'red', 'orange', 'yellow', 'green',
+  'purple';
 $color-grades: '100', '200', '300', '400', '500', '600', '700', '800', '900';
 $radiusSizes: 0, sm, lg, md, xl, pill, circle, shaped;
 $radiusValues: var(--pf-rounded-0), var(--pf-rounded-sm), var(--pf-rounded-md), var(--pf-rounded-lg),

package/src/styles/index.scss

@@ -24,6 +24,7 @@
 @import '../components/badge/styles/Badge.scss';
 @import '../components/modal/styles/Modal.scss';
 @import '../components/pagination/styles/Pagination.scss';
+@import '../components/tanstackTable/styles/table.scss';
 
 @import '../components/pill/styles/Pill.scss';
 @import 'sheets'; // Port to an sheets component when we build it

package/src/stylesAndAnimations/borders/BorderColor.tsx

@@ -18,12 +18,12 @@ export const BorderColor = () => {
         <p className="text-align--center">border-secondary</p>
       </div>
       <div>
-        <div className="sb__square bg-gray-800 border border-lg border-gray"></div>
-        <p className="text-align--center">border-gray</p>
+        <div className="sb__square bg-gray-800 border border-lg border-tertiary"></div>
+        <p className="text-align--center">border-tertiary</p>
       </div>
       <div>
-        <div className="sb__square bg-gray-800 border border-lg border-green"></div>
-        <p className="text-align--center">border-green</p>
+        <div className="sb__square bg-gray-800 border border-lg border-gray"></div>
+        <p className="text-align--center">border-gray</p>
       </div>
       <div>
         <div className="sb__square bg-gray-800 border border-lg border-red"></div>
@@ -34,8 +34,16 @@ export const BorderColor = () => {
         <p className="text-align--center">border-orange</p>
       </div>
       <div>
-        <div className="sb__square bg-gray-800 border border-lg border-steel"></div>
-        <p className="text-align--center">border-steel</p>
+        <div className="sb__square bg-gray-800 border border-lg border-yellow"></div>
+        <p className="text-align--center">border-yellow</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border border-lg border-green"></div>
+        <p className="text-align--center">border-green</p>
+      </div>
+      <div>
+        <div className="sb__square bg-gray-800 border border-lg border-purple"></div>
+        <p className="text-align--center">border-purple</p>
       </div>
     </div>
   );

package/src/stylesAndAnimations/utilityClasses/UtilityClasses.mdx

@@ -0,0 +1,24 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import * as UtilityClassesStories from './UtilityClassesTable.stories';
+
+<Meta title="Utility Classes/Overview" />
+
+# Utility Classes Overview
+
+Utility classes are designed to provide quick and easy styling options for common design patterns. They help maintain consistency and speed up development by offering predefined styles for borders, colors, typography, and more.
+
+## Example Usage
+
+Here's a brief example of how you can use utility classes in your project:
+
+```tsx
+<div className="mb-4 text-uppercase">
+  This will have a bottom margin of 16px and the text will be uppercase
+</div>
+```
+
+**Note:** If you find yourself adding more than a few utility classes to a single element and it starts resembling Tailwind, consider using CSS (styled-components, SCSS, etc.) and leverage the design system variables directly.
+
+## Utility Classes
+
+<Canvas of={UtilityClassesStories.Default} />