added team descriptions to website, adding circular images right now for profile of team leads

Author: jackfogerty

src/components/OurTeam/OurTeam.tsx

@@ -39,6 +39,9 @@ const OurTeam: React.FC = () => (
       provide an effective mentorship experience for all new team members.
     </p>
     <TeamPhoto src={Team} alt="some team photo" />
+    <p>
+      Curious how you can help? Here is a list of our teams, what they do, as well as the team leads.
+    </p>
     <div className="centerDiv">
       <Button
         backgroundColor="yellow"

src/components/PastGeeseTimeline/hooks/geese-images.ts

@@ -54,7 +54,7 @@ const imgs: Image[] = [
     imgFile: goose5,
     name: 'Goose V',
     desc:
-      'Placeholder text'
+      'With Goose V, we continued to refine the wheel-less propulsion methods, by implementing a system to convert constant power into three-phase power to maximize thrust and speed.'
   }
 ];
 

src/components/Sponsor/SponsorPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+ import React from 'react';
 import styled from 'styled-components';
 import Grid from '@material-ui/core/Grid';
 import SponsorComponent from './Sponsor';

src/components/SponsorsLanding/index.ts

@@ -1,2 +1,2 @@
 export * from './SponsorsLanding';
-export { default as Sponsors } from './SponsorsLanding';
+export { default as SponsorsLanding } from './SponsorsLanding';

src/components/TextWithProfileImage/README.md

@@ -0,0 +1,33 @@
+# Text with Image Component ReadMe
+
+## Purpose:
+
+Displays text, along with an circular image beside it. Can be configured to also display a title and a button that redirects the user to a link. Used to display the team leads under the "teams" section.
+
+## How to create:
+
+Pass in **list of JSON data** into the prop parameter _**data**_, with each JSON entry containing the following parameters:
+
+```JSON
+{
+    "title": "The title to display (optional)",
+    "text": "The descriptive text (required)",
+    "link": "Link to redirect user to when they click the 'VIEW MORE' button (optional - button hidden when parameter not provided)"
+}
+```
+### IMPORTANT NOTE:
+
+Because of the way images are stored, **you also have to manually import the images into the parent component using TextWithImage** from the `static/img` folder and pass them into a `string[]` type variable in the same order as the corresponding JSON entries.
+
+
+Additionally, you can change the layout to only display text on the **left** or on the **right** by passing either value into the prop parameter _**textPos**_. By default, this is set to **alternate** the text position between left and right. 
+
+## Notes:
+
+1. Please don't use too many words in the title and description.
+
+2. Responsive design for (mobile) devices under **500px** width.
+
+3. Left and right border padding of the components is assumed to be done by the parent component for the mobile view.
+   
+4. If you have any questions, contact Jeff at [[email protected]]([email protected]) or [[email protected]]([email protected])

src/components/TextWithProfileImage/TextWithProfileImage.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Button } from 'components/Button';
+import 'theme/styles.scss';
+
+export type MyCircularProps = {
+  title?: string;
+  text: string;
+  link?: string;
+  linkText?: string;
+};
+
+interface Props {
+  data: MyCircularProps[];
+  imgData: string[];
+  textPos?: string;
+}
+
+export class TextWithProfileImage extends React.Component<Props> {
+  renderChildren = (data: MyCircularProps[]): React.ReactElement[] => {
+    let isRightLeft = true; // Alternate between right-left and left-right layout.
+    let key = -1;
+    return data.map((entry: MyCircularProps) => {
+      isRightLeft = !isRightLeft;
+      key += 1;
+
+      // Determine if image should be displayed first or after text:
+      let posClass = '';
+      switch (this.props.textPos) {
+        case 'left':
+          posClass = 'left-right-variant';
+          break;
+        case 'right':
+          posClass = 'right-left-variant';
+          break;
+
+        default:
+          // The "alternate" case
+          posClass = isRightLeft ? 'right-left-variant' : 'left-right-variant';
+      }
+
+      return (
+        <div key={key} className={`Block-TextWithImage ${posClass}`}>
+          <div className="TextBlock-TextWithImage">
+            {entry.title !== undefined ? <h3>{entry.title}</h3> : <b></b>}
+            <p>{entry.text}</p>
+            <div className="ButtonBlock-TextWithImage">
+              {this.renderButton(entry.link, entry.linkText)}
+            </div>
+          </div>
+          <img
+            className="Img-TextWithImage"
+            src={this.props.imgData[key]}
+            alt="waterloop"
+          ></img>
+          <div className="text-w-image-btn-mobile">
+            {this.renderButton(entry.link, entry.linkText)}
+          </div>
+        </div>
+      );
+    });
+  };
+
+  renderButton = (
+    link: string | undefined,
+    linkText: string | undefined,
+  ): React.ReactElement => {
+    if (link !== undefined && linkText !== undefined) {
+      return (
+        <Button
+          backgroundColor="yellow"
+          textColor="black"
+          text={linkText}
+          onClick={(): Window | null => window.open(link, '_self')}
+        />
+      );
+    }
+    return <></>;
+  };
+
+  render() {
+    return <div>{this.renderChildren(this.props.data)}</div>;
+  }
+}

