feat(plasma-new-hope): add focus visible dependency

salute-developers · Nov 3, 2023 · 707fefa · 707fefa
1 parent 9259e34
commit 707fefa
Show file tree

Hide file tree

Showing 8 changed files with 39,817 additions and 39,833 deletions.
diff --git a/packages/plasma-new-hope/package-lock.json b/packages/plasma-new-hope/package-lock.json
diff --git a/packages/plasma-new-hope/package.json b/packages/plasma-new-hope/package.json
@@ -1,102 +1,94 @@
 {
-  "name": "@salutejs/plasma-new-hope",
-  "version": "0.9.0",
-  "description": "Salute Design System blueprint",
-  "main": "cjs/index.js",
-  "module": "es/index.js",
-  "types": "types/index.d.ts",
-  "files": [
-    "cjs",
-    "es",
-    "types",
-    "styled-components"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "prepare": "npm run build",
-    "build": "npm run build:css && npm run build:styled-components",
-    "postbuild": "npm run generate:typings",
-    "build:css": "BABEL_ENV=esm SC_NAMESPACE=plasma-new-hope rollup -c",
-    "build:css:watch": "BABEL_ENV=esm SC_NAMESPACE=plasma-new-hope rollup -c -w",
-    "prebuild:styled-components": "rm -rf src-sc && cp -R src src-sc && npm run build:replace-linaria-sc",
-    "build:replace-linaria-sc": "./scripts/replace-linaria_sc.sh",
-    "build:styled-components": "npm run build:styled-components:esm && npm run build:styled-components:cjs",
-    "build:styled-components:cjs": "rm -rf styled-components/cjs && BABEL_ENV=cjs SC_NAMESPACE=plasma-new-hope babel ./src-sc --out-dir ./styled-components/cjs --extensions .ts,.tsx --copy-files",
-    "build:styled-components:esm": "rm -rf styled-components/es && BABEL_ENV=esm SC_NAMESPACE=plasma-new-hope babel ./src-sc --out-dir ./styled-components/es --extensions .ts,.tsx --copy-files",
-    "postbuild:styled-components": "rm -rf src-sc",
-    "generate:typings:css": "tsc --outDir types --emitDeclarationOnly",
-    "generate:typings": "npm run generate:typings:css",
-    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -s .storybook/public -p ${PORT:-7002} -c .storybook",
-    "prestorybook:sc": "npm run prebuild:styled-components",
-    "storybook:sc": "USE_STYLED_COMPONENTS=true NODE_OPTIONS=--openssl-legacy-provider start-storybook -s .storybook/public -p ${PORT:-7002} -c .storybook",
-    "storybook:build": "NODE_OPTIONS=--openssl-legacy-provider build-storybook -s .storybook/public -c .storybook -o build-sb",
-    "lint": "../../node_modules/.bin/eslint ./src --ext .js,.ts,.tsx --quiet"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/salute-developers/plasma.git",
-    "directory": "packages/plasma-new-hope"
-  },
-  "keywords": [
-    "design-system",
-    "ui-kit",
-    "react"
-  ],
-  "author": "Salute Frontend Team <[email protected]>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/salute-developers/plasma/issues"
-  },
-  "homepage": "https://github.com/salute-developers/plasma#readme",
-  "peerDependencies": {
-    "react": ">=16.13.1",
-    "react-dom": ">=16.13.1"
-  },
-  "devDependencies": {
-    "@babel/cli": "7.15.4",
-    "@babel/core": "7.15.5",
-    "@babel/plugin-transform-react-constant-elements": "7.17.12",
-    "@babel/preset-env": "7.15.4",
-    "@babel/preset-react": "7.14.5",
-    "@babel/preset-typescript": "7.15.0",
-    "@ironkinoko/rollup-plugin-styles": "^4.0.3",
-    "@linaria/rollup": "^4.5.4",
-    "@linaria/vite": "^4.5.4",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.4",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@storybook/addon-docs": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addons": "^6.5.16",
-    "@storybook/builder-vite": "^0.4.2",
-    "@storybook/react": "^6.5.16",
-    "@storybook/theming": "^6.5.16",
-    "@types/lodash": "^4.14.191",
-    "@types/node": "15.14.9",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
-    "@types/styled-components": "^5.1.26",
-    "@vitejs/plugin-react": "^3.1.0",
-    "babel-loader": "8.2.2",
-    "babel-plugin-annotate-pure-calls": "0.4.0",
-    "babel-plugin-styled-components": "1.13.2",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "default-browser-id": "1.0.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "rollup": "^3.28.0",
-    "styled-components": "^5.3.1",
-    "typescript": "4.0.8",
-    "vite": "^4.1.4"
-  },
-  "dependencies": {
-    "@linaria/core": "^4.5.4",
-    "@linaria/react": "^4.5.4",
-    "@popperjs/core": "2.11.8",
-    "@salutejs/plasma-core": "1.137.0",
-    "@salutejs/plasma-tokens": "1.64.0",
-    "react-popper": "2.3.0"
-  }
+    "name": "@salutejs/plasma-new-hope",
+    "version": "0.9.0",
+    "description": "Salute Design System blueprint",
+    "main": "cjs/index.js",
+    "module": "es/index.js",
+    "types": "types/index.d.ts",
+    "files": ["cjs", "es", "types", "styled-components"],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "prepare": "npm run build",
+        "build": "npm run build:css && npm run build:styled-components",
+        "postbuild": "npm run generate:typings",
+        "build:css": "BABEL_ENV=esm SC_NAMESPACE=plasma-new-hope rollup -c",
+        "build:css:watch": "BABEL_ENV=esm SC_NAMESPACE=plasma-new-hope rollup -c -w",
+        "prebuild:styled-components": "rm -rf src-sc && cp -R src src-sc && npm run build:replace-linaria-sc",
+        "build:replace-linaria-sc": "./scripts/replace-linaria_sc.sh",
+        "build:styled-components": "npm run build:styled-components:esm && npm run build:styled-components:cjs",
+        "build:styled-components:cjs": "rm -rf styled-components/cjs && BABEL_ENV=cjs SC_NAMESPACE=plasma-new-hope babel ./src-sc --out-dir ./styled-components/cjs --extensions .ts,.tsx --copy-files",
+        "build:styled-components:esm": "rm -rf styled-components/es && BABEL_ENV=esm SC_NAMESPACE=plasma-new-hope babel ./src-sc --out-dir ./styled-components/es --extensions .ts,.tsx --copy-files",
+        "postbuild:styled-components": "rm -rf src-sc",
+        "generate:typings:css": "tsc --outDir types --emitDeclarationOnly",
+        "generate:typings": "npm run generate:typings:css",
+        "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -s .storybook/public -p ${PORT:-7002} -c .storybook",
+        "prestorybook:sc": "npm run prebuild:styled-components",
+        "storybook:sc": "USE_STYLED_COMPONENTS=true NODE_OPTIONS=--openssl-legacy-provider start-storybook -s .storybook/public -p ${PORT:-7002} -c .storybook",
+        "storybook:build": "NODE_OPTIONS=--openssl-legacy-provider build-storybook -s .storybook/public -c .storybook -o build-sb",
+        "lint": "../../node_modules/.bin/eslint ./src --ext .js,.ts,.tsx --quiet"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/salute-developers/plasma.git",
+        "directory": "packages/plasma-new-hope"
+    },
+    "keywords": ["design-system", "ui-kit", "react"],
+    "author": "Salute Frontend Team <[email protected]>",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/salute-developers/plasma/issues"
+    },
+    "homepage": "https://github.com/salute-developers/plasma#readme",
+    "peerDependencies": {
+        "react": ">=16.13.1",
+        "react-dom": ">=16.13.1"
+    },
+    "devDependencies": {
+        "@babel/cli": "7.15.4",
+        "@babel/core": "7.15.5",
+        "@babel/plugin-transform-react-constant-elements": "7.17.12",
+        "@babel/preset-env": "7.15.4",
+        "@babel/preset-react": "7.14.5",
+        "@babel/preset-typescript": "7.15.0",
+        "@ironkinoko/rollup-plugin-styles": "^4.0.3",
+        "@linaria/rollup": "^4.5.4",
+        "@linaria/vite": "^4.5.4",
+        "@rollup/plugin-babel": "^6.0.3",
+        "@rollup/plugin-commonjs": "^25.0.4",
+        "@rollup/plugin-node-resolve": "^15.1.0",
+        "@storybook/addon-docs": "^6.5.16",
+        "@storybook/addon-essentials": "^6.5.16",
+        "@storybook/addons": "^6.5.16",
+        "@storybook/builder-vite": "^0.4.2",
+        "@storybook/react": "^6.5.16",
+        "@storybook/theming": "^6.5.16",
+        "@types/lodash": "^4.14.191",
+        "@types/node": "15.14.9",
+        "@types/react": "18.0.28",
+        "@types/react-dom": "18.0.11",
+        "@types/styled-components": "^5.1.26",
+        "@vitejs/plugin-react": "^3.1.0",
+        "babel-loader": "8.2.2",
+        "babel-plugin-annotate-pure-calls": "0.4.0",
+        "babel-plugin-styled-components": "1.13.2",
+        "babel-plugin-transform-class-properties": "6.24.1",
+        "default-browser-id": "1.0.4",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "rollup": "^3.28.0",
+        "styled-components": "^5.3.1",
+        "typescript": "4.0.8",
+        "vite": "^4.1.4"
+    },
+    "dependencies": {
+        "@linaria/core": "^4.5.4",
+        "@linaria/react": "^4.5.4",
+        "@popperjs/core": "2.11.8",
+        "@salutejs/plasma-core": "1.137.0",
+        "@salutejs/plasma-tokens": "1.64.0",
+        "focus-visible": "5.2.0",
+        "react-popper": "2.3.0"
+    }
 }
