fix(897)

- remove unused classname
- update nr-theme package to latest
refs: #897

frontend/package.json

@@ -13,7 +13,7 @@
         "test-coverage": "vitest run --coverage"
     },
     "dependencies": {
-        "@bcgov-nr/nr-fsa-theme": "^1.2.0",
+        "@bcgov-nr/nr-theme": "^1.3.0",
         "@carbon/icons-vue": "^10.72.1",
         "aws-amplify": "^5.3.6",
         "axios": "0.26.1",
@@ -40,4 +40,4 @@
         "vue-tsc": "^1.0.0",
         "yup": "^1.0.0"
     }
-}
+}

frontend/src/assets/styles/default-theme.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/light-theme.scss' as lightTheme;
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/dark-theme.scss' as darkTheme;
+@use '@bcgov-nr/nr-theme/design-tokens/light-theme.scss' as lightTheme;
+@use '@bcgov-nr/nr-theme/design-tokens/dark-theme.scss' as darkTheme;
 // need to use type family first, and then use stylesheet, so the body type tokens can get the font path correctly
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/type-family.scss';
-@use '@bcgov-nr/nr-fsa-theme/style-sheets/primevue-components-overrides.scss';
+@use '@bcgov-nr/nr-theme/design-tokens/type-family.scss';
+@use '@bcgov-nr/nr-theme/style-sheets/primevue-components-overrides.scss';
 
 // Header
 $header-height: 3rem;
@@ -33,4 +33,4 @@ $light-interactive: map.get(lightTheme.$light-theme, 'interactive');
 
 //background
 $light-layer-one: map.get(lightTheme.$light-theme, 'layer-01');
-$light-layer-two: map.get(lightTheme.$light-theme, 'layer-02')
+$light-layer-two: map.get(lightTheme.$light-theme, 'layer-02');

frontend/src/assets/styles/styles.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '@bcgov-nr/nr-fsa-theme/design-tokens/type-family.scss' as typeFamily;
+@use '@bcgov-nr/nr-theme/design-tokens/type-family.scss' as typeFamily;
 
 // Import all of Bootstrap's CSS
 @import '~bootstrap/scss/bootstrap';
@@ -8,7 +8,7 @@
 
 // Components
 
