logicalclocks
diff --git a/‎package-lock.json
+17,906-19,428 b/‎package-lock.json
+17,906-19,428
diff --git a/‎package.json
+10-4 b/‎package.json
+10-4
diff --git a/‎src/components/badges/dot.tsx
+2-4 b/‎src/components/badges/dot.tsx
+2-4
diff --git a/‎src/components/callout/callout.stories.tsx
+74 b/‎src/components/callout/callout.stories.tsx
+74
diff --git a/‎src/components/callout/callout.styles.ts
+13 b/‎src/components/callout/callout.styles.ts
+13
diff --git a/‎src/components/callout/index.tsx
+45 b/‎src/components/callout/index.tsx
+45
diff --git a/‎src/components/card/index.tsx
+14-5 b/‎src/components/card/index.tsx
+14-5
diff --git a/‎src/components/icon-button/index.tsx
+1-1 b/‎src/components/icon-button/index.tsx
+1-1
diff --git a/‎src/components/icon/index.tsx
+23 b/‎src/components/icon/index.tsx
+23
diff --git a/‎src/components/input/index.tsx
+1-1 b/‎src/components/input/index.tsx
+1-1
diff --git a/‎src/components/label/index.tsx
+5-2 b/‎src/components/label/index.tsx
+5-2
diff --git a/‎src/components/label/label.styles.ts
+1 b/‎src/components/label/label.styles.ts
+1
diff --git a/‎src/components/list/container/index.tsx
-1 b/‎src/components/list/container/index.tsx
-1
diff --git a/‎src/components/navigation/container/index.tsx
+2-1 b/‎src/components/navigation/container/index.tsx
+2-1
diff --git a/‎src/components/navigation/container/navigation.styles.ts
+4 b/‎src/components/navigation/container/navigation.styles.ts
+4
diff --git a/‎src/components/navigation/context/navigation.provider.tsx
+6 b/‎src/components/navigation/context/navigation.provider.tsx
+6
@@ -1,6 +1,6 @@
 {
   "name": "@logicalclocks/quartz",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Logical Clocks Design System Library",
   "author": "logicalclocks",
   "license": "MIT",
@@ -44,6 +44,7 @@
     "@testing-library/user-event": "^7.2.1",
     "@types/jest": "^25.1.4",
     "@types/node": "^12.12.38",
+    "@types/rc-slider": "^8.6.6",
     "@types/react": "^16.9.27",
     "@types/react-dom": "^16.9.7",
     "@types/rebass": "^4.0.6",
@@ -54,6 +55,7 @@
     "babel-loader": "^8.1.0",
     "chromatic": "^5.1.0",
     "cross-env": "^7.0.2",
+    "emotion-theming": "^10.0.27",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-typescript": "^10.0.0",
     "eslint-config-prettier": "^6.7.0",
@@ -71,10 +73,9 @@
     "microbundle-crl": "^0.13.10",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.0.4",
-    "rebass": "^4.0.7",
-    "emotion-theming": "^10.0.27",
     "react-is": "^16.13.1",
     "react-scripts": "^3.4.1",
+    "rebass": "^4.0.7",
     "typescript": "^3.7.5"
   },
   "files": [
@@ -87,6 +88,11 @@
     "@fortawesome/free-solid-svg-icons": "^5.14.0",
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@rebass/forms": "^4.0.6",
-    "@styled-system/css": "^5.1.5"
+    "@styled-system/css": "^5.1.5",
+    "events": "^3.2.0",
+    "rc-slider": "^9.5.3",
+    "react-spring": "^8.0.27",
+    "rc-tooltip": "^4.2.3",
+    "react-table": "^7.6.0"
   }
 }
@@ -8,7 +8,7 @@ import TooltipPositions from '../tooltip/positions';
 
 export interface DotProps extends Omit<FlexProps, 'css'> {
   mainText: string;
-  variant?: 'green' | 'black' | 'info';
+  variant?: 'green' | 'black';
   secondaryText?: string;
   position?: TooltipPositions;
 }
@@ -40,9 +40,7 @@ const Dot: FC<DotProps> = ({
         borderRadius: '50%',
         userSelect: 'none',
       }}
-    >
-      {variant === 'info' && 'i'}
-    </Flex>
+    />
   </Tooltip>
 );
 
 
