@elliemae/ds-chip 3.0.0-next.67

package/dist/esm/styles.js

@@ -0,0 +1,153 @@
+import * as React from "react";
+import { styled, css } from "@elliemae/ds-system";
+import { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from "./constants";
+import { DSChipName, DSChipSlots } from "./exported_related";
+const getChipSize = (shape) => shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes;
+const styledChipSelectedCss = css`
+  & > div:first-child {
+    background-color: ${({ theme }) => theme.colors.brand[800]};
+  }
+  color: ${({ theme }) => theme.colors.brand[800]};
+  background-color: ${({ theme }) => theme.colors.brand[200]};
+
+  .ds-icon-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 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;
+  margin: 0 6px;
+  line-height: 1.45;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledChip = styled("button", { name: DSChipName, slot: DSChipSlots.BUTTON })`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  border: none;
+  height: ${({ size, buttonShape }) => getChipSize(buttonShape)[size].height};
+  width: ${({ size, buttonShape }) => getChipSize(buttonShape)[size].width};
+  background-color: #fff;
+  color: ${({ theme }) => theme.colors.brand[600]};
+  border-radius: 4px;
+  cursor: pointer;
+  outline: none;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    border: 2px solid transparent;
+  }
+
+  & .ds-icon-root .ds-icon-svg {
+    fill: ${({ theme }) => theme.colors.brand[600]};
+    height: 24px;
+    width: 24px;
+  }
+
+  & .ds-icon-root {
+    height: 24px;
+    width: 24px;
+  }
+
+  &:hover {
+    & > div:first-child {
+      background-color: ${({ theme }) => theme.colors.brand[800]};
+    }
+    color: ${({ theme }) => theme.colors.brand[800]};
+    background-color: ${({ theme }) => theme.colors.brand[200]};
+    .ds-icon-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;
+
+    .ds-icon-svg {
+      fill: ${({ theme }) => theme.colors.neutral[500]};
+    }
+
+    &:focus,
+    &:hover {
+      & > div:first-child {
+        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 .ds-icon-svg {
+      fill: ${({ theme }) => theme.colors.neutral[500]};
+    }
+  }
+
+  ${({ selected }) => !selected ? "" : styledChipSelectedCss}
+`;
+const disabledRoundShape = css`
+  background-color: ${({ theme }) => theme.colors.neutral[200]};
+
+  & .ds-icon-root .ds-icon-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: 3px 0px;
+
+  & .ds-icon-root .ds-icon-svg {
+    fill: #fff;
+    height: 24px;
+    width: 24px;
+  }
+
+  ${({ disabled }) => disabled && disabledRoundShape}
+`;
+export {
+  StyledChip,
+  StyledChipLabel,
+  StyledRoundShape
+};
+//# 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 } from '@elliemae/ds-system';\nimport { basicSizes, shapeSizes, CHIP_SHAPES, CHIP_SIZES, roundShapeLarge, roundShapeSmall } from './constants';\nimport type { ChipShapesT, ChipSizesT } from './sharedTypes';\nimport { DSChipName, DSChipSlots } from './exported_related';\n\nexport interface StyledChipPropsT {\n  size: ChipSizesT;\n  buttonShape: ChipShapesT;\n}\n\nconst getChipSize = (shape: ChipShapesT) => (shape === CHIP_SHAPES.ROUND ? shapeSizes : basicSizes);\n\nconst styledChipSelectedCss = css`\n  & > div:first-child {\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  .ds-icon-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 StyledChipLabel = styled('div', { name: DSChipName, slot: DSChipSlots.LABEL })`\n  font-size: ${({ theme }) => theme.fontSizes.label[200]};\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  word-wrap: break-word;\n  margin: 0 6px;\n  line-height: 1.45;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const StyledChip = styled('button', { name: DSChipName, slot: DSChipSlots.BUTTON })<{\n  selected: boolean | undefined;\n}>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-evenly;\n  border: none;\n  height: ${({ size, buttonShape }) => getChipSize(buttonShape)[size].height};\n  width: ${({ size, buttonShape }) => getChipSize(buttonShape)[size].width};\n  background-color: #fff;\n  color: ${({ theme }) => theme.colors.brand[600]};\n  border-radius: 4px;\n  cursor: pointer;\n  outline: none;\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 4px;\n    border: 2px solid transparent;\n  }\n\n  & .ds-icon-root .ds-icon-svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n    height: 24px;\n    width: 24px;\n  }\n\n  & .ds-icon-root {\n    height: 24px;\n    width: 24px;\n  }\n\n  &:hover {\n    & > div:first-child {\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    .ds-icon-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    .ds-icon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n\n    &:focus,\n    &:hover {\n      & > div:first-child {\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 .ds-icon-svg {\n      fill: ${({ theme }) => theme.colors.neutral[500]};\n    }\n  }\n\n  ${({ selected }) => (!selected ? '' : styledChipSelectedCss)}\n`;\n\nconst disabledRoundShape = css`\n  background-color: ${({ theme }) => theme.colors.neutral[200]};\n\n  & .ds-icon-root .ds-icon-svg {\n    fill: ${({ theme }) => theme.colors.neutral[500]};\n  }\n`;\n\nexport const StyledRoundShape = styled('div', { name: DSChipName, slot: DSChipSlots.ROUND_SHAPE })`\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: 3px 0px;\n\n  & .ds-icon-root .ds-icon-svg {\n    fill: #fff;\n    height: 24px;\n    width: 24px;\n  }\n\n  ${({ disabled }) => disabled && disabledRoundShape}\n`;\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@elliemae/ds-chip",
+  "version": "3.0.0-next.67",
+  "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.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
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
+    "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
+  },
+  "dependencies": {
+    "@elliemae/ds-system": "3.0.0-next.54",
+    "@elliemae/ds-truncated-tooltip-text": "3.0.0-next.54",
+    "@elliemae/ds-utilities": "3.0.0-next.54"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "~5.16.2",
+    "@testing-library/react": "~12.1.2",
+    "styled-components": "~5.3.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  }
+}