@elliemae/ds-legacy-chip 1.0.0-rc.1

package/dist/esm/styles.js

@@ -0,0 +1,196 @@
+import * as React from "react";
+import { styled, css, xStyledCommonProps } from "@elliemae/ds-legacy-system";
+import { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from "./constants.js";
+import { DSChipName, DSChipSlots } from "./exported_related/index.js";
+const getChipSize = (shape) => shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes;
+const StyledChipLabel = styled("div", { name: DSChipName, slot: DSChipSlots.LABEL })`
+  font-size: ${({ theme }) => theme.fontSizes.label[200]};
+  font-weight: ${({ theme }) => theme.fontWeights.semibold};
+  word-wrap: break-word;
+  text-align: center;
+  padding: ${({ size }) => size === CHIP_SIZES.L ? "2px" : "4px"} 6px 6px 6px;
+  z-index: 0;
+  line-height: 1.27;
+  width: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledSpanWithEllipsis = styled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+`;
+const StyledWrapper = styled("div")`
+  display: flex;
+  height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};
+  width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};
+  ${xStyledCommonProps}
+`;
+const disabledRoundShape = css`
+  background-color: ${({ theme }) => theme.colors.neutral[200]};
+
+  & .DSIcon-root .DSIcon-svg {
+    fill: ${({ theme }) => theme.colors.neutral[500]};
+  }
+`;
+const StyledRoundShape = styled("div", {
+  name: DSChipName,
+  slot: DSChipSlots.ROUND_SHAPE
+})`
+  background-color: ${({ theme }) => theme.colors.brand[600]};
+  width: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
+  height: ${({ size }) => size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall};
+  border-radius: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: ${({ size }) => size === CHIP_SIZES.L ? "5px" : "10px"};
+`;
+const StyledChildrenWrapper = styled("div", { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`
+  width: 100%;
+  height: 100%;
+`;
+const styledChipSelectedCss = css`
+  ${StyledRoundShape} {
+    background-color: ${({ theme }) => theme.colors.brand[800]};
+  }
+  color: ${({ theme }) => theme.colors.brand[800]};
+  background-color: ${({ theme }) => theme.colors.brand[200]};
+
+  .DSIcon-svg {
+    fill: ${({ theme }) => theme.colors.brand[800]};
+  }
+
+  &:before {
+    border: 1px solid ${({ theme }) => theme.colors.brand[600]};
+  }
+
+  &:focus {
+    &:before {
+      border: 2px solid ${({ theme }) => theme.colors.brand[800]};
+    }
+  }
+`;
+const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON })`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0;
+  padding-top: ${(props) => props.buttonShape === CHIP_SHAPES.ROUND ? "0" : "10px"};
+  border: none;
+  min-height: 100%;
+  height: fit-content;
+  width: 100%;
+  background-color: #fff;
+  color: ${({ theme }) => theme.colors.brand[600]};
+  border-radius: 4px;
+  cursor: pointer;
+  outline: none;
+
+  ${StyledRoundShape} {
+    & .DSIcon-root .DSIcon-svg {
+      fill: #fff;
+      height: 24px;
+      width: 24px;
+    }
+    ${({ disabled }) => disabled && disabledRoundShape}
+  }
+  &:before {
+    content: '';
+    position: absolute;
+    z-index: 20;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    border: 2px solid transparent;
+    pointer-events: none;
+  }
+
+  & .DSIcon-root .DSIcon-svg {
+    fill: ${({ theme }) => theme.colors.brand[600]};
+    height: 24px;
+    width: 24px;
+  }
+
+  & .DSIcon-root {
+    height: 24px;
+    width: 24px;
+  }
+
+  &:hover,
+  &:focus {
+    z-index: 10;
+
+    ${StyledChipLabel} {
+      text-align: left;
+    }
+
+    ${StyledSpanWithEllipsis} {
+      overflow-wrap: break-word;
+      white-space: pre-wrap;
+      overflow: visible;
+    }
+  }
+
+  &:hover {
+    ${StyledRoundShape} {
+      background-color: ${({ theme }) => theme.colors.brand[800]};
+    }
+    color: ${({ theme }) => theme.colors.brand[800]};
+    background-color: ${({ theme }) => theme.colors.brand[200]};
+    .DSIcon-svg {
+      fill: ${({ theme }) => theme.colors.brand[800]};
+    }
+  }
+
+  &:focus {
+    &:before {
+      border-color: ${({ theme }) => theme.colors.brand[800]};
+    }
+  }
+
+  &:disabled {
+    color: ${({ theme }) => theme.colors.neutral[500]};
+    cursor: not-allowed;
+
+    .DSIcon-svg {
+      fill: ${({ theme }) => theme.colors.neutral[500]};
+    }
+
+    &:focus,
+    &:hover {
+      ${StyledRoundShape} {
+        background-color: ${({ theme }) => theme.colors.neutral[200]};
+      }
+      background-color: #fff;
+      cursor: not-allowed;
+      &:before {
+        border-color: transparent;
+      }
+
+      ${StyledChipLabel} {
+        color: ${({ theme }) => theme.colors.neutral[500]};
+      }
+    }
+
+    &:hover .DSIcon-svg {
+      fill: ${({ theme }) => theme.colors.neutral[500]};
+    }
+  }
+
+  ${({ selected }) => !selected ? "" : styledChipSelectedCss}
+`;
+export {
+  StyledChildrenWrapper,
+  StyledChip,
+  StyledChipLabel,
+  StyledRoundShape,
+  StyledSpanWithEllipsis,
+  StyledWrapper
+};
+//# sourceMappingURL=styles.js.map

package/dist/esm/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css, xStyledCommonProps } from '@elliemae/ds-legacy-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants.js';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes.js';\nimport { DSChipName, DSChipSlots } from './exported_related/index.js';\n\nexport interface StyledChipPropsT {\n  buttonSize: ChipSizesT;\n  buttonShape: ChipShapesT;\n  selected?: boolean;\n}\n\nexport interface StyledRoundShapePropsT {\n  size: ChipSizesT;\n  disabled?: boolean;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nexport const StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.LABEL })<{ size: ChipSizesT }>`\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  word-wrap: break-word;\n  text-align: center;\n  padding: ${({ size }) => (size === CHIP_SIZES.L ? '2px' : '4px')} 6px 6px 6px;\n  z-index: 0;\n  line-height: 1.27;\n  width: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const StyledSpanWithEllipsis = styled.span`\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 100%;\n`;\n\nexport const StyledWrapper = styled('div')<StyledChipPropsT>`\n  display: flex;\n  height: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].height};\n  width: ${({ buttonSize, buttonShape }) => getChipSize(buttonShape)[buttonSize].width};\n  ${xStyledCommonProps}\n`;\n\nconst disabledRoundShape = css`\n  background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nexport const StyledRoundShape = styled('div', {\n  name: DSChipName,\n  slot: DSChipSlots.ROUND_SHAPE,\n})<StyledRoundShapePropsT>`\n  background-color: ${({ theme }) => theme.colors.brand[600]};\n  width: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n  height: ${({ size }) => (size === CHIP_SIZES.L ? roundShapeLarge : roundShapeSmall)};\n  border-radius: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-top: ${({ size }) => (size === CHIP_SIZES.L ? '5px' : '10px')};\n`;\n\nexport const StyledChildrenWrapper = styled('div', { name: DSChipName, slot: DSChipSlots.CHILDREN_WRAPPER })`\n  width: 100%;\n  height: 100%;\n`;\n\nconst styledChipSelectedCss = css`\n  ${StyledRoundShape} {\n    background-color: ${({ theme }) => theme.colors.brand[800]};\n  }\n  color: ${({ theme }) => theme.colors.brand[800]};\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n\n  .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.brand[800]};\n  }\n\n  &:before {\n    border: 1px solid ${({ theme }) => theme.colors.brand[600]};\n  }\n\n  &:focus {\n    &:before {\n      border: 2px solid ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<\n  Pick<StyledChipPropsT, 'selected' | 'buttonShape'>\n>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 0;\n  padding-top: ${(props) => (props.buttonShape === CHIP_SHAPES.ROUND ? '0' : '10px')};\n  border: none;\n  min-height: 100%;\n  height: fit-content;\n  width: 100%;\n  background-color: #fff;\n  color: ${({ theme }) => theme.colors.brand[600]};\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n\n  ${StyledRoundShape} {\n    & .DSIcon-root .DSIcon-svg {\n      fill: #fff;\n      height: 24px;\n      width: 24px;\n    }\n    ${({ disabled }) => disabled && disabledRoundShape}\n  }\n  &:before {\n    content: '';\n    position: absolute;\n    z-index: 20;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    border: 2px solid transparent;\n    pointer-events: none;\n  }\n\n  & .DSIcon-root .DSIcon-svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n    height: 24px;\n    width: 24px;\n  }\n\n  & .DSIcon-root {\n    height: 24px;\n    width: 24px;\n  }\n\n  &:hover,\n  &:focus {\n    z-index: 10;\n\n    ${StyledChipLabel} {\n      text-align: left;\n    }\n\n    ${StyledSpanWithEllipsis} {\n      overflow-wrap: break-word;\n      white-space: pre-wrap;\n      overflow: visible;\n    }\n  }\n\n  &:hover {\n    ${StyledRoundShape} {\n      background-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n    color: ${({ theme }) => theme.colors.brand[800]};\n    background-color: ${({ theme }) => theme.colors.brand[200]};\n    .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  &:focus {\n    &:before {\n      border-color: ${({ theme }) => theme.colors.brand[800]};\n    }\n  }\n\n  &:disabled {\n    color: ${({ theme }) => theme.colors.neutral[500]};\n    cursor: not-allowed;\n\n    .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &:focus,\n    &:hover {\n      ${StyledRoundShape} {\n        background-color: ${({ theme }) => theme.colors.neutral[200]};\n      }\n      background-color: #fff;\n      cursor: not-allowed;\n      &:before {\n        border-color: transparent;\n      }\n\n      ${StyledChipLabel} {\n        color: ${({ theme }) => theme.colors.neutral[500]};\n      }\n    }\n\n    &:hover .DSIcon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n  }\n\n  ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/types/DSChip.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DSChipT } from './react-desc-prop-types.js';
+declare const DSChip: React.ComponentType<DSChipT.Props>;
+declare const DSChipWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSChipT.Props>;
+export { DSChip, DSChipWithSchema };

