Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add paper #780

Merged
merged 1 commit into from
Dec 26, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions clients/admin-client/src/pages/archetypes.page.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
import { Paper } from '@cats-cradle/design-system/dist/main';
import ArchetypeSelect from '../components/ArchetypeSelect';

export default function ArchetypePage() {
return (
<main className="container">
<h1>Archetypes</h1>
<p>
Archetypes serve as the fundamental blueprint for character sheets. They outline a character's abilities, potential, and constraints. Each character sheet draws inspiration from a designated archetype, shaping their possibilities and outlining the skills they can or cannot acquire. While an archetype does not detail everything, it plays a vital role in guiding both player and non-player character creation.
</p>
<ArchetypeSelect />
<Paper elevation="1">
<h1>Archetypes</h1>
<p>
Archetypes serve as the fundamental blueprint for character sheets. They outline a character's abilities, potential, and constraints. Each character sheet draws inspiration from a designated archetype, shaping their possibilities and outlining the skills they can or cannot acquire. While an archetype does not detail everything, it plays a vital role in guiding both player and non-player character creation.
</p>
<ArchetypeSelect />
</Paper>
</main>
);
}
6 changes: 5 additions & 1 deletion clients/admin-client/src/pages/character-sheets.page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { Paper } from '@cats-cradle/design-system/dist/main';

export default function CharacterSheetsPage() {
return (
<main className="container">
<h1>Character Sheets</h1>
<Paper elevation="1">
<h1>Character Sheets</h1>
</Paper>
</main>
);
}
17 changes: 10 additions & 7 deletions clients/admin-client/src/pages/dice.page.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import { Paper } from '@cats-cradle/design-system/dist/main';
import { DiceAnalyzer } from '../components/DiceAnalyzer';

export default function DicePage() {
return (
<main className="container">
<h1>Dice Notation Analyzer</h1>
<p>
Determine the appropriate dice notation for skill set rolls and
visualizes the impact of luck. Gain valuable insights into
chance&apos;s influence on game play outcomes.
</p>
<DiceAnalyzer />
<Paper elevation="1">
<h1>Dice Notation Analyzer</h1>
<p>
Determine the appropriate dice notation for skill set rolls and
visualizes the impact of luck. Gain valuable insights into
chance&apos;s influence on game play outcomes.
</p>
<DiceAnalyzer />
</Paper>
</main>
);
}
24 changes: 13 additions & 11 deletions clients/admin-client/src/pages/home.page.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,20 @@
import { Button, Link } from '@cats-cradle/design-system/dist/main';
import { Paper, Button, Link, FontAwesomeIcon, faArrowRight } from '@cats-cradle/design-system/dist/main';

