Notes

React-Knowledge-Base.txt
==========================

Task: No hardcoded in-built font-family
Good: font-family: ${SC_LIGHT};
Bad: font-family: sc_light
Solution:
 font-family file path : /cib-ui-core/public/assets/fonts
 Create globalFonts file in the shared/styles/globalFonts.js
 globalFonts.js:
// Regular
@font-face{
font-family:"SCSans-Regular";
src:url("fonts/SC-Sans-Web-Regular.eot?#iefix");
src:url("fonts/SC-Sans-Web-Regular.eot?#iefix") format("eot"),
url("fonts/SC-Sans-Web-Regular.woff") format("woff"),
url("fonts/SC-Sans-Web-Regular.ttf") format("truetype"),
url("fonts/SC-Sans-Web-Regular") format("svg");
}
// Bold
@font-face{
font-family:"SCSans-Bold";
src:url("fonts/SC-Sans-Web-Bold.eot?#iefix");
src:url("fonts/SC-Sans-Web-Bold.eot?#iefix") format("eot"),
url("fonts/SC-Sans-Web-Bold.woff") format("woff"),
url("fonts/SC-Sans-Web-Bold.ttf") format("truetype"),
url("fonts/SC-Sans-Web-Bold") format("svg");
}
// Light
@font-face{
font-family:"SCSans-Light";
src:url("fonts/SC-Sans-Web-Light.eot?#iefix");
src:url("fonts/SC-Sans-Web-Light.eot?#iefix") format("eot"),
url("fonts/SC-Sans-Web-Light.woff") format("woff"),
url("fonts/SC-Sans-Web-Light.ttf") format("truetype"),
url("fonts/SC-Sans-Web-Light") format("svg");
}
// Thin
@font-face{
font-family:"SCSans-Thin";
src:url("fonts/SC-Sans-Web-Thin.eot?#iefix");
src:url("fonts/SC-Sans-Web-Thin.eot?#iefix") format("eot"),
url("fonts/SC-Sans-Web-Thin.woff") format("woff"),
url("fonts/SC-Sans-Web-Thin.ttf") format("truetype"),
url("fonts/SC Sans Web-Thin") format("svg");
}

 globalFonts.js: To decrease the no of lines create a function and call the font-family name and url of the fonts. Here below updated globalfonts.js file
// @flow
import { injectGlobal } from 'styled-components'
const font = (name, filename) => {
let url = `/assets/fonts/${filename}`
return `
@font-face{
font-family:"${name}";
src:url("${url}.eot?#iefix");
src:url("${url}.ttf") format("truetype"),
url("${url}.woff") format("woff"),
url("${url}.ttf") format("truetype"),
url("${url}") format("svg");
}
`
}
injectGlobal`
${font('SCSans_Regular', 'SC-Sans-Web-Regular')}
${font('SCSans_Bold', 'SC-Sans-Web-Bold')}
${font('SCSans_Light', 'SC-Sans-Web-Light')}
${font('SCSans_Thin', 'SC-Sans-Web-Thin')}
${font('slick', 'slick')}
${font('scb', 'scb')}

`
 Create one more file for fonts.js and export those fonts.
import './globalFonts'
/**Font Family */
export const SC_REGULAR = 'SCSans_Regular'
export const SC_BOLD = 'SCSans_Bold'
export const SC_LIGHT = 'SCSans_Light'
export const SC_THIN = 'SCSans_Thin'
export const SLICK_ARROW = 'slick'
export const SC_SYMBOLS = 'scb'

Task: Responsive with styled components:

 Adding @media screen and (max-width:480px,min-width:280px){ }
E.g.,
@media screen and (max-width: 480px) {
top: 20px;
left: 0px;
}
 Instead of repeating @media Screen and max-width and min-width, we can define in common file, in this case device width commonly we can specify. Below the code for the common media.js file
// @flow
import { css } from 'styled-components'
const sizes = {
desktop: 80,
tablet: 48,
phone: 20
}

export const mediaMin = Object.keys(sizes).reduce((accumulator, label) => {
const emSize = sizes[label]

accumulator[label] = (...args: Array<any>) => css`
@media (min-width: ${emSize}em) {
${css(...args)};
}
`
return accumulator
}, {})

export const mediaMax = Object.keys(sizes).reduce((accumulator, label) => {
const emSize = sizes[label]
accumulator[label] = (...args: Array<any>) => css`
@media (max-width: ${emSize}em) {
${css(...args)};
}
`
return accumulator
}, {})
 we can define like this in the other files
${mediaMin.desktop`
grid-template-rows: 80% 10% 10%;
grid-template-columns: 65% 35%;
`};
Task: styledcomponents props
 If Button is having disabled condition like below

<SubmitButton
type="submit"
disabled={!isValid || isSubmitting}
onClick={handleSubmit}
>
Css style:

const SubmitButton = styled.button`
${props => props.disabled &&`
background-color:PRIMARY_DISABLED_BUTTON_1 ;
color: ${WHITE_SCALE_COLOR_1};
cursor: disabled`}`