@uniformdev/design-system 20.9.1-alpha.16 → 20.10.0

package/dist/esm/index.js

@@ -8864,21 +8864,28 @@ import { forwardRef as forwardRef17 } from "react";
 // src/components/Tiles/styles/Tile.styles.ts
 import { css as css63 } from "@emotion/react";
 var tileBorderSize = "1px";
+var tileBorderRadius = "var(--rounded-2xl)";
+var tileBorderColor = "var(--gray-300)";
 var Tile = css63`
   background: var(--white);
   cursor: pointer;
-  border: ${tileBorderSize} solid var(--gray-300);
-  display: grid;
+  border: ${tileBorderSize} solid var(--tile-border-color, ${tileBorderColor});
+  display: flex;
+  flex-direction: column;
   padding: var(--spacing-base);
-  place-items: center;
-  place-content: center;
+  align-items: center;
+  justify-content: center;
   gap: var(--spacing-sm);
-  transition: background-color var(--duration-fast) var(--timing-ease-out);
-  min-height: 128px;
+  border-radius: var(--tile-border-radius, ${tileBorderRadius});
+  transition:
+    background-color var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out);
 
   &:hover,
   &:focus {
     background: var(--gray-50);
+    border-color: var(--tile-border-color-hover, var(--accent-dark));
+    z-index: 1;
   }
 
   &[aria-disabled='true'],
@@ -8894,27 +8901,55 @@ var TileIsSelected = css63`
   border: calc(${tileBorderSize} + 1px) solid var(--primary-action-active);
   z-index: 1; // Used to elevate active state border over other Tile borders
 `;
+var TileHorizontal = css63`
+  flex-direction: row;
+  justify-content: flex-start;
+`;
 
 // src/components/Tiles/LinkTile.tsx
 import { jsx as jsx83 } from "@emotion/react/jsx-runtime";
 var LinkTile2 = forwardRef17(
-  ({ children, ...props }, ref) => {
+  ({ orientation = "vertical", children, ...props }, ref) => {
     if ("linkManagerComponent" in props) {
       const { linkManagerComponent: LinkManager, ...rest } = props;
-      return /* @__PURE__ */ jsx83(LinkManager, { css: [Tile, LinkTile], ref, ...rest, children });
+      return /* @__PURE__ */ jsx83(
+        LinkManager,
+        {
+          css: [
+            Tile,
+            LinkTile,
+            orientation === "horizontal" ? TileHorizontal : void 0
+          ],
+          ref,
+          ...rest,
+          children
+        }
+      );
     }
-    return /* @__PURE__ */ jsx83("a", { ref, css: [Tile, LinkTile], ...props, children });
+    return /* @__PURE__ */ jsx83(
+      "a",
+      {
+        ref,
+        css: [Tile, LinkTile, orientation === "horizontal" ? TileHorizontal : void 0],
+        ...props,
+        children
+      }
+    );
   }
 );
 
 // src/components/Tiles/Tile.tsx
 import { jsx as jsx84 } from "@emotion/react/jsx-runtime";
-var Tile2 = ({ children, disabled: disabled2, isSelected, ...props }) => {
+var Tile2 = ({ children, disabled: disabled2, isSelected, orientation = "vertical", ...props }) => {
   return /* @__PURE__ */ jsx84(
     "button",
     {
       type: "button",
-      css: [Tile, isSelected ? TileIsSelected : void 0],
+      css: [
+        Tile,
+        orientation === "horizontal" ? TileHorizontal : void 0,
+        isSelected ? TileIsSelected : void 0
+      ],
       disabled: disabled2,
       ...props,
       children
@@ -8929,17 +8964,46 @@ var TileContainerWrapper = (theme, padding) => css64`
   padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
 `;
 var TileContainerInner = (gap, templateColumns) => css64`
+  /* We remove the border radius from the tiles when used inside TileContainer */
+  --tile-border-radius: 0;
+  --tile-border-color: ${tileBorderColor};
+  /* We don't want the tiles to change border color on hover, because of the border radius we have on the container-level */
+  --tile-border-color-hover: ${tileBorderColor};
+
+  position: relative;
   display: grid;
   grid-template-columns: ${templateColumns};
+  grid-auto-rows: 1fr;
   gap: var(--spacing-${gap});
