@times-components/message-bar/dist/styles/shared.js

A component for showing user notifications

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.sharedStyle = void 0;

var _tsStyleguide = require("@times-components/ts-styleguide");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

const height = 50;
const messageBarBody = {
  maxWidth: 1182,
  width: "100%",
  flexDirection: "row",
  alignItems: "center",
  height,
  flexGrow: 1,
  flexShrink: 0,
  marginLeft: "auto",
  marginRight: "auto"
};
const messageBarCloseButton = {
  alignItems: "center",
  backgroundColor: _tsStyleguide.colours.functional.transparentWhite,
  borderRadius: 14,
  height: 28,
  justifyContent: "center",
  marginLeft: "auto",
  marginRight: 20,
  width: 28,
  padding: 0,
  display: "inherit",
  border: "0px"
};

const messageBarText = scale => _objectSpread(_objectSpread({
  color: _tsStyleguide.colours.functional.white
}, (0, _tsStyleguide.fontFactory)({
  font: "headline",
  fontSize: "secondary",
  scale
})), {}, {
  marginLeft: 20
});

const sharedStyle = scale => ({
  messageBarBodyContainer: {
    backgroundColor: _tsStyleguide.colours.functional.articleFlagUpdated,
    shadowColor: "rgba(0, 0, 0, 0.2)",
    shadowOffset: {
      height: 2,
      width: 0
    },
    shadowRadius: 5,
    zIndex: 10
  },
  messageBarBody,
  messageBarCloseButton,
  messageBarText: _objectSpread({}, messageBarText(scale)),
  messageManager: {
    flex: 1,
    width: "100%",
    zIndex: 10
  }
});

exports.sharedStyle = sharedStyle;

const smallBreakpointStyles = scale => _objectSpread(_objectSpread({}, sharedStyle(scale)), {}, {
  messageBarCloseButton: _objectSpread(_objectSpread({}, messageBarCloseButton), {}, {
    marginRight: 10
  }),
  messageBarText: _objectSpread(_objectSpread({}, messageBarText(scale)), {}, {
    marginLeft: 10
  })
});

const mediumBreakpointStyles = scale => _objectSpread(_objectSpread({}, sharedStyle(scale)), {}, {
  messageBarCloseButton: _objectSpread(_objectSpread({}, messageBarCloseButton), {}, {
    marginRight: 10
  }),
  messageBarText: _objectSpread(_objectSpread({}, messageBarText(scale)), {}, {
    marginLeft: 60
  })
});

const wideBreakpointStyles = scale => _objectSpread(_objectSpread({}, sharedStyle(scale)), {}, {
  messageBarBody: _objectSpread(_objectSpread({}, messageBarBody), {}, {
    maxWidth: 1024
  })
});

const hugeBreakpointStyles = scale => _objectSpread({}, sharedStyle(scale));

const stylesResolver = {
  small: smallBreakpointStyles,
  medium: mediumBreakpointStyles,
  wide: wideBreakpointStyles,
  huge: hugeBreakpointStyles
};

var _default = function _default(scale) {
  let breakpoint = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "huge";
  return stylesResolver[breakpoint](scale);
};

exports.default = _default;