Merge pull request #97 from vrk-kpa/feature/color-token-depthSecondar…

…yDark3

Feature/color token depth secondary dark3

.styleguidist/colors.md

@@ -25,7 +25,15 @@ import { colorTokens } from '../src/core/theme/colors';
 <Colors colors={colorTokens.depth} />;
 ```
 
-## Hightlight
+### DepthSecondary
+
+```js noeditor
+import { Colors } from '../src/core/Colors/Colors';
+import { colorTokens } from '../src/core/theme/colors';
+<Colors colors={colorTokens.depthSecondary} />;
+```
+
+## Highlight
 
 ```js noeditor
 import { Colors } from '../src/core/Colors/Colors';

.styleguidist/styleguidist.sections.js

@@ -60,7 +60,7 @@ module.exports = {
             return glob.sync(
               path.resolve(
                 __dirname,
-                `../src/core/!(${manuallyAddedComponents})/*.tsx`,
+                `../src/core/!(${manuallyAddedComponents})/**/*.tsx`,
               ),
             );
           },

.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: {

src/core/Button/Button.baseStyles.tsx

@@ -9,36 +9,38 @@ const fullWidthStyles = css`
 `;
 
 const negativeStyles = (theme: ThemeProp) => css`
-  background: none;
-  background-color: ${theme.colors.highlightBase};
-  border: 1px solid ${theme.colors.whiteBase};
-  text-shadow: none;
-
-  &:hover {
-    background: ${theme.gradients.whiteBaseNegative};
-  }
-
-  &:active {
+  &.fi-button--negative {
     background: none;
     background-color: ${theme.colors.highlightBase};
-  }
+    border: 1px solid ${theme.colors.whiteBase};
+    text-shadow: none;
 
-  &[disabled],
-  &:disabled {
-    opacity: 0.5;
-    background: none;
+    &:hover {
+      background: ${theme.gradients.whiteBaseNegative};
+    }
+
+    &:active {
+      background: none;
+      background-color: ${theme.colors.highlightBase};
+    }
+
+    &[disabled],
+    &:disabled {
+      opacity: 0.5;
+      background: none;
+    }
   }
 `;
 
-const secondaryStyles = (theme: ThemeProp) => css`
+const secondary = (theme: ThemeProp) => css`
   color: ${theme.colors.highlightBase};
   background: none;
   background-color: ${theme.colors.whiteBase};
   border: 1px solid ${theme.colors.highlightBase};
   text-shadow: none;
 
   &:hover {
-    background: ${theme.gradients.highlightLight45};
+    background: ${theme.gradients.depthLight26};
   }
 
   &:active {
@@ -56,29 +58,38 @@ const secondaryStyles = (theme: ThemeProp) => css`
   }
 `;
 
+const secondaryStyles = (theme: ThemeProp) => css`
+  &.fi-button--secondary {
+    ${secondary(theme)}
+  }
+`;
+
 const secondaryNoBorderStyles = (theme: ThemeProp) => css`
-  ${secondaryStyles(theme)}
-  border: none;
+  &.fi-button--secondary-noborder {
+    ${secondary(theme)}
+    border: none;
+  }
 `;
 
 const tertiaryStyles = (theme: ThemeProp) => css`
-  ${secondaryStyles(theme)}
-  background: ${theme.colors.highlightLight50};
-  border: none;
+  &.fi-button--tertiary {
+    ${secondary(theme)}
+    background: ${theme.colors.highlightLight50};
+    border: none;
 
-  &:hover {
-    background: ${theme.colors.highlightLight53};
-  }
+    &:hover {
+      background: ${theme.colors.highlightLight53};
+    }
 
-  &:active {
-    background: ${theme.colors.highlightLight53};
+    &:active {
+      background: ${theme.colors.highlightLight53};
+    }
   }
 `;
 
 export const baseStyles = ({
   theme = suomifiTheme,
   fullWidth = false,
-  variant = 'default',
 }: ButtonProps) => css`
   ${element}
   ${fonts.inputSemibold}
@@ -109,10 +120,10 @@ export const baseStyles = ({
   }
 
   ${fullWidth && fullWidthStyles}
-  ${variant === 'negative' && negativeStyles(theme)}
-  ${variant === 'secondary' && secondaryStyles(theme)}
-  ${variant === 'secondary-noborder' && secondaryNoBorderStyles(theme)}
-  ${variant === 'tertiary' && tertiaryStyles(theme)}
+  ${negativeStyles(theme)}
+  ${secondaryStyles(theme)}
+  ${secondaryNoBorderStyles(theme)}
+  ${tertiaryStyles(theme)}
 
   & > .fi-button-icon {
     width: 16px;

src/core/Button/Button.tsx

@@ -3,12 +3,13 @@ import styled from '@emotion/styled';
 import classnames from 'classnames';
 import { ThemeComponent, ThemeProp } from '../theme';
 import { withDefaultTheme } from '../theme/utils';
-import { baseStyles, unStyled } from './Button.baseStyles';
+import { baseStyles } from './Button.baseStyles';
 import {
   Button as CompButton,
   ButtonProps as CompButtonProps,
 } from '../../components/Button/Button';
 import { Icon, IconProps, IconKeys } from '../Icon/Icon';
+import { UnstyledButton } from './UnstyledButton';
 
 type ButtonVariant =
   | 'default'
@@ -50,13 +51,15 @@ const StyledButton = styled(
   ({
     theme,
     fullWidth,
-    variant,
+    variant = 'default',
     className,
     ...passProps
   }: ButtonProps & { right?: boolean }) => (
     <CompButton
       {...passProps}
-      className={classnames(className, baseClassName)}
+      className={classnames(className, baseClassName, {
+        [`${baseClassName}--${variant}`]: variant !== 'default',
+      })}
     />
   ),
 )`
@@ -84,25 +87,6 @@ const iconColor = ({
   return undefined;
 };
 
-const UnstyledButton = styled((props: ButtonProps) => {
-  const {
-    className,
-    fullWidth: dissmissFullWidth,
-    variant: dissmissVariant,
-    icon: dismissIcon,
-    iconRight: dissmissIconRight,
-    ...passProps
-  } = props;
-  return (
-    <CompButton
-      {...passProps}
-      className={classnames(className, baseClassName)}
-    />
-  );
-})`
-  ${props => unStyled(props)}
-`;
-
 class ButtonWithIcon extends Component<ButtonProps> {
   render() {
     const { icon, iconRight, iconProps = {}, ...passProps } = this.props;
@@ -151,7 +135,9 @@ class ButtonWithIcon extends Component<ButtonProps> {
 /**
  * Use for inside Application onClick events.<br />
  * When using Button.secondaryNoborder with other than white background,<br />
- * define styles background color for all needed states (:hover, :active, :disabled)
+ * define styles background color for all needed states (:hover, :active, :disabled)<br /><br />
+ * You can use separate UnstyledButton to get Button without variant styles added by<br />
+ * `import { UnstyledButton } from 'suomifi-ui-components';` or `<Button.unstyled />`.
  */
 export class Button extends Component<ButtonProps> {
   static negative = (props: ButtonProps) => {

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 (
+    <Button {...passProps} className={classnames(className, baseClassName)} />
+  );
+})`
+  ${props => unStyled(props)}
+`;

src/core/Button/__snapshots__/Button.test.tsx.snap

@@ -109,6 +109,117 @@ exports[`calling render with the same component on the same container does not r
   user-select: none;
 }
 
+.emotion-0.fi-button--negative {
+  background: none;
+  background-color: #2A6EBB;
+  border: 1px solid #FFFFFF;
+  text-shadow: none;
+}
+
+.emotion-0.fi-button--negative:hover {
+  background: linear-gradient(-180deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
+}
+
+.emotion-0.fi-button--negative:active {
+  background: none;
+  background-color: #2A6EBB;
+}
+
+.emotion-0.fi-button--negative[disabled],
+.emotion-0.fi-button--negative:disabled {
+  opacity: 0.5;
+  background: none;
+}
+
+.emotion-0.fi-button--secondary {
+  color: #2A6EBB;
+  background: none;
+  background-color: #FFFFFF;
+  border: 1px solid #2A6EBB;
+  text-shadow: none;
+}
+
+.emotion-0.fi-button--secondary:hover {
+  background: linear-gradient(0deg,#ECEDEE 0%,#FFFFFF 100%);
+}
+
+.emotion-0.fi-button--secondary:active {
+  background: none;
+  background-color: #F7FAFD;
+}
+
+.emotion-0.fi-button--secondary[disabled],
+.emotion-0.fi-button--secondary:disabled {
+  color: #A5ACB1;
+  text-shadow: none;
+  background: none;
+  background-color: #F7FAFD;
+  border-color: #A5ACB1;
+}
+
+.emotion-0.fi-button--secondary-noborder {
+  color: #2A6EBB;
+  background: none;
+  background-color: #FFFFFF;
+  border: 1px solid #2A6EBB;
+  text-shadow: none;
+  border: none;
+}
+
+.emotion-0.fi-button--secondary-noborder:hover {
+  background: linear-gradient(0deg,#ECEDEE 0%,#FFFFFF 100%);
+}
+
+.emotion-0.fi-button--secondary-noborder:active {
+  background: none;
+  background-color: #F7FAFD;
+}
+
+.emotion-0.fi-button--secondary-noborder[disabled],
+.emotion-0.fi-button--secondary-noborder:disabled {
+  color: #A5ACB1;
+  text-shadow: none;
+  background: none;
+  background-color: #F7FAFD;
+  border-color: #A5ACB1;
+}
+
+.emotion-0.fi-button--tertiary {
+  color: #2A6EBB;
+  background: none;
+  background-color: #FFFFFF;
+  border: 1px solid #2A6EBB;
+  text-shadow: none;
+  background: #EAF2FA;
+  border: none;
+}
+
+.emotion-0.fi-button--tertiary:hover {
+  background: linear-gradient(0deg,#ECEDEE 0%,#FFFFFF 100%);
+}
+
+.emotion-0.fi-button--tertiary:active {
+  background: none;
+  background-color: #F7FAFD;
+}
+
+.emotion-0.fi-button--tertiary[disabled],
+.emotion-0.fi-button--tertiary:disabled {
+  color: #A5ACB1;
+  text-shadow: none;
+  background: none;
+  background-color: #F7FAFD;
+  border-color: #A5ACB1;
+}
+
+.emotion-0.fi-button--tertiary:hover {
+  background: #F7FAFD;
+}
+
+.emotion-0.fi-button--tertiary:active {
+  background: #F7FAFD;
+}
+
 .emotion-0 > .fi-button-icon {
   width: 16px;
   height: 16px;

src/core/Form/Toggle/Toggle.md

@@ -1,5 +1,7 @@
 ```js
+import { Toggle } from 'suomifi-ui-components';
+
 <Toggle onClick={({ toggleState }) => console.log(toggleState)}>
   Test
-</Toggle>
+</Toggle>;
 ```