norma-library 0.6.77 → 0.6.79

package/src/stories/ProductCard.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta } from "@storybook/react";
+import { ProductCard } from "../components/ProductCard/ProductCard";
+import React from "react";
+
+const meta = {
+  title: 'Layout/ProductCard',
+  component: ProductCard,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof ProductCard>;
+
+export default meta;
+
+export const BasicProductCard = () => <ProductCard flaggable title="Financeiro e Jurídico" description="Novas possibilidades de análise de desempenho operacional, elasticidade e segurança." iconColor="#247010" color="#F3FCEA" iconName="lucide:briefcase-medical" />;
+BasicProductCard.storyName = 'Basic Product Card';
+
+export const DisabledProductCard = () => <ProductCard title="Suporte" description="Novo mundo de possibilidades em jornada omnicanal, design de Data Lake, Data Blocks e Segurança." iconColor="#6a491d" color="#FDF6E3" iconName="lucide:bookmark" disabled />;
+
+export const NoBorderProductCard = () => <ProductCard flaggable title="Teste" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eleifend, ex sit amet sagittis interdum, est ante placerat velit, sed consectetur arcu sem id nisi. Integer vitae mauris et lectus vulputate maximus" iconColor="#6a491d" color="#FDF6E3" iconName="lucide:user" hasBorder={false} />;

package/src/stories/RangerSlider.stories.tsx

@@ -68,9 +68,11 @@ type Story = StoryObj<typeof meta>;
 
 export const RangerSliderBasic: Story = {
   args: {
-    value: [20, 37],
+    value: [0, 37],
     valueLabelDisplay: 'on',
     getAriaLabel: () => 'Faixa de temperatura',
+    showValueInline: true,
+    label: 'Faixa de temperatura',
   },
   argTypes: {
     value: {
@@ -97,8 +99,9 @@ export const RangerSliderBasic: Story = {
 export const RangerSliderFormatter: Story = {
   args: {
     value: [0, 540],
-    valueLabelDisplay: 'auto',
+    valueLabelDisplay: 'off',
     getAriaLabel: () => 'Faixa de tempo',
+    showValueInline: true,
     valueLabelFormat: (value: number) => {
       if (value < 60) {
         return `${value}s`;
@@ -123,6 +126,7 @@ export const RangerSliderFormatter: Story = {
     },
     min: 0,
     max: 1000,
+    label: 'Faixa de tempo',
   },
   argTypes: {
     value: {

package/src/stories/ServiceCard.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta } from "@storybook/react";
+import {ServiceCard} from "../components/ServiceCard/ServiceCard";
+import React from "react";
+
+const meta = {
+    title: 'Layout/ServiceCard',
+    component: ServiceCard,
+    parameters: {
+      layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+  } satisfies Meta<typeof ServiceCard>;
+
+export default meta;
+
+export const BasicServiceCard = () => <ServiceCard title="Financeiro e Jurídico" description="Dados financeiros e legais sobre seus produtos." iconName="ic:baseline-account-balance" iconColor="#247010" color="#F3FCEA"/>;
+BasicServiceCard.storyName = 'Basic Service Card';
+
+export const DisabledServiceCard = () => <ServiceCard title="Suporte" description="Suporte técnico para seus produtos." iconColor="#6a491d" iconName="ic:baseline-add-photo-alternate" color="#FDF6E3" disabled/>;