Skip to content
GitLab
Commit 47c1d043 authored by Mickaël Bourgier's avatar Mickaël Bourgier
Browse files

Merge branch '27-cssbaseline-add-text-feature' into 'master' 

Resolve "[CssBaseline] Add "text" feature"

Closes #27

See merge request !6
parents cacd0a1d dab3340c
Pipeline #1505 passed with stage
in 52 seconds
Hide whitespace changes
Inline Side-by-side
CHANGELOG.md
View file @ 47c1d043
......@@ -4,6 +4,10 @@
- [Fade] Using default value of the `appear` prop is deprecated since it will
change from `false` to `true` in v2.0 (!2 by @chapa)
### New features
- **[CssBaseline]** Add "text" feature (!6 by @chapa)
## v1.2.0 (August 27, 2019) and below
......
src/CssBaseline/CssBaseline.js
View file @ 47c1d043
import React, { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '../styles';
......@@ -15,21 +15,26 @@ 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/).
*/
class CssBaseline extends Component {
render() {
const {
features = ['color', 'reboot', 'spacing', 'typography']
} = this.props;
return Object.keys(components)
.filter(feature => features.includes(feature))
.map(feature => {
const Component = components[feature];
return <Component key={feature} />;
});
}
}
const CssBaseline = props => {
const {
features = ['color', 'reboot', 'spacing', 'text', 'typography']
} = props;
return (
<>
{Object.keys(components)
.filter(feature => features.includes(feature))
.map(feature => {
const Component = components[feature];
return <Component key={feature} />;
})}
</>
);
};
CssBaseline.propTypes = {
/**
......@@ -41,7 +46,7 @@ CssBaseline.propTypes = {
* Liste des fonctionnalités à activer, toutes activées par défaut
*/
features: PropTypes.arrayOf(
PropTypes.oneOf(['color', 'reboot', 'spacing', 'typography'])
PropTypes.oneOf(['color', 'reboot', 'spacing', 'text', 'typography'])
)
};
......
src/CssBaseline/CssBaseline.styles.js
View file @ 47c1d043
export { default as color } from './CssBaseline.styles.color';
export { default as reboot } from './CssBaseline.styles.reboot';
export { default as spacing } from './CssBaseline.styles.spacing';
export { default as text } from './CssBaseline.styles.text';
export { default as typography } from './CssBaseline.styles.typography';
src/CssBaseline/CssBaseline.styles.spacing.js
View file @ 47c1d043
export default ({ breakpoints, spacing }) => {
const propertyAbbreviations = { margin: 'm', padding: 'p' };
const propertyAbbreviations = { margin: 'm', padding: 'p' };
return {
'@global': {
...Object.assign(
...Object.keys(breakpoints.values).map(breakpoint => {
const infix = breakpoint === 'xs' ? '' : `-${breakpoint}`;
export default ({ breakpoints, spacing }) => ({
'@global': {
...Object.assign(
...Object.keys(breakpoints.values).map(breakpoint => {
const infix = breakpoint === 'xs' ? '' : `-${breakpoint}`;
return {
[breakpoints.up(breakpoint)]: Object.assign(
...Object.keys(propertyAbbreviations).map(property => {
const abbreviation = propertyAbbreviations[property];
return {
[breakpoints.up(breakpoint)]: Object.assign(
...Object.keys(propertyAbbreviations).map(property => {
const abbreviation = propertyAbbreviations[property];
return Object.assign(
...Object.keys(spacing.spacers).map(spacer => {
const length = spacing.spacers[spacer];
return Object.assign(
...Object.keys(spacing.spacers).map(spacer => {
const length = spacing.spacers[spacer];
return {
[`.${abbreviation}${infix}-${spacer}`]: {
[property]: `${length} !important`
},
[`.${abbreviation}t${infix}-${spacer}, .${abbreviation}y${infix}-${spacer}`]: {
[`${property}-top`]: `${length} !important`
},
[`.${abbreviation}r${infix}-${spacer}, .${abbreviation}x${infix}-${spacer}`]: {
[`${property}-right`]: `${length} !important`
},
[`.${abbreviation}b${infix}-${spacer}, .${abbreviation}y${infix}-${spacer}`]: {
[`${property}-bottom`]: `${length} !important`
},
[`.${abbreviation}l${infix}-${spacer}, .${abbreviation}x${infix}-${spacer}`]: {
[`${property}-left`]: `${length} !important`
}
};
})
);
})
)
};
})
)
}
};
};
return {
[`.${abbreviation}${infix}-${spacer}`]: {
[property]: `${length} !important`
},
[`.${abbreviation}t${infix}-${spacer}, .${abbreviation}y${infix}-${spacer}`]: {
[`${property}-top`]: `${length} !important`
},
[`.${abbreviation}r${infix}-${spacer}, .${abbreviation}x${infix}-${spacer}`]: {
[`${property}-right`]: `${length} !important`
},
[`.${abbreviation}b${infix}-${spacer}, .${abbreviation}y${infix}-${spacer}`]: {
[`${property}-bottom`]: `${length} !important`
},
[`.${abbreviation}l${infix}-${spacer}, .${abbreviation}x${infix}-${spacer}`]: {
[`${property}-left`]: `${length} !important`
}
};
})
);
})
)
};
})
)
}
});
src/CssBaseline/CssBaseline.styles.text.js 0 → 100644
View file @ 47c1d043
// https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping
const fontWeights = {
thin: 100,
extralight: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900
};
export default ({ breakpoints }) => ({
'@global': {
...Object.assign(
...Object.keys(breakpoints.values).map(breakpoint => {
const infix = breakpoint === breakpoints.min ? '' : `-${breakpoint}`;
return {
[breakpoints.up(breakpoint)]: {
[`.text${infix}-left`]: { textAlign: 'left !important' },
[`.text${infix}-center`]: { textAlign: 'center !important' },
[`.text${infix}-right`]: { textAlign: 'right !important' },
[`.text${infix}-justify`]: { textAlign: 'justify !important' },
[`.text${infix}-wrap`]: { whiteSpace: 'normal !important' },
[`.text${infix}-nowrap`]: { whiteSpace: 'nowrap !important' },
[`.text${infix}-truncate`]: {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
},
[`.text${infix}-break`]: {
wordBreak: 'break-word !important',
overflowWrap: 'break-word !important'
},
[`.text${infix}-lowercase`]: {
textTransform: 'lowercase !important'
},
[`.text${infix}-uppercase`]: {
textTransform: 'uppercase !important'
},
[`.text${infix}-capitalize`]: {
textTransform: 'capitalize !important'
},
[`.font-weight${infix}-bolder`]: {
fontWeight: 'bolder !important'
},
[`.font-weight${infix}-lighter`]: {
fontWeight: 'lighter !important'
},
...Object.assign(
...Object.keys(fontWeights).map(name => ({
[`.font-weight${infix}-${name}`]: {
fontWeight: `${fontWeights[name]} !important`
}
}))
),
[`.font-style${infix}-italic`]: {
fontStyle: 'italic !important'
},
[`.font-style${infix}-normal`]: {
fontStyle: 'normal !important'
},
[`.text-decoration${infix}-none`]: {
textDecoration: 'none !important'
},
[`.text-decoration${infix}-underline`]: {
textDecoration: 'underline !important'
}
}
};
})
)
}
});
src/CssBaseline/demos/Text.js 0 → 100644
View file @ 47c1d043
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;
Supports Markdown
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