@tactics/toddle-styleguide 0.0.2 → 0.0.4

package/src/components/atoms/swipe/__snapshots__/swipe.test.js.snap

@@ -0,0 +1,589 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Swipe component should render an swipe component with dots and navigation arrows 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "height": 85,
+      "justifyContent": "center",
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "flex": 1,
+          "position": "relative",
+        },
+        undefined,
+      ]
+    }
+  >
+    <RCTScrollView
+      activeDotColor="#98AEEB"
+      automaticallyAdjustContentInsets={false}
+      autoplay={false}
+      autoplayDirection={true}
+      autoplayTimeout={2.5}
+      bounces={false}
+      contentContainerStyle={
+        [
+          {
+            "backgroundColor": "transparent",
+          },
+          undefined,
+        ]
+      }
+      contentOffset={
+        {
+          "x": 0,
+        }
+      }
+      disableNextButton={false}
+      disablePrevButton={false}
+      dotColor="#E5E8EB"
+      horizontal={true}
+      index={0}
+      loadMinimal={false}
+      loadMinimalSize={1}
+      loop={true}
+      nextButton={
+        <ChevronRightIcon
+          color="#19216C"
+        />
+      }
+      onIndexChanged={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      paginationStyle={
+        {
+          "bottom": 0,
+        }
+      }
+      pagingEnabled={true}
+      prevButton={
+        <ChevronLeftIcon
+          color="#19216C"
+        />
+      }
+      removeClippedSubviews={true}
+      scrollsToTop={false}
+      showsButtons={true}
+      showsHorizontalScrollIndicator={false}
+      showsPagination={true}
+      showsVerticalScrollIndicator={false}
+    >
+      <View>
+        <View
+          style={
+            [
+              {
+                "height": 1334,
+                "width": 750,
+              },
+              {
+                "backgroundColor": "transparent",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignSelf": "center",
+                "marginLeft": 15,
+                "marginRight": 15,
+                "marginTop": 20,
+                "width": "60%",
+              }
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+            >
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "backgroundColor": "#19216C",
+                    "borderRadius": 50,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "paddingHorizontal": 24,
+                    "paddingVertical": 12,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    {
+                      "color": "#E0E8F9",
+                      "fontFamily": "SourceSansPro",
+                      "fontSize": 16,
+                      "lineHeight": 22.4,
+                    }
+                  }
+                >
+                  button 2
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "height": 1334,
+                "width": 750,
+              },
+              {
+                "backgroundColor": "transparent",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignSelf": "center",
+                "marginLeft": 15,
+                "marginRight": 15,
+                "marginTop": 20,
+                "width": "60%",
+              }
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+            >
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "backgroundColor": "#19216C",
+                    "borderRadius": 50,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "paddingHorizontal": 24,
+                    "paddingVertical": 12,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    {
+                      "color": "#E0E8F9",
+                      "fontFamily": "SourceSansPro",
+                      "fontSize": 16,
+                      "lineHeight": 22.4,
+                    }
+                  }
+                >
+                  button 1
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "height": 1334,
+                "width": 750,
+              },
+              {
+                "backgroundColor": "transparent",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignSelf": "center",
+                "marginLeft": 15,
+                "marginRight": 15,
+                "marginTop": 20,
+                "width": "60%",
+              }
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+            >
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "backgroundColor": "#19216C",
+                    "borderRadius": 50,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "paddingHorizontal": 24,
+                    "paddingVertical": 12,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    {
+                      "color": "#E0E8F9",
+                      "fontFamily": "SourceSansPro",
+                      "fontSize": 16,
+                      "lineHeight": 22.4,
+                    }
+                  }
+                >
+                  button 2
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "height": 1334,
+                "width": 750,
+              },
+              {
+                "backgroundColor": "transparent",
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              {
+                "alignSelf": "center",
+                "marginLeft": 15,
+                "marginRight": 15,
+                "marginTop": 20,
+                "width": "60%",
+              }
+            }
+          >
+            <View
+              accessible={true}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+            >
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "backgroundColor": "#19216C",
+                    "borderRadius": 50,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "paddingHorizontal": 24,
+                    "paddingVertical": 12,
+                  }
+                }
+              >
+                <Text
+                  style={
+                    {
+                      "color": "#E0E8F9",
+                      "fontFamily": "SourceSansPro",
+                      "fontSize": 16,
+                      "lineHeight": 22.4,
+                    }
+                  }
+                >
+                  button 1
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+    <View
+      pointerEvents="none"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "bottom": 25,
+            "flex": 1,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+          },
+          {
+            "bottom": 0,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "backgroundColor": "#98AEEB",
+              "borderRadius": 4,
+              "height": 8,
+              "marginBottom": 3,
+              "marginLeft": 3,
+              "marginRight": 3,
+              "marginTop": 3,
+              "width": 8,
+            },
+            undefined,
+          ]
+        }
+      />
+      <View
+        style={
+          [
+            {
+              "backgroundColor": "#E5E8EB",
+              "borderRadius": 4,
+              "height": 8,
+              "marginBottom": 3,
+              "marginLeft": 3,
+              "marginRight": 3,
+              "marginTop": 3,
+              "width": 8,
+            },
+            undefined,
+          ]
+        }
+      />
+    </View>
+    <View
+      pointerEvents="box-none"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "flex": 1,
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "left": 0,
+            "paddingHorizontal": 10,
+            "paddingVertical": 10,
+            "position": "absolute",
+            "top": 0,
+          },
+          {
+            "height": 1334,
+            "width": 750,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        accessibilityState={
+          {
+            "disabled": false,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "opacity": 1,
+          }
+        }
+      >
+        <View>
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight="28"
+            bbWidth="28"
+            fill="none"
+            focusable={false}
+            height="28"
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                {
+                  "flex": 0,
+                  "height": 28,
+                  "width": 28,
+                },
+              ]
+            }
+            vbHeight={27}
+            vbWidth={27}
+            width="28"
+          >
+            <RNSVGGroup
+              fill={null}
+              propList={
+                [
+                  "fill",
+                ]
+              }
+            >
+              <RNSVGPath
+                d="M16.875 21.375L9 13.5L16.875 5.625"
+                propList={
+                  [
+                    "stroke",
+                    "strokeWidth",
+                    "strokeLinecap",
+                    "strokeLinejoin",
+                  ]
+                }
+                stroke={4279837036}
+                strokeLinecap={1}
+                strokeLinejoin={1}
+                strokeWidth="2"
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
+        </View>
+      </View>
+      <View
+        accessibilityState={
+          {
+            "disabled": false,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "opacity": 1,
+          }
+        }
+      >
+        <View>
+          <RNSVGSvgView
+            align="xMidYMid"
+            bbHeight="28"
+            bbWidth="28"
+            fill="none"
+            focusable={false}
+            height="28"
+            meetOrSlice={0}
+            minX={0}
+            minY={0}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                {
+                  "flex": 0,
+                  "height": 28,
+                  "width": 28,
+                },
+              ]
+            }
+            vbHeight={27}
+            vbWidth={26}
+            width="28"
+          >
+            <RNSVGGroup
+              fill={null}
+              propList={
+                [
+                  "fill",
+                ]
+              }
+            >
+              <RNSVGPath
+                d="M9.75 5.625L17.3333 13.5L9.75 21.375"
+                propList={
+                  [
+                    "stroke",
+                    "strokeWidth",
+                    "strokeLinecap",
+                    "strokeLinejoin",
+                  ]
+                }
+                stroke={4279837036}
+                strokeLinecap={1}
+                strokeLinejoin={1}
+                strokeWidth="2"
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/src/components/atoms/swipe/swipe.component.tsx