@@ -0,0 +1,74 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { action } from '@storybook/addon-actions';
+import { Box } from 'rebass';
+import Callout, { ICalloutProps, CalloutTypes } from './index';
+import Button from '../button';
+
+export default {
+  title: 'Quartz/Callout',
+  component: Callout,
+} as Meta;
+
+const argTypes = {
+  type: {
+    control: {
+      type: 'select',
+      options: CalloutTypes,
+    },
+    type: {
+      required: true,
+      summary: 'valid, error, warning, neutral',
+    },
+  },
+  content: {
+    control: {
+      type: 'text',
+    },
+    type: {
+      required: true,
+      summary: 'string',
+    },
+  },
+  cta: {
+    control: {
+      type: 'object',
+    },
+    type: {
+      required: false,
+      summary: 'component',
+    },
+  },
+};
+
+export const Default: Story<ICalloutProps> = (props) => (
+  <Box width="700px">
+    <Callout {...props} />
+  </Box>
+);
+
+Default.args = {
+  type: CalloutTypes.valid,
+  content: 'lorem ipsum',
+  cta: (
+    <Button intent="secondary" onClick={action('onClick')}>
+      Secondary
+    </Button>
+  ),
+};
+
+Default.argTypes = argTypes;
+
+export const WithoutCTA: Story<ICalloutProps> = (props) => (
+  <Box width="700px">
+    <Callout {...props} />
+  </Box>
+);
+
+WithoutCTA.args = {
+  type: CalloutTypes.valid,
+  content: 'lorem ipsum',
+};
+
+WithoutCTA.argTypes = argTypes;
@@ -0,0 +1,13 @@
+import { SxStyleProp } from 'rebass';
+
+export const iconStyles = {
+  width: '12px',
+  height: '12px',
+};
+
+export default {
+  py: '8px',
+  px: '8px',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+} as SxStyleProp;
@@ -0,0 +1,45 @@
+import React, { FC } from 'react';
+import { Box, Flex } from 'rebass';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Labeling from '../typography/labeling';
+import styles, { iconStyles } from './callout.styles';
+
+export enum CalloutTypes {
+  valid = 'valid',
+  error = 'error',
+  warning = 'warning',
+  neutral = 'neutral',
+}
+
+export interface ICalloutProps {
+  type: CalloutTypes;
+  content: string;
+  cta?: React.ReactNode;
+}
+
+const Callout: FC<ICalloutProps> = ({
+  type,
+  content,
+  cta,
+  ...props
+}: ICalloutProps) => (
+  <Flex
+    width="100%"
+    variant={`callout.${type}`}
+    sx={{ borderLeftWidth: cta ? '2px' : 0, ...styles }}
+    {...props}
+  >
+    <Flex justifyContent="space-between" alignItems="center">
+      <Box>
+        <FontAwesomeIcon icon="info-circle" style={iconStyles} />
+      </Box>
+      <Box ml="8px" as="pre">
+        <Labeling bold>{content}</Labeling>
+      </Box>
+    </Flex>
+
+    {cta && <Box>{cta}</Box>}
+  </Flex>
+);
+
+export default Callout;
@@ -1,14 +1,20 @@
 import React, { FC } from 'react';
-import { Box, Card as RebassCard, CardProps as RebassCardProps } from 'rebass';
+import {
+  Box,
+  Flex,
+  Card as RebassCard,
+  CardProps as RebassCardProps,
+} from 'rebass';
 
 // Styles
 import styles, { cardHeaderStyles } from './card.styles';
 
