@elliemae/ds-card-v3 3.26.0-next.12

package/dist/esm/styled.js

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { styled, xStyledCommonProps } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { DSCardV3Name, DSCardV3Slots } from "./CardV3Definitions.js";
+const CardActionArea = styled("button", {
+  name: DSCardV3Name,
+  slot: DSCardV3Slots.ACTION_AREA
+})`
+  border: none;
+  background-color: transparent;
+  width: 0px;
+  height: 0px;
+  padding: 0;
+  &:focus {
+    outline: none;
+  }
+  text-align: unset;
+`;
+const StyledCard = styled(Grid)`
+  min-width: 240px;
+  min-height: 56px;
+  background-color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["080"] : "white"};
+  outline-offset: -2px;
+  * {
+    color: ${({ theme, isOverlay }) => isOverlay ? theme.colors.neutral["500"] : "inherit"};
+  }
+
+  ${xStyledCommonProps}
+`;
+const StyledButtonCard = styled(StyledCard)`
+  cursor: pointer;
+`;
+const StyledCardError = styled(StyledCard)`
+  outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};
+`;
+const StyledCardSingleIndicator = styled(Grid)`
+  width: ${({ isSelected }) => isSelected ? "6px" : "4px"};
+  align-self: normal;
+  background-color: ${({ theme, isSelected }) => {
+  if (isSelected)
+    return theme.colors.brand["700"];
+  return theme.colors.brand["300"];
+}};
+  transition: all 0.1s ease-in-out;
+
+  ${StyledCard}:not([data-disabled='true']):not([data-selected='true']):hover & {
+    background-color: ${({ theme }) => theme.colors.brand["500"]};
+  }
+`;
+const StyledCardDisabled = styled(StyledCard)`
+  cursor: not-allowed;
+  user-select: none;
+  opacity: 0.5;
+  ${StyledCardSingleIndicator} {
+    background-color: ${({ theme, isSelected }) => isSelected ? theme.colors.neutral["800"] : theme.colors.neutral["080"]};
+  }
+
+  ${CardActionArea} {
+    pointer-events: none;
+  }
+`;
+const StyledFocusRing = styled(Grid)`
+  width: 100%;
+  height: 100%;
+  outline-offset: -1px;
+  outline: ${({ showFocusRing, hasError, theme }) => {
+  if (showFocusRing) {
+    return `2px solid ${theme.colors.brand[700]}`;
+  }
+  if (hasError) {
+    return `2px solid ${theme.colors.danger[900]}`;
+  }
+  return "none";
+}};
+`;
+export {
+  CardActionArea,
+  StyledButtonCard,
+  StyledCard,
+  StyledCardDisabled,
+  StyledCardError,
+  StyledCardSingleIndicator,
+  StyledFocusRing
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCardV3Name, DSCardV3Slots } from './CardV3Definitions.js';\nexport const CardActionArea = styled('button', {\n  name: DSCardV3Name,\n  slot: DSCardV3Slots.ACTION_AREA,\n})`\n  border: none;\n  background-color: transparent;\n  width: 0px;\n  height: 0px;\n  padding: 0;\n  &:focus {\n    outline: none;\n  }\n  text-align: unset;\n`;\n\n// START style cards variants\nexport const StyledCard = styled(Grid)<{\n  isOverlay?: boolean;\n  onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n}>`\n  min-width: 240px;\n  min-height: 56px;\n  background-color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['080'] : 'white')};\n  outline-offset: -2px;\n  * {\n    color: ${({ theme, isOverlay }) => (isOverlay ? theme.colors.neutral['500'] : 'inherit')};\n  }\n\n  ${xStyledCommonProps}\n`;\n\nexport const StyledButtonCard = styled(StyledCard)<{ isOverlay?: boolean }>`\n  cursor: pointer;\n`;\n\nexport const StyledCardError = styled(StyledCard)`\n  outline: ${({ theme }) => `2px solid ${theme.colors.danger[900]}`};\n`;\n\nexport const StyledCardSingleIndicator = styled(Grid)<{ isSelected?: boolean }>`\n  width: ${({ isSelected }) => (isSelected ? '6px' : '4px')};\n  align-self: normal;\n  background-color: ${({ theme, isSelected }) => {\n    if (isSelected) return theme.colors.brand['700'];\n    return theme.colors.brand['300'];\n  }};\n  transition: all 0.1s ease-in-out;\n\n  ${StyledCard}:not([data-disabled='true']):not([data-selected='true']):hover & {\n    background-color: ${({ theme }) => theme.colors.brand['500']};\n  }\n`;\n\nexport const StyledCardDisabled = styled(StyledCard)`\n  cursor: not-allowed;\n  user-select: none;\n  opacity: 0.5;\n  ${StyledCardSingleIndicator} {\n    background-color: ${({ theme, isSelected }) =>\n      isSelected ? theme.colors.neutral['800'] : theme.colors.neutral['080']};\n  }\n\n  ${CardActionArea} {\n    pointer-events: none;\n  }\n`;\n\nexport const StyledFocusRing = styled(Grid)<{ showFocusRing: boolean; hasError?: boolean }>`\n  width: 100%;\n  height: 100%;\n  outline-offset: -1px;\n  outline: ${({ showFocusRing, hasError, theme }) => {\n    if (showFocusRing) {\n      return `2px solid ${theme.colors.brand[700]}`;\n    }\n    if (hasError) {\n      return `2px solid ${theme.colors.danger[900]}`;\n    }\n    return 'none';\n  }};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,0BAA0B;AAC3C,SAAS,YAAY;AACrB,SAAS,cAAc,qBAAqB;AACrC,MAAM,iBAAiB,OAAO,UAAU;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaM,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA;AAAA,sBAMf,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,aAG9E,CAAC,EAAE,OAAO,UAAU,MAAO,YAAY,MAAM,OAAO,QAAQ,KAAK,IAAI;AAAA;AAAA;AAAA,IAG9E;AAAA;AAGG,MAAM,mBAAmB,OAAO,UAAU;AAAA;AAAA;AAI1C,MAAM,kBAAkB,OAAO,UAAU;AAAA,aACnC,CAAC,EAAE,MAAM,MAAM,aAAa,MAAM,OAAO,OAAO,GAAG;AAAA;AAGzD,MAAM,4BAA4B,OAAO,IAAI;AAAA,WACzC,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ;AAAA;AAAA,sBAE/B,CAAC,EAAE,OAAO,WAAW,MAAM;AAC7C,MAAI;AAAY,WAAO,MAAM,OAAO,MAAM,KAAK;AAC/C,SAAO,MAAM,OAAO,MAAM,KAAK;AACjC;AAAA;AAAA;AAAA,IAGE;AAAA,wBACoB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAIxD,MAAM,qBAAqB,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,IAI/C;AAAA,wBACoB,CAAC,EAAE,OAAO,WAAW,MACvC,aAAa,MAAM,OAAO,QAAQ,KAAK,IAAI,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA,IAGvE;AAAA;AAAA;AAAA;AAKG,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,aAI7B,CAAC,EAAE,eAAe,UAAU,MAAM,MAAM;AACjD,MAAI,eAAe;AACjB,WAAO,aAAa,MAAM,OAAO,MAAM,GAAG;AAAA,EAC5C;AACA,MAAI,UAAU;AACZ,WAAO,aAAa,MAAM,OAAO,OAAO,GAAG;AAAA,EAC7C;AACA,SAAO;AACT;AAAA;",
+  "names": []
+}

