Release 141

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.
 

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
         }
       }
     }

PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,8 @@
+**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
+- [ ]  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

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 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"
@@ -15,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-new
+sed -i -r "s/\"releaseVersion.*/\"releaseVersion\": \"$DEFAULT_RELEASE_VERSION\"/" release-config.json
 
-git add Jenkinsfile-new
+git add release-config.json
 git commit -m "[ci skip] Reset to default release version $DEFAULT_RELEASE_VERSION" || true
 
 git push github HEAD:develop

release-config.json

@@ -0,0 +1,4 @@
+{
+  "defaultReleaseVersion": "patch",
+  "releaseVersion": "major"
+}

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,

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 {

src/domain/Layouts/SectionList/SectionList.examples.md

@@ -8,6 +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.
     </Text>
   </SectionList.Section>
+  <SectionList.UnstyledSection>
+    <Text>
+      This is a unstyled Section, it can be used to display data on the page with correct padding.
+    </Text>
+  </SectionList.UnstyledSection>
   <SectionList.AnnotatedSection
     header='Annotated Section'
     description='This is an annotated section, which enables sections to have a description.'

src/domain/Layouts/SectionList/SectionList.test.tsx

@@ -11,6 +11,9 @@ describe('<SectionList />', () => {
         <SectionList.Section>
           section 1
         </SectionList.Section>
+        <SectionList.UnstyledSection>
+          section 2
+        </SectionList.UnstyledSection>
         <SectionList.AnnotatedSection
           header='Annotated Section'
           description='Annotated Description'

src/domain/Layouts/SectionList/SectionList.tsx

@@ -1,19 +1,20 @@
 import React from 'react'
 import { AnnotatedSection } from './subcomponents/AnnotatedSection'
 import { TitledSection } from './subcomponents/TitledSection'
-import { StyledSection } from './style'
+import { StyledSectionWrapper, StyledSection, StyledUnstyledSection } from './style'
 
 export class SectionList extends React.Component {
   public static Section = StyledSection
+  public static UnstyledSection = StyledUnstyledSection
   public static AnnotatedSection = AnnotatedSection
   public static TitledSection = TitledSection
 
   public render (): JSX.Element | null {
     const { children } = this.props
     return (
-      <div>
+      <StyledSectionWrapper>
         {children}
-      </div>
+      </StyledSectionWrapper>
     )
   }
 }