docs(icon-demo): add an icon demo to display all icons

Teradata · Dec 26, 2024 · e7ff32b · e7ff32b
1 parent 6cc7b89
commit e7ff32b
Show file tree

Hide file tree

Showing 18 changed files with 580 additions and 338 deletions.
diff --git a/apps/knapsack/data/blocks/block.FvKIrSQgq0.json b/apps/knapsack/data/blocks/block.FvKIrSQgq0.json
@@ -0,0 +1,10 @@
+{
+  "id": "FvKIrSQgq0",
+  "blockType": "pattern-template-block",
+  "data": {
+    "patternId": "icon",
+    "demoId": "iPghK4UYBt",
+    "templateId": "web-components-Pnw8Nf0oOd",
+    "hideControls": true
+  }
+}
diff --git a/apps/knapsack/data/demos/demo.iPghK4UYBt.json b/apps/knapsack/data/demos/demo.iPghK4UYBt.json
@@ -0,0 +1,11 @@
+{
+  "id": "iPghK4UYBt",
+  "title": "Main",
+  "type": "data",
+  "patternId": "icon",
+  "templateId": "web-components-Pnw8Nf0oOd",
+  "data": {
+    "props": {},
+    "slots": {}
+  }
+}
diff --git a/apps/knapsack/data/knapsack.asset-sets.json b/apps/knapsack/data/knapsack.asset-sets.json
@@ -5,6 +5,12 @@
       "id": "light",
       "title": "Light",
       "assets": [
+        {
+          "src": "../../../libs/icons/covalent-icons.css",
+          "attributes": {
+            "type": "text/css"
+          }
+        },
         {
           "src": "../../../dist/libs/components/index.mjs",
           "includedRenderers": ["web-components"],
@@ -40,6 +46,12 @@
       "id": "dark",
       "title": "Dark",
       "assets": [
+        {
+          "src": "../../../libs/icons/covalent-icons.css",
+          "attributes": {
+            "type": "text/css"
+          }
+        },
         {
           "src": "../../../dist/libs/components/index.mjs",
           "includedRenderers": ["web-components"],

diff --git a/apps/knapsack/data/knapsack.pattern.icon.json b/apps/knapsack/data/knapsack.pattern.icon.json
@@ -35,6 +35,26 @@
       },
       "demoIds": ["bn4zy44TYR", "Xr7IHJQ1", "8VqxwwTyJ", "ezyQjAA-T1"],
       "blockIds": ["Wi5zWBMuy7"]
+    },
+    {
+      "id": "web-components-Pnw8Nf0oOd",
+      "title": "All icons",
+      "alias": "cv-icon-demo",
+      "templateLanguageId": "web-components",
+      "spec": {
+        "slots": {},
+        "props": {
+          "$schema": "http://json-schema.org/draft-07/schema",
+          "description": "Symbol representing an action, object, or concept.",
+          "type": "object",
+          "required": [],
+          "properties": {}
+        },
+        "propOrder": [],
+        "slotOrder": []
+      },
+      "demoIds": ["iPghK4UYBt"],
+      "blockIds": []
     }
   ],
   "tabs": [
@@ -49,13 +69,18 @@
     {
       "id": "1KDWoTAzr",
       "type": "designSrc"
+    },
+    {
+      "type": "template",
+      "id": "web-components-Pnw8Nf0oOd",
+      "minRoleNeeded": "CONTRIBUTOR"
     }
   ],
   "subPages": [
     {
       "id": "overview",
       "title": "Overview",
-      "blockIds": []
+      "blockIds": ["FvKIrSQgq0"]
     }
   ],
   "designSrcComponentsById": {

diff --git a/apps/knapsack/dist/meta/icon-lockup/icon-lockup.web-components-RPcggDLyDK.spec.d.ts b/apps/knapsack/dist/meta/icon-lockup/icon-lockup.web-components-RPcggDLyDK.spec.d.ts
@@ -27,21 +27,17 @@ export interface IconLockup {
   scale?:
     | 'body1'
     | 'body2'
-    | 'button'
     | 'caption'
     | 'headline1'
     | 'headline2'
     | 'headline3'
     | 'headline4'
     | 'headline5'
     | 'headline6'
-    | 'overline'
     | 'subtitle1'
-    | 'subtitle2';
-  /**
-   * If true, the icon is displayed after the text (trailing).
-   */
-  trailingIcon?: boolean;
+    | 'subtitle2'
+    | 'overline'
+    | 'button';
   /**
    * State of the component, used to apply different styles based on status.
    */

diff --git a/apps/knapsack/dist/meta/icon-lockup/icon-lockup.web-components-RPcggDLyDK.spec.json b/apps/knapsack/dist/meta/icon-lockup/icon-lockup.web-components-RPcggDLyDK.spec.json
@@ -17,25 +17,21 @@
       "enum": [
         "body1",
         "body2",
-        "button",
         "caption",
         "headline1",
         "headline2",
         "headline3",
         "headline4",
         "headline5",
         "headline6",
-        "overline",
         "subtitle1",
-        "subtitle2"
+        "subtitle2",
+        "overline",
+        "button"
       ],
       "default": "body1",
       "description": "Scale of the component, controlling font-size and icon size. Default is \"body1\", but it can be set to other typography values to scale the component."
     },
-    "trailingIcon": {
-      "type": "boolean",
-      "description": "If true, the icon is displayed after the text (trailing)."
-    },
     "state": {
       "description": "State of the component, used to apply different styles based on status.",
       "type": "string",

diff --git a/apps/knapsack/dist/meta/icon/icon.web-components-Pnw8Nf0oOd.spec.d.ts b/apps/knapsack/dist/meta/icon/icon.web-components-Pnw8Nf0oOd.spec.d.ts
@@ -0,0 +1,11 @@
+/**
+ * patternId: "icon" templateId: "web-components-Pnw8Nf0oOd"
+ * This file was automatically generated by Knapsack.
+ * DO NOT MODIFY IT BY HAND.
+ * Instead, adjust it's spec, by either:
+ * 1) go to "/patterns/icon/web-components-Pnw8Nf0oOd" and use the UI to edit the spec
+ * 2) OR edit the "knapsack.pattern.icon.json" file's "spec.props".
+ * Run Knapsack again to regenerate this file.
+ */
+
+export interface Icon {}
diff --git a/apps/knapsack/dist/meta/icon/icon.web-components-Pnw8Nf0oOd.spec.json b/apps/knapsack/dist/meta/icon/icon.web-components-Pnw8Nf0oOd.spec.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema",
+  "description": "Symbol representing an action, object, or concept.",
+  "type": "object",
+  "required": [],
+  "properties": {}
+}
diff --git a/apps/knapsack/dist/meta/knapsack.html-data.json b/apps/knapsack/dist/meta/knapsack.html-data.json
@@ -843,6 +843,17 @@
         }
       ]
     },
