From 160c55e10085f72d11d1cc775bcdb5347ebf2fbb Mon Sep 17 00:00:00 2001 From: Josiah Ivey Date: Fri, 4 Jun 2021 16:23:39 -0700 Subject: [PATCH 01/15] show soc3e icon inside 2e offering block --- .../src/components/tours/custom/drop-any.tsx | 2 +- tutor/src/components/tours/step.js | 44 +---- tutor/src/components/tutor-tooltip.tsx | 158 ++++++++++++++++++ .../my-courses/dashboard/offering-block.tsx | 7 +- .../sociology-3e-offering-tooltip.tsx | 50 ++++++ tutor/src/tours/drop-any.json | 4 +- 6 files changed, 220 insertions(+), 45 deletions(-) create mode 100644 tutor/src/components/tutor-tooltip.tsx create mode 100644 tutor/src/screens/my-courses/dashboard/sociology-3e-offering-tooltip.tsx diff --git a/tutor/src/components/tours/custom/drop-any.tsx b/tutor/src/components/tours/custom/drop-any.tsx index a8256aa4f3..6f9c02ce87 100644 --- a/tutor/src/components/tours/custom/drop-any.tsx +++ b/tutor/src/components/tours/custom/drop-any.tsx @@ -71,7 +71,7 @@ const DropQuestionRelocated = (props: any) => {
  • Click
    • - + ) } diff --git a/tutor/src/components/tours/step.js b/tutor/src/components/tours/step.js index cb0fa5d0ea..ce138b7fe1 100644 --- a/tutor/src/components/tours/step.js +++ b/tutor/src/components/tours/step.js @@ -5,6 +5,7 @@ import Spotlight from './spotlight'; import Floater from 'react-floater'; import STEPS from './custom'; import { colors } from 'theme'; +import TutorTooltip from '../tutor-tooltip'; @observer export default class TourStep extends React.Component { @@ -14,55 +15,18 @@ export default class TourStep extends React.Component { ride: PropTypes.object.isRequired, } - styles = { - floater: { - maxWidth: '100%', - }, - container: { - padding: 0, - borderRadius: '4px', - }, - options: { - zIndex: 1501, - }, - }; - - classNameStyles = { - green: { - arrow: { - color: colors.secondary, - spread: 16, - length: 10, - }, - }, - greenNoBody: { - arrow: { - color: colors.secondary, - spread: 16, - length: 10, - margin: 20, - }, - container: { - minHeight: 0, - padding: 0, - }, - }, - }; - - render() { - const { step, ride } = this.props; + const { step, ride, header, body } = this.props; const Step = STEPS[step.customComponent || 'Standard']; - const styles = { ...this.styles, ...this.classNameStyles[step.className] }; const tip = ( - } diff --git a/tutor/src/components/tutor-tooltip.tsx b/tutor/src/components/tutor-tooltip.tsx new file mode 100644 index 0000000000..2dc2ac56ee --- /dev/null +++ b/tutor/src/components/tutor-tooltip.tsx @@ -0,0 +1,158 @@ +import { React, styled, css, observer } from 'vendor' +import { Icon } from 'shared' +import { colors } from '../theme' +import Floater from 'react-floater' +import { omit, merge } from 'lodash' + +const StyledFloater = styled((Floater as any))` + background: #f1f1f1; + ${(props: TooltipProps) => props.variant === Variants.green && css` + background: ${colors.secondary}; + `} +`; + +const floaterStyles = { + default: { + floater: { + maxWidth: '100%', + }, + container: { + padding: 0, + borderRadius: '4px', + }, + options: { + zIndex: 1501, + }, + }, + gray: { + arrow: { + color: colors.neutral.std, + spread: 16, + length: 10, + }, + container: { + padding: 0, + borderRadius: '4px', + }, + }, + green: { + arrow: { + color: colors.secondary, + spread: 16, + length: 10, + }, + }, + greenNoBody: { + arrow: { + color: colors.secondary, + spread: 16, + length: 10, + margin: 20, + }, + container: { + minHeight: 0, + padding: 0, + }, + }, +}; + +const StyledContent = styled.div` + .header { + ${(props: TooltipProps) => props.variant === Variants.Green && css` + background: ${colors.secondary}; + `} + ${(props: TooltipProps) => props.variant === Variants.Gray && css` + background: ${colors.neutral.std}; + `} + color: #fff; + padding: 9px 10px; + padding: 10px 20px; + font-size: 1.6rem; + line-height: 2rem; + letter-spacing: -0.64px; + position: relative; + + .close { + position: absolute; + right: 0; + top: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.2); + background-blend-mode: multiply; + min-width: 4rem; + color: #fff; + } + + button { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + svg { + margin: 0; + width: 11px; + color: #fff; + } + } + } + + + .body { + ${(props: TooltipProps) => props.variant === Variants.Gray && css` + background: ${colors.neutral.lighter}; + `} + + font-size: 1.4rem; + line-height: 2rem; + padding: 12px 24px 24px; + padding: 16px 20px 24px + background: #fff; + max-width: 312px; + max-width: 272px; + letter-spacing: -0.4px; + } +` + +enum Variants { + Gray = 'gray', + Green = 'green', +} + +interface TutorTooltipProps { + variant?: Variants + header: string + children: any + open?: boolean + autoOpen?: boolean + onClose?: void +} + +const TutorTooltip = observer((props: TutorTooltipProps) => { + const { header, body, onClose, variant, styles } = props + const customStyles = merge(floaterStyles[variant || 'default'], styles) + const floaterProps = omit(props, ['styles', 'variant', 'header', 'body']) + + const content = ( + +
    + {header} + +
    +
    + {body} +
    +     + ) + return ( + + ) +}) + +export default TutorTooltip diff --git a/tutor/src/screens/my-courses/dashboard/offering-block.tsx b/tutor/src/screens/my-courses/dashboard/offering-block.tsx index 760882e5fd..c2e9e8c2db 100644 --- a/tutor/src/screens/my-courses/dashboard/offering-block.tsx +++ b/tutor/src/screens/my-courses/dashboard/offering-block.tsx @@ -4,12 +4,12 @@ import cn from 'classnames' import { Icon } from 'shared' import UiSettings from 'shared/model/ui-settings' import Tabs from '../../../components/tabs' -import { Course, CoursesMap, CourseInformation, Offering, ID } from '../../../models' +import { Course, CoursesMap, CourseInformation, Offering, currentOfferings, ID } from '../../../models' import CreateACourse from './create-course' import CoursePreview from './preview-course' import ViewCourse from './view-course' import Resource from './resource' - +import Sociology3eOfferingTooltip from './sociology-3e-offering-tooltip' const sortByCourseEndsAt = (courseA: Course, courseB: Course) => { if (courseA.ends_at.isAfter(courseB.ends_at)) { return 1 } @@ -188,9 +188,12 @@ const OfferingBlock: React.FC = ({ offering, courses, swapOf ) + const displaySoc3eTooltip = offering.isSociology2e && currentOfferings.soc3eAvailable + return (
    {editModeIcons} + {displaySoc3eTooltip && }

    {offering.title}

    { + const [showSoc3eTooltip, setShowSoc3eTooltip] = useState(false) + + const body = ( + + A new addition is available - Introduction to Sociology 3e.  + Introduction to Sociology 2e is available only until Summer 2022. + + + ) + + return ( + + setShowSoc3eTooltip(!showSoc3eTooltip)} + > + setShowSoc3eTooltip(!showSoc3eTooltip)} + /> + + + ) +} + +export default Sociology3eOfferingTooltip diff --git a/tutor/src/tours/drop-any.json b/tutor/src/tours/drop-any.json index 9bb8c1fdb6..652ba14a0f 100644 --- a/tutor/src/tours/drop-any.json +++ b/tutor/src/tours/drop-any.json @@ -13,7 +13,7 @@ "anchor_id": "drop-question-relocated-button", "position": "right-start", "spotlight": false, - "className": "green" + "variant": "green" } ] }, @@ -32,7 +32,7 @@ "anchor_id": "drop-question-new", "position": "right-start", "spotlight": false, - "className": "greenNoBody" + "variant": "greenNoBody" } ] }] From e7e327aa138c5826e271ab48db22a3e4d659c207 Mon Sep 17 00:00:00 2001 From: Josiah Ivey Date: Tue, 8 Jun 2021 17:33:25 -0700 Subject: [PATCH 02/15] fix green container padding --- tutor/src/components/tutor-tooltip.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tutor/src/components/tutor-tooltip.tsx b/tutor/src/components/tutor-tooltip.tsx index 2dc2ac56ee..68e03924e3 100644 --- a/tutor/src/components/tutor-tooltip.tsx +++ b/tutor/src/components/tutor-tooltip.tsx @@ -41,6 +41,10 @@ const floaterStyles = { spread: 16, length: 10, }, + container: { + minHeight: 0, + padding: 0, + }, }, greenNoBody: { arrow: { From fc5662dc7e9965c65fec9dca11564bf379f237cd Mon Sep 17 00:00:00 2001 From: Josiah Ivey Date: Tue, 8 Jun 2021 17:35:33 -0700 Subject: [PATCH 03/15] fix some unused code --- tutor/src/components/tours/step.js | 4 +--- tutor/src/components/tutor-tooltip.tsx | 13 +++---------- 2 files changed, 4 insertions(+), 13 deletions(-) diff --git a/tutor/src/components/tours/step.js b/tutor/src/components/tours/step.js index ce138b7fe1..52c933128e 100644 --- a/tutor/src/components/tours/step.js +++ b/tutor/src/components/tours/step.js @@ -2,9 +2,7 @@ import { React, PropTypes, observer, } from 'vendor'; import Spotlight from './spotlight'; -import Floater from 'react-floater'; import STEPS from './custom'; -import { colors } from 'theme'; import TutorTooltip from '../tutor-tooltip'; @observer @@ -16,7 +14,7 @@ export default class TourStep extends React.Component { } render() { - const { step, ride, header, body } = this.props; + const { step, ride } = this.props; const Step = STEPS[step.customComponent || 'Standard']; const tip = ( diff --git a/tutor/src/components/tutor-tooltip.tsx b/tutor/src/components/tutor-tooltip.tsx index 68e03924e3..c6334cdd74 100644 --- a/tutor/src/components/tutor-tooltip.tsx +++ b/tutor/src/components/tutor-tooltip.tsx @@ -4,13 +4,6 @@ import { colors } from '../theme' import Floater from 'react-floater' import { omit, merge } from 'lodash' -const StyledFloater = styled((Floater as any))` - background: #f1f1f1; - ${(props: TooltipProps) => props.variant === Variants.green && css` - background: ${colors.secondary}; - `} -`; - const floaterStyles = { default: { floater: { @@ -62,10 +55,10 @@ const floaterStyles = { const StyledContent = styled.div` .header { - ${(props: TooltipProps) => props.variant === Variants.Green && css` + ${(props: TutorTooltipProps) => props.variant === Variants.Green && css` background: ${colors.secondary}; `} - ${(props: TooltipProps) => props.variant === Variants.Gray && css` + ${(props: TutorTooltipProps) => props.variant === Variants.Gray && css` background: ${colors.neutral.std}; `} color: #fff; @@ -103,7 +96,7 @@ const StyledContent = styled.div` .body { - ${(props: TooltipProps) => props.variant === Variants.Gray && css` + ${(props: TutorTooltipProps) => props.variant === Variants.Gray && css` background: ${colors.neutral.lighter}; `} From 1cb47f633f93e0e454b353e671317f4199846a39 Mon Sep 17 00:00:00 2001 From: Josiah Ivey Date: Wed, 9 Jun 2021 13:45:42 -0700 Subject: [PATCH 04/15] fix some type issues --- tutor/src/components/tutor-tooltip.tsx | 12 +++++++++--- .../dashboard/sociology-3e-offering-tooltip.tsx | 4 ++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/tutor/src/components/tutor-tooltip.tsx b/tutor/src/components/tutor-tooltip.tsx index c6334cdd74..6ab20e6d4f 100644 --- a/tutor/src/components/tutor-tooltip.tsx +++ b/tutor/src/components/tutor-tooltip.tsx @@ -53,7 +53,7 @@ const floaterStyles = { }, }; -const StyledContent = styled.div` +const StyledContent = styled.div` .header { ${(props: TutorTooltipProps) => props.variant === Variants.Green && css` background: ${colors.secondary}; @@ -118,11 +118,16 @@ enum Variants { interface TutorTooltipProps { variant?: Variants - header: string + header?: string + body?: any children: any open?: boolean autoOpen?: boolean - onClose?: void + onClose?(): any + styles?: any + disableFlip?: boolean + placement?: any + offset?: number } const TutorTooltip = observer((props: TutorTooltipProps) => { @@ -153,3 +158,4 @@ const TutorTooltip = observer((props: TutorTooltipProps) => { }) export default TutorTooltip +export { Variants } diff --git a/tutor/src/screens/my-courses/dashboard/sociology-3e-offering-tooltip.tsx b/tutor/src/screens/my-courses/dashboard/sociology-3e-offering-tooltip.tsx index add12e714f..af148a6a0c 100644 --- a/tutor/src/screens/my-courses/dashboard/sociology-3e-offering-tooltip.tsx +++ b/tutor/src/screens/my-courses/dashboard/sociology-3e-offering-tooltip.tsx @@ -1,5 +1,5 @@ import { React, useState, styled } from 'vendor' -import TutorTooltip from '../../../components/tutor-tooltip' +import TutorTooltip, { Variants as TooltipVariants } from '../../../components/tutor-tooltip' import { Icon } from 'shared' const IconWrapper = styled.div` @@ -34,7 +34,7 @@ const Sociology3eOfferingTooltip = () => { open={showSoc3eTooltip} autoOpen={false} disableFlip={true} - variant={'gray'} + variant={TooltipVariants.Gray} offset={0} onClose={() => setShowSoc3eTooltip(!showSoc3eTooltip)} > From 2dc44fad564949d291b186a401b4075b18d60840 Mon Sep 17 00:00:00 2001 From: Josiah Ivey Date: Wed, 9 Jun 2021 13:59:29 -0700 Subject: [PATCH 05/15] update snapshot --- .../components/__snapshots__/tutor-layout.spec.js.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tutor/specs/components/__snapshots__/tutor-layout.spec.js.snap b/tutor/specs/components/__snapshots__/tutor-layout.spec.js.snap index 04b55a3d1a..e6d87e1579 100644 --- a/tutor/specs/components/__snapshots__/tutor-layout.spec.js.snap +++ b/tutor/specs/components/__snapshots__/tutor-layout.spec.js.snap @@ -15,7 +15,7 @@ exports[`Tutor Layout renders and matches snapshot 1`] = ` -
    +