Add storybook controls and update READMEs

justeattakeaway · Jun 21, 2024 · d235df5 · d235df5
1 parent 48a6e60
commit d235df5
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/packages/components/organisms/f-footer/README.md b/packages/components/organisms/f-footer/README.md
@@ -90,6 +90,7 @@ The props that can be defined are as follows (if any):
 | `showCourierLinks`    | `Bool`   | `true`  | Controls whether to show courier links in footer.                                                             |
 | `showCountrySelector` | `Bool`   | `true`  | Controls whether to show country selector in footer.                                                          |
 | `content`             | `Object` | `{}`    | Content to be displayed in the footer (sections, links, etc.)                                                 |
+| `globalTrackingContexts` | `Array` | `[]`  | Array containing the global tracking contexts to be passed through to f-trak. |
 
 ### CSS Classes
 

diff --git a/packages/components/organisms/f-footer/stories/footer.stories.js b/packages/components/organisms/f-footer/stories/footer.stories.js
@@ -46,7 +46,8 @@ export const FooterComponent = (args, { argTypes }) => ({
             :showCourierLinks="showCourierLinks"
             :locale="locale"
             :showCountrySelector="showCountrySelector"
-            :content="contentByLocale" />`
+            :content="contentByLocale"
+            :globalTrackingContexts="globalTrackingContexts" />`
 });
 
 FooterComponent.storyName = 'f-footer';
@@ -56,7 +57,8 @@ FooterComponent.args = {
     showCourierLinks: false,
     showCountrySelector: false,
     showLinksContent: true,
-    content: contents['en-GB']
+    content: contents['en-GB'],
+    globalTrackingContexts: []
 };
 
 FooterComponent.argTypes = {
@@ -83,5 +85,10 @@ FooterComponent.argTypes = {
 
     content: {
         description: 'Consider changing the locale instead, as this determines which data file to read.'
+    },
+
+    globalTrackingContexts: {
+        control: { type: 'object' },
+        description: 'Array containing the global tracking contexts to be passed through to f-trak.'
     }
 };
diff --git a/packages/components/organisms/f-header/README.md b/packages/components/organisms/f-header/README.md
@@ -86,15 +86,16 @@ The props that can be defined are as follows:
 | orderCountUrl             | `String`      | `false` | ?? |
 | showDeliveryEnquiry       | `Boolean`     | `false` | Defines if it is necessary to show the "Deliver with Just Eat" link in the header. |
 | showOffersLink            | `Boolean`     | `false` | Defines whether the offers link should be shown in the navigation. |
-| showCorporateLink            | `Boolean`     | `false` | Shows the "Corporate Ordering" Link |
+| showCorporateLink         | `Boolean`     | `false` | Shows the "Corporate Ordering" Link |
 | showHelpLink              | `Boolean`     | `true`  | Defines whether the help link should be shown in the navigation. |
 | showLoginInfo             | `Boolean`     | `true`  | Defines whether the login & user info icon should be shown in the navigation. |
 | userInfoProp              | `Object`      | `{}`    | Optional object conaining user details. If not provided `userInfoProp` is set via XHR call to `/api/account/details` |
 | userInfoUrl               | `String`      | `/api/account/details` | URL to call to retrieve the userInfo (when `userInfoProp` isn't set). |
 | showCountrySelector       | `Boolean`     | `false` | Defines whether the country selector should be shown in the navigation. |
 | showSkipLink              | `Boolean`     | `true`  | Set to false if you need to remove skip-to-main-content link from the header. |
-| shouldUseJetLogo                | `Boolean`     | `false`  | Set to true if you want to show Jet logo in the header. |
-| isCondensed            | `Boolean`     | `false` | Hides Icons, reduces spacing and applies stricter friendly name truncation where appropriate |
+| shouldUseJetLogo          | `Boolean`     | `false` | Set to true if you want to show Jet logo in the header. |
+| isCondensed               | `Boolean`     | `false` | Hides Icons, reduces spacing and applies stricter friendly name truncation where appropriate |
+| globalTrackingContexts    | `Array`       | `[]`    | Array containing the global tracking contexts to be passed through to f-trak. |
 **Important:** if you're adding a new property to show/hide something on the navigation bar, you probably want to check the `hasNavigationLinks` computed property, since you might have to update it.
 
 ### CSS styles

diff --git a/packages/components/organisms/f-header/stories/header.stories.js b/packages/components/organisms/f-header/stories/header.stories.js
@@ -38,7 +38,8 @@ export const HeaderComponent = (args, { argTypes }) => ({
             :key="locale"
             :show-skip-link="showSkipLink"
             :tall-below-mid="tallBelowMid"
-            :should-use-jet-logo="shouldUseJetLogo" />`
+            :should-use-jet-logo="shouldUseJetLogo"
+            :global-tracking-contexts="globalTrackingContexts" />`
 });
 
 HeaderComponent.storyName = 'f-header';
@@ -57,7 +58,8 @@ HeaderComponent.args = {
     logoLinkDisabled: false,
     isCondensed: false,
     tallBelowMid: false,
-    shouldUseJetLogo: false
+    shouldUseJetLogo: false,
+    globalTrackingContexts: []
 };
 
 HeaderComponent.argTypes = {
@@ -142,5 +144,10 @@ HeaderComponent.argTypes = {
 
     tallBelowMid: {
         description: 'Makes the header taller for narrower viewports'
+    },
+
+    globalTrackingContexts: {
+        control: { type: 'object' },
+        description: 'Array containing the global tracking contexts to be passed through to f-trak.'
     }
 };