package/dist/types/config/useConfig.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { DSChipT } from '../react-desc-prop-types.js';
+export declare const useConfig: (props: DSChipT.Props) => {
+    globalAttrs: import("@elliemae/ds-legacy-props-helpers").GlobalAttributesT<Element>;
+    xStyledAttrs: import("@elliemae/ds-legacy-props-helpers").XstyledProps;
+    selected: boolean;
+    innerRef: import("react").RefObject<HTMLButtonElement> | ((_ref: HTMLButtonElement) => void);
+    size: import("../sharedTypes.js").ChipSizesT;
+    shape: import("../sharedTypes.js").ChipShapesT;
+    label: string;
+    icon: () => JSX.Element;
+};

package/dist/types/constants.d.ts

@@ -0,0 +1,36 @@
+export declare const CHIP_SHAPES: {
+    DEFAULT: "default";
+    ROUND: "round";
+};
+export declare const CHIP_SIZES: {
+    S: "s";
+    L: "l";
+};
+export declare const roundShapeLarge = "56px";
+export declare const roundShapeSmall = "40px";
+export declare const basicSizes: {
+    s: {
+        readonly width: "72px";
+        readonly height: "67px";
+    };
+    l: {
+        readonly width: "92px";
+        readonly height: "67px";
+    };
+};
+export declare const shapeSizes: {
+    s: {
+        readonly width: "72px";
+        readonly height: "77px";
+    };
+    l: {
+        readonly width: "92px";
+        readonly height: "85px";
+    };
+};
+export declare const ChipSizesValuesArray: ("s" | "l")[];
+export declare const ChipShapesValuesArray: ("default" | "round")[];
+export declare const ChipInteractionStates: string[];
+export declare const ChipSizesValuesString: string;
+export declare const ChipShapesValuesString: string;
+export declare const ChipInteractionStatesValuesString: string;

