@hubspot/ui-extensions 0.3.1 → 0.5.0

package/README.md

@@ -6,12 +6,14 @@ React components and utilities for extending HubSpot's UI.
 
 - [Accordion](#accordion)
 - [Alert](#alert)
+- [Box](#box)
 - [Button](#button)
 - [ButtonRow](#buttonrow)
 - [Card](#card)
 - [DescriptionList](#descriptionlist)
   - [DescriptionListItem](#descriptionlistitem)
 - [Divider](#divider)
+- [Flex](#flex)
 - [Form](#form)
 - [EmptyState](#emptystate)
 - [ErrorState](#errorstate)
@@ -154,6 +156,51 @@ const Extension = () => {
 };
 ```
 
+### Box
+
+##### Import
+
+```javascript
+import { Box } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+export interface BoxProps {
+  children: ReactNode;
+  alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
+  flex?: 'initial' | 'auto' | 'none' | number;
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `alignSelf` | `'start' \| 'center' \| 'baseline' \| 'end' \| 'stretch' \| 'auto'` `(optional)` | `'auto'` | Overrides flex's align item value for this element. |
+| `flex` | `'initial' \| 'auto' \| 'none' \| number` `(optional)` | `'initial'` | Sets how the item will grow or shrink when it's a direct ancestor of the Flex component. |
+
+
+#### flex prop Options
+
+- `initial`: The item is sized according to its width and height properties. It shrinks to its minimum size to fit the container, but does not grow to absorb any extra free space in the flex container.
+- `auto`: The item is sized according to its width and height properties, but grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container.
+- `none`: The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container.
+- `number`:  Tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Box>
+      <Text>Hello</Text>
+    </Box>
+  );
+};
+```
+
+
 ### Button
 
 ##### Import
@@ -411,6 +458,63 @@ const Extension = () => {
 };
 ```
 
+### Flex
+
+##### Import
+
+```javascript
+import { Flex } from '@hubspot/ui-extensions';
+```
+
+##### Props
+
+```typescript
+export interface FlexProps {
+  children?: React.ReactNode;
+  direction?: 'row' | 'column';
+  justify?: 'center' | 'end' | 'start' | 'around' | 'between';
+  align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+  wrap?: boolean;
+  gap?:
+  | 'flush'
+  | 'small'
+  | 'extra-small'
+  | 'medium'
+  | 'large'
+  | 'extra-large'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl';
+}
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `direction` | `'row' \| 'column'` | `'column'` | Sets the direction in which elements are placed. |
+| `justify` | `'start' \| 'center' \|'end' \|'around' \| 'between'` | `'start'` | Defines how to distribute space between and around children on main axis. |
+| `align` | `'start' \| 'center' \|'baseline' \| 'end' \| 'stretch' \|'between'` | `'start'` | Controls the aligment of children in the cross axis. |
+| `alignSelf` | `'start' \| 'center' \| 'baseline' \| 'end' \| 'stretch' \| 'auto'` `(optional)` | `'auto'` | Overrides flex's align item value for this element. Useful when `Flex` is the child of another `Flex` component. |
+| `wrap` | `boolean(optional)` | `false` | If set to `false`, children are forced onto one line. If set to `true`, they can wrap into multiple lines. |
+| `children` | `ReactNode` | `N/A` | Sets the content that will render inside the component. This prop is passed implicitly by providing sub-components. |
+| `gap` | `'flush' \| 'extra-small' \| 'small' \| 'medium' \| 'large' \| 'extra-large' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'small'` | Amount of space between each child component passed as children. |
+
+##### Usage
+
+```javascript
+const Extension = () => {
+  return (
+    <Flex direction="column" distance="large">
+      <Tile>Tile 1</Tile>
+      <Tile>Tile 2</Tile>
+      <Tile>Tile 3</Tile>
+    </Flex>
+  );
+};
+```
+
 ### Form
 
 ##### Import
@@ -947,7 +1051,7 @@ export interface ProgressBarProps {
   aria-label?: string;
   showPercentage?: boolean;
   value?: number;
-  valueMax?: number;
+  maxValue?: number;
   valueDescription?: string;
   variant?: 'success' | 'danger' | 'warning';
 }
@@ -958,7 +1062,7 @@ export interface ProgressBarProps {
 | `title` | `string(optional)` | `N/A` | Text to be displayed in the progressbar title. |
 | `showPercentage` | `boolean(optional)` | `false` | Toggles the display of the completion percentage. |
 | `value` | `number(optional)` | `0` | The value of the progress indicator. |
-| `valueMax` | `number(optional)` | `100` | The maximum value of the progress. |
+| `maxValue` | `number(optional)` | `100` | The maximum value of the progress bar. |
 | `valueDescription` | `string(optional)` | `N/A` | Text that explains the current state of the `value` prop. Renders to the right of `title`. **Example: "10,000 of 7,500"** |
 | `variant` | `'success' \| 'danger' \| 'warning'` | `'success'` | The type of progressbar to display. Defaults to success. |
 | `aria-label` | `string(optional)` | `N/A` | Indicates the content of the ProgressBar to screen readers. Should be used if there's no title. |
@@ -971,7 +1075,7 @@ const Extension = () => {
     <ProgressBar
       variant="warning"
       value={50}
-      valueMax={200}
+      maxValue={200}
       showPercentage={true}
     />
   );
@@ -1624,14 +1728,14 @@ const Extension = () => {
     <Table bordered={true}>
       <TableHead>
         <TableRow>
-          <TableHeader>Name</TableHeader>
-          <TableHeader>Phone</TableHeader>
+          <TableHeader width={150} align="left">Name</TableHeader>
+          <TableHeader>Price</TableHeader>
         </TableRow>
       </TableHead>
       <TableBody>
         <TableRow>
           <TableCell>Roger Federer</TableCell>
-          <TableCell>555-555-7866</TableCell>
+          <TableCell align="right">$1.50</TableCell>
         </TableRow>
       </TableBody>
     </Table>

package/dist/coreComponents.d.ts

@@ -194,3 +194,8 @@ export declare const MultiSelect: "MultiSelect" & {
     readonly props?: types.MultiSelectProps | undefined;
     readonly children?: true | undefined;
 } & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"MultiSelect", types.MultiSelectProps, true>>;
+export declare const Flex: "Flex" & {
+    readonly type?: "Flex" | undefined;
+    readonly props?: types.FlexProps | undefined;
+    readonly children?: true | undefined;
+} & import("@remote-ui/react").ReactComponentTypeFromRemoteComponentType<import("@remote-ui/types").RemoteComponentType<"Flex", types.FlexProps, true>>;

package/dist/coreComponents.js

@@ -40,3 +40,4 @@ export const Box = createRemoteReactComponent('Box');
 export const StepIndicator = createRemoteReactComponent('StepIndicator');
 export const Accordion = createRemoteReactComponent('Accordion');
 export const MultiSelect = createRemoteReactComponent('MultiSelect');
+export const Flex = createRemoteReactComponent('Flex');

package/dist/types.d.ts

@@ -96,7 +96,9 @@ export interface ProgressBarProps {
     'aria-label'?: string;
     showPercentage?: boolean;
     value?: number;
+    /** @deprecated use maxValue instead */
     valueMax?: number;
+    maxValue?: number;
     valueDescription?: string;
     variant?: 'success' | 'danger' | 'warning';
 }
@@ -216,6 +218,15 @@ export interface StackProps {
     align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
     width?: 'auto' | '100%';
 }
+export interface FlexProps {
+    gap?: AllDistances;
+    children?: ReactNode;
+    direction?: 'row' | 'column';
+    justify?: 'center' | 'end' | 'start' | 'around' | 'between';
+    align?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch';
+    wrap?: boolean;
+}
 export interface StatisticsTrendProps {
     value: string;
     direction: 'increase' | 'decrease';
@@ -394,6 +405,7 @@ export interface CrmStageTrackerProps {
     objectId?: number;
     objectTypeId?: string;
     properties: Array<string>;
+    showProperties?: boolean;
 }
 interface CrmSidebarExtensionPoint extends ExtensionPointContract {
     actions: {
@@ -435,9 +447,17 @@ export interface LoadingSpinnerProps {
     size?: TShirtSizes['xs'] | TShirtSizes['sm'] | TShirtSizes['md'];
     layout?: 'inline' | 'centered';
 }
+interface AlignmentProps {
+    align?: 'left' | 'center' | 'right';
+}
+interface WidthProps {
+    width?: 'min' | 'max' | 'auto' | number;
+}
 export interface TableElementProps {
     children: React.ReactNode;
 }
+export type TableHeaderProps = TableElementProps & AlignmentProps & WidthProps;
+export type TableCellProps = TableElementProps & AlignmentProps & WidthProps;
 interface BaseTableProps {
     bordered?: boolean;
     flush?: boolean;
@@ -475,8 +495,8 @@ export type JsonValue = string | number | boolean | null | JsonValue[] | {
 };
 export interface BoxProps {
     children: ReactNode;
-    grow?: boolean;
     alignSelf?: 'start' | 'center' | 'baseline' | 'end' | 'stretch' | 'auto';
+    flex?: 'initial' | 'auto' | 'none' | number;
 }
 interface TShirtSizes {
     xs: 'extra-small' | 'xs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "",
   "type": "module",
   "main": "dist/index.js",
@@ -48,5 +48,5 @@
   "devDependencies": {
     "typescript": "5.0.4"
   },
-  "gitHead": "3da4a07183d48528ef431d46a8d327c053c4fe94"
+  "gitHead": "d11a7bb73cf91ed44279b041f17778833948839f"
 }