@popsure/dirty-swan 0.61.2 → 0.62.0

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

@@ -2,7 +2,14 @@ import { Card, CardProps } from '.';
 import { illustrations } from '../../../util/images';
 import { Button } from '../../button';
 import { Badge } from '../../badge';
-import { BasketballSportsIcon, CheckIcon, InfoIcon, MehIcon, PlusCircleIcon, XIcon } from '../../icon';
+import {
+  BasketballSportsIcon,
+  CheckIcon,
+  InfoIcon,
+  MehIcon,
+  PlusCircleIcon,
+  XIcon,
+} from '../../icon';
 
 const story = {
   title: 'JSX/Cards/Card',
@@ -10,37 +17,38 @@ const story = {
   argTypes: {
     as: {
       control: 'text',
-      description: 'Allow wrapper element type to be custom defined'
+      description: 'Allow wrapper element type to be custom defined',
     },
     density: {
-      description: 'Spacing around the card'
+      description: 'Spacing around the card',
     },
     label: {
-      description: 'Content to be rendered as label'
+      description: 'Content to be rendered as label',
     },
     title: {
-      description: 'Content to be rendered as title'
+      description: 'Content to be rendered as title',
     },
     titleVariant: {
-      description: 'Variant that allows changing title sizing styles.'
+      description: 'Variant that allows changing title sizing styles.',
     },
     description: {
-      description: 'Content to be rendered as description'
+      description: 'Content to be rendered as description',
     },
     descriptionVariant: {
-      description: 'Variant that allows changing description sizing styles.'
+      description: 'Variant that allows changing description sizing styles.',
     },
     icon: {
       description: 'ReactNode to be rendered on the left side of the card',
     },
     children: {
       control: 'text',
-      description: 'Content that is displayed inside the card under the pre-defined props',
+      description:
+        'Content that is displayed inside the card under the pre-defined props',
     },
     onClick: {
       action: true,
       table: {
-        category: "Callbacks",
+        category: 'Callbacks',
       },
       description: 'On click action to be triggered on card click.',
     },
@@ -49,10 +57,12 @@ const story = {
     },
     actionIcon: {
       control: 'text',
-      description: 'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',
+      description:
+        'ReactNode to be rendered on the right side of the card when there is an onClick action. By default it renders the ChevronRightIcon.',
     },
     showActionIcon: {
-      description: 'Property that always displays action icon even if no onClick is set.',
+      description:
+        'Property that always displays action icon even if no onClick is set.',
     },
     verticalAlignment: {
       description: 'Vertical alignment of the card content',
@@ -61,7 +71,8 @@ const story = {
   },
   args: {
     density: 'medium',
-    description: 'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',
+    description:
+      'Believe you’re a great fit but can’t find a position listed for your skill set? We’d love to hear from you!',
     descriptionVariant: 'large',
     label: 'Label',
     title: 'Honest, simple insurance',
@@ -74,134 +85,129 @@ const story = {
       title: '',
       description: '',
       children: '',
-      icon: ''
+      icon: '',
     },
     dropShadow: true,
     verticalAlignment: 'center',
-  }
+  },
 };
 
-export const CardStory = ({ 
-  as,
-  actionIcon,
-  showActionIcon,
-  children,
-  classNames,
-  density,
-  description,
-  descriptionVariant,
-  dropShadow,
-  icon,
-  label,
-  onClick,
-  title,
-  titleVariant,
-  verticalAlignment,
-}: CardProps) => (
-  <div className='d-flex p24 bg-neutral-100'>
-    <Card
-      as={as}
-      classNames={classNames}
-      description={description}
-      descriptionVariant={descriptionVariant}
-      density={density}
-      dropShadow={dropShadow}
-      icon={icon}
-      label={label}
-      title={title}
-      titleVariant={titleVariant}
-      onClick={onClick}
-      actionIcon={actionIcon}
-      showActionIcon={showActionIcon}
-      verticalAlignment={verticalAlignment}
-    >
-      {children}
-    </Card>
-  </div>
-);
-
-export const CardVariants = ({ 
-  description,
-  onClick,
-  title,
-}: CardProps) => (
-  <div className='d-flex fd-column gap24 p24'>
-    <div>
-      <h4 className='p-h4 mb16'>default</h4>
-      <Card
-        description={description}
-        icon={<BasketballSportsIcon size={24} />}
-        onClick={onClick}
-        title={title}
-        variant='default'
-        dropShadow={false}
-      />
-    </div>
-    <div>
-      <h4 className='p-h4 mb16'>transparent</h4>
+export const CardStory = {
+  render: ({
+    as,
+    actionIcon,
+    showActionIcon,
+    children,
+    classNames,
+    density,
+    description,
+    descriptionVariant,
+    dropShadow,
+    icon,
+    label,
+    onClick,
+    title,
+    titleVariant,
+    verticalAlignment,
+  }: CardProps) => (
+    <div className="d-flex p24 bg-neutral-100">
       <Card
+        as={as}
+        classNames={classNames}
         description={description}
-        icon={<BasketballSportsIcon size={24} />}
-        onClick={onClick}
+        descriptionVariant={descriptionVariant}
+        density={density}
+        dropShadow={dropShadow}
+        icon={icon}
+        label={label}
         title={title}
-        variant='transparent'
-      />
-    </div>
-    <div>
-      <h4 className='p-h4 mb16'>outline</h4>
-      <Card
-        description={description}
-        icon={<BasketballSportsIcon size={24} />}
+        titleVariant={titleVariant}
         onClick={onClick}
-        title={title}
-        variant='outline'
-      />
-    </div>
-    <div>
-      <h4 className='p-h4 mb16'>secondary</h4>
-      <Card
-        description={description}
-        icon={<BasketballSportsIcon size={24} />}
-        onClick={onClick}
-        title={title}
-        variant='secondary'
-      />
+        actionIcon={actionIcon}
+        showActionIcon={showActionIcon}
+        verticalAlignment={verticalAlignment}
+      >
+        {children}
+      </Card>
     </div>
-    <div>
-      <h4 className='p-h4 mb16'>primary</h4>
-      <Card
-        description={description}
-        icon={<BasketballSportsIcon size={24} />}
-        onClick={onClick}
-        title={title}
-        variant='primary'
-      />
-    </div>
-  </div>
-);
+  ),
 
-CardStory.storyName = "Card";
+  name: 'Card',
+};
+
+export const CardVariants = {
+  render: ({ description, onClick, title }: CardProps) => (
+    <div className="d-flex fd-column gap24 p24">
+      <div>
+        <h4 className="p-h4 mb16">default</h4>
+        <Card
+          description={description}
+          icon={<BasketballSportsIcon size={24} />}
+          onClick={onClick}
+          title={title}
+          variant="default"
+          dropShadow={false}
+        />
+      </div>
+      <div>
+        <h4 className="p-h4 mb16">transparent</h4>
+        <Card
+          description={description}
+          icon={<BasketballSportsIcon size={24} />}
+          onClick={onClick}
+          title={title}
+          variant="transparent"
+        />
+      </div>
+      <div>
+        <h4 className="p-h4 mb16">outline</h4>
+        <Card
+          description={description}
+          icon={<BasketballSportsIcon size={24} />}
+          onClick={onClick}
+          title={title}
+          variant="outline"
+        />
+      </div>
+      <div>
+        <h4 className="p-h4 mb16">secondary</h4>
+        <Card
+          description={description}
+          icon={<BasketballSportsIcon size={24} />}
+          onClick={onClick}
+          title={title}
+          variant="secondary"
+        />
+      </div>
+      <div>
+        <h4 className="p-h4 mb16">primary</h4>
+        <Card
+          description={description}
+          icon={<BasketballSportsIcon size={24} />}
+          onClick={onClick}
+          title={title}
+          variant="primary"
+        />
+      </div>
+    </div>
+  ),
+};
 
 export const CardAsOtherComponents = () => (
-  <div className='d-flex fd-column gap16 p24 bg-neutral-100'>
-   
-    <h3 className='p-h3'>As an anchor:</h3>
+  <div className="d-flex fd-column gap16 p24 bg-neutral-100">
+    <h3 className="p-h3">As an anchor:</h3>
     <Card
       as="a"
       href="https://feather-insurance.com"
       target="_blank"
       title="Card with an a tag"
-      density='xsmall'
+      density="xsmall"
     />
 
-    <h3 className='p-h3'>As a nav:</h3>
-    <Card
-      as="nav"
-      title="Card with a nav tag"
-      density='xsmall'
-    />
+    <h3 className="p-h3">As a nav:</h3>
+    <Card as="nav" title="Card with a nav tag" density="xsmall" />
 
-    <p className='p-p p-p--small fw-bold d-flex ai-center gap8 mt32'>
+    <p className="p-p p-p--small fw-bold d-flex ai-center gap8 mt32">
       <InfoIcon />
       Inspect elements to see the different HTML tags being rendered.
     </p>
@@ -209,156 +215,123 @@ export const CardAsOtherComponents = () => (
 );
 
 export const CardDisabledStates = () => (
-  <div className='d-flex fd-column gap16 p24 bg-neutral-100'>
+  <div className="d-flex fd-column gap16 p24 bg-neutral-100">
     <Card
       as="button"
       onClick={() => {}}
       title="Card with an a tag"
-      density='xsmall'
+      density="xsmall"
     />
     <Card
       as="button"
       onClick={() => {}}
       title="Card with an a tag"
-      density='xsmall'
+      density="xsmall"
       disabled
     />
   </div>
 );
 
 export const CardDensities = () => (
-  <div className='d-flex fd-column gap16 p24 bg-neutral-100'>
-    <Card
-      title={'Card density: xsmall'}
-      density='xsmall'
-    />
-    <Card
-      title={'Card density: small'}
-      density='small'
-    />
-    <Card
-      title={'Card density: medium'}
-      density='medium'
-    />
-    <Card
-      title={'Card density: large'}
-      density='large'
-    />
+  <div className="d-flex fd-column gap16 p24 bg-neutral-100">
+    <Card title={'Card density: xsmall'} density="xsmall" />
+    <Card title={'Card density: small'} density="small" />
+    <Card title={'Card density: medium'} density="medium" />
+    <Card title={'Card density: large'} density="large" />
   </div>
 );
 
-export const CardsWithIcons = ({ title }: CardProps) => (
-  <div className='d-flex gap16 p24 bg-neutral-100'>
-    <Card
-      icon={
-        <img
-          alt=""
-          src={illustrations.aids}
-          width={24}
-        />
-      }
-      title={title}
-    />
-    <Card
-      icon={<MehIcon size={24} noMargin />}
-      title={title}
-    />
-  </div>
-);
+export const CardsWithIcons = {
+  render: ({ title }: CardProps) => (
+    <div className="d-flex gap16 p24 bg-neutral-100">
+      <Card
+        icon={<img alt="" src={illustrations.aids} width={24} />}
+        title={title}
+      />
+      <Card icon={<MehIcon size={24} noMargin />} title={title} />
+    </div>
+  ),
+};
 
-export const CardWithOnClickAction = ({ 
-  children,
-  title,
-}: CardProps) => (
-  <div className='d-flex p24 bg-neutral-100'>
-    <Card
-      icon={
-        <img
-          alt=""
-          src={illustrations.aids}
-          width={24}
-        />
-      }
-      title={title}
-      titleVariant={'medium'}
-      onClick={() => {}}
-    >
-      {children}
-    </Card>
-  </div>
-);
+export const CardWithOnClickAction = {
+  render: ({ children, title }: CardProps) => (
+    <div className="d-flex p24 bg-neutral-100">
+      <Card
+        icon={<img alt="" src={illustrations.aids} width={24} />}
+        title={title}
+        titleVariant={'medium'}
+        onClick={() => {}}
+      >
+        {children}
+      </Card>
+    </div>
+  ),
+};
 
-export const CardOverridesStyles = ({ 
-  children,
-  label,
-  title,
-}: CardProps) => (
-  <div className='d-flex p24 bg-neutral-100'>
-    <Card
-      label={label}
-      title={title}
-      titleVariant={'medium'}
-      icon={<PlusCircleIcon color="neutral-50" size={32} />}
-      classNames={{ 
-        wrapper: 'bg-neutral-800',
-        label: 'tc-white',
-        title: 'tc-white'
-      }}
-    >
-      {children}
-    </Card>
-  </div>
-);
+export const CardOverridesStyles = {
+  render: ({ children, label, title }: CardProps) => (
+    <div className="d-flex p24 bg-neutral-100">
+      <Card
+        label={label}
+        title={title}
+        titleVariant={'medium'}
+        icon={<PlusCircleIcon color="neutral-50" size={32} />}
+        classNames={{
+          wrapper: 'bg-neutral-800',
+          label: 'tc-white',
+          title: 'tc-white',
+        }}
+      >
+        {children}
+      </Card>
+    </div>
+  ),
+};
 
 export const CardsWithinCardsAndComplexLayout = () => (
-  <div className='d-flex p24 bg-neutral-100'>
+  <div className="d-flex p24 bg-neutral-100">
     <Card
-      label={(
-        <Badge size='small' variant='success'>
+      label={
+        <Badge size="small" variant="success">
           Active
         </Badge>
-      )}
-      title={(
-        <div className='d-flex jc-between ai-center w100'>
+      }
+      title={
+        <div className="d-flex jc-between ai-center w100">
           Coverage overview
-
-          <Button
-          as="a"
-          href="#"
-            onClick={console.log}
-          >
+          <Button as="a" href="#" onClick={console.log}>
             Full covxerage details
           </Button>
         </div>
-      )}
+      }
     >
-      <div className='d-flex gap16 mt16'>
+      <div className="d-flex gap16 mt16">
         <Card
           description="Lost keys"
           classNames={{ wrapper: 'bg-neutral-300' }}
           icon={<CheckIcon color={'purple-600'} />}
-          density='xsmall'
+          density="xsmall"
         />
         <Card
           description="Broken glass"
           classNames={{ wrapper: 'bg-neutral-300' }}
           icon={<XIcon color={'purple-600'} />}
-          density='xsmall'
+          density="xsmall"
         />
       </div>
-      
-      <div className='d-flex gap16 mt16'>
+
+      <div className="d-flex gap16 mt16">
         <Card
           description="Damage to property"
           classNames={{ wrapper: 'bg-neutral-300' }}
           icon={<CheckIcon color={'purple-600'} />}
-          density='xsmall'
+          density="xsmall"
         />
         <Card
           description="Drones"
           classNames={{ wrapper: 'bg-neutral-300' }}
           icon={<XIcon color={'purple-600'} />}
-          density='xsmall'
+          density="xsmall"
         />
       </div>
     </Card>

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

@@ -84,6 +84,7 @@ const Card = <E extends ElementType = CardDefaultAsType>({
         onClick, 
         type: "button"
       }}
+      disabled={disabled}
       {...rest}
     >
       <div

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

@@ -33,27 +33,29 @@ const story = {
     disabled: false,
     className: '',
     href: 'https://feather-insurance.com/',
-  }
+  },
 };
 
-export const CardButtonStory = ({
-  title,
-  description,
-  disabled,
-  className,
-  href,
-  onClick,
-}: CardButtonProps) => (
-  <CardButton
-    title={title}
-    description={description}
-    disabled={disabled}
-    className={className}
-    href={href}
-    onClick={onClick}
-  />
-);
+export const CardButtonStory = {
+  render: ({
+    title,
+    description,
+    disabled,
+    className,
+    href,
+    onClick,
+  }: CardButtonProps) => (
+    <CardButton
+      title={title}
+      description={description}
+      disabled={disabled}
+      className={className}
+      href={href}
+      onClick={onClick}
+    />
+  ),
 
-CardButtonStory.storyName = "CardButton";
+  name: 'CardButton',
+};
 
 export default story;