@webiny/admin-ui 6.2.0-beta.0 → 6.3.0-beta.0

package/Link/Link.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as LinkStories from './Link.stories';
+import * as LinkStories from "./Link.stories";
 
 <Meta of={LinkStories} />
 
@@ -15,39 +15,39 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const LinkExample = () => {
-    return (
-        <div>
-            <p>
-                This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
-            </p>
-            <p>
-                <Link to="/settings" variant="secondary" size="lg">
-                    This is a large secondary link
-                </Link>
-            </p>
-            <p>
-                <Link to="/help" underline={true}>
-                    This link is underlined by default
-                </Link>
-            </p>
-        </div>
-    );
-};
+return (
+
+<div>
+  <p>
+    This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
+  </p>
+  <p>
+    <Link to="/settings" variant="secondary" size="lg">
+      This is a large secondary link
+    </Link>
+  </p>
+  <p>
+    <Link to="/help" underline={true}>
+      This link is underlined by default
+    </Link>
+  </p>
+</div>
+); };
 
 export default LinkExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Link/Link.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Link/Link.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={LinkStories.Documentation} />
@@ -57,23 +57,23 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const LinkExample = () => {
-    return (
-        <div>
-            <p>
-                This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
-            </p>
-            <p>
-                <Link to="/settings" variant="secondary" size="lg">
-                    This is a large secondary link
-                </Link>
-            </p>
-            <p>
-                <Link to="/help" underline={true}>
-                    This link is underlined by default
-                </Link>
-            </p>
-        </div>
-    );
+  return (
+    <div>
+      <p>
+        This is a paragraph with a <Link to="/dashboard">link to the dashboard</Link> in it.
+      </p>
+      <p>
+        <Link to="/settings" variant="secondary" size="lg">
+          This is a large secondary link
+        </Link>
+      </p>
+      <p>
+        <Link to="/help" underline={true}>
+          This link is underlined by default
+        </Link>
+      </p>
+    </div>
+  );
 };
 
 export default LinkExample;
@@ -88,12 +88,13 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const DefaultLinkExample = () => {
-    return (
-        <Link to="#">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
-        </Link>
-    );
-};
+return (
+
+<Link to="#">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum
+  rhoncus.
+</Link>
+); };
 
 export default DefaultLinkExample;
 ` } } />
@@ -107,12 +108,12 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const XlLinkExample = () => {
-    return (
-        <Link to="#" size="xl">
-            Extra large link
-        </Link>
-    );
-};
+return (
+
+<Link to="#" size="xl">
+  Extra large link
+</Link>
+); };
 
 export default XlLinkExample;
 ` } } />
@@ -124,12 +125,12 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const LgLinkExample = () => {
-    return (
-        <Link to="#" size="lg">
-            Large link
-        </Link>
-    );
-};
+return (
+
+<Link to="#" size="lg">
+  Large link
+</Link>
+); };
 
 export default LgLinkExample;
 ` } } />
@@ -141,12 +142,12 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const MdLinkExample = () => {
-    return (
-        <Link to="#" size="md">
-            Medium link
-        </Link>
-    );
-};
+return (
+
+<Link to="#" size="md">
+  Medium link
+</Link>
+); };
 
 export default MdLinkExample;
 ` } } />
@@ -158,12 +159,12 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const SmLinkExample = () => {
-    return (
-        <Link to="#" size="sm">
-            Small link
-        </Link>
-    );
-};
+return (
+
+<Link to="#" size="sm">
+  Small link
+</Link>
+); };
 
 export default SmLinkExample;
 ` } } />
@@ -175,15 +176,15 @@ import React from "react";
 import { Link, Text } from "@webiny/admin-ui";
 
 const InheritedSizeLinkExample = () => {
-    return (
-        <Text>
-            <Text size="lg">
-                Size of this text is set to large, so,&nbsp;
-                <Link to="#">this link's</Link> size is also automatically set to large.
-            </Text>
-        </Text>
-    );
-};
+return (
+
+<Text>
+  <Text size="lg">
+    Size of this text is set to large, so,&nbsp;
+    <Link to="#">this link's</Link> size is also automatically set to large.
+  </Text>
+</Text>
+); };
 
 export default InheritedSizeLinkExample;
 ` } } />