package/dist/types/CardV3.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { CardT } from './react-desc-prop-types.js';
+export declare const defaultProps: CardT.DefaultProps;
+export declare const Card: React.ComponentType<CardT.InternalProps>;

package/dist/types/CardV3Definitions.d.ts

@@ -0,0 +1,5 @@
+export declare const DSCardV3Name = "DSCardV3";
+export declare const DSCardV3Slots: {
+    ACTION_AREA: string;
+};
+export declare const DSCardV3DataTestIds: Record<string, string>;

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './CardV3.js';
+export * from './CardV3Definitions.js';
+export * from './react-desc-prop-types.js';
+export * from './parts/index.js';

package/dist/types/parts/CardContent.d.ts

@@ -0,0 +1,2 @@
+import type { CardT } from '../react-desc-prop-types.js';
+export declare const CardContent: (props: CardT.CardElementsProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/parts/CardContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CardContextProps } from '../react-desc-prop-types.js';
+export declare const CardContext: React.Context<CardContextProps>;

package/dist/types/parts/CardFocusRing.d.ts

@@ -0,0 +1,2 @@
+import { type CardT } from '../react-desc-prop-types.js';
+export declare const FocusRing: (props: CardT.FocusRingProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/parts/CardFooter.d.ts

@@ -0,0 +1,2 @@
+import type { CardT } from '../react-desc-prop-types.js';
+export declare const CardFooter: (props: CardT.CardElementsProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/parts/CardHeader.d.ts

@@ -0,0 +1,2 @@
+import type { CardT } from '../react-desc-prop-types.js';
+export declare const CardHeader: (props: CardT.CardElementsProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/parts/CardSelectIndicator.d.ts

@@ -0,0 +1,2 @@
+import { type CardT } from '../react-desc-prop-types.js';
+export declare const CardSelectIndicator: (props: CardT.CardSelectIndicatorProps) => import("react/jsx-runtime.js").JSX.Element;

package/dist/types/parts/index.d.ts

@@ -0,0 +1,5 @@
+export * from './CardContent.js';
+export * from './CardFooter.js';
+export * from './CardHeader.js';
+export * from './CardSelectIndicator.js';
+export * from './CardFocusRing.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { type GlobalAttributesT } from '@elliemae/ds-utilities';
+import { type DSGridT } from '@elliemae/ds-grid';
+export declare namespace CardT {
+    interface RequiredProps {
+        children: React.ReactNode;
+    }
+    interface OptinalProps {
+        isSelected?: boolean;
+        isMultiSelect?: boolean;
+        isOverlay?: boolean;
+        onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    }
+    interface DefaultProps {
+        hasError: boolean;
+    }
+    interface Props extends RequiredProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>, OptinalProps, DefaultProps {
+    }
+    interface InternalProps extends RequiredProps, Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof RequiredProps>, OptinalProps, Partial<DefaultProps> {
+    }
+    interface CardSelectIndicatorProps {
+        isSelected?: boolean;
+        isMultiSelect?: boolean;
+    }
+    interface FocusRingProps {
+        target: string;
+        children: React.ReactNode;
+        hasError?: boolean;
+    }
+    interface CardElementsProps extends Partial<DSGridT.InternalProps> {
+        children: React.ReactNode;
+    }
+}
+export interface CardContextProps {
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    isSelected?: boolean;
+    isMultiSelect?: boolean;
+    disabled?: boolean;
+}

package/dist/types/styled.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+export declare const CardActionArea: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
+export declare const StyledCard: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledButtonCard: import("styled-components").StyledComponent<import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>>, never>;
+export declare const StyledCardError: import("styled-components").StyledComponent<import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>>, never>;
+export declare const StyledCardSingleIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isSelected?: boolean | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;
+export declare const StyledCardDisabled: import("styled-components").StyledComponent<import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>, import("@elliemae/ds-system").Theme, {
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("@elliemae/ds-system").Theme | undefined;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    isOverlay?: boolean | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>>, never>;
+export declare const StyledFocusRing: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
+    showFocusRing: boolean;
+    hasError?: boolean | undefined;
+} & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@elliemae/ds-card-v3",
+  "version": "3.26.0-next.12",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Card V3",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "@elliemae/ds-form-radio": "3.26.0-next.12",
+    "@elliemae/ds-grid": "3.26.0-next.12",
+    "@elliemae/ds-props-helpers": "3.26.0-next.12",
+    "@elliemae/ds-system": "3.26.0-next.12",
+    "@elliemae/ds-utilities": "3.26.0-next.12"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.31",
+    "@elliemae/pui-theme": "~2.7.0",
+    "styled-components": "~5.3.9",
+    "styled-system": "~5.1.5",
+    "@elliemae/ds-monorepo-devops": "3.26.0-next.12"
+  },
+  "peerDependencies": {
+    "@elliemae/pui-theme": "~2.7.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "~5.3.9",
+    "styled-system": "^5.1.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
+    "test": "pui-cli test --passWithNoTests",
+    "lint": "node ../../../scripts/lint.mjs",
+    "eslint:fix": "eslint --ext='.js,.jsx,.test.js,.ts,.tsx' --fix --config='../../../.eslintrc.js' src/",
+    "dts": "node ../../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
+    "dev:build": "pnpm --filter {.}... build",
+    "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
+    "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}