@cloudflare/component-icon 9.10.1 → 10.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 10.1.0
+
+### Minor Changes
+
+- 86ee7b8704: Add DLP icon
+
+## 10.0.0
+
+### Major Changes
+
+- 1b7c5ab296: Move @cloudflare/component-icon to peerDeps for all consuming packages
+
 ## 9.10.1
 
 ### Patch Changes

package/README.md

@@ -127,26 +127,36 @@ export default IconComponent;
 ## Updating Icons
 If you would like to add new icons to the component library/design system please follow the procedures below to help ensure the icons remain consistent.
 
-### Product Design
+### Repo: product-design
 Follow the link to the `product-design` repository where you will find the original SVG's. Follow the [Icon Guidelines](https://wiki.cfops.it/x/QLcvCQ) for details on how to create, export, and add new icons to [product-design](https://bitbucket.cfdata.org/projects/DESIGN/repos/product-design/browse) and stratus repositories.
 
-### component-library
+### Repo: component-library
 Once your icon is added to the `product-design` repo under the `/icons/icons-exports/` folder and all instructions are followed it is ready to be converted to our React format in this `component-library` repo. 
 
-1. `yarn install` from the root of `component-library`. 
-- This should install the `svgo` dependency which is required in order to clean and compile the SVG's
-    - If `svgo` does not install, you can install it globally on your machine with `npm install -g svgo`
+#### 1. Install dependencies 
 
-2. Create a new branch
+run `yarn install` from the root of your `component-library` folder.
 
-3. Navigate to the top of the `component-library` repository and run `yarn update-icons`. 
+This should install the `svgo` dependency which is required in order to clean and compile the SVGs. If `svgo` does not install, you can install it globally on your machine with the command `npm install -g svgo`
 
-- The `product-design` repo will be pulled in using the `svgtoreact.sh` script
-- The list of SVG's will be extracted and converted into React components based on the file names provided. They will be added under `../component-icon/src/reactsvgs/`. 
-- Additional files touched may include `iconTypes.js` and `/reactsvgs/index.js`
+#### 2. Create a new branch
 
-4. Push up the changes and create a PR to `main`. Your new icon will be merged into the repository and be available for use shortly!
+Run the `git checkout -b <branchname>` command or create a new branch via the graphical git tool of your choice.
 
