├── .babelrc ├── .eslintignore ├── .eslintrc.json ├── .github └── workflows │ └── package-build.yml ├── .gitignore ├── .npmignore ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── commitlint.config.js ├── docs ├── app-b08396ff4a1604499a77.js ├── app-b08396ff4a1604499a77.js.map ├── chunk-map.json ├── commons-b97e9a8e9fc46ec31d7a.js ├── commons-b97e9a8e9fc46ec31d7a.js.map ├── component---src-pages-demo-more-js-49fa05d97992b1e4c641.js ├── component---src-pages-demo-more-js-49fa05d97992b1e4c641.js.map ├── component---src-pages-index-js-25f547bcaeb4940cea12.js ├── component---src-pages-index-js-25f547bcaeb4940cea12.js.map ├── demo-more │ └── index.html ├── framework-ac3690fb613cd7838c61.js ├── framework-ac3690fb613cd7838c61.js.map ├── index.html ├── page-data │ ├── app-data.json │ ├── demo-more │ │ └── page-data.json │ └── index │ │ └── page-data.json ├── polyfill-1d7b72fd669edd5b5816.js ├── polyfill-1d7b72fd669edd5b5816.js.map ├── static │ ├── c486398ea7e8be092969149052a88945 │ │ ├── 31987 │ │ │ └── ss_1.png │ │ ├── 46604 │ │ │ └── ss_1.png │ │ ├── 3dc0e │ │ │ └── ss_1.png │ │ └── e1953 │ │ │ └── ss_1.png │ └── d │ │ ├── 256249292.json │ │ ├── 2916840477.json │ │ └── 63159454.json ├── styles-2d82ac8e3afc0c213061.js ├── styles-2d82ac8e3afc0c213061.js.map ├── styles.bc0c6748db2aeca2522c.css ├── webpack-runtime-7a88f874c2dc04a855e4.js ├── webpack-runtime-7a88f874c2dc04a855e4.js.map └── webpack.stats.json ├── example ├── .gitignore ├── closed.png ├── expanded.png ├── package-lock.json ├── package.json ├── public │ ├── index.html │ └── manifest.json └── src │ ├── App.js │ ├── index.css │ ├── index.js │ ├── with-css-override │ ├── index.css │ └── index.js │ └── with-style-parameter │ └── index.js ├── package-lock.json ├── package.json ├── rollup.config.js ├── scripts └── update_website.js ├── src ├── __mock__ │ ├── fileMock.js │ └── styleMock.js ├── assets │ └── arrow_down.svg ├── events.js ├── index.js ├── rowItem.js ├── styles.scss └── test.js └── website ├── .babelrc ├── .gitignore ├── .prettierignore ├── .prettierrc ├── LICENSE ├── README.md ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── gatsby-ssr.js ├── package-lock.json ├── package.json └── src ├── components ├── faqToggleOption.js ├── footer.js ├── githubFork.js ├── header.js ├── image.js ├── index.css ├── layout.css ├── layout.js └── seo.js ├── images ├── gatsby-astronaut.png ├── gatsby-icon.png ├── ss_1.png ├── ss_2.png └── ss_3.png └── pages ├── demo-more.js └── index.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ], 6 | "plugins": [ 7 | "@babel/plugin-proposal-object-rest-spread", 8 | "@babel/plugin-proposal-class-properties" 9 | // ,"transform-react-jsx" 10 | ] 11 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/* 2 | public/* 3 | example/* 4 | build/* 5 | dist/* 6 | website/* -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "node": true, 6 | "jest": true, 7 | "es6": true 8 | }, 9 | "extends": ["eslint:recommended", "plugin:react/recommended"], 10 | "globals": { 11 | "Atomics": "readonly", 12 | "SharedArrayBuffer": "readonly" 13 | }, 14 | "parserOptions": { 15 | "ecmaVersion": 6, 16 | "impliedStrict": true, 17 | "sourceType": "module", 18 | "ecmaFeatures": { 19 | "jsx": true 20 | } 21 | }, 22 | "plugins": ["react"], 23 | "settings": { 24 | "react": { 25 | "version": "detect" 26 | } 27 | }, 28 | "rules": { 29 | "comma-dangle": "off", 30 | "comma-spacing": [ 31 | "error", 32 | { 33 | "after": true, 34 | "before": false 35 | } 36 | ], 37 | "comma-style": ["error", "last"], 38 | "semi": "error", 39 | "indent": [ 40 | "error", 41 | 4, 42 | { 43 | "flatTernaryExpressions": true, 44 | "SwitchCase": 1 45 | } 46 | ], 47 | "jsx-quotes": ["error", "prefer-double"], 48 | "no-mixed-spaces-and-tabs": "error", 49 | "strict": "error", 50 | "max-len": ["error", 100], 51 | "prefer-const": "error", 52 | "no-console": "error", 53 | "no-const-assign": "error", 54 | "no-empty": [ 55 | "error", 56 | { 57 | "allowEmptyCatch": true 58 | } 59 | ], 60 | "no-undef": "error", 61 | "no-unused-vars": "off", 62 | "no-var": "error", 63 | "no-extend-native": "error" 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /.github/workflows/package-build.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: 4 | push: 5 | branches: [master] 6 | 7 | # Run tests for any PRs. 8 | pull_request: 9 | 10 | jobs: 11 | build: 12 | runs-on: ubuntu-latest 13 | 14 | steps: 15 | - uses: actions/checkout@v2 16 | - name: Use Node.js to build 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: 12 20 | - run: npm i 21 | - run: npm run lint:js 22 | - run: npm test 23 | - run: npm run build 24 | env: 25 | CI: true 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Optional REPL history 57 | .node_repl_history 58 | 59 | # Output of 'npm pack' 60 | *.tgz 61 | 62 | # Yarn Integrity file 63 | .yarn-integrity 64 | 65 | # dotenv environment variables file 66 | .env 67 | .env.test 68 | 69 | # parcel-bundler cache (https://parceljs.org/) 70 | .cache 71 | 72 | # next.js build output 73 | .next 74 | 75 | # nuxt.js build output 76 | .nuxt 77 | 78 | # vuepress build output 79 | .vuepress/dist 80 | 81 | # Serverless directories 82 | .serverless/ 83 | 84 | # FuseBox cache 85 | .fusebox/ 86 | 87 | # DynamoDB Local files 88 | .dynamodb/ 89 | 90 | build/ 91 | example/build/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | example 3 | .babelrc 4 | webpack.config.js 5 | .gitignore 6 | README.md 7 | node_modules/ 8 | coverage 9 | docs 10 | __mock__ 11 | test.js 12 | website -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .cache 2 | package-lock.json 3 | public 4 | build 5 | dist -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": false, 3 | "tabWidth": 4, 4 | "trailingComma": "all", 5 | "printWidth": 100 6 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Binod Kumar Swain 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-faq-component 2 | 3 | [![release](https://badgen.net/npm/v/react-faq-component)](https://www.npmjs.com/package/react-faq-component) 4 | [![open issues](https://badgen.net/github/open-issues/binodswain/react-faq-component)](https://github.com/binodswain/react-faq-component/issues) 5 | [![license](https://badgen.net/github/license/binodswain/react-faq-component)](https://github.com/binodswain/react-faq-component/blob/master/LICENSE) 6 | [![Build](https://github.com/binodswain/react-faq-component/actions/workflows/package-build.yml/badge.svg)](https://github.com/binodswain/react-faq-component/actions/workflows/package-build.yml) 7 | 8 | An accessible React package to render FAQ section. 9 | [view demo](https://binodswain.github.io/react-faq-component/) 10 | 11 | ## Install 12 | 13 | ```bash 14 | npm install --save react-faq-component 15 | ``` 16 | 17 | ## Usage 18 | 19 | ```jsx 20 | import React, { useEffect, useState } from "react"; 21 | import Faq from "react-faq-component"; 22 | 23 | const data = { 24 | title: "FAQ (How it works)", 25 | rows: [ 26 | { 27 | title: "Lorem ipsum dolor sit amet,", 28 | content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat, 29 | ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus. 30 | In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae. 31 | Fusce sed commodo purus, at tempus turpis.`, 32 | }, 33 | { 34 | title: "Nunc maximus, magna at ultricies elementum", 35 | content: 36 | "Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam, vitae convallis ex tortor sed dolor.", 37 | }, 38 | { 39 | title: "Curabitur laoreet, mauris vel blandit fringilla", 40 | content: `Curabitur laoreet, mauris vel blandit fringilla, leo elit rhoncus nunc, ac sagittis leo elit vel lorem. 41 | Fusce tempor lacus ut libero posuere viverra. Nunc velit dolor, tincidunt at varius vel, laoreet vel quam. 42 | Sed dolor urna, lobortis in arcu auctor, tincidunt mattis ante. Vivamus venenatis ultricies nibh in volutpat. 43 | Cras eu metus quis leo vestibulum feugiat nec sagittis lacus.Mauris vulputate arcu sed massa euismod dignissim. `, 44 | }, 45 | { 46 | title: "What is the package version", 47 | content:

current version is 1.2.1

, 48 | }, 49 | ], 50 | }; 51 | 52 | const styles = { 53 | // bgColor: 'white', 54 | titleTextColor: "blue", 55 | rowTitleColor: "blue", 56 | // rowContentColor: 'grey', 57 | // arrowColor: "red", 58 | }; 59 | 60 | const config = { 61 | // animate: true, 62 | // arrowIcon: "V", 63 | // tabFocus: true 64 | }; 65 | 66 | export default function App { 67 | 68 | return ( 69 |
70 | 75 |
76 | ); 77 | } 78 | ``` 79 | 80 | ## `data` props 81 | 82 | The data passed to react-faq-component is an object having below keys(mentioned in the table). 83 | 84 | | attribute | type | optional | details | 85 | | --------- | :----: | :------: | :---------------------------------------------------- | 86 | | title | String | true | Text displayed as the title/header of the FAQ section | 87 | | rows | Array | true | Array of obj containing title and content of each row | 88 | 89 | ## `config` props (optional) 90 | 91 | ```js 92 | const config = { 93 | animate: true, 94 | arrowIcon: "V", 95 | openOnload: 0, 96 | expandIcon: "+", 97 | collapseIcon: "-", 98 | }; 99 | ``` 100 | 101 | The config passed to react-faq-component is an object having below keys(mentioned in the table). 102 | 103 | | attribute | type | optional | details | 104 | | ------------ | :--------: | :------: | :------------------------------------------------------------------------------------------------------------------------------------------- | 105 | | animate | Boolean | true | Whether to enable the (row) content animation (default val : true) | 106 | | arrowIcon | JSX/string | true | Custom component to display instead of default arrow | 107 | | tabFocus | Boolean | true | Whether to add outline on tab focus (default val : false). Focus outline is added when keyboard tab is used to navigate through the contents | 108 | | openOnload | Boolean | true | Index of the row to expand onload (0 for first row) | 109 | | expandIcon | string | true | Text to Show when row is collapsed (collapseIcon is required). | 110 | | collapseIcon | string | true | Text to Show when row is expanded | 111 | 112 | Note: `arrowIcon` is not displayed if `expandIcon` and `collapseIcon` is provided. 113 | 114 | ## `styles` props format 115 | 116 | `styles` attribute in data is optional and can be used to change text/bg color in FAQ component. 117 | e.g: 118 | 119 | ```js 120 | const data = { 121 | title: ..., 122 | rows: [...], 123 | styles: { 124 | // bgColor: 'white', 125 | titleTextColor: 'blue', 126 | // titleTextSize: '48px', 127 | rowTitleColor: 'blue', 128 | // rowTitleTextSize: 'medium', 129 | // rowContentColor: 'grey', 130 | rowContentTextSize: '16px', 131 | // rowContentPaddingTop: '10px', 132 | rowContentPaddingBottom: '10px', 133 | rowContentPaddingLeft: '50px', 134 | // rowContentPaddingRight: '150px', 135 | // arrowColor: "red", 136 | //transitionDuration: "1s", 137 | // timingFunc: "ease" 138 | } 139 | } 140 | ``` 141 | 142 | | attribute | type | optional | default value | details | 143 | | ----------------------- | :----: | :------: | :-----------: | :------------------------------------------------- | 144 | | bgColor | String | true | white | background color of faq-component | 145 | | titleTextColor | String | true | black | text color of FAQ title/header text | 146 | | titleTextSize | String | true | 30px | size of FAQ title/header text | 147 | | rowTitleColor | String | true | black | text color of title text of rowItems | 148 | | rowTitleTextSize | String | true | large | size of title text in rowItems | 149 | | rowContentColor | String | true | black | text color of row content in rowItems | 150 | | rowContentTextSize | String | true | medium | size of row content in rowItems | 151 | | arrowColor | String | true | black | color of row arrow | 152 | | rowContentPaddingTop | String | true | 0 | value of padding-top of row content in rowItems | 153 | | rowContentPaddingBottom | String | true | 0 | value of padding-bottom of row content in rowItems | 154 | | rowContentPaddingLeft | String | true | 0 | value of padding-left of row content in rowItems | 155 | | rowContentPaddingRight | String | true | 0 | value of padding-right of row content in rowItems | 156 | | transitionDuration | String | true | 0.3s | transition duration for expanding row content | 157 | | timingFunc | String | true | ease | transition function for expanding row content | 158 | 159 | If the above style options are not enough, you can write you own custom css to apply styles on the elements. 160 | 161 | ```scss 162 | .faq-row-wrapper { 163 | .faq-title { 164 | } 165 | 166 | .faq-body { 167 | .faq-row { 168 | .row-title { 169 | } 170 | 171 | .row-content { 172 | .row-content-text { 173 | } 174 | } 175 | } 176 | } 177 | } 178 | ``` 179 | 180 | [Example with css style](/example/src/with-css-override) 181 | 182 | These classnames are applied to the elements and do not contain any styles. 183 | 184 | ## `getRowOptions` props (optional) 185 | 186 | A function is passed as a value to getRowOptions prop, which gets called with an array parameter. The length of the array is the same as the number of rows present in FAQ data. 3 functions in an object are exported per row to toggle and scrollTntoView. 187 | 188 | ```js 189 | [ 190 | // option for first row item 191 | { 192 | close: () => {}, 193 | expand: () => {}, 194 | scrollIntoView: (option) => {}, // option values : https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#parameters 195 | }, 196 | {...}, 197 | {...}, 198 | {...}, 199 | ]; 200 | ``` 201 | 202 | **Example:** 203 | 204 | ```jsx 205 | export default function SampleFaqApp() { 206 | const [rows, setRowsOption] = useState(null); 207 | 208 | useEffect(() => { 209 | if (rows) { 210 | setTimeout(() => { 211 | rows[0].expand(); 212 | }, 2500); 213 | 214 | setTimeout(() => { 215 | rows[0].close(); 216 | }, 5000); 217 | 218 | setTimeout(() => { 219 | rows[0].scrollIntoView(); 220 | // rows[0].scrollIntoView(true); 221 | }, 10000); 222 | } 223 | }, [rows]); 224 | 225 | return ( 226 |
227 |

FAQ section

228 | 229 |
230 | 231 |
232 |
233 | ); 234 | ``` 235 | 236 | Note: On accessing invalid array index, an error will be logged in console. 237 | 238 | ## Screenshot 239 | 240 | ![Screenshot 1](/example/closed.png?raw=true "closed state") 241 | 242 | --- 243 | 244 | ![Screenshot 2](/example/expanded.png?raw=true "expanded state") 245 | 246 | ## License 247 | 248 | MIT © [binodswain](https://github.com/binodswain) 249 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/binodswain/react-faq-component/9c899195a5bd132789b8defd07830072e3fa0cd2/commitlint.config.js -------------------------------------------------------------------------------- /docs/chunk-map.json: -------------------------------------------------------------------------------- 1 | { 2 | "polyfill": ["/polyfill-1d7b72fd669edd5b5816.js"], 3 | "app": ["/app-b08396ff4a1604499a77.js"], 4 | "component---src-pages-demo-more-js": [ 5 | "/component---src-pages-demo-more-js-49fa05d97992b1e4c641.js" 6 | ], 7 | "component---src-pages-index-js": ["/component---src-pages-index-js-25f547bcaeb4940cea12.js"] 8 | } 9 | -------------------------------------------------------------------------------- /docs/component---src-pages-demo-more-js-49fa05d97992b1e4c641.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp = window.webpackJsonp || []).push([ 2 | [5], 3 | { 4 | Agvw: function (e, t, n) { 5 | 6 | n.r(t); 7 | const a = n("q1tI"), 8 | i = n.n(a), 9 | o = n("Bl7J"), 10 | r = n("vrFN"), 11 | s = n("TwNY"), 12 | l = n("W/9C"), 13 | u = n("tHFp"), 14 | m = n("jHpe"), 15 | c = n.n(m), 16 | d = 17 | (n("y1X9"), 18 | n("QWvX"), 19 | n("ZgVT"), 20 | n("bPOv"), 21 | n("85O/"), 22 | n("CjHp"), 23 | n("hL/g"), 24 | { 25 | title: "FAQ (How it works)", 26 | rows: [ 27 | { 28 | title: 29 | "Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat", 30 | content: 31 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\n Fusce sed commodo purus, at tempus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\n Fusce sed commodo purus, at tempus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\n Fusce sed commodo purus, at tempus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\n Fusce sed commodo purus, at tempus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\n Fusce sed commodo purus, at tempus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\n Fusce sed commodo purus, at tempus turpis.", 32 | }, 33 | { 34 | title: "Nunc maximus, magna at ultricies elementum", 35 | content: 36 | "Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam, vitae convallis ex tortor sed dolor.", 37 | }, 38 | { 39 | title: "Can I use html as content", 40 | content: 41 | 'Yes, here is an example of a link', 42 | }, 43 | { title: "What is the package version", content: "v1.0.0" }, 44 | ], 45 | }); 46 | function p() { 47 | const e = Object(a.useState)(null), 48 | t = e[0], 49 | n = e[1], 50 | o = Object(a.useState)(0), 51 | r = o[0], 52 | s = o[1]; 53 | return i.a.createElement( 54 | "div", 55 | { id: "external-toggle" }, 56 | i.a.createElement( 57 | "div", 58 | { className: "row-option" }, 59 | i.a.createElement("label", { htmlFor: "rownum" }, "Enter row number:"), 60 | i.a.createElement("input", { 61 | type: "number", 62 | id: "rownum", 63 | value: r, 64 | onChange: function (e) { 65 | return s(e.target.value); 66 | }, 67 | min: "0", 68 | max: "3", 69 | disabled: !t, 70 | }), 71 | i.a.createElement( 72 | "button", 73 | { 74 | type: "button", 75 | onClick: function () { 76 | t && t[r].expand(); 77 | }, 78 | }, 79 | "Exapnd row", 80 | ), 81 | i.a.createElement( 82 | "button", 83 | { 84 | type: "button", 85 | onClick: function () { 86 | t && t[r].close(); 87 | }, 88 | }, 89 | "Close row", 90 | ), 91 | ), 92 | i.a.createElement( 93 | "div", 94 | null, 95 | i.a.createElement(u.a, { data: d, getRowOptions: n }), 96 | ), 97 | ); 98 | } 99 | const g = { 100 | title: "FAQ (How it works)", 101 | rows: [ 102 | { 103 | title: 104 | "Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat Lorem ipsum dolor sit amet, ", 105 | content: 106 | "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\n Fusce sed commodo purus, at tempus turpis.", 107 | }, 108 | { 109 | title: "Nunc maximus, magna at ultricies elementum", 110 | content: 111 | "Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam, vitae convallis ex tortor sed dolor.Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam, vitae convallis ex tortor sed dolor.", 112 | }, 113 | { 114 | title: "Can I use html as content", 115 | content: 116 | 'Yes, here is an example of a link', 117 | }, 118 | { title: "What is the package version", content: "v1.0.5" }, 119 | ], 120 | }; 121 | t.default = function () { 122 | return ( 123 | Object(a.useEffect)(function () { 124 | c.a.highlightAll(); 125 | }, []), 126 | i.a.createElement( 127 | a.Fragment, 128 | null, 129 | i.a.createElement( 130 | o.a, 131 | null, 132 | i.a.createElement(r.a, { title: "More demos" }), 133 | i.a.createElement(s.a, null), 134 | i.a.createElement("h1", null, "More Demos"), 135 | i.a.createElement( 136 | "section", 137 | { className: "demo" }, 138 | i.a.createElement("h2", null, "View 1 (with animation):"), 139 | i.a.createElement( 140 | "pre", 141 | null, 142 | i.a.createElement( 143 | "code", 144 | { className: "language-jsx" }, 145 | '', 146 | ), 147 | ), 148 | i.a.createElement(u.a, { 149 | data: g, 150 | styles: { 151 | titleTextColor: "green", 152 | rowTitleColor: "mediumseagreen", 153 | }, 154 | }), 155 | i.a.createElement( 156 | "h2", 157 | null, 158 | "View 2 (with animation, custom icon):", 159 | ), 160 | i.a.createElement( 161 | "pre", 162 | null, 163 | i.a.createElement( 164 | "code", 165 | { className: "language-jsx" }, 166 | '', 167 | ), 168 | ), 169 | i.a.createElement(u.a, { 170 | data: g, 171 | styles: { 172 | titleTextColor: "green", 173 | rowTitleColor: "mediumseagreen", 174 | arrowColor: "red", 175 | }, 176 | config: { arrowIcon: "V" }, 177 | }), 178 | i.a.createElement( 179 | "h2", 180 | null, 181 | "View 3 (with different title colors):", 182 | ), 183 | i.a.createElement( 184 | "pre", 185 | null, 186 | i.a.createElement( 187 | "code", 188 | { className: "language-jsx" }, 189 | '', 190 | ), 191 | ), 192 | i.a.createElement(u.a, { 193 | data: g, 194 | styles: { 195 | titleTextColor: "green", 196 | rowTitleColor: "mediumseagreen", 197 | rowContentColor: "grey", 198 | }, 199 | }), 200 | i.a.createElement("h2", null, "View 4 (with content padding):"), 201 | i.a.createElement( 202 | "pre", 203 | null, 204 | i.a.createElement( 205 | "code", 206 | { className: "language-jsx" }, 207 | "", 208 | ), 209 | ), 210 | i.a.createElement(u.a, { 211 | data: g, 212 | styles: { 213 | bgColor: "white", 214 | titleTextColor: "#48482a", 215 | rowTitleColor: "#78789a", 216 | rowTitleTextSize: "large", 217 | rowContentColor: "#48484a", 218 | rowContentTextSize: "16px", 219 | rowContentPaddingTop: "10px", 220 | rowContentPaddingBottom: "10px", 221 | rowContentPaddingLeft: "50px", 222 | rowContentPaddingRight: "150px", 223 | arrowColor: "black", 224 | }, 225 | }), 226 | i.a.createElement( 227 | "h2", 228 | null, 229 | "View 5 (with custom transition and tabFocus):", 230 | ), 231 | i.a.createElement( 232 | "pre", 233 | null, 234 | i.a.createElement( 235 | "code", 236 | { className: "language-jsx" }, 237 | '', 238 | ), 239 | ), 240 | i.a.createElement(u.a, { 241 | data: g, 242 | styles: { transitionDuration: "2.5s", timingFunc: "linear" }, 243 | config: { tabFocus: !0 }, 244 | }), 245 | i.a.createElement("h2", null, "View 6 (with external row toggle):"), 246 | i.a.createElement( 247 | "pre", 248 | null, 249 | i.a.createElement( 250 | "code", 251 | { className: "language-jsx" }, 252 | 'export default function App() {\n const [rows, setRowsOption] = useState(null)\n const [row, setRow] = useState(0)\n \n const expand = () => {\n rows && rows[row].expand()\n }\n \n const close = () => {\n rows && rows[row].close()\n }\n\n return (\n
\n \n\n
\n \n setRow(e.target.value)}\n min="0" max="3" disabled={!rows}\n />\n \n\n \n
\n
\n );\n}\n\n ', 253 | ), 254 | ), 255 | i.a.createElement(p, null), 256 | ), 257 | ), 258 | i.a.createElement(l.a, null), 259 | ) 260 | ); 261 | }; 262 | }, 263 | }, 264 | ]); 265 | //# sourceMappingURL=component---src-pages-demo-more-js-49fa05d97992b1e4c641.js.map 266 | -------------------------------------------------------------------------------- /docs/component---src-pages-demo-more-js-49fa05d97992b1e4c641.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///./src/components/faqToggleOption.js","webpack:///./src/pages/demo-more.js"],"names":["data","title","rows","content","App","useState","setRowsOption","row","setRow","id","className","htmlFor","type","value","onChange","e","target","min","max","disabled","onClick","expand","close","getRowOptions","IndexPage","useEffect","Prism","highlightAll","styles","titleTextColor","rowTitleColor","arrowColor","config","arrowIcon","rowContentColor","bgColor","rowTitleTextSize","rowContentTextSize","rowContentPaddingTop","rowContentPaddingBottom","rowContentPaddingLeft","rowContentPaddingRight","transitionDuration","timingFunc","tabFocus"],"mappings":"4MAGMA,G,sEAAO,CACXC,MAAO,qBACPC,KAAM,CACJ,CACED,MACE,gVACFE,QAAQ,i4EAoBV,CACEF,MAAO,6CACPE,QACE,iHAEJ,CACEF,MAAO,4BACPE,QAAQ,qGAEV,CACEF,MAAO,8BACPE,QAAS,aAKA,SAASC,IAAO,IAAD,EACEC,mBAAS,MAAhCH,EADqB,KACfI,EADe,OAEND,mBAAS,GAAxBE,EAFqB,KAEhBC,EAFgB,KAY5B,OACE,yBAAKC,GAAG,mBACN,yBAAKC,UAAU,cACb,2BAAOC,QAAQ,UAAf,qBACA,2BACEC,KAAK,SACLH,GAAG,SACHI,MAAON,EACPO,SAAU,SAAAC,GAAC,OAAIP,EAAOO,EAAEC,OAAOH,QAC/BI,IAAI,IACJC,IAAI,IACJC,UAAWjB,IAEb,4BAAQU,KAAK,SAASQ,QArBb,WACblB,GAAQA,EAAKK,GAAKc,WAoBd,cAIA,4BAAQT,KAAK,SAASQ,QArBd,WACZlB,GAAQA,EAAKK,GAAKe,UAoBd,cAKF,6BACE,kBAAC,IAAD,CAAKtB,KAAMA,EAAMuB,cAAejB,MCtExC,IAAMN,EAAO,CACXC,MAAO,qBACPC,KAAM,CACJ,CACED,MACE,iKACFE,QAAQ,8ZAKV,CACEF,MAAO,6CACPE,QACE,8NAEJ,CACEF,MAAO,4BACPE,QAAQ,qGAEV,CACEF,MAAO,8BACPE,QAAS,YA+MAqB,UA1MG,WAMhB,OALAC,qBAAU,WAERC,IAAMC,iBACL,IAGD,kBAAC,WAAD,KAcE,kBAAC,IAAD,KACE,kBAAC,IAAD,CAAK1B,MAAM,eACX,kBAAC,IAAD,MACA,0CACA,6BAASS,UAAU,QACjB,wDACA,6BACE,0BAAMA,UAAU,gBAAhB,kIAUF,kBAAC,IAAD,CACEV,KAAMA,EACN4B,OAAQ,CACNC,eAAgB,QAChBC,cAAe,oBAInB,qEACA,6BACE,0BAAMpB,UAAU,gBAAhB,mLAaF,kBAAC,IAAD,CACEV,KAAMA,EACN4B,OAAQ,CACNC,eAAgB,QAChBC,cAAe,iBACfC,WAAY,OAEdC,OAAQ,CACNC,UAAW,OAIf,qEACA,6BACE,0BAAMvB,UAAU,gBAAhB,oKAWF,kBAAC,IAAD,CACEV,KAAMA,EACN4B,OAAQ,CACNC,eAAgB,QAChBC,cAAe,iBACfI,gBAAiB,UAIrB,8DACA,6BACE,0BAAMxB,UAAU,gBAAhB,udAmBF,kBAAC,IAAD,CACEV,KAAMA,EACN4B,OAAQ,CACNO,QAAS,QACTN,eAAgB,UAChBC,cAAe,UACfM,iBAAkB,QAClBF,gBAAiB,UACjBG,mBAAoB,OACpBC,qBAAsB,OACtBC,wBAAyB,OACzBC,sBAAuB,OACvBC,uBAAwB,QACxBV,WAAY,WAIhB,6EACA,6BACE,0BAAMrB,UAAU,gBAAhB,oKAUF,kBAAC,IAAD,CACEV,KAAMA,EACN4B,OAAQ,CACNc,mBAAoB,OACpBC,WAAY,UAEdX,OAAQ,CACNY,UAAU,KAId,kEACA,6BACE,0BAAMlC,UAAU,gBAAhB,y8BAoCF,kBAAC,EAAD,QAGJ,kBAAC,IAAD","file":"component---src-pages-demo-more-js-49fa05d97992b1e4c641.js","sourcesContent":["import React, { useEffect, useState } from \"react\"\r\nimport Faq from \"react-faq-component\"\r\n\r\nconst data = {\r\n title: \"FAQ (How it works)\",\r\n rows: [\r\n {\r\n title:\r\n \"Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat\",\r\n content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\r\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\r\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\r\n Fusce sed commodo purus, at tempus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\r\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\r\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\r\n Fusce sed commodo purus, at tempus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\r\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\r\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\r\n Fusce sed commodo purus, at tempus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\r\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\r\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\r\n Fusce sed commodo purus, at tempus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\r\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\r\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\r\n Fusce sed commodo purus, at tempus turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\r\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\r\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\r\n Fusce sed commodo purus, at tempus turpis.`,\r\n },\r\n {\r\n title: \"Nunc maximus, magna at ultricies elementum\",\r\n content:\r\n \"Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam, vitae convallis ex tortor sed dolor.\",\r\n },\r\n {\r\n title: \"Can I use html as content\",\r\n content: `Yes, here is an example of a link`,\r\n },\r\n {\r\n title: \"What is the package version\",\r\n content: \"v1.0.0\",\r\n },\r\n ],\r\n}\r\n\r\nexport default function App() {\r\n const [rows, setRowsOption] = useState(null)\r\n const [row, setRow] = useState(0)\r\n\r\n const expand = () => {\r\n rows && rows[row].expand()\r\n }\r\n\r\n const close = () => {\r\n rows && rows[row].close()\r\n }\r\n\r\n return (\r\n
\r\n
\r\n \r\n setRow(e.target.value)}\r\n min=\"0\"\r\n max=\"3\"\r\n disabled={!rows}\r\n />\r\n \r\n\r\n \r\n
\r\n\r\n
\r\n \r\n
\r\n
\r\n )\r\n}\r\n","import React, { useEffect } from \"react\"\r\nimport Layout from \"../components/layout\"\r\nimport SEO from \"../components/seo\"\r\nimport Gitfork from \"../components/githubFork\"\r\nimport Footer from \"../components/footer\"\r\nimport Faq from \"react-faq-component\"\r\nimport Prism from \"prismjs\"\r\nimport { Fragment } from \"react\"\r\nimport FaqExternal from \"../components/faqToggleOption\"\r\n\r\nconst data = {\r\n title: \"FAQ (How it works)\",\r\n rows: [\r\n {\r\n title:\r\n \"Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat Lorem ipsum dolor sit amet, \",\r\n content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed tempor sem. Aenean vel turpis feugiat,\r\n ultricies metus at, consequat velit. Curabitur est nibh, varius in tellus nec, mattis pulvinar metus.\r\n In maximus cursus lorem, nec laoreet velit eleifend vel. Ut aliquet mauris tortor, sed egestas libero interdum vitae.\r\n Fusce sed commodo purus, at tempus turpis.`,\r\n },\r\n {\r\n title: \"Nunc maximus, magna at ultricies elementum\",\r\n content:\r\n \"Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam, vitae convallis ex tortor sed dolor.Nunc maximus, magna at ultricies elementum, risus turpis vulputate quam, vitae convallis ex tortor sed dolor.\",\r\n },\r\n {\r\n title: \"Can I use html as content\",\r\n content: `Yes, here is an example of a link`,\r\n },\r\n {\r\n title: \"What is the package version\",\r\n content: \"v1.0.5\",\r\n },\r\n ],\r\n}\r\n\r\nconst IndexPage = () => {\r\n useEffect(() => {\r\n // call the highlightAll() function to style our code blocks\r\n Prism.highlightAll()\r\n }, [])\r\n\r\n return (\r\n \r\n {/*
\r\n \r\n

