@indico-data/design-system 1.0.57 → 2.0.0

package/src/components/grid/row/Row.mdx

@@ -0,0 +1,56 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as RowStories from './Row.stories';
+import '@/components/grid/Grid.scss';
+
+<Meta title="Layout/Grid" name="Row" />
+
+# Row
+
+This section provides documentation for the Row component, a flexible wrapper around the `react-grid-system` library's `Row` component. It facilitates the creation of responsive, horizontally aligned groups of columns, suitable for building structured layouts.
+
+## Default Row Configuration
+
+The Row component in its default configuration is used to group columns effectively, ensuring they align properly in a horizontal layout.
+
+<Canvas
+  of={RowStories.Default}
+  source={{
+    code: `
+ <Container fluid>
+    <Row className="sb__sample-row">
+        <Col>
+            <div className="sb__sample-cell" />
+        </Col>
+        <Col>
+            <div className="sb__sample-cell-red" />
+        </Col>
+        <Col>
+            <div className="sb__sample-cell-green" />
+        </Col>
+    </Row>
+</Container>`,
+  }}
+/>
+
+## Props Documentation
+
+Explore the properties of the Row component interactively below. Adjust different props to see how they influence the layout and behavior of the Row.
+
+<Controls of={RowStories.Default} />
+
+## Comprehensive Properties List
+
+The `Row` component accepts the following properties to control its behavior and styling:
+
+- **`children`** (node): Content of the element.
+- **`align`** (enum): Vertical alignment of children within the row. Options: 'normal', 'start', 'center', 'end', 'stretch'.
+- **`component`** (elementType): Use your own component instead of the default 'div'.
+- **`debug`** (bool): Set to apply some debug styling.
+- **`direction`** (enum): Flex-direction style attribute. Options: 'column', 'row', 'column-reverse', 'row-reverse'.
+- **`gutterWidth`** (number): Custom gutter width for this row.
+- **`justify`** (enum): Horizontal column alignment. Options: 'start', 'center', 'end', 'between', 'around', 'initial', 'inherit'.
+- **`nogutter`** (bool): If true, removes the gutters (padding) between columns.
+- **`style`** (object): Inline styles that can be passed to the row for additional styling.
+- **`wrap`** (enum): Flex-wrap style attribute. Options: 'nowrap', 'wrap', 'reverse'.
+
+Each property allows for granular control of the row's appearance and behavior, making the `Row` component highly customizable and versatile for various layout needs.For more information see the [react-grid-system documentation](https://sealninja.github.io/react-grid-system/#row).

package/src/components/grid/row/Row.stories.tsx

