diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index b498248..71cc868 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -4,3 +4,5 @@ Changes proposed in this pull request: - - - + +Bumped version to: v0.0.0 \ No newline at end of file diff --git a/.github/workflows/nodejsci.yml b/.github/workflows/nodejsci.yml index 7d7b3b8..07d9766 100644 --- a/.github/workflows/nodejsci.yml +++ b/.github/workflows/nodejsci.yml @@ -1,8 +1,6 @@ name: Node.js CI on: - push: - branches: [ main ] pull_request: branches: [ main ] diff --git a/docs/COMPONENTS.md b/docs/COMPONENTS.md index 70d5c94..7b1688f 100644 --- a/docs/COMPONENTS.md +++ b/docs/COMPONENTS.md @@ -12,35 +12,21 @@ Tabs provide a tabbed navigation. Use `Tab` elements as children of `Tabs`. `Tabs` Properties: -- **separator** - ReactNode (optional) -- **selectedId** - string (optional) - **children** - one or more `Tab` elements (required) -- **onChange** - `(newId: string, oldId?: string) => void` (optional) `Tabs.Tab` Properties: -- **id** - string (required) -- **title** - ReactNode (required) -- **children** - ReactNode (required) +- **title** - string (required) +- **active** - boolean (required) +- **onClick** - `() => void` (required) Example: ```tsx import { Tabs } from '@maskingtech/designsystem'; -} onChange={(n,o)=>console.log(n,o)}> - First content - Second content +console.log(n,o)}> + console.log('First clicked')} /> + console.log('Second clicked')} /> ``` - -Customization options (selector: `.tabs`): - -- `--margin` (default: `var(--margin-container)`) -- `--foreground-color` (default: `var(--color-primary-foreground)`) -- `--font-size-nav` (default: `1.1em`) -- `--background-color-nav-item` (default: `transparent`) -- `--background-color-nav-item-active` (default: `var(--background-color-nav-item)`) -- `--background-color-nav-item-hover` (default: `var(--color-background-hover)`) -- `--padding-nav-item` (default: `0.5em 1em`) -- `--margin-separator` (default: `0.2em 0 1em 0`) diff --git a/docs/CUSTOMIZATION.md b/docs/CUSTOMIZATION.md index 2bb0de7..f22070a 100644 --- a/docs/CUSTOMIZATION.md +++ b/docs/CUSTOMIZATION.md @@ -89,6 +89,7 @@ import '/path/to/customizations.css'; ### Input properties +- `--input-background-hover-color` (default: `rgba(0, 0, 0, 0.05)`) - `--input-border-style` (default: `solid`) - `--input-border-color` (default: `var(--color-border)`) - `--input-border-small` (default: `0.05em`) diff --git a/docs/ELEMENTS.md b/docs/ELEMENTS.md index 6827db3..b97de58 100644 --- a/docs/ELEMENTS.md +++ b/docs/ELEMENTS.md @@ -413,10 +413,12 @@ Customization options (selector: `.button`): ### ClickArea -A wrapper element that handles clicks and optional padding. +A wrapper element that handles clicks and optional alignment, hover effect and padding. Properties: +- **alignX** - `left` | `center` | `right` (optional, default `left`) +- **effect** - `none` | `hover` (optional, default `none`) - **padding** - `none` | `small` | `medium` | `large` (optional, default `none`) - **onClick** - `() => void` (optional) - **children** - ReactNode (optional) @@ -431,10 +433,11 @@ import { ClickArea } from '@maskingtech/designsystem'; Customization options (selector: `.clickarea`): +- `--background-hover-color` (default `var(--input-background-hover-color)`) - `--margin` (default: `0`) -- `--padding-small` (default: `var(--container-padding-small)`) -- `--padding-medium` (default: `var(--container-padding-medium)`) -- `--padding-large` (default: `var(--container-padding-large)`) +- `--padding-small` (default: `var(--input-padding-small)`) +- `--padding-medium` (default: `var(--input-padding-medium)`) +- `--padding-large` (default: `var(--input-padding-large)`) ### Link @@ -610,6 +613,7 @@ Properties: - **value** - string (optional) - **border** - `small` | `medium` | `large` (optional, default `small`) - **size** - `small` | `medium` | `large` (optional, default `medium`) +- **cols** - number (optional) - **rows** - number (optional) - **limit** - number (optional) - **onChange** - `ChangeEventHandler` (optional) diff --git a/package.json b/package.json index 8c42576..1bc6e1d 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@maskingtech/designsystem", "private": false, - "version": "0.0.4", + "version": "0.0.5", "type": "module", "repository": { "url": "https://github.com/MaskingTechnology/designsystem" diff --git a/src/DesignSystem.css b/src/DesignSystem.css index df6e2ea..9519459 100644 --- a/src/DesignSystem.css +++ b/src/DesignSystem.css @@ -58,6 +58,8 @@ --container-padding-medium: 1.5em; --container-padding-large: 2em; + --input-background-hover-color: rgba(0, 0, 0, 0.05); + --input-border-style: solid; --input-border-color: var(--color-border); diff --git a/src/components/tabs/Tab.tsx b/src/components/tabs/Tab.tsx index 5ed6cfd..4a005b2 100644 --- a/src/components/tabs/Tab.tsx +++ b/src/components/tabs/Tab.tsx @@ -1,15 +1,17 @@ -import type { ReactNode } from 'react'; +import { ClickArea, Column, Text } from '../../index'; export type Props = { - readonly id: string; - readonly title: ReactNode; - readonly children: ReactNode; + readonly title: string; + readonly active: boolean; + readonly onClick: () => void; }; -export default function Tab({ children }: Props) +export default function Tab({ title, active, onClick }: Props) { - return
- {children} -
; + return + + + + ; } diff --git a/src/components/tabs/Tabs.css b/src/components/tabs/Tabs.css deleted file mode 100644 index ffd982d..0000000 --- a/src/components/tabs/Tabs.css +++ /dev/null @@ -1,61 +0,0 @@ -.mtds -{ - .tabs - { - --margin: var(--margin-container); - - --foreground-color: var(--color-primary-foreground); - - --font-size-nav: 1.1em; - - --background-color-nav-item: transparent; - --background-color-nav-item-active: var(--background-color-nav-item); - --background-color-nav-item-hover: var(--color-background-hover); - --padding-nav-item: 0.5em 1em; - - --margin-separator: 0.2em 0 1em 0; - - display: flex; - flex-direction: column; - - margin: var(--margin); - - .nav - { - display: flex; - flex-direction: row; - justify-content: center; - - color: var(--foreground-color); - font-size: var(--font-size-nav); - - .item - { - background: var(--background-color-nav-item); - - cursor: pointer; - padding: var(--padding-nav-item); - width: 100%; - - text-align: center; - - &:hover, - &.active:hover - { - background: var(--background-color-nav-item-hover); - } - - &.active - { - background: var(--background-color-nav-item-active); - font-weight: var(--font-weight-bold); - } - } - } - - .separator - { - margin: var(--margin-separator); - } - } -} \ No newline at end of file diff --git a/src/components/tabs/Tabs.tsx b/src/components/tabs/Tabs.tsx index 29cace4..3273383 100644 --- a/src/components/tabs/Tabs.tsx +++ b/src/components/tabs/Tabs.tsx @@ -1,89 +1,23 @@ -import type { ReactElement, ReactNode } from 'react'; -import { useEffect, useEffectEvent, useMemo, useState } from 'react'; +import type { ReactElement } from 'react'; + +import { Column, Row, Ruler } from '../../index'; import Tab from './Tab'; import type { Props as TabProps } from './Tab'; -import './Tabs.css'; - type Props = { - readonly separator?: ReactNode; - readonly selectedId?: string; - readonly children: ReactElement | ReactElement[]; - readonly onChange?: (newId: string, oldId?: string) => void; + readonly children?: ReactElement | ReactElement[]; }; -export function Tabs({ separator, selectedId, children, onChange }: Props) +export function Tabs({ children }: Props) { - const [selected, setSelected] = useState(selectedId ?? ''); - - const tabList = useMemo(() => - { - return Array.isArray(children) ? children : [children]; - - }, [children]); - - const tabMap = useMemo(() => - { - const tabs: Record = {}; - - tabList.forEach((element) => - { - const tabId = element.props.id; - tabs[tabId] = element; - }); - - return tabs; - }, [tabList]); - - const updateSelected = useEffectEvent((selectedId?: string) => - { - const firstTabId = tabList[0]?.props.id; - - setSelected(selectedId ?? firstTabId); - }); - - useEffect(() => - { - updateSelected(selectedId); - }, [selectedId, tabList]); - - const handleChange = (tabId: string) => - { - if (onChange !== undefined) - { - onChange(tabId, selected); - } - - setSelected(tabId); - }; - - return
-
- { - tabList.map(element => - { - const tabId = element.props.id; - const key = `tab-${tabId}`; - const style = tabId === selected ? 'active' : 'inactive'; - const handleClick = () => handleChange(element.props.id); - - return ( -
- {element.props.title} -
- ); - }) - } -
- { - separator !== undefined - ?
{separator}
- : null - } -
{tabMap[selected]}
-
; + return + + {children} + + + ; } Tabs.Tab = Tab; diff --git a/src/elements/clickarea/ClickArea.css b/src/elements/clickarea/ClickArea.css index ba4830e..5e5cc95 100644 --- a/src/elements/clickarea/ClickArea.css +++ b/src/elements/clickarea/ClickArea.css @@ -2,16 +2,39 @@ { .clickarea { + --background-hover-color: var(--input-background-hover-color); + --margin: 0; - --padding-small: var(--container-padding-small); - --padding-medium: var(--container-padding-medium); - --padding-large: var(--container-padding-large); + --padding-small: var(--input-padding-small); + --padding-medium: var(--input-padding-medium); + --padding-large: var(--input-padding-large); cursor: pointer; - display: inline-block; + display: flex; + flex-direction: column; margin: var(--margin); + &.align-x-left + { + align-items: flex-start; + } + + &.align-x-center + { + align-items: center; + } + + &.align-x-right + { + align-items: flex-end; + } + + &.effect-hover:hover + { + background-color: var(--background-hover-color); + } + &.padding-none { padding: 0; diff --git a/src/elements/clickarea/ClickArea.tsx b/src/elements/clickarea/ClickArea.tsx index d4a0b2c..28d1daf 100644 --- a/src/elements/clickarea/ClickArea.tsx +++ b/src/elements/clickarea/ClickArea.tsx @@ -4,15 +4,19 @@ import type { ReactNode } from 'react'; import './ClickArea.css'; type Props = { + readonly alignX?: 'left' | 'center' | 'right'; + readonly effect?: 'none' | 'hover'; readonly padding?: 'none' | 'small' | 'medium' | 'large'; readonly onClick?: () => void; readonly children?: ReactNode; }; -export function ClickArea({ padding = 'none', onClick, children }: Props) +export function ClickArea({ alignX = 'left', effect = 'none', padding = 'none', onClick, children }: Props) { const className = 'clickarea' - + ' padding-' + padding; + + ' padding-' + padding + + ' align-x-' + alignX + + ' effect-' + effect; return
{children} diff --git a/src/elements/textarea/TextArea.tsx b/src/elements/textarea/TextArea.tsx index 0db2ea7..0f4ba7b 100644 --- a/src/elements/textarea/TextArea.tsx +++ b/src/elements/textarea/TextArea.tsx @@ -11,6 +11,7 @@ export type Props = { readonly value?: string; readonly border?: 'none' | 'small' | 'medium' | 'large'; readonly size?: 'small' | 'medium' | 'large'; + readonly cols?: number; readonly rows?: number; readonly limit?: number; readonly onChange?: ChangeEventHandler; @@ -18,7 +19,7 @@ export type Props = { type Ref = HTMLTextAreaElement; -export const TextArea = forwardRef(function Element({ name, placeholder, defaultValue, value, border ='small', size = 'medium', rows, limit, onChange }, ref) +export const TextArea = forwardRef(function Element({ name, placeholder, defaultValue, value, border ='small', size = 'medium', cols, rows, limit, onChange }, ref) { const className = 'textarea' + ' border-' + border @@ -30,6 +31,7 @@ export const TextArea = forwardRef(function Element({ name, placehol placeholder={placeholder} defaultValue={defaultValue} value={value} + cols={cols} rows={rows} ref={ref} maxLength={limit}