From f0b374354dcbd429933dfb7c9c6a3e041ec62e6b Mon Sep 17 00:00:00 2001 From: naporin0624 Date: Wed, 1 May 2024 08:03:49 +0000 Subject: [PATCH 1/2] chore: merge --- .eslintrc.js | 21 +- .husky/commit-msg | 1 + .prettierignore | 1 + .storybook/docs-container.tsx | 16 + .storybook/jest.config.mjs | 1 + .storybook/main.js | 76 +- .storybook/preview.js | 7 + .storybook/storybook.test.ts | 8 +- .storybook/test-runner.ts | 2 - jest.setup.ts | 13 +- package.json | 72 +- packages/icons/package.json | 1 + packages/icons/src/PixivIcon.story.tsx | 135 +- packages/react-sandbox/.npmignore | 2 + packages/react-sandbox/package.json | 1 - .../__snapshots__/index.story.storyshot | 360 - .../src/components/Carousel/index.story.tsx | 85 - .../__snapshots__/index.story.storyshot | 168 - .../components/CarouselButton/index.story.tsx | 43 - .../__snapshots__/index.story.storyshot | 239 - .../src/components/Filter/index.story.tsx | 82 - .../__snapshots__/index.story.storyshot | 119 - .../src/components/HintText/index.story.tsx | 18 - .../__snapshots__/index.story.storyshot | 1297 --- .../src/components/Layout/index.story.tsx | 121 - .../__snapshots__/index.story.storyshot | 1389 --- .../components/MenuListItem/index.story.tsx | 142 - .../Pager/__snapshots__/index.story.storyshot | 1894 ---- .../src/components/Pager/index.story.tsx | 153 - .../__snapshots__/index.story.storyshot | 507 -- .../components/SwitchCheckbox/index.story.tsx | 31 - .../__snapshots__/index.story.storyshot | 32 - .../components/TextEllipsis/index.story.tsx | 40 - .../__snapshots__/index.story.storyshot | 852 -- .../src/components/WithIcon/index.story.tsx | 145 - packages/react-sandbox/tsconfig.build.json | 8 +- packages/react/.npmignore | 2 + packages/react/package.json | 15 +- .../__snapshots__/index.story.storyshot | 86 +- .../src/components/Checkbox/index.story.tsx | 58 +- .../DropdownSelector/Popover/index.tsx | 3 +- .../__snapshots__/index.story.storyshot | 14 +- .../src/components/IconButton/index.story.tsx | 51 +- .../LoadingSpinnerIcon.story.tsx | 13 - .../__snapshots__/index.story.storyshot | 140 +- .../components/LoadingSpinner/index.story.tsx | 25 +- packages/react/src/components/Modal/index.tsx | 2 +- .../Modal/useCustomModalOverlay.tsx | 9 +- .../__snapshots__/index.story.storyshot | 76 +- .../components/MultiSelect/index.story.tsx | 280 +- .../src/components/MultiSelect/index.tsx | 3 +- .../Radio/__snapshots__/index.story.storyshot | 2 +- .../src/components/Radio/index.story.tsx | 41 +- packages/react/src/components/Radio/index.tsx | 27 +- .../__snapshots__/index.story.storyshot | 17 +- .../src/components/Switch/index.story.tsx | 28 +- .../__snapshots__/index.story.storyshot | 1456 ++-- .../src/components/TagItem/index.story.tsx | 205 +- .../components/TextArea/TextArea.story.tsx | 86 +- .../__snapshots__/TextArea.story.storyshot | 2330 ++++- .../react/src/components/TextArea/index.tsx | 2 + .../components/TextField/TextField.story.tsx | 144 +- .../__snapshots__/TextField.story.storyshot | 2790 ++++-- .../react/src/components/TextField/index.tsx | 2 + packages/react/src/components/a11y.test.tsx | 2 +- packages/react/src/core/CharcoalProvider.tsx | 2 +- packages/react/tsconfig.build.json | 8 +- packages/styled/.npmignore | 2 + packages/tailwind-config/.npmignore | 2 + .../tailwind-config/src/_lib/TailwindBuild.ts | 2 +- packages/tailwind-config/src/_lib/compat.ts | 2 +- .../src/colors/toTailwindConfig.ts | 2 +- packages/tailwind-config/src/index.ts | 2 +- .../tailwind-config/src/typography/plugin.ts | 3 +- packages/tailwind-config/src/util.ts | 2 +- pages/pages/utilities/tailwind-config.md | 2 +- tsconfig.json | 3 +- vite.config.ts | 6 + yarn.lock | 7585 +++++++++++------ 79 files changed, 10378 insertions(+), 13236 deletions(-) create mode 100644 .husky/commit-msg create mode 100644 .storybook/docs-container.tsx create mode 100644 packages/react-sandbox/.npmignore delete mode 100644 packages/react-sandbox/src/components/Carousel/__snapshots__/index.story.storyshot delete mode 100644 packages/react-sandbox/src/components/Carousel/index.story.tsx delete mode 100644 packages/react-sandbox/src/components/CarouselButton/__snapshots__/index.story.storyshot delete mode 100644 packages/react-sandbox/src/components/CarouselButton/index.story.tsx delete mode 100644 packages/react-sandbox/src/components/Filter/__snapshots__/index.story.storyshot delete mode 100644 packages/react-sandbox/src/components/Filter/index.story.tsx delete mode 100644 packages/react-sandbox/src/components/HintText/__snapshots__/index.story.storyshot delete mode 100644 packages/react-sandbox/src/components/HintText/index.story.tsx delete mode 100644 packages/react-sandbox/src/components/Layout/__snapshots__/index.story.storyshot delete mode 100644 packages/react-sandbox/src/components/Layout/index.story.tsx delete mode 100644 packages/react-sandbox/src/components/MenuListItem/__snapshots__/index.story.storyshot delete mode 100644 packages/react-sandbox/src/components/MenuListItem/index.story.tsx delete mode 100644 packages/react-sandbox/src/components/Pager/__snapshots__/index.story.storyshot delete mode 100644 packages/react-sandbox/src/components/Pager/index.story.tsx delete mode 100644 packages/react-sandbox/src/components/SwitchCheckbox/__snapshots__/index.story.storyshot delete mode 100644 packages/react-sandbox/src/components/SwitchCheckbox/index.story.tsx delete mode 100644 packages/react-sandbox/src/components/TextEllipsis/__snapshots__/index.story.storyshot delete mode 100644 packages/react-sandbox/src/components/TextEllipsis/index.story.tsx delete mode 100644 packages/react-sandbox/src/components/WithIcon/__snapshots__/index.story.storyshot delete mode 100644 packages/react-sandbox/src/components/WithIcon/index.story.tsx create mode 100644 packages/react/.npmignore delete mode 100644 packages/react/src/components/LoadingSpinner/LoadingSpinnerIcon.story.tsx create mode 100644 packages/styled/.npmignore create mode 100644 packages/tailwind-config/.npmignore create mode 100644 vite.config.ts diff --git a/.eslintrc.js b/.eslintrc.js index d4a234834..b60c32af7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -7,6 +7,7 @@ const config = { 'plugin:react/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended', + 'plugin:import/recommended', 'prettier', ], rules: { @@ -24,6 +25,19 @@ const config = { 'no-console': 'warn', 'react/jsx-uses-react': 'off', 'react/react-in-jsx-scope': 'off', + 'import/no-extraneous-dependencies': [ + 'error', + { + devDependencies: [ + '*.config.ts', + '**/*.config.ts', + '**/*.test.ts', + '**/*.test.tsx', + '**/*.story.tsx', + '**/_lib/**', + ], + }, + ], }, parserOptions: { project: ['./tsconfig.json', './packages/**/tsconfig.json'], @@ -36,8 +50,13 @@ const config = { react: { version: 'detect', }, + 'import/resolver': { + typescript: { + project: ['./tsconfig.json', './packages/**/tsconfig.json'], + }, + }, }, - plugins: ['jest'], + plugins: ['jest', 'import'], overrides: [{ files: ['*.cjs', '*.mjs'] }], } diff --git a/.husky/commit-msg b/.husky/commit-msg new file mode 100644 index 000000000..d10a783b5 --- /dev/null +++ b/.husky/commit-msg @@ -0,0 +1 @@ +yarn commitlint -e $HUSKY_GIT_PARAMS \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index 396b37936..e15712a96 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,6 +2,7 @@ dist/ node_modules/ __snapshots__/ .yarn/ +yarn.lock /public/ /storybook-static/ /coverage/ diff --git a/.storybook/docs-container.tsx b/.storybook/docs-container.tsx new file mode 100644 index 000000000..da93feb4e --- /dev/null +++ b/.storybook/docs-container.tsx @@ -0,0 +1,16 @@ +import React, { ComponentPropsWithoutRef, FC } from 'react' +import { DocsContainer as BaseContainer } from '@storybook/addon-docs' +import { useDarkMode } from 'storybook-dark-mode' +import { themes } from '@storybook/theming' + +export const DocsContainer: FC< + ComponentPropsWithoutRef +> = ({ children, ...rest }) => { + const dark = useDarkMode() + + return ( + + {children} + + ) +} diff --git a/.storybook/jest.config.mjs b/.storybook/jest.config.mjs index 901928e06..bf55938ee 100644 --- a/.storybook/jest.config.mjs +++ b/.storybook/jest.config.mjs @@ -7,6 +7,7 @@ export default { '/../__mocks__/file.ts', '\\.(styl|css|less|scss)$': '/../__mocks__/style.ts', '\\.(mdx)$': '/../__mocks__/mdx.ts', + '@storybook/react-dom-shim': '@storybook/react-dom-shim/dist/react-16', }, setupFilesAfterEnv: ['../jest.setup.ts', './jest.setup.ts'], } diff --git a/.storybook/main.js b/.storybook/main.js index 2e77fb8a3..64064cf7d 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,3 +1,4 @@ +import { dirname, join } from 'path' const path = require('path') const { promisify } = require('util') const glob = promisify(require('glob')) @@ -5,28 +6,46 @@ const { viteCommonjs } = require('@originjs/vite-plugin-commonjs') module.exports = { stories: ['../packages/**/*.mdx', '../packages/**/*.story.@(tsx)'], + addons: [ - '@storybook/addon-essentials', - '@storybook/addon-a11y', - '@storybook/addon-links', - '@storybook/addon-storysource', - // '@storybook/addon-knobs', - 'storybook-dark-mode', + getAbsolutePath('@storybook/addon-essentials'), + getAbsolutePath('@storybook/addon-a11y'), + getAbsolutePath('@storybook/addon-links'), + getAbsolutePath('@storybook/addon-storysource'), + getAbsolutePath('storybook-dark-mode'), + getAbsolutePath('@storybook/addon-mdx-gfm'), + getAbsolutePath('@storybook/addon-webpack5-compiler-swc'), + getAbsolutePath('@storybook/addon-themes'), { - name: '@storybook/addon-styling', + name: '@storybook/addon-styling-webpack', options: { - postCss: { - implementation: require.resolve('postcss'), - }, - postcssLoaderOptions: { - postcssOptions: { - config: path.resolve(__dirname, 'postcss.config.js'), + rules: [ + { + test: /\.css$/, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + importLoaders: 1, + modules: { + auto: true, + localIdentName: '[name]__[local]--[hash:base64:5]', + }, + }, + }, + { + // Gets options from `postcss.config.js` in your project root + loader: 'postcss-loader', + options: { implementation: require.resolve('postcss') }, + }, + ], }, - implementation: require('postcss'), - }, + ], }, }, ], + async webpackFinal(config, { configType }) { if (configType === 'PRODUCTION') { return config @@ -35,6 +54,7 @@ module.exports = { config.resolve.alias = { ...config.resolve.alias, ...(await alias()) } return config }, + async viteFinal(config, { configType }) { if (configType === 'PRODUCTION') { return config @@ -48,6 +68,7 @@ module.exports = { config.plugins.push(viteCommonjs({ include: 'packages/icons' })) return config }, + // 実験的にviteをpreviewビルドでviteを利用する // CLIENT_PORT=443 yarn storybook:experimental-vite -p 6007 --no-manager-cache ...(process.env.USE_VITE === '1' @@ -60,9 +81,28 @@ module.exports = { : { framework: { name: '@storybook/react-webpack5', - options: {}, + options: { + builder: { + useSWC: true, + }, + }, }, }), + + swc() { + return { + jsc: { + transform: { + react: { + runtime: 'automatic', + }, + }, + }, + } + }, + docs: { + autodocs: true, + }, } const packagesDir = path.resolve(__dirname, '../packages') @@ -75,3 +115,7 @@ const alias = async () => return [from, to] }) ) + +function getAbsolutePath(value) { + return dirname(require.resolve(join(value, 'package.json'))) +} diff --git a/.storybook/preview.js b/.storybook/preview.js index 874ee8e87..f54b798e5 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,6 +1,9 @@ import themeDecorator from './theme-decorator' +import { DocsContainer } from './docs-container' + import './global.css' +/** @type */ export const parameters = { actions: { argTypesRegex: '^on[A-Z0-9].*' }, controls: { @@ -9,6 +12,10 @@ export const parameters = { date: /Date$/, }, }, + viewMode: 'docs', + docs: { + container: DocsContainer, + }, } export const decorators = [themeDecorator] diff --git a/.storybook/storybook.test.ts b/.storybook/storybook.test.ts index 266b19207..715be341f 100644 --- a/.storybook/storybook.test.ts +++ b/.storybook/storybook.test.ts @@ -31,9 +31,11 @@ const compose = ( function getAllStoryFiles() { // Place the glob you want to match your stories files - const storyFiles = glob.sync( - path.join(__dirname, '../packages/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}') - ) + const globPatterns = '../packages/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}' + const ignorePatterns = /node_modules|react-sandbox/ + const storyFiles = glob + .sync(path.join(__dirname, globPatterns)) + .filter((filePath) => !ignorePatterns.test(filePath)) return storyFiles.map((filePath) => { const storyFile = require(filePath) diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts index 204e21510..2749f8da6 100644 --- a/.storybook/test-runner.ts +++ b/.storybook/test-runner.ts @@ -13,8 +13,6 @@ const config: TestRunnerConfig = { customSnapshotIdentifier: context.id, customDiffDir: `${process.cwd()}/__diff_output__`, customSnapshotsDir: `${process.cwd()}/__image_snapshots__`, - failureThresholdType: 'percent', - failureThreshold: 0.0001, }) }, tags: { diff --git a/jest.setup.ts b/jest.setup.ts index 850220fe9..fe95fd6c2 100644 --- a/jest.setup.ts +++ b/jest.setup.ts @@ -1,4 +1,4 @@ -import type { ReactNode } from 'react' +import type { ReactPortal } from 'react' export {} @@ -8,6 +8,15 @@ globalThis.ResizeObserver = jest.fn().mockImplementation(() => ({ disconnect: jest.fn(), })) +global.IntersectionObserver = jest.fn().mockImplementation(() => ({ + observe() { + return null + }, + disconnect() { + return null + }, +})) + window.matchMedia = jest.fn().mockImplementation((query: string) => ({ matches: false, media: query, @@ -26,7 +35,7 @@ jest.mock('@react-aria/utils', () => ({ jest.mock('@react-aria/overlays', () => ({ ...jest.requireActual('@react-aria/overlays'), - Overlay: jest.fn(({ children }: { children: ReactNode }) => children), + Overlay: jest.fn(({ children }) => children as ReactPortal), })) import type { OverlayTriggerProps } from 'react-stately' diff --git a/package.json b/package.json index 1660e27ec..7b6fdf7b3 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,8 @@ "release": "yarn && yarn run clean && yarn run build && lerna publish --no-changelog --no-private", "release:alpha": "yarn release --conventional-prerelease --dist-tag alpha", "postpublish": "zx ./misc/fix-versioning.mjs && ./misc/postpublish.sh", - "website": "vite docs --base=charcoal/docs --port 5000" + "website": "vite docs --base=charcoal/docs --port 5000", + "prepare": "husky" }, "publishConfig": { "provenance": true @@ -45,23 +46,24 @@ "@commitlint/config-lerna-scopes": "^16.0.0", "@originjs/vite-plugin-commonjs": "^1.0.3", "@playwright/test": "^1.40.1", - "@storybook/addon-a11y": "^7.4.1", - "@storybook/addon-docs": "^7.5.1", - "@storybook/addon-essentials": "^7.4.1", - "@storybook/addon-interactions": "^7.4.1", - "@storybook/addon-links": "^7.4.1", - "@storybook/addon-onboarding": "^1.0.8", - "@storybook/addon-storysource": "^7.4.1", - "@storybook/addon-styling": "^1.3.7", - "@storybook/addon-styling-webpack": "^0.0.5", - "@storybook/blocks": "^7.4.1", - "@storybook/builder-vite": "^7.4.1", - "@storybook/builder-webpack5": "^7.4.1", - "@storybook/react": "^7.4.1", - "@storybook/react-vite": "^7.4.1", - "@storybook/react-webpack5": "^7.4.1", - "@storybook/test-runner": "^0.16.0", - "@storybook/testing-library": "^0.2.0", + "@storybook/addon-a11y": "^8.0.5", + "@storybook/addon-docs": "^8.0.5", + "@storybook/addon-essentials": "^8.0.5", + "@storybook/addon-interactions": "^8.0.5", + "@storybook/addon-links": "^8.0.5", + "@storybook/addon-mdx-gfm": "^8.0.5", + "@storybook/addon-onboarding": "^8.0.5", + "@storybook/addon-storysource": "^8.0.5", + "@storybook/addon-styling-webpack": "^1.0.0", + "@storybook/addon-themes": "^8.0.5", + "@storybook/addon-webpack5-compiler-swc": "^1.0.2", + "@storybook/blocks": "^8.0.5", + "@storybook/react": "^8.0.5", + "@storybook/react-vite": "^8.0.5", + "@storybook/react-webpack5": "^8.0.5", + "@storybook/test": "^8.0.5", + "@storybook/test-runner": "^0.17.0", + "@storybook/web-components": "^8.0.5", "@stylelint/postcss-css-in-js": "^0.37.2", "@types/eslint": "^8.4.1", "@types/jest": "^27.4.0", @@ -73,34 +75,42 @@ "@types/webpack": "^5.28.0", "@typescript-eslint/eslint-plugin": "^5.55.0", "@typescript-eslint/parser": "^5.55.0", + "@vitejs/plugin-react": "^4.2.1", "autoprefixer": "^10.4.16", "concurrently": "^8.2.2", "conventional-changelog-conventionalcommits": "^4.6.3", + "css-loader": "^6.10.0", "esbuild": "^0.14.14", "esbuild-jest": "^0.5.0", "eslint": "^8.36.0", "eslint-config-prettier": "^8.7.0", + "eslint-import-resolver-typescript": "^3.6.1", + "eslint-plugin-import": "^2.29.1", "eslint-plugin-jest": "^27.2.1", "eslint-plugin-react": "^7.32.2", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-storybook": "^0.6.11", + "eslint-plugin-storybook": "^0.8.0", "glob": "^7.2.0", "http-server": "^14.1.1", - "husky": "^4.3.8", + "husky": "^9.0.11", "identity-obj-proxy": "^3.0.0", "jest": "^27.4.7", "jest-image-snapshot": "^6.4.0", "jest-specific-snapshot": "^8.0.0", "jsdom": "^19.0.0", "lerna": "^6.6.2", + "lint-staged": "^15.2.2", "npm-run-all": "^4.1.5", + "postcss": "^8.4.38", + "postcss-loader": "^8.1.1", "postcss-syntax": "^0.36.2", "prettier": "^2.8.4", "react": "^17.0.2", "react-dom": "^17.0.2", "react-test-renderer": "17.0.2", - "storybook": "^7.4.1", - "storybook-dark-mode": "^3.0.1", + "storybook": "^8.0.5", + "storybook-dark-mode": "^4.0.1", + "style-loader": "^3.3.4", "styled-components": "^5.3.3", "stylelint": "^14.3.0", "stylelint-config-prettier": "^9.0.3", @@ -109,18 +119,22 @@ "stylelint-config-styled-components": "^0.1.1", "ts-jest": "^29.0.5", "typescript": "^4.9.5", - "vite": "^3.0.8", + "vite": "^5.2.7", "wait-on": "^7.2.0", "zx": "^7.0.3" }, - "husky": { - "hooks": { - "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" - } - }, "packageManager": "yarn@3.1.0", "resolutions": { "react-test-renderer": "17.0.2", - "node-gyp": "^9.0.0" + "node-gyp": "^9.0.0", + "postcss": "^8.4.16" + }, + "lint-staged": { + "*": [ + "prettier --write" + ], + "*.{js,jsx,ts,tsx}": [ + "eslint --fix" + ] } } diff --git a/packages/icons/package.json b/packages/icons/package.json index 3aa454909..b4856446f 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -20,6 +20,7 @@ "clean": "rimraf dist .tsbuildinfo" }, "devDependencies": { + "@storybook/react": "^8.0.5", "@types/dompurify": "^2.3.3", "@types/jest": "^27.4.0", "@types/react": "^17.0.38", diff --git a/packages/icons/src/PixivIcon.story.tsx b/packages/icons/src/PixivIcon.story.tsx index ba60ee320..93dc268be 100644 --- a/packages/icons/src/PixivIcon.story.tsx +++ b/packages/icons/src/PixivIcon.story.tsx @@ -1,16 +1,10 @@ /// -import * as React from 'react' import styled, { createGlobalStyle } from 'styled-components' import TestIconThatNeverExists from './16/TestIconThatNeverExists.svg' -import { Props } from './PixivIcon' -import { PixivIcon } from '.' +import { PixivIcon, Props } from '.' import { KnownIconFile, KNOWN_ICON_FILES } from './charcoalIconFiles' - -interface Story

{ - (args: P): React.ReactNode - args?: P -} +import type { Meta, StoryObj } from '@storybook/react' PixivIcon.extend({ // かぶらなそうな名前をつける @@ -38,13 +32,32 @@ export default { }, }, }, - parameters: { storyshots: { disable: true, }, }, -} + render: ({ scale, color }) => ( + <> + {Object.entries(groupedIcons).map(([groupName, icons]) => ( + + + {groupName} (scale: {scale}) + + + {icons.map((name) => ( + + +

{name}
+ + ))} + + + ))} + + + ), +} as Meta const groupedIcons = KNOWN_ICON_FILES.reduce>( (map, icon) => { @@ -84,8 +97,8 @@ const Group = styled.div` } ` -const IconDef = styled.div<{ color: string }>` - color: ${({ color }) => color}; +const IconDef = styled.div<{ color?: string }>` + color: ${({ color }) => color ?? '#000000'}; display: inline-flex; align-items: center; min-height: 32px; @@ -110,62 +123,46 @@ const Heading = styled.h2` margin: 16px 0; ` -const DefaultStory: Story<{ - scale: NonNullable - color: string -}> = ({ scale, color }) => ( - <> - {Object.entries(groupedIcons).map(([groupName, icons]) => ( - - - {groupName} (scale: {scale}) - - - {icons.map((name) => ( - - -
{name}
- - ))} - - - ))} - - -) - -export const Default = DefaultStory.bind({}) - -Default.args = { scale: 1, color: '#000000' } - -export const WithAttributes: Story = ({ - name, - scale, - color, -}) => ( - <> - - -
アイコンと文字
- - - -) +export const Default: StoryObj = { + args: { scale: 1, color: '#000000' }, +} -WithAttributes.args = { name: '16/Add', scale: 1, color: '#000000' } - -export const WithUnsafe: Story = ({ - name, - scale, - color, -}) => ( - <> - - - アイコンと文字 - - - -) +export const WithAttributes: StoryObj = { + render: ({ color, name, scale }) => ( +
+ + +
アイコンと文字
+ + +
+ ), + args: { + name: '16/Add', + scale: 1, + color: '#000000', + }, +} -WithUnsafe.args = { name: '16/Add', scale: 1, color: '#000000' } +export const WithUnsafe: StoryObj = { + render: ({ color, name, scale, ...args }) => { + return ( + <> + + + アイコンと文字 + + + + ) + }, + args: { + name: '16/Add', + 'unsafe-non-guideline-scale': '3.75', + color: '#000000', + }, +} diff --git a/packages/react-sandbox/.npmignore b/packages/react-sandbox/.npmignore new file mode 100644 index 000000000..e0ee1ccd4 --- /dev/null +++ b/packages/react-sandbox/.npmignore @@ -0,0 +1,2 @@ +*.storyshot +*.snap diff --git a/packages/react-sandbox/package.json b/packages/react-sandbox/package.json index 2d7da5614..43d743604 100644 --- a/packages/react-sandbox/package.json +++ b/packages/react-sandbox/package.json @@ -44,7 +44,6 @@ "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", "rimraf": "^3.0.2", - "storybook": "^7.4.1", "styled-components": "^5.3.3", "tsup": "^6.5.0", "typescript": "^4.9.5" diff --git a/packages/react-sandbox/src/components/Carousel/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/Carousel/__snapshots__/index.story.storyshot deleted file mode 100644 index 86bab23dd..000000000 --- a/packages/react-sandbox/src/components/Carousel/__snapshots__/index.story.storyshot +++ /dev/null @@ -1,360 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storybook Tests Sandbox/Carousel _Carousel 1`] = ` -.c12 { - stroke: none; - fill: currentColor; - width: 24px; - height: 24px; - line-height: 0; - font-size: 0; - vertical-align: middle; -} - -.c11 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: 50%; - background-color: rgba(0,0,0,0.32); - -webkit-transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color; - transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color; - color: #ffffff; -} - -.c9 { - position: absolute; - top: 0; - bottom: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0; - min-width: 40px; - border: none; - outline: 0; - background: transparent; - cursor: pointer; - -webkit-transition: 0.4s visibility,0.4s opacity; - transition: 0.4s visibility,0.4s opacity; - z-index: 1; - visibility: hidden; - opacity: 0; - pointer-events: none; -} - -.c9:hover .c10 { - background-color: rgba(0,0,0,0.3472); - color: #f5f5f5; -} - -.c9:active .c10 { - background-color: rgba(0,0,0,0.4288); - color: #d6d6d6; -} - -.c3 { - vertical-align: top; - overflow: hidden; - list-style: none; - padding: 0; - min-width: 100%; - box-sizing: border-box; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - margin: 0; -} - -.c8 { - opacity: 0; - -webkit-transition: 0.4s opacity; - transition: 0.4s opacity; -} - -.c1 { - position: relative; - z-index: 0; -} - -.c1:hover .c7 { - opacity: 1; -} - -.c2 { - overflow-x: auto; - padding: 0; - margin: 0; - -webkit-scrollbar-width: none; - -moz-scrollbar-width: none; - -ms-scrollbar-width: none; - scrollbar-width: none; -} - -.c2::-webkit-scrollbar { - display: none; -} - -.c5 { - background-color: rgba(0,0,0,0.02); - border-radius: 8px; - color: #adadad; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - font-size: 14px; - font-weight: bold; -} - -.c0 { - width: 100%; - padding: 0 108px; - box-sizing: border-box; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 0 16px; -} - -.c4 > * + * { - margin-left: 4px; -} - -.c6 { - width: 118px; - height: 118px; -} - -
-
-
-
-
    -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    - Dummy -
    -
    -
-
-
- - -
-
-
-
-`; diff --git a/packages/react-sandbox/src/components/Carousel/index.story.tsx b/packages/react-sandbox/src/components/Carousel/index.story.tsx deleted file mode 100644 index ea4ad4c8e..000000000 --- a/packages/react-sandbox/src/components/Carousel/index.story.tsx +++ /dev/null @@ -1,85 +0,0 @@ -import { boolean, number, select, withKnobs } from '@storybook/addon-knobs' -import styled, { css } from 'styled-components' -import Carousel from '.' - -const dummyText = css` - color: ${({ theme }) => theme.color.text4}; - display: flex; - align-items: center; - justify-content: center; - font-size: 14px; - font-weight: bold; -` - -const Dummy = styled.div` - background-color: ${({ theme }) => theme.color.surface2}; - border-radius: 8px; - - ${dummyText} -` -export default { - title: 'Sandbox/Carousel', - decorators: [withKnobs], -} - -export const _Carousel = () => { - const hasGradient = boolean('Gradient', false) - const fadeInGradient = boolean('FadeInGradient', false) - const buttonOffset = number('buttonOffset', 0) - const buttonPadding = number('buttonPadding', 16) - const defaultScrollAlign = select( - 'scrollAlign', - { - Left: 'left', - Center: 'center', - Right: 'right', - }, - 'left' - ) - const defaultScrollOffset = number('scrollOffset', 0) - const itemCount = number('Item count', 20) - const itemSize = number('Item size', 118) - - const items = Array.from({ length: itemCount }) - return ( - - - - {items.map((_value, index) => ( - - Dummy - - ))} - - - - ) -} -const Base = styled.div` - width: 100%; - padding: 0 108px; - box-sizing: border-box; -` - -const Container = styled.div` - display: flex; - padding: 0 16px; - - > * + * { - margin-left: 4px; - } -` - -const Box = styled(Dummy)<{ size: number }>` - width: ${(props) => `${props.size}px`}; - height: ${(props) => `${props.size}px`}; -` diff --git a/packages/react-sandbox/src/components/CarouselButton/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/CarouselButton/__snapshots__/index.story.storyshot deleted file mode 100644 index 1dd055a91..000000000 --- a/packages/react-sandbox/src/components/CarouselButton/__snapshots__/index.story.storyshot +++ /dev/null @@ -1,168 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storybook Tests Sandbox/Carousel/CarouselButton _CarouselButton 1`] = ` -.c3 { - stroke: none; - fill: currentColor; - width: 24px; - height: 24px; - line-height: 0; - font-size: 0; - vertical-align: middle; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: 50%; - background-color: rgba(0,0,0,0.32); - -webkit-transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color; - transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color; - color: #ffffff; -} - -.c0 { - position: absolute; - top: 0; - bottom: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0; - min-width: 40px; - border: none; - outline: 0; - background: transparent; - cursor: pointer; - -webkit-transition: 0.4s visibility,0.4s opacity; - transition: 0.4s visibility,0.4s opacity; - z-index: 1; -} - -.c0:hover .c1 { - background-color: rgba(0,0,0,0.3472); - color: #f5f5f5; -} - -.c0:active .c1 { - background-color: rgba(0,0,0,0.4288); - color: #d6d6d6; -} - -
- -
-`; - -exports[`Storybook Tests Sandbox/Carousel/CarouselButton _ScrollHintButton 1`] = ` -.c2 { - stroke: none; - fill: currentColor; - width: 24px; - height: 24px; - line-height: 0; - font-size: 0; - vertical-align: middle; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: 50%; - background-color: rgba(0,0,0,0.32); - -webkit-transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color; - transition: 0.4s visibility,0.4s opacity,0.2s background-color,0.2s color; - color: #ffffff; -} - -.c1 { - cursor: pointer; -} - -.c1:hover { - background-color: rgba(0,0,0,0.3472); - color: #f5f5f5; -} - -.c1:active { - background-color: rgba(0,0,0,0.4288); - color: #d6d6d6; -} - -
-
- - - -
-
-`; diff --git a/packages/react-sandbox/src/components/CarouselButton/index.story.tsx b/packages/react-sandbox/src/components/CarouselButton/index.story.tsx deleted file mode 100644 index f7e3506ca..000000000 --- a/packages/react-sandbox/src/components/CarouselButton/index.story.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { action } from '@storybook/addon-actions' -import { boolean, number, select, withKnobs } from '@storybook/addon-knobs' -import CarouselButton, { Direction, ScrollHintButton } from '.' - -export default { - title: 'Sandbox/Carousel/CarouselButton', - decorators: [withKnobs], - component: CarouselButton, -} - -export const _CarouselButton = () => { - const direction = select( - 'direction', - { left: Direction.Left, right: Direction.Right }, - Direction.Left - ) - const show = boolean('show', true) - const offset = number('offset', 0) - const padding = number('padding', 0) - - return ( - - ) -} - -function noop() { - // empty -} - -export const _ScrollHintButton = () => { - const direction = select( - 'direction', - { left: Direction.Left, right: Direction.Right }, - Direction.Left - ) - return -} diff --git a/packages/react-sandbox/src/components/Filter/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/Filter/__snapshots__/index.story.storyshot deleted file mode 100644 index e968337ea..000000000 --- a/packages/react-sandbox/src/components/Filter/__snapshots__/index.story.storyshot +++ /dev/null @@ -1,239 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storybook Tests Sandbox/Filter Button 1`] = ` -.c0 { - display: block; - outline: none; - border: none; - padding: 9px 24px; - font-size: 14px; - line-height: 22px; - font-weight: bold; - border-radius: 2000px; - -webkit-transition: color 0.2s; - transition: color 0.2s; - color: #858585; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; - background-color: rgba(0,0,0,0.04); - color: #474747; - cursor: default; -} - -.c0:hover { - color: #474747; -} - -@media (max-width:743px) { - .c0 { - padding: 5px 16px; - } -} - -
- -
-`; - -exports[`Storybook Tests Sandbox/Filter Default 1`] = ` -.c3 { - display: block; - outline: none; - border: none; - padding: 9px 24px; - font-size: 14px; - line-height: 22px; - font-weight: bold; - border-radius: 2000px; - -webkit-transition: color 0.2s; - transition: color 0.2s; - color: #858585; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; -} - -.c3:hover { - color: #474747; -} - -.c1 { - display: block; - outline: none; - border: none; - padding: 9px 24px; - font-size: 14px; - line-height: 22px; - font-weight: bold; - border-radius: 2000px; - -webkit-transition: color 0.2s; - transition: color 0.2s; - color: #858585; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; -} - -.c1:hover { - color: #474747; -} - -.c2 { - display: block; - outline: none; - border: none; - padding: 9px 24px; - font-size: 14px; - line-height: 22px; - font-weight: bold; - border-radius: 2000px; - -webkit-transition: color 0.2s; - transition: color 0.2s; - color: #858585; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; - background-color: rgba(0,0,0,0.04); - color: #474747; - cursor: default; -} - -.c2:hover { - color: #474747; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -@media (max-width:743px) { - .c3 { - padding: 5px 16px; - } -} - -@media (max-width:743px) { - .c1 { - padding: 5px 16px; - } -} - -@media (max-width:743px) { - .c2 { - padding: 5px 16px; - } -} - -
-
- - - 新しい順 - - - - 古い順 - - - - - これはリンク - - - -
-
-`; - -exports[`Storybook Tests Sandbox/Filter Link 1`] = ` -.c0 { - display: block; - outline: none; - border: none; - padding: 9px 24px; - font-size: 14px; - line-height: 22px; - font-weight: bold; - border-radius: 2000px; - -webkit-transition: color 0.2s; - transition: color 0.2s; - color: #858585; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-color: transparent; - background-color: rgba(0,0,0,0.04); - color: #474747; - cursor: default; -} - -.c0:hover { - color: #474747; -} - -@media (max-width:743px) { - .c0 { - padding: 5px 16px; - } -} - -
- - Label - -
-`; diff --git a/packages/react-sandbox/src/components/Filter/index.story.tsx b/packages/react-sandbox/src/components/Filter/index.story.tsx deleted file mode 100644 index 9b3296f5f..000000000 --- a/packages/react-sandbox/src/components/Filter/index.story.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { action } from '@storybook/addon-actions' -import { boolean } from '@storybook/addon-knobs' -import { - Link as RouterLink, - MemoryRouter as Router, - Route, - useParams, - useNavigate, - Routes, -} from 'react-router-dom' -import Filter, { FilterButton, FilterLink } from '.' -import { ComponentAbstraction } from '@charcoal-ui/react' - -export default { - title: 'Sandbox/Filter', - component: Filter, -} - -const makeUrl = (page: number) => `/${page}` - -export function Default() { - return ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error TODO: adapt to react-router@6 (props should be covariant not bivariant) - - makeUrl(i + 1))} - initialIndex={0} - > - - } /> - - - - ) -} - -function FilterButtons() { - const navigate = useNavigate() - const params = useParams() - const page = params.page !== undefined ? parseInt(params.page, 10) : 0 - - return ( - - - 新しい順 - - - 古い順 - - navigate('2')}> - 人気順 - - - これはリンク - - navigate('4')}> - これはボタン - - - ) -} - -export function Button() { - const active = boolean('Active', true) - const reactive = boolean('Reactive', false) - return ( - - Label - - ) -} - -export function Link() { - const active = boolean('Active', true) - const reactive = boolean('Reactive', false) - return ( - - Label - - ) -} diff --git a/packages/react-sandbox/src/components/HintText/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/HintText/__snapshots__/index.story.storyshot deleted file mode 100644 index 10feaf6a2..000000000 --- a/packages/react-sandbox/src/components/HintText/__snapshots__/index.story.storyshot +++ /dev/null @@ -1,119 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storybook Tests Sandbox/HintText Default 1`] = ` -.c2 { - stroke: none; - fill: currentColor; - width: 16px; - height: 16px; - line-height: 0; - font-size: 0; - vertical-align: middle; -} - -.c3 { - fill: #ffffff; - fill-rule: evenodd; -} - -.c0 { - background-color: var(--charcoal-surface3); - border-radius: 8px; - padding-top: 16px; - padding-bottom: 16px; - padding-right: 16px; - padding-left: 16px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #adadad; - height: 22px; - margin: -4px 4px -4px 0; -} - -.c4 { - color: var(--charcoal-text2); - font-size: 14px; - line-height: 22px; - display: flow-root; - margin: 0; -} - -.c4::before { - display: block; - width: 0; - height: 0; - content: ''; - margin-top: -4px; -} - -.c4::after { - display: block; - width: 0; - height: 0; - content: ''; - margin-bottom: -4px; -} - -@media (max-width:743px) { - .c0 { - padding-top: 16px; - padding-bottom: 16px; - padding-right: 16px; - padding-left: 16px; - } -} - -
-
-
- - - - -
-

- ヒントテキストだよおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお -

-
-
-`; diff --git a/packages/react-sandbox/src/components/HintText/index.story.tsx b/packages/react-sandbox/src/components/HintText/index.story.tsx deleted file mode 100644 index 3de02d135..000000000 --- a/packages/react-sandbox/src/components/HintText/index.story.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Story } from '../../_lib/compat' -import HintText from '.' - -export default { - title: 'Sandbox/HintText', - component: HintText, -} - -const Template: Story<{ hintText: string; context: 'page' | 'section' }> = ( - args -) => {args.hintText} - -export const Default = Template.bind({}) -Default.args = { - hintText: - 'ヒントテキストだよおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお', - context: 'section', -} diff --git a/packages/react-sandbox/src/components/Layout/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/Layout/__snapshots__/index.story.storyshot deleted file mode 100644 index 5dee06a19..000000000 --- a/packages/react-sandbox/src/components/Layout/__snapshots__/index.story.storyshot +++ /dev/null @@ -1,1297 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storybook Tests Sandbox/Layout Basic 1`] = ` -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #858585; - border-radius: 24px; - font-weight: bold; - font-size: 14px; - line-height: 22px; - padding: 0 16px; - height: 40px; - -webkit-transition: 0.2s color; - transition: 0.2s color; -} - -.c3:hover { - -webkit-transition: 0.2s color; - transition: 0.2s color; - color: #474747; -} - -.c3[aria-current] { - color: #474747; - background-color: rgba(0,0,0,0.04); -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background-color: #f5f5f5; -} - -.c1 { - min-width: 208px; - padding: 40px 0 40px 24px; - box-sizing: border-box; -} - -.c4 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - min-width: 0; - max-width: 1224px; - padding: 40px 72px; - margin: 0 auto; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c5 { - font-weight: bold; - margin-bottom: 12px; - font-size: 20px; - line-height: 28px; - color: #474747; -} - -.c6 { - display: grid; - gap: 24px; - grid-template-columns: 1fr; - grid-auto-columns: 1fr; - grid-auto-rows: auto; -} - -.c7 { - grid-column-start: auto; - grid-column-end: span 3; - border-radius: 24px; - color: #474747; - background-color: #ffffff; - min-width: 0; -} - -.c11 { - grid-column-start: auto; - grid-column-end: span 2; - border-radius: 24px; - color: #474747; - background-color: #ffffff; - min-width: 0; -} - -.c12 { - grid-column-start: auto; - grid-column-end: span 1; - border-radius: 24px; - color: #474747; - background-color: #ffffff; - min-width: 0; -} - -.c8 { - padding: 0 24px; - height: 48px; - display: grid; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 16px; - line-height: 24px; - font-weight: bold; - background-color: rgba(0,0,0,0.02); - color: #474747; - border-radius: 24px 24px 0 0; -} - -.c9 { - padding: 24px 24px; - width: 100%; - box-sizing: border-box; -} - -.c10 { - height: 184px; - color: #adadad; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - font-size: 14px; - font-weight: bold; -} - -@media (max-width:743px) { - .c0 { - background-color: #ffffff; - } -} - -@media 1160 { - .c1 { - display: none; - } -} - -@media (max-width:743px) { - .c4 { - padding: 0; - } -} - -@media (max-width:743px) { - .c5 { - margin-bottom: 0; - padding: 12px; - font-size: 16px; - line-height: 24px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - background-color: rgba(0,0,0,0.02); - } -} - -@media (max-width:743px) { - .c6 { - gap: 0; - background-color: #ffffff; - padding-bottom: 60px; - } -} - -@media 1368 { - .c7 { - grid-column-end: span 2; - } -} - -@media (max-width:743px) { - .c7 { - grid-column-end: span 1; - border-radius: 0; - padding-bottom: 40px; - } -} - -@media 1368 { - -} - -@media (max-width:743px) { - .c11 { - grid-column-end: span 1; - border-radius: 0; - padding-bottom: 40px; - } -} - -@media 1368 { - -} - -@media (max-width:743px) { - .c12 { - border-radius: 0; - padding-bottom: 40px; - } -} - -@media (max-width:743px) { - .c8 { - margin-top: 4px; - padding: 0 16px; - background: none; - overflow-x: auto; - border-radius: unset; - } -} - -@media (max-width:743px) { - .c9 { - padding: 16px 16px 0; - } -} - -
-
- -
-
- Header -
-
-
-
- Dummy -
-
-
- Span 3 -
-
-
-
-
- Dummy -
-
-
- Span 2 -
-
-
-
-
- Dummy -
-
-
- Span 1 -
-
-
-
-
- Dummy -
-
-
- Span 1 -
-
-
-
-
- Dummy -
-
-
- Span 1 -
-
-
-
-
- Dummy -
-
-
- Span 1 -
-
-
-
-
-
-
-`; - -exports[`Storybook Tests Sandbox/Layout Center 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background-color: #f5f5f5; -} - -.c1 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - min-width: 0; - max-width: 600px; - padding: 40px 72px; - margin: 0 auto; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - font-weight: bold; - margin-bottom: 12px; - font-size: 20px; - line-height: 28px; - color: #474747; -} - -.c3 { - display: grid; - gap: 24px; - grid-template-columns: 1fr; - grid-auto-columns: 1fr; - grid-auto-rows: auto; -} - -.c4 { - grid-column-start: auto; - grid-column-end: span 3; - border-radius: 24px; - color: #474747; - background-color: #ffffff; - min-width: 0; -} - -.c5 { - padding: 0 40px; - height: 64px; - display: grid; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 16px; - line-height: 24px; - font-weight: bold; - background-color: rgba(0,0,0,0.02); - color: #474747; - border-radius: 24px 24px 0 0; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c6 { - padding: 40px 40px; - width: 100%; - box-sizing: border-box; -} - -.c7 { - height: 184px; - color: #adadad; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - font-size: 14px; - font-weight: bold; -} - -@media (max-width:743px) { - .c0 { - background-color: #ffffff; - } -} - -@media (max-width:743px) { - .c1 { - padding: 0; - } -} - -@media (max-width:743px) { - .c2 { - margin-bottom: 0; - padding: 12px; - font-size: 16px; - line-height: 24px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - background-color: rgba(0,0,0,0.02); - } -} - -@media (max-width:743px) { - .c3 { - gap: 0; - background-color: #ffffff; - padding-bottom: 60px; - } -} - -@media 1160 { - .c4 { - grid-column-end: span 2; - } -} - -@media (max-width:743px) { - .c4 { - grid-column-end: span 1; - border-radius: 0; - padding-bottom: 40px; - } -} - -@media (max-width:743px) { - .c5 { - margin-top: 4px; - padding: 0 16px; - background: none; - overflow-x: auto; - border-radius: unset; - height: 48px; - margin-top: 0; - } -} - -@media (max-width:743px) { - .c6 { - padding: 16px 16px 0; - } -} - -
-
-
-
- Header -
-
-
-
- Center -
-
-
- Hello, Flexible Grid Layout! -
-
-
-
-
-
-
-`; - -exports[`Storybook Tests Sandbox/Layout NoMenu 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background-color: #f5f5f5; -} - -.c1 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - min-width: 0; - max-width: 1224px; - padding: 40px 72px; - margin: 0 auto; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - font-weight: bold; - margin-bottom: 12px; - font-size: 20px; - line-height: 28px; - color: #474747; -} - -.c3 { - display: grid; - gap: 24px; - grid-template-columns: 1fr; - grid-auto-columns: 1fr; - grid-auto-rows: auto; -} - -.c4 { - grid-column-start: auto; - grid-column-end: span 3; - border-radius: 24px; - color: #474747; - background-color: #ffffff; - min-width: 0; -} - -.c8 { - grid-column-start: auto; - grid-column-end: span 2; - border-radius: 24px; - color: #474747; - background-color: #ffffff; - min-width: 0; -} - -.c9 { - grid-column-start: auto; - grid-column-end: span 1; - border-radius: 24px; - color: #474747; - background-color: #ffffff; - min-width: 0; -} - -.c5 { - padding: 0 24px; - height: 48px; - display: grid; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 16px; - line-height: 24px; - font-weight: bold; - background-color: rgba(0,0,0,0.02); - color: #474747; - border-radius: 24px 24px 0 0; -} - -.c6 { - padding: 24px 24px; - width: 100%; - box-sizing: border-box; -} - -.c7 { - height: 184px; - color: #adadad; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - font-size: 14px; - font-weight: bold; -} - -@media (max-width:743px) { - .c0 { - background-color: #ffffff; - } -} - -@media (max-width:743px) { - .c1 { - padding: 0; - } -} - -@media (max-width:743px) { - .c2 { - margin-bottom: 0; - padding: 12px; - font-size: 16px; - line-height: 24px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - background-color: rgba(0,0,0,0.02); - } -} - -@media (max-width:743px) { - .c3 { - gap: 0; - background-color: #ffffff; - padding-bottom: 60px; - } -} - -@media 1160 { - .c4 { - grid-column-end: span 2; - } -} - -@media (max-width:743px) { - .c4 { - grid-column-end: span 1; - border-radius: 0; - padding-bottom: 40px; - } -} - -@media 1160 { - -} - -@media (max-width:743px) { - .c8 { - grid-column-end: span 1; - border-radius: 0; - padding-bottom: 40px; - } -} - -@media 1160 { - -} - -@media (max-width:743px) { - .c9 { - border-radius: 0; - padding-bottom: 40px; - } -} - -@media (max-width:743px) { - .c5 { - margin-top: 4px; - padding: 0 16px; - background: none; - overflow-x: auto; - border-radius: unset; - } -} - -@media (max-width:743px) { - .c6 { - padding: 16px 16px 0; - } -} - -
-
-
-
- Header -
-
-
-
- Dummy -
-
-
- Span 3 -
-
-
-
-
- Dummy -
-
-
- Span 2 -
-
-
-
-
- Dummy -
-
-
- Span 1 -
-
-
-
-
- Dummy -
-
-
- Span 1 -
-
-
-
-
- Dummy -
-
-
- Span 1 -
-
-
-
-
- Dummy -
-
-
- Span 1 -
-
-
-
-
-
-
-`; - -exports[`Storybook Tests Sandbox/Layout Wide 1`] = ` -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - color: #858585; - border-radius: 24px; - font-weight: bold; - font-size: 14px; - line-height: 22px; - padding: 0 16px; - height: 40px; - -webkit-transition: 0.2s color; - transition: 0.2s color; -} - -.c3:hover { - -webkit-transition: 0.2s color; - transition: 0.2s color; - color: #474747; -} - -.c3[aria-current] { - color: #474747; - background-color: rgba(0,0,0,0.04); -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - background-color: #f5f5f5; -} - -.c1 { - min-width: 208px; - padding: 40px 0 40px 24px; - box-sizing: border-box; -} - -.c4 { - -webkit-box-flex: 1; - -webkit-flex-grow: 1; - -ms-flex-positive: 1; - flex-grow: 1; - min-width: 0; - max-width: 1224px; - padding: 40px 72px; - margin: 0 auto; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c5 { - font-weight: bold; - margin-bottom: 12px; - font-size: 20px; - line-height: 28px; - color: #474747; -} - -.c6 { - display: grid; - gap: 24px; - grid-template-columns: 1fr; - grid-auto-columns: 1fr; - grid-auto-rows: auto; -} - -.c7 { - grid-column-start: auto; - grid-column-end: span 3; - border-radius: 24px; - color: #474747; - background-color: #ffffff; - min-width: 0; -} - -.c8 { - padding: 0 40px; - height: 64px; - display: grid; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 16px; - line-height: 24px; - font-weight: bold; - background-color: rgba(0,0,0,0.02); - color: #474747; - border-radius: 24px 24px 0 0; -} - -.c9 { - padding: 40px 40px; - width: 100%; - box-sizing: border-box; -} - -.c10 { - height: 184px; - color: #adadad; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - font-size: 14px; - font-weight: bold; -} - -@media (max-width:743px) { - .c0 { - background-color: #ffffff; - } -} - -@media 1160 { - .c1 { - display: none; - } -} - -@media (max-width:743px) { - .c4 { - padding: 0; - } -} - -@media (max-width:743px) { - .c5 { - margin-bottom: 0; - padding: 12px; - font-size: 16px; - line-height: 24px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - background-color: rgba(0,0,0,0.02); - } -} - -@media (max-width:743px) { - .c6 { - gap: 0; - background-color: #ffffff; - padding-bottom: 60px; - } -} - -@media 1368 { - .c7 { - grid-column-end: span 2; - } -} - -@media (max-width:743px) { - .c7 { - grid-column-end: span 1; - border-radius: 0; - padding-bottom: 40px; - } -} - -@media (max-width:743px) { - .c8 { - margin-top: 4px; - padding: 0 16px; - background: none; - overflow-x: auto; - border-radius: unset; - height: 48px; - margin-top: 0; - } -} - -@media (max-width:743px) { - .c9 { - padding: 16px 16px 0; - } -} - -
-
- -
-
- Header -
-
-
-
- Wide -
-
-
- Hello, Flexible Grid Layout! -
-
-
-
-
-
-
-`; diff --git a/packages/react-sandbox/src/components/Layout/index.story.tsx b/packages/react-sandbox/src/components/Layout/index.story.tsx deleted file mode 100644 index c7d478221..000000000 --- a/packages/react-sandbox/src/components/Layout/index.story.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import * as React from 'react' -import styled from 'styled-components' -import { dummyText } from '../../misc/storybook-helper' -import { theme } from '../../styled' -import LeftMenu from '../LeftMenu' -import Layout, { LayoutItem, LayoutItemBody, LayoutItemHeader } from '.' - -export default { - title: 'Sandbox/Layout', - component: Layout, - parameters: { - layout: 'fullscreen', - }, -} - -export function Basic() { - const menu = - const header = <>Header - return ( - - Span 3 - Span 2 - Span 1 - Span 1 - Span 1 - Span 1 - - ) -} - -export function NoMenu() { - const header = <>Header - return ( - - Span 3 - Span 2 - Span 1 - Span 1 - Span 1 - Span 1 - - ) -} - -export function Wide() { - const menu = - const header = <>Header - return ( - - - Wide - - Hello, Flexible Grid Layout! - - - - ) -} - -export function Center() { - const header = <>Header - return ( - - - Center - - Hello, Flexible Grid Layout! - - - - ) -} - -function DummyCard({ - span, - children, -}: { - span: number - children: React.ReactNode -}) { - return ( - - Dummy - - {children} - - - ) -} - -const Dummy = styled.div` - ${theme((o) => o.height.column(2))} - - ${dummyText} -` - -function DummyMenu() { - const links = [ - { - id: 'hello', - text: 'Hello', - to: '#hello', - }, - { - id: 'world', - text: 'World', - to: '#world', - }, - { - id: 'dummy', - text: 'Dummy', - to: '#dummy', - }, - { - id: 'menu', - text: 'Menu', - to: '#menu', - }, - ] as const - return -} diff --git a/packages/react-sandbox/src/components/MenuListItem/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/MenuListItem/__snapshots__/index.story.storyshot deleted file mode 100644 index a621de79f..000000000 --- a/packages/react-sandbox/src/components/MenuListItem/__snapshots__/index.story.storyshot +++ /dev/null @@ -1,1389 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storybook Tests Sandbox/MenuListItem Default 1`] = ` -.c3 { - overflow: hidden; - line-height: 22px; - overflow-wrap: break-word; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 40px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 24px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - -webkit-transition: 0.2s background-color; - transition: 0.2s background-color; -} - -.c0:hover { - background-color: rgba(0,0,0,0.04); -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - opacity: 0.32; -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - cursor: default; - pointer-events: none; -} - -.c0:disabled:hover, -.c0[aria-disabled]:not([aria-disabled=false]):hover { - background-color: unset; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - color: #474747; - line-height: 22px; - font-size: 14px; - display: grid; -} - -
-
-
-
-
- Knob to change -
-
-
-
-
-`; - -exports[`Storybook Tests Sandbox/MenuListItem Disabled 1`] = ` -.c3 { - overflow: hidden; - line-height: 22px; - overflow-wrap: break-word; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 40px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 24px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - -webkit-transition: 0.2s background-color; - transition: 0.2s background-color; -} - -.c0:hover { - background-color: rgba(0,0,0,0.04); -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - opacity: 0.32; -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - cursor: default; - pointer-events: none; -} - -.c0:disabled:hover, -.c0[aria-disabled]:not([aria-disabled=false]):hover { - background-color: unset; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - color: #474747; - line-height: 22px; - font-size: 14px; - display: grid; -} - -
-
-
-
-
- Disabled item -
-
-
-
-
-`; - -exports[`Storybook Tests Sandbox/MenuListItem HardLink 1`] = ` -.c4 { - overflow: hidden; - line-height: 22px; - overflow-wrap: break-word; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 40px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 24px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - -webkit-transition: 0.2s background-color; - transition: 0.2s background-color; -} - -.c1:hover { - background-color: rgba(0,0,0,0.04); -} - -.c1:disabled, -.c1[aria-disabled]:not([aria-disabled=false]) { - opacity: 0.32; -} - -.c1:disabled, -.c1[aria-disabled]:not([aria-disabled=false]) { - cursor: default; - pointer-events: none; -} - -.c1:disabled:hover, -.c1[aria-disabled]:not([aria-disabled=false]):hover { - background-color: unset; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c3 { - color: #474747; - line-height: 22px; - font-size: 14px; - display: grid; -} - -.c0 { - display: block; -} - - -`; - -exports[`Storybook Tests Sandbox/MenuListItem Icon 1`] = ` -.c4 { - overflow: hidden; - line-height: 22px; - overflow-wrap: break-word; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 40px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 24px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - -webkit-transition: 0.2s background-color; - transition: 0.2s background-color; -} - -.c1:hover { - background-color: rgba(0,0,0,0.04); -} - -.c1:disabled, -.c1[aria-disabled]:not([aria-disabled=false]) { - opacity: 0.32; -} - -.c1:disabled, -.c1[aria-disabled]:not([aria-disabled=false]) { - cursor: default; - pointer-events: none; -} - -.c1:disabled:hover, -.c1[aria-disabled]:not([aria-disabled=false]):hover { - background-color: unset; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c3 { - color: #474747; - line-height: 22px; - font-size: 14px; - display: grid; -} - -.c0 { - display: block; -} - -.c5 { - display: grid; - gap: 8px; - grid-auto-flow: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c6 { - color: #858585; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c7 { - display: inline-block; - width: 24px; - height: 24px; - background-color: currentColor; -} - -
- - -`; - -exports[`Storybook Tests Sandbox/MenuListItem InlineIcon 1`] = ` -.c3 { - overflow: hidden; - line-height: 22px; - overflow-wrap: break-word; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 40px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 24px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - -webkit-transition: 0.2s background-color; - transition: 0.2s background-color; -} - -.c0:hover { - background-color: rgba(0,0,0,0.04); -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - opacity: 0.32; -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - cursor: default; - pointer-events: none; -} - -.c0:disabled:hover, -.c0[aria-disabled]:not([aria-disabled=false]):hover { - background-color: unset; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - color: #474747; - line-height: 22px; - font-size: 14px; - display: grid; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c5 { - min-width: 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - -.c6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - visibility: visible; - margin-left: 4px; -} - -.c7 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; -} - -.c7 > svg { - display: block; -} - -.c8 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - vertical-align: top; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c8::before { - content: ''; - display: inline-block; - height: 16px; - width: 16px; - background-color: currentColor; -} - -
-
-
-
-
-
-
- Label with inline icon -
-
-
-
-
-
-
-
-
-
-
-
-`; - -exports[`Storybook Tests Sandbox/MenuListItem Label 1`] = ` -.c4 { - overflow: hidden; - line-height: 22px; - overflow-wrap: break-word; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 40px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 24px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: default; - -webkit-transition: 0.2s background-color; - transition: 0.2s background-color; -} - -.c1:hover { - background-color: rgba(0,0,0,0.04); -} - -.c1:disabled, -.c1[aria-disabled]:not([aria-disabled=false]) { - opacity: 0.32; -} - -.c1:disabled, -.c1[aria-disabled]:not([aria-disabled=false]) { - cursor: default; - pointer-events: none; -} - -.c1:disabled:hover, -.c1[aria-disabled]:not([aria-disabled=false]):hover { - background-color: unset; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c3 { - color: #474747; - line-height: 22px; - font-size: 14px; - display: grid; -} - -.c0 { - padding: 0 16px; - font-size: 12px; - line-height: 16px; - color: #858585; - margin-top: -2px; - margin-bottom: 6px; -} - -
-
- Label -
-
-
-
-
- Label grouped items -
-
-
-
-
-`; - -exports[`Storybook Tests Sandbox/MenuListItem Link 1`] = ` -.c4 { - overflow: hidden; - line-height: 22px; - overflow-wrap: break-word; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 40px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 24px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - -webkit-transition: 0.2s background-color; - transition: 0.2s background-color; -} - -.c1:hover { - background-color: rgba(0,0,0,0.04); -} - -.c1:disabled, -.c1[aria-disabled]:not([aria-disabled=false]) { - opacity: 0.32; -} - -.c1:disabled, -.c1[aria-disabled]:not([aria-disabled=false]) { - cursor: default; - pointer-events: none; -} - -.c1:disabled:hover, -.c1[aria-disabled]:not([aria-disabled=false]):hover { - background-color: unset; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c3 { - color: #474747; - line-height: 22px; - font-size: 14px; - display: grid; -} - -.c0 { - display: block; -} - - -`; - -exports[`Storybook Tests Sandbox/MenuListItem NoHoverEffect 1`] = ` -.c3 { - overflow: hidden; - line-height: 22px; - overflow-wrap: break-word; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 40px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 24px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - -webkit-transition: 0.2s background-color; - transition: 0.2s background-color; -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - opacity: 0.32; -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - cursor: default; - pointer-events: none; -} - -.c0:disabled:hover, -.c0[aria-disabled]:not([aria-disabled=false]):hover { - background-color: unset; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - color: #474747; - line-height: 22px; - font-size: 14px; - display: grid; -} - -.c4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - cursor: pointer; - outline: 0; -} - -.c4[aria-disabled='true'] { - cursor: auto; -} - -.c5 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - z-index: 0; -} - -.c8 { - position: relative; - box-sizing: border-box; - width: 28px; - height: 16px; - border-radius: 16px; - border: 2px solid transparent; - background: #adadad; - -webkit-transition: box-shadow 0.2s,background-color 0.2s; - transition: box-shadow 0.2s,background-color 0.2s; -} - -.c10 { - position: absolute; - display: block; - top: 0; - left: 0; - width: 12px; - height: 12px; - background-color: #ffffff; - border-radius: 50%; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - -webkit-transition: -webkit-transform 0.2s; - -webkit-transition: transform 0.2s; - transition: transform 0.2s; -} - -.c6 { - position: absolute; - z-index: 1; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 16px; - opacity: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - outline: none; - cursor: pointer; -} - -.c6:checked ~ .c7 { - background-color: #0096fa; -} - -.c6:checked ~ .c7 .c9 { - -webkit-transform: translateX(12px); - -ms-transform: translateX(12px); - transform: translateX(12px); -} - -.c6:disabled { - cursor: auto; -} - -.c6:disabled ~ .c7 { - opacity: 0.32; -} - -.c6:not(:disabled):focus ~ .c7 { - box-shadow: 0 0 0 4px rgba(0,150,250,0.32); -} - -
-
-
-
-
- With toggle (no hover effect) -
-
-
-
-`; - -exports[`Storybook Tests Sandbox/MenuListItem Simple 1`] = ` -.c3 { - overflow: hidden; - line-height: 22px; - overflow-wrap: break-word; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 56px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 24px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - -webkit-transition: 0.2s background-color; - transition: 0.2s background-color; -} - -.c0:hover { - background-color: rgba(0,0,0,0.04); -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - opacity: 0.32; -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - cursor: default; - pointer-events: none; -} - -.c0:disabled:hover, -.c0[aria-disabled]:not([aria-disabled=false]):hover { - background-color: unset; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - color: #474747; - line-height: 22px; - font-size: 14px; - display: grid; -} - -.c4 { - color: #858585; - line-height: 18px; - font-size: 10px; -} - -
-
-
-
-
- Simple item -
-
-
-
- with secondary -
-
-
-
-
-`; - -exports[`Storybook Tests Sandbox/MenuListItem Spacer 1`] = ` -.c3 { - overflow: hidden; - line-height: 22px; - overflow-wrap: break-word; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 40px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 24px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: default; - -webkit-transition: 0.2s background-color; - transition: 0.2s background-color; -} - -.c0:hover { - background-color: rgba(0,0,0,0.04); -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - opacity: 0.32; -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - cursor: default; - pointer-events: none; -} - -.c0:disabled:hover, -.c0[aria-disabled]:not([aria-disabled=false]):hover { - background-color: unset; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - color: #474747; - line-height: 22px; - font-size: 14px; - display: grid; -} - -.c4 { - height: 24px; -} - -
-
-
-
-
- ↓ This is spacer -
-
-
-
-
-
-
-
-
- ↑ This is spacer -
-
-
-
-
-`; - -exports[`Storybook Tests Sandbox/MenuListItem TextEllipsis 1`] = ` -.c3 { - overflow: hidden; - line-height: 22px; - overflow-wrap: break-word; - text-overflow: ellipsis; - white-space: nowrap; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 40px; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 0 24px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: default; - -webkit-transition: 0.2s background-color; - transition: 0.2s background-color; -} - -.c0:hover { - background-color: rgba(0,0,0,0.04); -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - opacity: 0.32; -} - -.c0:disabled, -.c0[aria-disabled]:not([aria-disabled=false]) { - cursor: default; - pointer-events: none; -} - -.c0:disabled:hover, -.c0[aria-disabled]:not([aria-disabled=false]):hover { - background-color: unset; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c2 { - color: #474747; - line-height: 22px; - font-size: 14px; - display: grid; -} - -
-
-
-
-
-
- Loooooooooooooooooooooooooong texxxxxxxxxxxxxxxxxxxxxxxxxt -
-
-
-
-
-
-`; diff --git a/packages/react-sandbox/src/components/MenuListItem/index.story.tsx b/packages/react-sandbox/src/components/MenuListItem/index.story.tsx deleted file mode 100644 index 19dcfff50..000000000 --- a/packages/react-sandbox/src/components/MenuListItem/index.story.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import { action } from '@storybook/addon-actions' -import { boolean, select, text } from '@storybook/addon-knobs' -import styled from 'styled-components' -import SwitchCheckbox from '../SwitchCheckbox' -import WithIcon from '../WithIcon' -import MenuListItem, { - MenuListItemContext, - MenuListLabel, - MenuListLinkItem, - MenuListLinkItemWithIcon, - MenuListSpacer, -} from '.' - -export default { - title: 'Sandbox/MenuListItem', - component: MenuListItem, -} - -export const Default = () => { - const primary = text('primary', 'Knob to change') - const secondary = text('secondary', '') - const disabled = boolean('disabled', false) - const padding = select('padding', { '16': 16, '24': 24 }, 24) - const noHover = boolean('noHover', false) - return ( - - - - ) -} - -export const Simple = () => ( - -) - -export const Disabled = () => ( - -) - -export const Link = () => ( - -) - -export const HardLink = () => ( - -) - -export const InlineIcon = () => ( - }>Label with inline icon - } - onClick={action('toggle')} - /> -) - -export const Icon = () => ( - } - link="#linkTo" - /> -) - -export const NoHoverEffect = () => ( - - - -) - -export const Spacer = () => ( - <> - - - - -) - -export const Label = () => ( - <> - Label - - -) - -export const TextEllipsis = () => ( -
- -
-) - -const TestIcon = styled.div` - display: inline-block; - width: 24px; - height: 24px; - background-color: currentColor; -` - -const TestInlineIcon = styled.div` - display: inline-flex; - vertical-align: top; - align-items: center; - &::before { - content: ''; - display: inline-block; - height: 16px; - width: 16px; - background-color: currentColor; - } -` diff --git a/packages/react-sandbox/src/components/Pager/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/Pager/__snapshots__/index.story.storyshot deleted file mode 100644 index 94ad96004..000000000 --- a/packages/react-sandbox/src/components/Pager/__snapshots__/index.story.storyshot +++ /dev/null @@ -1,1894 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storybook Tests Sandbox/Pager CollapsedWithDots 1`] = ` -.c5 { - fill: currentColor; -} - -.c2 { - fill: none; - stroke-linejoin: round; - stroke-linecap: round; - stroke: currentColor; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c1[hidden] { - visibility: hidden; - display: block; -} - -.c1:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c1[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1:hover { - background: transparent; -} - -.c3 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c3[hidden] { - visibility: hidden; - display: block; -} - -.c3:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c3[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c3[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c4.c4 { - color: #858585; - background: none; -} - - -`; - -exports[`Storybook Tests Sandbox/Pager Default 1`] = ` -.c2 { - fill: none; - stroke-linejoin: round; - stroke-linecap: round; - stroke: currentColor; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c1[hidden] { - visibility: hidden; - display: block; -} - -.c1:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c1[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1:hover { - background: transparent; -} - -.c3 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c3[hidden] { - visibility: hidden; - display: block; -} - -.c3:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c3[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c3[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -
- -
-`; - -exports[`Storybook Tests Sandbox/Pager LastPage 1`] = ` -.c5 { - fill: currentColor; -} - -.c2 { - fill: none; - stroke-linejoin: round; - stroke-linecap: round; - stroke: currentColor; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c1[hidden] { - visibility: hidden; - display: block; -} - -.c1:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c1[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1:hover { - background: transparent; -} - -.c3 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c3[hidden] { - visibility: hidden; - display: block; -} - -.c3:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c3[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c3[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c4.c4 { - color: #858585; - background: none; -} - - -`; - -exports[`Storybook Tests Sandbox/Pager Link 1`] = ` -.c2 { - fill: none; - stroke-linejoin: round; - stroke-linecap: round; - stroke: currentColor; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c1[hidden] { - visibility: hidden; - display: block; -} - -.c1:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c1[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1:hover { - background: transparent; -} - -.c3 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c3[hidden] { - visibility: hidden; - display: block; -} - -.c3:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c3[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c3[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - - -`; - -exports[`Storybook Tests Sandbox/Pager LittlePageRangeDisplayed 1`] = ` -.c2 { - fill: none; - stroke-linejoin: round; - stroke-linecap: round; - stroke: currentColor; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c1[hidden] { - visibility: hidden; - display: block; -} - -.c1:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c1[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1:hover { - background: transparent; -} - -.c3 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c3[hidden] { - visibility: hidden; - display: block; -} - -.c3:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c3[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c3[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - - -`; - -exports[`Storybook Tests Sandbox/Pager NotCollapsed 1`] = ` -.c2 { - fill: none; - stroke-linejoin: round; - stroke-linecap: round; - stroke: currentColor; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c1[hidden] { - visibility: hidden; - display: block; -} - -.c1:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c1[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1:hover { - background: transparent; -} - -.c3 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c3[hidden] { - visibility: hidden; - display: block; -} - -.c3:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c3[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c3[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - - -`; - -exports[`Storybook Tests Sandbox/Pager One 1`] = ` -.c2 { - fill: none; - stroke-linejoin: round; - stroke-linecap: round; - stroke: currentColor; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c1[hidden] { - visibility: hidden; - display: block; -} - -.c1:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c1[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c1:hover { - background: transparent; -} - -.c3 { - font-size: 1rem; - line-height: calc(1em + 8px); - -webkit-text-decoration: none; - text-decoration: none; - border: none; - outline: none; - touch-action: manipulation; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - transition: box-shadow 0.2s ease 0s,color 0.2s ease 0s, background 0.2s ease 0s,opacity 0.2s ease 0s; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - box-sizing: content-box; - min-width: 24px; - min-height: 24px; - padding: 8px; - cursor: pointer; - font-weight: bold; - -webkit-transform: translateZ(0); - border-radius: 48px; - background: transparent; - color: #858585; -} - -.c3[hidden] { - visibility: hidden; - display: block; -} - -.c3:hover { - background: rgba(0,0,0,0.04); - color: #474747; -} - -.c3[aria-current] { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -.c3[aria-current]:hover { - background-color: rgba(0,0,0,0.88); - color: #ffffff; -} - -
- -
-`; diff --git a/packages/react-sandbox/src/components/Pager/index.story.tsx b/packages/react-sandbox/src/components/Pager/index.story.tsx deleted file mode 100644 index 7840d55ae..000000000 --- a/packages/react-sandbox/src/components/Pager/index.story.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import { useState } from 'react' -import { - MemoryRouter as Router, - Route, - Link as RouterLink, - useParams, - Routes, -} from 'react-router-dom' -import { Story } from '../../_lib/compat' -import Pager, { LinkPager } from '.' -import { ComponentAbstraction } from '@charcoal-ui/react' - -export default { - title: 'Sandbox/Pager', - component: Pager, - argTypes: { - page: { - control: { - type: 'number', - disable: true, - }, - }, - pageCount: { - control: { - type: 'number', - min: 1, - }, - }, - pageRangeDisplayed: { - control: { - type: 'number', - min: 3, - }, - }, - }, -} - -interface Props { - page: number - pageCount: number - pageRangeDisplayed?: number -} - -const DefaultStory: Story = ({ - page: defaultPage, - pageCount, - pageRangeDisplayed, -}) => { - const [page, setPage] = useState(defaultPage) - return ( - - ) -} - -export const Default = DefaultStory.bind({}) -Default.args = { - page: 1, - pageCount: 10, - pageRangeDisplayed: undefined, -} - -const makeUrl = (page: number) => `/${page}` - -const LinkStory: Story = ({ - page: defaultPage, - pageCount, - pageRangeDisplayed, -}) => ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - - - makeUrl(i + 1) - )} - initialIndex={defaultPage - 1} - > - - - } - /> - - - -) - -function CurrentPager({ - pageCount, - pageRangeDisplayed, -}: { - pageCount: number - pageRangeDisplayed?: number -}) { - const params = useParams() - const page = params.page !== undefined ? parseInt(params.page, 10) : 1 - - return ( - - ) -} - -export const Link = LinkStory.bind({}) -Link.args = { - page: 1, - pageCount: 10, -} - -export const NotCollapsed = LinkStory.bind({}) -NotCollapsed.args = { - page: 4, - pageCount: 7, -} - -export const CollapsedWithDots = LinkStory.bind({}) -CollapsedWithDots.args = { - page: 5, - pageCount: 8, -} - -export const LastPage = LinkStory.bind({}) -LastPage.args = { - page: 103, - pageCount: 103, -} - -export const One = LinkStory.bind({}) -One.args = { - page: 1, - pageCount: 1, -} - -export const LittlePageRangeDisplayed = LinkStory.bind({}) -LittlePageRangeDisplayed.args = { - page: 1, - pageCount: 10, - pageRangeDisplayed: 4, -} diff --git a/packages/react-sandbox/src/components/SwitchCheckbox/__snapshots__/index.story.storyshot b/packages/react-sandbox/src/components/SwitchCheckbox/__snapshots__/index.story.storyshot deleted file mode 100644 index 41b8f6bd5..000000000 --- a/packages/react-sandbox/src/components/SwitchCheckbox/__snapshots__/index.story.storyshot +++ /dev/null @@ -1,507 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Storybook Tests Sandbox/Selection Control/SwitchCheckbox Default 1`] = ` -.c7 { - margin-left: 8px; -} - -.c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - cursor: pointer; - outline: 0; -} - -.c0[aria-disabled='true'] { - cursor: auto; -} - -.c1 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - z-index: 0; -} - -.c4 { - position: relative; - box-sizing: border-box; - width: 28px; - height: 16px; - border-radius: 16px; - border: 2px solid transparent; - background: #adadad; - -webkit-transition: box-shadow 0.2s,background-color 0.2s; - transition: box-shadow 0.2s,background-color 0.2s; -} - -.c6 { - position: absolute; - display: block; - top: 0; - left: 0; - width: 12px; - height: 12px; - background-color: #ffffff; - border-radius: 50%; - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); - -webkit-transition: -webkit-transform 0.2s; - -webkit-transition: transform 0.2s; - transition: transform 0.2s; -} - -.c2 { - position: absolute; - z-index: 1; - top: 0; - left: 0; - width: 100%; - height: 100%; - border-radius: 16px; - opacity: 0; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - outline: none; - cursor: pointer; -} - -.c2:checked ~ .c3 { - background-color: #0096fa; -} - -.c2:checked ~ .c3 .c5 { - -webkit-transform: translateX(12px); - -ms-transform: translateX(12px); - transform: translateX(12px); -} - -.c2:disabled { - cursor: auto; -} - -.c2:disabled ~ .c3 { - opacity: 0.32; -} - -.c2:not(:disabled):focus ~ .c3 { - box-shadow: 0 0 0 4px rgba(0,150,250,0.32); -} - -
-