Merge pull request #389 from Giphy/feat/upgrade-grid

upgrade from class to hook component
Giphy · Jun 26, 2023 · 3646c01 · 3646c01
2 parents 41ef28f + 1d19276
commit 3646c01
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 159 deletions.
diff --git a/.changeset/chilly-students-design.md b/.changeset/chilly-students-design.md
@@ -0,0 +1,5 @@
+---
+'@giphy/react-components': major
+---
+
+Upgrading Grid from React Classes to React Hooks
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
diff --git a/packages/react-components/cypress/stories/emoji-variations-list.spec.tsx b/packages/react-components/cypress/stories/emoji-variations-list.spec.tsx
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/testing-react'
 import * as React from 'react'
 
-import { EmojiVariationsList, Grid } from '../../src'
+import { EmojiVariationsList } from '../../src'
 import * as stories from '../../stories/emoji-variations-list.stories'
 import {
  GifTestUtilsContext,
@@ -12,14 +12,15 @@ import {
  resetGifEventsHistory,
  setupGifTestUtils,
 } from '../utils/gif-test-utils'
+import { DEFAULT_GRID_CLASS_NAME } from '../../src/components/grid'
 
 const GIFS_COUNT = 6
 const EMOJI_ID = 'dalJ0CpF7hwmN1nZXe'
 
 const { Default: DefaultStory } = composeStories(stories)
 
 function getGridRoot() {
- return cy.get(`.${Grid.className}`)
+ return cy.get(`.${DEFAULT_GRID_CLASS_NAME}`)
 }
 
 function getGridGif(id: string) {

diff --git a/packages/react-components/cypress/stories/grid.spec.tsx b/packages/react-components/cypress/stories/grid.spec.tsx
@@ -1,7 +1,5 @@
 import { composeStories, composeStory } from '@storybook/testing-react'
 import * as React from 'react'
-
-import { Grid } from '../../src'
 import * as stories from '../../stories/grid.stories'
 import {
  GifTestUtilsContext,
@@ -13,6 +11,7 @@ import {
  setupGifTestUtils,
 } from '../utils/gif-test-utils'
 import { storiesCompositionToList } from '../utils/storybook'
+import { DEFAULT_GRID_CLASS_NAME } from '../../src/components/grid'
 
 const GIFS_COUNT = 5
 
@@ -22,7 +21,7 @@ const composedStories = storiesCompositionToList(composeStories(stories)).filter
 )
 
 function getGridRoot() {
- return cy.get(`.${Grid.className}`)
+ return cy.get(`.${DEFAULT_GRID_CLASS_NAME}`)
 }
 
 function getGridGifs() {