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 new file mode 100644 index 000000000..cb3eb5141 --- /dev/null +++ b/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 diff --git a/docker/bin/deploy-npm b/docker/bin/deploy-npm index c10cb4a37..6707c31f5 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 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 diff --git a/release-config.json b/release-config.json new file mode 100644 index 000000000..fabd84f02 --- /dev/null +++ b/release-config.json @@ -0,0 +1,4 @@ +{ + "defaultReleaseVersion": "patch", + "releaseVersion": "major" +} 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/Layouts/SectionList/SectionList.examples.md b/src/domain/Layouts/SectionList/SectionList.examples.md index a43c02f76..75d60c409 100644 --- a/src/domain/Layouts/SectionList/SectionList.examples.md +++ b/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. + + + 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/__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 b1fe70c69..6d726e8f3 100644 --- a/src/domain/Layouts/SectionList/style.ts +++ b/src/domain/Layouts/SectionList/style.ts @@ -7,7 +7,14 @@ const verticalPaddingDesktop = 32 const horizontalPaddingMobile = 16 const verticalPaddingMobile = 24 -const SectionBorder = styled.div` +const StyledSectionWrapper = 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) { border-bottom: 1px solid ${Variables.Color.n300}; @@ -17,14 +24,18 @@ const SectionBorder = styled.div` } ` -const StyledSection = styled(SectionBorder)` +const StyledUnstyledSection = 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; } @@ -55,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; } @@ -64,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; } @@ -112,5 +119,7 @@ export { StyledTitledSection, StyledTitledSectionHeaderRow, StyledTitledSectionDescription, - StyledTitledSectionBody + StyledTitledSectionBody, + StyledSectionWrapper, + StyledUnstyledSection } 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..bae7857d6 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..6054573a1 100644 --- a/src/domain/Typographies/Brick/style.ts +++ b/src/domain/Typographies/Brick/style.ts @@ -1,19 +1,77 @@ import styled, { css } from 'styled-components' -import { Variables } from '../../../common' +import { Props, Variables } from '../../../common' +import { styleForTypographyType } from '../services/textStyles' -export interface IBrickWrapperProps { - color: Variables.Color +interface IBrickWrapperProps { + /** Color of the brick */ + color: BrickColor + /** Specify the type of typography to use */ + typographyType: Props.TypographyType } -export const BrickWrapper = styled.span` +enum BrickColor { + Alert = 'alert', + Success = 'success', + Warning = 'warning', + Primary = 'primary', + Neutral = 'neutral', + Secondary = 'secondary', + Highlight = 'highlight', + Dark = 'dark' +} + +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 + } +} + +const BrickWrapper = styled.span` border-radius: ${Variables.Style.borderRadius}px; padding: 2px 4px; - display: inline-block; word-break: break-word; + ${(props: IBrickWrapperProps) => styleForTypographyType(props.typographyType)} ${(props: IBrickWrapperProps) => { - return css` - background: ${props.color}; + const color = colors[props.color] + return css ` + background: ${color.backgroundColor}; + color: ${color.textColor}; ` }} ` + +export { + BrickColor, + BrickWrapper, + IBrickWrapperProps +}