@pantheon-systems/pds-toolkit-react 1.0.0-dev.189 → 1.0.0-dev.190

package/_dist/layouts/FlexContainer/FlexContainer.d.ts

@@ -1,38 +1,65 @@
 import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GridGapOptions } from '@layouts/layout-types';
 import './flex-container.css';
+type FlexAlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'stretch';
+type FlexAlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type FlexJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+type FlexGapOptions = GridGapOptions | 'none';
 interface FlexContainerProps extends ComponentPropsWithoutRef<'div'> {
     /**
-     * Align content
+     * Aligns content when there is extra space in the cross-axis.
      */
-    alignContent?: 'start' | 'end' | 'center';
+    alignContent?: FlexAlignContent;
     /**
-     * Align items
+     * Aligns items on the cross axis.
      */
-    alignItems?: 'start' | 'end' | 'center' | 'stretch' | 'baseline';
+    alignItems?: FlexAlignItems;
     /**
-     * Flex direction
+     * Establishes the main-axis, thus defining the direction flex items are placed in the flex container.
      */
-    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+    flexDirection?: FlexDirection;
     /**
-     * Flex wrap
+     * If the items do not fit in one line (row or column, depending on flexDirection), how should they wrap.
      */
-    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    flexWrap?: FlexWrap;
     /**
-     * Justify content
+     * Gap between items.
      */
-    justifyContent?: 'start' | 'end' | 'center' | 'between';
+    gap?: FlexGapOptions;
     /**
-     * How should the flex-direction at mobile (small breakpoint)
+     * Alignment along the main axis.
      */
-    mobileFlex?: 'none' | 'reverse' | 'same';
+    justifyContent?: FlexJustifyContent;
     /**
-     * Gap size
+     * Align content on mobile. If not set, will default to the same value as `alignContent`.
      */
-    spacing?: 'narrow' | 'standard' | 'wide';
+    mobileAlignContent?: FlexAlignContent;
     /**
-     * Container content
+     * Align items on mobile. If not set, will default to the same value as `alignItems`.
      */
-    children: ReactNode;
+    mobileAlignItems?: FlexAlignItems;
+    /**
+     * Flex direction for mobile.
+     */
+    mobileFlexDirection?: FlexDirection;
+    /**
+     * Flex wrap for mobile. If not set, will default to the same value as `flexWrap`.
+     */
+    mobileFlexWrap?: FlexWrap;
+    /**
+     * Gap between items on mobile. If not set, will default to the same value as `gap`.
+     */
+    mobileGap?: FlexGapOptions;
+    /**
+     * Justify content for mobile. If not set, will default to the same value as `justifyContent`.
+     */
+    mobileJustifyContent?: FlexJustifyContent;
+    /**
+     * Container content.
+     */
+    children?: ReactNode;
     /**
      * Additional class names
      */
@@ -41,5 +68,5 @@ interface FlexContainerProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Flex Container UI component
  */
-export declare const FlexContainer: ({ alignContent, alignItems, flexDirection, flexWrap, justifyContent, mobileFlex, spacing, children, className, ...props }: FlexContainerProps) => React.JSX.Element;
+export declare const FlexContainer: ({ alignContent, alignItems, flexDirection, flexWrap, gap, justifyContent, mobileAlignItems, mobileAlignContent, mobileFlexDirection, mobileFlexWrap, mobileGap, mobileJustifyContent, children, className, ...props }: FlexContainerProps) => React.JSX.Element;
 export {};

package/_dist/utilities/hooks/useWindowWidth.d.ts

@@ -0,0 +1 @@
+export declare const useWindowWidth: () => number;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-toolkit-react",
 	"technology": "React",
-	"version": "1.0.0-dev.189",
+	"version": "1.0.0-dev.190",
 	"description": "PDS toolkit built using the React framework",
 	"repository": {
 		"type": "git",