@dev-club/ds NPM

@devClub/ds

Colman Dev Club Design System

Installation

npm install @dev-club/ds

Usage

// import a component
import { Example } from '@dev-club/ds';

function foo() {
    return (
        // use the imported component
        <Example />
    )
};

Components

You can see the components and test their different options using Storybook.

Button

Attributes:

Attribute	Type	Options	Default	Required
variant	String	"regular", "outlined", "text"	"regular"	False
width	Number	-	10	False
height	Number	-	3	False
padding	Number	-	0.2	False
background	String	-	Theme.background.dark	False
color	String	-	"none"	False
onclick	Function	-	-	False

Example:

import { Button } from '@dev-club/ds';

function foo() {
    const log = () => {
        console.log('clicked!');
    };
    
    return (
        <Button variant="outlined" onclick={log}>
            Click Here!
        </Button>
    )
};

ButtonCTA

Attributes:

Attribute	Type	Options	Default	Required
size	String	"regular", "mobile"	"regular"	False

Example:

import { ButtonCTA } from '@dev-club/ds';

function foo() {
    return (
        <Button size="mobile">
            Click Here!
        </Button>
    )
};

Droplist

Attributes:

Attribute	Type	Options	Default	Required
title	String	-	-	True
items	Array	-	-	True
width	Number	-	19.5	False
height	Number	-	2.3	False
hover	String	-	Theme.background.yellow	False
background	String	-	Theme.background.blue	False
color	String	-	Theme.typography.white	False

Example:

import { Droplist } from '@dev-club/ds';

function foo() {
    const arr = [
    { text: "1st option" },
    { 
    text: "2nd option",
      disabled: true,
    },
  ],
    return (
        <Droplist title="title" items={arr} />
    )
};

Typography

Attributes:

Attribute	Type	Options	Default	Required
variant	String	"p", "h1"-"h6"	-	True
color	String	-	-	True
weight	Number	-	-	False
size	Number	-	-	False

Example:

import { Typography, Theme } from '@dev-club/ds';

function foo() {
    return (
        <Typography variant="h1"  color={Theme.typography.dark}>
            Topography is the study of the land surface.
        <Typography />
    )
};

Navbar

Attributes:

Attribute	Type	Options	Default	Required
items	Array	-	-	True
direction	String	"row", "column"	"row"	False
gap	Number	-	1	False

Example:

import { Navbar } from '@dev-club/ds';

function foo() {
    const arr = [
        {text: 'Home', url: 'https://www.npmjs.com/package/@dev-club/ds'},
        {text: 'About Us', url: 'https://www.npmjs.com/package/@dev-club/ds'}
    ];
    return (
        <Navbar items={arr} gap={2} />
    )
};

DropMenu

Attributes:

Attribute	Type	Options	Default	Required
title	String	-	-	True
items	Array	-	-	True
width	Number	-	15	False
height	Number	-	3	False
hover	String	-	Theme.background.yellow	False
background	String	-	Theme.background.dark	False
color	String	-	Theme.typography.white	False

Example:

import { DropMenu } from '@dev-club/ds';

function foo() {
    const arr = [
        {text: 'Home', url: 'https://www.npmjs.com/package/@dev-club/ds'},
        {text: 'About Us', url: 'https://www.npmjs.com/package/@dev-club/ds'}
    ];
    return (
        <DropMenu title="title" items={arr} />
    )
};

Disclosure

Attributes:

Attribute	Type	Options	Default	Required
disclosures	Array	-	-	True
width	Number	-	30	False
background	String	-	Theme.background.light	False
color	String	-	Theme.typography.white	False
border	String	-	Theme.background.dark	False
backgroundButton	String	Theme.background.yellow	False

Example:

import { Disclosure } from '@dev-club/ds';

function foo() {
    const arr = [
        {
            text: "What is your refund policy?",
            content: "If you're unhappy with your purchase for any reason, email uswithin 90 days and we'll refund you in full, no questions asked."
        },
        {
            text: "What is your refund policy?",
            content: "If you're unhappy with your purchase for any reason, email uswithin 90 days and we'll refund you in full, no questions asked."
        }
    ];
    return (
        <Disclosure disclosures={arr} />
    )
};

Card

Attributes:

Attribute	Type	Options	Default	Required
width	Number	-	12.222	False
height	Number	-	14.222	False
color	String	-	Theme.background.yellow	False
border	String	-	Theme.background.light	False

Example:

import { Card } from "@dev-club/ds";

function foo() {
   return (
      <Card width={12.222} height={14.222} color="#000000" border="#FFFFFF">
        <Typography variant="h1"  color="black">
            Topography is the study of the land surface
        <Typography />
      </Card>
   );
}

Tabs

Attributes:

Attribute	Type	Options	Default	Required
tabs	Array	-	-	True
width	Number	-	-	True
height	Number	-	-	True
background	String	-	Theme.background.light	False
selectedbackground	String	-	Theme.background.yellow	False
border	String	-	"none"	False
color (font)	String	-	Theme.typography.white	False
selectedcolor (font)	String	-	Theme.typograpghy.dark	False
gap	Number	-	1(rem)	False
direction	String	"row", "column"	"row"	False
space	Boolean	true, false	true	False
fontsize	Number	-	1 (rem)	False

Example:

import { Tabs, ButtonCTA } from "@dev-club/ds";
    
function foo() {
    const arr = [
        {text: 'Tab 1', content: 'content 1'},
        {text: 'Tab 2', content: <ButtonCTA text="Click Here"/>}
    ];
    return (
        <Tabs tabs={arr} width={10} height={6} />
   );
}

Theme

Options:

Background

Theme.background.dark - #040413
Theme.background.light - #0A0A1B
Theme.background.blue - #121231
Theme.background.yellow - #F6C927

Typography

Theme.typography.white - #FFFFFF
Theme.typography.yellow - #F6C927
Theme.typography.dark - #0A0A1B
Theme.typography.darker - #0E0E28

Border

Theme.border.blue - #1F1F53

Example:

import { Theme, Typography } from '@dev-club/ds';

function foo() {
    return (
        <Typography variant="h1"  color={Theme.typography.dark}>
            Topography is the study of the land surface.
        <Typography />
};