<commit_before>import PropTypes from "prop-types";
import React, { useState } from "react";
import { animated, useSpring } from "@react-spring/web";
import { usePrevious } from "react-use";
import styled from "styled-components";

import { useLocalStorage, useMeasure } from "@agir/lib/utils/hooks";

import Button from "@agir/front/genericComponents/Button";
import { RawFeatherIcon } from "@agir/front/genericComponents/FeatherIcon";

const StyledHeader = styled.header`
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  outline: none;
  cursor: ${({ as }) => (as === "button" ? "pointer" : "default")};
  width: 100%;
  height: 3.5rem;
  padding: 0;
  margin: 0;

  span {
    transform-origin: "center center";
    line-height: 0;
  }
`;

const StyledBody = styled(animated.ul)`
  list-style: none;
  padding: 0;
  margin: 0;

  & > li {
    display: flex;
    align-items: flex-start;
    padding-bottom: 0.5rem;

    strong {
      font-weight: 600;
    }

    & > * {
      flex: 1 1 auto;
      font-size: 0.875rem;
      line-height: 1.5;

      :first-child {
        flex: 0 0 auto;
        margin-right: 1rem;
        color: ${(props) => props.theme.primary500};
      }
    }
  }
`;
const StyledFooter = styled(animated.footer)`
  padding: 0.5rem 0 1rem;

  ${Button} {
    margin-left: 2.5rem;

    @media (max-width: ${(props) => props.theme.collapse}px) {
      width: 100%;
      margin-left: 0;
    }
  }
`;
const StyledCard = styled(animated.div)`
  padding: 0 1rem;
  box-shadow: ${(props) => props.theme.cardShadow};
  border-radius: ${(props) => props.theme.borderRadius};
  overflow: hidden;
`;

export const HowTo = (props) => {
  const { isInitiallyCollapsed, onClose } = props;
  const [isCollapsed, setIsCollapsed] = useState(isInitiallyCollapsed);
  const wasCollapsed = usePrevious(isCollapsed);

  const open = () => setIsCollapsed(false);
  const close = () => {
    onClose();
    setIsCollapsed(true);
  };

  const [bind, { height: viewHeight }] = useMeasure();

  const { height, opacity, transform } = useSpring({
    height: isCollapsed ? 56 : viewHeight,
    opacity: isCollapsed ? 0.33 : 1,
    transform: isCollapsed ? "rotate(0deg)" : "rotate(180deg)",
    config: {
      mass: 1,
      tension: 270,
      friction: !isCollapsed ? 26 : 36,
      clamp: true,
    },
  });

  return (
    <StyledCard
      style={{
        // Prevent animation if initially opened
        height: !isCollapsed && wasCollapsed === isCollapsed ? "auto" : height,
      }}
    >
      <div {...bind}>
        <StyledHeader
          type="button"
          as={isCollapsed ? "button" : undefined}
          onClick={isCollapsed ? open : undefined}
        >
          <strong>Comment ça marche</strong>
          <animated.span style={{ transform }}>
            <RawFeatherIcon name="chevron-down" />
          </animated.span>
        </StyledHeader>
        <StyledBody style={{ opacity }}>
          <li>
            <RawFeatherIcon strokeWidth={2} name="check-square" />
            <span>
              <strong>Faites signer de nouveaux soutiens</strong> à la
              candidature de <NAME> pour 2022
            </span>
          </li>
          <li>
            <RawFeatherIcon strokeWidth={2} name="rss" />
            <span>
              <strong><commit_msg>fix: create contact page HowTo opening/closing<commit_after>import PropTypes from "prop-types";
import React, { useState } from "react";
import { animated, useSpring } from "@react-spring/web";
import { usePrevious } from "react-use";
import styled from "styled-components";

import { useLocalStorage, useMeasure } from "@agir/lib/utils/hooks";

import Button from "@agir/front/genericComponents/Button";
import { RawFeatherIcon } from "@agir/front/genericComponents/FeatherIcon";

const StyledHeader = styled.header`
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  outline: none;
  cursor: ${({ as }) => (as === "button" ? "pointer" : "default")};
  width: 100%;
  height: 3.5rem;
  padding: 0;
  margin: 0;

  button {
    transform-origin: "center center";
    line-height: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
  }
`;

const StyledBody = styled(animated.ul)`
  list-style: none;
  padding: 0;
  margin: 0;

  & > li {
    display: flex;
    align-items: flex-start;
    padding-bottom: 0.5rem;

    strong {
      font-weight: 600;
    }

    & > * {
      flex: 1 1 auto;
      font-size: 0.875rem;
      line-height: 1.5;

      :first-child {
        flex: 0 0 auto;
        margin-right: 1rem;
        color: ${(props) => props.theme.primary500};
      }
    }
  }
`;
const StyledFooter = styled(animated.footer)`
  padding: 0.5rem 0 1rem;

  ${Button} {
    margin-left: 2.5rem;

    @media (max-width: ${(props) => props.theme.collapse}px) {
      width: 100%;
      margin-left: 0;
    }
  }
`;
const StyledCard = styled(animated.div)`
  padding: 0 1rem;
  box-shadow: ${(props) => props.theme.cardShadow};
  border-radius: ${(props) => props.theme.borderRadius};
  overflow: hidden;
`;

export const HowTo = (props) => {
  const { isInitiallyCollapsed, onClose } = props;
  const [isCollapsed, setIsCollapsed] = useState(isInitiallyCollapsed);
  const wasCollapsed = usePrevious(isCollapsed);

  const open = () => setIsCollapsed(false);
  const close = () => {
    onClose();
    setIsCollapsed(true);
  };

  const [bind, { height: viewHeight }] = useMeasure();

  const { height, opacity, transform } = useSpring({
    height: isCollapsed ? 56 : viewHeight,
    opacity: isCollapsed ? 0.33 : 1,
    transform: isCollapsed ? "rotate(0deg)" : "rotate(180deg)",
    config: {
      mass: 1,
      tension: 270,
      friction: !isCollapsed ? 26 : 36,
      clamp: true,
    },
  });

  return (
    <StyledCard
      style={{
        // Prevent animation if initially opened
        height: !isCollapsed && wasCollapsed === isCollapsed ? "auto" : height,
      }}
    >
      <div {...bind}>
        <StyledHeader
          type="button"
          as={isCollapsed ? "button" : undefined}
          onClick={isCollapsed ? open : undefined}
        >
          <strong>Comment ça marche</strong>
          <animated.button
            onClick={!isCollapsed ? close : undefined}
            style={{ transform }}
          >
            <RawFeatherIcon name="chevron-down" />
          </animated.button>
        </StyledHeader>
        <StyledBody style={{ opacity }}>
          <li>
            <RawFeatherIcon strokeWidth={2} name="check-square" />
            <span>
              <strong>Faites signer de nouveaux soutiens</strong> à la
              candidature de <NAME> pour 2022
            </span>
          </li>
          <li>
            <RawFeatherIcon strokeWidth={2} name="rss" />
            <span>
              <strong>
{'fraction_non_alphanumeric': 0.14318673395818313, 'fraction_numerical': 0.018745493871665464, 'mean_word_length': 2.4924471299093653, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 67, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '528903', 'n_tokens_mistral': 2353, 'n_tokens_neox': 2230, 'n_words': 525}