agroptima-design-system 0.22.2 → 0.22.4-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.22.2",
+  "version": "0.22.4-beta.1",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/EmptyState.tsx

@@ -1,5 +1,4 @@
 import { classNames } from '../utils/classNames'
-import { Button, ButtonProps } from './Button'
 import './EmptyState.scss'
 import { Icon, IconType } from './Icon'
 
@@ -7,25 +6,21 @@ export type Variant = 'primary'
 
 export interface EmptyStateProps extends React.ComponentPropsWithoutRef<'div'> {
   icon?: IconType
-  text?: string
   variant?: Variant
-  button?: ButtonProps
 }
 
 export function EmptyState({
   className,
   icon = 'EmptyState',
-  text = 'No data',
   variant = 'primary',
-  button,
+  children,
 }: EmptyStateProps): React.JSX.Element {
   const cssClasses = classNames('empty-state', variant, className)
 
   return (
     <div className={cssClasses}>
       <Icon name={icon} />
-      <p>{text}</p>
-      {button?.label && <Button {...button} />}
+      {children}
     </div>
   )
 }

package/src/icons/delivery-note.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 1.5 16 0l-1.5 1.5L13 0l-1.5 1.5L10 0 8.5 1.5 7 0 5.5 1.5 4 0 2.5 1.5 1 0v20l1.5-1.5L4 20l1.5-1.5L7 20l1.5-1.5L10 20l1.5-1.5L13 20l1.5-1.5L16 20l1.5-1.5L19 20V0l-1.5 1.5ZM17 17.09H3V2.91h14v14.18ZM4 13h12v2H4v-2Zm0-4h12v2H4V9Zm0-4h12v2H4V5Z" fill="#161C26"/></svg>

package/src/icons/index.tsx

@@ -36,6 +36,7 @@ import Show from './show.svg'
 import ShowOff from './show-off.svg'
 import Sorter from './sorter.svg'
 import Warning from './warning.svg'
+import DeliveryNote from './delivery-note.svg'
 
 export {
   Add,
@@ -54,6 +55,7 @@ export {
   Close,
   Comment,
   Delete,
+  DeliveryNote,
   Done,
   DoubleArrowLeft,
   DoubleArrowRight,

package/src/stories/Changelog.mdx

@@ -4,6 +4,16 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.22.4
+
+BREAKING CHANGES
+
+* EmptyState text and button props have been removed and children elements can be passed to the component.
+
+# 0.22.3
+
+* Add Delivery Note icon
+
 # 0.22.2
 
 * Add IconButton secondary variant

package/src/stories/EmptyState.stories.js

@@ -0,0 +1,46 @@
+import { Button } from '../atoms/Button'
+import { EmptyState } from '../atoms/EmptyState'
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=1719-258&mode=dev',
+  },
+}
+
+const meta = {
+  title: 'Design System/Atoms/EmptyState',
+  component: EmptyState,
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      description: 'A default icon is set for the empty state.',
+    },
+    variant: {
+      description: 'Variant used.',
+    },
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export default meta
+
+export const PrimaryCustom = {
+  render: () => (
+    <EmptyState variant="primary">
+      <p>
+        There are no videogames yet. You can import videogames to your{' '}
+        <a href="#">list</a>.
+      </p>
+      <Button label="Import videogames" onClick={() => alert('click')}></Button>
+    </EmptyState>
+  ),
+}
+
+export const PrimaryBasic = {
+  render: () => (
+    <EmptyState variant="primary">
+      <p>No data</p>
+    </EmptyState>
+  ),
+}

package/tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/stories/CardsTable.stories.js", "src/stories/Modal.stories.js", "src/stories/Typography.stories.mdx", "src/stories/Card.stories.js", "src/stories/Menu.stories.js"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/stories/CardsTable.stories.js", "src/stories/Modal.stories.js", "src/stories/Typography.stories.mdx", "src/stories/Card.stories.js", "src/stories/Menu.stories.js", "src/stories/EmptyState.stories.js"],
   "exclude": ["node_modules"]
 }

package/src/stories/EmptyState.stories.ts

@@ -1,54 +0,0 @@
-import { EmptyState } from '../atoms/EmptyState'
-import { StoryObj } from '@storybook/react'
-
-const meta = {
-  title: 'Design System/Atoms/EmptyState',
-  component: EmptyState,
-  tags: ['autodocs'],
-  argTypes: {
-    icon: {
-      description: 'A default icon is set for the empty state.',
-    },
-    text: {
-      description: 'Label used to describe the empty state.',
-    },
-    variant: {
-      description: 'Variant used.',
-    },
-    buttonLabel: {
-      description: 'Label used on the button.',
-    },
-    action: {
-      description: 'Action called when button is pressed.',
-    },
-  },
-}
-
-const figmaPrimaryDesign = {
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=1719-258&mode=dev',
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const PrimaryCustom: Story = {
-  args: {
-    variant: 'primary',
-    text: 'There are no videogames yet. You can import videogames to your list.',
-    button: {
-      label: 'Import videogames',
-      onClick: () => alert('click'),
-    },
-  },
-  parameters: figmaPrimaryDesign,
-}
-
-export const PrimaryBasic: Story = {
-  args: {
-    variant: 'primary',
-  },
-  parameters: figmaPrimaryDesign,
-}