@synerise/ds-banner 1.2.9 → 1.2.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/Banner.const.js +9 -4
- package/dist/Banner.d.ts +2 -3
- package/dist/Banner.js +54 -83
- package/dist/Banner.styles.d.ts +29 -29
- package/dist/Banner.styles.js +59 -50
- package/dist/Banner.types.d.ts +3 -3
- package/dist/Banner.types.js +1 -1
- package/dist/assets/style/index-tn0RQdqM.css +0 -0
- package/dist/components/BannerCounter/BannerCounter.d.ts +2 -2
- package/dist/components/BannerCounter/BannerCounter.js +20 -34
- package/dist/components/BannerHeader/BannerHeader.d.ts +2 -2
- package/dist/components/BannerHeader/BannerHeader.js +31 -28
- package/dist/components/BannerSlide/BannerSlide.d.ts +2 -2
- package/dist/components/BannerSlide/BannerSlide.js +30 -38
- package/dist/components/BannerSlideMediaContent/BannerSlideMediaContent.d.ts +2 -2
- package/dist/components/BannerSlideMediaContent/BannerSlideMediaContent.js +12 -12
- package/dist/components/BannerSlideTextContent/BannerSlideTextContent.d.ts +2 -2
- package/dist/components/BannerSlideTextContent/BannerSlideTextContent.js +28 -27
- package/dist/components/index.js +12 -5
- package/dist/hooks/index.js +6 -2
- package/dist/hooks/useCarousel.d.ts +2 -2
- package/dist/hooks/useCarousel.js +14 -11
- package/dist/hooks/useTexts.d.ts +1 -1
- package/dist/hooks/useTexts.js +17 -14
- package/dist/index.js +4 -1
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/dist/utils/isMediaContent.d.ts +1 -1
- package/dist/utils/isMediaContent.js +6 -3
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.2.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-banner@1.2.10...@synerise/ds-banner@1.2.11) (2026-04-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-banner
|
|
9
|
+
|
|
10
|
+
## [1.2.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-banner@1.2.9...@synerise/ds-banner@1.2.10) (2026-03-24)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @synerise/ds-banner
|
|
13
|
+
|
|
6
14
|
## [1.2.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-banner@1.2.8...@synerise/ds-banner@1.2.9) (2026-03-20)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-banner
|
package/dist/Banner.const.js
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import { theme } from
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { theme } from "@synerise/ds-core";
|
|
2
|
+
const DEFAULT_SLIDE_SPEED = 5e3;
|
|
3
|
+
const DEFAULT_STATUS_COLOR = theme.palette["yellow-600"];
|
|
4
|
+
const DEFAULT_STATUS_TEXT_COLOR = theme.palette.white;
|
|
5
|
+
export {
|
|
6
|
+
DEFAULT_SLIDE_SPEED,
|
|
7
|
+
DEFAULT_STATUS_COLOR,
|
|
8
|
+
DEFAULT_STATUS_TEXT_COLOR
|
|
9
|
+
};
|
package/dist/Banner.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
3
|
-
import './style/index.less';
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BannerProps } from './Banner.types';
|
|
4
3
|
declare const Banner: ({ slides, autoPlay, autoPlaySpeed, transitionEffect, onAfterChange, onBeforeChange, texts, onClose, expandable, ...htmlAttributes }: BannerProps) => React.JSX.Element;
|
|
5
4
|
export default Banner;
|
package/dist/Banner.js
CHANGED
|
@@ -1,88 +1,59 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
12
|
-
import
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useState, useMemo, createElement } from "react";
|
|
3
|
+
import { v4 } from "uuid";
|
|
4
|
+
import Button from "@synerise/ds-button";
|
|
5
|
+
import Icon, { CloseM } from "@synerise/ds-icon";
|
|
6
|
+
import Tooltip from "@synerise/ds-tooltip";
|
|
7
|
+
import { DEFAULT_SLIDE_SPEED } from "./Banner.const.js";
|
|
8
|
+
import { BannerCloseWrapper, BannerWrapper, BannerSlides } from "./Banner.styles.js";
|
|
9
|
+
import { BannerCounter } from "./components/BannerCounter/BannerCounter.js";
|
|
10
|
+
import { BannerHeader } from "./components/BannerHeader/BannerHeader.js";
|
|
11
|
+
import { BannerSlide } from "./components/BannerSlide/BannerSlide.js";
|
|
12
|
+
import "@synerise/ds-tag";
|
|
13
|
+
import { useCarousel } from "./hooks/useCarousel.js";
|
|
14
|
+
import { useTexts } from "./hooks/useTexts.js";
|
|
13
15
|
import "./style/index.css";
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
var slidesWithUUID = useMemo(function () {
|
|
41
|
-
return slides.map(function (slide) {
|
|
42
|
-
return _extends({}, slide, {
|
|
43
|
-
id: uuid()
|
|
44
|
-
});
|
|
45
|
-
});
|
|
16
|
+
const Banner = ({
|
|
17
|
+
slides,
|
|
18
|
+
autoPlay = true,
|
|
19
|
+
autoPlaySpeed = DEFAULT_SLIDE_SPEED,
|
|
20
|
+
transitionEffect = "scrollx",
|
|
21
|
+
onAfterChange,
|
|
22
|
+
onBeforeChange,
|
|
23
|
+
texts,
|
|
24
|
+
onClose,
|
|
25
|
+
expandable,
|
|
26
|
+
...htmlAttributes
|
|
27
|
+
}) => {
|
|
28
|
+
const [currentIndex, setCurrentIndex] = useState(0);
|
|
29
|
+
const [isExpanded, setIsExpanded] = useState(expandable?.isExpanded !== void 0 ? expandable?.isExpanded : true);
|
|
30
|
+
const {
|
|
31
|
+
bannerRef,
|
|
32
|
+
handleDotClick,
|
|
33
|
+
handleNextClick,
|
|
34
|
+
handlePrevClick
|
|
35
|
+
} = useCarousel();
|
|
36
|
+
const allTexts = useTexts(texts);
|
|
37
|
+
const slidesWithUUID = useMemo(() => {
|
|
38
|
+
return slides.map((slide) => ({
|
|
39
|
+
...slide,
|
|
40
|
+
id: v4()
|
|
41
|
+
}));
|
|
46
42
|
}, [slides]);
|
|
47
|
-
|
|
43
|
+
const handleBeforeChange = (from, to) => {
|
|
48
44
|
setCurrentIndex(to);
|
|
49
|
-
onBeforeChange
|
|
45
|
+
onBeforeChange?.(from, to);
|
|
50
46
|
};
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
})
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
onToggle: setIsExpanded,
|
|
64
|
-
texts: allTexts
|
|
65
|
-
}));
|
|
66
|
-
return /*#__PURE__*/React.createElement(S.BannerWrapper, _extends({}, htmlAttributes, {
|
|
67
|
-
count: slides.length
|
|
68
|
-
}), expandableHeader || closeButton, isExpanded && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.BannerSlides, {
|
|
69
|
-
ref: bannerRef,
|
|
70
|
-
afterChange: onAfterChange,
|
|
71
|
-
beforeChange: handleBeforeChange,
|
|
72
|
-
autoplay: autoPlay,
|
|
73
|
-
autoplaySpeed: autoPlaySpeed,
|
|
74
|
-
effect: transitionEffect,
|
|
75
|
-
dots: false
|
|
76
|
-
}, slidesWithUUID.map(function (slide) {
|
|
77
|
-
return /*#__PURE__*/React.createElement(BannerSlide, _extends({}, slide, {
|
|
78
|
-
key: slide.id
|
|
79
|
-
}));
|
|
80
|
-
})), slides.length > 1 && /*#__PURE__*/React.createElement(BannerCounter, {
|
|
81
|
-
onPrevClick: handlePrevClick,
|
|
82
|
-
onNextClick: handleNextClick,
|
|
83
|
-
onDotClick: handleDotClick,
|
|
84
|
-
currentIndex: currentIndex,
|
|
85
|
-
slides: slidesWithUUID
|
|
86
|
-
})));
|
|
47
|
+
const closeButton = onClose && /* @__PURE__ */ jsx(BannerCloseWrapper, { children: /* @__PURE__ */ jsx(Tooltip, { title: texts?.closeTooltip, children: /* @__PURE__ */ jsx(Button, { onClick: onClose, mode: "single-icon", type: "ghost", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseM, {}) }) }) }) });
|
|
48
|
+
const expandableHeader = expandable && /* @__PURE__ */ jsx(BannerHeader, { ...expandable, isExpanded, closeButton, onToggle: setIsExpanded, texts: allTexts });
|
|
49
|
+
return /* @__PURE__ */ jsxs(BannerWrapper, { ...htmlAttributes, count: slides.length, children: [
|
|
50
|
+
expandableHeader || closeButton,
|
|
51
|
+
isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
52
|
+
/* @__PURE__ */ jsx(BannerSlides, { ref: bannerRef, afterChange: onAfterChange, beforeChange: handleBeforeChange, autoplay: autoPlay, autoplaySpeed: autoPlaySpeed, effect: transitionEffect, dots: false, children: slidesWithUUID.map((slide) => /* @__PURE__ */ createElement(BannerSlide, { ...slide, key: slide.id })) }),
|
|
53
|
+
slides.length > 1 && /* @__PURE__ */ jsx(BannerCounter, { onPrevClick: handlePrevClick, onNextClick: handleNextClick, onDotClick: handleDotClick, currentIndex, slides: slidesWithUUID })
|
|
54
|
+
] })
|
|
55
|
+
] });
|
|
56
|
+
};
|
|
57
|
+
export {
|
|
58
|
+
Banner as default
|
|
87
59
|
};
|
|
88
|
-
export default Banner;
|
package/dist/Banner.styles.d.ts
CHANGED
|
@@ -1,40 +1,40 @@
|
|
|
1
|
-
export declare const BannerWrapper: import(
|
|
1
|
+
export declare const BannerWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
2
2
|
count: number;
|
|
3
3
|
}, never>;
|
|
4
|
-
export declare const BannerCloseWrapper: import(
|
|
5
|
-
export declare const BannerHeaderWrapper: import(
|
|
4
|
+
export declare const BannerCloseWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
5
|
+
export declare const BannerHeaderWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
6
6
|
isExpanded: boolean;
|
|
7
7
|
}, never>;
|
|
8
|
-
export declare const BannerHeaderIcon: import(
|
|
9
|
-
export declare const BannerHeaderTitle: import(
|
|
10
|
-
size?: import(
|
|
11
|
-
ellipsis?: import(
|
|
12
|
-
children?: import(
|
|
8
|
+
export declare const BannerHeaderIcon: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
9
|
+
export declare const BannerHeaderTitle: import('styled-components').StyledComponent<({ size, className, children, ellipsis, style, }: {
|
|
10
|
+
size?: import('@synerise/ds-typography').TextSize;
|
|
11
|
+
ellipsis?: import('@synerise/ds-typography/dist/Ellipsis').EllipsisProps;
|
|
12
|
+
children?: import('react').ReactNode;
|
|
13
13
|
className?: string;
|
|
14
|
-
style?: import(
|
|
14
|
+
style?: import('react').CSSProperties;
|
|
15
15
|
}) => React.JSX.Element, any, {}, never>;
|
|
16
|
-
export declare const BannerHeaderToggle: import(
|
|
17
|
-
export declare const BannerDivider: import(
|
|
18
|
-
export declare const BannerSlides: import(
|
|
16
|
+
export declare const BannerHeaderToggle: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
17
|
+
export declare const BannerDivider: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
18
|
+
export declare const BannerSlides: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<import('antd').CarouselProps & import('react').RefAttributes<import('antd/lib/carousel').CarouselRef>>, any, {
|
|
19
19
|
count?: number;
|
|
20
20
|
}, never>;
|
|
21
|
-
export declare const BannerSlideWrapper: import(
|
|
22
|
-
export declare const BannerSlideInner: import(
|
|
23
|
-
export declare const BannerSlideTitle: import(
|
|
24
|
-
export declare const BannerSlideContent: import(
|
|
25
|
-
export declare const BannerSlideContentWrapper: import(
|
|
21
|
+
export declare const BannerSlideWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
22
|
+
export declare const BannerSlideInner: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
23
|
+
export declare const BannerSlideTitle: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
24
|
+
export declare const BannerSlideContent: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
25
|
+
export declare const BannerSlideContentWrapper: import('styled-components').StyledComponent<"div", any, {
|
|
26
26
|
hasMainContent: boolean;
|
|
27
27
|
type?: "media" | "text";
|
|
28
28
|
position: "left" | "right" | "main";
|
|
29
29
|
}, never>;
|
|
30
|
-
export declare const BannerSlideTitlePrefix: import(
|
|
31
|
-
export declare const BannerSlideTitleStatus: import(
|
|
30
|
+
export declare const BannerSlideTitlePrefix: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
31
|
+
export declare const BannerSlideTitleStatus: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
|
|
32
32
|
id?: string | number;
|
|
33
33
|
name?: string;
|
|
34
34
|
textColor?: string;
|
|
35
35
|
color?: string;
|
|
36
36
|
image?: string;
|
|
37
|
-
shape?: import(
|
|
37
|
+
shape?: import('@synerise/ds-tag').TagShape;
|
|
38
38
|
removable?: boolean;
|
|
39
39
|
className?: string;
|
|
40
40
|
disabled?: boolean;
|
|
@@ -42,16 +42,16 @@ export declare const BannerSlideTitleStatus: import("styled-components").StyledC
|
|
|
42
42
|
onRemove?: (tag: string | number) => void;
|
|
43
43
|
prefixel?: React.ReactNode;
|
|
44
44
|
suffixel?: React.ReactNode;
|
|
45
|
-
texts?: import(
|
|
45
|
+
texts?: import('@synerise/ds-tag').TagTexts;
|
|
46
46
|
asPill?: boolean;
|
|
47
47
|
dashed?: boolean;
|
|
48
|
-
tooltipProps?: import(
|
|
49
|
-
} & Omit<import(
|
|
50
|
-
export declare const BannerSlideTitleText: import(
|
|
51
|
-
export declare const BannerSlideDescription: import(
|
|
52
|
-
export declare const BannerSlideMediaWrapper: import(
|
|
53
|
-
export declare const BannerSlideButtons: import(
|
|
54
|
-
export declare const BannerCounterWrapper: import(
|
|
55
|
-
export declare const BannerCounterDot: import(
|
|
48
|
+
tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
|
|
49
|
+
} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "image" | "className" | "color" | "id" | "name" | "onClick" | "shape" | "disabled" | "textColor" | "removable" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {}, never>;
|
|
50
|
+
export declare const BannerSlideTitleText: import('styled-components').StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import('@synerise/ds-typography/dist/Title.types').Props) => React.JSX.Element, any, {}, never>;
|
|
51
|
+
export declare const BannerSlideDescription: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
52
|
+
export declare const BannerSlideMediaWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
53
|
+
export declare const BannerSlideButtons: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
54
|
+
export declare const BannerCounterWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
|
|
55
|
+
export declare const BannerCounterDot: import('styled-components').StyledComponent<"div", any, {
|
|
56
56
|
active?: boolean;
|
|
57
57
|
}, never>;
|
package/dist/Banner.styles.js
CHANGED
|
@@ -1,107 +1,116 @@
|
|
|
1
|
-
import { Carousel } from
|
|
2
|
-
import styled, { css } from
|
|
3
|
-
import Tag from
|
|
4
|
-
import { Text, Title } from
|
|
5
|
-
|
|
1
|
+
import { Carousel } from "antd";
|
|
2
|
+
import styled, { css } from "styled-components";
|
|
3
|
+
import Tag from "@synerise/ds-tag";
|
|
4
|
+
import { Text, Title } from "@synerise/ds-typography";
|
|
5
|
+
const BannerWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
6
6
|
displayName: "Bannerstyles__BannerWrapper",
|
|
7
7
|
componentId: "sc-1rovna0-0"
|
|
8
|
-
})(["width:100%;background:", ";position:relative;border-radius:3px;overflow:hidden;.ant-carousel{min-width:100%;flex:1 0 100%;}.ant-carousel .slick-track{display:flex;align-items:center;}"],
|
|
9
|
-
|
|
10
|
-
});
|
|
11
|
-
export var BannerCloseWrapper = styled.div.withConfig({
|
|
8
|
+
})(["width:100%;background:", ";position:relative;border-radius:3px;overflow:hidden;.ant-carousel{min-width:100%;flex:1 0 100%;}.ant-carousel .slick-track{display:flex;align-items:center;}"], (props) => props.theme.palette["grey-100"]);
|
|
9
|
+
const BannerCloseWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
12
10
|
displayName: "Bannerstyles__BannerCloseWrapper",
|
|
13
11
|
componentId: "sc-1rovna0-1"
|
|
14
12
|
})(["position:absolute;right:8px;top:8px;z-index:10;"]);
|
|
15
|
-
|
|
13
|
+
const BannerHeaderWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
16
14
|
displayName: "Bannerstyles__BannerHeaderWrapper",
|
|
17
15
|
componentId: "sc-1rovna0-2"
|
|
18
|
-
})(["display:flex;gap:16px;align-items:center;padding:8px 16px;", " ", "{position:static;}"],
|
|
19
|
-
|
|
20
|
-
}, BannerCloseWrapper);
|
|
21
|
-
export var BannerHeaderIcon = styled.div.withConfig({
|
|
16
|
+
})(["display:flex;gap:16px;align-items:center;padding:8px 16px;", " ", "{position:static;}"], (props) => props.isExpanded && css(["border-bottom:solid 1px ", ";"], props.theme.palette["grey-300"]), BannerCloseWrapper);
|
|
17
|
+
const BannerHeaderIcon = /* @__PURE__ */ styled.div.withConfig({
|
|
22
18
|
displayName: "Bannerstyles__BannerHeaderIcon",
|
|
23
19
|
componentId: "sc-1rovna0-3"
|
|
24
20
|
})([""]);
|
|
25
|
-
|
|
21
|
+
const BannerHeaderTitle = /* @__PURE__ */ styled(Text).withConfig({
|
|
26
22
|
displayName: "Bannerstyles__BannerHeaderTitle",
|
|
27
23
|
componentId: "sc-1rovna0-4"
|
|
28
24
|
})(["flex-grow:1;"]);
|
|
29
|
-
|
|
25
|
+
const BannerHeaderToggle = /* @__PURE__ */ styled.div.withConfig({
|
|
30
26
|
displayName: "Bannerstyles__BannerHeaderToggle",
|
|
31
27
|
componentId: "sc-1rovna0-5"
|
|
32
28
|
})([""]);
|
|
33
|
-
|
|
29
|
+
const BannerDivider = /* @__PURE__ */ styled.div.withConfig({
|
|
34
30
|
displayName: "Bannerstyles__BannerDivider",
|
|
35
31
|
componentId: "sc-1rovna0-6"
|
|
36
|
-
})(["width:1px;height:32px;background:", ";"],
|
|
37
|
-
|
|
38
|
-
});
|
|
39
|
-
export var BannerSlides = styled(Carousel).withConfig({
|
|
32
|
+
})(["width:1px;height:32px;background:", ";"], (props) => props.theme.palette["grey-300"]);
|
|
33
|
+
const BannerSlides = /* @__PURE__ */ styled(Carousel).withConfig({
|
|
40
34
|
displayName: "Bannerstyles__BannerSlides",
|
|
41
35
|
componentId: "sc-1rovna0-7"
|
|
42
36
|
})(["min-width:100%;display:flex;"]);
|
|
43
|
-
|
|
37
|
+
const BannerSlideWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
44
38
|
displayName: "Bannerstyles__BannerSlideWrapper",
|
|
45
39
|
componentId: "sc-1rovna0-8"
|
|
46
40
|
})([""]);
|
|
47
|
-
|
|
41
|
+
const BannerSlideInner = /* @__PURE__ */ styled.div.withConfig({
|
|
48
42
|
displayName: "Bannerstyles__BannerSlideInner",
|
|
49
43
|
componentId: "sc-1rovna0-9"
|
|
50
44
|
})(["display:flex;flex:1 0 100%;width:100%;"]);
|
|
51
|
-
|
|
45
|
+
const BannerSlideTitle = /* @__PURE__ */ styled.div.withConfig({
|
|
52
46
|
displayName: "Bannerstyles__BannerSlideTitle",
|
|
53
47
|
componentId: "sc-1rovna0-10"
|
|
54
48
|
})(["display:flex;gap:16px;align-items:center;position:relative;"]);
|
|
55
|
-
|
|
49
|
+
const BannerSlideContent = /* @__PURE__ */ styled.div.withConfig({
|
|
56
50
|
displayName: "Bannerstyles__BannerSlideContent",
|
|
57
51
|
componentId: "sc-1rovna0-11"
|
|
58
52
|
})([""]);
|
|
59
|
-
|
|
53
|
+
const BannerSlideContentWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
60
54
|
displayName: "Bannerstyles__BannerSlideContentWrapper",
|
|
61
55
|
componentId: "sc-1rovna0-12"
|
|
62
|
-
})(["display:flex;", ";", ";"],
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
});
|
|
70
|
-
export var BannerSlideTitlePrefix = styled.div.withConfig({
|
|
56
|
+
})(["display:flex;", ";", ";"], ({
|
|
57
|
+
type
|
|
58
|
+
}) => type === "media" ? css(["flex-direction:row;"]) : css(["flex-direction:column;gap:8px;padding:48px 40px;"]), ({
|
|
59
|
+
position,
|
|
60
|
+
hasMainContent
|
|
61
|
+
}) => position === "main" ? css(["flex-grow:1;"]) : css(["flex-grow:", ";flex-basis:240px;flex-shrink:0;"], hasMainContent ? "0" : "1"));
|
|
62
|
+
const BannerSlideTitlePrefix = /* @__PURE__ */ styled.div.withConfig({
|
|
71
63
|
displayName: "Bannerstyles__BannerSlideTitlePrefix",
|
|
72
64
|
componentId: "sc-1rovna0-13"
|
|
73
65
|
})([""]);
|
|
74
|
-
|
|
66
|
+
const BannerSlideTitleStatus = /* @__PURE__ */ styled(Tag).withConfig({
|
|
75
67
|
displayName: "Bannerstyles__BannerSlideTitleStatus",
|
|
76
68
|
componentId: "sc-1rovna0-14"
|
|
77
69
|
})(["margin:0;"]);
|
|
78
|
-
|
|
70
|
+
const BannerSlideTitleText = /* @__PURE__ */ styled(Title).withConfig({
|
|
79
71
|
displayName: "Bannerstyles__BannerSlideTitleText",
|
|
80
72
|
componentId: "sc-1rovna0-15"
|
|
81
73
|
})(["margin-bottom:0;"]);
|
|
82
|
-
|
|
74
|
+
const BannerSlideDescription = /* @__PURE__ */ styled.div.withConfig({
|
|
83
75
|
displayName: "Bannerstyles__BannerSlideDescription",
|
|
84
76
|
componentId: "sc-1rovna0-16"
|
|
85
77
|
})([""]);
|
|
86
|
-
|
|
78
|
+
const BannerSlideMediaWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
87
79
|
displayName: "Bannerstyles__BannerSlideMediaWrapper",
|
|
88
80
|
componentId: "sc-1rovna0-17"
|
|
89
81
|
})(["width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;img,video{max-width:100%;max-height:100%;}"]);
|
|
90
|
-
|
|
82
|
+
const BannerSlideButtons = /* @__PURE__ */ styled.div.withConfig({
|
|
91
83
|
displayName: "Bannerstyles__BannerSlideButtons",
|
|
92
84
|
componentId: "sc-1rovna0-18"
|
|
93
85
|
})(["margin-top:16px;display:flex;gap:8px;"]);
|
|
94
|
-
|
|
86
|
+
const BannerCounterWrapper = /* @__PURE__ */ styled.div.withConfig({
|
|
95
87
|
displayName: "Bannerstyles__BannerCounterWrapper",
|
|
96
88
|
componentId: "sc-1rovna0-19"
|
|
97
|
-
})(["padding:4px;display:flex;align-items:center;justify-content:center;gap:8px;border-top:solid 1px ", ";"],
|
|
98
|
-
|
|
99
|
-
});
|
|
100
|
-
export var BannerCounterDot = styled.div.withConfig({
|
|
89
|
+
})(["padding:4px;display:flex;align-items:center;justify-content:center;gap:8px;border-top:solid 1px ", ";"], (props) => props.theme.palette["grey-300"]);
|
|
90
|
+
const BannerCounterDot = /* @__PURE__ */ styled.div.withConfig({
|
|
101
91
|
displayName: "Bannerstyles__BannerCounterDot",
|
|
102
92
|
componentId: "sc-1rovna0-20"
|
|
103
|
-
})(["display:flex;width:24px;height:32px;cursor:pointer;align-items:center;&:after{content:'';transition:background-color 0.2s ease-in-out;background:", ";height:4px;width:100%;border-radius:2px;display:block;}&:hover{&:after{background:", ";}}"],
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
93
|
+
})(["display:flex;width:24px;height:32px;cursor:pointer;align-items:center;&:after{content:'';transition:background-color 0.2s ease-in-out;background:", ";height:4px;width:100%;border-radius:2px;display:block;}&:hover{&:after{background:", ";}}"], (props) => props.active ? props.theme.palette["blue-600"] : props.theme.palette["grey-300"], (props) => props.active ? props.theme.palette["blue-600"] : props.theme.palette["grey-400"]);
|
|
94
|
+
export {
|
|
95
|
+
BannerCloseWrapper,
|
|
96
|
+
BannerCounterDot,
|
|
97
|
+
BannerCounterWrapper,
|
|
98
|
+
BannerDivider,
|
|
99
|
+
BannerHeaderIcon,
|
|
100
|
+
BannerHeaderTitle,
|
|
101
|
+
BannerHeaderToggle,
|
|
102
|
+
BannerHeaderWrapper,
|
|
103
|
+
BannerSlideButtons,
|
|
104
|
+
BannerSlideContent,
|
|
105
|
+
BannerSlideContentWrapper,
|
|
106
|
+
BannerSlideDescription,
|
|
107
|
+
BannerSlideInner,
|
|
108
|
+
BannerSlideMediaWrapper,
|
|
109
|
+
BannerSlideTitle,
|
|
110
|
+
BannerSlideTitlePrefix,
|
|
111
|
+
BannerSlideTitleStatus,
|
|
112
|
+
BannerSlideTitleText,
|
|
113
|
+
BannerSlideWrapper,
|
|
114
|
+
BannerSlides,
|
|
115
|
+
BannerWrapper
|
|
116
|
+
};
|
package/dist/Banner.types.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { TagProps } from '@synerise/ds-tag';
|
|
3
|
+
import { WithHTMLAttributes } from '@synerise/ds-utils';
|
|
4
4
|
type Texts = 'expand' | 'collapse' | 'closeTooltip';
|
|
5
5
|
export type BannerTexts = {
|
|
6
6
|
[k in Texts]: ReactNode;
|
package/dist/Banner.types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|
|
File without changes
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BannerCounterProps } from '../../Banner.types';
|
|
3
3
|
export declare const BannerCounter: ({ slides, currentIndex, onDotClick, onPrevClick, onNextClick, }: BannerCounterProps) => React.JSX.Element;
|
|
@@ -1,34 +1,20 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Button from
|
|
3
|
-
import Icon, { AngleLeftS, AngleRightS } from
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
onClick:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
key: slide.id,
|
|
22
|
-
active: index === currentIndex,
|
|
23
|
-
onClick: function onClick() {
|
|
24
|
-
return onDotClick(index);
|
|
25
|
-
}
|
|
26
|
-
});
|
|
27
|
-
}), /*#__PURE__*/React.createElement(Button, {
|
|
28
|
-
type: "ghost",
|
|
29
|
-
onClick: onNextClick,
|
|
30
|
-
mode: "single-icon"
|
|
31
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
|
32
|
-
component: /*#__PURE__*/React.createElement(AngleRightS, null)
|
|
33
|
-
})));
|
|
34
|
-
};
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import Button from "@synerise/ds-button";
|
|
3
|
+
import Icon, { AngleLeftS, AngleRightS } from "@synerise/ds-icon";
|
|
4
|
+
import { BannerCounterWrapper, BannerCounterDot } from "../../Banner.styles.js";
|
|
5
|
+
const BannerCounter = ({
|
|
6
|
+
slides,
|
|
7
|
+
currentIndex,
|
|
8
|
+
onDotClick,
|
|
9
|
+
onPrevClick,
|
|
10
|
+
onNextClick
|
|
11
|
+
}) => {
|
|
12
|
+
return /* @__PURE__ */ jsxs(BannerCounterWrapper, { "data-testid": "banner-counter", children: [
|
|
13
|
+
/* @__PURE__ */ jsx(Button, { type: "ghost", onClick: onPrevClick, mode: "single-icon", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleLeftS, {}) }) }),
|
|
14
|
+
slides.map((slide, index) => /* @__PURE__ */ jsx(BannerCounterDot, { active: index === currentIndex, onClick: () => onDotClick(index) }, slide.id)),
|
|
15
|
+
/* @__PURE__ */ jsx(Button, { type: "ghost", onClick: onNextClick, mode: "single-icon", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleRightS, {}) }) })
|
|
16
|
+
] });
|
|
17
|
+
};
|
|
18
|
+
export {
|
|
19
|
+
BannerCounter
|
|
20
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BannerHeaderProps } from '../../Banner.types';
|
|
3
3
|
export declare const BannerHeader: ({ closeButton, icon, title, isExpanded, texts, onToggle, }: BannerHeaderProps) => React.JSX.Element;
|
|
@@ -1,29 +1,32 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
}, isExpanded ? texts.collapse : texts.expand, /*#__PURE__*/React.createElement(Icon, {
|
|
21
|
-
component: isExpanded ? /*#__PURE__*/React.createElement(AngleUpS, null) : /*#__PURE__*/React.createElement(AngleDownS, null)
|
|
22
|
-
}));
|
|
1
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import Button from "@synerise/ds-button";
|
|
4
|
+
import Icon, { AngleUpS, AngleDownS } from "@synerise/ds-icon";
|
|
5
|
+
import { BannerHeaderWrapper, BannerHeaderIcon, BannerHeaderTitle, BannerHeaderToggle, BannerDivider } from "../../Banner.styles.js";
|
|
6
|
+
const BannerHeader = ({
|
|
7
|
+
closeButton,
|
|
8
|
+
icon,
|
|
9
|
+
title,
|
|
10
|
+
isExpanded = true,
|
|
11
|
+
texts,
|
|
12
|
+
onToggle
|
|
13
|
+
}) => {
|
|
14
|
+
const toggleButtonElement = useMemo(() => {
|
|
15
|
+
return /* @__PURE__ */ jsxs(Button, { mode: "label-icon", type: "ghost-primary", onClick: () => onToggle(!isExpanded), children: [
|
|
16
|
+
isExpanded ? texts.collapse : texts.expand,
|
|
17
|
+
/* @__PURE__ */ jsx(Icon, { component: isExpanded ? /* @__PURE__ */ jsx(AngleUpS, {}) : /* @__PURE__ */ jsx(AngleDownS, {}) })
|
|
18
|
+
] });
|
|
23
19
|
}, [isExpanded, onToggle, texts.collapse, texts.expand]);
|
|
24
|
-
return
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
20
|
+
return /* @__PURE__ */ jsxs(BannerHeaderWrapper, { isExpanded, children: [
|
|
21
|
+
icon && /* @__PURE__ */ jsx(BannerHeaderIcon, { children: icon }),
|
|
22
|
+
/* @__PURE__ */ jsx(BannerHeaderTitle, { size: "small", children: title }),
|
|
23
|
+
/* @__PURE__ */ jsx(BannerHeaderToggle, { children: toggleButtonElement }),
|
|
24
|
+
closeButton && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
25
|
+
/* @__PURE__ */ jsx(BannerDivider, {}),
|
|
26
|
+
closeButton
|
|
27
|
+
] })
|
|
28
|
+
] });
|
|
29
|
+
};
|
|
30
|
+
export {
|
|
31
|
+
BannerHeader
|
|
32
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BannerSlideProps } from '../../Banner.types';
|
|
3
3
|
export declare const BannerSlide: ({ mainContent, leftSideContent, rightSideContent, }: BannerSlideProps) => React.JSX.Element;
|
|
@@ -1,47 +1,39 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import { isMediaContent } from
|
|
5
|
-
import { BannerSlideMediaContent } from
|
|
6
|
-
import { BannerSlideTextContent } from
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
import { BannerSlideWrapper, BannerSlideInner } from "../../Banner.styles.js";
|
|
4
|
+
import { isMediaContent } from "../../utils/isMediaContent.js";
|
|
5
|
+
import { BannerSlideMediaContent } from "../BannerSlideMediaContent/BannerSlideMediaContent.js";
|
|
6
|
+
import { BannerSlideTextContent } from "../BannerSlideTextContent/BannerSlideTextContent.js";
|
|
7
|
+
const BannerSlide = ({
|
|
8
|
+
mainContent,
|
|
9
|
+
leftSideContent,
|
|
10
|
+
rightSideContent
|
|
11
|
+
}) => {
|
|
12
|
+
const hasMainContent = Boolean(mainContent);
|
|
13
|
+
const leftSideComponent = useMemo(() => {
|
|
13
14
|
if (!leftSideContent) {
|
|
14
|
-
return
|
|
15
|
+
return /* @__PURE__ */ jsx(Fragment, {});
|
|
15
16
|
}
|
|
16
|
-
return isMediaContent(leftSideContent) ?
|
|
17
|
-
position: "left",
|
|
18
|
-
hasMainContent: hasMainContent
|
|
19
|
-
}, leftSideContent)) : /*#__PURE__*/React.createElement(BannerSlideTextContent, _extends({
|
|
20
|
-
position: "left",
|
|
21
|
-
hasMainContent: hasMainContent
|
|
22
|
-
}, leftSideContent));
|
|
17
|
+
return isMediaContent(leftSideContent) ? /* @__PURE__ */ jsx(BannerSlideMediaContent, { position: "left", hasMainContent, ...leftSideContent }) : /* @__PURE__ */ jsx(BannerSlideTextContent, { position: "left", hasMainContent, ...leftSideContent });
|
|
23
18
|
}, [leftSideContent, hasMainContent]);
|
|
24
|
-
|
|
19
|
+
const rightSideComponent = useMemo(() => {
|
|
25
20
|
if (!rightSideContent) {
|
|
26
|
-
return
|
|
21
|
+
return /* @__PURE__ */ jsx(Fragment, {});
|
|
27
22
|
}
|
|
28
|
-
return isMediaContent(rightSideContent) ?
|
|
29
|
-
position: "right",
|
|
30
|
-
hasMainContent: hasMainContent
|
|
31
|
-
}, rightSideContent)) : /*#__PURE__*/React.createElement(BannerSlideTextContent, _extends({
|
|
32
|
-
position: "right",
|
|
33
|
-
hasMainContent: hasMainContent
|
|
34
|
-
}, rightSideContent));
|
|
23
|
+
return isMediaContent(rightSideContent) ? /* @__PURE__ */ jsx(BannerSlideMediaContent, { position: "right", hasMainContent, ...rightSideContent }) : /* @__PURE__ */ jsx(BannerSlideTextContent, { position: "right", hasMainContent, ...rightSideContent });
|
|
35
24
|
}, [rightSideContent, hasMainContent]);
|
|
36
|
-
|
|
25
|
+
const mainComponent = useMemo(() => {
|
|
37
26
|
if (!mainContent) {
|
|
38
|
-
return
|
|
27
|
+
return /* @__PURE__ */ jsx(Fragment, {});
|
|
39
28
|
}
|
|
40
|
-
return isMediaContent(mainContent) ?
|
|
41
|
-
position: "main"
|
|
42
|
-
}, mainContent)) : /*#__PURE__*/React.createElement(BannerSlideTextContent, _extends({
|
|
43
|
-
position: "main"
|
|
44
|
-
}, mainContent));
|
|
29
|
+
return isMediaContent(mainContent) ? /* @__PURE__ */ jsx(BannerSlideMediaContent, { position: "main", ...mainContent }) : /* @__PURE__ */ jsx(BannerSlideTextContent, { position: "main", ...mainContent });
|
|
45
30
|
}, [mainContent]);
|
|
46
|
-
return
|
|
47
|
-
|
|
31
|
+
return /* @__PURE__ */ jsx(BannerSlideWrapper, { children: /* @__PURE__ */ jsxs(BannerSlideInner, { children: [
|
|
32
|
+
leftSideComponent,
|
|
33
|
+
mainComponent,
|
|
34
|
+
rightSideComponent
|
|
35
|
+
] }) });
|
|
36
|
+
};
|
|
37
|
+
export {
|
|
38
|
+
BannerSlide
|
|
39
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BannerSlideContentProps, BannerSlideMediaContentProps } from '../../Banner.types';
|
|
3
3
|
export declare const BannerSlideMediaContent: ({ media, position, hasMainContent, }: BannerSlideMediaContentProps & BannerSlideContentProps) => React.JSX.Element;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
};
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { BannerSlideContentWrapper, BannerSlideMediaWrapper } from "../../Banner.styles.js";
|
|
3
|
+
const BannerSlideMediaContent = ({
|
|
4
|
+
media,
|
|
5
|
+
position,
|
|
6
|
+
hasMainContent
|
|
7
|
+
}) => {
|
|
8
|
+
return /* @__PURE__ */ jsx(BannerSlideContentWrapper, { hasMainContent: !!hasMainContent, position, type: "media", children: /* @__PURE__ */ jsx(BannerSlideMediaWrapper, { children: media }) });
|
|
9
|
+
};
|
|
10
|
+
export {
|
|
11
|
+
BannerSlideMediaContent
|
|
12
|
+
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { BannerSlideContentProps, BannerSlideTextContentProps } from '../../Banner.types';
|
|
3
3
|
export declare const BannerSlideTextContent: ({ title, titlePrefix, titleStatus, description, position, buttons, hasMainContent, }: BannerSlideTextContentProps & BannerSlideContentProps) => React.JSX.Element;
|
|
@@ -1,27 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
return
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
})
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { TagShape } from "@synerise/ds-tag";
|
|
3
|
+
import { DEFAULT_STATUS_TEXT_COLOR, DEFAULT_STATUS_COLOR } from "../../Banner.const.js";
|
|
4
|
+
import { BannerSlideContentWrapper, BannerSlideTitleStatus, BannerSlideTitle, BannerSlideTitlePrefix, BannerSlideTitleText, BannerSlideDescription, BannerSlideButtons } from "../../Banner.styles.js";
|
|
5
|
+
const BannerSlideTextContent = ({
|
|
6
|
+
title,
|
|
7
|
+
titlePrefix,
|
|
8
|
+
titleStatus,
|
|
9
|
+
description,
|
|
10
|
+
position,
|
|
11
|
+
buttons,
|
|
12
|
+
hasMainContent
|
|
13
|
+
}) => {
|
|
14
|
+
return /* @__PURE__ */ jsxs(BannerSlideContentWrapper, { hasMainContent: !!hasMainContent, position, type: "text", children: [
|
|
15
|
+
title && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
16
|
+
titleStatus && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(BannerSlideTitleStatus, { color: DEFAULT_STATUS_COLOR, textColor: DEFAULT_STATUS_TEXT_COLOR, ...titleStatus, asPill: true, shape: TagShape.SMALL_SQUARE }) }),
|
|
17
|
+
/* @__PURE__ */ jsxs(BannerSlideTitle, { children: [
|
|
18
|
+
titlePrefix && /* @__PURE__ */ jsx(BannerSlideTitlePrefix, { children: titlePrefix }),
|
|
19
|
+
/* @__PURE__ */ jsx(BannerSlideTitleText, { level: 1, children: title })
|
|
20
|
+
] })
|
|
21
|
+
] }),
|
|
22
|
+
description && /* @__PURE__ */ jsx(BannerSlideDescription, { children: description }),
|
|
23
|
+
buttons && /* @__PURE__ */ jsx(BannerSlideButtons, { children: buttons })
|
|
24
|
+
] });
|
|
25
|
+
};
|
|
26
|
+
export {
|
|
27
|
+
BannerSlideTextContent
|
|
28
|
+
};
|
package/dist/components/index.js
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import { BannerCounter } from "./BannerCounter/BannerCounter.js";
|
|
2
|
+
import { BannerHeader } from "./BannerHeader/BannerHeader.js";
|
|
3
|
+
import { BannerSlide } from "./BannerSlide/BannerSlide.js";
|
|
4
|
+
import { BannerSlideMediaContent } from "./BannerSlideMediaContent/BannerSlideMediaContent.js";
|
|
5
|
+
import { BannerSlideTextContent } from "./BannerSlideTextContent/BannerSlideTextContent.js";
|
|
6
|
+
export {
|
|
7
|
+
BannerCounter,
|
|
8
|
+
BannerHeader,
|
|
9
|
+
BannerSlide,
|
|
10
|
+
BannerSlideMediaContent,
|
|
11
|
+
BannerSlideTextContent
|
|
12
|
+
};
|
package/dist/hooks/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CarouselRef } from 'antd/lib/carousel';
|
|
2
2
|
export declare const useCarousel: () => {
|
|
3
|
-
bannerRef: import(
|
|
3
|
+
bannerRef: import('react').RefObject<CarouselRef>;
|
|
4
4
|
handleDotClick: (index: number) => void;
|
|
5
5
|
handleNextClick: () => void;
|
|
6
6
|
handlePrevClick: () => void;
|
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
import { useRef } from
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { useRef } from "react";
|
|
2
|
+
const useCarousel = () => {
|
|
3
|
+
const bannerRef = useRef(null);
|
|
4
|
+
const handleDotClick = (index) => {
|
|
5
5
|
bannerRef.current && bannerRef.current.goTo(index);
|
|
6
6
|
};
|
|
7
|
-
|
|
7
|
+
const handleNextClick = () => {
|
|
8
8
|
bannerRef.current && bannerRef.current.next();
|
|
9
9
|
};
|
|
10
|
-
|
|
10
|
+
const handlePrevClick = () => {
|
|
11
11
|
bannerRef.current && bannerRef.current.prev();
|
|
12
12
|
};
|
|
13
13
|
return {
|
|
14
|
-
bannerRef
|
|
15
|
-
handleDotClick
|
|
16
|
-
handleNextClick
|
|
17
|
-
handlePrevClick
|
|
14
|
+
bannerRef,
|
|
15
|
+
handleDotClick,
|
|
16
|
+
handleNextClick,
|
|
17
|
+
handlePrevClick
|
|
18
18
|
};
|
|
19
|
-
};
|
|
19
|
+
};
|
|
20
|
+
export {
|
|
21
|
+
useCarousel
|
|
22
|
+
};
|
package/dist/hooks/useTexts.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { BannerTexts } from '../Banner.types';
|
|
2
2
|
export declare const useTexts: (texts?: Partial<BannerTexts>) => BannerTexts;
|
package/dist/hooks/useTexts.js
CHANGED
|
@@ -1,19 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return _extends({
|
|
1
|
+
import { useIntl } from "react-intl";
|
|
2
|
+
const useTexts = (texts) => {
|
|
3
|
+
const intl = useIntl();
|
|
4
|
+
return {
|
|
6
5
|
expand: intl.formatMessage({
|
|
7
|
-
id:
|
|
8
|
-
defaultMessage:
|
|
6
|
+
id: "DS.BANNER.EXPAND",
|
|
7
|
+
defaultMessage: "Expand"
|
|
9
8
|
}),
|
|
10
9
|
collapse: intl.formatMessage({
|
|
11
|
-
id:
|
|
12
|
-
defaultMessage:
|
|
10
|
+
id: "DS.BANNER.COLLAPSE",
|
|
11
|
+
defaultMessage: "Collapse"
|
|
13
12
|
}),
|
|
14
13
|
closeTooltip: intl.formatMessage({
|
|
15
|
-
id:
|
|
16
|
-
defaultMessage:
|
|
17
|
-
})
|
|
18
|
-
|
|
19
|
-
};
|
|
14
|
+
id: "DS.BANNER.CLOSE-TOOLTIP",
|
|
15
|
+
defaultMessage: "Close"
|
|
16
|
+
}),
|
|
17
|
+
...texts || {}
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
export {
|
|
21
|
+
useTexts
|
|
22
|
+
};
|
package/dist/index.js
CHANGED
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom/extend-expect";
|
|
File without changes
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { BannerSlideMediaContentProps, BannerSlideTextContentProps } from '../Banner.types';
|
|
2
2
|
export declare const isMediaContent: (props: BannerSlideTextContentProps | BannerSlideMediaContentProps) => props is BannerSlideMediaContentProps;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-banner",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.11",
|
|
4
4
|
"description": "Banner UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
|
|
25
25
|
"prepublish": "pnpm run build",
|
|
@@ -35,12 +35,12 @@
|
|
|
35
35
|
],
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@synerise/ds-button": "^1.5.
|
|
39
|
-
"@synerise/ds-icon": "^1.15.
|
|
40
|
-
"@synerise/ds-tag": "^1.4.
|
|
41
|
-
"@synerise/ds-tooltip": "^1.4.
|
|
42
|
-
"@synerise/ds-typography": "^1.1.
|
|
43
|
-
"@synerise/ds-utils": "^1.7.
|
|
38
|
+
"@synerise/ds-button": "^1.5.19",
|
|
39
|
+
"@synerise/ds-icon": "^1.15.2",
|
|
40
|
+
"@synerise/ds-tag": "^1.4.19",
|
|
41
|
+
"@synerise/ds-tooltip": "^1.4.11",
|
|
42
|
+
"@synerise/ds-typography": "^1.1.14",
|
|
43
|
+
"@synerise/ds-utils": "^1.7.1",
|
|
44
44
|
"uuid": "^8.3.2"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
@@ -51,5 +51,5 @@
|
|
|
51
51
|
"styled-components": "^5.3.3",
|
|
52
52
|
"vitest": "4"
|
|
53
53
|
},
|
|
54
|
-
"gitHead": "
|
|
54
|
+
"gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
|
|
55
55
|
}
|