feat(icons): adds new icons

src/atoms/Card/CardSection.js

@@ -10,12 +10,19 @@ type CardSectionProps = {|
   children: React$Node,
   padding?: PropSizes,
   stretch?: boolean,
+  hoverable?: boolean,
 |};
 
 const name = 'cardSection';
 
 const cardSectionTheme = createTheme(name, {
   modifiers: {
+    hoverable: {
+      cursor: 'pointer',
+      '&:hover': {
+        boxShadow: '0 0.2rem 1rem 0 rgba(208, 215, 221, 0.6)',
+      },
+    },
     stretch: {
       display: 'flex',
       flex: 1,

src/atoms/Grid/GridLayout.js

@@ -8,7 +8,7 @@ type GridLayoutProps = {|
   /** when true then stretch to full width */
   stretch?: boolean,
   /** possbile spaces between grid items */
-  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none',
+  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'none',
   /** when true then set inline-grid */
   inline?: boolean,
   /** possible offsets of the grid layout */
@@ -43,6 +43,9 @@ const theme = createTheme(name, {
       xl: {
         gridGap: '3rem',
       },
+      xxl: {
+        gridGap: '4rem',
+      },
       none: {},
     },
     padding: {

src/atoms/typography/Icon/Icon.js

@@ -4,6 +4,7 @@ import React from 'react';
 import fp from 'lodash/fp';
 
 import { PALETTE } from '../../../theme';
+import { SECONDARY_COLORS, MAIN_BRAND_COLORS } from '../../../theme/dsmColors';
 import { createStyledTag, createTheme } from '../../../utils';
 import type { Theme } from '../../../types';
 import * as glyphs from './glyphs';
@@ -12,7 +13,9 @@ type IconProps = {
   /** icon name */
   name: string,
   /** icon color */
-  color?: $Keys<typeof PALETTE>,
+  color?: $Keys<typeof PALETTE>
+    | $Keys<typeof SECONDARY_COLORS>
+    | $Keys<typeof MAIN_BRAND_COLORS>,
   /** icon size */
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'stretch',
 };
@@ -21,10 +24,16 @@ const name = 'icon';
 
 const theme : Theme<IconProps> = createTheme(name, () => ({
   modifiers: {
-    color: fp.mapValues(
-      (color) => ({ color }),
-      PALETTE,
-    ),
+    color: {
+      ...fp.mapValues(
+        (color) => ({ color }),
+        {
+          ...PALETTE,
+          ...SECONDARY_COLORS,
+          ...MAIN_BRAND_COLORS,
+        },
+      ),
+    },
     size: {
       xs: {
         width: '1rem',