+    {
+      "name": "cv-icon-demo",
+      "description": "Symbol representing an action, object, or concept.",
+      "references": [
+        {
+          "name": "Knapsack Docs",
+          "url": "http://localhost:3999/pattern/icon/web-components-Pnw8Nf0oOd"
+        }
+      ],
+      "attributes": []
+    },
     {
       "name": "cv-icon-button",
       "description": "Button with an icon as the primary visual element.",
@@ -982,9 +993,6 @@
             {
               "name": "body2"
             },
-            {
-              "name": "button"
-            },
             {
               "name": "caption"
             },
@@ -1006,22 +1014,21 @@
             {
               "name": "headline6"
             },
-            {
-              "name": "overline"
-            },
             {
               "name": "subtitle1"
             },
             {
               "name": "subtitle2"
+            },
+            {
+              "name": "overline"
+            },
+            {
+              "name": "button"
             }
           ],
           "description": "Scale of the component, controlling font-size and icon size. Default is \"body1\", but it can be set to other typography values to scale the component."
         },
-        {
-          "name": "trailingIcon",
-          "description": "boolean If true, the icon is displayed after the text (trailing)."
-        },
         {
           "name": "state",
           "values": [

diff --git a/apps/knapsack/dist/meta/ks-meta.json b/apps/knapsack/dist/meta/ks-meta.json
@@ -774,6 +774,20 @@
       "assetSetId": "dark",
       "url": "/api/v1/render?patternId=icon&templateId=web-components-N8bzRbfpuX&assetSetId=dark&demoId=ezyQjAA-T1&isInIframe=false&wrapHtml=true"
     },
+    {
+      "patternId": "icon",
+      "templateId": "web-components-Pnw8Nf0oOd",
+      "demoId": "iPghK4UYBt",
+      "assetSetId": "light",
+      "url": "/api/v1/render?patternId=icon&templateId=web-components-Pnw8Nf0oOd&assetSetId=light&demoId=iPghK4UYBt&isInIframe=false&wrapHtml=true"
+    },
+    {
+      "patternId": "icon",
+      "templateId": "web-components-Pnw8Nf0oOd",
+      "demoId": "iPghK4UYBt",
+      "assetSetId": "dark",
+      "url": "/api/v1/render?patternId=icon&templateId=web-components-Pnw8Nf0oOd&assetSetId=dark&demoId=iPghK4UYBt&isInIframe=false&wrapHtml=true"
+    },
     {
       "patternId": "icon-button",
       "templateId": "web-components-ctiCe2sAX",
@@ -900,6 +914,76 @@
       "assetSetId": "dark",
       "url": "/api/v1/render?patternId=icon-lockup&templateId=web-components-RPcggDLyDK&assetSetId=dark&demoId=6A9yqTSh6x&isInIframe=false&wrapHtml=true"
     },
+    {
+      "patternId": "icon-lockup",
+      "templateId": "web-components-RPcggDLyDK",
+      "demoId": "YIH9EOiP",
+      "assetSetId": "light",
+      "url": "/api/v1/render?patternId=icon-lockup&templateId=web-components-RPcggDLyDK&assetSetId=light&demoId=YIH9EOiP&isInIframe=false&wrapHtml=true"
+    },
+    {
+      "patternId": "icon-lockup",
+      "templateId": "web-components-RPcggDLyDK",
+      "demoId": "YIH9EOiP",
+      "assetSetId": "dark",
+      "url": "/api/v1/render?patternId=icon-lockup&templateId=web-components-RPcggDLyDK&assetSetId=dark&demoId=YIH9EOiP&isInIframe=false&wrapHtml=true"
+    },
+    {
+      "patternId": "icon-lockup",
+      "templateId": "web-components-RPcggDLyDK",
+      "demoId": "cGWFzjIg8i",
+      "assetSetId": "light",
+      "url": "/api/v1/render?patternId=icon-lockup&templateId=web-components-RPcggDLyDK&assetSetId=light&demoId=cGWFzjIg8i&isInIframe=false&wrapHtml=true"
+    },
+    {
+      "patternId": "icon-lockup",
+      "templateId": "web-components-RPcggDLyDK",
+      "demoId": "cGWFzjIg8i",
+      "assetSetId": "dark",
+      "url": "/api/v1/render?patternId=icon-lockup&templateId=web-components-RPcggDLyDK&assetSetId=dark&demoId=cGWFzjIg8i&isInIframe=false&wrapHtml=true"
+    },
+    {
+      "patternId": "icon-lockup",
+      "templateId": "web-components-RPcggDLyDK",
+      "demoId": "fekA6wwl9K",
+      "assetSetId": "light",
+      "url": "/api/v1/render?patternId=icon-lockup&templateId=web-components-RPcggDLyDK&assetSetId=light&demoId=fekA6wwl9K&isInIframe=false&wrapHtml=true"
+    },
+    {
+      "patternId": "icon-lockup",
+      "templateId": "web-components-RPcggDLyDK",
+      "demoId": "fekA6wwl9K",
+      "assetSetId": "dark",
+      "url": "/api/v1/render?patternId=icon-lockup&templateId=web-components-RPcggDLyDK&assetSetId=dark&demoId=fekA6wwl9K&isInIframe=false&wrapHtml=true"
+    },
+    {
+      "patternId": "icon-lockup",
+      "templateId": "web-components-RPcggDLyDK",
+      "demoId": "8mt1FePOgA",
+      "assetSetId": "light",
+      "url": "/api/v1/render?patternId=icon-lockup&templateId=web-components-RPcggDLyDK&assetSetId=light&demoId=8mt1FePOgA&isInIframe=false&wrapHtml=true"
+    },
+    {
+      "patternId": "icon-lockup",
+      "templateId": "web-components-RPcggDLyDK",
+      "demoId": "8mt1FePOgA",
+      "assetSetId": "dark",
+      "url": "/api/v1/render?patternId=icon-lockup&templateId=web-components-RPcggDLyDK&assetSetId=dark&demoId=8mt1FePOgA&isInIframe=false&wrapHtml=true"
+    },
+    {
+      "patternId": "icon-lockup",
+      "templateId": "web-components-RPcggDLyDK",
+      "demoId": "mnXbWmndnd",
+      "assetSetId": "light",
+      "url": "/api/v1/render?patternId=icon-lockup&templateId=web-components-RPcggDLyDK&assetSetId=light&demoId=mnXbWmndnd&isInIframe=false&wrapHtml=true"
+    },
+    {
+      "patternId": "icon-lockup",
+      "templateId": "web-components-RPcggDLyDK",
+      "demoId": "mnXbWmndnd",
+      "assetSetId": "dark",
+      "url": "/api/v1/render?patternId=icon-lockup&templateId=web-components-RPcggDLyDK&assetSetId=dark&demoId=mnXbWmndnd&isInIframe=false&wrapHtml=true"
+    },
     {
       "patternId": "icon-radio",
       "templateId": "web-components-gmBL6Mhy4",

diff --git a/libs/components/package.json b/libs/components/package.json
@@ -121,6 +121,11 @@
       "import": "./icon.mjs",
       "require": "./icon.js"
     },
+    "./icon-demo": {
+      "types": "./icon/icon-demo.d.ts",
+      "import": "./icon-demo.mjs",
+      "require": "./icon-demo.js"
+    },
     "./icon-button": {
       "types": "./icon-button/icon-button.d.ts",
       "import": "./icon-button.mjs",