@ornikar/kitt-universal 2.1.1 → 2.5.0

package/dist/index-browser-all.es.js

@@ -2,11 +2,13 @@ import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { UserIcon, EyeIcon, EyeOffIcon, XIcon, InfoIcon, AlertTriangleIcon, CheckIcon, AlertCircleIcon } from '@ornikar/kitt-icons';
 export * from '@ornikar/kitt-icons';
-import React, { useRef, useEffect, useContext, createContext, useState, forwardRef, Fragment, useMemo } from 'react';
-import { View, Animated, Easing, Text as Text$1, Image, Pressable, TextInput, Platform, useWindowDimensions, ActivityIndicator, TouchableOpacity, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
+import React, { useRef, useEffect, useContext, createContext, useState, useMemo, forwardRef, Fragment } from 'react';
+import { View, Animated, Easing, Text as Text$1, Image, Pressable, Platform, Linking, TextInput, useWindowDimensions, ActivityIndicator, TouchableOpacity, StyleSheet, ScrollView, Modal as Modal$1 } from 'react-native';
 export { useWindowDimensions as useWindowSize } from 'react-native';
 import styled, { useTheme, css, ThemeProvider } from 'styled-components';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { parse } from 'twemoji-parser';
+import { openBrowserAsync } from 'expo-web-browser';
 import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context';
 import Animated$1, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
@@ -81,7 +83,7 @@ function Icon(_ref5) {
 
 var PrimitiveText = Text$1;
 
-var _excluded$9 = ["accessibilityRole", "base", "variant", "color"];
+var _excluded$a = ["accessibilityRole", "base", "variant", "color"];
 var TypographyTypeContext = /*#__PURE__*/createContext(undefined);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
 function useTypographyColor() {
@@ -120,7 +122,7 @@ function Typography(_ref3) {
       base = _ref3.base,
       variant = _ref3.variant,
       color = _ref3.color,
-      otherProps = _objectWithoutProperties(_ref3, _excluded$9);
+      otherProps = _objectWithoutProperties(_ref3, _excluded$a);
 
   var typeInContext = useContext(TypographyTypeContext);
   var isHeader = isTypographyHeader(base, typeInContext);
@@ -199,7 +201,7 @@ Typography.h4 = createHeading(4, 'header4');
 
 Typography.h5 = createHeading(5, 'header5');
 
-var _excluded$8 = ["size"];
+var _excluded$9 = ["size"];
 
 var getFirstCharacter = function (string) {
   return string ? string[0] : '';
@@ -266,7 +268,7 @@ function AvatarContent(_ref5) {
 function Avatar(_ref6) {
   var _ref6$size = _ref6.size,
       size = _ref6$size === void 0 ? 40 : _ref6$size,
-      rest = _objectWithoutProperties(_ref6, _excluded$8);
+      rest = _objectWithoutProperties(_ref6, _excluded$9);
 
   return /*#__PURE__*/React.createElement(StyledAvatarView, _extends({}, rest, {
     size: size
@@ -275,52 +277,7 @@ function Avatar(_ref6) {
   })));
 }
 
-var PrimitivePressable = Pressable;
-
-var ButtonContainer = /*#__PURE__*/styled(PrimitivePressable).withConfig({
-  displayName: "ButtonContainer",
-  componentId: "kitt-universal__sc-ofbpwm-0"
-})(["min-width:", ";max-width:", ";width:", ";min-height:", ";background-color:", ";padding:", ";flex-direction:row;align-self:flex-start;border-radius:", ";border-color:", ";border-width:", ";"], function (_ref) {
-  var theme = _ref.theme;
-  return theme.kitt.button.minWidth;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      stretch = _ref2.stretch;
-  return stretch ? 'auto' : theme.kitt.button.maxWidth;
-}, function (_ref3) {
-  var stretch = _ref3.stretch;
-  return stretch ? '100%' : 'auto';
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.kitt.button.minHeight;
-}, function (_ref5) {
-  var theme = _ref5.theme,
-      isPressed = _ref5.isPressed,
-      disabled = _ref5.disabled,
-      type = _ref5.type;
-
-  if (disabled) {
-    return theme.kitt.button[type].disabledBackgroundColor;
-  }
-
-  return isPressed ? theme.kitt.button[type].pressedBackgroundColor : theme.kitt.button[type].backgroundColor;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.kitt.button.contentPadding["default"];
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.kitt.button.borderRadius;
-}, function (_ref8) {
-  var theme = _ref8.theme,
-      disabled = _ref8.disabled,
-      type = _ref8.type;
-  return disabled ? theme.kitt.button[type].disabledBorderColor : 'transparent';
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.kitt.button.borderWidth;
-});
-
-var _excluded$7 = ["color"],
+var _excluded$8 = ["color"],
     _excluded2$2 = ["color"];
 
 function TypographyIconInheritColor(props) {
@@ -333,7 +290,7 @@ function TypographyIconInheritColor(props) {
 
 function TypographyIconSpecifiedColor(_ref) {
   var color = _ref.color,
-      otherProps = _objectWithoutProperties(_ref, _excluded$7);
+      otherProps = _objectWithoutProperties(_ref, _excluded$8);
 
   var theme = /*#__PURE__*/useTheme();
   return /*#__PURE__*/React.createElement(Icon, _extends({}, otherProps, {
@@ -466,22 +423,50 @@ function ButtonContent(_ref4) {
   })) : null);
 }
 
-var useButton = function () {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isPressed = _useState2[0],
-      setIsPressed = _useState2[1];
+var PrimitivePressable = Pressable;
 
-  return {
-    isPressed: isPressed,
-    handleButtonPressIn: function handleButtonPressIn() {
-      return setIsPressed(true);
-    },
-    handleButtonPressOut: function handleButtonPressOut() {
-      return setIsPressed(false);
-    }
-  };
-};
+var ButtonPressable = /*#__PURE__*/styled(PrimitivePressable).withConfig({
+  displayName: "ButtonPressable",
+  componentId: "kitt-universal__sc-7ckel6-0"
+})(["min-width:", ";max-width:", ";width:", ";min-height:", ";background-color:", ";padding:", ";flex-direction:row;align-self:flex-start;border-radius:", ";border-color:", ";border-width:", ";"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.kitt.button.minWidth;
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      stretch = _ref2.stretch;
+  return stretch ? 'auto' : theme.kitt.button.maxWidth;
+}, function (_ref3) {
+  var stretch = _ref3.stretch;
+  return stretch ? '100%' : 'auto';
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.button.minHeight;
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      isPressed = _ref5.isPressed,
+      disabled = _ref5.disabled,
+      type = _ref5.type;
+
+  if (disabled) {
+    return theme.kitt.button[type].disabledBackgroundColor;
+  }
+
+  return isPressed ? theme.kitt.button[type].pressedBackgroundColor : theme.kitt.button[type].backgroundColor;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.kitt.button.contentPadding["default"];
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.kitt.button.borderRadius;
+}, function (_ref8) {
+  var theme = _ref8.theme,
+      disabled = _ref8.disabled,
+      type = _ref8.type;
+  return disabled ? theme.kitt.button[type].disabledBorderColor : 'transparent';
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.kitt.button.borderWidth;
+});
 
 function Button(_ref) {
   var children = _ref.children,
@@ -493,29 +478,37 @@ function Button(_ref) {
       iconSpin = _ref.iconSpin,
       stretch = _ref.stretch,
       disabled = _ref.disabled,
-      onPress = _ref.onPress,
-      testID = _ref.testID;
+      testID = _ref.testID,
+      href = _ref.href,
+      hrefAttrs = _ref.hrefAttrs,
+      onPress = _ref.onPress;
 
-  var _useButton = useButton(),
-      isPressed = _useButton.isPressed,
-      handleButtonPressIn = _useButton.handleButtonPressIn,
-      handleButtonPressOut = _useButton.handleButtonPressOut;
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPressed = _useState2[0],
+      setIsPressed = _useState2[1];
 
   var sharedProps = {
     type: type,
     stretch: stretch,
     disabled: disabled
   };
-  return /*#__PURE__*/React.createElement(ButtonContainer // eslint-disable-next-line unicorn/expiring-todo-comments
+  return /*#__PURE__*/React.createElement(ButtonPressable // eslint-disable-next-line unicorn/expiring-todo-comments
   // TODO: When designs are defined, update with the proper onPress styles to mimic TouchableHighlight
   // underlayColor={globalTheme.button[type].pressedBackgroundColor}
   , _extends({}, sharedProps, {
     isPressed: isPressed,
     accessibilityRole: "button",
     testID: testID,
+    href: href,
+    hrefAttrs: hrefAttrs,
     onPress: onPress,
-    onPressIn: handleButtonPressIn,
-    onPressOut: handleButtonPressOut
+    onPressIn: function handleButtonPressIn() {
+      return setIsPressed(true);
+    },
+    onPressOut: function handleButtonPressOut() {
+      return setIsPressed(false);
+    }
   }), /*#__PURE__*/React.createElement(ButtonContent, _extends({}, sharedProps, {
     icon: icon,
     iconPosition: iconPosition,
@@ -552,6 +545,88 @@ function Card(_ref6) {
   }, children);
 }
 
+var PrimitiveImage = Image;
+
+var StyledEmoji = /*#__PURE__*/styled(PrimitiveImage).withConfig({
+  displayName: "Emoji__StyledEmoji",
+  componentId: "kitt-universal__sc-ggl6wj-0"
+})(["width:", "px;height:", "px;"], function (_ref) {
+  var size = _ref.size;
+  return size;
+}, function (_ref2) {
+  var size = _ref2.size;
+  return size;
+});
+function Emoji(_ref3) {
+  var emoji = _ref3.emoji,
+      size = _ref3.size,
+      style = _ref3.style,
+      className = _ref3.className;
+
+  var _useMemo = useMemo(function () {
+    return parse(emoji, {
+      // on native plaforms, you can't display svg as Image
+      assetType: Platform.OS === 'web' ? 'svg' : 'png'
+    });
+  }, [emoji]),
+      _useMemo2 = _slicedToArray(_useMemo, 1),
+      emojiData = _useMemo2[0];
+
+  if (!emojiData) return null;
+  return /*#__PURE__*/React.createElement(StyledEmoji, {
+    size: size,
+    accessibilityLabel: emojiData.text,
+    source: {
+      uri: emojiData.url
+    },
+    style: style,
+    className: className
+  });
+}
+
+var defaultOpenLinkBehavior = {
+  "native": 'openInModal',
+  web: 'targetBlank'
+};
+
+var _excluded$7 = ["as", "href", "openLinkBehavior", "onPress"];
+function ExternalLink(_ref) {
+  var Component = _ref.as,
+      href = _ref.href,
+      _ref$openLinkBehavior = _ref.openLinkBehavior,
+      openLinkBehavior = _ref$openLinkBehavior === void 0 ? defaultOpenLinkBehavior : _ref$openLinkBehavior,
+      onPress = _ref.onPress,
+      rest = _objectWithoutProperties(_ref, _excluded$7);
+
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    onPress: function handleOnPress() {
+      if (onPress) onPress();
+      if (!href) return;
+
+      switch (openLinkBehavior["native"]) {
+        case 'openInModal':
+        case undefined:
+          Linking.openURL(href)["catch"](function (err) {
+            console.error("An error occurred while opening ".concat(href), err);
+          });
+          break;
+
+        case 'openBrowserApp':
+          openBrowserAsync(href)["catch"](function (err) {
+            console.error("An error occurred while opening ".concat(href), err);
+          });
+          break;
+
+        default:
+          if ((process.env.NODE_ENV !== "production")) {
+            throw new Error("Invalid ExternalLink native behavior: ".concat(openLinkBehavior["native"]));
+          }
+
+      }
+    }
+  }));
+}
+
 var getColorFromState = function (state) {
   switch (state) {
     case 'invalid':
@@ -2045,26 +2120,63 @@ var StoryGrid = {
 var Container = /*#__PURE__*/styled(PrimitiveView).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
-})(["background-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], function (_ref) {
+})(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], function (_ref) {
   var theme = _ref.theme,
-      type = _ref.type;
-  return theme.kitt.tag[type].backgroundColor;
+      type = _ref.type,
+      variant = _ref.variant;
+  return theme.kitt.tag[type][variant].backgroundColor;
 }, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.kitt.tag.padding;
+  var theme = _ref2.theme,
+      type = _ref2.type,
+      variant = _ref2.variant;
+  return theme.kitt.tag[type][variant].borderWidth;
 }, function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+      type = _ref3.type,
+      variant = _ref3.variant;
+  return theme.kitt.tag[type][variant].borderColor;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.kitt.tag.padding;
+}, function (_ref5) {
+  var theme = _ref5.theme;
   return theme.kitt.tag.borderRadius;
 });
-function Tag(_ref4) {
-  var label = _ref4.label,
-      _ref4$type = _ref4.type,
-      type = _ref4$type === void 0 ? 'default' : _ref4$type;
+var getLabelColor = function (type, variant) {
+  switch (type) {
+    case 'danger':
+      {
+        return variant === 'outline' ? 'danger' : 'black';
+      }
+
+    case 'primary':
+      {
+        return 'primary';
+      }
+
+    case 'default':
+      {
+        return 'black';
+      }
+
+    default:
+      {
+        return 'black';
+      }
+  }
+};
+function Tag(_ref6) {
+  var label = _ref6.label,
+      _ref6$type = _ref6.type,
+      type = _ref6$type === void 0 ? 'default' : _ref6$type,
+      _ref6$variant = _ref6.variant,
+      variant = _ref6$variant === void 0 ? 'fill' : _ref6$variant;
   return /*#__PURE__*/React.createElement(Container, {
-    type: type
+    type: type,
+    variant: variant
   }, /*#__PURE__*/React.createElement(Typography.Text, {
     base: "body-xsmall",
-    color: type === 'primary' ? 'primary-light' : undefined
+    color: getLabelColor(type, variant)
   }, label));
 }
 
@@ -2119,9 +2231,9 @@ var buttonLateOceanTheme = {
     disabledBorderColor: lateOceanColorPalette.black100
   },
   secondary: {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: 'rgba(0, 0, 0, 0.05)',
     disabledBackgroundColor: lateOceanColorPalette.black50,
-    pressedBackgroundColor: lateOceanColorPalette.black100,
+    pressedBackgroundColor: 'rgba(0, 0, 0, 0.1)',
     disabledBorderColor: lateOceanColorPalette.black100
   },
   subtle: {
@@ -2322,13 +2434,40 @@ var tagLateOceanTheme = {
   borderRadius: '10px',
   padding: '2px 12px',
   primary: {
-    backgroundColor: lateOceanColorPalette.moonPurpleLight1
+    fill: {
+      backgroundColor: lateOceanColorPalette.moonPurpleLight1,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: lateOceanColorPalette.lateOcean
+    }
   },
   "default": {
-    backgroundColor: lateOceanColorPalette.black50
+    fill: {
+      backgroundColor: lateOceanColorPalette.black50,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: lateOceanColorPalette.black1000
+    }
   },
   danger: {
-    backgroundColor: lateOceanColorPalette.warmEmbrace
+    fill: {
+      backgroundColor: lateOceanColorPalette.warmEmbrace,
+      borderWidth: '0',
+      borderColor: lateOceanColorPalette.transparent
+    },
+    outline: {
+      backgroundColor: lateOceanColorPalette.transparent,
+      borderWidth: '1px',
+      borderColor: colorsLateOceanTheme.danger
+    }
   }
 };
 
@@ -2456,7 +2595,47 @@ function Tooltip(_ref) {
   return /*#__PURE__*/React.createElement(PrimitiveView, null, children);
 }
 
-var _excluded$1 = ["children", "disabled", "noUnderline", "onPress"];
+var isBody = function (value) {
+  return ['body-large', 'body-medium', 'body', 'body-small', 'body-xsmall'].includes(value);
+};
+
+function getDimensions(base, theme) {
+  if (isBody(base)) {
+    return theme.kitt.typography.types.bodies.configs[base];
+  }
+
+  return theme.kitt.typography.types.headers.configs[base];
+}
+
+var StyledTypographyEmoji = /*#__PURE__*/styled(Emoji).withConfig({
+  displayName: "TypographyEmoji__StyledTypographyEmoji",
+  componentId: "kitt-universal__sc-1if5guu-0"
+})(["align-self:center;", ""], function (_ref) {
+  var size = _ref.size;
+  if (Platform.OS !== 'web') return undefined;
+  /* Style Twemoji: https://github.com/twitter/twemoji#inline-styles */
+
+  return "\n      margin: 0 ".concat(size / 20, "px 0 ").concat(size / 10, "px;\n      transform: translateY(").concat(size / 10 * 2, "px);\n    ");
+});
+function TypographyEmoji(_ref2) {
+  var emoji = _ref2.emoji,
+      _ref2$base = _ref2.base,
+      base = _ref2$base === void 0 ? 'body' : _ref2$base;
+  var theme = /*#__PURE__*/useTheme();
+  var dimensions = getDimensions(base, theme);
+  var fontSize = dimensions.baseAndSmall.fontSize;
+
+  if ((process.env.NODE_ENV !== "production")) {
+    if (!fontSize.endsWith('px')) throw new Error("Unexpected font-size value: ".concat(fontSize));
+  }
+
+  return /*#__PURE__*/React.createElement(StyledTypographyEmoji, {
+    size: parseInt(fontSize.slice(0, -2), 10),
+    emoji: emoji
+  });
+}
+
+var _excluded$1 = ["children", "disabled", "noUnderline", "href", "hrefAttrs", "onPress"];
 var StyledLink = /*#__PURE__*/styled(PrimitiveLink).withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !['disabled', 'noUnderline'].includes(prop);
@@ -2477,6 +2656,8 @@ function TypographyLink(_ref3) {
   var children = _ref3.children,
       disabled = _ref3.disabled,
       noUnderline = _ref3.noUnderline,
+      href = _ref3.href,
+      hrefAttrs = _ref3.hrefAttrs,
       onPress = _ref3.onPress,
       otherProps = _objectWithoutProperties(_ref3, _excluded$1);
 
@@ -2485,6 +2666,8 @@ function TypographyLink(_ref3) {
   }), /*#__PURE__*/React.createElement(StyledLink, {
     disabled: disabled,
     noUnderline: noUnderline,
+    href: href,
+    hrefAttrs: hrefAttrs,
     accessibilityRole: "link",
     onPress: disabled ? undefined : onPress
   }, children));
@@ -2593,5 +2776,5 @@ function MatchWindowSize(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, children);
 }
 
-export { Avatar, Button, Card, Flex, FullScreenModal, Icon, IconButton, InputFeedback, InputField, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, PrimitiveLink, PrimitivePressable, PrimitiveScrollView, PrimitiveText, PrimitiveView, Radio, SafeAreaProviderDecorator, DeprecatedSection as Section, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, Tag, TextArea, Tooltip, Typography, TypographyIcon, TypographyLink, createWindowSizeHelper, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor };
+export { Avatar, Button, Card, Emoji, ExternalLink, Flex, FullScreenModal, Icon, IconButton, InputFeedback, InputField, InputText, KittBreakpoints, KittBreakpointsMax, KittThemeDecorator, KittThemeProvider, Label, LargeLoader, ListItem, Loader, MatchWindowSize, Message, Modal, Notification, PrimitiveImage, PrimitiveLink, PrimitivePressable, PrimitiveScrollView, PrimitiveText, PrimitiveView, Radio, SafeAreaProviderDecorator, DeprecatedSection as Section, Story, StoryBlock, StoryContainer, StoryDecorator, StoryGrid, StorySection, StoryTitle, Tag, TextArea, Tooltip, Typography, TypographyEmoji, TypographyIcon, TypographyLink, createWindowSizeHelper, matchWindowSize, styledTextInputMixin, theme, useKittTheme, useMatchWindowSize, useStoryBlockColor };
 //# sourceMappingURL=index-browser-all.es.js.map