@synerise/ds-banner 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,81 @@
+---
+id: banner
+title: Banner
+---
+
+Banner UI Component
+
+## Installation
+
+```
+npm i @synerise/ds-banner
+or
+yarn add @synerise/ds-banner
+```
+
+## Usage
+
+```
+import Banner from '@synerise/ds-banner'
+
+<Banner />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-banner--default"></iframe>
+
+## API
+
+| Property         | Description                                                           | Type                                 | Default   |
+| ---------------- | --------------------------------------------------------------------- | ------------------------------------ | --------- |
+| slides           | Array of slides to display                                            | BannerSlideProps[]                   | -         |
+| autoPlay         | auto-start slideshow (if multiple slides present)                     | boolean                              | true      |
+| transitionEffect | slide transition effect                                               | 'scrollx' / 'fade' see antd carousel | 'scrollx' |
+| autoPlaySpeed    | duration of single slide display (ms)                                 | number                               | 5000      |
+| onAfterChange    | handler to call after slides change                                   | (index: number) => void              | -         |
+| onBeforeChange   | handler to call before slides change                                  | (from: number, to: index) => void    | -         |
+| onClose          | handler to call when 'X' is clicked                                   | () => void                           | -         |
+| expandable       | displays persistent bar above slides with a collapse button and title | ExpandableProps                      | -         |
+| texts            | custom translations                                                   | BannerTexts                          | -         |
+
+### BannerSlideProps
+
+| Property         | Description        | Type                                                       | Default |
+| ---------------- | ------------------ | ---------------------------------------------------------- | ------- |
+| mainContent      | main area content  | BannerSlideTextContentProps / BannerSlideMediaContentProps | -       |
+| leftSideContent  | left side content  | BannerSlideTextContentProps / BannerSlideMediaContentProps | -       |
+| rightSideContent | right side content | BannerSlideTextContentProps / BannerSlideMediaContentProps | -       |
+
+### BannerSlideTextContentProps
+
+| Property    | Description                       | Type                       | Default |
+| ----------- | --------------------------------- | -------------------------- | ------- |
+| titlePrefix | icon / avatar prefix of the title | ReactNode                  | -       |
+| titleStatus | Title status tag                  | StatusProps, see ds-status | -       |
+| title       | Slide title                       | ReactNode                  | -       |
+| buttons     | Slide buttons                     | ReactNode                  | -       |
+| description | Slide description text            | ReactNode                  | -       |
+
+### BannerSlideMediaContentProps
+
+| Property | Description      | Type      | Default |
+| -------- | ---------------- | --------- | ------- |
+| media    | image to display | ReactNode | -       |
+
+### ExpandableProps
+
+| Property | Description            | Type      | Default |
+| -------- | ---------------------- | --------- | ------- |
+| title    | Top bar title text     | ReactNode | -       |
+| icon     | Top bar icon prefix    | ReactNode | -       |
+| expanded | default exapnded state | boolean   | true    |
+
+### BannerTexts
+
+| Property     | Description                                  | Type      | Default    |
+| ------------ | -------------------------------------------- | --------- | ---------- |
+| expand       | toggle button label when banner is collapsed | ReactNode | 'Expand'   |
+| collapse     | toggle button label when banner is expanded  | ReactNode | 'Collapse' |
+| closeTooltip | tooltip text over 'X' icon                   | ReactNode | 'Close'    |

package/dist/Banner.const.d.ts

@@ -0,0 +1,3 @@
+export declare const DEFAULT_SLIDE_SPEED = 5000;
+export declare const DEFAULT_STATUS_COLOR: string;
+export declare const DEFAULT_STATUS_TEXT_COLOR: string;

package/dist/Banner.const.js

@@ -0,0 +1,4 @@
+import { theme } from '@synerise/ds-core';
+export var DEFAULT_SLIDE_SPEED = 5000;
+export var DEFAULT_STATUS_COLOR = theme.palette['yellow-600'];
+export var DEFAULT_STATUS_TEXT_COLOR = theme.palette.white;

package/dist/Banner.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { BannerProps } from './Banner.types';
+declare const Banner: ({ slides, autoPlay, autoPlaySpeed, transitionEffect, onAfterChange, onBeforeChange, texts, onClose, expandable, ...htmlAttributes }: BannerProps) => React.JSX.Element;
+export default Banner;

package/dist/Banner.js

@@ -0,0 +1,93 @@
+var _excluded = ["slides", "autoPlay", "autoPlaySpeed", "transitionEffect", "onAfterChange", "onBeforeChange", "texts", "onClose", "expandable"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useState, useMemo } from 'react';
+import { v4 as uuid } from 'uuid';
+import Button from '@synerise/ds-button';
+import Icon, { CloseM } from '@synerise/ds-icon';
+import Tooltip from '@synerise/ds-tooltip';
+import * as S from './Banner.styles';
+import { BannerSlide, BannerCounter, BannerHeader } from './components';
+import { useTexts, useCarousel } from './hooks';
+import { DEFAULT_SLIDE_SPEED } from './Banner.const';
+var Banner = function Banner(_ref) {
+  var slides = _ref.slides,
+    _ref$autoPlay = _ref.autoPlay,
+    autoPlay = _ref$autoPlay === void 0 ? true : _ref$autoPlay,
+    _ref$autoPlaySpeed = _ref.autoPlaySpeed,
+    autoPlaySpeed = _ref$autoPlaySpeed === void 0 ? DEFAULT_SLIDE_SPEED : _ref$autoPlaySpeed,
+    _ref$transitionEffect = _ref.transitionEffect,
+    transitionEffect = _ref$transitionEffect === void 0 ? 'scrollx' : _ref$transitionEffect,
+    onAfterChange = _ref.onAfterChange,
+    onBeforeChange = _ref.onBeforeChange,
+    texts = _ref.texts,
+    onClose = _ref.onClose,
+    expandable = _ref.expandable,
+    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(0),
+    currentIndex = _useState[0],
+    setCurrentIndex = _useState[1];
+  var _useState2 = useState((expandable == null ? void 0 : expandable.isExpanded) !== undefined ? expandable == null ? void 0 : expandable.isExpanded : true),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var _useCarousel = useCarousel(),
+    bannerRef = _useCarousel.bannerRef,
+    handleDotClick = _useCarousel.handleDotClick,
+    handleNextClick = _useCarousel.handleNextClick,
+    handlePrevClick = _useCarousel.handlePrevClick;
+  var allTexts = useTexts(texts);
+  var slidesWithUUID = useMemo(function () {
+    return slides.map(function (slide) {
+      return _objectSpread({}, slide, {
+        id: uuid()
+      });
+    });
+  }, [slides]);
+  var handleBeforeChange = function handleBeforeChange(from, to) {
+    setCurrentIndex(to);
+    // eslint-disable-next-line no-unused-expressions
+    onBeforeChange == null || onBeforeChange(from, to);
+  };
+  var closeButton = onClose && /*#__PURE__*/React.createElement(S.BannerCloseWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+    title: texts == null ? void 0 : texts.closeTooltip
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onClose,
+    mode: "single-icon",
+    type: "ghost"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CloseM, null)
+  }))));
+  var expandableHeader = expandable && /*#__PURE__*/React.createElement(BannerHeader, _extends({}, expandable, {
+    isExpanded: isExpanded,
+    closeButton: closeButton,
+    onToggle: setIsExpanded,
+    texts: allTexts
+  }));
+  return /*#__PURE__*/React.createElement(S.BannerWrapper, _extends({}, htmlAttributes, {
+    count: slides.length
+  }), expandableHeader || closeButton, isExpanded && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.BannerSlides, {
+    ref: bannerRef,
+    afterChange: onAfterChange,
+    beforeChange: handleBeforeChange,
+    autoplay: autoPlay,
+    autoplaySpeed: autoPlaySpeed,
+    effect: transitionEffect,
+    dots: false
+  }, slidesWithUUID.map(function (slide) {
+    return /*#__PURE__*/React.createElement(BannerSlide, _extends({}, slide, {
+      key: slide.id
+    }));
+  })), slides.length > 1 && /*#__PURE__*/React.createElement(BannerCounter, {
+    onPrevClick: handlePrevClick,
+    onNextClick: handleNextClick,
+    onDotClick: handleDotClick,
+    currentIndex: currentIndex,
+    slides: slidesWithUUID
+  })));
+};
+export default Banner;

package/dist/Banner.styles.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { Carousel } from 'antd';
+export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {
+    count: number;
+}, never>;
+export declare const BannerCloseWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerHeaderWrapper: import("styled-components").StyledComponent<"div", any, {
+    isExpanded: boolean;
+}, never>;
+export declare const BannerHeaderIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerHeaderTitle: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
+    size?: import("@synerise/ds-typography").TextSize | undefined;
+    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
+    children?: import("react").ReactNode;
+    className?: string | undefined;
+}) => import("react").JSX.Element, any, {}, never>;
+export declare const BannerHeaderToggle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerSlides: import("styled-components").StyledComponent<typeof Carousel, any, {
+    count?: number | undefined;
+}, never>;
+export declare const BannerSlideWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerSlideInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerSlideTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerSlideContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerSlideContentWrapper: import("styled-components").StyledComponent<"div", any, {
+    hasMainContent: boolean;
+    type?: "text" | "media" | undefined;
+    position: 'left' | 'right' | 'main';
+}, never>;
+export declare const BannerSlideTitlePrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerSlideTitleStatus: import("styled-components").StyledComponent<{
+    ({ id, name, className, disabled, removable, image, shape, color, textColor, onRemove, onClick, prefixel, suffixel, texts, asPill, dashed, ...htmlAttributes }: import("@synerise/ds-tags/dist/Tag/Tag.types").TagProps): import("react").JSX.Element;
+    defaultProps: {
+        shape: import("@synerise/ds-tags").TagShape;
+    };
+}, any, {}, never>;
+export declare const BannerSlideTitleText: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => import("react").JSX.Element, any, {}, never>;
+export declare const BannerSlideDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerSlideMediaWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerSlideButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerCounterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerCounterDot: import("styled-components").StyledComponent<"div", any, {
+    active?: boolean | undefined;
+}, never>;

package/dist/Banner.styles.js

@@ -0,0 +1,107 @@
+import styled, { css } from 'styled-components';
+import { Carousel } from 'antd';
+import { Tag } from '@synerise/ds-tags';
+import { Text, Title } from '@synerise/ds-typography';
+export var BannerWrapper = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerWrapper",
+  componentId: "sc-1rovna0-0"
+})(["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;}"], function (props) {
+  return props.theme.palette['grey-100'];
+});
+export var BannerCloseWrapper = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerCloseWrapper",
+  componentId: "sc-1rovna0-1"
+})(["position:absolute;right:8px;top:8px;z-index:10;"]);
+export var BannerHeaderWrapper = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerHeaderWrapper",
+  componentId: "sc-1rovna0-2"
+})(["display:flex;gap:16px;align-items:center;padding:8px 16px;", " ", "{position:static;}"], function (props) {
+  return props.isExpanded && css(["border-bottom:solid 1px ", ";"], props.theme.palette['grey-300']);
+}, BannerCloseWrapper);
+export var BannerHeaderIcon = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerHeaderIcon",
+  componentId: "sc-1rovna0-3"
+})([""]);
+export var BannerHeaderTitle = styled(Text).withConfig({
+  displayName: "Bannerstyles__BannerHeaderTitle",
+  componentId: "sc-1rovna0-4"
+})(["flex-grow:1;"]);
+export var BannerHeaderToggle = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerHeaderToggle",
+  componentId: "sc-1rovna0-5"
+})([""]);
+export var BannerDivider = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerDivider",
+  componentId: "sc-1rovna0-6"
+})(["width:1px;height:32px;background:", ";"], function (props) {
+  return props.theme.palette['grey-300'];
+});
+export var BannerSlides = styled(Carousel).withConfig({
+  displayName: "Bannerstyles__BannerSlides",
+  componentId: "sc-1rovna0-7"
+})(["min-width:100%;display:flex;"]);
+export var BannerSlideWrapper = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerSlideWrapper",
+  componentId: "sc-1rovna0-8"
+})([""]);
+export var BannerSlideInner = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerSlideInner",
+  componentId: "sc-1rovna0-9"
+})(["display:flex;flex:1 0 100%;width:100%;"]);
+export var BannerSlideTitle = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerSlideTitle",
+  componentId: "sc-1rovna0-10"
+})(["display:flex;gap:16px;align-items:center;position:relative;"]);
+export var BannerSlideContent = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerSlideContent",
+  componentId: "sc-1rovna0-11"
+})([""]);
+export var BannerSlideContentWrapper = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerSlideContentWrapper",
+  componentId: "sc-1rovna0-12"
+})(["display:flex;", ";", ";"], function (_ref) {
+  var type = _ref.type;
+  return type === 'media' ? css(["flex-direction:row;"]) : css(["flex-direction:column;gap:8px;padding:48px 40px;"]);
+}, function (_ref2) {
+  var position = _ref2.position,
+    hasMainContent = _ref2.hasMainContent;
+  return position === 'main' ? css(["flex-grow:1;"]) : css(["flex-grow:", ";flex-basis:240px;flex-shrink:0;"], hasMainContent ? '0' : '1');
+});
+export var BannerSlideTitlePrefix = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerSlideTitlePrefix",
+  componentId: "sc-1rovna0-13"
+})([""]);
+export var BannerSlideTitleStatus = styled(Tag).withConfig({
+  displayName: "Bannerstyles__BannerSlideTitleStatus",
+  componentId: "sc-1rovna0-14"
+})(["margin:0;"]);
+export var BannerSlideTitleText = styled(Title).withConfig({
+  displayName: "Bannerstyles__BannerSlideTitleText",
+  componentId: "sc-1rovna0-15"
+})(["margin-bottom:0;"]);
+export var BannerSlideDescription = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerSlideDescription",
+  componentId: "sc-1rovna0-16"
+})([""]);
+export var BannerSlideMediaWrapper = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerSlideMediaWrapper",
+  componentId: "sc-1rovna0-17"
+})(["width:100%;display:flex;justify-content:center;align-items:center;overflow:hidden;img,video{max-width:100%;max-height:100%;}"]);
+export var BannerSlideButtons = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerSlideButtons",
+  componentId: "sc-1rovna0-18"
+})(["margin-top:16px;display:flex;gap:8px;"]);
+export var BannerCounterWrapper = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerCounterWrapper",
+  componentId: "sc-1rovna0-19"
+})(["padding:4px;display:flex;align-items:center;justify-content:center;gap:8px;border-top:solid 1px ", ";"], function (props) {
+  return props.theme.palette['grey-300'];
+});
+export var BannerCounterDot = styled.div.withConfig({
+  displayName: "Bannerstyles__BannerCounterDot",
+  componentId: "sc-1rovna0-20"
+})(["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:", ";}}"], function (props) {
+  return props.active ? props.theme.palette['blue-600'] : props.theme.palette['grey-300'];
+}, function (props) {
+  return props.active ? props.theme.palette['blue-600'] : props.theme.palette['grey-400'];
+});

package/dist/Banner.types.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import type { WithHTMLAttributes } from '@synerise/ds-utils';
+import type { TagProps } from '@synerise/ds-tags';
+type Texts = 'expand' | 'collapse' | 'closeTooltip';
+export type BannerTexts = {
+    [k in Texts]: ReactNode;
+};
+export type BannerProps = WithHTMLAttributes<HTMLDivElement, {
+    slides: Array<BannerSlideProps>;
+    autoPlay?: boolean;
+    transitionEffect?: 'scrollx' | 'fade';
+    autoPlaySpeed?: number;
+    onAfterChange?: (index: number) => void;
+    onBeforeChange?: (from: number, to: number) => void;
+    onClose?: () => void;
+    expandable?: Omit<BannerHeaderProps, 'closeButton' | 'onToggle' | 'texts'>;
+    texts?: Partial<BannerTexts>;
+}>;
+export type BannerHeaderProps = {
+    closeButton?: ReactNode;
+    title: ReactNode;
+    icon?: ReactNode;
+    isExpanded?: boolean;
+    onToggle: (isExpanded: boolean) => void;
+    texts: BannerTexts;
+};
+export type BannerSlideProps = WithHTMLAttributes<HTMLDivElement, {
+    mainContent?: BannerSlideTextContentProps | BannerSlideMediaContentProps;
+    leftSideContent?: BannerSlideTextContentProps | BannerSlideMediaContentProps;
+    rightSideContent?: BannerSlideTextContentProps | BannerSlideMediaContentProps;
+}>;
+export type BannerSlideContentProps = {
+    position: 'left' | 'right' | 'main';
+    hasMainContent?: boolean;
+};
+export type BannerSlideTextContentProps = {
+    titlePrefix?: ReactNode;
+    titleStatus?: Pick<TagProps, 'textColor' | 'color' | 'name'>;
+    title?: ReactNode;
+    buttons?: ReactNode;
+    description?: ReactNode;
+};
+export type BannerSlideMediaContentProps = {
+    media?: ReactNode;
+};
+export type BannerCounterProps = {
+    slides: Array<BannerSlideProps & {
+        id: string;
+    }>;
+    currentIndex: number;
+    onDotClick: (index: number) => void;
+    onNextClick: () => void;
+    onPrevClick: () => void;
+};
+export {};

package/dist/Banner.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/BannerCounter/BannerCounter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { BannerCounterProps } from '../../Banner.types';
+export declare const BannerCounter: ({ slides, currentIndex, onDotClick, onPrevClick, onNextClick }: BannerCounterProps) => React.JSX.Element;

package/dist/components/BannerCounter/BannerCounter.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import Button from '@synerise/ds-button';
+import Icon, { AngleLeftS, AngleRightS } from '@synerise/ds-icon';
+import * as S from '../../Banner.styles';
+export var BannerCounter = function BannerCounter(_ref) {
+  var slides = _ref.slides,
+    currentIndex = _ref.currentIndex,
+    onDotClick = _ref.onDotClick,
+    onPrevClick = _ref.onPrevClick,
+    onNextClick = _ref.onNextClick;
+  return /*#__PURE__*/React.createElement(S.BannerCounterWrapper, {
+    "data-testid": "banner-counter"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "ghost",
+    onClick: onPrevClick,
+    mode: "single-icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(AngleLeftS, null)
+  })), slides.map(function (slide, index) {
+    return /*#__PURE__*/React.createElement(S.BannerCounterDot, {
+      key: slide.id,
+      active: index === currentIndex,
+      onClick: function onClick() {
+        return onDotClick(index);
+      }
+    });
+  }), /*#__PURE__*/React.createElement(Button, {
+    type: "ghost",
+    onClick: onNextClick,
+    mode: "single-icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(AngleRightS, null)
+  })));
+};

package/dist/components/BannerHeader/BannerHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { BannerHeaderProps } from '../../Banner.types';
+export declare const BannerHeader: ({ closeButton, icon, title, isExpanded, texts, onToggle }: BannerHeaderProps) => React.JSX.Element;

package/dist/components/BannerHeader/BannerHeader.js

@@ -0,0 +1,29 @@
+import React, { useMemo } from 'react';
+import Button from '@synerise/ds-button';
+import Icon, { AngleDownS, AngleUpS } from '@synerise/ds-icon';
+import * as S from '../../Banner.styles';
+export var BannerHeader = function BannerHeader(_ref) {
+  var closeButton = _ref.closeButton,
+    icon = _ref.icon,
+    title = _ref.title,
+    _ref$isExpanded = _ref.isExpanded,
+    isExpanded = _ref$isExpanded === void 0 ? true : _ref$isExpanded,
+    texts = _ref.texts,
+    onToggle = _ref.onToggle;
+  var toggleButtonElement = useMemo(function () {
+    return /*#__PURE__*/React.createElement(Button, {
+      mode: "label-icon",
+      type: "ghost-primary",
+      onClick: function onClick() {
+        return onToggle(!isExpanded);
+      }
+    }, isExpanded ? texts.collapse : texts.expand, /*#__PURE__*/React.createElement(Icon, {
+      component: isExpanded ? /*#__PURE__*/React.createElement(AngleUpS, null) : /*#__PURE__*/React.createElement(AngleDownS, null)
+    }));
+  }, [isExpanded, onToggle, texts.collapse, texts.expand]);
+  return /*#__PURE__*/React.createElement(S.BannerHeaderWrapper, {
+    isExpanded: isExpanded
+  }, icon && /*#__PURE__*/React.createElement(S.BannerHeaderIcon, null, icon), /*#__PURE__*/React.createElement(S.BannerHeaderTitle, {
+    size: "small"
+  }, title), /*#__PURE__*/React.createElement(S.BannerHeaderToggle, null, toggleButtonElement), closeButton && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.BannerDivider, null), closeButton));
+};

package/dist/components/BannerSlide/BannerSlide.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { BannerSlideProps } from '../../Banner.types';
+export declare const BannerSlide: ({ mainContent, leftSideContent, rightSideContent }: BannerSlideProps) => React.JSX.Element;

package/dist/components/BannerSlide/BannerSlide.js

@@ -0,0 +1,40 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useMemo } from 'react';
+import * as S from '../../Banner.styles';
+import { BannerSlideMediaContent, BannerSlideTextContent } from '../index';
+import { isMediaContent } from '../../utils/isMediaContent';
+export var BannerSlide = function BannerSlide(_ref) {
+  var mainContent = _ref.mainContent,
+    leftSideContent = _ref.leftSideContent,
+    rightSideContent = _ref.rightSideContent;
+  var hasMainContent = Boolean(mainContent);
+  var leftSideComponent = useMemo(function () {
+    if (!leftSideContent) return /*#__PURE__*/React.createElement(React.Fragment, null);
+    return isMediaContent(leftSideContent) ? /*#__PURE__*/React.createElement(BannerSlideMediaContent, _extends({
+      position: "left",
+      hasMainContent: hasMainContent
+    }, leftSideContent)) : /*#__PURE__*/React.createElement(BannerSlideTextContent, _extends({
+      position: "left",
+      hasMainContent: hasMainContent
+    }, leftSideContent));
+  }, [leftSideContent, hasMainContent]);
+  var rightSideComponent = useMemo(function () {
+    if (!rightSideContent) return /*#__PURE__*/React.createElement(React.Fragment, null);
+    return isMediaContent(rightSideContent) ? /*#__PURE__*/React.createElement(BannerSlideMediaContent, _extends({
+      position: "right",
+      hasMainContent: hasMainContent
+    }, rightSideContent)) : /*#__PURE__*/React.createElement(BannerSlideTextContent, _extends({
+      position: "right",
+      hasMainContent: hasMainContent
+    }, rightSideContent));
+  }, [rightSideContent, hasMainContent]);
+  var mainComponent = useMemo(function () {
+    if (!mainContent) return /*#__PURE__*/React.createElement(React.Fragment, null);
+    return isMediaContent(mainContent) ? /*#__PURE__*/React.createElement(BannerSlideMediaContent, _extends({
+      position: "main"
+    }, mainContent)) : /*#__PURE__*/React.createElement(BannerSlideTextContent, _extends({
+      position: "main"
+    }, mainContent));
+  }, [mainContent]);
+  return /*#__PURE__*/React.createElement(S.BannerSlideWrapper, null, /*#__PURE__*/React.createElement(S.BannerSlideInner, null, leftSideComponent, mainComponent, rightSideComponent));
+};

package/dist/components/BannerSlideMediaContent/BannerSlideMediaContent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { BannerSlideContentProps, BannerSlideMediaContentProps } from '../../Banner.types';
+export declare const BannerSlideMediaContent: ({ media, position, hasMainContent, }: BannerSlideMediaContentProps & BannerSlideContentProps) => React.JSX.Element;

package/dist/components/BannerSlideMediaContent/BannerSlideMediaContent.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import * as S from '../../Banner.styles';
+export var BannerSlideMediaContent = function BannerSlideMediaContent(_ref) {
+  var media = _ref.media,
+    position = _ref.position,
+    hasMainContent = _ref.hasMainContent;
+  return /*#__PURE__*/React.createElement(S.BannerSlideContentWrapper, {
+    hasMainContent: !!hasMainContent,
+    position: position,
+    type: "media"
+  }, /*#__PURE__*/React.createElement(S.BannerSlideMediaWrapper, null, media));
+};

package/dist/components/BannerSlideTextContent/BannerSlideTextContent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { BannerSlideTextContentProps, BannerSlideContentProps } from '../../Banner.types';
+export declare const BannerSlideTextContent: ({ title, titlePrefix, titleStatus, description, position, buttons, hasMainContent, }: BannerSlideTextContentProps & BannerSlideContentProps) => React.JSX.Element;

package/dist/components/BannerSlideTextContent/BannerSlideTextContent.js

@@ -0,0 +1,27 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+import { TagShape } from '@synerise/ds-tags';
+import * as S from '../../Banner.styles';
+import { DEFAULT_STATUS_COLOR, DEFAULT_STATUS_TEXT_COLOR } from '../../Banner.const';
+export var BannerSlideTextContent = function BannerSlideTextContent(_ref) {
+  var title = _ref.title,
+    titlePrefix = _ref.titlePrefix,
+    titleStatus = _ref.titleStatus,
+    description = _ref.description,
+    position = _ref.position,
+    buttons = _ref.buttons,
+    hasMainContent = _ref.hasMainContent;
+  return /*#__PURE__*/React.createElement(S.BannerSlideContentWrapper, {
+    hasMainContent: !!hasMainContent,
+    position: position,
+    type: "text"
+  }, title && /*#__PURE__*/React.createElement(React.Fragment, null, titleStatus && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(S.BannerSlideTitleStatus, _extends({
+    color: DEFAULT_STATUS_COLOR,
+    textColor: DEFAULT_STATUS_TEXT_COLOR
+  }, titleStatus, {
+    asPill: true,
+    shape: TagShape.SMALL_SQUARE
+  }))), /*#__PURE__*/React.createElement(S.BannerSlideTitle, null, titlePrefix && /*#__PURE__*/React.createElement(S.BannerSlideTitlePrefix, null, titlePrefix), /*#__PURE__*/React.createElement(S.BannerSlideTitleText, {
+    level: 1
+  }, title))), description && /*#__PURE__*/React.createElement(S.BannerSlideDescription, null, description), buttons && /*#__PURE__*/React.createElement(S.BannerSlideButtons, null, buttons));
+};

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './BannerCounter/BannerCounter';
+export * from './BannerHeader/BannerHeader';
+export * from './BannerSlide/BannerSlide';
+export * from './BannerSlideMediaContent/BannerSlideMediaContent';
+export * from './BannerSlideTextContent/BannerSlideTextContent';

package/dist/components/index.js

@@ -0,0 +1,5 @@
+export * from './BannerCounter/BannerCounter';
+export * from './BannerHeader/BannerHeader';
+export * from './BannerSlide/BannerSlide';
+export * from './BannerSlideMediaContent/BannerSlideMediaContent';
+export * from './BannerSlideTextContent/BannerSlideTextContent';

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useCarousel';
+export * from './useTexts';

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useCarousel';
+export * from './useTexts';

package/dist/hooks/useCarousel.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import Carousel from 'antd/lib/carousel';
+export declare const useCarousel: () => {
+    bannerRef: import("react").RefObject<Carousel>;
+    handleDotClick: (index: number) => void;
+    handleNextClick: () => void;
+    handlePrevClick: () => void;
+};

package/dist/hooks/useCarousel.js

@@ -0,0 +1,19 @@
+import { useRef } from 'react';
+export var useCarousel = function useCarousel() {
+  var bannerRef = useRef(null);
+  var handleDotClick = function handleDotClick(index) {
+    bannerRef.current && bannerRef.current.goTo(index);
+  };
+  var handleNextClick = function handleNextClick() {
+    bannerRef.current && bannerRef.current.next();
+  };
+  var handlePrevClick = function handlePrevClick() {
+    bannerRef.current && bannerRef.current.prev();
+  };
+  return {
+    bannerRef: bannerRef,
+    handleDotClick: handleDotClick,
+    handleNextClick: handleNextClick,
+    handlePrevClick: handlePrevClick
+  };
+};

package/dist/hooks/useTexts.d.ts

@@ -0,0 +1,2 @@
+import { BannerTexts } from '../Banner.types';
+export declare const useTexts: (texts?: Partial<BannerTexts>) => BannerTexts;

package/dist/hooks/useTexts.js

@@ -0,0 +1,23 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { useIntl } from 'react-intl';
+export var useTexts = function useTexts(texts) {
+  var intl = useIntl();
+  return _objectSpread({
+    expand: intl.formatMessage({
+      id: 'DS.BANNER.EXPAND',
+      defaultMessage: 'Expand'
+    }),
+    collapse: intl.formatMessage({
+      id: 'DS.BANNER.COLLAPSE',
+      defaultMessage: 'Collapse'
+    }),
+    closeTooltip: intl.formatMessage({
+      id: 'DS.BANNER.CLOSE-TOOLTIP',
+      defaultMessage: 'Close'
+    })
+  }, texts || {});
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Banner';
+export type { BannerProps } from './Banner.types';

package/dist/index.js

@@ -0,0 +1 @@
+export { default } from './Banner';

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/utils/isMediaContent.d.ts

@@ -0,0 +1,2 @@
+import { BannerSlideTextContentProps, BannerSlideMediaContentProps } from '../Banner.types';
+export declare const isMediaContent: (props: BannerSlideTextContentProps | BannerSlideMediaContentProps) => props is BannerSlideMediaContentProps;

package/dist/utils/isMediaContent.js

@@ -0,0 +1,3 @@
+export var isMediaContent = function isMediaContent(props) {
+  return 'media' in props;
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@synerise/ds-banner",
+  "version": "0.0.1",
+  "description": "Banner UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "pack:ci": "npm pack --pack-destination ../../portal/storybook-static/static",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit",
+    "upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-button": "^0.21.21",
+    "@synerise/ds-icon": "^0.68.0",
+    "@synerise/ds-tags": "^0.10.20",
+    "@synerise/ds-tooltip": "^0.14.51",
+    "@synerise/ds-typography": "^0.16.8",
+    "@synerise/ds-utils": "^0.31.2",
+    "uuid": "^8.3.2"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "antd": "4.7.0",
+    "react": ">=16.9.0 <= 17.0.2",
+    "react-intl": ">= 3.12.0 <= 6.8",
+    "styled-components": "^5.0.1"
+  },
+  "gitHead": "a378cf0bf0f6ed94c63e0aed6da0ca95a8264c83"
+}