Fix css exports (#1515)

* feat!: release v1 o3-foundation * feat: - remove exports keyword from package json - instead generate cjs,esm folders - fix imports - update readmes --------- Co-authored-by: MaryGodservant <[email protected]> Co-authored-by: Fox <[email protected]>
Financial-Times · Mar 28, 2024 · 3866d9c · 3866d9c
1 parent f11860c
commit 3866d9c
Show file tree

Hide file tree

Showing 27 changed files with 188 additions and 131 deletions.
diff --git a/apps/dictionary/scripts/build-config/build.js b/apps/dictionary/scripts/build-config/build.js
@@ -20,7 +20,7 @@ function buildBrandCSS() {
 
 function buildIconCSS() {
 	const sources = [path.join(getBasePath(), 'tokens/icons/icons.json')];
-	const destination = 'build/icons.css';
+	const destination = 'css/icons.css';
 	buildCSS({sources, destination});
 }
 

diff --git a/components/o3-button/.gitignore b/components/o3-button/.gitignore
@@ -7,3 +7,7 @@
 .idea/
 /demos/local
 /coverage
+css
+!src/css
+cjs
+esm
diff --git a/components/o3-button/README.md b/components/o3-button/README.md
@@ -251,16 +251,16 @@ To make a button disabled add the `disabled` attribute. To visually hide the dis
 
 ## JSX
 
-For React users, Origami components now include JSX templates. Import JSX templates along with component CSS.
+For React users, Origami components now include JSX templates. Import JSX templates along with component CSS. JSX templates are exported as `cjs` (common JS) and `esm` (ECMAScript) modules, so depending on your system configuration, you may need to import the correct module type.
 
 See [Storybook for full o3-button JSX documentation](https://main--64faf6b1815b6c0106f82e74.chromatic.com/?path=/docs/core-o3-button--jsx-documentation).
 
 For example, for a primary button:
 
 ```jsx
-import {Button} from '@financial-times/o3-button';
+import {Button} from '@financial-times/o3-button/cjs';
 
-import '@finacial-times/o3-button/css/[your brand].css';
+import '@financial-times/o3-button/css/[your brand].css';
 
 <div data-o3-brand="[your brand]">
 	<Button label="Hello" type="primary" />
@@ -270,9 +270,9 @@ import '@finacial-times/o3-button/css/[your brand].css';
 For pagination:
 
 ```jsx
-import {ButtonPagination} from '@financial-times/o3-button';
+import {ButtonPagination} from '@financial-times/o3-button/cjs';
 
-import '@finacial-times/o3-button/css/[your brand].css';
+import '@financial-times/o3-button/css/[your brand].css';
 
 <div data-o3-brand="[your brand]">
 	<ButtonPagination

diff --git a/components/o3-button/main.css b/components/o3-button/main.css
@@ -1,4 +1,4 @@
-@import '@financial-times/o3-foundation/icons.css';
+@import '@financial-times/o3-foundation/css/icons.css';
 
 .o3-button {
 	--_o3-button-min-width: 80px;

diff --git a/components/o3-button/package.json b/components/o3-button/package.json
@@ -12,23 +12,16 @@
 		"email": "[email protected]"
 	},
 	"license": "MIT",
-	"types": "./build/jsx/index.d.ts",
+	"main": "./cjs/index.js",
+	"module": "./esm/index.js",
 	"files": [
-		"build",
-		"package.json"
+		"cjs",
+		"esm",
+		"css",
+		"origami.json",
+		"package.json",
+		"README.md"
 	],
-	"module": "./build/jsx/index.mjs",
-	"main": "./build/jsx/index.js",
-	"exports": {
-		".": {
-			"types": "./build/jsx/index.d.ts",
-			"import": "./build/jsx/index.mjs",
-			"require": "./build/jsx/index.js",
-			"default": "./build/jsx/index.js"
-		},
-		"./css/*.css": "./build/css/src/css/brands/*.css",
-		"./package.json": "./package.json"
-	},
 	"scripts": {
 		"build": "bash ../../scripts/component/build-o3.bash o3-button"
 	},

diff --git a/components/o3-button/src/css/brands/core.css b/components/o3-button/src/css/brands/core.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-foundation/core.css';
+@import '@financial-times/o3-foundation/css/core.css';
 @import '../tokens/core/o3-button/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-button/src/css/brands/internal.css b/components/o3-button/src/css/brands/internal.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-foundation/internal.css';
+@import '@financial-times/o3-foundation/css/internal.css';
 @import '../tokens/internal/o3-button/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-button/src/css/brands/professional.css b/components/o3-button/src/css/brands/professional.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-foundation/professional.css';
+@import '@financial-times/o3-foundation/css/professional.css';
 @import '../tokens/core/professional/o3-button/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-button/src/css/brands/sustainable-views.css b/components/o3-button/src/css/brands/sustainable-views.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-foundation/sustainable-views.css';
+@import '@financial-times/o3-foundation/css/sustainable-views.css';
 @import '../tokens/sustainable-views/o3-button/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-button/src/css/brands/whitelabel.css b/components/o3-button/src/css/brands/whitelabel.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-foundation/whitelabel.css';
+@import '@financial-times/o3-foundation/css/whitelabel.css';
 @import '../tokens/whitelabel/o3-button/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-foundation/.gitignore b/components/o3-foundation/.gitignore
@@ -8,3 +8,5 @@
 /coverage
 !icons/
 /build/
+css
+!src/css
diff --git a/components/o3-foundation/README.md b/components/o3-foundation/README.md
@@ -17,10 +17,10 @@
 
 `o3-foundation` supports brands: `core`, `internal`, `professional`, `sustainable-views` and `whitelabel`.
 
-Import your chosen brand to begin using tokens in your CSS:
+Import your chosen brand to begin using tokens in your CSS/SCSS:
 
 ```css
-@import '@financial-times/o3-foundation/core.css';
+@import '@financial-times/o3-foundation/css/core.css';
 
 body {
  background-color: var(--o3-color-use-case-page-background);
@@ -32,8 +32,8 @@ body {
 To add support for another brand, import its tokens too:
 
 ```diff
-+@import '@financial-times/o3-foundation/core.css';
-+@import '@financial-times/o3-foundation/internal.css';
++@import '@financial-times/o3-foundation/css/core.css';
++@import '@financial-times/o3-foundation/css/internal.css';
 
 .example-custom-link {
  color: var(--o3-color-link);

diff --git a/components/o3-foundation/main.css b/components/o3-foundation/main.css
@@ -178,33 +178,64 @@ input::-moz-focus-inner {
 	outline: 2px solid var(--o3-focus-use-case-outline-inverse-color);
 }
 
-input,
-button,
-select,
-textarea {
+input:focus,
+button:focus,
+select:focus,
+textarea:focus {
+	box-shadow: var(--o3-focus-use-case-ring-inner), var(--o3-focus-use-case-ring-outer);
+		outline: unset;
+}
+
+[data-o3-theme='inverse'] input:focus,
+[data-o3-theme='inverse'] button:focus,
+[data-o3-theme='inverse'] select:focus,
+[data-o3-theme='inverse'] textarea:focus,
+:where([data-o3-theme='inverse']) input:focus,
+:where([data-o3-theme='inverse']) button:focus,
+:where([data-o3-theme='inverse']) select:focus,
+:where([data-o3-theme='inverse']) textarea:focus {
+	box-shadow: var(--o3-focus-use-case-ring-inverse-inner), var(--o3-focus-use-case-ring-inverse-outer);
+}
+
+/* focus-visible styles */
+
+@supports selector(:focus-visible) {
+	input:focus,
+	button:focus,
+	select:focus,
+	textarea:focus,
 	:focus {
-		box-shadow: var(--o3-focus-use-case-ring-inner), var(--o3-focus-use-case-ring-outer);
 		outline: unset;
+		box-shadow: unset;
 	}
 
-	[data-o3-theme='inverse']:focus,
-	:where([data-o3-theme='inverse']) :focus {
-		box-shadow: var(--o3-focus-use-case-ring-inverse-inner), var(--o3-focus-use-case-ring-inverse-outer);
+	:focus-visible {
+		outline: 2px solid var(--o3-focus-use-case-outline-color);
+	}
+
+	[data-o3-theme='inverse']:focus-visible,
+	:where([data-o3-theme='inverse']) :focus-visible {
+		outline: 2px solid var(--o3-focus-use-case-outline-inverse-color);
+	}
+
+
+	input:focus-visible,
+	button:focus-visible,
+	select:focus-visible,
+	textarea:focus-visible {
+		box-shadow: var(--o3-focus-use-case-ring-inner), var(--o3-focus-use-case-ring-outer);
+		outline: unset;
 	}
 
-	@supports selector(:focus-visible) {
-		:focus {
-			box-shadow: unset;
-		}
-
-		:focus-visible {
-			box-shadow: var(--o3-focus-use-case-ring-inner), var(--o3-focus-use-case-ring-outer);
-			outline: unset;
-		}
-		[data-o3-theme='inverse']:focus-visible,
-		:where([data-o3-theme='inverse']) :focus-visible {
-			box-shadow: var(--o3-focus-use-case-ring-inverse-inner), var(--o3-focus-use-case-ring-inverse-outer);
-		}
+	[data-o3-theme='inverse'] input:focus-visible,
+	[data-o3-theme='inverse'] button:focus-visible,
+	[data-o3-theme='inverse'] select:focus-visible,
+	[data-o3-theme='inverse'] textarea:focus-visible,
+	:where([data-o3-theme='inverse']) input:focus-visible,
+	:where([data-o3-theme='inverse']) button:focus-visible,
+	:where([data-o3-theme='inverse']) select:focus-visible,
+	:where([data-o3-theme='inverse']) textarea:focus-visible {
+		box-shadow: var(--o3-focus-use-case-ring-inverse-inner), var(--o3-focus-use-case-ring-inverse-outer);
 	}
 }
 
@@ -220,29 +251,29 @@ textarea {
 }
 
 /* add focus rings on specific element */
-.o3-apply-focus-rings {
-	:focus {
+
+.o3-apply-focus-rings:focus {
+	box-shadow: var(--o3-focus-use-case-ring-inner), var(--o3-focus-use-case-ring-outer);
+	outline: unset;
+}
+
+[data-o3-theme='inverse'].o3-apply-focus-rings:focus,
+:where([data-o3-theme='inverse']) .o3-apply-focus-rings:focus {
+	box-shadow: var(--o3-focus-use-case-ring-inverse-inner), var(--o3-focus-use-case-ring-inverse-outer);
+}
+
+@supports selector(:focus-visible) {
+	.o3-apply-focus-rings:focus {
+		box-shadow: unset;
+	}
+
+	.o3-apply-focus-rings:focus-visible {
 		box-shadow: var(--o3-focus-use-case-ring-inner), var(--o3-focus-use-case-ring-outer);
 		outline: unset;
 	}
 
-	[data-o3-theme='inverse']:focus,
-	:where([data-o3-theme='inverse']) :focus {
+	[data-o3-theme='inverse'].o3-apply-focus-rings:focus-visible,
+	:where([data-o3-theme='inverse']) .o3-apply-focus-rings:focus-visible {
 		box-shadow: var(--o3-focus-use-case-ring-inverse-inner), var(--o3-focus-use-case-ring-inverse-outer);
 	}
-
-	@supports selector(:focus-visible) {
-		:focus {
-			box-shadow: unset;
-		}
-
-		:focus-visible {
-			box-shadow: var(--o3-focus-use-case-ring-inner), var(--o3-focus-use-case-ring-outer);
-			outline: unset;
-		}
-		[data-o3-theme='inverse']:focus-visible,
-		:where([data-o3-theme='inverse']) :focus-visible {
-			box-shadow: var(--o3-focus-use-case-ring-inverse-inner), var(--o3-focus-use-case-ring-inverse-outer);
-		}
-	}
 }
diff --git a/components/o3-foundation/package.json b/components/o3-foundation/package.json
@@ -12,17 +12,11 @@
 		"email": "[email protected]"
 	},
 	"license": "MIT",
-	"exports": {
-		"./core.css": "./build/css/src/css/brands/core.css",
-		"./professional.css": "./build/css/src/css/brands/professional.css",
-		"./internal.css": "./build/css/src/css/brands/internal.css",
-		"./sustainable-views.css": "./build/css/src/css/brands/sustainable-views.css",
-		"./whitelabel.css": "./build/css/src/css/brands/whitelabel.css",
-		"./icons.css": "./build/icons.css"
-	},
 	"files": [
-		"build",
-		"origami.json"
+		"css",
+		"origami.json",
+		"package.json",
+		"README.md"
 	],
 	"scripts": {
 		"build": "node ../../apps/dictionary/scripts/build-config/build.js && bash ../../scripts/component/build-o3.bash o3-foundation"

diff --git a/components/o3-tooltip/.gitignore b/components/o3-tooltip/.gitignore
@@ -6,3 +6,8 @@
 /build/
 .idea/
 /coverage
+css
+!src/css
+cjs
+esm
+browser
diff --git a/components/o3-tooltip/README.md b/components/o3-tooltip/README.md
@@ -79,10 +79,10 @@ To style `o3-tooltip` import brand specific css, this varies depending on your p
 
 ## JSX
 
-`o3-tooltip` exports two JSX templates, `TooltipOnboarding` and `TooltipToggle` for each tooltip component. This means copy-pasting html can be avoided. For example:
+`o3-tooltip` exports two JSX templates, `TooltipOnboarding` and `TooltipToggle` for each tooltip component. JSX templates are exported as `cjs` (common JS) and `esm` (ECMAScript) modules, so depending on your system configuration, you may need to import the correct module type. TSX templates can help to avoid copy-pasting html. For example:
 
 ```jsx
-import {TooltipOnboarding, TooltipToggle} from '@financial-times/o3-tooltip';
+import {TooltipOnboarding, TooltipToggle} from '@financial-times/o3-tooltip/cjs';
 
 import '@financial-times/o3-tooltip'; // import the JavaScript needed for custom elements on client side
 

diff --git a/components/o3-tooltip/main.css b/components/o3-tooltip/main.css
@@ -1,4 +1,4 @@
-@import '@financial-times/o3-foundation/icons.css';
+@import '@financial-times/o3-foundation/css/icons.css';
 
 .o3-tooltip {
 	--padding-top: var(--o3-spacing-3xs);

diff --git a/components/o3-tooltip/package.json b/components/o3-tooltip/package.json
@@ -16,25 +16,18 @@
 		"email": "[email protected]"
 	},
 	"license": "MIT",
-	"types": "./build/jsx/index.d.ts",
-	"browser": "./build/js/index.mjs",
-	"main": "./build/jsx/index.js",
-	"module": "./build/jsx/index.mjs",
+	"browser": "./browser/index.js",
+	"main": "./cjs/index.js",
+	"module": "./esm/index.js",
 	"files": [
-		"build",
-		"origami.json"
+		"cjs",
+		"esm",
+		"browser",
+		"css",
+		"origami.json",
+		"package.json",
+		"README.md"
 	],
-	"exports": {
-		".": {
-			"types": "./build/jsx/index.d.ts",
-			"browser": "./build/js/index.mjs",
-			"import": "./build/jsx/index.mjs",
-			"require": "./build/jsx/index.js",
-			"default": "./build/jsx/index.js"
-		},
-		"./css/*.css": "./build/css/src/css/brands/*.css",
-		"./package.json": "./package.json"
-	},
 	"scripts": {
 		"build": "bash ../../scripts/component/build-o3.bash o3-tooltip"
 	},

diff --git a/components/o3-tooltip/src/css/brands/core.css b/components/o3-tooltip/src/css/brands/core.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-foundation/core.css';
+@import '@financial-times/o3-foundation/css/core.css';
 @import '../tokens/core/o3-tooltip/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-tooltip/src/css/brands/internal.css b/components/o3-tooltip/src/css/brands/internal.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-foundation/internal.css';
+@import '@financial-times/o3-foundation/css/internal.css';
 @import '../tokens/internal/o3-tooltip/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-tooltip/src/css/brands/professional.css b/components/o3-tooltip/src/css/brands/professional.css
@@ -1,4 +1,4 @@
-@import '@financial-times/o3-foundation/professional.css';
+@import '@financial-times/o3-foundation/css/professional.css';
 @import '../tokens/core/professional/o3-tooltip/_variables.css';
 @import '../../../main.css';
 

diff --git a/components/o3-tooltip/src/css/brands/sustainable-views.css b/components/o3-tooltip/src/css/brands/sustainable-views.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-foundation/sustainable-views.css';
+@import '@financial-times/o3-foundation/css/sustainable-views.css';
 @import '../tokens/sustainable-views/o3-tooltip/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-tooltip/src/css/brands/whitelabel.css b/components/o3-tooltip/src/css/brands/whitelabel.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-foundation/whitelabel.css';
+@import '@financial-times/o3-foundation/css/whitelabel.css';
 @import '../tokens/whitelabel/o3-tooltip/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-tooltip/src/tsx/onboardingTooltip.tsx b/components/o3-tooltip/src/tsx/onboardingTooltip.tsx
@@ -1,4 +1,4 @@
-import type {OnboardingToolTipProps} from '../types';
+import type {OnboardingToolTipProps} from '../types/index';
 
 export function TooltipOnboarding({
 	targetId,
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,3 +8,5 @@ @@
     /coverage
     !icons/
     /build/
+    css
+    !src/css