-**Note**: Stratus repository [README](https://bitbucket.cfdata.org/projects/FE/repos/stratus/browse) may also be valuable.
+#### 3. Run the update icons script 
+
+The `product-design` repo will be pulled in using the `svgtoreact.sh` script
+
+*** NOTE: The product-design repo should be up to date and located within the same parent folder as component library before running this command ***
+
+Run `yarn update-icons` in the root folder of `component-library`
 
+The list of SVG's will be extracted and converted into React components based on the file names provided. They will be added under `../component-icon/src/reactsvgs/`. 
 
+Additional files touched may include `iconTypes.js` and `/reactsvgs/index.js`
+
+#### 4. Push up the changes and create a PR to `main`. 
+
+After review, your new icon will be merged into the repository and be available for use shortly!
+
+**Note**: Stratus repository [README](https://bitbucket.cfdata.org/projects/FE/repos/stratus/browse) may also be valuable.

package/dist/IconType.d.ts

@@ -1 +1 @@
-export declare type IconType = 'account-analytics-logo' | 'add-member' | 'add' | 'api-security' | 'applications' | 'backward' | 'bolt' | 'byoip' | 'calendar' | 'carbon' | 'caret-double-left' | 'caret-double-right' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'chart' | 'clipboard' | 'cloudflare-access' | 'cloudflare-magic-wan' | 'cloudflare-security-application' | 'cloudflare-security-network' | 'cloudflare-zero-trust' | 'copy' | 'credit-card' | 'discord' | 'documentation' | 'download' | 'drive' | 'edgeworker' | 'edit' | 'email-forwarding' | 'exclamation-sign' | 'external-link' | 'eye' | 'facebook' | 'file' | 'filter' | 'firewall-rules' | 'flowchart' | 'folder' | 'forward' | 'funnel' | 'gateway' | 'gear' | 'git-branch' | 'github' | 'globe' | 'hamburger' | 'help' | 'image' | 'info-sign' | 'internet-browser' | 'key' | 'leaf' | 'left' | 'link' | 'linkedin' | 'list' | 'lock' | 'logs' | 'magic-firewall' | 'magic-transit-logo' | 'mail' | 'minus' | 'more' | 'network-analytics-logo' | 'network' | 'notifications' | 'ok-sign' | 'ok' | 'optimization-scale' | 'pages-logo' | 'pause' | 'platform-apps' | 'plus' | 'printer' | 'product-security-center' | 'pub-sub' | 'queues' | 'r2' | 'refresh' | 'registrar-logo' | 'reliability-dns' | 'reliability-load-balancer' | 'remove' | 'reorder' | 'resize-horizontal' | 'retarget' | 'revert' | 'right' | 'script' | 'search' | 'shield' | 'spectrum' | 'speech' | 'stream' | 'subtract' | 'teams' | 'terraform' | 'time' | 'twitter' | 'two-way' | 'turnstile' | 'unlock-outline' | 'upload' | 'user-multi' | 'user-outline' | 'user' | 'version' | 'waiting-room' | 'web-analytics-logo' | 'web3' | 'workers-bundled' | 'workers-durable-objects' | 'workers-for-platforms' | 'workers-kv' | 'workers-unbound' | 'wrangler' | 'wrench' | 'youtube' | 'zaraz' | 'zerotrust-casb-logo';
+export declare type IconType = 'account-analytics-logo' | 'add-member' | 'add' | 'api-security' | 'applications' | 'backward' | 'bolt' | 'byoip' | 'calendar' | 'carbon' | 'caret-double-left' | 'caret-double-right' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'chart' | 'clipboard' | 'cloudflare-access' | 'cloudflare-magic-wan' | 'cloudflare-security-application' | 'cloudflare-security-network' | 'cloudflare-zero-trust' | 'copy' | 'credit-card' | 'data-loss-prevention' | 'discord' | 'documentation' | 'download' | 'drive' | 'edgeworker' | 'edit' | 'email-forwarding' | 'exclamation-sign' | 'external-link' | 'eye' | 'facebook' | 'file' | 'filter' | 'firewall-rules' | 'flowchart' | 'folder' | 'forward' | 'funnel' | 'gateway' | 'gear' | 'git-branch' | 'github' | 'globe' | 'hamburger' | 'help' | 'image' | 'info-sign' | 'internet-browser' | 'key' | 'leaf' | 'left' | 'link' | 'linkedin' | 'list' | 'lock' | 'logs' | 'magic-firewall' | 'magic-transit-logo' | 'mail' | 'minus' | 'more' | 'network-analytics-logo' | 'network' | 'notifications' | 'ok-sign' | 'ok' | 'optimization-scale' | 'pages-logo' | 'pause' | 'platform-apps' | 'plus' | 'printer' | 'product-security-center' | 'pub-sub' | 'queues' | 'r2' | 'refresh' | 'registrar-logo' | 'reliability-dns' | 'reliability-load-balancer' | 'remove' | 'reorder' | 'resize-horizontal' | 'retarget' | 'revert' | 'right' | 'script' | 'search' | 'shield' | 'spectrum' | 'speech' | 'stream' | 'subtract' | 'teams' | 'terraform' | 'time' | 'twitter' | 'two-way' | 'turnstile' | 'unlock-outline' | 'upload' | 'user-multi' | 'user-outline' | 'user' | 'version' | 'waiting-room' | 'web-analytics-logo' | 'web3' | 'workers-bundled' | 'workers-durable-objects' | 'workers-for-platforms' | 'workers-kv' | 'workers-unbound' | 'wrangler' | 'wrench' | 'youtube' | 'zaraz' | 'zerotrust-casb-logo';

package/es/iconTypes.js

@@ -1 +1 @@
-export default ['account-analytics-logo', 'add-member', 'add', 'api-security', 'applications', 'backward', 'bolt', 'byoip', 'calendar', 'carbon', 'caret-double-left', 'caret-double-right', 'caret-down', 'caret-left', 'caret-right', 'caret-up', 'chart', 'clipboard', 'cloudflare-access', 'cloudflare-magic-wan', 'cloudflare-security-application', 'cloudflare-security-network', 'cloudflare-zero-trust', 'copy', 'credit-card', 'discord', 'documentation', 'download', 'drive', 'edgeworker', 'edit', 'email-forwarding', 'exclamation-sign', 'external-link', 'eye', 'facebook', 'file', 'filter', 'firewall-rules', 'flowchart', 'folder', 'forward', 'funnel', 'gateway', 'gear', 'git-branch', 'github', 'globe', 'hamburger', 'help', 'image', 'info-sign', 'internet-browser', 'key', 'leaf', 'left', 'link', 'linkedin', 'list', 'lock', 'logs', 'magic-firewall', 'magic-transit-logo', 'mail', 'minus', 'more', 'network-analytics-logo', 'network', 'notifications', 'ok-sign', 'ok', 'optimization-scale', 'pages-logo', 'pause', 'platform-apps', 'plus', 'printer', 'product-security-center', 'pub-sub', 'queues', 'r2', 'refresh', 'registrar-logo', 'reliability-dns', 'reliability-load-balancer', 'remove', 'reorder', 'resize-horizontal', 'retarget', 'revert', 'right', 'script', 'search', 'shield', 'spectrum', 'speech', 'stream', 'subtract', 'teams', 'terraform', 'time', 'twitter', 'two-way', 'turnstile', 'unlock-outline', 'upload', 'user-multi', 'user-outline', 'user', 'version', 'waiting-room', 'web-analytics-logo', 'web3', 'workers-bundled', 'workers-durable-objects', 'workers-for-platforms', 'workers-kv', 'workers-unbound', 'wrangler', 'wrench', 'youtube', 'zaraz', 'zerotrust-casb-logo'];
+export default ['account-analytics-logo', 'add-member', 'add', 'api-security', 'applications', 'backward', 'bolt', 'byoip', 'calendar', 'carbon', 'caret-double-left', 'caret-double-right', 'caret-down', 'caret-left', 'caret-right', 'caret-up', 'chart', 'clipboard', 'cloudflare-access', 'cloudflare-magic-wan', 'cloudflare-security-application', 'cloudflare-security-network', 'cloudflare-zero-trust', 'copy', 'credit-card', 'data-loss-prevention', 'discord', 'documentation', 'download', 'drive', 'edgeworker', 'edit', 'email-forwarding', 'exclamation-sign', 'external-link', 'eye', 'facebook', 'file', 'filter', 'firewall-rules', 'flowchart', 'folder', 'forward', 'funnel', 'gateway', 'gear', 'git-branch', 'github', 'globe', 'hamburger', 'help', 'image', 'info-sign', 'internet-browser', 'key', 'leaf', 'left', 'link', 'linkedin', 'list', 'lock', 'logs', 'magic-firewall', 'magic-transit-logo', 'mail', 'minus', 'more', 'network-analytics-logo', 'network', 'notifications', 'ok-sign', 'ok', 'optimization-scale', 'pages-logo', 'pause', 'platform-apps', 'plus', 'printer', 'product-security-center', 'pub-sub', 'queues', 'r2', 'refresh', 'registrar-logo', 'reliability-dns', 'reliability-load-balancer', 'remove', 'reorder', 'resize-horizontal', 'retarget', 'revert', 'right', 'script', 'search', 'shield', 'spectrum', 'speech', 'stream', 'subtract', 'teams', 'terraform', 'time', 'twitter', 'two-way', 'turnstile', 'unlock-outline', 'upload', 'user-multi', 'user-outline', 'user', 'version', 'waiting-room', 'web-analytics-logo', 'web3', 'workers-bundled', 'workers-durable-objects', 'workers-for-platforms', 'workers-kv', 'workers-unbound', 'wrangler', 'wrench', 'youtube', 'zaraz', 'zerotrust-casb-logo'];

package/es/reactsvgs/DataLossPrevention.js

@@ -0,0 +1,15 @@
+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 SvgDataLossPrevention = props => /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 16 16",
+  "aria-hidden": !props['aria-label'],
+  focusable: "false"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  d: "m1.5 1.75.5-.5h9.982l.5.5v3.014a2.982 2.982 0 0 0-1-.255V2.25H2.5v10.495h4v1H2l-.5-.5V1.75Zm8.968 2.745H3.49v-1h6.978v1ZM3.49 6.512h3.948v-1H3.49v1Zm3.948 1.983H3.49v-1h3.948v1Zm3.995 4.85v-1.17a.813.813 0 0 0 .363-.875.811.811 0 0 0-.796-.626.818.818 0 0 0-.796.626.808.808 0 0 0 .363.875v1.17h.866Zm2.76-4.129.432.429v4.801l-.431.429H7.806l-.431-.429V9.645l.431-.429h.78v-1.44c0-.637.255-1.248.708-1.698a2.42 2.42 0 0 1 3.412 0c.453.45.708 1.061.708 1.698v1.44h.78ZM9.977 6.759c-.271.27-.424.636-.424 1.017v1.44h2.896v-1.44c0-.381-.152-.747-.424-1.017a1.452 1.452 0 0 0-2.048 0Zm-1.635 7.154v-3.735h5.318v3.735H8.341Z"
+}));
+
+export default SvgDataLossPrevention;

