@hyphen/hyphen-components 6.6.0 → 6.8.0

package/dist/lib/tokens.d.ts

@@ -1,5 +1,5 @@
 import { BorderRadiusSize, Breakpoint, BreakpointSizeWithBase } from '../types';
-export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-user" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "code" | "command-line" | "computer" | "contact" | "copy-document" | "cpu" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "infinity" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-code" | "logo-deploy" | "logo-env" | "logo-github" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "memory" | "menu" | "microphone" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "ssd" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
+export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-user" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "code" | "command-line" | "computer" | "contact" | "copy-document" | "cpu" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "git-branch" | "git-commit" | "git-merge" | "git-pull-request" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "inbox" | "infinity" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-code" | "logo-deploy" | "logo-env" | "logo-github" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "memory" | "menu" | "microphone" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "ssd" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
 export declare const BORDER_RADIUS_OPTIONS: BorderRadiusSize[];
 export declare const BORDER_SIZE_OPTIONS: ("0" | "sm" | "md" | "lg")[];
 export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import { Key, KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { BorderRadiusSize as BorderRadius, SpacingSize, BreakpointSize, HeightSize, WidthSize } from '@hyphen/hyphen-design-tokens/build/types';
-export type { IconName, BackgroundColor, BaseColor, BorderColor, BorderSize, BoxShadowSize, BreakpointSize, ColorName, FontColor, FontFamily, FontSize, FontWeight, HeadingSize, HeightSize, LineHeightSize, SpacingSize, WidthSize, ZIndexSize, } from '@hyphen/hyphen-design-tokens/build/types';
+export type { IconName, BackgroundColor, BaseColor, BorderColor, BorderSize, BoxShadowSize, BreakpointSize, ColorName, FontColor, FontFamily, FontSize, FontWeight, HeadingSize, HeightSize, LineHeightSize, SpacingSize, TextDecorationLine, TextDecorationStyle, TextTransform, TextWrap, WidthSize, WhiteSpace, WordBreak, ZIndexSize, } from '@hyphen/hyphen-design-tokens/build/types';
 export type BreakpointSizeWithBase = BreakpointSize | 'base';
 export type Breakpoint = {
     name: BreakpointSizeWithBase;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "6.6.0",
+  "version": "6.8.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -62,7 +62,7 @@
   ],
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^5.6.0",
+    "@hyphen/hyphen-design-tokens": "^5.10.0",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dropdown-menu": "^2.1.16",

package/src/components/Box/Box.stories.tsx

@@ -1855,3 +1855,143 @@ export const Omit = () => (
     </p>
   </Box>
 );
+
+export const TextWrap = () => {
+  const sampleText =
+    'This is a long line of text that demonstrates different text wrapping behaviors. The quick brown fox jumps over the lazy dog. Built by developers, for developers, Hyphen automates access management.';
+
+  return (
+    <Box gap="lg">
+      <Box gap="sm">
+        <Box fontWeight="bold">wrap (default)</Box>
+        <Box
+          textWrap="wrap"
+          maxWidth="300px"
+          padding="md"
+          background="tertiary"
+          borderWidth="sm"
+          borderColor="default"
+        >
+          {sampleText}
+        </Box>
+      </Box>
+
+      <Box gap="sm">
+        <Box fontWeight="bold">nowrap</Box>
+        <Box
+          textWrap="nowrap"
+          maxWidth="300px"
+          padding="md"
+          background="tertiary"
+          borderWidth="sm"
+          borderColor="default"
+          overflow="hidden"
+        >
+          {sampleText}
+        </Box>
+      </Box>
+
+      <Box gap="sm">
+        <Box fontWeight="bold">balance</Box>
+        <Box
+          textWrap="balance"
+          maxWidth="300px"
+          padding="md"
+          background="tertiary"
+          borderWidth="sm"
+          borderColor="default"
+        >
+          {sampleText}
+        </Box>
+      </Box>
+
+      <Box gap="sm">
+        <Box fontWeight="bold">pretty</Box>
+        <Box
+          textWrap="pretty"
+          maxWidth="300px"
+          padding="md"
+          background="tertiary"
+          borderWidth="sm"
+          borderColor="default"
+        >
+          {sampleText}
+        </Box>
+      </Box>
+
+      <Box gap="sm">
+        <Box fontWeight="bold">stable</Box>
+        <Box
+          textWrap="stable"
+          maxWidth="300px"
+          padding="md"
+          background="tertiary"
+          borderWidth="sm"
+          borderColor="default"
+        >
+          {sampleText}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export const TextTransform = () => {
+  const sampleText = 'The Quick Brown Fox Jumps Over The Lazy Dog';
+
+  return (
+    <Box gap="lg">
+      <Box gap="sm">
+        <Box fontWeight="bold">uppercase</Box>
+        <Box
+          textTransform="uppercase"
+          padding="md"
+          background="tertiary"
+          borderWidth="sm"
+          borderColor="default"
+        >
+          {sampleText}
+        </Box>
+      </Box>
+
+      <Box gap="sm">
+        <Box fontWeight="bold">lowercase</Box>
+        <Box
+          textTransform="lowercase"
+          padding="md"
+          background="tertiary"
+          borderWidth="sm"
+          borderColor="default"
+        >
+          {sampleText}
+        </Box>
+      </Box>
+
+      <Box gap="sm">
+        <Box fontWeight="bold">capitalize</Box>
+        <Box
+          textTransform="capitalize"
+          padding="md"
+          background="tertiary"
+          borderWidth="sm"
+          borderColor="default"
+        >
+          {sampleText}
+        </Box>
+      </Box>
+
+      <Box gap="sm">
+        <Box fontWeight="bold">normal-case</Box>
+        <Box
+          textTransform="normal-case"
+          padding="md"
+          background="tertiary"
+          borderWidth="sm"
+          borderColor="default"
+        >
+          {sampleText}
+        </Box>
+      </Box>
+    </Box>
+  );
+};

package/src/components/Box/Box.tsx

@@ -27,6 +27,8 @@ import {
   BorderColor,
   CssWhiteSpaceValue,
   CssWordBreakValue,
+  TextWrap,
+  TextTransform,
 } from '../../types';
 import {
   CSSProperties,
@@ -251,10 +253,22 @@ export interface BoxProps {
    * the alignment of the text
    */
   textAlign?: CssTextAlignValue | ResponsiveProp<CssTextAlignValue>;
+  /**
+   * Control the text transformation of the Box
+   */
+  textTransform?: TextTransform | ResponsiveProp<TextTransform>;
+  /**
+   * Control the text wrapping behavior of the Box
+   */
+  textWrap?: TextWrap | ResponsiveProp<TextWrap>;
   /**
    * Control the whitespace behavior of the Box
    */
   whiteSpace?: CssWhiteSpaceValue | ResponsiveProp<CssWhiteSpaceValue>;
+  /**
+   * Control the word break behavior of the Box
+   */
+  wordBreak?: CssWordBreakValue | ResponsiveProp<CssWordBreakValue>;
   /**
    * By default, a Box's items will all try to fit onto one line.
    * Change that and allow the items to wrap as needed wrap
@@ -268,7 +282,6 @@ export interface BoxProps {
   /**
    * Control the word break behavior of the Box
    */
-  wordBreak?: CssWordBreakValue | ResponsiveProp<CssWordBreakValue>;
   /**
    * ZIndex value for the element. Can be one of the predetermined token values.
    * Can be responsive.
@@ -324,6 +337,8 @@ export const Box: FC<BoxProps> = forwardRef(
       shadow = undefined,
       style = {},
       textAlign = undefined,
+      textTransform = undefined,
+      textWrap = undefined,
       wrap = undefined,
       whiteSpace = undefined,
       width = undefined,
@@ -424,6 +439,8 @@ export const Box: FC<BoxProps> = forwardRef(
       cssShorthandToClasses('bw', borderWidth),
       generateResponsiveClasses('font-weight', fontWeight),
       generateResponsiveClasses('text-align', textAlign),
+      generateResponsiveClasses('transform', textTransform),
+      generateResponsiveClasses('text-wrap', textWrap),
       generateResponsiveClasses('position', position),
       generateResponsiveClasses('z-index', zIndex),
       generateResponsiveClasses('whitespace', whiteSpace),
@@ -646,6 +663,8 @@ export const boxPropsKeys: (keyof Pick<BoxProps, KnownKeys<BoxProps>>)[] = [
   'shadow',
   'style',
   'textAlign',
+  'textTransform',
+  'textWrap',
   'wrap',
   'width',
   'zIndex',

package/src/types/index.ts

@@ -25,7 +25,13 @@ export type {
   HeightSize,
   LineHeightSize,
   SpacingSize,
+  TextDecorationLine,
+  TextDecorationStyle,
+  TextTransform,
+  TextWrap,
   WidthSize,
+  WhiteSpace,
+  WordBreak,
   ZIndexSize,
 } from '@hyphen/hyphen-design-tokens/build/types';