@cloudflare/component-icon 13.3.1 → 13.3.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 13.3.2
+
+### Patch Changes
+
+- 5393268e6c: Add Icon Storybook stories dynamically
+
 ## 13.3.1
 
 ### Patch Changes

package/dist/Icon.stories.d.ts

@@ -85,16 +85,4 @@ declare const _default: ComponentMeta<React.ComponentType<{
     gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
 }>>;
 export default _default;
-export declare const AIAudit: () => JSX.Element;
-export declare const Captcha: () => JSX.Element;
-export declare const CloudflareEmailSecurity: () => JSX.Element;
-export declare const CloudMulti: () => JSX.Element;
-export declare const CloudInternet: () => JSX.Element;
-export declare const Garbage: () => JSX.Element;
-export declare const Inbox: () => JSX.Element;
-export declare const Spectrum: () => JSX.Element;
-export declare const Table: () => JSX.Element;
-export declare const ThumbsUp: () => JSX.Element;
-export declare const ThumbsDown: () => JSX.Element;
-export declare const CaretReorder2: () => JSX.Element;
-export declare const Pin: () => JSX.Element;
+export declare const AllIcons: () => JSX.Element;

package/es/Icon.stories.js

@@ -1,67 +1,28 @@
 import React from 'react';
 import Icon from './Icon';
+import IconComponents from './reactsvgs';
+var iconTypes = Object.keys(IconComponents);
 export default {
   title: 'Example/Icon',
   component: Icon
 };
-export var AIAudit = () => /*#__PURE__*/React.createElement(Icon, {
-  type: "ai-audit",
-  size: 36
-});
-export var Captcha = () => /*#__PURE__*/React.createElement(Icon, {
-  type: "captcha-outline",
-  size: 36
-});
-export var CloudflareEmailSecurity = () => /*#__PURE__*/React.createElement(Icon, {
-  type: "cloudflare-email-security",
-  size: 36
-});
-export var CloudMulti = () => /*#__PURE__*/React.createElement(Icon, {
-  type: "cloud-multi",
-  size: 36
-});
-export var CloudInternet = () => /*#__PURE__*/React.createElement(Icon, {
-  type: "cloud-internet",
-  size: 36
-});
-export var Garbage = () => /*#__PURE__*/React.createElement(Icon, {
-  type: "garbage",
-  size: 36
-});
-export var Inbox = () => /*#__PURE__*/React.createElement(Icon, {
-  type: "inbox",
-  size: 36
-});
-export var Spectrum = () => /*#__PURE__*/React.createElement(Icon, {
-  type: "spectrum",
-  size: 36
-});
-export var Table = () => /*#__PURE__*/React.createElement(Icon, {
-  type: "table",
-  size: 36
-});
-export var ThumbsUp = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-  type: "thumbs-up-solid",
-  size: 36
-}), /*#__PURE__*/React.createElement(Icon, {
-  type: "thumbs-up-outline",
-  size: 36
-}));
-export var ThumbsDown = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-  type: "thumbs-down-solid",
-  size: 36
-}), /*#__PURE__*/React.createElement(Icon, {
-  type: "thumbs-down-outline",
-  size: 36
-}));
-export var CaretReorder2 = () => /*#__PURE__*/React.createElement(Icon, {
-  type: "caret-reorder2",
-  size: 36
-});
-export var Pin = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-  type: "pin-solid",
-  size: 36
-}), /*#__PURE__*/React.createElement(Icon, {
-  type: "pin-outline",
-  size: 36
-}));
+export var AllIcons = () => /*#__PURE__*/React.createElement("div", {
+  style: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
+    gap: 16
+  }
+}, iconTypes.map(type => /*#__PURE__*/React.createElement("div", {
+  key: type,
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/React.createElement(Icon, {
+  type: type,
+  size: 36
+}), /*#__PURE__*/React.createElement("div", {
+  style: {
+    fontSize: 12,
+    marginTop: 4
+  }
+}, type))));

package/lib/Icon.stories.js

@@ -3,142 +3,46 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ThumbsUp = exports.ThumbsDown = exports.Table = exports.Spectrum = exports.Pin = exports.Inbox = exports.Garbage = exports.CloudflareEmailSecurity = exports.CloudMulti = exports.CloudInternet = exports.CaretReorder2 = exports.Captcha = exports.AIAudit = void 0;
+exports.default = exports.AllIcons = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _Icon = _interopRequireDefault(require("./Icon"));
 
+var _reactsvgs = _interopRequireDefault(require("./reactsvgs"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+var iconTypes = Object.keys(_reactsvgs.default);
 var _default = {
   title: 'Example/Icon',
   component: _Icon.default
 };
 exports.default = _default;
 
-var AIAudit = function AIAudit() {
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "ai-audit",
-    size: 36
-  });
-};
-
-exports.AIAudit = AIAudit;
-
-var Captcha = function Captcha() {
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "captcha-outline",
-    size: 36
-  });
-};
-
-exports.Captcha = Captcha;
-
-var CloudflareEmailSecurity = function CloudflareEmailSecurity() {
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "cloudflare-email-security",
-    size: 36
-  });
-};
-
-exports.CloudflareEmailSecurity = CloudflareEmailSecurity;
-
-var CloudMulti = function CloudMulti() {
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "cloud-multi",
-    size: 36
-  });
-};
-
-exports.CloudMulti = CloudMulti;
-
-var CloudInternet = function CloudInternet() {
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "cloud-internet",
-    size: 36
-  });
-};
-
-exports.CloudInternet = CloudInternet;
-
-var Garbage = function Garbage() {
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "garbage",
-    size: 36
-  });
-};
-
-exports.Garbage = Garbage;
-
-var Inbox = function Inbox() {
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "inbox",
-    size: 36
-  });
-};
-
-exports.Inbox = Inbox;
-
-var Spectrum = function Spectrum() {
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "spectrum",
-    size: 36
-  });
-};
-
-exports.Spectrum = Spectrum;
-
-var Table = function Table() {
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "table",
-    size: 36
-  });
-};
-
-exports.Table = Table;
-
-var ThumbsUp = function ThumbsUp() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "thumbs-up-solid",
-    size: 36
-  }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "thumbs-up-outline",
-    size: 36
-  }));
-};
-
-exports.ThumbsUp = ThumbsUp;
-
-var ThumbsDown = function ThumbsDown() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "thumbs-down-solid",
-    size: 36
-  }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "thumbs-down-outline",
-    size: 36
-  }));
-};
-
-exports.ThumbsDown = ThumbsDown;
-
-var CaretReorder2 = function CaretReorder2() {
-  return /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "caret-reorder2",
-    size: 36
-  });
-};
-
-exports.CaretReorder2 = CaretReorder2;
-
-var Pin = function Pin() {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "pin-solid",
-    size: 36
-  }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    type: "pin-outline",
-    size: 36
+var AllIcons = function AllIcons() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
+      gap: 16
+    }
+  }, iconTypes.map(function (type) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: type,
+      style: {
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: type,
+      size: 36
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        fontSize: 12,
+        marginTop: 4
+      }
+    }, type));
   }));
 };
 
-exports.Pin = Pin;
+exports.AllIcons = AllIcons;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-icon",
   "description": "Cloudflare Icon Component",
-  "version": "13.3.1",
+  "version": "13.3.2",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "Frontend Team <frontend@cloudflare.com>",