{"id":20603517,"url":"https://github.com/aaronconway7/dropdown-select","last_synced_at":"2025-09-07T00:43:24.167Z","repository":{"id":105975464,"uuid":"370134870","full_name":"aaronconway7/dropdown-select","owner":"aaronconway7","description":"UX Engineer tech test for Passfort.","archived":false,"fork":false,"pushed_at":"2021-05-26T11:49:47.000Z","size":828,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-17T02:11:59.619Z","etag":null,"topics":["create-react-app","react","react-testing-library","storybook","styled-components"],"latest_commit_sha":null,"homepage":"https://dropdown-select.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronconway7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-23T18:59:51.000Z","updated_at":"2021-05-26T12:28:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"e10ce6c5-78fb-45c4-bb3b-5821c67e1825","html_url":"https://github.com/aaronconway7/dropdown-select","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronconway7%2Fdropdown-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronconway7%2Fdropdown-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronconway7%2Fdropdown-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronconway7%2Fdropdown-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronconway7","download_url":"https://codeload.github.com/aaronconway7/dropdown-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242249030,"owners_count":20096781,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["create-react-app","react","react-testing-library","storybook","styled-components"],"created_at":"2024-11-16T09:17:36.213Z","updated_at":"2025-03-06T16:39:51.880Z","avatar_url":"https://github.com/aaronconway7.png","language":"JavaScript","readme":"# Dropdown Select ⬇️\n\n\u003e UX Engineer tech test for [Passfort](https://www.passfort.com/). Instructions for the assignment can be found @ `UX_Engineer_tech_test.pdf` in the root directory.\n\n![Screenshot](public/dropdown-select.png)\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/7cd3d92b-0f1c-4c07-bb4f-d4e784fefeec/deploy-status)](https://app.netlify.com/sites/dropdown-select/deploys)\n\nFor ease, to view the dropdown component I have hosted this app @ https://dropdown-select.netlify.app so you can quickly see it in action with the given `assignees.json` data.\n\n- You can find the component in `components/Dropdown.js`\n- You can find the tests in `components/Dropdown.test.js`\n- You can find the matching storybook in `components/Dropdown.stories.js`\n\n## Useful Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.\n\n### `yarn storybook`\n\nI saw in the job description that working with storybook was desirable. Although I haven't used it much in the past I thought it'd be cool to give it a go for this project!\n\n## Usage\n\n### Basic\n```js\nimport React from 'react';\n\nconst App = () =\u003e {\n    const [selected, setSelected] = useState()\n\n    return (\n        \u003cdiv\u003e\n            \u003cDropdown\n                label={'Assign Item:'}\n                options={[\n                    { name: 'Andy', id: 1 },\n                    { name: 'George', id: 2 },\n                    { name: 'Clive', id: 3 },\n                    { name: 'Peter', id: 4 },\n                    { name: 'Cleatus', id: 5 },\n                ]}\n                onChange={(option) =\u003e setSelected(option)}\n                value={selected}\n            /\u003e\n        \u003c/div\u003e\n    )\n}\n\nexport default App\n```\n\n### Props\n- `label` *String* - The text to appear above the dropdown.\n- `options` *Array* - The options you want to display in the dropdown. Must be an array of objects containing `name` and `id` keys.\n- `onChange` *Func* - Subscribe to change events. When a new option is selected, value object is passed through.\n- `selectedBg` *String* - The background colour of the individual selected in the dropdown list.\n- `value` *Object* - Value of the dropdown. Must be an object containing `name` and `id` keys.\n\n## Testing\nFor my tests I used [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/). I made the following passing tests:\n\n1. Dropdown renders ☑️\n2. Label appears correctly when supplied as a prop ☑️\n3. The list of options a appear when the main dropdown button is initially clicked on ☑️\n4. There is search functionality when the length of the options array supplied as a prop is \u003e= 10 ☑️\n5. There is no search functionality when the length of the options array supplied as a prop is \u003c 10 ☑️\n6. When an option is selected, the main drodown button shows this value correctly ☑️\n7. The list of options closes if it is open and the main dropdown button is clicked ☑️\n8. The options supplied as a prop are rendered correctly ☑️\n9. Search functionality works as expected ☑️\n\n## ⏲️ Further Work\n- Close the dropdown when clicking outside of dropdown/esc key press\n- Could have also made it such that the dropdown dispaly was `absolute` and therefore would not effect the position of other elements on the page\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronconway7%2Fdropdown-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronconway7%2Fdropdown-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronconway7%2Fdropdown-select/lists"}