package/dist/types/exported_related/data-test-ids.d.ts

@@ -0,0 +1,5 @@
+export declare const DSChipDataTestIds: {
+    BUTTON: string;
+    LABEL: string;
+    ROUND_SHAPE: string;
+};

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

@@ -0,0 +1,2 @@
+export * from './data-test-ids.js';
+export * from './theming.js';

package/dist/types/exported_related/theming.d.ts

@@ -0,0 +1,7 @@
+export declare const DSChipName = "DSChip";
+export declare const DSChipSlots: {
+    BUTTON: string;
+    LABEL: string;
+    ROUND_SHAPE: string;
+    CHILDREN_WRAPPER: string;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DSChip.js';
+export * from './constants.js';
+export * from './exported_related/index.js';

package/dist/types/sharedTypes.d.ts

@@ -0,0 +1,4 @@
+import type { CHIP_SIZES, CHIP_SHAPES, ChipInteractionStates } from './constants.js';
+export type ChipSizesT = (typeof CHIP_SIZES)[keyof typeof CHIP_SIZES];
+export type ChipShapesT = (typeof CHIP_SHAPES)[keyof typeof CHIP_SHAPES];
+export type ChipInteractionStatesT = (typeof ChipInteractionStates)[number];

package/dist/types/styles.d.ts

@@ -0,0 +1,18 @@
+import type { ChipShapesT, ChipSizesT } from './sharedTypes.js';
+export interface StyledChipPropsT {
+    buttonSize: ChipSizesT;
+    buttonShape: ChipShapesT;
+    selected?: boolean;
+}
+export interface StyledRoundShapePropsT {
+    size: ChipSizesT;
+    disabled?: boolean;
+}
+export declare const StyledChipLabel: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, {
+    size: ChipSizesT;
+} & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledSpanWithEllipsis: import("styled-components").StyledComponent<"span", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, StyledChipPropsT & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledRoundShape: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, StyledRoundShapePropsT & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledChildrenWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-legacy-system").Theme, object & import("@elliemae/ds-legacy-system").OwnerInterface, never>;
+export declare const StyledChip: import("styled-components").StyledComponent<"button", import("@elliemae/ds-legacy-system").Theme, Pick<StyledChipPropsT, "selected" | "buttonShape"> & import("@elliemae/ds-legacy-system").OwnerInterface, never>;

package/dist/types/tests/DSChip.axe.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/tests/DSChip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@elliemae/ds-legacy-chip",
+  "version": "1.0.0-rc.1",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Chip",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum-legacy.git"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./useConfig": {
+      "import": "./dist/esm/useConfig.js",
+      "require": "./dist/cjs/useConfig.js"
+    },
+    "./types/AppPickerTypes": {
+      "import": "./dist/esm/types/AppPickerTypes.js",
+      "require": "./dist/cjs/types/AppPickerTypes.js"
+    },
+    "./styles": {
+      "import": "./dist/esm/styles.js",
+      "require": "./dist/cjs/styles.js"
+    },
+    "./constants": {
+      "import": "./dist/esm/constants.js",
+      "require": "./dist/cjs/constants.js"
+    },
+    "./DSChip": {
+      "import": "./dist/esm/DSChip.js",
+      "require": "./dist/cjs/DSChip.js"
+    },
+    "./react-desc-prop-types": {
+      "import": "./dist/esm/react-desc-prop-types.js",
+      "require": "./dist/cjs/react-desc-prop-types.js"
+    },
+    "./sharedTypes": {
+      "import": "./dist/esm/sharedTypes.js",
+      "require": "./dist/cjs/sharedTypes.js"
+    }
+  },
+  "engines": {
+    "pnpm": ">=6",
+    "node": ">=16"
+  },
+  "author": "ICE MT",
+  "jestSonar": {
+    "sonar56x": true,
+    "reportPath": "reports",
+    "reportFile": "tests.xml",
+    "indent": 4
+  },
+  "dependencies": {
+    "@elliemae/ds-legacy-props-helpers": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-system": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-utilities": "1.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@elliemae/pui-cli": "~9.0.0-next.31",
+    "styled-components": "~5.3.9",
+    "@elliemae/ds-legacy-monorepo-devops": "1.0.0-rc.1",
+    "@elliemae/ds-legacy-icons": "1.0.0-rc.1"
+  },
+  "peerDependencies": {
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "~5.3.9"
+  },
+  "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/*\""
+  }
+}