@ornikar/kitt-universal 2.1.0 → 2.4.0

package/dist/index-node-14.17.cjs.js

@@ -7,6 +7,8 @@ const kittIcons = require('@ornikar/kitt-icons');
 const React = require('react');
 const reactNative = require('react-native');
 const styled = require('styled-components');
+const twemojiParser = require('twemoji-parser');
+const WebBrowser = require('expo-web-browser');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
 const Animated = require('react-native-reanimated');
 const addons = require('@storybook/addons');
@@ -277,43 +279,6 @@ function Avatar({
   })));
 }
 
-const PrimitivePressable = reactNative.Pressable;
-
-const ButtonContainer = /*#__PURE__*/styled__default(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:", ";"], ({
-  theme
-}) => theme.kitt.button.minWidth, ({
-  theme,
-  stretch
-}) => stretch ? 'auto' : theme.kitt.button.maxWidth, ({
-  stretch
-}) => stretch ? '100%' : 'auto', ({
-  theme
-}) => theme.kitt.button.minHeight, ({
-  theme,
-  isPressed,
-  disabled,
-  type
-}) => {
-  if (disabled) {
-    return theme.kitt.button[type].disabledBackgroundColor;
-  }
-
-  return isPressed ? theme.kitt.button[type].pressedBackgroundColor : theme.kitt.button[type].backgroundColor;
-}, ({
-  theme
-}) => theme.kitt.button.contentPadding.default, ({
-  theme
-}) => theme.kitt.button.borderRadius, ({
-  theme,
-  disabled,
-  type
-}) => disabled ? theme.kitt.button[type].disabledBorderColor : 'transparent', ({
-  theme
-}) => theme.kitt.button.borderWidth);
-
 function TypographyIconInheritColor(props) {
   const color = useTypographyColor();
   const theme = /*#__PURE__*/styled.useTheme();
@@ -459,14 +424,42 @@ function ButtonContent({
   })) : null);
 }
 
