Merge branch 'main' into redesign-event-cards

.storybook/helpers/index.js

@@ -1,5 +1,21 @@
+import backgroundOverride from "./backgroundOverride";
+import exampleComponent from "./exampleComponent";
 import html from "./html";
+import idHelper from "./idHelper";
+import parentWrapper from "./parentWrapper";
 import repeat from "./repeat";
-import backgroundOverride from "./backgroundOverride";
+import scalingRuleWrapper from "./scalingRuleWrapper";
+import srcSet from "./srcSet";
+
+export { 
+  backgroundOverride,
+  exampleComponent,
+  idHelper,
+  html,
+  parentWrapper,
+  repeat,
+  scalingRuleWrapper,
+  srcSet
+ };
+
 
-export { html, repeat, backgroundOverride };

.storybook/helpers/srcSet.js

@@ -0,0 +1,8 @@
+export default (srcSet) => {
+  const widths = Object.keys(srcSet.sizes);
+  return widths
+    .map((width) => {
+      return `${srcSet.sizes[width]} ${width},`;
+    })
+    .join("\n");
+};

.storybook/main.js

@@ -20,6 +20,10 @@ module.exports = {
 			include: path.resolve(__dirname, "../"),
 		});
 
+		config.resolve ||= {}
+		config.resolve.alias ||= {}
+		config.resolve.alias[".storybook"] = path.resolve(__dirname)
+
 		// Return the altered config
 		return config;
 	},
@@ -30,7 +34,7 @@ module.exports = {
 			options: {
 				// https://storybook.js.org/docs/html/essentials/introduction
 				actions: false,
-				backgrounds: true,
+				backgrounds: false,
 				controls: true,
 				docs: false,
 				toolbars: false,

.storybook/preview.js

@@ -1,8 +1,6 @@
-import { addDecorator, addParameters } from "@storybook/html";
+import { addDecorator } from "@storybook/html";
 import { useEffect } from "@storybook/client-api";
 import global from "../src/global/global";
-import colorVariables from "../src/base/_colors.scss";
-import "./storybook.css";
 
 const marbleGlobalJSDecorator = (storyFn) => {
 	useEffect(global);
@@ -22,13 +20,6 @@ export const parameters = {
 			],
 		},
 	},
-	backgrounds: {
-		values: [
-			{ name: "white", value: colorVariables.colorWhite },
-			{ name: "grey500", value: colorVariables.colorGrey500 },
-			{ name: "black", value: colorVariables.colorBlack },
-		],
-	},
 	layout: "fullscreen",
 	options: {
 		storySort: {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@metmuseum/marble",
-	"version": "0.12.33",
+	"version": "0.13.3",
 	"description": "The Design System of The Metropolitan Museum Of Art",
 	"main": "./src/index.mjs",
 	"style": "./dist/marble.css",
@@ -41,7 +41,6 @@
 		"path": "^0.12.7",
 		"path-parse": "^1.0.7",
 		"postcss": "^8.4.4",
-		"postcss-inline-svg": "^5.0.0",
 		"raw-loader": "^4.0.2",
 		"release-it": "^14.11.5",
 		"sass": "^1.43.3",

src/base/_sizes.scss

@@ -1,4 +1,6 @@
 //TODO - this is no longer true except on the homepage
+@use "sass:math";
+
 $site-width: 1200px;
 $grid-gutter: 20px;
 
@@ -49,8 +51,8 @@ $spacing-component-vertical: $spacing-l;
 	$small-screen: 375; //iPhone width.
 	$large-screen: 1440; //Macbook width.
 
-	$base-size: $mobile-size / 16;
-	$base-size: $mobile-size / 16;
+	$base-size: math.div($mobile-size, 16);
+	$base-size: math.div($mobile-size, 16);
 	$calc: calc(#{$base-size}rem + (#{$desktop-size} - #{$mobile-size}) * ((100vw - #{$small-screen}px) / (#{$large-screen} - #{$small-screen})));
 	@return $calc;
 }

src/base/_z-index.scss

@@ -1,4 +1,5 @@
 $z-layers: (
+	"invisible-link": 999,
 	"filter-set": 101,
 	"marble-card--active": 99,
 	"vimeo-play": 19,

src/base/mixins/_typography.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "../sizes";
 @import "../colors";
 
@@ -126,7 +128,7 @@ $metserif: "MetSerif", "Georgia", "Times New Roman", Times, serif;
 	font-style: normal;
 	font-weight: 600;
 	letter-spacing: 0.7px;
-	line-height: (14/18);
+	line-height: math.div(14, 18);
 	text-transform: uppercase;
 }
 

src/components/audio-player/audio-player-story-helpers.js

@@ -1,6 +1,6 @@
 import { text } from "@storybook/addon-knobs";
 import AudioPlayer from "./audio-player.js";
-import greekHall1x1 from "../../../.storybook/assets/images/greek-hall/1x1";
+import greekHall1x1 from ".storybook/assets/images/greek-hall/1x1";
 
 const exampleResponse = [{
 	id: "C0276F7DFD034191B37BB04E9048BB03",

src/components/audio-player/audio-player.stories.js

@@ -1,7 +1,7 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { useEffect } from "@storybook/client-api";
 import { withKnobs, boolean, select } from "@storybook/addon-knobs";
-import { playIcon, pauseIcon, rewindTenSecondsIcon, forwardTenSecondsIcon, upCaretIcon } from "../../../.storybook/assets/svg";
+import { playIcon, pauseIcon, rewindTenSecondsIcon, forwardTenSecondsIcon, upCaretIcon } from ".storybook/assets/svg";
 import coverImageTemplate from "./cover-image-template";
 import { initializeAudioPlayers, track, example } from "./audio-player-story-helpers";