Proposal: Content component

[landitus]

Use a Content when creating an area of text. Wrap other typography components to create a good vertical rhythm.

• Adds top and bottom margins to text elements
• Removes first element top margin
• Removes last element bottom margin

Usage:

• Most tutorials
• Paragraphs and Lists inside any page. Wherever there's a paragraph, it's a good idea to wrap it with Content.

Example:

<Content>
  <Heading size={2}>About Universal Login</Heading>
  <Paragraph>Auth0's Universal Login is the most secure way to authenticate users for your applications. Universal Login centers around your Auth0 login page. The login page appearance and behavior is customizable right from the Dashboard. By default, the login page internally uses Auth0's Lock Widget to authenticate your users, but the code of the login page can be customized to replace the standard Lock widget with the Lock (Passwordless Mode) widget, or an entirely custom UI can be built in its place, using the Auth0.js SDK for authentication.</Paragraph>
  <Image caption="This is a caption" src="" alt="" />

  <Heading size={3}>How does Universal Login work</Heading> 
  <Paragraph>Auth0 shows the login page whenever something (or someone) triggers an authentication request, such as calling the /authorize endpoint (OIDC/OAuth) or sending a SAML login request.</Paragraph>
  <Paragraph>Users will see the login page, typically with either the Lock widget or with your custom UI. Once they log in, they will be redirected back to your application.</Paragraph>
  <Paragraph>However if the incoming authentication request includes a connection parameter that uses an external identity provider (such as a social provider), the login page will not display. Instead, Auth0 will direct the user to the identity provider's login page.</Paragraph>
  <Alert type="information">If, after looking at the page code and customization options, you decide not to customize your login page, you should disable the Customize Login Page toggle, to allow your page to receive the automatic updates it might need from Auth0.</Alert>
  <List>
    <List.item>List item</List.item>
    <List.item>List item</List.item>
    <List.item>List item</List.item>
  </List>

  <Heading size={3}>This is a sub-heading</Heading>
  <Paragraph></Paragraph>
  <CodeBlock caption="This is a caption"></CodeBlock>
  <Paragraph></Paragraph>
</Content>

Note: to use a proper List, we need to change the name of the List component (which is a simple Table)

[andresgalante]

If possible I'd change size={3} on Headings for type={3}.

We should not encourage authors to think about sizes but the hierarchy of header they want to use.

Here is a good example of a content component: https://bulma.io/documentation/elements/content/

[siddharthkp]

Nitpick: Do we have a whitelist of components that goes inside Content? I see Image is used, not sure if it fits the definition

Use a Content when creating an area of text. Wrap other typography components to create a good vertical rhythm.

Real question: How does a developer make the decision what goes inside a content vs what doesn't. Is it the spacing / indentation / type of component?

Example - There are multiple ways of slicing a UI into contents:

(big picture, click to zoom)

[andresgalante]

Do we have a whitelist of components that go inside Content? I see Image is used, not sure if it fits the definition

👍 yeap! that'd be ideal

[andresgalante]

I'll add another example of a content component for reference

https://polaris.shopify.com/components/titles-and-text/text-container#navigation

[siddharthkp]

Do we have a whitelist of components that go inside Content? I see Image is used, not sure if it fits the definition

👍 yeap! that'd be ideal

@landitus Can you add the whitelist here? Let's close the spec before we jump into implementation

[andresgalante]

If we are going to remove margins on v1, I think it's good timing to do this component.

[landitus]

Indeed!