diff --git a/CHANGELOG.md b/CHANGELOG.md index c78c23a027..a23024c964 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html). ## [Unreleased] +### Changed + +- Replace grommet Image and Grid component (#2518) + ## [4.9.0] - 2023-12-04 ### Added diff --git a/src/frontend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentSection/index.tsx b/src/frontend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentSection/index.tsx index 92d8c6aeb0..d7d48b5a29 100644 --- a/src/frontend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentSection/index.tsx +++ b/src/frontend/apps/lti_site/apps/classroom/components/SelectContent/SelectContentSection/index.tsx @@ -1,11 +1,11 @@ import { Button } from '@openfun/cunningham-react'; -import { Grid } from 'grommet'; import { Nullable } from 'lib-common'; import { Box, Classroom, ClassroomSVG, ContentCard, + Grid, Text, } from 'lib-components'; import React from 'react'; diff --git a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx index 1b97e71c97..ce15a0faf2 100644 --- a/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx +++ b/src/frontend/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/index.tsx @@ -1,9 +1,9 @@ -import { Grid } from 'grommet'; import { Breakpoints } from 'lib-common'; import { Box, BoxLoader, FileDepository, + Grid, Heading, Text, useResponsive, diff --git a/src/frontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentSection/index.tsx b/src/frontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentSection/index.tsx index b7a422dc6f..26a58f7539 100644 --- a/src/frontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentSection/index.tsx +++ b/src/frontend/apps/lti_site/apps/deposit/components/SelectContent/SelectContentSection/index.tsx @@ -1,8 +1,7 @@ import { Button } from '@openfun/cunningham-react'; -import { Grid } from 'grommet'; import { DocumentStore } from 'grommet-icons'; import { Nullable } from 'lib-common'; -import { Box, ContentCard, FileDepository, Text } from 'lib-components'; +import { Box, ContentCard, FileDepository, Grid, Text } from 'lib-components'; import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; diff --git a/src/frontend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentSection/index.tsx b/src/frontend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentSection/index.tsx index 0d6355f55c..d8c7100ceb 100644 --- a/src/frontend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentSection/index.tsx +++ b/src/frontend/apps/lti_site/apps/markdown/components/SelectContent/SelectContentSection/index.tsx @@ -1,10 +1,10 @@ import { Button } from '@openfun/cunningham-react'; -import { Grid } from 'grommet'; import { DocumentText } from 'grommet-icons'; import { Nullable } from 'lib-common'; import { Box, ContentCard, + Grid, MarkdownDocument, MarkdownDocumentTranslation, } from 'lib-components'; diff --git a/src/frontend/apps/lti_site/components/SelectContent/SelectContentSection/index.tsx b/src/frontend/apps/lti_site/components/SelectContent/SelectContentSection/index.tsx index 7e37e8c8fd..b69d8e3d55 100644 --- a/src/frontend/apps/lti_site/components/SelectContent/SelectContentSection/index.tsx +++ b/src/frontend/apps/lti_site/components/SelectContent/SelectContentSection/index.tsx @@ -1,11 +1,11 @@ import { Button } from '@openfun/cunningham-react'; -import { Grid } from 'grommet'; import { Document as DocumentIcon } from 'grommet-icons'; import { Nullable } from 'lib-common'; import { Box, ContentCard, Document, + Grid, PlaySVG, Text, Video, diff --git a/src/frontend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx b/src/frontend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx index a07f925948..d434e83c69 100644 --- a/src/frontend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx +++ b/src/frontend/apps/standalone_site/src/features/Authentication/components/RenaterAuthenticator.tsx @@ -1,7 +1,6 @@ import { Select } from '@openfun/cunningham-react'; -import { Image } from 'grommet'; import { colorsTokens } from 'lib-common'; -import { Box, ClosingCard, Text, useResponsive } from 'lib-components'; +import { Box, ClosingCard, Image, Text, useResponsive } from 'lib-components'; import React, { ComponentPropsWithRef, Fragment, @@ -56,8 +55,8 @@ export const RenaterAuthenticator = () => { option.logo || 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==' // 1x1 transparent gif } - height="16" - width="16" + height={16} + width={16} margin={{ right: 'small' }} /> {option.display_name} diff --git a/src/frontend/apps/standalone_site/src/features/Header/HeaderLight.tsx b/src/frontend/apps/standalone_site/src/features/Header/HeaderLight.tsx index 75f5fd42f5..b94fbe99c9 100644 --- a/src/frontend/apps/standalone_site/src/features/Header/HeaderLight.tsx +++ b/src/frontend/apps/standalone_site/src/features/Header/HeaderLight.tsx @@ -1,6 +1,5 @@ -import { Image } from 'grommet'; import { Nullable, colorsTokens } from 'lib-common'; -import { Box, useSiteConfig } from 'lib-components'; +import { Box, Image, useSiteConfig } from 'lib-components'; import { forwardRef } from 'react'; import { Link } from 'react-router-dom'; @@ -40,14 +39,7 @@ export const HeaderLight = forwardRef< /> ); if (showSiteConfigLogo) { - Logo = ( - Home - ); + Logo = Home; } if (withLogoLink) { diff --git a/src/frontend/apps/standalone_site/src/features/HomePage/components/HomePage.tsx b/src/frontend/apps/standalone_site/src/features/HomePage/components/HomePage.tsx index e15a56581a..d17412bed4 100644 --- a/src/frontend/apps/standalone_site/src/features/HomePage/components/HomePage.tsx +++ b/src/frontend/apps/standalone_site/src/features/HomePage/components/HomePage.tsx @@ -1,7 +1,7 @@ -import { Image } from 'grommet'; import { Box, Heading, + Image, StyledLink, Text, useResponsive, diff --git a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomInfos/index.tsx b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomInfos/index.tsx index 02eaec001a..5ab3f2e085 100644 --- a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomInfos/index.tsx +++ b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomInfos/index.tsx @@ -1,6 +1,5 @@ -import { Grid } from 'grommet'; import { Nullable, colorsTokens } from 'lib-common'; -import { Box, ClassroomInfos, Text } from 'lib-components'; +import { Box, ClassroomInfos, Grid, Text } from 'lib-components'; import React, { Fragment } from 'react'; import { FormattedMessage, defineMessages } from 'react-intl'; diff --git a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomInstructor/index.tsx b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomInstructor/index.tsx index beaf40479d..85ed0ac03f 100644 --- a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomInstructor/index.tsx +++ b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomInstructor/index.tsx @@ -1,7 +1,6 @@ import { Button } from '@openfun/cunningham-react'; -import { Grid } from 'grommet'; import { Breakpoints, Nullable } from 'lib-common'; -import { Box, BoxLoader, Classroom, useResponsive } from 'lib-components'; +import { Box, BoxLoader, Classroom, Grid, useResponsive } from 'lib-components'; import React, { Suspense, lazy } from 'react'; import { toast } from 'react-hot-toast'; import { defineMessages, useIntl } from 'react-intl'; diff --git a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomLayout/index.tsx b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomLayout/index.tsx index 61a9338aba..0cd0d8c91c 100644 --- a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomLayout/index.tsx +++ b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomLayout/index.tsx @@ -1,5 +1,4 @@ -import { Grid } from 'grommet'; -import { Breakpoints, Nullable, colorsTokens } from 'lib-common'; +import { Nullable, colorsTokens } from 'lib-common'; import { Box, Text, useAppConfig, useResponsive } from 'lib-components'; import React from 'react'; @@ -32,13 +31,8 @@ export const DashboardClassroomLayout = ({ right, }: DashboardClassroomLayoutProps) => { const appData = useAppConfig(); - const { isSmallerBreakpoint, breakpoint, isDesktop } = useResponsive(); - let columns = ['1/2', '1/2']; - if (!isDesktop) { - columns = ['full']; - } else if (isSmallerBreakpoint(breakpoint, Breakpoints.large)) { - columns = ['2/3', '1/3']; - } + const { isDesktop } = useResponsive(); + return ( - + {left} - + - + ); }; diff --git a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomStudentCounter/index.tsx b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomStudentCounter/index.tsx index a3bbb09be1..429ac28560 100644 --- a/src/frontend/packages/lib_classroom/src/components/DashboardClassroomStudentCounter/index.tsx +++ b/src/frontend/packages/lib_classroom/src/components/DashboardClassroomStudentCounter/index.tsx @@ -1,5 +1,4 @@ -import { Grid } from 'grommet'; -import { Box, Text } from 'lib-components'; +import { Box, Grid, Text } from 'lib-components'; import { DateTime, DurationObjectUnits } from 'luxon'; import React, { useCallback, useEffect } from 'react'; diff --git a/src/frontend/packages/lib_common/src/cunningham/cunningham-style.css b/src/frontend/packages/lib_common/src/cunningham/cunningham-style.css index 911566b8ce..1b8eb10d75 100644 --- a/src/frontend/packages/lib_common/src/cunningham/cunningham-style.css +++ b/src/frontend/packages/lib_common/src/cunningham/cunningham-style.css @@ -30,6 +30,9 @@ display: flex; box-sizing: border-box; } +.typo-grid{ + display: grid; +} /** * Input * TextArea diff --git a/src/frontend/packages/lib_components/src/common/Box/Grid/index.spec.tsx b/src/frontend/packages/lib_components/src/common/Box/Grid/index.spec.tsx new file mode 100644 index 0000000000..a29c22b75a --- /dev/null +++ b/src/frontend/packages/lib_components/src/common/Box/Grid/index.spec.tsx @@ -0,0 +1,46 @@ +import { screen } from '@testing-library/react'; +import { render } from 'lib-tests'; + +import { Grid } from './'; + +describe('', () => { + it('renders the default component and children', () => { + render(My Grid); + + const grid = screen.getByText('My Grid'); + expect(grid).toBeInTheDocument(); + expect(grid).toHaveClass('typo-grid'); + }); + + it('has `columns` prop as number', () => { + render(My Grid); + + expect(screen.getByText('My Grid')).toHaveStyle( + 'grid-template-columns: repeat(auto-fill, minmax(min(30px, 100%), 1fr));', + ); + }); + + it('has `columns` prop as string px', () => { + render(My Grid); + + expect(screen.getByText('My Grid')).toHaveStyle( + 'grid-template-columns: repeat(auto-fill, minmax(min(45px, 100%), 1fr));', + ); + }); + + it('has `columns` prop as string auto', () => { + render(My Grid); + + expect(screen.getByText('My Grid')).toHaveStyle( + 'grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));', + ); + }); + + it('has `columns` prop as ColumnsCount type', () => { + render(My Grid); + + expect(screen.getByText('My Grid')).toHaveStyle( + 'grid-template-columns: repeat(2, minmax(min(30px, 100%), 1fr));', + ); + }); +}); diff --git a/src/frontend/packages/lib_components/src/common/Box/Grid/index.tsx b/src/frontend/packages/lib_components/src/common/Box/Grid/index.tsx new file mode 100644 index 0000000000..2ff00afdb1 --- /dev/null +++ b/src/frontend/packages/lib_components/src/common/Box/Grid/index.tsx @@ -0,0 +1,68 @@ +import { forwardRef } from 'react'; + +import { Box, BoxProps } from '..'; +import { SizeValue, Sizes, sizesValue } from '../../Typo'; + +type ColumnsCount = { count: number; size: Sizes }; + +const isColumnsCount = ( + columns: Sizes | ColumnsCount, +): columns is ColumnsCount => (columns as ColumnsCount).count !== undefined; + +export interface GridPropsOnly { + columns?: Sizes | ColumnsCount; +} + +type GridProps = Omit< + BoxProps<'div'>, + 'basis' | 'flex' | 'flow' | 'wrap' | 'direction' +> & + GridPropsOnly; + +/** + * @param GridProps - + * @inheritdoc {@link Typo} + * @returns Grid component + */ +const Grid = forwardRef( + ({ className, columns, style, ...props }, ref) => { + let moreStyles = {}; + if (columns) { + let count: string | number = ''; + let size: SizeValue = ''; + if (isColumnsCount(columns)) { + count = columns.count; + size = sizesValue(columns.size); + } else { + count = 'auto-fill'; + size = sizesValue(columns); + } + + if (typeof size === 'number') { + size = `min(${size}px, 100%)`; + } else if (typeof size === 'string' && size.includes('px')) { + size = `min(${size}, 100%)`; + } + + moreStyles = { + ...moreStyles, + gridTemplateColumns: size && `repeat(${count}, minmax(${size}, 1fr))`, + }; + } + + return ( + + ); + }, +); + +Grid.displayName = 'Grid'; +export { Grid }; diff --git a/src/frontend/packages/lib_components/src/common/Box/index.spec.tsx b/src/frontend/packages/lib_components/src/common/Box/index.spec.tsx index dd216c88e5..ba5b34d28a 100644 --- a/src/frontend/packages/lib_components/src/common/Box/index.spec.tsx +++ b/src/frontend/packages/lib_components/src/common/Box/index.spec.tsx @@ -41,12 +41,6 @@ describe('', () => { ); }); - it('has gap prop', () => { - render(My Box); - - expect(screen.getByText('My Box')).toHaveStyle(`gap: 2px`); - }); - it('has round prop', () => { render(My Box); diff --git a/src/frontend/packages/lib_components/src/common/Box/index.tsx b/src/frontend/packages/lib_components/src/common/Box/index.tsx index e4a3177ad0..bc1ab6d1ee 100644 --- a/src/frontend/packages/lib_components/src/common/Box/index.tsx +++ b/src/frontend/packages/lib_components/src/common/Box/index.tsx @@ -1,5 +1,5 @@ import { colorsTokens } from 'lib-common'; -import { CSSProperties, ReactElement, ReactHTML, Ref, forwardRef } from 'react'; +import { ReactElement, ReactHTML, Ref, forwardRef } from 'react'; import { Spacings, @@ -8,14 +8,14 @@ import { spacingValue, } from '@lib-components/common/Typo'; +export { Grid } from './Grid'; + export interface BoxPropsOnly { - gap?: Spacings; - direction?: CSSProperties['flexDirection']; round?: Spacings; elevation?: boolean; } -type BoxTypes = Pick< +export type BoxTypes = Pick< ReactHTML, 'div' | 'header' | 'footer' | 'article' | 'ul' | 'li' | 'nav' | 'section' >; @@ -46,7 +46,6 @@ const BoxRef = forwardRef( className, direction = 'column', elevation, - gap, justify = 'normal', round, type = 'div', @@ -57,6 +56,7 @@ const BoxRef = forwardRef( return ( align={align} + direction={direction} justify={justify} ref={ref} type={type} @@ -64,8 +64,6 @@ const BoxRef = forwardRef( {...props} style={{ borderRadius: spacingValue(round), - flexDirection: direction, - gap: spacingValue(gap), boxShadow: elevation ? `0 2px 6px ${colorsTokens['primary-500']}44` : undefined, diff --git a/src/frontend/packages/lib_components/src/common/Card/ContentCard/index.tsx b/src/frontend/packages/lib_components/src/common/Card/ContentCard/index.tsx index 9299acd1c1..3611c540d2 100644 --- a/src/frontend/packages/lib_components/src/common/Card/ContentCard/index.tsx +++ b/src/frontend/packages/lib_components/src/common/Card/ContentCard/index.tsx @@ -54,7 +54,7 @@ export const ContentCard = ({ return ( ', () => { + it('renders the default component and children', () => { + render( + my-image, + ); + + const img = screen.getByLabelText('my-label-image'); + expect(img).toBeInTheDocument(); + expect(img).toHaveClass('typo-img'); + expect(img).toHaveAttribute('alt', 'my-image'); + expect(img).toHaveAttribute('src', 'http://my-image.jpg'); + }); + + it('has `fit` prop', () => { + render(); + + expect(screen.getByLabelText('my-label-image')).toHaveStyle( + 'object-fit: cover', + ); + }); +}); diff --git a/src/frontend/packages/lib_components/src/common/Image/index.tsx b/src/frontend/packages/lib_components/src/common/Image/index.tsx new file mode 100644 index 0000000000..02f847935e --- /dev/null +++ b/src/frontend/packages/lib_components/src/common/Image/index.tsx @@ -0,0 +1,34 @@ +import { CSSProperties, forwardRef } from 'react'; + +import { Typo, TypoProps } from '../Typo'; + +export interface ImagePropsOnly { + fit?: CSSProperties['objectFit']; +} + +type ImageProps = Omit, 'type'>; + +/** + * @param ImageProps - + * @inheritdoc {@link Typo} + * @returns Image component + */ +const Image = forwardRef( + ({ className, fit, style, ...props }, ref) => { + return ( + + ); + }, +); + +Image.displayName = 'Image'; +export { Image }; diff --git a/src/frontend/packages/lib_components/src/common/ThumbnailDisplayer/index.tsx b/src/frontend/packages/lib_components/src/common/ThumbnailDisplayer/index.tsx index 3b0e7979b8..6e994a55ae 100644 --- a/src/frontend/packages/lib_components/src/common/ThumbnailDisplayer/index.tsx +++ b/src/frontend/packages/lib_components/src/common/ThumbnailDisplayer/index.tsx @@ -1,7 +1,7 @@ -import { Image } from 'grommet'; import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; +import { Image } from '@lib-components/common'; import { urls, videoSize } from '@lib-components/types/tracks'; import { videoSizeMapping } from './videoSizeMapping'; diff --git a/src/frontend/packages/lib_components/src/common/Typo/index.spec.tsx b/src/frontend/packages/lib_components/src/common/Typo/index.spec.tsx index 5104106aa5..54d2051fe6 100644 --- a/src/frontend/packages/lib_components/src/common/Typo/index.spec.tsx +++ b/src/frontend/packages/lib_components/src/common/Typo/index.spec.tsx @@ -248,6 +248,20 @@ describe('', () => { expect(screen.getByText('My Typo')).toHaveStyle('flex-flow: wrap'); }); + it('has the direction prop', () => { + render(My Typo); + + expect(screen.getByText('My Typo')).toHaveStyle( + 'flex-direction: row-reverse', + ); + }); + + it('has the wrap prop', () => { + render(My Typo); + + expect(screen.getByText('My Typo')).toHaveStyle('flex-wrap: nowrap'); + }); + it('has the justify prop', () => { render(My Typo); @@ -265,4 +279,10 @@ describe('', () => { expect(screen.getByText('My Typo')).toHaveStyle('position: absolute'); }); + + it('has this gap prop', () => { + render(My Typo); + + expect(screen.getByText('My Typo')).toHaveStyle(`gap: 2px`); + }); }); diff --git a/src/frontend/packages/lib_components/src/common/Typo/index.tsx b/src/frontend/packages/lib_components/src/common/Typo/index.tsx index 523854dcce..9abeac8ccc 100644 --- a/src/frontend/packages/lib_components/src/common/Typo/index.tsx +++ b/src/frontend/packages/lib_components/src/common/Typo/index.tsx @@ -12,7 +12,9 @@ import { Flex, Height, MarginPadding, + Spacings, Width, + spacingValue, stylesFlex, stylesHeight, stylesMargin, @@ -42,11 +44,13 @@ export interface TypoPropsOnly { background?: CSSProperties['background']; basis?: CSSProperties['flexBasis']; color?: CSSProperties['color']; + direction?: CSSProperties['flexDirection']; display?: CSSProperties['display']; fill?: boolean | 'horizontal' | 'vertical' | 'full'; flex?: Flex; flow?: CSSProperties['flexFlow']; fontSize?: CSSProperties['fontSize']; + gap?: Spacings; height?: Height; justify?: CSSProperties['justifyContent']; margin?: MarginPadding; @@ -57,6 +61,7 @@ export interface TypoPropsOnly { textAlign?: CSSProperties['textAlign']; truncate?: boolean | number; width?: Width; + wrap?: CSSProperties['flexWrap']; } /** @@ -108,11 +113,13 @@ const TypoRef = forwardRef( children, className, color, + direction, display, fill, flex, flow, fontSize, + gap, height, justify, margin, @@ -123,6 +130,7 @@ const TypoRef = forwardRef( truncate, type = 'div', width, + wrap, ...props }: TypoProps, ref: Ref>, @@ -179,13 +187,6 @@ const TypoRef = forwardRef( bgClassname = ` ${background}`; } - if (flex) { - moreStyles = { - ...moreStyles, - ...stylesFlex(flex), - }; - } - return createElement( type, { @@ -197,8 +198,11 @@ const TypoRef = forwardRef( background: bgClassname ? undefined : background, color: colorClassname ? undefined : color, display, - flexBasis: basis, + ...stylesFlex(flex, basis), flexFlow: flow, + flexDirection: direction, + flexWrap: wrap, + gap: spacingValue(gap), fontSize, height: fill && fill !== 'horizontal' ? '100%' : undefined, justifyContent: justify, diff --git a/src/frontend/packages/lib_components/src/common/Typo/styleBuilder.ts b/src/frontend/packages/lib_components/src/common/Typo/styleBuilder.ts index 30ff6f064e..1c4436baea 100644 --- a/src/frontend/packages/lib_components/src/common/Typo/styleBuilder.ts +++ b/src/frontend/packages/lib_components/src/common/Typo/styleBuilder.ts @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/ban-types */ import { themeTokens } from 'lib-common'; +import { CSSProperties } from 'react'; const { sizes, @@ -34,8 +35,8 @@ export type MarginPadding = type SizesKey = keyof typeof sizes; export type Sizes = SizesKey | (string & {}) | (number & {}); - -export const sizesValue = (value?: Sizes) => +export type SizeValue = string | (number & {}) | undefined; +export const sizesValue = (value?: Sizes): SizeValue => value && value in sizes ? sizes[value as SizesKey] : value; export type Width = @@ -153,29 +154,30 @@ export const stylesHeight = (height: Height) => { } }; -export type Flex = boolean | 'grow' | 'shrink' | (string & {}); -export const stylesFlex = (flex: Flex) => { +export type Flex = boolean | 'grow' | 'shrink' | (string & {}) | undefined; +export const stylesFlex = (flex: Flex, basis: CSSProperties['flexBasis']) => { if (flex === 'grow') { return { flexGrow: 1, flexShrink: 0, - flexBasis: 'auto', + flexBasis: basis || 'auto', }; } else if (flex === 'shrink') { return { flexGrow: 0, flexShrink: 1, - flexBasis: 'auto', + flexBasis: basis || 'auto', }; } else if (flex === true) { return { flexGrow: 1, flexShrink: 1, - flexBasis: 'auto', + flexBasis: basis || 'auto', }; } return { flex, + flexBasis: basis, }; }; diff --git a/src/frontend/packages/lib_components/src/common/WizardLayout/index.tsx b/src/frontend/packages/lib_components/src/common/WizardLayout/index.tsx index 2eaf5fc75c..412f6369e0 100644 --- a/src/frontend/packages/lib_components/src/common/WizardLayout/index.tsx +++ b/src/frontend/packages/lib_components/src/common/WizardLayout/index.tsx @@ -1,6 +1,7 @@ -import { Image, Stack } from 'grommet'; +import { Stack } from 'grommet'; import React from 'react'; +import { Image } from '@lib-components/common'; import { useAppConfig } from '@lib-components/data/stores/useAppConfig'; import { useResponsive } from '@lib-components/hooks/useResponsive'; diff --git a/src/frontend/packages/lib_components/src/common/index.tsx b/src/frontend/packages/lib_components/src/common/index.tsx index 733659e8c8..25b36f0cd5 100644 --- a/src/frontend/packages/lib_components/src/common/index.tsx +++ b/src/frontend/packages/lib_components/src/common/index.tsx @@ -11,6 +11,7 @@ export * from './ErrorComponents'; export * from './FoldableItem'; export * from './Form'; export * from './Headings'; +export * from './Image'; export * from './ItemList'; export * from './List'; export * from './Loader'; diff --git a/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardTabStatistics/index.tsx b/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardTabStatistics/index.tsx index 37b9f432af..2c7915c8ca 100644 --- a/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardTabStatistics/index.tsx +++ b/src/frontend/packages/lib_video/src/components/common/DashboardControlPane/DashboardTabStatistics/index.tsx @@ -1,5 +1,4 @@ -import { Grid } from 'grommet'; -import { Box, BoxLoader, Text } from 'lib-components'; +import { Box, BoxLoader, Grid, Text } from 'lib-components'; import React, { useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; diff --git a/src/frontend/packages/lib_video/src/components/live/common/SharedMediaExplorer/ImageViewer/index.tsx b/src/frontend/packages/lib_video/src/components/live/common/SharedMediaExplorer/ImageViewer/index.tsx index 9903365179..3e47f2e88d 100644 --- a/src/frontend/packages/lib_video/src/components/live/common/SharedMediaExplorer/ImageViewer/index.tsx +++ b/src/frontend/packages/lib_video/src/components/live/common/SharedMediaExplorer/ImageViewer/index.tsx @@ -1,5 +1,4 @@ -import { Image } from 'grommet'; -import { Box } from 'lib-components'; +import { Box, Image } from 'lib-components'; import React from 'react'; import { defineMessages, useIntl } from 'react-intl';