+  background-color: var(--gray-5);
   margin-top: ${tileBorderSize};
   margin-left: ${tileBorderSize};
+  border-radius: ${tileBorderRadius};
+  overflow: hidden;
+
+  /* This is used to create a border around the tiles */
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: ${tileBorderRadius};
+    border: ${tileBorderSize} solid var(--tile-border-color);
+    pointer-events: none;
+    z-index: 1;
+  }
 
   > * {
     margin-top: -${tileBorderSize};
     margin-left: -${tileBorderSize};
   }
 `;
+var TileContainerInnerWithoutGrouping = css64`
+  overflow: visible;
+
+  &::after {
+    display: none;
+  }
+`;
 
 // src/components/Tiles/TileContainer.tsx
 import { jsx as jsx85 } from "@emotion/react/jsx-runtime";
@@ -8949,9 +9013,19 @@ var TileContainer = ({
   gap = "base",
   gridTemplateColumns = "repeat(auto-fill, minmax(13rem, 1fr))",
   children,
+  withoutGrouping = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx85("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx85("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+  return /* @__PURE__ */ jsx85("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx85(
+    "div",
+    {
+      css: [
+        TileContainerInner(gap, gridTemplateColumns),
+        withoutGrouping ? TileContainerInnerWithoutGrouping : void 0
+      ],
+      children
+    }
+  ) });
 };
 
 // src/components/Tiles/styles/TileText.styles.ts
@@ -10881,7 +10955,7 @@ var ObjectListItemRightSlot = css81`
   gap: var(--spacing-sm);
 `;
 var ObjectListItemContainer = css81`
