@cloudflare/component-icon 11.8.4 → 11.8.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 11.8.5
+
+### Patch Changes
+
+- ec5f6b98cf: add arrow-external-link and icons preview example
+
 ## 11.8.4
 
 ### Patch Changes

package/dist/Example.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Example: () => JSX.Element;

package/dist/Icon.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import IconComponents from './reactsvgs';
 export declare type IconType = keyof typeof IconComponents;
 declare const _default: React.ComponentType<{
-    type: "search" | "link" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "pause" | "dlp" | "account-analytics-logo" | "add-member" | "api-security" | "api" | "applications" | "backward" | "bolt" | "byoip" | "calendar" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "case-study" | "chart" | "clipboard" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "credit-card" | "d1" | "ddos-attack" | "discord" | "discover" | "documentation" | "drive" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "external-link" | "eye" | "facebook" | "file" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "home" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "printer" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "security-bots" | "security-waf" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "waiting-room" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zerotrust-casb-logo" | "zerotrust-networks-logo";
+    type: "search" | "link" | "script" | "time" | "filter" | "image" | "right" | "none" | "download" | "list" | "version" | "key" | "left" | "revert" | "copy" | "help" | "add" | "subtract" | "pause" | "dlp" | "account-analytics-logo" | "add-member" | "api-security" | "api" | "applications" | "arrow-external-link" | "backward" | "bolt" | "byoip" | "calendar" | "carbon" | "caret-double-left" | "caret-double-right" | "caret-down" | "caret-left" | "caret-right" | "caret-up" | "case-study" | "chart" | "clipboard" | "cloudflare-access" | "cloudflare-dex" | "cloudflare-magic-wan" | "cloudflare-security-application" | "cloudflare-security-network" | "cloudflare-zero-trust" | "credit-card" | "d1" | "ddos-attack" | "discord" | "discover" | "documentation" | "drive" | "edgeworker" | "edit" | "email-forwarding" | "exclamation-sign" | "external-link" | "eye" | "facebook" | "file" | "firewall-rules" | "flowchart" | "folder" | "forward" | "funnel" | "gateway" | "gear" | "git-branch" | "github" | "globe" | "hamburger" | "home" | "info-sign" | "internet-browser" | "leaf" | "linkedin" | "lock" | "logs" | "magic-firewall" | "magic-transit-logo" | "mail" | "minus" | "more" | "network-analytics-logo" | "network-security" | "network" | "notifications" | "office-branch" | "ok-sign" | "ok" | "optimization-scale" | "pages-logo" | "platform-apps" | "plus" | "printer" | "product-security-center" | "pub-sub" | "pull-request" | "queues" | "r2" | "refresh" | "registrar-logo" | "reliability-dns" | "reliability-load-balancer" | "remove" | "reorder" | "resize-horizontal" | "retarget" | "security-bots" | "security-waf" | "shield" | "spectrum" | "speech" | "star-outline" | "star" | "stream" | "tail-worker" | "teams" | "terraform" | "trace" | "traffic-attack-browser" | "turnstile" | "twitter" | "two-way" | "unlock-outline" | "upload" | "user-multi" | "user-outline" | "user" | "waiting-room" | "web-analytics-logo" | "web3" | "workers-bundled" | "workers-constellation" | "workers-durable-objects" | "workers-for-platforms" | "workers-kv" | "workers-pages" | "workers-unbound" | "wrangler" | "wrench" | "youtube" | "zaraz" | "zerotrust-casb-logo" | "zerotrust-networks-logo";
     className?: string | undefined;
     ariaLabel?: string | undefined;
     label?: string | boolean | undefined;

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-import type { ComponentProps } from 'react';
-import Icon from './Icon';
-export type { IconType } from './Icon';
-export { Icon };
-export declare type IIconProps = ComponentProps<typeof Icon>;
+import Icon, { IconType } from './Icon';
+import { Example } from './Example';
+export { Icon, Example };
+export type { IconType };

package/dist/reactsvgs/ArrowExternalLink.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SvgArrowExternalLink: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgArrowExternalLink;

package/dist/reactsvgs/index.d.ts

@@ -7,6 +7,7 @@ declare const _default: {
     'api-security': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     api: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     applications: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
+    'arrow-external-link': (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     backward: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     bolt: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
     byoip: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;

package/es/Example.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Div, Code, H2 } from '@cloudflare/elements';
+import Icon from './Icon';
+import IconComponents from './reactsvgs/index';
+var TYPES = Object.keys(IconComponents);
+export var Example = () => /*#__PURE__*/React.createElement(Div, {
+  mt: 4,
+  px: 4,
+  py: 4
+}, /*#__PURE__*/React.createElement(H2, {
+  mb: 4,
+  textAlign: "center"
+}, "Icons preview"), /*#__PURE__*/React.createElement(Div, {
+  display: "grid",
+  style: {
+    gridTemplateColumns: 'repeat(10, 1fr)'
+  }
+}, TYPES.map(t => /*#__PURE__*/React.createElement(Div, {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  px: 0,
+  py: 2
+}, /*#__PURE__*/React.createElement(Icon, {
+  size: 32,
+  type: t
+}), /*#__PURE__*/React.createElement(Code, {
+  bg: "transparent",
+  mt: 1,
+  fontSize: 0
+}, t)))));

package/es/index.js

@@ -1,2 +1,3 @@
 import Icon from './Icon';
-export { Icon };
+import { Example } from './Example';
+export { Icon, Example };

package/es/reactsvgs/ArrowExternalLink.js

@@ -0,0 +1,14 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+
+var SvgArrowExternalLink = props => /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 64 64",
+  "aria-hidden": !props['aria-label'],
+  focusable: "false"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "m15.983 16.26.034 4 27.115-.22-28.546 28.546 2.828 2.828L45.96 22.868l-.22 27.115 4 .034.277-34.034-34.034.277Z"
+}));
+
+export default SvgArrowExternalLink;