diff --git a/packages/plasma-new-hope/src/components/Calendar/Calendar.tsx b/packages/plasma-new-hope/src/components/Calendar/Calendar.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 
 import type { CalendarProps, ComponentVariation } from './Calendar.types';
 
+import 'focus-visible';
+
 /**
  * Компонент календаря с диапазоном.
  */

diff --git a/packages/plasma-new-hope/src/components/Calendar/mixins/index.ts b/packages/plasma-new-hope/src/components/Calendar/mixins/index.ts
@@ -18,7 +18,7 @@ export const flexSpaceBetween = `
  * Миксин для установки синтетического фокуса на выбранной кнопке.
  */
 
-export const addFocus = () => `
+export const addFocus = `
     position: relative;
 
     &::before {
@@ -63,7 +63,7 @@ export const buttonFocus = styled.button`
     background-color: transparent;
     padding: 0;
 
-    ${addFocus()};
+    ${String(addFocus)};
 `;
 
 /**
@@ -113,11 +113,6 @@ export const selectedMixin = `
         
             ${String(active)};
         }
-        &:active {
-            background-color: var(--calendar_private-active-background);
-            color: var(--calendar_private-active-color);
-            font-weight: var(--plasma-typo-body-s-bold-font-weight);
-        }
     };
 
     &.item-hovered, &.item-hovered:hover {

diff --git a/...ages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts b/...ages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts
@@ -67,7 +67,7 @@ const disabledDay = () => `
     cursor: not-allowed;
     opacity: 0.4;
 
-    ${addFocus()};
+    ${String(addFocus)};
 `;
 
 const disabledCurrentDay = () => `
@@ -119,7 +119,7 @@ export const StyledDayRoot = styled.div<DayProps & FocusProps>`
         --calendar_private-hovered-background: var(${tokens.calendarHoveredItemBackground});
         --calendar_private-hovered-color: var(${tokens.calendarHoveredItemColor});
 
-        ${addFocus()};
+        ${String(addFocus)};
 
         ${String(selectedMixin)};
     }

diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts
@@ -1,6 +1,6 @@
 import { styled } from '@linaria/react';
 
-import { buttonFocus, flexCenter, flexSpaceBetween } from '../../mixins';
+import { buttonFocus, flexCenter } from '../../mixins';
 import { tokens } from '../../Calendar.tokens';
 
 export const StyledCalendarHeader = styled.div`
@@ -60,7 +60,9 @@ export const StyledArrows = styled.div`
     padding: 0.5rem 0;
     width: var(${tokens.calendarHeaderArrowContainerWidth});
 
-    ${String(flexSpaceBetween)};
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 `;
 
 export const StyledArrow = styled(buttonFocus)`

diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.ts
@@ -24,6 +24,9 @@ const selectable = `
     --calendar_private-add-focus-outline-radius: 0.563rem;
     --calendar_private-add-focus-outline-transition: box-shadow 0.2s ease-in-out;
     --calendar_private-add-focus-outline-color: var(${tokens.calendarOutlineFocusColor});
+    
+    ${String(addFocus)};
+
     --calendar_private-selected-min-width: 5.25rem;
     --calendar_private-selected-min-height: 3.25rem;
     --calendar_private-selected-background: var(${tokens.calendarSelectedItemBackground});
@@ -39,7 +42,6 @@ const selectable = `
     --calendar_private-hovered-color: var(${tokens.calendarHoveredItemColor});
 
     ${String(selectedMixin)};
-    ${addFocus()};
 `;
 
 export const StyledMonthRoot = styled.div`

diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.styles.ts
@@ -24,6 +24,9 @@ const selectable = () => `
     --calendar_private-add-focus-outline-radius: 0.563rem;
     --calendar_private-add-focus-outline-transition: box-shadow 0.2s ease-in-out;
     --calendar_private-add-focus-outline-color: var(${tokens.calendarOutlineFocusColor});
+    
+    ${String(addFocus)};
+
     --calendar_private-selected-min-width: 5.25rem;
     --calendar_private-selected-min-height: 3.25rem;
     --calendar_private-selected-background: var(${tokens.calendarSelectedItemBackground});
@@ -37,9 +40,8 @@ const selectable = () => `
     --calendar_private-active-color: var(${tokens.calendarActiveItemColor});
     --calendar_private-hovered-background: var(${tokens.calendarHoveredItemBackground});
     --calendar_private-hovered-color: var(${tokens.calendarHoveredItemColor});
-
+    
     ${String(selectedMixin)};
-    ${addFocus()};
 `;
 
 export const StyledYearRoot = styled.div`
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,8 @@ import React from 'react'; @@
     import type { CalendarProps, ComponentVariation } from './Calendar.types';
+    import 'focus-visible';
     /**
      * Компонент календаря с диапазоном.
      */
@@ Expand Down @@