@purpurds/action 3.0.0

package/config/rush-project.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/rush/v5/rush-project.schema.json",
+  "disableBuildCacheForProject": false,
+  "operationSettings": [
+    {
+      "operationName": "build",
+      "outputFolderNames": [
+        "dist",
+        "types"
+      ]
+    },
+    {
+      "operationName": "ci:build",
+      "outputFolderNames": [
+        "dist",
+        "types"
+      ]
+    }
+  ],
+  "incrementalBuildIgnoredGlobs": [
+    "CHANGELOG.json",
+    "CHANGELOG.md"
+  ]
+}

package/dist/LICENSE.txt

@@ -0,0 +1 @@
+No third parties dependencies

package/dist/action.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={PRIMARY:"primary",PRIMARY_NEGATIVE:"primary-negative",SECONDARY:"secondary",SECONDARY_NEGATIVE:"secondary-negative",EXPRESSIVE:"expressive",EXPRESSIVE_NEGATIVE:"expressive-negative"},t=Object.values(e),s={SM:"sm",MD:"md",LG:"lg"},E=Object.values(s);exports.SIZE=s;exports.VARIANT=e;exports.sizes=E;exports.variants=t;
+//# sourceMappingURL=action.cjs.js.map

package/dist/action.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action.cjs.js","sources":["../src/action.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\n\nexport const VARIANT = {\n  PRIMARY: \"primary\",\n  PRIMARY_NEGATIVE: \"primary-negative\",\n  SECONDARY: \"secondary\",\n  SECONDARY_NEGATIVE: \"secondary-negative\",\n  EXPRESSIVE: \"expressive\",\n  EXPRESSIVE_NEGATIVE: \"expressive-negative\",\n} as const;\n\nexport const variants = Object.values(VARIANT);\nexport type Variant = (typeof VARIANT)[keyof typeof VARIANT];\n\nexport const SIZE = {\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n} as const;\n\nexport const sizes = Object.values(SIZE);\nexport type Size = (typeof SIZE)[keyof typeof SIZE];\n\ntype DefaultProps<TVariant, T = object> = {\n  children?: ReactNode;\n  className?: string;\n  [\"data-testid\"]?: string;\n  fullWidth?: boolean;\n  size?: Size;\n  variant: TVariant | Variant;\n} & T;\n\nexport type UnionParams<TVariant> =\n  | DefaultProps<TVariant, { iconOnly: boolean; [\"aria-label\"]: string }>\n  | DefaultProps<TVariant, { [\"aria-label\"]?: string }>;\n\ntype UnionKeys<T> = T extends T ? keyof T : never;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype StrictUnionHelper<T, TAll> = T extends any\n  ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>>\n  : never;\n\ntype StrictUnion<T> = StrictUnionHelper<T, T>;\n\nexport type ActionProps<TVariant extends string = Variant> = StrictUnion<UnionParams<TVariant>>;\n"],"names":["VARIANT","variants","SIZE","sizes"],"mappings":"gFAEO,MAAMA,EAAU,CACrB,QAAS,UACT,iBAAkB,mBAClB,UAAW,YACX,mBAAoB,qBACpB,WAAY,aACZ,oBAAqB,qBACvB,EAEaC,EAAW,OAAO,OAAOD,CAAO,EAGhCE,EAAO,CAClB,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAQ,OAAO,OAAOD,CAAI"}