-  > [role='listitem'] {
+  > [role='listitem']:not(:first-of-type) {
     border-top: 1px solid var(--gray-200);
   }
 `;

package/dist/index.d.mts

@@ -3967,9 +3967,16 @@ type ParagraphProps = {
  */
 declare const Paragraph: ({ className, htmlContent, children, ...pAttributes }: ParagraphProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type LinkOrientation = {
+    /**
+     * The orientation of the tile icon and content
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+};
 type LinkTileProps = {
     children: ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement> & LinkOrientation;
 type LinkTileWithRefProps = {
     children: ReactNode;
     linkManagerComponent: LinkManagerWithRefType;
@@ -3977,7 +3984,7 @@ type LinkTileWithRefProps = {
     href: string;
     passHref: true;
     legacyBehavior?: boolean;
-} & React.RefAttributes<HTMLAnchorElement>;
+} & React.RefAttributes<HTMLAnchorElement> & LinkOrientation;
 declare const LinkTile: React$1.ForwardRefExoticComponent<(LinkTileProps | Omit<LinkTileWithRefProps, "ref">) & React$1.RefAttributes<HTMLAnchorElement>>;
 
 type ClassNameOptions = 'logo' | 'author';
@@ -3996,8 +4003,13 @@ type TileProps = {
     children: ReactNode;
     disabled?: boolean;
     isSelected?: boolean;
+    /**
+     * The orientation of the tile icon and content
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
 } & HtmlHTMLAttributes<HTMLButtonElement>;
-declare const Tile: ({ children, disabled, isSelected, ...props }: TileProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Tile: ({ children, disabled, isSelected, orientation, ...props }: TileProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TileContainerProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
     /** sets the background colour of the outter container
@@ -4018,12 +4030,16 @@ type TileContainerProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
     gap?: '0' | 'sm' | 'base' | 'md' | 'lg';
     /** sets react child elements */
     children: React$1.ReactNode;
+    /** sets whether to group the tiles in a container without a contour or not
+     * @default false
+     */
+    withoutGrouping?: boolean;
 };
 /**
  * Uniform Tile Container Component
  * @example <TileContainer><div>child content</div></TileContainer>
  */
-declare const TileContainer: ({ bgColor, containerPadding, gap, gridTemplateColumns, children, ...props }: TileContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TileContainer: ({ bgColor, containerPadding, gap, gridTemplateColumns, children, withoutGrouping, ...props }: TileContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TileTitleProps = {
     as?: 'heading' | 'description';

package/dist/index.d.ts

@@ -3967,9 +3967,16 @@ type ParagraphProps = {
  */
 declare const Paragraph: ({ className, htmlContent, children, ...pAttributes }: ParagraphProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type LinkOrientation = {
+    /**
+     * The orientation of the tile icon and content
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
+};
 type LinkTileProps = {
     children: ReactNode;
-} & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement> & LinkOrientation;
 type LinkTileWithRefProps = {
     children: ReactNode;
     linkManagerComponent: LinkManagerWithRefType;
@@ -3977,7 +3984,7 @@ type LinkTileWithRefProps = {
     href: string;
     passHref: true;
     legacyBehavior?: boolean;
-} & React.RefAttributes<HTMLAnchorElement>;
+} & React.RefAttributes<HTMLAnchorElement> & LinkOrientation;
 declare const LinkTile: React$1.ForwardRefExoticComponent<(LinkTileProps | Omit<LinkTileWithRefProps, "ref">) & React$1.RefAttributes<HTMLAnchorElement>>;
 
 type ClassNameOptions = 'logo' | 'author';
@@ -3996,8 +4003,13 @@ type TileProps = {
     children: ReactNode;
     disabled?: boolean;
     isSelected?: boolean;
+    /**
+     * The orientation of the tile icon and content
+     * @default 'vertical'
+     */
+    orientation?: 'horizontal' | 'vertical';
 } & HtmlHTMLAttributes<HTMLButtonElement>;
-declare const Tile: ({ children, disabled, isSelected, ...props }: TileProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Tile: ({ children, disabled, isSelected, orientation, ...props }: TileProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TileContainerProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
     /** sets the background colour of the outter container
@@ -4018,12 +4030,16 @@ type TileContainerProps = React$1.HtmlHTMLAttributes<HTMLDivElement> & {
     gap?: '0' | 'sm' | 'base' | 'md' | 'lg';
     /** sets react child elements */
     children: React$1.ReactNode;
+    /** sets whether to group the tiles in a container without a contour or not
+     * @default false
+     */
+    withoutGrouping?: boolean;
 };
 /**
  * Uniform Tile Container Component
  * @example <TileContainer><div>child content</div></TileContainer>
  */
-declare const TileContainer: ({ bgColor, containerPadding, gap, gridTemplateColumns, children, ...props }: TileContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TileContainer: ({ bgColor, containerPadding, gap, gridTemplateColumns, children, withoutGrouping, ...props }: TileContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TileTitleProps = {
     as?: 'heading' | 'description';

package/dist/index.js

@@ -10692,21 +10692,28 @@ var import_react97 = require("react");
 init_emotion_jsx_shim();
 var import_react96 = require("@emotion/react");
 var tileBorderSize = "1px";
+var tileBorderRadius = "var(--rounded-2xl)";
+var tileBorderColor = "var(--gray-300)";
 var Tile = import_react96.css`
   background: var(--white);
   cursor: pointer;
-  border: ${tileBorderSize} solid var(--gray-300);
-  display: grid;
+  border: ${tileBorderSize} solid var(--tile-border-color, ${tileBorderColor});
+  display: flex;
+  flex-direction: column;
   padding: var(--spacing-base);
-  place-items: center;
-  place-content: center;
+  align-items: center;
+  justify-content: center;
   gap: var(--spacing-sm);
-  transition: background-color var(--duration-fast) var(--timing-ease-out);
-  min-height: 128px;
+  border-radius: var(--tile-border-radius, ${tileBorderRadius});
+  transition:
+    background-color var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out);
 
   &:hover,
   &:focus {
     background: var(--gray-50);
+    border-color: var(--tile-border-color-hover, var(--accent-dark));
+    z-index: 1;
   }
 
   &[aria-disabled='true'],
@@ -10722,28 +10729,56 @@ var TileIsSelected = import_react96.css`
   border: calc(${tileBorderSize} + 1px) solid var(--primary-action-active);
   z-index: 1; // Used to elevate active state border over other Tile borders
 `;
