feat(project): add password strength component

src/components/PasswordStrength/PasswordStrength.module.scss

@@ -0,0 +1,48 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+
+.passwordStrength {
+  position: relative;
+  margin: variables.$base-spacing 0;
+  font-family: theme.$body-font-family;
+  font-size: 14px;
+}
+
+.passwordStrengthBar {
+  position: relative;
+  width: 170px;
+  height: 6px;
+  margin: variables.$base-spacing 0;
+
+  background: #ddd;
+  border-radius: 5px;
+}
+
+.passwordStrengthFill {
+  position: absolute;
+  width: 0;
+  height: inherit;
+  background: transparent;
+  border-radius: inherit;
+  transition: width 0.5s ease-in-out, background 0.25s;
+}
+
+.passwordStrengthFill[data-strength='1'] {
+  width: 25%;
+  background: orangered;
+}
+
+.passwordStrengthFill[data-strength='2'] {
+  width: 50%;
+  background: orange;
+}
+
+.passwordStrengthFill[data-strength='3'] {
+  width: 75%;
+  background: yellowgreen;
+}
+
+.passwordStrengthFill[data-strength='4'] {
+  width: 100%;
+  background: green;
+}

src/components/PasswordStrength/PasswordStrength.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import PasswordStrength from './PasswordStrength';
+
+describe('<PasswordStrength>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<PasswordStrength />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/PasswordStrength/PasswordStrength.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import styles from './PasswordStrength.module.scss';
+
+type Props = {
+  strength: number;
+};
+
+const PasswordStrength: React.FC<Props> = ({ strength }: Props) => {
+  return (
+    <div className={styles.passwordStrength}>
+      <div className={styles.passwordStrengthBar}>
+        <div className={styles.passwordStrengthFill} data-strength={strength}></div>
+      </div>
+      <span>Use a minimum of 6 characters (case sensitive) with at least one number or special character and one capital character</span>
+    </div>
+  );
+};
+
+export default PasswordStrength;

src/components/PasswordStrength/__snapshots__/PasswordStrength.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PasswordStrength> renders and matches snapshot 1`] = `
+<div>
+  <div
+    class="passwordStrength"
+  >
+    <div
+      class="passwordStrengthBar"
+    >
+      <div
+        class="passwordStrengthFill"
+      />
+    </div>
+    <span>
+      Use a minimum of 6 characters (case sensitive) with at least one number or special character and one capital character
+    </span>
+  </div>
+</div>
+`;