@dt-dds/react-icon-button 1.0.0-beta.9

package/CHANGELOG.md

@@ -0,0 +1,75 @@
+# @dt-ui/react-icon-button
+
+## 1.0.0-beta.9
+
+### Major Changes
+
+- refactor!: rename pkg and publish to npmjs
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-dds/react-core@1.0.0-beta.41
+
+## 0.1.0-beta.8
+
+### Patch Changes
+
+- refactor: theme typography values
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.40
+
+## 0.1.0-beta.7
+
+### Minor Changes
+
+- feat: update shadow theme values
+
+### Patch Changes
+
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.39
+
+## 0.1.0-beta.6
+
+### Patch Changes
+
+- chore: update theme font-styles
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.38
+
+## 0.1.0-beta.5
+
+### Patch Changes
+
+- chore: review OSS files
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.37
+
+## 0.1.0-beta.4
+
+### Patch Changes
+
+- chore: update contextual colors
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.36
+
+## 0.1.0-beta.3
+
+### Minor Changes
+
+- feat: implement IconButton contrast and size
+
+## 0.1.0-beta.2
+
+### Patch Changes
+
+- fix: change content.light contextual color
+- Updated dependencies
+  - @dt-ui/react-core@0.1.0-beta.35
+
+## 0.1.0-beta.1
+
+### Minor Changes
+
+- feat: move icon-button to independent

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Daimler Truck AG.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,36 @@
+# IconButton
+
+This component allows the user to take action by clicking on an Icon.
+
+## Usage
+
+```jsx
+import { IconButton, EditIcon } from '@dt-dds/react';
+
+export const App = () => {
+  const handleClick = () => null;
+
+  return (
+    <IconButton onClick={handleClick}>
+      <EditIcon />
+    </IconButton>
+  );
+};
+```
+
+## API
+
+### IconButton
+
+| Property     | Type                | Default   | Description                                       |
+| ------------ | ------------------- | --------- | ------------------------------------------------- |
+| `children`   | `ReactNode`         | -         | Icon component to be rendered                     |
+| `onClick`    | `function`          | -         | The triggered function when clicked on the button |
+| `dataTestId` | `string`            | button    | Customizable test identifier                      |
+| `isDisabled` | `boolean`           | false     | Determines the disabled state of the button       |
+| `variant`    | `IconButtonVariant` | `default` | Determines the variant of the icon                |
+| `size`       | `ComponentSize`     | `large`   | Determines the size of the icon                   |
+
+## &copy; License
+
+Licensed under [MIT License](LICENSE.md)

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+import { BaseProps, ComponentSize, Theme } from '@dt-dds/react-core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithoutRef } from 'react';
+
+type IconButtonVariant = 'contrast' | 'default';
+
+interface IconButtonProps extends ComponentPropsWithoutRef<'button'>, BaseProps {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    isDisabled?: boolean;
+    ariaLabel?: string;
+    variant?: IconButtonVariant;
+    size?: ComponentSize;
+}
+declare const IconButton: ({ children, dataTestId, isDisabled, ariaLabel, variant, size, onClick, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
+
+declare module '@emotion/react' {
+    interface Theme extends Theme {
+    }
+}
+
+export { IconButton, IconButtonProps };

package/dist/index.js

@@ -0,0 +1,165 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var icon_button_exports = {};
+__export(icon_button_exports, {
+  IconButton: () => IconButton
+});
+module.exports = __toCommonJS(icon_button_exports);
+
+// src/IconButton.styled.ts
+var import_styled = __toESM(require("@emotion/styled"));
+var iconButtonSizeStyles = {
+  "extra-small": `
+    font-size: 12px;
+  `,
+  small: `
+    font-size: 16px;
+  `,
+  medium: `
+    font-size: 20px;
+  `,
+  large: `
+    font-size: 24px;
+  `,
+  "extra-large": `
+    font-size: 32px;
+  `
+};
+var IconButtonStyled = import_styled.default.button(
+  ({ theme, disabled, variant = "default", size = "large" }) => {
+    const isDefaultVariant = variant === "default";
+    const baseColor = () => {
+      if (disabled) {
+        return isDefaultVariant ? theme.palette.content.light : theme.palette.content.default;
+      }
+      return isDefaultVariant ? theme.palette.content.default : theme.palette.content.contrast;
+    };
+    const hoverColor = isDefaultVariant ? theme.palette.accent.default : theme.palette.accent.medium;
+    return `
+      display: flex;
+      align-items: center;
+      border: none;
+      background-color: transparent;
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+
+      i {
+        ${iconButtonSizeStyles[size]};
+        color: ${baseColor()};
+      }
+
+      &:not(:disabled) > i {
+        &:hover, &:active {
+          color: ${hoverColor};
+        }
+      }
+
+      &:focus-visible {
+        outline: 2px solid ${theme.palette.primary.default};
+      }
+    `;
+  }
+);
+
+// src/IconButton.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var IconButton = (_a) => {
+  var _b = _a, {
+    children,
+    dataTestId,
+    isDisabled,
+    ariaLabel,
+    variant,
+    size,
+    onClick
+  } = _b, props = __objRest(_b, [
+    "children",
+    "dataTestId",
+    "isDisabled",
+    "ariaLabel",
+    "variant",
+    "size",
+    "onClick"
+  ]);
+  const handleClick = (e) => {
+    if (isDisabled) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    onClick && onClick(e);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    IconButtonStyled,
+    __spreadProps(__spreadValues({
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId ? dataTestId : "icon-button",
+      disabled: isDisabled,
+      onClick: handleClick,
+      size,
+      variant
+    }, props), {
+      children
+    })
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IconButton
+});

package/dist/index.mjs

@@ -0,0 +1,131 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/IconButton.styled.ts
+import styled from "@emotion/styled";
+var iconButtonSizeStyles = {
+  "extra-small": `
+    font-size: 12px;
+  `,
+  small: `
+    font-size: 16px;
+  `,
+  medium: `
+    font-size: 20px;
+  `,
+  large: `
+    font-size: 24px;
+  `,
+  "extra-large": `
+    font-size: 32px;
+  `
+};
+var IconButtonStyled = styled.button(
+  ({ theme, disabled, variant = "default", size = "large" }) => {
+    const isDefaultVariant = variant === "default";
+    const baseColor = () => {
+      if (disabled) {
+        return isDefaultVariant ? theme.palette.content.light : theme.palette.content.default;
+      }
+      return isDefaultVariant ? theme.palette.content.default : theme.palette.content.contrast;
+    };
+    const hoverColor = isDefaultVariant ? theme.palette.accent.default : theme.palette.accent.medium;
+    return `
+      display: flex;
+      align-items: center;
+      border: none;
+      background-color: transparent;
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+
+      i {
+        ${iconButtonSizeStyles[size]};
+        color: ${baseColor()};
+      }
+
+      &:not(:disabled) > i {
+        &:hover, &:active {
+          color: ${hoverColor};
+        }
+      }
+
+      &:focus-visible {
+        outline: 2px solid ${theme.palette.primary.default};
+      }
+    `;
+  }
+);
+
+// src/IconButton.tsx
+import { jsx } from "react/jsx-runtime";
+var IconButton = (_a) => {
+  var _b = _a, {
+    children,
+    dataTestId,
+    isDisabled,
+    ariaLabel,
+    variant,
+    size,
+    onClick
+  } = _b, props = __objRest(_b, [
+    "children",
+    "dataTestId",
+    "isDisabled",
+    "ariaLabel",
+    "variant",
+    "size",
+    "onClick"
+  ]);
+  const handleClick = (e) => {
+    if (isDisabled) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    onClick && onClick(e);
+  };
+  return /* @__PURE__ */ jsx(
+    IconButtonStyled,
+    __spreadProps(__spreadValues({
+      "aria-label": ariaLabel,
+      "data-testid": dataTestId ? dataTestId : "icon-button",
+      disabled: isDisabled,
+      onClick: handleClick,
+      size,
+      variant
+    }, props), {
+      children
+    })
+  );
+};
+export {
+  IconButton
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@dt-dds/react-icon-button",
+  "version": "1.0.0-beta.9",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint --cache .",
+    "test": "jest",
+    "test:report": "open ./jest-coverage/lcov-report/index.html",
+    "test:update:snapshot": "jest -u"
+  },
+  "dependencies": {
+    "@dt-dds/react-core": "1.0.0-beta.41"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.23.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.7.1",
+    "@emotion/jest": "^11.10.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "babel-loader": "^8.3.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-storybook": "^9.1.0",
+    "jest-config": "*",
+    "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "*",
+    "tsup": "^6.6.3",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}