akeneo-design-system 0.1.224 → 0.1.225

package/src/components/Tags/Tags.tsx

@@ -1,6 +1,6 @@
 import React, {Ref, ReactNode, isValidElement} from 'react';
 import styled from 'styled-components';
-import {AkeneoThemedProps, getFontSize} from '../../theme';
+import {AkeneoThemedProps, getColorAlternative, getFontSize} from '../../theme';
 
 /**
  * The colors defined in this file are the alternative ones
@@ -8,42 +8,37 @@ import {AkeneoThemedProps, getFontSize} from '../../theme';
  * https://www.notion.so/akeneo/Alternative-colors-0f5283c1b02f4fd4a418f1e20f2efa99
  * Those colors will most likely only be used with the tags components
  */
-type Tint = 'green' | 'blue' | 'dark_blue' | 'purple' | 'dark_purple' | 'yellow' | 'red';
+type Tint =
+  | 'green'
+  | 'blue'
+  | 'dark_blue'
+  | 'purple'
+  | 'dark_purple'
+  | 'yellow'
+  | 'red'
+  | 'dark_cyan'
+  | 'forest_green'
+  | 'olive_green'
+  | 'hot_pink'
+  | 'coral_red'
+  | 'orange'
+  | 'chocolate';
+
+// Because tints are in snake_case, and colors code are in camelCase
+const convertTintToColorCode = (str: string) => {
+  return str.replace(/_([a-z])/g, function (g) {
+    return g[1].toUpperCase();
+  });
+};
+
 type TagProps = {
   tint: Tint;
 } & React.HTMLAttributes<HTMLLIElement>;
 const Tag = styled.li<TagProps & AkeneoThemedProps>`
   border: 1px solid;
-  border-color: ${({tint}) =>
-    ({
-      green: '#81cccc',
-      blue: '#4ca8e0',
-      dark_blue: '#5e63b6',
-      purple: '#9452ba',
-      dark_purple: '#52267d',
-      yellow: '#fcce76',
-      red: '#f74b64',
-    }[tint])};
-  color: ${({tint}) =>
-    ({
-      green: '#5da8a6',
-      blue: '#3278b7',
-      dark_blue: '#3b438c',
-      purple: '#763e9e',
-      dark_purple: '#36145e',
-      yellow: '#ca8411',
-      red: '#c92343',
-    }[tint])};
-  background-color: ${({tint}) =>
-    ({
-      green: '#f5fafa',
-      blue: '#f0f7fc',
-      dark_blue: '#efeff8',
-      purple: '#f3eef9',
-      dark_purple: '#eeeaf2',
-      yellow: '#fefbf2',
-      red: '#fdedf0',
-    }[tint])};
+  border-color: ${({tint}) => getColorAlternative(convertTintToColorCode(tint), 100)};
+  color: ${({tint}) => getColorAlternative(convertTintToColorCode(tint), 120)};
+  background-color: ${({tint}) => getColorAlternative(convertTintToColorCode(tint), 10)};
   height: 16px;
   line-height: 16px;
   padding: 0 6px;

package/src/components/Tags/Tags.unit.tsx

@@ -5,11 +5,11 @@ import {render, screen} from '../../storybook/test-util';
 test('it renders its children properly', () => {
   render(
     <Tags>
-      <Tag color="red">Red Tag</Tag>
+      <Tag tint="dark_blue">Dark blue Tag</Tag>
     </Tags>
   );
 
-  expect(screen.getByText('Red Tag')).toBeInTheDocument();
+  expect(screen.getByText('Dark blue Tag')).toBeInTheDocument();
 });
 
 test('it fails when there are invalid children', () => {

package/src/guidelines/Colors.stories.mdx

@@ -10,6 +10,7 @@ export const ColorContainer = styled(PreviewContainer)`
 `;
 
 export const colors = ['green', 'blue', 'yellow', 'red', 'grey', 'purple'];
+export const colorsAlternative = ['green', 'darkCyan', 'forestGreen', 'oliveGreen',  'blue', 'darkBlue', 'purple', 'darkPurple', 'hotPink', 'red', 'coralRed', 'yellow', 'orange', 'chocolate'];
 
 # Colors
 
@@ -68,3 +69,32 @@ Colors enhance the experience by providing visual clues and drawing attention to
     </div>
   </Story>
 </Canvas>
+
+<Canvas>
+  <Story name="Alternative">
+    <div>
+        <h1>Alternative colors</h1>
+          {colorsAlternative.map(colorName => {
+            return (
+              <div key={colorName}>
+                <Subtitle>{colorName}</Subtitle>
+                <PreviewGrid>
+                  {Object.keys(themes[0].colorAlternative)
+                    .filter(colorCode => 0 === colorCode.indexOf(colorName))
+                    .map(colorCode => {
+                      const color = themes[0].colorAlternative[colorCode];
+                      return (
+                        <PreviewCard key={colorCode}>
+                          <ColorContainer color={color} />
+                          <LabelContainer>{colorCode}</LabelContainer>
+                          <LabelContainer>{color}</LabelContainer>
+                        </PreviewCard>
+                      );
+                    })}
+                </PreviewGrid>
+              </div>
+            );
+          })}
+      </div>
+  </Story>
+</Canvas>

package/src/illustrations/WarningIllustration.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {IllustrationProps} from './IllustrationProps';
+import Warning from '../../static/illustrations/Warning.svg';
+
+const WarningIllustration = ({title, size = 256, ...props}: IllustrationProps) => (
+  <svg width={size} height={size} viewBox="0 0 256 256" {...props}>
+    {title && <title>{title}</title>}
+    <image href={Warning} />
+  </svg>
+);
+
+export {WarningIllustration};

package/src/illustrations/index.ts

@@ -58,3 +58,4 @@ export * from './UserRolesIllustration';
 export * from './UsersIllustration';
 export * from './UsingIllustration';
 export * from './ViewsIllustration';
+export * from './WarningIllustration';

package/src/theme/common.ts

@@ -1,5 +1,5 @@
 import styled, {css, keyframes} from 'styled-components';
-import {Color, FontFamily, FontSize, getColor, getFontSize, Palette} from './theme';
+import {Color, ColorAlternative, FontFamily, FontSize, getColor, getFontSize, Palette} from './theme';
 
 const CommonStyle = css`
   input,