src/components/TextWithProfileImage/index.ts

@@ -0,0 +1 @@
+export { TextWithProfileImage} from './TextWithProfileImage'; // This will take all the named exports

src/pages/Flock.tsx

@@ -4,8 +4,8 @@ import Hero from "components/Hero/General";
 import { GooseRoster } from "components/GooseRoster";
 import { SimpleFeatures } from "sections/FeaturedComponent";
 import { PastGeeseTimeline as UnstyledPastGeeseTimeline } from "components/PastGeeseTimeline";
-import Goose1 from "../static/img/goose/Goose.png";
-import Goose2 from "../static/img/goose/Goose1.png";
+import Goose1 from "../static/img/goose/goose6_full.png";
+import Goose2 from "../static/img/goose/goose6_better.png";
 import "../theme/styles.scss";
 
 const PastGeeseTimeline = styled(UnstyledPastGeeseTimeline)``;

src/pages/Home.tsx

@@ -1,20 +1,30 @@
 import React from 'react';
 
 import Hero from 'components/Hero/Landing';
-import { Sponsors } from 'components/SponsorsLanding';
+import { SponsorsLanding } from 'components/SponsorsLanding';
 import { ImgJSON } from 'components/SponsorsLanding';
 import { TextWithImage, MyProps } from 'components/TextWithImage';
 import { ColumnBlock, Props } from 'components/ColumnBlock';
 import Text from 'static/copy/Landing/TextWithImage.json';
 import ColText from 'static/copy/Landing/ColumnBlock.json';
 import '../theme/styles.scss';
+
 // Images for sponsors:
-import Brent from '../static/img/official-sponsors/BrentsWeldingAndFab.png';
+// import Brent from '../static/img/official-sponsors/BrentsWeldingAndFab.png';
 import Weef from '../static/img/official-sponsors/weef.jpg';
 import WaterlooEng from '../static/img/official-sponsors/wes.jpg';
 import UW from '../static/img/official-sponsors/foe.jpg';
-import ClickUp from '../static/img/official-sponsors/ClickUp.png';
-import WCBranham from '../static/img/official-sponsors/WCBranham.png';
+// import ClickUp from '../static/img/official-sponsors/ClickUp.png';
+// import WCBranham from '../static/img/official-sponsors/WCBranham.png';
+import Altium from '../static/img/official-sponsors/altium.png';
+import Ansys from '../static/img/official-sponsors/ansys.png';
+import BILD from '../static/img/official-sponsors/bild.png';
+import Dassault from '../static/img/official-sponsors/Dassault-Systems.png';
+import Hakko from '../static/img/official-sponsors/hakko.png';
+import Keysight from '../static/img/official-sponsors/keysight.jpg';
+import Mitutoyo from '../static/img/official-sponsors/mitutoyo_logo.png';
+import SKF from '../static/img/official-sponsors/SKF-Logo.png';
+import Stantec from '../static/img/official-sponsors/Stantec.png';
 
 import Goals from '../static/img/landing/textwithimage/goals.png';
 import Competition from '../static/img/landing/textwithimage/competition.png';