export default function HomePage() {
return (
<main className="container">
<h1>Cats Cradle</h1>
<h2>Latest</h2>
<h3>Archetypes</h3>
<p>
Attention, game masters! Introducing our latest tool designed exclusively for you.
Dive into the world of character archetypes with ease.
Uncover diverse options, check out base stats, and seamlessly explore backstories—all in one place.
No-frills, just a straightforward way to look at the data. Raise a <Link href='https://github.com/hxtree/cats-cradle/pulls'>pull request</Link> to suggest changes.
</p>
<Button href="/archetypes" color="secondary">Try It!</Button>
<Paper elevation="1">
<h1>Cats Cradle</h1>
<h2>Latest</h2>
<h3>Archetypes</h3>
<p>
Attention, game masters! Introducing our latest tool designed exclusively for you.
Dive into the world of character archetypes with ease.
Uncover diverse options, check out base stats, and seamlessly explore backstories—all in one place.
No-frills, just a straightforward way to look at the data. Raise a <Link href='https://github.com/hxtree/cats-cradle/pulls'>pull request</Link> to suggest changes.
</p>
<Button href="/archetypes" color="secondary">Try It <FontAwesomeIcon icon={faArrowRight}/></Button>
</Paper>
</main>
);
}
2 changes: 1 addition & 1 deletion clients/design-system/src/components/Alert/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const Alert = (props: AlertProps) => {

return (
<>
<div className={`alert alert-${severity} d-flex align-items-center mt-4 mb-2`} role="alert">
<div className={`alert alert-${severity} d-flex align-items-center mt-5 mb-5`} role="alert">
<svg className="bi flex-shrink-0 me-2" viewBox="0 0 16 16" fill="currentColor" width="24" height="24" role="img">
{ symbol }
</svg>
Expand Down
2 changes: 1 addition & 1 deletion clients/design-system/src/components/AppBar/AppBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const AppBar = (props: AppBarProps) => {
</div>
</nav>

<nav className="navbar navbar-expand-lg navbar-light shadow-sm app-bar-light">
<nav className="navbar navbar-expand-lg navbar-light">
<div className="container">
<div className="collapse navbar-collapse" id="navbarNav">
{children}
Expand Down
2 changes: 1 addition & 1 deletion clients/design-system/src/components/AppBar/style.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import '../../styles/utils/color-pallette';

.app-bar-light {
background-color: #e5e5e5!important;
background-color: $color-off-white !important;
}

.app-bar-dark {
Expand Down
13 changes: 11 additions & 2 deletions clients/design-system/src/components/Button/style.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
border: none;
margin: 8px;
box-shadow: none;
transition: background-color 0.3s ease;
&.button-disabled {
opacity: 0.5;
cursor: not-allowed;
Expand All @@ -29,10 +30,14 @@
color: $color-white;
}
}
&:hover {
border-color: lighten($color-primary, 5%);
background-color: lighten($color-primary, 5%);
}
}
&.button-secondary {
border: 3px solid $color-primary;
background-color: $color-white;
background-color: transparent;
color: $color-primary;
&:focus, &.button-selected {
outline-color: $color-primary;
Expand All @@ -43,10 +48,14 @@
color: $color-primary !important;
}
}
&:hover {
border-color: lighten($color-primary, 5%);
color: lighten($color-primary, 5%);
}
}
&.button-inherit {
border: 3px solid $color-primary;
background-color: $color-white;
background-color: transparent;
color: $color-primary;
&:focus, &.button-selected {
outline-color: $color-primary;
Expand Down
1 change: 1 addition & 0 deletions clients/design-system/src/components/Icons/Icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export {
faChevronCircleLeft,
faChevronCircleRight,
faBars,
faArrowRight,
} from '@fortawesome/free-solid-svg-icons';

export { faGithub } from '@fortawesome/free-brands-svg-icons';
22 changes: 0 additions & 22 deletions clients/design-system/src/components/Layout/Layout.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,6 @@
import MUIBox, { BoxProps as MUIBoxProps } from '@mui/material/Box';
import MUIStack, { StackProps as MUIStackProps } from '@mui/material/Stack';
import MUIGrid, { GridProps as MUIGridProps } from '@mui/material/Grid';
import MUIPaper, { PaperProps as MUIPaperProps } from '@mui/material/Paper';

export type PaperProps = MUIPaperProps;

export const Paper = (props: PaperProps) => {
const { children, ...muiProps } = props;
return <MUIPaper {...muiProps}>{children}</MUIPaper>;
};

export type StackProps = MUIStackProps;
export const Stack = (props: StackProps) => {
Expand All @@ -28,17 +20,3 @@ export const Grid = (props: GridProps) => {
return <MUIGrid {...muiProps}>{children}</MUIGrid>;
};

export type ItemProps = PaperProps;
// style={"padding: 0.5rem; font-family: 'Eczar', serif;"}
export const Item = (props: ItemProps) => {
const { children, ...muiProps } = props;
return <Paper {...muiProps}>{children}</Paper>;
};

// export const Item = styled(Paper)(({ theme }) => ({
// backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
// ...theme.typography.body2,
// padding: theme.spacing(1),
// textAlign: 'center',
// color: theme.palette.text.secondary,
// }));
14 changes: 14 additions & 0 deletions clients/design-system/src/components/Paper/Paper.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import './style.module.scss'

export type PaperProps = {
children: React.ReactNode;
elevation: string;
};

export const Paper = (props: PaperProps): JSX.Element => {
const { elevation, children } = props;

return (<div className={`paper elevation-${elevation}`}>{children}</div>)
};

export default Paper;
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
@import '../../styles/utils/color-pallette';

.paper {
background-color: $color-white;
box-shadow: rgba(0, 0, 0, 0.22) 0px 4px 30px 0px;
padding: 4rem 4.5rem;
border-radius: 2.25rem;
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,12 @@
font-family: "Eczar", serif;
font-weight: 800;
font-size: 3rem;
color: $color-berkeley-blue;
color: $color-primary;
padding: 12px 0;
margin-top: 3rem;
&.fill {
border-radius: 5px;
padding: 13px;
background-color: $color-berkeley-blue;
background-color: $color-primary;
color: $color-white;
};
&.border {
Expand Down Expand Up @@ -44,7 +43,7 @@

h2 {
font-size: 2rem;
color: $color-berkeley-blue;
color: $color-primary;
font-weight: bold;
padding: 12px 0;
&.border {
Expand Down Expand Up @@ -72,7 +71,7 @@
&.fill {
border-radius: 5px;
padding: 20px 13px;
background-color: $color-berkeley-blue;
background-color: $color-primary;
color: $color-white;
font-weight: bold;
border-bottom: none;
Expand Down
1 change: 1 addition & 0 deletions clients/design-system/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,4 @@ export * from './Button/Button';
export * from './Link/Link';
export * from './Layout/Layout';
export * from './Card/BasicCard';
export * from './Paper/Paper';
8 changes: 7 additions & 1 deletion clients/design-system/src/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -86,4 +86,10 @@ $success: #7952b3;
@import './components/AppBar/style.scss';
@import './components/Button/style.module.scss';
@import './components/SocialMediaBar/style.module.scss';
@import './components/PageFooter/style.module.scss';
@import './components/PageFooter/style.module.scss';
@import './components/Paper/style.module.scss';

body {
background-color: $color-off-white;
color: $color-off-black;
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,12 @@ $color-murrey: #b3105c;
$color-white: #FFF;
$color-black: #000;
$color-gray: #939699;
$color-off-black: #1e1e1f;
$color-off-white: #f1f4f9;
$color-blue: #0077ae;

/* common color abstractions */
$color-primary: $color-berkeley-blue;
$color-primary: $color-blue;
$color-secondary: $color-murrey;
$color-inherit: $color-gray;

Expand Down
40 changes: 21 additions & 19 deletions clients/design-system/stories/pages/Homepage.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import { Meta } from '@storybook/react';
import { AppBar, Button, Typography, Alert, PageFooter, Link } from '../../src/main';
import { Paper, AppBar, Button, Typography, Alert, PageFooter, Link, faArrowRight, FontAwesomeIcon } from '../../src/main';
// IconButton, FontAwesomeIcon, faBars, faGithub,

type NavMenuItem = {
Expand Down Expand Up @@ -36,29 +36,31 @@ export const Default = () => (
</AppBar>
<div className='container'>
<Alert severity="info">
Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula.
Commodo quis imperdiet massa tincidunt nunc pulvinar sapien et ligula.
</Alert>

<Typography variant="h1">Et malesuada fames ac turpis.</Typography>
<Typography variant="intro">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula metus quis sagittis malesuada. Nulla facilisi. Duis feugiat tellus eu justo hendrerit, nec congue odio congue.
</Typography>
<Paper>
<Typography variant="h1">Et malesuada fames ac turpis.</Typography>
<Typography variant="intro">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula metus quis sagittis malesuada. Nulla facilisi. Duis feugiat tellus eu justo hendrerit, nec congue odio congue.
</Typography>

<Typography variant="body">
Integer malesuada justo eu metus tincidunt, quis luctus elit posuere. Morbi et ipsum euismod, sodales ante in, feugiat justo. Vivamus sed suscipit felis. Sed ut lectus ut arcu laoreet ultricies vel in nulla. Etiam vel diam vel felis dignissim luctus. Integer bibendum fringilla justo, vitae facilisis eros convallis vel. Sed ac tellus vel dui finibus pellentesque.
Nullam id elit eu urna ullamcorper bibendum. Sed nec ex nec lectus finibus bibendum ac eget nunc. Vivamus eu dolor vel sem lacinia vestibulum. In hac habitasse platea dictumst. Curabitur sit amet augue nec velit eleifend lobortis. </Typography>
<Typography variant="body">
Integer malesuada justo eu metus tincidunt, quis luctus elit posuere. Morbi et ipsum euismod, sodales ante in, feugiat justo. Vivamus sed suscipit felis. Sed ut lectus ut arcu laoreet ultricies vel in nulla. Etiam vel diam vel felis dignissim luctus. Integer bibendum fringilla justo, vitae facilisis eros convallis vel. Sed ac tellus vel dui finibus pellentesque.
Nullam id elit eu urna ullamcorper bibendum. Sed nec ex nec lectus finibus bibendum ac eget nunc. Vivamus eu dolor vel sem lacinia vestibulum. In hac habitasse platea dictumst. Curabitur sit amet augue nec velit eleifend lobortis. </Typography>

<Typography variant="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat est velit egestas dui id ornare arcu. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Consectetur libero id faucibus nisl. Metus aliquam eleifend mi in nulla. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. In hac habitasse platea dictumst quisque sagittis purus. Dictumst quisque sagittis purus sit amet. Amet dictum sit amet justo donec enim diam vulputate ut. Commodo ullamcorper a lacus vestibulum sed. At varius vel pharetra vel turpis. Cras ornare arcu dui vivamus arcu felis bibendum. Vitae proin sagittis nisl rhoncus mattis. Condimentum id venenatis a condimentum <Link href="/">vitae sapien</Link>. Integer vitae justo eget magna fermentum.
</Typography>
<Button href="/example" color="secondary">
Congue nisi
</Button>
<Button href="/example" color="primary">
Tincidunt arcu
</Button>
<Typography variant="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat est velit egestas dui id ornare arcu. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Consectetur libero id faucibus nisl. Metus aliquam eleifend mi in nulla. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. In hac habitasse platea dictumst quisque sagittis purus. Dictumst quisque sagittis purus sit amet. Amet dictum sit amet justo donec enim diam vulputate ut. Commodo ullamcorper a lacus vestibulum sed. At varius vel pharetra vel turpis. Cras ornare arcu dui vivamus arcu felis bibendum. Vitae proin sagittis nisl rhoncus mattis. Condimentum id venenatis a condimentum <Link href="/">vitae sapien</Link>. Integer vitae justo eget magna fermentum.
</Typography>
<Button href="/example" color="secondary">
Congue nisi
</Button>
<Button href="/example" color="primary">
Tincidunt arcu <FontAwesomeIcon icon={faArrowRight}/>
</Button>
</Paper>
</div>

<PageFooter siteOwner='Cats Cradle' links={[
{url: 'https://example.com', label: 'Lobortis scelerisque'},
{url: 'https://example.com', label: 'Lorem ipsum dolor'},
Expand Down
Loading