@hyphen/hyphen-components 7.7.0 → 7.8.0

package/dist/index.d.ts

@@ -2004,14 +2004,14 @@ interface HeadingProps {
     className?: string;
     /**
      * A variant token identifier to use for the text variant. Available variants found:
-     * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/color/font.json).
+     * [here](https://github.com/Hyphen/hyphen-components/blob/main/packages/design-tokens/tokens/color/font.json).
      */
     color?: FontColor;
     /**
      * By default, size is determined by the chosen tag (e.g. h1 is bigger than h2).
      * However, size can be set independently so that its size is appropriate for the surrounding content.
      * Available sizes found:
-     * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/size/font.json).
+     * [here](https://github.com/Hyphen/hyphen-components/blob/main/packages/design-tokens/tokens/size/font.json).
      */
     size?: HeadingSize | ResponsiveProp<HeadingSize>;
     /**

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "7.7.0",
-  "packageManager": "pnpm@10.20.0",
+  "version": "7.8.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -16,34 +15,8 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Hyphen/hyphen-components.git"
-  },
-  "scripts": {
-    "build": "cross-env IS_PUBLISHING=true tsup && cross-env IS_PUBLISHING=true webpack --config webpack.config.js && node scripts/create-cjs-shim.js",
-    "build-storybook": "storybook build",
-    "build-storybook-docs": "storybook build --docs",
-    "storybook-docs": "storybook dev --docs",
-    "lint": "eslint src --ext .ts,.tsx",
-    "lint-fix": "eslint src --ext .ts,.tsx --fix",
-    "size": "size-limit",
-    "start": "tsup --watch",
-    "storybook": "storybook dev -p 6006",
-    "test": "jest --passWithNoTests",
-    "test-watch": "jest --coverage --watch",
-    "semantic-release": "semantic-release",
-    "prepare": "pnpm run build",
-    "chromatic": "chromatic --project-token=chpt_8fddffb5556f0b7 --only-changed"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "eslint src --ext .ts,.tsx"
-    }
-  },
-  "prettier": {
-    "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
+    "url": "git+https://github.com/Hyphen/hyphen-components.git",
+    "directory": "packages/components"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -64,7 +37,6 @@
   "dependencies": {
     "@daypicker/react": "^10.0.1",
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^7.7.0",
     "@radix-ui/react-aspect-ratio": "^1.1.9",
     "@radix-ui/react-collapsible": "^1.1.13",
     "@radix-ui/react-dropdown-menu": "^2.1.17",
@@ -83,12 +55,12 @@
     "react-router-dom": "^6.30.4",
     "react-select": "^5.10.0",
     "react-select-event": "^5.5.1",
-    "uuid": "^11.1.1"
+    "uuid": "^11.1.1",
+    "@hyphen/hyphen-design-tokens": "^7.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
     "@chromatic-com/storybook": "^5.2.1",
-    "@semantic-release/commit-analyzer": "^11.1.0",
     "@size-limit/preset-small-lib": "^11.2.0",
     "@storybook/addon-a11y": "10.4.2",
     "@storybook/addon-docs": "10.4.2",
@@ -124,7 +96,6 @@
     "eslint-plugin-react": "^7.34.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "10.4.2",
-    "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.2.0",
@@ -139,7 +110,6 @@
     "react-is": "^18.3.1",
     "sass": "^1.77.8",
     "sass-loader": "^13.3.3",
-    "semantic-release": "^25.0.2",
     "size-limit": "^11.2.0",
     "storybook": "10.4.2",
     "ts-jest": "^29.4.6",
@@ -152,5 +122,19 @@
     "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
     "webpack-fix-style-only-entries": "^0.6.1"
+  },
+  "scripts": {
+    "build": "cross-env IS_PUBLISHING=true tsup && cross-env IS_PUBLISHING=true webpack --config webpack.config.js && node scripts/create-cjs-shim.js",
+    "build-storybook": "storybook build",
+    "build-storybook-docs": "storybook build --docs",
+    "storybook-docs": "storybook dev --docs",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint-fix": "eslint src --ext .ts,.tsx --fix",
+    "size": "size-limit",
+    "start": "tsup --watch",
+    "storybook": "storybook dev -p 6006",
+    "test": "jest --passWithNoTests",
+    "test-watch": "jest --coverage --watch",
+    "chromatic": "chromatic --only-changed"
   }
-}
+}

package/src/components/Heading/Heading.tsx

@@ -26,14 +26,14 @@ export interface HeadingProps {
   className?: string;
   /**
    * A variant token identifier to use for the text variant. Available variants found:
-   * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/color/font.json).
+   * [here](https://github.com/Hyphen/hyphen-components/blob/main/packages/design-tokens/tokens/color/font.json).
    */
   color?: FontColor;
   /**
    * By default, size is determined by the chosen tag (e.g. h1 is bigger than h2).
    * However, size can be set independently so that its size is appropriate for the surrounding content.
    * Available sizes found:
-   * [here](https://github.com/hyphen/hyphen-design-tokens/blob/main/properties/size/font.json).
+   * [here](https://github.com/Hyphen/hyphen-components/blob/main/packages/design-tokens/tokens/size/font.json).
    */
   size?: HeadingSize | ResponsiveProp<HeadingSize>;
   /**

package/src/docs/Brands.mdx

@@ -1,17 +1,19 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 
-import HyphenLogoHorizontalRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalRgbPositive';
-import HyphenLogoHorizontalRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalRgbNegative';
-import HyphenLogoHorizontalBlack from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalBlack';
-import HyphenLogoHorizontalWhite from '@hyphen/hyphen-design-tokens/build/assets/images/react/HyphenLogoHorizontalWhite';
-import EnvLogoRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/EnvLogoRgbPositive';
-import EnvLogoRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/EnvLogoRgbNegative';
-import LinkLogoRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/LinkLogoRgbPositive';
-import LinkLogoRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/LinkLogoRgbNegative';
-import ToggleLogoHorizontalRgbPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbPositive';
-import ToggleLogoHorizontalRgbNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/ToggleLogoHorizontalRgbNegative';
-import DeployLogoHorizontalPositive from '@hyphen/hyphen-design-tokens/build/assets/images/react/DeployLogoHorizontalPositive';
-import DeployLogoHorizontalNegative from '@hyphen/hyphen-design-tokens/build/assets/images/react/DeployLogoHorizontalNegative';
+import logos from '@hyphen/hyphen-design-tokens/build/assets/images/react';
+
+export const HyphenLogoHorizontalRgbPositive = logos['hyphen-logo-horizontal-rgb-positive'];
+export const HyphenLogoHorizontalRgbNegative = logos['hyphen-logo-horizontal-rgb-negative'];
+export const HyphenLogoHorizontalBlack = logos['hyphen-logo-horizontal-black'];
+export const HyphenLogoHorizontalWhite = logos['hyphen-logo-horizontal-white'];
+export const EnvLogoRgbPositive = logos['env-logo-rgb-positive'];
+export const EnvLogoRgbNegative = logos['env-logo-rgb-negative'];
+export const LinkLogoRgbPositive = logos['link-logo-rgb-positive'];
+export const LinkLogoRgbNegative = logos['link-logo-rgb-negative'];
+export const ToggleLogoHorizontalRgbPositive = logos['toggle-logo-horizontal-rgb-positive'];
+export const ToggleLogoHorizontalRgbNegative = logos['toggle-logo-horizontal-rgb-negative'];
+export const DeployLogoHorizontalPositive = logos['deploy-logo-horizontal-positive'];
+export const DeployLogoHorizontalNegative = logos['deploy-logo-horizontal-negative'];
 
 
 import { Box } from '../components/Box/Box';

package/src/docs/DesignTokens.mdx

@@ -13,7 +13,7 @@ We use [Style Dictionary](https://amzn.github.io/style-dictionary/) to generate
 
 ## Source on Github
 
-[Hyphen Design Tokens](https://github.com/hyphen/hyphen-design-tokens) are available as an [npm package](https://www.npmjs.com/package/@hyphen/hyphen-design-tokens) so that you can create a Hyphen unified product experience for your platform of choice.
+[Hyphen Design Tokens](https://github.com/Hyphen/hyphen-components/tree/main/packages/design-tokens) are available as an [npm package](https://www.npmjs.com/package/@hyphen/hyphen-design-tokens) so that you can create a Hyphen unified product experience for your platform of choice.
 
 ## Border Radius
 

package/src/docs/intro.mdx

@@ -7,6 +7,6 @@ import { Meta } from '@storybook/addon-docs/blocks';
 Welcome to the Hyphen Design System, whose purpose is to help us deliver high quality Hyphen branded applications, faster and better. It consists of the following:
 
 - [Hyphen Components](https://github.com/hyphen/hyphen-components) - an open source, react-based, component library for Hyphen applications and websites.
-- [Hyphen Design Tokens](https://github.com/hyphen/hyphen-design-tokens) - A central location to store shared attributes of the Hyphen Design System. These include things like color, fonts, spacing, and more.
+- [Hyphen Design Tokens](https://github.com/Hyphen/hyphen-components/tree/main/packages/design-tokens) - A central location to store shared attributes of the Hyphen Design System. These include things like color, fonts, spacing, and more.
 
 ❤️ The Hyphen Team