@@ -25,12 +35,18 @@ const ColData: Props[] = ColText;
 
 // Place data here:
 const imgJSON: ImgJSON[] = [
-  { imgSrc: Brent, imgAlt: 'Brent' },
   { imgSrc: Weef, imgAlt: 'Weef' },
   { imgSrc: WaterlooEng, imgAlt: 'WaterlooEng' },
   { imgSrc: UW, imgAlt: 'UW' },
-  { imgSrc: ClickUp, imgAlt: 'ClickUp' },
-  { imgSrc: WCBranham, imgAlt: 'WCBranham' },
+  { imgSrc: Ansys, imgAlt: 'Ansys' },
+  { imgSrc: BILD, imgAlt: 'BILD' },
+  { imgSrc: Dassault, imgAlt: 'Dassault' },
+  { imgSrc: Hakko, imgAlt: 'Hakko' },
+  { imgSrc: Keysight, imgAlt: 'Keysight' },
+  { imgSrc: Mitutoyo, imgAlt: 'Mitutoyo' },
+  { imgSrc: SKF, imgAlt: 'SKF' },
+  { imgSrc: Stantec, imgAlt: 'Stantec' },
+  { imgSrc: Altium, imgAlt: 'Altium' },
 ];
 
 const Home: React.FC = () => (
@@ -49,7 +65,7 @@ const Home: React.FC = () => (
     <ColumnBlock data={ColData} imgData={imgData} />
     <div className="pageContainer">
       <div className="break"></div>
-      <Sponsors data={imgJSON} />
+      <SponsorsLanding data={imgJSON} />
     </div>
   </div>
 );

src/pages/Sponsors.tsx

@@ -1,14 +1,47 @@
 import React from "react";
 import Hero from "components/Hero/General";
-import SponsorList from "components/Sponsor/SponsorPage";
+//import SponsorList from "components/Sponsor/SponsorPage";
+import { SponsorsLanding } from 'components/SponsorsLanding';
 import { TextWithImage } from "components/TextWithImage";
 import { MyProps } from "components/TextWithImage";
 import Text from "static/copy/Sponsors/Sponsors.json";
 import SponsorsImg from "../static/img/team/sponsors.png";
 import "../theme/styles.scss";
+import { ImgJSON } from 'components/SponsorsLanding';
+//import ColText from 'static/copy/Landing/ColumnBlock.json';
+
+// Images for sponsors:
+import Weef from '../static/img/official-sponsors/weef.jpg';
+import WaterlooEng from '../static/img/official-sponsors/wes.jpg';
+import UW from '../static/img/official-sponsors/foe.jpg';
+import Altium from '../static/img/official-sponsors/altium.png';
+import Ansys from '../static/img/official-sponsors/ansys.png';
+import BILD from '../static/img/official-sponsors/bild.png';
+import Dassault from '../static/img/official-sponsors/Dassault-Systems.png';
+import Hakko from '../static/img/official-sponsors/hakko.png';
+import Keysight from '../static/img/official-sponsors/keysight.jpg';
+import Mitutoyo from '../static/img/official-sponsors/mitutoyo_logo.png';
+import SKF from '../static/img/official-sponsors/SKF-Logo.png';
+import Stantec from '../static/img/official-sponsors/Stantec.png';
 
 const castData: MyProps[] = Text;
 const imgData: string[] = [SponsorsImg];
+//const ColData: Props[] = ColText;
+
+const imgJSON: ImgJSON[] = [
+  { imgSrc: Weef, imgAlt: 'Weef' },
+  { imgSrc: WaterlooEng, imgAlt: 'WaterlooEng' },
+  { imgSrc: UW, imgAlt: 'UW' },
+  { imgSrc: Ansys, imgAlt: 'Ansys' },
+  { imgSrc: BILD, imgAlt: 'BILD' },
+  { imgSrc: Dassault, imgAlt: 'Dassault' },
+  { imgSrc: Hakko, imgAlt: 'Hakko' },
+  { imgSrc: Keysight, imgAlt: 'Keysight' },
+  { imgSrc: Mitutoyo, imgAlt: 'Mitutoyo' },
+  { imgSrc: SKF, imgAlt: 'SKF' },
+  { imgSrc: Stantec, imgAlt: 'Stantec' },
+  { imgSrc: Altium, imgAlt: 'Altium' },
+];
 
 const Sponsors: React.FC = () => (
   <div>
@@ -25,7 +58,15 @@ const Sponsors: React.FC = () => (
         imgData={imgData}
       ></TextWithImage>
       <div className="break"></div>
-      <SponsorList />
+      
+      {//<ColumnBlock data={ColData} imgData={imgData} />
+      }
+      <div className="pageContainer">
+        <div className="break"></div>
+        <SponsorsLanding data={imgJSON} />
+    </div>
+      {//<SponsorList />
+      }
     </div>
   </div>
 );