@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/Shield2.js

@@ -1,9 +1,225 @@
-import { a as ShieldProps } from './types22.js';
-import { C as Comp } from './helpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
+import { u as useTheme } from './useTheme.js';
+import { N as NotificationsColorPalette } from './colors.js';
+
+/**
+ * Component variant.
+ */
+const ShieldVariant = {
+  success: 'success',
+  successLocked: 'successLocked',
+  successUnlocked: 'successUnlocked',
+  fail: 'fail',
+  failLocked: 'failLocked',
+  failUnlocked: 'failUnlocked',
+  warning: 'warning',
+  warningLocked: 'warningLocked',
+  warningUnlocked: 'warningUnlocked',
+  ignored: 'ignored',
+  noData: 'noData',
+  question: 'question',
+  email: 'email'
+};
+
+/**
+ * Component props.
+ */
+
+const StyledShield = styled.div`
+  height: 24px;
+  width: 20px;
+  ${baseStyling}
+
+  box-sizing: content-box;
+
+  ${_ref => {
+  let {
+    $color,
+    $isOutlined,
+    $isReversed,
+    $theme
+  } = _ref;
+  if ($isReversed && $isOutlined) {
+    return css`
+        & .shield {
+          fill: var(--redsift-color-notifications-${$color}-primary);
+          stroke: var(--redsift-color-${$theme}-components-page-background);
+          stroke-width: 2;
+        }
+        & .icon {
+          fill-rule: evenodd;
+          clip-rule: evenodd;
+          fill: var(--redsift-color-${$theme}-components-page-background);
+        }
+      `;
+  } else if ($isOutlined) {
+    return css`
+        & .shield {
+          fill: var(--redsift-color-${$theme}-components-page-background);
+          stroke: var(--redsift-color-notifications-${$color}-primary);
+          stroke-width: 2;
+        }
+        & .icon {
+          fill-rule: evenodd;
+          clip-rule: evenodd;
+          fill: var(--redsift-color-notifications-${$color}-primary);
+        }
+      `;
+  } else if ($isReversed) {
+    return css`
+        & .shield {
+          fill: var(--redsift-color-${$theme}-components-page-background);
+        }
+        & .icon {
+          fill-rule: evenodd;
+          clip-rule: evenodd;
+          fill: var(--redsift-color-notifications-${$color}-primary);
+        }
+      `;
+  } else {
+    return css`
+        & .shield {
+          fill: var(--redsift-color-notifications-${$color}-primary);
+        }
+        & .icon {
+          fill-rule: evenodd;
+          clip-rule: evenodd;
+          fill: var(--redsift-color-${$theme}-components-page-background);
+        }
+      `;
+  }
+}}
+`;
+
+const _excluded = ["aria-hidden", "aria-label", "className", "svgProps", "isOutlined", "isReversed", "theme", "variant"];
+const COMPONENT_NAME = 'Shield';
+const CLASSNAME = 'redsift-shield';
+const getVariant = variant => {
+  switch (variant) {
+    case ShieldVariant.email:
+      return {
+        color: NotificationsColorPalette.info,
+        icon: 'M14.7,6.3H5.3c-0.6,0-1.2,0.5-1.2,1.2l0,7c0,0.6,0.5,1.2,1.2,1.2h9.3c0.6,0,1.2-0.5,1.2-1.2v-7 C15.8,6.9,15.3,6.3,14.7,6.3z M14.7,14.5H5.3V8.7l4.7,2.9l4.7-2.9V14.5z M10,10.4L5.3,7.5h9.3L10,10.4z'
+      };
+    case ShieldVariant.fail:
+      return {
+        color: NotificationsColorPalette.error,
+        icon: 'M9,15V5h2v10H9z M9,19v-2h2v2H9z'
+      };
+    case ShieldVariant.failLocked:
+      return {
+        color: NotificationsColorPalette.error,
+        icon: 'M13.5,9.7h-0.6V8.5c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M10,14.9c-0.6,0-1.2-0.5-1.2-1.2 s0.5-1.2,1.2-1.2c0.6,0,1.2,0.5,1.2,1.2S10.6,14.9,10,14.9z M11.8,9.7H8.2V8.5c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8V9.7z'
+      };
+    case ShieldVariant.failUnlocked:
+      return {
+        color: NotificationsColorPalette.error,
+        icon: 'M10,14.9c0.6,0,1.2-0.5,1.2-1.2s-0.5-1.2-1.2-1.2c-0.6,0-1.2,0.5-1.2,1.2S9.4,14.9,10,14.9z M13.5,9.7h-0.6V8.5 c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5h1.1c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M13.5,16.7h-7v-5.8h7V16.7z'
+      };
+    case ShieldVariant.ignored:
+      return {
+        color: NotificationsColorPalette['no-data'],
+        icon: 'M10,6.2c-3.2,0-5.8,2.6-5.8,5.8c0,3.2,2.6,5.8,5.8,5.8s5.8-2.6,5.8-5.8C15.8,8.8,13.2,6.2,10,6.2z M5.3,12 c0-2.6,2.1-4.7,4.7-4.7c1.1,0,2.1,0.4,2.9,1l-6.5,6.5C5.7,14.1,5.3,13.1,5.3,12z M10,16.7c-1.1,0-2.1-0.4-2.9-1l6.5-6.5 c0.6,0.8,1,1.8,1,2.9C14.7,14.6,12.6,16.7,10,16.7z'
+      };
+    case ShieldVariant.noData:
+      return {
+        color: NotificationsColorPalette['no-data'],
+        icon: 'M16,13H4v-2h12V13z'
+      };
+    case ShieldVariant.question:
+      return {
+        color: NotificationsColorPalette.question,
+        icon: 'M9,17h2v-2H9V17z M10,5C7.8,5,6,6.8,6,9h2c0-1.1,0.9-2,2-2s2,0.9,2,2c0,2-3,1.8-3,5h2c0-2.2,3-2.5,3-5 C14,6.8,12.2,5,10,5z'
+      };
+    case ShieldVariant.success:
+      return {
+        color: NotificationsColorPalette.success,
+        icon: 'M8,16.6l8.5-8.5l-1.4-1.4L8,13.7l-2.8-2.8l-1.4,1.4L8,16.6z'
+      };
+    case ShieldVariant.successLocked:
+      return {
+        color: NotificationsColorPalette.success,
+        icon: 'M13.5,9.7h-0.6V8.5c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M10,14.9c-0.6,0-1.2-0.5-1.2-1.2 s0.5-1.2,1.2-1.2c0.6,0,1.2,0.5,1.2,1.2S10.6,14.9,10,14.9z M11.8,9.7H8.2V8.5c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8V9.7z'
+      };
+    case ShieldVariant.successUnlocked:
+      return {
+        color: NotificationsColorPalette.success,
+        icon: 'M10,14.9c0.6,0,1.2-0.5,1.2-1.2s-0.5-1.2-1.2-1.2c-0.6,0-1.2,0.5-1.2,1.2S9.4,14.9,10,14.9z M13.5,9.7h-0.6V8.5 c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5h1.1c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M13.5,16.7h-7v-5.8h7V16.7z'
+      };
+    case ShieldVariant.warning:
+      return {
+        color: NotificationsColorPalette.warning,
+        icon: 'M10,5c0.7,0,1.4,0.4,1.7,1l4,7c0.4,0.6,0.4,1.4,0,2c-0.4,0.6-1,1-1.7,1H6c-0.7,0-1.4-0.4-1.7-1 c-0.4-0.6-0.4-1.4,0-2l4-7C8.6,5.4,9.3,5,10,5z M10,7l-4,7h8L10,7z'
+      };
+    case ShieldVariant.warningLocked:
+      return {
+        color: NotificationsColorPalette.warning,
+        icon: 'M13.5,9.7h-0.6V8.5c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M10,14.9c-0.6,0-1.2-0.5-1.2-1.2 s0.5-1.2,1.2-1.2c0.6,0,1.2,0.5,1.2,1.2S10.6,14.9,10,14.9z M11.8,9.7H8.2V8.5c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8V9.7z'
+      };
+    case ShieldVariant.warningUnlocked:
+      return {
+        color: NotificationsColorPalette.warning,
+        icon: 'M10,14.9c0.6,0,1.2-0.5,1.2-1.2s-0.5-1.2-1.2-1.2c-0.6,0-1.2,0.5-1.2,1.2S9.4,14.9,10,14.9z M13.5,9.7h-0.6V8.5 c0-1.6-1.3-2.9-2.9-2.9S7.1,6.9,7.1,8.5h1.1c0-1,0.8-1.8,1.8-1.8s1.8,0.8,1.8,1.8v1.2H6.5c-0.6,0-1.2,0.5-1.2,1.2v5.8 c0,0.6,0.5,1.2,1.2,1.2h7c0.6,0,1.2-0.5,1.2-1.2v-5.8C14.7,10.2,14.1,9.7,13.5,9.7z M13.5,16.7h-7v-5.8h7V16.7z'
+      };
+  }
+};
 
 /**
  * The Shield component.
  */
