From 085aa4b09dec15566b1a6a741a05720d58bf257b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jose=20Andre=CC=81s=20Granero?=
 <joseandres.granero@devo.com>
Date: Thu, 14 Mar 2024 10:06:32 +0100
Subject: [PATCH] fix: fixed typo in function.

---
 .../ButtonLoader/StyledButtonLoader.ts        |  4 +--
 .../core/src/components/Button/constants.ts   |  9 ++++---
 .../Loader/components/LoaderSpinner.tsx       |  4 +--
 .../core/src/components/Loader/constants.ts   |  4 +--
 packages/core/src/components/Menu/Menu.tsx    |  4 +--
 .../SpinnerLoader/SpinnerLoader.tsx           | 12 ++++-----
 .../src/components/SpinnerLoader/constants.ts | 20 ++------------
 .../components/SpinnerLoader/declarations.ts  | 15 +++++++++++
 .../styled/StyledSpinnerLoaderCircle.ts       |  6 ++---
 .../StyledSpinnerLoaderCircleAnimated.ts      |  5 ++--
 .../styled/StyledSpinnerLoaderSvg.ts          |  7 ++---
 packages/core/src/components/VFlex/VFlex.tsx  |  5 +++-
 .../editors/OptionsEditor/OptionsEditor.tsx   |  4 +--
 .../src/facade/Options/getSelectOptions.ts    |  2 +-
 packages/table/src/facade/Options/index.ts    |  2 +-
 .../filters/OptionsFilter/OptionsFilter.tsx   |  4 +--
 stories/getting-started/1.Installation.mdx    | 26 ++++---------------
 17 files changed, 62 insertions(+), 71 deletions(-)
 create mode 100644 packages/core/src/components/SpinnerLoader/declarations.ts

diff --git a/packages/core/src/components/Button/components/ButtonLoader/StyledButtonLoader.ts b/packages/core/src/components/Button/components/ButtonLoader/StyledButtonLoader.ts
index f0daf3f76..6be74c68b 100644
--- a/packages/core/src/components/Button/components/ButtonLoader/StyledButtonLoader.ts
+++ b/packages/core/src/components/Button/components/ButtonLoader/StyledButtonLoader.ts
@@ -1,10 +1,10 @@
 import styled, { css } from 'styled-components';
 
