chore(gen2): Add typescript logo, update frameworks on home page (#6465)

* Add typescript logo, update gen2 frameworks * fix spacing on frameworks
aws-amplify · Nov 17, 2023 · 68b2374 · 68b2374
1 parent a010427
commit 68b2374
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 10 deletions.
diff --git a/src/components/Icons/IconTS.tsx b/src/components/Icons/IconTS.tsx
@@ -0,0 +1,32 @@
+import { Icon } from '@aws-amplify/ui-react';
+
+export const IconTS = ({ ...rest }) => {
+  return (
+    <Icon
+      aria-hidden="true"
+      {...rest}
+      viewBox={{
+        minX: 0,
+        minY: 0,
+        width: 24,
+        height: 24
+      }}
+    >
+      <path
+        d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12Z"
+        fill="#3178C6"
+      />
+      <path
+        className="icon-monochrome"
+        d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12Z"
+        fill="var(--amplify-colors-neutral-100)"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.1684 15.0668V17.4134C13.545 17.6089 13.9903 17.7556 14.5044 17.8533C15.0185 17.9511 15.5603 18 16.1299 18C16.6851 18 17.2125 17.9462 17.7121 17.8387C18.2117 17.7311 18.6498 17.5539 19.0264 17.307C19.4029 17.0601 19.7008 16.7375 19.9206 16.3391C20.1401 15.9406 20.25 15.4481 20.25 14.8614C20.25 14.4361 20.1872 14.0633 20.0618 13.7431C19.9363 13.4229 19.7552 13.1381 19.5187 12.8888C19.2821 12.6395 18.9986 12.4158 18.6679 12.2178C18.3372 12.0199 17.9643 11.8329 17.5492 11.6569C17.245 11.5297 16.9723 11.4063 16.7309 11.2865C16.4896 11.1668 16.2844 11.0446 16.1155 10.9199C15.9465 10.7952 15.8162 10.6632 15.7245 10.5239C15.6328 10.3846 15.5869 10.2269 15.5869 10.0509C15.5869 9.88958 15.6279 9.74415 15.71 9.61459C15.7921 9.48504 15.9079 9.37382 16.0575 9.28093C16.2072 9.18804 16.3906 9.11593 16.6079 9.06461C16.8251 9.01328 17.0664 8.98761 17.3319 8.98761C17.525 8.98761 17.729 9.00227 17.9438 9.03161C18.1586 9.06094 18.3746 9.10616 18.5918 9.16727C18.8091 9.22838 19.0202 9.30538 19.2255 9.39827C19.4306 9.49116 19.62 9.59871 19.7938 9.72092V7.52831C19.4415 7.39144 19.0564 7.29 18.6389 7.224C18.2213 7.158 17.7423 7.125 17.2016 7.125C16.6513 7.125 16.13 7.18489 15.6376 7.30466C15.1452 7.42444 14.712 7.61143 14.3378 7.86564C13.9637 8.11986 13.6681 8.44374 13.4508 8.83729C13.2336 9.23083 13.125 9.70136 13.125 10.2489C13.125 10.948 13.3241 11.5444 13.7224 12.0382C14.1206 12.532 14.7252 12.9499 15.5362 13.2921C15.8548 13.4241 16.1517 13.5537 16.4268 13.6808C16.702 13.8079 16.9397 13.9399 17.14 14.0768C17.3404 14.2137 17.4985 14.3628 17.6143 14.5241C17.7302 14.6854 17.7881 14.8688 17.7881 15.0741C17.7881 15.2256 17.7519 15.3662 17.6795 15.4957C17.6071 15.6253 17.4973 15.7377 17.35 15.8331C17.2028 15.9284 17.0194 16.003 16.7997 16.0567C16.5801 16.1105 16.323 16.1374 16.0286 16.1374C15.5266 16.1374 15.0293 16.0482 14.537 15.8697C14.0446 15.6913 13.5884 15.4236 13.1684 15.0668ZM9.16037 9.23824H12.1875V7.3125H3.75V9.23824H6.76234V17.8125H9.16037V9.23824Z"
+        fill="white"
+      />
+    </Icon>
+  );
+};
diff --git a/src/components/Icons/index.ts b/src/components/Icons/index.ts
@@ -21,6 +21,7 @@ export { IconReact } from './IconReact';
 export { IconSwift } from './IconSwift';
 export { IconStar } from './IconStar';
 export { IconTOC } from './IconTOC';
+export { IconTS } from './IconTS';
 export { IconTwitter } from './IconTwitter';
 export { IconVue } from './IconVue';
 export { IconExternalLink } from './IconExternalLink';

diff --git a/src/pages/gen2/index.tsx b/src/pages/gen2/index.tsx
@@ -10,10 +10,11 @@ import {
 import ExportedImage from 'next-image-export-optimizer';
 import { MDXCode } from '@/components/MDXComponents/';
 import {
-  IconKotlin,
+  IconAngular,
+  IconJS,
   IconNext,
-  IconNuxt,
   IconReact,
+  IconTS,
   IconVue,
   IconChevron
 } from '@/components/Icons';
@@ -38,24 +39,32 @@ export function getStaticProps() {
 
 const supportedFrameworks = [
   {
-    title: 'Next',
-    icon: <IconNext />
+    title: 'JavaScript',
+    icon: <IconJS />
+  },
+  {
+    title: 'TypeScript',
+    icon: <IconTS />
   },
   {
     title: 'React',
     icon: <IconReact />
   },
   {
-    title: 'Nuxt',
-    icon: <IconNuxt />
+    title: 'Next',
+    icon: <IconNext />
   },
   {
     title: 'Vue',
     icon: <IconVue />
   },
   {
-    title: 'Kotlin',
-    icon: <IconKotlin />
+    title: 'Angular',
+    icon: <IconAngular />
+  },
+  {
+    title: 'React Native',
+    icon: <IconReact />
   }
 ];
 
@@ -103,7 +112,10 @@ const Gen2Overview = () => {
         <Grid as="ul" className="framework-grid">
           {supportedFrameworks.map((framework, index) => {
             return (
-              <li key={`framework-${index}`} className="framework-grid__item">
+              <li
+                key={`framework-${index}`}
+                className="framework-grid__item framework-grid__item--text"
+              >
                 <View className="framework-grid__icon">{framework.icon}</View>
                 {framework.title}
               </li>

diff --git a/src/styles/framework-grid.scss b/src/styles/framework-grid.scss
@@ -19,11 +19,16 @@
   }
   &__item {
     text-align: center;
+    font-size: var(--amplify-font-sizes-small);
+    &--text {
+      display: flex;
+      flex-direction: column;
+      gap: var(--amplify-space-xs);
+    }
   }
   &__link {
     display: flex;
     flex-direction: column;
-    font-size: var(--amplify-font-sizes-small);
     gap: var(--amplify-space-xs);
     color: var(--amplify-colors-font-primary);
     text-decoration: none;