Skip to content

Commit

Permalink
Revert "Merge branch '3357-remove-card-control-scss-import' into 3206…
Browse files Browse the repository at this point in the history 
…-component-logo"

This reverts commit 0931870, reversing
changes made to f18e0f4.
  • Loading branch information
@alizedebray
alizedebray committed Jul 31, 2024
1 parent f75ae03 commit 12b7c17
Show file tree
Hide file tree
Showing 7 changed files with 68 additions and 77 deletions.
16 changes: 8 additions & 8 deletions packages/components/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,23 +80,23 @@ export namespace Components {
*/
interface PostCardControl {
/**
* Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data.
* Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms data.
*/
"checked": boolean;
/**
* Defines the description in the control-label.
*/
"description": string;
/**
* Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data.
* Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms data.
*/
"disabled": boolean;
/**
* A hidden public method to reset the group controls `checked` state to `false`.
*/
"groupReset": () => Promise<void>;
/**
* Defines the icon `name` inside the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
* Defines the icon `name` inside of the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
*/
"icon": string;
/**
Expand All @@ -116,7 +116,7 @@ export namespace Components {
*/
"type": 'checkbox' | 'radio';
/**
* Defines the validation `validity` of the control. To reset validity to an undefined state, simply remove the attribute from the control.
* Defines the validation `validity` of the control. To reset validity to an undefiend state, simply remove the attribute from the control.
*/
"validity": null | 'true' | 'false';
/**
Expand Down Expand Up @@ -588,19 +588,19 @@ declare namespace LocalJSX {
*/
interface PostCardControl {
/**
* Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data.
* Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms data.
*/
"checked"?: boolean;
/**
* Defines the description in the control-label.
*/
"description"?: string;
/**
* Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data.
* Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms data.
*/
"disabled"?: boolean;
/**
* Defines the icon `name` inside the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
* Defines the icon `name` inside of the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
*/
"icon"?: string;
/**
Expand All @@ -624,7 +624,7 @@ declare namespace LocalJSX {
*/
"type": 'checkbox' | 'radio';
/**
* Defines the validation `validity` of the control. To reset validity to an undefined state, simply remove the attribute from the control.
* Defines the validation `validity` of the control. To reset validity to an undefiend state, simply remove the attribute from the control.
*/
"validity"?: null | 'true' | 'false';
/**
Expand Down
5 changes: 5 additions & 0 deletions packages/components/src/components/post-card-control/post-card-control.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@use '@swisspost/design-system-styles/core' as post;

:export {
dark-bg-selectors: [post.$dark-backgrounds];
}
22 changes: 4 additions & 18 deletions packages/components/src/components/post-card-control/post-card-control.scss
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,13 @@
@use 'sass:list';
@use 'sass:math';
@use '@swisspost/design-system-styles/core' as post;
@use '@swisspost/design-system-styles/components/form-check';

/*
* There are a whole bunch of !important statements in this file.
* There are a whole bunch of !important statments in this file.
* They are necessary and should not be removed, because we need to override the .form-check styles here.
*/

:host {

// remove as soon as all browser support :host-context()
// https://caniuse.com/?search=%3Ahost-context()
--post-card-control-bg-context: #{post.$backgrounds};

display: flex;
width: 100%;
}
Expand Down Expand Up @@ -422,22 +416,14 @@

// remove as soon as all browser support :host-context()
// https://caniuse.com/?search=%3Ahost-context()
:host(:not([data-context])) {
display: none;
}

:host([data-context*='fieldset']:not(:last-child)) {
.card-control {
:host(:not(:last-child)) {
.card-control[data-host-context*='fieldset'] {
margin-bottom: post.$size-regular;
}
}

$dark-bg-context: ();
@each $bg in post.$dark-backgrounds {
$dark-bg-context: list.append($dark-bg-context, "[data-context*='#{$bg}']", $separator: comma);
}
:host(:is(#{$dark-bg-context})) {
.card-control {
.card-control[data-host-context*='#{$bg}'] {
--post-card-control-border-color: #{post.$white};
--post-card-control-bg: transparent;
--post-card-control-color: #{post.$white};
Expand Down
55 changes: 33 additions & 22 deletions packages/components/src/components/post-card-control/post-card-control.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,14 @@ import {
import { checkNonEmpty, checkOneOf } from '@/utils';
import { version } from '@root/package.json';

// remove as soon as all browser support :host-context()
// https://caniuse.com/?search=%3Ahost-context()
import scss from './post-card-control.module.scss';
import { parse } from '@/utils/sass-export';

/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
const SCSS_VARIABLES: any = parse(scss);

let cardControlIds = 0;

/**
Expand Down Expand Up @@ -90,23 +98,23 @@ export class PostCardControl {
@Prop() readonly value: string = null;

/**
* Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data.
* Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms data.
*/
@Prop({ mutable: true }) checked = false;

/**
* Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data.
* Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms data.
*/
@Prop({ mutable: true }) disabled = false;

/**
* Defines the validation `validity` of the control.
* To reset validity to an undefined state, simply remove the attribute from the control.
* To reset validity to an undefiend state, simply remove the attribute from the control.
*/
@Prop({ mutable: true }) validity: null | 'true' | 'false' = null;

/**
* Defines the icon `name` inside the card.
* Defines the icon `name` inside of the card.
* <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
*/
@Prop() readonly icon: string = null;
Expand Down Expand Up @@ -166,7 +174,7 @@ export class PostCardControl {
}

@Watch('disabled')
updateControlDisabled() {
updateControlDisbled() {
this.controlSetChecked(this.checked);
}

Expand Down Expand Up @@ -314,31 +322,33 @@ export class PostCardControl {
}
}

// remove as soon as all browser support :host-context()
// https://caniuse.com/?search=%3Ahost-context()
private setHostContext() {
let bgContext: string;
const possibleBgContexts = window
.getComputedStyle(this.host)
.getPropertyValue('--post-card-control-bg-context')
.split(', ');

let formContext: string;
const possibleFromContexts = ['fieldset'];
// remove as soon as all browser support the :host-context() selector
private readonly HOST_CONTEXT_FILTERS = ['fieldset', ...SCSS_VARIABLES['dark-bg-selectors']];
private hostContext: string[];

private setHostContext() {
this.hostContext = [];
let element = this.host as HTMLElement;
while (element && (!bgContext || !formContext)) {
bgContext = bgContext ?? possibleBgContexts.find(selector => element.matches(selector));
formContext = formContext ?? possibleFromContexts.find(selector => element.matches(selector));

while (element) {
const localName = element.localName;
const id = element.id ? `#${element.id}` : '';
const classes =
element.classList.length > 0 ? `.${Array.from(element.classList).join('.')}` : '';

this.hostContext.push(`${localName}${id}${classes}`);
element = element.parentElement;
}

const hostContext = [bgContext, formContext].filter(context => !!context).join(' ');
this.host.setAttribute('data-context', hostContext);
this.hostContext = this.hostContext.filter(ctx =>
this.HOST_CONTEXT_FILTERS.find(f => ctx.includes(f)),
);
}

connectedCallback() {
// remove as soon as all browser support :host-context()
this.setHostContext();

this.initialChecked = this.checked;
}

Expand All @@ -358,6 +368,8 @@ export class PostCardControl {
'is-valid': this.validity !== null && this.validity !== 'false',
'is-invalid': this.validity === 'false',
}}
// remove as soon as all browser support :host-context()
data-host-context={this.hostContext.join(' ')}
>
<input
ref={el => (this.control = el)}
Expand Down Expand Up @@ -404,7 +416,6 @@ export class PostCardControl {
}

componentDidRender() {
this.setHostContext();
this.groupCollectMembers();
}

Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/components/post-card-control/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@

| Property | Attribute | Description | Type | Default |
| -------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ----------- |
| `checked` | `checked` | Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms' data. | `boolean` | `false` |
| `checked` | `checked` | Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms data. | `boolean` | `false` |
| `description` | `description` | Defines the description in the control-label. | `string` | `null` |
| `disabled` | `disabled` | Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms' data. | `boolean` | `false` |
| `icon` | `icon` | Defines the icon `name` inside the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span> | `string` | `null` |
| `disabled` | `disabled` | Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms data. | `boolean` | `false` |
| `icon` | `icon` | Defines the icon `name` inside of the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span> | `string` | `null` |
| `label` _(required)_ | `label` | Defines the text in the control-label. | `string` | `undefined` |
| `name` | `name` | Defines the `name` attribute of the control. <span className="alert alert-sm alert-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span> <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span> | `string` | `null` |
| `type` _(required)_ | `type` | Defines the `type` attribute of the control. | `"checkbox" \| "radio"` | `undefined` |
| `validity` | `validity` | Defines the validation `validity` of the control. To reset validity to an undefined state, simply remove the attribute from the control. | `"false" \| "true"` | `null` |
| `validity` | `validity` | Defines the validation `validity` of the control. To reset validity to an undefiend state, simply remove the attribute from the control. | `"false" \| "true"` | `null` |
| `value` | `value` | Defines the `value` attribute of the control. <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span> | `string` | `null` |


Expand Down
1 change: 1 addition & 0 deletions packages/components/stencil.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export const config: Config = {
rollupPlugins: {
before: [
postcss({
modules: true,
use: {
sass: {
includePaths: ['node_modules'],
Expand Down
38 changes: 13 additions & 25 deletions packages/styles/src/variables/_color.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,32 +184,20 @@ $background-colors: map.merge($background-colors, $signal-colors);
$background-colors: map.merge($background-colors, $signal-background-colors);
$background-colors: map.merge($background-colors, $accent-colors);

// Compile a list of light and dark backgrounds, used in the :is selector mixin at mixins/color
$_backgrounds: (
light: (),
dark: (),
) !default;

// Compile a list of dark backgrounds, used in the :is selector mixin at mixins/color
$dark-backgrounds: () !default;
@each $color-name, $color in $background-colors {
$key: contrast-fn.light-or-dark($color);
$values: list.append(map.get($_backgrounds, $key), '.bg-#{$color-name}', $separator: comma);
$_backgrounds: map.set($_backgrounds, $key, $values);
@if (contrast-fn.light-or-dark($color) == 'dark') {
$dark-backgrounds: list.append($dark-backgrounds, '.bg-#{$color-name}', $separator: comma);
}
}

@each $color-name, $color in $notification-colors {
$key: contrast-fn.light-or-dark($color);
$values: list.join(
map.get($_backgrounds, $key),
'.alert-#{$color-name}' 'post-alert[type=#{$color-name}]',
$separator: comma
);
$_backgrounds: map.set($_backgrounds, $key, $values);
@if (contrast-fn.light-or-dark($color) == 'dark') {
$dark-backgrounds: list.append($dark-backgrounds, '.alert-#{$color-name}', $separator: comma);
$dark-backgrounds: list.append(
$dark-backgrounds,
'post-alert[type=#{$color-name}]',
$separator: comma
);
}
}

$backgrounds: list.join(
map.get($_backgrounds, light),
map.get($_backgrounds, dark),
$separator: comma
);
$dark-backgrounds: map.get($_backgrounds, dark) !default;
$light-backgrounds: map.get($_backgrounds, light) !default;

0 comments on commit 12b7c17

Please sign in to comment.