{"id":18828633,"url":"https://github.com/bizzabo/external-dev-sections","last_synced_at":"2025-07-25T02:37:37.420Z","repository":{"id":39369406,"uuid":"210608407","full_name":"bizzabo/external-dev-sections","owner":"bizzabo","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-04T11:37:43.000Z","size":9165,"stargazers_count":0,"open_issues_count":24,"forks_count":2,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-05-29T15:17:23.995Z","etag":null,"topics":["frontend","rnd"],"latest_commit_sha":null,"homepage":"","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/bizzabo.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}},"created_at":"2019-09-24T13:21:12.000Z","updated_at":"2021-11-09T20:17:43.000Z","dependencies_parsed_at":"2023-02-02T10:46:46.619Z","dependency_job_id":null,"html_url":"https://github.com/bizzabo/external-dev-sections","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bizzabo/external-dev-sections","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizzabo%2Fexternal-dev-sections","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizzabo%2Fexternal-dev-sections/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizzabo%2Fexternal-dev-sections/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizzabo%2Fexternal-dev-sections/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bizzabo","download_url":"https://codeload.github.com/bizzabo/external-dev-sections/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bizzabo%2Fexternal-dev-sections/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266944991,"owners_count":24010490,"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","status":"online","status_checked_at":"2025-07-25T02:00:09.625Z","response_time":70,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["frontend","rnd"],"created_at":"2024-11-08T01:33:57.106Z","updated_at":"2025-07-25T02:37:37.386Z","avatar_url":"https://github.com/bizzabo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bizzabo Website Sections\n\nThe purpose of this project is to create new themes for Bizzabo website sections.\n\n**Please create a branch with your name and work on that branch. Once done, open a PR to master.**\n\nIn `src` folder you will find a file called `Section.js`.  \nThis file is a template component for the new section theme.  \nThe task is the implement this component.\nInside the `props` object you'll find the relevant data for your section. Please find below section-specific instructions for your your development process.\nInside the `Section.d.ts` file you can find TypeScript interfaces that describe the data structure for the section.\n\nYou can find an example in the `examples` folder.  \nIt contains a real sections that you can take inspiration from.  \nYou can use the css classes that are used in the example sections, but it's not a must.  \nPlease don't edit any other file other then your duplicated `Section.js` file.\n\n### Few important points\n- css should be implemented using `react-jss` module.  \nclasses must be static so use the syntax bellow.\nIn this way, we can still control over the classes in the markup.  \nhttps://cssinjs.org/jss-plugin-nested?v=v10.0.0\n```\nconst styles = {\n  container: {\n    padding: 20,\n    '\u0026:hover': {\n      background: 'blue'\n    },\n    // Add a global .clear class to the container.\n    '\u0026.clear': {\n      clear: 'both'\n    },\n    // Reference a global .button scoped to the container.\n    '\u0026 .button': {\n      background: 'red'\n    },\n    // Use multiple container refs in one selector\n    '\u0026.selected, \u0026.active': {\n      border: '1px solid red'\n    }\n  }\n}\n```\n- `!important` is not allowed.\n- use bootstrap grid and layout classes for positioning.   \nFor example:\n    - Grid classes: col-${size}-${width}  \n    For example: `col-xs-12` to span the block on 100% width. \n    All the available options are in the `bootstrap` docs.\n    options are: \n        - size: `xs`, `sm`, `md`, `lg`,\n        - width: `x between 1-12`. where x is (100 / (12/x) )% of the container.\n    - `padding / margin` classes: ${type}-${direction}-${size}.  \n    For example: `padding-left-small`.  \n    options are: \n        - type: `margin`/`padding`\n        - direction: `left`, `right`, `bottom`, `top`, `horizontal`, `vertical`,\n        - size: `small`, `medium`, `large`\n\n\n## Important classes\nThere are several important classes that must to be included in the section markup:\n- `atom-sectionMain rowHolder` should be on the top level wrapper of the section  \n- `main-app-container custom-space-top custom-space-bottom` another wrapper between the elements and the `rowHolder` wrapper\n- `element-${element.id}` should wrap every element in the section. (for example in the `people` section, `header` and `people` elements).\n- Find another important classes that are section-specific.\n\n## Section-specific instruction\n### People\nA mock for the new `people` section can be found here:\nhttps://projects.invisionapp.com/share/CYUO0Z0MB5G#/screens/391670499_4inRow-1_Copy_6\n\nThe number of contacts to show in each view size:\n- Web view - show up to 4 contacts in a row.\n- Ipad view - show up to 3 contacts in a row.\n- Mobile view - show up to 1 contacts in a row.\n\nContacts should be aligned to the center.\n\nInside the section prop, you will find all the relevant data for the `people` section.\n`people` section elements are `people` and `header`.  \n \n **NOTE:** The naming is a little bit confusing. `people` **section** contains two elements: `people` **element** and `header` **element**  \n\n If `people` element contains `contactListId` prop, show the contacts, overwise, show the placeholder.  \n\n In the `people` element you will find the contacts array.  \n Each `contact` can be a speaker and than he will have a `speakerId` prop. In this case, the contact img should be wrapper with an A tag.  \n\nIf the `contact` doesn't have image url (`thumbnailUrl`), show the placeholder instead.  \n\nWhen hovering over a contact image, there is a zoom effect. You can see it in the mock when hovering the 2nd image from right on the top row.\nPlease animate this effect (we can't mock animation in inVision)\n\nIn the `people` example section, you can find an example of all the use cases described above.\n\n**Important classes**\n- `atom-main` should be on the header text of the section\n- `atom-1` should be on the contact name\n- `atom-2` should be on the contact title\n- `atom-3` should be on the contact company\n\n### Header\ngeneral specs for each of the header themes:\n\nwhen rendering the name of the registerButton check: if it's a custom name, show the custom name else show the selected name. `(registerButton.name === 'custom' ? registerButton.customName : registerButton.name})`\n\nlink to mockups: https://invis.io/UATNTNOWNVZ#/395126714_HeaderThemeWebHalf_Copy\n\n## Create React App\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `npm start`\n\nRuns the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\u003cbr\u003e\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nLaunches the test runner in the interactive watch mode.\u003cbr\u003e\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbizzabo%2Fexternal-dev-sections","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbizzabo%2Fexternal-dev-sections","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbizzabo%2Fexternal-dev-sections/lists"}