@votercircle/clay-v2-icon 1.0.0

package/icon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IconType } from './icon.mapper';
+import { StatesType } from '@clay/cui.theme-provider';
+export declare type IconProps = {
+    name?: IconType;
+    color?: StatesType;
+    src?: string;
+    style?: React.CSSProperties;
+    rounded?: boolean;
+    className?: string;
+};
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLInputElement>>;

package/icon.js

@@ -0,0 +1,82 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+exports.__esModule = true;
+exports.Icon = void 0;
+var react_1 = __importStar(require("react"));
+var react_dom_1 = __importDefault(require("react-dom"));
+var styled_components_1 = __importStar(require("styled-components"));
+var icon_mapper_1 = require("./icon.mapper");
+var cui_theme_provider_1 = require("@clay/cui.theme-provider");
+var classnames_1 = __importDefault(require("classnames"));
+var IconWrapper = styled_components_1["default"].i(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.pdi-cui-icon {\n    font-family: 'cui-font';\n    font-style: normal;\n    font-weight: normal;\n  }\n\n  ", "\n\n  &._color-primary {\n    color: var(--pdi-clay-theme-primary-main, ", ");\n  }\n  &._color-primary._rounded {\n    --pdi-clay-icon-rounded-color: var(\n      --pdi-clay-theme-primary-light,\n      ", "\n    );\n  }\n\n  &._color-secondary {\n    color: var(--pdi-clay-theme-secondary-main, ", ");\n  }\n  &._color-secondary._rounded {\n    --pdi-clay-icon-rounded-color: var(\n      --pdi-clay-theme-secondary-light,\n      ", "\n    );\n  }\n\n  &._color-warning {\n    color: var(--pdi-clay-theme-warning-main, ", ");\n  }\n  &._color-warning._rounded {\n    --pdi-clay-icon-rounded-color: var(\n      --pdi-clay-theme-warning-light,\n      ", "\n    );\n  }\n\n  &._color-danger {\n    color: var(--pdi-clay-theme-danger-main, ", ");\n  }\n  &._color-danger._rounded {\n    --pdi-clay-icon-rounded-color: var(\n      --pdi-clay-theme-danger-light,\n      ", "\n    );\n  }\n\n  &._color-success {\n    color: var(--pdi-clay-theme-success-main, ", ");\n  }\n  &._color-success._rounded {\n    --pdi-clay-icon-rounded-color: var(\n      --pdi-clay-theme-success-light,\n      ", "\n    );\n  }\n\n  &._color-default {\n    color: var(--pdi-clay-theme-black-main, ", ");\n  }\n  &._color-default._rounded {\n    --pdi-clay-icon-rounded-color: var(--pdi-clay-theme-grey-light, ", ");\n  }\n\n  &._color-inactive {\n    color: var(--pdi-clay-theme-grey-main, ", ");\n  }\n  &._color-inactive._rounded {\n    --pdi-clay-icon-rounded-color: var(--pdi-clay-theme-grey-light, ", ");\n  }\n\n  &._rounded {\n    border-radius: 50%;\n    border-width: 10px;\n    border-style: solid;\n    background: var(--pdi-clay-icon-rounded-color);\n    border-color: var(--pdi-clay-icon-rounded-color);\n  }\n"], ["\n  &.pdi-cui-icon {\n    font-family: 'cui-font';\n    font-style: normal;\n    font-weight: normal;\n  }\n\n  ", "\n\n  &._color-primary {\n    color: var(--pdi-clay-theme-primary-main, ", ");\n  }\n  &._color-primary._rounded {\n    --pdi-clay-icon-rounded-color: var(\n      --pdi-clay-theme-primary-light,\n      ", "\n    );\n  }\n\n  &._color-secondary {\n    color: var(--pdi-clay-theme-secondary-main, ", ");\n  }\n  &._color-secondary._rounded {\n    --pdi-clay-icon-rounded-color: var(\n      --pdi-clay-theme-secondary-light,\n      ", "\n    );\n  }\n\n  &._color-warning {\n    color: var(--pdi-clay-theme-warning-main, ", ");\n  }\n  &._color-warning._rounded {\n    --pdi-clay-icon-rounded-color: var(\n      --pdi-clay-theme-warning-light,\n      ", "\n    );\n  }\n\n  &._color-danger {\n    color: var(--pdi-clay-theme-danger-main, ", ");\n  }\n  &._color-danger._rounded {\n    --pdi-clay-icon-rounded-color: var(\n      --pdi-clay-theme-danger-light,\n      ", "\n    );\n  }\n\n  &._color-success {\n    color: var(--pdi-clay-theme-success-main, ", ");\n  }\n  &._color-success._rounded {\n    --pdi-clay-icon-rounded-color: var(\n      --pdi-clay-theme-success-light,\n      ", "\n    );\n  }\n\n  &._color-default {\n    color: var(--pdi-clay-theme-black-main, ", ");\n  }\n  &._color-default._rounded {\n    --pdi-clay-icon-rounded-color: var(--pdi-clay-theme-grey-light, ", ");\n  }\n\n  &._color-inactive {\n    color: var(--pdi-clay-theme-grey-main, ", ");\n  }\n  &._color-inactive._rounded {\n    --pdi-clay-icon-rounded-color: var(--pdi-clay-theme-grey-light, ", ");\n  }\n\n  &._rounded {\n    border-radius: 50%;\n    border-width: 10px;\n    border-style: solid;\n    background: var(--pdi-clay-icon-rounded-color);\n    border-color: var(--pdi-clay-icon-rounded-color);\n  }\n"])), icon_mapper_1.ICON_MAPPER.map(function (item) { return "&._".concat(item.name, "::before{content:'\\").concat(item.code, "';}"); }), (_a = cui_theme_provider_1.DefaultPalette.primary) === null || _a === void 0 ? void 0 : _a.main, (_b = cui_theme_provider_1.DefaultPalette.primary) === null || _b === void 0 ? void 0 : _b.light, (_c = cui_theme_provider_1.DefaultPalette.secondary) === null || _c === void 0 ? void 0 : _c.main, (_d = cui_theme_provider_1.DefaultPalette.secondary) === null || _d === void 0 ? void 0 : _d.light, (_e = cui_theme_provider_1.DefaultPalette.warning) === null || _e === void 0 ? void 0 : _e.main, (_f = cui_theme_provider_1.DefaultPalette.warning) === null || _f === void 0 ? void 0 : _f.light, (_g = cui_theme_provider_1.DefaultPalette.danger) === null || _g === void 0 ? void 0 : _g.main, (_h = cui_theme_provider_1.DefaultPalette.danger) === null || _h === void 0 ? void 0 : _h.light, (_j = cui_theme_provider_1.DefaultPalette.success) === null || _j === void 0 ? void 0 : _j.main, (_k = cui_theme_provider_1.DefaultPalette.success) === null || _k === void 0 ? void 0 : _k.light, (_l = cui_theme_provider_1.DefaultPalette.black) === null || _l === void 0 ? void 0 : _l.main, (_m = cui_theme_provider_1.DefaultPalette.grey) === null || _m === void 0 ? void 0 : _m.light, (_o = cui_theme_provider_1.DefaultPalette.grey) === null || _o === void 0 ? void 0 : _o.main, (_p = cui_theme_provider_1.DefaultPalette.grey) === null || _p === void 0 ? void 0 : _p.light);
+exports.Icon = react_1["default"].forwardRef(function (_a, ref) {
+    var _b, _c;
+    var className = _a.className, name = _a.name, src = _a.src, color = _a.color, rounded = _a.rounded, rest = __rest(_a, ["className", "name", "src", "color", "rounded"]);
+    (0, react_1.useEffect)(function () {
+        var FontStyles = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      @font-face {\n        font-family: 'cui-font';\n        src: url('https://d31ztdpy2vop11.cloudfront.net/clay/fonts/clay.0.0.8.ttf') format('truetype'), url('https://d31ztdpy2vop11.cloudfront.net/clay/fonts/clay.0.0.8.woff') format('woff'),\n        url('https://d31ztdpy2vop11.cloudfront.net/clay/fonts/clay.0.0.8.eot') format('embedded-opentype');\n        font-weight: normal;\n        font-style: normal;\n      }\n    "], ["\n      @font-face {\n        font-family: 'cui-font';\n        src: url('https://d31ztdpy2vop11.cloudfront.net/clay/fonts/clay.0.0.8.ttf') format('truetype'), url('https://d31ztdpy2vop11.cloudfront.net/clay/fonts/clay.0.0.8.woff') format('woff'),\n        url('https://d31ztdpy2vop11.cloudfront.net/clay/fonts/clay.0.0.8.eot') format('embedded-opentype');\n        font-weight: normal;\n        font-style: normal;\n      }\n    "])));
+        var cdnRoot = document.getElementById('clay-ui-font-portal-container');
+        if (!cdnRoot) {
+            cdnRoot = document.createElement('div');
+            cdnRoot.setAttribute('id', 'clay-ui-font-portal-container');
+            document.body.insertBefore(cdnRoot, null);
+            var el = document.createElement('div');
+            el.setAttribute('id', 'clay-ui-font');
+            cdnRoot.prepend(el);
+            react_dom_1["default"].render(react_1["default"].createElement(FontStyles, null), el);
+        }
+    }, []);
+    return (react_1["default"].createElement(IconWrapper, __assign({ ref: ref, className: (0, classnames_1["default"])(className, 'pdi-cui-icon', (_b = {}, _b['_' + name] = !src && name, _b), (_c = {}, _c['_color-' + color] = color, _c), { _rounded: !src && rounded }) }, rest), src ? react_1["default"].createElement("img", { src: src }) : ''));
+});
+var templateObject_1, templateObject_2;

package/icon.mapper.d.ts

@@ -0,0 +1,7 @@
+export declare const ICON_MAPPER: {
+    name: string;
+    code: string;
+}[];
+declare const ICON_SET: readonly ["alert-circle-outline", "alert-circle", "alert-triangle-outline", "alert-triangle", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "bin", "block", "calendar-active", "calendar", "check-circle", "check", "chevron-down-fill", "chevron-down", "chevron-left-fill", "chevron-left", "chevron-right-fill", "chevron-right", "chevron-up-fill", "chevron-up", "close-circle", "close", "collapse", "copy", "delete", "donation", "expand", "filter", "folder", "info", "launcher", "link", "loading", "location-outline", "location", "lock", "logout", "menu-bento", "menu-kebab", "menu-meatballs", "minus-circle", "minus", "new-folder", "new-window", "organization", "pause", "photo", "pin", "plus-circle", "plus", "redo", "rotate", "settings", "share", "shield", "skip", "supporter", "switch", "undo", "user"];
+export declare type IconType = typeof ICON_SET[number];
+export {};

package/icon.mapper.js

@@ -0,0 +1,131 @@
+"use strict";
+exports.__esModule = true;
+exports.ICON_MAPPER = void 0;
+exports.ICON_MAPPER = [
+    { name: 'alert-circle-outline', code: 'EB01' },
+    { name: 'alert-circle', code: 'EB02' },
+    { name: 'alert-triangle-outline', code: 'EB03' },
+    { name: 'alert-triangle', code: 'EB04' },
+    { name: 'arrow-down', code: 'EB05' },
+    { name: 'arrow-left', code: 'EB06' },
+    { name: 'arrow-right', code: 'EB07' },
+    { name: 'arrow-up', code: 'EB08' },
+    { name: 'bin', code: 'EB09' },
+    { name: 'block', code: 'EB0A' },
+    { name: 'calendar-active', code: 'EB0B' },
+    { name: 'calendar', code: 'EB0C' },
+    { name: 'check-circle', code: 'EB0D' },
+    { name: 'check', code: 'EB0E' },
+    { name: 'chevron-down-fill', code: 'EB0F' },
+    { name: 'chevron-down', code: 'EB10' },
+    { name: 'chevron-left-fill', code: 'EB11' },
+    { name: 'chevron-left', code: 'EB12' },
+    { name: 'chevron-right-fill', code: 'EB13' },
+    { name: 'chevron-right', code: 'EB14' },
+    { name: 'chevron-up-fill', code: 'EB15' },
+    { name: 'chevron-up', code: 'EB16' },
+    { name: 'close-circle', code: 'EB17' },
+    { name: 'close', code: 'EB18' },
+    { name: 'collapse', code: 'EB19' },
+    { name: 'copy', code: 'EB1A' },
+    { name: 'delete', code: 'EB1B' },
+    { name: 'donation', code: 'EB1C' },
+    { name: 'expand', code: 'EB1D' },
+    { name: 'filter', code: 'EB1E' },
+    { name: 'folder', code: 'EB1F' },
+    { name: 'info', code: 'EB20' },
+    { name: 'launcher', code: 'EB21' },
+    { name: 'link', code: 'EB22' },
+    { name: 'loading', code: 'EB23' },
+    { name: 'location-outline', code: 'EB24' },
+    { name: 'location', code: 'EB25' },
+    { name: 'lock', code: 'EB26' },
+    { name: 'logout', code: 'EB27' },
+    { name: 'menu-bento', code: 'EB28' },
+    { name: 'menu-kebab', code: 'EB29' },
+    { name: 'menu-meatballs', code: 'EB2A' },
+    { name: 'minus-circle', code: 'EB2B' },
+    { name: 'minus', code: 'EB2C' },
+    { name: 'new-folder', code: 'EB2D' },
+    { name: 'new-window', code: 'EB2E' },
+    { name: 'organization', code: 'EB2F' },
+    { name: 'pause', code: 'EB30' },
+    { name: 'photo', code: 'EB31' },
+    { name: 'pin', code: 'EB32' },
+    { name: 'plus-circle', code: 'EB33' },
+    { name: 'plus', code: 'EB34' },
+    { name: 'redo', code: 'EB35' },
+    { name: 'rotate', code: 'EB36' },
+    { name: 'settings', code: 'EB37' },
+    { name: 'share', code: 'EB38' },
+    { name: 'shield', code: 'EB39' },
+    { name: 'skip', code: 'EB3A' },
+    { name: 'supporter', code: 'EB3B' },
+    { name: 'switch', code: 'EB3C' },
+    { name: 'undo', code: 'EB3D' },
+    { name: 'user', code: 'EB3E' },
+];
+var ICON_SET = [
+    'alert-circle-outline',
+    'alert-circle',
+    'alert-triangle-outline',
+    'alert-triangle',
+    'arrow-down',
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'bin',
+    'block',
+    'calendar-active',
+    'calendar',
+    'check-circle',
+    'check',
+    'chevron-down-fill',
+    'chevron-down',
+    'chevron-left-fill',
+    'chevron-left',
+    'chevron-right-fill',
+    'chevron-right',
+    'chevron-up-fill',
+    'chevron-up',
+    'close-circle',
+    'close',
+    'collapse',
+    'copy',
+    'delete',
+    'donation',
+    'expand',
+    'filter',
+    'folder',
+    'info',
+    'launcher',
+    'link',
+    'loading',
+    'location-outline',
+    'location',
+    'lock',
+    'logout',
+    'menu-bento',
+    'menu-kebab',
+    'menu-meatballs',
+    'minus-circle',
+    'minus',
+    'new-folder',
+    'new-window',
+    'organization',
+    'pause',
+    'photo',
+    'pin',
+    'plus-circle',
+    'plus',
+    'redo',
+    'rotate',
+    'settings',
+    'share',
+    'shield',
+    'skip',
+    'supporter',
+    'switch',
+    'undo',
+    'user',
+];

package/icon.types.d.ts

@@ -0,0 +1,3 @@
+declare const menuList: readonly ["arrow-left", "arrow-right", "arrow-up", "arrow-down", "warning", "check", "close", "close-circle"];
+export declare type IconType = typeof menuList[number];
+export {};

package/icon.types.js

@@ -0,0 +1,12 @@
+"use strict";
+exports.__esModule = true;
+var menuList = [
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'arrow-down',
+    'warning',
+    'check',
+    'close',
+    'close-circle',
+];

package/icon.utility.d.ts

@@ -0,0 +1,4 @@
+import { StatesType } from '@clay/cui.theme-provider';
+import { ReactElement } from 'react';
+import { IconType } from '.';
+export declare function getIconByType(icon: IconType | ReactElement<HTMLImageElement | SVGSVGElement>, color?: StatesType): JSX.Element;

package/icon.utility.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.getIconByType = void 0;
+var react_1 = __importDefault(require("react"));
+var _1 = require(".");
+function getIconByType(icon, color) {
+    if (typeof icon === 'string') {
+        return react_1["default"].createElement(_1.Icon, { name: icon, color: color });
+    }
+    return icon;
+}
+exports.getIconByType = getIconByType;

package/index.d.ts

@@ -0,0 +1,4 @@
+export { Icon } from './icon';
+export { IconProps } from './icon';
+export { IconType } from './icon.mapper';
+export { getIconByType } from './icon.utility';

package/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+exports.__esModule = true;
+exports.getIconByType = exports.Icon = void 0;
+var icon_1 = require("./icon");
+__createBinding(exports, icon_1, "Icon");
+var icon_utility_1 = require("./icon.utility");
+__createBinding(exports, icon_utility_1, "getIconByType");

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@votercircle/clay-v2-icon",
+  "version": "1.0.0",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16",
+    "styled-components": ">=5"
+  }
+}