New covalent icons (#2170)

* feat: covalent outlined icon versions and other new icons * fix: icon errors fixed * fix: readme fix --------- Co-authored-by: Guzylak <[email protected]>
Teradata · Jun 12, 2024 · ce9bed4 · ce9bed4
1 parent fe3b904
commit ce9bed4
Show file tree

Hide file tree

Showing 207 changed files with 2,033 additions and 335 deletions.
diff --git a/libs/components/src/icon/icon.stories.js b/libs/components/src/icon/icon.stories.js
@@ -9,42 +9,90 @@ const COV_ICON_LIST = [
   'api',
   'api_ondark',
   'application',
+  'attribution',
+  'attribution_outlined',
   'bucket',
   'cluster_analysis',
+  'cluster_analysis_outlined',
   'column',
+
   'compute_cluster',
+  'compute_cluster_outlined',
+
   'compute_cluster_group',
+  'compute_cluster_group_outlined',
+
+  'compute_groups',
+  'compute_groups_outlined',
+
+  'compute_profile',
   'compute_profile_dark',
   'compute_profile_light',
+  'compute_profile_outlined',
+
   'connected_identity',
   'data_management',
   'data_preparation',
   'data_source',
   'database',
+  'database_outlined',
   'database_changed',
+  'database_changed_outlined',
   'database_edit',
+  'database_edit_outlined',
   'database_foreign',
+  'database_foreign_outlined',
   'database_lab',
+  'database_lab_outlined',
+  'database_none',
+  'database_none_outlined',
   'database_search',
+  'database_search_outlined',
   'database_synced',
+  'database_synced_outlined',
+  'database_unreachable',
+  'database_unreachable_outlined',
+  'data_source_type_amazon',
+  'data_source_type_amazon_outlined',
+  'data_source_type_azure',
+  'data_source_type_azure_outlined',
+  'data_source_type_cloudera',
+  'data_source_type_cloudera_outlined',
+  'data_source_type_hdinsight',
+  'data_source_type_hdinsight_outlined',
+  'data_source_type_microsoft',
+  'data_source_type_microsoft_outlined',
+  'data_source_type_teradata',
+  'data_source_type_teradata_outlined',
   'disconnect',
   'dock_right',
+  'dock_right_outlined',
   'engine',
   'file',
+  'file_outlined',
   'file_changed',
+  'file_changed_outlined',
   'file_edit',
+  'file_edit_outlined',
   'file_foreign',
+  'file_foreign_outlined',
   'file_lab',
+  'file_lab_outlined',
   'file_search',
+  'file_search_outlined',
   'file_synced',
+  'file_synced_outlined',
   'formula',
   'lab',
   'loader_dots',
-  'machine_learning_ondark',
   'machine_learning',
+  'machine_learning_ondark',
+  'machine_learning_outlined',
   'model',
+  'model_outlined',
   'model_ondark',
   'model_configuration',
+  'model_configuration_outlined',
   'model_configuration_ondark',
   'no_results',
   'node_branch',
@@ -54,62 +102,160 @@ const COV_ICON_LIST = [
   'object_storage',
   'object_storage_ondark',
   'operations',
+
   'operators_divide',
+  'operators_divide_outlined',
   'operators_equals',
+  'operators_equals_outlined',
   'operators_greater_than',
+  'operators_greater_than_outlined',
   'operators_greater_than_or_equal',
+  'operators_greater_than_or_equal_outlined',
   'operators_less_than',
+  'operators_less_than_outlined',
   'operators_less_than_or_equal',
+  'operators_less_than_or_equal_outlined',
   'operators_multiply',
+  'operators_multiply_outlined',
   'operators_not_equal',
+  'operators_not_equal_outlined',
   'operators_parentheses',
+  'operators_parentheses_outlined',
   'operators_parenthesis_left',
+  'operators_parenthesis_left_outlined',
   'operators_parenthesis_right',
+  'operators_parenthesis_right_outlined',
   'operators_subtract',
-  'outbound_campaign_manager',
+  'operators_subtract_outlined',
+
   'primary_cluster',
+  'primary_cluster_outlined',
+
   'product_analyst',
+  'product_analyst_outlined',
+  'product_appcenter',
+  'product_appcenter_outlined',
   'product_console',
+  'product_console_outlined',
+  'product_cx',
+  'product_cx_outlined',
   'product_editor',
+  'product_editor_outlined',
+  'product_jupyterhub',
+  'product_jupyterhub_outlined',
+  'product_modelops',
+  'product_modelops_outlined',
+  'product_outbound_campaign_manager',
+  'product_outbound_campaign_manager_outlined',
+  'product_querygrid',
+  'product_querygrid_outlined',
+  'product_streams',
+  'product_streams_outlined',
+  'product_vantage',
+  'product_vantage_outlined',
+  'product_viewpoint',
+  'product_viewpoint_outlined',
+
   'resize_northeast',
+  'resize_northeast_outlined',
   'resize_northwest',
+  'resize_northwest_outlined',
   'resize_southeast',
+  'resize_southeast_outlined',
   'resize_southwest',
+  'resize_southwest_outlined',
+
   'rules',
   'rules_ondark',
   'rules_insert',
   'rules_insert_ondark',
   'rules_select',
   'rules_select_ondark',
+
+  'sankey',
+  'sankey_outlined',
+
   'script',
+  'script_outlined',
   'script_ondark',
   'script_macro',
   'script_macro_ondark',
+  'script_management',
+  'script_management_outlined',
   'script_sql',
+  'script_sql_outlined',
   'script_sql_ondark',
   'script_stored_procedure',
+  'script_stored_procedure_outlined',
   'script_stored_procedure_ondark',
+
   'segmentation',
+
   'server',
+  'server_outlined',
   'server_changed',
+  'server_changed_outlined',
   'server_edit',
+  'server_edit_outlined',
   'server_foreign',
+  'server_foreign_outlined',
   'server_lab',
+  'server_lab_outlined',
   'server_search',
+  'server_search_outlined',
   'server_synced',
+  'server_synced_outlined',
+  'server_workspace',
+  'server_workspace_outlined',
+
+  'state_cancelled',
+  'state_cancelled_outlined',
+  'state_caution',
+  'state_caution_outlined',
+  'state_changed',
+  'state_changed_outlined',
+  'state_changed_running',
+  'state_changed_running_outlined',
+  'state_negative',
+  'state_negative_outlined',
+  'state_paused',
+  'state_paused_outlined',
+  'state_pending',
+  'state_pending_outlined',
+  'state_positive',
+  'state_positive_outlined',
+  'state_running',
+  'state_running_outlined',
+
   'sftp',
   'sftp_ondark',
+
   'table',
+  'table_outlined',
   'table_changed',
+  'table_changed_outlined',
   'table_edit',
+  'table_edit_outlined',
   'table_foreign',
+  'table_foreign_outlined',
   'table_lab',
+  'table_lab_outlined',
   'table_search',
+  'table_search_outlined',
   'table_synced',
+  'table_synced_outlined',
+
   'teradata',
+  'teradata_outlined',
   'teradata_nocircle',
+  'teradata_nobackground',
+
   'text_analysis',
+  'text_analysis_outlined',
   'undock',
+  'undock_outlined',
+  'user_defined_function',
+  'user_defined_function_outlined',
   'variable',
   'variable_ondark',
   'view_sankey',

diff --git a/libs/icons/README.md b/libs/icons/README.md
@@ -1,37 +1,31 @@
 # Covalent icons
 
-## Adding a custom covalent icon
+## Adding custom covalent icons
 
-To integrate a new custom Covalent icon, follow these steps::
+To integrate new custom Covalent icons, follow these steps::
 
 ### Upload the svg icon
 
-1. Begin by uploading the new icon SVG file to the [svgs](https://github.com/Teradata/covalent/tree/main/libs/icons/svgs) folder.
+1. Begin by uploading the new icon SVG file to the [svgs](https://github.com/Teradata/covalent/tree/main/libs/icons/svgs) folder. All SVG files must be stripped of extra content, including fill color. The SVG should only contain one path. Here is an example of an accepted SVG:
+
+```css
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 16a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z"/></svg>
+```
+
 2. Login to [IcoMoon](https://icomoon.io/) and navigate to the [IcoMoon App](https://icomoon.io/app/#/select).
 3. Unzip the existing `covalent-icons-v<X.X>.zip` file, available [here](https://github.com/Teradata/covalent/tree/main/libs/icons).
-4. Use the "Import Icons" button in the navbar to upload the `selections.json` file from the unzipped `covalent-icons-v<X.X>` folder.
+4. Use the "Import Icons" button in the navbar to upload the `selections.json` file from the unzipped `covalent-icons-v<X.X>` folder. Select "Yes" when asked if settings should be saved for these icons.
 5. Once the library is loaded on the screen, click on the menu icon (located at the top-right corner) and select "import to set".
-6. Import the SVG file of the new icon.
-7. Click on `Generate font` (located in the footer) and customize the ligature name for the icon in the next page.
-8. Click on `Download` to download the customized font package.
+6. Import the SVG files of the new icons. If you are replacing existing icons with new versions, select "Replace" when asked if exisiting icons should be replaced.
+7. Make sure all of the new icons are highlighted along with existing ones.
+8. Click on `Generate font` (located in the footer) and customize the ligature name for the icon in the next page. All icons must have a ligature name.
+9. Click on `Download` to download the customized font package.
 
 ### Update covalent icons
 
 1. Replace the existing Covalent icons zip file (found [here](https://github.com/Teradata/covalent/tree/main/libs/icons)) with the newly generated zip file and ensure to update the version.
 2. Replace the files `covalent-icons.svg`, `covalent-icons.woff`, `covalent-icons.ttf` in [this](https://github.com/Teradata/covalent/tree/main/libs/icons) folder with the files found in the `fonts` folder of the zip file.
-3. Add the icon variable for the custom icon in the `covalent-icons-variables.scss` file. Retrieve the Unicode value from IcoMoon.
-
-```css
-$cov-<icon-name>: unquote('"\\<unicode-value>"');
-```
-
-Example:
-
-```css
-$cov-sample_icon: unquote('"\\e000"');
-```
-
-4. Open the styles.css file in the zip folder. Copy the query parameter from the src URLs of the font files. Replace the existing query parameters in the covalent-icons.scss and covalent-icons.css files with the copied ones. In the below example, `sn0lb0` is the query param.
+3. Open the styles.css file in the zip folder. Copy the query parameter from the src URLs of the font files. Replace the existing query parameters in the covalent-icons.scss and covalent-icons.css files with the copied ones. In the below example, `sn0lb0` is the query param.
 
 ```css
 @font-face {
@@ -43,7 +37,17 @@ $cov-sample_icon: unquote('"\\e000"');
 }
 ```
 
-5. In the covalent-icons.scss and covalent-icons.css files, define the icon variable.
+4. Copy all icon variables from `variables.scss` in the zip file into the `covalent-icons-variables.scss` file in covalent.
+
+Example:
+
+```css
+$cov-sample_icon: unquote('"\\e000"');
+```
+
+5. Copy all icon variables from `style.scss` in the zip file into the `covalent-icons.scss` file in covalent.
+
+Example:
 
 ```css
 .cov-sample_icon {
@@ -53,16 +57,26 @@ $cov-sample_icon: unquote('"\\e000"');
 }
 ```
 
+6. Copy all icon variables from `style.css` in the zip file into the `covalent-icons.css` file in covalent.
+
+Example:
+
+```css
+.cov-sample_icon:before {
+  content: '\e000';
+}
+```
+
 ### Storybook/Basic usage
 
-To explore the usage of the icon in Storybook:
+To explore the usage of the icons in Storybook:
 
-1. Add the icon name to the `COV_ICON_LIST` in this [file](https://github.com/Teradata/covalent/blob/main/libs/components/src/icon/icon.stories.js)
+1. Add the icon names to the `COV_ICON_LIST` in this [file](https://github.com/Teradata/covalent/blob/main/libs/components/src/icon/icon.stories.js)
 
 2. Run storybook
 
 ```
 npm run storybook
 ```
 
-3. In storybook, navigate to the Icon component and select `Covalent Icons`. Then, choose the newly added icon from the Storybook controls.
+3. In storybook, navigate to the Icon component and select `Covalent Icons`. Then, choose the newly added icons from the Storybook controls.
diff --git a/libs/icons/covalent-icons-v2.1.zip b/libs/icons/covalent-icons-v2.1.zip
diff --git a/libs/icons/covalent-icons-v2.2.zip b/libs/icons/covalent-icons-v2.2.zip