From 273438eb51de40e10351f41370454397720e29c5 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Mon, 11 Sep 2023 22:19:20 +0000 Subject: [PATCH] Remove StyledOcticon --- ...{StyledOcticon.test.ts => Octicon.test.ts} | 14 ++-- examples/nextjs/package-lock.json | 71 ++++++++----------- script/generate-e2e-tests.js | 6 +- .../Octicon.stories.tsx} | 12 ++-- src/StyledOcticon/StyledOcticon.tsx | 5 -- src/StyledOcticon/index.ts | 2 - src/__tests__/StyledOcticon.test.tsx | 25 ------- src/__tests__/StyledOcticon.types.test.tsx | 12 ---- .../__snapshots__/StyledOcticon.test.tsx.snap | 26 ------- .../__snapshots__/exports.test.ts.snap | 1 - src/__tests__/storybook.test.tsx | 2 +- src/index.ts | 2 - 12 files changed, 46 insertions(+), 132 deletions(-) rename e2e/components/{StyledOcticon.test.ts => Octicon.test.ts} (73%) rename src/{StyledOcticon/StyledOcticon.stories.tsx => Octicon/Octicon.stories.tsx} (68%) delete mode 100644 src/StyledOcticon/StyledOcticon.tsx delete mode 100644 src/StyledOcticon/index.ts delete mode 100644 src/__tests__/StyledOcticon.test.tsx delete mode 100644 src/__tests__/StyledOcticon.types.test.tsx delete mode 100644 src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap diff --git a/e2e/components/StyledOcticon.test.ts b/e2e/components/Octicon.test.ts similarity index 73% rename from e2e/components/StyledOcticon.test.ts rename to e2e/components/Octicon.test.ts index 39f22747c15..ce0cf701146 100644 --- a/e2e/components/StyledOcticon.test.ts +++ b/e2e/components/Octicon.test.ts @@ -2,25 +2,25 @@ import {test, expect} from '@playwright/test' import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' -test.describe('StyledOcticon', () => { +test.describe('Octicon', () => { test.describe('Default', () => { for (const theme of themes) { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-styledocticon--default', + id: 'components-octicon--default', globals: { colorScheme: theme, }, }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`StyledOcticon.Default.${theme}.png`) + expect(await page.screenshot()).toMatchSnapshot(`Octicon.Default.${theme}.png`) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-styledocticon--default', + id: 'components-octicon--default', globals: { colorScheme: theme, }, @@ -36,19 +36,19 @@ test.describe('StyledOcticon', () => { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-styledocticon--playground', + id: 'components-octicon--playground', globals: { colorScheme: theme, }, }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`StyledOcticon.Playground.${theme}.png`) + expect(await page.screenshot()).toMatchSnapshot(`Octicon.Playground.${theme}.png`) }) test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-styledocticon--playground', + id: 'components-octicon--playground', globals: { colorScheme: theme, }, diff --git a/examples/nextjs/package-lock.json b/examples/nextjs/package-lock.json index a6e543b2405..c88cc59e8f0 100644 --- a/examples/nextjs/package-lock.json +++ b/examples/nextjs/package-lock.json @@ -58,7 +58,7 @@ "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-proposal-optional-chaining": "7.21.0", "@babel/plugin-transform-modules-commonjs": "7.22.5", - "@babel/preset-react": "7.22.5", + "@babel/preset-react": "7.22.15", "@babel/preset-typescript": "7.22.5", "@changesets/changelog-github": "0.4.8", "@github/markdownlint-github": "^0.3.0", @@ -113,7 +113,7 @@ "babel-plugin-dev-expression": "0.2.3", "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", - "babel-plugin-styled-components": "2.1.3", + "babel-plugin-styled-components": "2.1.4", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", "change-case": "4.1.2", @@ -121,7 +121,7 @@ "copyfiles": "2.4.1", "cross-env": "7.0.3", "eslint": "8.40.0", - "eslint-import-resolver-typescript": "3.5.5", + "eslint-import-resolver-typescript": "3.6.0", "eslint-plugin-github": "4.8.0", "eslint-plugin-jest": "27.2.1", "eslint-plugin-jsx-a11y": "6.7.1", @@ -132,7 +132,7 @@ "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-ssr-friendly": "1.2.0", - "eslint-plugin-storybook": "0.6.12", + "eslint-plugin-storybook": "0.6.13", "eslint-plugin-testing-library": "5.11.0", "fast-glob": "3.2.12", "filesize": "10.0.6", @@ -201,16 +201,19 @@ "react-dom": "^18.0.0", "styled-components": "5.x" }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - }, - "@types/styled-components": { - "optional": true - } + "engines": { + "node": ">=0.10.0" + } + }, + "../../node_modules/react-dom": { + "version": "18.2.0", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.0" + }, + "peerDependencies": { + "react": "^18.2.0" } }, "node_modules/@babel/code-frame": { @@ -320,9 +323,9 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz", - "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==", + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz", + "integrity": "sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ==", "engines": { "node": ">=6.9.0" } @@ -1015,14 +1018,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "node_modules/scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", - "dependencies": { - "loose-envify": "^1.1.0" - } - }, "node_modules/source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -1200,7 +1195,7 @@ "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz", "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==", "requires": { - "@babel/types": "^7.22.5" + "@babel/types": "^7.22.15" } }, "@babel/helper-plugin-utils": { @@ -1222,9 +1217,9 @@ "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==" }, "@babel/helper-validator-identifier": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz", - "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==" + "version": "7.22.15", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.15.tgz", + "integrity": "sha512-4E/F9IIEi8WR94324mbDUMo074YTheJmd7eZF5vITTeYchqAi6sYXRLHUVsmkdmY4QjfKTcB2jB7dVP3NaBElQ==" }, "@babel/highlight": { "version": "7.22.10", @@ -1419,7 +1414,7 @@ "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6", "@babel/plugin-proposal-optional-chaining": "7.21.0", "@babel/plugin-transform-modules-commonjs": "7.22.5", - "@babel/preset-react": "7.22.5", + "@babel/preset-react": "7.22.15", "@babel/preset-typescript": "7.22.5", "@changesets/changelog-github": "0.4.8", "@github/combobox-nav": "^2.1.5", @@ -1490,7 +1485,7 @@ "babel-plugin-dev-expression": "0.2.3", "babel-plugin-macros": "3.1.0", "babel-plugin-open-source": "1.3.4", - "babel-plugin-styled-components": "2.1.3", + "babel-plugin-styled-components": "2.1.4", "babel-plugin-transform-replace-expressions": "0.2.0", "babel-polyfill": "6.26.0", "change-case": "4.1.2", @@ -1501,7 +1496,7 @@ "cross-env": "7.0.3", "deepmerge": "^4.2.2", "eslint": "8.40.0", - "eslint-import-resolver-typescript": "3.5.5", + "eslint-import-resolver-typescript": "3.6.0", "eslint-plugin-github": "4.8.0", "eslint-plugin-jest": "27.2.1", "eslint-plugin-jsx-a11y": "6.7.1", @@ -1512,7 +1507,7 @@ "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-ssr-friendly": "1.2.0", - "eslint-plugin-storybook": "0.6.12", + "eslint-plugin-storybook": "0.6.13", "eslint-plugin-testing-library": "5.11.0", "fast-glob": "3.2.12", "filesize": "10.0.6", @@ -1838,14 +1833,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", - "requires": { - "loose-envify": "^1.1.0" - } - }, "source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", @@ -1927,4 +1914,4 @@ "integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==" } } -} +} \ No newline at end of file diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 718ca42e096..4dad3d05369 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -1114,15 +1114,15 @@ const components = new Map([ }, ], [ - 'StyledOcticon', + 'Octicon', { stories: [ { - id: 'components-styledocticon--default', + id: 'components-octicon--default', name: 'Default', }, { - id: 'components-styledocticon--playground', + id: 'components-octicon--playground', name: 'Playground', }, ], diff --git a/src/StyledOcticon/StyledOcticon.stories.tsx b/src/Octicon/Octicon.stories.tsx similarity index 68% rename from src/StyledOcticon/StyledOcticon.stories.tsx rename to src/Octicon/Octicon.stories.tsx index 6a283932c34..56e19d1ea81 100644 --- a/src/StyledOcticon/StyledOcticon.stories.tsx +++ b/src/Octicon/Octicon.stories.tsx @@ -1,16 +1,16 @@ import React from 'react' import {Meta, ComponentStory} from '@storybook/react' -import StyledOcticon from './StyledOcticon' +import Octicon from './Octicon' import {HeartFillIcon} from '@primer/octicons-react' export default { - title: 'Components/StyledOcticon', - component: StyledOcticon, -} as Meta + title: 'Components/Octicon', + component: Octicon, +} as Meta -export const Default = () => +export const Default = () => -export const Playground: ComponentStory = args => +export const Playground: ComponentStory = args => Playground.args = { ariaLabel: 'Heart', diff --git a/src/StyledOcticon/StyledOcticon.tsx b/src/StyledOcticon/StyledOcticon.tsx deleted file mode 100644 index bc9562fbac0..00000000000 --- a/src/StyledOcticon/StyledOcticon.tsx +++ /dev/null @@ -1,5 +0,0 @@ -// Leaving an export here for backwards compatibility -import {default as StyledOcticon} from '../Octicon/Octicon' - -export default StyledOcticon -export type {OcticonProps as StyledOcticonProps} from '../Octicon/Octicon' diff --git a/src/StyledOcticon/index.ts b/src/StyledOcticon/index.ts deleted file mode 100644 index 3f9d39ff306..00000000000 --- a/src/StyledOcticon/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export {default} from './StyledOcticon' -export type {StyledOcticonProps} from './StyledOcticon' diff --git a/src/__tests__/StyledOcticon.test.tsx b/src/__tests__/StyledOcticon.test.tsx deleted file mode 100644 index 570527e7f63..00000000000 --- a/src/__tests__/StyledOcticon.test.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import {XIcon} from '@primer/octicons-react' -import {StyledOcticon} from '..' -import {behavesAsComponent, checkExports} from '../utils/testing' -import {render as HTMLRender} from '@testing-library/react' -import {axe, toHaveNoViolations} from 'jest-axe' - -expect.extend(toHaveNoViolations) - -describe('StyledOcticon', () => { - behavesAsComponent({ - Component: StyledOcticon, - toRender: () => , - }) - - checkExports('StyledOcticon', { - default: StyledOcticon, - }) - - it('should have no axe violations', async () => { - const {container} = HTMLRender() - const results = await axe(container) - expect(results).toHaveNoViolations() - }) -}) diff --git a/src/__tests__/StyledOcticon.types.test.tsx b/src/__tests__/StyledOcticon.types.test.tsx deleted file mode 100644 index 3429f62b7cb..00000000000 --- a/src/__tests__/StyledOcticon.types.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import {MoonIcon} from '@primer/octicons-react' -import React from 'react' -import StyledOcticon from '../StyledOcticon' - -export function shouldAcceptCallWithNoProps() { - return -} - -export function shouldNotAcceptSystemProps() { - // @ts-expect-error system props should not be accepted - return -} diff --git a/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap b/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap deleted file mode 100644 index 4d6e9d3c198..00000000000 --- a/src/__tests__/__snapshots__/StyledOcticon.test.tsx.snap +++ /dev/null @@ -1,26 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`StyledOcticon renders consistently 1`] = ` - -`; diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index f2baaf29915..898e2219616 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/src/__tests__/__snapshots__/exports.test.ts.snap @@ -57,7 +57,6 @@ exports[`@primer/react should not update exports without a semver change 1`] = ` "Spinner", "SplitPageLayout", "StateLabel", - "StyledOcticon", "SubNav", "TabNav", "Text", diff --git a/src/__tests__/storybook.test.tsx b/src/__tests__/storybook.test.tsx index f9e25b9783b..ff6b1c5889e 100644 --- a/src/__tests__/storybook.test.tsx +++ b/src/__tests__/storybook.test.tsx @@ -28,6 +28,7 @@ const allowlist = [ 'IconButton', 'FilteredActionList', 'Link', + 'Octicon', 'Pagehead', 'Pagination', 'ProgressBar', @@ -38,7 +39,6 @@ const allowlist = [ 'SegmentedControl', 'Spinner', 'StateLabel', - 'StyledOcticon', 'SubNav', 'TabNav', 'Textarea', diff --git a/src/index.ts b/src/index.ts index cef90a13a30..4d9e49ebed6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -143,8 +143,6 @@ export {default as Spinner} from './Spinner' export type {SpinnerProps} from './Spinner' export {default as StateLabel} from './StateLabel' export type {StateLabelProps} from './StateLabel' -export {default as StyledOcticon} from './StyledOcticon' -export type {StyledOcticonProps} from './StyledOcticon' export {default as SubNav} from './SubNav' export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav' export {default as ToggleSwitch} from './ToggleSwitch'