@@ -195,12 +196,12 @@ import React from "react";
 import { Link } from "@webiny/admin-ui";
 
 const UnderlinedLinkExample = () => {
-    return (
-        <Link to="#" underline={true}>
-            This link is underlined by default
-        </Link>
-    );
-};
+return (
+
+<Link to="#" underline={true}>
+  This link is underlined by default
+</Link>
+); };
 
 export default UnderlinedLinkExample;
 ` } } />
@@ -212,15 +213,18 @@ import React from "react";
 import { Link, Text } from "@webiny/admin-ui";
 
 const PrimaryNegativeLinkExample = () => {
-    return (
-        <div className="bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed">
-            <Text>
-                Lorem <Link to="#" variant="primary-negative">ipsum dolor sit amet</Link>, consectetur adipiscing elit.
-                Fusce tempus tortor eu sapien interdum rhoncus.
-            </Text>
-        </div>
-    );
-};
+return (
+
+<div className="bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed">
+  <Text>
+    Lorem{" "}
+    <Link to="#" variant="primary-negative">
+      ipsum dolor sit amet
+    </Link>
+    , consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+  </Text>
+</div>
+); };
 
 export default PrimaryNegativeLinkExample;
 ` } } />
@@ -232,15 +236,18 @@ import React from "react";
 import { Link, Text } from "@webiny/admin-ui";
 
 const SecondaryNegativeLinkExample = () => {
-    return (
-        <div className="bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed">
-            <Text>
-                Lorem <Link to="#" variant="secondary-negative">ipsum dolor sit amet</Link>, consectetur adipiscing elit.
-                Fusce tempus tortor eu sapien interdum rhoncus.
-            </Text>
-        </div>
-    );
-};
+return (
+
+<div className="bg-[#25292e] p-[300px] rounded-[5px] text-neutral-dimmed">
+  <Text>
+    Lorem{" "}
+    <Link to="#" variant="secondary-negative">
+      ipsum dolor sit amet
+    </Link>
+    , consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+  </Text>
+</div>
+); };
 
 export default SecondaryNegativeLinkExample;
 ` } } />
@@ -248,17 +255,23 @@ export default SecondaryNegativeLinkExample;
 ## Anatomy
 
 ### Primary
-<img src="/images/storybook/link/primary.png" alt="Primary"/>
+
+<img src="/images/storybook/link/primary.png" alt="Primary" />
 
 ### Secondary
-<img src="/images/storybook/link/secondary.png" alt="Secondary"/>
+
+<img src="/images/storybook/link/secondary.png" alt="Secondary" />
 
 ### Sizing
+
 Links inherit font styles of surrounding text.
-<img src="/images/storybook/link/sizing.png" alt="Sizing"/>
+
+<img src="/images/storybook/link/sizing.png" alt="Sizing" />
 
 ### State
-<img src="/images/storybook/link/states.png" alt="State"/>
+
+<img src="/images/storybook/link/states.png" alt="State" />
 
 ## Usage
-<img src="/images/storybook/link/usage.png" alt="Usage"/>
+
+<img src="/images/storybook/link/usage.png" alt="Usage" />

package/List/List.d.ts

@@ -4,7 +4,7 @@ import { type ListItemProps } from "./components/index.js";
 declare const listVariants: (props?: ({
     variant?: "container" | "underline" | null | undefined;
     background?: "base" | "transparent" | "light" | null | undefined;
-} & import("class-variance-authority/dist/types.js").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ListProps extends VariantProps<typeof listVariants>, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     children: React.ReactNode;
 }

package/List/List.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","makeDecoratable","withStaticProps","cva","cn","ListItem","listVariants","variants","variant","container","underline","background","base","light","transparent","defaultVariants","DecoratableList","children","className","props","createElement","Object","assign","List","Item"],"sources":["List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps, cva, type VariantProps, cn } from \"~/utils.js\";\nimport { ListItem, type ListItemProps } from \"./components/index.js\";\n\nconst listVariants = cva(\"group w-full\", {\n    variants: {\n        variant: {\n            container: \"list-variant-container\",\n            underline: \"list-variant-underline\"\n        },\n        background: {\n            base: \"list-background-base\",\n            light: \"list-background-light\",\n            transparent: \"list-background-transparent\"\n        }\n    },\n    defaultVariants: {\n        variant: \"underline\",\n        background: \"base\"\n    }\n});\n\ninterface ListProps\n    extends VariantProps<typeof listVariants>,\n        Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    children: React.ReactNode;\n}\n\nconst DecoratableList = ({ children, variant, background, className, ...props }: ListProps) => {\n    return (\n        <div {...props} className={cn(listVariants({ variant, background }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst List = withStaticProps(makeDecoratable(\"List\", DecoratableList), {\n    Item: ListItem\n});\n\nexport { List, type ListProps, type ListItemProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe,EAAEC,GAAG,EAAqBC,EAAE;AACrE,SAASC,QAAQ;AAEjB,MAAMC,YAAY,GAAGH,GAAG,CAAC,cAAc,EAAE;EACrCI,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,SAAS,EAAE,wBAAwB;MACnCC,SAAS,EAAE;IACf,CAAC;IACDC,UAAU,EAAE;MACRC,IAAI,EAAE,sBAAsB;MAC5BC,KAAK,EAAE,uBAAuB;MAC9BC,WAAW,EAAE;IACjB;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,OAAO,EAAE,WAAW;IACpBG,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AAQF,MAAMK,eAAe,GAAGA,CAAC;EAAEC,QAAQ;EAAET,OAAO;EAAEG,UAAU;EAAEO,SAAS;EAAE,GAAGC;AAAiB,CAAC,KAAK;EAC3F,oBACInB,KAAA,CAAAoB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEd,EAAE,CAACE,YAAY,CAAC;MAAEE,OAAO;MAAEG;IAAW,CAAC,CAAC,EAAEO,SAAS;EAAE,IAC3ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,IAAI,GAAGrB,eAAe,CAACD,eAAe,CAAC,MAAM,EAAEe,eAAe,CAAC,EAAE;EACnEQ,IAAI,EAAEnB;AACV,CAAC,CAAC;AAEF,SAASkB,IAAI","ignoreList":[]}
+{"version":3,"names":["React","makeDecoratable","withStaticProps","cva","cn","ListItem","listVariants","variants","variant","container","underline","background","base","light","transparent","defaultVariants","DecoratableList","children","className","props","createElement","Object","assign","List","Item"],"sources":["List.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { makeDecoratable, withStaticProps, cva, type VariantProps, cn } from \"~/utils.js\";\nimport { ListItem, type ListItemProps } from \"./components/index.js\";\n\nconst listVariants = cva(\"group w-full\", {\n    variants: {\n        variant: {\n            container: \"list-variant-container\",\n            underline: \"list-variant-underline\"\n        },\n        background: {\n            base: \"list-background-base\",\n            light: \"list-background-light\",\n            transparent: \"list-background-transparent\"\n        }\n    },\n    defaultVariants: {\n        variant: \"underline\",\n        background: \"base\"\n    }\n});\n\ninterface ListProps\n    extends\n        VariantProps<typeof listVariants>,\n        Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n    children: React.ReactNode;\n}\n\nconst DecoratableList = ({ children, variant, background, className, ...props }: ListProps) => {\n    return (\n        <div {...props} className={cn(listVariants({ variant, background }), className)}>\n            {children}\n        </div>\n    );\n};\n\nconst List = withStaticProps(makeDecoratable(\"List\", DecoratableList), {\n    Item: ListItem\n});\n\nexport { List, type ListProps, type ListItemProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,eAAe,EAAEC,eAAe,EAAEC,GAAG,EAAqBC,EAAE;AACrE,SAASC,QAAQ;AAEjB,MAAMC,YAAY,GAAGH,GAAG,CAAC,cAAc,EAAE;EACrCI,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,SAAS,EAAE,wBAAwB;MACnCC,SAAS,EAAE;IACf,CAAC;IACDC,UAAU,EAAE;MACRC,IAAI,EAAE,sBAAsB;MAC5BC,KAAK,EAAE,uBAAuB;MAC9BC,WAAW,EAAE;IACjB;EACJ,CAAC;EACDC,eAAe,EAAE;IACbP,OAAO,EAAE,WAAW;IACpBG,UAAU,EAAE;EAChB;AACJ,CAAC,CAAC;AASF,MAAMK,eAAe,GAAGA,CAAC;EAAEC,QAAQ;EAAET,OAAO;EAAEG,UAAU;EAAEO,SAAS;EAAE,GAAGC;AAAiB,CAAC,KAAK;EAC3F,oBACInB,KAAA,CAAAoB,aAAA,QAAAC,MAAA,CAAAC,MAAA,KAASH,KAAK;IAAED,SAAS,EAAEd,EAAE,CAACE,YAAY,CAAC;MAAEE,OAAO;MAAEG;IAAW,CAAC,CAAC,EAAEO,SAAS;EAAE,IAC3ED,QACA,CAAC;AAEd,CAAC;AAED,MAAMM,IAAI,GAAGrB,eAAe,CAACD,eAAe,CAAC,MAAM,EAAEe,eAAe,CAAC,EAAE;EACnEQ,IAAI,EAAEnB;AACV,CAAC,CAAC;AAEF,SAASkB,IAAI","ignoreList":[]}