@elliemae/ds-button-v2 3.12.0-rc.5

package/dist/esm/styles.js

@@ -0,0 +1,187 @@
+import * as React from "react";
+import { css, styled, th, xStyledCommonProps } from "@elliemae/ds-system";
+import { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, sizes } from "./constants";
+import { DSButtonV2Slots, DSButtonV2Name } from "./DSButtonV2Definitions";
+const pseudoBorder = css`
+  position: absolute;
+  content: '';
+  border-style: solid;
+  border-width: ${({ size, buttonType }) => size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? "1px" : "2px"};
+  ${({ buttonType, shape, theme }) => {
+  if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {
+    return `
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          border-color: ${theme.colors.neutral["000"]};
+          border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? "50%" : "0px"};
+      `;
+  }
+  return `
+    top: -1px;
+    left: -1px;
+    width: calc(100% + 2px);
+    height: calc(100% + 2px);
+    border-radius:  ${shape !== BUTTON_SHAPES.DEFAULT ? "50%" : "2px"};
+`;
+}}
+`;
+const fontSizeSettings = css`
+  ${({ theme, size, buttonType }) => {
+  switch (size) {
+    case BUTTON_SIZES.S:
+      if (buttonType === BUTTON_TYPES.TEXT)
+        return `font-size: ${theme.fontSizes.label[200]};`;
+      return `font-size: ${theme.fontSizes.label[300]};`;
+    case BUTTON_SIZES.L:
+      return `
+        font-size: ${theme.fontSizes.value[600]};
+    `;
+    default:
+      return `
+        font-size: ${theme.fontSizes.value[500]};
+    `;
+  }
+}}
+`;
+const RawButton = styled("button", {
+  name: DSButtonV2Name,
+  slot: DSButtonV2Slots.ROOT
+})`
+  outline: none;
+  border: none;
+  background: transparent;
+  &:hover {
+    background: transparent;
+  }
+`;
+const DefaultButton = styled(RawButton)`
+  display: inline-grid;
+  grid-gap: 8px;
+  position: relative;
+  grid-auto-flow: column;
+  place-items: center;
+  align-items: center;
+  justify-items: center;
+  width: fit-content;
+  cursor: pointer;
+  font-weight: 600;
+  padding: ${({ theme, buttonType }) => buttonType !== BUTTON_TYPES.ICON && buttonType !== BUTTON_TYPES.ICON_OUTLINE && buttonType !== BUTTON_TYPES.ICON_FILLED ? `0 ${theme.space.xs}` : "0"};
+  border-style: solid;
+  height: ${({ size }) => sizes[size]};
+  min-width: ${({ size }) => sizes[size]};
+  border-radius: ${({ shape }) => shape === BUTTON_SHAPES.DEFAULT ? "2px" : "50%"};
+  ${fontSizeSettings}
+  ${({ buttonType }) => buttonType === BUTTON_TYPES.TEXT ? "text-transform: uppercase;" : ""}
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+  ${xStyledCommonProps}
+`;
+const FilledButton = styled(DefaultButton)`
+  background-color: ${th.color("brand-600")};
+  border-color: ${th.color("brand-600")};
+  color: ${th.color("neutral-000")};
+  border-width: ${({ size }) => size === "s" ? "1px;" : "2px"};
+  &:focus,
+  &[data-testemulatestate='focus'] {
+    &:after {
+      ${pseudoBorder}
+    }
+    border-color: brand-700;
+  }
+  & .em-ds-icon svg {
+    fill: neutral-000;
+  }
+  &:hover,
+  &:active,
+  &[data-testemulatestate='hover'],
+  &[data-testemulatestate='active'] {
+    background-color: brand-700;
+    border-color: brand-700;
+  }
+  &[aria-disabled='true'] {
+    background-color: neutral-100;
+    border-color: neutral-100;
+    color: #5c6574;
+    & .em-ds-icon svg {
+      fill: #5c6574;
+    }
+  }
+`;
+const OutlineButton = styled(DefaultButton)`
+  background: ${th.color("neutral-000")};
+  border-color: ${th.color("neutral-400")};
+  color: ${th.color("brand-600")};
+  border-width: 1px;
+  &:focus,
+  &[data-testemulatestate='focus'] {
+    &:after {
+      ${pseudoBorder}
+      border-color: brand-600;
+    }
+  }
+  & .em-ds-icon svg {
+    fill: brand-600;
+  }
+  &:hover,
+  &:active,
+  &[data-testemulatestate='hover'],
+  &[data-testemulatestate='active'] {
+    border-color: brand-700;
+    color: brand-700;
+    & .em-ds-icon svg {
+      fill: brand-700;
+    }
+  }
+  &:disabled {
+    border-color: neutral-400;
+    color: neutral-500;
+    & .em-ds-icon svg {
+      fill: neutral-500;
+    }
+  }
+`;
+const TextButton = styled(DefaultButton)`
+  border-color: transparent;
+  background-color: transparent;
+  border-width: 1px;
+  &:focus,
+  &[data-testemulatestate='focus'] {
+    &:after {
+      ${pseudoBorder}
+      border-color: brand-700;
+    }
+  }
+  color: brand-700;
+  & .em-ds-icon svg {
+    fill: brand-700;
+  }
+  &:hover:not([aria-disabled='true']),
+  &[data-testemulatestate='hover'] {
+    background-color: brand-200;
+    color: brand-700;
+    & .em-ds-icon svg {
+      fill: brand-700;
+    }
+  }
+  &:active,
+  &[data-testemulatestate='active'] {
+    color: brand-700;
+  }
+  &[aria-disabled='true'] {
+    color: neutral-500;
+    & .em-ds-icon svg {
+      fill: neutral-500;
+    }
+  }
+`;
+export {
+  DefaultButton,
+  FilledButton,
+  OutlineButton,
+  RawButton,
+  TextButton
+};
+//# 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 React, { type ComponentType } from 'react';\nimport { css, styled, th, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_TYPES, BUTTON_SIZES, BUTTON_SHAPES, sizes } from './constants';\nimport type { ButtonShapesT, ButtonSizesT, ButtonTypesT } from './sharedTypes';\nimport type { DSButtonT } from './react-desc-prop-types';\nimport { DSButtonV2Slots, DSButtonV2Name } from './DSButtonV2Definitions';\n\nexport interface StyledButtonPropsT {\n  size: ButtonSizesT;\n  buttonType: ButtonTypesT;\n  shape: ButtonShapesT;\n}\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n  position: absolute;\n  content: '';\n  border-style: solid;\n  border-width: ${({ size, buttonType }) =>\n    size === BUTTON_SIZES.S && buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n  ${({ buttonType, shape, theme }) => {\n    if (buttonType === BUTTON_TYPES.FILLED || buttonType === BUTTON_TYPES.ICON_FILLED) {\n      return `\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          border-color: ${theme.colors.neutral['000']};\n          border-radius: ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n      `;\n    }\n    return `\n    top: -1px;\n    left: -1px;\n    width: calc(100% + 2px);\n    height: calc(100% + 2px);\n    border-radius:  ${shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n  }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n  ${({ theme, size, buttonType }) => {\n    switch (size) {\n      case BUTTON_SIZES.S:\n        if (buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n        return `font-size: ${theme.fontSizes.label[300]};`;\n      case BUTTON_SIZES.L:\n        return `\n        font-size: ${theme.fontSizes.value[600]};\n    `;\n      default:\n        return `\n        font-size: ${theme.fontSizes.value[500]};\n    `;\n    }\n  }}\n`;\nexport const RawButton = styled('button', {\n  name: DSButtonV2Name,\n  slot: DSButtonV2Slots.ROOT,\n})<DSButtonT.Props>`\n  outline: none;\n  border: none;\n  background: transparent;\n  &:hover {\n    background: transparent;\n  }\n`;\n\nexport const DefaultButton = styled(RawButton)<StyledButtonPropsT>`\n  display: inline-grid;\n  grid-gap: 8px;\n  position: relative;\n  grid-auto-flow: column;\n  place-items: center;\n  align-items: center;\n  justify-items: center;\n  width: fit-content;\n  cursor: pointer;\n  font-weight: 600;\n  padding: ${({ theme, buttonType }) =>\n    buttonType !== BUTTON_TYPES.ICON &&\n    buttonType !== BUTTON_TYPES.ICON_OUTLINE &&\n    buttonType !== BUTTON_TYPES.ICON_FILLED\n      ? `0 ${theme.space.xs}`\n      : '0'};\n  border-style: solid;\n  height: ${({ size }) => sizes[size]};\n  min-width: ${({ size }) => sizes[size]};\n  border-radius: ${({ shape }) => (shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%')};\n  ${fontSizeSettings}\n  ${({ buttonType }) => (buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  ${xStyledCommonProps}\n`;\n\nexport const FilledButton = styled(DefaultButton)<StyledButtonPropsT>`\n  background-color: ${th.color('brand-600')};\n  border-color: ${th.color('brand-600')};\n  color: ${th.color('neutral-000')};\n  border-width: ${({ size }) => (size === 's' ? '1px;' : '2px')};\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n    }\n    border-color: brand-700;\n  }\n  & .em-ds-icon svg {\n    fill: neutral-000;\n  }\n  &:hover,\n  &:active,\n  &[data-testemulatestate='hover'],\n  &[data-testemulatestate='active'] {\n    background-color: brand-700;\n    border-color: brand-700;\n  }\n  &[aria-disabled='true'] {\n    background-color: neutral-100;\n    border-color: neutral-100;\n    color: #5c6574;\n    & .em-ds-icon svg {\n      fill: #5c6574;\n    }\n  }\n`;\n\nexport const OutlineButton = styled(DefaultButton)`\n  background: ${th.color('neutral-000')};\n  border-color: ${th.color('neutral-400')};\n  color: ${th.color('brand-600')};\n  border-width: 1px;\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n      border-color: brand-600;\n    }\n  }\n  & .em-ds-icon svg {\n    fill: brand-600;\n  }\n  &:hover,\n  &:active,\n  &[data-testemulatestate='hover'],\n  &[data-testemulatestate='active'] {\n    border-color: brand-700;\n    color: brand-700;\n    & .em-ds-icon svg {\n      fill: brand-700;\n    }\n  }\n  &:disabled {\n    border-color: neutral-400;\n    color: neutral-500;\n    & .em-ds-icon svg {\n      fill: neutral-500;\n    }\n  }\n`;\n\nexport const TextButton = styled(DefaultButton)`\n  border-color: transparent;\n  background-color: transparent;\n  border-width: 1px;\n  &:focus,\n  &[data-testemulatestate='focus'] {\n    &:after {\n      ${pseudoBorder}\n      border-color: brand-700;\n    }\n  }\n  color: brand-700;\n  & .em-ds-icon svg {\n    fill: brand-700;\n  }\n  &:hover:not([aria-disabled='true']),\n  &[data-testemulatestate='hover'] {\n    background-color: brand-200;\n    color: brand-700;\n    & .em-ds-icon svg {\n      fill: brand-700;\n    }\n  }\n  &:active,\n  &[data-testemulatestate='active'] {\n    color: brand-700;\n  }\n  &[aria-disabled='true'] {\n    color: neutral-500;\n    & .em-ds-icon svg {\n      fill: neutral-500;\n    }\n  }\n`;\n"],
+  "mappings": "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",
+  "names": []
+}

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@elliemae/ds-button-v2",
+  "version": "3.12.0-rc.5",
+  "license": "MIT",
+  "description": "ICE MT - Dimsum - Button",
+  "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"
+    },
+    "./styles": {
+      "import": "./dist/esm/styles.js",
+      "require": "./dist/cjs/styles.js"
+    },
+    "./sharedTypes": {
+      "import": "./dist/esm/sharedTypes.js",
+      "require": "./dist/cjs/sharedTypes.js"
+    },
+    "./propTypes": {
+      "import": "./dist/esm/propTypes.js",
+      "require": "./dist/cjs/propTypes.js"
+    },
+    "./DSButtonV2": {
+      "import": "./dist/esm/DSButtonV2.js",
+      "require": "./dist/cjs/DSButtonV2.js"
+    },
+    "./defaultProps": {
+      "import": "./dist/esm/defaultProps.js",
+      "require": "./dist/cjs/defaultProps.js"
+    },
+    "./constants": {
+      "import": "./dist/esm/constants.js",
+      "require": "./dist/cjs/constants.js"
+    },
+    "./config/useConfig": {
+      "import": "./dist/esm/config/useConfig.js",
+      "require": "./dist/cjs/config/useConfig.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-system": "3.12.0-rc.5",
+    "@elliemae/ds-utilities": "3.12.0-rc.5"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "~5.16.4",
+    "@testing-library/react": "~12.1.3",
+    "styled-components": "~5.3.6"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "~5.3.6"
+  },
+  "publishConfig": {
+    "access": "public",
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
+    "test": "node ../../scripts/testing/test.mjs",
+    "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 && pnpm --filter {.}... dts",
+    "dev:install": "pnpm --filter {.}... i --no-lockfile && pnpm run dev:build",
+    "checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
+  }
+}