Add data-object icon (#1738)

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: joseabernardes

.changeset/add-data-object-icon.md

@@ -0,0 +1,6 @@
+---
+"@getflip/swirl-components": minor
+"@getflip/swirl-icons": minor
+---
+
+Add data-object icon

packages/swirl-components/custom-elements.manifest.json

@@ -18346,6 +18346,117 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/swirl-icon/icons/swirl-icon-data-object.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "customElement": true,
+          "tagName": "swirl-icon-data-object",
+          "name": "SwirlIconDataObject",
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                "references": [
+                  {
+                    "name": "SwirlIconColor",
+                    "module": "../swirl-icon"
+                  }
+                ]
+              },
+              "fieldName": "color"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "label"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "16 | 20 | 24 | 28",
+                "references": [
+                  {
+                    "name": "SwirlIconSize",
+                    "module": "../swirl-icon.types"
+                  }
+                ]
+              },
+              "default": "24",
+              "fieldName": "size"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "\"critical\" | \"default\" | \"disabled\" | \"highlight\" | \"info\" | \"on-action-primary\" | \"on-image\" | \"on-status\" | \"on-surface-highlight\" | \"on-surface-highlight-subdued\" | \"strong\" | \"success\" | \"warning\"",
+                "references": [
+                  {
+                    "name": "SwirlIconColor",
+                    "module": "../swirl-icon"
+                  }
+                ]
+              },
+              "readonly": true,
+              "attribute": "color"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true,
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "16 | 20 | 24 | 28",
+                "references": [
+                  {
+                    "name": "SwirlIconSize",
+                    "module": "../swirl-icon.types"
+                  }
+                ]
+              },
+              "default": "24",
+              "readonly": true,
+              "attribute": "size"
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "icon"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SwirlIconDataObject",
+          "declaration": {
+            "name": "SwirlIconDataObject"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "swirl-icon-data-object",
+          "declaration": {
+            "name": "SwirlIconDataObject"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/swirl-icon/icons/swirl-icon-date-range.tsx",

packages/swirl-components/icons.json

@@ -1823,6 +1823,14 @@ export namespace Components {
          */
         "size": SwirlIconSize;
     }
+    interface SwirlIconDataObject {
+        "color"?: SwirlIconColor1;
+        "label"?: string;
+        /**
+          * @default 24
+         */
+        "size": SwirlIconSize;
+    }
     interface SwirlIconDateRange {
         "color"?: SwirlIconColor1;
         "label"?: string;
@@ -7019,6 +7027,12 @@ declare global {
         prototype: HTMLSwirlIconDarkModeElement;
         new (): HTMLSwirlIconDarkModeElement;
     };
+    interface HTMLSwirlIconDataObjectElement extends Components.SwirlIconDataObject, HTMLStencilElement {
+    }
+    var HTMLSwirlIconDataObjectElement: {
+        prototype: HTMLSwirlIconDataObjectElement;
+        new (): HTMLSwirlIconDataObjectElement;
+    };
     interface HTMLSwirlIconDateRangeElement extends Components.SwirlIconDateRange, HTMLStencilElement {
     }
     var HTMLSwirlIconDateRangeElement: {
@@ -9889,6 +9903,7 @@ declare global {
         "swirl-icon-copy": HTMLSwirlIconCopyElement;
         "swirl-icon-crop": HTMLSwirlIconCropElement;
         "swirl-icon-dark-mode": HTMLSwirlIconDarkModeElement;
+        "swirl-icon-data-object": HTMLSwirlIconDataObjectElement;
         "swirl-icon-date-range": HTMLSwirlIconDateRangeElement;
         "swirl-icon-delete": HTMLSwirlIconDeleteElement;
         "swirl-icon-deployed-code": HTMLSwirlIconDeployedCodeElement;
@@ -11871,6 +11886,14 @@ declare namespace LocalJSX {
          */
         "size"?: SwirlIconSize;
     }
+    interface SwirlIconDataObject {
+        "color"?: SwirlIconColor1;
+        "label"?: string;
+        /**
+          * @default 24
+         */
+        "size"?: SwirlIconSize;
+    }
     interface SwirlIconDateRange {
         "color"?: SwirlIconColor1;
         "label"?: string;
@@ -16536,6 +16559,11 @@ declare namespace LocalJSX {
         "label": string;
         "size": SwirlIconSize;
     }
+    interface SwirlIconDataObjectAttributes {
+        "color": SwirlIconColor;
+        "label": string;
+        "size": SwirlIconSize;
+    }
     interface SwirlIconDateRangeAttributes {
         "color": SwirlIconColor;
         "label": string;
@@ -18702,6 +18730,7 @@ declare namespace LocalJSX {
         "swirl-icon-copy": Omit<SwirlIconCopy, keyof SwirlIconCopyAttributes> & { [K in keyof SwirlIconCopy & keyof SwirlIconCopyAttributes]?: SwirlIconCopy[K] } & { [K in keyof SwirlIconCopy & keyof SwirlIconCopyAttributes as `attr:${K}`]?: SwirlIconCopyAttributes[K] } & { [K in keyof SwirlIconCopy & keyof SwirlIconCopyAttributes as `prop:${K}`]?: SwirlIconCopy[K] };
         "swirl-icon-crop": Omit<SwirlIconCrop, keyof SwirlIconCropAttributes> & { [K in keyof SwirlIconCrop & keyof SwirlIconCropAttributes]?: SwirlIconCrop[K] } & { [K in keyof SwirlIconCrop & keyof SwirlIconCropAttributes as `attr:${K}`]?: SwirlIconCropAttributes[K] } & { [K in keyof SwirlIconCrop & keyof SwirlIconCropAttributes as `prop:${K}`]?: SwirlIconCrop[K] };
         "swirl-icon-dark-mode": Omit<SwirlIconDarkMode, keyof SwirlIconDarkModeAttributes> & { [K in keyof SwirlIconDarkMode & keyof SwirlIconDarkModeAttributes]?: SwirlIconDarkMode[K] } & { [K in keyof SwirlIconDarkMode & keyof SwirlIconDarkModeAttributes as `attr:${K}`]?: SwirlIconDarkModeAttributes[K] } & { [K in keyof SwirlIconDarkMode & keyof SwirlIconDarkModeAttributes as `prop:${K}`]?: SwirlIconDarkMode[K] };
+        "swirl-icon-data-object": Omit<SwirlIconDataObject, keyof SwirlIconDataObjectAttributes> & { [K in keyof SwirlIconDataObject & keyof SwirlIconDataObjectAttributes]?: SwirlIconDataObject[K] } & { [K in keyof SwirlIconDataObject & keyof SwirlIconDataObjectAttributes as `attr:${K}`]?: SwirlIconDataObjectAttributes[K] } & { [K in keyof SwirlIconDataObject & keyof SwirlIconDataObjectAttributes as `prop:${K}`]?: SwirlIconDataObject[K] };
         "swirl-icon-date-range": Omit<SwirlIconDateRange, keyof SwirlIconDateRangeAttributes> & { [K in keyof SwirlIconDateRange & keyof SwirlIconDateRangeAttributes]?: SwirlIconDateRange[K] } & { [K in keyof SwirlIconDateRange & keyof SwirlIconDateRangeAttributes as `attr:${K}`]?: SwirlIconDateRangeAttributes[K] } & { [K in keyof SwirlIconDateRange & keyof SwirlIconDateRangeAttributes as `prop:${K}`]?: SwirlIconDateRange[K] };
         "swirl-icon-delete": Omit<SwirlIconDelete, keyof SwirlIconDeleteAttributes> & { [K in keyof SwirlIconDelete & keyof SwirlIconDeleteAttributes]?: SwirlIconDelete[K] } & { [K in keyof SwirlIconDelete & keyof SwirlIconDeleteAttributes as `attr:${K}`]?: SwirlIconDeleteAttributes[K] } & { [K in keyof SwirlIconDelete & keyof SwirlIconDeleteAttributes as `prop:${K}`]?: SwirlIconDelete[K] };
         "swirl-icon-deployed-code": Omit<SwirlIconDeployedCode, keyof SwirlIconDeployedCodeAttributes> & { [K in keyof SwirlIconDeployedCode & keyof SwirlIconDeployedCodeAttributes]?: SwirlIconDeployedCode[K] } & { [K in keyof SwirlIconDeployedCode & keyof SwirlIconDeployedCodeAttributes as `attr:${K}`]?: SwirlIconDeployedCodeAttributes[K] } & { [K in keyof SwirlIconDeployedCode & keyof SwirlIconDeployedCodeAttributes as `prop:${K}`]?: SwirlIconDeployedCode[K] };
@@ -19218,6 +19247,7 @@ declare module "@stencil/core" {
             "swirl-icon-copy": LocalJSX.IntrinsicElements["swirl-icon-copy"] & JSXBase.HTMLAttributes<HTMLSwirlIconCopyElement>;
             "swirl-icon-crop": LocalJSX.IntrinsicElements["swirl-icon-crop"] & JSXBase.HTMLAttributes<HTMLSwirlIconCropElement>;
             "swirl-icon-dark-mode": LocalJSX.IntrinsicElements["swirl-icon-dark-mode"] & JSXBase.HTMLAttributes<HTMLSwirlIconDarkModeElement>;
+            "swirl-icon-data-object": LocalJSX.IntrinsicElements["swirl-icon-data-object"] & JSXBase.HTMLAttributes<HTMLSwirlIconDataObjectElement>;
             "swirl-icon-date-range": LocalJSX.IntrinsicElements["swirl-icon-date-range"] & JSXBase.HTMLAttributes<HTMLSwirlIconDateRangeElement>;
             "swirl-icon-delete": LocalJSX.IntrinsicElements["swirl-icon-delete"] & JSXBase.HTMLAttributes<HTMLSwirlIconDeleteElement>;
             "swirl-icon-deployed-code": LocalJSX.IntrinsicElements["swirl-icon-deployed-code"] & JSXBase.HTMLAttributes<HTMLSwirlIconDeployedCodeElement>;

packages/swirl-components/src/components.d.ts

@@ -0,0 +1,70 @@
+// DO NOT EDIT. THIS FILE GETS GENERATED VIA "yarn generate".
+
+import { Component, Fragment, h, Prop } from "@stencil/core";
+import { SwirlIconSize } from "../swirl-icon.types";
+import { SwirlIconColor } from "../swirl-icon";
+import classnames from "classnames";
+
+@Component({
+  shadow: true,
+  styleUrl: "../swirl-icon.css",
+  tag: "swirl-icon-data-object",
+})
+export class SwirlIconDataObject {
+  @Prop() color?: SwirlIconColor;
+  @Prop() label?: string;
+  @Prop() size: SwirlIconSize = 24;
+
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+
+    const styles = {
+      color: Boolean(this.color) ? `var(--s-icon-${this.color})` : undefined,
+    };
+
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+
+    const hasLabel = Boolean(this.label);
+
+    return (
+      <svg
+        aria-hidden={hasLabel ? undefined : "true"}
+        class={className}
+        fill="none"
+        height={this.size}
+        part="icon"
+        role={hasLabel ? "img" : undefined}
+        style={styles}
+        viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+        width={this.size}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {hasLabel && <title>{this.label}</title>}
+        {this.size === 16 && (
+          <Fragment>
+            <path
+              d="M10 13.3333q-0.2833 0-0.475-0.1916T9.3333 12.6667q0-0.2833 0.1917-0.475T10 12h1.3333q0.2833 0 0.475-0.1917T12 11.3333v-1.3333q0-0.6333 0.3667-1.15t0.9666-0.7333v-0.2334q-0.6-0.2167-0.9666-0.7333t-0.3667-1.15v-1.3333q0-0.2833-0.1917-0.475T11.3333 4h-1.3333q-0.2833 0-0.475-0.1917T9.3333 3.3333q0-0.2833 0.1917-0.475T10 2.6667h1.3333q0.8333 0 1.4167 0.5833t0.5833 1.4167v1.3333q0 0.2833 0.1917 0.475T14 6.6667t0.475 0.1916Q14.6667 7.05 14.6667 7.3333v1.3334q0 0.2833-0.1917 0.475T14 9.3333t-0.475 0.1917Q13.3333 9.7167 13.3333 10v1.3333q0 0.8333-0.5833 1.4167t-1.4167 0.5833h-1.3333Zm-5.3333 0q-0.8333 0-1.4167-0.5833t-0.5833-1.4167v-1.3333q0-0.2833-0.1917-0.475T2 9.3333t-0.475-0.1916Q1.3333 8.95 1.3333 8.6667v-1.3334q0-0.2833 0.1917-0.475T2 6.6667t0.475-0.1917Q2.6667 6.2833 2.6667 6v-1.3333q0-0.8333 0.5833-1.4167t1.4167-0.5833h1.3333q0.2833 0 0.475 0.1916T6.6667 3.3333q0 0.2833-0.1917 0.475T6 4h-1.3333q-0.2833 0-0.475 0.1917T4 4.6667v1.3333q0 0.6333-0.3667 1.15t-0.9666 0.7333v0.2334q0.6 0.2167 0.9666 0.7333t0.3667 1.15v1.3333q0 0.2833 0.1917 0.475T4.6667 12h1.3333q0.2833 0 0.475 0.1917T6.6667 12.6667q0 0.2833-0.1917 0.475T6 13.3333h-1.3333Z"
+              fill="currentColor"
+            />
+          </Fragment>
+        )}
+        {(this.size === 20 || this.size === 24) && (
+          <Fragment>
+            <path
+              d="M15 20q-0.425 0-0.7125-0.2875T14 19q0-0.425 0.2875-0.7125T15 18h2q0.425 0 0.7125-0.2875T18 17v-2q0-0.95 0.55-1.725t1.45-1.1v-0.35q-0.9-0.325-1.45-1.1t-0.55-1.725v-2q0-0.425-0.2875-0.7125T17 6h-2q-0.425 0-0.7125-0.2875T14 5q0-0.425 0.2875-0.7125T15 4h2q1.25 0 2.125 0.875t0.875 2.125v2q0 0.425 0.2875 0.7125T21 10t0.7125 0.2875Q22 10.575 22 11v2q0 0.425-0.2875 0.7125T21 14t-0.7125 0.2875Q20 14.575 20 15v2q0 1.25-0.875 2.125t-2.125 0.875h-2Zm-8 0q-1.25 0-2.125-0.875t-0.875-2.125v-2q0-0.425-0.2875-0.7125T3 14t-0.7125-0.2875Q2 13.425 2 13v-2q0-0.425 0.2875-0.7125T3 10t0.7125-0.2875Q4 9.425 4 9v-2q0-1.25 0.875-2.125t2.125-0.875h2q0.425 0 0.7125 0.2875T10 5q0 0.425-0.2875 0.7125T9 6h-2q-0.425 0-0.7125 0.2875T6 7v2q0 0.95-0.55 1.725t-1.45 1.1v0.35q0.9 0.325 1.45 1.1t0.55 1.725v2q0 0.425 0.2875 0.7125T7 18h2q0.425 0 0.7125 0.2875T10 19q0 0.425-0.2875 0.7125T9 20h-2Z"
+              fill="currentColor"
+            />
+          </Fragment>
+        )}
+        {this.size === 28 && (
+          <Fragment>
+            <path
+              d="M17.5 23.3333q-0.4958 0-0.8313-0.3354T16.3333 22.1667q0-0.4958 0.3354-0.8313T17.5 21h2.3333q0.4958 0 0.8313-0.3354T21 19.8333v-2.3333q0-1.1083 0.6417-2.0125t1.6916-1.2833v-0.4084q-1.05-0.3792-1.6916-1.2833t-0.6417-2.0125v-2.3333q0-0.4958-0.3354-0.8313T19.8333 7h-2.3333q-0.4958 0-0.8313-0.3354T16.3333 5.8333q0-0.4958 0.3354-0.8312T17.5 4.6667h2.3333q1.4583 0 2.4792 1.0208t1.0208 2.4792v2.3333q0 0.4958 0.3355 0.8313T24.5 11.6667t0.8313 0.3354Q25.6667 12.3375 25.6667 12.8333v2.3334q0 0.4958-0.3354 0.8312T24.5 16.3333t-0.8313 0.3355Q23.3333 17.0042 23.3333 17.5v2.3333q0 1.4583-1.0208 2.4792t-2.4792 1.0208h-2.3333Zm-9.3333 0q-1.4583 0-2.4792-1.0208t-1.0208-2.4792v-2.3333q0-0.4958-0.3355-0.8313T3.5 16.3333t-0.8313-0.3354Q2.3333 15.6625 2.3333 15.1667v-2.3334q0-0.4958 0.3355-0.8312T3.5 11.6667t0.8313-0.3354Q4.6667 10.9958 4.6667 10.5v-2.3333q0-1.4583 1.0208-2.4792t2.4792-1.0208h2.3333q0.4958 0 0.8313 0.3354T11.6667 5.8333q0 0.4958-0.3355 0.8313T10.5 7h-2.3333q-0.4958 0-0.8313 0.3354T7 8.1667v2.3333q0 1.1083-0.6417 2.0125t-1.6916 1.2833v0.4084q1.05 0.3792 1.6916 1.2833t0.6417 2.0125v2.3333q0 0.4958 0.3354 0.8313T8.1667 21h2.3333q0.4958 0 0.8312 0.3354T11.6667 22.1667q0 0.4958-0.3355 0.8312T10.5 23.3333h-2.3333Z"
+              fill="currentColor"
+            />
+          </Fragment>
+        )}
+      </svg>
+    );
+  }
+}

packages/swirl-components/src/components/swirl-icon/icons/swirl-icon-data-object.tsx

@@ -7628,6 +7628,68 @@
         }
       ]
     },
+    {
+      "name": "swirl-icon-data-object",
+      "description": {
+        "kind": "markdown",
+        "value": ""
+      },
+      "attributes": [
+        {
+          "name": "color",
+          "description": "",
+          "values": [
+            {
+              "name": "critical"
+            },
+            {
+              "name": "default"
+            },
+            {
+              "name": "disabled"
+            },
+            {
+              "name": "highlight"
+            },
+            {
+              "name": "info"
+            },
+            {
+              "name": "on-action-primary"
+            },
+            {
+              "name": "on-image"
+            },
+            {
+              "name": "on-status"
+            },
+            {
+              "name": "on-surface-highlight"
+            },
+            {
+              "name": "on-surface-highlight-subdued"
+            },
+            {
+              "name": "strong"
+            },
+            {
+              "name": "success"
+            },
+            {
+              "name": "warning"
+            }
+          ]
+        },
+        {
+          "name": "label",
+          "description": ""
+        },
+        {
+          "name": "size",
+          "description": ""
+        }
+      ]
+    },
     {
       "name": "swirl-icon-date-range",
       "description": {

packages/swirl-components/vscode-data.json

@@ -59,6 +59,6 @@ have to be named in PascalCase followed by the size, e.g. `AddPhoto16.svg`!**
 
 1. Modify the icon files in a new branch
 2. Run `yarn generate`, select "icons" when prompted
-3. Run `yarn changeset` to create a corresponding changelog item
-4. Run `yarn build`
+3. Run `yarn build`
+4. Run `yarn changeset` to create a corresponding changelog item
 5. Check, commit and push all changes and create a PR