-import { SpinnerSize } from '../../../SpinnerLoader/constants';
+import { TSpinnerSize } from '../../../SpinnerLoader/constants';
 
 export interface StyledButtonLoaderProps {
   /** Sets width, height, stroke... etc. */
-  size?: SpinnerSize;
+  size?: TSpinnerSize;
 }
 
 export const StyledButtonLoader = styled.svg.attrs(() => ({
diff --git a/packages/core/src/components/Button/constants.ts b/packages/core/src/components/Button/constants.ts
index 6711a37b8..4e8639dc3 100644
--- a/packages/core/src/components/Button/constants.ts
+++ b/packages/core/src/components/Button/constants.ts
@@ -1,6 +1,9 @@
 import { ButtonColorScheme, ButtonSize } from './declarations';
 import { BadgeSize } from '../Badge';
-import { SpinnerColorScheme, SpinnerSize } from '../SpinnerLoader/constants';
+import {
+  TSpinnerColorScheme,
+  TSpinnerSize,
+} from '../SpinnerLoader/declarations';
 
 export const BUTTON_BADGE_SIZE_MAP: { [key in ButtonSize]: BadgeSize } = {
   xxs: 'sm',
@@ -10,7 +13,7 @@ export const BUTTON_BADGE_SIZE_MAP: { [key in ButtonSize]: BadgeSize } = {
   lg: 'md',
 } as const;
 
-export const BUTTON_LOADER_SIZE_MAP: { [key in ButtonSize]: SpinnerSize } = {
+export const BUTTON_LOADER_SIZE_MAP: { [key in ButtonSize]: TSpinnerSize } = {
   xxs: 'xxxs',
   xs: 'xxs',
   sm: 'xs',
@@ -19,7 +22,7 @@ export const BUTTON_LOADER_SIZE_MAP: { [key in ButtonSize]: SpinnerSize } = {
 } as const;
 
 export const BUTTON_LOADER_COLOR_SCHEME_MAP: {
-  [key in ButtonColorScheme]: SpinnerColorScheme;
+  [key in ButtonColorScheme]: TSpinnerColorScheme;
 } = {
   accent: 'lightTrans',
   'accent-high': 'darkTrans',
diff --git a/packages/core/src/components/Loader/components/LoaderSpinner.tsx b/packages/core/src/components/Loader/components/LoaderSpinner.tsx
index 05a6b9944..174d6f80c 100644
--- a/packages/core/src/components/Loader/components/LoaderSpinner.tsx
+++ b/packages/core/src/components/Loader/components/LoaderSpinner.tsx
@@ -4,7 +4,7 @@ import { LoaderContext } from '../context';
 import { LOADER_SIZE_PROGRESS_AND_SPINNER } from '../constants';
 
 import { SpinnerLoader, SpinnerLoaderProps } from '../../SpinnerLoader';
-import { SpinnerColorScheme } from '../../SpinnerLoader/constants';
+import { TSpinnerColorScheme } from '../../SpinnerLoader/declarations';
 
 export const LoaderSpinner: React.FC<SpinnerLoaderProps> = ({
   colorScheme,
@@ -15,7 +15,7 @@ export const LoaderSpinner: React.FC<SpinnerLoaderProps> = ({
   return (
     <SpinnerLoader
       {...restSpinnerLoaderProps}
-      colorScheme={colorScheme || (context.colorScheme as SpinnerColorScheme)}
+      colorScheme={colorScheme || (context.colorScheme as TSpinnerColorScheme)}
       size={LOADER_SIZE_PROGRESS_AND_SPINNER[size || context.size].spinner}
     />
   );
diff --git a/packages/core/src/components/Loader/constants.ts b/packages/core/src/components/Loader/constants.ts
index 4ac8d86c3..c94c11d9a 100644
--- a/packages/core/src/components/Loader/constants.ts
+++ b/packages/core/src/components/Loader/constants.ts
@@ -5,12 +5,12 @@ import type {
   TLoaderGradientPosition,
 } from './declarations';
 import type { TProgressBarSize } from '../ProgressBar/declarations';
-import type { SpinnerSize } from '../SpinnerLoader/constants';
+import type { TSpinnerSize } from '../SpinnerLoader/constants';
 import type { BaseSize } from '../../declarations';
 import type { OverlayProps } from '../Overlay';
 
 export const LOADER_SIZE_PROGRESS_AND_SPINNER: {
-  [key in LoaderSize]: { progress: TProgressBarSize; spinner: SpinnerSize };
+  [key in LoaderSize]: { progress: TProgressBarSize; spinner: TSpinnerSize };
 } = {
   sm: {
     progress: 'sm',
diff --git a/packages/core/src/components/Menu/Menu.tsx b/packages/core/src/components/Menu/Menu.tsx
index dab65bfad..d4b3bc04d 100644
--- a/packages/core/src/components/Menu/Menu.tsx
+++ b/packages/core/src/components/Menu/Menu.tsx
@@ -7,7 +7,7 @@ export interface MenuProps extends Omit<VFlexProps, 'role'> {
 }
 
 const InternalMenu: React.FC<MenuProps> = ({
-  as,
+  as = 'nav',
   children,
   childrenFitFullWidth = true,
   cmpRole = 'menu',
@@ -17,7 +17,7 @@ const InternalMenu: React.FC<MenuProps> = ({
   return cmpRole === 'nav' ? (
     <VFlex
       {...restVFlexProps}
-      as={as || 'nav'}
+      as={as}
       spacing={spacing}
       childrenFitFullWidth={childrenFitFullWidth}
     >
diff --git a/packages/core/src/components/SpinnerLoader/SpinnerLoader.tsx b/packages/core/src/components/SpinnerLoader/SpinnerLoader.tsx
index 654feb27f..9ad5d52c3 100644
--- a/packages/core/src/components/SpinnerLoader/SpinnerLoader.tsx
+++ b/packages/core/src/components/SpinnerLoader/SpinnerLoader.tsx
@@ -1,17 +1,16 @@
 import * as React from 'react';
 
-import {
+import type {
   GlobalAriaProps,
   GlobalAttrProps,
   StyledOverloadCssProps,
   StyledPolymorphicProps,
 } from '../../declarations';
+import { TSpinnerColorScheme, TSpinnerSize } from './declarations';
 
 import {
   StyledSpinnerLoaderSvg,
-  StyledSpinnerLoaderSvgProps,
   StyledSpinnerLoaderCircle,
-  StyledSpinnerLoaderCircleProps,
   StyledSpinnerLoaderCircleAnimated,
 } from './styled';
 
@@ -19,9 +18,10 @@ export interface SpinnerLoaderProps
   extends StyledPolymorphicProps,
     StyledOverloadCssProps,
     GlobalAttrProps,
-    GlobalAriaProps,
-    StyledSpinnerLoaderSvgProps,
-    StyledSpinnerLoaderCircleProps {}
+    GlobalAriaProps {
+  colorScheme?: TSpinnerColorScheme;
+  size?: TSpinnerSize;
+}
 
 export const SpinnerLoader: React.FC<SpinnerLoaderProps> = ({
   colorScheme = 'dark',
diff --git a/packages/core/src/components/SpinnerLoader/constants.ts b/packages/core/src/components/SpinnerLoader/constants.ts
index 4315968be..996255899 100644
--- a/packages/core/src/components/SpinnerLoader/constants.ts
+++ b/packages/core/src/components/SpinnerLoader/constants.ts
@@ -1,6 +1,5 @@
 import { keyframes } from 'styled-components';
-import { PickUnion } from '../../typeFunctions';
-import { UIColorScheme, GlobalSize } from '../../declarations/commonProps';
+import type { TSpinnerSize } from './declarations';
 
 // ANIMATIONS - CONSTANTS --------------------------------------------------- //
 
@@ -33,21 +32,6 @@ export const ROTATE_ANIMATION = keyframes`
 
 // Color Scheme - Prop values
 
-export type SpinnerColorScheme =
-  | UIColorScheme
-  | 'brand'
-  | 'dark'
-  | 'darkTrans'
-  | 'light'
-  | 'lightTrans';
-
-// Size - Prop values
-
-export type SpinnerSize = PickUnion<
-  GlobalSize,
-  'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
->;
-
 // GET - CONSTANTS ---------------------------------------------------------- //
 const SIZE_VALUES = {
   xxxs: '1.2rem',
@@ -59,5 +43,5 @@ const SIZE_VALUES = {
   xl: '4.4rem',
 } as const;
 
-export const getSize = (size: SpinnerSize) =>
+export const getSize = (size: TSpinnerSize) =>
   SIZE_VALUES[size] || SIZE_VALUES.md;
diff --git a/packages/core/src/components/SpinnerLoader/declarations.ts b/packages/core/src/components/SpinnerLoader/declarations.ts
new file mode 100644
index 000000000..af2d367c6
--- /dev/null
+++ b/packages/core/src/components/SpinnerLoader/declarations.ts
@@ -0,0 +1,15 @@
+import { PickUnion } from '../../typeFunctions';
+import { GlobalSize, UIColorScheme } from '../../declarations';
+
+export type TSpinnerColorScheme =
+  | UIColorScheme
+  | 'brand'
+  | 'dark'
+  | 'darkTrans'
+  | 'light'
+  | 'lightTrans';
+
+export type TSpinnerSize = PickUnion<
+  GlobalSize,
+  'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+>;
diff --git a/packages/core/src/components/SpinnerLoader/styled/StyledSpinnerLoaderCircle.ts b/packages/core/src/components/SpinnerLoader/styled/StyledSpinnerLoaderCircle.ts
index 9f35a1d0b..35eb494fb 100644
--- a/packages/core/src/components/SpinnerLoader/styled/StyledSpinnerLoaderCircle.ts
+++ b/packages/core/src/components/SpinnerLoader/styled/StyledSpinnerLoaderCircle.ts
@@ -1,9 +1,9 @@
 import styled, { css } from 'styled-components';
 
-import { SpinnerColorScheme } from '../constants';
+import { TSpinnerColorScheme } from '../declarations';
 
-export interface StyledSpinnerLoaderCircleProps {
-  colorScheme?: SpinnerColorScheme;
+interface StyledSpinnerLoaderCircleProps {
+  colorScheme?: TSpinnerColorScheme;
 }
 
 export const StyledSpinnerLoaderCircle = styled.circle<StyledSpinnerLoaderCircleProps>`
diff --git a/packages/core/src/components/SpinnerLoader/styled/StyledSpinnerLoaderCircleAnimated.ts b/packages/core/src/components/SpinnerLoader/styled/StyledSpinnerLoaderCircleAnimated.ts
index b0306d382..7f0519c2c 100644
--- a/packages/core/src/components/SpinnerLoader/styled/StyledSpinnerLoaderCircleAnimated.ts
+++ b/packages/core/src/components/SpinnerLoader/styled/StyledSpinnerLoaderCircleAnimated.ts
@@ -1,9 +1,10 @@
 import styled, { css } from 'styled-components';
 
-import { DASH_ANIMATION, SpinnerColorScheme } from '../constants';
+import { DASH_ANIMATION } from '../constants';
+import { TSpinnerColorScheme } from '../declarations';
 
 interface StyledSpinnerLoaderCircleAnimatedProps {
-  colorScheme?: SpinnerColorScheme;
+  colorScheme?: TSpinnerColorScheme;
 }
 
 export const StyledSpinnerLoaderCircleAnimated = styled.circle<StyledSpinnerLoaderCircleAnimatedProps>`
diff --git a/packages/core/src/components/SpinnerLoader/styled/StyledSpinnerLoaderSvg.ts b/packages/core/src/components/SpinnerLoader/styled/StyledSpinnerLoaderSvg.ts
index 3a2dee16e..211a274fa 100644
--- a/packages/core/src/components/SpinnerLoader/styled/StyledSpinnerLoaderSvg.ts
+++ b/packages/core/src/components/SpinnerLoader/styled/StyledSpinnerLoaderSvg.ts
@@ -1,9 +1,10 @@
 import styled, { css } from 'styled-components';
 
-import { getSize, ROTATE_ANIMATION, SpinnerSize } from '../constants';
+import { getSize, ROTATE_ANIMATION } from '../constants';
+import { TSpinnerSize } from '../declarations';
 
-export interface StyledSpinnerLoaderSvgProps {
-  size?: SpinnerSize;
+interface StyledSpinnerLoaderSvgProps {
+  size?: TSpinnerSize;
 }
 
 export const StyledSpinnerLoaderSvg = styled.svg<StyledSpinnerLoaderSvgProps>`
diff --git a/packages/core/src/components/VFlex/VFlex.tsx b/packages/core/src/components/VFlex/VFlex.tsx
index 721af0eaa..cfdcc49d6 100644
--- a/packages/core/src/components/VFlex/VFlex.tsx
+++ b/packages/core/src/components/VFlex/VFlex.tsx
@@ -8,6 +8,8 @@ export interface VFlexProps
   extends Omit<FlexProps, 'flexDirection' | 'gap' | 'columnGap' | 'rowGap'> {
   /** Vertical spacing between children items (row-gap). */
   spacing?: GlobalSpacing;
+  /** If the children fit full width of the VFlex parent*/
+  childrenFitFullWidth?: boolean;
   /** If the children fit full height of the VFlex parent. Firstly you should assign to the VFlex a bigger height than the one defined by its children. */
   childrenFitFullHeight?: boolean;
 }
@@ -17,13 +19,14 @@ const InternalVFlex: React.FC<VFlexProps> = ({
   children,
   childrenFlex,
   childrenFitFullHeight = false,
+  childrenFitFullWidth = true,
   justifyContent = 'flex-start',
   spacing = 'cmp-md',
   ...flexProps
 }) => (
   <Flex
     {...flexProps}
-    alignItems={alignItems}
+    alignItems={childrenFitFullWidth ? 'stretch' : alignItems}
     childrenFlex={childrenFlex || (childrenFitFullHeight ? '1' : undefined)}
     flexDirection="column"
     justifyContent={justifyContent}
diff --git a/packages/table/src/editors/OptionsEditor/OptionsEditor.tsx b/packages/table/src/editors/OptionsEditor/OptionsEditor.tsx
index c1b1d0f8d..e0051bfeb 100644
--- a/packages/table/src/editors/OptionsEditor/OptionsEditor.tsx
+++ b/packages/table/src/editors/OptionsEditor/OptionsEditor.tsx
@@ -4,7 +4,7 @@ import { SelectControl } from '@devoinc/genesys-ui';
 
 import { EditorFloatingWrapper } from '../components';
 import type { CellEditorProps } from '../../declarations';
-import { ContextOptions, getTSelectOptions } from '../../facade';
+import { ContextOptions, getSelectOptions } from '../../facade';
 
 export const OptionsEditor: React.FC<CellEditorProps> = ({
   value,
@@ -21,7 +21,7 @@ export const OptionsEditor: React.FC<CellEditorProps> = ({
         creatable
         isMulti={Array.isArray(value)}
         menuAppendToBody
-        options={getTSelectOptions(options)}
+        options={getSelectOptions(options)}
         autoFocus
       />
     </EditorFloatingWrapper>
diff --git a/packages/table/src/facade/Options/getSelectOptions.ts b/packages/table/src/facade/Options/getSelectOptions.ts
index fb2de85ca..2eae1fb96 100644
--- a/packages/table/src/facade/Options/getSelectOptions.ts
+++ b/packages/table/src/facade/Options/getSelectOptions.ts
@@ -2,7 +2,7 @@ import { TSelectOption } from '@devoinc/genesys-ui';
 
 import { ContextOptions } from './ContextOptions';
 
-export const getTSelectOptions = (options: ContextOptions = {}) =>
+export const getSelectOptions = (options: ContextOptions = {}) =>
   Object.entries(options).map(([key, option]) => ({
     label: option?.label ?? key,
     value: key,
diff --git a/packages/table/src/facade/Options/index.ts b/packages/table/src/facade/Options/index.ts
index dc0b10d00..b5765044f 100644
--- a/packages/table/src/facade/Options/index.ts
+++ b/packages/table/src/facade/Options/index.ts
@@ -1,2 +1,2 @@
 export * from './ContextOptions';
-export * from './getTSelectOptions';
+export * from './getSelectOptions';
diff --git a/packages/table/src/filters/OptionsFilter/OptionsFilter.tsx b/packages/table/src/filters/OptionsFilter/OptionsFilter.tsx
index 77c70bda3..9e8ccd45d 100644
--- a/packages/table/src/filters/OptionsFilter/OptionsFilter.tsx
+++ b/packages/table/src/filters/OptionsFilter/OptionsFilter.tsx
@@ -5,7 +5,7 @@ import { SelectControl, type TSelectOption } from '@devoinc/genesys-ui';
 import type { FilterContext, FilterProps } from '../../declarations';
 import type { OptionsFilterValue } from './declarations';
 import { FilterContainer } from '../common';
-import { ContextOptions, getTSelectOptions } from '../../facade';
+import { ContextOptions, getSelectOptions } from '../../facade';
 
 export const OptionsFilter: React.FC<FilterProps> = ({ colDef, onChange }) => {
   const context = colDef?.context as ContextOptions & FilterContext;
@@ -26,7 +26,7 @@ export const OptionsFilter: React.FC<FilterProps> = ({ colDef, onChange }) => {
         }}
         menuAppendToBody
         defaultInputValue={colDef?.context?.defaultValue as string}
-        options={getTSelectOptions(options)}
+        options={getSelectOptions(options)}
         value={value}
       />
     </FilterContainer>
diff --git a/stories/getting-started/1.Installation.mdx b/stories/getting-started/1.Installation.mdx
index c6ff82749..0c7f307e7 100644
--- a/stories/getting-started/1.Installation.mdx
+++ b/stories/getting-started/1.Installation.mdx
@@ -10,7 +10,7 @@ Since `genesys-ui` requires a theme to be provided, this document also covers ho
 As an alternative to this guide, [genesys-ui-demo-app](https://github.com/DevoInc/genesys-ui-demo-app) package provides a working
 app that includes all the steps described in this guide, and which can be used as a template for your own project.
 
-## Installing Genesys-ui into your application
+## Installing genesys-ui into your application
 
 `genesys-ui` is the core package that contains all the base components.
 It is a peer dependency of all the other packages in the `genesys-ui` family.
@@ -49,27 +49,11 @@ import '@devoinc/genesys-base-styles/dist/styles.css';
 
 This stylesheet provides a set of default styles, including a CSS reset and font definitions.
 
-## Adding support for icons
-
-Some Genesys-ui components rely on an icon font to display icons. This is something that is being deprecated, but for now it is still required.
-
-To add this font to your project, install [@devoinc/genesys-icons](https://github.com/DevoInc/genesys-icons) using npm:
-
-```bash
-npm i @devoinc/genesys-icons
-```
-
-To import the icon font, add the following import statement right below the _genesys-base-styles_ import:
-
-```ts
-import '@devoinc/genesys-icons/dist/gi-styles.css';
-```
-
 ## Adding a theme
 
 Genesys-ui requires a theme to be provided to the components.
 This theme is a set of key-values, also known as tokens, that define the appearance of the components.
-In the `genesys-ui` ecosystem, these tokens are defined in a brand package, and are W3CDTCG-compliant©™. 
+In the `genesys-ui` ecosystem, these tokens are defined in a brand package, and are W3CDTCG-compliant©™.
 See [W3C Design Tokens Format Module](https://tr.designtokens.org/format/) for more information.
 
 The default brand for Devo's users is [@devoinc/genesys-brand-devo](https://github.com/DevoInc/genesys-brand-devo).
@@ -86,11 +70,11 @@ Once the theme is installed, you can add it to your project by wrapping your app
 
 ```tsx
 import { ThemeProvider } from 'styled-components';
-import brand from '@devoinc/genesys-brand-devo';
+import { light, dark } from '@devoinc/genesys-brand-devo';
 
 const App = () => {
   return (
-    <ThemeProvider theme={brand.light}>
+    <ThemeProvider theme={light}>
       <YourApp />
     </ThemeProvider>
   );
@@ -102,7 +86,7 @@ An example of the available tokens and their values can be found in [@devoinc/ge
 
 ## Making styled-components aware of the theme's schema
 
-If you need to work with styled components on your application, you can make them aware of your theme's struture by using module augmentation. To do so:
+If you need to work with styled components on your application, you can make them aware of your theme's structure by using module augmentation. To do so:
 
 - Create a `styled.d.ts` file in `src/`.