Merge branch 'release/v1.11.1'

querkmachine · querkmachine · commit 84bb9152ec7a · 2021-07-29T20:31:55.000+01:00
* release/v1.11.1:
  Bump version number to 1.11.1.
  Modify Fractal configuration.
  Remove uses of slash division from Sass files.
  Update Husky config.
  Update dependencies.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx pretty-quick --staged
diff --git a/components/_pages/stream-team/_stream-team.scss b/components/_pages/stream-team/_stream-team.scss
@@ -35,7 +35,7 @@
 	&__inner {
 		display: grid;
 		grid-column-gap: tokens.$grid-gutter;
-		grid-row-gap: tokens.$grid-gutter / 2;
+		grid-row-gap: tokens.$grid-gutter * 0.5;
 		grid-template-areas: "main" "twitter" "schedule" "list";
 		grid-template-columns: 1fr;
 		@include media.mq(50em) {
diff --git a/components/_templates/generic/_generic.scss b/components/_templates/generic/_generic.scss
@@ -9,7 +9,7 @@
 		@include layout.container;
 		display: grid;
 		grid-column-gap: tokens.$grid-gutter;
-		grid-row-gap: tokens.$grid-gutter / 2;
+		grid-row-gap: tokens.$grid-gutter * 0.5;
 		grid-template-areas: "header" "main" "sidebar";
 		grid-template-columns: 1fr;
 		@include media.mq(50em) {
diff --git a/components/_templates/meet/_meet.scss b/components/_templates/meet/_meet.scss
@@ -11,7 +11,7 @@
 	$leftMarginWidth: 14%;
 	$leftMarginTextureWidth: 2em;
 	$colGutterWidth: 1em;
-	$rowGutterWidth: tokens.$grid-gutter / 2;
+	$rowGutterWidth: tokens.$grid-gutter * 0.5;
 	&__inner {
 		display: grid;
 		grid-template-columns: $colGutterWidth auto $colGutterWidth;
diff --git a/components/_templates/search/_search.scss b/components/_templates/search/_search.scss
@@ -9,9 +9,9 @@
 		@include layout.container;
 	}
 	&__header {
-		padding-top: tokens.$grid-gutter / 2;
-		padding-bottom: tokens.$grid-gutter / 2;
-		margin-bottom: tokens.$grid-gutter / 2;
+		padding-top: tokens.$grid-gutter * 0.5;
+		padding-bottom: tokens.$grid-gutter * 0.5;
+		margin-bottom: tokens.$grid-gutter * 0.5;
 		color: var(--theme-accent);
 		background-color: var(--theme-accent-mod);
 	}
diff --git a/components/footer/_footer.scss b/components/footer/_footer.scss
@@ -7,7 +7,7 @@
 
 .sb-footer {
 	$padding: tokens.$grid-gutter;
-	$narrowPadding: tokens.$grid-gutter / 2;
+	$narrowPadding: tokens.$grid-gutter * 0.5;
 	margin-top: $padding * 2;
 	padding-top: $padding;
 	padding-bottom: calc(#{$padding} + env(safe-area-inset-bottom));
diff --git a/components/gallery/_gallery.scss b/components/gallery/_gallery.scss
@@ -2,7 +2,7 @@
 
 .sb-gallery {
 	display: grid;
-	grid-gap: tokens.$grid-gutter / 2;
+	grid-gap: tokens.$grid-gutter * 0.5;
 	grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
 	&__link {
 		display: block;
diff --git a/components/map/_map.scss b/components/map/_map.scss
@@ -72,7 +72,7 @@
 	&__list-more {
 		@include helpers.button-reset;
 		@include typography.all-caps;
-		margin-top: $gutter / 2;
+		margin-top: $gutter * 0.5;
 		padding: 0.25em 0.5em;
 		border: 2px solid var(--theme-accent-mod);
 		background-color: var(--theme-background);
diff --git a/components/phase-banner/_phase-banner.scss b/components/phase-banner/_phase-banner.scss
@@ -29,7 +29,7 @@
 	}
 	&__summary {
 		display: inline-block;
-		padding: ($bannerPadding / 2) $bannerPadding;
+		padding: ($bannerPadding * 0.5) $bannerPadding;
 		#{$self}--interactive & {
 			padding-left: ($bannerPadding + $arrowMargin);
 			cursor: pointer;
@@ -61,7 +61,7 @@
 	}
 	&__body {
 		max-width: tokens.$measure-default;
-		padding: ($bannerPadding / 2) $bannerPadding ($bannerPadding / 2)
+		padding: ($bannerPadding * 0.5) $bannerPadding ($bannerPadding * 0.5)
 			($bannerPadding + $arrowMargin);
 	}
 }
diff --git a/components/stack/_stack.scss b/components/stack/_stack.scss
@@ -4,6 +4,6 @@
 	display: flex;
 	flex-direction: column;
 	> * + * {
-		margin-top: tokens.$grid-gutter / 2;
+		margin-top: tokens.$grid-gutter * 0.5;
 	}
 }
diff --git a/components/switcher/_switcher.scss b/components/switcher/_switcher.scss
@@ -5,7 +5,7 @@
 	display: flex;
 	flex-direction: column;
 	> * + * {
-		margin-top: tokens.$grid-gutter / 2;
+		margin-top: tokens.$grid-gutter * 0.5;
 	}
 	@include media.mq(50em) {
 		flex-direction: row;
diff --git a/gulpfiles/fractal.js b/gulpfiles/fractal.js
@@ -10,7 +10,7 @@ function getDesignTokens() {
 	const dirPath = path.resolve(__dirname, "../tokens");
 	const files = fs.readdirSync(dirPath);
 	let tokenData = {};
-	files.forEach(file => {
+	files.forEach((file) => {
 		const fileName = file.split(".")[0];
 		const fileProps = yamljs.load(path.resolve(dirPath, file)).props;
 		tokenData[fileName] = fileProps ? fileProps : {};
@@ -23,41 +23,41 @@ function getDesignTokens() {
 const twig = require("@frctl/twig")({
 	method: "fs",
 	namespaces: {
-		components: path.join(__dirname, "../components")
+		components: path.join(__dirname, "../components"),
 	},
 	functions: {
-		merge: function(...objs) {
+		merge: function (...objs) {
 			let result = {};
-			objs.forEach(obj => {
+			objs.forEach((obj) => {
 				if (!obj || typeof obj !== "object") {
 					return;
 				}
 				result = _.merge(result, obj);
 			});
 			return result;
-		}
-	}
+		},
+	},
 });
 
 // Nunjucks (for docs)
 const nunjucks = require("@frctl/nunjucks")({
 	paths: ["components", "docs"],
 	globals: {
-		tokens: getDesignTokens()
+		tokens: getDesignTokens(),
 	},
 	filters: {
-		theoTokenCategory: function(object, filterCategory) {
+		theoTokenCategory: function (object, filterCategory) {
 			let filteredTokens = {};
-			Object.keys(object).forEach(key => {
+			Object.keys(object).forEach((key) => {
 				const val = object[key];
 				if (val.category === filterCategory) filteredTokens[key] = val;
 			});
 			return filteredTokens;
 		},
-		theoTokenSass: function(string) {
+		theoTokenSass: function (string) {
 			return `$${string.replace(/_/g, "-")}`;
-		}
-	}
+		},
+	},
 });
 
 fractal.set("project.title", `Plimsoll design system`);
@@ -71,24 +71,24 @@ fractal.components.set("statuses", {
 	prototype: {
 		label: "Prototype",
 		description: "Prototype code. Do not implement.",
-		color: "#FF3333"
+		color: "#FF3333",
 	},
 	wip: {
 		label: "Work in progress",
 		description: "Unfinished and subject to change. Implement with caution.",
-		color: "#FF9233"
+		color: "#FF9233",
 	},
 	readme: {
 		label: "Needs documentation",
 		description:
 			"Code complete but missing documentation. Implement with caution.",
-		color: "#176BC1"
+		color: "#176BC1",
 	},
 	ready: {
 		label: "Ready",
 		description: "Code and documentation complete. Ready to implement.",
-		color: "#29CC29"
-	}
+		color: "#29CC29",
+	},
 });
 
 fractal.docs.engine(nunjucks);
@@ -100,9 +100,9 @@ fractal.web.set("builder.dest", "./export");
 fractal.web.theme(
 	mandelbrot({
 		format: "yaml",
-		nav: ["docs", "components", "assets"],
-		panels: ["notes", "view", "params", "html", "resources", "info"],
-		styles: ["default", "/css/styleguide.css"]
+		nav: ["search", "docs", "components", "assets"],
+		panels: ["notes", "view", "html", "resources", "info"],
+		styles: ["default", "/css/styleguide.css"],
 	})
 );
 
@@ -115,9 +115,9 @@ gulp.task("fractal:watch", () => {
 	const logger = fractal.cli.console;
 	const server = fractal.web.server({
 		sync: true,
-		port: 9000
+		port: 9000,
 	});
-	server.on("error", err => {
+	server.on("error", (err) => {
 		logger.error(err.message);
 	});
 	return server.start().then(() => {
@@ -131,7 +131,7 @@ gulp.task("fractal", () => {
 	builder.on("progress", (completed, total) => {
 		logger.update(`Exported ${completed} of ${total} items.`, "info");
 	});
-	builder.on("error", err => {
+	builder.on("error", (err) => {
 		logger.error(err.message);
 	});
 	return builder.build().then(() => {
diff --git a/gulpfiles/images.js b/gulpfiles/images.js
@@ -18,7 +18,7 @@ gulp.task("images:minify", () => {
 		.pipe(newer("./dist/images"))
 		.pipe(
 			imagemin([
-				imagemin.jpegtran({
+				imagemin.mozjpeg({
 					progressive: true
 				}),
 				imagemin.optipng({
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/src/sass/mixins/_forms.scss b/src/sass/mixins/_forms.scss
diff --git a/src/sass/mixins/_theme.scss b/src/sass/mixins/_theme.scss
diff --git a/src/sass/mixins/_typography.scss b/src/sass/mixins/_typography.scss
diff --git a/style.css b/style.css

Original file line number	Diff line number	Diff line change
`@@ -9,9 +9,9 @@`
`9`	`9`	`@include layout.container;`
`10`	`10`	`}`
`11`	`11`	`&__header {`
`12`		`- padding-top: tokens.$grid-gutter / 2;`
`13`		`- padding-bottom: tokens.$grid-gutter / 2;`
`14`		`- margin-bottom: tokens.$grid-gutter / 2;`
	`12`	`+ padding-top: tokens.$grid-gutter * 0.5;`
	`13`	`+ padding-bottom: tokens.$grid-gutter * 0.5;`
	`14`	`+ margin-bottom: tokens.$grid-gutter * 0.5;`
`15`	`15`	`color: var(--theme-accent);`
`16`	`16`	`background-color: var(--theme-accent-mod);`
`17`	`17`	`}`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@`
`29`	`29`	`}`
`30`	`30`	`&__summary {`
`31`	`31`	`display: inline-block;`
`32`		`- padding: ($bannerPadding / 2) $bannerPadding;`
	`32`	`+ padding: ($bannerPadding * 0.5) $bannerPadding;`
`33`	`33`	`#{$self}--interactive & {`
`34`	`34`	`padding-left: ($bannerPadding + $arrowMargin);`
`35`	`35`	`cursor: pointer;`
`@@ -61,7 +61,7 @@`
`61`	`61`	`}`
`62`	`62`	`&__body {`
`63`	`63`	`max-width: tokens.$measure-default;`
`64`		`- padding: ($bannerPadding / 2) $bannerPadding ($bannerPadding / 2)`
	`64`	`+ padding: ($bannerPadding * 0.5) $bannerPadding ($bannerPadding * 0.5)`
`65`	`65`	`($bannerPadding + $arrowMargin);`
`66`	`66`	`}`
`67`	`67`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,6 @@`
`4`	`4`	`display: flex;`
`5`	`5`	`flex-direction: column;`
`6`	`6`	`> * + * {`
`7`		`- margin-top: tokens.$grid-gutter / 2;`
	`7`	`+ margin-top: tokens.$grid-gutter * 0.5;`
`8`	`8`	`}`
`9`	`9`	`}`