@hero-design/rn 7.2.2 → 7.3.0

package/src/components/Progress/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,641 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Progress.Bar renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignSelf": "stretch",
+        "backgroundColor": "#dadbde",
+        "height": 4,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  testID="progress-bar"
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    onLayout={[Function]}
+    style={
+      Object {
+        "alignSelf": "stretch",
+        "backgroundColor": "#7622d7",
+        "borderBottomRightRadius": 999,
+        "borderTopRightRadius": 999,
+        "flex": 1,
+        "transform": Array [
+          Object {
+            "translateX": -0,
+          },
+        ],
+      }
+    }
+    themeIntent="primary"
+  />
+</View>
+`;
+
+exports[`Progress.Bar renders correctly with intent 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignSelf": "stretch",
+        "backgroundColor": "#dadbde",
+        "height": 4,
+        "overflow": "hidden",
+      },
+      undefined,
+    ]
+  }
+  testID="progress-bar"
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    onLayout={[Function]}
+    style={
+      Object {
+        "alignSelf": "stretch",
+        "backgroundColor": "#01b39c",
+        "borderBottomRightRadius": 999,
+        "borderTopRightRadius": 999,
+        "flex": 1,
+        "transform": Array [
+          Object {
+            "translateX": -0,
+          },
+        ],
+      }
+    }
+    themeIntent="success"
+  />
+</View>
+`;
+
+exports[`Progress.Circle renders correctly 1`] = `
+<View
+  testID="progress-circle"
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View>
+      <View
+        style={
+          Array [
+            Object {
+              "height": 96,
+              "overflow": "hidden",
+              "width": 48,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#7622d7",
+                "borderRadius": 999,
+                "height": 96,
+                "width": 96,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="primary"
+        />
+      </View>
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "transform": Array [
+              Object {
+                "translateX": 24,
+              },
+              Object {
+                "rotate": "0deg",
+              },
+              Object {
+                "translateX": -24,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "height": 96,
+                "overflow": "hidden",
+                "width": 48,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "#dadbde",
+                  "borderRadius": 999,
+                  "height": 96,
+                  "width": 96,
+                },
+                undefined,
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "transform": Array [
+            Object {
+              "rotate": "180deg",
+            },
+          ],
+          "zIndex": 1,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "height": 96,
+              "overflow": "hidden",
+              "width": 48,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#7622d7",
+                "borderRadius": 999,
+                "height": 96,
+                "width": 96,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="primary"
+        />
+      </View>
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "opacity": 1,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "transform": Array [
+              Object {
+                "translateX": 24,
+              },
+              Object {
+                "rotate": "0deg",
+              },
+              Object {
+                "translateX": -24,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "height": 96,
+                "overflow": "hidden",
+                "width": 48,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "#dadbde",
+                  "borderRadius": 999,
+                  "height": 96,
+                  "width": 96,
+                },
+                undefined,
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 999,
+            "height": 8,
+            "left": 44,
+            "position": "absolute",
+            "top": 0,
+            "width": 8,
+            "zIndex": 2,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="primary"
+    />
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "transform": Array [
+            Object {
+              "rotate": "0deg",
+            },
+          ],
+          "zIndex": 2,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#7622d7",
+              "borderRadius": 999,
+              "height": 8,
+              "left": 44,
+              "position": "absolute",
+              "top": 0,
+              "width": 8,
+              "zIndex": 2,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="primary"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#ffffff",
+            "borderRadius": 999,
+            "height": 80,
+            "justifyContent": "center",
+            "left": 8,
+            "position": "absolute",
+            "top": 8,
+            "width": 80,
+            "zIndex": 3,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 18,
+              "letterSpacing": 0.54,
+              "lineHeight": 26,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="xlarge"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        25%
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Progress.Circle renders correctly with intent 1`] = `
+<View
+  testID="progress-circle"
+>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View>
+      <View
+        style={
+          Array [
+            Object {
+              "height": 96,
+              "overflow": "hidden",
+              "width": 48,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#01b39c",
+                "borderRadius": 999,
+                "height": 96,
+                "width": 96,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="success"
+        />
+      </View>
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "transform": Array [
+              Object {
+                "translateX": 24,
+              },
+              Object {
+                "rotate": "0deg",
+              },
+              Object {
+                "translateX": -24,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "height": 96,
+                "overflow": "hidden",
+                "width": 48,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "#dadbde",
+                  "borderRadius": 999,
+                  "height": 96,
+                  "width": 96,
+                },
+                undefined,
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "transform": Array [
+            Object {
+              "rotate": "180deg",
+            },
+          ],
+          "zIndex": 1,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "height": 96,
+              "overflow": "hidden",
+              "width": 48,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#01b39c",
+                "borderRadius": 999,
+                "height": 96,
+                "width": 96,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="success"
+        />
+      </View>
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Object {
+            "bottom": 0,
+            "left": 0,
+            "opacity": 1,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+            "transform": Array [
+              Object {
+                "translateX": 24,
+              },
+              Object {
+                "rotate": "0deg",
+              },
+              Object {
+                "translateX": -24,
+              },
+            ],
+          }
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "height": 96,
+                "overflow": "hidden",
+                "width": 48,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "#dadbde",
+                  "borderRadius": 999,
+                  "height": 96,
+                  "width": 96,
+                },
+                undefined,
+              ]
+            }
+          />
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#01b39c",
+            "borderRadius": 999,
+            "height": 8,
+            "left": 44,
+            "position": "absolute",
+            "top": 0,
+            "width": 8,
+            "zIndex": 2,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="success"
+    />
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "transform": Array [
+            Object {
+              "rotate": "0deg",
+            },
+          ],
+          "zIndex": 2,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#01b39c",
+              "borderRadius": 999,
+              "height": 8,
+              "left": 44,
+              "position": "absolute",
+              "top": 0,
+              "width": 8,
+              "zIndex": 2,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="success"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#ffffff",
+            "borderRadius": 999,
+            "height": 80,
+            "justifyContent": "center",
+            "left": 8,
+            "position": "absolute",
+            "top": 8,
+            "width": 80,
+            "zIndex": 3,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#292a2b",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 18,
+              "letterSpacing": 0.54,
+              "lineHeight": 26,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="xlarge"
+        themeFontWeight="regular"
+        themeIntent="body"
+      >
+        75%
+      </Text>
+    </View>
+  </View>
+</View>
+`;

package/src/components/Progress/__tests__/index.spec.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+import Progress from '..';
+
+describe('Progress.Circle', () => {
+  it('renders correctly', () => {
+    const { toJSON, getByText, queryAllByTestId } = renderWithTheme(
+      <Progress.Circle testID="progress-circle" value={25} />
+    );
+
+    expect(queryAllByTestId('progress-circle')).toHaveLength(1);
+    expect(getByText('25%')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with intent', () => {
+    const { toJSON, getByText, queryAllByTestId } = renderWithTheme(
+      <Progress.Circle testID="progress-circle" intent="success" value={75} />
+    );
+
+    expect(queryAllByTestId('progress-circle')).toHaveLength(1);
+    expect(getByText('75%')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('Progress.Bar', () => {
+  it('renders correctly', () => {
+    const { toJSON, queryAllByTestId } = renderWithTheme(
+      <Progress.Bar testID="progress-bar" value={25} />
+    );
+
+    expect(queryAllByTestId('progress-bar')).toHaveLength(1);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with intent', () => {
+    const { toJSON, queryAllByTestId } = renderWithTheme(
+      <Progress.Bar testID="progress-bar" intent="success" value={75} />
+    );
+
+    expect(queryAllByTestId('progress-bar')).toHaveLength(1);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Progress/index.tsx

@@ -0,0 +1,6 @@
+import ProgressCircle from './ProgressCircle';
+import ProgressBar from './ProgressBar';
+
+const Progress = { Circle: ProgressCircle, Bar: ProgressBar } as const;
+
+export default Progress;

package/src/components/Progress/types.ts

@@ -0,0 +1 @@
+export type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info';