@indico-data/design-system 2.43.0 → 2.44.0

package/lib/legacy/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PermafrostComponent } from '@/types';
+import { PermafrostComponent } from '../../../types';
 type Props = PermafrostComponent & {
     questionMark?: boolean;
     for?: string | null;

package/lib/legacy/components/index.d.ts

@@ -1,14 +1,3 @@
-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 { EditableInput, NumberInput, SearchInput, TextInput, Radio, RadioGroup, AbstractRadio, AbstractRadioGroup, } 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 { BarSpinner, CirclePulse, CircleSpinner } from './loading-indicators';
 export { ConfirmModal, ModalBase } from './modals';
-export { LoadingAwareContainer } from './LoadingAwareContainer';
-export { TextTruncate } from './text-truncate';
-export { Toggle } from './Toggle';
 export { Tooltip } from './Tooltip';

package/lib/legacy/components/loading-indicators/BarSpinner/BarSpinner.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PermafrostComponent } from '@/types';
+import type { PermafrostComponent } from '../../../../types';
 type Props = PermafrostComponent & {
     width?: string;
 };

package/lib/legacy/components/loading-indicators/CirclePulse/CirclePulse.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PermafrostComponent } from '@/types';
+import type { PermafrostComponent } from '../../../../types';
 type Props = PermafrostComponent & {
     color?: string;
     overallSize?: string | number;

package/lib/legacy/components/loading-indicators/CircleSpinner/CircleSpinner.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PermafrostComponent, IconSizes } from '@/types';
+import type { PermafrostComponent, IconSizes } from '../../../../types';
 type Props = PermafrostComponent & {
     ariaLabel?: string;
     size?: IconSizes;

package/lib/legacy/components/loading-indicators/index.d.ts

@@ -1,7 +1,3 @@
 export { CircleSpinner } from './CircleSpinner';
 export { BarSpinner } from './BarSpinner';
 export { CirclePulse } from './CirclePulse';
-export { RandomLoadingMessage } from './RandomLoadingMessage';
-export { PercentageRing } from './PercentageRing';
-export { LoadingList } from './LoadingList';
-export { LoadingIndicator } from './LoadingIndicator';

package/lib/legacy/components/modals/ConfirmModal/ConfirmModal.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ModalBaseProps } from '../ModalBase';
-import { PermafrostComponent } from '@/types';
+import type { PermafrostComponent } from '../../../../types';
 type Props = PermafrostComponent & Pick<ModalBaseProps, 'open'> & {
     describedBy?: string;
     clickOutsideHandler(e?: React.SyntheticEvent): void;

package/lib/legacy/components/modals/ModalBase/ModalBase.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PermafrostComponent } from '@/types';
+import type { PermafrostComponent } from '../../../../types';
 export type ModalBaseProps = PermafrostComponent & {
     children: React.ReactNode | React.ReactNode[];
     clickToDismiss?(): void;

package/lib/stylesAndAnimations/colors/constants.d.ts

@@ -2,4 +2,3 @@ export declare const colorList: string[];
 export declare const utilityColorList: string[];
 export declare const lightThemeColors: Record<string, any>;
 export declare const darkThemeColors: Record<string, any>;
-export declare const shades = 9;

package/lib/types.d.ts

@@ -4,14 +4,12 @@ export type PermafrostComponent = {
     'data-cy'?: string;
     'data-testid'?: string;
 };
-export type ButtonVariant = 'default' | 'primary' | 'destructive';
-export type ButtonSize = 'normal' | 'large';
 import { IconSizes, IconName } from './components/icons/types';
 export type { IconSizes, IconName };
+export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
 import { SelectOption } from './components/forms/select/types';
 export type { SelectOption };
 import { TableProps, TableColumn, Direction, Alignment } from './components/table/types';
 export type { TableProps, TableColumn, Direction, Alignment };
-export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
 import { PillColor, PillSize } from './components/pill/types';
 export type { PillColor, PillSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.43.0",
+  "version": "2.44.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/button/Button.mdx

@@ -8,94 +8,44 @@ import { Col, Row } from '@/components';
 
 The Button component is one of the most versitile components we can use in our Design System. This component has a lot of different variations and can be used in many different ways. Toggle through the various options below in order achieve the optimal button state for your use case.
 
-<Canvas of={ButtonStories.Primary} />
+<Canvas of={ButtonStories.Default} />
 
 ### The following props are available for the Button component:
 
-<Controls of={ButtonStories.Primary} />
+<Controls of={ButtonStories.Default} />
 
 ## Sizes
 
-The Sizes available are `small`, `medium`, and `large`. The default size is `medium`.
+The Sizes available are small (`xs`), medium (`sm`), large (`md`), and extra large (`lg`). The default size is medium.
 
-<Row>
-  <Col xs={2}>
-    <Story of={ButtonStories.Small} />
-  </Col>
-  <Col xs={2}>
-    <Story of={ButtonStories.Medium} />
-  </Col>
-  <Col xs={2}>
-    <Story of={ButtonStories.Large} />
-  </Col>
-</Row>
+<Story of={ButtonStories.Sizes} />
 
 ## Variants
 
-The variants available are `solid`, `outline`, and `text`. The default variant is `solid`.'
-
-<Row>
-  <Col xs={2}>
-    <Story of={ButtonStories.Primary} />
-  </Col>
-  <Col xs={2}>
-    <Story of={ButtonStories.PrimaryOutline} />
-  </Col>
-  <Col xs={2}>
-    <Story of={ButtonStories.Text} />
-  </Col>
-</Row>
-
-## Colors
-
-The colors available are `primary`, `secondary`, `info`, `error`, `warning`, and `success`. The default color is `primary`.
-
-<Row>
-  <Col xs={6} sm={4} md={3} lg={2}>
-    <Story of={ButtonStories.Primary} />
-  </Col>
-  <Col xs={6} sm={4} md={3} lg={2}>
-    <Story of={ButtonStories.Secondary} />
-  </Col>
-  <Col xs={6} sm={4} md={3} lg={2}>
-    <Story of={ButtonStories.Info} />
-  </Col>
-  <Col xs={6} sm={4} md={3} lg={2}>
-    <Story of={ButtonStories.Error} />
-  </Col>
-  <Col xs={6} sm={4} md={3} lg={2}>
-    <Story of={ButtonStories.Warning} />
-  </Col>
-  <Col xs={6} sm={4} md={3} lg={2}>
-    <Story of={ButtonStories.Success} />
-  </Col>
-</Row>
-
-## States
-
-The states available are enabled, `disabled`, and `loading`. The button is enabled by default
-
-<Row>
-  <Col xs={6} sm={4} md={3} lg={2}>
-    <Story of={ButtonStories.Loading} />
-  </Col>
-  <Col xs={2}>
-    <Story of={ButtonStories.Disabled} />
-  </Col>
-</Row>
+The variants available are `solid`, `outline`, `link`, `soft`, `destructive`, `action`. The default variant is `solid`.
+
+<Story of={ButtonStories.Variants} />
+
+## Pill (Round)
+
+Buttons can be made to look like a rounded pill by passing the `isPill` prop.
+
+<Story of={ButtonStories.Pill} />
+
+## Disabled
+
+The disabled state can be achieved by passing the `isDisabled` prop.
+
+<Story of={ButtonStories.Disabled} />
+
+## Loading
+
+The loading state can be achieved by passing the `isLoading` prop.
+
+<Story of={ButtonStories.Loading} />
 
 ## Icons
 
-To include an Icon pass an `iconName` prop with a valid icon name. The `iconName` is the name of the icon you want to use. You can optionally pass an `iconPosition` argument to set the position of the icon in relation to the text. The default value for `iconPosition` is `left`. If no children are passed, the button will render as an icon-only button.
-
-<Row>
-  <Col xs={6} sm={4} md={3} lg={2}>
-    <Story of={ButtonStories.IconLeft} />
-  </Col>
-  <Col xs={6} sm={4} md={3} lg={2}>
-    <Story of={ButtonStories.IconRight} />
-  </Col>
-  <Col xs={6} sm={4} md={3} lg={2}>
-    <Story of={ButtonStories.IconOnly} />
-  </Col>
-</Row>
+To include an Icon, use either `iconLeft` or `iconRight` props with a valid icon name. If you only want an icon with no text, simply don't pass any children and the button will render as an icon-only button.
+
+<Story of={ButtonStories.Icons} />