hds-web 1.1.7 → 1.1.8

package/src/HDS/components/Tables/tableC.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { Typography } from '../../foundation/Typography';
+export default function TableA(props) {
+    const {
+        head,
+        description,
+        tableValue,
+        children
+
+    } = props;
+    console.log(tableValue.length);
+    const tableLength = tableValue.length;
+    
+    return (
+        <div className=" ">
+            <div className="sm:flex sm:items-center ">
+                <div className="sm:flex-auto">
+                    <h1 className="text-base font-semibold leading-6 text-gray-900">{head}</h1>
+                    <p className="mt-2 text-sm text-gray-700">{description}</p>
+                </div>
+                
+            </div>
+
+            <div>
+                <div className="border bg-neutral-50 border-neutral-100 rounded-2xl">
+                    <table className="min-w-full divide-y divide-neutral-100 ">
+                       <div>
+
+
+                        <thead>
+                            <tr className='divide-x divide-neutral-100'>
+                                {Object.keys(tableValue[0]).map((key) => (
+                                    <th
+                                        key={key}
+                                        scope="col"
+                                        className="text-left sm:table-cell"
+                                    >
+                                        <Typography className='p-6' textStyle='body3c-bold'>{key}</Typography>
+                                        
+                                    </th>
+                                ))}
+                            </tr>
+                        </thead>
+                      
+                        <tbody className="divide-y rounded-b-3xl divide-neutral-100 bg-white">
+                            {tableValue.map((value,index) => (
+                                <tr key={index} className='divide-x divide-neutral-100'>
+                                    {Object.keys(value).map((key, index2) => (
+                                        <td
+                                             key={index2+index}
+                                            className={
+                                                'p-6 bg-neutral-0 ' + ((index == `${tableValue.length-1}`) ? 'rounded-3xl' : '')
+                                            }
+                                        >
+                                            
+                                            <Typography textStyle='body3c-bold' className='bg-transparent text-neutral-800'>{key}</Typography>
+                                            <Typography textStyle='body3' className='text-neutral-800 mt-2'>Endless hours spent writing boilerplate code, resolvers, or mapping logic.</Typography>
+
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))}
+                        </tbody>
+                        </div>
+                        </table>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/index.css

@@ -386,7 +386,7 @@
 
 }
 .bg-transparent{
-    background-color: transparent;
+    background-color: transparent !important;
 }
 
 .language-javascript {

package/src/styles/tailwind.css

@@ -1089,10 +1089,6 @@ select {
   margin-left: -0.75rem;
 }
 
-.-ml-4 {
-  margin-left: -1rem;
-}
-
 .-ml-px {
   margin-left: -1px;
 }
@@ -1173,6 +1169,10 @@ select {
   margin-left: 2rem;
 }
 
+.ml-\[9\.55rem\] {
+  margin-left: 9.55rem;
+}
+
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -1229,6 +1229,10 @@ select {
   margin-top: 1.5rem;
 }
 
+.mt-7 {
+  margin-top: 1.75rem;
+}
+
 .mt-8 {
   margin-top: 2rem;
 }
@@ -1237,10 +1241,6 @@ select {
   margin-top: 2.25rem;
 }
 
-.mt-7 {
-  margin-top: 1.75rem;
-}
-
 .block {
   display: block;
 }
@@ -1309,6 +1309,10 @@ select {
   height: 0.625rem;
 }
 
+.h-20 {
+  height: 5rem;
+}
+
 .h-24 {
   height: 6rem;
 }
@@ -1349,24 +1353,16 @@ select {
   height: 130px;
 }
 
-.h-\[580px\] {
-  height: 580px;
-}
-
 .h-\[60px\] {
   height: 60px;
 }
 
-.h-full {
-  height: 100%;
-}
-
 .h-\[calc\(100\%-112px\)\] {
   height: calc(100% - 112px);
 }
 
-.h-20 {
-  height: 5rem;
+.h-full {
+  height: 100%;
 }
 
 .max-h-\[26\.25\] {
@@ -1401,6 +1397,10 @@ select {
   width: 0.625rem;
 }
 
+.w-20 {
+  width: 5rem;
+}
+
 .w-24 {
   width: 6rem;
 }
@@ -1449,10 +1449,6 @@ select {
   width: 290px;
 }
 
-.w-\[560px\] {
-  width: 560px;
-}
-
 .w-\[60\%\] {
   width: 60%;
 }
@@ -1495,10 +1491,6 @@ select {
   width: 100vw;
 }
 
-.w-20 {
-  width: 5rem;
-}
-
 .min-w-\[15rem\] {
   min-width: 15rem;
 }
@@ -1507,6 +1499,10 @@ select {
   min-width: 18rem;
 }
 
+.min-w-\[348px\] {
+  min-width: 348px;
+}
+
 .min-w-fit {
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content;
@@ -1825,10 +1821,6 @@ select {
   gap: 1.5rem;
 }
 
-.gap-8 {
-  gap: 2rem;
-}
-
 .gap-\[14rem\] {
   gap: 14rem;
 }
@@ -1958,6 +1950,11 @@ select {
   border-color: rgb(30 86 227 / 0.1);
 }
 
+.divide-neutral-100 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
+}
+
 .divide-neutral-150 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-opacity: 1;
   border-color: rgb(236 237 240 / var(--tw-divide-opacity));
@@ -2157,11 +2154,6 @@ select {
   border-style: none;
 }
 
-.border-amber-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 168 27 / var(--tw-border-opacity));
-}
-
 .border-amber-600 {
   --tw-border-opacity: 1;
   border-color: rgb(184 88 0 / var(--tw-border-opacity));
@@ -2197,11 +2189,6 @@ select {
   border-color: rgb(62 202 232 / var(--tw-border-opacity));
 }
 
-.border-green-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(57 218 170 / var(--tw-border-opacity));
-}
-
 .border-neutral-0 {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -2237,21 +2224,11 @@ select {
   border-color: rgb(255 188 214 / var(--tw-border-opacity));
 }
 
-.border-pink-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(246 119 170 / var(--tw-border-opacity));
-}
-
 .border-pink-500 {
   --tw-border-opacity: 1;
   border-color: rgb(225 58 124 / var(--tw-border-opacity));
 }
 
-.border-purple-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(180 135 255 / var(--tw-border-opacity));
-}
-
 .border-b-neutral-150 {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(236 237 240 / var(--tw-border-opacity));
@@ -4671,6 +4648,10 @@ select {
   --tw-gradient-to-position:  ;
 }
 
+.fill-neutral-100 {
+  fill: #F3F4F6;
+}
+
 .stroke-amber-100 {
   stroke: #FFF3D4;
 }
@@ -5079,6 +5060,10 @@ select {
   padding: 0.375rem;
 }
 
+.p-10 {
+  padding: 2.5rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -5111,10 +5096,6 @@ select {
   padding: 0px 8px 0px 0px;;
 }
 
-.p-10 {
-  padding: 2.5rem;
-}
-
 .px-0 {
   padding-left: 0px;
   padding-right: 0px;
@@ -5215,6 +5196,11 @@ select {
   padding-bottom: 0.625rem;
 }
 
+.py-20 {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+
 .py-3 {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -5374,18 +5360,10 @@ select {
   padding-top: 1rem;
 }
 
-.pt-5 {
-  padding-top: 1.25rem;
-}
-
 .pt-6 {
   padding-top: 1.5rem;
 }
 
-.pr-1 {
-  padding-right: 0.25rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -6282,10 +6260,6 @@ select {
   --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
 }
 
-.ring-opacity-5 {
-  --tw-ring-opacity: 0.05;
-}
-
 .blur {
   --tw-blur: blur(8px);
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -7168,7 +7142,7 @@ select {
 }
 
 .bg-transparent{
-  background-color: transparent;
+  background-color: transparent !important;
 }
 
 .language-javascript {
@@ -7975,6 +7949,10 @@ select {
     display: inline-flex;
   }
 
+  .tb\:grid {
+    display: grid;
+  }
+
   .tb\:hidden {
     display: none;
   }
@@ -8009,6 +7987,10 @@ select {
     min-width: 18rem;
   }
 
+  .tb\:min-w-\[28\.063rem\] {
+    min-width: 28.063rem;
+  }
+
   .tb\:min-w-\[310px\] {
     min-width: 310px;
   }
@@ -8041,6 +8023,10 @@ select {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
+  .tb\:flex-row {
+    flex-direction: row;
+  }
+
   .tb\:flex-col {
     flex-direction: column;
   }
@@ -8069,6 +8055,11 @@ select {
     gap: 31.5rem;
   }
 
+  .tb\:gap-x-16 {
+    -webkit-column-gap: 4rem;
+            column-gap: 4rem;
+  }
+
   .tb\:rounded-2xl {
     border-radius: 1rem;
   }
@@ -8385,14 +8376,6 @@ select {
     margin-right: -0px;
   }
 
-  .sm\:ml-16 {
-    margin-left: 4rem;
-  }
-
-  .sm\:mt-0 {
-    margin-top: 0px;
-  }
-
   .sm\:block {
     display: block;
   }
@@ -8413,26 +8396,14 @@ select {
     aspect-ratio: 16/9;
   }
 
-  .sm\:h-12 {
-    height: 3rem;
-  }
-
   .sm\:h-32 {
     height: 8rem;
   }
 
-  .sm\:w-12 {
-    width: 3rem;
-  }
-
   .sm\:flex-auto {
     flex: 1 1 auto;
   }
 
-  .sm\:flex-none {
-    flex: none;
-  }
-
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -8454,10 +8425,6 @@ select {
             column-gap: 2rem;
   }
 
-  .sm\:p-8 {
-    padding: 2rem;
-  }
-
   .sm\:px-3 {
     padding-left: 0.75rem;
     padding-right: 0.75rem;
@@ -8573,10 +8540,26 @@ select {
     width: 70%;
   }
 
+  .tb-l\:w-full {
+    width: 100%;
+  }
+
+  .tb-l\:w-\[38\%\] {
+    width: 38%;
+  }
+
+  .tb-l\:w-\[62\%\] {
+    width: 62%;
+  }
+
   .tb-l\:min-w-\[400px\] {
     min-width: 400px;
   }
 
+  .tb-l\:flex-row {
+    flex-direction: row;
+  }
+
   .tb-l\:flex-col {
     flex-direction: column;
   }
@@ -8617,6 +8600,10 @@ select {
   .tb-l\:text-left {
     text-align: left;
   }
+
+  .tb-l\:text-center {
+    text-align: center;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -8632,10 +8619,6 @@ select {
     height: auto;
   }
 
-  .lg\:max-w-3xl {
-    max-width: 48rem;
-  }
-
   .lg\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -8738,6 +8721,11 @@ select {
     gap: 9rem;
   }
 
+  .db\:gap-x-10 {
+    -webkit-column-gap: 2.5rem;
+            column-gap: 2.5rem;
+  }
+
   .db\:gap-x-8 {
     -webkit-column-gap: 2rem;
             column-gap: 2rem;
@@ -9045,6 +9033,13 @@ select {
   }
 }
 
+@media (min-width: 1880px) {
+  .min-\[1880px\]\:gap-x-72 {
+    -webkit-column-gap: 18rem;
+            column-gap: 18rem;
+  }
+}
+
 .\[\&\>\*\]\:mb-8>* {
   margin-bottom: 2rem;
 }
@@ -9057,6 +9052,10 @@ select {
   padding-bottom: 0.5rem;
 }
 
+.\[\&\>p\]\:last\:pb-0:last-child>p {
+  padding-bottom: 0px;
+}
+
 .\[\&\>span\]\:pb-2>span {
   padding-bottom: 0.5rem;
 }

package/tailwind.config.js

@@ -784,21 +784,18 @@ module.exports = {
           letterSpacing: '-0.01em',
           fontWeight: '400',
           fontStyle: 'italic',
-          fontFamily: 'Petrona'
         }],
         'hds-t-quote': ['1.125rem', {
           lineHeight: '1.75rem',
           letterSpacing: '-0.01em',
           fontWeight: '400',
           fontStyle: 'italic',
-          fontFamily: 'Petrona'
         }],
         'hds-d-quote': ['1.5rem', {
           lineHeight: '2.25rem',
           letterSpacing: '-0.01em',
           fontWeight: '400',
           fontStyle: 'italic',
-          fontFamily: 'Petrona'
         }],
         // add more for more breakpoints