@@ -100,6 +100,51 @@ const color: Color = {
   white: '#ffffff',
 };
 
+const colorAlternative: ColorAlternative = {
+  blue10: '#F0F7FC',
+  blue100: '#4CA8E0',
+  blue120: '#3278B7',
+  chocolate10: '#EEE9E5',
+  chocolate100: '#512500',
+  chocolate120: '#441F00',
+  coralRed10: '#FDF0EF',
+  coralRed100: '#ED6A5E',
+  coralRed120: '#B72215',
+  darkBlue10: '#EFEFF8',
+  darkBlue100: '#5e63b6',
+  darkBlue120: '#3B438C',
+  darkCyan10: '#E5F3F3',
+  darkCyan100: '#008B8B',
+  darkCyan120: '#007575',
+  darkPurple10: '#EEEAF2',
+  darkPurple100: '#52267D',
+  darkPurple120: '#36145E',
+  forestGreen10: '#EDF1EB',
+  forestGreen100: '#50723C',
+  forestGreen120: '#436032',
+  green10: '#F5FAFA',
+  green100: '#81CCCC',
+  green120: '#5DA8A6',
+  hotPink10: '#FFF0F7',
+  hotPink100: '#FF69B4',
+  hotPink120: '#CC0066',
+  oliveGreen10: '#F0F4E9',
+  oliveGreen100: '#6B8E23',
+  oliveGreen120: '#5A771D',
+  orange10: '#FFF3E5',
+  orange100: '#FF8600',
+  orange120: '#B25E00',
+  purple10: '#F3EEF9',
+  purple100: '#9452BA',
+  purple120: '#763E9E',
+  red10: '#FDEDF0',
+  red100: '#F74B64',
+  red120: '#C92343',
+  yellow10: '#FEFBF2',
+  yellow100: '#FCCE76',
+  yellow120: '#D69A38',
+};
+
 const fontSize: FontSize = {
   big: '15px',
   bigger: '17px',
@@ -129,4 +174,14 @@ const SkeletonPlaceholder = styled.div`
   ${placeholderStyle}
 `;
 
-export {color, fontFamily, fontSize, palette, CommonStyle, BrandedPath, SkeletonPlaceholder, placeholderStyle};
+export {
+  color,
+  colorAlternative,
+  fontFamily,
+  fontSize,
+  palette,
+  CommonStyle,
+  BrandedPath,
+  SkeletonPlaceholder,
+  placeholderStyle,
+};

package/src/theme/connector/index.ts

@@ -1,5 +1,5 @@
 import {Theme} from '../theme';
-import {color, fontSize, palette, fontFamily} from '../common';
+import {color, fontSize, palette, fontFamily, colorAlternative} from '../common';
 
 const connectorTheme: Theme = {
   name: 'Connector',
@@ -13,6 +13,7 @@ const connectorTheme: Theme = {
     brand120: '#3b4494',
     brand140: '#272d62',
   },
+  colorAlternative,
   fontSize,
   palette,
   fontFamily,

package/src/theme/onboarder/index.ts

@@ -1,5 +1,5 @@
 import {Theme} from '../theme';
-import {color, fontSize, palette, fontFamily} from '../common';
+import {color, fontSize, palette, fontFamily, colorAlternative} from '../common';
 
 const onboarderTheme: Theme = {
   name: 'Onboarder',
@@ -13,6 +13,7 @@ const onboarderTheme: Theme = {
     brand120: '#3c86b3',
     brand140: '#2d6486',
   },
+  colorAlternative,
   fontSize,
   palette,
   fontFamily,

package/src/theme/pim/index.ts

@@ -1,5 +1,5 @@
 import {Theme} from '../theme';
-import {color, fontSize, palette, fontFamily} from '../common';
+import {color, colorAlternative, fontSize, palette, fontFamily} from '../common';
 
 const pimTheme: Theme = {
   name: 'PIM',
@@ -13,6 +13,7 @@ const pimTheme: Theme = {
     brand120: '#764194',
     brand140: '#58316f',
   },
+  colorAlternative,
   fontSize,
   palette,
   fontFamily,

package/src/theme/shared-catalogs/index.ts

@@ -1,5 +1,5 @@
 import {Theme} from '../theme';
-import {color, fontSize, palette, fontFamily} from '../common';
+import {color, fontSize, palette, fontFamily, colorAlternative} from '../common';
 
 const sharedCatalogsTheme: Theme = {
   name: 'Shared Catalogs',
@@ -13,6 +13,7 @@ const sharedCatalogsTheme: Theme = {
     brand120: '#c79032',
     brand140: '#956c25',
   },
+  colorAlternative,
   fontSize,
   palette,
   fontFamily,

package/src/theme/theme.ts

@@ -65,6 +65,51 @@ type Color = {
   white: string;
 };
 
+type ColorAlternative = {
+  blue10: string;
+  blue100: string;
+  blue120: string;
+  chocolate10: string;
+  chocolate100: string;
+  chocolate120: string;
+  coralRed10: string;
+  coralRed100: string;
+  coralRed120: string;
+  darkBlue10: string;
+  darkBlue100: string;
+  darkBlue120: string;
+  darkCyan10: string;
+  darkCyan100: string;
+  darkCyan120: string;
+  darkPurple10: string;
+  darkPurple100: string;
+  darkPurple120: string;
+  forestGreen10: string;
+  forestGreen100: string;
+  forestGreen120: string;
+  green10: string;
+  green100: string;
+  green120: string;
+  hotPink10: string;
+  hotPink100: string;
+  hotPink120: string;
+  oliveGreen10: string;
+  oliveGreen100: string;
+  oliveGreen120: string;
+  orange10: string;
+  orange100: string;
+  orange120: string;
+  purple10: string;
+  purple100: string;
+  purple120: string;
+  red10: string;
+  red100: string;
+  red120: string;
+  yellow10: string;
+  yellow100: string;
+  yellow120: string;
+};
+
 type Palette = {
   primary: string;
   secondary: string;
@@ -78,6 +123,7 @@ type Theme = {
   palette: Palette;
   fontSize: FontSize;
   color: Color;
+  colorAlternative: ColorAlternative;
   fontFamily: FontFamily;
 };
 
@@ -98,6 +144,11 @@ const getColorForLevel =
   ({theme}: AkeneoThemedProps): string =>
     theme.color[`${theme.palette[level]}${gradient}`] as string;
 
+const getColorAlternative =
+  (color: string, gradient?: number): ((props: AkeneoThemedProps) => string) =>
+  ({theme}: AkeneoThemedProps): string =>
+    theme.colorAlternative[`${color}${gradient ?? ''}`] as string;
+
 const getFontSize =
   (fontSize: keyof FontSize): ((props: AkeneoThemedProps) => string) =>
   ({theme}: AkeneoThemedProps): string =>
@@ -109,5 +160,5 @@ const getFontFamily =
     theme.fontFamily[fontFamilyType];
 
 export type AkeneoThemedProps<P = Record<string, unknown>> = ThemedStyledProps<P, Theme>;
-export type {Theme, FontSize, FontFamily, Color, Level, Palette};
-export {getColor, getFontFamily, getColorForLevel, getFontSize};
+export type {Theme, FontSize, FontFamily, Color, ColorAlternative, Level, Palette};
+export {getColor, getFontFamily, getColorForLevel, getColorAlternative, getFontSize};