@exponential_app/eui 0.3.0 → 0.4.0

package/fixtures/catalog-components.json

@@ -2885,6 +2885,117 @@
         }
       }
     },
+    {
+      "name": "ZoomableImage/example",
+      "node": {
+        "id": "zoomable-image",
+        "component": "ZoomableImage",
+        "props": {
+          "src": "https://example.com/screenshot.png",
+          "alt": "Screenshot",
+          "naturalWidth": 1440,
+          "naturalHeight": 900
+        }
+      }
+    },
+    {
+      "name": "ZoomableImage/initial=auto",
+      "node": {
+        "id": "zoomable-image",
+        "component": "ZoomableImage",
+        "props": {
+          "src": "https://example.com/screenshot.png",
+          "alt": "Screenshot",
+          "naturalWidth": 1440,
+          "naturalHeight": 900,
+          "initial": "auto"
+        }
+      }
+    },
+    {
+      "name": "ZoomableImage/initial=fit",
+      "node": {
+        "id": "zoomable-image",
+        "component": "ZoomableImage",
+        "props": {
+          "src": "https://example.com/screenshot.png",
+          "alt": "Screenshot",
+          "naturalWidth": 1440,
+          "naturalHeight": 900,
+          "initial": "fit"
+        }
+      }
+    },
+    {
+      "name": "ZoomableImage/initial=fitWidth",
+      "node": {
+        "id": "zoomable-image",
+        "component": "ZoomableImage",
+        "props": {
+          "src": "https://example.com/screenshot.png",
+          "alt": "Screenshot",
+          "naturalWidth": 1440,
+          "naturalHeight": 900,
+          "initial": "fitWidth"
+        }
+      }
+    },
+    {
+      "name": "ZoomableImage/initial=actual",
+      "node": {
+        "id": "zoomable-image",
+        "component": "ZoomableImage",
+        "props": {
+          "src": "https://example.com/screenshot.png",
+          "alt": "Screenshot",
+          "naturalWidth": 1440,
+          "naturalHeight": 900,
+          "initial": "actual"
+        }
+      }
+    },
+    {
+      "name": "ZoomableImage/controls=auto",
+      "node": {
+        "id": "zoomable-image",
+        "component": "ZoomableImage",
+        "props": {
+          "src": "https://example.com/screenshot.png",
+          "alt": "Screenshot",
+          "naturalWidth": 1440,
+          "naturalHeight": 900,
+          "controls": "auto"
+        }
+      }
+    },
+    {
+      "name": "ZoomableImage/controls=always",
+      "node": {
+        "id": "zoomable-image",
+        "component": "ZoomableImage",
+        "props": {
+          "src": "https://example.com/screenshot.png",
+          "alt": "Screenshot",
+          "naturalWidth": 1440,
+          "naturalHeight": 900,
+          "controls": "always"
+        }
+      }
+    },
+    {
+      "name": "ZoomableImage/controls=none",
+      "node": {
+        "id": "zoomable-image",
+        "component": "ZoomableImage",
+        "props": {
+          "src": "https://example.com/screenshot.png",
+          "alt": "Screenshot",
+          "naturalWidth": 1440,
+          "naturalHeight": 900,
+          "controls": "none"
+        }
+      }
+    },
     {
       "name": "Icon/example",
       "node": {
@@ -3333,8 +3444,8 @@
               "value": "issue"
             },
             {
-              "label": "Run",
-              "value": "run"
+              "label": "Session",
+              "value": "session"
             }
           ],
           "value": "issue"
@@ -3362,8 +3473,8 @@
               "value": "issue"
             },
             {
-              "label": "Run",
-              "value": "run"
+              "label": "Session",
+              "value": "session"
             }
           ],
           "value": "issue",
@@ -3392,8 +3503,8 @@
               "value": "issue"
             },
             {
-              "label": "Run",
-              "value": "run"
+              "label": "Session",
+              "value": "session"
             }
           ],
           "value": "issue",
@@ -3422,8 +3533,8 @@
               "value": "issue"
             },
             {
-              "label": "Run",
-              "value": "run"
+              "label": "Session",
+              "value": "session"
             }
           ],
           "value": "issue",
@@ -3452,8 +3563,8 @@
               "value": "issue"
             },
             {
-              "label": "Run",
-              "value": "run"
+              "label": "Session",
+              "value": "session"
             }
           ],
           "value": "issue",
@@ -3482,8 +3593,8 @@
               "value": "issue"
             },
             {
-              "label": "Run",
-              "value": "run"
+              "label": "Session",
+              "value": "session"
             }
           ],
           "value": "issue",