package/es/reactsvgs/index.js

@@ -26,6 +26,7 @@ import CreditCard from './CreditCard';
 import Discord from './Discord';
 import Documentation from './Documentation';
 import Download from './Download';
+import DataLossPrevention from './DataLossPrevention';
 import Drive from './Drive';
 import Edgeworker from './Edgeworker';
 import Edit from './Edit';
@@ -150,6 +151,7 @@ export default {
   discord: Discord,
   documentation: Documentation,
   download: Download,
+  'data-loss-prevention': DataLossPrevention,
   drive: Drive,
   edgeworker: Edgeworker,
   edit: Edit,

package/lib/iconTypes.js

@@ -4,5 +4,5 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = ['account-analytics-logo', 'add-member', 'add', 'api-security', 'applications', 'backward', 'bolt', 'byoip', 'calendar', 'carbon', 'caret-double-left', 'caret-double-right', 'caret-down', 'caret-left', 'caret-right', 'caret-up', 'chart', 'clipboard', 'cloudflare-access', 'cloudflare-magic-wan', 'cloudflare-security-application', 'cloudflare-security-network', 'cloudflare-zero-trust', 'copy', 'credit-card', 'discord', 'documentation', 'download', 'drive', 'edgeworker', 'edit', 'email-forwarding', 'exclamation-sign', 'external-link', 'eye', 'facebook', 'file', 'filter', 'firewall-rules', 'flowchart', 'folder', 'forward', 'funnel', 'gateway', 'gear', 'git-branch', 'github', 'globe', 'hamburger', 'help', 'image', 'info-sign', 'internet-browser', 'key', 'leaf', 'left', 'link', 'linkedin', 'list', 'lock', 'logs', 'magic-firewall', 'magic-transit-logo', 'mail', 'minus', 'more', 'network-analytics-logo', 'network', 'notifications', 'ok-sign', 'ok', 'optimization-scale', 'pages-logo', 'pause', 'platform-apps', 'plus', 'printer', 'product-security-center', 'pub-sub', 'queues', 'r2', 'refresh', 'registrar-logo', 'reliability-dns', 'reliability-load-balancer', 'remove', 'reorder', 'resize-horizontal', 'retarget', 'revert', 'right', 'script', 'search', 'shield', 'spectrum', 'speech', 'stream', 'subtract', 'teams', 'terraform', 'time', 'twitter', 'two-way', 'turnstile', 'unlock-outline', 'upload', 'user-multi', 'user-outline', 'user', 'version', 'waiting-room', 'web-analytics-logo', 'web3', 'workers-bundled', 'workers-durable-objects', 'workers-for-platforms', 'workers-kv', 'workers-unbound', 'wrangler', 'wrench', 'youtube', 'zaraz', 'zerotrust-casb-logo'];
+var _default = ['account-analytics-logo', 'add-member', 'add', 'api-security', 'applications', 'backward', 'bolt', 'byoip', 'calendar', 'carbon', 'caret-double-left', 'caret-double-right', 'caret-down', 'caret-left', 'caret-right', 'caret-up', 'chart', 'clipboard', 'cloudflare-access', 'cloudflare-magic-wan', 'cloudflare-security-application', 'cloudflare-security-network', 'cloudflare-zero-trust', 'copy', 'credit-card', 'data-loss-prevention', 'discord', 'documentation', 'download', 'drive', 'edgeworker', 'edit', 'email-forwarding', 'exclamation-sign', 'external-link', 'eye', 'facebook', 'file', 'filter', 'firewall-rules', 'flowchart', 'folder', 'forward', 'funnel', 'gateway', 'gear', 'git-branch', 'github', 'globe', 'hamburger', 'help', 'image', 'info-sign', 'internet-browser', 'key', 'leaf', 'left', 'link', 'linkedin', 'list', 'lock', 'logs', 'magic-firewall', 'magic-transit-logo', 'mail', 'minus', 'more', 'network-analytics-logo', 'network', 'notifications', 'ok-sign', 'ok', 'optimization-scale', 'pages-logo', 'pause', 'platform-apps', 'plus', 'printer', 'product-security-center', 'pub-sub', 'queues', 'r2', 'refresh', 'registrar-logo', 'reliability-dns', 'reliability-load-balancer', 'remove', 'reorder', 'resize-horizontal', 'retarget', 'revert', 'right', 'script', 'search', 'shield', 'spectrum', 'speech', 'stream', 'subtract', 'teams', 'terraform', 'time', 'twitter', 'two-way', 'turnstile', 'unlock-outline', 'upload', 'user-multi', 'user-outline', 'user', 'version', 'waiting-room', 'web-analytics-logo', 'web3', 'workers-bundled', 'workers-durable-objects', 'workers-for-platforms', 'workers-kv', 'workers-unbound', 'wrangler', 'wrench', 'youtube', 'zaraz', 'zerotrust-casb-logo'];
 exports.default = _default;

package/lib/reactsvgs/DataLossPrevention.js

@@ -0,0 +1,31 @@
+"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 SvgDataLossPrevention = function SvgDataLossPrevention(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    "aria-hidden": !props['aria-label'],
+    focusable: "false"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "m1.5 1.75.5-.5h9.982l.5.5v3.014a2.982 2.982 0 0 0-1-.255V2.25H2.5v10.495h4v1H2l-.5-.5V1.75Zm8.968 2.745H3.49v-1h6.978v1ZM3.49 6.512h3.948v-1H3.49v1Zm3.948 1.983H3.49v-1h3.948v1Zm3.995 4.85v-1.17a.813.813 0 0 0 .363-.875.811.811 0 0 0-.796-.626.818.818 0 0 0-.796.626.808.808 0 0 0 .363.875v1.17h.866Zm2.76-4.129.432.429v4.801l-.431.429H7.806l-.431-.429V9.645l.431-.429h.78v-1.44c0-.637.255-1.248.708-1.698a2.42 2.42 0 0 1 3.412 0c.453.45.708 1.061.708 1.698v1.44h.78ZM9.977 6.759c-.271.27-.424.636-.424 1.017v1.44h2.896v-1.44c0-.381-.152-.747-.424-1.017a1.452 1.452 0 0 0-2.048 0Zm-1.635 7.154v-3.735h5.318v3.735H8.341Z"
+  }));
+};
+
+var _default = SvgDataLossPrevention;
+exports.default = _default;