-const useButton = () => {
-  const [isPressed, setIsPressed] = React.useState(false);
-  return {
-    isPressed,
-    handleButtonPressIn: () => setIsPressed(true),
-    handleButtonPressOut: () => setIsPressed(false)
-  };
-};
+const PrimitivePressable = reactNative.Pressable;
+
+const ButtonPressable = /*#__PURE__*/styled__default(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:", ";"], ({
+  theme
+}) => theme.kitt.button.minWidth, ({
+  theme,
+  stretch
+}) => stretch ? 'auto' : theme.kitt.button.maxWidth, ({
+  stretch
+}) => stretch ? '100%' : 'auto', ({
+  theme
+}) => theme.kitt.button.minHeight, ({
+  theme,
+  isPressed,
+  disabled,
+  type
+}) => {
+  if (disabled) {
+    return theme.kitt.button[type].disabledBackgroundColor;
+  }
+
+  return isPressed ? theme.kitt.button[type].pressedBackgroundColor : theme.kitt.button[type].backgroundColor;
+}, ({
+  theme
+}) => theme.kitt.button.contentPadding.default, ({
+  theme
+}) => theme.kitt.button.borderRadius, ({
+  theme,
+  disabled,
+  type
+}) => disabled ? theme.kitt.button[type].disabledBorderColor : 'transparent', ({
+  theme
+}) => theme.kitt.button.borderWidth);
 
 function Button({
   children,
@@ -476,29 +469,29 @@ function Button({
   iconSpin,
   stretch,
   disabled,
-  onPress,
-  testID
+  testID,
+  href,
+  hrefAttrs,
+  onPress
 }) {
-  const {
-    isPressed,
-    handleButtonPressIn,
-    handleButtonPressOut
-  } = useButton();
+  const [isPressed, setIsPressed] = React.useState(false);
   const sharedProps = {
     type,
     stretch,
     disabled
   };
-  return /*#__PURE__*/React__default.createElement(ButtonContainer // eslint-disable-next-line unicorn/expiring-todo-comments
+  return /*#__PURE__*/React__default.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__default({}, sharedProps, {
     isPressed: isPressed,
     accessibilityRole: "button",
     testID: testID,
+    href: href,
+    hrefAttrs: hrefAttrs,
     onPress: onPress,
-    onPressIn: handleButtonPressIn,
-    onPressOut: handleButtonPressOut
+    onPressIn: () => setIsPressed(true),
+    onPressOut: () => setIsPressed(false)
   }), /*#__PURE__*/React__default.createElement(ButtonContent, _extends__default({}, sharedProps, {
     icon: icon,
     iconPosition: iconPosition,
@@ -531,6 +524,79 @@ function Card({
   }, children);
 }
 
+const PrimitiveImage = reactNative.Image;
+
+const StyledEmoji = /*#__PURE__*/styled__default(PrimitiveImage).withConfig({
+  displayName: "Emoji__StyledEmoji",
+  componentId: "kitt-universal__sc-ggl6wj-0"
+})(["width:", "px;height:", "px;"], ({
+  size
+}) => size, ({
+  size
+}) => size);
+function Emoji({
+  emoji,
+  size,
+  style,
+  className
+}) {
+  const [emojiData] = React.useMemo(() => twemojiParser.parse(emoji, {
+    // on native plaforms, you can't display svg as Image
+    assetType: reactNative.Platform.OS === 'web' ? 'svg' : 'png'
+  }), [emoji]);
+  if (!emojiData) return null;
+  return /*#__PURE__*/React__default.createElement(StyledEmoji, {
+    size: size,
+    accessibilityLabel: emojiData.text,
+    source: {
+      uri: emojiData.url
+    },
+    style: style,
+    className: className
+  });
+}
+
+const defaultOpenLinkBehavior = {
+  native: 'openInModal',
+  web: 'targetBlank'
+};
+
+function ExternalLink({
+  as: Component,
+  href,
+  openLinkBehavior = defaultOpenLinkBehavior,
+  onPress,
+  ...rest
+}) {
+  return /*#__PURE__*/React__default.createElement(Component, _extends__default({}, rest, {
+    onPress: () => {
+      if (onPress) onPress();
+      if (!href) return;
+
+      switch (openLinkBehavior.native) {
+        case 'openInModal':
+        case undefined:
+          reactNative.Linking.openURL(href).catch(err => {
+            console.error(`An error occurred while opening ${href}`, err);
+          });
+          break;
+
+        case 'openBrowserApp':
+          WebBrowser.openBrowserAsync(href).catch(err => {
+            console.error(`An error occurred while opening ${href}`, err);
+          });
+          break;
+
+        default:
+          if ((process.env.NODE_ENV !== "production")) {
+            throw new Error(`Invalid ExternalLink native behavior: ${openLinkBehavior.native}`);
+          }
+
+      }
+    }
+  }));
+}
+
 const getColorFromState = state => {
   switch (state) {
     case 'invalid':
@@ -1942,23 +2008,57 @@ const StoryGrid = {
 const Container = /*#__PURE__*/styled__default(PrimitiveView).withConfig({
   displayName: "Tag__Container",
   componentId: "kitt-universal__sc-19jmowi-0"
-})(["background-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], ({
+})(["background-color:", ";border-width:", ";border-color:", ";padding:", ";border-radius:", ";align-self:flex-start;"], ({
   theme,
-  type
-}) => theme.kitt.tag[type].backgroundColor, ({
+  type,
+  variant
+}) => theme.kitt.tag[type][variant].backgroundColor, ({
+  theme,
+  type,
+  variant
+}) => theme.kitt.tag[type][variant].borderWidth, ({
+  theme,
+  type,
+  variant
+}) => theme.kitt.tag[type][variant].borderColor, ({
   theme
 }) => theme.kitt.tag.padding, ({
   theme
 }) => theme.kitt.tag.borderRadius);
+const getLabelColor = (type, variant) => {
+  switch (type) {
+    case 'danger':
+      {
+        return variant === 'outline' ? 'danger' : 'black';
+      }
+
+    case 'primary':
+      {
+        return 'primary';
+      }
+
+    case 'default':
+      {
+        return 'black';
+      }
+
+    default:
+      {
+        return 'black';
+      }
+  }
+};
 function Tag({
   label,
-  type = 'default'
+  type = 'default',
+  variant = 'fill'
 }) {
   return /*#__PURE__*/React__default.createElement(Container, {
-    type: type
+    type: type,
+    variant: variant
   }, /*#__PURE__*/React__default.createElement(Typography.Text, {
     base: "body-xsmall",
-    color: type === 'primary' ? 'primary-light' : undefined
+    color: getLabelColor(type, variant)
   }, label));
 }
 
@@ -2013,9 +2113,9 @@ const 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: {
@@ -2216,13 +2316,40 @@ const 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
+    }
   }
 };
 
@@ -2347,6 +2474,54 @@ function Tooltip({
   return /*#__PURE__*/React__default.createElement(PrimitiveView, null, children);
 }
 
+const isBody = 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];
+}
+
+const StyledTypographyEmoji = /*#__PURE__*/styled__default(Emoji).withConfig({
+  displayName: "TypographyEmoji__StyledTypographyEmoji",
+  componentId: "kitt-universal__sc-1if5guu-0"
+})(["align-self:center;", ""], ({
+  size
+}) => {
+  if (reactNative.Platform.OS !== 'web') return undefined;
+  /* Style Twemoji: https://github.com/twitter/twemoji#inline-styles */
+
+  return `
+      margin: 0 ${size / 20}px 0 ${size / 10}px;
+      transform: translateY(${size / 10 * 2}px);
+    `;
+});
+function TypographyEmoji({
+  emoji,
+  base = 'body'
+}) {
+  const theme = /*#__PURE__*/styled.useTheme();
+  const dimensions = getDimensions(base, theme);
+  const {
+    baseAndSmall: {
+      fontSize
+    }
+  } = dimensions;
+
+  if ((process.env.NODE_ENV !== "production")) {
+    if (!fontSize.endsWith('px')) throw new Error(`Unexpected font-size value: ${fontSize}`);
+  }
+
+  return /*#__PURE__*/React__default.createElement(StyledTypographyEmoji, {
+    size: parseInt(fontSize.slice(0, -2), 10),
+    emoji: emoji
+  });
+}
+
 const StyledLink = /*#__PURE__*/styled__default(PrimitiveLink).withConfig({
   shouldForwardProp: prop => !['disabled', 'noUnderline'].includes(prop)
 }).withConfig({
@@ -2374,6 +2549,8 @@ function TypographyLink({
   children,
   disabled,
   noUnderline,
+  href,
+  hrefAttrs,
   onPress,
   ...otherProps
 }) {
@@ -2382,6 +2559,8 @@ function TypographyLink({
   }), /*#__PURE__*/React__default.createElement(StyledLink, {
     disabled: disabled,
     noUnderline: noUnderline,
+    href: href,
+    hrefAttrs: hrefAttrs,
     accessibilityRole: "link",
     onPress: disabled ? undefined : onPress
   }, children));
@@ -2480,6 +2659,8 @@ exports.useWindowSize = reactNative.useWindowDimensions;
 exports.Avatar = Avatar;
 exports.Button = Button;
 exports.Card = Card;
+exports.Emoji = Emoji;
+exports.ExternalLink = ExternalLink;
 exports.Flex = Flex;
 exports.FullScreenModal = FullScreenModal;
 exports.Icon = Icon;
@@ -2490,6 +2671,7 @@ exports.InputText = InputText;
 exports.KittBreakpoints = KittBreakpoints;
 exports.KittBreakpointsMax = KittBreakpointsMax;
 exports.KittThemeDecorator = KittThemeDecorator;
+exports.KittThemeProvider = KittThemeProvider;
 exports.Label = Label;
 exports.LargeLoader = LargeLoader;
 exports.ListItem = ListItem;
@@ -2498,6 +2680,7 @@ exports.MatchWindowSize = MatchWindowSize;
 exports.Message = Message;
 exports.Modal = Modal;
 exports.Notification = Notification;
+exports.PrimitiveImage = PrimitiveImage;
 exports.PrimitiveLink = PrimitiveLink;
 exports.PrimitivePressable = PrimitivePressable;
 exports.PrimitiveScrollView = PrimitiveScrollView;
@@ -2517,6 +2700,7 @@ exports.Tag = Tag;
 exports.TextArea = TextArea;
 exports.Tooltip = Tooltip;
 exports.Typography = Typography;
+exports.TypographyEmoji = TypographyEmoji;
 exports.TypographyIcon = TypographyIcon;
 exports.TypographyLink = TypographyLink;
 exports.createWindowSizeHelper = createWindowSizeHelper;