@hero-design/rn 7.1.2 → 7.1.3-alpha

package/src/components/FAB/ActionGroup/ActionItem.tsx

@@ -0,0 +1,28 @@
+import React, { ComponentProps } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import Icon from '../../Icon';
+import { StyledActionItem, StyledActionItemText } from './StyledActionItem';
+
+export interface ActionItemProps {
+  testID?: string;
+  title: string;
+  icon: ComponentProps<typeof Icon>['icon'];
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+const ActionItem = ({
+  icon,
+  title,
+  onPress,
+  style,
+  testID,
+}: ActionItemProps) => (
+  <StyledActionItem style={style} onPress={onPress} testID={testID}>
+    <>
+      <Icon icon={icon} />
+      <StyledActionItemText>{title}</StyledActionItemText>
+    </>
+  </StyledActionItem>
+);
+
+export default ActionItem;

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -0,0 +1,59 @@
+import { ComponentProps } from 'react';
+import { Animated, View, ViewProps } from 'react-native';
+import styled from 'styled-components-native';
+import FAB from '../FAB';
+import Typography from '../../Typography';
+import { TextProps } from '../../Typography/Text';
+
+const StyledContainer = styled(View)<ViewProps>`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  align-items: flex-end;
+  justify-content: flex-end;
+`;
+
+const StyledActionGroupContainer = styled(Animated.View)<
+  ComponentProps<typeof Animated.View>
+>`
+  align-items: flex-end;
+  justify-content: flex-end;
+  width: 70%;
+`;
+
+const StyledFAB = styled(FAB)<{}>`
+  margin-right: ${({ theme }) => theme.space.large};
+  align-self: flex-end;
+  margin-top: ${({ theme }) => theme.space.large};
+`;
+
+const StyledBackdrop = styled(Animated.View)<
+  ComponentProps<typeof Animated.View>
+>`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background: ${({ theme }) => theme.__hd__.fab.colors.backdropBackground};
+`;
+
+const StyledHeaderText = styled(Typography.Text)<TextProps>`
+  font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.header};
+  line-height: ${({ theme }) => theme.__hd__.fab.lineHeights.header};
+  font-weight: ${({ theme }) => theme.__hd__.fab.fontWeights.header};
+  margin-right: ${({ theme }) => theme.__hd__.fab.space.headerTextMarginRight};
+  margin-bottom: ${({ theme }) =>
+    theme.__hd__.fab.space.headerTextMarginBottom};
+  text-align: right;
+`;
+
+export {
+  StyledHeaderText,
+  StyledBackdrop,
+  StyledContainer,
+  StyledActionGroupContainer,
+  StyledFAB,
+};

package/src/components/FAB/ActionGroup/StyledActionItem.tsx

@@ -0,0 +1,29 @@
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import styled from 'styled-components-native';
+import Typography from '../../Typography';
+
+const StyledActionItem = styled(TouchableOpacity)<TouchableOpacityProps>`
+  padding-left: ${({ theme }) => theme.__hd__.fab.space.actionItemPaddingLeft};
+  padding-right: ${({ theme }) =>
+    theme.__hd__.fab.space.actionItemPaddingRight};
+  padding-top: ${({ theme }) => theme.__hd__.fab.space.actionItemPaddingTop};
+  padding-bottom: ${({ theme }) =>
+    theme.__hd__.fab.space.actionItemPaddingBottom};
+  margin: ${({ theme }) => theme.__hd__.fab.space.actionItemMargin};
+  margin-right: ${({ theme }) => theme.__hd__.fab.space.actionItemMarginRight};
+  background: ${({ theme }) => theme.__hd__.fab.colors.actionItemBackground};
+  border-radius: ${({ theme }) => theme.__hd__.fab.radii.actionItem};
+  flex-direction: row;
+  align-items: center;
+  align-self: flex-end;
+  overflow: hidden;
+`;
+
+const StyledActionItemText = styled(Typography.Text)<TouchableOpacityProps>`
+  padding-left: ${({ theme }) =>
+    theme.__hd__.fab.space.actionItemTextPaddingLeft};
+  font-size: ${({ theme }) => theme.__hd__.fab.fontSizes.actionItemText};
+  line-height: ${({ theme }) => theme.__hd__.fab.lineHeights.actionItemText};
+  font-weight: ${({ theme }) => theme.__hd__.fab.fontWeights.actionItemText};
+`;
+export { StyledActionItem, StyledActionItemText };