@popsure/dirty-swan 0.66.4 → 0.66.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.66.4",
+  "version": "0.66.5",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/lib/components/cards/infoCard/index.stories.tsx

@@ -116,11 +116,11 @@ export const TopIconTypes = () => {
           <div className="mb16 fw-bold">Icon Type</div>
           <InfoCard
             title="Help Center"
-            topIcon={<img src="https://placehold.co/80x80" alt="Banner" />}
+            topIcon={<img src="https://placehold.co/80x80/transparent/F00" alt="Banner" />}
             topIconType="icon"
             onClick={() => console.log('Icon type clicked!')}
           >
-            Icon is displayed in a circular way without any background.
+            Icon is displayed in a rounded square with orange background.
           </InfoCard>
         </div>
         <div className="w50">
@@ -131,7 +131,7 @@ export const TopIconTypes = () => {
             topIconType="iconWithBackground"
             onClick={() => console.log('Icon type clicked!')}
           >
-            Icon is displayed in a circular background with the orange color.
+            Icon is displayed in a rounded square with the orange background.
           </InfoCard>
         </div>
       </div>
@@ -142,9 +142,8 @@ export const TopIconTypes = () => {
             title="Image Gallery"
             topIcon={
               <img
-                src="https://placehold.co/80x80"
+                src="https://placehold.co/80x80/transparent/F00"
                 alt="Image"
-                style={{ borderRadius: '8px' }}
               />
             }
             topIconType="image"

package/src/lib/components/cards/infoCard/index.tsx

@@ -24,6 +24,7 @@ export const InfoCard = ({
   ...cardProps
 }: InfoCardProps) => {
   const isIconType = topIconType === 'icon' || topIconType === 'iconWithBackground';
+  const isFloatingType = isIconType || topIconType === 'image';
 
   return (
     <Card
@@ -33,10 +34,8 @@ export const InfoCard = ({
           {isIconType ? (
             <div
               className={classNames(
-                'd-flex ai-center jc-center br-circle p16',
-                styles.topIconWrapper, {
-                  'bg-orange-200': topIconType === 'iconWithBackground'
-                }
+                'd-flex ai-center jc-center p16 bg-orange-200',
+                styles.topIconWrapper,
               )}
             >
               {topIcon}
@@ -44,7 +43,8 @@ export const InfoCard = ({
           ) : (
             <div className={classNames(
               'd-flex ai-center jc-center',
-              { [styles.topIconBanner]: topIconType === 'banner' }
+              { [styles.topIconBanner]: topIconType === 'banner' },
+              { [styles.topIconImage]: topIconType === 'image' },
             )}>
               {topIcon}
             </div>
@@ -61,6 +61,7 @@ export const InfoCard = ({
       titleVariant='medium'
       description={children}
       descriptionVariant='small'
+      dropShadow={false}
       actionIcon={null}
       showActionIcon={false}
       classNames={{
@@ -68,16 +69,17 @@ export const InfoCard = ({
         wrapper: classNames({
           [styles.wrapper]: true,
           [styles.disabled]: disabled,
-          'pt40': topIcon && isIconType,
-          'mt40': topIcon && isIconType,
+          'pt40': topIcon && isFloatingType,
+          'mt40': topIcon && isFloatingType,
           [styles.bannerWrapper]: topIcon && topIconType === 'banner',
         }),
         label: classNames({
-          [styles.floatingLabel]: topIcon && topIconType !== 'image',
+          [styles.floatingLabel]: topIcon && (isFloatingType || topIconType === 'banner'),
         }),
         title: classNames(
           {'mt16': topIcon && topIconType === 'banner'},
-          'd-flex ai-center jc-center ta-center my8'
+          'd-flex ai-center jc-center ta-center mb8',
+          styles.title,
         ),
         description: 'ta-center',
         contentWrapper: styles.contentWrapper,

package/src/lib/components/cards/infoCard/style.module.scss

@@ -5,21 +5,31 @@
   padding-top: 124px;
 }
 
+.wrapper {
+  border-radius: 12px;
+  border: 1px solid $ds-neutral-300;
+}
+
+.buttonWrapper {
+  border-radius: 12px;
+}
+
 .buttonWrapper:focus .wrapper {
   border-color: $ds-neutral-700;
-  box-shadow: $bs-xs, 0 0 0 1px $ds-neutral-700;
+  box-shadow: 0 0 0 1px $ds-neutral-700;
 }
 
 .buttonWrapper:focus-visible .wrapper {
   overflow: hidden;
   border-color: $ds-neutral-900;
-  box-shadow: $bs-xs, 0 0 0 1px $ds-neutral-900;
+  box-shadow: 0 0 0 1px $ds-neutral-900;
 }
 
 .topIconWrapper {
   position: absolute;
   width: 80px;
   height: 80px;
+  border-radius: 12px;
 
   left: 50%;
   transform: translateX(-50%) translateY(-80px);
@@ -29,6 +39,25 @@
   }
 }
 
+.topIconImage {
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  border-radius: 12px;
+  background-color: $ds-orange-200;
+  overflow: hidden;
+
+  left: 50%;
+  transform: translateX(-50%) translateY(-80px);
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 12px;
+  }
+}
+
 .topIconBanner {
   position: absolute;
   top: -123px;
@@ -40,8 +69,8 @@
 
   img {
     position: absolute;
-    border-top-left-radius: 6px;
-    border-top-right-radius: 6px;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
     top: 0;
     left: 0;
     width: 100%;
@@ -52,6 +81,10 @@
   }
 }
 
+.title {
+  margin-top: 20px;
+}
+
 .contentWrapper {
   gap: 0!important;
 }
@@ -63,4 +96,4 @@
 .disabled {
   opacity: 0.25;
   cursor: not-allowed;
-}
+}

package/src/lib/components/icon/assets/broken-glass.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 6L9.5 11L5 13M10 6L13 9L15 8M10 6L8 2M15 8L18 11M15 8L18 3M18 11L15 13L19 16M18 11H21M19 16H13L9 20M19 16L22 18M19 16L21 11M9 20V15L5 13M9 20L8.15789 22M5 13L2 14M22 11H21" stroke="#26262E" stroke-width="2" stroke-linecap="round"/>
+<path d="M7 9L4 7" stroke="#26262E" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/lib/components/icon/icons/BrokenGlass.tsx

@@ -0,0 +1,15 @@
+/* Generated file. Do not modify. */
+import { createElement } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import type { IconWrapperProps } from '../IconWrapper';
+export default (props: IconWrapperProps) =>
+  createElement(
+    IconWrapper,
+    props,
+    <path
+      stroke="#26262E"
+      strokeLinecap="round"
+      strokeWidth={2}
+      d="m10 6-.5 5L5 13m5-7 3 3 2-1m-5-2L8 2m7 6 3 3m-3-3 3-5m0 8-3 2 4 3m-1-5h3m-2 5h-6l-4 4m10-4 3 2m-3-2 2-5M9 20v-5l-4-2m4 7-.842 2M5 13l-3 1m20-3h-1M7 9 4 7"
+    />
+  );

package/src/lib/components/icon/icons/index.ts

@@ -63,6 +63,7 @@ export { default as BoxesAdd2Icon } from './BoxesAdd2';
 export { default as BoxesMultipleFilledIcon } from './BoxesMultipleFilled';
 export { default as BoxesMultipleIcon } from './BoxesMultiple';
 export { default as BriefcaseIcon } from './Briefcase';
+export { default as BrokenGlassIcon } from './BrokenGlass';
 export { default as CalculatorIcon } from './Calculator';
 export { default as CalendarIcon } from './Calendar';
 export { default as CameraOffIcon } from './CameraOff';