From 7965791bdfea26364f5a2e5e945a62c88d094fbd Mon Sep 17 00:00:00 2001 From: kccrtv <67879386+kccrtv@users.noreply.github.com> Date: Fri, 29 Nov 2024 16:39:30 -0700 Subject: [PATCH] Share your story refresh (#3836) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Description and Motivation continues with news page refresh. condenses the submission guidelines and adds numbering for easy reference. changed the button to secondary, and included buttons both at the top and bottom of the page. ## Has this been tested? How? tests passing ## Screenshots (if appropriate) ![mobile](https://github.com/user-attachments/assets/423a6927-89a7-4c4a-a3cb-3edcf36dbf6b) ![desktop](https://github.com/user-attachments/assets/3f8ce754-23c3-49cf-b3c7-5787818e39fd) ## Types of changes - New content or feature - Refactor / chore ## New frontend preview link is below in the Netlify comment 😎 --- frontend/src/pages/News/CardLeftNumber.tsx | 37 +++ .../src/pages/News/NewsAndStoriesPage.tsx | 3 +- frontend/src/pages/News/ShareYourStory.tsx | 212 +++++++----------- .../src/pages/News/ShareYourStoryContent.tsx | 130 +++++++++++ .../HetComponents/HetButtonSecondary.tsx | 69 ++++-- 5 files changed, 299 insertions(+), 152 deletions(-) create mode 100644 frontend/src/pages/News/CardLeftNumber.tsx create mode 100644 frontend/src/pages/News/ShareYourStoryContent.tsx diff --git a/frontend/src/pages/News/CardLeftNumber.tsx b/frontend/src/pages/News/CardLeftNumber.tsx new file mode 100644 index 0000000000..c2bb134108 --- /dev/null +++ b/frontend/src/pages/News/CardLeftNumber.tsx @@ -0,0 +1,37 @@ +import type React from 'react' + +interface CardLeftNumberProps { + title: string + description: React.ReactNode + number?: string + spanColor?: string +} + +const CardLeftNumber: React.FC = ({ + title, + description, + number, + spanColor, +}) => { + return ( +
  • +
    + + {number} + +
    +
    +
    +

    {title}

    +

    + {description} +

    +
    +
    +
    • + ) +} + +export default CardLeftNumber diff --git a/frontend/src/pages/News/NewsAndStoriesPage.tsx b/frontend/src/pages/News/NewsAndStoriesPage.tsx index 7a71977c14..2ca879dc20 100644 --- a/frontend/src/pages/News/NewsAndStoriesPage.tsx +++ b/frontend/src/pages/News/NewsAndStoriesPage.tsx @@ -118,8 +118,9 @@ export default function NewsAndStoriesPage() { > News and Stories +

    News and Stories

    -

    +

    We believe in the power of storytelling. The Health Equity Tracker is designed to enable transformative change through data, but we know that is only part of the picture. Here, you will find news and diff --git a/frontend/src/pages/News/ShareYourStory.tsx b/frontend/src/pages/News/ShareYourStory.tsx index 1eb7a20b80..9550f2ee82 100644 --- a/frontend/src/pages/News/ShareYourStory.tsx +++ b/frontend/src/pages/News/ShareYourStory.tsx @@ -1,138 +1,94 @@ -import HetCTABig from '../../styles/HetComponents/HetCTABig' +import { Helmet } from 'react-helmet-async' +import { submissionGuidelines } from './ShareYourStoryContent' +import { useIsBreakpointAndUp } from '../../utils/hooks/useIsBreakpointAndUp' +import CardLeftNumber from './CardLeftNumber' +import HetButtonSecondary from '../../styles/HetComponents/HetButtonSecondary' export default function ShareYourStory() { + const isMdAndUp = useIsBreakpointAndUp('md') return ( -

    -
    -
    -

    - Call for Community Writers -

    -

    - Share Your Story and Amplify Your Voice -

    -
    - -

    - We believe that everyone's voice matters when it comes to health - equity and ending the HIV epidemic. We invite community members, - advocates, and individuals directly affected by HIV to share their - personal stories, insights, and experiences on our ‘New and Stories’ - page. By contributing, you can help raise awareness, foster - understanding, and inspire positive change in underserved communities. - To ensure the quality and credibility of the content, we kindly ask - you to follow the guidelines outlined below. -

    - -
    -
    -

    - Submission guidelines -

    -
    -
    - -
      -
    • - Purpose of News and Stories: Our articles focus on health - equity and large-scale public health efforts such as ending the HIV - epidemic. Please align your story with these topics, addressing - issues related to health disparities, social determinants of health, - barriers to access and care, and the impact on underserved - communities. -
      • - -
    • - Personal Stories: We value personal narratives that - authentically express a unique perspective and resonate with - readers. Share your own experiences related to HIV, health equity, - or any related aspect you feel is relevant. -
      • - -
    • - Accuracy and Validity: We encourage you to include - evidenced-based information in your story whenever possible. If you - mention statistics, studies, or any specific data, please provide - credible references. Use reputable sources such as scientific - journals, government reports, or recognized health organizations to - support your claims. -
      • - -
    • - Respectful and Inclusive Language: Maintain a respectful and - inclusive tone throughout your writing. Avoid offensive language, - stereotypes, or stigmatizing attitudes. Our goal is to foster a safe - and supportive environment for readers from diverse backgrounds. -
      • + <> + + Share Your Story - Health Equity Tracker + -
    • - Formatting and Length: Structure your story with an - introduction, body, and conclusion. Aim for a length of under 2000 - words to maintain readability and engagement. Feel free to include - headings, subheadings, or bullet points to enhance clarity and - organization. -
      • - -
    • - Plagiarism and Copyright: Ensure that your story is original - and not published elsewhere. Plagiarism or copyright infringement - will not be tolerated. If you include any external sources, provide - proper citations and give credit to the original authors. -
      • - -
    • - Submitting Your Story: To contribute, please send your story - as a Word document or Google Doc to{' '} - - info@healthequitytracker.org - - . Include a brief bio (2-3 sentences) introducing yourself and any - relevant affiliations or experiences you would like to share. -
      • - -
    • - Editorial Process: All submissions will go through an - editorial process to ensure clarity, grammar, and adherence to the - guidelines. You may be requested to revise your story based on - feedback from our editorial team. We will notify you if your story - is selected for publication. -
      • +
      +

      + Share Your Story +

      +
      +

      + We believe that everyone's voice matters when it comes to health + equity and ending the HIV epidemic. We invite community members, + advocates, and individuals directly affected by HIV to share their + personal stories, insights, and experiences on our ‘News and + Stories’ page. By contributing, you can help raise awareness, foster + understanding, and inspire positive change in underserved + communities. To ensure the quality and credibility of the content, + we kindly ask you to follow the guidelines outlined below. +

      + + Share your story + -
    • - Anonymity and Privacy: If you prefer to remain anonymous or - use a pseudonym, please let us know in your submission email. We - respect your privacy and will handle your personal information with - utmost confidentiality. -
      • +
      +
      +

      + Submission guidelines +

      +
      +
      -
    • - Publication and Promotion: While we cannot guarantee that all - submissions will be published, we appreciate your contribution and - will notify you if your story is selected. Published stories will be - promoted on our website and various social media platforms, - amplifying their reach and impact. -
      • -
    + {/* Updated to use
  • as direct child of
      */} +
        + {submissionGuidelines.map((submissionGuideline, index) => { + const isMobileShadow = !isMdAndUp && index % 2 === 0 + const isDesktopShadow = + isMdAndUp && + ((Math.floor(index / 2) % 2 === 0 && index % 2 === 0) || + (Math.floor(index / 2) % 2 !== 0 && index % 2 !== 0)) -
        -
        -
        + return ( +
      • + +
        • + ) + })} +
      -

      - Thank you for considering sharing your story with us. Your voice can - make a difference in advancing health equity for all people. We look - forward to hearing from you and appreciate your support in creating a - more inclusive and informed community. -

      -
      - - Share your story - -
      -
    • -
    +

    + Thank you for considering sharing your story with us. Your voice can + make a difference in advancing health equity for all people. We look + forward to hearing from you and appreciate your support in creating + a more inclusive and informed community. +

    + + Share Your Story + +
    + + ) } diff --git a/frontend/src/pages/News/ShareYourStoryContent.tsx b/frontend/src/pages/News/ShareYourStoryContent.tsx new file mode 100644 index 0000000000..6346219903 --- /dev/null +++ b/frontend/src/pages/News/ShareYourStoryContent.tsx @@ -0,0 +1,130 @@ +import { + EditRounded, + AssignmentLateRounded, + PeopleAltRounded, + FormatListBulletedRounded, + BlockRounded, + PublishRounded, + PrivacyTipRounded, + CampaignRounded, +} from '@mui/icons-material' + +export const submissionGuidelines = [ + { + icon: , + title: 'Purpose of News and Stories', + number: '1', + description: ( + <> + Our articles center on health equity and large-scale public health + efforts such as ending the HIV epidemic. Address issues related to + health disparities, social determinants of health, and underserved + communities. + + ), + }, + { + icon: , + title: 'Personal Stories', + number: '2', + description: ( + <> + We value personal narratives that resonate with readers. Share your own + experiences related to HIV, health equity, or any related topic. + + ), + }, + { + icon: , + title: 'Accuracy and Validity', + number: '3', + description: ( + <> + Include evidence-based information and proper citations for statistics, + studies, or data to enhance the credibility of your story. + + ), + }, + { + icon: , + title: 'Respectful and Inclusive Language', + number: '4', + description: ( + <> + Use language that is respectful and inclusive, avoiding stereotypes or + stigmatizing attitudes. Our goal is to create a supportive environment + for readers. + + ), + }, + { + icon: , + title: 'Formatting and Length', + number: '5', + description: ( + <> + Structure your story with an introduction, body, and conclusion. Use + headings or bullet points for clarity, and keep the length manageable. + + ), + }, + { + icon: , + title: 'Plagiarism and Copyright', + number: '6', + description: ( + <> + Your story must be original and unpublished. Provide proper citations + for any external sources to avoid copyright issues. + + ), + }, + + { + icon: , + title: 'Editorial Process', + number: '7', + description: ( + <> + Your story will be reviewed and may require revisions. We will notify + you if it is selected for publication. + + ), + }, + { + icon: , + title: 'Anonymity and Privacy', + number: '8', + description: ( + <> + Inform us if you want to remain anonymous or use a pseudonym. Your + personal information will be handled confidentially. + + ), + }, + { + icon: , + title: 'Publication and Promotion', + number: '9', + description: ( + <> + Published stories will be promoted across our website and social media + platforms. We will notify you if your story is selected. + + ), + }, + { + icon: , + title: 'Submitting Your Story', + number: '10', + description: ( + <> + Submit your story to{' '} + + info@healthequitytracker.org + {' '} + with a short bio about yourself and relevant affiliations. + + ), + }, +] diff --git a/frontend/src/styles/HetComponents/HetButtonSecondary.tsx b/frontend/src/styles/HetComponents/HetButtonSecondary.tsx index bf236ba041..c2592fa2a8 100644 --- a/frontend/src/styles/HetComponents/HetButtonSecondary.tsx +++ b/frontend/src/styles/HetComponents/HetButtonSecondary.tsx @@ -1,41 +1,64 @@ import { Button } from '@mui/material' -import { useNavigate } from 'react-router-dom' +import type { ReactNode } from 'react' +import { Link as RouterLink } from 'react-router-dom' interface HetButtonSecondaryProps { - text: string - href: string - onClick?: (event: React.MouseEvent) => void + children: ReactNode + href?: string + onClick?: () => void + buttonClassName?: string ariaLabel?: string - className?: string + underline?: boolean } -export default function HetButtonSecondary({ - text, - href, - ariaLabel, - className, - onClick, -}: HetButtonSecondaryProps) { - const navigate = useNavigate() +const isExternalLink = (href?: string): boolean => { + return ( + !!href && + (href.startsWith('http://') || + href.startsWith('https://') || + href.startsWith('mailto:')) + ) +} - const handleClick = ( - event: React.MouseEvent, - ) => { - if (onClick) { - onClick(event) - } - navigate(href) +const getComponentType = (href?: string): React.ElementType => { + if (isExternalLink(href)) { + return 'a' } + if (href) { + return RouterLink + } + return 'button' +} + +const getLinkProps = (href?: string): Record => { + if (isExternalLink(href)) { + return { href } + } + if (href) { + return { to: href } + } + return {} +} + +export default function HetButtonSecondary(props: HetButtonSecondaryProps) { + const { children, href, onClick, buttonClassName, ariaLabel } = props + + const ComponentProp = getComponentType(href) + const linkProps = getLinkProps(href) return ( )