This repository has been archived by the owner on Jan 19, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Large scale refactor for v4 (#26) * Large scale refactor for v4 This refactors all of the code for v4, and introduces branding. I've also added a few new states and removed some old ones but these will be reviewed properly separately. Work that this doesn't include, but will be done separately: - An overhaul of the README (waiting to know more about which variants we will continue to support) - Comprehensive SassDoc (I wanted to get an early review in before I document everything) - Tests (I'd like to try out some testing with True later and we'll need a Pa11y test for accessibility) * Remove unnecessary sassdoc for now * Rename default brand configurations * Use scales over pixel values in brand config * Reduce/simplify demo dependencies * Remove the need for a private mixin * Switch padding configurations back to pixels * Rename back to o-labels * Move wide styles into beta lifecycle state * Remove a rogue alpha reference (#27) * Update the README and add a migration guide (#28) * Add Sassdoc to all the mixins (#29) * Add true tests for padding calculation (#31) * Design and variant overhaul (#32) * Design and variant overhaul This removes the small variant, as the standard size is now smaller. The big variant is now around the same size as the previous standard size. All labels are now transformed to uppercase. * Updates based on review feedback * Oh look, the small variant is back! (#33) * Oh look, the small variant is back! I wonder whether we'll get to delete and re-add it again! 😄 * Simplify demo language * Add a Pa11y demo (#34) This currently doesn't test everything - I've done that manually. But once OBT supports a11y testing for all brands this should just start working. * Move to a more oTable way of doing mixins (#35) We now have a single oLabels mixin which outputs everything, similar to the main oTable mixin. * Make the small variant a little smaller (#38) This is to address issues with the small label when lots are displayed on the same page, e.g. in MyFT. The new padding more closely matches the original label padding and so fits nicely with the existing designs. * Remove default capitalisation (#39) The only label that's now capitalised is the beta label, the rest are lowercase at the moment. We may add capitalisation as a variant later if there are compelling use-cases for it. * Switch the primary mixin to have a single argument This also moves the primary mixin into the main.scss file, to match the components which have had more recent releases. * Move to an external migration guide The README and migration guide now conform to the standard set by other recent components. * Rename oLabelsState to oLabelsAddState Based on a discussion between Gabi, Lee, and I. We've decided we should be explicit that you're _adding_ a new thing rather than customising an existing thing.
- Loading branch information
1 parent
9042586
commit 48dd7ca
Showing
24 changed files
with
693 additions
and
329 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
|
|
||
| # Migration | ||
|
|
||
| ## Migrating from v3 to v4 | ||
|
|
||
| - The `oLabels` mixin parameters have been changed, and all of the mixins have changed significantly. See the [Sass documentation](README.md#sass) for how to use the new and updated mixins | ||
| - The following states have been removed. The decision to remove was based on a search of the various codebases using o-labels, if you need one of the removed states then please contact us and we'll add it back: | ||
| - `active`: This state has been removed entirely | ||
| - `brand`: This state has been removed entirely | ||
| - `closed`: This state has been removed entirely | ||
| - `error`: This state has been removed entirely | ||
| - `live`: This state has been removed entirely | ||
| - `pending`: This state has been removed entirely | ||
| - `normal`: The normal state is achieved by not including a state modifier class | ||
| - The following states have been renamed. This rename applies to both the default classes as well as the value passed into the `oLabelsAddState` mixin: | ||
| - ```diff | ||
| + content-commercial | ||
| - commercial-content | ||
| ``` | ||
| - ```diff | ||
| + content-premium | ||
| - premium | ||
| ``` | ||
| - o-colors use-cases have been removed. If you wish to configure label colours we now recommend using the `oLabelsAddState` mixin and passing in variant config. | ||
|
|
||
| ## Migrating from v2 to v3 | ||
|
|
||
| V3 of o-labels removes the `oLabelsSize` mixin. To create different sized labels for your product you should use the o-typography mixins as shown in the [controlling label size](README.md#controlling-label-size) section. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,99 +1,189 @@ | ||
|
|
||
| # o-labels [](https://circleci.com/gh/Financial-Times/o-labels) [](#licence) | ||
|
|
||
| Standard labels | ||
| Labels for content classification or to emphasise a value. | ||
|
|
||
| - [Usage](#usage) | ||
| - [Markup](#markup) | ||
| - [Sass](#sass) | ||
| - [Markup](#markup) | ||
| - [Sass](#sass) | ||
| - [Migration guide](#migration-guide) | ||
| - [Contact](#contact) | ||
| - [Licence](#licence) | ||
|
|
||
|
|
||
| ## Usage | ||
|
|
||
| ### Markup | ||
|
|
||
| Labels can have one of several states: | ||
|
|
||
| - `normal`: standard blue | ||
| - `active`: active/success state, default wasabi | ||
| - `error`: error/failure state, default crimson | ||
| - `pending`: an indeterminate state, default mandarin | ||
| - `live`: current in-progress state, default crimson | ||
| - `closed`: old closed content state, default grey | ||
| - `premium`: premium content state, default black | ||
| - `brand`: FT brand label state, default claret | ||
| - `commercial-content`: commercially promoted content (eg. native ads), default jade (50% brightness) | ||
| The most minimal markup for a label is as follows: | ||
|
|
||
| ```html | ||
| <span class="o-labels">Label</span> | ||
| <span class="o-labels o-labels--active">Active</span> | ||
| <span class="o-labels o-labels--error">Error</span> | ||
| <span class="o-labels o-labels--pending">Pending</span> | ||
| <span class="o-labels o-labels--live">Live</span> | ||
| <span class="o-labels o-labels--closed">Closed</span> | ||
| <span class="o-labels o-labels--premium">Premium</span> | ||
| <span class="o-labels o-labels--brand">Brand</span> | ||
| <span class="o-labels o-labels--commercial-content">Commercial Content</span> | ||
| ``` | ||
|
|
||
| Use [o-typography](https://registry.origami.ft.com/components/o-typography) to control the sizing of labels. Use a label one size smaller than surrounding text, e.g. use `-2` label with `-1` text. | ||
| Labels are displayed inline so including the above markup in a paragraph, for example, will make it sit alongside the text. | ||
|
|
||
| There are several size modifier classes which can be used to change the general appearance of a label: | ||
|
|
||
| ```html | ||
| <span class="o-labels o-labels--big">Big Label</span> | ||
| <span class="o-labels o-labels--small">Small Label</span> | ||
| ``` | ||
|
|
||
| Labels can also have one of several states. The available states depend on which brand you are using (there are no states for whitelabel branded components): | ||
|
|
||
| #### Masterbrand | ||
|
|
||
| The following states are used to categorise content, mostly on FT.com: | ||
|
|
||
| ```html | ||
| <span class="o-labels o-labels--content-commercial">Paid Post</span> (used for paid post and promoted content) | ||
| <span class="o-labels o-labels--content-premium">Premium</span> (used for premium-only content) | ||
| ``` | ||
|
|
||
| The following state is used to indicate that a feature is in a beta state: | ||
|
|
||
| ```html | ||
| <span class="o-labels o-labels--lifecycle-beta">Beta</span> | ||
| ``` | ||
|
|
||
| #### Internal | ||
|
|
||
| ### Sass: | ||
| The following states are used to represent the different support levels of Origami components: | ||
|
|
||
| As with all Origami components, o-labels has a [silent mode](http://origami.ft.com/docs/syntax/scss/#silent-styles). To use its compiled CSS (rather than incorporating its mixins into your own Sass) set `$o-labels-is-silent : false;` in your Sass before you import the o-labels Sass: | ||
| ```html | ||
| <span class="o-labels o-labels--support-active">Active</span> | ||
| <span class="o-labels o-labels--support-maintained">Maintained</span> | ||
| <span class="o-labels o-labels--support-experimental">Experimental</span> | ||
| <span class="o-labels o-labels--support-deprecated">Deprecated</span> | ||
| <span class="o-labels o-labels--support-dead">Dead</span> | ||
| ``` | ||
|
|
||
| The following states are used to represent the FT's service tiers: | ||
|
|
||
| ```html | ||
| <span class="o-labels o-labels--support-platinum">Platinum</span> | ||
| <span class="o-labels o-labels--support-gold">Gold</span> | ||
| <span class="o-labels o-labels--support-silver">Silver</span> | ||
| <span class="o-labels o-labels--support-bronze">Bronze</span> | ||
| ``` | ||
|
|
||
| ### Sass | ||
|
|
||
| #### Silent mode | ||
|
|
||
| As with all Origami components, o-labels has a [silent mode](http://origami.ft.com/docs/syntax/scss/#silent-styles). To use its compiled CSS (rather than incorporating its mixins into your own Sass) set `$o-labels-is-silent: false;` in your Sass before you import the o-labels Sass: | ||
|
|
||
| ```sass | ||
| $o-labels-is-silent: false; | ||
| @import 'o-labels/main'; | ||
| ``` | ||
|
|
||
| #### Using Sass mixins | ||
| #### Mixin: `oLabels` | ||
|
|
||
| The `oLabels` mixin can be used to create a label by passing in the desired `state` and `size` (based on the o-typography scale): | ||
| If using o-labels in silent mode, you'll need to use the mixins outlined here to output styles. | ||
|
|
||
| The `oLabels` mixin is used to output base styles as well as styles for _all_ of the label sizes and states. This output includes the `o-labels` classes: | ||
|
|
||
| ```sass | ||
| .my-label { | ||
| @include oLabels('premium', -1); | ||
| ```scss | ||
| @include oLabels(); | ||
| ``` | ||
|
|
||
| ```css | ||
| .o-labels { | ||
| /* styles */ | ||
| } | ||
| .o-labels--big { | ||
| /* styles */ | ||
| } | ||
| /* etc. */ | ||
| ``` | ||
|
|
||
| The `oLabelState` mixin is used to output different coloured labels based on the available states ([see markup section for full list](#markup)). | ||
| If you wish to specify a subset of sizes and states to output styles for, you can pass in options (see [sizes](#sizes) and [states](#states) for available options): | ||
|
|
||
| ```sass | ||
| .label--error { | ||
| @include oLabelsState('error'); | ||
| ```scss | ||
| @include oLabels($opts: ( | ||
| $sizes: ('big'), | ||
| $states: ( | ||
| 'content-commercial', | ||
| 'content-premium' | ||
| ) | ||
| )); | ||
| ``` | ||
|
|
||
| #### Mixin: `oLabelsAddState` | ||
|
|
||
| The `oLabelsAddState` mixin can be used to output a class for one of the label states, outlined in the [states table](#states): | ||
|
|
||
| ```scss | ||
| @include oLabelsAddState('content-commercial'); | ||
| ``` | ||
|
|
||
| ```css | ||
| .o-labels--content-commercial { | ||
| /* styles */ | ||
| } | ||
| ``` | ||
|
|
||
| #### Controlling label size | ||
| The `oLabelsAddState` mixin also accepts optional custom configurations, which override defaults or allow you to define your own label states: | ||
|
|
||
| To output different sized labels for your project, use the `oTypographySize` mixin to change the size of your label with different modifiers: | ||
| ```scss | ||
| @include oLabelsAddState('citrus-fruit', ( | ||
| background-color: oColorsGetPaletteColor('lemon') | ||
| )); | ||
| ``` | ||
|
|
||
| ```sass | ||
| .label--big { | ||
| @include oTypographySize(-1); | ||
| ```css | ||
| .o-labels--citrus-fruit { | ||
| /* styles */ | ||
| } | ||
| ``` | ||
|
|
||
| #### Sizes | ||
|
|
||
| ## Migration guide | ||
| This table outlines all of the possible sizes you can request in the [`oLabels` mixin](#mixin-olabels): | ||
|
|
||
| | Size | Description | Brand support | | ||
| |-------|---------------------------------------------|------------------------------| | ||
| | big | Label with increased font size and padding. | master, internal, whitelabel | | ||
| | small | Label with decreased font size and padding. | master, internal, whitelabel | | ||
|
|
||
| **Migrating from v2 to v3** | ||
| #### States | ||
|
|
||
| This table outlines all of the possible states you can request in the [`oLabels` mixin](#mixin-olabels) and [`oLabelsAddState` mixin](#mixin-olabelsaddstate): | ||
|
|
||
| | Size | Description | Brand support | | ||
| |----------------------|---------------------------------------------------------------|---------------| | ||
| | content-commercial | Used to identify paid posts or promoted content. | master | | ||
| | content-premium | Used to identify premium content. | master | | ||
| | lifecycle-beta | Used to identify a feature that's in beta. | master | | ||
| | support-active | Used to indicate that a component is actively maintained. | internal | | ||
| | support-maintained | Used to indicate that a component is maintained. | internal | | ||
| | support-experimental | Used to indicate that a component is an experimental feature. | internal | | ||
| | support-deprecated | Used to indicate that a component is deprecated. | internal | | ||
| | support-dead | Used to indicate that a component is no longer worked on. | internal | | ||
| | tier-platinum | Used to indicate a service with a platinum service tier. | internal | | ||
| | tier-gold | Used to indicate a service with a gold service tier. | internal | | ||
| | tier-silver | Used to indicate a service with a silver service tier. | internal | | ||
| | tier-bronze | Used to indicate a service with a bronze service tier. | internal | | ||
|
|
||
|
|
||
| ## Migration guide | ||
|
|
||
| V3 of o-labels removes the `oLabelSize` mixin. To create different sized labels for your product you should use the o-typography mixins as shown in the [controlling label size](#controlling-label-size) section. | ||
| State | Major Version | Last Minor Release | Migration guide | | ||
| :---: | :---: | :---: | :---: | ||
| ✨ active | 4 | N/A | [migrate to v4](MIGRATION.md#migrating-from-v3-to-v4) | | ||
| ⚠ maintained | 3 | 3.1.1 | [migrate to v3](MIGRATION.md#migrating-from-v2-to-v3) | | ||
| ╳ deprecated | 2 | 2.1.0 | N/A | | ||
| ╳ deprecated | 1 | 1.0.6 | N/A | | ||
|
|
||
| --- | ||
|
|
||
| ## Contact | ||
|
|
||
| If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/o-labels/issues), visit [#ft-origami](https://financialtimes.slack.com/messages/ft-origami/) or email [Origami Support](mailto:origami-support@ft.com). | ||
|
|
||
| ---- | ||
|
|
||
| ## Licence | ||
|
|
||
| This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT). | ||
|
|
||
| [bem]: http://getbem.com/naming/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| { | ||
| "states": [ | ||
| null, | ||
| "content-commercial", | ||
| "content-premium", | ||
| "lifecycle-beta", | ||
| "support-active", | ||
| "support-dead", | ||
| "support-deprecated", | ||
| "support-experimental", | ||
| "support-maintained", | ||
| "tier-bronze", | ||
| "tier-gold", | ||
| "tier-platinum", | ||
| "tier-silver" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "states": [ | ||
| { | ||
| "id": "content-commercial", | ||
| "content": "Commercial" | ||
| }, | ||
| { | ||
| "id": "content-commercial", | ||
| "content": "Paid Post" | ||
| }, | ||
| { | ||
| "id": "content-commercial", | ||
| "content": "Promoted Content" | ||
| }, | ||
| { | ||
| "id": "content-premium", | ||
| "content": "Premium" | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "states": [ | ||
| { | ||
| "id": "lifecycle-beta", | ||
| "content": "Beta" | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "states": [ | ||
| { | ||
| "id": "tier-platinum", | ||
| "content": "Platinum" | ||
| }, | ||
| { | ||
| "id": "tier-gold", | ||
| "content": "Gold" | ||
| }, | ||
| { | ||
| "id": "tier-silver", | ||
| "content": "Silver" | ||
| }, | ||
| { | ||
| "id": "tier-bronze", | ||
| "content": "Bronze" | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| { | ||
| "states": [ | ||
| { | ||
| "id": "support-active", | ||
| "content": "Active" | ||
| }, | ||
| { | ||
| "id": "support-maintained", | ||
| "content": "Maintained" | ||
| }, | ||
| { | ||
| "id": "support-experimental", | ||
| "content": "Experimental" | ||
| }, | ||
| { | ||
| "id": "support-deprecated", | ||
| "content": "Deprecated" | ||
| }, | ||
| { | ||
| "id": "support-dead", | ||
| "content": "Dead" | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,13 @@ | ||
|
|
||
| $o-labels-is-silent: false; | ||
|
|
||
| @import "../../main"; | ||
| @import "o-typography/main"; | ||
|
|
||
| @include oFontsIncludeAll(); | ||
|
|
||
| body { | ||
| @include oColorsFor('page', 'background'); | ||
| margin: 1em; | ||
| } | ||
|
|
||
| .demo-paragraph { | ||
| @include oTypographySans(-1); | ||
|
|
||
| .o-labels { | ||
| @include oTypographySansBold(-2); | ||
| } | ||
| .demo-container { | ||
| margin-bottom: 1em; | ||
| } |
Oops, something went wrong.