diff --git a/.changeset/cool-deers-joke.md b/.changeset/cool-deers-joke.md new file mode 100644 index 0000000000..3ce5bba1fe --- /dev/null +++ b/.changeset/cool-deers-joke.md @@ -0,0 +1,5 @@ +--- +"docs": patch +--- + +feat(docs): copy SVG icon to clipboard diff --git a/.changeset/happy-peaches-arrive.md b/.changeset/happy-peaches-arrive.md new file mode 100644 index 0000000000..7b498ae214 --- /dev/null +++ b/.changeset/happy-peaches-arrive.md @@ -0,0 +1,6 @@ +--- +'docs': patch +'@marigold/components': patch +--- + +feat(comp): remove span from button and add some styles to the button element, add space prop to button diff --git a/docs/content/components/button.mdx b/docs/content/components/button.mdx index de6bd16a94..e28d1cc107 100644 --- a/docs/content/components/button.mdx +++ b/docs/content/components/button.mdx @@ -19,6 +19,7 @@ The style variant and size of the button can be added with the variant prop and | `variant` (optional) | `primary`, `secondary`, `ghost`, `text` | `primary` | | `size` (optional) | `small`, `large` | `large` | | `disabled` (optional) | boolean | | +| `space` (optional) | `ResponsiveStyleValue` | `none` | ## Import @@ -136,20 +137,20 @@ They can be used in a similar way of a secondary button, but they are meant to b Icons can be added in Order to make clearer what a button does. Buttons should not be made only with icons, because every user may understand them on a different way. ```tsx - ``` ```tsx - ``` ### Small Buttons -If there are many actions in one page, is it possible to use small buttons instead of big ones. As well if the page is required to be onpen on mobile devices. +If there are many actions in one page, is it possible to use small buttons instead of big ones. As well if the page is required to be open on mobile devices. ```tsx @@ -202,25 +203,25 @@ If there are many actions in one page, is it possible to use small buttons inste Icons can be added in Order to make clearer what a button does. Buttons should not be made only with icons, because every user may understand them on a different way.Icons can be added in Order to make clearer what a button does. Buttons should not be made only with icons, because every user may understand them on a different way. ```tsx - ``` ```tsx - ``` ```tsx - ``` ```tsx - ``` diff --git a/docs/content/components/icon.mdx b/docs/content/components/icon.mdx new file mode 100644 index 0000000000..486d0acd9e --- /dev/null +++ b/docs/content/components/icon.mdx @@ -0,0 +1,64 @@ +--- +title: Icon +--- + +# Icon + +## Installation + +### 1. React Icon component: + +Marigold Icons have a seperate package to install. +The first option is to install the package and use the Icons like other React components and as in the code example below. +You have to specify the name of the icon directly between the `< />` brackets. + +```bash onlyCode +# with npm +npm install @marigold/icons --save + +# with yarn +yarn add @marigold/icons +``` + +### 2. HTML SVG Element + +The second option is to go to [Marigold Icons](../../foundation/icons) and click on an Icon in the list to copy them as `` Element + +## Description + +With the Icon component you can render one of the [Marigold Icons](../../foundation/icons). +By adding the `size` prop you can change to another size. `24` is the default size. +The `fill` prop is the second attribute and per default `currentcolor`. + +## Properties + +| Property | Type | Default | +| :------- | :------- | :--------------- | +| `size` | `number` | `24` | +| `fill` | `string` | `'currentcolor'` | + +## Import + +```tsx onlyCode +import { DesignTicket } from '@marigold/icons'; +``` + +## Live-Code Example + +```tsx expandCode + +``` + +## Usage + +### size prop + +```tsx + +``` + +### fill prop + +```tsx + +``` diff --git a/docs/content/components/inline.mdx b/docs/content/components/inline.mdx index a248a4b64e..e14670aeed 100644 --- a/docs/content/components/inline.mdx +++ b/docs/content/components/inline.mdx @@ -13,7 +13,7 @@ Layout component to inline elements with space. This component uses the spaces f | Property | Type | Default | | :------- | :----------------------------- | :------- | | `space` | `ResponsiveStyleValue` | `none` | -| `align` | `left, right, center` | `center` | +| `align` | `center, top, bottom` | `center` | ## Import diff --git a/docs/content/foundation/iconography.mdx b/docs/content/foundation/iconography.mdx deleted file mode 100644 index 041101ef92..0000000000 --- a/docs/content/foundation/iconography.mdx +++ /dev/null @@ -1,1255 +0,0 @@ ---- -title: Icons ---- - -import { - Cancel, - Crop, - Edit, - FormatBold, - FormatItalic, - FormatSize, - HighlightOff, - Image, - Location, - Lock, - LockOpen, - Pause, - PauseAlt, - Play, - PlayAlt, - ResaleEdit, - RotateLeft, - RotateRight, - Save, - Sort, - SortDown, - SortUp, - Star, - Stop, - Underlined, - Zoom, - Accessible, - AutoRenew, - Banned, - Bus, - Calendar, - Camera, - Clock, - Direction, - Email, - EventDate, - Exclamation, - Feedback, - Food, - Globe, - Home, - Info, - Marker, - MobilePhone, - Notification, - Parking, - Phone, - Print, - Required, - ResaleLogbook, - Spinner, - Thumb, - Truck, - Cart, - CreditCard, - Group, - Id, - SmilieDissatisfied, - SmilieNeutral, - SmilieSatisfied, - SmilieVeryDissatisfied, - SmilieVerySatisfied, - User, - Deal, - DesignTicket, - GiftCard, - Membership, - Pickup, - Price, - Resale, - Scanner, - Seat, - Selling, - Ticket, - TicketInsurance, - Turnstile, - Add, - ArrowDown, - ArrowDownA, - ArrowLeft, - ArrowLeftA, - ArrowRight, - ArrowRightA, - ArrowUp, - ArrowUpA, - BurgerMenu, - Check, - CircleUnchecked, - CircleChecked, - Close, - Delete, - ExternalLink, - Filter, - IconMore, - Remove, - Search, - SettingDots, - SquareUnchecked, - SquareChecked, - Facebook, - Google, - Instagram, - Share, - Twitter, - Whatsapp, -} from '@marigold/icons'; -import { - Box, - Column, - Columns, - Container, - Heading, - Stack, - Text, -} from '@marigold/components'; - -# Marigold Icons - -## Installation - -In order to use Marigold icons, you first need to install the package: - -```bash onlyCode -# with npm -npm install @marigold/icons --save - -# with yarn -yarn add @marigold/icons -``` - -## Description - -With the Icon component you can render one of the icons below. -By adding the `size` prop you can change to another size. `24` is the default size. -The `fill` prop is the second attribute and per default `currentcolor`. - -## Properties - -| Property | Type | Default | -| :------- | :------- | :--------------- | -| `size` | `number` | `24` | -| `fill` | `string` | `'currentcolor'` | - -## Import - -```tsx onlyCode -import { DesignTicket } from '@marigold/icons'; -``` - -## Live-Code Example - -```tsx expandCode - -``` - -## Usage - -### size prop - -```tsx - -``` - -### fill prop - -```tsx - -``` - -UI - - - - ArrowUpA - - - - ArrowRightA - - - - ArrowDownA - - - - ArrowLeftA - - - - SettingDots - - - - Check - - - - Add - - - - Remove - - - - - - ArrowUp - - - - ArrowRight - - - - ArrowDown - - - - ArrowLeft - - - - IconMore - - - - Search - - - - SquareUnchecked - - - - SquareChecked - - - - - - ExternalLink - - - - Filter - - - - BurgerMenu - - - - Delete - - - - Close - - - - CircleUnchecked - - - - CircleChecked - - - - - -Info - - - - Accessible - - - - AutoRenew - - - - Banned - - - - Bus - - - - Calendar - - - - Camera - - - - Clock - - - - Direction - - - - Email - - - - - - EventDate - - - - Exclamation - - - - Feedback - - - - Food - - - - Globe - - - - Home - - - - Info - - - - Marker - - - - - - MobilePhone - - - - Notification - - - - Parking - - - - Required - - - - ResaleLogbook - - - - Spinner - - - - Thumb - - - - Truck - - - - - -Action - - - - Cancel - - - - Crop - - - - Edit - - - - FormatBold - - - - FormatItalic - - - - FormatSize - - - - HighlightOff - - - - Image - - - - Location - - - - - - Lock - - - - LockOpen - - - - Pause - - - - PauseAlt - - - - Play - - - - PlayAlt - - - - ResaleEdit - - - - RotateLeft - - - - RotateRight - - - - - - Save - - - - Sort - - - - SortDown - - - - SortUp - - - - Star - - - - Stop - - - - Underlined - - - - Zoom - - - - - -Ticketing - - - - Deal - - - - DesignTicket - - - - GiftCard - - - - Membership - - - - Pickup - - - - Price - - - - Resale - - - - - - Scanner - - - - Seat - - - - Selling - - - - Ticket - - - - TicketInsurance - - - - Turnstile - - - - - -User - - - - User - - - - Group - - - - Cart - - - - CreditCard - - - - SmilieVerySatisfied - - - - - - SmilieSatisfied - - - - SmilieNeutral - - - - SmilieDissatisfied - - - - SmilieVeryDissatisfied - - - - Id - - - - - -Social - - - - Facebook - - - - Google - - - - Instagram - - - - Share - - - - Twitter - - - - Whatsapp - - - - diff --git a/docs/content/foundation/icons.mdx b/docs/content/foundation/icons.mdx new file mode 100644 index 0000000000..47903925ed --- /dev/null +++ b/docs/content/foundation/icons.mdx @@ -0,0 +1,693 @@ +--- +title: Icons +--- + +import { + Cancel, + Crop, + Edit, + FormatBold, + FormatItalic, + FormatSize, + HighlightOff, + Image, + Location, + Lock, + LockOpen, + Pause, + PauseAlt, + Play, + PlayAlt, + ResaleEdit, + RotateLeft, + RotateRight, + Save, + Sort, + SortDown, + SortUp, + Star, + Stop, + Underlined, + Zoom, + Accessible, + AutoRenew, + Banned, + Bus, + Calendar, + Camera, + Clock, + Direction, + Email, + EventDate, + Exclamation, + Feedback, + Food, + Globe, + Home, + Info, + Marker, + MobilePhone, + Notification, + Parking, + Phone, + Print, + Required, + ResaleLogbook, + Spinner, + Thumb, + Truck, + Cart, + CreditCard, + Group, + Id, + SmilieDissatisfied, + SmilieNeutral, + SmilieSatisfied, + SmilieVeryDissatisfied, + SmilieVerySatisfied, + User, + Deal, + DesignTicket, + GiftCard, + Membership, + Pickup, + Price, + Resale, + Scanner, + Seat, + Selling, + Ticket, + TicketInsurance, + Turnstile, + Add, + ArrowDown, + ArrowDownA, + ArrowLeft, + ArrowLeftA, + ArrowRight, + ArrowRightA, + ArrowUp, + ArrowUpA, + BurgerMenu, + Check, + CircleUnchecked, + CircleChecked, + Close, + Delete, + ExternalLink, + Filter, + IconMore, + Remove, + Search, + SettingDots, + SquareUnchecked, + SquareChecked, + Facebook, + Google, + Instagram, + Share, + Twitter, + Whatsapp, +} from '@marigold/icons'; +import { + Box, + Column, + Columns, + Divider, + Heading, + Inline, + Text, +} from '@marigold/components'; +import { CopySVGIcon } from '../../src/components/CopySVGIcon'; + +# Marigold Icons + +Select a Marigold icon and use it as described [here](../../components/icon) +or click on an Icon in the list to copy them as `` Element + +UI + + + + ArrowUpA + + + + + ArrowRightA + + + + + ArrowDownA + + + + + ArrowLeftA + + + + + SettingDots + + + + + Check + + + + + Add + + + + + Remove + + + + + + + ArrowUp + + + + + ArrowRight + + + + + ArrowDown + + + + + ArrowLeft + + + + + IconMore + + + + + Search + + + + + SquareUnchecked + + + + + SquareChecked + + + + + + + ExternalLink + + + + + Filter + + + + + BurgerMenu + + + + + Delete + + + + + Close + + + + + CircleUnchecked + + + + + CircleChecked + + + + + + +Info + + + + Accessible + + + + + AutoRenew + + + + + Banned + + + + + Bus + + + + + Calendar + + + + + Camera + + + + + Clock + + + + + Direction + + + + + Email + + + + + + + EventDate + + + + + Exclamation + + + + + Feedback + + + + + Food + + + + + Globe + + + + + Home + + + + + Info + + + + + Marker + + + + + + + MobilePhone + + + + + Notification + + + + + Parking + + + + + Required + + + + + ResaleLogbook + + + + + Spinner + + + + + Thumb + + + + + Truck + + + + + + +Action + + + + Cancel + + + + + Crop + + + + + Edit + + + + + FormatBold + + + + + FormatItalic + + + + + FormatSize + + + + + HighlightOff + + + + + Image + + + + + Location + + + + + + + Lock + + + + + LockOpen + + + + + Pause + + + + + PauseAlt + + + + + Play + + + + + PlayAlt + + + + + ResaleEdit + + + + + RotateLeft + + + + + RotateRight + + + + + + + Save + + + + + Sort + + + + + SortDown + + + + + SortUp + + + + + Star + + + + + Stop + + + + + Underlined + + + + + Zoom + + + + + + +Ticketing + + + + Deal + + + + + DesignTicket + + + + + GiftCard + + + + + Membership + + + + + Pickup + + + + + Price + + + + + Resale + + + + + + + Scanner + + + + + Seat + + + + + Selling + + + + + Ticket + + + + + TicketInsurance + + + + + Turnstile + + + + + + +User + + + + User + + + + + Group + + + + + Cart + + + + + CreditCard + + + + + SmilieVerySatisfied + + + + + + + SmilieSatisfied + + + + + SmilieNeutral + + + + + SmilieDissatisfied + + + + + SmilieVeryDissatisfied + + + + + Id + + + + + + +Social + + + + Facebook + + + + + Google + + + + + Instagram + + + + + Share + + + + + Twitter + + + + + Whatsapp + + + + + diff --git a/docs/package.json b/docs/package.json index 238f0f3552..44b42e9518 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,6 +11,7 @@ "@marigold/types": "workspace:*", "@mdx-js/mdx": "1.6.22", "@mdx-js/react": "1.6.22", + "@mui/material": "^5.2.3", "babel-preset-gatsby": "2.3.0", "gatsby": "4.3.0", "gatsby-plugin-image": "2.3.0", diff --git a/docs/src/components/CopyButton.tsx b/docs/src/components/CopyButton.tsx index 7797b966d5..8bae448fcd 100644 --- a/docs/src/components/CopyButton.tsx +++ b/docs/src/components/CopyButton.tsx @@ -28,6 +28,6 @@ export const CopyButton: React.FC = ({ codeString }) => { ); }; -const copyToClipboard = (codeString: string) => { +export const copyToClipboard = (codeString: string) => { navigator.clipboard.writeText(codeString); }; diff --git a/docs/src/components/CopySVGIcon.tsx b/docs/src/components/CopySVGIcon.tsx new file mode 100644 index 0000000000..5a3212c87f --- /dev/null +++ b/docs/src/components/CopySVGIcon.tsx @@ -0,0 +1,42 @@ +import React, { ReactElement, useState } from 'react'; +import { renderToString } from 'react-dom/server'; +import { Snackbar, Tooltip } from '@mui/material'; + +import { Button } from '@marigold/components'; + +import { copyToClipboard } from './CopyButton'; + +export const CopySVGIcon: React.FC = ({ children }) => { + const [openSnackbar, setOpenSnackbar] = useState(false); + const [copied, setCopied] = useState(false); + + // remove class prop from stringified html element + const stringifiedChildren = renderToString(children as ReactElement); + const removeClassRegex = / class="[a-zA-Z0-9:;.\s()\-,]*"/; + const finalString = stringifiedChildren.replace(removeClassRegex, ''); + + return ( + <> + + + + setOpenSnackbar(false)} + message="Icon was copied as SVG to clipboard" + /> + + ); +}; diff --git a/docs/src/theme/components.ts b/docs/src/theme/components.ts index 8987f1359c..e10b2fecfa 100644 --- a/docs/src/theme/components.ts +++ b/docs/src/theme/components.ts @@ -49,6 +49,10 @@ const button = { px: 'small', py: 'xsmall', }, + table: { + px: 'xsmall', + py: 'small', + }, small: { px: 'xsmall', py: 'xxsmall', @@ -220,6 +224,9 @@ export const components = { large: { ...button.large, }, + table: { + ...button.table, + }, small: { ...button.small, }, @@ -231,7 +238,10 @@ export const components = { }, action: { ...button.primary, - pr: 'xsmall', + width: '100%', + alignItems: 'center', + justifyContent: 'space-between', + display: 'inline-flex', color: 'gray.40', bg: 'transparent', fontWeight: 'body', @@ -240,6 +250,9 @@ export const components = { ':focus': { outline: 'none', }, + ':hover': { + bg: '#FFF8F1', + }, }, select: { ...button.primary, diff --git a/packages/components/src/ActionGroup/ActionGroup.test.tsx b/packages/components/src/ActionGroup/ActionGroup.test.tsx index 1540190903..98a7f9a56a 100644 --- a/packages/components/src/ActionGroup/ActionGroup.test.tsx +++ b/packages/components/src/ActionGroup/ActionGroup.test.tsx @@ -78,6 +78,6 @@ test('supports verticalAlignment prop', () => { const button1 = screen.getByText(/Button1/); const button2 = screen.getByText(/Button2/); - expect(getTopPadding(button1)).toEqual(''); + expect(getTopPadding(button1.parentElement!)).toEqual(''); expect(button2.parentElement).toHaveStyle(`padding-top: 2px`); }); diff --git a/packages/components/src/Button/Button.test.tsx b/packages/components/src/Button/Button.test.tsx index a274f9dc11..71032f33b4 100644 --- a/packages/components/src/Button/Button.test.tsx +++ b/packages/components/src/Button/Button.test.tsx @@ -19,6 +19,10 @@ const theme = { fontFamily: 'Arial', }, }, + space: { + none: 0, + small: 2, + }, }; test('supports default variant', () => { @@ -29,7 +33,7 @@ test('supports default variant', () => { ); const button = screen.getByText(/button/); - expect(button.parentElement).toHaveStyle(`font-family: Inter`); + expect(button).toHaveStyle(`font-family: Inter`); }); test('supports default size', () => { @@ -40,7 +44,7 @@ test('supports default size', () => { ); const button = screen.getByText(/button/); - expect(button.parentElement).toHaveStyle(`padding: 16px`); + expect(button).toHaveStyle(`padding: 16px`); }); test('accepts other variant than default', () => { @@ -51,7 +55,7 @@ test('accepts other variant than default', () => { ); const button = screen.getByText(/button/); - expect(button.parentElement).toHaveStyle(`font-family: Arial`); + expect(button).toHaveStyle(`font-family: Arial`); }); test('accepts other size than default', () => { @@ -62,7 +66,7 @@ test('accepts other size than default', () => { ); const button = screen.getByText(/button/); - expect(button.parentElement).toHaveStyle(`padding: 16px`); + expect(button).toHaveStyle(`padding: 16px`); }); test('renders