From 8a29dcb3f452aee02e7abf08bbc1a5472e4bc832 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 30 Jul 2024 17:45:45 +0200 Subject: [PATCH 1/4] add possibility to add a custom icon in Icon component, and add "Remote-user" icon --- src/lib/components/icon/Icon.component.tsx | 30 ++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/src/lib/components/icon/Icon.component.tsx b/src/lib/components/icon/Icon.component.tsx index 1247da7119..f87ccc9158 100644 --- a/src/lib/components/icon/Icon.component.tsx +++ b/src/lib/components/icon/Icon.component.tsx @@ -137,6 +137,27 @@ export const iconTable = { News: 'fas faBullhorn', }; +const customIcons = { + 'Remote-user': ({ ariaLabel, color, size }) => ( + + + + + ), +}; + const IconStyled = styled(FontAwesomeIcon)` ${(props) => { const theme = props.theme; @@ -148,7 +169,7 @@ const IconStyled = styled(FontAwesomeIcon)` }} `; -export type IconName = keyof typeof iconTable; +export type IconName = keyof typeof iconTable | keyof typeof customIcons; export type IconColor = keyof CoreUITheme; type Props = { name: IconName; @@ -215,12 +236,17 @@ function NonWrappedIcon({ ariaLabel = '', ...rest }: Omit) { - const iconInfo = iconTable[name]; + const iconInfo = iconTable[name] || customIcons[name]; if (!iconInfo) throw new Error(`${name}: is not a valid icon.`); const { data, status } = useQuery({ queryKey: ['icon', name], queryFn: async () => { + if (customIcons[name]) { + return { + default: customIcons[name], + }; + } const [iconType, iconClass] = iconInfo.split(' '); try { const fontAwesomeType = From 3721c493c51f73c1a6a33ad6c7e3cdcb2af61ead Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 30 Jul 2024 18:12:09 +0200 Subject: [PATCH 2/4] export customIcons --- src/lib/components/icon/Icon.component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/icon/Icon.component.tsx b/src/lib/components/icon/Icon.component.tsx index f87ccc9158..5cf07c7c63 100644 --- a/src/lib/components/icon/Icon.component.tsx +++ b/src/lib/components/icon/Icon.component.tsx @@ -137,7 +137,7 @@ export const iconTable = { News: 'fas faBullhorn', }; -const customIcons = { +export const customIcons = { 'Remote-user': ({ ariaLabel, color, size }) => ( Date: Tue, 30 Jul 2024 18:44:50 +0200 Subject: [PATCH 3/4] add remote group icon --- src/lib/components/icon/Icon.component.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/src/lib/components/icon/Icon.component.tsx b/src/lib/components/icon/Icon.component.tsx index 5cf07c7c63..fef8e1fda3 100644 --- a/src/lib/components/icon/Icon.component.tsx +++ b/src/lib/components/icon/Icon.component.tsx @@ -156,6 +156,24 @@ export const customIcons = { /> ), + 'Remote-group': ({ ariaLabel, color, size }) => ( + + + + + ), }; const IconStyled = styled(FontAwesomeIcon)` From 3cea4a1b41b1864090395b804688ab614f123267 Mon Sep 17 00:00:00 2001 From: Jean-Marc Millet Date: Tue, 30 Jul 2024 18:47:46 +0200 Subject: [PATCH 4/4] add customicons (remote-user, remote-group) in icon story and in Icons guideline --- stories/icon.stories.tsx | 19 +++-- stories/icons.mdx | 178 ++++++++++++++++++++------------------- 2 files changed, 102 insertions(+), 95 deletions(-) diff --git a/stories/icon.stories.tsx b/stories/icon.stories.tsx index 9f7e2a3203..a560ecae99 100644 --- a/stories/icon.stories.tsx +++ b/stories/icon.stories.tsx @@ -3,6 +3,7 @@ import { Icon, iconTable, IconName, + customIcons, } from '../src/lib/components/icon/Icon.component'; import { SizeProp } from '@fortawesome/fontawesome-svg-core'; @@ -132,14 +133,16 @@ export const AllIcons = { Name - {(Object.keys(iconTable) as IconName[]).map((key, index) => ( - - - - - {key} - - ))} + {(Object.keys({ ...iconTable, ...customIcons }) as IconName[]).map( + (key, index) => ( + + + + + {key} + + ), + )} ), diff --git a/stories/icons.mdx b/stories/icons.mdx index 08a6f94fa3..cc7004ff36 100644 --- a/stories/icons.mdx +++ b/stories/icons.mdx @@ -1,5 +1,7 @@ import ImageFile from './pictures/icon-design-system.png'; import { Meta } from '@storybook/addon-docs'; +import { Icon } from '../src/lib/components/icon/Icon.component'; +import { QueryClientProvider, QueryClient } from 'react-query'; @@ -19,90 +21,92 @@ When next to a text, the icon and the text should have the same size. ## Icon set table -| Icons | Name | Category | Origin | FontAwesome name | FontAwesome code | Icon Style & Prefix | FA free | Use case | -| :-------------------------------------------------: | -------------------- | ------------- | ------ | -------------------- | ----------------------------------------------- | ------------------- | ------- | ------------------------------------------------------- | -| | Account | Entities | FA | wallet | `` | solid Style (fas) | yes | Hero | -| | Backend | Entities | FA | network-wired | `` | solid Style (fas) | yes | Hero | -| | Tape | Entities | FA | tape | `` | solid Style (fas) | yes | Hero | -| | Node-backend | Entities | FA | server | `` | solid Style (fas) | yes | Hero | -| | Volume-backend | Entities | FA | hdd | `` | solid Style (fas) | yes | Hero | -| | Node-ptf | Entities | FA | database | `` | solid Style (fas) | yes | Hero | -| | Volume-ptf | Entities | FA | compact-disc | `` | solid Style (fas) | yes | Hero | -| | Network | Entities | FA | project-diagram | `` | solid Style (fas) | yes | Hero | -| | Bucket | Entities | FA | glass-whiskey | `` | solid Style (fas) | yes | Hero | -| | Cloud-backend | Entities | FA | cloud | `` | solid Style (fas) | yes | Hero | -| | Datacenter | Entities | FA | warehouse | `` | solid Style (fas) | yes | Hero | -| | User | Menu | FA | user-cog | `` | solid Style (fas) | yes | Top navbar | -| | Alert | Menu | FA | bell | `` | solid Style (fas) | yes | | -| | Lat-menu | Menu | FA | bars | `` | solid Style (fas) | yes | Expanded version of lat navbar | -| | Dashboard | Menu | FA | desktop | `` | solid Style (fas) | yes | | -| | Expiration | Workflow | FA | stopwatch | `` | solid Style (fas) | yes | | -| | Replication | Workflow | FA | coins | `` | solid Style (fas) | yes | | -| | Transition | Workflow | FA | rocket | `` | solid Style (fas) | yes | | -| | Discovery | Workflow | FA | reply | `` | solid Style (fas) | yes | | -| | Metrics | Action icon | FA | chart-line | `` | solid Style (fas) | yes | Last column of Tables | -| | Logs | Action icon | FA | file-alt | `` | regular Style (far) | yes | | -| | Edit | Action icon | FA | edit | `` | solid Style (fas) | yes | Field editable | -| | Create-add | Button-action | FA | plus | `` | solid Style (fas) | yes | New entity creation | -| | Delete | Button-action | FA | trash | `` | solid Style (fas) | yes | Entity deletion | -| | Save | Button-action | FA | save | `` | solid Style (fas) | yes | Save changes on an entity | -| | External-link | Button-action | FA | external-link-alt | `` | solid Style (fas) | yes | Open an external link | -| | Close | Button-action | FA | times | `` | solid Style (fas) | yes | Close a window/modal | -| | Dropdown-down | Button-action | FA | caret-down | `` | solid Style (fas) | yes | Expand a drop-down | -| | Dropdown-up | Button-action | FA | caret-up | `` | solid Style (fas) | yes | Dropdown expanded | -| | Search | Button-action | FA | search | `` | solid Style (fas) | yes | Search bar | -| | More | Button-action | FA | ellipsis-v | `` | solid Style (fas) | yes | End of tables (not enough space to display all actions) | -| | Info | Button-action | FA | question-circle | `` | solid Style (fas) | yes | Display tooltip info AND "About" (top menu) | -| | Sync | Button-action | FA | sync | `` | solid Style (fas) | yes | Refresh the metrics | -| | Export | Button-action | FA | file-export | `` | solid Style (fas) | yes | Export the data in predefined format | -| | Copy | Button-action | FA | clone | `` | regular Style (far) | yes | Small icon next to a field that can be copied | -| | Upload | Button-action | FA | file-upload | `` | solid Style (fas) | yes | Upload object | -| | Add-plus | Button-action | FA | plus-square | `` | solid Style (fas) | yes | Add an item in a list | -| | Remove-minus | Button-action | FA | minus-square | `` | solid Style (fas) | yes | Remove an item in a list | -| | Sort | Table | FA | sort | `` | solid Style (fas) | yes | Sort | -| | Sort-up | Table | FA | sort-up | `` | solid Style (fas) | yes | Sort | -| | Sort-down | Table | FA | sort-down | `` | solid Style (fas) | yes | Sort | -| | Calendar | Pill | FA | calendar-week | `` | solid Style (fas) | yes | Metric over a period | -| | Arrow-up | Pill | FA | arrow-up | `` | solid Style (fas) | yes | Show an increase in trend | -| | Arrow-down | Pill | FA | arrow-down | `` | solid Style (fas) | yes | Show a decrease in trend | -| | Folder | Browsing | FA | folder | `` | regular Style (far) | yes | Browsing | -| | File | Browsing | FA | file | `` | regular Style (far) | yes | Browsing | -| | Deletion-marker | Browsing | FA | ban | `` | solid Style (fas) | yes | Browsing - deletion markers on objects | -| | Info-circle | Status | FA | info-circle | `` | solid Style (fas) | yes | Grey empty state-status (charts, tables) | -| | Exclamation-triangle | Status | FA | exclamation-triangle | `` | solid Style (fas) | yes | Yellow warning status (alerts list) | -| | Exclamation-circle | Status | FA | exclamation-circle | `` | solid Style (fas) | yes | Red critical alerts | -| | Check | Status | FA | check | `` | solid Style (fas) | yes | Healthy status AND successful operation | -| | Protected | Status | FA | shield-alt | `` | solid Style (fas) | yes | Extra protection status | -| | Bars | Menu | FA | bars | `` | solid Style (fas) | yes | Expand/collapse the lat navbar | -| | Bound | Status | FA | link | `` | solid Style (fas) | yes | Bound status | -| | Unbound | Status | FA | unlink | `` | solid Style (fas) | yes | Unbound status | -| | Exclamation | Status | FA | exclamation | `` | solid Style (fas) | yes | Issue status | -| | Hyphen | Status | FA | minus | `` | solid Style (fas) | yes | No status, in tables | -| | Remove-circle | Action | FA | times-circle | `` | solid Style (fas) | yes | Remove a criteria in a search | -| | Object-upload | Action | FA | file-upload | `` | solid Style (fas) | yes | When uploading an object | -| | Chevron-left | Navigation | FA | chevron-left | `` | solid Style (fas) | yes | Expand tabs | -| | Chevron-right | Navigation | FA | chevron-right | `` | solid Style (fas) | yes | Expand tables | -| | Angle-double-right | Status | FA | angle-double-right | `` | solid Style (fas) | yes | Show an increase "From 1 value to another one" | -| | Language | Menu | FA | language | `` | solid Style (fas) | yes | Select the language in the top menu | -| | Theme | Menu | FA | palette | `` | solid Style (fas) | yes | Select the theme in the top menu | -| | Documentation | Menu | FA | clipboard-list | `` | solid Style (fas) | yes | Access to the documentation link | -| | Support | Menu | FA | comments | `` | solid Style (fas) | yes | Access to the support link | -| | EULA | Menu | FA | file-contract | `` | solid Style (fas) | yes | Access to the "Terms of use" link | -| | Log-out | Menu | FA | sign-out-alt | `` | solid Style (fas) | yes | Log out action | -| | Hourglass | Status | FA | hourglass | `` | regular Style (far) | ? | Workflow delayed | -| | Pause | Status | FA | pause | `` | solid Style (fas) | yes | Workflow paused | -| | Upgrade | Button-action | FA | level-up-alt | `` | solid Style (fas) | yes | Upgrade version | -| | Expansion | Button-action | FA | expand-alt | `` | solid Style (fas) | yes | Expand with no rebalancing | -| | Rebalance | Button-action | FA | balance-scale | `` | solid Style (fas) | yes | Expand with rebalancing | -| | Maintenance | Button-action | FA | hard-hat | `` | solid Style (fas) | yes | Switch to "maintenance mode" | -| | Change-erasure | Button-action | FA | exchange-alt | `` | solid Style (fas) | yes | Change erasure code level | -| | Circle-health | Status | FA | circle | `` | solid Style (fas) | yes | Display status (Healthy, Warning, Critical) | -| | Circle-empty | Status | FA | circle | `` | regular Style (far) | yes | Display empty health status | -| | Services | Status | FA | toolbox | `` | solid Style (fas) | yes | Status icon for Services | -| | Data-services | Hero | FA | cubes | `` | solid Style (fas) | yes | Hero icon for Data-services | -| | Arrow-right | Navigation | FA | arrow-right | `` | solid Style (fas) | yes | Button as "Continue", next step | -| | Arrow-left | Navigation | FA | arrow-left | `` | solid Style (fas) | yes | Go back to a previous status/page | -| | Certificate | Entities | FA | certificate | `` | solid Style (fas) | yes | Certificate | -| | Download | Action icon | FA | download | `` | solid Style (fas) | yes | Download | -| | ID-card | Entities | FA | id-card | `` | solid Style (fas) | yes | Identity | -| | Setting | Action | FA | cog | `` | solid Style (fas) | yes | Global Settings | +| Icons | Name | Category | Origin | FontAwesome name | FontAwesome code | Icon Style & Prefix | FA free | Use case | +| :----------------------------------------------------------------------------------------------------------: | -------------------- | ------------- | ------ | -------------------- | ----------------------------------------------- | ------------------- | ------- | ------------------------------------------------------- | +| | Account | Entities | FA | wallet | `` | solid Style (fas) | yes | Hero | +| | Backend | Entities | FA | network-wired | `` | solid Style (fas) | yes | Hero | +| | Tape | Entities | FA | tape | `` | solid Style (fas) | yes | Hero | +| | Node-backend | Entities | FA | server | `` | solid Style (fas) | yes | Hero | +| | Volume-backend | Entities | FA | hdd | `` | solid Style (fas) | yes | Hero | +| | Node-ptf | Entities | FA | database | `` | solid Style (fas) | yes | Hero | +| | Volume-ptf | Entities | FA | compact-disc | `` | solid Style (fas) | yes | Hero | +| | Network | Entities | FA | project-diagram | `` | solid Style (fas) | yes | Hero | +| | Bucket | Entities | FA | glass-whiskey | `` | solid Style (fas) | yes | Hero | +| | Cloud-backend | Entities | FA | cloud | `` | solid Style (fas) | yes | Hero | +| | Datacenter | Entities | FA | warehouse | `` | solid Style (fas) | yes | Hero | +| | User | Menu | FA | user-cog | `` | solid Style (fas) | yes | Top navbar | +| | Alert | Menu | FA | bell | `` | solid Style (fas) | yes | | +| | Lat-menu | Menu | FA | bars | `` | solid Style (fas) | yes | Expanded version of lat navbar | +| | Dashboard | Menu | FA | desktop | `` | solid Style (fas) | yes | | +| | Expiration | Workflow | FA | stopwatch | `` | solid Style (fas) | yes | | +| | Replication | Workflow | FA | coins | `` | solid Style (fas) | yes | | +| | Transition | Workflow | FA | rocket | `` | solid Style (fas) | yes | | +| | Discovery | Workflow | FA | reply | `` | solid Style (fas) | yes | | +| | Metrics | Action icon | FA | chart-line | `` | solid Style (fas) | yes | Last column of Tables | +| | Logs | Action icon | FA | file-alt | `` | regular Style (far) | yes | | +| | Edit | Action icon | FA | edit | `` | solid Style (fas) | yes | Field editable | +| | Create-add | Button-action | FA | plus | `` | solid Style (fas) | yes | New entity creation | +| | Delete | Button-action | FA | trash | `` | solid Style (fas) | yes | Entity deletion | +| | Save | Button-action | FA | save | `` | solid Style (fas) | yes | Save changes on an entity | +| | External-link | Button-action | FA | external-link-alt | `` | solid Style (fas) | yes | Open an external link | +| | Close | Button-action | FA | times | `` | solid Style (fas) | yes | Close a window/modal | +| | Dropdown-down | Button-action | FA | caret-down | `` | solid Style (fas) | yes | Expand a drop-down | +| | Dropdown-up | Button-action | FA | caret-up | `` | solid Style (fas) | yes | Dropdown expanded | +| | Search | Button-action | FA | search | `` | solid Style (fas) | yes | Search bar | +| | More | Button-action | FA | ellipsis-v | `` | solid Style (fas) | yes | End of tables (not enough space to display all actions) | +| | Info | Button-action | FA | question-circle | `` | solid Style (fas) | yes | Display tooltip info AND "About" (top menu) | +| | Sync | Button-action | FA | sync | `` | solid Style (fas) | yes | Refresh the metrics | +| | Export | Button-action | FA | file-export | `` | solid Style (fas) | yes | Export the data in predefined format | +| | Copy | Button-action | FA | clone | `` | regular Style (far) | yes | Small icon next to a field that can be copied | +| | Upload | Button-action | FA | file-upload | `` | solid Style (fas) | yes | Upload object | +| | Add-plus | Button-action | FA | plus-square | `` | solid Style (fas) | yes | Add an item in a list | +| | Remove-minus | Button-action | FA | minus-square | `` | solid Style (fas) | yes | Remove an item in a list | +| | Sort | Table | FA | sort | `` | solid Style (fas) | yes | Sort | +| | Sort-up | Table | FA | sort-up | `` | solid Style (fas) | yes | Sort | +| | Sort-down | Table | FA | sort-down | `` | solid Style (fas) | yes | Sort | +| | Calendar | Pill | FA | calendar-week | `` | solid Style (fas) | yes | Metric over a period | +| | Arrow-up | Pill | FA | arrow-up | `` | solid Style (fas) | yes | Show an increase in trend | +| | Arrow-down | Pill | FA | arrow-down | `` | solid Style (fas) | yes | Show a decrease in trend | +| | Folder | Browsing | FA | folder | `` | regular Style (far) | yes | Browsing | +| | File | Browsing | FA | file | `` | regular Style (far) | yes | Browsing | +| | Deletion-marker | Browsing | FA | ban | `` | solid Style (fas) | yes | Browsing - deletion markers on objects | +| | Info-circle | Status | FA | info-circle | `` | solid Style (fas) | yes | Grey empty state-status (charts, tables) | +| | Exclamation-triangle | Status | FA | exclamation-triangle | `` | solid Style (fas) | yes | Yellow warning status (alerts list) | +| | Exclamation-circle | Status | FA | exclamation-circle | `` | solid Style (fas) | yes | Red critical alerts | +| | Check | Status | FA | check | `` | solid Style (fas) | yes | Healthy status AND successful operation | +| | Protected | Status | FA | shield-alt | `` | solid Style (fas) | yes | Extra protection status | +| | Bars | Menu | FA | bars | `` | solid Style (fas) | yes | Expand/collapse the lat navbar | +| | Bound | Status | FA | link | `` | solid Style (fas) | yes | Bound status | +| | Unbound | Status | FA | unlink | `` | solid Style (fas) | yes | Unbound status | +| | Exclamation | Status | FA | exclamation | `` | solid Style (fas) | yes | Issue status | +| | Hyphen | Status | FA | minus | `` | solid Style (fas) | yes | No status, in tables | +| | Remove-circle | Action | FA | times-circle | `` | solid Style (fas) | yes | Remove a criteria in a search | +| | Object-upload | Action | FA | file-upload | `` | solid Style (fas) | yes | When uploading an object | +| | Chevron-left | Navigation | FA | chevron-left | `` | solid Style (fas) | yes | Expand tabs | +| | Chevron-right | Navigation | FA | chevron-right | `` | solid Style (fas) | yes | Expand tables | +| | Angle-double-right | Status | FA | angle-double-right | `` | solid Style (fas) | yes | Show an increase "From 1 value to another one" | +| | Language | Menu | FA | language | `` | solid Style (fas) | yes | Select the language in the top menu | +| | Theme | Menu | FA | palette | `` | solid Style (fas) | yes | Select the theme in the top menu | +| | Documentation | Menu | FA | clipboard-list | `` | solid Style (fas) | yes | Access to the documentation link | +| | Support | Menu | FA | comments | `` | solid Style (fas) | yes | Access to the support link | +| | EULA | Menu | FA | file-contract | `` | solid Style (fas) | yes | Access to the "Terms of use" link | +| | Log-out | Menu | FA | sign-out-alt | `` | solid Style (fas) | yes | Log out action | +| | Hourglass | Status | FA | hourglass | `` | regular Style (far) | ? | Workflow delayed | +| | Pause | Status | FA | pause | `` | solid Style (fas) | yes | Workflow paused | +| | Upgrade | Button-action | FA | level-up-alt | `` | solid Style (fas) | yes | Upgrade version | +| | Expansion | Button-action | FA | expand-alt | `` | solid Style (fas) | yes | Expand with no rebalancing | +| | Rebalance | Button-action | FA | balance-scale | `` | solid Style (fas) | yes | Expand with rebalancing | +| | Maintenance | Button-action | FA | hard-hat | `` | solid Style (fas) | yes | Switch to "maintenance mode" | +| | Change-erasure | Button-action | FA | exchange-alt | `` | solid Style (fas) | yes | Change erasure code level | +| | Circle-health | Status | FA | circle | `` | solid Style (fas) | yes | Display status (Healthy, Warning, Critical) | +| | Circle-empty | Status | FA | circle | `` | regular Style (far) | yes | Display empty health status | +| | Services | Status | FA | toolbox | `` | solid Style (fas) | yes | Status icon for Services | +| | Data-services | Hero | FA | cubes | `` | solid Style (fas) | yes | Hero icon for Data-services | +| | Arrow-right | Navigation | FA | arrow-right | `` | solid Style (fas) | yes | Button as "Continue", next step | +| | Arrow-left | Navigation | FA | arrow-left | `` | solid Style (fas) | yes | Go back to a previous status/page | +| | Certificate | Entities | FA | certificate | `` | solid Style (fas) | yes | Certificate | +| | Download | Action icon | FA | download | `` | solid Style (fas) | yes | Download | +| | ID-card | Entities | FA | id-card | `` | solid Style (fas) | yes | Identity | +| | Setting | Action | FA | cog | `` | solid Style (fas) | yes | Global Settings | +| | Remote-user | Entities | Custom | - | - | custom icon | - | Remote user in Identity UI | +| | Remote-group | Entities | Custom | - | - | custom icon | - | Remote group in Identity UI |