@times-components/ts-components 1.85.1 → 1.85.2

package/src/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.stories.tsx

@@ -1,32 +1,33 @@
 import React from 'react';
-import { showcaseConverter } from '@times-components/storybook';
+import { storiesOf } from '@storybook/react';
+import { select, text, withKnobs } from '@storybook/addon-knobs';
 
-import { ArticleHarness } from '../../../../fixtures/article-harness/ArticleHarness';
 import { OptaFootballFixturesTicker } from './OptaFootballFixturesTicker';
+const competitons = [
+  '1',
+  '2',
+  '5',
+  '6',
+  '8',
+  '10',
+  '14',
+  '38',
+  '80',
+  '235',
+  '941',
+  '1125'
+];
 
-const showcase = {
-  children: [
-    {
-      decorator: (storyFn: () => React.ReactNode) => (
-        <ArticleHarness>{storyFn()}</ArticleHarness>
-      ),
-      type: 'decorator'
-    },
-    {
-      component: () => (
-        <OptaFootballFixturesTicker
-          season="2023"
-          competition="8"
-          date_from=""
-          date_to=""
-        />
-      ),
-      name: 'Fixtures Ticker',
-      type: 'story'
-    }
-  ],
-  name: 'Typescript Component/In Article/Football/Fixtures'
-};
-
-// @ts-ignore
-showcaseConverter(module, showcase);
+storiesOf('Typescript Component/In Article/Football/Fixtures', module)
+  .addDecorator(withKnobs)
+  .add('Fixtures Ticker', () => {
+    const selComp = select('Competition', competitons, '8');
+    return (
+      <OptaFootballFixturesTicker
+        season={text('season', '2023')}
+        competition={selComp}
+        date_from=""
+        date_to=""
+      />
+    );
+  });

package/src/components/opta/football/fixtures-ticker/OptaFootballFixturesTicker.tsx

@@ -10,7 +10,7 @@ import {
   initComponent
 } from '../../utils/config';
 
-import { Container, PlaceholderContainer } from '../shared-styles';
+import { PlaceholderContainer } from '../shared-styles';
 import { WidgetContainer } from './styles';
 
 export const OptaFootballFixturesTicker: React.FC<{
@@ -18,8 +18,7 @@ export const OptaFootballFixturesTicker: React.FC<{
   competition: string;
   date_from?: string;
   date_to?: string;
-  full_width?: boolean;
-}> = React.memo(({ season, competition, date_from, date_to, full_width }) => {
+}> = React.memo(({ season, competition, date_from, date_to }) => {
   const ref = React.createRef<HTMLDivElement>();
 
   const [isReady, setIsReady] = useState<boolean>(false);
@@ -58,14 +57,14 @@ export const OptaFootballFixturesTicker: React.FC<{
   }, []);
 
   return (
-    <Container border={false} fullWidth={full_width}>
+    <>
       <WidgetContainer ref={ref} />
 
       {!isReady && (
-        <PlaceholderContainer>
+        <PlaceholderContainer height={100}>
           <Placeholder />
         </PlaceholderContainer>
       )}
-    </Container>
+    </>
   );
 });

package/src/components/opta/football/fixtures-ticker/__tests__/__snapshots__/OptaFootballFixturesTicker.test.tsx.snap

@@ -3,16 +3,13 @@
 exports[`OptaFootballFixturesTicker should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa giUBsz"
+    class="sc-htpNat sc-ifAKCX elhfwo"
+  />
+  <div
+    class="sc-bwzfXH eLGWmp"
+    height="100"
   >
-    <div
-      class="sc-htpNat sc-ifAKCX gxAjSa"
-    />
-    <div
-      class="sc-bwzfXH kVYHKf"
-    >
-      Placeholder
-    </div>
+    Placeholder
   </div>
 </DocumentFragment>
 `;
@@ -20,14 +17,10 @@ exports[`OptaFootballFixturesTicker should render correctly 1`] = `
 exports[`OptaFootballFixturesTicker should render correctly 2`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa giUBsz"
+    class="sc-htpNat sc-ifAKCX elhfwo"
   >
-    <div
-      class="sc-htpNat sc-ifAKCX gxAjSa"
-    >
-      <div>
-        Widget
-      </div>
+    <div>
+      Widget
     </div>
   </div>
 </DocumentFragment>

package/src/components/opta/football/fixtures-ticker/styles.ts

@@ -42,7 +42,7 @@ export const WidgetContainerOverride = styled(WidgetContainerBase)`
 export const WidgetContainer = styled(WidgetContainerBase)`
   @media (max-width: ${breakpoints.small}px) {
     .Opta-Window {
-      left: 20px !important;
+      left: 0 !important;
       right: 0 !important;
     }
   }
@@ -75,12 +75,7 @@ export const WidgetContainer = styled(WidgetContainerBase)`
     }
 
     @media (max-width: ${breakpoints.small}px) {
-      opacity: 0 !important;
-      transition-duration: 0.2s;
-
-      &:hover {
-        opacity: 1 !important;
-      }
+      display: none !important;
     }
   }
 

package/src/components/opta/football/shared-styles.ts

@@ -21,9 +21,9 @@ export const Container = styled.div<{ border: boolean; fullWidth?: boolean }>`
   }
 `;
 
-export const PlaceholderContainer = styled.div`
+export const PlaceholderContainer = styled.div<{ height?: number }>`
   position: relative;
-  height: 200px;
+  height: ${({ height }) => height || '200'}px;
 `;
 
 export const WidgetContainerBase = styled.div`