From 90210e4d0577730255c81e22bb95da2040ed69e5 Mon Sep 17 00:00:00 2001
From: plouc <benitteraphael@gmail.com>
Date: Sat, 1 Jan 2022 16:13:01 +0900
Subject: [PATCH] feat(chord): adjust website icon and home demo according to
 the new API

---
 website/src/components/home/Home.js           |  2 +-
 .../home/{HomeChord.js => HomeChord.tsx}      | 11 +++++-----
 .../components/home/{styled.js => styled.ts}  |  2 --
 .../icons/{ChordIcon.js => ChordIcon.tsx}     | 22 +++++++++----------
 website/src/components/icons/Icons.js         |  2 +-
 5 files changed, 19 insertions(+), 20 deletions(-)
 rename website/src/components/home/{HomeChord.js => HomeChord.tsx} (73%)
 rename website/src/components/home/{styled.js => styled.ts} (98%)
 rename website/src/components/icons/{ChordIcon.js => ChordIcon.tsx} (81%)

diff --git a/website/src/components/home/Home.js b/website/src/components/home/Home.js
index c0bf075aac..4c06d90139 100644
--- a/website/src/components/home/Home.js
+++ b/website/src/components/home/Home.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useTheme } from '../../theming/context'
 import { Container, HomeBaseline, HomeLogo } from './styled'
-import HomeChord from './HomeChord'
+import { HomeChord } from './HomeChord'
 import HomeLine from './HomeLine'
 import { HomeCirclePacking } from './HomeCirclePacking'
 import HomeBar from './HomeBar'
diff --git a/website/src/components/home/HomeChord.js b/website/src/components/home/HomeChord.tsx
similarity index 73%
rename from website/src/components/home/HomeChord.js
rename to website/src/components/home/HomeChord.tsx
index d9fd481449..a5d4a6f8da 100644
--- a/website/src/components/home/HomeChord.js
+++ b/website/src/components/home/HomeChord.tsx
@@ -1,16 +1,19 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { generateChordData } from '@nivo/generators'
 import { ResponsiveChordCanvas } from '@nivo/chord'
 import { HomeItem, HomeItemLabel } from './styled'
 
-const HomeChord = ({ colors }) => {
+export const HomeChord = ({ colors }: { colors: string[] }) => {
+    const { matrix, keys } = useMemo(() => generateChordData({ size: 7 }), [])
+
     return (
         <HomeItem to="/chord/">
             <ResponsiveChordCanvas
+                data={matrix}
+                keys={keys}
                 colors={colors}
                 padAngle={0.04}
                 innerRadiusRatio={0.9}
-                {...generateChordData({ size: 7 })}
                 enableLabel={false}
                 isInteractive={false}
                 animate={false}
@@ -23,5 +26,3 @@ const HomeChord = ({ colors }) => {
         </HomeItem>
     )
 }
-
-export default HomeChord
diff --git a/website/src/components/home/styled.js b/website/src/components/home/styled.ts
similarity index 98%
rename from website/src/components/home/styled.js
rename to website/src/components/home/styled.ts
index 4e36e1207c..b7abacffaa 100644
--- a/website/src/components/home/styled.js
+++ b/website/src/components/home/styled.ts
@@ -109,8 +109,6 @@ export const HomeBaseline = styled.div`
     color: white;
     font-weight: 300;
     font-size: 15px;
-    display: flex;
-    align-items: center;
     justify-content: flex-start;
     line-height: 26px;
     padding: 0 20px;
diff --git a/website/src/components/icons/ChordIcon.js b/website/src/components/icons/ChordIcon.tsx
similarity index 81%
rename from website/src/components/icons/ChordIcon.js
rename to website/src/components/icons/ChordIcon.tsx
index 0f2e4b9553..e3fa3124d2 100644
--- a/website/src/components/icons/ChordIcon.js
+++ b/website/src/components/icons/ChordIcon.tsx
@@ -7,16 +7,18 @@ import chordDarkNeutralImg from '../../assets/icons/chord-dark-neutral.png'
 import chordDarkColoredImg from '../../assets/icons/chord-dark-colored.png'
 import { ICON_SIZE, Icon, colors, IconImg } from './styled'
 
-const Wrapper = styled.div`
-    & svg > g > g > g:first-child path:nth-child(1),
-    & svg > g > g > g:first-child path:nth-child(3) {
+const Wrapper = styled.div<{
+    ribbonColor: string
+}>`
+    & svg > g > g:first-child path:nth-child(1),
+    & svg > g > g:first-child path:nth-child(3) {
         fill: none;
     }
-    & svg > g > g > g:first-child path:nth-child(2),
-    & svg > g > g > g:first-child path:nth-child(4),
-    & svg > g > g > g:first-child path:nth-child(5) {
+    & svg > g > g:first-child path:nth-child(2),
+    & svg > g > g:first-child path:nth-child(4),
+    & svg > g > g:first-child path:nth-child(5) {
         fill: ${({ ribbonColor }) => ribbonColor};
-        fill-opacity: 1;
+        opacity: 1;
     }
 `
 
@@ -24,7 +26,7 @@ const chartProps = {
     width: ICON_SIZE,
     height: ICON_SIZE,
     keys: ['A', 'B', 'C', 'D'],
-    matrix: [
+    data: [
         [0, 2, 3, 0], // A
         [2, 0, 0, 2], // B
         [4, 0, 4, 4], // C
@@ -54,7 +56,7 @@ const ChordIconItem = ({ type }) => (
     </Icon>
 )
 
-const ChordIcon = () => (
+export const ChordIcon = () => (
     <>
         <ChordIconItem type="lightNeutral" />
         <IconImg url={chordLightNeutralImg} />
@@ -66,5 +68,3 @@ const ChordIcon = () => (
         <IconImg url={chordDarkColoredImg} />
     </>
 )
-
-export default ChordIcon
diff --git a/website/src/components/icons/Icons.js b/website/src/components/icons/Icons.js
index 2281e63036..a90bdb9752 100644
--- a/website/src/components/icons/Icons.js
+++ b/website/src/components/icons/Icons.js
@@ -6,7 +6,7 @@ import BulletIcon from './BulletIcon'
 import BumpIcon from './BumpIcon'
 import CalendarIcon from './CalendarIcon'
 import ChoroplethIcon from './ChoroplethIcon'
-import ChordIcon from './ChordIcon'
+import { ChordIcon } from './ChordIcon'
 import CirclePackingIcon from './CirclePackingIcon'
 import CodeIcon from './CodeIcon'
 import DataIcon from './DataIcon'