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

[CssBaseline] Add "text" feature

parent cacd0a1d
......@@ -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
......
import React, { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '../styles';
......@@ -16,20 +16,22 @@ const components = Object.assign(
/**
* @summary Fournit différentes classes CSS utilisables partout dans l'application
*/
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 +43,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'])
)
};
......
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';
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`
}
};
})
);
})
)
};
})
)
}
});
// 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'
}
}
};
})
)
}
});
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