-export interface CardProps extends Omit<RebassCardProps, 'css'> {
+export interface CardProps extends Omit<RebassCardProps, 'css' | 'title'> {
+  title?: React.ReactElement | string;
   link?: string;
   actions?: React.ReactNode;
   children: React.ReactNode;
-  contentProps?: Omit<CardProps, 'css' | 'children'>;
+  contentProps?: Omit<RebassCardProps, 'css' | 'children'>;
 }
 
 const Card: FC<CardProps> = ({
@@ -26,7 +32,11 @@ const Card: FC<CardProps> = ({
       {/* Header */}
       {isShowHeader && (
         <Box sx={cardHeaderStyles}>
-          {title && <h4>{title}</h4>}
+          {title && (
+            <Flex alignItems="center" as="h4">
+              {title}
+            </Flex>
+          )}
           {actions && <div>{actions}</div>}
         </Box>
       )}
@@ -38,7 +48,6 @@ const Card: FC<CardProps> = ({
         width="100%"
         height="100%"
         p="20px"
-        overflowY="auto"
         {...contentProps}
       >
         {children}
 
@@ -15,7 +15,7 @@ export interface IconButtonProps extends Omit<ButtonProps, 'css'> {
   icon: IconProp;
   disabled?: boolean;
   iconOnHover?: IconProp;
-  tooltipProps?: TooltipProps;
+  tooltipProps?: Omit<TooltipProps, 'children' | 'mainText'>;
 }
 
 const IconButton: FC<IconButtonProps> = ({
 
@@ -0,0 +1,23 @@
+import { IconProp, SizeProp } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { FC } from 'react';
+import { Box, BoxProps } from 'rebass';
+
+export interface IconProps extends Omit<BoxProps, 'css'> {
+  size?: SizeProp;
+  icon: IconProp;
+  variant?: 'primary';
+}
+
+const Icon: FC<IconProps> = ({
+  size,
+  icon,
+  variant = 'primary',
+  ...props
+}: IconProps) => (
+  <Box as="span" {...props} tx="icon" variant={variant}>
+    <FontAwesomeIcon icon={icon} size={size} />
+  </Box>
+);
+
+export default Icon;
@@ -20,7 +20,7 @@ export interface InputProps extends Omit<RebassInputProps, 'css'> {
   label?: string;
   placeholder?: string;
   width?: string | number;
-  labelProps?: Omit<LabelProps, 'action' | 'text'>;
+  labelProps?: Omit<LabelProps, 'action' | 'text' | 'children'>;
   labelAction?: React.ReactNode;
 }
 
 
@@ -6,18 +6,21 @@ import styles from './label.styles';
 export interface LabelProps extends Omit<FlexProps, 'css' | 'action'> {
   action?: React.ReactNode;
   text?: string;
+  align?: 'top' | 'left';
   children: React.ReactNode;
 }
 
 const Label: FC<LabelProps> = ({
   action,
   text,
   children,
+  align = 'top',
+  as = 'label',
   ...props
 }: LabelProps) => (
   <Flex
-    as="label"
-    flexDirection="column"
+    flexDirection={align === 'top' ? 'column' : 'row'}
+    as={as}
     {...props}
     variant="label"
     sx={styles}
 
@@ -12,5 +12,6 @@ export default {
     alignItems: 'center',
 
     mb: '4px',
+    mr: '8px',
   },
 } as SxStyleProp;
@@ -12,7 +12,6 @@ const List = forwardRef<HTMLUListElement, ListProps>(
       as="ul"
       m="0"
       p="0"
-      overflowY="auto"
       width="max-content"
       {...props}
       tx="variants.list"
 
@@ -20,10 +20,11 @@ type INavigation<P> = FC<P> & {
 
 export interface NavigationProps {
   children?: React.ReactNode;
-  onNavigate?: (node: TreeNode | null) => void;
   footer?: React.ReactNode;
   trackBy?: string;
   tree?: TreeNode[];
+  onNavigate?: (node: TreeNode | null) => void;
+  onBackCLick?: () => void;
 }
 
 const Navigation: INavigation<NavigationProps> = ({
 
@@ -4,11 +4,15 @@ export default {
   alignItems: 'center',
   justifyContent: 'space-between',
 
+  borderRightStyle: 'solid',
+  borderRightWidth: '1px',
+
   position: 'relative',
 
   overflowX: 'hidden',
 
   width: '240px',
+  minWidth: '240px',
   height: '100%',
 
   '> ul': {
 
@@ -13,13 +13,15 @@ export interface CategoriesProviderProps {
   trackBy?: string;
   children: React.ReactNode;
   onNavigate?: (node: TreeNode | null) => void;
+  onBackCLick?: () => void;
 }
 
 const NavigationProvider: FC<CategoriesProviderProps> = ({
   tree,
   trackBy = 'title',
   children,
   onNavigate,
+  onBackCLick,
 }: CategoriesProviderProps) => {
   const [activePath, setActivePath] = useState<string[]>([]);
   const [activeNode, setActiveNode] = useState<TreeNode | null>(null);
@@ -42,6 +44,10 @@ const NavigationProvider: FC<CategoriesProviderProps> = ({
       setActivePath((path) =>
         path.slice(path.indexOf(target) - 1, path.length - 1),
       );
+
+      if (onBackCLick) {
+        onBackCLick();
+      }
     },
     [activePath],
   );
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ export interface IconButtonProps extends Omit<ButtonProps, 'css'> {`
`15`	`15`	`icon: IconProp;`
`16`	`16`	`disabled?: boolean;`
`17`	`17`	`iconOnHover?: IconProp;`
`18`		`- tooltipProps?: TooltipProps;`
	`18`	`+ tooltipProps?: Omit<TooltipProps, 'children' \| 'mainText'>;`
`19`	`19`	`}`
`20`	`20`
`21`	`21`	`const IconButton: FC<IconButtonProps> = ({`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export interface InputProps extends Omit<RebassInputProps, 'css'> {`
`20`	`20`	`label?: string;`
`21`	`21`	`placeholder?: string;`
`22`	`22`	`width?: string \| number;`
`23`		`- labelProps?: Omit<LabelProps, 'action' \| 'text'>;`
	`23`	`+ labelProps?: Omit<LabelProps, 'action' \| 'text' \| 'children'>;`
`24`	`24`	`labelAction?: React.ReactNode;`
`25`	`25`	`}`
`26`	`26`