@@ -3512,8 +3623,8 @@
               "value": "issue"
             },
             {
-              "label": "Run",
-              "value": "run"
+              "label": "Session",
+              "value": "session"
             }
           ],
           "value": "issue",
@@ -3542,8 +3653,8 @@
               "value": "issue"
             },
             {
-              "label": "Run",
-              "value": "run"
+              "label": "Session",
+              "value": "session"
             }
           ],
           "value": "issue",
@@ -7375,6 +7486,82 @@
         }
       }
     },
+    {
+      "name": "Table/wide",
+      "node": {
+        "id": "table",
+        "component": "Table",
+        "props": {
+          "columns": [
+            {
+              "key": "issue",
+              "label": "Issue",
+              "width": 96
+            },
+            {
+              "key": "title",
+              "label": "Title"
+            },
+            {
+              "key": "board",
+              "label": "Board"
+            },
+            {
+              "key": "assignee",
+              "label": "Assignee"
+            },
+            {
+              "key": "status",
+              "label": "Status",
+              "type": "badge"
+            },
+            {
+              "key": "summary",
+              "label": "Summary",
+              "truncate": true
+            },
+            {
+              "key": "estimate",
+              "label": "Estimate",
+              "type": "number",
+              "align": "end"
+            }
+          ],
+          "rows": [
+            {
+              "id": "a",
+              "issue": "APP-9",
+              "title": "Fix crash when uploading HEIC photos from the share sheet",
+              "board": "Mobile",
+              "assignee": "Alice Lindqvist",
+              "status": "In progress",
+              "summary": "The share extension hands over a file URL the uploader cannot read once the sheet closes",
+              "estimate": 3
+            },
+            {
+              "id": "b",
+              "issue": "APP-21",
+              "title": "Offline queue for issue edits",
+              "board": "Sync",
+              "assignee": "Bob Okafor",
+              "status": "Todo",
+              "summary": "Edits made without a connection are lost on relaunch",
+              "estimate": 8
+            },
+            {
+              "id": "c",
+              "issue": "APP-18",
+              "title": "Reduce cold start below 800 ms",
+              "board": "Performance",
+              "assignee": "Chen Wei",
+              "status": "Done",
+              "summary": "Defer the sync bootstrap until after the first frame",
+              "estimate": 5
+            }
+          ]
+        }
+      }
+    },
     {
       "name": "Chart/example",
       "node": {
@@ -10384,6 +10571,733 @@
           "status": "read"
         }
       }
+    },
+    {
+      "name": "Motion/example",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ]
+        }
+      }
+    },
+    {
+      "name": "Motion/autoplay=true",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ],
+          "autoplay": true
+        }
+      }
+    },
+    {
+      "name": "Motion/autoplay=false",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ],
+          "autoplay": false
+        }
+      }
+    },
+    {
+      "name": "Motion/loop=true",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ],
+          "loop": true
+        }
+      }
+    },
+    {
+      "name": "Motion/loop=false",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ],
+          "loop": false
+        }
+      }
+    },
+    {
+      "name": "Motion/direction=forward",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ],
+          "direction": "forward"
+        }
+      }
+    },
+    {
+      "name": "Motion/direction=reverse",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ],
+          "direction": "reverse"
+        }
+      }
+    },
+    {
+      "name": "Motion/direction=alternate",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ],
+          "direction": "alternate"
+        }
+      }
+    },
+    {
+      "name": "Motion/play=true",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ],
+          "play": true
+        }
+      }
+    },
+    {
+      "name": "Motion/play=false",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ],
+          "play": false
+        }
+      }
+    },
+    {
+      "name": "Motion/fit=contain",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ],
+          "fit": "contain"
+        }
+      }
+    },
+    {
+      "name": "Motion/fit=cover",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ],
+          "fit": "cover"
+        }
+      }
+    },
+    {
+      "name": "Motion/fit=fill",
+      "node": {
+        "id": "motion",
+        "component": "Motion",
+        "props": {
+          "size": [
+            48,
+            48
+          ],
+          "duration": 1000,
+          "layers": [
+            {
+              "type": "shape",
+              "transform": {
+                "position": [
+                  24,
+                  24
+                ],
+                "rotation": {
+                  "keys": [
+                    {
+                      "t": 0,
+                      "v": 0
+                    },
+                    {
+                      "t": 1000,
+                      "v": 360
+                    }
+                  ]
+                }
+              },
+              "shapes": [
+                {
+                  "type": "ellipse",
+                  "size": [
+                    36,
+                    36
+                  ]
+                },
+                {
+                  "type": "trim",
+                  "end": 70
+                },
+                {
+                  "type": "stroke",
+                  "color": "$color.primary",
+                  "width": 4
+                }
+              ]
+            }
+          ],
+          "fit": "fill"
+        }
+      }
     }
   ]
 }