Merge pull request #26592 from code-dot-org/dedup-resource-card

Dedup HAML/React - Regional Partner Playbook

apps/Gruntfile.js

@@ -560,6 +560,7 @@ describe('entry tests', () => {
     'census_reviewers/review_reported_inaccuracies': './src/sites/studio/pages/census_reviewers/review_reported_inaccuracies.js',
 
     'code.org/public/yourschool': './src/sites/code.org/pages/public/yourschool.js',
+    'code.org/public/educate/regional-partner/playbook': './src/sites/code.org/pages/public/educate/regional-partner/playbook.js',
     'hourofcode.com/public/index': './src/sites/hourofcode.com/pages/public/index.js',
     'regionalPartnerSearch': './src/regionalPartnerSearch/regionalPartnerSearch',
 

apps/src/sites/code.org/pages/public/educate/regional-partner/RegionalPartnerPlaybook.jsx

@@ -0,0 +1,144 @@
+import React, { Component } from 'react';
+
+import ResourceCard from '@cdo/apps/templates/studioHomepages/ResourceCard';
+import ResourceCardResponsiveContainer from '@cdo/apps/templates/studioHomepages/ResourceCardResponsiveContainer';
+
+const CARDS = [
+  {
+    title: 'Administrator and Counselor PD',
+    description:
+      '* How-To Guide <br> * Set Your Agenda<br> * Logistics (Venue, Catering)<br> * Supplies & Resources',
+    link: '/educate/regional-partner/playbook/administrator',
+  },
+
+  {
+    title: 'Advocacy',
+    description:
+      'Links to resources and websites to help you advocate for K-12 computer science policy in your state',
+    link: '/educate/regional-partner/playbook/advocacy',
+  },
+
+  {
+    title: 'Communications and Branding',
+    description:
+      '* Weekly Update Email Archive<br> * Code.org Comms to Teachers<br> * Workshop & Email Comms.<br> * Branding Guidelines',
+    link: '/educate/regional-partner/playbook/communications',
+  },
+
+  {
+    title: 'Community Building',
+    description:
+      '* Resources & Ideas<br> * Community Events for Teachers<br> * CS Fair for Students',
+    link: '/educate/regional-partner/playbook/community',
+  },
+
+  {
+    title: 'Data',
+    description: '* Resources & Ideas<br> * How to use the data dashboard',
+    link: '/educate/regional-partner/playbook/data',
+  },
+
+  {
+    title: 'Facilitator Support',
+    description:
+      '* 1-Pager & Contract Exemplars <br> * Facilitator Recruitment Resources <br> * Facilitator Support Resources <br>  * Facilitator Payments',
+    link: '/educate/regional-partner/playbook/facilitator-support',
+  },
+
+  {
+    title: 'Fundraising Resources',
+    description: '* Organization Sustainability <br> * Fundraising Playbook',
+    link: '/educate/regional-partner/playbook/funding',
+  },
+
+  {
+    title: 'Ordering Supplies',
+    description:
+      '* Accessing Mimeo <br> * How to Order Supplies <br> * Printable Certificates <br> * Admin/Counselor Supplies ',
+    link: '/educate/regional-partner/playbook/ordering-supplies',
+  },
+
+  {
+    title: 'Regional Partner Network',
+    description:
+      'Access the Regional Partner Directory and learn more about the Advisory Committee',
+    link: '/educate/regional-partner/playbook/directory',
+  },
+
+  {
+    title: 'Payment Information',
+    description:
+      'Everything you need to know about how your organization will be compensated',
+    link: '/educate/regional-partner/playbook/payments',
+  },
+
+  {
+    title: 'Reporting and Evaluations',
+    description:
+      '* Annual Report Requirements<br> * Post Workshop Feedback Form<br> * Regional Partner Annual Planning',
+    link: '/educate/regional-partner/playbook/reporting-and-evaluations',
+  },
+
+  {
+    title: 'Teacher & District Recruitment',
+    description:
+      '* How to recruit teachers and districts<br/> * Teacher applications',
+    link: '/educate/regional-partner/playbook/teacher-recruitment',
+  },
+
+  {
+    title: 'Teachers & Curriculum',
+    description:
+      '* Info for Teacher Support<br> * Links to Online Curriculum <br> * Curriculum 1-pagers <br>',
+    link: '/educate/regional-partner/playbook/curriculum',
+  },
+
+  {
+    title: 'Timeline',
+    description:
+      'Visit this page for guidance on what to focus on and events being held each month',
+    link: '/educate/regional-partner/playbook/timeline',
+  },
+
+  {
+    title: 'Training Materials',
+    description: 'Virtual trainings and past Regional Partner Summit resources',
+    link: '/educate/regional-partner/playbook/training-materials',
+  },
+
+  {
+    title: 'Workshops & Professional Learning',
+    description: 'Everything you need to know to plan your workshops',
+    link: '/educate/regional-partner/playbook/workshops-pl',
+  },
+
+  {
+    title: 'FAQ',
+    description: "Can't find what you're looking for? Check the FAQ",
+    link: '/educate/regional-partner/playbook/faq',
+  },
+
+  {
+    title: 'Legacy',
+    description:
+      "See information about Code.org's Legacy programs: ECS, CS in Algebra, CS in Science",
+    link: '/educate/regional-partner/playbook/legacy',
+  },
+];
+
+export default class RegionalPartnerPlaybook extends Component {
+  render() {
+    return (
+      <ResourceCardResponsiveContainer>
+        {CARDS.map((card) => (
+          <ResourceCard
+            {...card}
+            buttonText="Learn More"
+            allowWrap={true}
+            allowDangerouslySetInnerHtml={true}
+          />
+        ))}
+      </ResourceCardResponsiveContainer>
+    );
+  }
+}

apps/src/sites/code.org/pages/public/educate/regional-partner/playbook.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {Provider} from 'react-redux';
+import RegionalPartnerPlaybook from './RegionalPartnerPlaybook';
+import {getStore, registerReducers} from '@cdo/apps/redux';
+import isRtl from '@cdo/apps/code-studio/isRtlRedux';
+import responsive from '@cdo/apps/code-studio/responsiveRedux';
+import initResponsive from '@cdo/apps/code-studio/responsive';
+
+registerReducers({isRtl, responsive});
+
+document.addEventListener("DOMContentLoaded", () => {
+  initResponsive();
+
+  const container = document.getElementById('regional-partner-playbook');
+  ReactDOM.render(
+    <Provider store={getStore()}>
+      <RegionalPartnerPlaybook />
+    </Provider>,
+    container,
+  );
+});

apps/src/templates/studioHomepages/ResourceCard.jsx

@@ -1,19 +1,19 @@
 import React, {Component, PropTypes} from 'react';
 import Radium from 'radium';
 import Button from '../Button';
-import color from "../../util/color";
-import { connect } from 'react-redux';
+import color from '../../util/color';
+import {connect} from 'react-redux';
 
 // If you want to include an image, you're probably looking for a ImageResourceCard.
 
 const styles = {
   card: {
     height: 250,
     width: 310,
-    background: color.teal
+    background: color.teal,
   },
   cardAllowWrap: {
-    position: 'relative'
+    position: 'relative',
   },
   text: {
     paddingLeft: 20,
@@ -25,24 +25,23 @@ const styles = {
     paddingTop: 20,
     paddingBottom: 15,
     fontSize: 27,
-    width: 260,
     display: 'inline',
   },
   titleNoWrap: {
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
-    overflow: 'hidden'
+    overflow: 'hidden',
   },
   titleAllowWrap: {
-    lineHeight: '1.1'
+    lineHeight: '1.1',
   },
   description: {
     fontFamily: '"Gotham 4r", sans-serif',
     fontSize: 14,
-    lineHeight: "21px",
+    lineHeight: '21px',
     height: 140,
     marginBottom: 5,
-    overflowY: 'auto'
+    overflowY: 'auto',
   },
   button: {
     marginLeft: 20,
@@ -69,13 +68,23 @@ class ResourceCard extends Component {
     link: PropTypes.string.isRequired,
     isRtl: PropTypes.bool.isRequired,
     allowWrap: PropTypes.bool,
+    allowDangerouslySetInnerHtml: PropTypes.bool,
     linkId: PropTypes.string,
-    linkClass: PropTypes.string
+    linkClass: PropTypes.string,
   };
 
   render() {
-
-    const { title, description, buttonText, link, isRtl, allowWrap, linkId, linkClass} = this.props;
+    const {
+      title,
+      description,
+      buttonText,
+      link,
+      isRtl,
+      allowWrap,
+      allowDangerouslySetInnerHtml,
+      linkId,
+      linkClass,
+    } = this.props;
     const localeStyle = isRtl ? styles.rtl : styles.ltr;
     let buttonStyles = [styles.button];
     let cardStyles = [styles.card, localeStyle];
@@ -90,15 +99,23 @@ class ResourceCard extends Component {
       titleStyles.push(styles.titleNoWrap);
     }
 
+    let descriptionContainer;
+    if (allowDangerouslySetInnerHtml) {
+      descriptionContainer = (
+        <div
+          style={descriptionStyles}
+          dangerouslySetInnerHTML={{__html: description}} // eslint-disable-line react/no-danger
+        />
+      );
+    } else {
+      descriptionContainer = <div style={descriptionStyles}>{description}</div>;
+    }
+
     return (
       <div style={cardStyles}>
-        <div style={titleStyles}>
-          {title}
-        </div>
-        <div style={descriptionStyles}>
-          {description}
-        </div>
-        <br/>
+        <div style={titleStyles}>{title}</div>
+        {descriptionContainer}
+        <br />
         <Button
           id={linkId}
           className={linkClass}

pegasus/sites.v3/code.org/public/educate/regional-partner/playbook.haml

@@ -0,0 +1,10 @@
+---
+title: Regional Partner Virtual Playbook
+theme: responsive
+---
+
+%meta{name: 'robots', content: 'noindex'}
+
+%script{src: minifiable_asset_path('js/code.org/public/educate/regional-partner/playbook.js')}
+
+#regional-partner-playbook