NeoPOP Web

The ElevatedCard component creates a card effect with visual 'plunks' (depth accents) at the right and bottom edges. To use it, wrap your card content inside the ElevatedCard component. You can customize the card's appearance using backgroundColor and edgeColors to define the specific colors for the bottom and right depth accents.

import React from 'react';
import {
    ElevatedCard,
    Column,
    Row,
    Typography,
    HorizontalSpacer,
    Tag,
    Button,
} from '@cred/neopop-web/lib/components';
import {
    mainColors,
    colorPalette,
    fontNameSpaces,
    getButtonConfig,
} from '@cred/neopop-web/lib/primitives';
import styled from 'styled-components';

const ContentWrapper = styled.div`
    padding: 20px;
`;

const Card = () => {
    return (
        <ElevatedCard
            backgroundColor="#AE275F"
            edgeColors={{
                bottom: '#5C1532',
                right: '#851E49',
            }}
            style={{
                width: '230px',
            }}
        >
            <ContentWrapper>
                <Column>
                    {/* Your card content here */}
                </Column>
            </ContentWrapper>
        </ElevatedCard>
    );
};

export default Card;

Toasts are non-blocking notifications used to display short messages to users. To implement them, follow these two steps:

1. Mount the Container: Add the <ToastContainer /> component anywhere in your application's DOM tree (typically at the root level).
2. Trigger a Toast: Call the showToast method, passing the message as the first argument and a configuration object as the second.

You can use predefined types (success, error, warning) or provide a custom colorConfig to override the appearance.

// 1. Setup Container in App.jsx
import { ToastContainer } from '@cred/neopop-web/lib/components';

const App = () => (
    <div>
        <ToastContainer />
        <MainApp />
    </div>
);

// 2. Trigger Toast in a component
import { showToast } from '@cred/neopop-web/lib/components';

const MyComponent = () => {
    const handleClick = () => {
        showToast('Sample toast message', { 
            type: 'success', 
            autoCloseTime: 5000 
        });
    };

    return <button onClick={handleClick}>Click for toast</button>;
};

The ScoreMeter component provides a visual representation of a quantifiable value within a defined range.

To use it:

1. Pass the required reading prop.
2. Set lowerLimit and upperLimit to define the scale (defaults are 300 and 900 respectively).
3. Use colorMode ("dark" or "light") to set the theme.
4. Use type ("excellent", "average", or "poor") to automatically set colors based on the rating.
5. Provide oldReading if you want to trigger a transition animation from a previous value to the current reading.

import { ScoreMeter } from '@cred/neopop-web/lib/components';

const ScoreMeterExample = () => {
    return (
        <ScoreMeter
            reading={720}
            oldReading={500}
            lowerLimit={100}
            upperLimit={1000}
            colorMode="light"
            type="excellent"
        />
    );
};

export default ScoreMeterExample;

The SearchBar component provides a flexible search input field that supports both icon rendering and event handling for input changes and form submissions. You can use it with or without an icon by providing or omitting the iconUrl prop.

import React from 'react';
import { SearchBar } from '@cred/neopop-web/lib/components';
import { colorGuide } from '@cred/neopop-web/lib/primitives';

const SearchInputField = () => {
    const handleChange = (value) => {
        console.log('Search query: ', value);
    };
    const handleSubmit = () => {
        console.log('Search query submitted');
    };

    return (
        <SearchBar
            iconUrl="https://cdn-icons-png.flaticon.com/512/482/482631.png"
            placeholder="search query here"
            colorConfig={colorGuide.lightComponents.searchBar}
            inputColorConfig={colorGuide.lightComponents.inputFields}
            handleSearchInput={handleChange}
            onSubmit={handleSubmit}
        />
    );
};

export default SearchInputField;