package/lib/reactsvgs/index.js

@@ -61,6 +61,8 @@ var _Documentation = _interopRequireDefault(require("./Documentation"));
 
 var _Download = _interopRequireDefault(require("./Download"));
 
+var _DataLossPrevention = _interopRequireDefault(require("./DataLossPrevention"));
+
 var _Drive = _interopRequireDefault(require("./Drive"));
 
 var _Edgeworker = _interopRequireDefault(require("./Edgeworker"));
@@ -282,6 +284,7 @@ var _default = {
   discord: _Discord.default,
   documentation: _Documentation.default,
   download: _Download.default,
+  'data-loss-prevention': _DataLossPrevention.default,
   drive: _Drive.default,
   edgeworker: _Edgeworker.default,
   edit: _Edit.default,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-icon",
   "description": "Cloudflare Icon Component",
-  "version": "9.10.1",
+  "version": "10.1.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "Frontend Team <frontend@cloudflare.com>",
@@ -11,14 +11,12 @@
     "main": "lib/index.js",
     "module": "es/index.js"
   },
-  "dependencies": {
-    "@cloudflare/types": "^6.15.15"
-  },
   "peerDependencies": {
     "@cloudflare/style-container": "^7.10.0",
     "react": "^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0"
   },
   "devDependencies": {
+    "@cloudflare/types": "^6.15.15",
     "@svgr/cli": "6.2.1",
     "eslint": "^4.18.2"
   },