Merge pull request #720 from GrandSuccess87/#681/feature-Create-Modal…

…-Share-Page-V2

#681/feature create modal share page v2

frontend/components/SocialMediaShareIcon.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="cursor-pointer"
+    style="
+      width: 100%;
+      height: 100%;
+      justify-content: flex-start;
+      align-items: center;
+      gap: 12px;
+      display: inline-flex;
+    "
+  >
+    <div :style="iconStyle">
+      <svg
+        width="32"
+        height="32"
+        viewBox="0 0 16 16"
+        fill="props.fillColor"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path :d="props.iconPath" />
+      </svg>
+    </div>
+    <div :textStyle="props.textStyle">{{ props.text }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+
+const iconStyle = {
+  width: "28px",
+  height: "28px",
+  position: "relative",
+} as const;
+
+const props = defineProps<{
+  iconPath: string;
+  fillColor: string;
+  text: string;
+  textStyle: Object;
+}>();
+</script>

frontend/i18n/check_repeat_i18n_values.py

@@ -6,22 +6,23 @@
 """
 
 
-from collections import Counter
 import json
-from pathlib import Path
 import string
+from collections import Counter
+from pathlib import Path
 
 this_directory = str(Path(__file__).parent.resolve())
 
 with open(f"{this_directory}/en-US.json") as f:
     en_us_json_dict = json.loads(f.read())
 
+
 def lower_and_remove_punctuation(value):
     return value.lower().translate(str.maketrans("", "", string.punctuation))
 
+
 all_json_values = [
-    lower_and_remove_punctuation(value=v)
-    for v in list(en_us_json_dict.values())
+    lower_and_remove_punctuation(value=v) for v in list(en_us_json_dict.values())
 ]
 
 json_repeat_value_counts = {
@@ -33,7 +34,8 @@ def lower_and_remove_punctuation(value):
     i18n_keys = [
         k
         for k, v in en_us_json_dict.items()
-        if repeat_value == lower_and_remove_punctuation(value=v) and k[-len("_lower"):] != "_lower"
+        if repeat_value == lower_and_remove_punctuation(value=v)
+        and k[-len("_lower") :] != "_lower"
     ]
 
     # Needed as we're removing keys that are set to lowercase above.
@@ -55,7 +57,7 @@ def lower_and_remove_punctuation(value):
 
             common_character = False
 
-        if common_prefix := '.'.join(common_prefix.split('.')[:-1]):
+        if common_prefix := ".".join(common_prefix.split(".")[:-1]):
             print(f"Suggested new key: {common_prefix}._global.IDENTIFIER_KEY")
         else:
             print("Suggested new key: _global.IDENTIFIER_KEY")
@@ -75,7 +77,9 @@ def lower_and_remove_punctuation(value):
         value_to_be = "values are"
 
     print("")
-    raise ValueError(f"{len(json_repeat_value_counts)} repeat i18n {value_to_be} present. Please combine given the suggestions above.")
+    raise ValueError(
+        f"{len(json_repeat_value_counts)} repeat i18n {value_to_be} present. Please combine given the suggestions above."
+    )
 
 else:
     print("\nSuccess: no repeat i18n values found.")

frontend/i18n/check_unused_i18n_keys.py

@@ -12,15 +12,24 @@
 
 this_directory = str(Path(__file__).parent.resolve())
 frontend_directory = "/".join(this_directory.split("/")[:-1])
-directories_to_skip = [this_directory, f"{frontend_directory}/.nuxt", f"{frontend_directory}/node_modules"]
+directories_to_skip = [
+    this_directory,
+    f"{frontend_directory}/.nuxt",
+    f"{frontend_directory}/node_modules",
+]
 file_types_to_check = [".vue", ".ts", ".js"]
 
 with open(f"{this_directory}/en-US.json") as f:
     en_us_json_dict = json.loads(f.read())
 
 files_to_check = []
 for root, dirs, files in os.walk(frontend_directory):
-    files_to_check.extend(os.path.join(root, file) for file in files if all(root[:len(d)] != d for d in directories_to_skip) and any(file[-len(t):] == t for t in file_types_to_check))
+    files_to_check.extend(
+        os.path.join(root, file)
+        for file in files
+        if all(root[: len(d)] != d for d in directories_to_skip)
+        and any(file[-len(t) :] == t for t in file_types_to_check)
+    )
 
 all_keys = list(en_us_json_dict.keys())
 used_keys = []
@@ -37,7 +46,9 @@
 if unused_keys := list(set(all_keys) - set(used_keys)):
     to_be = "are" if len(unused_keys) > 1 else "is"
     key_to_be = "keys that are" if len(unused_keys) > 1 else "key that is"
-    raise ValueError(f"There {to_be} {len(unused_keys)} i18n {key_to_be} unused. Please remove or assign the following keys:\n{', '.join(unused_keys)}")
+    raise ValueError(
+        f"There {to_be} {len(unused_keys)} i18n {key_to_be} unused. Please remove or assign the following keys:\n{', '.join(unused_keys)}"
+    )
 
 else:
     print("\nSuccess: all i18n keys are used in the project.")

frontend/i18n/en-US.json

@@ -253,6 +253,7 @@
   "components.modal-qr-code.section-2-list-1-item-2": "Adding them to flyers or cards",
   "components.modal-qr-code.section-2-list-1-item-3": "Sending them with materials for your organization",
   "components.modal-qr-code.subheader-2": "Ideas for OR code use include:",
+  "components.modal-share.header": "Share this page",
   "components.page-breadcrumbs.aria-label": "Page breadcrumb navigation",
   "components.password-strength.invalid": "invalid",
   "components.password-strength.medium": "medium",

frontend/package.json

@@ -54,6 +54,7 @@
     "tailwindcss": "^3.3.2",
     "uuid": "^9.0.1",
     "v-calendar": "^3.1.1",
+    "vue-socials": "^2.0.4",
     "zxcvbn": "^4.4.2"
   }
 }

frontend/pages/events/[id]/about.vue

@@ -27,32 +27,11 @@
           :counter="event.supporters"
           ariaLabel="components.btn-action.support-event-aria-label"
         />
-        <BtnAction
-          class="md:hidden w-fit"
-          :cta="true"
-          fontSize="sm"
-          leftIcon="IconSupport"
-          iconSize="1.25em"
-          :counter="event.supporters"
-          ariaLabel="components.btn-action.support-event-aria-label"
-        />
-        <BtnAction
-          class="hidden md:block w-max"
+        <ModalSharePage
           :cta="true"
           label="components.btn-action.share-event"
-          fontSize="sm"
-          leftIcon="bi:box-arrow-up"
-          iconSize="1.25em"
-          ariaLabel="components.btn-action.share-event-aria-label"
-        />
-        <BtnAction
-          class="md:hidden w-fit"
-          :cta="true"
-          label="components.btn-action.share"
-          fontSize="sm"
-          leftIcon="bi:box-arrow-up"
-          iconSize="1.25em"
           ariaLabel="components.btn-action.share-event-aria-label"
+          :event="event"
         />
       </div>
     </HeaderAppPage>

frontend/pages/organizations/[id]/about.vue

@@ -19,27 +19,11 @@
             components.btn-action.support-organization-aria-label
           "
         />
-        <BtnAction
-          class="hidden md:block w-max"
+        <ModalSharePage
           :cta="true"
           label="components.btn-action.share-organization"
-          fontSize="sm"
-          leftIcon="bi:box-arrow-up"
-          iconSize="1.25em"
-          ariaLabel="
-            components.btn-action.share-organization-aria-label
-          "
-        />
-        <BtnAction
-          class="md:hidden w-max"
-          :cta="true"
-          label="components.btn-action.share"
-          fontSize="sm"
-          leftIcon="bi:box-arrow-up"
-          iconSize="1.25em"
-          ariaLabel="
-            components.btn-action.share-organization-aria-label
-          "
+          ariaLabel="components.btn-action.share-organization-aria-label"
+          :organization="organization"
         />
       </div>
     </HeaderAppPage>

frontend/types/event.d.ts

@@ -7,7 +7,7 @@ export interface Event {
   description: string;
   getInvolvedDescription: string;
   inPersonLocation?: string;
-  onlineLocation?: sting;
+  onlineLocation?: string;
   date: datetime;
   supporters: number;
   imageURL?: string;

frontend/yarn.lock

@@ -9020,6 +9020,11 @@ vue-screen-utils@^1.0.0-beta.13:
   resolved "https://registry.npmjs.org/vue-screen-utils/-/vue-screen-utils-1.0.0-beta.13.tgz"
   integrity sha512-EJ/8TANKhFj+LefDuOvZykwMr3rrLFPLNb++lNBqPOpVigT2ActRg6icH9RFQVm4nHwlHIHSGm5OY/Clar9yIg==
 
+vue-socials@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/vue-socials/-/vue-socials-2.0.4.tgz#fc1e2c0cb0e9cd483b3afc59459de5ef87fa7719"
+  integrity sha512-jmMRklJexBwFOiaoXV30n3FF3HnRgO95ucBKwVUdop6Ux0JT1LYGqOH1sq6WOut6za+o8NfBS+z5yiah6GFFcg==
+
 vue-template-compiler@^2.7.14:
   version "2.7.16"
   resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz"