@utilitywarehouse/hearth-react-native 0.33.0 → 0.34.0

package/.storybook/manager.ts

@@ -1,7 +1,7 @@
 import '@utilitywarehouse/hearth-fonts';
 import { addons } from 'storybook/manager-api';
-import '../../../shared/storybook/styles/manager.css';
-import { config } from '../../../shared/storybook/theme';
+import '@utilitywarehouse/hearth-storybook-utils/styles/manager.css';
+import { config } from '@utilitywarehouse/hearth-storybook-utils';
 import { create } from 'storybook/theming';
 
 const theme = create(config);

package/.storybook/preview.tsx

@@ -4,11 +4,11 @@ import { color } from '@utilitywarehouse/hearth-tokens';
 import '@utilitywarehouse/hearth-tokens/index.css';
 import { useEffect } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import '../../../shared/storybook/styles/diff-highlighting.css';
-import '../../../shared/storybook/styles/preview.css';
+import '@utilitywarehouse/hearth-storybook-utils/styles/diff-highlighting.css';
+import '@utilitywarehouse/hearth-storybook-utils/styles/preview.css';
 import { breakpoints, StyleSheet, themes, UnistylesRuntime } from '../src/core';
 import { initializePrism } from './prism-setup';
-import { config } from '../../../shared/storybook/theme';
+import { config } from '@utilitywarehouse/hearth-storybook-utils';
 import { create } from 'storybook/theming';
 
 const theme = create(config);
@@ -48,8 +48,7 @@ const preview = {
       try {
         canAccessParent = window.parent.location.hostname === window.location.hostname;
       } catch {
-        // CORS error, can't access parent domain
-        canAccessParent = false;
+        // CORS error, can't access parent domain — canAccessParent stays false
       }
 
       if (canAccessParent) {
@@ -116,8 +115,7 @@ const preview = {
         try {
           canAccessParent = window.parent.location.hostname === window.location.hostname;
         } catch {
-          // CORS error, can't access parent domain
-          canAccessParent = false;
+          // CORS error, can't access parent domain — canAccessParent stays false
         }
 
         if (canAccessParent) {

package/CHANGELOG.md

@@ -1,5 +1,65 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.34.0
+
+### Minor Changes
+
+- [#1338](https://github.com/utilitywarehouse/hearth/pull/1338) [`fe9767f`](https://github.com/utilitywarehouse/hearth/commit/fe9767f916975ba2e0ba8aea585858d8ea00a147) Thanks [@robphoenix](https://github.com/robphoenix)! - 💔 [BREAKING_CHANGE]: Remove pruned design tokens from React Native token exports
+
+  Several unused design tokens have been removed from the React Native token exports
+  to align with the updated design token set.
+
+  **Tokens removed**:
+
+  - `borderRadius.lg`
+  - `color`: multiple shades pruned across all colour palettes (`blue`, `broadbandGreen`, `cashbackLilac`, `energyBlue`, `green`, `insuranceOrange`, `mobileRose`, `orange`, `piggyPink`, `purple`, `red`, `warmWhite`, `yellow`)
+  - `font.size`: `50`, `75`, `600`, `700`, `800`, `900`, `1000`
+  - `font.weight.heavy`
+  - `letterSpacing`: `0`, `50`, `75`, `550`, `600`, `700`, `800`, `900`, `1000`
+  - `lineHeight`: `50`, `75`, `100`, `900`, `1000`, `1100`, `1200`
+  - `space['1000']`
+
+  **Developer changes**:
+
+  If you are referencing any of the removed tokens directly, replace them with the
+  nearest available equivalent or remove the usage.
+
+  For example:
+
+  ```diff
+  - borderRadius: tokens.borderRadius.lg,
+  + borderRadius: tokens.borderRadius.md,
+  ```
+
+  ```diff
+  - fontSize: tokens.font.size['50'],
+  + fontSize: tokens.font.size['90'],
+  ```
+
+  ```diff
+  - fontWeight: tokens.font.weight.heavy,
+  + fontWeight: tokens.font.weight.bold,
+  ```
+
+### Patch Changes
+
+- [#1338](https://github.com/utilitywarehouse/hearth/pull/1338) [`fe9767f`](https://github.com/utilitywarehouse/hearth/commit/fe9767f916975ba2e0ba8aea585858d8ea00a147) Thanks [@robphoenix](https://github.com/robphoenix)! - 🌟 [FEATURE]: Add `xl` variant to `bodyText` typography tokens
+
+  The `bodyText` typography scale now includes an `xl` variant across mobile,
+  tablet, and desktop breakpoints.
+
+  | Property           | Value |
+  | ------------------ | ----- |
+  | `fontSize`         | `20`  |
+  | `lineHeight`       | `28`  |
+  | `paragraphSpacing` | `20`  |
+
+## 0.33.1
+
+### Patch Changes
+
+- [#1311](https://github.com/utilitywarehouse/hearth/pull/1311) [`3d286c9`](https://github.com/utilitywarehouse/hearth/commit/3d286c97710a1483a054e4b19c2453920cda4598) Thanks [@robphoenix](https://github.com/robphoenix)! - 🧹 [HOUSEKEEPING]: Update token usage for Divider
+
 ## 0.33.0
 
 ### Minor Changes

package/build/components/Accordion/AccordionItemRoot.js

@@ -10,8 +10,8 @@ const AccordionItem = ({ children, style, noPadding, disabled, ...props }) => {
 AccordionItem.displayName = 'AccordionItemRoot';
 const styles = StyleSheet.create(theme => ({
     item: {
-        borderBottomWidth: theme.components.divider.borderWidth,
-        borderBottomColor: theme.color.border.subtle,
+        borderBottomWidth: theme.components.divider.size,
+        borderBottomColor: theme.components.divider.color,
     },
 }));
 export default AccordionItem;

package/build/components/Divider/Divider.js

@@ -14,16 +14,16 @@ const Divider = ({ orientation = 'horizontal', color, spacing, space, height, wi
 Divider.displayName = 'Divider';
 const styles = StyleSheet.create(theme => ({
     divider: {
-        backgroundColor: theme.color.border.subtle,
+        backgroundColor: theme.components.divider.color,
         variants: {
             orientation: {
                 horizontal: {
                     width: '100%',
-                    height: theme.components.divider.borderWidth,
+                    height: theme.components.divider.size,
                 },
                 vertical: {
                     height: '100%',
-                    width: theme.components.divider.borderWidth,
+                    width: theme.components.divider.size,
                 },
             },
             spacing: {