@skbkontur/logos 3.0.3-master-d5edad53.0 → 3.0.4

package/CHANGELOG.md

@@ -3,7 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## 3.0.3-master-d5edad53.0 (2026-05-19)
+## [3.0.4](https://git.skbkontur.ru/ui/kontur-ui-assets/compare/@skbkontur/logos@3.0.3...@skbkontur/logos@3.0.4) (2026-07-08)
+
+**Note:** Version bump only for package @skbkontur/logos
+
+
+
+
+
+## 3.0.3 (2026-06-18)
 
 **Note:** Version bump only for package @skbkontur/logos
 

package/__docs__/Logos.docs.stories.tsx

@@ -0,0 +1,119 @@
+import { Logotype } from "@skbkontur/react-ui-addons/components/Logotype/Logotype";
+import { Gapped } from "@skbkontur/react-ui/components/Gapped";
+import { Toggle } from "@skbkontur/react-ui/components/Toggle";
+import type { Meta } from "@storybook/react";
+import { useState, type ForwardRefExoticComponent, type RefAttributes } from "react";
+
+import * as Logos from "../index.js";
+
+export default {
+  title: "Logos",
+  parameters: {
+    creevey: {
+      skip: true,
+    },
+  },
+} as Meta;
+
+export const WithLogoAndSizeStory = () => {
+  return (
+    <Gapped vertical gap={8} style={{ position: "relative" }}>
+      <div
+        style={{
+          position: "absolute",
+          width: 1,
+          height: "100%",
+          background: "green",
+          marginLeft: -1,
+        }}
+      />
+      <Logotype konturLogo={<Logos.Kontur />} />
+      <Logotype size={30} konturLogo={<Logos.Kontur />} />
+      <Logotype size={38} konturLogo={<Logos.Kontur />} productLogo={<Logos.SchoolAcademy />} />
+      Lorem.
+      <span style={{ fontSize: 28 }}>Lorem.</span>
+    </Gapped>
+  );
+};
+WithLogoAndSizeStory.storyName = "Пример логотипа с разными размерами";
+
+export const BaselineStory = () => {
+  return (
+    <Gapped gap={8} style={{ position: "relative" }}>
+      <div
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: 1,
+          background: "green",
+        }}
+      />
+      <Logos.Kontur size={30} />
+      Lorem.
+      <span>Lorem ipsum.</span>
+      <span>
+        <Logos.Kontur size={20} />
+      </span>
+      Lorem ipsum dolor.
+      <Logos.Kontur size={38} />
+    </Gapped>
+  );
+};
+BaselineStory.storyName = "Пример Baseline";
+
+export const AllLogos = () => {
+  const Row = ({
+    LogoComponent,
+    product,
+    darkTheme,
+  }: {
+    LogoComponent: ForwardRefExoticComponent<
+      {
+        size?: number;
+        color?: string;
+        separatorColor?: string;
+        useDarkThemeColors?: boolean;
+      } & RefAttributes<HTMLSpanElement>
+    >;
+    product: string;
+    darkTheme?: boolean;
+  }) => (
+    <Gapped verticalAlign="middle" gap={8}>
+      <span style={{ width: 350, display: "inline-block" }}>
+        <span
+          style={{
+            height: 24,
+            padding: "8px 12px",
+            display: "inline-block",
+            color: "#ADADAD",
+          }}
+        >
+          <LogoComponent {...(darkTheme !== undefined ? { useDarkThemeColors: darkTheme } : {})} />
+        </span>
+      </span>
+      <span style={{ width: 150, display: "inline-block" }}>{product}</span>
+      <code>{`<${product} />`}</code>
+    </Gapped>
+  );
+
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+  const background = isDarkTheme ? "#292929" : "#fff";
+  const color = isDarkTheme ? "rgba(255, 255, 255, 0.87)" : "#222";
+
+  return (
+    <Gapped vertical gap={16}>
+      <Toggle onValueChange={setIsDarkTheme}>useDarkThemeColors</Toggle>
+      <Gapped vertical gap={8} style={{ background, color }}>
+        {Object.entries(Logos).map(([logoName, LogoComponent]) => (
+          <Row
+            key={logoName}
+            LogoComponent={LogoComponent}
+            product={logoName}
+            darkTheme={isDarkTheme}
+          />
+        ))}
+      </Gapped>
+    </Gapped>
+  );
+};
+AllLogos.storyName = "Полный список доступных логотипов";

