Changed : Issue-2038 - Updated documentation for typos, enabled varia…

…nts (#2054) * Changed : Issue-2038 - Updated documentation for typos, enabled variants * Changed : Issue-2038 - Updated documentation for typos, enabled variants
visual-framework · Jun 25, 2024 · 5b33d1f · 5b33d1f
1 parent 21e16fd
commit 5b33d1f
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 23 deletions.
diff --git a/components/vf-social-links/CHANGELOG.md b/components/vf-social-links/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 0.0.5
+* Fixed the spelling mistakes in documentation [Tracking issue](https://github.com/visual-framework/vf-core/issues/2038)
+* Added variants which are already supported [Tracking issue](https://github.com/visual-framework/vf-core/issues/2038)
+
 ### 0.0.4
 * Updated Twitter icon with X icon
 

diff --git a/components/vf-social-links/README.md b/components/vf-social-links/README.md
@@ -10,8 +10,8 @@ Links to social services.
 
 ### Variants Available
 
-- `vf-social-links--outline` this removes the background and gives a border around each icon square.
-- `dark-mode` if this is insdie a component that has `dark-mode` theeme then the colours swap.
+- `vf-social-links--outline` This removes the background and gives a border around each icon square.
+- `dark-mode` If this is inside a component that has `dark-mode` theme then the colours swap.
 
 ### SVG
 
@@ -39,7 +39,7 @@ You will need to make sure the SVG code below is added somewhere in your HTML (p
 </svg>
 ```
 
-This is in leiu of an icon system for you to pull things in automatically.
+This is in lieu of an icon system for you to pull things in automatically.
 
 ## Install
 

diff --git a/components/vf-social-links/vf-social-links.config.yml b/components/vf-social-links/vf-social-links.config.yml
@@ -6,20 +6,63 @@ status: alpha
 context:
   component-type: block
 
-  heading: Follow us
-  social_accounts:
-    - name: twitter
-      url: JavaScript:Void(0);
-      useUrl: "#vf-social--twitter"
-    - name: facebook
-      url: JavaScript:Void(0);
-      useUrl: "#vf-social--facebook"
-    - name: instagram
-      url: JavaScript:Void(0);
-      useUrl: "#vf-social--instagram"
-    - name: youtube
-      url: JavaScript:Void(0);
-      useUrl: "#vf-social--youtube"
-    - name: linkedin
-      url: JavaScript:Void(0);
-      useUrl: "#vf-social--linkedin"
+variants:
+  - name: default
+    context:
+      heading: Follow us
+      social_accounts:
+        - name: twitter
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--twitter"
+        - name: facebook
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--facebook"
+        - name: instagram
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--instagram"
+        - name: youtube
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--youtube"
+        - name: linkedin
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--linkedin"
+  - name: outline
+    context:
+      variant: outline
+      heading: Follow us
+      social_accounts:
+        - name: twitter
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--twitter"
+        - name: facebook
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--facebook"
+        - name: instagram
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--instagram"
+        - name: youtube
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--youtube"
+        - name: linkedin
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--linkedin"
+  - name: dark mode
+    context:
+      override_class: dark-mode
+      heading: Follow us
+      social_accounts:
+        - name: twitter
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--twitter"
+        - name: facebook
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--facebook"
+        - name: instagram
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--instagram"
+        - name: youtube
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--youtube"
+        - name: linkedin
+          url: JavaScript:Void(0);
+          useUrl: "#vf-social--linkedin"
diff --git a/components/vf-social-links/vf-social-links.njk b/components/vf-social-links/vf-social-links.njk
@@ -1,3 +1,6 @@
+{% if context %}
+  {% set variant = context.variant %}
+{% endif %}
 <svg aria-hidden="true" display="none" class="vf-icon-collection vf-icon-collection--social">
   <defs>
     <g id="vf-social--linkedin">
@@ -18,8 +21,7 @@
   </defs>
 </svg>
 
-
-<div class="vf-social-links">
+<div class="vf-social-links{%- if variant == 'outline' -%} --outline {%- endif -%} {%- if override_class %} | {{override_class}}{% endif -%}">
 
   {%- if heading -%}
   <h3 class="vf-social-links__heading">

diff --git a/components/vf-social-links/vf-social-links.scss b/components/vf-social-links/vf-social-links.scss
@@ -80,7 +80,6 @@
   }
 }
 
-
 [class*='dark-mode'] {
 
   .vf-social-links__heading {
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,7 +80,6 @@ @@
       }
     }
     [class*='dark-mode'] {
       .vf-social-links__heading {
@@ Expand Down @@