From a7d9deb261e91a515ce59bc0d0100ae6b9792570 Mon Sep 17 00:00:00 2001 From: Adam Laker Illoul <85499621+Ademsk1@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:23:46 +0000 Subject: [PATCH] Feat/144 oss icons (#176) * feat: add in oss icons * feat: working on Icons mdx * feat: add assets to index, improve icon docs * feat: add index to components * fix: remove svg-to-ts * fix: imports of icons * fix: rename icons * feat: add angle-down and calendar * fix: docs * fix: viewbox * fix: changes to icons * fix: icons * fix: how to import --- .svg-to-tsrc | 18 ---- src/assets/build/angle-down.icon.tsx | 17 ++-- src/assets/build/calendar.icon.tsx | 88 +++++++++++++++++++ src/assets/build/calender.icon.tsx | 36 -------- src/assets/build/check.icon.tsx | 2 +- ...fault.icon.tsx => circle-outline.icon.tsx} | 7 +- ...adio-selected.icon.tsx => circle.icon.tsx} | 2 +- .../build/{clear.icon.tsx => close.icon.tsx} | 3 +- src/assets/build/code.icon.tsx | 18 ++++ src/assets/build/folder.icon.tsx | 16 ++++ src/assets/build/minus.icon.tsx | 2 +- src/assets/build/plus.icon.tsx | 4 +- src/assets/build/search.icon.tsx | 2 +- src/assets/build/user-groups-outline.icon.tsx | 45 ++++++++++ src/assets/build/user.icon.tsx | 3 +- src/assets/index.ts | 10 ++- src/components/Checkbox/index.tsx | 6 +- src/components/Chip/index.tsx | 4 +- src/components/Input/index.tsx | 8 +- src/components/Radio/RadioGroupItem.tsx | 4 +- src/components/StepsIndicator/Step.tsx | 4 +- src/components/index.ts | 10 +++ src/index.ts | 12 +-- stories/Icons.mdx | 24 +++++ stories/Table/Table.example.tsx | 4 +- 25 files changed, 247 insertions(+), 102 deletions(-) delete mode 100644 .svg-to-tsrc create mode 100644 src/assets/build/calendar.icon.tsx delete mode 100644 src/assets/build/calender.icon.tsx rename src/assets/build/{progress-default.icon.tsx => circle-outline.icon.tsx} (58%) rename src/assets/build/{radio-selected.icon.tsx => circle.icon.tsx} (78%) rename src/assets/build/{clear.icon.tsx => close.icon.tsx} (91%) create mode 100644 src/assets/build/code.icon.tsx create mode 100644 src/assets/build/folder.icon.tsx create mode 100644 src/assets/build/user-groups-outline.icon.tsx create mode 100644 src/components/index.ts create mode 100644 stories/Icons.mdx diff --git a/.svg-to-tsrc b/.svg-to-tsrc deleted file mode 100644 index 19d0ede7..00000000 --- a/.svg-to-tsrc +++ /dev/null @@ -1,18 +0,0 @@ -{ - "srcFiles": [ - "./src/assets/svg-icons/*.svg" - ], - "tsx": true, - "objectName": "Icons", - "outputDirectory": "./src/assets/", - "interfaceName": "Icons", - "typeName": "Icons", - "prefix": "", - "fileName": "index", - "svgoConfig": { - "plugins": [ - "cleanupAttrs" - ] - }, - "compileSources": true -} diff --git a/src/assets/build/angle-down.icon.tsx b/src/assets/build/angle-down.icon.tsx index 494a1085..e095b46f 100644 --- a/src/assets/build/angle-down.icon.tsx +++ b/src/assets/build/angle-down.icon.tsx @@ -1,17 +1,18 @@ -const AngleDown = (props: any) => ( +export const AngleDownIcon = (props: any) => ( ) -export default AngleDown diff --git a/src/assets/build/calendar.icon.tsx b/src/assets/build/calendar.icon.tsx new file mode 100644 index 00000000..7662bf19 --- /dev/null +++ b/src/assets/build/calendar.icon.tsx @@ -0,0 +1,88 @@ +export const CalendarIcon = (props: any) => ( + + + + + + + + + + + + + + + + + + + + + + + + + +) diff --git a/src/assets/build/calender.icon.tsx b/src/assets/build/calender.icon.tsx deleted file mode 100644 index 75c63e8d..00000000 --- a/src/assets/build/calender.icon.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react' -const CalendarIcon = (props: any) => ( - - - - - - - - - - -) -export default CalendarIcon diff --git a/src/assets/build/check.icon.tsx b/src/assets/build/check.icon.tsx index 01abe3dd..d291ae74 100644 --- a/src/assets/build/check.icon.tsx +++ b/src/assets/build/check.icon.tsx @@ -1,4 +1,4 @@ -export const Check = (props: any) => ( +export const CheckIcon = (props: any) => ( ( +export const CircleOutlineIcon = (props: any) => ( ( ) -export default ProgressDefault diff --git a/src/assets/build/radio-selected.icon.tsx b/src/assets/build/circle.icon.tsx similarity index 78% rename from src/assets/build/radio-selected.icon.tsx rename to src/assets/build/circle.icon.tsx index 8380fe3c..fe0b06e6 100644 --- a/src/assets/build/radio-selected.icon.tsx +++ b/src/assets/build/circle.icon.tsx @@ -1,4 +1,4 @@ -export const RadioSelected = (props: any) => ( +export const CircleIcon = (props: any) => ( diff --git a/src/assets/build/clear.icon.tsx b/src/assets/build/close.icon.tsx similarity index 91% rename from src/assets/build/clear.icon.tsx rename to src/assets/build/close.icon.tsx index 66672473..1ab58c3f 100644 --- a/src/assets/build/clear.icon.tsx +++ b/src/assets/build/close.icon.tsx @@ -1,8 +1,9 @@ -export const ClearButton = (props: any) => ( +export const CloseIcon = (props: any) => ( ( + + + +) diff --git a/src/assets/build/folder.icon.tsx b/src/assets/build/folder.icon.tsx new file mode 100644 index 00000000..ae9618af --- /dev/null +++ b/src/assets/build/folder.icon.tsx @@ -0,0 +1,16 @@ +export const FolderIcon = (props: any) => ( + + + +) diff --git a/src/assets/build/minus.icon.tsx b/src/assets/build/minus.icon.tsx index e4f8ed37..3298fb90 100644 --- a/src/assets/build/minus.icon.tsx +++ b/src/assets/build/minus.icon.tsx @@ -1,4 +1,4 @@ -export const Minus = (props: any) => ( +export const MinusIcon = (props: any) => ( ( +export const PlusIcon = (props: any) => ( diff --git a/src/assets/build/search.icon.tsx b/src/assets/build/search.icon.tsx index 6411b980..10943730 100644 --- a/src/assets/build/search.icon.tsx +++ b/src/assets/build/search.icon.tsx @@ -1,4 +1,4 @@ -export const SearchOutline = (props: any) => ( +export const SearchIcon = (props: any) => ( ( + + + + + + + + + + + + + +) diff --git a/src/assets/build/user.icon.tsx b/src/assets/build/user.icon.tsx index b2b5865a..93bb840d 100644 --- a/src/assets/build/user.icon.tsx +++ b/src/assets/build/user.icon.tsx @@ -1,4 +1,4 @@ -export const User = (props: any) => ( +export const UserIcon = (props: any) => ( ( fill="none" color="inherit" stroke="currentColor" + viewBox="0 0 20 20" {...props} > {(props.checked === true || props.checked === undefined) && ( - + )} {props.checked === 'indeterminate' && ( - + )} diff --git a/src/components/Chip/index.tsx b/src/components/Chip/index.tsx index eb72d12b..7c5b1c18 100644 --- a/src/components/Chip/index.tsx +++ b/src/components/Chip/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import { cva, VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' -import { Plus } from '@/assets' +import { PlusIcon } from '@/assets' const chipVariants = cva( [ @@ -82,7 +82,7 @@ const Chip = React.forwardRef( > {children}
- { const convertTypeToComponent = { left: { - text: , - search: + text: , + search: } } @@ -103,7 +103,7 @@ const Input = React.forwardRef( ) => { const leftSideComponent = leftSideChild ?? convertTypeToComponent.left[`${type}`] - const rightSideComponent = rightSideChild ?? + const rightSideComponent = rightSideChild ?? return (
diff --git a/src/components/Radio/RadioGroupItem.tsx b/src/components/Radio/RadioGroupItem.tsx index be63fddb..7302e660 100644 --- a/src/components/Radio/RadioGroupItem.tsx +++ b/src/components/Radio/RadioGroupItem.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import * as RadioGroupPrimitive from '@radix-ui/react-radio-group' import { cn } from '@/lib/utils' import { cva } from 'class-variance-authority' -import { RadioSelected } from '@/assets' +import { CircleIcon } from '@/assets' type RadioGroupItemProps = React.ComponentPropsWithoutRef< typeof RadioGroupPrimitive.Item @@ -37,7 +37,7 @@ const RadioGroupItem = React.forwardRef< {...props} > - + ) diff --git a/src/components/StepsIndicator/Step.tsx b/src/components/StepsIndicator/Step.tsx index 2953b0ae..0abfa73d 100644 --- a/src/components/StepsIndicator/Step.tsx +++ b/src/components/StepsIndicator/Step.tsx @@ -1,4 +1,4 @@ -import ProgressDefault from '@/assets/build/progress-default.icon' +import { CircleOutlineIcon } from '@/assets' import { cn } from '@/lib/utils' import { cva } from 'class-variance-authority' @@ -17,7 +17,7 @@ const stepVariant = cva([ const Step = ({ selected, className }: StepProps) => { return ( - diff --git a/src/components/index.ts b/src/components/index.ts new file mode 100644 index 00000000..536fdbb7 --- /dev/null +++ b/src/components/index.ts @@ -0,0 +1,10 @@ +export * from './Button' +export * from './Checkbox' +export * from './Label' +export * from './Radio' +export * from './Table' +export * from './ButtonGroup' +export * from './Tooltip' +export * from './Input' +export * from './Switch' +export * from './Chip' diff --git a/src/index.ts b/src/index.ts index fe04bc93..9821e90f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,11 +1,3 @@ export { default as colors } from './colors' -export * from './components/Button' -export * from './components/Checkbox' -export * from './components/Label' -export * from './components/Radio' -export * from './components/Table' -export * from './components/ButtonGroup' -export * from './components/Tooltip' -export * from './components/Input' -export * from './components/Switch' -export * from './components/Chip' +export * from './components' +export * from './assets' diff --git a/stories/Icons.mdx b/stories/Icons.mdx new file mode 100644 index 00000000..1d95baf3 --- /dev/null +++ b/stories/Icons.mdx @@ -0,0 +1,24 @@ +import { Meta } from '@storybook/blocks' +import * as Icons from '@/assets' + + + +# Icons + +The current list below shows the usable icons from this package. Their names denote how one should import them i.e. `import {UserGroupIcon} from "@nearform/quantum"`. + +
+ {Object.keys(Icons).map(Icon => { + const IconComponent = Icons[`${Icon}`] + return ( +
+ {' '} + +

{Icon}

+
+ ) + })} +
diff --git a/stories/Table/Table.example.tsx b/stories/Table/Table.example.tsx index 56640ce7..36bff5c4 100644 --- a/stories/Table/Table.example.tsx +++ b/stories/Table/Table.example.tsx @@ -10,7 +10,7 @@ import { } from '@/components/Table' import { Checkbox } from '@/components/Checkbox' import { Label } from '@/components/Label' -import { User } from '@/assets' +import { UserIcon } from '@/assets' export const TableDemo = ({ variant }: TableBodyProps) => { return ( @@ -20,7 +20,7 @@ export const TableDemo = ({ variant }: TableBodyProps) => { Header Cell
- User + User
Method