From c2583356841e06d4b95fa1940dec4559f557a203 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Tue, 21 May 2019 09:01:37 +0300 Subject: [PATCH 01/10] Add depthSecondaryDark3 and depthLight26 color tokens --- src/core/theme/colors.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/theme/colors.ts b/src/core/theme/colors.ts index f6a519419..885126ee0 100644 --- a/src/core/theme/colors.ts +++ b/src/core/theme/colors.ts @@ -16,7 +16,9 @@ export const colorTokens = { depth: { depthBase: '#A5ACB1', depthSecondary: '#F0F6FF', + depthSecondaryDark3: '#E0EDFF', depthLight30: '#F7F7F8', + depthLight26: '#ECEDEE', depthLight13: '#C8CDD0', depthDark27: '#5F686D', }, @@ -81,7 +83,7 @@ export const gradients = { whiteBaseNegative: `linear-gradient(-180deg, ${alphaHex(0.1)( colors.whiteBase, )} 0%, ${alphaHex(0)(colors.whiteBase)} 100%)`, - highlightLight45: `linear-gradient(0deg, ${colors.highlightLight45} 0%, ${ + depthLight26: `linear-gradient(0deg, ${colors.depthLight26} 0%, ${ colors.whiteBase } 100%)`, }; From e111ab75dfdff93b28d86aaa5b8a8288354abec8 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Tue, 21 May 2019 09:21:19 +0300 Subject: [PATCH 02/10] Separate secondary palette at colors page --- .styleguidist/colors.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/.styleguidist/colors.md b/.styleguidist/colors.md index dc5a650a5..387c60b86 100644 --- a/.styleguidist/colors.md +++ b/.styleguidist/colors.md @@ -25,7 +25,15 @@ import { colorTokens } from '../src/core/theme/colors'; ; ``` -## Hightlight +### DepthSecondary + +```js noeditor +import { Colors } from '../src/core/Colors/Colors'; +import { colorTokens } from '../src/core/theme/colors'; +; +``` + +## Highlight ```js noeditor import { Colors } from '../src/core/Colors/Colors'; From a888057f3be02d23582aac787360edb99612e05b Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Tue, 21 May 2019 09:54:59 +0300 Subject: [PATCH 03/10] Fix styleguide sections pattern of not getting from sub dirs --- .styleguidist/styleguidist.sections.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.styleguidist/styleguidist.sections.js b/.styleguidist/styleguidist.sections.js index f29eabea9..57ed5b08f 100644 --- a/.styleguidist/styleguidist.sections.js +++ b/.styleguidist/styleguidist.sections.js @@ -60,7 +60,7 @@ module.exports = { return glob.sync( path.resolve( __dirname, - `../src/core/!(${manuallyAddedComponents})/*.tsx`, + `../src/core/!(${manuallyAddedComponents})/**/*.tsx`, ), ); }, From 234b6dd09f88c1e09306c2abe188b4a29f260d3b Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Tue, 21 May 2019 09:55:21 +0300 Subject: [PATCH 04/10] Change styleguide style to be more friendly on bigger resolutions --- .styleguidist/styleguidist.styles.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/.styleguidist/styleguidist.styles.js b/.styleguidist/styleguidist.styles.js index 4a24d89dc..cde44601e 100644 --- a/.styleguidist/styleguidist.styles.js +++ b/.styleguidist/styleguidist.styles.js @@ -20,6 +20,13 @@ module.exports = { '@global li > a[href*="Components/Primitive/"] + ul, li > a[href*="Components/Patterns/"] + ul': { display: 'none', }, + content: { + maxWidth: '1200px', + margin: '0', + '@media (min-width: 1432px)': { + marginLeft: '32px', + }, + }, }, ReactComponent: { root: { From 629d65410d91829f4342f43950c2db17fcb20ca3 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Tue, 21 May 2019 09:56:20 +0300 Subject: [PATCH 05/10] Reorder color tokens and separate depthSecondary for styleguide presentation --- src/core/theme/colors.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/core/theme/colors.ts b/src/core/theme/colors.ts index 885126ee0..4941b03c9 100644 --- a/src/core/theme/colors.ts +++ b/src/core/theme/colors.ts @@ -14,21 +14,23 @@ export const colorTokens = { brandBase: '#00357A', }, depth: { + depthDark27: '#5F686D', depthBase: '#A5ACB1', - depthSecondary: '#F0F6FF', - depthSecondaryDark3: '#E0EDFF', depthLight30: '#F7F7F8', depthLight26: '#ECEDEE', depthLight13: '#C8CDD0', - depthDark27: '#5F686D', + }, + depthSecondary: { + depthSecondaryDark3: '#E0EDFF', + depthSecondary: '#F0F6FF', }, hightlight: { + highlightDark9: '#235A9A', highlightBase: '#2A6EBB', highlightLight4: '#2E78CC', highlightLight45: '#D5E4F6', highlightLight50: '#EAF2FA', highlightLight53: '#F7FAFD', - highlightDark9: '#235A9A', }, accent: { accentBase: '#E97025', @@ -47,6 +49,7 @@ export const colors = { ...colorTokens.base, ...colorTokens.brand, ...colorTokens.depth, + ...colorTokens.depthSecondary, ...colorTokens.hightlight, ...colorTokens.accent, ...colorTokens.trafficlights, From 9f14aa00a864ee89ee5a4b7e3b508428d213701b Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Tue, 21 May 2019 09:56:46 +0300 Subject: [PATCH 06/10] Use different gradient for Secondary Button hover --- src/core/Button/Button.baseStyles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/Button/Button.baseStyles.tsx b/src/core/Button/Button.baseStyles.tsx index b7c4e286c..56e680f2a 100644 --- a/src/core/Button/Button.baseStyles.tsx +++ b/src/core/Button/Button.baseStyles.tsx @@ -38,7 +38,7 @@ const secondaryStyles = (theme: ThemeProp) => css` text-shadow: none; &:hover { - background: ${theme.gradients.highlightLight45}; + background: ${theme.gradients.depthLight26}; } &:active { From d26b0e0dd2c54a601cb9eac1b6d2c341f3c2a50f Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Tue, 21 May 2019 09:57:05 +0300 Subject: [PATCH 07/10] Fix Toggle markdown examplepage --- src/core/Form/Toggle/Toggle.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/Form/Toggle/Toggle.md b/src/core/Form/Toggle/Toggle.md index 1cd86b1e8..51bd5eb00 100644 --- a/src/core/Form/Toggle/Toggle.md +++ b/src/core/Form/Toggle/Toggle.md @@ -1,5 +1,7 @@ ```js +import { Toggle } from 'suomifi-ui-components'; + console.log(toggleState)}> Test - +; ``` From f3ee8d4b18ec9e0b8d78ee0df48b52e00c2fd9a8 Mon Sep 17 00:00:00 2001 From: Joonas Kallunki Date: Tue, 21 May 2019 11:47:20 +0300 Subject: [PATCH 08/10] Refactor UnstyledButton to separate file and export --- src/core/Button/Button.tsx | 20 +------------------- src/core/Button/UnstyledButton.tsx | 16 ++++++++++++++++ src/index.tsx | 1 + 3 files changed, 18 insertions(+), 19 deletions(-) create mode 100644 src/core/Button/UnstyledButton.tsx diff --git a/src/core/Button/Button.tsx b/src/core/Button/Button.tsx index ffbff4f9f..0da5a88dc 100644 --- a/src/core/Button/Button.tsx +++ b/src/core/Button/Button.tsx @@ -9,6 +9,7 @@ import { ButtonProps as CompButtonProps, } from '../../components/Button/Button'; import { Icon, IconProps, IconKeys } from '../Icon/Icon'; +import { UnstyledButton } from './UnstyledButton'; type ButtonVariant = | 'default' @@ -84,25 +85,6 @@ const iconColor = ({ return undefined; }; -const UnstyledButton = styled((props: ButtonProps) => { - const { - className, - fullWidth: dissmissFullWidth, - variant: dissmissVariant, - icon: dismissIcon, - iconRight: dissmissIconRight, - ...passProps - } = props; - return ( - - ); -})` - ${props => unStyled(props)} -`; - class ButtonWithIcon extends Component { render() { const { icon, iconRight, iconProps = {}, ...passProps } = this.props; diff --git a/src/core/Button/UnstyledButton.tsx b/src/core/Button/UnstyledButton.tsx new file mode 100644 index 000000000..9edd14a5e --- /dev/null +++ b/src/core/Button/UnstyledButton.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import styled from '@emotion/styled'; +import classnames from 'classnames'; +import { unStyled } from './Button.baseStyles'; +import { Button, ButtonProps } from '../../components/Button/Button'; + +const baseClassName = 'fi-button'; + +export const UnstyledButton = styled((props: ButtonProps) => { + const { className, ...passProps } = props; + return ( +