Merge pull request #90 from deriv-com/niloofar/improve-docs

Niloofar/Documentation enhancement & Exported icons type
deriv-com · Feb 13, 2024 · bfd1a15 · bfd1a15
2 parents 1ddefad + 637945e
commit bfd1a15
Show file tree

Hide file tree

Showing 2,905 changed files with 3,259 additions and 3,214 deletions.
diff --git a/readme.md b/readme.md
@@ -91,11 +91,47 @@ With [@figma-export](https://www.npmjs.com/package/@figma-export/cli) we export
     npm run export
     ```
 
-<br />
+## Icons Naming Conventions
 
-## Figma Components Conventions
+In the Quill Design System, we utilise naming conventions to store and locate components in their respective groups easily. The naming conventions differ slightly between **Quill Icons**, **Quill Logos** and **Quill Illustrations**. This is to cater specifically to their specific needs.
 
-Currently, we don't have specific conventions. We will update this section in coordination with the design team.
+### Quill Icons: [Category name] / [Size] / [Icon name] / [Style]
+
+- **"Category name"** refers to the broad number of categories the icons reside in—such as currency, flag, and market icons.
+- _(Only if applicable)_ The **"Size"** part of the naming convention is only added when the icons are provided in multiple different sizes.
+- **"Icon name"** is the distinct name for each icon that differentiates one icon from another.
+- _(Only if applicable)_ Applied to icons that have variations—such as regular/bold and white/black.
+
+**Examples of icons using this naming convention:**
+
+1. **illustrative / md / derived-md** = [Category name] / [Size] / [Icon name]
+2. **flags / flag-malysia** = [Category name] / [Icon name]
+3. **standalone / sm / grips-dots-vertical-sm / regular** = [Category name] / [Size] / [Icon name] / [Style]
+
+### Quill Logos : [Category name] / [Subcategory name] / [Logo name] / [Style]
+
+- **"Category name"** refers to the general category that encapsulates all logos, hence, the name "logo".
+- **"Subcategory name"** refers to the specific categories that further divide logos into—such as brands, sub-brands, and payment methods.
+- **"Logo name"** is the distinct name for each logo that differentiates one logo from another.
+- **"Styles"** are variations of the logo, in terms of colour, alignment, etc.
+
+**Examples of logos using this naming convention:**
+
+1. **logo / brand / deriv-wordmark / coral** = [Category name] / [Subcategory name] / [Logo name] / [Style]
+2. **logo / payment method / visa / brand** = [Category name] / [Subcategory name] / [Logo name] / [Style]
+
+### Quill Illustration : [Category name] / [Subcategory name] / [Style] / [Illustration name]
+
+- **"Category name"** refers to the general category that encapsulates all illustrations, hence, the name "illustration".
+- **"Subcategory name"** refers to the specific categories that further divide illustrations into.
+- **"Styles"** are variations of the illustration, in terms of colour, theme, etc.
+- **"Illustration name"** is the distinct name for each illustration that differentiates one illustration from another.
+
+**Examples of illustrations using this naming convention:**
+
+1. **illustration / deriv / light / pairs** = [Category name] / [Subcategory name] / [Style] / [Illustration name]
+2. **illustration / deriv / light / ic-cashier-locked** = [Category name] / [Subcategory name] / [Style] / [Illustration name]
+3. **illustration / deriv / dark / positions-history** = [Category name] / [Subcategory name] / [Style] / [Illustration name]
 
 ## Exporting New Icons
 

diff --git a/src/react/Accounts/AccountsDerivAccountDarkIcon.tsx b/src/react/Accounts/AccountsDerivAccountDarkIcon.tsx
@@ -20,7 +20,7 @@ export const AccountsDerivAccountDarkIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#c5b42b0f813c56a395078355ef35bb10__a)'>
+    <g clipPath='url(#e4bee58fbedbeff51fda8dd1c7c77ae9__a)'>
       <path fill='#fff' d='M0 6a6 6 0 0 1 6-6h20a6 6 0 0 1 6 6v20a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6z' />
       <path
         fill='#EF8933'
@@ -44,7 +44,7 @@ export const AccountsDerivAccountDarkIcon = (
       />
     </g>
     <defs>
-      <clipPath id='c5b42b0f813c56a395078355ef35bb10__a'>
+      <clipPath id='e4bee58fbedbeff51fda8dd1c7c77ae9__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Accounts/AccountsDerivAccountLightIcon.tsx b/src/react/Accounts/AccountsDerivAccountLightIcon.tsx
@@ -20,7 +20,7 @@ export const AccountsDerivAccountLightIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#ff3e0dc582bcd9f80816a793be2a532c__a)'>
+    <g clipPath='url(#bcef77ade371e609b5617cd1fa3355d2__a)'>
       <path
         fill='#414652'
         d='M0 6a6 6 0 0 1 6-6h20a6 6 0 0 1 6 6v20a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6z'
@@ -47,7 +47,7 @@ export const AccountsDerivAccountLightIcon = (
       />
     </g>
     <defs>
-      <clipPath id='ff3e0dc582bcd9f80816a793be2a532c__a'>
+      <clipPath id='bcef77ade371e609b5617cd1fa3355d2__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Accounts/AccountsDerivXIcon.tsx b/src/react/Accounts/AccountsDerivXIcon.tsx
@@ -20,7 +20,7 @@ export const AccountsDerivXIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#cfccadfaa168f603bee2c463375d4e66__a)'>
+    <g clipPath='url(#af88f59caad29b8c7b4e113aa8b13e0f__a)'>
       <path
         fill='#FF444F'
         d='M0 6a6 6 0 0 1 6-6h20a6 6 0 0 1 6 6v20a6 6 0 0 1-6 6H6a6 6 0 0 1-6-6z'
@@ -39,7 +39,7 @@ export const AccountsDerivXIcon = (
       />
     </g>
     <defs>
-      <clipPath id='cfccadfaa168f603bee2c463375d4e66__a'>
+      <clipPath id='af88f59caad29b8c7b4e113aa8b13e0f__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Accounts/AccountsDmt5CfdsIcon.tsx b/src/react/Accounts/AccountsDmt5CfdsIcon.tsx
@@ -20,7 +20,7 @@ export const AccountsDmt5CfdsIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#086c00818397a37554d7ac10c7c8b334__a)'>
+    <g clipPath='url(#513d4c5c71268380e2ce824151dd5c1a__a)'>
       <path fill='#0364B9' d='M26 0H6a6 6 0 0 0-6 6v17.5h32V6a6 6 0 0 0-6-6' />
       <path
         fill='#0A559E'
@@ -33,7 +33,7 @@ export const AccountsDmt5CfdsIcon = (
       />
     </g>
     <defs>
-      <clipPath id='086c00818397a37554d7ac10c7c8b334__a'>
+      <clipPath id='513d4c5c71268380e2ce824151dd5c1a__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Accounts/AccountsDmt5DerivedIcon.tsx b/src/react/Accounts/AccountsDmt5DerivedIcon.tsx
@@ -20,7 +20,7 @@ export const AccountsDmt5DerivedIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#43ce2dada5358ca55983a21d862064d8__a)'>
+    <g clipPath='url(#94b1f718126170a267e1634c6cd28f48__a)'>
       <path fill='#0364B9' d='M26 0H6a6 6 0 0 0-6 6v17.5h32V6a6 6 0 0 0-6-6' />
       <path
         fill='#0A559E'
@@ -33,7 +33,7 @@ export const AccountsDmt5DerivedIcon = (
       />
     </g>
     <defs>
-      <clipPath id='43ce2dada5358ca55983a21d862064d8__a'>
+      <clipPath id='94b1f718126170a267e1634c6cd28f48__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Accounts/AccountsDmt5FinancialIcon.tsx b/src/react/Accounts/AccountsDmt5FinancialIcon.tsx
@@ -20,7 +20,7 @@ export const AccountsDmt5FinancialIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#c17caf739466c5f2309d4cac9c19cd27__a)'>
+    <g clipPath='url(#c48ce9ad56a80dbaf9147d3143330a18__a)'>
       <path fill='#0364B9' d='M26 0H6a6 6 0 0 0-6 6v17.5h32V6a6 6 0 0 0-6-6' />
       <path
         fill='#0A559E'
@@ -33,7 +33,7 @@ export const AccountsDmt5FinancialIcon = (
       />
     </g>
     <defs>
-      <clipPath id='c17caf739466c5f2309d4cac9c19cd27__a'>
+      <clipPath id='c48ce9ad56a80dbaf9147d3143330a18__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Accounts/AccountsDmt5SwfIcon.tsx b/src/react/Accounts/AccountsDmt5SwfIcon.tsx
@@ -20,7 +20,7 @@ export const AccountsDmt5SwfIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#459fb9c4921c8183f7551c1bf094a34c__a)'>
+    <g clipPath='url(#532a56794b36202ece0c1e8e9596c9b5__a)'>
       <path fill='#0364B9' d='M26 0H6a6 6 0 0 0-6 6v17.5h32V6a6 6 0 0 0-6-6' />
       <path
         fill='#0A559E'
@@ -33,7 +33,7 @@ export const AccountsDmt5SwfIcon = (
       />
     </g>
     <defs>
-      <clipPath id='459fb9c4921c8183f7551c1bf094a34c__a'>
+      <clipPath id='532a56794b36202ece0c1e8e9596c9b5__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Currencies/CurrencyAdaIcon.tsx b/src/react/Currencies/CurrencyAdaIcon.tsx
@@ -20,7 +20,7 @@ export const CurrencyAdaIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#ab3dde8814f99d0e3a0b3c8008ddd673__a)'>
+    <g clipPath='url(#4487838fdbe60cd3d640a673f38dc044__a)'>
       <path
         fill='#0033AD'
         d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16'
@@ -31,7 +31,7 @@ export const CurrencyAdaIcon = (
       />
     </g>
     <defs>
-      <clipPath id='ab3dde8814f99d0e3a0b3c8008ddd673__a'>
+      <clipPath id='4487838fdbe60cd3d640a673f38dc044__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Currencies/CurrencyAlgoIcon.tsx b/src/react/Currencies/CurrencyAlgoIcon.tsx
@@ -20,7 +20,7 @@ export const CurrencyAlgoIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#d09312cedff84d80d086111b15b444db__a)'>
+    <g clipPath='url(#525939bb4661f464e3abd6fd30eab3e5__a)'>
       <path
         fill='#000'
         d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16'
@@ -31,7 +31,7 @@ export const CurrencyAlgoIcon = (
       />
     </g>
     <defs>
-      <clipPath id='d09312cedff84d80d086111b15b444db__a'>
+      <clipPath id='525939bb4661f464e3abd6fd30eab3e5__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Currencies/CurrencyBatIcon.tsx b/src/react/Currencies/CurrencyBatIcon.tsx
@@ -20,7 +20,7 @@ export const CurrencyBatIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#a239f4ae7c1b3038a1421e06bef70bdd__a)'>
+    <g clipPath='url(#42700b9418ba6619a270ef8ce6813867__a)'>
       <path
         fill='#FF5000'
         d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16'
@@ -33,7 +33,7 @@ export const CurrencyBatIcon = (
       />
     </g>
     <defs>
-      <clipPath id='a239f4ae7c1b3038a1421e06bef70bdd__a'>
+      <clipPath id='42700b9418ba6619a270ef8ce6813867__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Currencies/CurrencyBusdIcon.tsx b/src/react/Currencies/CurrencyBusdIcon.tsx
@@ -20,7 +20,7 @@ export const CurrencyBusdIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#50c106bcd35d89f8746f87f4298576f6__a)'>
+    <g clipPath='url(#918d23744f40222136c5bdba8138cb65__a)'>
       <path
         fill='#F0B90B'
         d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16'
@@ -31,7 +31,7 @@ export const CurrencyBusdIcon = (
       />
     </g>
     <defs>
-      <clipPath id='50c106bcd35d89f8746f87f4298576f6__a'>
+      <clipPath id='918d23744f40222136c5bdba8138cb65__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Currencies/CurrencyDashIcon.tsx b/src/react/Currencies/CurrencyDashIcon.tsx
@@ -20,7 +20,7 @@ export const CurrencyDashIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#d96beb0c9874d3cc112183d4a7471122__a)'>
+    <g clipPath='url(#132113c8e0a78d08aee4e578b83fdbc3__a)'>
       <path
         fill='#4165A5'
         d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16'
@@ -33,7 +33,7 @@ export const CurrencyDashIcon = (
       />
     </g>
     <defs>
-      <clipPath id='d96beb0c9874d3cc112183d4a7471122__a'>
+      <clipPath id='132113c8e0a78d08aee4e578b83fdbc3__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Currencies/CurrencyDogeIcon.tsx b/src/react/Currencies/CurrencyDogeIcon.tsx
@@ -20,7 +20,7 @@ export const CurrencyDogeIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#cb045e59b769cf80cac9765afbec81fd__a)'>
+    <g clipPath='url(#5ea4c01176b28af7cb7cd40b3421046c__a)'>
       <path
         fill='#C2A633'
         d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16'
@@ -754,7 +754,7 @@ export const CurrencyDogeIcon = (
       />
     </g>
     <defs>
-      <clipPath id='cb045e59b769cf80cac9765afbec81fd__a'>
+      <clipPath id='5ea4c01176b28af7cb7cd40b3421046c__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Currencies/CurrencyDotIcon.tsx b/src/react/Currencies/CurrencyDotIcon.tsx
@@ -20,7 +20,7 @@ export const CurrencyDotIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#aa4420b647f5fd849696a42478357473__a)'>
+    <g clipPath='url(#e90e8352c0fa7a3d592ce789519ed67c__a)'>
       <path
         fill='#E6007A'
         d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16'
@@ -31,7 +31,7 @@ export const CurrencyDotIcon = (
       />
     </g>
     <defs>
-      <clipPath id='aa4420b647f5fd849696a42478357473__a'>
+      <clipPath id='e90e8352c0fa7a3d592ce789519ed67c__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Currencies/CurrencyEtcIcon.tsx b/src/react/Currencies/CurrencyEtcIcon.tsx
@@ -20,7 +20,7 @@ export const CurrencyEtcIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#10f54f82899f4aecc307b3b47455be8f__a)'>
+    <g clipPath='url(#75635224b26d4202dba44b0db1889f91__a)'>
       <path
         fill='#0B8311'
         d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16'
@@ -37,7 +37,7 @@ export const CurrencyEtcIcon = (
       <path fill='#5B9C5B' d='m16.039 16.566 7.07-.612-7.067 3.826z' />
     </g>
     <defs>
-      <clipPath id='10f54f82899f4aecc307b3b47455be8f__a'>
+      <clipPath id='75635224b26d4202dba44b0db1889f91__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Currencies/CurrencyEursIcon.tsx b/src/react/Currencies/CurrencyEursIcon.tsx
@@ -20,7 +20,7 @@ export const CurrencyEursIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#dcafece9e9c112cbd81dae49e469fb34__a)'>
+    <g clipPath='url(#4f1ac00d3871354da2c4192dc78f31c4__a)'>
       <path
         fill='#fff'
         d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16'
@@ -33,7 +33,7 @@ export const CurrencyEursIcon = (
       />
     </g>
     <defs>
-      <clipPath id='dcafece9e9c112cbd81dae49e469fb34__a'>
+      <clipPath id='4f1ac00d3871354da2c4192dc78f31c4__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Currencies/CurrencyFilIcon.tsx b/src/react/Currencies/CurrencyFilIcon.tsx
@@ -20,7 +20,7 @@ export const CurrencyFilIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#b565b190017659ba23becfe13c995572__a)'>
+    <g clipPath='url(#646027d00df1df72556b4532fd4fe9b1__a)'>
       <path
         fill='#0090FF'
         d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16'
@@ -33,7 +33,7 @@ export const CurrencyFilIcon = (
       />
     </g>
     <defs>
-      <clipPath id='b565b190017659ba23becfe13c995572__a'>
+      <clipPath id='646027d00df1df72556b4532fd4fe9b1__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Currencies/CurrencyIdkIcon.tsx b/src/react/Currencies/CurrencyIdkIcon.tsx
@@ -20,7 +20,7 @@ export const CurrencyIdkIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#37b7bbf4234c335ff4be94c88accf5b9__a)'>
+    <g clipPath='url(#00d367dc8a2a868129e4ea4f989ef7b3__a)'>
       <path
         fill='#fff'
         d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16'
@@ -31,7 +31,7 @@ export const CurrencyIdkIcon = (
       />
     </g>
     <defs>
-      <clipPath id='37b7bbf4234c335ff4be94c88accf5b9__a'>
+      <clipPath id='00d367dc8a2a868129e4ea4f989ef7b3__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>

diff --git a/src/react/Currencies/CurrencyLinkIcon.tsx b/src/react/Currencies/CurrencyLinkIcon.tsx
@@ -20,7 +20,7 @@ export const CurrencyLinkIcon = (
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <g clipPath='url(#4d53e68d0bf0d01388aa318651104da2__a)'>
+    <g clipPath='url(#738bbce34f91b1ce10e12cd9e244debf__a)'>
       <path
         fill='#2A5ADA'
         d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16'
@@ -31,7 +31,7 @@ export const CurrencyLinkIcon = (
       />
     </g>
     <defs>
-      <clipPath id='4d53e68d0bf0d01388aa318651104da2__a'>
+      <clipPath id='738bbce34f91b1ce10e12cd9e244debf__a'>
         <path fill='#fff' d='M0 0h32v32H0z' />
       </clipPath>
     </defs>