react-faq-component

\r\n \r\n
*/}\r\n\r\n \r\n \r\n \r\n

More Demos

\r\n
\r\n

View 1 (with animation):

\r\n 
\r\n            \r\n              {``}\r\n            \r\n
\r\n \r\n\r\n

View 2 (with animation, custom icon):

\r\n 
\r\n            \r\n              {``}\r\n            \r\n
\r\n \r\n\r\n

View 3 (with different title colors):

\r\n 
\r\n            \r\n              {``}\r\n            \r\n
\r\n \r\n\r\n

View 4 (with content padding):

\r\n 
\r\n            \r\n              {``}\r\n            \r\n
\r\n \r\n\r\n

View 5 (with custom transition and tabFocus):

\r\n 
\r\n            {``}\r\n
\r\n \r\n\r\n

View 6 (with external row toggle):

\r\n 
\r\n            {`export default function App() {\r\n    const [rows, setRowsOption] = useState(null)\r\n    const [row, setRow] = useState(0)\r\n  \r\n    const expand = () => {\r\n        rows && rows[row].expand()\r\n    }\r\n  \r\n    const close = () => {\r\n        rows && rows[row].close()\r\n    }\r\n\r\n    return (\r\n        
\r\n            \r\n\r\n            
\r\n                \r\n                 setRow(e.target.value)}\r\n                    min=\"0\" max=\"3\" disabled={!rows}\r\n                />\r\n                \r\n\r\n                \r\n            
\r\n        
\r\n    );\r\n}\r\n\r\n            `}\r\n
\r\n \r\n
\r\n \r\n