feat(CardEmptyCover): add new icon

leemonade · Jan 5, 2024 · 52eb4a1 · 52eb4a1
1 parent 2158b57
commit 52eb4a1
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 49 deletions.
diff --git a/merged_tokens.json b/merged_tokens.json
@@ -6940,7 +6940,12 @@
         },
         "typo": {
           "lg": {
-            "value": "{global.content.typo.body.lg--medium}",
+            "value": {
+              "fontFamily": "{core.font.family.main}",
+              "fontWeight": "{core.font.weight.medium}",
+              "lineHeight": "19 px",
+              "fontSize": "{core.font.size.100}"
+            },
             "type": "typography"
           },
           "md": {
@@ -7257,7 +7262,12 @@
         },
         "typo": {
           "lg": {
-            "value": "{global.content.typo.body.lg--medium}",
+            "value": {
+              "fontFamily": "{core.font.family.main}",
+              "fontWeight": "{core.font.weight.medium}",
+              "lineHeight": "19 px",
+              "fontSize": "{core.font.size.100}px"
+            },
             "type": "typography"
           },
           "md": {
@@ -7454,7 +7464,12 @@
         },
         "typo": {
           "lg": {
-            "value": "{global.content.typo.body.lg--medium}",
+            "value": {
+              "fontFamily": "{core.font.family.main}",
+              "fontWeight": "{core.font.weight.medium}",
+              "lineHeight": "19 px",
+              "fontSize": "{core.font.size.100}px"
+            },
             "type": "typography"
           },
           "md": {

diff --git a/packages/components/src/informative/AvatarsGroup/AvatarsGroup.constants.js b/packages/components/src/informative/AvatarsGroup/AvatarsGroup.constants.js
@@ -16,6 +16,6 @@ export const AVATARS_GROUP_PROP_TYPES = {
       color: PropTypes.string,
       initials: PropTypes.string,
       fullName: PropTypes.string,
-    })
+    }),
   ),
 };
diff --git a/packages/components/src/misc/CardEmptyCover/CardEmptyCover.js b/packages/components/src/misc/CardEmptyCover/CardEmptyCover.js
@@ -10,12 +10,13 @@ import { AssetTaskIcon } from '../FileIcon/AssetTaskIcon';
 import { AssetExpressTaskIcon } from '../FileIcon/AssetExpressTaskIcon';
 import { AssetModuleIcon } from '../FileIcon/AssetModuleIcon';
 import { AssetFeedbackIcon } from '../FileIcon/AssetFeedbackIcon';
-import { AssetAudioIcon } from '../FileIcon/AssetAudioIcon'
-import { AssetVideoIcon } from '../FileIcon/AssetVideoIcon'
-import { AssetImageIcon } from '../FileIcon/AssetImageIcon'
-import { AssetBookmarkIcon } from '../FileIcon/AssetBookmarkIcon'
+import { AssetAudioIcon } from '../FileIcon/AssetAudioIcon';
+import { AssetVideoIcon } from '../FileIcon/AssetVideoIcon';
+import { AssetImageIcon } from '../FileIcon/AssetImageIcon';
+import { AssetBookmarkIcon } from '../FileIcon/AssetBookmarkIcon';
 import { AssetDocumentIconSmall } from '../FileIcon/AssetDocumentIcon';
 import { AssetScormIcon } from '../FileIcon/AssetScormIcon';