package/dist/action.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+export declare const VARIANT: {
+    readonly PRIMARY: "primary";
+    readonly PRIMARY_NEGATIVE: "primary-negative";
+    readonly SECONDARY: "secondary";
+    readonly SECONDARY_NEGATIVE: "secondary-negative";
+    readonly EXPRESSIVE: "expressive";
+    readonly EXPRESSIVE_NEGATIVE: "expressive-negative";
+};
+export declare const variants: ("primary" | "primary-negative" | "secondary" | "secondary-negative" | "expressive" | "expressive-negative")[];
+export type Variant = (typeof VARIANT)[keyof typeof VARIANT];
+export declare const SIZE: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+export declare const sizes: ("sm" | "md" | "lg")[];
+export type Size = (typeof SIZE)[keyof typeof SIZE];
+type DefaultProps<TVariant, T = object> = {
+    children?: ReactNode;
+    className?: string;
+    ["data-testid"]?: string;
+    fullWidth?: boolean;
+    size?: Size;
+    variant: TVariant | Variant;
+} & T;
+export type UnionParams<TVariant> = DefaultProps<TVariant, {
+    iconOnly: boolean;
+    ["aria-label"]: string;
+}> | DefaultProps<TVariant, {
+    ["aria-label"]?: string;
+}>;
+type UnionKeys<T> = T extends T ? keyof T : never;
+type StrictUnionHelper<T, TAll> = T extends any ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>> : never;
+type StrictUnion<T> = StrictUnionHelper<T, T>;
+export type ActionProps<TVariant extends string = Variant> = StrictUnion<UnionParams<TVariant>>;
+export {};
+//# sourceMappingURL=action.d.ts.map

package/dist/action.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../src/action.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,eAAO,MAAM,OAAO;;;;;;;CAOV,CAAC;AAEX,eAAO,MAAM,QAAQ,gHAAyB,CAAC;AAC/C,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;AAE7D,eAAO,MAAM,IAAI;;;;CAIP,CAAC;AAEX,eAAO,MAAM,KAAK,wBAAsB,CAAC;AACzC,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC;AAEpD,KAAK,YAAY,CAAC,QAAQ,EAAE,CAAC,GAAG,MAAM,IAAI;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,GAAG,CAAC,CAAC;AAEN,MAAM,MAAM,WAAW,CAAC,QAAQ,IAC5B,YAAY,CAAC,QAAQ,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,GACrE,YAAY,CAAC,QAAQ,EAAE;IAAE,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAExD,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC,GAAG,KAAK,CAAC;AAElD,KAAK,iBAAiB,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,GAAG,GAC3C,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,GAC7D,KAAK,CAAC;AAEV,KAAK,WAAW,CAAC,CAAC,IAAI,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAE9C,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,MAAM,GAAG,OAAO,IAAI,WAAW,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC"}

package/dist/action.es.js

@@ -0,0 +1,19 @@
+const e = {
+  PRIMARY: "primary",
+  PRIMARY_NEGATIVE: "primary-negative",
+  SECONDARY: "secondary",
+  SECONDARY_NEGATIVE: "secondary-negative",
+  EXPRESSIVE: "expressive",
+  EXPRESSIVE_NEGATIVE: "expressive-negative"
+}, E = Object.values(e), s = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+}, a = Object.values(s);
+export {
+  s as SIZE,
+  e as VARIANT,
+  a as sizes,
+  E as variants
+};
+//# sourceMappingURL=action.es.js.map

