docs: update css addon titles

packages/docs/.storybook/addon-drop-in-css/Tool.tsx

@@ -1,7 +1,7 @@
 import { useGlobals, useStorybookApi } from '@storybook/api'
 import { IconButton, Icons } from '@storybook/components'
 import React, { useCallback, useEffect } from 'react'
-import { ADDON_ID, ADDON_NAME, FILENAME, PARAM_KEY, TOOL_ID } from './constants'
+import { ADDON_ID, ADDON_TITLE, FILENAME, PARAM_KEY, TOOL_ID } from './constants'
 
 export const Tool = () => {
   const [globals, updateGlobals] = useGlobals()
@@ -30,7 +30,7 @@ export const Tool = () => {
     <IconButton
       key={TOOL_ID}
       active={active}
-      title={ADDON_NAME}
+      title={ADDON_TITLE}
       onClick={toggle}
     >
       <Icons icon="markup" />

packages/docs/.storybook/addon-drop-in-css/constants.ts

@@ -1,6 +1,7 @@
+export const DESCRIPTION = 'Toggle this switch to *simulate* in this page how the components would look when importing the `drop-in.css` into your website.'
 export const ADDON_ID = 'addon-drop-in-css' as const
 export const FILENAME = 'drop-in.css' as const
-export const ADDON_NAME = `Enable \`${FILENAME}\`` as const
+// export const ADDON_TITLE = `Enable \`${FILENAME}\`` as const
+export const ADDON_TITLE = DESCRIPTION
 export const TOOL_ID = `${ADDON_ID}/tool` as const
 export const PARAM_KEY = ADDON_ID
-export const DESCRIPTION = 'Toggle this switch to *simulate* in this page how the components would look when importing the `drop-in.css` into your website.'

packages/docs/.storybook/addon-drop-in-css/manager.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { addons, types } from '@storybook/addons'
-import { ADDON_ID, ADDON_NAME } from './constants'
+import { ADDON_ID, ADDON_TITLE } from './constants'
 import { Tool } from './Tool'
 
 addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
-    title: ADDON_NAME,
+    title: ADDON_TITLE,
     type: types.TOOL,
     match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
     render: () => <Tool />,

packages/docs/.storybook/addon-minicart-css/Tool.tsx

@@ -1,7 +1,7 @@
 import { useGlobals, useStorybookApi } from '@storybook/api'
 import { IconButton, Icons } from '@storybook/components'
 import React, { useCallback, useEffect } from 'react'
-import { ADDON_ID, ADDON_NAME, FILENAME, PARAM_KEY, TOOL_ID } from './constants'
+import { ADDON_ID, ADDON_TITLE, FILENAME, PARAM_KEY, TOOL_ID } from './constants'
 
 export const Tool = () => {
   const [globals, updateGlobals] = useGlobals()
@@ -30,7 +30,7 @@ export const Tool = () => {
     <IconButton
       key={TOOL_ID}
       active={active}
-      title={ADDON_NAME}
+      title={ADDON_TITLE}
       onClick={toggle}
     >
       <Icons icon="markup" />

packages/docs/.storybook/addon-minicart-css/constants.ts

@@ -1,6 +1,7 @@
+export const DESCRIPTION = 'Toggle this switch to *simulate* in this page how the components would look when importing the `minicart.css` into your website.'
 export const ADDON_ID = 'addon-minicart-css' as const
 export const FILENAME = 'minicart.css' as const
-export const ADDON_NAME = `Enable \`${FILENAME}\`` as const
+// export const ADDON_TITLE = `Enable \`${FILENAME}\`` as const
+export const ADDON_TITLE = DESCRIPTION
 export const TOOL_ID = `${ADDON_ID}/tool` as const
 export const PARAM_KEY = ADDON_ID
-export const DESCRIPTION = 'Toggle this switch to *simulate* in this page how the components would look when importing the `minicart.css` into your website.'

packages/docs/.storybook/addon-minicart-css/manager.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { addons, types } from '@storybook/addons'
-import { ADDON_ID, ADDON_NAME } from './constants'
+import { ADDON_ID, ADDON_TITLE } from './constants'
 import { Tool } from './Tool'
 
 addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
-    title: ADDON_NAME,
+    title: ADDON_TITLE,
     type: types.TOOL,
     match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
     render: () => <Tool />,