chore(Badge): Add story for Badge about adding Icon to a badge (#1517)

* chore(Badge): Add story for Badge about adding Icon to a badge * StyleIcon -> WithIcon * Add more examples
priceline · Oct 28, 2024 · 326163c · 326163c
1 parent e2fbe74
commit 326163c
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 81 deletions.
diff --git a/common/changes/pcln-design-system/chore-add-badge-icon-story_2024-10-02-21-08.json b/common/changes/pcln-design-system/chore-add-badge-icon-story_2024-10-02-21-08.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Adds story to Badge about Icon styling",
+      "type": "none"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/packages/core/src/Badge/Badge.stories.tsx b/packages/core/src/Badge/Badge.stories.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
 import styled from 'styled-components'
+import { Trophy } from 'pcln-icons'
 import { Grid } from '../Grid/Grid'
 import { Text } from '../Text/Text'
+import { Flex } from '../Flex/Flex'
 import { colorSchemeNames } from '../storybook/args'
 import { textTransformValues } from '../utils/attrs/typographyAttrs'
 import { Badge, sizes, type BadgeProps } from './Badge'
@@ -103,3 +105,28 @@ const ColorSchemesTemplate = (args) => {
 }
 export const ColorSchemes = ColorSchemesTemplate.bind({})
 ColorSchemesTemplate.args = {}
+
+export const WithIcon = () => {
+  return (
+    <>
+      <Badge colorScheme='neutralDarkOnLight' size='captionMedium' textTransform='capitalize' m={3}>
+        <Flex>
+          <Trophy mr={1} size={16} />
+          <Text>Badge</Text>
+        </Flex>
+      </Badge>
+      <Badge colorScheme='neutralDarkOnLight' size='captionSmall' textTransform='capitalize' m={3}>
+        <Flex>
+          <Trophy mr={1} size={16} />
+          <Text>Badge</Text>
+        </Flex>
+      </Badge>
+      <Badge colorScheme='successDarkOnLight' size='captionMedium' textTransform='capitalize' m={3}>
+        <Flex>
+          <Trophy mr={1} size={16} />
+          <Text>Badge</Text>
+        </Flex>
+      </Badge>
+    </>
+  )
+}
diff --git a/packages/core/src/Banner/__snapshots__/Banner.spec.tsx.snap b/packages/core/src/Banner/__snapshots__/Banner.spec.tsx.snap
@@ -297,87 +297,6 @@ exports[`Banner renders with blue bg 1`] = `
 </div>
 `;
 
-exports[`Banner renders with custom iconName and size 1`] = `
-.c0 {
-  background-color: #0a0;
-  color: #fff;
-  text-align: left;
-}
-
-.c4 {
-  text-align: left;
-  width: 100%;
-}
-
-.c2 {
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-  line-height: 1;
-  margin-top: -2px;
-  margin-right: 8px;
-  width: 24px;
-}
-
-.c3 {
-  outline: none;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-}
-
-.c5 {
-  font-size: 14px;
-}
-
-<div
-  className="c0 "
-  color="text.lightest"
->
-  <div
-    className="c1"
-  >
-    <svg
-      aria-hidden={true}
-      className="c2 c3"
-      fill="currentcolor"
-      focusable={false}
-      height={24}
-      role="img"
-      tabIndex={-1}
-      viewBox="0 0 24 24"
-      width={24}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm-1.7 14.5L6 12.2 7.2 11l3.1 3.1 6.5-6.5L18 8.8l-7.7 7.7z"
-      />
-    </svg>
-    <div
-      className="c4"
-      width={1}
-    >
-      <span
-        className="c5"
-        fontSize={1}
-      />
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Banner renders with green bg 1`] = `
 .c2 {
   -webkit-flex: none;