About section

[crysfel]

As a visitor I want to learn more about the project.

Create a react component that takes the title, description, direction, classes and icon as properties. This component should render the title, description and icon in the given direction (left, right).

Text will be provided later on, for now you can use a placeholder text.

We are going to use this component to render the mission section as well.

Assets will be uploaded to this tasks once are ready.

[devictoribero]

Since I have no permissions in Zenhub yet, I say here Im working on it. Because I have no permissions either to change the labels of the issue and make it WorkInProgress

[devictoribero]

@crysfel What about let this component accept a prop called actions? So we can add CTA's if needed (call to actions).

PS: Is the icon going to be a component because it will be a svg, png or just a plain text with the url?

[devictoribero]

PS2: I started the .scss but I stopped since I started a feed in slack to how write standard css. Once we have a conclusion, I'll change the scss needed.

[crysfel]

@tureey I've merged the PR that enables css modules!

What about let this component accept a prop called actions?

Something like this?

<Section actions={{login: someFunction, facebook: someOtherFuncion }} />

If so.... how are we going to add the action to an element inside the component? What about:

<Section title="......" description=".........">
  <Action onClick={customAction} />
  <Image onClick={customAction} />
</Section>

And then render the children property in a designated place inside the Section component?

Is the icon going to be a component because it will be a svg, png or just a plain text with the url?

We can create components for each image, then pass the icon as a property to the section. If we do this, the images will be inside the final JS bundle, it will render super fast but the tradeoff is that the bundle will be bigger. However, we are going to split the code making the bundles smaller.

[devictoribero]

@crysfel I was thinking about having 2 components for the About for example:

1. Section (the one has background-color and the::before ::after properties
2. The Flex component that accepts 2.1 Title 2.2 Description 2.3 Direction 2.4 Icon 2.5 Actions (*)

(*) I was thinking to make it be an array of <Button> and they would be placed inside a wrapper that places it inside the SectionIconed. Of course, optional.

I don't like the SectionIconed name so much. Any proposal? This component would be the one renders the content in a certain direction

<Section {Still have to think about this props}>
   <SectionIconed
        title='About'
        text={'lorem ipsum lorem ipsum lorem ipsum lorem ipsum'}
        direction='left'   <---- it will be defaultValue
        icon={<Icon src={lazyload?}/>} <---- Required? Without it will work anyway
        ?actions={[
                <Button onClick={this.handleClickExample1}>,
                <Button onClick={this.handleClickExample2}>,
        ]}
    />
</Section>