@tactics/toddle-styleguide 5.3.1 → 5.3.3

package/src/components/molecules/pill/__snapshots__/pill.test.js.snap

@@ -1,226 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`test pill given the visual state is DEFAULT return a blue/purple colored pill 1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 50,
-        "justifyContent": "center",
-        "paddingBottom": 4,
-        "paddingLeft": 8,
-        "paddingRight": 8,
-        "paddingTop": 4,
-      },
-      false,
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <Text
-    style={
-      [
-        [
-          {
-            "fontFamily": "MontserratBold",
-            "fontSize": 11,
-            "lineHeight": 17.9,
-          },
-        ],
-        {
-          "color": "#FFFFFF",
-          "textAlign": "center",
-          "width": "100%",
-        },
-        undefined,
-      ]
-    }
-  >
-    Default
-  </Text>
-</View>
-`;
-
-exports[`test pill given the visual state is DEFAULT return a blue/purple colored pill 2`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 50,
-        "justifyContent": "center",
-        "paddingBottom": 4,
-        "paddingLeft": 8,
-        "paddingRight": 8,
-        "paddingTop": 4,
-      },
-      false,
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <Text
-    style={
-      [
-        [
-          {
-            "fontFamily": "MontserratBold",
-            "fontSize": 11,
-            "lineHeight": 17.9,
-          },
-        ],
-        {
-          "color": "#FFFFFF",
-          "textAlign": "center",
-          "width": "100%",
-        },
-        undefined,
-      ]
-    }
-  >
-    Inactive
-  </Text>
-</View>
-`;
-
-exports[`test pill given the visual state is Error return a red colored pill 1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 50,
-        "justifyContent": "center",
-        "paddingBottom": 4,
-        "paddingLeft": 8,
-        "paddingRight": 8,
-        "paddingTop": 4,
-      },
-      false,
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <Text
-    style={
-      [
-        [
-          {
-            "fontFamily": "MontserratBold",
-            "fontSize": 11,
-            "lineHeight": 17.9,
-          },
-        ],
-        {
-          "color": "#FFFFFF",
-          "textAlign": "center",
-          "width": "100%",
-        },
-        undefined,
-      ]
-    }
-  >
-    Geblokkeerd
-  </Text>
-</View>
-`;
-
-exports[`test pill given the visual state is SUCCESS return a green colored pill 1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 50,
-        "justifyContent": "center",
-        "paddingBottom": 4,
-        "paddingLeft": 8,
-        "paddingRight": 8,
-        "paddingTop": 4,
-      },
-      false,
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <Text
-    style={
-      [
-        [
-          {
-            "fontFamily": "MontserratBold",
-            "fontSize": 11,
-            "lineHeight": 17.9,
-          },
-        ],
-        {
-          "color": "#FFFFFF",
-          "textAlign": "center",
-          "width": "100%",
-        },
-        undefined,
-      ]
-    }
-  >
-    Voldaan
-  </Text>
-</View>
-`;
-
-exports[`test pill given the visual state is Warning return a orange colored pill 1`] = `
-<View
-  style={
-    [
-      {
-        "alignItems": "center",
-        "borderRadius": 50,
-        "justifyContent": "center",
-        "paddingBottom": 4,
-        "paddingLeft": 8,
-        "paddingRight": 8,
-        "paddingTop": 4,
-      },
-      false,
-      false,
-      false,
-      false,
-      false,
-    ]
-  }
->
-  <Text
-    style={
-      [
-        [
-          {
-            "fontFamily": "MontserratBold",
-            "fontSize": 11,
-            "lineHeight": 17.9,
-          },
-        ],
-        {
-          "color": "#FFFFFF",
-          "textAlign": "center",
-          "width": "100%",
-        },
-        undefined,
-      ]
-    }
-  >
-    Pas op
-  </Text>
-</View>
-`;

package/src/components/molecules/pill/pill.test.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import {Pill} from './pill.component';
-import {VisualState} from '../../../types/visual-state.enum';
-
-describe('test pill', () => {
-  it('given the visual state is Error return a red colored pill', () => {
-    const tree = renderer
-      .create(<Pill variant={VisualState.ERROR} label="Geblokkeerd" />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('given the visual state is Warning return a orange colored pill', () => {
-    const tree = renderer
-      .create(<Pill variant={VisualState.WARNING} label="Pas op" />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('given the visual state is SUCCESS return a green colored pill', () => {
-    const tree = renderer
-      .create(<Pill variant={VisualState.SUCCESS} label="Voldaan" />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('given the visual state is DEFAULT return a blue/purple colored pill', () => {
-    const tree = renderer
-      .create(<Pill variant={VisualState.DEFAULT} label="Default" />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-  it('given the visual state is DEFAULT return a blue/purple colored pill', () => {
-    const tree = renderer
-      .create(<Pill variant={VisualState.INACTIVE} label="Inactive" />)
-      .toJSON();
-
-    expect(tree).toMatchSnapshot();
-  });
-});

package/src/components/molecules/pressable-icon/__snapshots__/pressable-icon.test.js.snap

@@ -1,460 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`pressable-icon test render a default disabled pressable icon 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": true,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  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={
-      [
-        {
-          "backgroundColor": "#E5E8EB",
-        },
-        {
-          "alignItems": "center",
-          "borderRadius": 50,
-          "flexDirection": "row",
-          "height": 50,
-          "justifyContent": "center",
-          "padding": 12,
-          "width": 50,
-        },
-      ]
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
-      fill="none"
-      focusable={false}
-      height={24}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={19}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M1.375 5L10.2519 10.9179C11.0077 11.4218 11.9923 11.4218 12.7481 10.9179L21.625 5M3.625 17.375H19.375C20.6176 17.375 21.625 16.3676 21.625 15.125V3.875C21.625 2.63236 20.6176 1.625 19.375 1.625H3.625C2.38236 1.625 1.375 2.63236 1.375 3.875V15.125C1.375 16.3676 2.38236 17.375 3.625 17.375Z"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4283522924,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;
-
-exports[`pressable-icon test render a default pressable icon 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  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={
-      [
-        {
-          "backgroundColor": "#E0E8F9",
-        },
-        {
-          "alignItems": "center",
-          "borderRadius": 50,
-          "flexDirection": "row",
-          "height": 50,
-          "justifyContent": "center",
-          "padding": 12,
-          "width": 50,
-        },
-      ]
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
-      fill="none"
-      focusable={false}
-      height={24}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={23}
-      vbWidth={23}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M13.75 9.25H19.1094C20.782 9.25 21.8699 11.0102 21.1219 12.5062L17.1844 20.3812C16.8033 21.1435 16.0242 21.625 15.1719 21.625H10.652C10.468 21.625 10.2848 21.6024 10.1063 21.5578L5.875 20.5M13.75 9.25V3.625C13.75 2.38236 12.7426 1.375 11.5 1.375H11.3926C10.8306 1.375 10.375 1.83059 10.375 2.39259C10.375 3.19618 10.1371 3.9818 9.69138 4.65043L5.875 10.375V20.5M13.75 9.25H11.5M5.875 20.5H3.625C2.38236 20.5 1.375 19.4926 1.375 18.25V11.5C1.375 10.2574 2.38236 9.25 3.625 9.25H6.4375"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4279837036,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;
-
-exports[`pressable-icon test render an inverted pressable icon 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": undefined,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  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={
-      [
-        {
-          "backgroundColor": "#19216C",
-        },
-        {
-          "alignItems": "center",
-          "borderRadius": 50,
-          "flexDirection": "row",
-          "height": 50,
-          "justifyContent": "center",
-          "padding": 12,
-          "width": 50,
-        },
-      ]
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
-      fill="none"
-      focusable={false}
-      height={24}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={22}
-      vbWidth={22}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          d="M1.25 2.25C1.25 1.69772 1.69772 1.25 2.25 1.25H19.75C20.3023 1.25 20.75 1.69772 20.75 2.25V5.16912C20.75 5.43434 20.6446 5.68869 20.4571 5.87623L13.4596 12.8738C13.272 13.0613 13.1667 13.3157 13.1667 13.5809V16.4167L8.83333 20.75V13.5809C8.83333 13.3157 8.72798 13.0613 8.54044 12.8738L1.54289 5.87623C1.35536 5.68869 1.25 5.43434 1.25 5.16912V2.25Z"
-          fill={
-            {
-              "payload": 4278190080,
-              "type": 0,
-            }
-          }
-          propList={
-            [
-              "stroke",
-              "strokeWidth",
-              "strokeLinecap",
-              "strokeLinejoin",
-            ]
-          }
-          stroke={
-            {
-              "payload": 4292929785,
-              "type": 0,
-            }
-          }
-          strokeLinecap={1}
-          strokeLinejoin={1}
-          strokeWidth="2"
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;
-
-exports[`pressable-icon test render an inverted pressable icon that is disabled 1`] = `
-<View
-  accessibilityState={
-    {
-      "busy": undefined,
-      "checked": undefined,
-      "disabled": true,
-      "expanded": undefined,
-      "selected": undefined,
-    }
-  }
-  accessibilityValue={
-    {
-      "max": undefined,
-      "min": undefined,
-      "now": undefined,
-      "text": undefined,
-    }
-  }
-  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={
-      [
-        {
-          "backgroundColor": "#E5E8EB",
-        },
-        {
-          "alignItems": "center",
-          "borderRadius": 50,
-          "flexDirection": "row",
-          "height": 50,
-          "justifyContent": "center",
-          "padding": 12,
-          "width": 50,
-        },
-      ]
-    }
-  >
-    <RNSVGSvgView
-      align="xMidYMid"
-      bbHeight="24"
-      bbWidth="24"
-      fill="none"
-      focusable={false}
-      height={24}
-      meetOrSlice={0}
-      minX={0}
-      minY={0}
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "borderWidth": 0,
-          },
-          {
-            "flex": 0,
-            "height": 24,
-            "width": 24,
-          },
-        ]
-      }
-      vbHeight={18}
-      vbWidth={17}
-      width={24}
-    >
-      <RNSVGGroup
-        fill={null}
-        propList={
-          [
-            "fill",
-          ]
-        }
-      >
-        <RNSVGPath
-          clipRule={0}
-          d="M7.34995 0.200012C6.91436 0.200012 6.51616 0.435415 6.32136 0.808077L5.48921 2.40001H1.59995C0.964824 2.40001 0.449951 2.8925 0.449951 3.50001C0.449951 4.10753 0.964824 4.60001 1.59995 4.60001L1.59995 15.6C1.59995 16.815 2.6297 17.8 3.89995 17.8H13.1C14.3702 17.8 15.4 16.815 15.4 15.6V4.60001C16.0351 4.60001 16.55 4.10753 16.55 3.50001C16.55 2.8925 16.0351 2.40001 15.4 2.40001H11.5107L10.6785 0.808077C10.4837 0.435415 10.0855 0.200012 9.64995 0.200012H7.34995ZM5.04995 6.80001C5.04995 6.1925 5.56482 5.70001 6.19995 5.70001C6.83508 5.70001 7.34995 6.1925 7.34995 6.80001V13.4C7.34995 14.0075 6.83508 14.5 6.19995 14.5C5.56482 14.5 5.04995 14.0075 5.04995 13.4V6.80001ZM10.8 5.70001C10.1648 5.70001 9.64995 6.1925 9.64995 6.80001V13.4C9.64995 14.0075 10.1648 14.5 10.8 14.5C11.4351 14.5 11.95 14.0075 11.95 13.4V6.80001C11.95 6.1925 11.4351 5.70001 10.8 5.70001Z"
-          fill={
-            {
-              "payload": 4283522924,
-              "type": 0,
-            }
-          }
-          fillRule={0}
-          propList={
-            [
-              "fill",
-              "fillRule",
-            ]
-          }
-        />
-      </RNSVGGroup>
-    </RNSVGSvgView>
-  </View>
-</View>
-`;