package/dist/action.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action.es.js","sources":["../src/action.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\n\nexport const VARIANT = {\n  PRIMARY: \"primary\",\n  PRIMARY_NEGATIVE: \"primary-negative\",\n  SECONDARY: \"secondary\",\n  SECONDARY_NEGATIVE: \"secondary-negative\",\n  EXPRESSIVE: \"expressive\",\n  EXPRESSIVE_NEGATIVE: \"expressive-negative\",\n} as const;\n\nexport const variants = Object.values(VARIANT);\nexport type Variant = (typeof VARIANT)[keyof typeof VARIANT];\n\nexport const SIZE = {\n  SM: \"sm\",\n  MD: \"md\",\n  LG: \"lg\",\n} as const;\n\nexport const sizes = Object.values(SIZE);\nexport type Size = (typeof SIZE)[keyof typeof SIZE];\n\ntype DefaultProps<TVariant, T = object> = {\n  children?: ReactNode;\n  className?: string;\n  [\"data-testid\"]?: string;\n  fullWidth?: boolean;\n  size?: Size;\n  variant: TVariant | Variant;\n} & T;\n\nexport type UnionParams<TVariant> =\n  | DefaultProps<TVariant, { iconOnly: boolean; [\"aria-label\"]: string }>\n  | DefaultProps<TVariant, { [\"aria-label\"]?: string }>;\n\ntype UnionKeys<T> = T extends T ? keyof T : never;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype StrictUnionHelper<T, TAll> = T extends any\n  ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>>\n  : never;\n\ntype StrictUnion<T> = StrictUnionHelper<T, T>;\n\nexport type ActionProps<TVariant extends string = Variant> = StrictUnion<UnionParams<TVariant>>;\n"],"names":["VARIANT","variants","SIZE","sizes"],"mappings":"AAEO,MAAMA,IAAU;AAAA,EACrB,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,qBAAqB;AACvB,GAEaC,IAAW,OAAO,OAAOD,CAAO,GAGhCE,IAAO;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAQ,OAAO,OAAOD,CAAI;"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@purpurds/action",
+  "version": "3.0.0",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/action.cjs.js",
+  "types": "./dist/action.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/action.cjs.js",
+      "systemjs": "./dist/action.system.js",
+      "types": "./dist/action.d.ts",
+      "default": "./dist/action.es.js"
+    },
+    "./src/action.scss": "./src/action.scss"
+  },
+  "source": "src/action.tsx",
+  "dependencies": {
+    "@purpurds/tokens": "3.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.7.0",
+    "@storybook/blocks": "~7.6.0",
+    "@storybook/react": "~7.6.0",
+    "@telia/base-rig": "~8.2.0",
+    "@telia/react-rig": "~3.2.0",
+    "@testing-library/dom": "~9.3.3",
+    "@testing-library/jest-dom": "~6.3.0",
+    "@testing-library/react": "~14.1.2",
+    "@types/node": "18",
+    "@types/react-dom": "~18.2.17",
+    "@types/react": "~18.2.42",
+    "eslint-plugin-testing-library": "~6.2.0",
+    "eslint": "~8.56.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "~10.5.3",
+    "prettier": "~2.8.8",
+    "react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "typescript": "~5.2.2",
+    "vite": "~5.0.6",
+    "vitest": "~1.2.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/src/action.scss

@@ -0,0 +1,156 @@
+@mixin action {
+  $root: &;
+
+  align-items: center;
+  border-radius: var(--purpur-border-radius-full);
+  border-width: 0;
+  cursor: pointer;
+  display: inline-flex;
+  font-size: var(--purpur-typography-scale-100);
+  font-family: var(--purpur-typography-family-default), Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  font-weight: var(--purpur-typography-weight-medium);
+  gap: var(--purpur-spacing-100);
+  justify-content: center;
+  line-height: var(--purpur-spacing-300);
+  outline: 0;
+  position: relative;
+  text-decoration: none;
+  transition: all var(--purpur-motion-duration-100) ease;
+  width: auto;
+
+  &:focus {
+    &::before {
+      border-radius: var(--purpur-border-radius-full);
+      box-shadow: 0 0 0 var(--purpur-border-width-sm) var(--purpur-color-border-interactive-focus);
+      content: "";
+      display: block;
+      inset: calc(var(--purpur-spacing-25) * -1);
+      position: absolute;
+    }
+
+    &:not(:focus-visible) {
+      &::before {
+        box-shadow: none;
+      }
+    }
+  }
+
+  svg {
+    display: block;
+  }
+
+  &--sm {
+    padding: var(--purpur-spacing-100) var(--purpur-spacing-250);
+
+    &#{$root}--icon-only {
+      padding: var(--purpur-spacing-100);
+    }
+  }
+
+  &--md {
+    padding: var(--purpur-spacing-150) var(--purpur-spacing-300);
+
+    &#{$root}--icon-only {
+      padding: var(--purpur-spacing-150);
+    }
+  }
+
+  &--lg {
+    padding: var(--purpur-spacing-200) var(--purpur-spacing-400);
+
+    &#{$root}--icon-only {
+      padding: var(--purpur-spacing-200);
+    }
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  &--primary {
+    background-color: var(--purpur-color-background-interactive-primary);
+    color: var(--purpur-color-text-interactive-on-primary);
+
+    &:hover:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-primary-hover);
+    }
+
+    &:active:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-primary-active);
+    }
+  }
+
+  &--primary-negative {
+    background-color: var(--purpur-color-background-interactive-primary-negative);
+    color: var(--purpur-color-text-interactive-on-primary-negative);
+
+    &:hover:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-primary-negative-hover);
+      border-color: var(--purpur-color-background-interactive-primary-negative-hover);
+    }
+
+    &:active:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-primary-negative-active);
+      border-color: var(--purpur-color-background-interactive-primary-negative-active);
+    }
+  }
+
+  &--secondary {
+    background-color: var(--purpur-color-background-interactive-transparent);
+    box-shadow: inset 0 0 0 var(--purpur-border-width-xs)
+      var(--purpur-color-border-interactive-primary);
+    color: var(--purpur-color-text-interactive-primary);
+
+    &:hover:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-transparent-hover);
+    }
+
+    &:active:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-transparent-active);
+    }
+  }
+
+  &--secondary-negative {
+    background-color: var(--purpur-color-background-interactive-transparent);
+    box-shadow: inset 0 0 0 var(--purpur-border-width-xs)
+      var(--purpur-color-border-interactive-primary-negative);
+    color: var(--purpur-color-text-interactive-primary-negative);
+
+    &:hover:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-transparent-negative-hover);
+    }
+
+    &:active:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-transparent-negative-active);
+    }
+  }
+
+  &--expressive {
+    background-color: var(--purpur-color-background-interactive-expressive);
+    color: var(--purpur-color-text-interactive-on-expressive);
+
+    &:hover:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-expressive-hover);
+    }
+
+    &:active:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-expressive-active);
+    }
+  }
+
+  &--expressive-negative {
+    background-color: var(--purpur-color-background-interactive-expressive-negative);
+    color: var(--purpur-color-text-interactive-on-expressive-negative);
+
+    &:hover:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-expressive-negative-hover);
+      color: var(--purpur-color-text-interactive-on-expressive-negative-hover);
+    }
+
+    &:active:not(#{$root}--disabled) {
+      background-color: var(--purpur-color-background-interactive-expressive-negative-active);
+      color: var(--purpur-color-text-interactive-on-expressive-negative-active);
+    }
+  }
+}