package/es/reactsvgs/index.js

@@ -5,6 +5,7 @@ import Add from './Add';
 import ApiSecurity from './ApiSecurity';
 import Api from './Api';
 import Applications from './Applications';
+import ArrowExternalLink from './ArrowExternalLink';
 import Backward from './Backward';
 import Bolt from './Bolt';
 import Byoip from './Byoip';
@@ -151,6 +152,7 @@ export default {
   'api-security': ApiSecurity,
   api: Api,
   applications: Applications,
+  'arrow-external-link': ArrowExternalLink,
   backward: Backward,
   bolt: Bolt,
   byoip: Byoip,

package/lib/Example.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Example = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _elements = require("@cloudflare/elements");
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+var _index = _interopRequireDefault(require("./reactsvgs/index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var TYPES = Object.keys(_index.default);
+
+var Example = function Example() {
+  return /*#__PURE__*/_react.default.createElement(_elements.Div, {
+    mt: 4,
+    px: 4,
+    py: 4
+  }, /*#__PURE__*/_react.default.createElement(_elements.H2, {
+    mb: 4,
+    textAlign: "center"
+  }, "Icons preview"), /*#__PURE__*/_react.default.createElement(_elements.Div, {
+    display: "grid",
+    style: {
+      gridTemplateColumns: 'repeat(10, 1fr)'
+    }
+  }, TYPES.map(function (t) {
+    return /*#__PURE__*/_react.default.createElement(_elements.Div, {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      px: 0,
+      py: 2
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      size: 32,
+      type: t
+    }), /*#__PURE__*/_react.default.createElement(_elements.Code, {
+      bg: "transparent",
+      mt: 1,
+      fontSize: 0
+    }, t));
+  })));
+};
+
+exports.Example = Example;

package/lib/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Example", {
+  enumerable: true,
+  get: function get() {
+    return _Example.Example;
+  }
+});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function get() {
@@ -12,4 +18,6 @@ Object.defineProperty(exports, "Icon", {
 
 var _Icon = _interopRequireDefault(require("./Icon"));
 
+var _Example = require("./Example");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/reactsvgs/ArrowExternalLink.js

@@ -0,0 +1,30 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var SvgArrowExternalLink = function SvgArrowExternalLink(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 64 64",
+    "aria-hidden": !props['aria-label'],
+    focusable: "false"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "m15.983 16.26.034 4 27.115-.22-28.546 28.546 2.828 2.828L45.96 22.868l-.22 27.115 4 .034.277-34.034-34.034.277Z"
+  }));
+};
+
+var _default = SvgArrowExternalLink;
+exports.default = _default;

package/lib/reactsvgs/index.js

@@ -19,6 +19,8 @@ var _Api = _interopRequireDefault(require("./Api"));
 
 var _Applications = _interopRequireDefault(require("./Applications"));
 
+var _ArrowExternalLink = _interopRequireDefault(require("./ArrowExternalLink"));
+
 var _Backward = _interopRequireDefault(require("./Backward"));
 
 var _Bolt = _interopRequireDefault(require("./Bolt"));
@@ -305,6 +307,7 @@ var _default = {
   'api-security': _ApiSecurity.default,
   api: _Api.default,
   applications: _Applications.default,
+  'arrow-external-link': _ArrowExternalLink.default,
   backward: _Backward.default,
   bolt: _Bolt.default,
   byoip: _Byoip.default,

package/package.json

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