From 1851e4c711fdea601f2ca071a8719483904aa815 Mon Sep 17 00:00:00 2001 From: Suchandra Chakraborty Date: Wed, 14 Nov 2018 14:51:09 +1000 Subject: [PATCH 01/12] Added a prop to remove bottom border and bottom padding in sectionList INT-3565 --- .../SectionList/SectionList.examples.md | 36 +++++++++++++++++++ .../Layouts/SectionList/SectionList.tsx | 7 +++- src/domain/Layouts/SectionList/style.ts | 18 +++++++--- 3 files changed, 56 insertions(+), 5 deletions(-) diff --git a/src/domain/Layouts/SectionList/SectionList.examples.md b/src/domain/Layouts/SectionList/SectionList.examples.md index a43c02f76..ce9d03b72 100644 --- a/src/domain/Layouts/SectionList/SectionList.examples.md +++ b/src/domain/Layouts/SectionList/SectionList.examples.md @@ -34,3 +34,39 @@ sub-components that provide responsive styling between mobile and desktop. ``` + +SectionLists without bottom border and bottom padding. +```jsx + + + + This is a Section, it can be used to display data on the page with correct padding and will automatically + display a border below itself if another section is below it in the section list and you are on desktop. + + + + + As is the same with a Section, content can be passed into an Annotated Section which will then be displayed + inside the section. + + + Action 1, + + ]} + > + + For action items, the user can pass in an array of elements to display, such as buttons. In mobile view, + if the action items are set to full width, they will stack on top of each other. + + + +``` diff --git a/src/domain/Layouts/SectionList/SectionList.tsx b/src/domain/Layouts/SectionList/SectionList.tsx index de3c2d25a..0dc2a5994 100644 --- a/src/domain/Layouts/SectionList/SectionList.tsx +++ b/src/domain/Layouts/SectionList/SectionList.tsx @@ -3,7 +3,12 @@ import { AnnotatedSection } from './subcomponents/AnnotatedSection' import { TitledSection } from './subcomponents/TitledSection' import { StyledSection } from './style' -export class SectionList extends React.Component { +export interface ISectionListProps { + /** Remove bottom border and bottom padding */ + removeBottomBorderPadding?: boolean +} + +export class SectionList extends React.Component { public static Section = StyledSection public static AnnotatedSection = AnnotatedSection public static TitledSection = TitledSection diff --git a/src/domain/Layouts/SectionList/style.ts b/src/domain/Layouts/SectionList/style.ts index b1fe70c69..7a5706fec 100644 --- a/src/domain/Layouts/SectionList/style.ts +++ b/src/domain/Layouts/SectionList/style.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components' +import styled, {css} from 'styled-components' import { Variables } from '../../../common' import { SectionDescription } from './subcomponents/SectionDescription' @@ -7,7 +7,11 @@ const verticalPaddingDesktop = 32 const horizontalPaddingMobile = 16 const verticalPaddingMobile = 24 -const SectionBorder = styled.div` +interface IStyledSectionProps { + removeBottomBorderPadding?: boolean +} + +const SectionBorder = styled.div` @media only screen and (min-width: ${Variables.Breakpoint.breakpointTablet}px) { border-bottom: 1px solid ${Variables.Color.n300}; @@ -17,7 +21,7 @@ const SectionBorder = styled.div` } ` -const StyledSection = styled(SectionBorder)` +const StyledSection = styled(SectionBorder)` @media only screen and (max-width: ${Variables.Breakpoint.breakpointTablet - 1}px) { padding: ${verticalPaddingMobile}px ${horizontalPaddingMobile}px; } @@ -27,6 +31,11 @@ const StyledSection = styled(SectionBorder)` margin-right: ${horizontalMarginDesktop}px; padding-top: ${verticalPaddingDesktop}px; padding-bottom: ${verticalPaddingDesktop}px; + + ${(props: IStyledSectionProps) => props.removeBottomBorderPadding && css` + border-bottom: 0; + padding-bottom: 0; + `} } ` @@ -112,5 +121,6 @@ export { StyledTitledSection, StyledTitledSectionHeaderRow, StyledTitledSectionDescription, - StyledTitledSectionBody + StyledTitledSectionBody, + IStyledSectionProps } From 4bf0724c8631cd68684602e5536b9d28c38c58b3 Mon Sep 17 00:00:00 2001 From: Suchandra Chakraborty Date: Wed, 14 Nov 2018 16:13:25 +1000 Subject: [PATCH 02/12] Updated to add UnSttyled INT-3565 --- .../SectionList/SectionList.examples.md | 34 +- .../Layouts/SectionList/SectionList.test.tsx | 3 + .../Layouts/SectionList/SectionList.tsx | 14 +- .../__snapshots__/SectionList.test.tsx.snap | 1669 +++++++++-------- src/domain/Layouts/SectionList/style.ts | 29 +- 5 files changed, 878 insertions(+), 871 deletions(-) diff --git a/src/domain/Layouts/SectionList/SectionList.examples.md b/src/domain/Layouts/SectionList/SectionList.examples.md index ce9d03b72..fbbca7ffa 100644 --- a/src/domain/Layouts/SectionList/SectionList.examples.md +++ b/src/domain/Layouts/SectionList/SectionList.examples.md @@ -8,42 +8,12 @@ sub-components that provide responsive styling between mobile and desktop. display a border below itself if another section is below it in the section list and you are on desktop. - - - As is the same with a Section, content can be passed into an Annotated Section which will then be displayed - inside the section. - - - Action 1, - - ]} - > - - For action items, the user can pass in an array of elements to display, such as buttons. In mobile view, - if the action items are set to full width, they will stack on top of each other. - - - -``` - -SectionLists without bottom border and bottom padding. -```jsx - - + This is a Section, it can be used to display data on the page with correct padding and will automatically display a border below itself if another section is below it in the section list and you are on desktop. - + ', () => { section 1 + + section 2 + { +export class SectionList extends React.Component { public static Section = StyledSection + public static UnStyledSection = UnStyledSection public static AnnotatedSection = AnnotatedSection public static TitledSection = TitledSection public render (): JSX.Element | null { const { children } = this.props return ( -
+
{children} -
+ ) } } diff --git a/src/domain/Layouts/SectionList/__snapshots__/SectionList.test.tsx.snap b/src/domain/Layouts/SectionList/__snapshots__/SectionList.test.tsx.snap index 5205c85d8..6021882dd 100644 --- a/src/domain/Layouts/SectionList/__snapshots__/SectionList.test.tsx.snap +++ b/src/domain/Layouts/SectionList/__snapshots__/SectionList.test.tsx.snap @@ -2,50 +2,55 @@ exports[` should render a section list with a titled section without props 1`] = ` @media only screen and (min-width:640px) { - .c1 { + .c0 { + margin-left: 24px; + margin-right: 24px; + } +} + +@media only screen and (min-width:640px) { + .c2 { border-bottom: 1px solid #E1E6EB; } - .c1:last-child { + .c2:last-child { border-bottom: 0; } } @media only screen and (min-width:640px) { - .c0 { - margin-left: 24px; - margin-right: 24px; + .c1 { padding-top: 32px; padding-bottom: 32px; } } @media only screen and (max-width:639px) { - .c2 { + .c3 { padding: 24px 16px 12px; } } @media only screen and (max-width:639px) { - .c3 { + .c4 { padding-bottom: 12px; } } @media only screen and (min-width:640px) { - .c3 { + .c4 { margin-right: 24px; } } @media only screen and (min-width:640px) { - .c4 { + .c5 { padding-top: 1.5rem; } } @media only screen and (max-width:639px) { - .c4 { + .c5 { background-color: #FAFBFC; border-top: 1px solid #E1E6EB; border-bottom: 1px solid #E1E6EB; @@ -54,155 +59,164 @@ exports[` should render a section list with a titled section with } -
- - - -
+
+ + + - -
- -
- -
- + +
-
- -
- - -
- - -
- - + + +
+ + +
+ + -
- -
- -
- -
- - +
+ +
+ +
+ +
+ + -
- -
- section 1 -
- -
- -
- -
- - - -
+
+ +
+ section 1 +
+ +
+ +
+ +
+ + + + + `; exports[` should render a section list with an annotated section without props 1`] = ` @media only screen and (min-width:640px) { - .c1 { + .c0 { + margin-left: 24px; + margin-right: 24px; + } +} + +@media only screen and (min-width:640px) { + .c2 { border-bottom: 1px solid #E1E6EB; } - .c1:last-child { + .c2:last-child { border-bottom: 0; } } @media only screen and (max-width:639px) { - .c0 { + .c1 { padding: 24px 16px; } } @media only screen and (min-width:640px) { - .c0 { - margin-left: 24px; - margin-right: 24px; + .c1 { padding-top: 32px; padding-bottom: 32px; } } @media only screen and (min-width:640px) { - .c4 { + .c5 { margin-left: 24px; } } @media only screen and (max-width:639px) { - .c4 { + .c5 { background-color: #FAFBFC; border-top: 1px solid #E1E6EB; border-bottom: 1px solid #E1E6EB; @@ -211,113 +225,115 @@ exports[` should render a section list with an annotated section } @media only screen and (max-width:639px) { - .c3 { + .c4 { padding: 24px 16px; } } @media only screen and (min-width:640px) { - .c3 { + .c4 { margin-right: 24px; } } @media only screen and (min-width:640px) { - .c2 { - margin-left: 24px; - margin-right: 24px; + .c3 { padding-top: 32px; padding-bottom: 32px; } } -
- - -
- section 1 -
- - - + +
+ section 1 +
+ + + + + - -
- -
- - -
- - -
- - + + +
+ + +
+ + -
- -
- section 2 -
- -
- -
- -
- - - -
+
+ +
+ section 2 +
+ +
+ +
+ + + + + + + `; exports[` should render a sectionList 1`] = ` -.c6 { +.c8 { -webkit-transition: color .25s ease-out; transition: color .25s ease-out; font-size: 14px; @@ -328,21 +344,21 @@ exports[` should render a sectionList 1`] = ` letter-spacing: normal; } -.c6, -.c6:link, -.c6:visited { +.c8, +.c8:link, +.c8:visited { color: #432DF3; } -.c6:hover { +.c8:hover { color: #2512B3; } -.c6:active { +.c8:active { color: #0F0080; } -.c4 { +.c6 { font-size: 18px; line-height: 24px; -webkit-letter-spacing: -.02em; @@ -353,7 +369,7 @@ exports[` should render a sectionList 1`] = ` font-weight: 600; } -.c5 { +.c7 { font-size: 14px; line-height: 20px; -webkit-letter-spacing: normal; @@ -365,7 +381,7 @@ exports[` should render a sectionList 1`] = ` display: block; } -.c11 { +.c13 { font-size: 18px; line-height: 24px; -webkit-letter-spacing: -.02em; @@ -376,7 +392,7 @@ exports[` should render a sectionList 1`] = ` font-weight: 600; } -.c12 { +.c14 { font-size: 14px; line-height: 20px; -webkit-letter-spacing: normal; @@ -389,38 +405,49 @@ exports[` should render a sectionList 1`] = ` } @media only screen and (min-width:640px) { - .c1 { + .c0 { + margin-left: 24px; + margin-right: 24px; + } +} + +@media only screen and (min-width:640px) { + .c2 { border-bottom: 1px solid #E1E6EB; } - .c1:last-child { + .c2:last-child { border-bottom: 0; } } @media only screen and (max-width:639px) { - .c0 { + .c3 { + padding: 0px 16px; + } +} + +@media only screen and (max-width:639px) { + .c1 { padding: 24px 16px; } } @media only screen and (min-width:640px) { - .c0 { - margin-left: 24px; - margin-right: 24px; + .c1 { padding-top: 32px; padding-bottom: 32px; } } @media only screen and (min-width:640px) { - .c7 { + .c9 { margin-left: 24px; } } @media only screen and (max-width:639px) { - .c7 { + .c9 { background-color: #FAFBFC; border-top: 1px solid #E1E6EB; border-bottom: 1px solid #E1E6EB; @@ -429,61 +456,57 @@ exports[` should render a sectionList 1`] = ` } @media only screen and (max-width:639px) { - .c3 { + .c5 { padding: 24px 16px; } } @media only screen and (min-width:640px) { - .c3 { + .c5 { margin-right: 24px; } } @media only screen and (min-width:640px) { - .c2 { - margin-left: 24px; - margin-right: 24px; + .c4 { padding-top: 32px; padding-bottom: 32px; } } @media only screen and (min-width:640px) { - .c8 { - margin-left: 24px; - margin-right: 24px; + .c10 { padding-top: 32px; padding-bottom: 32px; } } @media only screen and (max-width:639px) { - .c9 { + .c11 { padding: 24px 16px 12px; } } @media only screen and (max-width:639px) { - .c10 { + .c12 { padding-bottom: 12px; } } @media only screen and (min-width:640px) { - .c10 { + .c12 { margin-right: 24px; } } @media only screen and (min-width:640px) { - .c13 { + .c15 { padding-top: 1.5rem; } } @media only screen and (max-width:639px) { - .c13 { + .c15 { background-color: #FAFBFC; border-top: 1px solid #E1E6EB; border-bottom: 1px solid #E1E6EB; @@ -492,69 +515,68 @@ exports[` should render a sectionList 1`] = ` } -
- - -
- section 1 -
- - - +
+ section 1 +
+ + + +
+ section 2 +
+ + + + - -
- -
- +
- should render a sectionList 1`] = ` } linkText="Annotated Link" > -
- - -

- Annotated Section -

- - - - + Annotated Section + + + + - - Annotated Description - - - - - + Annotated Description + + + + - - - Annotated Link - - - - -
- - -
- - + Annotated Link + + + + +
+ + +
+ + -
- -
- section 2 -
- -
- -
- -
- - - - - Action 1 - , - , - ] - } - description="Titled Description" - header="Titled Section" - > - - -
+ +
+ section 2 +
+ +
+ + + + + + + + + Action 1 + , + , + ] + } + description="Titled Description" + header="Titled Section" + > + + - -
- -
- -
- + +
-
- -
- - -
- - -

- Titled Section -

- - - - + Titled Section + + + + - - Titled Description - - - -
- - -
- - + Titled Description + + + +
+ + +
+ + -
- - - + + - -
- -
- -
- -
- - + Action 2 + + + + + + + + + + + -
- -
- section 3 -
- -
- - - - - - - - +
+ +
+ section 3 +
+ +
+ + + + + + + + + `; exports[` should render sectionList items with no children 1`] = ` -.c6 { +.c7 { -webkit-transition: color .25s ease-out; transition: color .25s ease-out; font-size: 14px; @@ -885,21 +919,21 @@ exports[` should render sectionList items with no children 1`] = letter-spacing: normal; } -.c6, -.c6:link, -.c6:visited { +.c7, +.c7:link, +.c7:visited { color: #432DF3; } -.c6:hover { +.c7:hover { color: #2512B3; } -.c6:active { +.c7:active { color: #0F0080; } -.c4 { +.c5 { font-size: 18px; line-height: 24px; -webkit-letter-spacing: -.02em; @@ -910,7 +944,7 @@ exports[` should render sectionList items with no children 1`] = font-weight: 600; } -.c5 { +.c6 { font-size: 14px; line-height: 20px; -webkit-letter-spacing: normal; @@ -922,7 +956,7 @@ exports[` should render sectionList items with no children 1`] = display: block; } -.c10 { +.c11 { font-size: 18px; line-height: 24px; -webkit-letter-spacing: -.02em; @@ -933,7 +967,7 @@ exports[` should render sectionList items with no children 1`] = font-weight: 600; } -.c11 { +.c12 { font-size: 14px; line-height: 20px; -webkit-letter-spacing: normal; @@ -946,140 +980,133 @@ exports[` should render sectionList items with no children 1`] = } @media only screen and (min-width:640px) { - .c1 { + .c0 { + margin-left: 24px; + margin-right: 24px; + } +} + +@media only screen and (min-width:640px) { + .c2 { border-bottom: 1px solid #E1E6EB; } - .c1:last-child { + .c2:last-child { border-bottom: 0; } } @media only screen and (max-width:639px) { - .c0 { + .c1 { padding: 24px 16px; } } @media only screen and (min-width:640px) { - .c0 { - margin-left: 24px; - margin-right: 24px; + .c1 { padding-top: 32px; padding-bottom: 32px; } } @media only screen and (max-width:639px) { - .c3 { + .c4 { padding: 24px 16px; } } @media only screen and (min-width:640px) { - .c3 { + .c4 { margin-right: 24px; } } @media only screen and (min-width:640px) { - .c2 { - margin-left: 24px; - margin-right: 24px; + .c3 { padding-top: 32px; padding-bottom: 32px; } } @media only screen and (min-width:640px) { - .c7 { - margin-left: 24px; - margin-right: 24px; + .c8 { padding-top: 32px; padding-bottom: 32px; } } @media only screen and (max-width:639px) { - .c8 { + .c9 { padding: 24px 16px 12px; } } @media only screen and (max-width:639px) { - .c9 { + .c10 { padding-bottom: 12px; } } @media only screen and (min-width:640px) { - .c9 { + .c10 { margin-right: 24px; } } -
- - -
- - - +
+ + + + + - -
- -
- +
- should render sectionList items with no children 1`] = } linkText="Annotated Link" > -
- - -

- Annotated Section -

- - - - + Annotated Section + + + + - - Annotated Description - - - - - + Annotated Description + + + + - - - Annotated Link - - - - -
- - -
- -
- -
- - - - - Action 1 - , - , - ] - } - description="Titled Description" - header="Titled Section" - > - - -
+ Annotated Link + + + + +
+ + +
+ +
+ +
+ + + + + Action 1 + , + , + ] + } + description="Titled Description" + header="Titled Section" + > + + - -
- -
- -
- + +
-
- -
- - -
- - -

- Titled Section -

- - - - + Titled Section + + + + - - Titled Description - - - -
- - -
- - + Titled Description + + + +
+ + +
+ + -
- - - + + - -
- -
- -
- -
- -
- - - - - - + + + + + + + + + + + + + + + + + + `; diff --git a/src/domain/Layouts/SectionList/style.ts b/src/domain/Layouts/SectionList/style.ts index 7a5706fec..a2fa00bd5 100644 --- a/src/domain/Layouts/SectionList/style.ts +++ b/src/domain/Layouts/SectionList/style.ts @@ -7,9 +7,12 @@ const verticalPaddingDesktop = 32 const horizontalPaddingMobile = 16 const verticalPaddingMobile = 24 -interface IStyledSectionProps { - removeBottomBorderPadding?: boolean -} +const Section = styled.div` + @media only screen and (min-width: ${Variables.Breakpoint.breakpointTablet}px) { + margin-left: ${horizontalMarginDesktop}px; + margin-right: ${horizontalMarginDesktop}px; + } +` const SectionBorder = styled.div` @media only screen and (min-width: ${Variables.Breakpoint.breakpointTablet}px) { @@ -21,21 +24,20 @@ const SectionBorder = styled.div` } ` +const UnStyledSection = styled.div` + @media only screen and (max-width: ${Variables.Breakpoint.breakpointTablet - 1}px) { + padding: 0px ${horizontalPaddingMobile}px; + } +` + const StyledSection = styled(SectionBorder)` @media only screen and (max-width: ${Variables.Breakpoint.breakpointTablet - 1}px) { padding: ${verticalPaddingMobile}px ${horizontalPaddingMobile}px; } @media only screen and (min-width: ${Variables.Breakpoint.breakpointTablet}px) { - margin-left: ${horizontalMarginDesktop}px; - margin-right: ${horizontalMarginDesktop}px; padding-top: ${verticalPaddingDesktop}px; padding-bottom: ${verticalPaddingDesktop}px; - - ${(props: IStyledSectionProps) => props.removeBottomBorderPadding && css` - border-bottom: 0; - padding-bottom: 0; - `} } ` @@ -64,8 +66,6 @@ const StyledAnnotatedSectionDescription = styled(SectionDescription)` const StyledAnnotatedSection = styled(SectionBorder)` @media only screen and (min-width: ${Variables.Breakpoint.breakpointTablet}px) { - margin-left: ${horizontalMarginDesktop}px; - margin-right: ${horizontalMarginDesktop}px; padding-top: ${verticalPaddingDesktop}px; padding-bottom: ${verticalPaddingDesktop}px; } @@ -73,8 +73,6 @@ const StyledAnnotatedSection = styled(SectionBorder)` const StyledTitledSection = styled(SectionBorder)` @media only screen and (min-width: ${Variables.Breakpoint.breakpointTablet}px) { - margin-left: ${horizontalMarginDesktop}px; - margin-right: ${horizontalMarginDesktop}px; padding-top: ${verticalPaddingDesktop}px; padding-bottom: ${verticalPaddingDesktop}px; } @@ -122,5 +120,6 @@ export { StyledTitledSectionHeaderRow, StyledTitledSectionDescription, StyledTitledSectionBody, - IStyledSectionProps + Section, + UnStyledSection } From d8334fc321823fc97c8b84da5f7ac5b5ba1fd629 Mon Sep 17 00:00:00 2001 From: Eric Chan Date: Wed, 14 Nov 2018 16:13:38 +1000 Subject: [PATCH 03/12] [INT-3510] No more Jenkinsfile-new --- docker/bin/deploy-npm | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docker/bin/deploy-npm b/docker/bin/deploy-npm index c10cb4a37..a09af0c72 100755 --- a/docker/bin/deploy-npm +++ b/docker/bin/deploy-npm @@ -15,9 +15,9 @@ git push --tags github git pull --rebase github develop -sed -i -r "s/final def RELEASE_VERSION.*/final def RELEASE_VERSION = '$DEFAULT_RELEASE_VERSION'/" Jenkinsfile-new +sed -i -r "s/final def RELEASE_VERSION.*/final def RELEASE_VERSION = '$DEFAULT_RELEASE_VERSION'/" Jenkinsfile -git add Jenkinsfile-new +git add Jenkinsfile git commit -m "[ci skip] Reset to default release version $DEFAULT_RELEASE_VERSION" || true git push github HEAD:develop From 230825036389da9cec4e62d3fe592c8d99790050 Mon Sep 17 00:00:00 2001 From: Suchandra Chakraborty Date: Wed, 14 Nov 2018 16:16:55 +1000 Subject: [PATCH 04/12] Minor update INT-3565 --- src/domain/Layouts/SectionList/SectionList.examples.md | 3 +-- src/domain/Layouts/SectionList/style.ts | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/domain/Layouts/SectionList/SectionList.examples.md b/src/domain/Layouts/SectionList/SectionList.examples.md index fbbca7ffa..b3a783260 100644 --- a/src/domain/Layouts/SectionList/SectionList.examples.md +++ b/src/domain/Layouts/SectionList/SectionList.examples.md @@ -10,8 +10,7 @@ sub-components that provide responsive styling between mobile and desktop. - This is a Section, it can be used to display data on the page with correct padding and will automatically - display a border below itself if another section is below it in the section list and you are on desktop. + This is a unstyled Section, it can be used to display data on the page with correct padding. Date: Wed, 14 Nov 2018 16:23:57 +1000 Subject: [PATCH 05/12] Create PULL_REQUEST_TEMPLATE.md --- PULL_REQUEST_TEMPLATE.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 PULL_REQUEST_TEMPLATE.md diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 000000000..db09d99a7 --- /dev/null +++ b/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,7 @@ +**The following MUST be checked prior to approval. If not relevant to your MR, remove the line from your description.** +- [ ] Examples have been provided for any new components or functionality +- [ ] The `styleguide.config.js` has been updated to show the component in the ui-component page +- [ ] Test Coverage for any new or updated functionality +- [ ] Updated components have been tested locally in lapis and SPA and work as expected +- [ ] This PR has been tagged with PATCH, MINOR, or MAJOR. +- [ ] The component has data-component-type and data-component-context attributes following the standard From a535cf949fe4e715522f86770eccf9326c8152d8 Mon Sep 17 00:00:00 2001 From: Suchandra Chakraborty Date: Wed, 14 Nov 2018 16:28:35 +1000 Subject: [PATCH 06/12] Names updated INT-3565 --- src/domain/Layouts/SectionList/SectionList.examples.md | 4 ++-- src/domain/Layouts/SectionList/SectionList.test.tsx | 4 ++-- src/domain/Layouts/SectionList/SectionList.tsx | 8 ++++---- src/domain/Layouts/SectionList/style.ts | 8 ++++---- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/domain/Layouts/SectionList/SectionList.examples.md b/src/domain/Layouts/SectionList/SectionList.examples.md index b3a783260..75d60c409 100644 --- a/src/domain/Layouts/SectionList/SectionList.examples.md +++ b/src/domain/Layouts/SectionList/SectionList.examples.md @@ -8,11 +8,11 @@ sub-components that provide responsive styling between mobile and desktop. display a border below itself if another section is below it in the section list and you are on desktop. - + This is a unstyled Section, it can be used to display data on the page with correct padding. - + ', () => { section 1 - + section 2 - + + {children} - + ) } } diff --git a/src/domain/Layouts/SectionList/style.ts b/src/domain/Layouts/SectionList/style.ts index 50ed1d851..6d726e8f3 100644 --- a/src/domain/Layouts/SectionList/style.ts +++ b/src/domain/Layouts/SectionList/style.ts @@ -7,7 +7,7 @@ const verticalPaddingDesktop = 32 const horizontalPaddingMobile = 16 const verticalPaddingMobile = 24 -const Section = styled.div` +const StyledSectionWrapper = styled.div` @media only screen and (min-width: ${Variables.Breakpoint.breakpointTablet}px) { margin-left: ${horizontalMarginDesktop}px; margin-right: ${horizontalMarginDesktop}px; @@ -24,7 +24,7 @@ const SectionBorder = styled.div` } ` -const UnStyledSection = styled.div` +const StyledUnstyledSection = styled.div` @media only screen and (max-width: ${Variables.Breakpoint.breakpointTablet - 1}px) { padding: 0px ${horizontalPaddingMobile}px; } @@ -120,6 +120,6 @@ export { StyledTitledSectionHeaderRow, StyledTitledSectionDescription, StyledTitledSectionBody, - Section, - UnStyledSection + StyledSectionWrapper, + StyledUnstyledSection } From 330dcaab44beffe4ab67d50377bf313b02ad0c7f Mon Sep 17 00:00:00 2001 From: Eric Chan Date: Wed, 14 Nov 2018 16:49:27 +1000 Subject: [PATCH 07/12] [INT-3510] Added doc for the npm deploy process --- docker/bin/deploy-npm | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docker/bin/deploy-npm b/docker/bin/deploy-npm index a09af0c72..4c5d56219 100755 --- a/docker/bin/deploy-npm +++ b/docker/bin/deploy-npm @@ -1,5 +1,17 @@ #!/bin/sh -xe +### +# Deploy to NPM +# +# The whole deployment process is as following +# 1. Build project which compiles the code and type definitions +# 2. `npm version` which will create a new tag for deployment +# 3. `npm publish` which will push files to NPM and publish a new version +# 4. Push the new tag to GitHub +# 5. Update the release version variable in Jenkinsfile if it is different than the default version +# 6. Push new changes to develop +### + yarn build git config user.email "continuous.integration@intellihr.com.au" From 3bea71fe534b25d5fe711afdb8a88be9357bc00b Mon Sep 17 00:00:00 2001 From: Eric Chan Date: Wed, 14 Nov 2018 16:56:09 +1000 Subject: [PATCH 08/12] [INT-3510] Start using proper versioning --- CONTRIBUTING.md | 28 ++++++++++++++++++++++------ Jenkinsfile | 8 ++++++-- PULL_REQUEST_TEMPLATE.md | 1 + docker/bin/deploy-npm | 6 +++--- release-config.json | 4 ++++ 5 files changed, 36 insertions(+), 11 deletions(-) create mode 100644 release-config.json diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 86dcb99a5..c32e7a25f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -9,6 +9,7 @@ This file contains a set of guidelines for contributing to UI-Components. Guidel ## Table of Contents [Code Standard](#code-standard) + * [Version Control](#version-control) * [Folder Structure](#folder-structure) * [Structure Overview](#structure-overview) * [Structure Explained](#structure-explained) @@ -19,6 +20,21 @@ This file contains a set of guidelines for contributing to UI-Components. Guidel ## Code Standard +### Version Control + +Before you create a PR, +Please update `releaseVersion` in `release-config.json` +if the version is lower than your changes + +Available Versions: + +* `major`: Changes with backward incompatibility +* `minor`: Extra functionality with backward compatible changes +* `patch`: Bug fixes or improvements with backward compatible changes + +When a new version is released by Jenkins, +`releaseVersion` will be automatically reset to `defaultReleaseVersion`. + ### Folder Structure #### Structure Overview @@ -69,7 +85,7 @@ If your file is related to a single component, you should instead group it toget Two type objects are provided from common. `Props` contains enums for standard prop types (e.g. `Size` or `PositionXY`). `Variables` contains enums for the design system variables, like `Color` and `ZIndex`. - + ```typescript import { Props, Variables } from '../../common' ``` @@ -121,27 +137,27 @@ styled-components is *highly encouraged*, but there are several reasons to prefe legacy classes to style older pages which are not using javascript. If your component is likely to need to be used on old `.blade.php` pages, then you can export both a js-specific class and a global classname as follows: - + ```scss %my-component { // Your properties here color: red; } - + :local(.my-component) { @extend %%my-component; } - + .global-my-component-class { @extend %%my-component; } ``` - + 2. If your component relies on a third-party library which uses its own css. You should never mix css/scss and styled components in the same component. Ideally, look at the css for the library and see if you can recreate it yourself, but don't try to override properties using styled-components, and use `.scss` if there are no other options. - + Aside: **NEVER** use class names from foundation or legacy sass to style your component. All styles for a component should be self-contained. diff --git a/Jenkinsfile b/Jenkinsfile index 3894850eb..114bf4dcc 100644 --- a/Jenkinsfile +++ b/Jenkinsfile @@ -6,11 +6,12 @@ import net.intellihr.CodeAnalysis def helper = new net.intellihr.Helper(this) def analyse = new net.intellihr.CodeAnalysis(this) +def config def skipBuild = false -final def DEFAULT_RELEASE_VERSION = 'prerelease' -final def RELEASE_VERSION = 'prerelease' +def DEFAULT_RELEASE_VERSION +def RELEASE_VERSION pipeline { agent any @@ -24,6 +25,9 @@ pipeline { steps { script { skipBuild = helper.shouldSkipBuild() + config = readJSON(file: 'release-config.json') + DEFAULT_RELEASE_VERSION = config.defaultReleaseVersion + RELEASE_VERSION = config.releaseVersion } } } diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md index db09d99a7..cb3eb5141 100644 --- a/PULL_REQUEST_TEMPLATE.md +++ b/PULL_REQUEST_TEMPLATE.md @@ -1,4 +1,5 @@ **The following MUST be checked prior to approval. If not relevant to your MR, remove the line from your description.** +- [ ] Update `releaseVersion` in `release-config.json` if it is lower - [ ] Examples have been provided for any new components or functionality - [ ] The `styleguide.config.js` has been updated to show the component in the ui-component page - [ ] Test Coverage for any new or updated functionality diff --git a/docker/bin/deploy-npm b/docker/bin/deploy-npm index 4c5d56219..6707c31f5 100755 --- a/docker/bin/deploy-npm +++ b/docker/bin/deploy-npm @@ -8,7 +8,7 @@ # 2. `npm version` which will create a new tag for deployment # 3. `npm publish` which will push files to NPM and publish a new version # 4. Push the new tag to GitHub -# 5. Update the release version variable in Jenkinsfile if it is different than the default version +# 5. Update the release version if it is different than the default version # 6. Push new changes to develop ### @@ -27,9 +27,9 @@ git push --tags github git pull --rebase github develop -sed -i -r "s/final def RELEASE_VERSION.*/final def RELEASE_VERSION = '$DEFAULT_RELEASE_VERSION'/" Jenkinsfile +sed -i -r "s/\"releaseVersion.*/\"releaseVersion\": \"$DEFAULT_RELEASE_VERSION\"/" release-config.json -git add Jenkinsfile +git add release-config.json git commit -m "[ci skip] Reset to default release version $DEFAULT_RELEASE_VERSION" || true git push github HEAD:develop diff --git a/release-config.json b/release-config.json new file mode 100644 index 000000000..3fa4dc4aa --- /dev/null +++ b/release-config.json @@ -0,0 +1,4 @@ +{ + "defaultReleaseVersion": "patch", + "releaseVersion": "patch" +} From 8b55cae0d2b4cafc287748c9e1d35a2b5322ff5d Mon Sep 17 00:00:00 2001 From: Michael Devenish Date: Wed, 14 Nov 2018 15:43:05 +1000 Subject: [PATCH 09/12] Make brick work with with text in more cases. [INT-3558] --- src/common/sass/variables.ts | 40 ---------- src/common/types/props.ts | 11 --- .../Typographies/Brick/Brick.examples.md | 76 +++++++------------ src/domain/Typographies/Brick/Brick.test.tsx | 17 +++-- src/domain/Typographies/Brick/Brick.tsx | 28 +++---- .../Brick/__snapshots__/Brick.test.tsx.snap | 36 +++------ src/domain/Typographies/Brick/style.ts | 68 ++++++++++++++--- 7 files changed, 114 insertions(+), 162 deletions(-) diff --git a/src/common/sass/variables.ts b/src/common/sass/variables.ts index 7e9de06f1..0eaf92320 100644 --- a/src/common/sass/variables.ts +++ b/src/common/sass/variables.ts @@ -110,46 +110,6 @@ namespace Variables { fwHeavy = 600 } - export interface IFunctionalColorProps { - textColor: Variables.Color - backgroundColor: Variables.Color - } - - export const functionalColors: { [i in Props.FunctionalColor]: IFunctionalColorProps } = { - [Props.FunctionalColor.Alert]: { - textColor: Variables.Color.r600, - backgroundColor: Variables.Color.r100 - }, - [Props.FunctionalColor.Success]: { - textColor: Variables.Color.g600, - backgroundColor: Variables.Color.g100 - }, - [Props.FunctionalColor.Warning]: { - textColor: Variables.Color.o600, - backgroundColor: Variables.Color.o100 - }, - [Props.FunctionalColor.Primary]: { - textColor: Variables.Color.i600, - backgroundColor: Variables.Color.i100 - }, - [Props.FunctionalColor.Neutral]: { - textColor: Variables.Color.n800, - backgroundColor: Variables.Color.n200 - }, - [Props.FunctionalColor.Secondary]: { - textColor: Variables.Color.b600, - backgroundColor: Variables.Color.b100 - }, - [Props.FunctionalColor.Highlight]: { - textColor: Variables.Color.c600, - backgroundColor: Variables.Color.c100 - }, - [Props.FunctionalColor.Dark]: { - textColor: Variables.Color.n200, - backgroundColor: Variables.Color.n700 - } - } - export enum LineHeight { lhXSmall = 18, lhSmall = 20, diff --git a/src/common/types/props.ts b/src/common/types/props.ts index d4fde970c..47aba7285 100644 --- a/src/common/types/props.ts +++ b/src/common/types/props.ts @@ -53,17 +53,6 @@ namespace Props { Record = 'record', RecordName = 'record_name' } - - export enum FunctionalColor { - Alert = 'alert', - Success = 'success', - Warning = 'warning', - Primary = 'primary', - Neutral = 'neutral', - Secondary = 'secondary', - Highlight = 'highlight', - Dark = 'dark' - } } export { diff --git a/src/domain/Typographies/Brick/Brick.examples.md b/src/domain/Typographies/Brick/Brick.examples.md index ac398e0fa..421be7bef 100644 --- a/src/domain/Typographies/Brick/Brick.examples.md +++ b/src/domain/Typographies/Brick/Brick.examples.md @@ -2,44 +2,14 @@ ```jsx
- - - - - - - - - - - - - - + Alert!!! + Success + Warning! + Primary + Neutral (default) + Secondary + Highlight + Dark
``` @@ -49,45 +19,51 @@
+ > + X-Small +
+ > + Small +
+ > + Body (default) +
+ > + Heading +
+ > + Display +
+ > + display-large +
``` diff --git a/src/domain/Typographies/Brick/Brick.test.tsx b/src/domain/Typographies/Brick/Brick.test.tsx index 7ad19cf30..1b555c25c 100644 --- a/src/domain/Typographies/Brick/Brick.test.tsx +++ b/src/domain/Typographies/Brick/Brick.test.tsx @@ -7,8 +7,9 @@ describe('', () => { it('should render a Brick with default values', () => { const wrapper = shallow( + > + Test + ) expect(wrapper).toMatchSnapshot() @@ -17,9 +18,10 @@ describe('', () => { it('should render a Brick with the alert color', () => { const wrapper = shallow( + color={Brick.Color.Alert} + > + Test + ) expect(wrapper).toMatchSnapshot() @@ -28,9 +30,10 @@ describe('', () => { it('should render a Brick with the heading typography', () => { const wrapper = shallow( + > + Test + ) expect(wrapper).toMatchSnapshot() diff --git a/src/domain/Typographies/Brick/Brick.tsx b/src/domain/Typographies/Brick/Brick.tsx index 56f872c13..2920b13cb 100644 --- a/src/domain/Typographies/Brick/Brick.tsx +++ b/src/domain/Typographies/Brick/Brick.tsx @@ -1,13 +1,10 @@ import React from 'react' -import { Props, Variables } from '../../../common' -import { BrickWrapper } from './style' -import { Text } from '../Text' +import { Props } from '../../../common' +import { BrickColor, BrickWrapper } from './style' export interface IBrickProps { - /** Text to show inside the Brick */ - text: string /** Color of the brick */ - color?: Props.FunctionalColor + color?: BrickColor /** Specify the type of typography to use */ typographyType?: Props.TypographyType /** Extra classes to apply */ @@ -17,35 +14,30 @@ export interface IBrickProps { } export class Brick extends React.PureComponent { + public static Color = BrickColor public static defaultProps: Partial = { - color: Props.FunctionalColor.Neutral, + color: BrickColor.Neutral, typographyType: Props.TypographyType.Body } public render (): JSX.Element { const { - text, color, typographyType, className, - componentContext + componentContext, + children } = this.props - const brickColors = Variables.functionalColors[color!] - return ( - - {text} - + {children} ) } diff --git a/src/domain/Typographies/Brick/__snapshots__/Brick.test.tsx.snap b/src/domain/Typographies/Brick/__snapshots__/Brick.test.tsx.snap index e3a3d047f..722980920 100644 --- a/src/domain/Typographies/Brick/__snapshots__/Brick.test.tsx.snap +++ b/src/domain/Typographies/Brick/__snapshots__/Brick.test.tsx.snap @@ -2,48 +2,30 @@ exports[` should render a Brick with default values 1`] = ` - - Test - + Test `; exports[` should render a Brick with the alert color 1`] = ` - - Test - + Test `; exports[` should render a Brick with the heading typography 1`] = ` - - Test - + Test `; diff --git a/src/domain/Typographies/Brick/style.ts b/src/domain/Typographies/Brick/style.ts index 20771fb60..7548202fc 100644 --- a/src/domain/Typographies/Brick/style.ts +++ b/src/domain/Typographies/Brick/style.ts @@ -1,19 +1,69 @@ -import styled, { css } from 'styled-components' -import { Variables } from '../../../common' +import styled, { css, StyledFunction } from 'styled-components' +import { Props, Variables } from '../../../common' +import { styleForTypographyType } from '../services/textStyles' +import { Anchor } from '../../Internals/Anchor' +import React from 'react' +import { ITextLinkProps } from '../../Links/TextLink' +import { IBrickProps } from './Brick' -export interface IBrickWrapperProps { - color: Variables.Color +export enum BrickColor { + Alert = 'alert', + Success = 'success', + Warning = 'warning', + Primary = 'primary', + Neutral = 'neutral', + Secondary = 'secondary', + Highlight = 'highlight', + Dark = 'dark' } -export const BrickWrapper = styled.span` +const colors = { + [BrickColor.Alert]: { + textColor: Variables.Color.r600, + backgroundColor: Variables.Color.r100 + }, + [BrickColor.Success]: { + textColor: Variables.Color.g600, + backgroundColor: Variables.Color.g100 + }, + [BrickColor.Warning]: { + textColor: Variables.Color.o600, + backgroundColor: Variables.Color.o100 + }, + [BrickColor.Primary]: { + textColor: Variables.Color.i600, + backgroundColor: Variables.Color.i100 + }, + [BrickColor.Neutral]: { + textColor: Variables.Color.n800, + backgroundColor: Variables.Color.n200 + }, + [BrickColor.Secondary]: { + textColor: Variables.Color.b600, + backgroundColor: Variables.Color.b100 + }, + [BrickColor.Highlight]: { + textColor: Variables.Color.c600, + backgroundColor: Variables.Color.c100 + }, + [BrickColor.Dark]: { + textColor: Variables.Color.n200, + backgroundColor: Variables.Color.n700 + } +} + + +export const BrickWrapper = styled.span` border-radius: ${Variables.Style.borderRadius}px; padding: 2px 4px; - display: inline-block; word-break: break-word; - ${(props: IBrickWrapperProps) => { - return css` - background: ${props.color}; + ${(props: IBrickProps) => styleForTypographyType(props.typographyType)} + ${(props: IBrickProps) => { + const color = colors[props.color || BrickColor.Neutral] + return css ` + background: ${color.backgroundColor}; + color: ${color.textColor}; ` }} ` From c750131979fdad7d722a0e72a85293e96a334557 Mon Sep 17 00:00:00 2001 From: Michael Devenish Date: Wed, 14 Nov 2018 16:16:41 +1000 Subject: [PATCH 10/12] Fix linting. [INT-3558] --- src/domain/Typographies/Brick/style.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/domain/Typographies/Brick/style.ts b/src/domain/Typographies/Brick/style.ts index 7548202fc..2b2ead4fb 100644 --- a/src/domain/Typographies/Brick/style.ts +++ b/src/domain/Typographies/Brick/style.ts @@ -52,7 +52,6 @@ const colors = { } } - export const BrickWrapper = styled.span` border-radius: ${Variables.Style.borderRadius}px; padding: 2px 4px; From 456dfc1b94e39a7760d174f6ccb83960fc81856e Mon Sep 17 00:00:00 2001 From: Michael Devenish Date: Thu, 15 Nov 2018 11:53:44 +1000 Subject: [PATCH 11/12] Remove circular import and use new versioning principle. [INT-3558] --- release-config.json | 2 +- src/domain/Typographies/Brick/style.ts | 21 ++++++++++++--------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/release-config.json b/release-config.json index 3fa4dc4aa..fabd84f02 100644 --- a/release-config.json +++ b/release-config.json @@ -1,4 +1,4 @@ { "defaultReleaseVersion": "patch", - "releaseVersion": "patch" + "releaseVersion": "major" } diff --git a/src/domain/Typographies/Brick/style.ts b/src/domain/Typographies/Brick/style.ts index 2b2ead4fb..2d72f70d8 100644 --- a/src/domain/Typographies/Brick/style.ts +++ b/src/domain/Typographies/Brick/style.ts @@ -1,10 +1,13 @@ -import styled, { css, StyledFunction } from 'styled-components' +import styled, { css } from 'styled-components' import { Props, Variables } from '../../../common' import { styleForTypographyType } from '../services/textStyles' -import { Anchor } from '../../Internals/Anchor' -import React from 'react' -import { ITextLinkProps } from '../../Links/TextLink' -import { IBrickProps } from './Brick' + +export interface IBrickWrapperProps { + /** Color of the brick */ + color?: BrickColor + /** Specify the type of typography to use */ + typographyType?: Props.TypographyType +} export enum BrickColor { Alert = 'alert', @@ -52,14 +55,14 @@ const colors = { } } -export const BrickWrapper = styled.span` +export const BrickWrapper = styled.span` border-radius: ${Variables.Style.borderRadius}px; padding: 2px 4px; word-break: break-word; - ${(props: IBrickProps) => styleForTypographyType(props.typographyType)} - ${(props: IBrickProps) => { - const color = colors[props.color || BrickColor.Neutral] + ${(props: IBrickWrapperProps) => styleForTypographyType(props.typographyType)} + ${(props: IBrickWrapperProps) => { + const color = colors[props.color!] return css ` background: ${color.backgroundColor}; color: ${color.textColor}; From abf317a1f7ba591018e2405c6cad68df2c50d443 Mon Sep 17 00:00:00 2001 From: Michael Devenish Date: Thu, 15 Nov 2018 13:34:43 +1000 Subject: [PATCH 12/12] Cleanup the style file. [INT-3558] --- src/domain/Typographies/Brick/Brick.tsx | 4 ++-- src/domain/Typographies/Brick/style.ts | 18 ++++++++++++------ 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/domain/Typographies/Brick/Brick.tsx b/src/domain/Typographies/Brick/Brick.tsx index 2920b13cb..bae7857d6 100644 --- a/src/domain/Typographies/Brick/Brick.tsx +++ b/src/domain/Typographies/Brick/Brick.tsx @@ -31,9 +31,9 @@ export class Brick extends React.PureComponent { return ( diff --git a/src/domain/Typographies/Brick/style.ts b/src/domain/Typographies/Brick/style.ts index 2d72f70d8..6054573a1 100644 --- a/src/domain/Typographies/Brick/style.ts +++ b/src/domain/Typographies/Brick/style.ts @@ -2,14 +2,14 @@ import styled, { css } from 'styled-components' import { Props, Variables } from '../../../common' import { styleForTypographyType } from '../services/textStyles' -export interface IBrickWrapperProps { +interface IBrickWrapperProps { /** Color of the brick */ - color?: BrickColor + color: BrickColor /** Specify the type of typography to use */ - typographyType?: Props.TypographyType + typographyType: Props.TypographyType } -export enum BrickColor { +enum BrickColor { Alert = 'alert', Success = 'success', Warning = 'warning', @@ -55,17 +55,23 @@ const colors = { } } -export const BrickWrapper = styled.span` +const BrickWrapper = styled.span` border-radius: ${Variables.Style.borderRadius}px; padding: 2px 4px; word-break: break-word; ${(props: IBrickWrapperProps) => styleForTypographyType(props.typographyType)} ${(props: IBrickWrapperProps) => { - const color = colors[props.color!] + const color = colors[props.color] return css ` background: ${color.backgroundColor}; color: ${color.textColor}; ` }} ` + +export { + BrickColor, + BrickWrapper, + IBrickWrapperProps +}