-@import '@bcgov-nr/nr-fsa-theme/style-sheets/primevue-components-overrides.scss';
+@import '@bcgov-nr/nr-theme/style-sheets/primevue-components-overrides.scss';
 
 :root {
     --font-family: map.get(typeFamily.$type-family, 'sans');

frontend/src/components/Landing.vue

@@ -20,15 +20,16 @@ import TreeLogs from '@/assets/images/tree-logs.jpg';
                     Grant access to your users
                 </p>
                 <Button
-                    class="landing-button p-button-primary"
+                    class="landing-button"
                     label="Login with IDIR"
                     id="login-idir-button"
                     @click="authService.methods.login()"
                 >
                     <Icon icon="login" :size="IconSize.medium" />
                 </Button>
                 <Button
-                    class="landing-button p-button-outlined"
+                    class="landing-button"
+                    outlined
                     label="Login with BCeID"
                     id="login-bceid-button"
                     disabled
@@ -49,12 +50,5 @@ import TreeLogs from '@/assets/images/tree-logs.jpg';
 </template>
 
 <style scoped lang="scss">
-@import '@bcgov-nr/nr-fsa-theme/style-sheets/landing-page-components-overrides.scss';
-
-/* for some reason, the button on focus effect in the shared stylesheet
- doesn't work on the landing button, add it here */
-.landing-button:focus {
-    outline: 0.125rem solid #ffffff;
-    outline-offset: -0.25rem;
-}
+@import '@bcgov-nr/nr-theme/style-sheets/landing-page-components-overrides.scss';
 </style>

frontend/src/components/grantaccess/GrantAccess.vue

@@ -261,7 +261,8 @@ function roleSelected(evt: any) {
                             "
                         >
                             <Button
-                                class="button p-button-tertiary p-button-outlined"
+                                class="button"
+                                outlined
                                 aria-label="Verify user IDIR"
                                 :name="'verifyIdir'"
                                 :label="'Verify'"
@@ -360,7 +361,8 @@ function roleSelected(evt: any) {
 
                         <div class="col-md-2">
                             <Button
-                                class="button p-button-tertiary p-button-outlined"
+                                class="button"
+                                outlined
                                 aria-label="Verify forest client number"
                                 :name="'verifyFC'"
                                 :label="'Verify'"
@@ -393,7 +395,7 @@ function roleSelected(evt: any) {
                             <Button
                                 type="button"
                                 id="grantAccessSubmit"
-                                class="mb-3 button p-button"
+                                class="mb-3 button"
                                 label="Next"
                                 :disabled="
                                     !(meta.valid && areVerificationsPassed())

frontend/src/tests/Landing.spec.ts

@@ -22,45 +22,55 @@ describe('Landing', () => {
         });
         await flushPromises();
     });
-    it("should render bc logo image", () => {
+    it('should render bc logo image', () => {
         const img = wrapper.findAll('.logo');
         expect(img.length).toBe(1);
     });
     it('should render title with correct class', () => {
         const element = wrapper.get('#landing-title');
-        expect(element.text()).toEqual('Welcome to FAM')
-        expect(element.classes()).toEqual(expect.arrayContaining(["landing-title"]))
+        expect(element.text()).toEqual('Welcome to FAM');
+        expect(element.classes()).toEqual(
+            expect.arrayContaining(['landing-title'])
+        );
     });
     it('should render subtitle with correct class', () => {
         const element = wrapper.get('#landing-subtitle');
-        expect(element.text()).toEqual('Forests Access Management')
-        expect(element.classes()).toEqual(expect.arrayContaining(["landing-subtitle"]))
+        expect(element.text()).toEqual('Forests Access Management');
+        expect(element.classes()).toEqual(
+            expect.arrayContaining(['landing-subtitle'])
+        );
     });
     it('should render description with correct class', () => {
         const element = wrapper.get('#landing-desc');
-        expect(element.text()).toEqual('Grant access to your users')
-        expect(element.classes()).toEqual(expect.arrayContaining(["landing-desc"]))
+        expect(element.text()).toEqual('Grant access to your users');
+        expect(element.classes()).toEqual(
+            expect.arrayContaining(['landing-desc'])
+        );
     });
     it('should render IDIR button and be enabled', () => {
         const button = wrapper.get('#login-idir-button');
-        expect(button.classes()).toEqual(expect.arrayContaining(["landing-button", "p-button-primary"]))
-        expect(button.html().includes("Login with IDIR")).toBe(true);
+        expect(button.classes()).toEqual(
+            expect.arrayContaining(['landing-button'])
+        );
+        expect(button.html().includes('Login with IDIR')).toBe(true);
         expect(button.attributes()).not.toHaveProperty('disabled');
     });
     it('should button Login with IDIR be clicked', async () => {
         const button = wrapper.get('#login-idir-button');
         const loginSpy = vi.spyOn(AuthService.methods, 'login');
         await button.trigger('click');
-        expect(loginSpy).toHaveBeenCalled()
-    })
+        expect(loginSpy).toHaveBeenCalled();
+    });
     it('should render BCeID button and be disabled', async () => {
         const button = wrapper.get('#login-bceid-button');
-        expect(button.classes()).toEqual(expect.arrayContaining(["landing-button", "p-button-outlined"]))
-        expect(button.html().includes("Login with BCeID")).toBe(true);
-        expect(button.attributes()).toHaveProperty('disabled')
+        expect(button.classes()).toEqual(
+            expect.arrayContaining(['landing-button'])
+        );
+        expect(button.html().includes('Login with BCeID')).toBe(true);
+        expect(button.attributes()).toHaveProperty('disabled');
     });
-    it("should render image", () => {
+    it('should render image', () => {
         const img = wrapper.findAll('.landing-img');
         expect(img.length).toBe(1);
     });
-});
+});