package/src/action.tsx

@@ -0,0 +1,45 @@
+import { ReactNode } from "react";
+
+export const VARIANT = {
+  PRIMARY: "primary",
+  PRIMARY_NEGATIVE: "primary-negative",
+  SECONDARY: "secondary",
+  SECONDARY_NEGATIVE: "secondary-negative",
+  EXPRESSIVE: "expressive",
+  EXPRESSIVE_NEGATIVE: "expressive-negative",
+} as const;
+
+export const variants = Object.values(VARIANT);
+export type Variant = (typeof VARIANT)[keyof typeof VARIANT];
+
+export const SIZE = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg",
+} as const;
+
+export const sizes = Object.values(SIZE);
+export type Size = (typeof SIZE)[keyof typeof SIZE];
+
+type DefaultProps<TVariant, T = object> = {
+  children?: ReactNode;
+  className?: string;
+  ["data-testid"]?: string;
+  fullWidth?: boolean;
+  size?: Size;
+  variant: TVariant | Variant;
+} & T;
+
+export type UnionParams<TVariant> =
+  | DefaultProps<TVariant, { iconOnly: boolean; ["aria-label"]: string }>
+  | DefaultProps<TVariant, { ["aria-label"]?: string }>;
+
+type UnionKeys<T> = T extends T ? keyof T : never;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type StrictUnionHelper<T, TAll> = T extends any
+  ? T & Partial<Record<Exclude<UnionKeys<TAll>, keyof T>, never>>
+  : never;
+
+type StrictUnion<T> = StrictUnionHelper<T, T>;
+
+export type ActionProps<TVariant extends string = Variant> = StrictUnion<UnionParams<TVariant>>;

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@purpurds/component-rig",
+  "compilerOptions": {
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

package/tsconfig.types.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@purpurds/component-rig/tsconfig.types.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["**/*.test.*", "**/*.stories.*"]
+}

package/vite.config.mts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+import { getConfig } from "@purpurds/component-rig/vite.config";
+import pkg from "./package.json";
+
+export default defineConfig(getConfig(pkg));