-declare const Shield: Comp<ShieldProps, HTMLDivElement>;
+const Shield = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
+      className,
+      svgProps,
+      isOutlined,
+      isReversed,
+      theme: propsTheme,
+      variant = ShieldVariant.success
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const {
+    color,
+    icon
+  } = getVariant(variant);
+  return /*#__PURE__*/React__default.createElement(StyledShield, _extends({}, forwardedProps, {
+    "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
+    "aria-label": ariaLabel,
+    className: classNames(Shield.className, className),
+    ref: ref,
+    $color: color,
+    $isOutlined: isOutlined,
+    $isReversed: isReversed,
+    $theme: theme,
+    $variant: variant
+  }), /*#__PURE__*/React__default.createElement("svg", _extends({
+    "aria-hidden": ariaLabel ? ariaHidden ? ariaHidden : undefined : true,
+    "aria-label": ariaLabel,
+    focusable: "false",
+    preserveAspectRatio: "xMidYMid meet",
+    role: "img",
+    style: {
+      verticalAlign: '-0.125em'
+    },
+    viewBox: "0 0 20 24",
+    width: "20",
+    height: "24"
+  }, svgProps), /*#__PURE__*/React__default.createElement("path", {
+    d: isOutlined ? 'M1,10.9V5l9-3.9L19,5v5.9c0,5.5-3.9,10.7-9,12.1C4.9,21.6,1,16.4,1,10.9z' : 'M10,0L0,4.4v6.5C0,17,4.3,22.6,10,24c5.7-1.4,10-7,10-13.1V4.4L10,0z',
+    className: "shield"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: icon,
+    className: "icon"
+  })));
+});
+Shield.className = CLASSNAME;
+Shield.displayName = COMPONENT_NAME;
 
-export { Shield as S };
+export { Shield as S, ShieldVariant as a };
+//# sourceMappingURL=Shield2.js.map