diff --git a/docs/blocks/Introduction.mdx b/docs/blocks/Introduction.mdx index e3854ae5..8bd41812 100644 --- a/docs/blocks/Introduction.mdx +++ b/docs/blocks/Introduction.mdx @@ -20,3 +20,4 @@ We offer the following blocks: - Authentication - Profile - Pricing + - Billing \ No newline at end of file diff --git a/docs/blocks/administration/Billing.mdx b/docs/blocks/administration/Billing.mdx new file mode 100644 index 00000000..d90e5974 --- /dev/null +++ b/docs/blocks/administration/Billing.mdx @@ -0,0 +1,491 @@ +import { Meta, Unstyled } from '@storybook/addon-docs'; +import { BillingFull } from './BillingFull' ; +import { PayAndBilling } from './PayAndBilling' ; +import { Tabs, TabPanel, TabList, Tab } from '../../../src/layout/Tabs'; + + + +# Billing + + + + + + Demo + + + Code + + + +
+ +
+ + +```tsx +import React, { FC } from 'react'; +import { motion } from 'framer-motion'; +import { + Card, + Tab, + TabList, + Tabs, + TabPanel, + Stack, + Divider, + Button, + Chip +} from 'reablocks'; + +export const BillingFull: FC = () => ( + + +
+
+

Billing

+

+ Easily manage your account, view invoices, and track payments + conveniently in one place. Explore flexible subscription options and + manage your billing preferences effortlessly. +

+
+ + + Account Details + Users + Billing + Integrations + Notifications + + + +
+ Plan +
+ + + Premium + + Annual + + +
+ $1000 + + /Year + +
+ + + + Billing period +
+ Monthly + + (renews Mar 15, 2024) + +
+ + +
+ + Seats + Remaining Seats +
+ + +
+
+
+
5
+ of 25 seats used +
+ +
+
+ +
+ + +); +``` + + + +
+ + + + + Demo + + + Code + + + +
+ +
+ + +```tsx +import { motion } from 'framer-motion'; +import React, { FC } from 'react'; +import { + Button, + Card, + Chip, + ChipTheme, + chipTheme as defaultChipTheme, + Divider, + Stack, + Tooltip +} from 'reablocks'; + +export const PayAndBilling: FC = () => { + const chipTheme: ChipTheme = { + ...defaultChipTheme, + base: `${defaultChipTheme?.base} rounded-full`, + colors: { + ...defaultChipTheme?.colors, + info: { + ...defaultChipTheme.colors.info, + variants: { + ...defaultChipTheme?.colors?.info?.variants, + filled: `${defaultChipTheme?.colors?.info?.variants?.filled} text-panel-content bg-info/10 border-info` + } + }, + success: { + ...defaultChipTheme.colors.success, + variants: { + ...defaultChipTheme?.colors?.success?.variants, + filled: `${defaultChipTheme?.colors?.success?.variants?.filled} text-panel-content bg-success/10 border-success` + } + } + } + }; + + return ( + + +
+
+
+

Pay & Billing

+

+ Manage your plan and payments +

+
+ + + + +
+ +
+ Current plan + +
+
+ +
+ + Monthly plan + +
+ $1000{' '} + + /Month + +
+
+ + + + + } + color="info" + > + Auto Renew + + + Active + + + + +
+ + Renews on + + Mar 15, 2024 +
+ +
+
+ Usage + + Your usage is renewed every month + +
+
+ +
+ + + +
+
+ Design Credits + + + + + +
+ 100 of 500 +
+ + +
+ + +
+ + + +
+
+ Design Credits + + + + + +
+ 33 of 50 +
+ + +
+ + +
+ + + +
+
+ Design Credits + + + + + +
+ 47 of 125 +
+ + +
+ +
+
+ + + ); +}; +``` + + + diff --git a/docs/blocks/administration/BillingFull.tsx b/docs/blocks/administration/BillingFull.tsx new file mode 100644 index 00000000..b00ca6c5 --- /dev/null +++ b/docs/blocks/administration/BillingFull.tsx @@ -0,0 +1,158 @@ +import { motion } from 'framer-motion'; +import React, { FC } from 'react'; + +import { Button, Chip } from '../../../src/elements'; +import { + Card, + Divider, + Stack, + Tab, + TabList, + TabPanel, + Tabs +} from '../../../src/layout'; + +export const BillingFull: FC = () => ( + + +
+
+

Billing

+

+ Easily manage your account, view invoices, and track payments + conveniently in one place. Explore flexible subscription options and + manage your billing preferences effortlessly. +

+
+ + + Account Details + Users + Billing + Integrations + Notifications + + + +
+ Plan +
+ + + Premium + + Annual + + +
+ $1000 + + /Year + +
+ + + + Billing period +
+ Monthly + + (renews Mar 15, 2024) + +
+ + +
+ + Seats + Remaining Seats +
+ + +
+
+
+
5
+ of 25 seats used +
+ +
+
+ +
+ + +); diff --git a/docs/blocks/administration/Introduction.mdx b/docs/blocks/administration/Introduction.mdx index 3c56cc83..60d236e5 100644 --- a/docs/blocks/administration/Introduction.mdx +++ b/docs/blocks/administration/Introduction.mdx @@ -8,3 +8,4 @@ We offer the following blocks to help you build your administration pages: - Profile - Pricing +- Billing diff --git a/docs/blocks/administration/PayAndBilling.tsx b/docs/blocks/administration/PayAndBilling.tsx new file mode 100644 index 00000000..17d7447a --- /dev/null +++ b/docs/blocks/administration/PayAndBilling.tsx @@ -0,0 +1,279 @@ +import { motion } from 'framer-motion'; +import React, { FC } from 'react'; +import { + Button, + Chip, + ChipTheme, + chipTheme as defaultChipTheme +} from '../../../src/elements'; +import { Card, Divider, Stack } from '../../../src/layout'; +import { Tooltip } from '../../../src/layers'; + +export const PayAndBilling: FC = () => { + const chipTheme: ChipTheme = { + ...defaultChipTheme, + base: `${defaultChipTheme?.base} rounded-full`, + colors: { + ...defaultChipTheme?.colors, + info: { + ...defaultChipTheme.colors.info, + variants: { + ...defaultChipTheme?.colors?.info?.variants, + filled: `${defaultChipTheme?.colors?.info?.variants?.filled} text-panel-content bg-info/10 border-info` + } + }, + success: { + ...defaultChipTheme.colors.success, + variants: { + ...defaultChipTheme?.colors?.success?.variants, + filled: `${defaultChipTheme?.colors?.success?.variants?.filled} text-panel-content bg-success/10 border-success` + } + } + } + }; + + return ( + + +
+
+
+

Pay & Billing

+

+ Manage your plan and payments +

+
+ + + + +
+ +
+ Current plan + +
+
+ +
+ + Monthly plan + +
+ $1000{' '} + + /Month + +
+
+ + + + + } + color="info" + > + Auto Renew + + + Active + + + + +
+ + Renews on + + Mar 15, 2024 +
+ +
+
+ Usage + + Your usage is renewed every month + +
+
+ +
+ + + +
+
+ Design Credits + + + + + +
+ 100 of 500 +
+ + +
+ + +
+ + + +
+
+ Design Credits + + + + + +
+ 33 of 50 +
+ + +
+ + +
+ + + +
+
+ Design Credits + + + + + +
+ 47 of 125 +
+ + +
+ +
+
+ + + ); +}; diff --git a/package-lock.json b/package-lock.json index 4ef887b5..8934340f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "reablocks", - "version": "7.5.0", + "version": "7.5.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "reablocks", - "version": "7.5.0", + "version": "7.5.1", "license": "Apache-2.0", "dependencies": { "@marko19907/string-to-color": "^1.0.0", diff --git a/src/elements/Button/ButtonTheme.ts b/src/elements/Button/ButtonTheme.ts index 9845c99e..676660b2 100644 --- a/src/elements/Button/ButtonTheme.ts +++ b/src/elements/Button/ButtonTheme.ts @@ -77,7 +77,7 @@ const baseTheme: Partial = { } }, sizes: { - small: 'text-xs px-5px py-0.5 leading-[normal]', + small: 'text-sm px-5px py-0.5 leading-[normal]', medium: 'text-base px-2.5 py-1.5 leading-[normal]', large: 'text-xl px-5 py-2.5 leading-[normal]' } diff --git a/src/elements/Chip/Chip.story.tsx b/src/elements/Chip/Chip.story.tsx index 3f57262b..1a771905 100644 --- a/src/elements/Chip/Chip.story.tsx +++ b/src/elements/Chip/Chip.story.tsx @@ -107,42 +107,42 @@ const DemoIcon = () => ( export const CustomTheme = () => { const customTheme: ChipTheme = { ...chipTheme, - base: 'rounded-full', + base: `${chipTheme.base} rounded-full`, colors: { ...chipTheme?.colors, secondary: { ...chipTheme.colors.secondary, variants: { ...chipTheme.colors.secondary.variants, - filled: 'bg-panel-content text-panel' + filled: `${chipTheme?.colors?.secondary?.variants?.filled} bg-panel-content text-panel` } }, info: { ...chipTheme.colors.info, variants: { ...chipTheme.colors.info.variants, - filled: 'bg-info/10 border-info' + filled: `${chipTheme?.colors?.info?.variants?.filled} text-panel-content bg-info/10 border-info` } }, error: { ...chipTheme.colors.error, variants: { ...chipTheme.colors.error.variants, - filled: 'bg-error/10 border-error' + filled: `${chipTheme?.colors?.error?.variants?.filled} text-panel-content bg-error/10 border-error` } }, warning: { ...chipTheme.colors.warning, variants: { ...chipTheme.colors.warning.variants, - filled: 'bg-warning/10 border-warning' + filled: `${chipTheme?.colors?.warning?.variants?.filled} text-panel-content bg-warning/10 border-warning` } }, success: { ...chipTheme.colors.success, variants: { ...chipTheme.colors.success.variants, - filled: 'bg-success/10 border-success' + filled: `${chipTheme?.colors?.success?.variants?.filled} text-panel-content bg-success/10 border-success` } } } diff --git a/tailwind.config.ts b/tailwind.config.ts index 7ae6b1b5..f3eca2e5 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -306,7 +306,7 @@ const config: Config = { // Panel backgrounds, such as cards, tables, popovers, dialogs, dropdown menus, etc. DEFAULT: colorPalette['black-pearl'], content: colorPalette['athens-gray'], - 'secondary-content': colorPalette.gray[600], + 'secondary-content': colorPalette['waterloo'], accent: colorPalette['charade'] }, surface: {