Create a how it works component for the about component #18 (#79)

* Finished Elements // need to fix border radius ...

* Done and its responsive for small medium and large

* fixed yarn.lock

* Changes Requested are Done and its passing the snapshot testing

Co-authored-by: Allan <[email protected]>
Co-authored-by: allan <[email protected]>

.eslintrc.json

@@ -1,29 +1,29 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "jest": true
-  },
-  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
-  "overrides": [],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": ["react"],
-  "rules": {
-    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx"] }],
-    "react/function-component-definition": "off",
-    "arrow-body-style": "off",
-    "react/react-in-jsx-scope": "off",
-    "no-param-reassign": ["error", { "props": false }],
-    "react/prop-types": "off",
-    "no-restricted-exports": "off",
-    "react/jsx-props-no-spreading": "off",
-    "import/no-cycle": "off",
-    "import/prefer-default-export": "off"
-  }
-}
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "jest": true
+  },
+  "extends": ["plugin:react/recommended", "airbnb", "prettier"],
+  "overrides": [],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {
+    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx"] }],
+    "react/function-component-definition": "off",
+    "arrow-body-style": "off",
+    "react/react-in-jsx-scope": "off",
+    "no-param-reassign": ["error", { "props": false }],
+    "react/prop-types": "off",
+    "no-restricted-exports": "off",
+    "react/jsx-props-no-spreading": "off",
+    "import/no-cycle": "off",
+    "import/prefer-default-export": "off"
+  }
+}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,19 +1,19 @@
----
-name: Bug Report 🐞
-about: Report a bug in the project.
-labels: bug
----
-
-## Description
-
-[Description of the bug or feature]
-
-## Steps to Reproduce
-
-1. [First Step]
-2. [Second Step]
-3. [and so on...]
-
-**Expected behavior:** [What you expected to happen]
-
+---
+name: Bug Report 🐞
+about: Report a bug in the project.
+labels: bug
+---
+
+## Description
+
+[Description of the bug or feature]
+
+## Steps to Reproduce
+
+1. [First Step]
+2. [Second Step]
+3. [and so on...]
+
+**Expected behavior:** [What you expected to happen]
+
 **Actual behavior:** [What actually happened]

.github/ISSUE_TEMPLATE/feature_requests.md

@@ -1,20 +1,20 @@
----
-name: Feature Request 💡
-about: Suggest a new idea for the project.
-labels: enhancement
----
-
-## Summary
-
-Brief explanation of the feature.
-
-### Screenshots
-If applicable, add screenshots to help explain your problem.
-
-### Basic example
-
-If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.
-
-### Motivation
-
+---
+name: Feature Request 💡
+about: Suggest a new idea for the project.
+labels: enhancement
+---
+
+## Summary
+
+Brief explanation of the feature.
+
+### Screenshots
+If applicable, add screenshots to help explain your problem.
+
+### Basic example
+
+If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.
+
+### Motivation
+
 Why are we doing this? What use cases does it support? What is the expected outcome?

.github/PULL_REQUEST_TEMPLATE/pull_request_template.md

@@ -1,34 +1,34 @@
-# Description
-
-Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
-
-## Related Issue
-Fixes # (issue)
-If suggesting a new feature or change, please discuss it in an issue first
-
-## Screenshots
-(prefer animated gif)
-
-
-## Type of change
-
-Please delete options that are not relevant.
-
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-
-# How Has This Been Tested?
-
-Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
-
-- [ ] Tested locally
-- [ ] Added tests
-
-# Checklist:
-
-- [ ] My code follows the style guidelines of this project
-- [ ] I have performed a self-review of my own code
-- [ ] I have commented my code, particularly in hard-to-understand areas
-- [ ] My changes generate no new warnings
-- [ ] New and existing unit tests pass locally with my changes
+# Description
+
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
+
+## Related Issue
+Fixes # (issue)
+If suggesting a new feature or change, please discuss it in an issue first
+
+## Screenshots
+(prefer animated gif)
+
+
+## Type of change
+
+Please delete options that are not relevant.
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+
+# How Has This Been Tested?
+
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
+
+- [ ] Tested locally
+- [ ] Added tests
+
+# Checklist:
+
+- [ ] My code follows the style guidelines of this project
+- [ ] I have performed a self-review of my own code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] My changes generate no new warnings
+- [ ] New and existing unit tests pass locally with my changes

.github/workflows/github-actions.yml

@@ -1,26 +1,26 @@
-name: Node.js CI
-
-on:
-  push:
-    branches: [ develop ]
-  pull_request:
-    branches: [ develop ]
-
-jobs:
-  build:
-
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [19.x]
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: yarn install
-    - run: yarn run lint:fix
-    - run: yarn run test --passWithNoTests
+name: Node.js CI
+
+on:
+  push:
+    branches: [ develop ]
+  pull_request:
+    branches: [ develop ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [19.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: yarn install
+    - run: yarn run lint:fix
+    - run: yarn run test --passWithNoTests

.gitignore

@@ -1,23 +1,23 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierignore

@@ -1,23 +1,23 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.prettierrc.json

@@ -1,7 +1,7 @@
-{
-  "endOfLine": "auto",
-  "printWidth": 80,
-  "tabWidth": 2,
-  "trailingComma": "es5",
-  "singleQuote": true
-}
+{
+  "endOfLine": "auto",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "singleQuote": true
+}