From 8140c106b0dacf9439d286adc4ce8c281f5f32a8 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Mon, 17 Jun 2024 22:49:38 +0200 Subject: [PATCH 01/17] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20Bump=20package=20ver?= =?UTF-8?q?sion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a51a021..6573fc1 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "webcoreui", "type": "module", - "version": "0.0.6", + "version": "0.0.7", "scripts": { "dev": "astro dev", "build": "astro check && astro build", From fa050db727e87eda898fd307fe8541fe8e9c0e1b Mon Sep 17 00:00:00 2001 From: Frontendland Date: Mon, 17 Jun 2024 23:05:39 +0200 Subject: [PATCH 02/17] =?UTF-8?q?=F0=9F=90=9B=20Use=20CSS=20imports=20to?= =?UTF-8?q?=20fix=20svg=20icons?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Accordion/Accordion.astro | 5 +---- src/components/Accordion/Accordion.svelte | 5 +---- src/pages/accordion.astro | 2 +- 3 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/components/Accordion/Accordion.astro b/src/components/Accordion/Accordion.astro index 87820ad..76d1ca8 100644 --- a/src/components/Accordion/Accordion.astro +++ b/src/components/Accordion/Accordion.astro @@ -1,6 +1,7 @@ --- import type { AccordionProps } from './accordion' import ArrowDown from '../../icons/arrow-down.svg?raw' +import './accordion.scss' interface Props extends AccordionProps {} @@ -38,7 +39,3 @@ const { }) }) - - diff --git a/src/components/Accordion/Accordion.svelte b/src/components/Accordion/Accordion.svelte index 98fa12e..8564db5 100644 --- a/src/components/Accordion/Accordion.svelte +++ b/src/components/Accordion/Accordion.svelte @@ -1,6 +1,7 @@ + +{#if Array.isArray(img)} +
+ {#each img as img, index} + {Array.isArray(alt) + {/each} +
+{:else} + {Array.isArray(alt) +{/if} diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index dcf138c..74e5ed9 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -1,3 +1,63 @@ -const Avatar = () => {} +import React from 'react' +import type { AvatarProps } from './avatar' +import './avatar.scss' + +const Avatar = ({ + img, + alt = 'Avatar', + size = 40, + lazy = true, + borderColor, + borderless, + reverse, + className, +}: AvatarProps) => { + const classes = [ + 'w-avatar', + borderless && 'borderless', + className + ].filter(Boolean).join(' ') + + const groupStyles = [ + 'w-avatar-group', + reverse && 'reverse' + ].filter(Boolean).join(' ') + + const borderColorStyle = borderColor + ? { '--w-avatar-border': borderColor } as React.CSSProperties + : undefined + + return Array.isArray(img) ? ( +
+ {img.map((img, index) => ( + {Array.isArray(alt) + ))} +
+ ) : ( + {Array.isArray(alt) + ) + +} export default Avatar diff --git a/src/pages/avatar.astro b/src/pages/avatar.astro index 3f22445..8272c67 100644 --- a/src/pages/avatar.astro +++ b/src/pages/avatar.astro @@ -3,22 +3,22 @@ import Layout from '@static/Layout.astro' import ComponentWrapper from '@static/ComponentWrapper.astro' import AstroAvatar from '@components/Avatar/Avatar.astro' -import SvelteBadge from '@components/Badge/Badge.svelte' -import ReactBadge from '@components/Badge/Badge.tsx' +import SvelteAvatar from '@components/Avatar/Avatar.svelte' +import ReactAvatar from '@components/Avatar/Avatar.tsx' const sections = [ { title: 'Astro avatars', component: AstroAvatar }, - // { - // title: 'Svelte avatars', - // component: SvelteBadge - // }, - // { - // title: 'React avatars', - // component: ReactBadge - // } + { + title: 'Svelte avatars', + component: SvelteAvatar + }, + { + title: 'React avatars', + component: ReactAvatar + } ] const group = [ @@ -34,19 +34,19 @@ const group = [

Avatar

- + - + Badge in Svelte - + - + Badge in React - +
diff --git a/src/pages/index.astro b/src/pages/index.astro index 5a9c240..0a4f180 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -49,7 +49,16 @@ import Icon from '@components/Icon/Icon.astro' You can create alert boxes. - + Badge @@ -62,7 +71,31 @@ import Icon from '@components/Icon/Icon.astro'

Paragraph inside a card

 - + + + + + From 95d4b422c287dd4c0927f72c49db0c1ccd701216 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Tue, 18 Jun 2024 15:50:03 +0200 Subject: [PATCH 07/17] =?UTF-8?q?=F0=9F=8F=B7=EF=B8=8F=20Improve=20compone?= =?UTF-8?q?nt=20types?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Alert/Alert.tsx | 9 ++++++++- src/components/Alert/alert.ts | 1 - src/components/Badge/Badge.tsx | 6 +++++- src/components/Badge/badge.ts | 1 - src/components/Button/Button.tsx | 6 +++++- src/components/Button/button.ts | 2 +- src/components/Card/Card.tsx | 8 +++++++- src/components/Card/card.ts | 1 - 8 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index b34fada..52e43a6 100644 --- a/src/components/Alert/Alert.tsx +++ b/src/components/Alert/Alert.tsx @@ -16,6 +16,13 @@ const iconMap = { alert } +type ReactAlertProps = { + Element?: keyof JSX.IntrinsicElements + TitleTag?: keyof JSX.IntrinsicElements + children: React.ReactNode + icon?: string +} + const Alert = ({ Element = 'section', title, @@ -25,7 +32,7 @@ const Alert = ({ children, icon, ...rest -}: AlertProps & { icon?: any }) => { +}: AlertProps & ReactAlertProps) => { const classes = [ 'w-alert', (!icon && !theme) && 'col', diff --git a/src/components/Alert/alert.ts b/src/components/Alert/alert.ts index 5b87fac..d76a8af 100644 --- a/src/components/Alert/alert.ts +++ b/src/components/Alert/alert.ts @@ -9,5 +9,4 @@ export type AlertProps = { | 'warning' | 'alert' | null - [key: string]: any } diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 0703653..d30722f 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -2,7 +2,11 @@ import React from 'react' import type { BadgeProps } from './badge' import './badge.scss' -const Badge = ({ theme, onClick, children }: BadgeProps) => { +type ReactBadgeProps = { + children: React.ReactNode +} & BadgeProps + +const Badge = ({ theme, onClick, children }: ReactBadgeProps) => { const classes = [ 'w-badge', theme || null, diff --git a/src/components/Badge/badge.ts b/src/components/Badge/badge.ts index f85feba..fe737b2 100644 --- a/src/components/Badge/badge.ts +++ b/src/components/Badge/badge.ts @@ -8,5 +8,4 @@ export type BadgeProps = { | 'alert' | null onClick?: () => any - [key: string]: any } diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 4522d56..ef56a45 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -2,6 +2,10 @@ import React from 'react' import type { ButtonProps } from './button' import './button.scss' +type ReactButtonProps = { + children: React.ReactNode +} + const Button = ({ theme, bold, @@ -9,7 +13,7 @@ const Button = ({ children, onClick, ...rest -}: ButtonProps) => { +}: ButtonProps & ReactButtonProps) => { const classes = [ 'w-button', bold && 'bold', diff --git a/src/components/Button/button.ts b/src/components/Button/button.ts index a06a896..9b9fb42 100644 --- a/src/components/Button/button.ts +++ b/src/components/Button/button.ts @@ -9,6 +9,6 @@ export type ButtonProps = { | null bold?: boolean href?: string + target?: string onClick?: () => any - [key: string]: any } diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 55d7818..38a0bf7 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -2,6 +2,12 @@ import React from 'react' import type { CardProps } from './card' import './card.scss' +type ReactCardProps = { + Element?: keyof JSX.IntrinsicElements + TitleTag?: keyof JSX.IntrinsicElements + children: React.ReactNode +} + const Card = ({ Element = 'section', title, @@ -11,7 +17,7 @@ const Card = ({ secondary, children, ...rest -}: CardProps) => { +}: CardProps & ReactCardProps) => { const classes = [ 'w-card', className, diff --git a/src/components/Card/card.ts b/src/components/Card/card.ts index c489b6a..9941ac2 100644 --- a/src/components/Card/card.ts +++ b/src/components/Card/card.ts @@ -4,5 +4,4 @@ export type CardProps = { compact?: boolean className?: string secondary?: boolean - [key: string]: any } From d9a8138aa7569d659613f6cf1b32a04577979a32 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Tue, 18 Jun 2024 17:22:08 +0200 Subject: [PATCH 08/17] =?UTF-8?q?=E2=9C=A8=20Add=20rating=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/Card.astro | 2 +- src/components/Card/card.ts | 1 + src/components/Rating/Rating.astro | 66 ++++++++++++++ src/components/Rating/Rating.svelte | 0 src/components/Rating/Rating.tsx | 6 ++ src/components/Rating/rating.scss | 37 ++++++++ src/components/Rating/rating.ts | 16 ++++ src/pages/index.astro | 4 + src/pages/rating.astro | 128 ++++++++++++++++++++++++++++ src/scss/setup.scss | 3 + 10 files changed, 262 insertions(+), 1 deletion(-) create mode 100644 src/components/Rating/Rating.astro create mode 100644 src/components/Rating/Rating.svelte create mode 100644 src/components/Rating/Rating.tsx create mode 100644 src/components/Rating/rating.scss create mode 100644 src/components/Rating/rating.ts create mode 100644 src/pages/rating.astro diff --git a/src/components/Card/Card.astro b/src/components/Card/Card.astro index 925dfda..22ff0b5 100644 --- a/src/components/Card/Card.astro +++ b/src/components/Card/Card.astro @@ -30,7 +30,7 @@ const Title = titleTag {title && ( - {title} + {title} )}
{compact && !secondary ? ( diff --git a/src/components/Card/card.ts b/src/components/Card/card.ts index 9941ac2..590158c 100644 --- a/src/components/Card/card.ts +++ b/src/components/Card/card.ts @@ -1,6 +1,7 @@ export type CardProps = { element?: string title?: string + titleTag?: string compact?: boolean className?: string secondary?: boolean diff --git a/src/components/Rating/Rating.astro b/src/components/Rating/Rating.astro new file mode 100644 index 0000000..0f8f0bf --- /dev/null +++ b/src/components/Rating/Rating.astro @@ -0,0 +1,66 @@ +--- +import type { RatingProps } from './rating' +import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro' + +import './rating.scss' + +interface Props extends RatingProps {} + +const { + score, + total = 5, + showText, + text = '{0} out of {1}', + showEmpty = true, + outline = true, + reviewCount, + reviewText = '{0} reviews', + reviewLink, + reviewTarget, + color, + emptyColor, + size, + className +} = Astro.props + +const classes = [ + 'w-rating', + outline && 'outline', + className +] + +const styles = [ + color && `--w-rating-color: ${color};`, + size && `--w-rating-size: ${size}px;`, + emptyColor && `--w-rating-empty-color: ${emptyColor};` +].filter(Boolean).join(' ') + +const translatedText = text + .replace('{0}', `${score}`) + .replace('{1}', `${total}`) + +const translatedReviewText = reviewText.replace('{0}', `${reviewCount}`) +--- + + + {Array(score).fill('★').join('')} + {showEmpty && ( + + {Array(total - score).fill('★').join('')} + + )} + {showText && ( + + {translatedText} + + )} + {reviewCount && '•'} + {reviewCount && ( + + + children + + {translatedReviewText} + + )} + diff --git a/src/components/Rating/Rating.svelte b/src/components/Rating/Rating.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Rating/Rating.tsx b/src/components/Rating/Rating.tsx new file mode 100644 index 0000000..a9425b4 --- /dev/null +++ b/src/components/Rating/Rating.tsx @@ -0,0 +1,6 @@ +import React from 'react' +import type { RatingProps } from './rating' + +const Rating = ({}: RatingProps) =>
rating
+ +export default Rating diff --git a/src/components/Rating/rating.scss b/src/components/Rating/rating.scss new file mode 100644 index 0000000..da2e80c --- /dev/null +++ b/src/components/Rating/rating.scss @@ -0,0 +1,37 @@ +@import '../../scss/config.scss'; + +.w-rating { + display: inline-flex; + align-items: center; + color: var(--w-rating-color); + font-size: var(--w-rating-size); + + &.outline .empty { + transform: scale(.88); + color: black; + text-shadow: -1px 0 var(--w-rating-color), 0 1px var(--w-rating-color), 1px 0 var(--w-rating-color), 0 -1px var(--w-rating-color); + letter-spacing: 2px; + } + + .empty { + color: var(--w-rating-empty-color); + + &.ten-star { + margin-left: -3px; + } + } + + a { + text-decoration: underline; + } + + .text { + font-size: 16px; + color: #BBB; + margin-left: 5px; + + &.m { + margin-right: 5px; + } + } +} diff --git a/src/components/Rating/rating.ts b/src/components/Rating/rating.ts new file mode 100644 index 0000000..b5af3d3 --- /dev/null +++ b/src/components/Rating/rating.ts @@ -0,0 +1,16 @@ +export type RatingProps = { + score: number + total?: number + showText?: boolean + text?: string + showEmpty?: boolean + outline?: boolean + reviewCount?: number + reviewText?: string + reviewLink?: string + reviewTarget?: string + color?: string + emptyColor?: string + size?: number + className?: string +} diff --git a/src/pages/index.astro b/src/pages/index.astro index 0a4f180..aafab8c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -8,6 +8,7 @@ import Avatar from '@components/Avatar/Avatar.astro' import Badge from '@components/Badge/Badge.astro' import Button from '@components/Button/Button.astro' import Icon from '@components/Icon/Icon.astro' +import Rating from '@components/Rating/Rating.astro' --- @@ -97,6 +98,9 @@ import Icon from '@components/Icon/Icon.astro' color="#f2c262" /> + + +
diff --git a/src/pages/rating.astro b/src/pages/rating.astro new file mode 100644 index 0000000..fb637d8 --- /dev/null +++ b/src/pages/rating.astro @@ -0,0 +1,128 @@ +--- +import Layout from '@static/Layout.astro' +import ComponentWrapper from '@static/ComponentWrapper.astro' + +import AstroRating from '@components/Rating/Rating.astro' +import SvelteRating from '@components/Rating/Rating.svelte' +import ReactRating from '@components/Rating/Rating.tsx' + +const sections = [ + { + title: 'Astro ratings', + component: AstroRating + }, + { + title: 'Svelte ratings', + component: SvelteRating + }, + { + title: 'React ratings', + component: ReactRating + } +] +--- + + +

Rating

+
+ + + +
+ + {sections.map(section => ( +

{section.title}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ))} + diff --git a/src/scss/setup.scss b/src/scss/setup.scss index 3ec0f59..6978ff4 100644 --- a/src/scss/setup.scss +++ b/src/scss/setup.scss @@ -8,6 +8,9 @@ $config: ( :root { --w-avatar-border: #000; + --w-rating-color: #FFF; + --w-rating-empty-color: #BBB; + --w-rating-size: 18px; } @function config($key) { From ce803dd04f7aaa3fa2c30a6ead23270553f64d58 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Tue, 18 Jun 2024 17:26:24 +0200 Subject: [PATCH 09/17] =?UTF-8?q?=F0=9F=93=9D=20Extend=20README?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 5737cfe..ea9f960 100644 --- a/README.md +++ b/README.md @@ -108,6 +108,18 @@ The `Setup` mixin can also accept the following options: |-----------|---------------|---------| | `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. | | `includeHelperClasses` | `true` | Adds global helper classes for CSS. All global helper classes are defined [here](https://github.com/Frontendland/webcoreui/tree/main/src/scss/global). | +| `includeElementStyles` | `true` | Adds styles for native HTML elements, such as `code`, `pre`, or `ul`. + +Default component styles can also be changed by overriding the following CSS variables: + +```css +:root { + --w-avatar-border: #000; + --w-rating-color: #FFF; + --w-rating-empty-color: #BBB; + --w-rating-size: 18px; +} +``` ### Using Components @@ -133,8 +145,10 @@ import { Accordion } from 'webcoreui/react' - [Accordion](https://github.com/Frontendland/webcoreui/tree/main/src/components/Accordion) - [Alert](https://github.com/Frontendland/webcoreui/tree/main/src/components/Alert) -- [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper) +- [Avatar](https://github.com/Frontendland/webcoreui/tree/main/src/components/Avatar) - [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge) - [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button) - [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card) +- [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper) - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon) +- [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating) From cdaf9edf57c0b4905dcaa967393836c5e39889d0 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Wed, 19 Jun 2024 15:37:22 +0200 Subject: [PATCH 10/17] =?UTF-8?q?=E2=9C=A8=20Add=20Rating=20components=20f?= =?UTF-8?q?or=20Svelte=20&=20React?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Rating/Rating.svelte | 70 +++++++++++++++++++++++++++++ src/components/Rating/Rating.tsx | 63 +++++++++++++++++++++++++- src/pages/rating.astro | 18 +++++--- 3 files changed, 145 insertions(+), 6 deletions(-) diff --git a/src/components/Rating/Rating.svelte b/src/components/Rating/Rating.svelte index e69de29..646a4e9 100644 --- a/src/components/Rating/Rating.svelte +++ b/src/components/Rating/Rating.svelte @@ -0,0 +1,70 @@ + + + + + {Array(score).fill('★').join('')} + {#if showEmpty} + + {Array((total || 5) - score).fill('★').join('')} + + {/if} + + {#if showText} + + {translatedText} + + {/if} + + {#if reviewCount} + {'•'} + + {translatedReviewText} + + {/if} + diff --git a/src/components/Rating/Rating.tsx b/src/components/Rating/Rating.tsx index a9425b4..ae4c14a 100644 --- a/src/components/Rating/Rating.tsx +++ b/src/components/Rating/Rating.tsx @@ -1,6 +1,67 @@ import React from 'react' import type { RatingProps } from './rating' +import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx' +import './rating.scss' -const Rating = ({}: RatingProps) =>
rating
+const Rating = ({ + score, + total = 5, + showText, + text = '{0} out of {1}', + showEmpty = true, + outline = true, + reviewCount, + reviewText = '{0} reviews', + reviewLink, + reviewTarget, + color, + emptyColor, + size, + className +}: RatingProps) => { + const classes = [ + 'w-rating', + outline && 'outline', + className + ].filter(Boolean).join(' ') + + const styles = { + ...(color && { '--w-rating-color': color }), + ...(size && { '--w-rating-size': `${size}px` }), + ...(emptyColor && { '--w-rating-empty-color': emptyColor }) + } as React.CSSProperties + + const translatedText = text + .replace('{0}', `${score}`) + .replace('{1}', `${total}`) + + const translatedReviewText = reviewText.replace('{0}', `${reviewCount}`) + + return ( + + {Array(score).fill('★').join('')} + {showEmpty && ( + + {Array(total - score).fill('★').join('')} + + )} + {showText && ( + + {translatedText} + + )} + {reviewCount && '•'} + {reviewCount && ( + ( + + {children} + + )}> + {translatedReviewText} + + )} + + ) +} export default Rating diff --git a/src/pages/rating.astro b/src/pages/rating.astro index fb637d8..edec679 100644 --- a/src/pages/rating.astro +++ b/src/pages/rating.astro @@ -25,9 +25,17 @@ const sections = [

Rating

- - - + + + + + + + + + + +
{sections.map(section => ( @@ -82,7 +90,7 @@ const sections = [ - + - + Date: Wed, 19 Jun 2024 17:31:04 +0200 Subject: [PATCH 11/17] =?UTF-8?q?=E2=9C=A8=20Add=20Switch=20component=20fo?= =?UTF-8?q?r=20Astro?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Switch/Switch.astro | 38 ++++++++++++ src/components/Switch/Switch.svelte | 0 src/components/Switch/Switch.tsx | 15 +++++ src/components/Switch/switch.scss | 84 ++++++++++++++++++++++++++ src/components/Switch/switch.ts | 11 ++++ src/pages/index.astro | 5 ++ src/pages/switch.astro | 94 +++++++++++++++++++++++++++++ src/scss/setup.scss | 2 + 8 files changed, 249 insertions(+) create mode 100644 src/components/Switch/Switch.astro create mode 100644 src/components/Switch/Switch.svelte create mode 100644 src/components/Switch/Switch.tsx create mode 100644 src/components/Switch/switch.scss create mode 100644 src/components/Switch/switch.ts create mode 100644 src/pages/switch.astro diff --git a/src/components/Switch/Switch.astro b/src/components/Switch/Switch.astro new file mode 100644 index 0000000..9a8e153 --- /dev/null +++ b/src/components/Switch/Switch.astro @@ -0,0 +1,38 @@ +--- +import type { SwitchProps } from './switch' +import './switch.scss' + +interface Props extends SwitchProps {} + +const { + label, + toggled, + offColor, + onColor, + reverse, + small, + square, + disabled, + className +} = Astro.props + +const classes = [ + 'w-switch', + reverse && 'reverse', + small && 'small', + square && 'square', + disabled && 'disabled', + className +] + +const styles = [ + offColor && `--w-switch-off-color: ${offColor};`, + onColor && `--w-switch-on-color: ${onColor};` +].filter(Boolean).join(' ') +--- + + diff --git a/src/components/Switch/Switch.svelte b/src/components/Switch/Switch.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx new file mode 100644 index 0000000..2898497 --- /dev/null +++ b/src/components/Switch/Switch.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import type { SwitchProps } from './switch' +import './switch.scss' + +const Switch = ({ + +}: SwitchProps) => { + + + return ( +
switch
+ ) +} + +export default Switch diff --git a/src/components/Switch/switch.scss b/src/components/Switch/switch.scss new file mode 100644 index 0000000..29249d2 --- /dev/null +++ b/src/components/Switch/switch.scss @@ -0,0 +1,84 @@ +@import '../../scss/config.scss'; + +.w-switch { + display: inline-flex; + align-items: center; + gap: 10px; + cursor: pointer; + + &.reverse { + flex-direction: row-reverse; + } + + &.disabled .toggle { + cursor: no-drop; + background: #333; + + &::before { + background: #252525; + } + } + + &.small { + input:checked + span::before { + transform: translateX(20px); + } + + .toggle { + width: 40px; + height: 20px; + + &::before { + height: 14px; + width: 14px; + } + } + + .label { + font-size: 14px; + } + } + + &.square .toggle { + border-radius: 5px; + + &::before { + border-radius: 5px; + } + } + + input { + display: none; + + &:checked + span { + background-color: var(--w-switch-on-color); + + &::before { + transform: translateX(30px); + } + } + } + + .toggle { + @include Transition(background); + position: relative; + width: 60px; + height: 30px; + background: var(--w-switch-off-color); + border-radius: 30px; + + &::before { + content: ""; + position: absolute; + height: 24px; + width: 24px; + left: 3px; + bottom: 3px; + background: #000; + border-radius: 50%; + transition: 0.3s; + } + } +} + + diff --git a/src/components/Switch/switch.ts b/src/components/Switch/switch.ts new file mode 100644 index 0000000..9706b4e --- /dev/null +++ b/src/components/Switch/switch.ts @@ -0,0 +1,11 @@ +export type SwitchProps = { + label?: string + toggled?: boolean + offColor?: string + onColor?: string + reverse?: boolean + small?: boolean + square?: boolean + disabled?: boolean + className?: string +} diff --git a/src/pages/index.astro b/src/pages/index.astro index aafab8c..eadbbe0 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -9,6 +9,7 @@ import Badge from '@components/Badge/Badge.astro' import Button from '@components/Button/Button.astro' import Icon from '@components/Icon/Icon.astro' import Rating from '@components/Rating/Rating.astro' +import Switch from '@components/Switch/Switch.astro' --- @@ -101,6 +102,10 @@ import Rating from '@components/Rating/Rating.astro' + + + + diff --git a/src/pages/switch.astro b/src/pages/switch.astro new file mode 100644 index 0000000..30e4230 --- /dev/null +++ b/src/pages/switch.astro @@ -0,0 +1,94 @@ +--- +import Layout from '@static/Layout.astro' +import ComponentWrapper from '@static/ComponentWrapper.astro' + +import AstroSwitch from '@components/Switch/Switch.astro' +import SvelteSwitch from '@components/Switch/Switch.svelte' +import ReactSwitch from '@components/Switch/Switch.tsx' + +const sections = [ + { + title: 'Astro ratings', + component: AstroSwitch + }, + { + title: 'Svelte ratings', + component: SvelteSwitch + }, + { + title: 'React ratings', + component: ReactSwitch + } +] +--- + + +

Switch

+
+ + + + + + + + + + + +
+ + {sections.map(section => ( +

{section.title}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ))} + diff --git a/src/scss/setup.scss b/src/scss/setup.scss index 6978ff4..c16e36b 100644 --- a/src/scss/setup.scss +++ b/src/scss/setup.scss @@ -11,6 +11,8 @@ $config: ( --w-rating-color: #FFF; --w-rating-empty-color: #BBB; --w-rating-size: 18px; + --w-switch-off-color: #252525; + --w-switch-on-color: #FFF; } @function config($key) { From 957534a4057237b2eb5cc59b34155fcf1b3971c0 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Wed, 19 Jun 2024 19:08:25 +0200 Subject: [PATCH 12/17] =?UTF-8?q?=E2=9C=A8=20Add=20Switch=20component=20fo?= =?UTF-8?q?r=20Svelte=20&=20React?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 3 ++- src/components/Switch/Switch.svelte | 37 +++++++++++++++++++++++++++++ src/components/Switch/Switch.tsx | 36 +++++++++++++++++++++++++--- src/pages/switch.astro | 4 ++-- svelte.config.js | 1 + 5 files changed, 75 insertions(+), 6 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 192798b..ac20139 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,7 @@ { "svelte.plugin.svelte.compilerWarnings": { "a11y-click-events-have-key-events": "ignore", - "a11y-no-static-element-interactions": "ignore" + "a11y-no-static-element-interactions": "ignore", + "a11y-no-noninteractive-element-interactions": "ignore" } } diff --git a/src/components/Switch/Switch.svelte b/src/components/Switch/Switch.svelte index e69de29..554fd9f 100644 --- a/src/components/Switch/Switch.svelte +++ b/src/components/Switch/Switch.svelte @@ -0,0 +1,37 @@ + + + diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx index 2898497..f592203 100644 --- a/src/components/Switch/Switch.tsx +++ b/src/components/Switch/Switch.tsx @@ -2,14 +2,44 @@ import React from 'react' import type { SwitchProps } from './switch' import './switch.scss' +type ReactSwitchProps = { + onClick: () => any +} & SwitchProps + const Switch = ({ - -}: SwitchProps) => { + label, + toggled, + offColor, + onColor, + reverse, + small, + square, + disabled, + className, + onClick +}: ReactSwitchProps) => { + const classes = [ + 'w-switch', + reverse && 'reverse', + small && 'small', + square && 'square', + disabled && 'disabled', + className + ].filter(Boolean).join(' ') + const styles = { + ...(offColor && { '--w-switch-off-color': offColor }), + ...(onColor && { '--w-switch-on-color': onColor }) + } as React.CSSProperties return ( -
switch
+ ) + } export default Switch diff --git a/src/pages/switch.astro b/src/pages/switch.astro index 30e4230..f9e14aa 100644 --- a/src/pages/switch.astro +++ b/src/pages/switch.astro @@ -30,11 +30,11 @@ const sections = [ - + - + diff --git a/svelte.config.js b/svelte.config.js index a087de8..9462eb0 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -8,6 +8,7 @@ export default { const ignoreWarnings = [ 'a11y-click-events-have-key-events', 'a11y-no-static-element-interactions', + 'a11y-no-noninteractive-element-interactions', '.accordion-title' ] From 03f4fa7008a0124dc9c6cd266b886d737848a4b4 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Thu, 20 Jun 2024 11:22:14 +0200 Subject: [PATCH 13/17] =?UTF-8?q?=E2=9C=A8=20Add=20checkbox=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Alert/Alert.astro | 2 +- src/components/Alert/Alert.svelte | 2 +- src/components/Alert/Alert.tsx | 6 +- src/components/Button/Button.tsx | 4 +- src/components/Card/Card.tsx | 4 +- src/components/Checkbox/Checkbox.astro | 47 +++++++++++++ src/components/Checkbox/Checkbox.svelte | 47 +++++++++++++ src/components/Checkbox/Checkbox.tsx | 65 ++++++++++++++++++ src/components/Checkbox/checkbox.scss | 75 +++++++++++++++++++++ src/components/Checkbox/checkbox.ts | 8 +++ src/components/Switch/Switch.tsx | 2 +- src/icons/check.svg | 3 +- src/icons/circle-check.svg | 4 ++ src/pages/checkbox.astro | 88 +++++++++++++++++++++++++ src/pages/index.astro | 4 ++ src/scss/setup.scss | 1 + 16 files changed, 350 insertions(+), 12 deletions(-) create mode 100644 src/components/Checkbox/Checkbox.astro create mode 100644 src/components/Checkbox/Checkbox.svelte create mode 100644 src/components/Checkbox/Checkbox.tsx create mode 100644 src/components/Checkbox/checkbox.scss create mode 100644 src/components/Checkbox/checkbox.ts create mode 100644 src/icons/circle-check.svg create mode 100644 src/pages/checkbox.astro diff --git a/src/components/Alert/Alert.astro b/src/components/Alert/Alert.astro index 8e9773a..f4e571a 100644 --- a/src/components/Alert/Alert.astro +++ b/src/components/Alert/Alert.astro @@ -3,7 +3,7 @@ import type { AlertProps } from './alert' import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro' import info from '../../icons/info.svg?raw' -import success from '../../icons/check.svg?raw' +import success from '../../icons/circle-check.svg?raw' import warning from '../../icons/warning.svg?raw' import alert from '../../icons/alert.svg?raw' diff --git a/src/components/Alert/Alert.svelte b/src/components/Alert/Alert.svelte index 01c91a2..1630db1 100644 --- a/src/components/Alert/Alert.svelte +++ b/src/components/Alert/Alert.svelte @@ -3,7 +3,7 @@ import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.svelte' import info from '../../icons/info.svg?raw' - import success from '../../icons/check.svg?raw' + import success from '../../icons/circle-check.svg?raw' import warning from '../../icons/warning.svg?raw' import alert from '../../icons/alert.svg?raw' diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index 52e43a6..bdc0a76 100644 --- a/src/components/Alert/Alert.tsx +++ b/src/components/Alert/Alert.tsx @@ -3,7 +3,7 @@ import type { AlertProps } from './alert' import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx' import info from '../../icons/info.svg?raw' -import success from '../../icons/check.svg?raw' +import success from '../../icons/circle-check.svg?raw' import warning from '../../icons/warning.svg?raw' import alert from '../../icons/alert.svg?raw' @@ -21,7 +21,7 @@ type ReactAlertProps = { TitleTag?: keyof JSX.IntrinsicElements children: React.ReactNode icon?: string -} +} & AlertProps const Alert = ({ Element = 'section', @@ -32,7 +32,7 @@ const Alert = ({ children, icon, ...rest -}: AlertProps & ReactAlertProps) => { +}: ReactAlertProps) => { const classes = [ 'w-alert', (!icon && !theme) && 'col', diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index ef56a45..497eb76 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -4,7 +4,7 @@ import './button.scss' type ReactButtonProps = { children: React.ReactNode -} +} & ButtonProps const Button = ({ theme, @@ -13,7 +13,7 @@ const Button = ({ children, onClick, ...rest -}: ButtonProps & ReactButtonProps) => { +}: ReactButtonProps) => { const classes = [ 'w-button', bold && 'bold', diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 38a0bf7..25f10dc 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -6,7 +6,7 @@ type ReactCardProps = { Element?: keyof JSX.IntrinsicElements TitleTag?: keyof JSX.IntrinsicElements children: React.ReactNode -} +} & CardProps const Card = ({ Element = 'section', @@ -17,7 +17,7 @@ const Card = ({ secondary, children, ...rest -}: CardProps & ReactCardProps) => { +}: ReactCardProps) => { const classes = [ 'w-card', className, diff --git a/src/components/Checkbox/Checkbox.astro b/src/components/Checkbox/Checkbox.astro new file mode 100644 index 0000000..48aa3f1 --- /dev/null +++ b/src/components/Checkbox/Checkbox.astro @@ -0,0 +1,47 @@ +--- +import type { CheckboxProps } from './checkbox' +import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro' + +import check from '../../icons/check.svg?raw' + +import './checkbox.scss' + +interface Props extends CheckboxProps {} + +const { + checked, + label, + subText, + disabled, + boxed, + color +} = Astro.props + +const classes = [ + 'w-checkbox', + boxed && 'boxed', + label && subText && 'col' +] + +const style = color + ? `--w-checkbox-color: ${color};` + : null +--- + + diff --git a/src/components/Checkbox/Checkbox.svelte b/src/components/Checkbox/Checkbox.svelte new file mode 100644 index 0000000..c866547 --- /dev/null +++ b/src/components/Checkbox/Checkbox.svelte @@ -0,0 +1,47 @@ + + + diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx new file mode 100644 index 0000000..bfcabf7 --- /dev/null +++ b/src/components/Checkbox/Checkbox.tsx @@ -0,0 +1,65 @@ +import React from 'react' +import type { CheckboxProps } from './checkbox' +import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx' + +import check from '../../icons/check.svg?raw' + +import './checkbox.scss' + +type ReactCheckboxProps = { + onClick?: () => any +} & CheckboxProps + +const Checkbox = ({ + checked, + label, + subText, + disabled, + boxed, + color, + onClick +}: ReactCheckboxProps) => { + const classes = [ + 'w-checkbox', + boxed && 'boxed', + label && subText && 'col' + ].filter(Boolean).join(' ') + + const style = color + ? { '--w-checkbox-color': color } as React.CSSProperties + : undefined + + return ( + + ) +} + +export default Checkbox diff --git a/src/components/Checkbox/checkbox.scss b/src/components/Checkbox/checkbox.scss new file mode 100644 index 0000000..5e313f1 --- /dev/null +++ b/src/components/Checkbox/checkbox.scss @@ -0,0 +1,75 @@ +@import '../../scss/config.scss'; + +.w-checkbox { + cursor: pointer; + display: inline-flex; + align-items: center; + gap: 10px; + + &.col { + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + gap: 5px; + + .checkbox-wrapper { + display: flex; + align-items: center; + gap: 10px; + } + } + + &.boxed { + border: 1px solid #252525; + border-radius: 5px; + padding: 20px; + } + + input { + display: none; + + &:checked + span { + background-color: var(--w-checkbox-color); + + svg { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: block; + color: #252525; + width: 10px; + height: 10px; + } + } + + &:disabled + span { + background-color: #333; + border-color: #333; + cursor: no-drop; + } + } + + a { + text-decoration: underline; + } + + .check { + display: inline-block; + width: 15px; + height: 15px; + border: 1px solid var(--w-checkbox-color);; + border-radius: 2px; + position: relative; + + svg { + display: none; + } + } + + .sub-text { + margin-left: 25px; + font-size: 16px; + color: #BBB; + } +} diff --git a/src/components/Checkbox/checkbox.ts b/src/components/Checkbox/checkbox.ts new file mode 100644 index 0000000..51b073f --- /dev/null +++ b/src/components/Checkbox/checkbox.ts @@ -0,0 +1,8 @@ +export type CheckboxProps = { + checked?: boolean + label?: string + subText?: string + disabled?: boolean + boxed?: boolean + color?: string +} diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx index f592203..5a2569f 100644 --- a/src/components/Switch/Switch.tsx +++ b/src/components/Switch/Switch.tsx @@ -3,7 +3,7 @@ import type { SwitchProps } from './switch' import './switch.scss' type ReactSwitchProps = { - onClick: () => any + onClick?: () => any } & SwitchProps const Switch = ({ diff --git a/src/icons/check.svg b/src/icons/check.svg index f5a1876..5442e5a 100644 --- a/src/icons/check.svg +++ b/src/icons/check.svg @@ -1,4 +1,3 @@ - - + diff --git a/src/icons/circle-check.svg b/src/icons/circle-check.svg new file mode 100644 index 0000000..f5a1876 --- /dev/null +++ b/src/icons/circle-check.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/pages/checkbox.astro b/src/pages/checkbox.astro new file mode 100644 index 0000000..a592e4f --- /dev/null +++ b/src/pages/checkbox.astro @@ -0,0 +1,88 @@ +--- +import Layout from '@static/Layout.astro' +import ComponentWrapper from '@static/ComponentWrapper.astro' + +import AstroCheckbox from '@components/Checkbox/Checkbox.astro' +import SvelteCheckbox from '@components/Checkbox/Checkbox.svelte' +import ReactCheckbox from '@components/Checkbox/Checkbox.tsx' + +const sections = [ + { + title: 'Astro checkboxes', + component: AstroCheckbox + }, + { + title: 'Svelte checkboxes', + component: SvelteCheckbox + }, + { + title: 'React checkboxes', + component: ReactCheckbox + } +] +--- + + +

Checkbox

+
+ + + + + + + + + + + +
+ + {sections.map(section => ( +

{section.title}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ))} + diff --git a/src/pages/index.astro b/src/pages/index.astro index eadbbe0..a62fff0 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -10,6 +10,7 @@ import Button from '@components/Button/Button.astro' import Icon from '@components/Icon/Icon.astro' import Rating from '@components/Rating/Rating.astro' import Switch from '@components/Switch/Switch.astro' +import Checkbox from '@components/Checkbox/Checkbox.astro' --- @@ -72,6 +73,9 @@ import Switch from '@components/Switch/Switch.astro'

Paragraph inside a card

 + + + Date: Thu, 20 Jun 2024 13:25:24 +0200 Subject: [PATCH 14/17] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Add?= =?UTF-8?q?=20createComponent=20script?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +- scripts/createComponent.js | 147 +++++++++++++++++++++++++++++++++++++ 2 files changed, 149 insertions(+), 1 deletion(-) create mode 100644 scripts/createComponent.js diff --git a/package.json b/package.json index 23c94bc..9ab943e 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "dev": "astro dev", "build": "astro check && astro build", "build:package": "node scripts/build.js", - "test": "echo \"Error: no test specified\"" + "test": "echo \"Error: no test specified\"", + "create-component": "node scripts/createComponent.js" }, "dependencies": { "@astrojs/check": "0.7.0", diff --git a/scripts/createComponent.js b/scripts/createComponent.js new file mode 100644 index 0000000..0216063 --- /dev/null +++ b/scripts/createComponent.js @@ -0,0 +1,147 @@ +import fs from 'fs' + +const componentFlag = process.argv[2] + +if (!componentFlag) { + console.log("⚠️ Component name is missing. Use npm run create-component MyComponent.") + process.exit() +} + +const capitalize = string => string.charAt(0).toUpperCase() + string.slice(1) + +const component = capitalize(componentFlag) +const lowerCaseComponent = component.toLowerCase() +const rootPath = 'src/components' + +if (fs.existsSync(`${rootPath}/${component}`)) { + console.log(`⚠️ Component ${component} already exists. Please choose another name.`) + process.exit() +} + +const format = template => template.trim().replace(new RegExp('^[ \\t]{8}', 'gm'), '') + +const templates = { + astro: ` + --- + import type { ${component}Props } from './${lowerCaseComponent}' + import './${lowerCaseComponent}.scss' + + interface Props extends ${component}Props {} + + const { + className + } = Astro.props + + const classes = [ + 'w-${lowerCaseComponent}', + className + ] + --- + `, + svelte: ` + + `, + react: ` + import React from 'react' + import type { ${component}Props } from './${lowerCaseComponent}' + + import './${lowerCaseComponent}.scss' + + const ${component} = ({ + className + }: ${component}Props) => { + const classes = [ + 'w-${lowerCaseComponent}', + className + ].filter(Boolean).join(' ') + + return
${component}
+ } + + export default ${component} + `, + types: ` + export type ${component}Props = { + className?: string + } + `, + styles: ` + @import '../../scss/config.scss'; + + .w-${lowerCaseComponent} { + + } + `, + page: ` + --- + import Layout from '@static/Layout.astro' + import ComponentWrapper from '@static/ComponentWrapper.astro' + + import Astro${component} from '@components/${component}/${component}.astro' + import Svelte${component} from '@components/${component}/${component}.svelte' + import React${component} from '@components/${component}/${component}.tsx' + + const sections = [ + { + title: 'Astro ${lowerCaseComponent}s', + component: Astro${component} + }, + { + title: 'Svelte ${lowerCaseComponent}s', + component: Svelte${component} + }, + { + title: 'React ${lowerCaseComponent}s', + component: React${component} + } + ] + --- + + +

${component}

+
+ + + + + + + + + + + +
+ + {sections.map(section => ( +

{section.title}

+
+ + + +
+ ))} + + ` +} + +fs.mkdirSync(`${rootPath}/${component}`) + +fs.writeFileSync(`${rootPath}/${component}/${component}.astro`, format(templates.astro)) +fs.writeFileSync(`${rootPath}/${component}/${component}.svelte`, format(templates.svelte)) +fs.writeFileSync(`${rootPath}/${component}/${component}.tsx`, format(templates.react)) +fs.writeFileSync(`${rootPath}/${component}/${lowerCaseComponent}.ts`, format(templates.types)) +fs.writeFileSync(`${rootPath}/${component}/${lowerCaseComponent}.scss`, format(templates.styles)) +fs.writeFileSync(`src/pages/${lowerCaseComponent}.astro`, format(templates.page)) + +console.log(`✅ Component ${component} created at ${rootPath}/${component}.`) From f4d4f4744f3231191fbbfe8239876354de962823 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Thu, 20 Jun 2024 15:28:54 +0200 Subject: [PATCH 15/17] =?UTF-8?q?=E2=9C=A8=20Allows=20links=20in=20checkbo?= =?UTF-8?q?x=20subText?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Checkbox/Checkbox.astro | 6 +++++- src/components/Checkbox/Checkbox.svelte | 2 +- src/components/Checkbox/Checkbox.tsx | 5 ++++- src/components/Checkbox/checkbox.scss | 14 ++++++++++++-- 4 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/components/Checkbox/Checkbox.astro b/src/components/Checkbox/Checkbox.astro index 48aa3f1..46d9b51 100644 --- a/src/components/Checkbox/Checkbox.astro +++ b/src/components/Checkbox/Checkbox.astro @@ -43,5 +43,9 @@ const style = color )} - {label && subText && {subText}} + {label && subText && ( + + + + )} diff --git a/src/components/Checkbox/Checkbox.svelte b/src/components/Checkbox/Checkbox.svelte index c866547..966ccfe 100644 --- a/src/components/Checkbox/Checkbox.svelte +++ b/src/components/Checkbox/Checkbox.svelte @@ -42,6 +42,6 @@ {/if} {#if label && subText} - {subText} + {@html subText} {/if} diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index bfcabf7..5288d51 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -56,7 +56,10 @@ const Checkbox = ({ )} {label && subText && ( - {subText} + )} ) diff --git a/src/components/Checkbox/checkbox.scss b/src/components/Checkbox/checkbox.scss index 5e313f1..7072536 100644 --- a/src/components/Checkbox/checkbox.scss +++ b/src/components/Checkbox/checkbox.scss @@ -5,6 +5,7 @@ display: inline-flex; align-items: center; gap: 10px; + font-size: 16px; &.col { flex-direction: column; @@ -58,7 +59,7 @@ display: inline-block; width: 15px; height: 15px; - border: 1px solid var(--w-checkbox-color);; + border: 1px solid var(--w-checkbox-color); border-radius: 2px; position: relative; @@ -69,7 +70,16 @@ .sub-text { margin-left: 25px; - font-size: 16px; + font-size: 14px; color: #BBB; + + a { + @include Transition(color); + color: #BBB; + + &:hover { + color: #FFF; + } + } } } From 8661caba7e37c92969518c34e48a2f8d8a3141c4 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Thu, 20 Jun 2024 16:53:07 +0200 Subject: [PATCH 16/17] =?UTF-8?q?=E2=9C=A8=20Add=20radio=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 + src/components/Radio/Radio.astro | 56 ++++++++++++++ src/components/Radio/Radio.svelte | 55 +++++++++++++ src/components/Radio/Radio.tsx | 71 +++++++++++++++++ src/components/Radio/radio.scss | 92 ++++++++++++++++++++++ src/components/Radio/radio.ts | 12 +++ src/pages/checkbox.astro | 4 +- src/pages/index.astro | 10 ++- src/pages/radio.astro | 124 ++++++++++++++++++++++++++++++ src/scss/setup.scss | 1 + 10 files changed, 424 insertions(+), 4 deletions(-) create mode 100644 src/components/Radio/Radio.astro create mode 100644 src/components/Radio/Radio.svelte create mode 100644 src/components/Radio/Radio.tsx create mode 100644 src/components/Radio/radio.scss create mode 100644 src/components/Radio/radio.ts create mode 100644 src/pages/radio.astro diff --git a/README.md b/README.md index ea9f960..8a8a2b9 100644 --- a/README.md +++ b/README.md @@ -149,6 +149,9 @@ import { Accordion } from 'webcoreui/react' - [Badge](https://github.com/Frontendland/webcoreui/tree/main/src/components/Badge) - [Button](https://github.com/Frontendland/webcoreui/tree/main/src/components/Button) - [Card](https://github.com/Frontendland/webcoreui/tree/main/src/components/Card) +- [Checkbox](https://github.com/Frontendland/webcoreui/tree/main/src/components/Checkbox) - [ConditionalWrapper](https://github.com/Frontendland/webcoreui/tree/main/src/components/ConditionalWrapper) - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon) +- [Radio](https://github.com/Frontendland/webcoreui/tree/main/src/components/Radio) - [Rating](https://github.com/Frontendland/webcoreui/tree/main/src/components/Rating) +- [Switch](https://github.com/Frontendland/webcoreui/tree/main/src/components/Switch) diff --git a/src/components/Radio/Radio.astro b/src/components/Radio/Radio.astro new file mode 100644 index 0000000..94870a0 --- /dev/null +++ b/src/components/Radio/Radio.astro @@ -0,0 +1,56 @@ +--- +import type { RadioProps } from './radio' +import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.astro' + +import './radio.scss' + +interface Props extends RadioProps {} + +const { + name, + items, + color, + inline, + className +} = Astro.props + +const classes = [ + 'w-radio', + inline && 'inline', + className +] + +const style = color + ? `--w-radio-color: ${color};` + : null +--- + +
+ {items.map(item => ( + + ))} +
diff --git a/src/components/Radio/Radio.svelte b/src/components/Radio/Radio.svelte new file mode 100644 index 0000000..ad1f91c --- /dev/null +++ b/src/components/Radio/Radio.svelte @@ -0,0 +1,55 @@ + + +
+ {#each items as item} + + {/each} +
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx new file mode 100644 index 0000000..1d62574 --- /dev/null +++ b/src/components/Radio/Radio.tsx @@ -0,0 +1,71 @@ +import React from 'react' +import type { RadioProps } from './radio' + +import ConditionalWrapper from '../ConditionalWrapper/ConditionalWrapper.tsx' + +import './radio.scss' + +type ReactRadioProps = { + onChange?: () => any +} & RadioProps + +const Radio = ({ + name, + items, + color, + inline, + className, + onChange +}: ReactRadioProps) => { + const classes = [ + 'w-radio', + inline && 'inline', + className + ].filter(Boolean).join(' ') + + const style = color + ? { '--w-radio-color': color } as React.CSSProperties + : undefined + + return ( +
+ {items.map(item => ( + + ))} +
+ ) +} + +export default Radio + diff --git a/src/components/Radio/radio.scss b/src/components/Radio/radio.scss new file mode 100644 index 0000000..682f56d --- /dev/null +++ b/src/components/Radio/radio.scss @@ -0,0 +1,92 @@ +@import '../../scss/config.scss'; + +.w-radio { + display: flex; + flex-direction: column; + gap: 10px; + + &.inline { + flex-direction: row; + } + + label { + display: flex; + align-items: center; + gap: 5px; + cursor: pointer; + font-size: 16px; + + &.disabled { + cursor: no-drop; + + input + span::after { + background: #BBB; + } + } + + &.col { + flex-direction: column; + align-items: flex-start; + } + } + + input { + display: none; + + + span::after { + @include Transition(transform); + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(0); + width: 8px; + height: 8px; + border-radius: 100%; + background: var(--w-radio-color); + } + + &:checked + span::after { + transform: translate(-50%, -50%) scale(1); + } + + &:disabled + span { + background-color: #333; + border-color: #333; + } + } + + a { + text-decoration: underline; + } + + .radio-wrapper { + display: flex; + align-items: center; + gap: 10px; + } + + .radio { + display: inline-block; + width: 16px; + height: 16px; + border-radius: 100%; + border: 1px solid var(--w-radio-color); + position: relative; + } + + .sub-text { + margin-left: 25px; + font-size: 14px; + color: #BBB; + + a { + @include Transition(color); + color: #BBB; + + &:hover { + color: #FFF; + } + } + } +} diff --git a/src/components/Radio/radio.ts b/src/components/Radio/radio.ts new file mode 100644 index 0000000..9ec0e01 --- /dev/null +++ b/src/components/Radio/radio.ts @@ -0,0 +1,12 @@ +export type RadioProps = { + items: { + label: string + subText?: string + selected?: boolean + disabled?: boolean + }[] + name: string + color?: string + inline?: boolean + className?: string +} diff --git a/src/pages/checkbox.astro b/src/pages/checkbox.astro index a592e4f..552eaa0 100644 --- a/src/pages/checkbox.astro +++ b/src/pages/checkbox.astro @@ -61,10 +61,10 @@ const sections = [ - + diff --git a/src/pages/index.astro b/src/pages/index.astro index a62fff0..8b2e78e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -8,6 +8,7 @@ import Avatar from '@components/Avatar/Avatar.astro' import Badge from '@components/Badge/Badge.astro' import Button from '@components/Button/Button.astro' import Icon from '@components/Icon/Icon.astro' +import Radio from '@components/Radio/Radio.astro' import Rating from '@components/Rating/Rating.astro' import Switch from '@components/Switch/Switch.astro' import Checkbox from '@components/Checkbox/Checkbox.astro' @@ -74,7 +75,7 @@ import Checkbox from '@components/Checkbox/Checkbox.astro'

Paragraph inside a card

- + + + + - diff --git a/src/pages/radio.astro b/src/pages/radio.astro new file mode 100644 index 0000000..16bcb39 --- /dev/null +++ b/src/pages/radio.astro @@ -0,0 +1,124 @@ +--- +import Layout from '@static/Layout.astro' +import ComponentWrapper from '@static/ComponentWrapper.astro' + +import AstroRadio from '@components/Radio/Radio.astro' +import SvelteRadio from '@components/Radio/Radio.svelte' +import ReactRadio from '@components/Radio/Radio.tsx' + +const sections = [ + { + title: 'Astro radios', + component: AstroRadio + }, + { + title: 'Svelte radios', + component: SvelteRadio + }, + { + title: 'React radios', + component: ReactRadio + } +] +--- + + +

Radio

+
+ + + + + + + + + + + +
+ + {sections.map((section, index) => ( +

{section.title}

+
+ + link' }, + { label: 'Large' } + ]} + name={`radio1-${index}`} + /> + + + + + + + + + + + + businesses' }, + { label: 'Premium', subText: 'For enterprise solutions' } + ]} + name={`radio4-${index}`} + /> + + + + + + + + + +
+ ))} + diff --git a/src/scss/setup.scss b/src/scss/setup.scss index 2e1580b..b162828 100644 --- a/src/scss/setup.scss +++ b/src/scss/setup.scss @@ -14,6 +14,7 @@ $config: ( --w-switch-off-color: #252525; --w-switch-on-color: #FFF; --w-checkbox-color: #FFF; + --w-radio-color: #FFF; } @function config($key) { From d3ebdb290acf8020b050d4b1869c6077d8fc88e2 Mon Sep 17 00:00:00 2001 From: Frontendland Date: Thu, 20 Jun 2024 19:49:04 +0200 Subject: [PATCH 17/17] =?UTF-8?q?=E2=9C=A8=20Add=20Svelte=20and=20React=20?= =?UTF-8?q?playgrounds=20for=20interactive=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/card.ts | 1 + src/components/Checkbox/Checkbox.svelte | 11 +++-- src/components/Checkbox/Checkbox.tsx | 3 +- src/components/Radio/Radio.astro | 3 +- src/components/Radio/Radio.svelte | 3 +- src/components/Radio/Radio.tsx | 7 +-- src/components/Radio/radio.ts | 1 + src/components/Switch/Switch.svelte | 9 +++- src/components/Switch/Switch.tsx | 9 +++- src/pages/accordion.astro | 4 +- src/pages/index.astro | 12 ++++- src/pages/radio.astro | 42 ++++++++--------- src/pages/react.astro | 10 ++++ src/pages/svelte.astro | 10 ++++ src/playground/ReactPlayground.tsx | 63 +++++++++++++++++++++++++ src/playground/SveltePlayground.svelte | 57 ++++++++++++++++++++++ tsconfig.json | 3 +- 17 files changed, 209 insertions(+), 39 deletions(-) create mode 100644 src/pages/react.astro create mode 100644 src/pages/svelte.astro create mode 100644 src/playground/ReactPlayground.tsx create mode 100644 src/playground/SveltePlayground.svelte diff --git a/src/components/Card/card.ts b/src/components/Card/card.ts index 590158c..34c6708 100644 --- a/src/components/Card/card.ts +++ b/src/components/Card/card.ts @@ -5,4 +5,5 @@ export type CardProps = { compact?: boolean className?: string secondary?: boolean + [key: string]: any } diff --git a/src/components/Checkbox/Checkbox.svelte b/src/components/Checkbox/Checkbox.svelte index 966ccfe..462788c 100644 --- a/src/components/Checkbox/Checkbox.svelte +++ b/src/components/Checkbox/Checkbox.svelte @@ -13,7 +13,7 @@ export let boxed: CheckboxProps['boxed'] = false export let color: CheckboxProps['color'] = '' export let onClick: () => any = () => {} - + const classes = [ 'w-checkbox', boxed && 'boxed', @@ -25,13 +25,18 @@ : null - - + diff --git a/src/pages/index.astro b/src/pages/index.astro index 8b2e78e..dd3b222 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -28,11 +28,16 @@ import Checkbox from '@components/Checkbox/Checkbox.astro'
+ +
@@ -106,7 +111,7 @@ import Checkbox from '@components/Checkbox/Checkbox.astro' @@ -139,6 +144,9 @@ import Checkbox from '@components/Checkbox/Checkbox.astro' .cta { text-align: center; + display: flex; + justify-content: center; + gap: 10px; } .grid { diff --git a/src/pages/radio.astro b/src/pages/radio.astro index 16bcb39..097360e 100644 --- a/src/pages/radio.astro +++ b/src/pages/radio.astro @@ -27,14 +27,14 @@ const sections = [
@@ -42,7 +42,7 @@ const sections = [ @@ -55,9 +55,9 @@ const sections = [ link' }, - { label: 'Large' } + { label: 'Small', value: 'sm' }, + { label: 'Medium with link', value: 'md' }, + { label: 'Large', value: 'lg' } ]} name={`radio1-${index}`} /> @@ -66,9 +66,9 @@ const sections = [ @@ -77,9 +77,9 @@ const sections = [ @@ -88,9 +88,9 @@ const sections = [ businesses' }, - { label: 'Premium', subText: 'For enterprise solutions' } + { label: 'Starter', subText: 'For getting started', value: 'starter' }, + { label: 'Standard', subText: 'For existing small businesses', value: 'standard' }, + { label: 'Premium', subText: 'For enterprise solutions', value: 'premium' } ]} name={`radio4-${index}`} /> @@ -99,9 +99,9 @@ const sections = [ +

React Playground

+

For interactive elements

+ + diff --git a/src/pages/svelte.astro b/src/pages/svelte.astro new file mode 100644 index 0000000..e11293a --- /dev/null +++ b/src/pages/svelte.astro @@ -0,0 +1,10 @@ +--- +import Layout from '@static/Layout.astro' +import SveltePlayground from '@playground/SveltePlayground.svelte' +--- + + +

Svelte Playground

+

For interactive elements

+ + diff --git a/src/playground/ReactPlayground.tsx b/src/playground/ReactPlayground.tsx new file mode 100644 index 0000000..2dd9327 --- /dev/null +++ b/src/playground/ReactPlayground.tsx @@ -0,0 +1,63 @@ +import React from 'react' + +import Card from '@components/Card/Card.tsx' +import Accordion from '@components/Accordion/Accordion.tsx' +import Badge from '@components/Badge/Badge.tsx' +import Button from '@components/Button/Button.tsx' +import Checkbox from '@components/Checkbox/Checkbox.tsx' +import Radio from '@components/Radio/Radio.tsx' +import Switch from '@components/Switch/Switch.tsx' + +const ReactPlayground = () => { + return ( +
+ + + + + + console.log('👋')}>Click me + + + + + + + + console.log(`checked: ${e.target.checked}`)} + /> + + + + console.log('changed to:', e.target.value)} + /> + + + + console.log(`switched: ${e.target.checked}`)} + /> + +
+ ) + +} + +export default ReactPlayground diff --git a/src/playground/SveltePlayground.svelte b/src/playground/SveltePlayground.svelte new file mode 100644 index 0000000..85cbce6 --- /dev/null +++ b/src/playground/SveltePlayground.svelte @@ -0,0 +1,57 @@ + + +
+ + + + + + console.log('👋')}>Click me + + + + + + + + console.log(`checked: ${e.target.checked}`)} + /> + + + + console.log('changed to:', e.target.value)} + /> + + + + console.log(`switched: ${e.target.checked}`)} + /> + +
diff --git a/tsconfig.json b/tsconfig.json index fb48aa1..7bfdd80 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,8 @@ "types": ["vite/client"], "paths": { "@components/*": ["src/components/*"], - "@static/*": ["src/static/*"] + "@static/*": ["src/static/*"], + "@playground/*": ["src/playground/*"] } } }