From 66c92d8e0d2145ad2840012ad5396c3545f7781e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 16 Aug 2024 23:28:10 +0700 Subject: [PATCH] core: add logo and github sponsor button --- .storybook/main.ts | 1 + .storybook/manager.css | 6 ++++++ .storybook/manager.tsx | 26 +++++++++++++++++++++++++- public/mui-treasury-logo.png | Bin 0 -> 4238 bytes 4 files changed, 32 insertions(+), 1 deletion(-) create mode 100644 .storybook/manager.css create mode 100644 public/mui-treasury-logo.png diff --git a/.storybook/main.ts b/.storybook/main.ts index 79c24361..b0e82c05 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -46,6 +46,7 @@ const config: StorybookConfig = { "@storybook/addon-webpack5-compiler-babel", "@chromatic-com/storybook", ], + staticDirs: ["../public"], framework: { name: "@storybook/react-webpack5", options: {}, diff --git a/.storybook/manager.css b/.storybook/manager.css new file mode 100644 index 00000000..c9502ced --- /dev/null +++ b/.storybook/manager.css @@ -0,0 +1,6 @@ +[src="mui-treasury-logo.png"] { + height: 32px; +} +.dark [src="mui-treasury-logo.png"] { + filter: invert(1); +} diff --git a/.storybook/manager.tsx b/.storybook/manager.tsx index 6b7eaf2a..2c7e4a98 100644 --- a/.storybook/manager.tsx +++ b/.storybook/manager.tsx @@ -6,10 +6,12 @@ import { STORY_MISSING, } from "@storybook/core-events"; import { addons, types } from "@storybook/manager-api"; +import { create } from "@storybook/theming"; import CarbonAds from "./carbon-ads/CarbonAds"; import { Tool } from "./decorators/Author"; import { BlockPicker } from "./decorators/BlockPicker"; import { BlockUsage } from "./decorators/BlockUsage"; +import "./manager.css"; // https://storybook.js.org/docs/react/configure/features-and-behavior addons.setConfig({ @@ -18,7 +20,13 @@ addons.setConfig({ panelPosition: "bottom", enableShortcuts: true, showToolbar: true, - theme: undefined, + theme: create({ + base: "light", + brandUrl: "https://github.com/siriwatknp/mui-treasury", + brandTitle: "MUI Treasury Github", + brandImage: "mui-treasury-logo.png", + brandTarget: "_blank", + }), selectedPanel: undefined, initialActive: "sidebar", }); @@ -47,6 +55,22 @@ addons.register("google-analytics", (api) => { }); }); +addons.register("github-sponsor", () => { + addons.add("github-sponsor/toolbar", { + title: "Github Sponsor", + type: types.TOOLEXTRA, + render: () => ( + + ), + }); +}); + addons.register("block-usage", () => { addons.add("block-usage/toolbar", { title: "Block Usage", diff --git a/public/mui-treasury-logo.png b/public/mui-treasury-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..52153e35f4c1a5da70a58a33c051a30687fd6e51 GIT binary patch literal 4238 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 literal 0 HcmV?d00001