Merge pull request #608 from department-of-veterans-affairs/bug/550-n…

…arin-fix-bottom-margin-text-component

[Bug] Typography – Fix Heading margin bottom, Text stories

packages/components/package.json

@@ -47,7 +47,7 @@
   },
   "peerDependencies": {
     "@department-of-veterans-affairs/mobile-assets": "^0.14.0",
-    "@department-of-veterans-affairs/mobile-tokens": "^0.21.0",
+    "@department-of-veterans-affairs/mobile-tokens": "^0.22.0",
     "react": "^18.2.0",
     "react-native": ">=0.71.7",
     "react-native-gesture-handler": "^2.12.0",
@@ -59,7 +59,7 @@
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
     "@department-of-veterans-affairs/mobile-assets": "0.14.0",
-    "@department-of-veterans-affairs/mobile-tokens": "0.21.0",
+    "@department-of-veterans-affairs/mobile-tokens": "0.22.0",
     "@expo/metro-runtime": "~4.0.0",
     "@expo/webpack-config": "~19.0.1",
     "@react-native-async-storage/async-storage": "1.23.1",

packages/components/src/components/Text/Text.stories.tsx

@@ -13,8 +13,6 @@ const meta: Meta<TextProps> = {
       <View
         style={{
           flex: 1,
-          justifyContent: 'center',
-          alignItems: 'center',
           margin: 12,
         }}>
         <Story />
@@ -29,8 +27,7 @@ const meta: Meta<TextProps> = {
     }),
   },
   argTypes: {
-    /** The foollowing conditions hide the tone and size props if variant's value is 'display' */
-    tone: { if: { arg: 'variant', neq: 'display' } },
+    /** The following condition hides the size props if variant's value is 'display' */
     size: { if: { arg: 'variant', neq: 'display' } },
   },
 }
@@ -56,10 +53,12 @@ export const Body: Story = {
 
 const children = 'Lorem ipsum dolor sit amet.'
 
+const baseToneArgs = {
+  tone: { control: 'radio', options: baseToneValues },
+}
+
 export const _Heading: Story = {
-  argTypes: {
-    tone: { control: 'radio', options: baseToneValues },
-  },
+  argTypes: baseToneArgs,
   args: {
     children,
     variant: 'heading',
@@ -68,6 +67,7 @@ export const _Heading: Story = {
 }
 
 export const __Display: Story = {
+  argTypes: baseToneArgs,
   args: {
     children,
     variant: 'display',

yarn.lock

@@ -3617,7 +3617,7 @@ __metadata:
     "@babel/preset-env": "npm:^7.24.8"
     "@babel/preset-typescript": "npm:^7.24.7"
     "@department-of-veterans-affairs/mobile-assets": "npm:0.14.0"
-    "@department-of-veterans-affairs/mobile-tokens": "npm:0.21.0"
+    "@department-of-veterans-affairs/mobile-tokens": "npm:0.22.0"
     "@expo/metro-runtime": "npm:~4.0.0"
     "@expo/webpack-config": "npm:~19.0.1"
     "@react-native-async-storage/async-storage": "npm:1.23.1"
@@ -3679,18 +3679,18 @@ __metadata:
     typescript: "npm:~5.3.3"
   peerDependencies:
     "@department-of-veterans-affairs/mobile-assets": ^0.14.0
-    "@department-of-veterans-affairs/mobile-tokens": ^0.21.0
+    "@department-of-veterans-affairs/mobile-tokens": ^0.22.0
     react: ^18.2.0
     react-native: ">=0.71.7"
     react-native-gesture-handler: ^2.12.0
     react-native-safe-area-context: ^4.10.5
   languageName: unknown
   linkType: soft
 
-"@department-of-veterans-affairs/mobile-tokens@npm:0.21.0":
-  version: 0.21.0
-  resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.21.0"
-  checksum: ee67987582ab306ed012d8153ea97f2a19bcd1dd2cfd63c27f3713aefe372c3f28b078ac2e9298b6ffc415e7fb955c1b9f2e8efbace14f3df8fdf347f5e152e1
+"@department-of-veterans-affairs/mobile-tokens@npm:0.22.0":
+  version: 0.22.0
+  resolution: "@department-of-veterans-affairs/mobile-tokens@npm:0.22.0"
+  checksum: 44badf991b030475a4a5b8cc7c8c3ca54401df4b38e603d6b9255a13aefe644765625a8064c283843932eeb3dd2ed44e1db47c883f687a000b1d76fc006f76f3
   languageName: node
   linkType: hard