Merge branch 'main' into feature/263-narin-theme-setup

CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## [assets-v0.12.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/assets-v0.12.0) (2024-06-24)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/linting-v0.18.0...assets-v0.12.0)
+
+**Closed issues:**
+
+- DS - Loading Component - Add to linting pkg [\#253](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/253)
+
+**Merged pull requests:**
+
+- \[Feature\] Update component-library and extract new icons [\#355](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/355) ([narin](https://github.com/narin))
+
+## [linting-v0.18.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/linting-v0.18.0) (2024-06-24)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/linting-v0.17.0...linting-v0.18.0)
+
+## [linting-v0.17.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/linting-v0.17.0) (2024-06-24)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/linting-v0.16.0...linting-v0.17.0)
+
+## [linting-v0.16.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/linting-v0.16.0) (2024-06-24)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/components-v0.18.0...linting-v0.16.0)
+
+## [components-v0.18.0](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/components-v0.18.0) (2024-06-24)
+
+[Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/components-v0.17.1...components-v0.18.0)
+
+**Closed issues:**
+
+- Icon Library: Create documentation [\#313](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/313)
+- DS - Loading Component Unit Tests [\#254](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/254)
+- DS - Loading Component Storybook [\#249](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/249)
+- DS - Loading Component Implementation [\#247](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/247)
+- DS - Update Icon Storybook to link to VADS docs [\#234](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/234)
+- Icon Library: Update icons to align with VADS [\#144](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/144)
+- Loading Indicator - Publish component to Figma and Doc Site [\#114](https://github.com/department-of-veterans-affairs/va-mobile-library/issues/114)
+
+**Merged pull requests:**
+
+- \[Linting\] Add Loading indicator linting rule [\#356](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/356) ([TimRoe](https://github.com/TimRoe))
+- \[Bug\] Fix URL for loading indicator docs [\#351](https://github.com/department-of-veterans-affairs/va-mobile-library/pull/351) ([narin](https://github.com/narin))
+
 ## [components-v0.17.1](https://github.com/department-of-veterans-affairs/va-mobile-library/tree/components-v0.17.1) (2024-06-07)
 
 [Full Changelog](https://github.com/department-of-veterans-affairs/va-mobile-library/compare/assets-v0.11.0...components-v0.17.1)

packages/assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-assets",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "VA Design System Mobile Assets",
   "type": "module",
   "repository": {
@@ -28,6 +28,7 @@
   },
   "homepage": "https://github.com/department-of-veterans-affairs/va-mobile-library#readme",
   "devDependencies": {
-    "@department-of-veterans-affairs/component-library": "^42.0.0"
+    "@department-of-veterans-affairs/component-library": "^42.2.1",
+    "hast-util-to-html": "^9.0.1"
   }
 }

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/mobile-component-library",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "description": "VA Design System Mobile Component Library",
   "main": "src/index.tsx",
   "scripts": {

packages/components/src/components/Icon/Icon.stories.tsx

@@ -47,7 +47,12 @@ const meta: Meta<IconProps> = {
     name: { options: Object.keys(IconMap) },
   },
   parameters: {
-    docs: generateDocs({ icons: buildIconGallery() }),
+    docs: generateDocs({
+      name: 'Icon',
+      docUrl:
+        'https://department-of-veterans-affairs.github.io/va-mobile-app/design/Foundation/Icons/',
+      icons: buildIconGallery(),
+    }),
   },
 }
 

packages/components/src/components/LoadingIndicator/LoadingIndicator.test.tsx

@@ -0,0 +1,133 @@
+import 'react-native'
+import { render, screen } from '@testing-library/react-native'
+import React from 'react'
+// Note: test renderer must be required after react-native.
+import 'jest-styled-components'
+
+import { Icon } from '../Icon/Icon'
+import { LoadingIndicator, LoadingIndicatorProps } from './LoadingIndicator'
+import { Spacer } from '../Spacer/Spacer'
+import { Text, View } from 'react-native'
+
+// Set so Animated.timing() doesn't persist rendering after the jest test
+jest.useFakeTimers()
+
+const mockedColorScheme = jest.fn()
+
+jest.mock('react-native/Libraries/Utilities/useColorScheme', () => {
+  return {
+    default: mockedColorScheme,
+  }
+})
+
+describe('Loading indicator', () => {
+  const commonProps: LoadingIndicatorProps = {
+    text: 'Loading indicator text',
+    a11yLabel: 'a11y label',
+  }
+  const children = (
+    <View>
+      <Text>Children content</Text>
+    </View>
+  )
+
+  const getIcon = async () => {
+    return screen.root.findByType(Icon)
+  }
+
+  const getSpacers = async () => {
+    return screen.root.findAllByType(Spacer)
+  }
+
+  describe('Basic tests', () => {
+    it('initializes correctly', () => {
+      render(<LoadingIndicator {...commonProps} />)
+
+      expect(screen.getByText('Loading indicator text')).toBeTruthy()
+    })
+
+    it('should render text', () => {
+      render(<LoadingIndicator {...commonProps} />)
+
+      expect(screen.getByText('Loading indicator text')).toBeOnTheScreen()
+    })
+
+    it('should render LoadingIndicator icon with 50x50 width/height', async () => {
+      render(<LoadingIndicator {...commonProps} />)
+
+      const icon = await getIcon()
+
+      expect(icon.props.name).toBe('LoadingIndicator')
+      expect(icon.props.height).toBe(50)
+      expect(icon.props.width).toBe(50)
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have text a11yLabel', () => {
+      render(<LoadingIndicator {...commonProps} />)
+
+      expect(screen.getByLabelText('a11y label')).toBeOnTheScreen()
+    })
+  })
+
+  describe('Light mode', () => {
+    it('should render correct colors', async () => {
+      render(<LoadingIndicator {...commonProps} />)
+
+      const icon = await getIcon()
+
+      expect(screen.getByText(commonProps.text)).toHaveStyle({
+        color: '#1b1b1b',
+      })
+      expect(icon.props.fill).toBe('#005ea2')
+    })
+  })
+
+  describe('Dark mode', () => {
+    it('should render correct colors', async () => {
+      mockedColorScheme.mockImplementation(() => 'dark')
+
+      render(<LoadingIndicator {...commonProps} />)
+
+      const icon = await getIcon()
+
+      expect(screen.getByText(commonProps.text)).toHaveStyle({
+        color: '#f0f0f0',
+      })
+      expect(icon.props.fill).toBe('#58b4ff')
+    })
+  })
+
+  describe('Children tests', () => {
+    it('should render with just children', async () => {
+      render(<LoadingIndicator children={children} />)
+
+      const spacers = await getSpacers()
+
+      expect(screen.getByText('Children content')).toBeOnTheScreen()
+      expect(screen.queryByText('Loading indicator text')).not.toBeOnTheScreen()
+      expect(spacers.length).toBe(1) // Just Spacer between icon and children
+    })
+
+    it('should render with both text and children', async () => {
+      render(<LoadingIndicator {...commonProps} children={children} />)
+
+      const spacers = await getSpacers()
+
+      expect(screen.getByText('Children content')).toBeOnTheScreen()
+      expect(screen.getByText('Loading indicator text')).toBeOnTheScreen()
+      expect(spacers.length).toBe(2) // Spacers between icon/text + text/children
+    })
+
+    it('should render without children', async () => {
+      render(<LoadingIndicator {...commonProps} />)
+
+      const spacers = await getSpacers()
+
+      expect(screen.queryByText('Children content')).not.toBeOnTheScreen()
+      expect(screen.getByText('Loading indicator text')).toBeOnTheScreen()
+      expect(spacers.length).toBe(1) // Just Spacer between icon and text
+    })
+  })
+})

packages/linting/index.js

@@ -23,6 +23,11 @@ module.exports = {
         module: 'components',
         use: 'Alert from @department-of-veterans-affairs/mobile-component-library',
       },
+      {
+        name: 'LoadingComponent',
+        module: 'components',
+        use: 'LoadingIndicator from @department-of-veterans-affairs/mobile-component-library',
+      },
     ],
   },
 }

packages/linting/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@department-of-veterans-affairs/eslint-config-mobile",
-  "version": "0.15.0",
+  "version": "0.18.0",
   "description": "VA Design System Mobile ESLint Configuration",
   "repository": {
     "type": "git",