├── .eslintcache
├── .gitignore
├── README.md
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.js
    ├── App.test.js
    ├── Question.js
    ├── data.js
    ├── index.css
    ├── index.js
    ├── reportWebVitals.js
    └── setupTests.js


/.eslintcache:
--------------------------------------------------------------------------------
1 | [{"C:\\Users\\shaon\\OneDrive\\Desktop\\react\\accordion\\src\\index.js":"1","C:\\Users\\shaon\\OneDrive\\Desktop\\react\\accordion\\src\\App.js":"2","C:\\Users\\shaon\\OneDrive\\Desktop\\react\\accordion\\src\\reportWebVitals.js":"3","C:\\Users\\shaon\\OneDrive\\Desktop\\react\\accordion\\src\\Question.js":"4","C:\\Users\\shaon\\OneDrive\\Desktop\\react\\accordion\\src\\data.js":"5"},{"size":500,"mtime":499162500000,"results":"6","hashOfConfig":"7"},{"size":545,"mtime":1608632005526,"results":"8","hashOfConfig":"7"},{"size":362,"mtime":499162500000,"results":"9","hashOfConfig":"7"},{"size":548,"mtime":1608632066285,"results":"10","hashOfConfig":"7"},{"size":1436,"mtime":1608572223236,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"1z992l",{"filePath":"15","messages":"16","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"17","usedDeprecatedRules":"14"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"C:\\Users\\shaon\\OneDrive\\Desktop\\react\\accordion\\src\\index.js",[],["24","25"],"C:\\Users\\shaon\\OneDrive\\Desktop\\react\\accordion\\src\\App.js",["26"],"import React, { useState } from 'react';\nimport data from './data';\nimport SingleQuestion from './Question';\nfunction App() {\n  const [questions, setQuestions] = useState(data);\n  return(\n    <main>\n      <div className=\"container\">\n        <h3>questions and answers about log in</h3>\n        <section className=\"info\">\n          {\n            questions.map((question) => {\n              return <SingleQuestion key={question.id} {...question}/>;\n            })\n          }\n        </section>\n      </div>\n    </main>\n  );\n}\n\nexport default App;\n","C:\\Users\\shaon\\OneDrive\\Desktop\\react\\accordion\\src\\reportWebVitals.js",[],"C:\\Users\\shaon\\OneDrive\\Desktop\\react\\accordion\\src\\Question.js",[],"C:\\Users\\shaon\\OneDrive\\Desktop\\react\\accordion\\src\\data.js",[],{"ruleId":"27","replacedBy":"28"},{"ruleId":"29","replacedBy":"30"},{"ruleId":"31","severity":1,"message":"32","line":5,"column":21,"nodeType":"33","messageId":"34","endLine":5,"endColumn":33},"no-native-reassign",["35"],"no-negated-in-lhs",["36"],"no-unused-vars","'setQuestions' is assigned a value but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Accordion
2 | 
3 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "accordion",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.6",
 7 |     "@testing-library/react": "^11.2.2",
 8 |     "@testing-library/user-event": "^12.6.0",
 9 |     "react": "^17.0.1",
10 |     "react-dom": "^17.0.1",
11 |     "react-icons": "^4.1.0",
12 |     "react-scripts": "4.0.1",
13 |     "web-vitals": "^0.2.4"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": [
23 |       "react-app",
24 |       "react-app/jest"
25 |     ]
26 |   },
27 |   "browserslist": {
28 |     "production": [
29 |       ">0.2%",
30 |       "not dead",
31 |       "not op_mini all"
32 |     ],
33 |     "development": [
34 |       "last 1 chrome version",
35 |       "last 1 firefox version",
36 |       "last 1 safari version"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rkshaon/react_accordion/77a7c4dbe224a373a2fa9a1de07616b25a47453e/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>Accordion</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rkshaon/react_accordion/77a7c4dbe224a373a2fa9a1de07616b25a47453e/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rkshaon/react_accordion/77a7c4dbe224a373a2fa9a1de07616b25a47453e/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import data from './data';
 3 | import SingleQuestion from './Question';
 4 | function App() {
 5 |   const [questions, setQuestions] = useState(data);
 6 |   return(
 7 |     <main>
 8 |       <div className="container">
 9 |         <h3>questions and answers about log in</h3>
10 |         <section className="info">
11 |           {
12 |             questions.map((question) => {
13 |               return <SingleQuestion key={question.id} {...question}/>;
14 |             })
15 |           }
16 |         </section>
17 |       </div>
18 |     </main>
19 |   );
20 | }
21 | 
22 | export default App;
23 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/Question.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { AiOutlineMinus, AiOutlinePlus } from 'react-icons/ai';
 3 | const Question = ({title, info}) => {
 4 |   const [showInfo, setShowInfo] = useState(false);
 5 |   return(
 6 |     <article className="question">
 7 |       <header>
 8 |         <h4>{title}</h4>
 9 |         <button className="btn" onClick={() => setShowInfo(!showInfo)}>
10 |           {showInfo ? <AiOutlineMinus /> : <AiOutlinePlus />}
11 |         </button>
12 |       </header>
13 |       {showInfo && <p>{info}</p>}
14 |     </article>
15 |   );
16 | };
17 | 
18 | export default Question;
19 | 


--------------------------------------------------------------------------------
/src/data.js:
--------------------------------------------------------------------------------
 1 | const questions = [
 2 |   {
 3 |     id: 1,
 4 |     title: 'Do I have to allow the use of cookes?',
 5 |     info:
 6 |       'Unicorn vinyl poutine brooklyn, next level direct trade iceland. Shaman copper mug church-key coloring book, whatever poutine normcore fixie cred kickstarter post-ironic street art.',
 7 |   },
 8 |   {
 9 |     id: 2,
10 |     title: 'How do I change my My Page password?',
11 |     info:
12 |       'Coloring book forage photo booth gentrify lumbersexual. Migas chillwave poutine synth shoreditch, enamel pin thundercats fashion axe roof party polaroid chartreuse.',
13 |   },
14 |   {
15 |     id: 3,
16 |     title: 'What is BankID?',
17 |     info:
18 |       'Enamel pin fam sustainable woke whatever venmo. Authentic asymmetrical put a bird on it, lumbersexual activated charcoal kinfolk banjo cred pickled sartorial.',
19 |   },
20 |   {
21 |     id: 4,
22 |     title: 'Whose birth number can I use?',
23 |     info:
24 |       'Edison bulb direct trade gentrify beard lo-fi seitan sustainable roof party franzen occupy squid. Knausgaard cronut succulents, scenester readymade shabby chic lyft. Copper mug meh vegan gentrify.',
25 |   },
26 |   {
27 |     id: 5,
28 |     title: 'When do I recieve a password ordered by letter?',
29 |     info:
30 |       'Locavore franzen fashion axe live-edge neutra irony synth af tilde shabby chic man braid chillwave waistcoat copper mug messenger bag. Banjo snackwave blog, microdosing thundercats migas vaporware viral lo-fi seitan ',
31 |   },
32 | ];
33 | export default questions;
34 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | ===============
  3 | Variables
  4 | ===============
  5 | */
  6 | 
  7 | :root {
  8 |   /* dark shades of primary color*/
  9 |   --clr-primary-1: hsl(205, 86%, 17%);
 10 |   --clr-primary-2: hsl(205, 77%, 27%);
 11 |   --clr-primary-3: hsl(205, 72%, 37%);
 12 |   --clr-primary-4: hsl(205, 63%, 48%);
 13 |   /* primary/main color */
 14 |   --clr-primary-5: hsl(205, 78%, 60%);
 15 |   /* lighter shades of primary color */
 16 |   --clr-primary-6: hsl(205, 89%, 70%);
 17 |   --clr-primary-7: hsl(205, 90%, 76%);
 18 |   --clr-primary-8: hsl(205, 86%, 81%);
 19 |   --clr-primary-9: hsl(205, 90%, 88%);
 20 |   --clr-primary-10: hsl(205, 100%, 96%);
 21 |   /* darkest grey - used for headings */
 22 |   --clr-grey-1: hsl(209, 61%, 16%);
 23 |   --clr-grey-2: hsl(211, 39%, 23%);
 24 |   --clr-grey-3: hsl(209, 34%, 30%);
 25 |   --clr-grey-4: hsl(209, 28%, 39%);
 26 |   /* grey used for paragraphs */
 27 |   --clr-grey-5: hsl(210, 22%, 49%);
 28 |   --clr-grey-6: hsl(209, 23%, 60%);
 29 |   --clr-grey-7: hsl(211, 27%, 70%);
 30 |   --clr-grey-8: hsl(210, 31%, 80%);
 31 |   --clr-grey-9: hsl(212, 33%, 89%);
 32 |   --clr-grey-10: hsl(210, 36%, 96%);
 33 |   --clr-white: #fff;
 34 |   --clr-purple: #4b145b;
 35 |   --clr-red-special: #b4345c;
 36 |   --clr-grey-special: #eae6eb;
 37 |   --clr-red-dark: hsl(360, 67%, 44%);
 38 |   --clr-red-light: hsl(360, 71%, 66%);
 39 |   --clr-green-dark: hsl(125, 67%, 44%);
 40 |   --clr-green-light: hsl(125, 71%, 66%);
 41 |   --clr-black: #222;
 42 |   --transition: all 0.3s linear;
 43 |   --spacing: 0.1rem;
 44 |   --radius: 0.25rem;
 45 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 46 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 47 |   --max-width: 1170px;
 48 |   --fixed-width: 920px;
 49 | }
 50 | /*
 51 | ===============
 52 | Global Styles
 53 | ===============
 54 | */
 55 | 
 56 | *,
 57 | ::after,
 58 | ::before {
 59 |   margin: 0;
 60 |   padding: 0;
 61 |   box-sizing: border-box;
 62 | }
 63 | body {
 64 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 65 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 66 |   background: var(--clr-purple);
 67 |   color: var(--clr-grey-1);
 68 |   line-height: 1.5;
 69 |   font-size: 0.875rem;
 70 | }
 71 | ul {
 72 |   list-style-type: none;
 73 | }
 74 | a {
 75 |   text-decoration: none;
 76 | }
 77 | h1,
 78 | h2,
 79 | h3,
 80 | h4 {
 81 |   letter-spacing: var(--spacing);
 82 |   text-transform: capitalize;
 83 |   line-height: 1.25;
 84 |   margin-bottom: 0.75rem;
 85 | }
 86 | h1 {
 87 |   font-size: 3rem;
 88 | }
 89 | h2 {
 90 |   font-size: 2rem;
 91 | }
 92 | h3 {
 93 |   font-size: 1.25rem;
 94 | }
 95 | h4 {
 96 |   font-size: 0.875rem;
 97 | }
 98 | p {
 99 |   margin-bottom: 1.25rem;
100 |   color: var(--clr-grey-5);
101 | }
102 | @media screen and (min-width: 800px) {
103 |   h1 {
104 |     font-size: 4rem;
105 |   }
106 |   h2 {
107 |     font-size: 2.5rem;
108 |   }
109 |   h3 {
110 |     font-size: 1.75rem;
111 |   }
112 |   h4 {
113 |     font-size: 1rem;
114 |   }
115 |   body {
116 |     font-size: 1rem;
117 |   }
118 |   h1,
119 |   h2,
120 |   h3,
121 |   h4 {
122 |     line-height: 1;
123 |   }
124 | }
125 | /*  global classes */
126 | 
127 | /* section */
128 | .section {
129 |   width: 90vw;
130 |   margin: 0 auto;
131 |   max-width: var(--max-width);
132 | }
133 | 
134 | @media screen and (min-width: 992px) {
135 |   .section {
136 |     width: 95vw;
137 |   }
138 | }
139 | 
140 | /*
141 | ===============
142 | Questions
143 | ===============
144 | */
145 | 
146 | main {
147 |   min-height: 100vh;
148 |   /* using flex because of better browser support */
149 |   display: flex;
150 |   justify-content: center;
151 |   align-items: center;
152 | }
153 | 
154 | .container {
155 |   width: 90vw;
156 |   margin: 5rem auto;
157 |   background: var(--clr-white);
158 |   border-radius: var(--radius);
159 |   padding: 2.5rem 2rem;
160 |   max-width: var(--fixed-width);
161 |   display: grid;
162 |   gap: 1rem 2rem;
163 | }
164 | .container h3 {
165 |   line-height: 1.2;
166 |   font-weight: 500;
167 | }
168 | @media screen and (min-width: 992px) {
169 |   .container {
170 |     display: grid;
171 |     grid-template-columns: 250px 1fr;
172 |   }
173 | }
174 | .question {
175 |   padding: 1rem 1.5rem;
176 |   border: 2px solid var(--clr-grey-special);
177 |   margin-bottom: 1rem;
178 |   border-radius: var(--radius);
179 |   box-shadow: var(--light-shadow);
180 | }
181 | .question h4 {
182 |   text-transform: none;
183 |   line-height: 1.5;
184 | }
185 | .question p {
186 |   color: var(--clr-grey-3);
187 |   margin-bottom: 0;
188 |   margin-top: 0.5rem;
189 | }
190 | .question header {
191 |   display: flex;
192 |   justify-content: space-between;
193 |   align-items: center;
194 | }
195 | .question header h4 {
196 |   margin-bottom: 0;
197 | }
198 | .btn {
199 |   background: transparent;
200 |   border-color: transparent;
201 |   width: 2rem;
202 |   height: 2rem;
203 |   background: var(--clr-grey-special);
204 |   display: flex;
205 |   align-items: center;
206 |   justify-content: center;
207 |   border-radius: 50%;
208 |   color: var(--clr-red-special);
209 |   cursor: pointer;
210 |   margin-left: 1rem;
211 |   align-self: center;
212 | }
213 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById('root')
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------