From 54ed58c1f7e01696d4f45562cd9f1a5d791e3fcd Mon Sep 17 00:00:00 2001 From: Rakesh M R Date: Sun, 17 Jul 2022 21:07:38 +0530 Subject: [PATCH 1/5] fix: issue:339 --- package-lock.json | 121 +++++++++++++++++++------ src/components/Badge/Badge.stories.tsx | 6 ++ src/components/Badge/Badge.test.js | 5 + src/components/Badge/Badge.tsx | 7 +- 4 files changed, 110 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index cd5cde55..04753ca1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2135,12 +2135,6 @@ "csstype": "^2.5.7" } }, - "node_modules/@emotion/serialize/node_modules/csstype": { - "version": "2.6.17", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz", - "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==", - "dev": true - }, "node_modules/@emotion/sheet": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz", @@ -3339,6 +3333,11 @@ "csstype": "^3.0.4" } }, + "node_modules/@radix-ui/popper/node_modules/csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" + }, "node_modules/@radix-ui/primitive": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-0.1.0.tgz", @@ -7217,6 +7216,12 @@ "@types/react": "*" } }, + "node_modules/@types/react/node_modules/csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "devOptional": true + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -9759,6 +9764,15 @@ "node": ">=8" } }, + "node_modules/boxen/node_modules/type-fest": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", + "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -12445,9 +12459,10 @@ "dev": true }, "node_modules/csstype": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + "version": "2.6.20", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", + "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==", + "dev": true }, "node_modules/cyclist": { "version": "1.0.1", @@ -12998,6 +13013,12 @@ "csstype": "^3.0.2" } }, + "node_modules/dom-helpers/node_modules/csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "dev": true + }, "node_modules/dom-serializer": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz", @@ -29800,6 +29821,15 @@ "node": ">=8" } }, + "node_modules/read-pkg-up/node_modules/type-fest": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", + "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/read-pkg/node_modules/path-type": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz", @@ -34341,12 +34371,17 @@ } }, "node_modules/type-fest": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", - "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", + "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", "dev": true, + "optional": true, + "peer": true, "engines": { - "node": ">=8" + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/type-is": { @@ -38798,14 +38833,6 @@ "@emotion/unitless": "0.7.5", "@emotion/utils": "0.11.3", "csstype": "^2.5.7" - }, - "dependencies": { - "csstype": { - "version": "2.6.17", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz", - "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==", - "dev": true - } } }, "@emotion/sheet": { @@ -39707,6 +39734,13 @@ "requires": { "@babel/runtime": "^7.13.10", "csstype": "^3.0.4" + }, + "dependencies": { + "csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==" + } } }, "@radix-ui/primitive": { @@ -42563,6 +42597,14 @@ "@types/prop-types": "*", "@types/scheduler": "*", "csstype": "^3.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "devOptional": true + } } }, "@types/react-syntax-highlighter": { @@ -44626,6 +44668,12 @@ "requires": { "has-flag": "^4.0.0" } + }, + "type-fest": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", + "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", + "dev": true } } }, @@ -46773,9 +46821,10 @@ } }, "csstype": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", - "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + "version": "2.6.20", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz", + "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==", + "dev": true }, "cyclist": { "version": "1.0.1", @@ -47235,6 +47284,14 @@ "requires": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.0.tgz", + "integrity": "sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==", + "dev": true + } } }, "dom-serializer": { @@ -59994,6 +60051,12 @@ "dev": true } } + }, + "type-fest": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", + "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", + "dev": true } } }, @@ -63598,10 +63661,12 @@ "dev": true }, "type-fest": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", - "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", - "dev": true + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", + "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", + "dev": true, + "optional": true, + "peer": true }, "type-is": { "version": "1.6.18", diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx index a4401d3e..ad182562 100644 --- a/src/components/Badge/Badge.stories.tsx +++ b/src/components/Badge/Badge.stories.tsx @@ -50,6 +50,8 @@ export const large = (args: any) => Hello world export const withDotLarge = (args: any) => Hello world +export const withCustomClassNames = (args: any) => Hello world + export const allBadges = () => ( <>
@@ -88,3 +90,7 @@ withDotLarge.args = { size: 'large', dot: true, } + +withCustomClassNames.args = { + overlayClasses: ' border-teal-50 border-2' +} diff --git a/src/components/Badge/Badge.test.js b/src/components/Badge/Badge.test.js index c4f54395..85199033 100644 --- a/src/components/Badge/Badge.test.js +++ b/src/components/Badge/Badge.test.js @@ -47,4 +47,9 @@ describe('#Badge', () => { `sbui-badge ${size === 'large' ? 'sbui-badge--large' : ''}` ) }) + + it('should render with overlay Classes',()=>{ + render(Badge) + expect(screen.getByText('Badge')).toHaveClass('border-2') + }) }) diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index d3158daa..db4dbbb6 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -35,9 +35,11 @@ interface Props { children: string | React.ReactNode size?: 'large' | 'small' dot?: boolean + overlayClasses?: string + } -function Badge({ color = 'brand', children, size, dot }: Props) { +function Badge({ color = 'brand', children, size, dot,overlayClasses }: Props) { const __styles = styleHandler('badge') let classes = [__styles.base] @@ -47,6 +49,9 @@ function Badge({ color = 'brand', children, size, dot }: Props) { if (size === 'large') { classes.push(__styles.size.large) } + if(overlayClasses){ + classes.push(overlayClasses) + } return ( From 3004378061883eddf68011ae15d26fc8b16517e5 Mon Sep 17 00:00:00 2001 From: Rakesh M R Date: Mon, 18 Jul 2022 09:03:54 +0530 Subject: [PATCH 2/5] rename prop overlayClasses to className --- src/components/Badge/Badge.stories.tsx | 2 +- src/components/Badge/Badge.test.js | 4 ++-- src/components/Badge/Badge.tsx | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx index ad182562..bfa6e4c5 100644 --- a/src/components/Badge/Badge.stories.tsx +++ b/src/components/Badge/Badge.stories.tsx @@ -92,5 +92,5 @@ withDotLarge.args = { } withCustomClassNames.args = { - overlayClasses: ' border-teal-50 border-2' + className: ' border-teal-50 border-2' } diff --git a/src/components/Badge/Badge.test.js b/src/components/Badge/Badge.test.js index 85199033..9877cee4 100644 --- a/src/components/Badge/Badge.test.js +++ b/src/components/Badge/Badge.test.js @@ -48,8 +48,8 @@ describe('#Badge', () => { ) }) - it('should render with overlay Classes',()=>{ - render(Badge) + it('should render with Classes',()=>{ + render(Badge) expect(screen.getByText('Badge')).toHaveClass('border-2') }) }) diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index db4dbbb6..e4fb2b57 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -35,11 +35,11 @@ interface Props { children: string | React.ReactNode size?: 'large' | 'small' dot?: boolean - overlayClasses?: string + className?: string } -function Badge({ color = 'brand', children, size, dot,overlayClasses }: Props) { +function Badge({ color = 'brand', children, size, dot,className }: Props) { const __styles = styleHandler('badge') let classes = [__styles.base] @@ -49,8 +49,8 @@ function Badge({ color = 'brand', children, size, dot,overlayClasses }: Props) { if (size === 'large') { classes.push(__styles.size.large) } - if(overlayClasses){ - classes.push(overlayClasses) + if(className){ + classes.push(className) } return ( From 5ebb112478b25be76ee433ab2b635be665542bec Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Mon, 18 Jul 2022 11:43:39 +0800 Subject: [PATCH 3/5] formatting --- src/components/Badge/Badge.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index e4fb2b57..39f2d263 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -35,11 +35,10 @@ interface Props { children: string | React.ReactNode size?: 'large' | 'small' dot?: boolean - className?: string - + className?: string } -function Badge({ color = 'brand', children, size, dot,className }: Props) { +function Badge({ color = 'brand', children, size, dot, className }: Props) { const __styles = styleHandler('badge') let classes = [__styles.base] @@ -49,7 +48,7 @@ function Badge({ color = 'brand', children, size, dot,className }: Props) { if (size === 'large') { classes.push(__styles.size.large) } - if(className){ + if (className) { classes.push(className) } From 8c66138d145f3376081ff6ad5a215f4354d36c59 Mon Sep 17 00:00:00 2001 From: Jonathan Summers-Muir Date: Mon, 18 Jul 2022 11:43:48 +0800 Subject: [PATCH 4/5] formatting --- src/components/Badge/Badge.stories.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx index bfa6e4c5..e339bca0 100644 --- a/src/components/Badge/Badge.stories.tsx +++ b/src/components/Badge/Badge.stories.tsx @@ -50,7 +50,9 @@ export const large = (args: any) => Hello world export const withDotLarge = (args: any) => Hello world -export const withCustomClassNames = (args: any) => Hello world +export const withCustomClassNames = (args: any) => ( + Hello world +) export const allBadges = () => ( <> @@ -92,5 +94,5 @@ withDotLarge.args = { } withCustomClassNames.args = { - className: ' border-teal-50 border-2' + className: ' border-teal-50 border-2', } From a5cc8fd1b2b48227deea1b4d99ca8393a790d00a Mon Sep 17 00:00:00 2001 From: Rakesh M R Date: Mon, 18 Jul 2022 09:24:46 +0530 Subject: [PATCH 5/5] style changes --- src/components/Badge/Badge.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx index e339bca0..d27bcd12 100644 --- a/src/components/Badge/Badge.stories.tsx +++ b/src/components/Badge/Badge.stories.tsx @@ -94,5 +94,5 @@ withDotLarge.args = { } withCustomClassNames.args = { - className: ' border-teal-50 border-2', + className: 'border-teal-100 border-2' }