+var TileHorizontal = import_react96.css`
+  flex-direction: row;
+  justify-content: flex-start;
+`;
 
 // src/components/Tiles/LinkTile.tsx
 var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
 var LinkTile2 = (0, import_react97.forwardRef)(
-  ({ children, ...props }, ref) => {
+  ({ orientation = "vertical", children, ...props }, ref) => {
     if ("linkManagerComponent" in props) {
       const { linkManagerComponent: LinkManager, ...rest } = props;
-      return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(LinkManager, { css: [Tile, LinkTile], ref, ...rest, children });
+      return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        LinkManager,
+        {
+          css: [
+            Tile,
+            LinkTile,
+            orientation === "horizontal" ? TileHorizontal : void 0
+          ],
+          ref,
+          ...rest,
+          children
+        }
+      );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("a", { ref, css: [Tile, LinkTile], ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      "a",
+      {
+        ref,
+        css: [Tile, LinkTile, orientation === "horizontal" ? TileHorizontal : void 0],
+        ...props,
+        children
+      }
+    );
   }
 );
 
 // src/components/Tiles/Tile.tsx
 init_emotion_jsx_shim();
 var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
-var Tile2 = ({ children, disabled: disabled2, isSelected, ...props }) => {
+var Tile2 = ({ children, disabled: disabled2, isSelected, orientation = "vertical", ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     "button",
     {
       type: "button",
-      css: [Tile, isSelected ? TileIsSelected : void 0],
+      css: [
+        Tile,
+        orientation === "horizontal" ? TileHorizontal : void 0,
+        isSelected ? TileIsSelected : void 0
+      ],
       disabled: disabled2,
       ...props,
       children
@@ -10762,17 +10797,46 @@ var TileContainerWrapper = (theme, padding) => import_react98.css`
   padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
 `;
 var TileContainerInner = (gap, templateColumns) => import_react98.css`
+  /* We remove the border radius from the tiles when used inside TileContainer */
+  --tile-border-radius: 0;
+  --tile-border-color: ${tileBorderColor};
+  /* We don't want the tiles to change border color on hover, because of the border radius we have on the container-level */
+  --tile-border-color-hover: ${tileBorderColor};
+
+  position: relative;
   display: grid;
   grid-template-columns: ${templateColumns};
+  grid-auto-rows: 1fr;
   gap: var(--spacing-${gap});
+  background-color: var(--gray-5);
   margin-top: ${tileBorderSize};
   margin-left: ${tileBorderSize};
+  border-radius: ${tileBorderRadius};
+  overflow: hidden;
+
+  /* This is used to create a border around the tiles */
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: ${tileBorderRadius};
+    border: ${tileBorderSize} solid var(--tile-border-color);
+    pointer-events: none;
+    z-index: 1;
+  }
 
   > * {
     margin-top: -${tileBorderSize};
     margin-left: -${tileBorderSize};
   }
 `;
+var TileContainerInnerWithoutGrouping = import_react98.css`
+  overflow: visible;
+
+  &::after {
+    display: none;
+  }
+`;
 
 // src/components/Tiles/TileContainer.tsx
 var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
@@ -10782,9 +10846,19 @@ var TileContainer = ({
   gap = "base",
   gridTemplateColumns = "repeat(auto-fill, minmax(13rem, 1fr))",
   children,
+  withoutGrouping = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    "div",
+    {
+      css: [
+        TileContainerInner(gap, gridTemplateColumns),
+        withoutGrouping ? TileContainerInnerWithoutGrouping : void 0
+      ],
+      children
+    }
+  ) });
 };
 
 // src/components/Tiles/TileText.tsx
@@ -12755,7 +12829,7 @@ var ObjectListItemRightSlot = import_react123.css`
   gap: var(--spacing-sm);
 `;
 var ObjectListItemContainer = import_react123.css`
-  > [role='listitem'] {
+  > [role='listitem']:not(:first-of-type) {
     border-top: 1px solid var(--gray-200);
   }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.9.1-alpha.16+5d93781920",
+  "version": "20.10.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -26,8 +26,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@uniformdev/canvas": "^20.9.1-alpha.16+5d93781920",
-    "@uniformdev/richtext": "^20.9.1-alpha.16+5d93781920",
+    "@uniformdev/canvas": "^20.10.0",
+    "@uniformdev/richtext": "^20.10.0",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.47",
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5d937819205e0fe171a5b51f2e204cddc910cbf3"
+  "gitHead": "a17d7e247f34bc04f8ffd1274d850484dd09716b"
 }