Small adjustments (#294)

* signature: add default value for type and variant * fix topic menu focus border for menu btn * set signature has link to false by default
cds-snc · Sep 19, 2023 · e6a550a · e6a550a
1 parent d1400df
commit e6a550a
Show file tree

Hide file tree

Showing 5 changed files with 172 additions and 117 deletions.
diff --git a/packages/web/src/components/gcds-signature/gcds-signature.tsx b/packages/web/src/components/gcds-signature/gcds-signature.tsx
@@ -21,7 +21,8 @@ export class GcdsSignature {
   /**
    * The type of graphic to render
    */
-  @Prop({ reflect: true, mutable: true }) type: 'signature' | 'wordmark';
+  @Prop({ reflect: true, mutable: true }) type: 'signature' | 'wordmark' =
+    'signature';
 
   @Watch('type')
   validateType(newValue: string) {
@@ -33,7 +34,8 @@ export class GcdsSignature {
   /**
    * The colour variant to render
    */
-  @Prop({ reflect: true, mutable: true }) variant: 'colour' | 'white';
+  @Prop({ reflect: true, mutable: true }) variant: 'colour' | 'white' =
+    'colour';
 
   @Watch('variant')
   validateVariant(newValue: string) {
@@ -45,7 +47,7 @@ export class GcdsSignature {
   /**
    * Has link to canada.ca. Only applies to signature
    */
-  @Prop({ mutable: true }) hasLink: boolean;
+  @Prop({ mutable: true }) hasLink: boolean = false;
 
   /**
    * Language of rendered component

diff --git a/packages/web/src/components/gcds-signature/readme.md b/packages/web/src/components/gcds-signature/readme.md
@@ -7,11 +7,11 @@
 
 ## Properties
 
-| Property  | Attribute  | Description                                      | Type                        | Default     |
-| --------- | ---------- | ------------------------------------------------ | --------------------------- | ----------- |
-| `hasLink` | `has-link` | Has link to canada.ca. Only applies to signature | `boolean`                   | `undefined` |
-| `type`    | `type`     | The type of graphic to render                    | `"signature" \| "wordmark"` | `undefined` |
-| `variant` | `variant`  | The colour variant to render                     | `"colour" \| "white"`       | `undefined` |
+| Property  | Attribute  | Description                                      | Type                        | Default       |
+| --------- | ---------- | ------------------------------------------------ | --------------------------- | ------------- |
+| `hasLink` | `has-link` | Has link to canada.ca. Only applies to signature | `boolean`                   | `false`       |
+| `type`    | `type`     | The type of graphic to render                    | `"signature" \| "wordmark"` | `'signature'` |
+| `variant` | `variant`  | The colour variant to render                     | `"colour" \| "white"`       | `'colour'`    |
 
 
 ## Dependencies

diff --git a/packages/web/src/components/gcds-signature/stories/gcds-signature.stories.tsx b/packages/web/src/components/gcds-signature/stories/gcds-signature.stories.tsx
@@ -36,18 +36,18 @@ const Template = args =>
   `
 <!-- Web component code (Angular, Vue) -->
 <gcds-signature
-  type="${args.type}"
-  has-link="${args.hasLink}"
-  variant="${args.variant}"
+  ${args.type != 'signature' ? `type="${args.type}"` : null}
+  ${args.hasLink != 'false' ? `has-link="${args.hasLink}"` : null}
+  ${args.variant != 'colour' ? `variant="${args.variant}"` : null}
   ${args.lang != 'en' ? `lang="${args.lang}"` : null}
 >
 </gcds-signature>
 
 <!-- React code -->
 <GcdsSignature
-  type="${args.type}"
-  hasLink="${args.hasLink}"
-  variant="${args.variant}"
+  ${args.type != 'signature' ? `type="${args.type}"` : null}
+  ${args.hasLink != 'false' ? `hasLink="${args.hasLink}"` : null}
+  ${args.variant != 'colour' ? `variant="${args.variant}"` : null}
   ${args.lang != 'en' ? `lang="${args.lang}"` : null}
 >
 </GcdsSignature>

diff --git a/packages/web/src/components/gcds-signature/test/gcds-signature.spec.tsx b/packages/web/src/components/gcds-signature/test/gcds-signature.spec.tsx
@@ -20,7 +20,7 @@ describe('gcds-signature', () => {
       html: `<gcds-signature type="signature" lang="en"></gcds-signature>`,
     });
     expect(page.root).toEqualHtml(`
-      <gcds-signature lang="en" type="signature">
+      <gcds-signature lang="en" type="signature" variant="colour">
         <div class="gcds-signature">
           Government of Canada
         </div>
@@ -33,7 +33,7 @@ describe('gcds-signature', () => {
       html: `<gcds-signature type="signature" lang="en" has-link="true"></gcds-signature>`,
     });
     expect(page.root).toEqualHtml(`
-      <gcds-signature lang="en" type="signature" has-link="true">
+      <gcds-signature lang="en" type="signature" has-link="true" variant="colour">
         <a href="https://canada.ca/en.html">
           Government of Canada
         </a>
@@ -46,7 +46,7 @@ describe('gcds-signature', () => {
       html: `<gcds-signature type="signature" lang="fr"></gcds-signature>`,
     });
     expect(page.root).toEqualHtml(`
-      <gcds-signature lang="fr" type="signature">
+      <gcds-signature lang="fr" type="signature" variant="colour">
         <div class="gcds-signature">
           Gouvernement du Canada
         </div>
@@ -59,7 +59,7 @@ describe('gcds-signature', () => {
       html: `<gcds-signature type="signature" lang="fr" has-link="true"></gcds-signature>`,
     });
     expect(page.root).toEqualHtml(`
-      <gcds-signature lang="fr" type="signature" has-link="true">
+      <gcds-signature lang="fr" type="signature" has-link="true" variant="colour">
         <a href="https://canada.ca/fr.html">
           Gouvernement du Canada
         </a>
@@ -73,7 +73,7 @@ describe('gcds-signature', () => {
       html: `<gcds-signature type="wordmark" lang="en"></gcds-signature>`,
     });
     expect(page.root).toEqualHtml(`
-      <gcds-signature lang="en" type="wordmark">
+      <gcds-signature lang="en" type="wordmark" variant="colour">
         <div class="gcds-signature">
           Symbol of the Government of Canada
         </div>
@@ -86,7 +86,7 @@ describe('gcds-signature', () => {
       html: `<gcds-signature type="wordmark" lang="fr"></gcds-signature>`,
     });
     expect(page.root).toEqualHtml(`
-      <gcds-signature lang="fr" type="wordmark">
+      <gcds-signature lang="fr" type="wordmark" variant="colour">
         <div class="gcds-signature">
           Symbole du Gouvernement du Canada
         </div>