@k8slens/lds-icons 0.8.5 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/cjs/Icon/Icon.d.ts +3 -2
  2. package/lib/cjs/Icon/Icon.js +1 -1
  3. package/lib/cjs/index.css +1 -1
  4. package/lib/es/Icon/Icon.d.ts +3 -2
  5. package/lib/es/Icon/Icon.js +1 -1
  6. package/lib/es/index.css +1 -1
  7. package/package.json +3 -3
package/lib/cjs/Icon/Icon.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React, { FunctionComponent, SVGProps } from "react";
2
- declare type Size = "sm" | "md" | "lg" | "xl" | "xxl" | number;
2
+ declare type Size = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "xxl" | number;
3
3
  declare type Color = "black" | "on-dark" | "accent" | "default" | "primary" | "ok" | "info" | "danger" | "caution";
4
4
  export interface Props {
5
5
  className?: string;
6
6
  /**
7
- * Size of the icon. A number or one of the following: `"sm"` `"md"` `"lg"` `"xl"` `"xxl"`.
7
+ * Size of the icon. A number or one of the following: `"sm"` `"md"` `"lg"` `"xl"`
8
+ * `"2xl"` `"3xl"` `"4xl"` `"5xl"` `"6xl"`.
8
9
  */
9
10
  size?: Size;
10
11
  color?: Color;
package/lib/cjs/Icon/Icon.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("clsx"),a=require("./Icon.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(t),s=n(r),u=function(e){var r,n=e.color,u=void 0===n?"default":n,c=e.size,l=void 0===c?"md":c,o=e.className,d=void 0===o?"":o,f=e.children,m=t.useMemo((function(){if("number"==typeof l)return{width:"".concat(l,"px"),height:"".concat(l,"px")}}),[l]);return i.default.createElement("span",{"aria-hidden":!0,className:s.default(a.icon,d,(r={},r[l]="string"==typeof l&&"md"!==l,r[u]="string"==typeof u&&"default"!==u,r)),style:m},f)};exports.SVGIcon=function(t){var r=t.icon,n=e.__rest(t,["icon"]);return i.default.createElement(u,e.__assign({},n,{className:s.default(n.className,a.svg)}),i.default.createElement(r,null))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("clsx"),n=require("./Icon.module.css.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(t),l=a(r),u=function(e){var r,a=e.color,u=void 0===a?"default":a,o=e.size,c=void 0===o?"md":o,s=e.className,f=void 0===s?"":s,d=e.children,m=t.useMemo((function(){if("number"==typeof c)return{width:"".concat(c,"px"),height:"".concat(c,"px")}}),[c]),p=t.useMemo((function(){if("string"==typeof c&&"md"!==c){if(c.match(/^[0-9]xl$/)){var e=c.split("xl")[0],t=new Array(parseInt(e)).fill("x");return"".concat(t.join(""),"l")}return c}return""}),[c]);return i.default.createElement("span",{"aria-hidden":!0,className:l.default(n.icon,f,(r={},r[p]=Boolean(p),r[u]="string"==typeof u&&"default"!==u,r)),style:m},d)};exports.SVGIcon=function(t){var r=t.icon,a=e.__rest(t,["icon"]);return i.default.createElement(u,e.__assign({},a,{className:l.default(a.className,n.svg)}),i.default.createElement(r,null))};
package/lib/cjs/index.css CHANGED
@@ -1 +1 @@
1
- .lds-icon{display:inline-block}.lds-icon--svg svg{height:100%;max-width:inherit;min-width:inherit;width:100%}.lds-icon--svg.sm{height:1.125rem;width:1.125rem}.lds-icon--svg,.lds-icon--svg.md{height:var(--spacing-base-5);width:var(--spacing-base-5)}.lds-icon--svg.lg{height:var(--spacing-base-6);width:var(--spacing-base-6)}.lds-icon--svg.xl{height:var(--spacing-base-7);width:var(--spacing-base-7)}.lds-icon--svg.xxl{height:var(--spacing-base-8);width:var(--spacing-base-8)}.lds-icon--svg>svg{fill:var(--alias-color-text-primary)}.lds-icon--svg.accent>svg{fill:var(--alias-color-text-accent)}.lds-icon--svg.black>svg{fill:var(--color-base-black)}.lds-icon--svg.on-dark>svg{fill:var(--color-base-white)}.lds-icon--svg.primary>svg{fill:var(--color-base-blue-default)}.lds-icon--svg.ok>svg{fill:var(--color-background-button-ok-base)}.lds-icon--svg.info>svg{fill:var(--color-background-button-info-base)}.lds-icon--svg.caution>svg{fill:var(--color-background-button-caution-base)}.lds-icon--svg.danger>svg{fill:var(--color-background-button-danger-base)}
1
+ .lds-icon{display:inline-block}.lds-icon--svg svg{height:100%;max-width:inherit;min-width:inherit;width:100%}.lds-icon--svg.sm{height:1.125rem;width:1.125rem}.lds-icon--svg,.lds-icon--svg.md{height:var(--spacing-base-5);width:var(--spacing-base-5)}.lds-icon--svg.lg{height:var(--spacing-base-6);width:var(--spacing-base-6)}.lds-icon--svg.xl{height:var(--spacing-base-7);width:var(--spacing-base-7)}.lds-icon--svg.xxl{height:var(--spacing-base-8);width:var(--spacing-base-8)}.lds-icon--svg.xxxl{height:var(--spacing-base-12);width:var(--spacing-base-12)}.lds-icon--svg.xxxxl{height:var(--spacing-base-16);width:var(--spacing-base-16)}.lds-icon--svg.xxxxxl{height:var(--spacing-base-20);width:var(--spacing-base-20)}.lds-icon--svg.xxxxxxl{height:var(--spacing-base-24);width:var(--spacing-base-24)}.lds-icon--svg>svg{fill:var(--alias-color-text-primary)}.lds-icon--svg.accent>svg{fill:var(--alias-color-text-accent)}.lds-icon--svg.black>svg{fill:var(--color-base-black)}.lds-icon--svg.on-dark>svg{fill:var(--color-base-white)}.lds-icon--svg.primary>svg{fill:var(--color-base-blue-default)}.lds-icon--svg.ok>svg{fill:var(--color-background-button-ok-base)}.lds-icon--svg.info>svg{fill:var(--color-background-button-info-base)}.lds-icon--svg.caution>svg{fill:var(--color-background-button-caution-base)}.lds-icon--svg.danger>svg{fill:var(--color-background-button-danger-base)}
package/lib/es/Icon/Icon.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import React, { FunctionComponent, SVGProps } from "react";
2
- declare type Size = "sm" | "md" | "lg" | "xl" | "xxl" | number;
2
+ declare type Size = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "xxl" | number;
3
3
  declare type Color = "black" | "on-dark" | "accent" | "default" | "primary" | "ok" | "info" | "danger" | "caution";
4
4
  export interface Props {
5
5
  className?: string;
6
6
  /**
7
- * Size of the icon. A number or one of the following: `"sm"` `"md"` `"lg"` `"xl"` `"xxl"`.
7
+ * Size of the icon. A number or one of the following: `"sm"` `"md"` `"lg"` `"xl"`
8
+ * `"2xl"` `"3xl"` `"4xl"` `"5xl"` `"6xl"`.
8
9
  */
9
10
  size?: Size;
10
11
  color?: Color;
package/lib/es/Icon/Icon.js CHANGED
@@ -1 +1 @@
1
- import{__rest as e,__assign as t}from"../_virtual/_tslib.js";import r,{useMemo as o}from"react";import n from"clsx";import i from"./Icon.module.css.js";var a=function(e){var t,a=e.color,c=void 0===a?"default":a,s=e.size,m=void 0===s?"md":s,l=e.className,f=void 0===l?"":l,d=e.children,u=o((function(){if("number"==typeof m)return{width:"".concat(m,"px"),height:"".concat(m,"px")}}),[m]);return r.createElement("span",{"aria-hidden":!0,className:n(i.icon,f,(t={},t[m]="string"==typeof m&&"md"!==m,t[c]="string"==typeof c&&"default"!==c,t)),style:u},d)},c=function(o){var c=o.icon,s=e(o,["icon"]);return r.createElement(a,t({},s,{className:n(s.className,i.svg)}),r.createElement(c,null))};export{c as SVGIcon};
1
+ import{__rest as t,__assign as e}from"../_virtual/_tslib.js";import r,{useMemo as n}from"react";import o from"clsx";import i from"./Icon.module.css.js";var a=function(t){var e,a=t.color,c=void 0===a?"default":a,l=t.size,s=void 0===l?"md":l,m=t.className,f=void 0===m?"":m,u=t.children,p=n((function(){if("number"==typeof s)return{width:"".concat(s,"px"),height:"".concat(s,"px")}}),[s]),d=n((function(){if("string"==typeof s&&"md"!==s){if(s.match(/^[0-9]xl$/)){var t=s.split("xl")[0],e=new Array(parseInt(t)).fill("x");return"".concat(e.join(""),"l")}return s}return""}),[s]);return r.createElement("span",{"aria-hidden":!0,className:o(i.icon,f,(e={},e[d]=Boolean(d),e[c]="string"==typeof c&&"default"!==c,e)),style:p},u)},c=function(n){var c=n.icon,l=t(n,["icon"]);return r.createElement(a,e({},l,{className:o(l.className,i.svg)}),r.createElement(c,null))};export{c as SVGIcon};
package/lib/es/index.css CHANGED
@@ -1 +1 @@
1
- .lds-icon{display:inline-block}.lds-icon--svg svg{height:100%;max-width:inherit;min-width:inherit;width:100%}.lds-icon--svg.sm{height:1.125rem;width:1.125rem}.lds-icon--svg,.lds-icon--svg.md{height:var(--spacing-base-5);width:var(--spacing-base-5)}.lds-icon--svg.lg{height:var(--spacing-base-6);width:var(--spacing-base-6)}.lds-icon--svg.xl{height:var(--spacing-base-7);width:var(--spacing-base-7)}.lds-icon--svg.xxl{height:var(--spacing-base-8);width:var(--spacing-base-8)}.lds-icon--svg>svg{fill:var(--alias-color-text-primary)}.lds-icon--svg.accent>svg{fill:var(--alias-color-text-accent)}.lds-icon--svg.black>svg{fill:var(--color-base-black)}.lds-icon--svg.on-dark>svg{fill:var(--color-base-white)}.lds-icon--svg.primary>svg{fill:var(--color-base-blue-default)}.lds-icon--svg.ok>svg{fill:var(--color-background-button-ok-base)}.lds-icon--svg.info>svg{fill:var(--color-background-button-info-base)}.lds-icon--svg.caution>svg{fill:var(--color-background-button-caution-base)}.lds-icon--svg.danger>svg{fill:var(--color-background-button-danger-base)}
1
+ .lds-icon{display:inline-block}.lds-icon--svg svg{height:100%;max-width:inherit;min-width:inherit;width:100%}.lds-icon--svg.sm{height:1.125rem;width:1.125rem}.lds-icon--svg,.lds-icon--svg.md{height:var(--spacing-base-5);width:var(--spacing-base-5)}.lds-icon--svg.lg{height:var(--spacing-base-6);width:var(--spacing-base-6)}.lds-icon--svg.xl{height:var(--spacing-base-7);width:var(--spacing-base-7)}.lds-icon--svg.xxl{height:var(--spacing-base-8);width:var(--spacing-base-8)}.lds-icon--svg.xxxl{height:var(--spacing-base-12);width:var(--spacing-base-12)}.lds-icon--svg.xxxxl{height:var(--spacing-base-16);width:var(--spacing-base-16)}.lds-icon--svg.xxxxxl{height:var(--spacing-base-20);width:var(--spacing-base-20)}.lds-icon--svg.xxxxxxl{height:var(--spacing-base-24);width:var(--spacing-base-24)}.lds-icon--svg>svg{fill:var(--alias-color-text-primary)}.lds-icon--svg.accent>svg{fill:var(--alias-color-text-accent)}.lds-icon--svg.black>svg{fill:var(--color-base-black)}.lds-icon--svg.on-dark>svg{fill:var(--color-base-white)}.lds-icon--svg.primary>svg{fill:var(--color-base-blue-default)}.lds-icon--svg.ok>svg{fill:var(--color-background-button-ok-base)}.lds-icon--svg.info>svg{fill:var(--color-background-button-info-base)}.lds-icon--svg.caution>svg{fill:var(--color-background-button-caution-base)}.lds-icon--svg.danger>svg{fill:var(--color-background-button-danger-base)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@k8slens/lds-icons",
3
- "version": "0.8.5",
3
+ "version": "0.9.1",
4
4
  "description": "Lens Design System – React Icon Components",
5
5
  "author": "Mirantis Inc",
6
6
  "license": "MIT",
@@ -30,11 +30,11 @@
30
30
  "react-dom": "^18.2.0"
31
31
  },
32
32
  "devDependencies": {
33
- "@k8slens/lds-tokens": "^0.11.5",
33
+ "@k8slens/lds-tokens": "^0.12.1",
34
34
  "@rollup/plugin-node-resolve": "15.0.1",
35
35
  "@storybook/react": "6.5.13",
36
36
  "@testing-library/react": "13.4.0",
37
37
  "autoprefixer": "10.4.8"
38
38
  },
39
- "gitHead": "bf7788bf649a0444d6a8039f5a0b8b185a9a000c"
39
+ "gitHead": "c8f36edbe711cca3c2bd28e1f55c5c5e82dfb5e5"
40
40
  }