style: updated spot illus styles to be darkmode friendly (#26)

* style: updated spot illus styles to be darkmode friendly, added new spot illus

* fix naming

* changed: illustration name, and aria labels. added: new spot illustration.

* fix publish illustration, added more info to the contribution guide

* updated contribution docs

---------

Co-authored-by: Julio Ortega <julio.ortega@dialpad.com>

apps/dialtone-documentation/docs/.vuepress/baseComponents/BaseIcon.vue

@@ -2,7 +2,6 @@
   <div
     v-if="!hidden"
     :id="file"
-    class="dialtone-icon-grid__item"
   >
     <aside
       :data-selected="selectedStatus"
@@ -14,9 +13,6 @@
             :is="vue"
           />
         </div>
-        <p class="dialtone-icon-card__subtitle d-tt-capitalize">
-          {{ name }}
-        </p>
       </header>
       <footer :class="cardFooterClass">
         <div class="dialtone-icon-card__content">
@@ -54,6 +50,9 @@ import SpotMaleLaptopTyping from '@dialpad/dialtone/lib/dist/vue/spot/SpotMaleLa
 import SpotFileUpload from '@dialpad/dialtone/lib/dist/vue/spot/SpotFileUpload.vue';
 import SpotBrowserTableGraph from '@dialpad/dialtone/lib/dist/vue/spot/SpotBrowserTableGraph.vue';
 import SpotBrowserListCallout from '@dialpad/dialtone/lib/dist/vue/spot/SpotBrowserListCallout.vue';
+import SpotMind from '@dialpad/dialtone/lib/dist/vue/spot/SpotMind.vue';
+import SpotBlankSpace from '@dialpad/dialtone/lib/dist/vue/spot/SpotBlankSpace.vue';
+import SpotVectorVortex from '@dialpad/dialtone/lib/dist/vue/spot/SpotVectorVortex.vue';
 
 export const ICON_KINDS = ['spot'];
 
@@ -67,6 +66,9 @@ export default {
     SpotFileUpload,
     SpotBrowserTableGraph,
     SpotBrowserListCallout,
+    SpotMind,
+    SpotBlankSpace,
+    SpotVectorVortex,
   },
 
   props: {

apps/dialtone-documentation/docs/_data/svg-spot.json

@@ -11,12 +11,24 @@
     "vue": "SpotBrowserTableGraph",
     "desc": "Browser Table Graph"
   },
+  {
+    "name": "Publish",
+    "file": "publish",
+    "vue": "SpotPublish",
+    "desc": "Publish"
+  },
   {
     "name": "File Upload",
     "file": "file-upload",
     "vue": "SpotFileUpload",
     "desc": "File Upload"
   },
+  {
+    "name": "Wireless Screen Share",
+    "file": "wireless-screenshare",
+    "vue": "SpotWirelessScreenshare",
+    "desc": "Wireless Screen Share"
+  },
   {
     "name": "Male Laptop Typing",
     "file": "male-laptop-typing",
@@ -30,15 +42,21 @@
     "desc": "A woman typing laptop"
   },
   {
-    "name": "Wireless Screen Share",
-    "file": "wireless-screenshare",
-    "vue": "SpotWirelessScreenshare",
-    "desc": "Wireless Screen Share"
+    "name": "Mind",
+    "file": "mind",
+    "vue": "SpotMind",
+    "desc": "Used to prompt user engagement."
   },
   {
-    "name": "Publish",
-    "file": "publish",
-    "vue": "SpotPublish",
-    "desc": "Publish"
+    "name": "Blank Space",
+    "file": "blank-space",
+    "vue": "SpotBlankSpace",
+    "desc": "When there is nothing to display."
+  },
+  {
+    "name": "Vector Vortex",
+    "file": "vector-vortex",
+    "vue": "SpotVectorVortex",
+    "desc": "Suggests layers of security to information."
   }
 ]

apps/dialtone-documentation/docs/about/contributing.md

@@ -40,40 +40,49 @@ If you need to add an icon into Dialtone, here’s how you would go about doing
 5. Open a pull request.
 6. Once approved it can be merged into main and will go out in the next dialtone-icons release.
 
-### For brand icons and spot illustrations
+### For spot illustrations
 
 1. Create a new branch in [dialtone] repo starting with "brand-icon/" or "spot-illustration/" in the name.
-2. Place the exported SVG file(s) in the appropriate folders:
-   - For brand icons: `./lib/build/svg/brand/`
-   - For spot illustrations: `./lib/build/svg/spot/`
-3. **Add icon or pattern information to the correct data file.** Brand SVGs and Spot illustrations have
-   their own data file.
-   - For brand icons: `./docs/_data/svg-brand.json`
-   - For spot illustrations: `./docs/_data/svg-spot.json`
+2. Place the exported SVG file(s) in the appropriate folders: `./lib/build/svg/spot/`
+3. **Add icon or pattern information to the correct data file.** On their own data file: `./docs/_data/svg-spot.json`
 
    The data is pulled from the data files in the ordered it's entered, so you must place it in alphabetical order
    in the data file. Here is an example of information you must provide is:
 
-    ```yaml
-   {
-      "name": "Icon Name",
-      "file": "actual-file-name",
-      "vue": "[Icon|Pattern]Name",
-      "desc": "Description about the icon and where it's used."
-    }
+    ```js
+    "name": "Illustration Name",
+    "file": "actual-file-name",
+    "vue": "[Illustration|Pattern]Name",
+    "desc": "Description about the icon and where it's used."
     ```
 
    - **Name:** This is the name that will appear on the Dialtone website.
    - **File:** This needs to be the exact name of the file minus the .svg file type.
    - **Vue:** This is what the compiled name will be. This is generated by Dialtone, using the above file name.
      It adds the word Icon or Pattern depending on the SVG type. The file name is PascalCased next to it. For example,
      a “label” file would be IconLabel. An “international-calling-alt” file would be IconInternationalCallingAlt.
-   - **Desc:** This is a description about the icon and where it is used.
+   - **Desc:** This is a description about the illustration and where it is used.
+
+4. Import the Illustrations into the `BaseIcon.vue` file:
+
+   ```js
+   import SpotIlluVueName from '@dialpad/dialtone/lib/dist/vue/spot/SpotIlluVueName.vue';
+   ```
+
+5. Also add them in the export / components list:
+
+   ```js
+   export default {
+      components: {
+         SpotIlluVueName,
+      }
+   }
+   ```
 
-4. Verify your changes have been updated on the website by running `pnpm run start` and navigating to `localhost:4000`.
-   If you would like to verify your final output svg file run `pnpm run build` and look in the `./lib/dist/svg` folder
-5. Commit and push your branch to Dialtone.
-6. Open a pull request.
-7. Once approved it can be merged into staging and will go out in the next dialtone release.
+6. Verify your changes have been updated on the website by running `pnpm run start:dialtone` and navigating to `localhost:4000`.
+   If you would like to verify your final output svg file run `pnpm nx build dialtone` and look in the `./lib/dist/svg` folder
+7. Commit and push your branch to Dialtone.
+8. Open a pull request.
+9. Once approved it can be merged into staging and will go out in the next dialtone release.
 
 [dialtone-icons]: https://github.com/dialpad/dialtone-icons "Dialtone Icons"