Merge pull request #17 from department-of-veterans-affairs/6541-fix-s…

…torybook-web-styling Fix Storybook web
department-of-veterans-affairs · Sep 14, 2023 · 3cf4b7b · 3cf4b7b
2 parents 1927b2b + 8d10c9e
commit 3cf4b7b
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,7 @@ coverage
 
 .yarn/*
 .yarn/cache
+packages/components/.yarn/install-state.gz
 packages/components/.yarn/cache
 
 !.yarn/patches

diff --git a/packages/components/.storybook/web/main.ts b/packages/components/.storybook/web/main.ts
@@ -13,4 +13,5 @@ module.exports = {
     builder: 'webpack5',
   },
   framework: '@storybook/react',
+  staticDirs: ['../../src/assets'],
 }
diff --git a/packages/components/.storybook/web/preview-head.html b/packages/components/.storybook/web/preview-head.html
@@ -0,0 +1,12 @@
+<style>
+  @font-face {
+    font-family: 'SourceSansPro-Regular';
+    src: url('fonts/SourceSansPro/SourceSansPro-Regular.ttf');
+  }
+
+  @font-face {
+    font-family: 'SourceSansPro-Bold';
+    src: url('fonts/SourceSansPro/SourceSansPro-Bold.ttf');
+  }
+
+</style>
diff --git a/packages/components/.yarn/install-state.gz b/packages/components/.yarn/install-state.gz
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -12,7 +12,7 @@
     "storybook:deploy": "yarn storybook:build && gh-pages -d storybook-static",
     "storybook:generate": "sb-rn-get-stories --config-path .storybook/native",
     "storybook:watch": "sb-rn-watcher --config-path .storybook/native",
-    "storybook:web": "start-storybook --config-dir .storybook/web -p 6006",
+    "storybook:web": "STORYBOOK_WEB=true start-storybook --config-dir .storybook/web -p 6006",
     "test": "jest --coverage",
     "test:watch": "jest --watch"
   },

diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.stories.tsx
@@ -18,7 +18,7 @@ const meta: Meta<SegmentedControlProps> = {
   decorators: [
     (Story) => (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-        <Story />
+        {Story()}
       </View>
     ),
   ],

diff --git a/packages/components/src/components/SegmentedControl/SegmentedControl.tsx b/packages/components/src/components/SegmentedControl/SegmentedControl.tsx
@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import { useTranslation } from 'react-i18next'
 import React, { FC, useEffect } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/native'
 
 import { ComponentWrapper } from '../../wrapper'
 
@@ -83,7 +83,7 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
   }
 
   const viewStyle: ViewStyle = {
-    alignSelf: 'baseline',
+    alignSelf: 'stretch',
     backgroundColor: inactiveBgColor,
     borderRadius: 8,
     flexDirection: 'row',
@@ -134,7 +134,8 @@ export const SegmentedControl: FC<SegmentedControlProps> = ({
         accessibilityHint={a11yHints ? a11yHints[index] : ''}
         accessibilityValue={accessibilityValue}
         accessibilityRole={'tab'}
-        accessibilityState={{ selected: isSelected }}>
+        accessibilityState={{ selected: isSelected }}
+      >
         <Text allowFontScaling={false} style={textStyle}>
           {label}
         </Text>

diff --git a/packages/components/src/utils/translation/i18n.ts b/packages/components/src/utils/translation/i18n.ts
@@ -9,8 +9,14 @@ export const resources = {
 }
 
 // Initialize the internationalization library
+
+// Use RNLanguageDetector only if mobile
+if (process.env.STORYBOOK_WEB !== 'true') {
+  i18n.use(RNLanguageDetector)
+}
+
+
 i18n
-  .use(RNLanguageDetector)
   .use(initReactI18next)
   .init({
     resources,
@@ -26,5 +32,4 @@ i18n
       useSuspense: true,
     },
   })
-
 export default i18n