chore(typography): create test page for CJK typography

Author: 5t3ph

.storybook/main.js

@@ -24,6 +24,11 @@ export default {
 			files: "**/*.@(stories.js|mdx)",
 			titlePrefix: "Deprecated",
 		},
+		{
+			directory: "./testing",
+			files: "**/*.@(stories.js|mdx)",
+			titlePrefix: "Testing",
+		},
 	],
 	rootDir: "../",
 	staticDirs: ["./assets", "./assets/images"],

.storybook/testing/cjk-typography.mdx

@@ -0,0 +1,47 @@
+import { Meta, Canvas } from "@storybook/blocks";
+
+import { Button, Toast, Tag, AssetCard, Typography } from "./cjk.stories.js";
+
+<Meta title="Testing CJK Typography" />
+
+# Testing CJK Typography
+
+Most changes - if incorporated at all - are to line-height, and not all of those components are listed here.
+
+Typography changes based on font size/weight are not currently extended into components, ex. body size small is not applied through to buttons size small.
+
+## Button
+
+No lang specific overrides applied.
+
+<Canvas of={Button} />
+
+## Toast
+
+Lang specific override on message line-height only.
+
+<Canvas of={Toast} />
+
+## Tag
+
+No lang specific overrides applied.
+
+<Canvas of={Tag} />
+
+## Asset Card
+
+Full font style lang overrides for header, content, and title slots.
+
+<Canvas of={AssetCard} />
+
+## Calendar
+
+[See on Calendar page](/?path=/docs/components-calendar--docs&globals=lang:ja), font-size is changed for days of the week.
+
+(_Error loading the story on this page_)
+
+## Typography
+
+All are size medium.
+
+<Canvas of={Typography} />

.storybook/testing/cjk.stories.js

@@ -0,0 +1,63 @@
+
+import { Template as AssetCardTemplate } from "../../components/assetcard/stories/template.js";
+import { ButtonsWithIconOptions } from "../../components/button/stories/template.js";
+import { TagGroups } from "../../components/tag/stories//tag.test.js";
+import { ToastGroup } from "../../components/toast/stories/toast.test.js";
+import { TypographyGroup } from "../../components/typography/stories/typography.test.js";
+
+const longPhrase = "無料で作りましょう"; // Let's make it for free
+const shortPhrase = "買う"; // Purchase
+
+export default {
+    title: "CJK Stories",
+    tags: ["!autodocs"],
+}
+
+export const Button = ButtonsWithIconOptions.bind({});
+Button.args = {
+	label: longPhrase,
+};
+Button.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
+export const Toast = ToastGroup.bind({});
+Toast.args = {
+	message: longPhrase,
+	inlineButtonLabel: shortPhrase,
+	variant: "neutral"
+};
+
+export const Tag = TagGroups.bind({});
+Tag.args = {label: shortPhrase};
+
+export const AssetCard = AssetCardTemplate.bind({});
+AssetCard.args = {
+	title: 'Instagram ' + longPhrase,
+	headerContent: "39:02",
+	exampleImage: "square",
+};
+
+
+export const Typography = TypographyGroup.bind({});
+Typography.args = {
+	content: [
+		{
+			semantics: "heading",
+			content: ['Heading ' + longPhrase],
+		},
+		{
+			semantics: "code",
+			content: ['Code ' + longPhrase],
+		},
+		{
+			semantics: "detail",
+			content: ['detail ' + longPhrase],
+		},
+		{
+            semantics: "body",
+			content: [
+'Body ' + longPhrase			],
+		},
+	],
+};