{"action":"opened","issue":{"url":"https://api.github.com/repos/BBC-News/psammead/issues/32","repository_url":"https://api.github.com/repos/BBC-News/psammead","labels_url":"https://api.github.com/repos/BBC-News/psammead/issues/32/labels{/name}","comments_url":"https://api.github.com/repos/BBC-News/psammead/issues/32/comments","events_url":"https://api.github.com/repos/BBC-News/psammead/issues/32/events","html_url":"https://github.com/BBC-News/psammead/issues/32","id":383561774,"node_id":"MDU6SXNzdWUzODM1NjE3NzQ=","number":32,"title":"GEL Typography, GEL Grid, GEL Spacing and Colour utilities","user":{"login":"sareh","id":3028997,"node_id":"MDQ6VXNlcjMwMjg5OTc=","avatar_url":"https://avatars2.githubusercontent.com/u/3028997?v=4","gravatar_id":"","url":"https://api.github.com/users/sareh","html_url":"https://github.com/sareh","followers_url":"https://api.github.com/users/sareh/followers","following_url":"https://api.github.com/users/sareh/following{/other_user}","gists_url":"https://api.github.com/users/sareh/gists{/gist_id}","starred_url":"https://api.github.com/users/sareh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sareh/subscriptions","organizations_url":"https://api.github.com/users/sareh/orgs","repos_url":"https://api.github.com/users/sareh/repos","events_url":"https://api.github.com/users/sareh/events{/privacy}","received_events_url":"https://api.github.com/users/sareh/received_events","type":"User","site_admin":false},"labels":[{"id":1136481721,"node_id":"MDU6TGFiZWwxMTM2NDgxNzIx","url":"https://api.github.com/repos/BBC-News/psammead/labels/alpha-2","name":"alpha-2","color":"c2ed6d","default":false},{"id":1136498066,"node_id":"MDU6TGFiZWwxMTM2NDk4MDY2","url":"https://api.github.com/repos/BBC-News/psammead/labels/high%20priority","name":"high priority","color":"d62a69","default":false},{"id":1136604672,"node_id":"MDU6TGFiZWwxMTM2NjA0Njcy","url":"https://api.github.com/repos/BBC-News/psammead/labels/refinement%20needed","name":"refinement needed","color":"c62f71","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-11-22T14:36:29Z","updated_at":"2018-11-22T14:36:29Z","closed_at":null,"author_association":"COLLABORATOR","body":"**Is your feature request related to a problem? Please describe.**\r\nWe currently don't have utility files in this repository. We should add them.\r\n\r\n**Describe the solution you'd like**\r\nWe should have a top-level `utilities` directory. \r\n\r\nCurrently in Simorgh, we have this structure\r\nlib\r\n├── constants\r\n│   ├── styles.js\r\n│   └── typography.js\r\n├── globalStyles.js\r\n├── globalStyles.test.js\r\n└── layoutGrid.js\r\nhelpers\r\n├── mediaQueries.js\r\n\r\nImporting this structure here into Psammead is not ideal.  We should create a clear structure and define what each file should contain.\r\n\r\nI propose having these files in the `utilities` directory:\r\n\r\n```\r\ngel-breakpoints.js\r\ngel-spacing.js\r\ngel-grid-styled-components.js\r\ngel-typography-styled-components.js\r\narticles-colours.js\r\narticles-fonts.js\r\narticles-svgs.js\r\narticles-amp-boilerplate.js\r\n```\r\n\r\nHere is the mapping from existing code to new component files: \r\n\r\n`gel-spacing.js` https://github.com/BBC-News/simorgh/blob/latest/src/app/lib/constants/styles.js#L30-L50\r\n`articles-colours.js` https://github.com/BBC-News/simorgh/blob/latest/src/app/lib/constants/styles.js#L4-L17\r\n`articles-fonts.js` https://github.com/BBC-News/simorgh/blob/latest/src/app/lib/constants/styles.js#L19-L28\r\n`articles-svgs.js` https://github.com/BBC-News/simorgh/blob/latest/src/app/lib/constants/styles.js#L83-L89\r\n`articles-amp-boilerplate.js` https://github.com/BBC-News/simorgh/blob/latest/src/app/lib/constants/styles.js#L90-L95\r\n\r\n`gel-breakpoints.js` https://github.com/BBC-News/simorgh/blob/latest/src/app/lib/constants/styles.js#L51-L82 & https://github.com/BBC-News/simorgh/blob/latest/src/app/helpers/mediaQueries.js#L7-L13\r\n\r\n`gel-grid-styled-components.js` https://github.com/BBC-News/simorgh/blob/latest/src/app/lib/layoutGrid.js#L16-L82\r\n`gel-typography-styled-components.js`: https://github.com/BBC-News/simorgh/blob/latest/src/app/lib/constants/typography.js#L12-L73\r\n```\r\n\r\nI would particularly like to draw attention to the last two files - since they export Styled Components, not just constants. \r\n\r\n**Describe alternatives you've considered**\r\nN/A\r\n\r\n**Testing notes**\r\nThe files should have the correct content for the relevant names. \r\n\r\n- [x] Initially labelled with [\"Refinement needed\"](https://github.com/BBC-News/psammead/labels/Refinement%20Needed)\r\n"}}
{"actor":{"display_login":"sareh"}}