+import { AssetTestIcon } from '../FileIcon/AssetTestIcon';
 import { Box } from '../../layout/Box';
 
 const CardEmptyCover = memo(({ icon, fileType }) => {
@@ -29,6 +30,7 @@ const CardEmptyCover = memo(({ icon, fileType }) => {
     { key: 'feedback', value: <AssetFeedbackIcon height={18} width={18} color={'#878D96'} /> },
     { key: 'document', value: <AssetDocumentIconSmall height={18} width={18} color={'#878D96'} /> },
     { key: 'task', value: <AssetTaskIcon height={18} width={18} color={'#878D96'} /> },
+    { key: 'tests', value: <AssetTestIcon height={18} width={18} color={'#878D96'} /> },
     {
       key: 'taskexpress',
       value: <AssetExpressTaskIcon height={18} width={18} color={'#878D96'} />,
@@ -43,7 +45,9 @@ const CardEmptyCover = memo(({ icon, fileType }) => {
     },
     {
       key: 'file',
-      value: <FileItemDisplay size={24} color={'#878D96'} iconStyle={{ backgroundColor: '#f8f9fb' }} />,
+      value: (
+        <FileItemDisplay size={24} color={'#878D96'} iconStyle={{ backgroundColor: '#f8f9fb' }} />
+      ),
     },
   ];
 

diff --git a/packages/components/src/misc/FileIcon/AssetTestIcon/AssetTestIcon.constants.js b/packages/components/src/misc/FileIcon/AssetTestIcon/AssetTestIcon.constants.js
@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+
+export const ASSET_TEST_ICON_DEFAULT_PROPS = {
+  width: 24,
+  height: 24,
+  color: '#7E8795',
+};
+export const ASSET_TEST_ICON_PROP_TYPES = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  color: PropTypes.string,
+};
diff --git a/packages/components/src/misc/FileIcon/AssetTestIcon/AssetTestIcon.js b/packages/components/src/misc/FileIcon/AssetTestIcon/AssetTestIcon.js
diff --git a/packages/components/src/misc/FileIcon/AssetTestIcon/index.js b/packages/components/src/misc/FileIcon/AssetTestIcon/index.js
@@ -0,0 +1 @@
+export * from './AssetTestIcon';
diff --git a/packages/components/src/misc/FileIcon/FileIcon.js b/packages/components/src/misc/FileIcon/FileIcon.js
@@ -11,6 +11,7 @@ import { AssetImageIcon } from './AssetImageIcon';
 import { AssetBookmarkIcon } from './AssetBookmarkIcon';
 import { AssetDocumentIconSmall } from './AssetDocumentIcon';
 import { AssetScormIcon } from './AssetScormIcon';
+import { AssetTestIcon } from './AssetTestIcon';
 
 export const FILE_ICON_DEFAULT_PROPS = {
   size: 16,
@@ -39,6 +40,7 @@ const FileIcon = ({ fileType, fileExtension, label, size, color, iconStyle, ...p
     { key: 'curriculum', value: <PluginCurriculumIcon height={size} width={size} /> },
     { key: 'document', value: <AssetDocumentIconSmall height={18} width={18} /> },
     { key: 'scorm', value: <AssetScormIcon height={18} width={18} /> },
+    { key: 'tests', value: <AssetTestIcon height={18} width={18} /> },
     {
       key: 'file',
       value: (

diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
@@ -1153,7 +1153,7 @@ export default {
           "y": 0,
           "blur": 4,
           "spread": 0,
-          "color": "#ffffff",
+          "color": "#ffffff26",
           "type": "dropShadow"
         },
         "type": "boxShadow"
@@ -1234,17 +1234,8 @@ export default {
             "type": "color"
           },
           "hover--reverse-transparent": {
-            "value": "#ffffff",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.15",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#ffffff26",
+            "type": "color"
           },
           "down": {
             "value": "#F1FFBD",
@@ -4939,30 +4930,12 @@ export default {
       "color": {
         "primary": {
           "default": {
-            "value": "#4D5358",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.4",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#4d535866",
+            "type": "color"
           },
           "hover": {
-            "value": "#4D5358",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.7",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#4d5358b3",
+            "type": "color"
           },
           "down": {
             "value": "#4D5358",
@@ -5095,8 +5068,8 @@ export default {
           "value": {
             "fontFamily": "Albert Sans",
             "fontWeight": 500,
-            "lineHeight": "24px",
-            "fontSize": "18px"
+            "lineHeight": "19 px",
+            "fontSize": 16
           },
           "type": "typography"
         },
@@ -5451,8 +5424,8 @@ export default {
           "value": {
             "fontFamily": "Albert Sans",
             "fontWeight": 500,
-            "lineHeight": "24px",
-            "fontSize": "18px"
+            "lineHeight": "19 px",
+            "fontSize": "16px"
           },
           "type": "typography"
         },
@@ -5677,8 +5650,8 @@ export default {
           "value": {
             "fontFamily": "Albert Sans",
             "fontWeight": 500,
-            "lineHeight": "24px",
-            "fontSize": "18px"
+            "lineHeight": "19 px",
+            "fontSize": "16px"
           },
           "type": "typography"
         },