@loomhq/lens 10.35.1 → 10.38.0

package/README.md

@@ -7,11 +7,13 @@
 ## Installation
 
 Add Lens to your app:
+
 ```
 yarn add @loomhq/lens
 ```
 
 Add dependencies:
+
 ```
 yarn add @emotion/core
 yarn add @emotion/styled
@@ -30,6 +32,7 @@ document.head.appendChild(style);
 ```
 
 In some cases you might need to inject the CSS variables to a specific element. Pass a string argument to `getThemeStylesString()` and `getAllCssVarsString()`:
+
 ```
 getThemeStylesString('.myGlobalElement')
 getAllCssVarsString('.myGlobalElement')
@@ -48,11 +51,23 @@ document.head.appendChild(style);
 ```
 
 ## Running Locally
+
 ```
 yarn
 yarn dev
 navigate to: http://localhost:3000
 ```
 
+## Contributing
+
+### Use conventional commits
+
+Use [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) to kick off publishing a new version of Lens when PR is merged. To upgrade Lens to the latest published version in the [main Loom repo](http://github.com/loomhq/loom), `cd src/client` and `pnpm up @loomhq/lens`.
+
+### Add an icon to the icon set
+
+Once you have the SVG of the new icon to be added, make sure all strokes are outlined. Set `<svg>` attributes to `viewBox="0 0 24 24" fill="none" {...props}` and `<path>` attributes to `fill="currentColor"`. Follow [this](https://github.com/loomhq/lens/pull/381/files) for an example PR or watch https://www.loom.com/share/26e36c6616be4db386192467b88edbc9 for a step-by-step walkthrough.
+
 ## Documentation
+
 https://lens.loom.dev

package/dist/components/avatar/avatar.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getSizeValue, u } from '../../utilities';
+import { getRadius, getSizeValue, u } from '../../utilities';
 import React from 'react';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
@@ -39,7 +39,7 @@ const AvatarWrapper = styled.span `
   display: block;
   color: var(--lns-color-orangeDark);
   background-color: var(--lns-color-background);
-  border-radius: 100%;
+  ${getRadius('full')};
   overflow: hidden;
   display: flex;
   align-items: center;

package/dist/components/container/container.d.ts

@@ -9,7 +9,7 @@ interface SharedProps {
     backgroundColor?: string;
     contentColor?: string;
     borderColor?: string;
-    radius?: 'medium';
+    radius?: 'medium' | 'large' | 'xlarge' | 'full';
     borderSide?: 'all' | 'left' | 'right' | 'top' | 'bottom';
     shadow?: 'small' | 'medium' | 'large';
     padding?: ResponsiveType<string | number>;

package/dist/components/container/container.js

@@ -59,7 +59,7 @@ const Container = (_a) => {
     return (React.createElement(ContainerWrapper, Object.assign({ backgroundColor: backgroundColor, contentColor: contentColor, borderColor: borderColor, radius: radius, borderSide: borderSide, shadow: shadow, padding: padding, paddingLeft: paddingX || paddingLeft, paddingRight: paddingX || paddingRight, paddingTop: paddingY || paddingTop, paddingBottom: paddingY || paddingBottom, margin: margin, marginLeft: marginX || marginLeft, marginRight: marginX || marginRight, marginTop: marginY || marginTop, marginBottom: marginY || marginBottom, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, as: htmlTag, position: position, top: top, bottom: bottom, left: left, right: right, overflow: overflow, zIndex: zIndex, borderWidth: borderWidth }, props), children));
 };
 export const availableBorderSides = ['all', 'left', 'right', 'top', 'bottom'];
-export const availableRadii = ['medium'];
+export const availableRadii = ['medium', 'large', 'xlarge', 'full'];
 export const availableHtmlTags = [
     'div',
     'header',

package/dist/components/icon/available-icons/index.d.ts

@@ -91,6 +91,7 @@ export { default as SvgLinkOff } from "./link-off.js";
 export { default as SvgList } from "./list.js";
 export { default as SvgLocation } from "./location.js";
 export { default as SvgLock } from "./lock.js";
+export { default as SvgLockFill } from "./lock-fill.js";
 export { default as SvgLogOut } from "./log-out.js";
 export { default as SvgMaximize } from "./maximize.js";
 export { default as SvgMenu } from "./menu.js";
@@ -138,6 +139,7 @@ export { default as SvgShowChart } from "./show-chart.js";
 export { default as SvgSkipBack } from "./skip-back.js";
 export { default as SvgSmile } from "./smile.js";
 export { default as SvgSmileAlt } from "./smile-alt.js";
+export { default as SvgSmileSelect } from "./smile-select.js";
 export { default as SvgSparkle } from "./sparkle.js";
 export { default as SvgStar } from "./star.js";
 export { default as SvgStarOutline } from "./star-outline.js";

package/dist/components/icon/available-icons/index.js

@@ -91,6 +91,7 @@ export { default as SvgLinkOff } from './link-off.js';
 export { default as SvgList } from './list.js';
 export { default as SvgLocation } from './location.js';
 export { default as SvgLock } from './lock.js';
+export { default as SvgLockFill } from './lock-fill.js';
 export { default as SvgLogOut } from './log-out.js';
 export { default as SvgMaximize } from './maximize.js';
 export { default as SvgMenu } from './menu.js';
@@ -138,6 +139,7 @@ export { default as SvgShowChart } from './show-chart.js';
 export { default as SvgSkipBack } from './skip-back.js';
 export { default as SvgSmile } from './smile.js';
 export { default as SvgSmileAlt } from './smile-alt.js';
+export { default as SvgSmileSelect } from './smile-select.js';
 export { default as SvgSparkle } from './sparkle.js';
 export { default as SvgStar } from './star.js';
 export { default as SvgStarOutline } from './star-outline.js';

package/dist/components/icon/available-icons/lock-fill.d.ts

@@ -0,0 +1,2 @@
+export default SvgLockFill;
+declare function SvgLockFill(props: any): JSX.Element;

package/dist/components/icon/available-icons/lock-fill.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+function SvgLockFill(props) {
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none" }, props),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.6 12.2001C6.26863 12.2001 6 12.4688 6 12.8001V18.4001C6 18.7315 6.26863 19.0001 6.6 19.0001H17.8C18.1314 19.0001 18.4 18.7315 18.4 18.4001V12.8001C18.4 12.4688 18.1314 12.2001 17.8 12.2001H6.6ZM4 12.8001C4 11.3642 5.16406 10.2001 6.6 10.2001H17.8C19.2359 10.2001 20.4 11.3642 20.4 12.8001V18.4001C20.4 19.8361 19.2359 21.0001 17.8 21.0001H6.6C5.16406 21.0001 4 19.8361 4 18.4001V12.8001Z", fill: "currentColor" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.2001 5C11.4045 5 10.6414 5.31607 10.0788 5.87868C9.51621 6.44129 9.20014 7.20435 9.20014 8V11.2C9.20014 11.7523 8.75242 12.2 8.20014 12.2C7.64785 12.2 7.20014 11.7523 7.20014 11.2V8C7.20014 6.67392 7.72692 5.40215 8.6646 4.46447C9.60229 3.52678 10.8741 3 12.2001 3C13.5262 3 14.798 3.52678 15.7357 4.46447C16.6734 5.40215 17.2001 6.67392 17.2001 8V11.2C17.2001 11.7523 16.7524 12.2 16.2001 12.2C15.6479 12.2 15.2001 11.7523 15.2001 11.2V8C15.2001 7.20435 14.8841 6.44129 14.3215 5.87868C13.7588 5.31607 12.9958 5 12.2001 5Z", fill: "currentColor" }),
+        React.createElement("path", { d: "M6 12H19V19H6V12Z", fill: "currentColor" })));
+}
+export default SvgLockFill;

package/dist/components/icon/available-icons/smile-select.d.ts

@@ -0,0 +1,2 @@
+export default SvgSmileSelect;
+declare function SvgSmileSelect(props: any): JSX.Element;

package/dist/components/icon/available-icons/smile-select.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+function SvgSmileSelect(props) {
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none" }, props),
+        React.createElement("g", { clipPath: "url(#clip0_10_43)" },
+            React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10 5C6.13401 5 3 8.13401 3 12C3 15.866 6.13401 19 10 19C12.774 19 15.1711 17.3864 16.304 15.0466L17.7818 16.5244C16.2222 19.2011 13.3212 21 10 21C5.02944 21 1 16.9706 1 12C1 7.02944 5.02944 3 10 3C13.8688 3 17.1675 5.44115 18.4397 8.86717C17.7299 8.47856 16.8961 8.39843 16.1351 8.62677C14.9438 6.46475 12.643 5 10 5ZM16.8416 10.5126C16.6407 10.5446 16.4477 10.638 16.2929 10.7929C15.9024 11.1834 15.9024 11.8166 16.2929 12.2071L16.9475 12.8617L18.6341 14.5483L19.2929 15.2071C19.6834 15.5976 20.3166 15.5976 20.7071 15.2071L21.4142 14.5L23.7071 12.2071C24.0976 11.8166 24.0976 11.1834 23.7071 10.7929C23.3166 10.4024 22.6834 10.4024 22.2929 10.7929L20 13.0858L18.9996 12.0854L17.7071 10.7929C17.4714 10.5572 17.1474 10.4638 16.8416 10.5126ZM5.98716 13.0175C6.17497 12.7554 6.47758 12.6 6.79998 12.6H13.2C13.5224 12.6 13.825 12.7554 14.0128 13.0175C14.2006 13.2795 14.2505 13.616 14.1469 13.9213C13.5401 15.7097 11.9263 17 9.99998 17C8.07369 17 6.45983 15.7097 5.85301 13.9213C5.74941 13.616 5.79936 13.2795 5.98716 13.0175ZM7.59995 8.60001C7.04767 8.60001 6.59995 9.04773 6.59995 9.60001C6.59995 10.1523 7.04767 10.6 7.59995 10.6H7.60995C8.16224 10.6 8.60995 10.1523 8.60995 9.60001C8.60995 9.04773 8.16224 8.60001 7.60995 8.60001H7.59995ZM11.4 9.60001C11.4 9.04773 11.8478 8.60001 12.4 8.60001H12.41C12.9623 8.60001 13.41 9.04773 13.41 9.60001C13.41 10.1523 12.9623 10.6 12.41 10.6H12.4C11.8478 10.6 11.4 10.1523 11.4 9.60001Z", fill: "currentColor" })),
+        React.createElement("defs", null,
+            React.createElement("clipPath", { id: "clip0_10_43" },
+                React.createElement("rect", { width: "24", height: "24", fill: "currentColor" })))));
+}
+export default SvgSmileSelect;

package/dist/components/radio/radio.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import { getColorValue, getFocusRing, u } from '../../utilities';
+import { getColorValue, getFocusRing, getRadius, u } from '../../utilities';
 import styled from '@emotion/styled';
 const RadioLabel = styled.label `
   display: block;
@@ -63,7 +63,7 @@ const RadioBox = styled.span `
   cursor: pointer;
   width: ${u(2.25)};
   height: ${u(2.25)};
-  border-radius: ${u(2.25)};
+  ${getRadius('full')};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -73,7 +73,7 @@ const RadioBox = styled.span `
     content: '';
     width: ${u(1)};
     height: ${u(1)};
-    border-radius: ${u(1)};
+    ${getRadius('full')};
     background-color: ${getColorValue('white')};
   }
 `;

package/dist/variables.d.ts

@@ -45,14 +45,19 @@ export namespace fontWeights {
 export namespace radii {
     const medium_2: string;
     export { medium_2 as medium };
+    const large_1: string;
+    export { large_1 as large };
+    const xlarge_1: string;
+    export { xlarge_1 as xlarge };
+    export const full: string;
 }
 export namespace shadows {
     const small_1: string;
     export { small_1 as small };
     const medium_3: string;
     export { medium_3 as medium };
-    const large_1: string;
-    export { large_1 as large };
+    const large_2: string;
+    export { large_2 as large };
 }
 export namespace spaces {
     export const xsmall: number;
@@ -60,10 +65,10 @@ export namespace spaces {
     export { small_2 as small };
     const medium_4: number;
     export { medium_4 as medium };
-    const large_2: number;
-    export { large_2 as large };
-    const xlarge_1: number;
-    export { xlarge_1 as xlarge };
+    const large_3: number;
+    export { large_3 as large };
+    const xlarge_2: number;
+    export { xlarge_2 as xlarge };
     const xxlarge_1: number;
     export { xxlarge_1 as xxlarge };
 }
@@ -74,6 +79,6 @@ export namespace breakpoints {
     export { small_3 as small };
     const medium_5: string;
     export { medium_5 as medium };
-    const large_3: string;
-    export { large_3 as large };
+    const large_4: string;
+    export { large_4 as large };
 }

package/dist/variables.js

@@ -33,7 +33,10 @@ export const fontWeights = {
     black: 900,
 };
 export const radii = {
-    medium: u(0.75),
+    medium: u(1),
+    large: u(2),
+    xlarge: u(4),
+    full: u(999),
 };
 export const shadows = {
     small: `0 ${u(0.5)} ${u(1.25)} hsla(0, 0%, 0%, 0.05)`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.35.1",
+  "version": "10.38.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",