package/__docs__/Logos.mdx

@@ -0,0 +1,102 @@
+import { Meta, Stories, Unstyled } from "@storybook/blocks";
+import * as LogosStories from "./Logos.docs.stories";
+
+<Meta of={LogosStories} />
+
+<Unstyled>
+  <aside
+    style={{
+      padding: "12px 16px",
+      margin: "0 0 16px",
+      background: "#fff8e1",
+      borderLeft: "4px solid #ffb300",
+      borderRadius: "4px",
+      fontSize: "16px",
+      lineHeight: "24px",
+    }}
+  >
+    Пакет устарел и заменен на <code>CdnLogo</code> из <code>@skbkontur/ui-cdn-components</code> (
+    <a href="#/ui-cdn-components/cdnlogo">CdnLogo</a>).
+  </aside>
+</Unstyled>
+
+NPM-пакет для доступа к иконкам из общей Figma-библиотеки Kontur.Logos
+
+## Установка
+
+```bash
+npm i @skbkontur/logos
+```
+
+## Логотипы продуктов Контура
+
+Используются с компонентом `Logotype` из пакета `@skbkontur/react-ui-addons` ([Logotype/readme](#/react-ui-addons/Logotype)).
+
+```jsx harmony
+import { Kontur } from "@skbkontur/logos/Kontur";
+import { Extern } from "@skbkontur/logos/Extern";
+import { Logotype } from "@skbkontur/react-ui-addons";
+
+<Logotype konturLogo={<Kontur />} productLogo={<Extern />} />;
+```
+
+## Пропы
+
+В некоторых логотипах по-умолчанию установлены фирменные цвета. Но их можно переопределить через проп `color`.
+
+Размер можно изменять пропом `size`. Его значение будет соответствовать высоте лого. По-умолчанию для всех лого это `24px`.
+
+```js
+props: {
+  color: string;
+  size: number;
+}
+```
+
+```jsx harmony
+import { Kontur } from "@skbkontur/logos/Kontur";
+
+<div>
+  <Kontur color="black" size={32} />
+  <Kontur color="gray" size={28} />
+  <Kontur color="lightgray" />
+</div>;
+```
+
+## Локализация
+
+На данный момент локализация через `LocaleContext` **не** поддерживается и логотипы нужно менять самостоятельно.
+
+Не все продуктовые логотипы имеют английскую или русскую версию. У английских версий в названии присутствует постфикс `EN`. Такие логотипы рекомендуется использовать совместно с `KonturEN`.
+
+```jsx harmony
+import { Kontur } from "@skbkontur/logos/Kontur";
+import { KonturEN } from "@skbkontur/logos/KonturEN";
+import { Focus } from "@skbkontur/logos/Focus";
+import { FocusEN } from "@skbkontur/logos/FocusEN";
+import { Diadoc } from "@skbkontur/logos/Diadoc";
+import { DiadocEN } from "@skbkontur/logos/DiadocEN";
+import { Gapped } from "@skbkontur/react-ui";
+
+<Gapped vertical gap={8}>
+  <Gapped gap={8}>
+    <Kontur />
+    ➜
+    <KonturEN />
+  </Gapped>
+  <Gapped gap={8}>
+    <Focus />
+    ➜
+    <FocusEN />
+  </Gapped>
+  <Gapped gap={8}>
+    <Diadoc />
+    ➜
+    <DiadocEN />
+  </Gapped>
+</Gapped>;
+```
+
+<Stories title="" includePrimary={true} />
+
+Смотреть в [гайде](https://guides.kontur.ru/re/sources/logos/)

package/__stories__/AllLogos.tsx

@@ -0,0 +1,55 @@
+import { Gapped } from "@skbkontur/react-ui/components/Gapped";
+import React, { type ForwardRefExoticComponent, type RefAttributes } from "react";
+
+import * as Logos from "../index.js";
+
+const Row = ({
+  LogoComponent,
+  product,
+  darkTheme,
+}: {
+  LogoComponent: ForwardRefExoticComponent<
+    {
+      size?: number;
+      color?: string;
+      separatorColor?: string;
+      useDarkThemeColors?: boolean;
+    } & RefAttributes<HTMLSpanElement>
+  >;
+  product: string;
+  darkTheme?: boolean;
+}) => (
+  <Gapped verticalAlign="middle" gap={8}>
+    <span style={{ width: 350, display: "inline-block" }}>
+      <span
+        style={{
+          height: 24,
+          padding: "8px 12px",
+          display: "inline-block",
+          color: "#ADADAD",
+        }}
+      >
+        <LogoComponent {...(darkTheme !== undefined ? { useDarkThemeColors: darkTheme } : {})} />
+      </span>
+    </span>
+    <span style={{ width: 150, display: "inline-block" }}>{product}</span>
+    <code>{`<${product} />`}</code>
+  </Gapped>
+);
+
+export const AllLogos = ({ darkTheme }: { darkTheme?: boolean }) => {
+  const background = darkTheme ? "#292929" : "#fff";
+  const color = darkTheme ? "rgba(255, 255, 255, 0.87)" : "#222";
+  return (
+    <Gapped vertical gap={8} style={{ background, color }}>
+      {Object.entries(Logos).map(([logoName, LogoComponent]) => (
+        <Row
+          key={logoName}
+          LogoComponent={LogoComponent}
+          product={logoName}
+          darkTheme={darkTheme ?? false}
+        />
+      ))}
+    </Gapped>
+  );
+};

package/__stories__/Logos.stories.tsx

@@ -0,0 +1,95 @@
+import { Gapped } from "@skbkontur/react-ui/components/Gapped";
+import React from "react";
+
+import { ExternUchet } from "../src/ExternUchet.js";
+import { Kontur } from "../src/Kontur.js";
+import { AllLogos as Logos } from "./AllLogos.js";
+
+export const AllLogos = () => (
+  <div style={{ margin: 8 }}>
+    <Logos />
+  </div>
+);
+
+export const AllLogosDarkTheme = () => (
+  <div style={{ margin: 8 }}>
+    <Logos darkTheme />
+  </div>
+);
+
+export const CustomSize = () => (
+  <Gapped vertical gap={16} style={{ margin: 8 }}>
+    <Gapped vertical gap={4}>
+      default
+      <Kontur />
+    </Gapped>
+    <Gapped vertical gap={4}>
+      with custom size
+      <Kontur size={48} />
+      <Kontur size={32} />
+      <Kontur size={16} />
+    </Gapped>
+  </Gapped>
+);
+
+export const CustomColor = () => (
+  <Gapped vertical gap={16} style={{ margin: 8 }}>
+    <Gapped vertical gap={4}>
+      default
+      <Kontur />
+    </Gapped>
+    <Gapped vertical gap={4}>
+      with custom color
+      <Kontur color="red" />
+      <Kontur color="blue" />
+      <Kontur color="#bbb" />
+    </Gapped>
+  </Gapped>
+);
+
+export const CustomSeparatorColor = () => (
+  <Gapped vertical gap={16} style={{ margin: 8 }}>
+    <Gapped vertical gap={4}>
+      default
+      <ExternUchet />
+    </Gapped>
+    <Gapped vertical gap={4}>
+      with custom separatorColor
+      <ExternUchet separatorColor="red" />
+      <ExternUchet separatorColor="blue" />
+      <ExternUchet separatorColor="#FC7630" />
+    </Gapped>
+  </Gapped>
+);
+
+export const Baseline = () => (
+  <Gapped gap={8} style={{ position: "relative" }}>
+    <div
+      style={{
+        position: "absolute",
+        width: "100%",
+        height: 1,
+        background: "green",
+      }}
+    />
+    <Kontur size={30} />
+    Lorem.
+    <span>Lorem ipsum.</span>
+    <span>
+      <Kontur size={20} />
+    </span>
+    Lorem ipsum dolor.
+    <Kontur size={38} />
+  </Gapped>
+);
+
+export default {
+  title: "Logos",
+  parameters: {
+    creevey: {
+      skip: {
+        "enough chrome": { in: /^(?!\bchrome\b)/ },
+      },
+    },
+  },
+};

package/package.json

@@ -1,29 +1,37 @@
 {
   "name": "@skbkontur/logos",
-  "version": "3.0.3-master-d5edad53.0",
+  "version": "3.0.4",
   "description": "Kontur's product logos",
   "license": "UNLICENSED",
   "author": "Kontur",
   "type": "module",
   "sideEffects": false,
   "exports": {
-    ".": "./index.js",
-    "./*": "./src/*.js",
-    "./package.json": "./package.json"
+    ".": "./index.ts",
+    "./*": "./src/*.tsx"
   },
   "publishConfig": {
+    "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
     "clean": "npx rimraf dist",
     "prebuild": "npm run clean",
-    "build": "run-s build:tsc build:copyfiles build:exports build:lint:*",
+    "build": "run-s build:tsc build:copyfiles build:exports build:package build:lint:*",
     "build:tsc": "tsc -p tsconfig.json",
     "build:copyfiles": "copyfiles package.json README.md CHANGELOG.md dist",
     "build:exports": "node ../../scripts/generate-exports.mts ./dist/package.json",
+    "build:package": "node scripts/prepare-dist-package.mjs",
     "build:lint:publint": "publint --pack npm ./dist",
     "build:lint:attw": "attw --config-path ../../.attw.json ./dist",
-    "logos:update": "node scripts/svg-to-tsx"
+    "pack:release": "npm run build && cd dist && npm pack --gitignore=false --pack-destination ..",
+    "publish:release": "npm run build && npm publish ./dist --gitignore=false",
+    "logos:update": "node scripts/svg-to-tsx",
+    "test": "exit 0",
+    "lint": "run-s lint:*",
+    "lint:oxlint": "oxlint .",
+    "lint:tsc": "tsc --noEmit -p tsconfig.lint.json",
+    "test:attw": "attw --config-path ../../.attw.json ./dist"
   },
   "devDependencies": {
     "camelcase": "6.2.0",
@@ -33,5 +41,6 @@
   "peerDependencies": {
     "react": ">=16.9 <20",
     "react-dom": ">=16.9 <20"
-  }
+  },
+  "gitHead": "04fc219f961cfe7e10f195d948ea426a0797e6c2"
 }

package/scripts/prepare-dist-package.mjs

@@ -0,0 +1,40 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const distPackageJsonPath = join(
+  fileURLToPath(new URL("..", import.meta.url)),
+  "dist",
+  "package.json",
+);
+const packageJson = JSON.parse(readFileSync(distPackageJsonPath, "utf-8"));
+
+const publishScripts = new Set([
+  "clean",
+  "prebuild",
+  "build",
+  "build:tsc",
+  "build:copyfiles",
+  "build:exports",
+  "build:lint:publint",
+  "build:lint:attw",
+  "logos:update",
+]);
+
+packageJson.scripts = Object.fromEntries(
+  Object.entries(packageJson.scripts).filter(([name]) => publishScripts.has(name)),
+);
+
+if (packageJson.scripts.build) {
+  packageJson.scripts.build = "run-s build:tsc build:copyfiles build:exports build:lint:*";
+}
+
+delete packageJson.files;
+delete packageJson.prepack;
+delete packageJson.postpack;
+
+if (packageJson.publishConfig) {
+  delete packageJson.publishConfig.access;
+}
+
+writeFileSync(distPackageJsonPath, `${JSON.stringify(packageJson, null, 2)}\n`);