@@ -0,0 +1,99 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Row } from './Row';
+import { Col } from '../col/Col';
+import { Container } from 'react-grid-system';
+
+const meta: Meta = {
+  title: 'remove/grid/row',
+  component: Row,
+  argTypes: {
+    align: {
+      control: 'select',
+      options: ['normal', 'start', 'center', 'end', 'stretch'],
+      description: 'Vertical column alignment',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'normal | start | center | end | stretch' },
+        defaultValue: { summary: 'normal' },
+      },
+    },
+    debug: {
+      control: 'boolean',
+      description: 'Set to apply some debug styling',
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    direction: {
+      control: 'select',
+      options: ['column', 'row', 'column-reverse', 'row-reverse'],
+      description: 'Flex-direction style attribute',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'column | row | column-reverse | row-reverse' },
+        defaultValue: { summary: 'row' },
+      },
+    },
+    justify: {
+      control: 'select',
+      options: ['start', 'center', 'end', 'between', 'around', 'initial', 'inherit'],
+      description: 'Horizontal column alignment',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'start | center | end | between | around | initial | inherit' },
+        defaultValue: { summary: 'start' },
+      },
+    },
+    nogutter: {
+      control: 'boolean',
+      description: 'No gutter for this row',
+      type: { name: 'boolean', required: false },
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    wrap: {
+      control: 'select',
+      options: ['nowrap', 'wrap', 'wrap-reverse'],
+      description: 'Flex-wrap style attribute',
+      type: { name: 'string', required: false },
+      table: {
+        type: { summary: 'nowrap | wrap | wrap-reverse' },
+        defaultValue: { summary: 'wrap' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Row>;
+
+export const Default: Story = {
+  args: {
+    align: 'normal',
+    debug: false,
+    direction: 'row',
+    justify: 'start',
+    nogutter: false,
+    wrap: 'wrap',
+  },
+  render: ({ ref: _ref, ...rest }) => (
+    <Container fluid>
+      <Row {...rest} className="sb__sample-row">
+        <Col>
+          <div className="sb__sample-cell" />
+        </Col>
+        <Col>
+          <div className="sb__sample-cell-red" />
+        </Col>
+        <Col>
+          <div className="sb__sample-cell-green" />
+        </Col>
+      </Row>
+    </Container>
+  ),
+};

package/src/components/grid/row/Row.tsx

@@ -0,0 +1,5 @@
+import { Row as RgsRow, RowProps } from 'react-grid-system';
+
+export const Row = ({ ref: _ref, ...rest }: RowProps) => {
+  return <RgsRow {...rest} />;
+};

package/src/components/index.ts

@@ -1,39 +1,2 @@
-import { Tooltip } from 'react-aria-components';
-
-export { Accordion } from './Accordion';
-export { Section, SectionBlock, SectionBody, SectionHeader, SectionTable } from './basic-section';
-export { Button, IconButton } from './buttons';
-export { BorderSelect, MultiCombobox, Select, SingleCombobox } from './dropdowns';
-export { Icon, faIcons, indicons } from './Icon';
-export {
-  EditableInput,
-  NumberInput,
-  SearchInput,
-  TextInput,
-  Radio,
-  RadioGroup,
-  AbstractRadio,
-  AbstractRadioGroup,
-  DatePicker,
-  NoInputDatePicker,
-} from './inputs';
-export {
-  BarSpinner,
-  CirclePulse,
-  CircleSpinner,
-  LoadingList,
-  PercentageRing,
-  RandomLoadingMessage,
-  LoadingIndicator,
-} from './loading-indicators';
-export { ListTable } from './ListTable';
-export { Pagination } from './Pagination';
-export { Shrug } from './user-feedback';
-export { ConfirmModal, ModalBase } from './modals';
-export { LoadingAwareContainer } from './LoadingAwareContainer';
-export { Wizard, WizardCard, WizardSection, StyledWizard } from './Wizard';
-export { WizardWithSidebar } from './WizardWithSidebar';
-export { Drawer } from './Navigation/Drawer';
-export { TextTruncate } from './text-truncate';
-export { Toggle } from './Toggle';
-export { Tooltip } from './Tooltip';
+export { Container, Col, Row } from './grid';
+export { Button } from './button';

package/src/index.ts

@@ -1,7 +1,8 @@
-export { GlobalStyles } from './styles/globals/index';
+import './styles/index.scss';
 
-export { faIcons } from './components/Icon/faIcons';
-export { indicons } from './components/Icon/indicons';
+export { GlobalStyles } from './legacy/styles/globals/index';
+export { faIcons } from './legacy/components/Icon/faIcons';
+export { indicons } from './legacy/components/Icon/indicons';
 
 export {
   ANIMATION,
@@ -13,7 +14,7 @@ export {
   PADDINGS,
   SPACING,
   TYPOGRAPHY,
-} from './tokens';
+} from './legacy/tokens';
 
 export {
   AbstractRadio,
@@ -21,7 +22,7 @@ export {
   Accordion,
   BarSpinner,
   BorderSelect,
-  Button,
+  Button as LegacyButton,
   CirclePulse,
   CircleSpinner,
   ConfirmModal,
@@ -60,6 +61,10 @@ export {
   Toggle,
   Tooltip,
   WizardWithSidebar,
-} from './components';
+} from './legacy/components';
 
-export { numberUtils, stringUtils, colorUtils } from './utils';
+export { numberUtils, stringUtils, colorUtils } from './legacy/utils';
+
+// New Components
+export { Container, Row, Col } from './components/grid';
+export { Button } from './components/button';

package/src/{components → legacy/components}/Accordion/Accordion.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button } from '@/components';
+import { Button } from '@/legacy/components';
 import { Accordion } from './Accordion';
 
 const content = (
@@ -28,7 +28,7 @@ const content = (
 
 const meta = {
   component: Accordion,
-  title: 'Accordion',
+  title: 'legacy/Accordion',
   argTypes: {},
   decorators: [
     (Story) => (

package/src/{components → legacy/components}/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { Icon } from '@/components/Icon';
+import { Icon } from '@/legacy/components/Icon';
 import { PermafrostComponent } from '@/types';
 
 import { StyledAccordion } from './Accordion.styles';

package/src/{components → legacy/components}/Icon/Icon.stories.tsx

@@ -12,7 +12,7 @@ const faIconsOptions: IconName[] = Object.keys(faIcons) as IconName[];
 
 const meta = {
   component: Icon,
-  title: 'Icon',
+  title: 'legacy/Icon',
   argTypes: {
     ariaLabel: { control: { disable: true } },
     size: { description: '[value] or [height, width]' },

package/src/{components → legacy/components}/Icon/storyHelpers.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { IconName } from '@/types';
-import { COLORS, TYPOGRAPHY } from '@/tokens';
+import { COLORS, TYPOGRAPHY } from '@/legacy/tokens';
 
 import { Icon } from './Icon';
 

package/src/{components → legacy/components}/ListTable/Header/Header.styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { COLORS } from '@/tokens';
+import { COLORS } from '@/legacy/tokens';
 
 export const StyledHeader = styled.header`
   display: flex;

package/src/{components → legacy/components}/ListTable/Header/Header.tsx

@@ -2,11 +2,11 @@
 
 import React from 'react';
 
-import { numberUtils } from '@/utils';
+import { numberUtils } from '@/legacy/utils';
 
-import { BorderSelect } from '@/components/dropdowns';
-import { Button } from '@/components/buttons';
-import { Icon } from '@/components/Icon';
+import { BorderSelect } from '@/legacy/components/dropdowns';
+import { Button } from '@/legacy/components/buttons';
+import { Icon } from '@/legacy/components/Icon';
 
 import { StyledHeader } from './Header.styles';
 

package/src/{components → legacy/components}/ListTable/ListTable.stories.tsx

@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button, Icon } from '@/components';
+import { Button, Icon } from '@/legacy/components';
 
 import { ListTable } from './ListTable';
 import { mockUserHeaders, mockDocProcHeaders, mockAllUsers, mockDocProcReport } from './mock-data';
 
 const meta = {
   component: ListTable,
-  title: 'ListTable',
+  title: 'legacy/ListTable',
   argTypes: {},
 } satisfies Meta<typeof ListTable>;
 

package/src/{components → legacy/components}/ListTable/ListTable.styles.ts

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import { COLORS } from '@/tokens';
+import { COLORS } from '@/legacy/tokens';
 
 export const StyledListTable = styled.div`
   .list {

package/src/{components → legacy/components}/ListTable/ListTable.tsx

@@ -3,11 +3,11 @@
 import React from 'react';
 import { v4 as uuid } from 'uuid';
 
-import { Pagination } from '@/components/Pagination';
-import { Accordion } from '@/components/Accordion';
-import { LoadingList } from '@/components/loading-indicators';
-import { Shrug } from '@/components/user-feedback';
-import { SectionBody } from '@/components/basic-section';
+import { Pagination } from '@/legacy/components/Pagination';
+import { Accordion } from '@/legacy/components/Accordion';
+import { LoadingList } from '@/legacy/components/loading-indicators';
+import { Shrug } from '@/legacy/components/user-feedback';
+import { SectionBody } from '@/legacy/components/basic-section';
 
 import { PermafrostComponent } from '@/types';
 

package/src/{components → legacy/components}/LoadingAwareContainer/LoadingAwareContainer.stories.tsx

@@ -5,7 +5,7 @@ import { LoadingAwareContainer } from './LoadingAwareContainer';
 
 const meta = {
   component: LoadingAwareContainer,
-  title: 'LoadingAwareContainer',
+  title: 'legacy/LoadingAwareContainer',
   argTypes: {
     className: { control: { disable: true } },
     style: { control: { disable: true } },

package/src/{components → legacy/components}/LoadingAwareContainer/LoadingAwareContainer.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { LoadingIndicator } from '@/components';
+import { LoadingIndicator } from '@/legacy/components';
 
 import { StyledLoadingAwareContainer, StyledStatusContainer } from './LoadingAwareContainer.styles';
 

package/src/{components/Navigation/Drawer/Drawer.styles.ts → legacy/components/Navigation/Drawer/Drawer.scss}

@@ -1,12 +1,7 @@
-import styled from 'styled-components';
 
-type Props = {
-  $collapsedWidth?: string;
-  $expandedWidth?: string;
-};
-const fullViewportHeightMinusOffset = 'calc(100% - 42px)';
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
-export const StyledDrawer = styled.div<Props>`
+.pf__drawer__wrapper {
   color: #444444;
   background-color: white;
   box-sizing: border-box;
@@ -16,23 +11,23 @@ export const StyledDrawer = styled.div<Props>`
   box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
   overflow: hidden;
   width: 100%;
-  max-width: ${(props: Props) => (props.$expandedWidth ? `${props.$expandedWidth}px` : '300px')};
-  a:active,
-  a:visited,
+
+  .pf__drawer__header__logo-text {
+    font-family: 'Poppins', sans-serif;
+    font-weight: 600;
+  }
+
   a:link {
     color: #444444;
   }
+
   a {
     color: #444444;
     text-decoration: none;
   }
 
-  .drawer__wrapper {
-    width: 100%;
-    height: 100%;
-  }
 
-  .drawer__header {
+  .pf__drawer__header {
     margin-bottom: 30px;
     color: black;
     display: flex;
@@ -40,7 +35,7 @@ export const StyledDrawer = styled.div<Props>`
     padding-left: 10px;
     white-space: nowrap;
 
-    .drawer__header__text {
+    .pf__drawer__header__text {
       overflow: hidden;
       transition: opacity 0.2s ease-in-out;
     }
@@ -52,24 +47,15 @@ export const StyledDrawer = styled.div<Props>`
 
     p {
       font-size: 20px;
-      font-weight: 500;
       margin: 0 0 0 12px;
     }
   }
 
-  .drawer__content {
+  .pf__drawer__content {
+    height: calc(100% - 42px);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    height: ${fullViewportHeightMinusOffset};
     padding-bottom: 10px;
   }
-
-  &.drawer--open {
-    width: ${(props: Props) => (props.$expandedWidth ? `${props.$expandedWidth}px` : '245px')};
-  }
-
-  &.drawer--closed {
-    width: ${(props: Props) => (props.$collapsedWidth ? `${props.$collapsedWidth}px` : '50px')};
-  }
-`;
+}

package/src/{components → legacy/components}/Navigation/Drawer/Drawer.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Drawer } from '@/components/Navigation/Drawer';
+import { Drawer } from '@/legacy/components/Navigation/Drawer';
 import React from 'react';
 import { footerItems, navigationItems } from './__mocks__/mocks';
 import { MemoryRouter } from 'react-router-dom';
@@ -8,7 +8,7 @@ import { MemoryRouter } from 'react-router-dom';
 const meta: Meta<typeof Drawer> = {
   component: Drawer,
   tags: ['autodocs'],
-  title: 'Navigation/Drawer',
+  title: 'legacy/Navigation/Drawer',
   decorators: [
     (Story) => (
       <MemoryRouter initialEntries={['/']}>
@@ -37,7 +37,6 @@ export const Normal: Story = {
   args: {
     logoText: 'INDICO INSIGHTS',
     logoIcon: 'indico-o',
-    $expandedWidth: '245',
     navigationItems: navigationItems,
     footerItems: footerItems,
   },

package/src/{components → legacy/components}/Navigation/Drawer/Drawer.tsx

@@ -11,16 +11,11 @@
 -Combine headerComponent, logoText and logoIcon props into one prop and functionality
 */
 import React from 'react';
-
-import classNames from 'classnames';
-
 import { IconName, PermafrostComponent } from '@/types';
-
-import { StyledDrawer } from './Drawer.styles';
 import { Icon } from '../../Icon';
 import { DrawerLinkList } from './DrawerLinkList';
-
 import { ListItem } from './types';
+import './Drawer.scss';
 
 type Props = PermafrostComponent & {
   style?: React.CSSProperties;
@@ -29,31 +24,25 @@ type Props = PermafrostComponent & {
   headerComponent?: React.ReactNode;
   navigationItems?: ListItem[];
   footerItems?: ListItem[];
-  $expandedWidth?: string;
-  $collapsedWidth?: string;
+  expandedWidth?: string;
+  collapsedWidth?: string;
 };
 
 export const Drawer = (props: Props) => {
   const {
     id,
-    className,
     style = {},
     logoText,
     logoIcon,
     navigationItems,
     footerItems,
     headerComponent,
-    $expandedWidth,
-    $collapsedWidth,
+    expandedWidth = '245px',
+    collapsedWidth = '50px',
     ...restOfProps
   } = props;
 
   const [isOpen, setIsOpen] = React.useState(false);
-  const drawerClasses = classNames('drawer', className, {
-    'drawer--open': isOpen,
-    'drawer--closed': !isOpen,
-  });
-
   const handleMouseOver = () => {
     setIsOpen(true);
   };
@@ -62,47 +51,57 @@ export const Drawer = (props: Props) => {
     setIsOpen(false);
   };
 
+  const currentWidth = isOpen ? expandedWidth : collapsedWidth;
+
   return (
-    <StyledDrawer
+    <div
       id={id}
       data-cy={props['data-cy']}
       data-testid={props['data-testid']}
-      style={style}
+      style={{
+        ...style,
+      }}
       {...restOfProps}
-      className={drawerClasses}
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
       aria-expanded={isOpen}
-      $expandedWidth={$expandedWidth}
-      $collapsedWidth={$collapsedWidth}
     >
-      <div className="drawer__wrapper">
-        <div className="drawer__header">
+      <div
+        className={'pf__drawer__wrapper'}
+        style={{
+          width: currentWidth,
+        }}
+      >
+        <div className="pf__drawer__header">
           {headerComponent ? (
             headerComponent
           ) : (
             <span>
               {logoIcon ? <Icon name={logoIcon} size={[24]} data-testid="logo-icon" /> : null}
-              <p data-testid="logo-text" aria-hidden={!isOpen}>
+              <p
+                data-testid="logo-text"
+                className="pf__drawer__header__logo-text"
+                aria-hidden={!isOpen}
+              >
                 {logoText}
               </p>
             </span>
           )}
         </div>
-        <div className="drawer__content">
+        <div className="pf__drawer__content">
           {navigationItems?.length ? (
-            <div className="drawer__navigation" data-testid="drawer-navigation">
+            <div className="pf__drawer__navigation" data-testid="drawer-navigation">
               <DrawerLinkList isOpen={isOpen} listItems={navigationItems} />
             </div>
           ) : null}
 
           {footerItems?.length ? (
-            <div className="drawer__footer" data-testid="drawer-footer">
+            <div className="pf__drawer__footer" data-testid="drawer-footer">
               <DrawerLinkList isOpen={isOpen} listItems={footerItems} />
             </div>
           ) : null}
         </div>
       </div>
-    </StyledDrawer>
+    </div>
   );
 };

package/src/{components → legacy/components}/Navigation/Drawer/DrawerLinkList.styles.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { TYPOGRAPHY } from '@/tokens';
 
 export const StyledDrawerLinkList = styled.div`
   .drawer__list {
@@ -8,8 +7,8 @@ export const StyledDrawerLinkList = styled.div`
     .drawer__list__item {
       box-sizing: border-box;
       margin-bottom: 10px;
-      font-weight: ${TYPOGRAPHY.weight.semibold};
-      font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
+      font-weight: 500;
+      font-size: 16px;
       display: flex;
       align-items: center;
       padding-top: 12px;
@@ -41,7 +40,7 @@ export const StyledDrawerLinkList = styled.div`
       }
 
       .drawer__list__item__link {
-        font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
+        font-size: 16px;
         display: flex;
         align-items: center;