Commit dab3340c authored by Mickaël Bourgier's avatar Mickaël Bourgier
Browse files

📝 [CssBaseline] Add documentation for "text" feature

parent 97516081
Pipeline #1504 passed with stage
in 51 seconds
......@@ -15,6 +15,9 @@ const components = Object.assign(
/**
* @summary Fournit différentes classes CSS utilisables partout dans l'application
*
* Ce composant permet de rendre disponible des classes globales provenant de
* [Bootstrap](https://getbootstrap.com/).
*/
const CssBaseline = props => {
const {
......
import React from 'react';
const Text = () => (
<>
<h3>
Fonctionnalité <em>text</em>
</h3>
<p>
Lorsque cette fonctionnalité est activée, les classes présente dans cette
documentation sont disponibles (à quelques différences près, voir
ci-dessous) :{' '}
<a href='https://getbootstrap.com/docs/4.3/utilities/text/'>
https://getbootstrap.com/docs/4.3/utilities/text/
</a>
</p>
<h5>Différences à noter</h5>
<p>
Les classes suivantes n'existent pas :
<ul>
<li>
<code>.font-italic</code> (remplacée par{' '}
<code>.font-style-italic</code>)
</li>
<li>
<code>.text-monospace</code> (remplaçable par la classe{' '}
<code>.mono</code> présente dans la fonctionnalité <em>typography</em>
)
</li>
<li>
<code>.text-reset</code>
</li>
</ul>
</p>
<p>
Les classes suivantes ont été ajoutées :
<ul>
<li>
<code>.font-style-normal</code>
</li>
<li>
<code>.text-decoration-underline</code>
</li>
</ul>
</p>
<p>
Les classes de graissage de police absolues suivent les spécifications{' '}
<a href='https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass'>
OpenType
</a>{' '}
et sont les suivantes :
<ul>
<li>
<code>.font-weight-thin</code>
</li>
<li>
<code>.font-weight-extralight</code>
</li>
<li>
<code>.font-weight-light</code>
</li>
<li>
<code>.font-weight-normal</code>
</li>
<li>
<code>.font-weight-medium</code>
</li>
<li>
<code>.font-weight-semibold</code>
</li>
<li>
<code>.font-weight-bold</code>
</li>
<li>
<code>.font-weight-extrabold</code>
</li>
<li>
<code>.font-weight-black</code>
</li>
</ul>
</p>
<p>
Les infixes responsives sont également disponibles pour les classes
suivantes :
<ul>
<li>
<code>.text-*-wrap</code>
</li>
<li>
<code>.text-*-nowrap</code>
</li>
<li>
<code>.text-*-truncate</code>
</li>
<li>
<code>.text-*-break</code>
</li>
<li>
<code>.text-*-lowercase</code>
</li>
<li>
<code>.text-*-uppercase</code>
</li>
<li>
<code>.text-*-capitalize</code>
</li>
<li>
<code>.font-weight-*-bolder</code>
</li>
<li>
<code>.font-weight-*-lighter</code>
</li>
<li>
<code>.font-weight-*-thin</code>
</li>
<li>
<code>.font-weight-*-extralight</code>
</li>
<li>
<code>.font-weight-*-light</code>
</li>
<li>
<code>.font-weight-*-normal</code>
</li>
<li>
<code>.font-weight-*-medium</code>
</li>
<li>
<code>.font-weight-*-semibold</code>
</li>
<li>
<code>.font-weight-*-bold</code>
</li>
<li>
<code>.font-weight-*-extrabold</code>
</li>
<li>
<code>.font-weight-*-black</code>
</li>
<li>
<code>.font-style-*-italic</code>
</li>
<li>
<code>.font-style-*-normal</code>
</li>
<li>
<code>.text-decoration-*-none</code>
</li>
<li>
<code>.text-decoration-*-underline</code>
</li>
</ul>
</p>
</>
);
export default Text;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment