@loja-integrada/admin-components 0.16.1 → 0.18.0

package/src/Indicators/InformationBox/InformationBox.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { Icon, IconProps } from '../../Icons'
+
+type InformationBoxTypesOptions = 'tip' | 'warning' | 'danger'
+
+const InformationBoxTypes: Record<
+  InformationBoxTypesOptions,
+  {
+    title: string
+    class: string
+    icon: IconProps['icon']
+    iconClass: string
+  }
+> = {
+  tip: {
+    title: 'Dica!',
+    class: 'bg-success-light border-success',
+    icon: 'lightbulb',
+    iconClass: 'text-success',
+  },
+  warning: {
+    title: 'Atenção!',
+    class: 'bg-warning-light border-warning',
+    icon: 'exclamationTriangle',
+    iconClass: 'text-warning',
+  },
+  danger: {
+    title: 'Cuidado!',
+    class: 'bg-danger-light border-danger',
+    icon: 'ban',
+    iconClass: 'text-danger',
+  },
+}
+
+const InformationBoxComponent = ({
+  type = 'tip',
+  subtitle,
+}: InformationBoxProps) => {
+  return (
+    <div
+      className={`InformationBox pl-4 pr-6 pt-5 pb-6 rounded w-full relative flex items-start mb-3 ${InformationBoxTypes[type].class}`}
+    >
+      <div
+        className={`w-10 h-10 flex justify-center items-center flex-shrink-0 rounded-full mr-3 bg-base-1`}
+      >
+        <Icon
+          icon={InformationBoxTypes[type].icon}
+          className={`InformationBox-icon ${InformationBoxTypes[type].iconClass}`}
+          size={4}
+        />
+      </div>
+
+      <div className="flex-grow flex flex-col sm:flex-row items-start justify-between min-w-0">
+        <div className="flex flex-col justify-center min-w-0 break-words tracking-4 leading-6 text-on-base">
+          <span
+            className={`InformationBox-title text-f5 font-bold ${InformationBoxTypes[type].iconClass}`}
+          >
+            {InformationBoxTypes[type].title}
+          </span>
+          {subtitle && (
+            <span className="InformationBox-subtitle text-f6 font-regular mt-1">
+              {subtitle}
+            </span>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const InformationBox = React.memo(InformationBoxComponent)
+
+export interface InformationBoxProps {
+  /** InformationBox color
+   * @default info
+   * */
+  type?: keyof typeof InformationBoxTypes
+  /**
+   * @default true
+   */
+  title?: string | React.ReactNode
+  /**
+   * InformationBox text below title
+   */
+  subtitle?: string | React.ReactNode
+}

package/src/Indicators/InformationBox/InformationBoxt.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import { InformationBox, InformationBoxProps } from './InformationBox'
+
+export default {
+  title: 'Indicators/InformationBox',
+  component: InformationBox,
+  parameters: {
+    layout: 'padded',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/Z2WDD4SH8zwaJC2K5wbtMO/Sistema-Integrado?node-id=2406%3A20851',
+    },
+  },
+  args: {
+    title: 'Dica!',
+    subtitle: 'Como criar um cadastro de produto incrível? No mundo virtual, o consumidor não pode pegar, sentir ou experimentar o produto. Por isso, a imagem que você utiliza faz toda a diferença na hora da venda.',
+  },
+} as Meta
+
+const Template: Story<InformationBoxProps> = args => <div className="max-w-4xl mx-auto"><InformationBox {...args} /></div>
+
+export const Default = Template.bind({})

package/src/Indicators/InformationBox/index.tsx

@@ -0,0 +1 @@
+export * from './InformationBox'

package/src/Indicators/index.ts

@@ -4,3 +4,4 @@ export * from './Tag'
 export * from './Toast'
 export * from './Badge'
 export * from './Tooltip'
+export * from './InformationBox'