@@ -0,0 +1,39 @@
+import React, {Children, useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import Swiper from 'react-native-swiper';
+import {View} from 'react-native';
+import {Button} from '../button/button.component';
+import {Stylesheet} from './Swipe.styles';
+import {ChevronLeftIcon} from '../../../icons/outline/chevron-left/chevron-left.icon';
+import {ChevronRightIcon} from '../../../icons/outline/chevron-right/chevron-right.icon';
+import {Pill} from '../pill/pill.component';
+
+type SwipeProps = {
+  children: React.ReactNode;
+};
+
+const Swipe = ({children}: SwipeProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+  const count = Children.count(children);
+
+  if (count > 5) {
+    console.warn(' for more then 5 children, use another way to show');
+  }
+
+  return (
+    <View style={styles.container}>
+      <Swiper
+        paginationStyle={{bottom: 0}}
+        showsButtons={true}
+        dotColor={context.colors.ui.lightgrey}
+        activeDotColor={context.colors.main['7']}
+        prevButton={<ChevronLeftIcon color={context.colors.main['0']} />}
+        nextButton={<ChevronRightIcon color={context.colors.main['0']} />}
+      >
+        {children}
+      </Swiper>
+    </View>
+  );
+};
+export {Swipe as Swipe};

package/src/components/atoms/swipe/swipe.preview.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import {Swipe} from './swipe.component';
+import {View} from 'react-native';
+import {Button} from '../button/button.component';
+import {Pill} from '../pill/pill.component';
+import {VisualState} from '../../../types/visual-state.enum';
+
+export const SwipePreview = ({}: {}) => {
+  return (
+    <View>
+      <Swipe>
+        <View
+          style={{
+            marginRight: 15,
+            marginLeft: 15,
+            marginTop: 20,
+            width: '60%',
+            alignSelf: 'center',
+          }}
+        >
+          <Button
+            label={'button 1'}
+            onPress={() => console.log('button 1 pressed')}
+          />
+        </View>
+        <View style={{marginTop: 32, width: '70%', alignSelf: 'center'}}>
+          <Pill label={'Pill'} variant={VisualState.DEFAULT} />
+        </View>
+        <View
+          style={{
+            marginRight: 15,
+            marginLeft: 15,
+            marginTop: 20,
+            width: '60%',
+            alignSelf: 'center',
+          }}
+        >
+          <Button
+            label={'button 2'}
+            onPress={() => console.log('button 2 pressed')}
+          />
+        </View>
+        <View style={{marginTop: 32, width: '70%', alignSelf: 'center'}}>
+          <Pill label={'Pill'} variant={VisualState.DEFAULT} />
+        </View>
+
+        <View
+          style={{
+            marginRight: 15,
+            marginLeft: 15,
+            marginTop: 20,
+            width: '60%',
+            alignSelf: 'center',
+          }}
+        >
+          <Button
+            label={'button 3'}
+            onPress={() => console.log('button 3 pressed')}
+          />
+        </View>
+      </Swipe>
+    </View>
+  );
+};