@loomhq/lens 10.93.0 → 10.93.2

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 (3) hide show
  1. package/dist/components/logo/logo.d.ts +3 -1
  2. package/dist/components/logo/logo.js +37 -28
  3. package/package.json +1 -1
package/dist/components/logo/logo.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  declare const LogoWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LogoWrapperProps, object>;
3
- declare const Logo: ({ variant, maxWidth, symbolColor, wordmarkColor, brand, ...props }: LogoProps & React.ComponentProps<typeof LogoWrapper>) => JSX.Element;
3
+ declare const Logo: ({ variant, maxWidth, symbolColor, wordmarkColor, brand, customId, title, ...props }: LogoProps & React.ComponentProps<typeof LogoWrapper>) => JSX.Element;
4
4
  export declare const availableVariants: string[];
5
5
  declare type LogoProps = {
6
6
  variant?: 'combined' | 'symbol' | 'wordmark';
@@ -8,6 +8,8 @@ declare type LogoProps = {
8
8
  maxWidth?: number | string;
9
9
  symbolColor?: string;
10
10
  wordmarkColor?: string;
11
+ customId?: string;
12
+ title?: string;
11
13
  };
12
14
  declare type LogoWrapperProps = {
13
15
  variant?: 'combined' | 'symbol' | 'wordmark';
package/dist/components/logo/logo.js CHANGED
@@ -12,41 +12,47 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import React from 'react';
13
13
  import { getSize, getColorValue } from '../../utilities';
14
14
  import styled from '@emotion/styled';
15
- const LoomAiGradientDef = (React.createElement("defs", null,
16
- React.createElement("radialGradient", { id: "gradient1", cx: "50%", cy: "50%", r: "100%", fx: "0%", fy: "0%" },
17
- React.createElement("stop", { offset: "30%", stopColor: "#97ACFD" }),
18
- React.createElement("stop", { offset: "33%", stopColor: "#B3B2F4" }),
19
- React.createElement("stop", { offset: "43%", stopColor: "#DEB0E0" }),
20
- React.createElement("stop", { offset: "50%", stopColor: "#DFC6E5" }),
21
- React.createElement("stop", { offset: "72%", stopColor: "#6663F6" })),
22
- React.createElement("radialGradient", { id: "gradient2", r: "100%", fx: "40%", fy: "72%" },
23
- React.createElement("stop", { offset: "20%", stopColor: "#615CF500" }),
24
- React.createElement("stop", { offset: "32%", stopColor: "#615CF550" }),
25
- React.createElement("stop", { offset: "48%", stopColor: "#6663F6" })),
26
- React.createElement("radialGradient", { id: "gradient3", r: "100%", fx: "0%", fy: "100%" },
27
- React.createElement("stop", { offset: "25%", stopColor: "#6663F6" }),
28
- React.createElement("stop", { offset: "38%", stopColor: "#6E68F450" }),
29
- React.createElement("stop", { offset: "45%", stopColor: "#6E68F400" }))));
15
+ const LoomAiGradientDef = (customId) => {
16
+ return (React.createElement("defs", null,
17
+ React.createElement("radialGradient", { id: `ai-logo-${customId}-gradient-1`, cx: "50%", cy: "50%", r: "100%", fx: "0%", fy: "0%" },
18
+ React.createElement("stop", { offset: "30%", stopColor: "#97ACFD" }),
19
+ React.createElement("stop", { offset: "33%", stopColor: "#B3B2F4" }),
20
+ React.createElement("stop", { offset: "43%", stopColor: "#DEB0E0" }),
21
+ React.createElement("stop", { offset: "50%", stopColor: "#DFC6E5" }),
22
+ React.createElement("stop", { offset: "72%", stopColor: "#6663F6" })),
23
+ React.createElement("radialGradient", { id: `ai-logo-${customId}-gradient-2`, r: "100%", fx: "40%", fy: "72%" },
24
+ React.createElement("stop", { offset: "20%", stopColor: "#615CF500" }),
25
+ React.createElement("stop", { offset: "32%", stopColor: "#615CF550" }),
26
+ React.createElement("stop", { offset: "48%", stopColor: "#6663F6" })),
27
+ React.createElement("radialGradient", { id: `ai-logo-${customId}-gradient-3`, r: "100%", fx: "0%", fy: "100%" },
28
+ React.createElement("stop", { offset: "25%", stopColor: "#6663F6" }),
29
+ React.createElement("stop", { offset: "38%", stopColor: "#6E68F450" }),
30
+ React.createElement("stop", { offset: "45%", stopColor: "#6E68F400" }))));
31
+ };
30
32
  const symbolLogoPath = 'M30 15.4433C30 16.6091 29.0933 16.8581 27.9562 16.9301C22.5158 17.2323 16.7962 22.686 16.4795 28.112C16.422 29.2634 16.173 30.1702 15.0072 30.1702C13.8414 30.1702 13.578 29.2634 13.5205 28.0976C13.2038 22.686 7.48416 17.2323 2.05814 16.9301C0.906735 16.8581 0 16.6091 0 15.4433C0 14.2775 0.906735 14.043 2.05814 13.971C7.48416 13.6687 13.2038 7.65433 13.5205 2.22831C13.578 1.0769 13.827 0.170166 15.0072 0.170166C16.1874 0.170166 16.422 1.0769 16.4795 2.22831C16.7962 7.65433 22.5158 13.6687 27.9419 13.971C29.0933 14.043 30 14.2919 30 15.4433Z';
31
33
  const SymbolLogoSvg = (_a) => {
32
- var { brand, symbolColor } = _a, props = __rest(_a, ["brand", "symbolColor"]);
34
+ var { brand, symbolColor, customId, title } = _a, props = __rest(_a, ["brand", "symbolColor", "customId", "title"]);
33
35
  switch (brand) {
34
36
  case 'ai':
35
- return (React.createElement("svg", Object.assign({ viewBox: "0 0 30 31", fill: "none" }, props), !symbolColor ? (React.createElement(React.Fragment, null,
36
- LoomAiGradientDef,
37
- [...Array(3)].map((_, i) => (React.createElement("path", { key: i, d: symbolLogoPath, fill: `url(#gradient${i + 1})` }))))) : (React.createElement("path", { d: symbolLogoPath, fill: getColorValue(symbolColor) }))));
37
+ return (React.createElement("svg", Object.assign({ viewBox: "0 0 30 31", fill: "none" }, props),
38
+ title && React.createElement("title", null, title),
39
+ !symbolColor ? (React.createElement(React.Fragment, null,
40
+ LoomAiGradientDef(customId),
41
+ [...Array(3)].map((_, i) => (React.createElement("path", { key: i, d: symbolLogoPath, fill: `url(#ai-logo-${customId}-gradient-${i + 1}` }))))) : (React.createElement("path", { d: symbolLogoPath, fill: getColorValue(symbolColor) }))));
38
42
  default:
39
43
  return (React.createElement("svg", Object.assign({ viewBox: "0 0 31 30", fill: "none" }, props),
44
+ title && React.createElement("title", null, title),
40
45
  React.createElement("path", { d: "M30.01 13.43h-9.142l7.917-4.57-1.57-2.72-7.918 4.57 4.57-7.915-2.72-1.57-4.571 7.913V0h-3.142v9.139L8.863 1.225l-2.721 1.57 4.57 7.913L2.796 6.14 1.225 8.86l7.917 4.57H0v3.141h9.141l-7.916 4.57 1.57 2.72 7.918-4.57-4.571 7.915 2.72 1.57 4.572-7.914V30h3.142v-9.334l4.655 8.06 2.551-1.472-4.656-8.062 8.087 4.668 1.571-2.72-7.916-4.57h9.141v-3.14h.001zm-15.005 5.84a4.271 4.271 0 11-.001-8.542 4.271 4.271 0 01.001 8.542z", fill: symbolColor
41
46
  ? getColorValue(symbolColor)
42
47
  : getColorValue('primary') })));
43
48
  }
44
49
  };
45
50
  const WordmarkLogoSvg = (_a) => {
46
- var { brand, wordmarkColor } = _a, props = __rest(_a, ["brand", "wordmarkColor"]);
51
+ var { brand, wordmarkColor, title } = _a, props = __rest(_a, ["brand", "wordmarkColor", "title"]);
47
52
  switch (brand) {
48
53
  case 'ai':
49
54
  return (React.createElement("svg", Object.assign({ viewBox: "0 0 94 23", fill: wordmarkColor }, props),
55
+ title && React.createElement("title", null, title),
50
56
  React.createElement("path", { d: "M4.12637 22.4624H0V0H4.12637V22.4624Z" }),
51
57
  React.createElement("path", { d: "M13.3999 19.1737C15.4166 19.1737 17.2781 17.7155 17.2781 14.8301C17.2781 11.9448 15.4166 10.4866 13.3999 10.4866C11.3833 10.4866 9.52175 11.9448 9.52175 14.8301C9.52175 17.6845 11.3833 19.1737 13.3999 19.1737ZM13.3999 6.7325C17.9606 6.7325 21.4045 10.1143 21.4045 14.8301C21.4045 19.515 17.9606 22.9277 13.3999 22.9277C8.83919 22.9277 5.39538 19.515 5.39538 14.8301C5.39538 10.1143 8.83919 6.7325 13.3999 6.7325Z" }),
52
58
  React.createElement("path", { d: "M29.7548 19.1737C31.7714 19.1737 33.6329 17.7155 33.6329 14.8301C33.6329 11.9448 31.7714 10.4866 29.7548 10.4866C27.7381 10.4866 25.8766 11.9448 25.8766 14.8301C25.8766 17.6845 27.7381 19.1737 29.7548 19.1737ZM29.7548 6.7325C34.3155 6.7325 37.7593 10.1143 37.7593 14.8301C37.7593 19.515 34.3155 22.9277 29.7548 22.9277C25.194 22.9277 21.7502 19.515 21.7502 14.8301C21.7502 10.1143 25.194 6.7325 29.7548 6.7325Z" }),
@@ -55,18 +61,20 @@ const WordmarkLogoSvg = (_a) => {
55
61
  React.createElement("path", { d: "M94 22.4624H89.6565V0.46538H94V22.4624Z" })));
56
62
  default:
57
63
  return (React.createElement("svg", Object.assign({ viewBox: "0 0 62 23", fill: wordmarkColor }, props),
64
+ title && React.createElement("title", null, title),
58
65
  React.createElement("path", { d: "M.109 21.973V.027h4.028v21.946H.109zM38.742 7.059h3.846v1.82c.818-1.456 2.727-2.244 4.362-2.244 2.03 0 3.665.88 4.422 2.485 1.18-1.82 2.756-2.485 4.725-2.485 2.756 0 5.39 1.667 5.39 5.668v9.67h-3.906v-8.851c0-1.607-.788-2.82-2.636-2.82-1.727 0-2.757 1.335-2.757 2.942v8.73h-3.997v-8.852c0-1.607-.817-2.82-2.635-2.82-1.757 0-2.787 1.305-2.787 2.942v8.73h-4.027V7.059zM13.24 22.405c-4.537 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.288 7.889-7.824 7.889zm0-12.135a4.25 4.25 0 00-4.244 4.247 4.25 4.25 0 004.244 4.247 4.25 4.25 0 004.243-4.247 4.25 4.25 0 00-4.243-4.247zM29.667 22.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.29 7.889-7.824 7.889zm0-12.186a4.3 4.3 0 00-4.293 4.296 4.3 4.3 0 004.293 4.296 4.3 4.3 0 004.293-4.296 4.3 4.3 0 00-4.293-4.296z" })));
59
66
  }
60
67
  };
61
68
  const combinedLogoPath = 'M100 7.76427C100 8.35691 99.539 8.48348 98.961 8.52007C96.1953 8.67371 93.2877 11.4461 93.1267 14.2045C93.0975 14.7898 92.9709 15.2508 92.3783 15.2508C91.7856 15.2508 91.6517 14.7898 91.6225 14.1972C91.4615 11.4461 88.5539 8.67371 85.7955 8.52007C85.2102 8.48348 84.7492 8.35691 84.7492 7.76427C84.7492 7.17162 85.2102 7.05237 85.7955 7.01578C88.5539 6.86213 91.4615 3.80464 91.6225 1.04628C91.6517 0.460948 91.7783 0 92.3783 0C92.9782 0 93.0975 0.460948 93.1267 1.04628C93.2877 3.80464 96.1953 6.86213 98.9537 7.01578C99.539 7.05237 100 7.17894 100 7.76427Z';
62
69
  const CombinedLogoSvg = (_a) => {
63
- var { brand, wordmarkColor, symbolColor } = _a, props = __rest(_a, ["brand", "wordmarkColor", "symbolColor"]);
70
+ var { brand, wordmarkColor, symbolColor, customId, title } = _a, props = __rest(_a, ["brand", "wordmarkColor", "symbolColor", "customId", "title"]);
64
71
  switch (brand) {
65
72
  case 'ai':
66
73
  return (React.createElement("svg", Object.assign({ viewBox: "0 0 100 30", fill: "none" }, props),
74
+ title && React.createElement("title", null, title),
67
75
  !symbolColor ? (React.createElement(React.Fragment, null,
68
- LoomAiGradientDef,
69
- [...Array(3)].map((_, i) => (React.createElement("path", { key: i, d: combinedLogoPath, fill: `url(#gradient${i + 1})` }))))) : (React.createElement("path", { d: combinedLogoPath, fill: getColorValue(symbolColor) })),
76
+ LoomAiGradientDef(customId),
77
+ [...Array(3)].map((_, i) => (React.createElement("path", { key: i, d: combinedLogoPath, fill: `url(#ai-logo-${customId}-gradient-${i + 1}` }))))) : (React.createElement("path", { d: combinedLogoPath, fill: getColorValue(symbolColor) })),
70
78
  React.createElement("g", { fill: wordmarkColor },
71
79
  React.createElement("path", { d: "M4.1997 29.5909H0.570312V9.83386H4.1997V29.5909Z" }),
72
80
  React.createElement("path", { d: "M12.3563 26.6983C14.1301 26.6983 15.7674 25.4157 15.7674 22.8778C15.7674 20.34 14.1301 19.0574 12.3563 19.0574C10.5826 19.0574 8.94526 20.34 8.94526 22.8778C8.94526 25.3884 10.5826 26.6983 12.3563 26.6983ZM12.3563 15.7555C16.3678 15.7555 19.3968 18.73 19.3968 22.8778C19.3968 26.9984 16.3678 30.0002 12.3563 30.0002C8.34491 30.0002 5.31587 26.9984 5.31587 22.8778C5.31587 18.73 8.34491 15.7555 12.3563 15.7555Z" }),
@@ -76,6 +84,7 @@ const CombinedLogoSvg = (_a) => {
76
84
  React.createElement("path", { d: "M83.249 29.5909H79.4285V10.2432H83.249V29.5909Z" }))));
77
85
  default:
78
86
  return (React.createElement("svg", Object.assign({ viewBox: "0 0 100 30", fill: "none" }, props),
87
+ title && React.createElement("title", null, title),
79
88
  React.createElement("path", { d: "M30.01 13.43h-9.142l7.917-4.57-1.57-2.72-7.918 4.57 4.57-7.915-2.72-1.57-4.571 7.913V0h-3.142v9.139L8.863 1.225l-2.721 1.57 4.57 7.913L2.796 6.14 1.225 8.86l7.917 4.57H0v3.141h9.141l-7.916 4.57 1.57 2.72 7.918-4.57-4.571 7.915 2.72 1.57 4.572-7.914V30h3.142v-9.334l4.655 8.06 2.551-1.472-4.656-8.062 8.087 4.668 1.571-2.72-7.916-4.57h9.141v-3.14h.001zm-15.005 5.84a4.271 4.271 0 11-.001-8.542 4.271 4.271 0 01.001 8.542z", fill: symbolColor
80
89
  ? getColorValue(symbolColor)
81
90
  : getColorValue('primary') }),
@@ -94,11 +103,11 @@ const LogoWrapper = styled.span `
94
103
  }
95
104
  `;
96
105
  const Logo = (_a) => {
97
- var { variant = 'combined', maxWidth, symbolColor, wordmarkColor = 'body', brand = 'loom' } = _a, props = __rest(_a, ["variant", "maxWidth", "symbolColor", "wordmarkColor", "brand"]);
98
- return (React.createElement(LogoWrapper, Object.assign({ "aria-label": brand, variant: variant, maxWidth: maxWidth }, props),
99
- variant === 'combined' && (React.createElement(CombinedLogoSvg, { brand: brand, symbolColor: symbolColor, wordmarkColor: getColorValue(wordmarkColor), className: "lns-logoSvg" })),
100
- variant === 'symbol' && (React.createElement(SymbolLogoSvg, { brand: brand, symbolColor: symbolColor, className: "lns-logoSvg" })),
101
- variant === 'wordmark' && (React.createElement(WordmarkLogoSvg, { brand: brand, wordmarkColor: getColorValue(wordmarkColor), className: "lns-logoSvg" }))));
106
+ var { variant = 'combined', maxWidth, symbolColor, wordmarkColor = 'body', brand = 'loom', customId = '', title = '' } = _a, props = __rest(_a, ["variant", "maxWidth", "symbolColor", "wordmarkColor", "brand", "customId", "title"]);
107
+ return (React.createElement(LogoWrapper, Object.assign({ variant: variant, maxWidth: maxWidth }, props),
108
+ variant === 'combined' && (React.createElement(CombinedLogoSvg, { brand: brand, symbolColor: symbolColor, wordmarkColor: getColorValue(wordmarkColor), customId: customId, className: "lns-logoSvg", title: title })),
109
+ variant === 'symbol' && (React.createElement(SymbolLogoSvg, { brand: brand, symbolColor: symbolColor, customId: customId, className: "lns-logoSvg", title: title })),
110
+ variant === 'wordmark' && (React.createElement(WordmarkLogoSvg, { brand: brand, wordmarkColor: getColorValue(wordmarkColor), className: "lns-logoSvg", title: title }))));
102
111
  };
103
112
  export const availableVariants = ['combined', 'symbol', 'wordmark'];
104
113
  export default Logo;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@loomhq/lens",
3
- "version": "10.93.0",
3
+ "version": "10.93.2",
4
4
  "scripts": {
5
5
  "dev": "next",
6
6
  "build:next": "next build",