diff --git a/sanityv3/schemas/objects/card.tsx b/sanityv3/schemas/objects/card.tsx index c326700f7..8f77d13c8 100644 --- a/sanityv3/schemas/objects/card.tsx +++ b/sanityv3/schemas/objects/card.tsx @@ -1,21 +1,19 @@ /* eslint-disable react/display-name */ import { configureBlockContent } from '../editors' import type { PortableTextBlock } from 'sanity' -import { Stack, Text, Card } from '@sanity/ui' +import { Text, Card, Box } from '@sanity/ui' import blocksToText from '../../helpers/blocksToText' const CardField = (props: any) => { const { renderDefault } = props return ( - - - - If only title are used it will render only title as statement. If content below are used, both title and - content will be rendered. - - + + + If only title are used it will render only title as statement. If content below are used, both title and content + will be rendered. + <>{renderDefault(props)} - + ) } diff --git a/sanityv3/schemas/textSnippets.ts b/sanityv3/schemas/textSnippets.ts index 335c58026..c5503d823 100644 --- a/sanityv3/schemas/textSnippets.ts +++ b/sanityv3/schemas/textSnippets.ts @@ -13,6 +13,7 @@ export const groups = { pensionForm: { title: 'Pension form', hidden: !Flags.HAS_PENSION_FORM }, form: { title: 'Form', hidden: !Flags.HAS_FORMS }, cookie: { title: 'Cookie' }, + carousel: { title: 'Carousel' }, others: { title: 'Others' }, } const snippets: textSnippet = { @@ -942,6 +943,11 @@ const snippets: textSnippet = { defaultValue: 'Select all', group: groups.others, }, + carousel_controls: { + title: 'Carousel controls', + defaultValue: 'Carousel controls', + group: groups.carousel, + }, } type textSnippetGroup = { title: string; hidden?: boolean } diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx index 78818bff8..4b88f6c72 100644 --- a/web/core/Carousel/Carousel.tsx +++ b/web/core/Carousel/Carousel.tsx @@ -27,6 +27,7 @@ import { useMediaQuery } from '../../lib/hooks/useMediaQuery' import { CarouselEventItem } from './CarouselEventItem' import { CarouselKeyNumberItem } from './CarouselKeyNumberItem' import { CarouselIframeItem } from './CarouselIframeItem' +import { FormattedMessage } from 'react-intl' export type DisplayModes = 'single' | 'scroll' export type Layouts = 'full' | 'default' @@ -360,7 +361,9 @@ export const Carousel = forwardRef(function Carousel internalAutoRotation ? 'justify-between' : 'justify-end' }`} > -
{`Carousel controls`}
+
+ +
{internalAutoRotation && ( (function Carousel title={`Go to previous`} aria-controls={carouselItemsId} mode="previous" - disabled={displayMode === 'scroll' && scrollPosition === 'start'} + disabled={(displayMode === 'scroll' && scrollPosition === 'start') ?? false} onClick={() => { if (variant === 'image' && displayMode === 'single') { loopSlidePrev() @@ -395,7 +398,7 @@ export const Carousel = forwardRef(function Carousel title={`Go to next`} mode="next" aria-controls={carouselItemsId} - disabled={displayMode === 'scroll' && scrollPosition === 'end'} + disabled={(displayMode === 'scroll' && scrollPosition === 'end') ?? false} onClick={() => { if (variant === 'image' && displayMode === 'single') { loopSlideNext()