feat: introduce o-private-foundation #1863

frshwtr · 2024-11-06T14:11:22Z

Describe your changes

Issue ticket number and link

Link to Figma designs

Checklist before requesting a review

I have applied percy label for o-[COMPONENT] or chromatic label for o3-[COMPONENT] on my PR before merging and after review. Find more details in CONTRIBUTING.md
If it is a new feature, I have added thorough tests.
I have updated relevant docs.
I have updated relevant env variables in Doppler.

components/o-private-foundation/src/js/private-foundation.js

components/o-private-foundation/test/private-foundation.test.js

components/o-private-foundation/demos/src/demo.scss

components/o-private-foundation/main.scss

components/o-private-foundation/README.md

components/o-private-foundation/stories/private-foundation.scss

* feat: introduce o-private-foundation * feat: introduce o-private-foundation * backstage: Add Sass token target * backstage: Delete oPrivateFoundation mixin use, as it does not exist --------- Co-authored-by: Lee Moody <[email protected]>

@use

* feat: introduce o-private-foundation (#1863) * feat: introduce o-private-foundation * feat: introduce o-private-foundation * backstage: Add Sass token target * backstage: Delete oPrivateFoundation mixin use, as it does not exist --------- Co-authored-by: Lee Moody <[email protected]> * feat: Add public function to get the current brand. * backstage: Map tokens to o2 brand pattern * backstage: Remove stories We decided to develop using traditional demos for this package, as the dev experience is better with Sass. We do not expect users to use this package * docs: Remove misleading SassDoc * backstage: Remove example css * feat: introduce o-normalise to o-private-foundation (#1864) * feat: introduce o-private-foundation * feat: introduce o-normalise to o-private-foundation * feat: use o-private-foundation in origami components * feat: introduce o-private-foundation * feat: introduce o-private-foundation * feat: introduce o-private-foundation * chore: revert stories to use o-normalise * chore: remove unused mixins and prefix remaining with private * feat: use o-private-foundation's o-normalise * fix: fix broken imports * fix: fix buttons * chore: use private foundation normalise * chore: revert typography and buttons changes * chore: correct errors * chore: update package-lock.json * chore: use main scss file * chore: use imports as final approach, include o-colors * chore: ensure private foundation is a peerDependency * chore: remove tsx files * chore: remove further cases of @use * chore: remove unecessary variable * chore: namespace variables * chore: ensure original o-normalise is used in demos --------- Co-authored-by: Lee Moody <[email protected]> * backstage: Add initial buttons support to o-private-foundations Takes o3-button and refactors to work in an o2 world. Slightly odd use of Sass/CSS Custom Properties, with Sass conditionals used to output duplicate CSS Custom Properties which override each other in the same declaration. This was the safest way to reuse o3 styles by effectively replacing class names for Sass if statements. It's also more readable and simple than o2 Sass. Despite duplicating some properties, CSS output and performance will be improved by moving away from the Origami Image Service for coloured icons. Currently supports: - Types - Themes - Sizes - Icons - Icons only Does not yet support: - Custom theme maps Will not support: - Outputting CSS granularly. There are not many buttons left in o2 components, and bundle size is reduced overall as noted above. Other things of note: - `o-private-foundation-get` allows other o2 components to grab tokens directly. - Added Metric2 variable font * backstage: Replace o-buttons with o-private-foundation in o-table * backstage: fix private button force-colors and family * backstage: Update private buttons to actually use type/theme argument * docs: Update components/o-private-foundation/src/scss/o-buttons/main.scss * feat: introduce o-private-foundation/o-grid * feat: use oPrivateGrid in o-header-services * feat: use oPrivateGrid in o-header-services * chore: use private grid mixins and functions across Origami * chore: namespace o-private-foundation/o-grid variables * backstage: Reduce use of Sass modules to prevent errors when importing multiple times via other components. * backstage: Update o-table to use latest o-private-foundation changes. * backstage: Remove o-buttons as an o-tabs dependency * backstage: Remove o-buttons as an o-header dependency * backstage: Remove o-buttons as an o-forms peer dependency * backstage: Throw in o-private-foundation if a token is not found * backstage: Remove o-buttons as an o-comments dependency * backstage: Remove o-buttons Sass import from o-header * Remove o-buttons as an o-message dependency (#1882) * backstage: Reduce use of Sass modules to prevent errors when importing multiple times via other components. * backstage: Update o-table to use latest o-private-foundation changes. * backstage: Remove o-buttons as an o-tabs dependency * backstage: Remove o-buttons as an o-header dependency * backstage: Remove o-buttons as an o-forms peer dependency * backstage: Throw in o-private-foundation if a token is not found * backstage: Remove o-buttons as an o-comments dependency * backstage: Reluctantly port custom button colour Sass, to support messaging components. * backstage: Remove o-buttons as an o-message dependency * chore: remove oPrivateGrid * chore: update comments * chore: add oPrivateGridRespondTo to sass lint rules * chore: remove o-pf-grid-is-silent * chore: import o-grid at root * chore: introduced grid JS to o-private-foundation * chore: hoist pf-grid-layouts from o-grid * chore: correct typo * chore: remove private-foundations * chore: align o-private-foundation/o-normalise directory structure (#1874) * chore: align file structure with confirmed convention * chore: fix lint errors * chore: add private foundation includes to sass lint config * chore: format o-multi-select/main.scss * fix: format files * fix: remove engine property from package.json * chore: remove private-foundations * chore: update normalise path * chore: fix lint rules * chore: fix lint rules * feat: introduce o visual effects (#1877) * feat: introduce and use o-private-foundation/o-visual-effects * chore: update package-lock.json * chore: move o-visual-effects, replace broken import * chore: conditially set public grid vars * chore: try conditionals * chore: use meta package * chore: use correct variable exists syntax * chore: use correct variable exists syntax * chore: correct build errors * chore: refactor variable name * chore: refactor build issues * chore: remove private spacing * chore: restore pf to variables --------- Co-authored-by: Lee Moody <[email protected]>

@use

* feat: introduce o-private-foundation (#1863) * feat: introduce o-private-foundation * feat: introduce o-private-foundation * backstage: Add Sass token target * backstage: Delete oPrivateFoundation mixin use, as it does not exist --------- Co-authored-by: Lee Moody <[email protected]> * feat: Add public function to get the current brand. * backstage: Map tokens to o2 brand pattern * backstage: Remove stories We decided to develop using traditional demos for this package, as the dev experience is better with Sass. We do not expect users to use this package * docs: Remove misleading SassDoc * backstage: Remove example css * chore: introduce variables * chore: introduce spacing functions * feat: introduce o-normalise to o-private-foundation (#1864) * feat: introduce o-private-foundation * feat: introduce o-normalise to o-private-foundation * feat: use o-private-foundation in origami components * feat: introduce o-private-foundation * feat: introduce o-private-foundation * feat: introduce o-private-foundation * chore: revert stories to use o-normalise * chore: remove unused mixins and prefix remaining with private * feat: use o-private-foundation's o-normalise * fix: fix broken imports * fix: fix buttons * chore: use private foundation normalise * chore: revert typography and buttons changes * chore: correct errors * chore: update package-lock.json * chore: use main scss file * chore: use imports as final approach, include o-colors * chore: ensure private foundation is a peerDependency * chore: remove tsx files * chore: remove further cases of @use * chore: remove unecessary variable * chore: namespace variables * chore: ensure original o-normalise is used in demos --------- Co-authored-by: Lee Moody <[email protected]> * feat: use oPrivateSpacing sass components * chore: align file structure with confirmed convention * chore: namespace variables * backstage: Add initial buttons support to o-private-foundations Takes o3-button and refactors to work in an o2 world. Slightly odd use of Sass/CSS Custom Properties, with Sass conditionals used to output duplicate CSS Custom Properties which override each other in the same declaration. This was the safest way to reuse o3 styles by effectively replacing class names for Sass if statements. It's also more readable and simple than o2 Sass. Despite duplicating some properties, CSS output and performance will be improved by moving away from the Origami Image Service for coloured icons. Currently supports: - Types - Themes - Sizes - Icons - Icons only Does not yet support: - Custom theme maps Will not support: - Outputting CSS granularly. There are not many buttons left in o2 components, and bundle size is reduced overall as noted above. Other things of note: - `o-private-foundation-get` allows other o2 components to grab tokens directly. - Added Metric2 variable font * backstage: Replace o-buttons with o-private-foundation in o-table * backstage: fix private button force-colors and family * backstage: Update private buttons to actually use type/theme argument * docs: Update components/o-private-foundation/src/scss/o-buttons/main.scss * fix: fix typo * fix: remove duplications * fix: remove engine property from package.json * fix: fix lint issues * fix: fix colors test assertions RGB values have been verified to match hex value * fix: remove unecessary normalise import * fix: oPrivateNormaliseApply to order sass rule * fix: fix sass lint errors * fix: use rgn in o-label sass tests * fix: lint o-multi-select sass * fix: update package-lock * backstage: Reduce use of Sass modules to prevent errors when importing multiple times via other components. * backstage: Update o-table to use latest o-private-foundation changes. * backstage: Remove o-buttons as an o-tabs dependency * backstage: Remove o-buttons as an o-header dependency * backstage: Remove o-buttons as an o-forms peer dependency * backstage: Throw in o-private-foundation if a token is not found * backstage: Remove o-buttons as an o-comments dependency * backstage: Remove o-buttons Sass import from o-header * Remove o-buttons as an o-message dependency (#1882) * backstage: Reduce use of Sass modules to prevent errors when importing multiple times via other components. * backstage: Update o-table to use latest o-private-foundation changes. * backstage: Remove o-buttons as an o-tabs dependency * backstage: Remove o-buttons as an o-header dependency * backstage: Remove o-buttons as an o-forms peer dependency * backstage: Throw in o-private-foundation if a token is not found * backstage: Remove o-buttons as an o-comments dependency * backstage: Reluctantly port custom button colour Sass, to support messaging components. * backstage: Remove o-buttons as an o-message dependency * chore: remove unecessary variables, use pf namespacing * chore: remove private-foundations * chore: remove duplicate keys * chore: align o-private-foundation/o-normalise directory structure (#1874) * chore: align file structure with confirmed convention * chore: fix lint errors * chore: add private foundation includes to sass lint config * chore: format o-multi-select/main.scss * fix: format files * fix: remove engine property from package.json * chore: remove private-foundations * chore: update normalise path * chore: fix lint rules * chore: fix lint rules * feat: introduce o visual effects (#1877) * feat: introduce and use o-private-foundation/o-visual-effects * chore: update package-lock.json * chore: move o-visual-effects, replace broken import * chore: update package lock * chore: run only one job at a time * chore: regen package lock * chore: regen package lock * chore: reintroduce relative units * chore: increase max-parallel to 4 --------- Co-authored-by: Lee Moody <[email protected]>

notlee temporarily deployed to origami-webs-2025-relea-6rnwih November 6, 2024 14:18 Inactive