@synerise/ds-broadcast-bar 1.0.1

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 1.0.1 (2025-09-05)
+
+**Note:** Version bump only for package @synerise/ds-broadcast-bar

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,37 @@
+---
+id: broadcast-bar
+title: BroadcastBar
+---
+
+BroadcastBar UI Component
+
+## Installation
+```
+npm i @synerise/ds-broadcast-bar
+or
+yarn add @synerise/ds-broadcast-bar
+```
+
+## Usage
+```
+import BroadcastBar from '@synerise/ds-broadcast-bar'
+
+<BroadcastBar />
+
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-broadcast-bar--default"></iframe>
+
+## API
+
+| Property        | Description                                                             | Type                        | Default    | 
+| ----            | ---                                                                     | ---                         | ---        | 
+| type            | Type of Broadcast-bar styles, options: `success`, `warning`, `negative` | `string`                    | `warning`  | 
+| onCloseClick    | callback fired when close icon clicked                                  | `void`                      | -          |
+| withClose       | prop to set closeIcon                                                   | `boolean`                   | -          |
+| button          | prop to set button                                                      | `React.ReactNode`           | -          |
+| customIcon      | prop to set icon                                                        | `React.ReactNode`           | -          |
+| description     | prop to set description                                                 | `React.ReactNode`           | -          |
+

package/dist/BroadcastBar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { type BroadcastBarProps } from './BroadcastBar.types';
+declare const BroadcastBar: ({ customIcon, type, description, button, withClose, onCloseClick, }: BroadcastBarProps) => React.JSX.Element;
+export default BroadcastBar;

package/dist/BroadcastBar.js

@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import Icon, { CloseM } from '@synerise/ds-icon';
+import * as S from './BroadcastBar.styles';
+import { DEFAULT_ICON, ICONS } from './constants';
+var BroadcastBar = function BroadcastBar(_ref) {
+  var customIcon = _ref.customIcon,
+    type = _ref.type,
+    description = _ref.description,
+    button = _ref.button,
+    withClose = _ref.withClose,
+    onCloseClick = _ref.onCloseClick;
+  var renderMessage = useMemo(function () {
+    return /*#__PURE__*/React.createElement(S.AlertContent, null, description && /*#__PURE__*/React.createElement(S.AlertDescription, null, description));
+  }, [description]);
+  var renderIcon = useMemo(function () {
+    if (customIcon) {
+      return customIcon;
+    }
+    if (ICONS[type]) {
+      return ICONS[type];
+    }
+    return DEFAULT_ICON;
+  }, [customIcon, type]);
+  return /*#__PURE__*/React.createElement(S.Container, {
+    close: withClose,
+    type: type
+  }, /*#__PURE__*/React.createElement(S.WrapperBroadcastBar, {
+    close: withClose,
+    type: type
+  }, /*#__PURE__*/React.createElement(S.AllContent, {
+    close: withClose,
+    type: type
+  }, /*#__PURE__*/React.createElement(S.IconWrapper, {
+    type: type
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: renderIcon
+  })), renderMessage, /*#__PURE__*/React.createElement(S.ButtonWrapper, {
+    type: type
+  }, button)), withClose && /*#__PURE__*/React.createElement(S.ButtonCloseWrapper, null, /*#__PURE__*/React.createElement(S.IconCloseWrapper, {
+    onClick: onCloseClick,
+    type: type
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CloseM, null)
+  })))));
+};
+export default BroadcastBar;

package/dist/BroadcastBar.styles.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+import { type BroadcastBarType } from './BroadcastBar.types';
+export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AllContent: import("styled-components").StyledComponent<"div", any, {
+    type?: BroadcastBarType;
+    close?: boolean | ReactNode;
+}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
+    type?: BroadcastBarType;
+}, never>;
+export declare const IconCloseWrapper: import("styled-components").StyledComponent<"div", any, {
+    type?: BroadcastBarType;
+}, never>;
+export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", any, {
+    type?: BroadcastBarType;
+}, never>;
+export declare const ButtonCloseWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
+    type?: BroadcastBarType;
+}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    type?: BroadcastBarType;
+    close?: boolean;
+}, never>;
+export declare const WrapperBroadcastBar: import("styled-components").StyledComponent<"div", any, {
+    type?: BroadcastBarType;
+    close?: boolean;
+}, never>;
+export declare const AlertDescription: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/BroadcastBar.styles.js

@@ -0,0 +1,74 @@
+import styled, { css } from 'styled-components';
+var getColorBackground = function getColorBackground(props) {
+  if (props.type === 'warning') {
+    return props.theme.palette['yellow-600'];
+  }
+  if (props.type === 'negative') {
+    return props.theme.palette['red-600'];
+  }
+  return props.theme.palette["green-600"];
+};
+var getColorIcon = function getColorIcon(props) {
+  if (props.type === 'warning') {
+    return props.theme.palette['grey-800'];
+  }
+  return props.theme.palette.white;
+};
+export var AlertContent = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__AlertContent",
+  componentId: "sc-1wlkvzq-0"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 0;color:inherit;"]);
+export var AllContent = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__AllContent",
+  componentId: "sc-1wlkvzq-1"
+})(["display:flex;", ";color:", ";"], function (props) {
+  return props.close && css(["position:absolute;left:50%;transform:translateX(-50%);"]);
+}, function (props) {
+  return getColorIcon(props);
+});
+export var IconWrapper = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__IconWrapper",
+  componentId: "sc-1wlkvzq-2"
+})(["margin:8px 12px;color:", ";"], function (props) {
+  return getColorIcon(props);
+});
+export var IconCloseWrapper = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__IconCloseWrapper",
+  componentId: "sc-1wlkvzq-3"
+})(["margin:3px 5px 2px;cursor:pointer;color:", ";"], function (props) {
+  return getColorIcon(props);
+});
+export var ButtonWrapper = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__ButtonWrapper",
+  componentId: "sc-1wlkvzq-4"
+})(["margin:6px 8px;border-radius:3px;display:flex;background-color:rgba(255,255,255,0.2);"]);
+export var ButtonCloseWrapper = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__ButtonCloseWrapper",
+  componentId: "sc-1wlkvzq-5"
+})(["margin:6px 8px;display:flex;"]);
+export var Wrapper = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__Wrapper",
+  componentId: "sc-1wlkvzq-6"
+})(["margin-top:10px;color:", ";"], function (props) {
+  return getColorIcon(props);
+});
+export var Container = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__Container",
+  componentId: "sc-1wlkvzq-7"
+})(["width:100%;display:flex;justify-content:", ";position:relative;background-color:", ";"], function (props) {
+  return props.close ? 'space-between' : 'center';
+}, function (props) {
+  return getColorBackground(props);
+});
+export var WrapperBroadcastBar = styled.div.withConfig({
+  displayName: "BroadcastBarstyles__WrapperBroadcastBar",
+  componentId: "sc-1wlkvzq-8"
+})(["font-size:13px;", ";color:", ";"], function (props) {
+  return props.close && css(["margin-left:auto;"]);
+}, function (props) {
+  return getColorIcon(props);
+});
+export var AlertDescription = styled.span.withConfig({
+  displayName: "BroadcastBarstyles__AlertDescription",
+  componentId: "sc-1wlkvzq-9"
+})(["display:flex;max-width:800px;white-space:normal;font-size:13px;line-height:1.39;font-weight:500;color:inherit;"]);

package/dist/BroadcastBar.types.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+export type BroadcastBarType = 'success' | 'warning' | 'negative';
+export type BroadcastBarProps = {
+    type: BroadcastBarType;
+    button?: ReactNode;
+    withClose?: boolean;
+    onCloseClick?: () => void;
+    customIcon?: ReactNode;
+    description?: ReactNode;
+};

package/dist/BroadcastBar.types.js

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

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+import React, { type ReactNode } from 'react';
+import { type BroadcastBarType } from './BroadcastBar.types';
+export declare const ICONS: Record<BroadcastBarType, ReactNode>;
+export declare const DEFAULT_ICON: React.JSX.Element;

package/dist/constants.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Check3M, ErrorFillM, WarningFillM } from '@synerise/ds-icon';
+export var ICONS = {
+  success: /*#__PURE__*/React.createElement(Check3M, null),
+  warning: /*#__PURE__*/React.createElement(WarningFillM, null),
+  negative: /*#__PURE__*/React.createElement(ErrorFillM, null)
+};
+export var DEFAULT_ICON = /*#__PURE__*/React.createElement(WarningFillM, null);

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './BroadcastBar';
+export type { BroadcastBarProps, BroadcastBarType } from './BroadcastBar.types';

package/dist/index.js

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

package/dist/modules.d.js

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

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@synerise/ds-broadcast-bar",
+  "version": "1.0.1",
+  "description": "BroadcastBar 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 ../../storybook/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": "^1.4.8",
+    "@synerise/ds-icon": "^1.7.0",
+    "@synerise/ds-utils": "^1.4.0",
+    "animate.css": "^4.1.1"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 <= 18.3.1",
+    "styled-components": "^5.3.3"
+  },
+  "gitHead": "7f119fa17e645f1d800aea95c313fe22f348439c"
+}