ADSDEV-1117 fix broken x-privacy-manager stylesheet and convert to st…

…yled component
Financial-Times · Jun 22, 2022 · 18b3614 · 18b3614
1 parent ff26a3b
commit 18b3614
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/components/x-privacy-manager/src/components/radio-btn.jsx b/components/x-privacy-manager/src/components/radio-btn.jsx
@@ -1,5 +1,7 @@
 import { h } from '@financial-times/x-engine'
 
+import './radio-btn.scss'
+
 /**
  * @param {{
  *   name: string,

diff --git a/components/x-privacy-manager/src/components/radio-btn.scss b/components/x-privacy-manager/src/components/radio-btn.scss
@@ -13,7 +13,7 @@ $transitionDuration: 0.1s;
 .x-privacy-manager-radio-button {
 	flex: 1;
 
-	& + .control {
+	& + .x-privacy-manager-radio-button {
 		margin-top: oSpacingByName(s4);
 
 		@include oGridRespondTo($from: S) {
@@ -38,14 +38,14 @@ $transitionDuration: 0.1s;
 	cursor: pointer;
 	background-color: oColorsByName('white');
 
-	.input:checked + & {
+	.x-privacy-manager-radio-button__input:checked + & {
 		background-color: oColorsByName('teal');
 		color: oColorsByName('white');
 	}
 
 	// Since <input> itself is hidden, apply a familiar focus style to the visible <label>
 	// As adjacent siblings we can reflect the <input>'s focus state here
-	.input:focus + & {
+	.x-privacy-manager-radio-button__input:focus + & {
 		outline: 2px solid oColorsByName('teal-40');
 		outline-offset: 3px;
 		background-color: oColorsByName('teal-40');
@@ -87,7 +87,7 @@ $transitionDuration: 0.1s;
 	stroke-width: 3px;
 	fill: transparent;
 
-	.input:not(:checked) + .x-privacy-manager-label:hover & {
+	.x-privacy-manager-radio-button__input:not(:checked) + .x-privacy-manager-label:hover & {
 		stroke: oColorsByName('teal-40');
 	}
 }
@@ -97,11 +97,11 @@ $transitionDuration: 0.1s;
 
 	fill: transparent;
 
-	.input:not(:checked) + .x-privacy-manager-label:hover & {
+	.x-privacy-manager-radio-button__input:not(:checked) + .x-privacy-manager-label:hover & {
 		fill: oColorsByName('teal-40');
 	}
 
-	.input:checked + .x-privacy-manager-label & {
+	.x-privacy-manager-radio-button__input:checked + .x-privacy-manager-label & {
 		fill: currentColor;
 	}
 }
diff --git a/components/x-privacy-manager/src/privacy-manager.jsx b/components/x-privacy-manager/src/privacy-manager.jsx
@@ -6,6 +6,8 @@ import { RadioBtn } from './components/radio-btn'
 import { withCustomActions } from './actions'
 import * as utils from './utils'
 
+import './privacy-manager.scss'
+
 const defaultButtonText = {
 	allow: { label: 'Allow', text: 'See personalised adverts' },
 	block: { label: 'Block', text: 'Opt out of personalised adverts' },

diff --git a/components/x-privacy-manager/src/privacy-manager.scss b/components/x-privacy-manager/src/privacy-manager.scss
@@ -4,8 +4,6 @@
 @import '@financial-times/o-spacing/main';
 @import '@financial-times/o-typography/main';
 
-@import './components/radio-btn';
-
 %vertical-middle {
 	display: inline-block;
 	vertical-align: middle;

diff --git a/components/x-privacy-manager/storybook/index.jsx b/components/x-privacy-manager/storybook/index.jsx
@@ -1,5 +1,3 @@
-import '../src/privacy-manager.scss'
-
 export { LegislationCCPA } from './stories/legislation-ccpa'
 export { LegislationGDPR } from './stories/legislation-gdpr'