Skip to content

Commit

Permalink
Merge branch '2025-release' into 2025-release-o-spacing
Browse files Browse the repository at this point in the history
  • Loading branch information
frshwtr authored Dec 2, 2024
2 parents a5c0026 + de25b28 commit f882e9e
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 46 deletions.
2 changes: 1 addition & 1 deletion .release-please-manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
"components/o-video": "7.3.1",
"components/o-viewport": "5.1.2",
"components/o-visual-effects": "4.2.2",
"components/o3-button": "2.0.0",
"components/o3-button": "2.0.1",
"components/o3-editorial-typography": "2.0.0",
"components/o3-form": "0.5.0",
"components/o3-foundation": "2.3.0",
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,28 @@ title: Technical Guide
description: A technical guide to using "o3" Origami.
sidebar:
order: 14
next: {link: '/getting-started/o3-specification', label: 'O3 Specification'}
---

import {LinkButton} from '@financial-times/o3-button';

This technical guide covers Origami "o3", the [latest evolution of Origami](/about/what-is-new/). If you are working with older Origami components, which are still most commonly in use today, we have a separate ["o2" technical guide](/o2-components/technical-guide/).

## Using Origami in your project
## User guide

We publish multiple Origami packages to npm which are independently versioned and contain a collection of reusable components and patterns.

If you would like to get started quickly, continue to our [guide to using Origami via npm](/getting-started/technical-guide/package-manager-npm). Otherwise keep reading for a general technical overview of Origami components.

<p>
<LinkButton href='/getting-started/technical-guide/package-manager-npm' type='secondary' label='User guide' />
</p>

## Specification

If you would like to contribute to Origami, or better understand how Origami packages are structured, read the Origami specification.

Amoung other things, this covers: manifests; naming conventions; package management; documentation; code structure & languages; and browser support.

<p>
<LinkButton href='/getting-started/technical-guide/package-manager-npm' type='secondary' label='Specification' />
</p>
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: O3 Specification
description: A technical guide to using "o3" Origami.
sidebar:
hidden: true
prev: {link: '/getting-started/technical-guide', label: 'Technical Guide'}
next: {link: '/getting-started/package-manager-npm', label: 'Using Components (o3) via npm'}
---

## Code Structure & Languages
Expand Down Expand Up @@ -78,11 +76,11 @@ Other documentation sources:
[customElement](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element),
registered against the component’s JavaScript class.
- We recommend components only modify:
- The component’s root element, and its children
- Elements passed explicitly to the component via JavaScript, and their
children
- Elements with any other data attribute in the component’s namespace,
and their children
- The component’s root element, and its children
- Elements passed explicitly to the component via JavaScript, and their
children
- Elements with any other data attribute in the component’s namespace,
and their children
- Components are configurable using data attributes
- Events triggered by a component should be namespaced under the
target component’s name
Expand All @@ -93,15 +91,15 @@ Other documentation sources:
- CSS selectors follow the [BEM naming convention](https://en.bem.info/methodology/naming-convention/).
- Brand specific CSS must be applied using the presence of a parent `data-o3-brand` data attribute. E.g. `[data-o3-brand="core"] .o3-button`.
- Theme specific CSS must be applied using the `data-o3-theme` data attribute, whether applied directly to the component or a parent element. E.g. `.o3-button[data-o3-theme=inverse],
:where([data-o3-theme=inverse]) .o3-button`
:where([data-o3-theme=inverse]) .o3-button`
- CSS Custom properties defined in the global
namespace are prefixed with the component name
- We recommend components only style:
- The component’s root element and its children
- Elements with classes prefixed with the component’s name, and their
children
- Elements with any other data-attribute in the component’s namespace, and
their children
- The component’s root element and its children
- Elements with classes prefixed with the component’s name, and their
children
- Elements with any other data-attribute in the component’s namespace, and
their children

## Versioning

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ title: Using Components (o3) via npm
description: A reference of components
sidebar:
hidden: true
prev: {link: '/getting-started/o3-specification', label: 'O3 Specification'}
next: {link: '/support', label: "Contact & Support"}
---

Origami components are published to npm as [Custom Elements](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements), and other standards based web component technologies.
Expand Down Expand Up @@ -107,7 +105,7 @@ Origami packages include component CSS for each supported brand `/css/[brand].cs
@import '@financial-times/o3-tooltip/css/core.css';

body {
background-color: var(--o3-color-use-case-page-background);
background-color: var(--o3-color-use-case-page-background);
}
```

Expand Down
7 changes: 7 additions & 0 deletions components/o3-button/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
# Changelog

## [2.0.1](https://github.com/Financial-Times/origami/compare/o3-button-v2.0.0...o3-button-v2.0.1) (2024-11-27)


### Bug Fixes

* Add missing tokens for the whitelabel inverse button ([#1884](https://github.com/Financial-Times/origami/issues/1884)) ([e3ff9f2](https://github.com/Financial-Times/origami/commit/e3ff9f2f4bb5a728b2a2538d74be6b3fe85f7925))

## [2.0.0](https://github.com/Financial-Times/origami/compare/o3-button-v1.1.7...o3-button-v2.0.0) (2024-09-23)


Expand Down
2 changes: 1 addition & 1 deletion components/o3-button/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@financial-times/o3-button",
"version": "2.0.0",
"version": "2.0.1",
"description": "Origami buttons with design tokens",
"keywords": [
"buttons",
Expand Down

0 comments on commit f882e9e

Please sign in to comment.